@nomideusz/svelte-calendar 0.1.0

package/dist/primitives/DayHeader.svelte

@@ -0,0 +1,103 @@
+<!--
+  DayHeader — shared day label primitive.
+
+  Handles both:
+    - Relative labels ("Today", "Tomorrow") for day views via fmtDay
+    - Short/long weekday + date number for week views
+-->
+<script lang="ts">
+	import { weekdayShort, weekdayLong, monthShort, fmtDay } from '../core/locale.js';
+
+	interface Props {
+		/** Timestamp (ms) of the day to label */
+		dayMs: number;
+		/** Timestamp (ms) of today (for relative labels) */
+		todayMs?: number;
+		/** Display format */
+		format?: 'relative' | 'short' | 'long';
+		/** Whether this day is "today" */
+		isToday?: boolean;
+		/** Whether this day is in the past */
+		isPast?: boolean;
+	}
+
+	let {
+		dayMs,
+		todayMs = Date.now(),
+		format = 'short',
+		isToday = false,
+		isPast = false,
+	}: Props = $props();
+
+	const dayNum = $derived(new Date(dayMs).getDate());
+</script>
+
+<div
+	class="dh"
+	class:dh-today={isToday}
+	class:dh-past={isPast}
+>
+	{#if format === 'relative'}
+		<span class="dh-rel">{fmtDay(dayMs, todayMs)}</span>
+	{:else if format === 'long'}
+		<span class="dh-name dh-name-long">{weekdayLong(dayMs)}</span>
+		<span class="dh-date">{monthShort(dayMs)} {dayNum}</span>
+	{:else}
+		<span class="dh-name">{weekdayShort(dayMs)}</span>
+		<span class="dh-num" class:dh-num-today={isToday}>{dayNum}</span>
+	{/if}
+</div>
+
+<style>
+	.dh {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2px;
+		user-select: none;
+	}
+	.dh-past {
+		opacity: 0.45;
+	}
+
+	.dh-name {
+		font: 500 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+	.dh-name-long {
+		font-size: 12px;
+		text-transform: none;
+		letter-spacing: 0.01em;
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+
+	.dh-num {
+		font: 600 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		width: 28px;
+		height: 28px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+	}
+	.dh-num-today {
+		background: var(--dt-accent, #ef4444);
+		color: var(--dt-btn-text, #fff);
+	}
+
+	.dh-date {
+		font: 400 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+
+	.dh-rel {
+		font: 500 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+	}
+	.dh-today .dh-rel {
+		color: var(--dt-accent, #ef4444);
+	}
+</style>

package/dist/primitives/DayHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    /** Timestamp (ms) of the day to label */
+    dayMs: number;
+    /** Timestamp (ms) of today (for relative labels) */
+    todayMs?: number;
+    /** Display format */
+    format?: 'relative' | 'short' | 'long';
+    /** Whether this day is "today" */
+    isToday?: boolean;
+    /** Whether this day is in the past */
+    isPast?: boolean;
+}
+declare const DayHeader: import("svelte").Component<Props, {}, "">;
+type DayHeader = ReturnType<typeof DayHeader>;
+export default DayHeader;

package/dist/primitives/EmptySlot.svelte

@@ -0,0 +1,101 @@
+<!--
+  EmptySlot — clickable empty time slot for "click to create" interactions.
+
+  Renders a transparent hit-target that highlights on hover and emits
+  the time range when clicked. View components place these in gaps
+  between events.
+-->
+<script lang="ts">
+	interface Props {
+		/** Start time of the empty slot */
+		start: Date;
+		/** End time of the empty slot */
+		end: Date;
+		/** Click handler — create event in this range */
+		onclick?: (range: { start: Date; end: Date }) => void;
+		/** Orientation for cursor hint */
+		orientation?: 'horizontal' | 'vertical';
+	}
+
+	let {
+		start,
+		end,
+		onclick,
+		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(() => {
+		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`;
+	});
+</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'}
+	onclick={() => onclick?.({ start, end })}
+>
+	<div class="es-hint">
+		<span class="es-plus">+</span>
+		<span class="es-range">{fmtTime(start)} – {fmtTime(end)}</span>
+	</div>
+</div>
+
+<style>
+	.es {
+		position: relative;
+		cursor: pointer;
+		border: 1px dashed transparent;
+		border-radius: 6px;
+		transition: border-color 150ms, background 150ms;
+		min-height: 24px;
+	}
+	.es:hover {
+		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
+	}
+
+	.es-hint {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		opacity: 0;
+		transition: opacity 150ms;
+	}
+	.es:hover .es-hint {
+		opacity: 1;
+	}
+
+	.es-plus {
+		font: 500 14px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-accent, #ef4444);
+	}
+	.es-range {
+		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+
+	.es-v {
+		width: 100%;
+	}
+	.es-h {
+		height: 100%;
+	}
+</style>

package/dist/primitives/EmptySlot.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Start time of the empty slot */
+    start: Date;
+    /** End time of the empty slot */
+    end: Date;
+    /** Click handler — create event in this range */
+    onclick?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+    /** Orientation for cursor hint */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const EmptySlot: import("svelte").Component<Props, {}, "">;
+type EmptySlot = ReturnType<typeof EmptySlot>;
+export default EmptySlot;

package/dist/primitives/EventBlock.svelte

@@ -0,0 +1,241 @@
+<!--
+  EventBlock — shared event rendering primitive.
+
+  Three display variants:
+    "chip"   — compact colored chip (dot + title)
+    "card"   — full card (title, time, duration, color stripe)
+    "row"    — full-width row (time, title, duration — agenda style)
+
+  Emits: onclick, ondragstart, onresize (for future interaction wiring)
+-->
+<script lang="ts">
+	import type { TimelineEvent } from '../core/types.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		event: TimelineEvent;
+		/** Display variant */
+		variant?: 'chip' | 'card' | 'row';
+		/** Is this event currently in-progress? */
+		active?: boolean;
+		/** Is this event in the past? */
+		past?: boolean;
+		/** Show the time range */
+		showTime?: boolean;
+		/** Show the duration */
+		showDuration?: boolean;
+		/** Editable (shows resize handles in future) */
+		editable?: boolean;
+		/** Click handler */
+		onclick?: (event: TimelineEvent) => void;
+		/** Custom content slot */
+		children?: Snippet<[TimelineEvent]>;
+	}
+
+	let {
+		event,
+		variant = 'chip',
+		active = false,
+		past = false,
+		showTime = false,
+		showDuration = false,
+		editable = false,
+		onclick,
+		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)');
+</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}"
+	onclick={() => onclick?.(event)}
+>
+	{#if children}
+		{@render children(event)}
+	{:else if variant === 'chip'}
+		<span class="eb-dot"></span>
+		<span class="eb-title">{event.title}</span>
+		{#if active}<span class="eb-live">●</span>{/if}
+	{:else if variant === 'card'}
+		<div class="eb-stripe"></div>
+		<div class="eb-body">
+			<span class="eb-title">{event.title}</span>
+			{#if showTime}
+				<span class="eb-time">{fmtTime(event.start)} – {fmtTime(event.end)}</span>
+			{/if}
+			{#if showDuration}
+				<span class="eb-dur">{fmtDuration(event.start, event.end)}</span>
+			{/if}
+			{#if active}<span class="eb-live-badge">now</span>{/if}
+		</div>
+	{:else}
+		<!-- row -->
+		<span class="eb-stripe"></span>
+		<span class="eb-time">{fmtTime(event.start)} – {fmtTime(event.end)}</span>
+		<span class="eb-title">{event.title}</span>
+		{#if showDuration}
+			<span class="eb-dur">{fmtDuration(event.start, event.end)}</span>
+		{/if}
+		{#if active}<span class="eb-live-badge">now</span>{/if}
+	{/if}
+</div>
+
+<style>
+	.eb {
+		--_color: var(--eb-color, var(--dt-accent, #ef4444));
+		cursor: default;
+		transition: opacity 120ms, transform 80ms;
+	}
+	.eb-editable {
+		cursor: pointer;
+	}
+	.eb-editable:hover {
+		transform: translateY(-1px);
+	}
+	.eb-past {
+		opacity: 0.5;
+	}
+
+	/* ── Chip ── */
+	.eb-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		font: 400 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.eb-chip .eb-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--_color);
+		flex-shrink: 0;
+	}
+	.eb-chip .eb-title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.eb-live {
+		color: var(--_color);
+		font-size: 8px;
+		animation: eb-blink 1.5s ease-in-out infinite;
+	}
+
+	/* ── Card ── */
+	.eb-card {
+		display: flex;
+		border-radius: 8px;
+		background: var(--dt-surface, #10141c);
+		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+		overflow: hidden;
+	}
+	.eb-card .eb-stripe {
+		width: 4px;
+		flex-shrink: 0;
+		background: var(--_color);
+	}
+	.eb-card .eb-body {
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		padding: 8px 10px;
+		min-width: 0;
+	}
+	.eb-card .eb-title {
+		font: 500 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.eb-card .eb-time {
+		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+	}
+	.eb-card .eb-dur {
+		font: 300 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+	}
+
+	/* ── Row ── */
+	.eb-row {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 6px 12px;
+		border-bottom: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.eb-row .eb-stripe {
+		width: 3px;
+		height: 100%;
+		min-height: 20px;
+		border-radius: 2px;
+		background: var(--_color);
+		flex-shrink: 0;
+	}
+	.eb-row .eb-time {
+		font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
+		flex-shrink: 0;
+		width: 90px;
+	}
+	.eb-row .eb-title {
+		font: 400 12px / 1.3 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text, rgba(226, 232, 240, 0.85));
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.eb-row .eb-dur {
+		font: 300 10px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		flex-shrink: 0;
+	}
+
+	/* ── Shared ── */
+	.eb-live-badge {
+		display: inline-flex;
+		align-items: center;
+		font: 700 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--dt-btn-text, #fff);
+		background: var(--_color);
+		padding: 2px 6px;
+		border-radius: 3px;
+		width: fit-content;
+		animation: eb-blink 2s ease-in-out infinite;
+	}
+
+	@keyframes eb-blink {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.6; }
+	}
+</style>

package/dist/primitives/EventBlock.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { TimelineEvent } from '../core/types.js';
+import type { Snippet } from 'svelte';
+interface Props {
+    event: TimelineEvent;
+    /** Display variant */
+    variant?: 'chip' | 'card' | 'row';
+    /** Is this event currently in-progress? */
+    active?: boolean;
+    /** Is this event in the past? */
+    past?: boolean;
+    /** Show the time range */
+    showTime?: boolean;
+    /** Show the duration */
+    showDuration?: boolean;
+    /** Editable (shows resize handles in future) */
+    editable?: boolean;
+    /** Click handler */
+    onclick?: (event: TimelineEvent) => void;
+    /** Custom content slot */
+    children?: Snippet<[TimelineEvent]>;
+}
+declare const EventBlock: import("svelte").Component<Props, {}, "">;
+type EventBlock = ReturnType<typeof EventBlock>;
+export default EventBlock;

package/dist/primitives/NowIndicator.svelte

@@ -0,0 +1,175 @@
+<!--
+  NowIndicator — shared "now" marker component.
+
+  Three visual modes:
+    "line"  — vertical/horizontal line with time label (default)
+    "dot"   — circular dot with time label
+    "badge" — inline text badge ("now")
+
+  Usage:
+    <NowIndicator position={nowPx} time={clock.hm} seconds={clock.s} />
+    <NowIndicator mode="dot" position={nowPx} time={clock.hm} />
+    <NowIndicator mode="badge" />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Visual mode */
+		mode?: 'line' | 'dot' | 'badge';
+		/** Pixel offset for positioning (line/dot modes) */
+		position?: number;
+		/** Orientation of the line/dot */
+		orientation?: 'vertical' | 'horizontal';
+		/** Formatted time string (e.g. "14:30") */
+		time?: string;
+		/** Formatted seconds string (e.g. ":05") */
+		seconds?: string;
+		/** Show the time label */
+		showLabel?: boolean;
+		/** Accent color override */
+		color?: string;
+		/** Custom content slot */
+		children?: Snippet;
+	}
+
+	let {
+		mode = 'line',
+		position = 0,
+		orientation = 'vertical',
+		time = '',
+		seconds = '',
+		showLabel = true,
+		color,
+		children,
+	}: Props = $props();
+
+	const posStyle = $derived(
+		orientation === 'vertical'
+			? `left: ${position}px`
+			: `top: ${position}px`,
+	);
+	const colorVar = $derived(color ? `--ni-color: ${color}` : '');
+</script>
+
+{#if mode === 'badge'}
+	<span class="ni-badge" style={colorVar}>
+		{#if children}
+			{@render children()}
+		{:else}
+			now
+		{/if}
+	</span>
+{:else if mode === 'dot'}
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}">
+		<div class="ni-dot-circle"></div>
+		{#if showLabel && time}
+			<div class="ni-label">
+				<span class="ni-time">{time}</span>
+				{#if seconds}<span class="ni-sec">{seconds}</span>{/if}
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}">
+		<div class="ni-line-bar"></div>
+		{#if showLabel && time}
+			<div class="ni-label">
+				<span class="ni-time">{time}</span>
+				{#if seconds}<span class="ni-sec">{seconds}</span>{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.ni {
+		position: absolute;
+		z-index: 10;
+		pointer-events: none;
+	}
+
+	/* ── Line mode ── */
+	.ni-line.vertical {
+		top: 0;
+		bottom: 0;
+		width: 0;
+	}
+	.ni-line.horizontal {
+		left: 0;
+		right: 0;
+		height: 0;
+	}
+	.ni-line-bar {
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+	}
+	.ni-line.vertical .ni-line-bar {
+		width: 2px;
+		height: 100%;
+		margin-left: -1px;
+	}
+	.ni-line.horizontal .ni-line-bar {
+		height: 2px;
+		width: 100%;
+		margin-top: -1px;
+	}
+
+	/* ── Dot mode ── */
+	.ni-dot-circle {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+		box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(239, 68, 68, 0.35)));
+	}
+	.ni-dot.vertical .ni-dot-circle {
+		margin-left: -5px;
+	}
+	.ni-dot.horizontal .ni-dot-circle {
+		margin-top: -5px;
+	}
+
+	/* ── Label ── */
+	.ni-label {
+		position: absolute;
+		white-space: nowrap;
+		font: 600 10px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-btn-text, #fff);
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+		padding: 3px 6px;
+		border-radius: 4px;
+	}
+	.ni-line.vertical .ni-label,
+	.ni-dot.vertical .ni-label {
+		top: 0;
+		transform: translateX(-50%);
+	}
+	.ni-line.horizontal .ni-label,
+	.ni-dot.horizontal .ni-label {
+		left: 0;
+		transform: translateY(-100%) translateY(-4px);
+	}
+	.ni-sec {
+		opacity: 0.6;
+		font-weight: 400;
+	}
+
+	/* ── Badge mode ── */
+	.ni-badge {
+		display: inline-flex;
+		align-items: center;
+		font: 700 9px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--dt-btn-text, #fff);
+		background: var(--ni-color, var(--dt-accent, #ef4444));
+		padding: 2px 7px;
+		border-radius: 3px;
+		animation: ni-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes ni-pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.7; }
+	}
+</style>

package/dist/primitives/NowIndicator.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Visual mode */
+    mode?: 'line' | 'dot' | 'badge';
+    /** Pixel offset for positioning (line/dot modes) */
+    position?: number;
+    /** Orientation of the line/dot */
+    orientation?: 'vertical' | 'horizontal';
+    /** Formatted time string (e.g. "14:30") */
+    time?: string;
+    /** Formatted seconds string (e.g. ":05") */
+    seconds?: string;
+    /** Show the time label */
+    showLabel?: boolean;
+    /** Accent color override */
+    color?: string;
+    /** Custom content slot */
+    children?: Snippet;
+}
+declare const NowIndicator: import("svelte").Component<Props, {}, "">;
+type NowIndicator = ReturnType<typeof NowIndicator>;
+export default NowIndicator;