@nomideusz/svelte-calendar 1.0.0 → 1.1.0

package/dist/calendar/Calendar.svelte

@@ -95,7 +95,7 @@ import { wrapAdapterWithTimezone, toZonedTime, fromZonedTime } from "../core/tim
 import { isReadOnlyError, isNotFoundError } from "../adapters/errors.js";
 /** Breakpoint (px) at which auto-mobile activates */
 const MOBILE_BREAKPOINT = 768;
-let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 12, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
+let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 0, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
 // In readOnly mode, suppress mutation callbacks. With a timezone, the
 // drag plane is zoned wall-clock — hosts always receive real instants.
 const unzone = (d) => timezone ? fromZonedTime(d, timezone) : d;
@@ -778,8 +778,8 @@ const navCtx = $derived({
 		width: 100%;
 		min-width: 0;
 		height: var(--cal-h, 600px);
-		background: var(--dt-bg, inherit);
-		border-radius: var(--cal-r, 12px);
+		background: var(--dt-paper, none), var(--dt-bg, inherit);
+		border-radius: var(--cal-r, 0);
 		overflow: clip;
 		display: flex;
 		flex-direction: column;
@@ -798,8 +798,8 @@ const navCtx = $derived({
 		flex-wrap: wrap;
 		align-items: center;
 		gap: 8px;
-		padding: 8px 12px;
-		min-height: 48px;
+		padding: 6px 10px;
+		min-height: 44px;
 		box-sizing: border-box;
 		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		flex-shrink: 0;
@@ -818,7 +818,9 @@ const navCtx = $derived({
 	}
 
 	.cal-hd-title {
-		font: 600 14px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 500 16px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
+		letter-spacing: -0.01em;
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
@@ -834,7 +836,7 @@ const navCtx = $derived({
 		border: none;
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
-		border-radius: 6px;
+		border-radius: 0;
 		cursor: pointer;
 		transition: background 120ms, color 120ms;
 	}
@@ -853,11 +855,11 @@ const navCtx = $derived({
 
 	.cal-hd-today {
 		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		background: transparent;
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
-		padding: 6px 10px;
-		border-radius: 6px;
+		border: 1px solid var(--dt-border-day, var(--dt-border, rgba(0, 0, 0, 0.14)));
+		padding: 7px 10px;
+		border-radius: 0;
 		cursor: pointer;
 		white-space: nowrap;
 		margin-right: 2px;
@@ -873,13 +875,10 @@ const navCtx = $derived({
 		cursor: default;
 	}
 
+	/* View switch: plain text tabs; the chosen one carries an ink rule. */
 	.cal-pills {
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
-		border-radius: 8px;
-		padding: 2px;
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		flex-shrink: 0;
 	}
 
@@ -888,10 +887,11 @@ const navCtx = $derived({
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		cursor: pointer;
-		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
-		padding: 5px 12px;
-		border-radius: 6px;
-		transition: background 100ms, color 100ms;
+		font: 500 13px/1 var(--dt-sans, system-ui, sans-serif);
+		padding: 8px 8px 7px;
+		border-radius: 0;
+		box-shadow: inset 0 -2px 0 transparent;
+		transition: box-shadow 100ms, color 100ms;
 	}
 
 	/* :not(--active) — the hover rule otherwise outranks the active color,
@@ -900,9 +900,10 @@ const navCtx = $derived({
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
+	/* Selected = ink text over an ink rule; the accent keeps its three jobs. */
 	.cal-pill--active {
-		background: var(--dt-accent, #2563eb);
-		color: var(--dt-btn-text, #fff);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		box-shadow: inset 0 -2px 0 var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.cal-body {
@@ -1024,10 +1025,6 @@ const navCtx = $derived({
 	.cal-m-pills {
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
-		border-radius: 8px;
-		padding: 2px;
-		border: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		flex-shrink: 0;
 	}
 	.cal-m-pill {
@@ -1035,20 +1032,19 @@ const navCtx = $derived({
 		background: transparent;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		cursor: pointer;
-		font: 600 12px / 1 var(--dt-sans, system-ui, sans-serif);
-		padding: 9px 12px;
-		border-radius: 6px;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		transition: background 100ms, color 100ms;
+		font: 500 13px / 1 var(--dt-sans, system-ui, sans-serif);
+		padding: 11px 10px 9px;
+		border-radius: 0;
+		box-shadow: inset 0 -2px 0 transparent;
+		transition: box-shadow 100ms, color 100ms;
 		-webkit-tap-highlight-color: transparent;
 	}
 	.cal-m-pill:hover:not(.cal-m-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.cal-m-pill--active {
-		background: var(--dt-accent, #2563eb);
-		color: var(--dt-btn-text, #fff);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		box-shadow: inset 0 -2px 0 var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.cal-m-title {
@@ -1063,33 +1059,31 @@ const navCtx = $derived({
 	}
 
 	.cal-m-today {
-		font: 600 12px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-accent, #2563eb);
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 10%, transparent);
-		border: none;
+		font: 600 13px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		background: transparent;
+		border: 1px solid var(--dt-border-day, rgba(0, 0, 0, 0.12));
 		min-height: 40px;
 		padding: 5px 12px;
-		border-radius: 6px;
+		border-radius: 0;
 		cursor: pointer;
 		white-space: nowrap;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
 		transition: background 120ms, color 120ms;
 		-webkit-tap-highlight-color: transparent;
 		flex-shrink: 0;
 	}
 	.cal-m-today:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
+		border-color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.cal-m-today:active:not(:disabled) {
-		background: color-mix(in srgb, var(--dt-accent, #2563eb) 25%, transparent);
+		background: color-mix(in srgb, var(--dt-text, #000) 8%, transparent);
 	}
 	.cal-m-today:disabled {
 		opacity: 0.45;
 		cursor: default;
 	}
 	.cal-m-today:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
+		outline: 2px solid var(--dt-text, rgba(0, 0, 0, 0.87));
 		outline-offset: 2px;
 	}
 </style>

package/dist/core/index.d.ts

@@ -2,7 +2,7 @@ export { createClock } from './clock.svelte.js';
 export type { Clock } from './clock.svelte.js';
 export { DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, isMultiDay, isAllDay, segmentForDay, } from './time.js';
 export type { DaySegment } from './time.js';
-export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, defaultLabels, setLabels, resetLabels, getLabels, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtHParts, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, defaultLabels, setLabels, resetLabels, getLabels, } from './locale.js';
 export type { CalendarLabels } from './locale.js';
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, BlockedSlot, EventStatus, } from './types.js';

package/dist/core/index.js

@@ -4,7 +4,7 @@ export { createClock } from './clock.svelte.js';
 // Time constants & math
 export { DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, isMultiDay, isAllDay, segmentForDay, } from './time.js';
 // Locale-aware formatting
-export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, defaultLabels, setLabels, resetLabels, getLabels, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtHParts, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, defaultLabels, setLabels, resetLabels, getLabels, } from './locale.js';
 // Timezone utilities
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 // Palette

package/dist/core/locale.d.ts

@@ -100,6 +100,11 @@ export declare function getDefaultLocale(): string;
 export declare function is24HourLocale(locale?: string): boolean;
 /** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
 export declare function fmtH(h: number, locale?: string): string;
+/**
+ * Hour index (0-23) split for a timetable gutter: the numeral and the small
+ * part set beside it — `['13', '00']` in 24h locales, `['1', 'pm']` in 12h.
+ */
+export declare function fmtHParts(h: number, locale?: string): [string, string];
 /** Short weekday name for a timestamp: "Mon", "Tue", etc. */
 export declare function weekdayShort(ms: number, locale?: string): string;
 /** Long weekday name for a timestamp: "Monday", "Tuesday", etc. */

package/dist/core/locale.js

@@ -117,6 +117,15 @@ export function fmtH(h, locale) {
         return '12p';
     return h < 12 ? h + 'a' : h - 12 + 'p';
 }
+/**
+ * Hour index (0-23) split for a timetable gutter: the numeral and the small
+ * part set beside it — `['13', '00']` in 24h locales, `['1', 'pm']` in 12h.
+ */
+export function fmtHParts(h, locale) {
+    if (is24HourLocale(locale))
+        return [String(h), '00'];
+    return [String(h % 12 || 12), h < 12 ? 'am' : 'pm'];
+}
 /** Short weekday name for a timestamp: "Mon", "Tue", etc. */
 export function weekdayShort(ms, locale) {
     return new Date(ms).toLocaleDateString(locale ?? defaultLocale, { weekday: 'short' });

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInVi
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } from './adapters/index.js';
 export { CalendarReadOnlyError, EventNotFoundError, isReadOnlyError, isNotFoundError } from './adapters/index.js';
 export type { CalendarAdapter, WritableCalendarAdapter, DateRange, MemoryAdapterOptions, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, FieldMapping, MappedAdapterOptions, MutationHandler, CompositeAdapterOptions, JmapClient, JmapCalendarAdapterOptions, } from './adapters/index.js';
-export { createClock, sod, startOfWeek, addDaysMs, diffDays, 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 { createClock, sod, startOfWeek, addDaysMs, diffDays, fmtH, fmtHParts, 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';

package/dist/index.js

@@ -13,7 +13,7 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } from './adapters/index.js';
 export { CalendarReadOnlyError, EventNotFoundError, isReadOnlyError, isNotFoundError } from './adapters/index.js';
 // ─── Core: clock, time, locale, types ───────────────────
-export { createClock, sod, startOfWeek, addDaysMs, diffDays, 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 { createClock, sod, startOfWeek, addDaysMs, diffDays, fmtH, fmtHParts, 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/primitives/EmptySlot.svelte

@@ -77,7 +77,8 @@ function handleKeydown(e) {
 		color: var(--dt-accent, #2563eb);
 	}
 	.es-range {
-		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 

package/dist/primitives/EventBlock.svelte

@@ -245,7 +245,8 @@ function handleKeydown(e) {
 		white-space: nowrap;
 	}
 	.eb-card .eb-time {
-		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.eb-card .eb-dur {
@@ -270,7 +271,8 @@ function handleKeydown(e) {
 		flex-shrink: 0;
 	}
 	.eb-row .eb-time {
-		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		flex-shrink: 0;
 		width: 90px;

package/dist/primitives/NowIndicator.svelte

@@ -106,7 +106,8 @@ const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 	.ni-label {
 		position: absolute;
 		white-space: nowrap;
-		font: 600 10px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		font: 600 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-btn-text, #fff);
 		background: var(--ni-color, var(--dt-accent, #2563eb));
 		padding: 3px 6px;

package/dist/primitives/TimeGutter.svelte

@@ -61,7 +61,8 @@ const firstHour = $derived(hours[0] ?? 0);
 		position: absolute;
 		top: 4px;
 		left: 6px;
-		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 	}
@@ -83,7 +84,8 @@ const firstHour = $derived(hours[0] ?? 0);
 		border-top: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 	}
 	.tg-v .tg-label {
-		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		font-variant-numeric: tabular-nums;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
 </style>

package/dist/text-fit.js

@@ -3,6 +3,9 @@
 // event handlers, never during SSR. `font` is a canvas font string, e.g.
 // "500 12px Inter" — name a real family; bare `system-ui` measures wrong on macOS.
 import { prepare, layout, prepareWithSegments, measureNaturalWidth } from '@chenglou/pretext';
+// pretext needs Intl.Segmenter (Firefox < 125 has none): there the attachments
+// leave the server's text as it is.
+const canMeasure = typeof Intl !== 'undefined' && 'Segmenter' in Intl;
 export function lineCount(text, font, width, options) {
     return layout(prepare(text, font, options), width, 1).lineCount;
 }
@@ -71,6 +74,8 @@ export function fontOf(el) {
  */
 export function fitLabel(candidates, lines = 1) {
     return (el) => {
+        if (!canMeasure)
+            return;
         const font = fontOf(el);
         let width = 0;
         const apply = () => { el.textContent = pickFit(candidates, font, width, lines); };
@@ -179,7 +184,7 @@ export function breakLines(text, font, width) {
  */
 export function typeset(text) {
     return (el) => {
-        if (getComputedStyle(el).whiteSpace !== 'normal')
+        if (!canMeasure || getComputedStyle(el).whiteSpace !== 'normal')
             return;
         const font = fontOf(el);
         let width = 0;

package/dist/theme/auto.js

@@ -485,13 +485,13 @@ export function probeHostTheme(el, options = {}) {
         ? mix(calBg, [255, 255, 255], 0.04) // surface: lift from card
         : mix(calBg, [0, 0, 0], 0.02); // slightly darker stripe
     // ── Border colors ──
-    const borderAlpha = isDark ? 0.07 : 0.08;
-    const borderDayAlpha = isDark ? 0.14 : 0.14;
+    // Rules are drawn, not hinted: the grid reads as the calendar's structure.
+    const borderAlpha = isDark ? 0.16 : 0.3;
+    const borderDayAlpha = isDark ? 0.32 : 0.6;
     const borderRgb = isDark ? [148, 163, 184] : [0, 0, 0];
     // ── Accent derivatives ──
     const accentDim = isDark ? 0.15 : 0.12;
     const glow = isDark ? 0.30 : 0.25;
-    const todayBg = isDark ? 0.07 : 0.07;
     // Ensure accent is readable on the background — adjust lightness if needed
     const accentL = isDark
         ? Math.max(aL, 0.45) // bright enough on dark
@@ -511,18 +511,21 @@ export function probeHostTheme(el, options = {}) {
         `--dt-surface: ${rgbStr(...surface)}`,
         `--dt-border: ${rgba(...borderRgb, borderAlpha)}`,
         `--dt-border-day: ${rgba(...borderRgb, borderDayAlpha)}`,
-        `--dt-text: ${rgba(...textBase, isDark ? 0.87 : 0.87)}`,
-        `--dt-text-2: ${rgba(...textBase, isDark ? 0.55 : 0.54)}`,
-        `--dt-text-3: ${rgba(...textBase, isDark ? 0.38 : 0.38)}`,
+        `--dt-text: ${rgba(...textBase, isDark ? 0.92 : 1)}`,
+        `--dt-text-2: ${rgba(...textBase, isDark ? 0.62 : 0.66)}`,
+        `--dt-text-3: ${rgba(...textBase, isDark ? 0.46 : 0.54)}`,
         `--dt-accent: ${rgbStr(...accentAdj)}`,
         `--dt-accent-dim: ${rgba(...accentAdj, accentDim)}`,
         `--dt-glow: ${rgba(...accentAdj, glow)}`,
-        `--dt-today-bg: ${rgba(...accentAdj, todayBg)}`,
+        // Today is marked by its number and the now line, never a column wash.
+        `--dt-today-bg: transparent`,
         `--dt-btn-text: ${btnText}`,
         `--dt-scrollbar: ${rgba(...borderRgb, scrollAlpha)}`,
         `--dt-success: ${rgba(...successRgb, 0.7)}`,
         `--dt-weekend-bg: ${rgba(...borderRgb, isDark ? 0.03 : 0.02)}`,
         `--dt-hover: ${rgba(...borderRgb, isDark ? 0.06 : 0.04)}`,
+        // Events are ink: the same colour as the text, so the accent keeps its three jobs.
+        `--dt-event: ${rgba(...textBase, isDark ? 0.92 : 1)}`,
         `--dt-sans: ${fonts.sans}`,
         `--dt-mono: ${fonts.mono}`,
     ];

package/dist/theme/presets.d.ts

@@ -23,17 +23,23 @@
  */
 export declare const auto = "";
 /**
- * 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.
+ * Neutral — explicit light theme: warm paper ground, ink text, hairline
+ * rules, one accent (the host's `--asini-accent`, else blue) for the all-day
+ * band, the now line and today. Events are marked in ink (`--dt-event`), so
+ * the accent keeps those three jobs. 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.
+ *
+ * `--dt-paper` is an optional background-image layer (a paper texture) that
+ * every opaque calendar surface paints over `--dt-bg`; default none.
  */
-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";
+export declare const neutral = "\n\t--dt-stage-bg: #efebe9;\n\t--dt-bg: #efebe9;\n\t--dt-surface: #f4f1ee;\n\t--dt-border: rgba(15, 15, 15, 0.3);\n\t--dt-border-day: rgba(15, 15, 15, 0.6);\n\t--dt-text: #0f0f0f;\n\t--dt-text-2: rgba(15, 15, 15, 0.66);\n\t--dt-text-3: rgba(15, 15, 15, 0.54);\n\t--dt-accent: var(--asini-accent, #1d4fd7);\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: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(15, 15, 15, 0.18);\n\t--dt-weekend-bg: rgba(15, 15, 15, 0.035);\n\t--dt-hover: rgba(15, 15, 15, 0.05);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\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-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: transparent;\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-event: var(--dt-text);\n\t--dt-paper: none;\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-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";
+    readonly neutral: "\n\t--dt-stage-bg: #efebe9;\n\t--dt-bg: #efebe9;\n\t--dt-surface: #f4f1ee;\n\t--dt-border: rgba(15, 15, 15, 0.3);\n\t--dt-border-day: rgba(15, 15, 15, 0.6);\n\t--dt-text: #0f0f0f;\n\t--dt-text-2: rgba(15, 15, 15, 0.66);\n\t--dt-text-3: rgba(15, 15, 15, 0.54);\n\t--dt-accent: var(--asini-accent, #1d4fd7);\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: transparent;\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(15, 15, 15, 0.18);\n\t--dt-weekend-bg: rgba(15, 15, 15, 0.035);\n\t--dt-hover: rgba(15, 15, 15, 0.05);\n\t--dt-event: var(--dt-text);\n\t--dt-paper: none;\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: transparent;\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-event: var(--dt-text);\n\t--dt-paper: none;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n";
 };
 export type PresetName = keyof typeof presets;

package/dist/theme/presets.js

@@ -23,28 +23,35 @@
  */
 export const auto = ``;
 /**
- * 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.
+ * Neutral — explicit light theme: warm paper ground, ink text, hairline
+ * rules, one accent (the host's `--asini-accent`, else blue) for the all-day
+ * band, the now line and today. Events are marked in ink (`--dt-event`), so
+ * the accent keeps those three jobs. 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.
+ *
+ * `--dt-paper` is an optional background-image layer (a paper texture) that
+ * every opaque calendar surface paints over `--dt-bg`; default none.
  */
 export const neutral = `
-	--dt-stage-bg: #ffffff;
-	--dt-bg: #ffffff;
-	--dt-surface: #f9fafb;
-	--dt-border: rgba(0, 0, 0, 0.08);
-	--dt-border-day: rgba(0, 0, 0, 0.14);
-	--dt-text: rgba(0, 0, 0, 0.87);
-	--dt-text-2: rgba(0, 0, 0, 0.54);
-	--dt-text-3: rgba(0, 0, 0, 0.38);
-	--dt-accent: var(--asini-accent, #2563eb);
+	--dt-stage-bg: #efebe9;
+	--dt-bg: #efebe9;
+	--dt-surface: #f4f1ee;
+	--dt-border: rgba(15, 15, 15, 0.3);
+	--dt-border-day: rgba(15, 15, 15, 0.6);
+	--dt-text: #0f0f0f;
+	--dt-text-2: rgba(15, 15, 15, 0.66);
+	--dt-text-3: rgba(15, 15, 15, 0.54);
+	--dt-accent: var(--asini-accent, #1d4fd7);
 	--dt-accent-dim: color-mix(in srgb, var(--dt-accent) 12%, transparent);
 	--dt-glow: color-mix(in srgb, var(--dt-accent) 25%, transparent);
-	--dt-today-bg: color-mix(in srgb, var(--dt-accent) 7%, transparent);
+	--dt-today-bg: transparent;
 	--dt-btn-text: #fff;
-	--dt-scrollbar: rgba(0, 0, 0, 0.1);
-	--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-scrollbar: rgba(15, 15, 15, 0.18);
+	--dt-weekend-bg: rgba(15, 15, 15, 0.035);
+	--dt-hover: rgba(15, 15, 15, 0.05);
+	--dt-event: var(--dt-text);
+	--dt-paper: none;
 	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
 `;
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
@@ -60,12 +67,14 @@ export const midnight = `
 	--dt-accent: #ef4444;
 	--dt-accent-dim: rgba(239, 68, 68, 0.18);
 	--dt-glow: rgba(239, 68, 68, 0.35);
-	--dt-today-bg: rgba(239, 68, 68, 0.07);
+	--dt-today-bg: transparent;
 	--dt-btn-text: #fff;
 	--dt-scrollbar: rgba(148, 163, 184, 0.12);
 	--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-event: var(--dt-text);
+	--dt-paper: none;
 	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
 `;
 /** All available presets keyed by name */