@nomideusz/svelte-calendar 0.6.4 → 0.6.7

package/README.md

@@ -25,7 +25,7 @@ pnpm add @nomideusz/svelte-calendar
 <Calendar {adapter} />
 ```
 
-That's it — 6 views (Day/Week × Planner, Agenda, Mobile), auto-coloring, drag-and-drop, all out of the box. The default `auto` theme probes your page's background, accent color, and fonts, so the calendar adapts to any design.
+That's it — 6 views (Day/Week × Planner, Agenda, Mobile), auto-coloring, drag-and-drop with live previews, all out of the box. The default `auto` theme probes your page's background, accent color, and fonts, so the calendar adapts to any design.
 
 ## Views
 
@@ -40,6 +40,8 @@ Switch between **Planner** (time grid) and **Agenda** (list) in Day or Week mode
 
 Users can also switch via the built-in Day/Week pills.
 
+Planner views are designed for direct manipulation: drag an event to another day or time and the calendar renders a ghost preview at the target position before committing the move.
+
 Hide the pills when your app controls the view externally:
 
 ```svelte
@@ -62,8 +64,8 @@ On narrow screens (`< 768px`), the calendar automatically remaps Planner views t
 ```
 
 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
-- **MobileWeek** — vertical day list showing each day's events with relative labels (Today, Tomorrow, etc.)
+- **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.
 
@@ -150,6 +152,8 @@ Disable specific dates:
 />
 ```
 
+Disabled dates prevent creating or moving events into those days. Existing events remain visible and clickable, which is useful for holidays, fully booked days, or read-only imported schedules.
+
 Custom day headers and hover previews:
 
 ```svelte
@@ -264,7 +268,7 @@ Or set them at the page level:
 }
 ```
 
-The auto-probe reads these first — if you set `--dt-bg` or `--accent` on `:root`, the calendar picks them up.
+The auto-probe reads these first — if you set `--dt-bg` or `--accent` on `:root`, the calendar picks them up. Component fallbacks intentionally use system fonts and neutral blue accents so the package stays clean in apps that do not provide custom tokens.
 
 ### Extending Presets
 
@@ -706,7 +710,7 @@ Drop into any HTML page — no build tools needed. Registers a `<day-calendar>`
 | `currentDate` | `Date` | — | Controlled focus date (drives which date the calendar shows) |
 | `days` | `number` | `7` | Number of days shown in week views (e.g. `3` for a rolling 3-day view) |
 | `blockedSlots` | `BlockedSlot[]` | — | Time ranges that cannot be booked (hatched overlay in planner views) |
-| `disabledDates` | `Date[]` | — | Dates that are fully disabled (dimmed, no interaction) |
+| `disabledDates` | `Date[]` | — | Dates that reject creation/moves while keeping existing events visible and clickable |
 | `minDuration` | `number` | — | Minimum event duration in minutes (enforced on create & resize) |
 | `maxDuration` | `number` | — | Maximum event duration in minutes (enforced on create & resize) |
 | `compact` | `boolean` | `false` | Minimal text-row rendering in Agenda views (dot + time + title) |

package/dist/adapters/index.d.ts

@@ -9,3 +9,5 @@ export { createMappedAdapter } from './mapped.js';
 export type { FieldMapping, MappedAdapterOptions, MutationHandler } from './mapped.js';
 export { createCompositeAdapter } from './composite.js';
 export type { CompositeAdapterOptions } from './composite.js';
+export { createJmapAdapter } from './jmap.js';
+export type { JmapClient, JmapCalendarAdapterOptions } from './jmap.js';

package/dist/adapters/index.js

@@ -3,3 +3,4 @@ export { createRestAdapter } from './rest.js';
 export { createRecurringAdapter } from './recurring.js';
 export { createMappedAdapter } from './mapped.js';
 export { createCompositeAdapter } from './composite.js';
+export { createJmapAdapter } from './jmap.js';

package/dist/adapters/jmap.d.ts

@@ -0,0 +1,22 @@
+import type { CalendarAdapter } from './types.js';
+export interface JmapClient {
+    request(calls: any[]): Promise<{
+        methodResponses: [string, any, string][];
+    }>;
+}
+export interface JmapCalendarAdapterOptions {
+    getAccountId: () => string;
+    calendarId?: string;
+    timeZone?: string;
+    /** Map JMAP calendar color/category names */
+    calendars?: {
+        id: string;
+        name: string;
+        color: string;
+    }[] | (() => {
+        id: string;
+        name: string;
+        color: string;
+    }[]);
+}
+export declare function createJmapAdapter(client: JmapClient, options: JmapCalendarAdapterOptions): CalendarAdapter;

package/dist/adapters/jmap.js

@@ -0,0 +1,130 @@
+export function createJmapAdapter(client, options) {
+    const getAccountId = options.getAccountId;
+    const timeZone = options.timeZone ?? 'Etc/UTC';
+    function parseIsoDuration(duration) {
+        const match = /^P(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+(?:\.\d+)?)S)?)?$/i.exec(duration);
+        if (!match)
+            return 0;
+        const days = Number(match[1] ?? 0);
+        const hours = Number(match[2] ?? 0);
+        const minutes = Number(match[3] ?? 0);
+        const seconds = Number(match[4] ?? 0);
+        return (((days * 24 + hours) * 60 + minutes) * 60 + seconds) * 1000;
+    }
+    function parseEventStart(event) {
+        if (event.utcStart)
+            return new Date(event.utcStart);
+        if (event.start) {
+            if (event.showWithoutTime) {
+                const [datePart] = event.start.split('T');
+                const [year, month, day] = datePart.split('-').map(Number);
+                return new Date(year, month - 1, day);
+            }
+            return new Date(event.start);
+        }
+        return new Date();
+    }
+    function parseEventEnd(event, start) {
+        if (event.utcEnd)
+            return new Date(event.utcEnd);
+        if (event.duration) {
+            return new Date(start.getTime() + parseIsoDuration(event.duration));
+        }
+        if (event.showWithoutTime) {
+            return new Date(start.getFullYear(), start.getMonth(), start.getDate(), 23, 59, 59, 999);
+        }
+        return new Date(start.getTime() + 60 * 60 * 1000);
+    }
+    function firstLocation(event) {
+        if (!event.locations)
+            return undefined;
+        for (const location of Object.values(event.locations)) {
+            if (location.name)
+                return location.name;
+            if (location.description)
+                return location.description;
+        }
+        return undefined;
+    }
+    function resolveCalendars() {
+        const cal = options.calendars;
+        if (typeof cal === 'function')
+            return cal();
+        return cal ?? [];
+    }
+    return {
+        async fetchEvents(range) {
+            const accountId = getAccountId();
+            if (!accountId)
+                return [];
+            const filter = {
+                after: range.start.toISOString(),
+                before: range.end.toISOString()
+            };
+            if (options.calendarId) {
+                filter.inCalendar = options.calendarId;
+            }
+            const response = await client.request([
+                [
+                    'CalendarEvent/query',
+                    {
+                        accountId,
+                        filter,
+                        expandRecurrences: true,
+                        timeZone,
+                        limit: 500
+                    },
+                    'ceq'
+                ],
+                [
+                    'CalendarEvent/get',
+                    {
+                        accountId,
+                        '#ids': { resultOf: 'ceq', name: 'CalendarEvent/query', path: '/ids' },
+                        properties: [
+                            'id',
+                            'calendarIds',
+                            'title',
+                            'description',
+                            'start',
+                            'duration',
+                            'timeZone',
+                            'showWithoutTime',
+                            'utcStart',
+                            'utcEnd',
+                            'locations'
+                        ]
+                    },
+                    'ceg'
+                ]
+            ]);
+            const queryResponse = response.methodResponses?.find(r => r[0] === 'CalendarEvent/query' || r[2] === 'ceq');
+            const getResponse = response.methodResponses?.find(r => r[0] === 'CalendarEvent/get' || r[2] === 'ceg');
+            if (queryResponse?.[0] === 'error') {
+                const error = queryResponse[1];
+                throw new Error(error.description ?? error.type ?? 'CalendarEvent/query failed');
+            }
+            if (!getResponse || getResponse[0] === 'error') {
+                return [];
+            }
+            const jmapEvents = getResponse[1].list ?? [];
+            const currentCalendars = resolveCalendars();
+            return jmapEvents.map((jmapEvent) => {
+                const start = parseEventStart(jmapEvent);
+                const end = parseEventEnd(jmapEvent, start);
+                const calendarIds = Object.keys(jmapEvent.calendarIds ?? {});
+                const associatedCal = currentCalendars.find((c) => calendarIds.includes(c.id));
+                return {
+                    id: jmapEvent.id,
+                    title: jmapEvent.title?.trim() || '(No title)',
+                    start,
+                    end,
+                    allDay: !!jmapEvent.showWithoutTime,
+                    location: firstLocation(jmapEvent),
+                    color: associatedCal?.color,
+                    category: associatedCal?.name
+                };
+            });
+        }
+    };
+}

package/dist/assets/favicon.svg

@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+	<title>svelte-calendar</title>
+	<rect width="64" height="64" rx="16" fill="#2563eb"/>
+	<rect x="14" y="18" width="36" height="32" rx="6" fill="#fff"/>
+	<path d="M14 27h36" stroke="#2563eb" stroke-width="4"/>
+	<path d="M23 13v10M41 13v10" stroke="#fff" stroke-width="5" stroke-linecap="round"/>
+	<rect x="21" y="33" width="7" height="7" rx="2" fill="#2563eb" opacity=".9"/>
+	<rect x="36" y="33" width="7" height="7" rx="2" fill="#2563eb" opacity=".35"/>
+</svg>

package/dist/calendar/Calendar.svelte

@@ -647,7 +647,7 @@
 		z-index: 20;
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		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;
@@ -660,7 +660,7 @@
 		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);
+		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		padding: 6px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
@@ -673,12 +673,12 @@
 	}
 
 	.cal-pill--active {
-		background: var(--dt-accent, #ef4444);
+		background: var(--dt-accent, #2563eb);
 		color: var(--dt-btn-text, #fff);
 	}
 
 	.cal-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
@@ -697,7 +697,7 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		font: 400 13px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
 	}
 
@@ -710,7 +710,7 @@
 		background: linear-gradient(
 			90deg,
 			transparent 0%,
-			var(--dt-accent, #ef4444) 50%,
+			var(--dt-accent, #2563eb) 50%,
 			transparent 100%
 		);
 		animation: cal-slide 1.2s ease-in-out infinite;
@@ -767,14 +767,14 @@
 		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.12));
 	}
 	.cal-m-nav:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
 	.cal-m-pills {
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		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));
@@ -797,7 +797,7 @@
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
 	}
 	.cal-m-pill--active {
-		background: var(--dt-accent, #ef4444);
+		background: var(--dt-accent, #2563eb);
 		color: var(--dt-btn-text, #fff);
 	}
 
@@ -821,8 +821,8 @@
 
 	.cal-m-today {
 		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-accent, #ef4444);
-		background: color-mix(in srgb, var(--dt-accent, #ef4444) 10%, transparent);
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 10%, transparent);
 		border: none;
 		padding: 5px 10px;
 		border-radius: 6px;
@@ -835,13 +835,13 @@
 		flex-shrink: 0;
 	}
 	.cal-m-today:hover {
-		background: color-mix(in srgb, var(--dt-accent, #ef4444) 18%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
 	}
 	.cal-m-today:active {
-		background: color-mix(in srgb, var(--dt-accent, #ef4444) 25%, transparent);
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 25%, transparent);
 	}
 	.cal-m-today:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 </style>

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { Calendar } from './calendar/index.js';
 export type { CalendarView } from './calendar/index.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
-export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter } from './adapters/index.js';
-export type { CalendarAdapter, WritableCalendarAdapter, DateRange, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, FieldMapping, MappedAdapterOptions, MutationHandler, CompositeAdapterOptions, } from './adapters/index.js';
+export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter } from './adapters/index.js';
+export type { CalendarAdapter, WritableCalendarAdapter, DateRange, 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, createTextMeasure, initTextMeasure, } from './core/index.js';
 export type { Clock, TimelineEvent, BlockedSlot, DaySegment, CalendarLabels, EventStatus, TextMeasure, TextMeasureOptions, ContentFit, } from './core/index.js';
 export { auto, neutral, midnight, presets } from './theme/index.js';

package/dist/index.js

@@ -5,7 +5,7 @@ export { Calendar } from './calendar/index.js';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── Adapters ───────────────────────────────────────────
-export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter } from './adapters/index.js';
+export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter } 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, createTextMeasure, initTextMeasure, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────

package/dist/primitives/DayHeader.svelte

@@ -61,7 +61,7 @@
 	}
 
 	.dh-name {
-		font: 500 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		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));
@@ -74,7 +74,7 @@
 	}
 
 	.dh-num {
-		font: 600 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 14px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
 		width: 28px;
 		height: 28px;
@@ -84,20 +84,20 @@
 		border-radius: 50%;
 	}
 	.dh-num-today {
-		background: var(--dt-accent, #ef4444);
+		background: var(--dt-accent, #2563eb);
 		color: var(--dt-btn-text, #fff);
 	}
 
 	.dh-date {
-		font: 400 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 	}
 
 	.dh-rel {
-		font: 500 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 500 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
 	}
 	.dh-today .dh-rel {
-		color: var(--dt-accent, #ef4444);
+		color: var(--dt-accent, #2563eb);
 	}
 </style>

package/dist/primitives/EmptySlot.svelte

@@ -68,7 +68,7 @@
 		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
 	}
 	.es:focus-visible {
-		outline: 2px solid var(--dt-accent, #ef4444);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
 	}
@@ -88,8 +88,8 @@
 	}
 
 	.es-plus {
-		font: 500 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
-		color: var(--dt-accent, #ef4444);
+		font: 500 14px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-accent, #2563eb);
 	}
 	.es-range {
 		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);

package/dist/primitives/EventBlock.svelte

@@ -47,7 +47,7 @@
 		children,
 	}: Props = $props();
 
-	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
+	const accentColor = $derived(event.color || 'var(--dt-accent, #2563eb)');
 	const isCancelled = $derived(event.status === 'cancelled');
 	const isTentative = $derived(event.status === 'tentative');
 	const isFull = $derived(event.status === 'full');
@@ -176,7 +176,7 @@
 
 <style>
 	.eb {
-		--_color: var(--eb-color, var(--dt-accent, #ef4444));
+		--_color: var(--eb-color, var(--dt-accent, #2563eb));
 		cursor: default;
 		transition: opacity 120ms, transform 80ms;
 	}
@@ -187,7 +187,7 @@
 		transform: translateY(-1px);
 	}
 	.eb:focus-visible {
-		outline: 2px solid var(--dt-accent, #ef4444);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 		border-radius: 4px;
 	}
@@ -225,7 +225,7 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 5px;
-		font: 400 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 400 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
 		white-space: nowrap;
 		overflow: hidden;
@@ -252,7 +252,7 @@
 	.eb-card {
 		display: flex;
 		border-radius: 8px;
-		background: var(--dt-surface, #10141c);
+		background: var(--dt-surface, var(--dt-bg, #ffffff));
 		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
 		overflow: hidden;
 	}
@@ -269,7 +269,7 @@
 		min-width: 0;
 	}
 	.eb-card .eb-title {
-		font: 500 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 500 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -280,7 +280,7 @@
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 	}
 	.eb-card .eb-dur {
-		font: 300 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
 	}
 
@@ -307,7 +307,7 @@
 		width: 90px;
 	}
 	.eb-row .eb-title {
-		font: 400 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 400 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
 		flex: 1;
 		overflow: hidden;
@@ -315,14 +315,14 @@
 		white-space: nowrap;
 	}
 	.eb-row .eb-dur {
-		font: 300 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
 		flex-shrink: 0;
 	}
 
 	/* ── Shared ── */
 	.eb-subtitle {
-		font: 400 10px / 1.2 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 400 10px / 1.2 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -335,7 +335,7 @@
 	}
 	.eb-tag {
 		display: inline-block;
-		font: 500 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 500 8px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
 		padding: 2px 5px;
@@ -344,7 +344,7 @@
 		color: var(--_color);
 	}
 	.eb-location {
-		font: 400 9px / 1.2 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 400 9px / 1.2 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -353,7 +353,7 @@
 	.eb-status-badge {
 		display: inline-flex;
 		align-items: center;
-		font: 700 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 700 8px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.06em;
 		text-transform: uppercase;
 		padding: 2px 6px;
@@ -369,8 +369,8 @@
 		background: color-mix(in srgb, var(--_color) 12%, transparent);
 	}
 	.eb-full-badge {
-		color: #ef4444;
-		background: color-mix(in srgb, #ef4444 15%, transparent);
+		color: #2563eb;
+		background: color-mix(in srgb, #2563eb 15%, transparent);
 	}
 	.eb-limited-badge {
 		color: var(--_color);
@@ -379,7 +379,7 @@
 	.eb-live-badge {
 		display: inline-flex;
 		align-items: center;
-		font: 700 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 700 8px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
 		color: var(--dt-btn-text, #fff);

package/dist/primitives/NowIndicator.svelte

@@ -104,7 +104,7 @@
 		height: 0;
 	}
 	.ni-line-bar {
-		background: var(--ni-color, var(--dt-accent, #ef4444));
+		background: var(--ni-color, var(--dt-accent, #2563eb));
 	}
 	.ni-line.vertical .ni-line-bar {
 		width: 2px;
@@ -122,7 +122,7 @@
 		width: 10px;
 		height: 10px;
 		border-radius: 50%;
-		background: var(--ni-color, var(--dt-accent, #ef4444));
+		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)));
 	}
 	.ni-dot.vertical .ni-dot-circle {
@@ -138,7 +138,7 @@
 		white-space: nowrap;
 		font: 600 10px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
 		color: var(--dt-btn-text, #fff);
-		background: var(--ni-color, var(--dt-accent, #ef4444));
+		background: var(--ni-color, var(--dt-accent, #2563eb));
 		padding: 3px 6px;
 		border-radius: 4px;
 	}
@@ -161,11 +161,11 @@
 	.ni-badge {
 		display: inline-flex;
 		align-items: center;
-		font: 700 9px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 700 9px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
 		color: var(--dt-btn-text, #fff);
-		background: var(--ni-color, var(--dt-accent, #ef4444));
+		background: var(--ni-color, var(--dt-accent, #2563eb));
 		padding: 2px 7px;
 		border-radius: 3px;
 		animation: ni-pulse 2s ease-in-out infinite;