@nomideusz/svelte-calendar 0.3.1 → 0.5.1

package/dist/core/types.d.ts

@@ -11,14 +11,10 @@ export interface TimelineEvent {
     start: Date;
     end: Date;
     color?: string;
-    /** All-day event (renders as a banner, not a timed block) */
+    /** True for all-day events (no specific start/end time) */
     allDay?: boolean;
     /** Category for grouping (e.g. "wellness", "work", "life") */
     category?: string;
-    /** Recurrence rule — iCalendar RRULE string (e.g. "FREQ=WEEKLY;BYDAY=MO") */
-    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"]) */
@@ -26,70 +22,3 @@ export interface TimelineEvent {
     /** Arbitrary payload from the source app (bookings, attendees, etc.) */
     data?: Record<string, unknown>;
 }
-/**
- * Shared props contract for all WeekTimeline variants.
- * Every variant MUST accept this exact interface so they can be
- * hot-swapped without changing bindings.
- */
-export interface WeekTimelineProps {
-    /** Week offset: 0 = this week, -1 = last, +1 = next (ignored when focusDate is set) */
-    weekOffset?: number;
-    /** Start on Monday (true) or Sunday (false) */
-    mondayStart?: boolean;
-    /** Pixel height of one hour row */
-    hourHeight?: number;
-    /** Pixel width of each day column (0 = equal flex) */
-    dayWidth?: number;
-    /** Where "now" sits vertically (0 = top edge, 1 = bottom edge) */
-    nowPosition?: number;
-    /** Total visible height of the component */
-    height?: number;
-    /** Events to render */
-    events?: TimelineEvent[];
-    /** Inline style for CSS variable overrides (theme) */
-    style?: string;
-    /** The date to centre this view on. Overrides weekOffset when set. */
-    focusDate?: Date;
-    /** Called when the user clicks an event */
-    oneventclick?: (event: TimelineEvent) => void;
-    /** Called when the user clicks an empty time slot */
-    oneventcreate?: (range: {
-        start: Date;
-        end: Date;
-    }) => void;
-    /** Currently selected event ID (for highlight) */
-    selectedEventId?: string | null;
-}
-/**
- * Shared props contract for the DayTimeline component.
- */
-export interface DayTimelineProps {
-    /** Number of past days visible */
-    pastDays?: number;
-    /** Number of future days visible */
-    futureDays?: number;
-    /** Pixel width of one hour */
-    hourWidth?: number;
-    /** Where "now" sits in the viewport (0 = left edge, 1 = right edge) */
-    nowPosition?: number;
-    /** Events to render */
-    events?: TimelineEvent[];
-    /** Inline style for CSS custom property overrides */
-    style?: string;
-    /** The date to centre this view on */
-    focusDate?: Date;
-    /** Called when the user clicks an event */
-    oneventclick?: (event: TimelineEvent) => void;
-    /** Called when the user clicks an empty time slot */
-    oneventcreate?: (range: {
-        start: Date;
-        end: Date;
-    }) => void;
-    /** Currently selected event ID (for highlight) */
-    selectedEventId?: string | null;
-}
-/**
- * Convert a Date (or timestamp) to a pixel offset on the timeline.
- * Useful for external apps that need to position overlays.
- */
-export declare function timeToX(time: Date | number, rangeStartMs: number, hourWidth: number): number;

package/dist/core/types.js

@@ -1,11 +1,4 @@
 /**
  * Shared TypeScript types for the timeline design system.
  */
-/**
- * Convert a Date (or timestamp) to a pixel offset on the timeline.
- * Useful for external apps that need to position overlays.
- */
-export function timeToX(time, rangeStartMs, hourWidth) {
-    const ms = typeof time === 'number' ? time : time.getTime();
-    return ((ms - rangeStartMs) / 3_600_000) * hourWidth;
-}
+export {};

package/dist/engine/event-store.svelte.js

@@ -1,4 +1,4 @@
-import { sod } from '../core/time.js';
+import { sod, DAY_MS } from '../core/time.js';
 /**
  * Create a reactive event store backed by a CalendarAdapter.
  */
@@ -61,7 +61,7 @@ export function createEventStore(adapter) {
         },
         forDay(date) {
             const dayStart = new Date(sod(date.getTime()));
-            const dayEnd = new Date(dayStart.getTime() + 86_400_000);
+            const dayEnd = new Date(dayStart.getTime() + DAY_MS);
             return events.filter((ev) => overlaps(ev, dayStart, dayEnd));
         },
         byId(id) {

package/dist/engine/index.d.ts

@@ -1,7 +1,7 @@
 export { createEventStore } from './event-store.svelte.js';
 export type { EventStore } from './event-store.svelte.js';
 export { createViewState } from './view-state.svelte.js';
-export type { ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
+export type { ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, } from './view-state.svelte.js';
 export { createSelection } from './selection.svelte.js';
 export type { Selection } from './selection.svelte.js';
 export { createDragState } from './drag.svelte.js';

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

@@ -1,10 +1,12 @@
+import type { DateRange } from '../adapters/types.js';
+export type { DateRange };
 /**
  * Built-in view IDs. Custom view IDs are also supported — CalendarViewId
  * is typed as `string` so consumers can register any ID.
  */
-export type BuiltInViewId = 'day-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'week-planner' | 'week-agenda';
 /**
- * Any view identifier. Use built-in strings like 'day-grid' or your own
+ * Any view identifier. Use built-in strings like 'day-planner' or your own
  * custom IDs like 'day-kanban', 'week-resource', etc.
  */
 export type CalendarViewId = string;
@@ -14,10 +16,13 @@ export interface ViewStateOptions {
     mondayStart?: boolean;
     /** IANA timezone string (e.g. 'America/New_York'). Defaults to local timezone. */
     timezone?: string;
-}
-export interface DateRange {
-    start: Date;
-    end: Date;
+    /** Initial date to focus on (defaults to today). */
+    initialDate?: Date;
+    /**
+     * Optional resolver for view granularity.
+     * Useful for custom IDs that don't follow "day-*" / "week-*" naming.
+     */
+    granularityForView?: (viewId: CalendarViewId) => ViewGranularity | undefined;
 }
 export interface ViewState {
     readonly view: CalendarViewId;
@@ -28,6 +33,7 @@ export interface ViewState {
     /** IANA timezone, or undefined for local */
     readonly timezone: string | undefined;
     setView(id: CalendarViewId): void;
+    setMondayStart(value: boolean): void;
     setFocusDate(date: Date): void;
     next(): void;
     prev(): void;

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

@@ -12,7 +12,7 @@
  *   vs.goToday()   — jump to today
  */
 import { startOfWeek as calcStartOfWeek, addDaysMs, DAY_MS } from '../core/time.js';
-function granularityFor(view) {
+function inferGranularity(view) {
     if (view.startsWith('day'))
         return 'day';
     return 'week';
@@ -32,11 +32,12 @@ function computeRange(focus, granularity, mondayStart) {
     };
 }
 export function createViewState(options = {}) {
-    let view = $state(options.defaultView ?? 'week-grid');
-    let focusDate = $state(new Date());
+    let view = $state(options.defaultView ?? 'week-planner');
+    let focusDate = $state(options.initialDate ?? new Date());
     let mondayStart = $state(options.mondayStart ?? true);
     const timezone = options.timezone;
-    const granularity = $derived(granularityFor(view));
+    const granularityResolver = options.granularityForView;
+    const granularity = $derived(granularityResolver?.(view) ?? inferGranularity(view));
     const range = $derived(computeRange(focusDate, granularity, mondayStart));
     return {
         get view() {
@@ -60,6 +61,9 @@ export function createViewState(options = {}) {
         setView(id) {
             view = id;
         },
+        setMondayStart(value) {
+            mondayStart = value;
+        },
         setFocusDate(date) {
             focusDate = date;
         },

package/dist/index.d.ts

@@ -1,13 +1,12 @@
-export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, WeekSchedule, } from './views/index.js';
-export type { SettingsField } from './views/index.js';
+export { Planner, Agenda, AgendaDay, AgendaWeek, } from './views/index.js';
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
-export { Calendar, Toolbar } from './calendar/index.js';
+export { Calendar } 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 type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, 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, 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 { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
+export type { Clock, TimelineEvent, DaySegment, CalendarLabels, } from './core/index.js';
+export { midnight, neutral, presets } from './theme/index.js';
 export type { PresetName } from './theme/index.js';

package/dist/index.js

@@ -1,14 +1,14 @@
 // ─── Views ──────────────────────────────────────────────
-export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, WeekSchedule, } from './views/index.js';
+export { Planner, Agenda, AgendaDay, AgendaWeek, } from './views/index.js';
 // ─── Primitives ─────────────────────────────────────────
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
-export { Calendar, Toolbar } from './calendar/index.js';
+export { Calendar } from './calendar/index.js';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── 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, generatePalette, VIVID_PALETTE, } from './core/index.js';
+export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
-export { midnight, parchment, indigo, neutral, bare, presets } from './theme/index.js';
+export { midnight, neutral, presets } from './theme/index.js';

package/dist/primitives/EmptySlot.svelte

@@ -6,6 +6,10 @@
   between events.
 -->
 <script lang="ts">
+	import { fmtTime, fmtDuration, getLabels } from '../core/locale.js';
+
+	const L = $derived(getLabels());
+
 	interface Props {
 		/** Start time of the empty slot */
 		start: Date;
@@ -24,21 +28,7 @@
 		orientation = 'vertical',
 	}: Props = $props();
 
-	function fmtTime(d: Date): string {
-		const h = d.getHours();
-		const m = d.getMinutes();
-		const suffix = h >= 12 ? 'p' : 'a';
-		const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-		return m === 0 ? `${h12}${suffix}` : `${h12}:${String(m).padStart(2, '0')}${suffix}`;
-	}
-
-	const dur = $derived.by(() => {
-		const mins = Math.round((end.getTime() - start.getTime()) / 60_000);
-		if (mins < 60) return `${mins}m free`;
-		const h = Math.floor(mins / 60);
-		const m = mins % 60;
-		return m > 0 ? `${h}h ${m}m free` : `${h}h free`;
-	});
+	const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
 
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Enter' || e.key === ' ') {
@@ -54,7 +44,7 @@
 	class:es-h={orientation === 'horizontal'}
 	role="button"
 	tabindex="0"
-	aria-label="Create event, {fmtTime(start)} to {fmtTime(end)}, {dur}"
+	aria-label="{L.createEvent}, {fmtTime(start)} to {fmtTime(end)}, {dur}"
 	onclick={() => onclick?.({ start, end })}
 	onkeydown={handleKeydown}
 >

package/dist/primitives/EventBlock.svelte

@@ -10,8 +10,11 @@
 -->
 <script lang="ts">
 	import type { TimelineEvent } from '../core/types.js';
+	import { fmtTime, fmtDuration, getLabels } from '../core/locale.js';
 	import type { Snippet } from 'svelte';
 
+	const L = $derived(getLabels());
+
 	interface Props {
 		event: TimelineEvent;
 		/** Display variant */
@@ -44,29 +47,13 @@
 		children,
 	}: Props = $props();
 
-	function fmtTime(d: Date): string {
-		const h = d.getHours();
-		const m = d.getMinutes();
-		const suffix = h >= 12 ? 'p' : 'a';
-		const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-		return m === 0 ? `${h12}${suffix}` : `${h12}:${String(m).padStart(2, '0')}${suffix}`;
-	}
-
-	function fmtDuration(start: Date, end: Date): string {
-		const mins = Math.round((end.getTime() - start.getTime()) / 60_000);
-		if (mins < 60) return `${mins}m`;
-		const h = Math.floor(mins / 60);
-		const m = mins % 60;
-		return m > 0 ? `${h}h ${m}m` : `${h}h`;
-	}
-
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
 
 	const ariaLabel = $derived.by(() => {
 		const t = event.title;
 		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
 		const dur = fmtDuration(event.start, event.end);
-		const status = active ? ', happening now' : past ? ', past' : '';
+		const status = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : '';
 		return `${t}, ${time}, ${dur}${status}`;
 	});
 
@@ -105,7 +92,7 @@
 					{/each}
 				</div>
 			{/if}
-			{#if active}<span class="eb-live-badge">now</span>{/if}
+			{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
 		</div>
 	{:else}
 		<!-- row -->
@@ -125,7 +112,7 @@
 				{/each}
 			</span>
 		{/if}
-		{#if active}<span class="eb-live-badge">now</span>{/if}
+		{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
 	{/if}
 {/snippet}
 

package/dist/primitives/NowIndicator.svelte

@@ -13,6 +13,9 @@
 -->
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { getLabels } from '../core/locale.js';
+
+	const L = $derived(getLabels());
 
 	interface Props {
 		/** Visual mode */
@@ -53,15 +56,15 @@
 </script>
 
 {#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="Current time: {time}">
+	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
 		{#if children}
 			{@render children()}
 		{:else}
-			now
+			{L.now}
 		{/if}
 	</span>
 {:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
 		<div class="ni-dot-circle"></div>
 		{#if showLabel && time}
 			<div class="ni-label">
@@ -71,7 +74,7 @@
 		{/if}
 	</div>
 {:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="{L.currentTime}: {time}">
 		<div class="ni-line-bar"></div>
 		{#if showLabel && time}
 			<div class="ni-label">

package/dist/primitives/TimeGutter.svelte

@@ -2,7 +2,7 @@
   TimeGutter — shared hour labels / tick marks.
 
   Two orientations:
-    "horizontal" — ticks along a horizontal track (for DayTimeline style)
+    "horizontal" — ticks along a horizontal track (for day timeline-style layouts)
     "vertical"   — label column along a vertical grid (for WeekTimeline style)
 -->
 <script lang="ts">

package/dist/theme/index.d.ts

@@ -1,2 +1,2 @@
-export { midnight, parchment, indigo, neutral, bare, presets, } from './presets.js';
+export { midnight, neutral, 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, } from './presets.js';
+export { midnight, neutral, presets, } from './presets.js';

package/dist/theme/presets.d.ts

@@ -2,31 +2,23 @@
  * Theme presets for timeline components.
  *
  * Each preset is a CSS inline-style string of --dt-* custom properties.
- * Pass to the `style` prop of any timeline component.
+ * Pass to the `theme` prop of any timeline component.
+ *
+ * Presets:
+ *   midnight — Dark mode with red accent
+ *   neutral  — Light mode, inherits host fonts
  */
-/** 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.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-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-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.
+ * This is the recommended default.
  */
-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-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 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";
+/** 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.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";
 /** All available presets keyed by name */
 export declare const presets: {
-    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";
+    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";
+    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";
 };
 export type PresetName = keyof typeof presets;

package/dist/theme/presets.js

@@ -2,86 +2,16 @@
  * Theme presets for timeline components.
  *
  * Each preset is a CSS inline-style string of --dt-* custom properties.
- * Pass to the `style` prop of any timeline component.
+ * Pass to the `theme` prop of any timeline component.
+ *
+ * Presets:
+ *   midnight — Dark mode with red accent
+ *   neutral  — Light mode, inherits host fonts
  */
-/** 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);
-	--dt-border-day: rgba(148, 163, 184, 0.14);
-	--dt-text: rgba(226, 232, 240, 0.85);
-	--dt-text-2: rgba(148, 163, 184, 0.55);
-	--dt-text-3: rgba(100, 116, 139, 0.55);
-	--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.02);
-	--dt-btn-text: #fff;
-	--dt-scrollbar: rgba(148, 163, 184, 0.12);
-	--dt-success: rgba(74, 222, 128, 0.7);
-	--dt-serif: Georgia, 'Times New Roman', serif;
-	--dt-hm-empty: rgba(80, 80, 120, 0.06);
-	--dt-hm-low: rgba(239, 68, 68, 0.15);
-	--dt-hm-mid: rgba(239, 68, 68, 0.3);
-	--dt-hm-high: rgba(239, 68, 68, 0.5);
-	--dt-hm-max: rgba(239, 68, 68, 0.72);
-`;
-/** 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);
-	--dt-border-day: rgba(139, 110, 70, 0.22);
-	--dt-text: rgba(55, 40, 22, 0.88);
-	--dt-text-2: rgba(110, 85, 52, 0.62);
-	--dt-text-3: rgba(139, 110, 70, 0.42);
-	--dt-accent: #b85c2f;
-	--dt-accent-dim: rgba(184, 92, 47, 0.14);
-	--dt-glow: rgba(184, 92, 47, 0.25);
-	--dt-today-bg: rgba(184, 92, 47, 0.04);
-	--dt-btn-text: #fdf6ee;
-	--dt-scrollbar: rgba(139, 110, 70, 0.15);
-	--dt-success: rgba(76, 153, 76, 0.7);
-	--dt-serif: Georgia, 'Times New Roman', serif;
-	--dt-mono: 'Courier New', 'Courier', monospace;
-	--dt-sans: 'Outfit', Georgia, serif;
-	--dt-hm-empty: rgba(139, 110, 70, 0.06);
-	--dt-hm-low: rgba(184, 92, 47, 0.15);
-	--dt-hm-mid: rgba(184, 92, 47, 0.3);
-	--dt-hm-high: rgba(184, 92, 47, 0.5);
-	--dt-hm-max: rgba(184, 92, 47, 0.72);
-`;
-/** 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);
-	--dt-border-day: rgba(99, 102, 241, 0.14);
-	--dt-text: rgba(30, 27, 55, 0.82);
-	--dt-text-2: rgba(75, 70, 120, 0.55);
-	--dt-text-3: rgba(99, 102, 241, 0.3);
-	--dt-accent: #6366f1;
-	--dt-accent-dim: rgba(99, 102, 241, 0.12);
-	--dt-glow: rgba(99, 102, 241, 0.25);
-	--dt-today-bg: rgba(99, 102, 241, 0.03);
-	--dt-btn-text: #fff;
-	--dt-scrollbar: rgba(99, 102, 241, 0.1);
-	--dt-success: rgba(34, 197, 94, 0.7);
-	--dt-serif: Georgia, 'Times New Roman', serif;
-	--dt-sans: 'Outfit', system-ui, sans-serif;
-	--dt-hm-empty: rgba(99, 102, 241, 0.04);
-	--dt-hm-low: rgba(99, 102, 241, 0.12);
-	--dt-hm-mid: rgba(99, 102, 241, 0.28);
-	--dt-hm-high: rgba(99, 102, 241, 0.48);
-	--dt-hm-max: rgba(99, 102, 241, 0.7);
-`;
 /**
  * Neutral — inherits fonts from host page, uses standard grays + safe blue accent.
  * Drop-in preset that blends into any website without fighting its design.
+ * This is the recommended default.
  */
 export const neutral = `
 	--dt-stage-bg: #ffffff;
@@ -102,41 +32,25 @@ export const neutral = `
 	--dt-serif: inherit;
 	--dt-sans: inherit;
 	--dt-mono: ui-monospace, 'SFMono-Regular', monospace;
-	--dt-hm-empty: rgba(0, 0, 0, 0.03);
-	--dt-hm-low: rgba(37, 99, 235, 0.12);
-	--dt-hm-mid: rgba(37, 99, 235, 0.28);
-	--dt-hm-high: rgba(37, 99, 235, 0.48);
-	--dt-hm-max: rgba(37, 99, 235, 0.7);
 `;
-/**
- * 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 const bare = `
-	--dt-stage-bg: transparent;
-	--dt-bg: transparent;
-	--dt-surface: transparent;
-	--dt-border: currentColor;
-	--dt-border-day: currentColor;
-	--dt-text: inherit;
-	--dt-text-2: inherit;
-	--dt-text-3: inherit;
-	--dt-accent: currentColor;
-	--dt-accent-dim: transparent;
-	--dt-glow: transparent;
-	--dt-today-bg: transparent;
-	--dt-btn-text: inherit;
-	--dt-scrollbar: currentColor;
-	--dt-success: currentColor;
-	--dt-serif: inherit;
-	--dt-sans: inherit;
-	--dt-mono: inherit;
-	--dt-hm-empty: transparent;
-	--dt-hm-low: currentColor;
-	--dt-hm-mid: currentColor;
-	--dt-hm-high: currentColor;
-	--dt-hm-max: currentColor;
+/** 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);
+	--dt-border-day: rgba(148, 163, 184, 0.14);
+	--dt-text: rgba(226, 232, 240, 0.85);
+	--dt-text-2: rgba(148, 163, 184, 0.55);
+	--dt-text-3: rgba(100, 116, 139, 0.55);
+	--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.02);
+	--dt-btn-text: #fff;
+	--dt-scrollbar: rgba(148, 163, 184, 0.12);
+	--dt-success: rgba(74, 222, 128, 0.7);
+	--dt-serif: Georgia, 'Times New Roman', serif;
 `;
 /** All available presets keyed by name */
-export const presets = { midnight, parchment, indigo, neutral, bare };
+export const presets = { midnight, neutral };