@nomideusz/svelte-calendar 0.6.8 → 0.7.0

package/README.md

@@ -50,6 +50,26 @@ Hide the pills when your app controls the view externally:
 <Calendar {adapter} view="day-planner" showModePills={false} />
 ```
 
+### Custom Views
+
+The `views` prop replaces the built-in registry. Each entry maps a view ID to a Svelte component; your component receives `events`, `mode`, `focusDate`, `locale`, and the callbacks, and can read the calendar engines via context:
+
+```svelte
+<script lang="ts">
+  import { Calendar, type CalendarView } from '@nomideusz/svelte-calendar';
+  import KanbanDay from './KanbanDay.svelte';
+
+  const views: CalendarView[] = [
+    { id: 'day-kanban',  label: 'Kanban', mode: 'day',  component: KanbanDay },
+    { id: 'week-kanban', label: 'Kanban', mode: 'week', component: KanbanDay },
+  ];
+</script>
+
+<Calendar {adapter} {views} view="day-kanban" />
+```
+
+Building blocks for custom views are exported as primitives: `EventBlock` (a positioned event card), `TimeGutter` (hour labels), `DayHeader`, `NowIndicator`, and `EmptySlot` (click-to-create target).
+
 ## Mobile
 
 On narrow screens (`< 768px`), the calendar automatically remaps Planner views to touch-first Mobile views with swipe navigation, a centralized header with Day/Week pills, and a compact layout:
@@ -69,7 +89,7 @@ Mobile views include:
 - **MobileDay** — vertical time grid with hour labels, swipe left/right to change days, all-day event chips at the top, tap-to-create, and stable columns for overlapping events
 - **MobileWeek** — vertical day list showing each day's events with relative labels (Today, Tomorrow, etc.) and accessible event buttons inside each row
 
-Agenda views keep their list-based layout on mobile but hide desktop floating navigation in favor of the centralized header.
+Agenda views keep their list-based layout on mobile; navigation stays in the calendar header on all screen sizes.
 
 ## Callbacks
 
@@ -229,6 +249,8 @@ The default `auto` preset probes the host page's design and generates a calendar
 
 It also watches for changes (e.g. dark mode toggle) and updates automatically.
 
+The probing engine is exported for standalone use: `probeHostTheme(element, options?)` returns a `--dt-*` CSS string for the page around `element`; `observeHostTheme(element, callback, options?)` re-probes on theme changes and returns a stop function.
+
 Fine-tune auto-detection with the `autoTheme` prop:
 
 ```svelte
@@ -355,6 +377,8 @@ const palette = generatePalette('#e11d48');
 const adapter = createMemoryAdapter(events, { palette });
 ```
 
+Related exports: `VIVID_PALETTE` (the default palette) and `extractAccent(themeString)` (pull the accent color out of a `--dt-*` theme string).
+
 ### Multi-day & All-day
 
 Events spanning multiple days or flagged `allDay: true` render in a dedicated strip above timed events:
@@ -443,6 +467,31 @@ const adapter = createRestAdapter({
 
 The adapter calls `GET /events?start=...&end=...`, `POST /events`, `PATCH /events/:id`, and `DELETE /events/:id`.
 
+## JMAP Adapter
+
+Read events from a [JMAP Calendars](https://jmap.io/) server (Fastmail, Stalwart, Cyrus):
+
+```ts
+import { createJmapAdapter, type JmapClient } from '@nomideusz/svelte-calendar';
+
+const client: JmapClient = {
+  request: (calls) =>
+    fetch('https://api.example.com/jmap', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      body: JSON.stringify({ using: ['urn:ietf:params:jmap:calendars'], methodCalls: calls }),
+    }).then((r) => r.json()),
+};
+
+const adapter = createJmapAdapter(client, {
+  getAccountId: () => accountId,
+  calendarId: 'primary',          // optional: restrict to one calendar
+  timeZone: 'Europe/Warsaw',      // optional: default Etc/UTC
+});
+```
+
+Handles all-day events, ISO-duration ends, and per-calendar colors (pass `calendars` to map them).
+
 ## Mapped Adapter
 
 Wrap any static array of external records (yoga classes, gym schedules, appointments, timetables) without writing a custom adapter. Supply a declarative field mapping — or a `mapEvent` function for full control — and the adapter handles parsing, color assignment, tag extraction, and status coercion:
@@ -561,6 +610,8 @@ For full control over rendering, skip the `<Calendar>` component and drive every
 
 `cal.days` gives flat `HeadlessDay[]` with events attached; `cal.weeks` groups them into periods. `cal.todayQueue` returns `{ past, current, upcoming }` for today — updates every second via the built-in clock. `cal.hours` yields the visible hour numbers (cropped by `visibleHours`). Drag support is fully wired: `beginDragMove`, `beginDragCreate`, `updateDrag`, `commitDrag`, `cancelDrag`, plus `isDragging` / `dragPayload` / `dragMode` signals. Raw engines (`store`, `viewState`, `selection`, `dragState`, `clock`) are exposed for advanced cases.
 
+The engine factories behind them are also exported individually — `createEventStore(adapter)`, `createViewState(options)`, `createSelection()`, `createDragState()`, `createClock()` — if you want to compose your own calendar loop instead of using `createCalendar()`.
+
 For a simpler day-only list view, use `createAgenda()`:
 
 ```svelte
@@ -589,6 +640,8 @@ The `locale` prop controls date/time formatting (BCP 47):
 <Calendar {adapter} locale="de-DE" />
 ```
 
+`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:
 
 ```ts
@@ -601,7 +654,7 @@ setLabels({
 });
 ```
 
-Call `resetLabels()` to restore English defaults.
+Call `resetLabels()` to restore English defaults (`defaultLabels` exports them; `getLabels()` reads the active set).
 
 <details>
 <summary>All label keys</summary>
@@ -651,8 +704,41 @@ const utc = fromZonedTime(localDate, 'America/New_York');
 
 // Current time in a timezone
 const now = nowInZone('Asia/Tokyo');
+
+// Format a date directly in a timezone
+formatInTimeZone(date, 'America/New_York', { hour: '2-digit', minute: '2-digit' });
+```
+
+## Text Fitting (optional)
+
+Event cards fit their labels using character-width heuristics. For pixel-precise fitting (long titles, narrow columns, custom fonts), initialize the optional [Pretext](https://www.npmjs.com/package/pretext) measurement engine once at app startup — everything falls back gracefully if you don't:
+
+```svelte
+<script>
+  import { onMount } from 'svelte';
+  import { initTextMeasure } from '@nomideusz/svelte-calendar';
+
+  onMount(() => initTextMeasure());  // resolves true if Pretext loaded
+</script>
 ```
 
+Custom views can measure text themselves via `createTextMeasure(options)` → `fitContent({ title, subtitle, maxWidth, maxHeight, … })`.
+
+## Utilities
+
+Small helpers used by the built-in views, exported for custom rendering:
+
+| Export | Purpose |
+|--------|---------|
+| `fmtTime(date, locale?)` / `fmtH(hour, locale?)` | Locale-aware time / hour labels |
+| `fmtDuration(ms)` | `"1h 30m"`-style durations |
+| `fmtDay` / `fmtWeekRange` / `dateShort` / `dateWithWeekday` | Date labels |
+| `weekdayShort` / `weekdayLong` / `monthShort` / `monthLong` | Name parts from a day timestamp |
+| `startOfWeek(ms, mondayStart)` | Start-of-week timestamp |
+| `isAllDay(ev)` / `isMultiDay(ev)` | Event classification |
+| `segmentForDay(ev, dayMs)` | The slice of a multi-day event that falls on one day |
+| `createClock()` | Reactive clock (`tick`, `today`) driving now-lines and relative labels |
+
 ## Embeddable Widget
 
 Drop into any HTML page — no build tools needed. Registers a `<day-calendar>` custom element:

package/dist/calendar/Calendar.svelte

@@ -353,7 +353,6 @@
 		get snapInterval() { return snapInterval; },
 		get eventSnippet() { return eventSnippet; },
 		get emptySnippet() { return emptySnippet; },
-		get showNavigation() { return showNavigation; },
 		get equalDays() { return equalDays; },
 		get showDates() { return showDates; },
 		get hideDays() { return hideDays; },
@@ -571,23 +570,44 @@
 			</div>
 		{/if}
 
-	<!-- ─── Desktop chrome ─── -->
-	{:else}
-		<!-- Floating mode pills (hidden for Agenda views) -->
-		{#if showModePills && modes.length > 1 && activeView?.label !== 'Agenda'}
-			<div class="cal-pills" role="group" aria-label={L.viewMode}>
-				{#each modes as g}
-					<button
-						class="cal-pill"
-						class:cal-pill--active={viewState.mode === g}
-						aria-pressed={viewState.mode === g}
-						onclick={() => switchMode(g)}
-					>
-						{g === 'day' ? L.day : L.week}
+	<!-- ─── Desktop header ─── -->
+	{:else if showNavigation || (showModePills && modes.length > 1) || dateLabel}
+		<div class="cal-hd">
+			<div class="cal-hd-side">
+				{#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 : 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>
-				{/each}
+					<button class="cal-hd-btn" onclick={() => viewState.next()} aria-label={viewState.mode === 'day' ? L.nextDay : 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>
-		{/if}
+			<span class="cal-hd-title">{dateLabel}</span>
+			<div class="cal-hd-side cal-hd-side--end">
+				{#if showModePills && modes.length > 1}
+					<div class="cal-pills" role="group" aria-label={L.viewMode}>
+						{#each modes as g}
+							<button
+								class="cal-pill"
+								class:cal-pill--active={viewState.mode === g}
+								aria-pressed={viewState.mode === g}
+								onclick={() => switchMode(g)}
+							>
+								{g === 'day' ? L.day : L.week}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
 	{/if}
 
 	<div class="cal-body">
@@ -629,7 +649,7 @@
 		overflow: clip;
 		display: flex;
 		flex-direction: column;
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		box-sizing: border-box;
 	}
 	.cal--auto {
@@ -638,38 +658,105 @@
 	}
 
 
-	/* ── Floating pills ── */
+	/* ── Desktop header ── */
+	.cal-hd {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 12px;
+		min-height: 48px;
+		box-sizing: border-box;
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		flex-shrink: 0;
+	}
+
+	.cal-hd-side {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.cal-hd-side--end {
+		justify-content: flex-end;
+	}
+
+	.cal-hd-title {
+		font: 600 14px/1.2 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.cal-hd-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		background: transparent;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		border-radius: 6px;
+		cursor: pointer;
+		transition: background 120ms, color 120ms;
+	}
+
+	.cal-hd-btn:hover {
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
+	}
+
+	.cal-hd-btn:focus-visible,
+	.cal-hd-today:focus-visible,
+	.cal-pill:focus-visible {
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
+		outline-offset: 2px;
+	}
+
+	.cal-hd-today {
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		background: transparent;
+		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		padding: 6px 10px;
+		border-radius: 6px;
+		cursor: pointer;
+		white-space: nowrap;
+		margin-right: 2px;
+		transition: background 120ms, color 120ms, border-color 120ms;
+	}
+
+	.cal-hd-today:hover {
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		border-color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+
 	.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, var(--dt-bg, #ffffff)) 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));
+		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		flex-shrink: 0;
 	}
 
 	.cal-pill {
 		border: none;
 		background: transparent;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		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: 6px 12px;
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		padding: 5px 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));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.cal-pill--active {
@@ -677,11 +764,6 @@
 		color: var(--dt-btn-text, #fff);
 	}
 
-	.cal-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
-		outline-offset: 2px;
-	}
-
 	.cal-body {
 		flex: 1;
 		min-height: 0;
@@ -698,7 +780,7 @@
 		justify-content: center;
 		height: 100%;
 		font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
 
 	.cal-loading {
@@ -727,7 +809,7 @@
 		align-items: center;
 		gap: 4px;
 		padding: 8px 8px 6px;
-		border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		flex-shrink: 0;
 		min-height: 44px;
 	}
@@ -752,7 +834,7 @@
 		height: 32px;
 		border: none;
 		background: transparent;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		border-radius: 50%;
 		cursor: pointer;
 		transition: background 120ms, color 120ms;
@@ -760,11 +842,11 @@
 		flex-shrink: 0;
 	}
 	.cal-m-nav:hover {
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-		background: color-mix(in srgb, var(--dt-text, rgba(226, 232, 240, 0.85)) 8%, transparent);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
 	}
 	.cal-m-nav:active {
-		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.12));
+		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
 	}
 	.cal-m-nav:focus-visible {
 		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
@@ -777,13 +859,13 @@
 		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		border-radius: 8px;
 		padding: 2px;
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		flex-shrink: 0;
 	}
 	.cal-m-pill {
 		border: none;
 		background: transparent;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		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;
@@ -794,7 +876,7 @@
 		-webkit-tap-highlight-color: transparent;
 	}
 	.cal-m-pill:hover {
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.cal-m-pill--active {
 		background: var(--dt-accent, #2563eb);
@@ -805,7 +887,7 @@
 		flex: 1;
 		text-align: center;
 		font: 600 14px / 1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

package/dist/primitives/DayHeader.svelte

@@ -64,18 +64,18 @@
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.dh-name-long {
 		font-size: 12px;
 		text-transform: none;
 		letter-spacing: 0.01em;
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.dh-num {
 		font: 600 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		width: 28px;
 		height: 28px;
 		display: flex;
@@ -90,12 +90,12 @@
 
 	.dh-date {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	.dh-rel {
 		font: 500 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.dh-today .dh-rel {
 		color: var(--dt-accent, #2563eb);

package/dist/primitives/EmptySlot.svelte

@@ -64,13 +64,13 @@
 		min-height: 24px;
 	}
 	.es:hover {
-		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
-		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
+		border-color: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
+		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
 	}
 	.es:focus-visible {
 		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
-		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+		border-color: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
 	}
 
 	.es-hint {
@@ -93,7 +93,7 @@
 	}
 	.es-range {
 		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	.es-v {

package/dist/primitives/EventBlock.svelte

@@ -226,7 +226,7 @@
 		align-items: center;
 		gap: 5px;
 		font: 400 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -253,7 +253,7 @@
 		display: flex;
 		border-radius: 8px;
 		background: var(--dt-surface, var(--dt-bg, #ffffff));
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		overflow: hidden;
 	}
 	.eb-card .eb-stripe {
@@ -270,18 +270,18 @@
 	}
 	.eb-card .eb-title {
 		font: 500 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 	.eb-card .eb-time {
 		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.eb-card .eb-dur {
 		font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
 
 	/* ── Row ── */
@@ -290,7 +290,7 @@
 		align-items: center;
 		gap: 10px;
 		padding: 6px 12px;
-		border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 	}
 	.eb-row .eb-stripe {
 		width: 3px;
@@ -302,13 +302,13 @@
 	}
 	.eb-row .eb-time {
 		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		flex-shrink: 0;
 		width: 90px;
 	}
 	.eb-row .eb-title {
 		font: 400 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -316,14 +316,14 @@
 	}
 	.eb-row .eb-dur {
 		font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		flex-shrink: 0;
 	}
 
 	/* ── Shared ── */
 	.eb-subtitle {
 		font: 400 10px / 1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -345,7 +345,7 @@
 	}
 	.eb-location {
 		font: 400 9px / 1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -361,8 +361,8 @@
 		width: fit-content;
 	}
 	.eb-cancelled-badge {
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
-		background: color-mix(in srgb, var(--dt-text-2, rgba(148, 163, 184, 0.3)) 15%, transparent);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		background: color-mix(in srgb, var(--dt-text-2, rgba(0, 0, 0, 0.54)) 15%, transparent);
 	}
 	.eb-tentative-badge {
 		color: var(--_color);

package/dist/primitives/NowIndicator.svelte

@@ -123,7 +123,7 @@
 		height: 10px;
 		border-radius: 50%;
 		background: var(--ni-color, var(--dt-accent, #2563eb));
-		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(239, 68, 68, 0.35)));
+		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(37, 99, 235, 0.25)));
 	}
 	.ni-dot.vertical .ni-dot-circle {
 		margin-left: -5px;

package/dist/primitives/TimeGutter.svelte

@@ -68,7 +68,7 @@
 		top: 0;
 		bottom: 0;
 		width: 0;
-		border-left: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 	}
 	.tg-tick-half {
 		border-left-style: dashed;
@@ -79,7 +79,7 @@
 		top: 4px;
 		left: 6px;
 		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 	}
 
@@ -96,10 +96,10 @@
 		align-items: flex-start;
 		justify-content: flex-end;
 		padding: 2px 8px 0 0;
-		border-top: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border-top: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 	}
 	.tg-v .tg-label {
 		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
 </style>