@nomideusz/svelte-calendar 0.11.0 → 0.13.0

package/README.md

@@ -46,7 +46,7 @@ Users can also switch via the built-in Day/Week/Month pills.
 Planner views are designed for direct manipulation:
 
 - **Move** — drag an event to another day or time; a ghost previews the target before the move commits.
-- **Resize** — drag an event's edge handles (`day-planner`: left/right, `day-mobile`: top/bottom) to change its duration; `minDuration`/`maxDuration` clamp at commit.
+- **Resize** — drag an event's top/bottom edge handles to change its duration; `minDuration`/`maxDuration` clamp at commit.
 - **Drag-to-create** — press on empty canvas and sweep to draw a new event; a plain click still creates a default-length slot. Both fire `oneventcreate` with the final range, after blocked-slot and disabled-date validation.
 
 The month grid lists events as chips per day with a "+N more" overflow; clicking a day fires `ondayclick(date)` — the natural month → day drill-down.
@@ -743,21 +743,6 @@ const now = nowInZone('Asia/Tokyo');
 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:
@@ -838,6 +823,7 @@ The widget renders inside shadow DOM: host-page CSS (resets, theme stylesheets)
 | `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) |
+| `columns` | `boolean` | `false` | Timetable layout: week-agenda days as side-by-side columns on desktop (mobile keeps the stacked list). Pairs well with `equalDays`; overrides `compact` while active |
 | `dayHeader` | `Snippet<[{ date, isToday, dayName }]>` | — | Custom day header snippet for planner/agenda views |
 | `header` | `Snippet<[HeaderContext]>` | — | Replace entire header chrome (date label + mode pills + nav) |
 | `navigation` | `Snippet<[NavigationContext]>` | — | Replace just the prev/next/today controls |

package/dist/calendar/Calendar.svelte

@@ -69,6 +69,7 @@ let {
   maxDuration,
   disabledDates,
   compact = false,
+  columns = false,
   mobile: mobileProp = "auto",
   event: eventSnippet,
   empty: emptySnippet,
@@ -294,6 +295,9 @@ setContext("calendar", {
   get compact() {
     return compact;
   },
+  get columns() {
+    return columns;
+  },
   get labels() {
     return mergedLabels;
   },

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

@@ -81,6 +81,14 @@ interface Props {
     disabledDates?: Date[];
     /** Compact mode: use minimal text-row rendering in Agenda views (dot + time + title). */
     compact?: boolean;
+    /**
+     * Timetable layout: week-agenda days render as side-by-side columns
+     * (classic class-schedule grid) instead of a vertical list. Desktop
+     * only — mobile keeps the stacked layout. Pairs well with `equalDays`
+     * for recurring/template schedules. Overrides `compact` while active
+     * (single-line rows truncate at column width).
+     */
+    columns?: boolean;
     /**
      * Mobile mode.
      * - `'auto'` (default): detect via viewport width (< 768 px)

package/dist/core/index.d.ts

@@ -7,5 +7,3 @@ export type { CalendarLabels } from './locale.js';
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, BlockedSlot, EventStatus, } from './types.js';
 export { generatePalette, extractAccent, VIVID_PALETTE } from './palette.js';
-export { createTextMeasure, initTextMeasure } from './measure.js';
-export type { TextMeasure, TextMeasureOptions, ContentFit } from './measure.js';

package/dist/core/index.js

@@ -9,5 +9,3 @@ export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtTime, fmtD
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 // Palette
 export { generatePalette, extractAccent, VIVID_PALETTE } from './palette.js';
-// Text measurement (optional Pretext integration)
-export { createTextMeasure, initTextMeasure } from './measure.js';

package/dist/engine/view-state.svelte.d.ts

@@ -1,15 +1,16 @@
 import type { DateRange } from '../adapters/types.js';
 export type { DateRange };
 /**
- * Built-in view IDs. Custom view IDs are also supported — CalendarViewId
- * is typed as `string` so consumers can register any ID.
+ * Built-in view IDs. Custom view IDs are also supported — see CalendarViewId.
  */
-export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'week-planner' | 'week-agenda' | 'month-grid';
+export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'day-mobile' | 'week-planner' | 'week-agenda' | 'week-mobile' | 'month-grid';
 /**
  * Any view identifier. Use built-in strings like 'day-planner' or your own
  * custom IDs like 'day-kanban', 'week-resource', etc.
+ * (`string & {}` keeps the type open while preserving IDE autocomplete
+ * for the built-in IDs.)
  */
-export type CalendarViewId = string;
+export type CalendarViewId = BuiltInViewId | (string & {});
 export type ViewMode = 'day' | 'week' | 'month';
 export interface ViewStateOptions {
     view?: CalendarViewId;

package/dist/headless/create-range-agenda.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { TimelineEvent } from '../core/types.js';
+import type { CalendarAdapter } from '../adapters/types.js';
+export interface RangeAgendaOptions {
+    /** Data source (required). Can be a getter for reactive adapters. */
+    adapter: CalendarAdapter | (() => CalendarAdapter);
+    /** Days per page — prev()/next() move by this many (default: 7) */
+    days?: number;
+    /**
+     * First visible day (default: today). Not auto-aligned: pass the Monday
+     * of the week yourself if you want calendar-week pages.
+     */
+    initialDate?: Date;
+    /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') for the format helpers */
+    locale?: string;
+}
+export interface RangeAgendaDay {
+    /** Start-of-day timestamp (ms) */
+    ms: number;
+    /** Date object for this day */
+    date: Date;
+    /** ISO weekday (1=Mon … 7=Sun) */
+    weekday: number;
+    /** Is this today? (evaluated when the window derives — does not tick) */
+    isToday: boolean;
+    /** Is this day fully in the past? */
+    isPast: boolean;
+    /**
+     * Events overlapping this day, sorted by start. Multi-day events appear
+     * on every day they touch; all-day events sort first (00:00 start).
+     */
+    events: TimelineEvent[];
+}
+export interface HeadlessRangeAgenda {
+    /** Every day in the current window, in order, with events attached */
+    readonly days: RangeAgendaDay[];
+    /** The current window */
+    readonly range: {
+        start: Date;
+        end: Date;
+    };
+    /** Total event count in the window */
+    readonly count: number;
+    /** Whether the adapter is loading */
+    readonly loading: boolean;
+    /** Last adapter error, if any */
+    readonly error: string | null;
+    /** Page back one window */
+    prev(): void;
+    /** Page forward one window */
+    next(): void;
+    /** Move the window start to today (not re-aligned; use setDate for aligned jumps) */
+    goToday(): void;
+    /** Set the window start to a specific date */
+    setDate(date: Date): void;
+    /** Format a Date to locale time string (e.g. "14:30") */
+    fmtTime(date: Date): string;
+    /** Format event duration (e.g. "1h 30m") */
+    fmtDuration(event: TimelineEvent): string;
+    /** Format time range (e.g. "14:00 – 15:30") */
+    fmtRange(event: TimelineEvent): string;
+}
+export declare function createRangeAgenda(options: RangeAgendaOptions): HeadlessRangeAgenda;

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

@@ -0,0 +1,110 @@
+/**
+ * createRangeAgenda() — headless multi-day agenda state.
+ *
+ * Returns reactive state for rendering a window of days (default: one week)
+ * with events grouped per day — zero DOM, zero presentation opinions.
+ * Sits between createAgenda (live single day) and createCalendar (full grid
+ * engine): no clock, no drag, no selection — just "these days, these events",
+ * plus paging. Built for read-only schedule surfaces: public timetables,
+ * class listings, embeds.
+ *
+ * Must be called during component initialisation (Svelte 5 rune scope).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createRangeAgenda, createMemoryAdapter } from '@nomideusz/svelte-calendar';
+ *
+ *   const adapter = createMemoryAdapter([...]);
+ *   const agenda = createRangeAgenda({ adapter, days: 7 });
+ * </script>
+ *
+ * <button onclick={agenda.prev}>←</button>
+ * <button onclick={agenda.next}>→</button>
+ *
+ * {#each agenda.days.filter((d) => d.events.length > 0) as day}
+ *   <h3>{day.date.toLocaleDateString()}</h3>
+ *   {#each day.events as ev}
+ *     <a href="/book?slot={ev.id}">{agenda.fmtTime(ev.start)} {ev.title}</a>
+ *   {/each}
+ * {/each}
+ * ```
+ */
+import { untrack } from 'svelte';
+import { createEventStore } from '../engine/event-store.svelte.js';
+import { sod, DAY_MS } from '../core/time.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'
+        ? options.adapter
+        : () => options.adapter;
+    const store = $derived(createEventStore(resolveAdapter()));
+    // ── Window start (reactive, writable) ──
+    let startMs = $state(sod(initialDate?.getTime() ?? Date.now()));
+    const endMs = $derived(startMs + dayCount * DAY_MS);
+    // ── Load events for the window (re-runs on paging / adapter swap) ──
+    $effect(() => {
+        store.load({ start: new Date(startMs), end: new Date(endMs) });
+    });
+    // Eager initial load
+    untrack(() => {
+        store.load({ start: new Date(startMs), end: new Date(endMs) });
+    });
+    // ── Day derivations ──
+    const days = $derived.by(() => {
+        const todayMs = sod(Date.now());
+        const events = store.events;
+        return Array.from({ length: dayCount }, (_, i) => {
+            const ms = startMs + i * DAY_MS;
+            const dayEnd = ms + DAY_MS;
+            const date = new Date(ms);
+            // JS getDay(): 0=Sun … 6=Sat → ISO 1=Mon … 7=Sun
+            const weekday = ((date.getDay() + 6) % 7) + 1;
+            return {
+                ms,
+                date,
+                weekday,
+                isToday: ms === todayMs,
+                isPast: dayEnd <= todayMs,
+                events: events
+                    .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms)
+                    .sort((a, b) => a.start.getTime() - b.start.getTime()),
+            };
+        });
+    });
+    const count = $derived(days.reduce((n, d) => n + d.events.length, 0));
+    return {
+        get days() {
+            return days;
+        },
+        get range() {
+            return { start: new Date(startMs), end: new Date(endMs) };
+        },
+        get count() {
+            return count;
+        },
+        get loading() {
+            return store.loading;
+        },
+        get error() {
+            return store.error;
+        },
+        prev() {
+            startMs -= dayCount * DAY_MS;
+        },
+        next() {
+            startMs += dayCount * DAY_MS;
+        },
+        goToday() {
+            startMs = sod(Date.now());
+        },
+        setDate(date) {
+            startMs = sod(date.getTime());
+        },
+        fmtTime: (d) => _fmtTime(d, locale),
+        fmtDuration: (ev) => fmtDuration(ev.start, ev.end),
+        fmtRange: (ev) => `${_fmtTime(ev.start, locale)} – ${_fmtTime(ev.end, locale)}`,
+    };
+}

package/dist/headless/index.d.ts

@@ -1,4 +1,6 @@
 export { createCalendar } from './create-calendar.svelte.js';
 export { createAgenda } from './create-agenda.svelte.js';
 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';

package/dist/headless/index.js

@@ -1,2 +1,3 @@
 export { createCalendar } from './create-calendar.svelte.js';
 export { createAgenda } from './create-agenda.svelte.js';
+export { createRangeAgenda } from './create-range-agenda.svelte.js';

package/dist/index.d.ts

@@ -4,14 +4,14 @@ 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 { 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 type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, Selection as CalendarSelection, DragState, DragMode, DragPayload, } from './engine/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 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 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 } from './headless/index.js';
-export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, } from './headless/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';

package/dist/index.js

@@ -10,10 +10,10 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 // ─── Adapters ───────────────────────────────────────────
 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';
+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';
 // ─── Themes ─────────────────────────────────────────────
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';
 export { wrapAdapterWithTimezone } from './core/timezone.js';
 // ─── Headless API ───────────────────────────────────────
-export { createCalendar, createAgenda } from './headless/index.js';
+export { createCalendar, createAgenda, createRangeAgenda } from './headless/index.js';

package/dist/theme/auto.js

@@ -302,28 +302,59 @@ function probeAccent(root) {
     return null;
 }
 // ── Font detection ──────────────────────────────────────
-function probeFonts(el) {
-    let bodyFont = 'system-ui, sans-serif';
+/** Common CSS variable names for the host's monospace font stack. */
+const MONO_VAR_CANDIDATES = [
+    '--font-mono', // Tailwind v4 theme tokens, common convention
+    '--font-family-mono',
+    '--font-monospace',
+    '--mono-font',
+    '--code-font',
+];
+const MONO_FALLBACK = "ui-monospace, 'SFMono-Regular', monospace";
+/**
+ * Adopt the host page's fonts.
+ *
+ * Sans: the host element's *computed* font-family — the resolved authored
+ * stack, so webfont names come through verbatim. (Declaring `--dt-sans:
+ * inherit` does NOT work: a custom property with no ancestor value computes
+ * to guaranteed-invalid, so `var(--dt-sans, fallback)` used the fallback and
+ * the host font never applied.)
+ *
+ * Mono: common CSS variables on :root, then any code-ish element's computed
+ * font, then a generic stack.
+ */
+function probeFonts(host) {
+    let sans = 'system-ui, sans-serif';
     try {
-        const cs = getComputedStyle(el);
-        if (cs.fontFamily)
-            bodyFont = cs.fontFamily;
+        const f = getComputedStyle(host).fontFamily;
+        if (f)
+            sans = f;
     }
     catch {
         // getComputedStyle may fail in test environments
     }
-    // For monospace, check if the page defines one
-    const pre = el.querySelector('pre, code, .mono, [class*="mono"]');
-    let mono = "ui-monospace, 'SFMono-Regular', monospace";
-    if (pre) {
-        try {
-            const pf = getComputedStyle(pre).fontFamily;
-            if (pf)
-                mono = pf;
+    let mono = '';
+    try {
+        const rootCs = getComputedStyle(document.documentElement);
+        for (const name of MONO_VAR_CANDIDATES) {
+            const val = rootCs.getPropertyValue(name).trim();
+            if (val) {
+                mono = val;
+                break;
+            }
         }
-        catch { /* ignore */ }
     }
-    return { sans: bodyFont, mono };
+    catch { /* ignore */ }
+    if (!mono) {
+        const code = document.querySelector('pre, code, kbd, samp');
+        if (code) {
+            try {
+                mono = getComputedStyle(code).fontFamily || '';
+            }
+            catch { /* ignore */ }
+        }
+    }
+    return { sans, mono: mono || MONO_FALLBACK };
 }
 // ── Background walking ──────────────────────────────────
 /**
@@ -436,13 +467,9 @@ export function probeHostTheme(el, options = {}) {
     }
     const [aH, aS, aL] = rgbToHsl(...accent);
     // ── Fonts ──
-    // When auto-probing, use `inherit` so the calendar naturally inherits the
-    // host page's font via CSS inheritance. Probing getComputedStyle().fontFamily
-    // and re-declaring it can break the cascade (resolved names differ from the
-    // authored font stack). Only use an explicit value if the user overrides.
     const fonts = options.font
-        ? { sans: options.font, mono: "ui-monospace, 'SFMono-Regular', monospace" }
-        : { sans: 'inherit', mono: "ui-monospace, 'SFMono-Regular', monospace" };
+        ? { sans: options.font, mono: MONO_FALLBACK }
+        : probeFonts(host);
     // ── Text colors (probe host's actual text, validate contrast) ──
     const probedText = probeTextColor(host, bg);
     const textBase = probedText ?? (isDark ? [226, 232, 240] : [30, 30, 46]);
@@ -545,11 +572,19 @@ export function observeHostTheme(el, callback, options = {}) {
         attributes: true,
         attributeFilter: ['class', 'style', 'data-theme', 'data-mode', 'color-scheme'],
     });
+    // 3. Re-probe once the document settles. A probe during initial load can
+    //    read pre-stylesheet values (wrong background → wrong light/dark call);
+    //    late webfonts change computed font stacks. Both are one-shot events.
+    if (document.readyState !== 'complete') {
+        window.addEventListener('load', scheduleUpdate, { once: true });
+    }
+    document.fonts?.ready?.then(scheduleUpdate).catch(() => { });
     // Initial probe
     update();
     return () => {
         cancelAnimationFrame(rafId);
         mql?.removeEventListener('change', onScheme);
+        window.removeEventListener('load', scheduleUpdate);
         observer.disconnect();
     };
 }

package/dist/theme/presets.d.ts

@@ -23,16 +23,17 @@
  */
 export declare const auto = "";
 /**
- * Neutral — explicit light theme. White bg, blue accent, inherits host fonts.
+ * Neutral — explicit light theme. White bg, blue accent, system font stack
+ * (set --dt-sans on an ancestor or via CSS to use a custom font).
  * Use when embedding standalone without ancestor --dt-* vars.
  */
-export declare const neutral = "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: var(--asini-accent, #2563eb);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-weekend-bg: rgba(0, 0, 0, 0.02);\n\t--dt-hover: rgba(0, 0, 0, 0.04);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+export declare const neutral = "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: var(--asini-accent, #2563eb);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-weekend-bg: rgba(0, 0, 0, 0.02);\n\t--dt-hover: rgba(0, 0, 0, 0.04);\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
-export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.07);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.07);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 /** All available presets keyed by name */
 export declare const presets: {
     readonly auto: "";
-    readonly neutral: "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: var(--asini-accent, #2563eb);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-weekend-bg: rgba(0, 0, 0, 0.02);\n\t--dt-hover: rgba(0, 0, 0, 0.04);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
-    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.07);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+    readonly neutral: "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: var(--asini-accent, #2563eb);\n\t--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);\n\t--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);\n\t--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-weekend-bg: rgba(0, 0, 0, 0.02);\n\t--dt-hover: rgba(0, 0, 0, 0.04);\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
+    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.07);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-weekend-bg: rgba(148, 163, 184, 0.03);\n\t--dt-hover: rgba(148, 163, 184, 0.06);\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 };
 export type PresetName = keyof typeof presets;

package/dist/theme/presets.js

@@ -23,7 +23,8 @@
  */
 export const auto = ``;
 /**
- * Neutral — explicit light theme. White bg, blue accent, inherits host fonts.
+ * Neutral — explicit light theme. White bg, blue accent, system font stack
+ * (set --dt-sans on an ancestor or via CSS to use a custom font).
  * Use when embedding standalone without ancestor --dt-* vars.
  */
 export const neutral = `
@@ -44,7 +45,6 @@ export const neutral = `
 	--dt-success: rgba(22, 163, 74, 0.7);
 	--dt-weekend-bg: rgba(0, 0, 0, 0.02);
 	--dt-hover: rgba(0, 0, 0, 0.04);
-	--dt-sans: inherit;
 	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
 `;
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
@@ -66,7 +66,6 @@ export const midnight = `
 	--dt-success: rgba(74, 222, 128, 0.7);
 	--dt-weekend-bg: rgba(148, 163, 184, 0.03);
 	--dt-hover: rgba(148, 163, 184, 0.06);
-	--dt-sans: inherit;
 	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
 `;
 /** All available presets keyed by name */

package/dist/views/agenda/AgendaDay.svelte

@@ -19,6 +19,8 @@ let {
 const clock = createClock(ctx.timezone);
 const viewState = $derived(ctx.viewState);
 const equalDays = $derived(ctx.equalDays);
+const showDates = $derived(ctx.showDates);
+const hideDayHead = $derived(showDates && !!viewState);
 const isMobile = $derived(ctx.isMobile);
 const autoHeight = $derived(ctx.autoHeight);
 const compact = $derived(ctx.compact);
@@ -106,7 +108,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	onpointercancel={onPointerCancel}
 >
 	<div class="ag-body" role="group" aria-label={L.todaysLineup}>
-		<!-- ─── In-view date header (swipe nav is otherwise unlabelled) ─── -->
+		<!-- ─── In-view date header (only when the chrome doesn't label the day) ─── -->
+		{#if !hideDayHead}
 		<div class="ag-day-head">
 			{#if !equalDays && isToday}
 				<span class="ag-day-head-badge">{L.today}</span>
@@ -116,6 +119,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 			<span class="ag-day-head-name">{weekdayLong(dayMs, locale)}</span>
 			<span class="ag-day-head-date">{monthLong(dayMs, locale)} {dayNum(dayMs)}</span>
 		</div>
+		{/if}
 		{#if allDayBanner.length > 0}
 			<!-- ─── All-day / multi-day events ─── -->
 			<div class="ag-allday">
@@ -160,7 +164,6 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							onpointerenter={() => oneventhover?.(ev)}
 						>
 							<EventContent event={ev}>
-							<span class="ag-compact-row-dot"></span>
 							<span class="ag-compact-row-time">{fmt(ev.start)}</span>
 							<div class="ag-compact-row-main">
 								<span class="ag-compact-row-title">{ev.title}</span>
@@ -256,7 +259,6 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 									onpointerenter={() => oneventhover?.(ev)}
 								>
 									<EventContent event={ev}>
-									<span class="ag-compact-row-dot"></span>
 									<span class="ag-compact-row-time">{fmt(ev.start)}</span>
 									<div class="ag-compact-row-main">
 										<span class="ag-compact-row-title">{ev.title}</span>
@@ -1071,11 +1073,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-log-row--selected {
 		background: color-mix(in srgb, var(--ev-color) 6%, transparent);
 		border-radius: 6px;
-		padding-left: 8px;
-		padding-right: 8px;
-		margin-left: -8px;
-		margin-right: -8px;
-		width: calc(100% + 16px);
+		box-shadow: 0 0 0 8px color-mix(in srgb, var(--ev-color) 6%, transparent);
 	}
 	.ag-log-check {
 		font-size: 10px;
@@ -1137,13 +1135,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row--selected {
 		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
 		border-radius: 4px;
-		/* Highlight gutter comes from negative margins so the row's content
-		   stays aligned with its unselected siblings (no tap-shift). */
-		padding-left: 6px;
-		padding-right: 6px;
-		margin-left: -6px;
-		margin-right: -6px;
-		width: calc(100% + 12px);
+		/* The highlight bleeds into the gutter via a spread shadow — zero
+		   layout impact, so nothing shifts or clips even when the host
+		   reduces the gutters below the bleed width. */
+		box-shadow: 0 0 0 6px color-mix(in srgb, var(--ev-color) 10%, transparent);
 	}
 	.ag-compact-row:hover .ag-compact-row-title,
 	.ag-compact-row:active .ag-compact-row-title { color: var(--dt-text); }
@@ -1156,18 +1151,14 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 		border-radius: 4px;
 	}
-	.ag-compact-row-dot {
-		width: 5px;
-		height: 5px;
-		border-radius: 50%;
-		background: var(--ev-color, var(--dt-accent));
-		flex-shrink: 0;
-		align-self: center;
-	}
+	/* The time label doubles as the class-color signal (replaces the old
+	   dot): the event color mixed toward the text color, so it stays
+	   legible on any palette and costs zero horizontal space. */
 	.ag-compact-row-time {
 		font-size: 11px;
 		font-family: var(--dt-mono, monospace);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font-weight: 500;
+		color: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 60%, var(--dt-text, rgba(0, 0, 0, 0.87)));
 		min-width: 64px;
 		flex-shrink: 0;
 		line-height: 1.4;
@@ -1195,12 +1186,6 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag--mobile .ag-compact-row-sub {
 		max-width: 100%;
 	}
-	/* Wrapped rows are two lines tall — center-aligning the dot floats it
-	   between lines; pin it optically to the first (title) line instead. */
-	.ag--mobile .ag-compact-row-dot {
-		align-self: flex-start;
-		margin-top: 8px;
-	}
 	.ag-compact-row-title {
 		font-size: 12px;
 		font-weight: 500;