@nomideusz/svelte-calendar 0.11.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,
@@ -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/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,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;

package/dist/views/agenda/AgendaWeek.svelte

@@ -24,6 +24,7 @@ const hideDays = $derived(ctx.hideDays);
 const isMobile = $derived(ctx.isMobile);
 const autoHeight = $derived(ctx.autoHeight);
 const compact = $derived(ctx.compact);
+const cols = $derived(ctx.columns && !isMobile);
 const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
 const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
@@ -199,7 +200,6 @@ const weekDays = $derived.by(() => {
 		onpointerenter={() => oneventhover?.(ev)}
 	>
 		<EventContent event={ev}>
-		<span class="ag-compact-dot"></span>
 		<span class="ag-compact-time">{fmt(ev.start)}</span>
 		<div class="ag-compact-main">
 			<span class="ag-compact-title">{ev.title}</span>
@@ -240,13 +240,14 @@ const weekDays = $derived.by(() => {
 	class="ag ag--week"
 	class:ag--mobile={isMobile}
 	class:ag--auto={autoHeight}
+	class:ag--cols={cols}
 	style={style || undefined}
 	style:height={height ? `${height}px` : undefined}
 	onpointerdown={onPointerDown}
 	onpointerup={onPointerUp}
 	onpointercancel={onPointerCancel}
 >
-	<div class="ag-body" role="list" aria-label={L.weekAhead}>
+	<div class="ag-body" role="list" aria-label={L.weekAhead} style:--ag-cols={weekDays.length}>
 		{#each weekDays as day (day.ms)}
 			{@const expanded = day.tier === 'today' || day.tier === 'tomorrow'}
 			{#if day.tier === 'past'}
@@ -329,15 +330,19 @@ const weekDays = $derived.by(() => {
 
 				{#if day.events.length === 0}
 					<div class="ag-wday-empty">{L.noEvents}</div>
-				{:else if compact}
-					<!-- Compact: minimal dot + time + title rows for all days -->
+				{:else if compact && !cols}
+					<!-- Compact: minimal dot + time + title rows for all days.
+					     Ignored in columns mode — single-line rows truncate to
+					     nothing at column width; cards wrap instead. -->
 					<div class="ag-wday-compact">
 						{#each day.timedEvents as ev (ev.id)}
 							{@render compactRow(ev, false, false)}
 						{/each}
 					</div>
-				{:else if equalDays}
-					<!-- Equal days: card layout for all days, no time-relative badges -->
+				{:else if equalDays || (cols && !expanded)}
+					<!-- Equal days (or timetable columns): card layout, no time-relative
+					     badges. In columns, today/tomorrow still fall through to the
+					     expanded branch below for now/ETA treatment. -->
 					<div class="ag-wday-expanded">
 						{#each groupIntoSlots(day.timedEvents) as slot (slot.startMs)}
 							<div class="ag-wslot">
@@ -814,8 +819,9 @@ const weekDays = $derived.by(() => {
 		text-decoration: line-through;
 		text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
-	.ag-compact--done .ag-compact-dot {
-		opacity: 0.5;
+	.ag-compact--done .ag-compact-time {
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font-weight: 400;
 	}
 
 	/* Compact day events */
@@ -834,13 +840,10 @@ const weekDays = $derived.by(() => {
 	.ag-compact--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:hover .ag-compact-title,
 	.ag-compact:active .ag-compact-title {
@@ -855,18 +858,14 @@ const weekDays = $derived.by(() => {
 		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 		border-radius: 4px;
 	}
-	.ag-compact-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-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: 40px;
 		flex-shrink: 0;
 		white-space: nowrap;
@@ -897,12 +896,6 @@ const weekDays = $derived.by(() => {
 	.ag--mobile .ag-compact-sub {
 		max-width: 100%;
 	}
-	/* Wrapped rows are two/three lines tall — center-aligning the dot floats
-	   it between lines; pin it optically to the first (title) line instead. */
-	.ag--mobile .ag-compact-dot {
-		align-self: flex-start;
-		margin-top: 8px;
-	}
 	.ag-compact-title {
 		font-size: 12px;
 		font-weight: 500;
@@ -991,6 +984,51 @@ const weekDays = $derived.by(() => {
 		border-radius: 4px;
 	}
 
+	/* ═══ Timetable columns (desktop) ═══ */
+	.ag--cols .ag-body {
+		display: grid;
+		grid-template-columns: repeat(var(--ag-cols, 7), minmax(0, 1fr));
+	}
+	/* Columns stretch to the tallest day, so the separator runs full height */
+	.ag--cols .ag-wday {
+		border-bottom: none;
+		border-inline-start: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		min-width: 0;
+	}
+	.ag--cols .ag-wday:first-child {
+		border-inline-start: none;
+	}
+	/* Uniform head padding — the :first-child top bump would misalign columns.
+	   Also overrides the past-day head variant (extra class = higher specificity). */
+	.ag--cols .ag-wday .ag-wday-head {
+		padding: 12px 10px 8px;
+	}
+	/* Badge + name + date won't fit one line in a ~160px column */
+	.ag--cols .ag-wday-head-left {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	.ag--cols .ag-wday-expanded,
+	.ag--cols .ag-wday-compact,
+	.ag--cols .ag-wday-empty,
+	.ag--cols .ag-wday-past-line--summary {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	.ag--cols .ag-allday {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	/* Narrow cards: long titles get a third line, meta wraps instead of clipping */
+	.ag--cols .ag-card-title {
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+	}
+	.ag--cols .ag-card-meta {
+		flex-wrap: wrap;
+		row-gap: 3px;
+	}
+
 	/* ═══ Mobile adaptations ═══ */
 	.ag--mobile .ag-wday-head {
 		padding: 12px 16px;

package/dist/views/planner/Planner.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">import PlannerDay from "./PlannerDay.svelte";
-import PlannerWeek from "./PlannerWeek.svelte";
+<script lang="ts">import PlannerWeek from "./PlannerWeek.svelte";
 let { mode = "week", ...rest } = $props();
 </script>
 
-{#if mode === 'day'}
-	<PlannerDay {...rest} />
-{:else}
-	<PlannerWeek {...rest} />
-{/if}
+<!-- Both planner modes are the same vertical time grid; day is one column. -->
+<PlannerWeek {mode} {...rest} />