@nomideusz/svelte-calendar 0.2.3 → 0.3.1

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

@@ -19,6 +19,10 @@ export interface TimelineEvent {
     recurrence?: string;
     /** Whether this event can be moved / resized by the user */
     editable?: boolean;
+    /** Subtitle displayed below the title (e.g. instructor name, level) */
+    subtitle?: string;
+    /** Tags displayed as small pills (e.g. ["Beginner", "Yoga"]) */
+    tags?: string[];
     /** Arbitrary payload from the source app (bookings, attendees, etc.) */
     data?: Record<string, unknown>;
 }

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, } from './views/index.js';
+export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, WeekSchedule, } from './views/index.js';
 export type { SettingsField } from './views/index.js';
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 export { Calendar, Toolbar } from './calendar/index.js';
 export type { CalendarView } from './calendar/index.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
-export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
-export type { CalendarAdapter, DateRange, RestAdapterOptions } 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 { 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, generatePalette, VIVID_PALETTE, } from './core/index.js';
 export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
-export { midnight, parchment, indigo, neutral, bare, presets, stageBg } from './theme/index.js';
+export { midnight, parchment, indigo, neutral, bare, presets } from './theme/index.js';
 export type { PresetName } from './theme/index.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 // ─── Views ──────────────────────────────────────────────
-export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, } from './views/index.js';
+export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, WeekSchedule, } from './views/index.js';
 // ─── Primitives ─────────────────────────────────────────
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
@@ -7,8 +7,8 @@ export { Calendar, Toolbar } from './calendar/index.js';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── Adapters ───────────────────────────────────────────
-export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
+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, stageBg } from './theme/index.js';
+export { midnight, parchment, indigo, neutral, bare, presets } from './theme/index.js';

package/dist/primitives/EventBlock.svelte

@@ -89,12 +89,22 @@
 		<div class="eb-stripe"></div>
 		<div class="eb-body">
 			<span class="eb-title">{event.title}</span>
+			{#if event.subtitle}
+				<span class="eb-subtitle">{event.subtitle}</span>
+			{/if}
 			{#if showTime}
 				<span class="eb-time">{fmtTime(event.start)} – {fmtTime(event.end)}</span>
 			{/if}
 			{#if showDuration}
 				<span class="eb-dur">{fmtDuration(event.start, event.end)}</span>
 			{/if}
+			{#if event.tags && event.tags.length > 0}
+				<div class="eb-tags">
+					{#each event.tags as tag}
+						<span class="eb-tag">{tag}</span>
+					{/each}
+				</div>
+			{/if}
 			{#if active}<span class="eb-live-badge">now</span>{/if}
 		</div>
 	{:else}
@@ -102,9 +112,19 @@
 		<span class="eb-stripe"></span>
 		<span class="eb-time">{fmtTime(event.start)} – {fmtTime(event.end)}</span>
 		<span class="eb-title">{event.title}</span>
+		{#if event.subtitle}
+			<span class="eb-subtitle">{event.subtitle}</span>
+		{/if}
 		{#if showDuration}
 			<span class="eb-dur">{fmtDuration(event.start, event.end)}</span>
 		{/if}
+		{#if event.tags && event.tags.length > 0}
+			<span class="eb-tags">
+				{#each event.tags as tag}
+					<span class="eb-tag">{tag}</span>
+				{/each}
+			</span>
+		{/if}
 		{#if active}<span class="eb-live-badge">now</span>{/if}
 	{/if}
 {/snippet}
@@ -262,6 +282,28 @@
 	}
 
 	/* ── Shared ── */
+	.eb-subtitle {
+		font: 400 10px / 1.2 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.eb-tags {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 3px;
+	}
+	.eb-tag {
+		display: inline-block;
+		font: 500 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		padding: 2px 5px;
+		border-radius: 3px;
+		background: color-mix(in srgb, var(--_color) 18%, transparent);
+		color: var(--_color);
+	}
 	.eb-live-badge {
 		display: inline-flex;
 		align-items: center;

package/dist/theme/index.d.ts

@@ -1,2 +1,2 @@
-export { midnight, parchment, indigo, neutral, bare, presets, stageBg, } from './presets.js';
+export { midnight, parchment, indigo, neutral, bare, presets, } from './presets.js';
 export type { PresetName } from './presets.js';

package/dist/theme/index.js

@@ -1,2 +1,2 @@
 // ─── Theme barrel export ────────────────────────────────
-export { midnight, parchment, indigo, neutral, bare, presets, stageBg, } from './presets.js';
+export { midnight, parchment, indigo, neutral, bare, presets, } from './presets.js';

package/dist/theme/presets.d.ts

@@ -5,33 +5,28 @@
  * Pass to the `style` prop of any timeline component.
  */
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
-export declare const midnight = "\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.02);\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-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\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.02);\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-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
 /** Desert Parchment — warm analog planner, burnt sienna on aged paper */
-export declare const parchment = "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
+export declare const parchment = "\n\t--dt-stage-bg: #e4dace;\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
 /** Soft Indigo — calm productivity, muted lavender with indigo markers */
-export declare const indigo = "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
+export declare const indigo = "\n\t--dt-stage-bg: #efedf8;\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
 /**
  * Neutral — inherits fonts from host page, uses standard grays + safe blue accent.
  * Drop-in preset that blends into any website without fighting its design.
  */
-export declare const neutral = "\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: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\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-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\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: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\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-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
 /**
  * Bare — transparent skeleton that inherits everything from the host page.
  * All colors use currentColor/transparent/inherit so the calendar fully absorbs
  * the parent site's design. Override individual --dt-* tokens as needed.
  */
-export declare const bare = "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
+export declare const bare = "\n\t--dt-stage-bg: transparent;\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
 /** All available presets keyed by name */
 export declare const presets: {
-    readonly midnight: "\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.02);\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-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
-    readonly parchment: "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
-    readonly indigo: "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
-    readonly neutral: "\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: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\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-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
-    readonly bare: "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\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.02);\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-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
+    readonly parchment: "\n\t--dt-stage-bg: #e4dace;\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
+    readonly indigo: "\n\t--dt-stage-bg: #efedf8;\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\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: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\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-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
+    readonly bare: "\n\t--dt-stage-bg: transparent;\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
 };
 export type PresetName = keyof typeof presets;
-/**
- * Stage background color matching each theme.
- * Useful for the container behind the timeline component.
- */
-export declare const stageBg: Record<PresetName, string>;

package/dist/theme/presets.js

@@ -6,6 +6,7 @@
  */
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
 export const midnight = `
+	--dt-stage-bg: #080a0f;
 	--dt-bg: #0b0e14;
 	--dt-surface: #10141c;
 	--dt-border: rgba(148, 163, 184, 0.07);
@@ -29,6 +30,7 @@ export const midnight = `
 `;
 /** Desert Parchment — warm analog planner, burnt sienna on aged paper */
 export const parchment = `
+	--dt-stage-bg: #e4dace;
 	--dt-bg: #f0e9dd;
 	--dt-surface: #e8dfd0;
 	--dt-border: rgba(139, 110, 70, 0.12);
@@ -54,6 +56,7 @@ export const parchment = `
 `;
 /** Soft Indigo — calm productivity, muted lavender with indigo markers */
 export const indigo = `
+	--dt-stage-bg: #efedf8;
 	--dt-bg: #f7f6fc;
 	--dt-surface: #eeedf8;
 	--dt-border: rgba(99, 102, 241, 0.08);
@@ -81,6 +84,7 @@ export const indigo = `
  * Drop-in preset that blends into any website without fighting its design.
  */
 export const neutral = `
+	--dt-stage-bg: #ffffff;
 	--dt-bg: #ffffff;
 	--dt-surface: #f9fafb;
 	--dt-border: rgba(0, 0, 0, 0.08);
@@ -110,6 +114,7 @@ export const neutral = `
  * the parent site's design. Override individual --dt-* tokens as needed.
  */
 export const bare = `
+	--dt-stage-bg: transparent;
 	--dt-bg: transparent;
 	--dt-surface: transparent;
 	--dt-border: currentColor;
@@ -135,14 +140,3 @@ export const bare = `
 `;
 /** All available presets keyed by name */
 export const presets = { midnight, parchment, indigo, neutral, bare };
-/**
- * Stage background color matching each theme.
- * Useful for the container behind the timeline component.
- */
-export const stageBg = {
-    midnight: '#080a0f',
-    parchment: '#e4dace',
-    indigo: '#efedf8',
-    neutral: '#ffffff',
-    bare: 'transparent',
-};

package/dist/views/agenda/Agenda.svelte

@@ -287,6 +287,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 +298,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>
@@ -411,10 +421,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 +514,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 +614,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 +778,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 +1054,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 +1289,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 +1492,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/day/DayGrid.svelte

@@ -43,6 +43,11 @@
 		selectedEventId?: string | null;
 		/** Start weeks on Monday */
 		mondayStart?: boolean;
+		/** Read-only mode */
+		readOnly?: boolean;
+		/** Visible hour range [startHour, endHour) — adjusts night collapse */
+		visibleHours?: [number, number];
+		[key: string]: unknown;
 	}
 
 	let {
@@ -651,6 +656,16 @@
 							</span>
 						{/if}
 						<span class="fs-ev-title">{p.ev.title}</span>
+						{#if p.ev.subtitle && p.heightPx > 48}
+							<span class="fs-ev-sub">{p.ev.subtitle}</span>
+						{/if}
+						{#if p.ev.tags?.length && p.heightPx > 72}
+							<span class="fs-ev-tags">
+								{#each p.ev.tags as tag}
+									<span class="fs-ev-tag">{tag}</span>
+								{/each}
+							</span>
+						{/if}
 					</div>
 				</div>
 			{/each}
@@ -1050,6 +1065,29 @@
 		white-space: nowrap;
 	}
 
+	.fs-ev-sub {
+		font: 400 11px / 1 var(--dt-sans);
+		color: var(--dt-text-2);
+		opacity: 0.6;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.fs-ev-tags {
+		display: flex;
+		gap: 4px;
+	}
+
+	.fs-ev-tag {
+		font: 500 8px / 1 var(--dt-sans);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 18%, transparent);
+		padding: 1px 4px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
+
 	/* ─── Focus-visible (accessibility) ──────────── */
 	.fs-event:focus-visible,
 	.fs-night:focus-visible {

package/dist/views/day/DayGrid.svelte.d.ts

@@ -27,6 +27,11 @@ interface Props {
     selectedEventId?: string | null;
     /** Start weeks on Monday */
     mondayStart?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Visible hour range [startHour, endHour) — adjusts night collapse */
+    visibleHours?: [number, number];
+    [key: string]: unknown;
 }
 declare const DayGrid: import("svelte").Component<Props, {}, "">;
 type DayGrid = ReturnType<typeof DayGrid>;

package/dist/views/day/DayTimeline.svelte

@@ -269,6 +269,14 @@
 					onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(p.ev); } }}
 				>
 					<span class="dt-ev-title">{p.ev.title}</span>
+					{#if p.ev.subtitle}
+						<span class="dt-ev-sub">{p.ev.subtitle}</span>
+					{/if}
+					{#if p.ev.tags?.length}
+						{#each p.ev.tags as tag}
+							<span class="dt-ev-tag">{tag}</span>
+						{/each}
+					{/if}
 				</div>
 			{/each}
 		</div>
@@ -476,6 +484,7 @@
 		padding: 0 8px;
 		display: flex;
 		align-items: center;
+		gap: 4px;
 		cursor: pointer;
 		background: color-mix(in srgb, var(--ev-color) 22%, transparent);
 		border-left: 3px solid var(--ev-color);
@@ -502,4 +511,22 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.dt-ev-sub {
+		font: 400 9px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.6));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dt-ev-tag {
+		font: 500 7px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 20%, transparent);
+		padding: 1px 3px;
+		border-radius: 2px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
 </style>