@nomideusz/svelte-calendar 0.1.0

package/dist/calendar/Toolbar.svelte

@@ -0,0 +1,241 @@
+<!--
+  Toolbar — navigation + granularity toggle + concept switcher.
+
+  Layout: [← Today →]  date-label   [links]   [Day | Week]   [concept pills]
+-->
+<script lang="ts">
+	import type { CalendarViewId, ViewState } from '../engine/view-state.svelte.js';
+	import { fmtDay, fmtWeekRange, weekdayLong } from '../core/locale.js';
+
+	interface ViewOption {
+		id: CalendarViewId;
+		label: string;
+		granularity: 'day' | 'week';
+	}
+
+	interface Props {
+		viewState: ViewState;
+		/** All registered views */
+		views?: ViewOption[];
+		/** Links to show in the toolbar */
+		links?: { href: string; label: string }[];
+	}
+
+	let {
+		viewState,
+		views = [],
+		links = [],
+	}: Props = $props();
+
+	const dateLabel = $derived(() => {
+		if (viewState.granularity === 'day') {
+			return `${weekdayLong(viewState.focusDate.getTime())}, ${fmtDay(viewState.focusDate.getTime(), Date.now())}`;
+		}
+		const ws = viewState.range.start.getTime();
+		return fmtWeekRange(ws);
+	});
+
+	// Which granularities are available?
+	const granularities = $derived(() => {
+		const g = new Set(views.map((v) => v.granularity));
+		return [...g] as ('day' | 'week')[];
+	});
+
+	// Concepts available for current granularity
+	const concepts = $derived(
+		views.filter((v) => v.granularity === viewState.granularity),
+	);
+</script>
+
+<nav class="tb">
+	<!-- Nav: ← Today → -->
+	<div class="tb-nav">
+		<button class="tb-btn" onclick={() => viewState.prev()} aria-label="Previous">
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+				<path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+			</svg>
+		</button>
+		<button class="tb-btn tb-today" onclick={() => viewState.goToday()}>Today</button>
+		<button class="tb-btn" onclick={() => viewState.next()} aria-label="Next">
+			<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+				<path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+			</svg>
+		</button>
+	</div>
+
+	<!-- Date label -->
+	<span class="tb-label">{dateLabel()}</span>
+
+	<!-- Links -->
+	{#if links.length > 0}
+		<div class="tb-links">
+			{#each links as link}
+				<a class="tb-link" href={link.href}>{link.label}</a>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Granularity toggle: Day / Week -->
+	{#if granularities().length > 1}
+		<div class="tb-group">
+			{#each granularities() as g}
+				<button
+					class="tb-seg"
+					class:tb-seg-active={viewState.granularity === g}
+					onclick={() => {
+						// Preserve concept: find the view in target granularity with same label
+						const currentLabel = views.find((v) => v.id === viewState.view)?.label;
+						const match = views.find((v) => v.granularity === g && v.label === currentLabel);
+						const fallback = views.find((v) => v.granularity === g);
+						const target = match ?? fallback;
+						if (target) viewState.setView(target.id);
+					}}
+				>
+					{g === 'day' ? 'Day' : 'Week'}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Concept pills -->
+	{#if concepts.length > 1}
+		<div class="tb-concepts">
+			{#each concepts as c}
+				<button
+					class="tb-pill"
+					class:tb-pill-active={viewState.view === c.id}
+					onclick={() => viewState.setView(c.id)}
+				>
+					{c.label}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</nav>
+
+<style>
+	.tb {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px 12px;
+		background: var(--dt-surface, #10141c);
+		border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		border-radius: 10px 10px 0 0;
+		flex-wrap: wrap;
+	}
+
+	.tb-nav {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.tb-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		cursor: pointer;
+		padding: 4px 6px;
+		border-radius: 6px;
+		font: 500 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		transition: background 100ms, color 100ms;
+	}
+	.tb-btn:hover {
+		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+
+	.tb-today {
+		padding: 4px 10px;
+		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+
+	.tb-label {
+		font: 500 13px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		letter-spacing: 0.01em;
+		flex: 1;
+		min-width: 0;
+	}
+
+	/* ── Links ── */
+	.tb-links {
+		display: flex;
+		gap: 6px;
+	}
+	.tb-link {
+		font: 400 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		padding: 4px 8px;
+		border-radius: 5px;
+		text-decoration: none;
+		transition: color 100ms, border-color 100ms;
+	}
+	.tb-link:hover {
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		border-color: var(--dt-text-2, rgba(148, 163, 184, 0.25));
+	}
+
+	/* ── Granularity toggle ── */
+	.tb-group {
+		display: flex;
+		gap: 2px;
+		background: var(--dt-bg, #0b0e14);
+		border-radius: 6px;
+		padding: 2px;
+	}
+
+	.tb-seg {
+		border: none;
+		background: transparent;
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		cursor: pointer;
+		font: 600 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		padding: 5px 12px;
+		border-radius: 4px;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		transition: background 100ms, color 100ms;
+	}
+	.tb-seg:hover {
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+	.tb-seg-active {
+		background: var(--dt-accent, #ef4444);
+		color: var(--dt-btn-text, #fff);
+	}
+
+	/* ── Concept pills ── */
+	.tb-concepts {
+		display: flex;
+		gap: 3px;
+		background: var(--dt-bg, #0b0e14);
+		border-radius: 6px;
+		padding: 2px;
+	}
+
+	.tb-pill {
+		border: none;
+		background: transparent;
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		cursor: pointer;
+		font: 400 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		padding: 4px 9px;
+		border-radius: 4px;
+		letter-spacing: 0.02em;
+		transition: background 100ms, color 100ms;
+		white-space: nowrap;
+	}
+	.tb-pill:hover {
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+	.tb-pill-active {
+		background: var(--dt-surface, #10141c);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { CalendarViewId, ViewState } from '../engine/view-state.svelte.js';
+interface ViewOption {
+    id: CalendarViewId;
+    label: string;
+    granularity: 'day' | 'week';
+}
+interface Props {
+    viewState: ViewState;
+    /** All registered views */
+    views?: ViewOption[];
+    /** Links to show in the toolbar */
+    links?: {
+        href: string;
+        label: string;
+    }[];
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Calendar } from './Calendar.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export type { CalendarView } from './Calendar.svelte';

package/dist/calendar/index.js

@@ -0,0 +1,3 @@
+// ─── Calendar shell barrel export ───────────────────────
+export { default as Calendar } from './Calendar.svelte';
+export { default as Toolbar } from './Toolbar.svelte';

package/dist/core/clock.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface Clock {
+    /** Current epoch ms, updated every second */
+    readonly tick: number;
+    /** Start-of-day epoch ms for today */
+    readonly today: number;
+    /** Formatted hours:minutes — "14:30" */
+    readonly hm: string;
+    /** Formatted seconds — ":05" */
+    readonly s: string;
+    /** Fractional hours since midnight — 14.5 */
+    readonly fractionalHour: number;
+    /** Stop the clock (called automatically on component unmount) */
+    destroy: () => void;
+}
+/**
+ * Create a shared reactive clock.
+ *
+ * Must be called during component initialisation (before first await).
+ * Automatically cleans up on unmount via onMount return.
+ */
+export declare function createClock(): Clock;

package/dist/core/clock.svelte.js

@@ -0,0 +1,53 @@
+/**
+ * Reactive clock state factory for Svelte 5 rune-mode.
+ *
+ * Usage inside a component:
+ *   const clock = createClock();
+ *   // clock.tick   — current timestamp, updates every second
+ *   // clock.today  — start-of-day timestamp, rolls over at midnight
+ *   // clock.hm     — "14:30"
+ *   // clock.s      — ":05"
+ *   // clock.fractionalHour — 14.5
+ *
+ * Call clock.destroy() in onMount's cleanup (or it auto-cleans via $effect).
+ */
+import { onMount } from 'svelte';
+import { sod, fmtHM, fmtS, fractionalHour } from './time.js';
+/**
+ * Create a shared reactive clock.
+ *
+ * Must be called during component initialisation (before first await).
+ * Automatically cleans up on unmount via onMount return.
+ */
+export function createClock() {
+    let tick = $state(Date.now());
+    let today = $state(sod(Date.now()));
+    let intervalId = null;
+    function start() {
+        intervalId = setInterval(() => {
+            tick = Date.now();
+            const sd = sod(tick);
+            if (sd !== today)
+                today = sd;
+        }, 1000);
+    }
+    function destroy() {
+        if (intervalId !== null) {
+            clearInterval(intervalId);
+            intervalId = null;
+        }
+    }
+    // Auto-start and auto-cleanup
+    onMount(() => {
+        start();
+        return destroy;
+    });
+    return {
+        get tick() { return tick; },
+        get today() { return today; },
+        get hm() { return fmtHM(tick); },
+        get s() { return fmtS(tick); },
+        get fractionalHour() { return fractionalHour(tick); },
+        destroy,
+    };
+}

package/dist/core/index.d.ts

@@ -0,0 +1,6 @@
+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 type { TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './types.js';
+export { timeToX } from './types.js';

package/dist/core/index.js

@@ -0,0 +1,8 @@
+// ─── Core barrel export ─────────────────────────────────
+// Clock
+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 { timeToX } from './types.js';

package/dist/core/locale.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Locale-aware formatting utilities.
+ *
+ * All functions accept an optional `locale` string (BCP 47 tag, e.g. 'en-US',
+ * 'pl-PL'). When omitted they fall back to `defaultLocale`.
+ *
+ * For date-fns locale integration later, this module can import from
+ * `date-fns/locale/*` and pass to `format()`.
+ */
+/** Change the default locale for all formatting functions */
+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;
+/** 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. */
+export declare function weekdayLong(ms: number, locale?: string): string;
+/** Short month name for a timestamp: "Jan", "Feb", etc. */
+export declare function monthShort(ms: number, locale?: string): string;
+/** Long month name: "January", "February", etc. */
+export declare function monthLong(ms: number, locale?: string): string;
+/** Short date: "Feb 21" */
+export declare function dateShort(ms: number, locale?: string): string;
+/** Weekday + short date: "Mon, Feb 17" */
+export declare function dateWithWeekday(ms: number, locale?: string): string;
+/**
+ * Format a timestamp as a smart day label:
+ *   "Today · Feb 21", "Yesterday · Feb 20", "Mon, Feb 17", etc.
+ */
+export declare function fmtDay(ms: number, todayMs: number, opts?: {
+    short?: boolean;
+}, locale?: string): string;
+/**
+ * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
+ */
+export declare function fmtWeekRange(weekStartMs: number, locale?: string): string;

package/dist/core/locale.js

@@ -0,0 +1,96 @@
+/**
+ * Locale-aware formatting utilities.
+ *
+ * All functions accept an optional `locale` string (BCP 47 tag, e.g. 'en-US',
+ * 'pl-PL'). When omitted they fall back to `defaultLocale`.
+ *
+ * For date-fns locale integration later, this module can import from
+ * `date-fns/locale/*` and pass to `format()`.
+ */
+/** Module-level default locale — consumers can override via setDefaultLocale() */
+let defaultLocale = 'en-US';
+/** Change the default locale for all formatting functions */
+export function setDefaultLocale(tag) {
+    defaultLocale = tag;
+}
+/** Get the current default locale */
+export function getDefaultLocale() {
+    return defaultLocale;
+}
+/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
+export function fmtH(h) {
+    if (h === 0)
+        return '12a';
+    if (h === 12)
+        return '12p';
+    return h < 12 ? h + 'a' : h - 12 + 'p';
+}
+/** Short weekday name for a timestamp: "Mon", "Tue", etc. */
+export function weekdayShort(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? defaultLocale, { weekday: 'short' });
+}
+/** Long weekday name for a timestamp: "Monday", "Tuesday", etc. */
+export function weekdayLong(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? defaultLocale, { weekday: 'long' });
+}
+/** Short month name for a timestamp: "Jan", "Feb", etc. */
+export function monthShort(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? defaultLocale, { month: 'short' });
+}
+/** Long month name: "January", "February", etc. */
+export function monthLong(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? defaultLocale, { month: 'long' });
+}
+/** Short date: "Feb 21" */
+export function dateShort(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? defaultLocale, {
+        month: 'short',
+        day: 'numeric',
+    });
+}
+/** Weekday + short date: "Mon, Feb 17" */
+export function dateWithWeekday(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? defaultLocale, {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    });
+}
+import { DAY_MS } from './time.js';
+/**
+ * Format a timestamp as a smart day label:
+ *   "Today · Feb 21", "Yesterday · Feb 20", "Mon, Feb 17", etc.
+ */
+export function fmtDay(ms, todayMs, opts, locale) {
+    const loc = locale ?? defaultLocale;
+    const short = new Date(ms).toLocaleDateString(loc, { month: 'short', day: 'numeric' });
+    if (ms === todayMs)
+        return opts?.short ? 'Today' : `Today · ${short}`;
+    if (ms === todayMs - DAY_MS)
+        return opts?.short ? 'Yesterday' : `Yesterday · ${short}`;
+    if (ms === todayMs + DAY_MS)
+        return opts?.short ? 'Tomorrow' : `Tomorrow · ${short}`;
+    if (opts?.short) {
+        return new Date(ms).toLocaleDateString(loc, { weekday: 'short', day: 'numeric' });
+    }
+    return new Date(ms).toLocaleDateString(loc, { weekday: 'short', month: 'short', day: 'numeric' });
+}
+/**
+ * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
+ */
+export function fmtWeekRange(weekStartMs, locale) {
+    const loc = locale ?? defaultLocale;
+    const s = new Date(weekStartMs);
+    const e = new Date(weekStartMs + 6 * DAY_MS);
+    const sm = s.toLocaleDateString(loc, { month: 'short' });
+    const em = e.toLocaleDateString(loc, { month: 'short' });
+    const sy = s.getFullYear();
+    const ey = e.getFullYear();
+    if (sy !== ey) {
+        return `${sm} ${s.getDate()}, ${sy} – ${em} ${e.getDate()}, ${ey}`;
+    }
+    if (sm !== em) {
+        return `${sm} ${s.getDate()} – ${em} ${e.getDate()}, ${ey}`;
+    }
+    return `${sm} ${s.getDate()} – ${e.getDate()}, ${ey}`;
+}

package/dist/core/time.d.ts

@@ -0,0 +1,37 @@
+/** Milliseconds in one day */
+export declare const DAY_MS = 86400000;
+/** Milliseconds in one hour */
+export declare const HOUR_MS = 3600000;
+/** Array [0..23] for iterating over hour slots */
+export declare const HOURS: readonly number[];
+/** Start-of-day timestamp (midnight, local time) */
+export declare function sod(ms: number): number;
+/**
+ * Start-of-week timestamp.
+ * @param ms       Any timestamp within the target week
+ * @param mondayStart  true → weeks begin Monday; false → Sunday
+ */
+export declare function startOfWeek(ms: number, mondayStart?: boolean): number;
+/** Add `n` days to a timestamp and return the new timestamp */
+export declare function addDaysMs(ms: number, n: number): number;
+/** Calendar-day difference between two timestamps */
+export declare function diffDays(a: number, b: number): number;
+/** Zero-pad a number to 2 digits */
+export declare function pad(n: number): string;
+/**
+ * Fractional hours elapsed since midnight for a given timestamp.
+ * e.g. 14:30:00 → 14.5
+ */
+export declare function fractionalHour(ms: number): number;
+/**
+ * Format hours + minutes from a timestamp: "14:30"
+ */
+export declare function fmtHM(ms: number): string;
+/**
+ * Format seconds from a timestamp: ":05"
+ */
+export declare function fmtS(ms: number): string;
+/** Day-of-month number for a timestamp */
+export declare function dayNum(ms: number): number;
+/** Day-of-week index (0 = Sun … 6 = Sat) */
+export declare function dayOfWeek(ms: number): number;

package/dist/core/time.js

@@ -0,0 +1,68 @@
+/**
+ * Core time constants and pure date-math utilities.
+ *
+ * Uses date-fns for reliable calendar operations (DST-safe, tree-shakeable).
+ * Re-exports commonly used date-fns functions so consumers have a single import.
+ */
+import { startOfDay, startOfWeek as dfnsStartOfWeek, addDays, differenceInCalendarDays, getDay, getDate, getHours, getMinutes, getSeconds, } from 'date-fns';
+// ─── Constants ──────────────────────────────────────────
+/** Milliseconds in one day */
+export const DAY_MS = 86_400_000;
+/** Milliseconds in one hour */
+export const HOUR_MS = 3_600_000;
+/** Array [0..23] for iterating over hour slots */
+export const HOURS = Array.from({ length: 24 }, (_, i) => i);
+// ─── Pure date helpers ──────────────────────────────────
+/** Start-of-day timestamp (midnight, local time) */
+export function sod(ms) {
+    return startOfDay(ms).getTime();
+}
+/**
+ * Start-of-week timestamp.
+ * @param ms       Any timestamp within the target week
+ * @param mondayStart  true → weeks begin Monday; false → Sunday
+ */
+export function startOfWeek(ms, mondayStart = true) {
+    return dfnsStartOfWeek(ms, { weekStartsOn: mondayStart ? 1 : 0 }).getTime();
+}
+/** Add `n` days to a timestamp and return the new timestamp */
+export function addDaysMs(ms, n) {
+    return addDays(ms, n).getTime();
+}
+/** Calendar-day difference between two timestamps */
+export function diffDays(a, b) {
+    return differenceInCalendarDays(a, b);
+}
+/** Zero-pad a number to 2 digits */
+export function pad(n) {
+    return n < 10 ? '0' + n : '' + n;
+}
+/**
+ * Fractional hours elapsed since midnight for a given timestamp.
+ * e.g. 14:30:00 → 14.5
+ */
+export function fractionalHour(ms) {
+    const d = new Date(ms);
+    return getHours(d) + getMinutes(d) / 60 + getSeconds(d) / 3600;
+}
+/**
+ * Format hours + minutes from a timestamp: "14:30"
+ */
+export function fmtHM(ms) {
+    const d = new Date(ms);
+    return pad(getHours(d)) + ':' + pad(getMinutes(d));
+}
+/**
+ * Format seconds from a timestamp: ":05"
+ */
+export function fmtS(ms) {
+    return ':' + pad(getSeconds(new Date(ms)));
+}
+/** Day-of-month number for a timestamp */
+export function dayNum(ms) {
+    return getDate(new Date(ms));
+}
+/** Day-of-week index (0 = Sun … 6 = Sat) */
+export function dayOfWeek(ms) {
+    return getDay(new Date(ms));
+}