@nomideusz/svelte-calendar 0.3.0 → 0.3.1

package/README.md

@@ -169,7 +169,7 @@ The `visibleHours` prop is a `[startHour, endHour)` tuple. It applies to the Wee
 
 ## Subtitle & Tags on Events
 
-`TimelineEvent` now supports `subtitle` and `tags` fields — rendered automatically by `EventBlock`:
+`TimelineEvent` supports `subtitle` and `tags` fields — rendered automatically in **all views**:
 
 ```ts
 const events: TimelineEvent[] = [
@@ -185,8 +185,9 @@ const events: TimelineEvent[] = [
 ];
 ```
 
-- **subtitle** — displayed as secondary text below the title in card and row variants
-- **tags** — rendered as small accent-colored pills
+- **subtitle** — secondary text below the title (all views: WeekGrid, DayGrid, DayTimeline, Agenda, EventBlock)
+- **tags** — accent-colored pills after the title (all views)
+- In space-constrained views (DayGrid, DayTimeline), subtitle/tags appear only when the event block is tall/wide enough
 
 ## Color Map & Auto-Coloring
 
@@ -201,10 +202,36 @@ const adapter = createMemoryAdapter(events, {
   },
 });
 
-// Or auto-assign from a built-in 15-color palette
+// Auto-assign from a built-in 15-color vivid palette
 const adapter = createMemoryAdapter(events, { autoColor: true });
 ```
 
+### Theme-Aware Auto-Coloring
+
+Pass the theme's accent hex to `autoColor` and the palette is generated to harmonize with your theme — colors rotate via golden-angle hue spacing from the accent, with lightness adjusted for dark/light backgrounds:
+
+```ts
+// Harmonious palette seeded from indigo accent
+const adapter = createMemoryAdapter(events, { autoColor: '#6366f1' });
+
+// Works with the recurring adapter too
+const adapter = createRecurringAdapter(schedule, { autoColor: '#ef4444' });
+```
+
+| `autoColor` value | Behaviour |
+|---|---|
+| `true` | Original 15-color vivid palette (fixed, theme-independent) |
+| `'#ef4444'` | Golden-angle hue rotation from that accent; lightness adapted to dark/light |
+
+You can also use the palette generator directly:
+
+```ts
+import { generatePalette } from '@nomideusz/svelte-calendar';
+
+generatePalette('#6366f1', 8);  // 8 theme-harmonious hex colors
+generatePalette();               // default vivid 15-color palette
+```
+
 Both `createMemoryAdapter` and `createRecurringAdapter` accept `colorMap` and `autoColor` options. Events with an explicit `color` field always take priority.
 
 ## Settings Panel
@@ -421,8 +448,8 @@ import {
 
 | Adapter | Use |
 |---------|-----|
-| `createMemoryAdapter(events, options?)` | In-memory — great for demos and prototyping. Supports `colorMap` and `autoColor`. |
-| `createRecurringAdapter(schedule, options?)` | Weekly recurring schedules — auto-projects onto viewed weeks. Read-only. |
+| `createMemoryAdapter(events, options?)` | In-memory — great for demos and prototyping. Supports `colorMap` and `autoColor` (including theme-aware). |
+| `createRecurringAdapter(schedule, options?)` | Weekly recurring schedules — auto-projects onto viewed weeks. Read-only. Supports `colorMap` and `autoColor`. |
 | `createRestAdapter(options)` | Fetch from a REST API with configurable endpoints. |
 
 ## Standalone Views

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/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/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

@@ -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

@@ -656,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}
@@ -1055,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/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>

package/dist/views/week/WeekGrid.svelte

@@ -303,8 +303,16 @@
 											onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 										>
 											<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>
-											<span class="wg-ev-title">{ev.title}</span>
-										</div>
+											<span class="wg-ev-title">{ev.title}</span>										{#if ev.subtitle}
+											<span class="wg-ev-sub">{ev.subtitle}</span>
+										{/if}
+										{#if ev.tags?.length}
+											<span class="wg-ev-tags">
+												{#each ev.tags as tag}
+													<span class="wg-ev-tag">{tag}</span>
+												{/each}
+											</span>
+										{/if}										</div>
 									{/each}
 									{#if day.events.length > MAX_EVENTS_SHOWN}
 										<div class="wg-ev-more">+{day.events.length - MAX_EVENTS_SHOWN} more</div>
@@ -480,7 +488,8 @@
 	.wg-ev {
 		display: flex;
 		align-items: center;
-		gap: 5px;
+		flex-wrap: wrap;
+		gap: 3px 5px;
 		padding: 3px 6px;
 		border-radius: 4px;
 		background: color-mix(in srgb, var(--ev-color) 12%, transparent);
@@ -516,6 +525,29 @@
 		text-overflow: ellipsis;
 	}
 
+	.wg-ev-sub {
+		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.wg-ev-tags {
+		display: flex;
+		gap: 3px;
+		flex-shrink: 0;
+	}
+
+	.wg-ev-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)) 15%, transparent);
+		padding: 1px 4px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
+
 	.wg-ev-more {
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
 	"type": "module",
 	"license": "MIT",