@nomideusz/svelte-calendar 0.10.0 → 0.12.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,
@@ -97,12 +98,16 @@ function handleEventClick(ev) {
   oneventclick?.(ev);
 }
 let containerWidth = $state(
-  typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? MOBILE_BREAKPOINT - 1 : 0
+  typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? window.innerWidth : 0
 );
 const isMobileContainer = $derived(containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT);
 const useMobile = $derived(
   mobileProp === "auto" ? isMobileContainer : Boolean(mobileProp)
 );
+const HEADER_STACK_BREAKPOINT = 520;
+const stackHeader = $derived(
+  useMobile && containerWidth > 0 && containerWidth < HEADER_STACK_BREAKPOINT
+);
 let calEl = $state();
 let probedTheme = $state("");
 const needsProbe = $derived(theme === auto && autoTheme !== false);
@@ -290,6 +295,9 @@ setContext("calendar", {
   get compact() {
     return compact;
   },
+  get columns() {
+    return columns;
+  },
   get labels() {
     return mergedLabels;
   },
@@ -480,7 +488,8 @@ const navCtx = $derived({
 
 	<!-- ─── Mobile header (flow layout, no absolute) ─── -->
 	{:else if useMobile && (showNavigation || (showModePills && modes.length > 1) || dateLabel)}
-		<div class="cal-m-hd">
+		{@const titleBelow = stackHeader && !!dateLabel}
+		<div class="cal-m-hd" class:cal-m-hd--stack={stackHeader} class:cal-m-hd--titled={titleBelow}>
 			<div class="cal-m-left">
 				{#if showModePills && modes.length > 1}
 					<div class="cal-m-pills" role="radiogroup" aria-label={L.viewMode}>
@@ -500,7 +509,9 @@ const navCtx = $derived({
 				{/if}
 			</div>
 
-			<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			{#if !titleBelow}
+				<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			{/if}
 
 			<div class="cal-m-right">
 				{#if navigationSnippet}
@@ -525,6 +536,11 @@ const navCtx = $derived({
 				{/if}
 			</div>
 		</div>
+		{#if titleBelow}
+			<div class="cal-m-titlebar">
+				<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			</div>
+		{/if}
 
 	<!-- ─── Desktop header ─── -->
 	{:else if showNavigation || (showModePills && modes.length > 1) || dateLabel}
@@ -740,7 +756,9 @@ const navCtx = $derived({
 		transition: background 100ms, color 100ms;
 	}
 
-	.cal-pill:hover {
+	/* :not(--active) — the hover rule otherwise outranks the active color,
+	   and iOS keeps :hover stuck after a tap (dark text on the accent). */
+	.cal-pill:hover:not(.cal-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
@@ -806,6 +824,26 @@ const navCtx = $derived({
 		min-height: 44px;
 	}
 
+	/* Narrow containers: the date label moves to its own row (.cal-m-titlebar),
+	   so the controls row spreads pills and nav to the edges. */
+	.cal-m-hd--stack {
+		justify-content: space-between;
+	}
+	.cal-m-hd--titled {
+		border-bottom: none;
+		padding-bottom: 2px;
+	}
+	.cal-m-titlebar {
+		display: flex;
+		justify-content: center;
+		padding: 0 8px 8px;
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		flex-shrink: 0;
+	}
+	.cal-m-titlebar .cal-m-title {
+		flex: 0 1 auto;
+	}
+
 	.cal-m-left,
 	.cal-m-right {
 		display: flex;
@@ -867,7 +905,7 @@ const navCtx = $derived({
 		transition: background 100ms, color 100ms;
 		-webkit-tap-highlight-color: transparent;
 	}
-	.cal-m-pill:hover {
+	.cal-m-pill:hover:not(.cal-m-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.cal-m-pill--active {

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/index.d.ts

@@ -4,11 +4,11 @@ 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';

package/dist/index.js

@@ -10,7 +10,7 @@ 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';

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,17 +164,18 @@ 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>
-							<span class="ag-compact-row-title">{ev.title}</span>
-							{#if ev.subtitle}
-								<span class="ag-compact-row-sub">{ev.subtitle}</span>
-							{/if}
-							{#if ev.tags?.length}
-								{#each ev.tags as tag}
-									<span class="ag-compact-row-tag">{tag}</span>
-								{/each}
-							{/if}
+							<div class="ag-compact-row-main">
+								<span class="ag-compact-row-title">{ev.title}</span>
+								{#if ev.subtitle}
+									<span class="ag-compact-row-sub">{ev.subtitle}</span>
+								{/if}
+								{#if ev.tags?.length}
+									{#each ev.tags as tag}
+										<span class="ag-compact-row-tag">{tag}</span>
+									{/each}
+								{/if}
+							</div>
 							<span class="ag-compact-row-dur">{duration(ev)}</span>
 							</EventContent>
 						</button>
@@ -254,12 +259,13 @@ 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>
-									<span class="ag-compact-row-title">{ev.title}</span>
-									{#if ev.subtitle}
-										<span class="ag-compact-row-sub">{ev.subtitle}</span>
-									{/if}
+									<div class="ag-compact-row-main">
+										<span class="ag-compact-row-title">{ev.title}</span>
+										{#if ev.subtitle}
+											<span class="ag-compact-row-sub">{ev.subtitle}</span>
+										{/if}
+									</div>
 									</EventContent>
 								</button>
 							{:else}
@@ -715,7 +721,11 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		font-size: 16px;
 		font-weight: 700;
 	}
-	.ag-card--plan .ag-card-sub {
+	/* Everything under the title aligns past the order number — the
+	   subtitle, location, time and tags share one left edge. */
+	.ag-card--plan .ag-card-sub,
+	.ag-card--plan .ag-card-loc,
+	.ag-card--plan .ag-card-meta {
 		padding-left: 22px;
 	}
 	.ag-card--plan .ag-card-tags {
@@ -1063,8 +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;
+		box-shadow: 0 0 0 8px color-mix(in srgb, var(--ev-color) 6%, transparent);
 	}
 	.ag-log-check {
 		font-size: 10px;
@@ -1126,8 +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;
-		padding-left: 6px;
-		padding-right: 6px;
+		/* 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); }
@@ -1140,27 +1151,49 @@ 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;
 	}
+	/* Title + subtitle + tags cluster. One line while it fits; on mobile the
+	   metadata wraps to a second line under the title instead of crushing it. */
+	.ag-compact-row-main {
+		display: flex;
+		align-items: baseline;
+		gap: 8px;
+		flex: 1;
+		min-width: 0;
+	}
+	.ag--mobile .ag-compact-row-main {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	/* Mobile: size the title by its content when deciding line breaks — a long
+	   title claims the first line whole (ellipsizing only against the full row)
+	   and pushes subtitle/tags down instead of truncating at 35%. */
+	.ag--mobile .ag-compact-row-title {
+		flex-basis: auto;
+	}
+	/* On its own wrapped line the subtitle gets the full width */
+	.ag--mobile .ag-compact-row-sub {
+		max-width: 100%;
+	}
 	.ag-compact-row-title {
 		font-size: 12px;
 		font-weight: 500;
 		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 82%, transparent);
 		flex: 1;
+		/* The title is the row's identity — never let subtitle/tags/duration
+		   squeeze it out on narrow screens (flex: 1 alone resolves to 0px). */
+		min-width: 35%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1178,7 +1211,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row-sub {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 1;
+		flex-shrink: 3;
+		min-width: 0;
 		max-width: 45%;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1192,7 +1226,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		padding: 1px 4px;
 		border-radius: 3px;
 		white-space: nowrap;
-		flex-shrink: 0;
+		flex-shrink: 1;
+		min-width: 2.5em;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	.ag-compact-row--cancelled { opacity: 0.5; }
 	.ag-compact-row--cancelled .ag-compact-row-title { text-decoration: line-through; }