@nomideusz/svelte-calendar 0.21.0 → 1.0.0

package/dist/headless/create-range-agenda.svelte.js

@@ -32,29 +32,50 @@
  */
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
-import { sod, addDaysMs } from '../core/time.js';
+import { sod, addDaysMs, overlapsRange } from '../core/time.js';
+import { toZonedTime, nowInZone, wrapAdapterWithTimezone } from '../core/timezone.js';
 import { fmtTime as _fmtTime, fmtDuration } from '../core/locale.js';
 // ─── Implementation ─────────────────────────────────────
 export function createRangeAgenda(options) {
-    const { initialDate, locale, days: dayCount = 7 } = options;
-    const resolveAdapter = typeof options.adapter === 'function'
+    const { initialDate, locale, days: dayCount = 7, timezone } = options;
+    const rawAdapter = typeof options.adapter === 'function'
         ? options.adapter
         : () => options.adapter;
-    const store = $derived(createEventStore(resolveAdapter()));
+    const resolveAdapter = timezone
+        ? () => wrapAdapterWithTimezone(rawAdapter(), timezone)
+        : rawAdapter;
+    /** An instant on the plane the days are drawn on (zoned wall-clock with `timezone`). */
+    const plane = (ms) => (timezone ? toZonedTime(ms, timezone).getTime() : ms);
+    const nowMs = () => (timezone ? nowInZone(timezone).getTime() : Date.now());
+    // One store for the agenda's life: a getter adapter that changes identity
+    // reloads it instead of rebuilding it empty (every row blinking out).
+    const store = createEventStore(resolveAdapter);
     // ── Window start (reactive, writable) ──
-    let startMs = $state(sod(initialDate?.getTime() ?? Date.now()));
+    let startMs = $state(sod(initialDate ? plane(initialDate.getTime()) : nowMs()));
     const endMs = $derived(addDaysMs(startMs, dayCount));
     // ── Load events for the window (re-runs on paging / adapter swap) ──
-    $effect(() => {
+    // Eager initial load for synchronous adapters (the server render holds the
+    // rows); the effect's first run then has nothing new to fetch — a seeded
+    // adapter would otherwise send its seed range straight to the network.
+    let eagerKey = untrack(() => {
+        if (!resolveAdapter().fetchEventsSync)
+            return '';
         store.load({ start: new Date(startMs), end: new Date(endMs) });
+        return `${startMs}-${endMs}`;
     });
-    // Eager initial load
-    untrack(() => {
+    $effect(() => {
+        rawAdapter(); // a new adapter reloads
+        const key = `${startMs}-${endMs}`;
+        if (key === eagerKey) {
+            eagerKey = '';
+            return;
+        }
+        eagerKey = '';
         store.load({ start: new Date(startMs), end: new Date(endMs) });
     });
     // ── Day derivations ──
     const days = $derived.by(() => {
-        const todayMs = sod(Date.now());
+        const todayMs = sod(nowMs());
         const events = store.events;
         return Array.from({ length: dayCount }, (_, i) => {
             const ms = addDaysMs(startMs, i);
@@ -69,7 +90,7 @@ export function createRangeAgenda(options) {
                 isToday: ms === todayMs,
                 isPast: dayEnd <= todayMs,
                 events: events
-                    .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms)
+                    .filter((ev) => overlapsRange(ev, date, new Date(dayEnd)))
                     .sort((a, b) => a.start.getTime() - b.start.getTime()),
             };
         });
@@ -98,10 +119,10 @@ export function createRangeAgenda(options) {
             startMs = addDaysMs(startMs, dayCount);
         },
         goToday() {
-            startMs = sod(Date.now());
+            startMs = sod(nowMs());
         },
         setDate(date) {
-            startMs = sod(date.getTime());
+            startMs = sod(plane(date.getTime()));
         },
         refresh() {
             void store.load({ start: new Date(startMs), end: new Date(endMs) });

package/dist/headless/index.d.ts

@@ -4,3 +4,4 @@ export type { AgendaOptions, HeadlessAgenda } from './create-agenda.svelte.js';
 export { createRangeAgenda } from './create-range-agenda.svelte.js';
 export type { RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, } from './create-range-agenda.svelte.js';
 export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, } from './types.js';
+export type { TimeSlot } from '../views/shared/format.js';

package/dist/index.d.ts

@@ -1,19 +1,22 @@
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, FloatingPanel, } from './primitives/index.js';
-export { Calendar } from './calendar/index.js';
-export { Planner, Agenda, Mobile } from './views/index.js';
-export { default as MonthGrid } from './views/month/MonthGrid.svelte';
-export type { CalendarView } from './calendar/index.js';
+export type { FloatingPanelAnchor, FloatingPanelProps } from './primitives/index.js';
+export { Calendar, defaultViews } from './calendar/index.js';
+export type { CalendarView, CalendarViewProps, CalendarProps } from './calendar/index.js';
+export { Planner, PlannerScroll, Agenda, Mobile, MonthGrid } from './views/index.js';
+export { useCalendarContext } from './views/shared/context.svelte.js';
+export type { CalendarContext } from './views/shared/context.svelte.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, Selection as CalendarSelection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } from './adapters/index.js';
+export { CalendarReadOnlyError, EventNotFoundError, isReadOnlyError, isNotFoundError } from './adapters/index.js';
 export type { CalendarAdapter, WritableCalendarAdapter, DateRange, MemoryAdapterOptions, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, FieldMapping, MappedAdapterOptions, MutationHandler, CompositeAdapterOptions, JmapClient, JmapCalendarAdapterOptions, } from './adapters/index.js';
-export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
+export { createClock, sod, startOfWeek, addDaysMs, diffDays, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
 export type { Clock, TimelineEvent, BlockedSlot, DaySegment, CalendarLabels, EventStatus, } 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, createRangeAgenda } from './headless/index.js';
-export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, } from './headless/index.js';
+export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, TimeSlot, } from './headless/index.js';
 export { fits, lineCount, textHeight, textWidth, pickFit, fontOf, fitLabel, fitParts, breakLines, typeset } from './text-fit.js';
-export type { ChipPart } from './text-fit.js';
+export type { ChipPart, TextLayoutOptions } from './text-fit.js';

package/dist/index.js

@@ -1,16 +1,19 @@
 // ─── Primitives ─────────────────────────────────────────
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, FloatingPanel, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
-export { Calendar } from './calendar/index.js';
-// Raw view components — compose your own shell around the engine if needed
-export { Planner, Agenda, Mobile } from './views/index.js';
-export { default as MonthGrid } from './views/month/MonthGrid.svelte';
+export { Calendar, defaultViews } from './calendar/index.js';
+// Raw view components — register them under your own ids, or compose your
+// own shell around the engine. They read the Calendar's context.
+export { Planner, PlannerScroll, Agenda, Mobile, MonthGrid } from './views/index.js';
+// For custom views: the running Calendar's engines, config and labels.
+export { useCalendarContext } from './views/shared/context.svelte.js';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── Adapters ───────────────────────────────────────────
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } from './adapters/index.js';
+export { CalendarReadOnlyError, EventNotFoundError, isReadOnlyError, isNotFoundError } from './adapters/index.js';
 // ─── Core: clock, time, locale, types ───────────────────
-export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
+export { createClock, sod, startOfWeek, addDaysMs, diffDays, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';

package/dist/primitives/DayHeader.svelte

@@ -6,7 +6,8 @@
     - Short/long weekday + date number for week views
 -->
 <script lang="ts">import { weekdayShort, weekdayLong, monthShort, fmtDay } from "../core/locale.js";
-let { dayMs, todayMs = Date.now(), format = "short", isToday = false, isPast = false } = $props();
+import { sod } from "../core/time.js";
+let { dayMs, todayMs = sod(Date.now()), format = "short", isToday = false, isPast = false } = $props();
 const dayNum = $derived(new Date(dayMs).getDate());
 </script>
 
@@ -16,7 +17,7 @@ const dayNum = $derived(new Date(dayMs).getDate());
 	class:dh-past={isPast}
 >
 	{#if format === 'relative'}
-		<span class="dh-rel">{fmtDay(dayMs, todayMs)}</span>
+		<span class="dh-rel">{fmtDay(sod(dayMs), sod(todayMs))}</span>
 	{:else if format === 'long'}
 		<span class="dh-name dh-name-long">{weekdayLong(dayMs)}</span>
 		<span class="dh-date">{monthShort(dayMs)} {dayNum}</span>

package/dist/primitives/DayHeader.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     /** Timestamp (ms) of the day to label */
     dayMs: number;
-    /** Timestamp (ms) of today (for relative labels) */
+    /** Any timestamp (ms) on today, for relative labels — default: now */
     todayMs?: number;
     /** Display format */
     format?: 'relative' | 'short' | 'long';

package/dist/primitives/EmptySlot.svelte

@@ -6,7 +6,10 @@
   between events.
 -->
 <script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
-const L = $derived(getLabels());
+import { getContext } from "svelte";
+// Inside a Calendar: its per-instance labels; standalone: the global ones.
+const calendarCtx = getContext("calendar");
+const L = $derived(calendarCtx?.labels ?? getLabels());
 let { start, end, onclick, orientation = "vertical" } = $props();
 const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
 function handleKeydown(e) {
@@ -26,7 +29,7 @@ function handleKeydown(e) {
 	class:es-h={orientation === 'horizontal'}
 	role="button"
 	tabindex="0"
-	aria-label="{L.createEvent}, {fmtTime(start)} to {fmtTime(end)}, {dur}"
+	aria-label="{L.createEvent}, {fmtTime(start)} – {fmtTime(end)}, {dur}"
 	onclick={() => onclick?.({ start, end })}
 	onkeydown={handleKeydown}
 >

package/dist/primitives/EventBlock.svelte

@@ -9,7 +9,10 @@
   Emits: onclick, ondragstart, onresize (for future interaction wiring)
 -->
 <script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
-const L = $derived(getLabels());
+import { getContext } from "svelte";
+// Inside a Calendar: its per-instance labels; standalone: the global ones.
+const calendarCtx = getContext("calendar");
+const L = $derived(calendarCtx?.labels ?? getLabels());
 let { event, variant = "chip", active = false, past = false, showTime = false, showDuration = false, editable = false, onclick, children } = $props();
 const accentColor = $derived(event.color || "var(--dt-accent, #2563eb)");
 const isCancelled = $derived(event.status === "cancelled");
@@ -18,10 +21,11 @@ const isFull = $derived(event.status === "full");
 const isLimited = $derived(event.status === "limited");
 const ariaLabel = $derived.by(() => {
 	const t = event.title;
-	const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
+	const time = `${fmtTime(event.start)} – ${fmtTime(event.end)}`;
 	const dur = fmtDuration(event.start, event.end);
 	const loc = event.location ? `, ${event.location}` : "";
-	const statusStr = isCancelled ? ", cancelled" : isTentative ? ", tentative" : isFull ? ", full" : isLimited ? ", limited" : "";
+	const status = isCancelled ? L.cancelled : isTentative ? L.tentative : isFull ? L.full : isLimited ? L.limited : "";
+	const statusStr = status ? `, ${status}` : "";
 	const activeStr = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : "";
 	return `${t}${loc}, ${time}, ${dur}${statusStr}${activeStr}`;
 });
@@ -63,11 +67,7 @@ function handleKeydown(e) {
 					{/each}
 				</div>
 			{/if}
-			{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">Cancelled</span>{/if}
-			{#if isTentative}<span class="eb-status-badge eb-tentative-badge">Tentative</span>{/if}
-			{#if isFull}<span class="eb-status-badge eb-full-badge">Full</span>{/if}
-			{#if isLimited}<span class="eb-status-badge eb-limited-badge">Limited</span>{/if}
-			{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
+			{@render badges()}
 		</div>
 	{:else}
 		<!-- row -->
@@ -90,13 +90,20 @@ function handleKeydown(e) {
 				{/each}
 			</span>
 		{/if}
-		{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">Cancelled</span>{/if}
-		{#if isFull}<span class="eb-status-badge eb-full-badge">Full</span>{/if}
-		{#if isLimited}<span class="eb-status-badge eb-limited-badge">Limited</span>{/if}
-		{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
+		{@render badges()}
 	{/if}
 {/snippet}
 
+<!-- Status badges: the same set in card and row. The badge CSS uppercases
+     the (lower-case) status labels. -->
+{#snippet badges()}
+	{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">{L.cancelled}</span>{/if}
+	{#if isTentative}<span class="eb-status-badge eb-tentative-badge">{L.tentative}</span>{/if}
+	{#if isFull}<span class="eb-status-badge eb-full-badge">{L.full}</span>{/if}
+	{#if isLimited}<span class="eb-status-badge eb-limited-badge">{L.limited}</span>{/if}
+	{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
+{/snippet}
+
 {#if onclick}
 <div
 	class="eb eb-{variant}"
@@ -331,8 +338,8 @@ function handleKeydown(e) {
 		background: color-mix(in srgb, var(--_color) 12%, transparent);
 	}
 	.eb-full-badge {
-		color: #2563eb;
-		background: color-mix(in srgb, #2563eb 15%, transparent);
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
 	}
 	.eb-limited-badge {
 		color: var(--_color);

package/dist/primitives/FloatingPanel.svelte

@@ -1,9 +1,48 @@
 <script module lang="ts">// Phone sheet scroll-lock: nested panels each take a lock; the page behind
 // unlocks when the last one closes.
 let sheetLocks = 0;
+// Open panels, oldest first. Escape and the outside tap belong to the
+// topmost one only, so a nested panel closes without its parent.
+const openPanels = [];
+// Events a panel already acted on — the next panel down must not act on
+// the same keydown/pointerdown once the top one unmounts mid-dispatch.
+const handled = new WeakSet();
+/**
+* Spend the click a closing tap synthesizes. `onclose` usually unmounts the
+* panel before that click arrives, so the listener lives on `window`,
+* outside the component: it eats the next click (capture phase, before any
+* calendar handler) and removes itself then, on the next pointerdown, on a
+* pointercancel (no click follows), or after a timeout.
+*/
+function swallowNextClick() {
+	const eat = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		done();
+	};
+	const done = () => {
+		clearTimeout(timer);
+		window.removeEventListener("click", eat, true);
+		window.removeEventListener("pointerdown", done, true);
+		window.removeEventListener("pointercancel", done, true);
+	};
+	const timer = setTimeout(done, 1500);
+	window.addEventListener("click", eat, true);
+	window.addEventListener("pointercancel", done, true);
+	// Armed after this pointerdown has finished dispatching.
+	setTimeout(() => window.addEventListener("pointerdown", done, true), 0);
+}
+export {};
 </script>
 
-<script lang="ts">let { title = "", anchor = {
+<script lang="ts">// A non-modal window that floats over the calendar: opened beside the
+// block that was clicked (right of it, left when the right edge is near,
+// clamped to the viewport), dragged by its header, closed by Escape, its
+// own button, or a click anywhere outside — that outside click is spent on
+// closing, so a block under it is not opened by the same tap. Below 640px
+// it is a bottom sheet instead.
+import { untrack } from "svelte";
+let { title = "", anchor = {
 	x: 24,
 	y: 24
 }, width = 440, theme = "", closeLabel = "Close", closeOnOutside = true, onclose, children } = $props();
@@ -28,11 +67,66 @@ function beside(a) {
 	const px = right + w + EDGE <= window.innerWidth ? right : a.x - GAP - w >= EDGE ? a.x - GAP - w : a.x;
 	place(px, a.y);
 }
+// Where focus goes back to when the panel closes: whatever held it when
+// the panel opened (or when a new anchor re-focused it).
+let returnFocus = null;
+// Set once the user drags the panel: from then on a size change re-clamps
+// it where it is instead of jumping back beside the anchor.
+let dragged = false;
 // A new anchor (the next click) re-places the panel; each run focuses it.
 $effect(() => {
+	dragged = false;
 	beside(anchor);
+	const active = document.activeElement;
+	if (active instanceof HTMLElement && active !== document.body && !el?.contains(active)) {
+		returnFocus = active;
+	}
 	el?.focus({ preventScroll: true });
 });
+// Content that grows (or shrinks) after opening — a form section, loaded
+// data — must stay inside the viewport; so must a resized window.
+$effect(() => {
+	if (!el) return;
+	const reclamp = () => {
+		if (dragged) place(left, top);
+		else beside(anchor);
+	};
+	const ro = new ResizeObserver(reclamp);
+	ro.observe(el);
+	window.addEventListener("resize", reclamp);
+	return () => {
+		ro.disconnect();
+		window.removeEventListener("resize", reclamp);
+	};
+});
+// Topmost-panel stack + focus restore on close.
+const myId = Symbol("floating-panel");
+const isTopmost = () => openPanels[openPanels.length - 1] === myId;
+$effect(() => {
+	const id = myId;
+	openPanels.push(id);
+	const panel = untrack(() => el);
+	return () => {
+		const i = openPanels.indexOf(id);
+		if (i !== -1) openPanels.splice(i, 1);
+		// Only pull focus back when it would otherwise be lost (inside the
+		// closing panel, or dropped to <body>) — not from where the user
+		// has since moved it.
+		const active = document.activeElement;
+		const lost = !active || active === document.body || !!panel && panel.contains(active);
+		const target = returnFocus;
+		if (lost && target && target.isConnected) {
+			target.focus({ preventScroll: true });
+		} else if (lost && target) {
+			// The opener may be re-rendered by the close (a view refresh);
+			// try once more after the DOM settles.
+			queueMicrotask(() => {
+				const a = document.activeElement;
+				if ((!a || a === document.body) && target.isConnected) target.focus({ preventScroll: true });
+			});
+		}
+	};
+});
 // In sheet mode the page behind must not scroll — drags on the sheet
 // chrome, or reaching the end of the sheet body, would otherwise reach it.
 $effect(() => {
@@ -59,35 +153,36 @@ function down(e) {
 	e.currentTarget.setPointerCapture(e.pointerId);
 }
 function move(e) {
-	if (grab) place(e.clientX - grab.dx, e.clientY - grab.dy);
+	if (!grab) return;
+	dragged = true;
+	place(e.clientX - grab.dx, e.clientY - grab.dy);
 }
 function up() {
 	grab = null;
 }
 // The outside pointerdown is swallowed here, before any calendar handler,
 // and so is the click it would synthesize — one tap closes, the next acts.
-let swallowClick = false;
+// With nested panels only the topmost reacts: a tap outside it (even on
+// the panel beneath) closes it alone.
 function outsideDown(e) {
 	if (!closeOnOutside || !el || el.contains(e.target)) return;
+	if (handled.has(e) || !isTopmost()) return;
+	handled.add(e);
 	e.stopPropagation();
 	e.preventDefault();
-	swallowClick = true;
+	swallowNextClick();
 	onclose?.();
 }
-function outsideClick(e) {
-	if (!swallowClick) return;
-	swallowClick = false;
-	e.stopPropagation();
-	e.preventDefault();
+function onKeydown(e) {
+	// defaultPrevented: a control inside the panel (a combobox, a menu)
+	// already used this Escape to close itself.
+	if (e.key !== "Escape" || e.defaultPrevented || handled.has(e) || !isTopmost()) return;
+	handled.add(e);
+	onclose?.();
 }
-export {};
 </script>
 
-<svelte:window
-	onkeydown={(e) => e.key === 'Escape' && onclose?.()}
-	onpointerdowncapture={outsideDown}
-	onclickcapture={outsideClick}
-/>
+<svelte:window onkeydown={onKeydown} onpointerdowncapture={outsideDown} />
 
 <div
 	class="fp"

package/dist/primitives/FloatingPanel.svelte.d.ts

@@ -1,14 +1,16 @@
 import type { Snippet } from 'svelte';
-type Anchor = {
+/** What a FloatingPanel opens beside: a viewport rect (a clicked block's `getBoundingClientRect()`), or a bare point. */
+export type FloatingPanelAnchor = {
     x: number;
     y: number;
     width?: number;
     height?: number;
 };
-type $$ComponentProps = {
+export interface FloatingPanelProps {
     title?: string;
     /** What to open beside: the clicked block's viewport rect, or a bare point. */
-    anchor?: Anchor;
+    anchor?: FloatingPanelAnchor;
+    /** Panel width in px (default 440). Below 640px viewport width it is a bottom sheet. */
     width?: number;
     /** The same `--dt-*` theme string a Calendar takes. */
     theme?: string;
@@ -17,7 +19,7 @@ type $$ComponentProps = {
     closeOnOutside?: boolean;
     onclose?: () => void;
     children: Snippet;
-};
-declare const FloatingPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const FloatingPanel: import("svelte").Component<FloatingPanelProps, {}, "">;
 type FloatingPanel = ReturnType<typeof FloatingPanel>;
 export default FloatingPanel;

package/dist/primitives/NowIndicator.svelte

@@ -12,14 +12,19 @@
     <NowIndicator mode="badge" />
 -->
 <script lang="ts">import { getLabels } from "../core/locale.js";
-const L = $derived(getLabels());
+import { getContext } from "svelte";
+// Inside a Calendar: its per-instance labels; standalone: the global ones.
+const calendarCtx = getContext("calendar");
+const L = $derived(calendarCtx?.labels ?? getLabels());
 let { mode = "line", position = 0, orientation = "vertical", time = "", seconds = "", showLabel = true, color, children } = $props();
 const posStyle = $derived(orientation === "vertical" ? `left: ${position}px` : `top: ${position}px`);
 const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 </script>
 
 {#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
+	<!-- Plain text, not a live region: the time it carries changes every
+	     second, and a status role would read each change aloud. -->
+	<span class="ni-badge" style={colorVar}>
 		{#if children}
 			{@render children()}
 		{:else}
@@ -27,7 +32,9 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		{/if}
 	</span>
 {:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
+	<!-- Decorative: the visible time is the grid's own; hidden from AT so a
+	     ticking label is never announced. -->
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" aria-hidden="true">
 		<div class="ni-dot-circle"></div>
 		{#if showLabel && time}
 			<div class="ni-label">
@@ -37,7 +44,7 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 		{/if}
 	</div>
 {:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" aria-hidden="true">
 		<div class="ni-line-bar"></div>
 		{#if showLabel && time}
 			<div class="ni-label">

package/dist/primitives/TimeGutter.svelte

@@ -8,23 +8,26 @@
 <script lang="ts">import { HOURS } from "../core/time.js";
 import { fmtH } from "../core/locale.js";
 let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS, formatHour = fmtH } = $props();
+// Labels sit relative to the first hour shown: hours [6…21] start at 0px,
+// not 6 hours down.
+const firstHour = $derived(hours[0] ?? 0);
 </script>
 
 {#if orientation === 'horizontal'}
-	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
+	<div class="tg tg-h" style="--tg-hour: {hourSize}px; --tg-count: {hours.length}">
 		{#each hours as h}
-			<div class="tg-tick" style="left: {h * hourSize}px">
+			<div class="tg-tick" style="left: {(h - firstHour) * hourSize}px">
 				<span class="tg-label">{formatHour(h)}</span>
 			</div>
 			{#if halfHour}
-				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
+				<div class="tg-tick tg-tick-half" style="left: {(h - firstHour + 0.5) * hourSize}px"></div>
 			{/if}
 		{/each}
 	</div>
 {:else}
-	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
+	<div class="tg tg-v" style="--tg-hour: {hourSize}px; --tg-count: {hours.length}">
 		{#each hours as h}
-			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
+			<div class="tg-row" style="top: {(h - firstHour) * hourSize}px; height: {hourSize}px">
 				<span class="tg-label">{formatHour(h)}</span>
 			</div>
 		{/each}
@@ -41,7 +44,7 @@ let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS
 	/* ── Horizontal ── */
 	.tg-h {
 		height: 100%;
-		width: calc(24 * var(--tg-hour));
+		width: calc(var(--tg-count, 24) * var(--tg-hour));
 	}
 	.tg-tick {
 		position: absolute;
@@ -66,6 +69,7 @@ let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS
 	/* ── Vertical ── */
 	.tg-v {
 		width: 48px;
+		height: calc(var(--tg-count, 24) * var(--tg-hour));
 		flex-shrink: 0;
 	}
 	.tg-row {

package/dist/primitives/index.d.ts

@@ -4,3 +4,4 @@ export { default as TimeGutter } from './TimeGutter.svelte';
 export { default as DayHeader } from './DayHeader.svelte';
 export { default as EmptySlot } from './EmptySlot.svelte';
 export { default as FloatingPanel } from './FloatingPanel.svelte';
+export type { FloatingPanelAnchor, FloatingPanelProps } from './FloatingPanel.svelte';

package/dist/text-fit.d.ts

@@ -1,6 +1,12 @@
-import { type PrepareOptions } from '@chenglou/pretext';
 import type { Attachment } from 'svelte/attachments';
-export declare function lineCount(text: string, font: string, width: number, options?: PrepareOptions): number;
+/** How text wraps when measured — the CSS properties of the same names. */
+export interface TextLayoutOptions {
+    whiteSpace?: 'normal' | 'pre-wrap';
+    wordBreak?: 'normal' | 'keep-all';
+    /** Extra px between characters */
+    letterSpacing?: number;
+}
+export declare function lineCount(text: string, font: string, width: number, options?: TextLayoutOptions): number;
 export declare function fits(text: string, font: string, width: number, lines?: number): boolean;
 /** Height the text will take at `width`, before it is in the DOM. */
 export declare function textHeight(text: string, font: string, width: number, lineHeight: number): number;