@nomideusz/svelte-calendar 0.4.0 → 0.5.1

package/dist/adapters/recurring.d.ts

@@ -1,16 +1,54 @@
 import type { CalendarAdapter } from './types.js';
 /**
- * A weekly recurring event definition.
+ * A recurring event definition.
+ *
+ * Backward-compatible: the only required fields are `id`, `title`,
+ * `startTime`, `endTime`, and `dayOfWeek` (for weekly, the default).
  */
 export interface RecurringEvent {
     id: string;
     title: string;
-    /** ISO weekday: 1 = Monday … 7 = Sunday */
-    dayOfWeek: number;
     /** Start time in "HH:MM" 24-hour format */
     startTime: string;
     /** End time in "HH:MM" 24-hour format */
     endTime: string;
+    /** Recurrence frequency (default: `'weekly'`) */
+    frequency?: 'daily' | 'weekly' | 'monthly';
+    /**
+     * Repeat every N periods — e.g. `2` with `weekly` = biweekly.
+     * Requires `startDate` when > 1 so the adapter knows the anchor.
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * ISO weekday(s): 1 = Monday … 7 = Sunday.
+     * Required for `weekly` frequency. Pass an array for multiple days
+     * (e.g. `[1, 3, 5]` for Mon/Wed/Fri).
+     */
+    dayOfWeek?: number | number[];
+    /**
+     * Day of month (1–31). Required for `monthly` frequency.
+     * Clamped to the last day of shorter months (e.g. 31 → 28 in Feb).
+     * @default 1
+     */
+    dayOfMonth?: number;
+    /**
+     * First possible occurrence in `"YYYY-MM-DD"` format.
+     * Events before this date are excluded. Required when using
+     * `interval > 1` or `count`.
+     */
+    startDate?: string;
+    /**
+     * Last possible occurrence in `"YYYY-MM-DD"` format.
+     * No events are generated after this date.
+     */
+    until?: string;
+    /**
+     * Maximum number of occurrences, counted from `startDate`.
+     * Alternative to `until` — if both are set the stricter bound wins.
+     * Requires `startDate`.
+     */
+    count?: number;
     /** Accent color */
     color?: string;
     /** Optional subtitle displayed below the title */
@@ -30,15 +68,14 @@ export interface RecurringAdapterOptions {
     /**
      * Auto-assign colors to events by category or title.
      *   true    → use the default vivid palette
-     *   string  → hex accent color (e.g. '#6366f1') to generate a
-     *             theme-harmonious palette via golden-angle hue rotation
+     *   string  → hex accent color to generate a harmonious palette
      */
     autoColor?: boolean | string;
 }
 /**
- * Create a CalendarAdapter that projects recurring weekly events
- * onto concrete dates for whatever range the calendar requests.
+ * Create a CalendarAdapter that projects recurring events onto concrete
+ * dates for whatever range the calendar requests.
  *
- * Read-only by default — create/update/delete throw unless custom handlers are provided.
+ * Read-only by default — create/update/delete throw.
  */
 export declare function createRecurringAdapter(schedule: RecurringEvent[], options?: RecurringAdapterOptions): CalendarAdapter;

package/dist/adapters/recurring.js

@@ -1,70 +1,231 @@
-import { startOfWeek } from '../core/time.js';
-import { DAY_MS } from '../core/time.js';
+import { startOfWeek, DAY_MS } from '../core/time.js';
 import { generatePalette, VIVID_PALETTE } from '../core/palette.js';
+// ── Helpers ─────────────────────────────────────────────
 /** Parse "HH:MM" into [hours, minutes] */
 function parseTime(time) {
-    const [h, m] = time.split(':').map(Number);
-    return [h, m ?? 0];
+    const parts = time.split(':');
+    if (parts.length < 2) {
+        throw new Error(`Invalid time format "${time}": expected "HH:MM"`);
+    }
+    const h = Number(parts[0]);
+    const m = Number(parts[1]);
+    if (!Number.isInteger(h) || h < 0 || h > 23) {
+        throw new Error(`Invalid hours in time "${time}": expected 0–23`);
+    }
+    if (!Number.isInteger(m) || m < 0 || m > 59) {
+        throw new Error(`Invalid minutes in time "${time}": expected 0–59`);
+    }
+    return [h, m];
 }
-/**
- * Convert ISO weekday (1=Mon…7=Sun) to JS Date weekday offset from Monday.
- * Monday = 0, Tuesday = 1, … Sunday = 6
- */
+/** Parse "YYYY-MM-DD" to a midnight Date */
+function parseDate(str) {
+    const parts = str.split('-');
+    if (parts.length !== 3)
+        throw new Error(`Invalid date "${str}": expected "YYYY-MM-DD"`);
+    const y = Number(parts[0]);
+    const m = Number(parts[1]) - 1;
+    const d = Number(parts[2]);
+    const date = new Date(y, m, d);
+    if (Number.isNaN(date.getTime()))
+        throw new Error(`Invalid date "${str}"`);
+    return date;
+}
+/** ISO weekday offset from Monday: 1→0, 2→1, … 7→6 */
 function isoWeekdayToOffset(dayOfWeek) {
-    return dayOfWeek - 1; // 1→0, 2→1, …, 7→6
+    return dayOfWeek - 1;
 }
-/**
- * Project a recurring event onto a specific week, returning a concrete TimelineEvent.
- */
-function projectToWeek(rec, weekStartMs, weekIndex) {
-    const dayOffset = isoWeekdayToOffset(rec.dayOfWeek);
-    const dayMs = weekStartMs + dayOffset * DAY_MS;
-    const dayDate = new Date(dayMs);
+/** Normalize `dayOfWeek` to a sorted array */
+function normalizeDays(value) {
+    if (value == null)
+        return [];
+    const arr = Array.isArray(value) ? [...value] : [value];
+    return arr.sort((a, b) => a - b);
+}
+/** Clamp day to last day of month (e.g. 31 → 28 in Feb) */
+function clampDayOfMonth(year, month, day) {
+    const lastDay = new Date(year, month + 1, 0).getDate();
+    return new Date(year, month, Math.min(day, lastDay));
+}
+/** Create a concrete TimelineEvent from a recurring def + occurrence date */
+function createConcreteEvent(rec, date, instanceKey) {
     const [sh, sm] = parseTime(rec.startTime);
     const [eh, em] = parseTime(rec.endTime);
-    const start = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate(), sh, sm);
-    const end = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate(), eh, em);
+    const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), sh, sm);
+    const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), eh, em);
     return {
-        id: `${rec.id}--w${weekIndex}--d${rec.dayOfWeek}`,
+        id: `${rec.id}--${instanceKey}`,
         title: rec.title,
         start,
         end,
         color: rec.color,
         category: rec.category,
-        data: {
-            ...rec.data,
-            recurringId: rec.id,
-            ...(rec.subtitle ? { subtitle: rec.subtitle } : {}),
-            ...(rec.tags ? { tags: rec.tags } : {}),
-        },
+        subtitle: rec.subtitle,
+        tags: rec.tags,
+        data: { ...rec.data, recurringId: rec.id },
     };
 }
+// ── Count → until resolution ────────────────────────────
 /**
- * Find all weeks that overlap a given date range.
- * Returns an array of { weekStartMs, weekIndex } objects.
+ * When `count` is set, compute the date of the last occurrence so the
+ * projection loop only needs to check date bounds.
  */
-function getOverlappingWeeks(range, mondayStart) {
-    const weeks = [];
-    let cursor = startOfWeek(range.start.getTime(), mondayStart);
-    let index = 0;
-    while (cursor < range.end.getTime()) {
-        weeks.push({ weekStartMs: cursor, weekIndex: index });
-        cursor += 7 * DAY_MS;
-        index++;
+function computeUntilFromCount(rec, startDateObj, mondayStart) {
+    const count = rec.count;
+    if (count == null || count <= 0)
+        return undefined;
+    const freq = rec.frequency ?? 'weekly';
+    const interval = rec.interval ?? 1;
+    switch (freq) {
+        case 'daily': {
+            const d = new Date(startDateObj);
+            d.setDate(d.getDate() + (count - 1) * interval);
+            return d;
+        }
+        case 'weekly': {
+            const days = normalizeDays(rec.dayOfWeek);
+            if (days.length === 0)
+                return undefined;
+            const startMs = startDateObj.getTime();
+            let weekMs = startOfWeek(startMs, mondayStart);
+            let remaining = count;
+            const maxCycles = Math.ceil(count / days.length) + 2;
+            for (let c = 0; c < maxCycles; c++) {
+                for (const day of days) {
+                    const dayMs = weekMs + isoWeekdayToOffset(day) * DAY_MS;
+                    if (dayMs >= startMs) {
+                        remaining--;
+                        if (remaining === 0)
+                            return new Date(dayMs);
+                    }
+                }
+                weekMs += interval * 7 * DAY_MS;
+            }
+            return undefined;
+        }
+        case 'monthly': {
+            const totalMonths = startDateObj.getFullYear() * 12 +
+                startDateObj.getMonth() +
+                (count - 1) * interval;
+            const y = Math.floor(totalMonths / 12);
+            const m = totalMonths % 12;
+            return clampDayOfMonth(y, m, rec.dayOfMonth ?? 1);
+        }
     }
-    return weeks;
 }
+// ── Projection functions ────────────────────────────────
+function projectDaily(rec, range, startDate, effectiveUntil, out) {
+    const interval = rec.interval ?? 1;
+    // Anchor at startDate or range.start (midnight)
+    const anchor = new Date(startDate ?? range.start);
+    anchor.setHours(0, 0, 0, 0);
+    const rangeStart = new Date(range.start);
+    rangeStart.setHours(0, 0, 0, 0);
+    // Skip ahead to first occurrence at or after range.start
+    const cursor = new Date(anchor);
+    if (cursor < rangeStart) {
+        const daysBetween = Math.round((rangeStart.getTime() - cursor.getTime()) / DAY_MS);
+        const skip = Math.floor(daysBetween / interval);
+        cursor.setDate(cursor.getDate() + skip * interval);
+        if (cursor < rangeStart)
+            cursor.setDate(cursor.getDate() + interval);
+    }
+    let idx = 0;
+    while (cursor < range.end) {
+        if (effectiveUntil && cursor > effectiveUntil)
+            break;
+        const ev = createConcreteEvent(rec, cursor, `d${idx}`);
+        if (ev.start < range.end && ev.end > range.start) {
+            out.push(ev);
+        }
+        cursor.setDate(cursor.getDate() + interval);
+        idx++;
+    }
+}
+function projectWeekly(rec, range, startDate, effectiveUntil, mondayStart, out) {
+    const interval = rec.interval ?? 1;
+    const days = normalizeDays(rec.dayOfWeek);
+    if (days.length === 0)
+        return;
+    const startDateMs = startDate?.getTime();
+    const rangeStartMs = range.start.getTime();
+    const rangeEndMs = range.end.getTime();
+    // Anchor week: week containing startDate, or range.start if none
+    const anchorMs = startDateMs ?? rangeStartMs;
+    const anchorWeekMs = startOfWeek(anchorMs, mondayStart);
+    // Jump to first interval-aligned week that could overlap the range
+    let weekMs;
+    if (anchorWeekMs >= rangeStartMs) {
+        weekMs = anchorWeekMs;
+    }
+    else {
+        const weeksBetween = Math.floor((rangeStartMs - anchorWeekMs) / (7 * DAY_MS));
+        const skip = Math.floor(weeksBetween / interval);
+        weekMs = anchorWeekMs + skip * interval * 7 * DAY_MS;
+        if (weekMs + 7 * DAY_MS <= rangeStartMs) {
+            weekMs += interval * 7 * DAY_MS;
+        }
+    }
+    let weekIndex = Math.round((weekMs - anchorWeekMs) / (7 * DAY_MS));
+    while (weekMs < rangeEndMs) {
+        for (const day of days) {
+            const dayMs = weekMs + isoWeekdayToOffset(day) * DAY_MS;
+            if (startDateMs != null && dayMs < startDateMs)
+                continue;
+            if (dayMs >= rangeEndMs)
+                break;
+            if (effectiveUntil && dayMs > effectiveUntil.getTime())
+                return;
+            const dayDate = new Date(dayMs);
+            const ev = createConcreteEvent(rec, dayDate, `w${weekIndex}--d${day}`);
+            if (ev.start < range.end && ev.end > range.start) {
+                out.push(ev);
+            }
+        }
+        weekMs += interval * 7 * DAY_MS;
+        weekIndex += interval;
+    }
+}
+function projectMonthly(rec, range, startDate, effectiveUntil, out) {
+    const interval = rec.interval ?? 1;
+    const dayOfMonth = rec.dayOfMonth ?? 1;
+    const anchor = startDate ?? range.start;
+    let totalMonths = anchor.getFullYear() * 12 + anchor.getMonth();
+    // Skip ahead to first interval-aligned month at or near range.start
+    if (startDate && startDate < range.start) {
+        const rangeMonths = range.start.getFullYear() * 12 + range.start.getMonth();
+        const gap = rangeMonths - totalMonths;
+        const skip = Math.floor(gap / interval);
+        totalMonths += skip * interval;
+    }
+    for (let i = 0; i < 120; i++) {
+        const y = Math.floor(totalMonths / 12);
+        const m = totalMonths % 12;
+        const date = clampDayOfMonth(y, m, dayOfMonth);
+        if (date >= range.end)
+            break;
+        if (effectiveUntil && date > effectiveUntil)
+            break;
+        if (date >= range.start && (!startDate || date >= startDate)) {
+            const ev = createConcreteEvent(rec, date, `m${y}-${String(m + 1).padStart(2, '0')}`);
+            if (ev.start < range.end && ev.end > range.start) {
+                out.push(ev);
+            }
+        }
+        totalMonths += interval;
+    }
+}
+// ── Adapter factory ─────────────────────────────────────
 /** Default palette for auto-coloring */
 const AUTO_COLORS = VIVID_PALETTE;
 /**
- * Create a CalendarAdapter that projects recurring weekly events
- * onto concrete dates for whatever range the calendar requests.
+ * Create a CalendarAdapter that projects recurring events onto concrete
+ * dates for whatever range the calendar requests.
  *
- * Read-only by default — create/update/delete throw unless custom handlers are provided.
+ * Read-only by default — create/update/delete throw.
  */
 export function createRecurringAdapter(schedule, options = {}) {
     const { mondayStart = true, colorMap, autoColor } = options;
-    // Resolve palette: vivid default or theme-aware
+    // Resolve palette
     const palette = autoColor
         ? typeof autoColor === 'string'
             ? generatePalette(autoColor)
@@ -93,16 +254,33 @@ export function createRecurringAdapter(schedule, options = {}) {
     }
     return {
         async fetchEvents(range) {
-            const weeks = getOverlappingWeeks(range, mondayStart);
             const events = [];
-            for (const { weekStartMs, weekIndex } of weeks) {
-                for (const rec of schedule) {
-                    const coloredRec = { ...rec, color: resolveColor(rec) };
-                    const ev = projectToWeek(coloredRec, weekStartMs, weekIndex);
-                    // Only include if the event overlaps the requested range
-                    if (ev.start < range.end && ev.end > range.start) {
-                        events.push(ev);
-                    }
+            for (const rec of schedule) {
+                const colored = { ...rec, color: resolveColor(rec) };
+                const freq = rec.frequency ?? 'weekly';
+                // Parse bounds
+                const sd = rec.startDate ? parseDate(rec.startDate) : undefined;
+                const untilDate = rec.until ? parseDate(rec.until) : undefined;
+                const countUntil = sd
+                    ? computeUntilFromCount(rec, sd, mondayStart)
+                    : undefined;
+                // Effective until = tighter of the two bounds
+                let effectiveUntil = untilDate;
+                if (countUntil) {
+                    effectiveUntil = effectiveUntil
+                        ? countUntil < effectiveUntil ? countUntil : effectiveUntil
+                        : countUntil;
+                }
+                switch (freq) {
+                    case 'daily':
+                        projectDaily(colored, range, sd, effectiveUntil, events);
+                        break;
+                    case 'weekly':
+                        projectWeekly(colored, range, sd, effectiveUntil, mondayStart, events);
+                        break;
+                    case 'monthly':
+                        projectMonthly(colored, range, sd, effectiveUntil, events);
+                        break;
                 }
             }
             return events;

package/dist/adapters/rest.js

@@ -16,7 +16,12 @@ export function createRestAdapter(options) {
         }
         if (res.status === 204)
             return undefined;
-        return res.json();
+        try {
+            return await res.json();
+        }
+        catch {
+            throw new Error(`Calendar API error: invalid JSON response from ${path}`);
+        }
     }
     return {
         async fetchEvents(range) {

package/dist/calendar/Calendar.svelte

@@ -1,18 +1,18 @@
 <!--
   Calendar — the unified orchestrator.
 
-  Brings together: adapter → event store → view state + selection → toolbar + active view.
+  Brings together: adapter → event store → view state + selection → active view.
   Provides context so any descendant view can read the store/state via getContext().
 
   Usage:
     <Calendar
       adapter={myAdapter}
       views={[
-        { id: 'week-terrain', label: 'Terrain', component: WeekTimelineV4 },
-        { id: 'week-agenda',  label: 'Agenda',  component: WeekTimelineV5 },
-        { id: 'day',          label: 'Day',     component: DayTimeline },
+        { id: 'week-planner', label: 'Planner', component: Planner, props: { mode: 'week' } },
+        { id: 'week-agenda',   label: 'Agenda',  component: Agenda },
+        { id: 'day-planner',   label: 'Planner', component: Planner, props: { mode: 'day' } },
       ]}
-      defaultView="week-terrain"
+      defaultView="week-planner"
       theme={presets.midnight}
       height={600}
       oneventclick={handleClick}
@@ -20,7 +20,7 @@
     />
 -->
 <script lang="ts">
-	import { setContext, untrack, type Component } from 'svelte';
+	import { setContext, untrack, type Component, type Snippet } from 'svelte';
 	import type { CalendarAdapter } from '../adapters/types.js';
 	import type { CalendarViewId } from '../engine/view-state.svelte.js';
 	import { createEventStore, type EventStore } from '../engine/event-store.svelte.js';
@@ -28,7 +28,7 @@
 	import { createSelection, type Selection } from '../engine/selection.svelte.js';
 	import { createDragState, type DragState } from '../engine/drag.svelte.js';
 	import type { TimelineEvent } from '../core/types.js';
-	import Toolbar from './Toolbar.svelte';
+	import { getLabels } from '../core/locale.js';
 
 	/** One view registration */
 	export interface CalendarView {
@@ -55,10 +55,6 @@
 		mondayStart?: boolean;
 		/** Total height */
 		height?: number;
-		/** Show toolbar */
-		showToolbar?: boolean;
-		/** Links to display in toolbar */
-		links?: { href: string; label: string }[];
 		/** Text direction: 'ltr' (default), 'rtl', or 'auto' */
 		dir?: 'ltr' | 'rtl' | 'auto';
 		/** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
@@ -67,6 +63,16 @@
 		readOnly?: boolean;
 		/** Visible hour range: [startHour, endHour). Crops the grid to these hours. */
 		visibleHours?: [number, number];
+		/** Initial date to focus on (defaults to today) */
+		initialDate?: Date;
+		/** Drag snap interval in minutes (default: 15) */
+		snapInterval?: number;
+
+		// ── Snippets ──
+		/** Custom event rendering snippet */
+		event?: Snippet<[TimelineEvent]>;
+		/** Content to show when no events are loaded */
+		empty?: Snippet;
 
 		// ── Callbacks ──
 		oneventclick?: (event: TimelineEvent) => void;
@@ -78,16 +84,18 @@
 	let {
 		adapter,
 		views = [],
-		defaultView = 'week-grid',
+		defaultView = 'week-planner',
 		theme = '',
 		mondayStart = true,
 		height = 600,
-		showToolbar = true,
-		links = [],
 		dir,
 		locale,
 		readOnly = false,
 		visibleHours,
+		initialDate,
+		snapInterval = 15,
+		event: eventSnippet,
+		empty: emptySnippet,
 		oneventclick,
 		oneventcreate,
 		oneventmove,
@@ -98,18 +106,13 @@
 	const effectiveCreate = $derived(readOnly ? undefined : oneventcreate);
 	const effectiveMove = $derived(readOnly ? undefined : oneventmove);
 
-	import { setDefaultLocale } from '../core/locale.js';
-
-	// ── Set locale when provided ──
-	$effect(() => {
-		if (locale) setDefaultLocale(locale);
-	});
-
 	// ── Create reactive state ──
 	const store: EventStore = $derived(createEventStore(adapter));
 	const viewState: ViewState = createViewState(untrack(() => ({
 		defaultView,
 		mondayStart,
+		initialDate,
+		granularityForView: (viewId) => views.find((v) => v.id === viewId)?.granularity,
 	})));
 	const selection: Selection = createSelection();
 	const drag: DragState = createDragState();
@@ -148,6 +151,9 @@
 	});
 	setContext('calendar:readOnly', { get current() { return readOnly; } });
 	setContext('calendar:visibleHours', { get current() { return visibleHours; } });
+	setContext('calendar:snapInterval', { get current() { return snapInterval; } });
+	setContext('calendar:eventSnippet', { get current() { return eventSnippet; } });
+	setContext('calendar:emptySnippet', { get current() { return emptySnippet; } });
 
 	// ── Load events when range changes ──
 	$effect(() => {
@@ -167,7 +173,7 @@
 		}
 	});
 
-	// Notify host when active view changes (e.g. via toolbar concept/granularity toggles).
+	// Notify host when active view changes (e.g. via granularity toggles).
 	$effect(() => {
 		onviewchange?.(viewState.view);
 	});
@@ -175,21 +181,58 @@
 	// ── Resolve active view ──
 	const activeView = $derived(views.find((v) => v.id === viewState.view) ?? views[0]);
 
-	const toolbarViews = $derived(
-		views.map((v) => ({ id: v.id, label: v.label, granularity: v.granularity })),
-	);
+	// ── Date label (always visible, centered over views) ──
+	const dateLabel = $derived.by(() => {
+		if (viewState.granularity === 'day') {
+			return viewState.focusDate.toLocaleDateString(locale, {
+				weekday: 'long',
+				month: 'short',
+				day: 'numeric',
+			});
+		}
+		return viewState.focusDate.toLocaleDateString(locale, {
+			month: 'long',
+			year: 'numeric',
+		});
+	});
+
+	// Which granularities are available?
+	const granularities = $derived.by(() => {
+		const g = new Set(views.map((v) => v.granularity));
+		return (['day', 'week'] as const).filter((key) => g.has(key));
+	});
+
+	const L = $derived(getLabels());
 </script>
 
 <div
 	class="cal"
 	style="{theme}; --cal-h: {height}px"
 	role="region"
-	aria-label="Calendar"
+	aria-label={L.calendar}
 	dir={dir}
 	lang={locale}
 >
-	{#if showToolbar}
-		<Toolbar {viewState} views={toolbarViews} {links} {locale} />
+	<!-- Floating granularity pills (hidden for Agenda views) -->
+	{#if granularities.length > 1 && activeView?.label !== 'Agenda'}
+		<div class="cal-pills" role="group" aria-label={L.viewMode}>
+			{#each granularities as g}
+				<button
+					class="cal-pill"
+					class:cal-pill--active={viewState.granularity === g}
+					aria-pressed={viewState.granularity === g}
+					onclick={() => {
+						const currentLabel = views.find((v) => v.id === viewState.view)?.label;
+						const match = views.find((v) => v.granularity === g && v.label === currentLabel);
+						const fallback = views.find((v) => v.granularity === g);
+						const target = match ?? fallback;
+						if (target) viewState.setView(target.id);
+					}}
+				>
+					{g === 'day' ? L.day : L.week}
+				</button>
+			{/each}
+		</div>
 	{/if}
 
 	<div class="cal-body">
@@ -198,7 +241,7 @@
 			<Comp
 				events={store.events}
 				style={theme}
-				height={height - (showToolbar ? 48 : 0)}
+				height={null}
 				mondayStart={viewState.mondayStart}
 				{locale}
 				focusDate={viewState.focusDate}
@@ -225,15 +268,60 @@
 		height: var(--cal-h, 600px);
 		background: var(--dt-bg, #0b0e14);
 		border-radius: 12px;
-		overflow: hidden;
+		overflow: clip;
 		display: flex;
 		flex-direction: column;
 		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
 	}
 
+	/* ── Floating pills ── */
+	.cal-pills {
+		position: absolute;
+		top: 22px;
+		bottom: auto;
+		left: 10px;
+		z-index: 20;
+		display: flex;
+		gap: 2px;
+		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		backdrop-filter: blur(6px);
+		-webkit-backdrop-filter: blur(6px);
+		border-radius: 8px;
+		padding: 2px;
+		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+
+	.cal-pill {
+		border: none;
+		background: transparent;
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		cursor: pointer;
+		font: 600 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		padding: 6px 12px;
+		border-radius: 6px;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		transition: background 100ms, color 100ms;
+	}
+
+	.cal-pill:hover {
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+
+	.cal-pill--active {
+		background: var(--dt-accent, #ef4444);
+		color: var(--dt-btn-text, #fff);
+	}
+
+	.cal-pill:focus-visible {
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline-offset: 2px;
+	}
+
 	.cal-body {
 		flex: 1;
 		min-height: 0;
+		position: relative;
 		overflow: hidden;
 	}