@nomideusz/svelte-calendar 0.1.1 → 0.2.1

package/README.md

@@ -90,26 +90,46 @@ The `Settings` component provides a theme picker and dynamic fields for controll
 
 ## Themes
 
-Three built-in presets  each view reads from the same `--dt-*` CSS custom property contract:
+Five built-in presets — each view reads from the same `--dt-*` CSS custom property contract:
 
 | Preset | Tone |
 |--------|------|
-| `midnight` | Dark (deep navy/slate) |
-| `parchment` | Warm light (cream, amber accents) |
+| `midnight` | Dark (deep navy/slate, red accent) |
+| `parchment` | Warm light (cream, burnt sienna accents) |
 | `indigo` | Cool light (white surface, indigo accents) |
+| `neutral` | **Site-friendly** — white/gray, blue accent, `inherit` fonts so it matches your site |
+| `bare` | **Unstyled skeleton** — all `transparent`/`inherit`/`currentColor`, absorbs host styles entirely |
 
 ```svelte
 <script>
-  import { midnight, parchment, indigo, presets } from '@nomideusz/svelte-calendar';
+  import { midnight, parchment, indigo, neutral, bare, presets } from '@nomideusz/svelte-calendar';
 </script>
 
-<!-- Apply directly -->
-<WeekGrid style={midnight} events={events} />
+<!-- Blends into your site with no extra work -->
+<Calendar {views} {adapter} theme={neutral} />
 
 <!-- Or use the presets map -->
 <WeekGrid style={presets['parchment']} events={events} />
 ```
 
+### Matching Your Site
+
+The `neutral` preset inherits font families from your page (`--dt-sans: inherit; --dt-serif: inherit`) and uses a standard blue accent. For most sites this is all you need.
+
+If you need full control, start from `bare` — it sets everything to `transparent`/`inherit`/`currentColor` — then override only the tokens you care about:
+
+```ts
+import { bare } from '@nomideusz/svelte-calendar';
+
+const myTheme = `
+  ${bare}
+  --dt-accent: #e11d48;
+  --dt-bg: var(--my-app-surface);
+  --dt-text: var(--my-app-text);
+  --dt-border: var(--my-app-border);
+`;
+```
+
 ### Custom Themes
 
 Pass any string of `--dt-*` custom property declarations:
@@ -125,6 +145,36 @@ const custom = `
 `;
 ```
 
+<details>
+<summary><strong>Full token reference</strong></summary>
+
+| Token | Purpose |
+|-------|----------|
+| `--dt-bg` | Main background |
+| `--dt-surface` | Elevated surface (cards, popovers) |
+| `--dt-border` | Default border |
+| `--dt-border-day` | Day-column dividers |
+| `--dt-text` | Primary text |
+| `--dt-text-2` | Secondary text |
+| `--dt-text-3` | Tertiary / muted text |
+| `--dt-accent` | Accent color (buttons, now-indicator, highlights) |
+| `--dt-accent-dim` | Accent at ~12% opacity |
+| `--dt-glow` | Accent glow / focus ring |
+| `--dt-today-bg` | Today column highlight |
+| `--dt-btn-text` | Button label color |
+| `--dt-scrollbar` | Scrollbar thumb |
+| `--dt-success` | Success / completed indicator |
+| `--dt-serif` | Serif font stack |
+| `--dt-sans` | Sans-serif font stack |
+| `--dt-mono` | Monospace font stack |
+| `--dt-hm-empty` | Heatmap: empty cell |
+| `--dt-hm-low` | Heatmap: low density |
+| `--dt-hm-mid` | Heatmap: medium density |
+| `--dt-hm-high` | Heatmap: high density |
+| `--dt-hm-max` | Heatmap: maximum density |
+
+</details>
+
 ## Architecture
 
 ```

package/dist/calendar/Calendar.svelte

@@ -59,6 +59,10 @@
 		showToolbar?: boolean;
 		/** Links to display in toolbar */
 		links?: { href: string; label: string }[];
+		/** Text direction: 'ltr' (default), 'rtl', or 'auto' */
+		dir?: 'ltr' | 'rtl' | 'auto';
+		/** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
+		locale?: string;
 
 		// ── Callbacks ──
 		oneventclick?: (event: TimelineEvent) => void;
@@ -75,11 +79,20 @@
 		height = 600,
 		showToolbar = true,
 		links = [],
+		dir,
+		locale,
 		oneventclick,
 		oneventcreate,
 		oneventmove,
 	}: Props = $props();
 
+	import { setDefaultLocale } from '../core/locale.js';
+
+	// ── Set locale when provided ──
+	$effect(() => {
+		if (locale) setDefaultLocale(locale);
+	});
+
 	// ── Create reactive state ──
 	const store: EventStore = $derived(createEventStore(adapter));
 	const viewState: ViewState = createViewState(untrack(() => ({
@@ -135,7 +148,14 @@
 	);
 </script>
 
-<div class="cal" style="{theme}; --cal-h: {height}px">
+<div
+	class="cal"
+	style="{theme}; --cal-h: {height}px"
+	role="region"
+	aria-label="Calendar"
+	dir={dir}
+	lang={locale}
+>
 	{#if showToolbar}
 		<Toolbar {viewState} views={toolbarViews} {links} />
 	{/if}

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

@@ -33,6 +33,10 @@ interface Props {
         href: string;
         label: string;
     }[];
+    /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
+    locale?: string;
     oneventclick?: (event: TimelineEvent) => void;
     oneventcreate?: (range: {
         start: Date;

package/dist/calendar/Toolbar.svelte

@@ -47,7 +47,7 @@
 	);
 </script>
 
-<nav class="tb">
+<nav class="tb" aria-label="Calendar navigation">
 	<!-- Nav: ← Today → -->
 	<div class="tb-nav">
 		<button class="tb-btn" onclick={() => viewState.prev()} aria-label="Previous">

package/dist/core/index.d.ts

@@ -1,6 +1,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, } from './time.js';
-export { setDefaultLocale, getDefaultLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './types.js';
 export { timeToX } from './types.js';

package/dist/core/index.js

@@ -4,5 +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, } from './time.js';
 // Locale-aware formatting
-export { setDefaultLocale, getDefaultLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+// Timezone utilities
+export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export { timeToX } from './types.js';

package/dist/core/locale.d.ts

@@ -11,8 +11,9 @@
 export declare function setDefaultLocale(tag: string): void;
 /** Get the current default locale */
 export declare function getDefaultLocale(): string;
-/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
-export declare function fmtH(h: number): 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;
 /** 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

@@ -17,8 +17,25 @@ export function setDefaultLocale(tag) {
 export function getDefaultLocale() {
     return defaultLocale;
 }
-/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
-export function fmtH(h) {
+/**
+ * Detect whether the current locale uses 12-hour or 24-hour time.
+ * Caches per locale tag for performance.
+ */
+const hourCycleCache = new Map();
+export function is24HourLocale(locale) {
+    const loc = locale ?? defaultLocale;
+    if (hourCycleCache.has(loc))
+        return hourCycleCache.get(loc);
+    const sample = new Intl.DateTimeFormat(loc, { hour: 'numeric' }).resolvedOptions();
+    const is24 = sample.hourCycle === 'h23' || sample.hourCycle === 'h24';
+    hourCycleCache.set(loc, is24);
+    return is24;
+}
+/** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
+export function fmtH(h, locale) {
+    if (is24HourLocale(locale)) {
+        return String(h);
+    }
     if (h === 0)
         return '12a';
     if (h === 12)

package/dist/core/timezone.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Convert a Date (assumed UTC or local) to a Date representing
+ * the same instant in the target timezone.
+ *
+ * The returned Date's local getters (getHours, getMinutes, etc.)
+ * will return the values as they appear in the target timezone.
+ */
+export declare function toZonedTime(date: Date | number, timezone: string): Date;
+/**
+ * Convert a "zoned" Date (whose local getters represent a specific timezone)
+ * back to a true UTC Date. Use this before persisting to a backend.
+ */
+export declare function fromZonedTime(date: Date | number, timezone: string): Date;
+/**
+ * Get the current time as it appears in the given timezone.
+ */
+export declare function nowInZone(timezone: string): Date;
+/**
+ * Format a Date in a specific timezone using Intl.DateTimeFormat.
+ * Returns a locale-aware string.
+ */
+export declare function formatInTimeZone(date: Date | number, timezone: string, options?: Intl.DateTimeFormatOptions, locale?: string): string;

package/dist/core/timezone.js

@@ -0,0 +1,53 @@
+/**
+ * Timezone utilities — convert between IANA timezones and local time.
+ *
+ * Uses date-fns-tz under the hood. All functions accept an IANA timezone
+ * string (e.g. 'America/New_York', 'Europe/Warsaw', 'Asia/Tokyo').
+ *
+ * Usage:
+ *   import { toZonedTime, fromZonedTime, nowInZone } from '@nomideusz/svelte-calendar';
+ *
+ *   // Convert a UTC date to display in a specific timezone
+ *   const localDate = toZonedTime(utcDate, 'America/New_York');
+ *
+ *   // Convert a "display" date back to UTC for storage
+ *   const utcDate = fromZonedTime(localDate, 'America/New_York');
+ *
+ *   // Get current time in a timezone
+ *   const now = nowInZone('Asia/Tokyo');
+ */
+import { toZonedTime as dfnsToZoned, fromZonedTime as dfnsFromZoned } from 'date-fns-tz';
+/**
+ * Convert a Date (assumed UTC or local) to a Date representing
+ * the same instant in the target timezone.
+ *
+ * The returned Date's local getters (getHours, getMinutes, etc.)
+ * will return the values as they appear in the target timezone.
+ */
+export function toZonedTime(date, timezone) {
+    return dfnsToZoned(date, timezone);
+}
+/**
+ * Convert a "zoned" Date (whose local getters represent a specific timezone)
+ * back to a true UTC Date. Use this before persisting to a backend.
+ */
+export function fromZonedTime(date, timezone) {
+    return dfnsFromZoned(date, timezone);
+}
+/**
+ * Get the current time as it appears in the given timezone.
+ */
+export function nowInZone(timezone) {
+    return dfnsToZoned(new Date(), timezone);
+}
+/**
+ * Format a Date in a specific timezone using Intl.DateTimeFormat.
+ * Returns a locale-aware string.
+ */
+export function formatInTimeZone(date, timezone, options = {}, locale) {
+    const d = typeof date === 'number' ? new Date(date) : date;
+    return new Intl.DateTimeFormat(locale ?? 'en-US', {
+        ...options,
+        timeZone: timezone,
+    }).format(d);
+}

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, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
+export type { ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, DateRange as ViewDateRange, } 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,9 +1,19 @@
-/** All registered view IDs. Add new ones here as variants are created. */
-export type CalendarViewId = 'day-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+/**
+ * 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';
+/**
+ * Any view identifier. Use built-in strings like 'day-grid' or your own
+ * custom IDs like 'day-kanban', 'week-resource', etc.
+ */
+export type CalendarViewId = string;
 export type ViewGranularity = 'day' | 'week';
 export interface ViewStateOptions {
     defaultView?: CalendarViewId;
     mondayStart?: boolean;
+    /** IANA timezone string (e.g. 'America/New_York'). Defaults to local timezone. */
+    timezone?: string;
 }
 export interface DateRange {
     start: Date;
@@ -15,6 +25,8 @@ export interface ViewState {
     readonly range: DateRange;
     readonly granularity: ViewGranularity;
     readonly mondayStart: boolean;
+    /** IANA timezone, or undefined for local */
+    readonly timezone: string | undefined;
     setView(id: CalendarViewId): void;
     setFocusDate(date: Date): void;
     next(): void;

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

@@ -35,6 +35,7 @@ export function createViewState(options = {}) {
     let view = $state(options.defaultView ?? 'week-grid');
     let focusDate = $state(new Date());
     let mondayStart = $state(options.mondayStart ?? true);
+    const timezone = options.timezone;
     const granularity = $derived(granularityFor(view));
     const range = $derived(computeRange(focusDate, granularity, mondayStart));
     return {
@@ -53,6 +54,9 @@ export function createViewState(options = {}) {
         get mondayStart() {
             return mondayStart;
         },
+        get timezone() {
+            return timezone;
+        },
         setView(id) {
             view = id;
         },

package/dist/index.d.ts

@@ -4,10 +4,10 @@ export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './p
 export { Calendar, Toolbar } from './calendar/index.js';
 export type { CalendarView } from './calendar/index.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
-export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
+export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
 export type { CalendarAdapter, DateRange, RestAdapterOptions } from './adapters/index.js';
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } 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, } from './core/index.js';
 export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
-export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
+export { midnight, parchment, indigo, neutral, bare, presets, stageBg } 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 } 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, timeToX, } 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, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
-export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
+export { midnight, parchment, indigo, neutral, bare, presets, stageBg } from './theme/index.js';

package/dist/primitives/EmptySlot.svelte

@@ -39,17 +39,26 @@
 		const m = mins % 60;
 		return m > 0 ? `${h}h ${m}m free` : `${h}h free`;
 	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.({ start, end });
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="es"
 	class:es-v={orientation === 'vertical'}
 	class:es-h={orientation === 'horizontal'}
+	role="button"
+	tabindex="0"
+	aria-label="Create event, {fmtTime(start)} to {fmtTime(end)}, {dur()}"
 	onclick={() => onclick?.({ start, end })}
+	onkeydown={handleKeydown}
 >
-	<div class="es-hint">
+	<div class="es-hint" aria-hidden="true">
 		<span class="es-plus">+</span>
 		<span class="es-range">{fmtTime(start)} – {fmtTime(end)}</span>
 	</div>
@@ -68,6 +77,11 @@
 		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
 		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
 	}
+	.es:focus-visible {
+		outline: 2px solid var(--dt-accent, #ef4444);
+		outline-offset: 2px;
+		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+	}
 
 	.es-hint {
 		position: absolute;

package/dist/primitives/EventBlock.svelte

@@ -61,17 +61,35 @@
 	}
 
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
+
+	const ariaLabel = $derived(() => {
+		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' : '';
+		return `${t}, ${time}, ${dur}${status}`;
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.(event);
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="eb eb-{variant}"
 	class:eb-active={active}
 	class:eb-past={past}
 	class:eb-editable={editable}
 	style="--eb-color: {accentColor}"
+	role={onclick ? 'button' : 'article'}
+	tabindex={onclick ? 0 : -1}
+	aria-label={ariaLabel()}
+	aria-current={active ? 'true' : undefined}
 	onclick={() => onclick?.(event)}
+	onkeydown={handleKeydown}
 >
 	{#if children}
 		{@render children(event)}
@@ -115,6 +133,11 @@
 	.eb-editable:hover {
 		transform: translateY(-1px);
 	}
+	.eb:focus-visible {
+		outline: 2px solid var(--dt-accent, #ef4444);
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
 	.eb-past {
 		opacity: 0.5;
 	}

package/dist/primitives/NowIndicator.svelte

@@ -53,7 +53,7 @@
 </script>
 
 {#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar}>
+	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="Current time: {time}">
 		{#if children}
 			{@render children()}
 		{:else}
@@ -61,7 +61,7 @@
 		{/if}
 	</span>
 {:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}">
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
 		<div class="ni-dot-circle"></div>
 		{#if showLabel && time}
 			<div class="ni-label">
@@ -71,7 +71,7 @@
 		{/if}
 	</div>
 {:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}">
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
 		<div class="ni-line-bar"></div>
 		{#if showLabel && time}
 			<div class="ni-label">

package/dist/theme/index.d.ts

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

package/dist/theme/presets.d.ts

@@ -10,11 +10,24 @@ export declare const midnight = "\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;
 export declare const parchment = "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
 /** Soft Indigo — calm productivity, muted lavender with indigo markers */
 export declare const indigo = "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
+/**
+ * Neutral — inherits fonts from host page, uses standard grays + safe blue accent.
+ * Drop-in preset that blends into any website without fighting its design.
+ */
+export declare const neutral = "\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
+/**
+ * Bare — transparent skeleton that inherits everything from the host page.
+ * All colors use currentColor/transparent/inherit so the calendar fully absorbs
+ * the parent site's design. Override individual --dt-* tokens as needed.
+ */
+export declare const bare = "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
 /** All available presets keyed by name */
 export declare const presets: {
     readonly midnight: "\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
     readonly parchment: "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
     readonly indigo: "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
+    readonly neutral: "\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
+    readonly bare: "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
 };
 export type PresetName = keyof typeof presets;
 /**

package/dist/theme/presets.js

@@ -76,8 +76,65 @@ export const indigo = `
 	--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.
+ */
+export const neutral = `
+	--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: #2563eb;
+	--dt-accent-dim: rgba(37, 99, 235, 0.12);
+	--dt-glow: rgba(37, 99, 235, 0.25);
+	--dt-today-bg: rgba(37, 99, 235, 0.04);
+	--dt-btn-text: #fff;
+	--dt-scrollbar: rgba(0, 0, 0, 0.1);
+	--dt-success: rgba(22, 163, 74, 0.7);
+	--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-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;
+`;
 /** All available presets keyed by name */
-export const presets = { midnight, parchment, indigo };
+export const presets = { midnight, parchment, indigo, neutral, bare };
 /**
  * Stage background color matching each theme.
  * Useful for the container behind the timeline component.
@@ -86,4 +143,6 @@ export const stageBg = {
     midnight: '#080a0f',
     parchment: '#e4dace',
     indigo: '#efedf8',
+    neutral: '#ffffff',
+    bare: 'transparent',
 };

package/package.json

@@ -1,62 +1,65 @@
 {
-  "name": "@nomideusz/svelte-calendar",
-  "version": "0.1.1",
-  "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
-  "type": "module",
-  "license": "MIT",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.50.2",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "svelte": "^5.51.0",
-    "svelte-check": "^4.3.6",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
-  },
-  "dependencies": {
-    "date-fns": "^4.1.0"
-  },
-  "keywords": [
-    "svelte",
-    "calendar",
-    "scheduler",
-    "timeline",
-    "week",
-    "day",
-    "booking",
-    "svelte5"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nomideusz/svelte-calendar"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "package": "svelte-kit sync && svelte-package",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  }
-}
+	"name": "@nomideusz/svelte-calendar",
+	"version": "0.2.1",
+	"description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
+	"type": "module",
+	"license": "MIT",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"package": "svelte-kit sync && svelte-package",
+		"prepublishOnly": "npm run package",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest run",
+		"test:watch": "vitest"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.3.6",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
+	},
+	"dependencies": {
+		"date-fns": "^4.1.0",
+		"date-fns-tz": "^3.2.0"
+	},
+	"keywords": [
+		"svelte",
+		"calendar",
+		"scheduler",
+		"timeline",
+		"week",
+		"day",
+		"booking",
+		"svelte5"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/nomideusz/svelte-calendar"
+	}
+}