@nomideusz/svelte-calendar 0.3.0 → 0.4.0

package/dist/adapters/memory.d.ts

@@ -14,7 +14,12 @@ import type { CalendarAdapter } from './types.js';
 export interface MemoryAdapterOptions {
     /** Map of category/title to color */
     colorMap?: Record<string, string>;
-    /** Auto-assign colors to events by category or title */
-    autoColor?: boolean;
+    /**
+     * Auto-assign colors to events by category or title.
+     *   true    → use the default vivid palette
+     *   string  → hex accent color (e.g. '#6366f1') to generate a
+     *             theme-harmonious palette via golden-angle hue rotation
+     */
+    autoColor?: boolean | string;
 }
 export declare function createMemoryAdapter(initial?: TimelineEvent[], options?: MemoryAdapterOptions): CalendarAdapter;

package/dist/adapters/memory.js

@@ -1,16 +1,19 @@
+import { generatePalette, VIVID_PALETTE } from '../core/palette.js';
 let counter = 0;
 function uid() {
     return `mem-${Date.now()}-${++counter}`;
 }
 /** Default palette for auto-coloring */
-const AUTO_COLORS = [
-    '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',
-    '#3b82f6', '#6366f1', '#a855f7', '#ec4899', '#f43f5e',
-    '#06b6d4', '#84cc16', '#d946ef', '#0ea5e9', '#10b981',
-];
+const AUTO_COLORS = VIVID_PALETTE;
 export function createMemoryAdapter(initial = [], options = {}) {
     const { colorMap, autoColor } = options;
     const events = [...initial];
+    // Resolve palette: vivid default or theme-aware
+    const palette = autoColor
+        ? typeof autoColor === 'string'
+            ? generatePalette(autoColor)
+            : AUTO_COLORS
+        : AUTO_COLORS;
     // Build auto-color assignments
     const colorAssignments = new Map();
     let colorIndex = 0;
@@ -24,7 +27,7 @@ export function createMemoryAdapter(initial = [], options = {}) {
             return colorMap[key];
         if (autoColor) {
             if (!colorAssignments.has(key)) {
-                colorAssignments.set(key, AUTO_COLORS[colorIndex % AUTO_COLORS.length]);
+                colorAssignments.set(key, palette[colorIndex % palette.length]);
                 colorIndex++;
             }
             return colorAssignments.get(key);

package/dist/adapters/recurring.d.ts

@@ -27,8 +27,13 @@ export interface RecurringAdapterOptions {
     mondayStart?: boolean;
     /** Map of category/title to color */
     colorMap?: Record<string, string>;
-    /** Auto-assign colors to events by category or title */
-    autoColor?: boolean;
+    /**
+     * Auto-assign colors to events by category or title.
+     *   true    → use the default vivid palette
+     *   string  → hex accent color (e.g. '#6366f1') to generate a
+     *             theme-harmonious palette via golden-angle hue rotation
+     */
+    autoColor?: boolean | string;
 }
 /**
  * Create a CalendarAdapter that projects recurring weekly events

package/dist/adapters/recurring.js

@@ -1,5 +1,6 @@
 import { startOfWeek } from '../core/time.js';
 import { DAY_MS } from '../core/time.js';
+import { generatePalette, VIVID_PALETTE } from '../core/palette.js';
 /** Parse "HH:MM" into [hours, minutes] */
 function parseTime(time) {
     const [h, m] = time.split(':').map(Number);
@@ -54,11 +55,7 @@ function getOverlappingWeeks(range, mondayStart) {
     return weeks;
 }
 /** Default palette for auto-coloring */
-const AUTO_COLORS = [
-    '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',
-    '#3b82f6', '#6366f1', '#a855f7', '#ec4899', '#f43f5e',
-    '#06b6d4', '#84cc16', '#d946ef', '#0ea5e9', '#10b981',
-];
+const AUTO_COLORS = VIVID_PALETTE;
 /**
  * Create a CalendarAdapter that projects recurring weekly events
  * onto concrete dates for whatever range the calendar requests.
@@ -67,6 +64,12 @@ const AUTO_COLORS = [
  */
 export function createRecurringAdapter(schedule, options = {}) {
     const { mondayStart = true, colorMap, autoColor } = options;
+    // Resolve palette: vivid default or theme-aware
+    const palette = autoColor
+        ? typeof autoColor === 'string'
+            ? generatePalette(autoColor)
+            : AUTO_COLORS
+        : AUTO_COLORS;
     // Build auto-color assignments
     const colorAssignments = new Map();
     if (autoColor || colorMap) {
@@ -77,7 +80,7 @@ export function createRecurringAdapter(schedule, options = {}) {
                 colorAssignments.set(key, colorMap[key]);
             }
             else if (autoColor && !colorAssignments.has(key)) {
-                colorAssignments.set(key, AUTO_COLORS[colorIndex % AUTO_COLORS.length]);
+                colorAssignments.set(key, palette[colorIndex % palette.length]);
                 colorIndex++;
             }
         }

package/dist/calendar/Calendar.svelte

@@ -72,6 +72,7 @@
 		oneventclick?: (event: TimelineEvent) => void;
 		oneventcreate?: (range: { start: Date; end: Date }) => void;
 		oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
+		onviewchange?: (viewId: CalendarViewId) => void;
 	}
 
 	let {
@@ -90,6 +91,7 @@
 		oneventclick,
 		oneventcreate,
 		oneventmove,
+		onviewchange,
 	}: Props = $props();
 
 	// In readOnly mode, suppress mutation callbacks
@@ -153,6 +155,23 @@
 		store.load({ start, end });
 	});
 
+	// Keep active view in sync when external defaultView changes after mount.
+	$effect(() => {
+		viewState.setView(defaultView);
+	});
+
+	// Keep view state's week-start rule in sync with incoming prop changes.
+	$effect(() => {
+		if (viewState.mondayStart !== mondayStart) {
+			viewState.setMondayStart(mondayStart);
+		}
+	});
+
+	// Notify host when active view changes (e.g. via toolbar concept/granularity toggles).
+	$effect(() => {
+		onviewchange?.(viewState.view);
+	});
+
 	// ── Resolve active view ──
 	const activeView = $derived(views.find((v) => v.id === viewState.view) ?? views[0]);
 
@@ -170,7 +189,7 @@
 	lang={locale}
 >
 	{#if showToolbar}
-		<Toolbar {viewState} views={toolbarViews} {links} />
+		<Toolbar {viewState} views={toolbarViews} {links} {locale} />
 	{/if}
 
 	<div class="cal-body">
@@ -181,6 +200,7 @@
 				style={theme}
 				height={height - (showToolbar ? 48 : 0)}
 				mondayStart={viewState.mondayStart}
+				{locale}
 				focusDate={viewState.focusDate}
 				oneventclick={oneventclick}
 				oneventcreate={effectiveCreate}

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

@@ -47,6 +47,7 @@ interface Props {
         end: Date;
     }) => void;
     oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
+    onviewchange?: (viewId: CalendarViewId) => void;
 }
 declare const Calendar: Component<Props, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/calendar/Toolbar.svelte

@@ -19,20 +19,23 @@
 		views?: ViewOption[];
 		/** Links to show in the toolbar */
 		links?: { href: string; label: string }[];
+		/** Locale used for labels */
+		locale?: string;
 	}
 
 	let {
 		viewState,
 		views = [],
 		links = [],
+		locale,
 	}: Props = $props();
 
 	const dateLabel = $derived(() => {
 		if (viewState.granularity === 'day') {
-			return `${weekdayLong(viewState.focusDate.getTime())}, ${fmtDay(viewState.focusDate.getTime(), Date.now())}`;
+			return `${weekdayLong(viewState.focusDate.getTime(), locale)}, ${fmtDay(viewState.focusDate.getTime(), Date.now(), undefined, locale)}`;
 		}
 		const ws = viewState.range.start.getTime();
-		return fmtWeekRange(ws);
+		return fmtWeekRange(ws, locale);
 	});
 
 	// Which granularities are available?

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

@@ -13,6 +13,8 @@ interface Props {
         href: string;
         label: string;
     }[];
+    /** Locale used for labels */
+    locale?: string;
 }
 declare const Toolbar: import("svelte").Component<Props, {}, "">;
 type Toolbar = ReturnType<typeof Toolbar>;

package/dist/core/index.d.ts

@@ -5,3 +5,4 @@ export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort,
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './types.js';
 export { timeToX } from './types.js';
+export { generatePalette, VIVID_PALETTE } from './palette.js';

package/dist/core/index.js

@@ -8,3 +8,5 @@ export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort,
 // Timezone utilities
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export { timeToX } from './types.js';
+// Palette
+export { generatePalette, VIVID_PALETTE } from './palette.js';

package/dist/core/palette.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Smart auto-color palette generator.
+ *
+ * Given a base accent hex (e.g. from `--dt-accent`), generates a
+ * palette of perceptually distinct colors that harmonize with the theme.
+ *
+ * Usage:
+ *   generatePalette('#ef4444', 8)  // 8 theme-harmonious colors
+ *   generatePalette(undefined, 8)  // falls back to the vivid default
+ */
+export declare const VIVID_PALETTE: string[];
+/**
+ * Generate `count` visually distinct and theme-harmonious colors
+ * by rotating hue evenly from the base accent, keeping saturation
+ * and lightness within a pleasant range.
+ *
+ * Dark themes (l < 0.5): bump lightness to 0.55–0.65 so colors pop on dark bg.
+ * Light themes (l ≥ 0.5): pull lightness to 0.38–0.48 so colors read on light bg.
+ *
+ * @param accent  Hex color string (e.g. '#ef4444'). If undefined, returns VIVID_PALETTE.
+ * @param count   Number of colors to generate (default: 15).
+ */
+export declare function generatePalette(accent?: string, count?: number): string[];

package/dist/core/palette.js

@@ -0,0 +1,109 @@
+/**
+ * Smart auto-color palette generator.
+ *
+ * Given a base accent hex (e.g. from `--dt-accent`), generates a
+ * palette of perceptually distinct colors that harmonize with the theme.
+ *
+ * Usage:
+ *   generatePalette('#ef4444', 8)  // 8 theme-harmonious colors
+ *   generatePalette(undefined, 8)  // falls back to the vivid default
+ */
+// ── Hardcoded vivid fallback (original behavior) ────────
+export const VIVID_PALETTE = [
+    '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6',
+    '#3b82f6', '#6366f1', '#a855f7', '#ec4899', '#f43f5e',
+    '#06b6d4', '#84cc16', '#d946ef', '#0ea5e9', '#10b981',
+];
+// ── Color math (hex ↔ HSL) ──────────────────────────────
+function hexToRgb(hex) {
+    const h = hex.replace('#', '');
+    const n = h.length === 3
+        ? parseInt(h[0] + h[0] + h[1] + h[1] + h[2] + h[2], 16)
+        : parseInt(h, 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+        return [0, 0, l];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r)
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g)
+        h = ((b - r) / d + 2) / 6;
+    else
+        h = ((r - g) / d + 4) / 6;
+    return [h, s, l];
+}
+function hslToHex(h, s, l) {
+    h = ((h % 1) + 1) % 1; // normalize to [0, 1)
+    const hue2rgb = (p, q, t) => {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l;
+    }
+    else {
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    const toHex = (v) => Math.round(v * 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+// ── Palette generation ──────────────────────────────────
+/**
+ * Generate `count` visually distinct and theme-harmonious colors
+ * by rotating hue evenly from the base accent, keeping saturation
+ * and lightness within a pleasant range.
+ *
+ * Dark themes (l < 0.5): bump lightness to 0.55–0.65 so colors pop on dark bg.
+ * Light themes (l ≥ 0.5): pull lightness to 0.38–0.48 so colors read on light bg.
+ *
+ * @param accent  Hex color string (e.g. '#ef4444'). If undefined, returns VIVID_PALETTE.
+ * @param count   Number of colors to generate (default: 15).
+ */
+export function generatePalette(accent, count = 15) {
+    if (!accent)
+        return VIVID_PALETTE.slice(0, count);
+    const [r, g, b] = hexToRgb(accent);
+    const [baseH, baseS, baseL] = rgbToHsl(r, g, b);
+    // Determine a good saturation range
+    const sat = Math.max(0.45, Math.min(0.8, baseS));
+    // Light vs dark theme: adjust lightness for contrast
+    const isDark = baseL < 0.5;
+    const lCenter = isDark ? 0.6 : 0.43;
+    const lRange = 0.05;
+    const colors = [];
+    for (let i = 0; i < count; i++) {
+        // Golden-angle hue rotation for maximum perceptual spread
+        const hue = baseH + (i * 0.618033988749895);
+        // Slight lightness oscillation for differentiation
+        const lOff = ((i % 3) - 1) * lRange;
+        // Slight saturation variation
+        const sOff = ((i % 2) === 0 ? 0.04 : -0.04);
+        const s = Math.max(0.35, Math.min(0.85, sat + sOff));
+        const l = Math.max(0.3, Math.min(0.7, lCenter + lOff));
+        colors.push(hslToHex(hue, s, l));
+    }
+    return colors;
+}

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

@@ -28,6 +28,7 @@ export interface ViewState {
     /** IANA timezone, or undefined for local */
     readonly timezone: string | undefined;
     setView(id: CalendarViewId): void;
+    setMondayStart(value: boolean): void;
     setFocusDate(date: Date): void;
     next(): void;
     prev(): void;

package/dist/engine/view-state.svelte.js

@@ -60,6 +60,9 @@ export function createViewState(options = {}) {
         setView(id) {
             view = id;
         },
+        setMondayStart(value) {
+            mondayStart = value;
+        },
         setFocusDate(date) {
             focusDate = date;
         },

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter } from './adapters/index.js';
 export type { CalendarAdapter, DateRange, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, MemoryAdapterOptions, } from './adapters/index.js';
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, VIVID_PALETTE, } from './core/index.js';
 export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
 export { midnight, parchment, indigo, neutral, bare, presets } from './theme/index.js';
 export type { PresetName } from './theme/index.js';

package/dist/index.js

@@ -9,6 +9,6 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 // ─── Adapters ───────────────────────────────────────────
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter } from './adapters/index.js';
 // ─── Core: clock, time, locale, types ───────────────────
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, VIVID_PALETTE, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
 export { midnight, parchment, indigo, neutral, bare, presets } from './theme/index.js';

package/dist/views/agenda/Agenda.svelte

@@ -25,6 +25,7 @@
 		/** 'day' = single-day timeline rail, 'week' = rolling 7-day view */
 		mode?: 'day' | 'week';
 		mondayStart?: boolean;
+		locale?: string;
 		height?: number;
 		events?: TimelineEvent[];
 		style?: string;
@@ -38,6 +39,7 @@
 	let {
 		mode = 'day',
 		mondayStart = true,
+		locale,
 		height = 520,
 		events = [],
 		style = '',
@@ -51,7 +53,7 @@
 	// ── Format helpers ──────────────────────────────────
 	function fmtTime(d: Date): string {
 		return d
-			.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+			.toLocaleTimeString(locale ?? 'en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
 			.toLowerCase();
 	}
 
@@ -220,7 +222,7 @@
 			? startOfWeek(sod(focusDate.getTime()), mondayStart)
 			: startOfWeek(clock.today, mondayStart),
 	);
-	const weekLabel = $derived(fmtWeekRange(weekStartMs));
+	const weekLabel = $derived(fmtWeekRange(weekStartMs, locale));
 
 	const weekDays = $derived.by((): DayGroup[] => {
 		if (mode !== 'week') return [];
@@ -255,8 +257,8 @@
 
 			out.push({
 				ms,
-				dayName: tier === 'today' || tier === 'tomorrow' ? weekdayLong(ms) : weekdayShort(ms),
-				dateLabel: `${monthShort(ms)} ${dayNum(ms)}`,
+				dayName: tier === 'today' || tier === 'tomorrow' ? weekdayLong(ms, locale) : weekdayShort(ms, locale),
+				dateLabel: `${monthShort(ms, locale)} ${dayNum(ms)}`,
 				tier,
 				events: dayEvts,
 				pastEvents,
@@ -287,6 +289,9 @@
 		<div class="ag-card-stripe"></div>
 		<div class="ag-card-body">
 			<span class="ag-card-title">{ev.title}</span>
+			{#if ev.subtitle}
+				<span class="ag-card-sub">{ev.subtitle}</span>
+			{/if}
 			<span class="ag-card-meta">
 				{#if isNow}
 					until {fmtTime(ev.end)}
@@ -295,6 +300,13 @@
 				{/if}
 				<span class="ag-card-dur">{duration(ev)}</span>
 			</span>
+			{#if ev.tags?.length}
+				<div class="ag-card-tags">
+					{#each ev.tags as tag}
+						<span class="ag-card-tag">{tag}</span>
+					{/each}
+				</div>
+			{/if}
 			{#if isNow}
 				<div class="ag-card-progress">
 					<div class="ag-card-progress-fill" style:width="{progress(ev) * 100}%"></div>
@@ -315,7 +327,7 @@
 	<header class="ag-header">
 		{#if mode === 'day'}
 			<div class="ag-header-left">
-				<span class="ag-title">{fmtDay(dayMs, clock.today, { short: false })}</span>
+				<span class="ag-title">{fmtDay(dayMs, clock.today, { short: false }, locale)}</span>
 				{#if isToday}
 					<span class="ag-clock">{clock.hm}</span>
 				{:else if isPastDay}
@@ -411,10 +423,20 @@
 											<span class="ag-q-card-title">{ev.title}</span>
 											<span class="ag-q-card-eta">{timeUntilEv(ev)}</span>
 										</div>
+										{#if ev.subtitle}
+											<span class="ag-q-card-sub">{ev.subtitle}</span>
+										{/if}
 										<div class="ag-q-card-meta">
 											{fmtTime(ev.start)} – {fmtTime(ev.end)}
 											<span class="ag-q-card-dur">{duration(ev)}</span>
 										</div>
+										{#if ev.tags?.length}
+											<div class="ag-q-card-tags">
+												{#each ev.tags as tag}
+													<span class="ag-q-card-tag">{tag}</span>
+												{/each}
+											</div>
+										{/if}
 									</div>
 								</div>
 							{/each}
@@ -494,10 +516,20 @@
 										<span class="ag-plan-order">{i + 1}</span>
 										<span class="ag-plan-title">{ev.title}</span>
 									</div>
+									{#if ev.subtitle}
+										<span class="ag-plan-sub">{ev.subtitle}</span>
+									{/if}
 									<div class="ag-plan-meta">
 										{fmtTime(ev.start)} – {fmtTime(ev.end)}
 										<span class="ag-plan-dur">{duration(ev)}</span>
 									</div>
+									{#if ev.tags?.length}
+										<div class="ag-plan-tags">
+											{#each ev.tags as tag}
+												<span class="ag-plan-tag">{tag}</span>
+											{/each}
+										</div>
+									{/if}
 								</div>
 							</div>
 						{/each}
@@ -584,6 +616,14 @@
 									<span class="ag-compact-dot"></span>
 									<span class="ag-compact-time">{fmtTime(ev.start)}</span>
 									<span class="ag-compact-title">{ev.title}</span>
+									{#if ev.subtitle}
+										<span class="ag-compact-sub">{ev.subtitle}</span>
+									{/if}
+									{#if ev.tags?.length}
+										{#each ev.tags as tag}
+											<span class="ag-compact-tag">{tag}</span>
+										{/each}
+									{/if}
 									<span class="ag-compact-dur">{duration(ev)}</span>
 								</div>
 							{/each}
@@ -740,6 +780,24 @@
 		margin-left: 6px;
 		color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
 	}
+	.ag-card-sub {
+		font-size: 11px;
+		color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
+		line-height: 1;
+	}
+	.ag-card-tags {
+		display: flex;
+		gap: 4px;
+		flex-wrap: wrap;
+	}
+	.ag-card-tag {
+		font: 500 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
+		padding: 2px 5px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
 	.ag-card-progress {
 		height: 3px;
 		background: var(--dt-border, rgba(255, 255, 255, 0.06));
@@ -998,6 +1056,25 @@
 		margin-left: 6px;
 		color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
 	}
+	.ag-q-card-sub {
+		font-size: 11px;
+		color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
+		line-height: 1;
+	}
+	.ag-q-card-tags {
+		display: flex;
+		gap: 4px;
+		flex-wrap: wrap;
+		margin-top: 2px;
+	}
+	.ag-q-card-tag {
+		font: 500 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
+		padding: 2px 5px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
 
 	/* ── PAST: minimal right gutter ── */
 	.ag-q-done {
@@ -1214,6 +1291,27 @@
 		margin-left: 6px;
 		color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
 	}
+	.ag-plan-sub {
+		font-size: 11px;
+		color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
+		line-height: 1;
+		padding-left: 22px;
+	}
+	.ag-plan-tags {
+		display: flex;
+		gap: 4px;
+		flex-wrap: wrap;
+		padding-left: 22px;
+		margin-top: 2px;
+	}
+	.ag-plan-tag {
+		font: 500 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
+		padding: 2px 5px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
 
 	/* Header badges for past/future days */
 	.ag-badge {
@@ -1396,6 +1494,20 @@
 		color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
 		flex-shrink: 0;
 	}
+	.ag-compact-sub {
+		font-size: 10px;
+		color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
+		flex-shrink: 0;
+	}
+	.ag-compact-tag {
+		font: 500 8px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 12%, transparent);
+		padding: 1px 4px;
+		border-radius: 3px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
 	.ag-compact-more {
 		font-size: 11px;
 		color: var(--dt-text-3);

package/dist/views/agenda/Agenda.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     /** 'day' = single-day timeline rail, 'week' = rolling 7-day view */
     mode?: 'day' | 'week';
     mondayStart?: boolean;
+    locale?: string;
     height?: number;
     events?: TimelineEvent[];
     style?: string;