@nomideusz/svelte-calendar 0.6.0 → 0.6.3

package/dist/primitives/NowIndicator.svelte

@@ -1,178 +1,178 @@
-<!--
-  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';
-	import { getLabels } from '../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	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} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
-		{#if children}
-			{@render children()}
-		{:else}
-			{L.now}
-		{/if}
-	</span>
-{:else if mode === 'dot'}
-	<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">
-				<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}" role="status" aria-label="{L.currentTime}: {time}">
-		<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>
+<!--
+  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';
+	import { getLabels } from '../core/locale.js';
+
+	const L = $derived(getLabels());
+
+	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} role="status" aria-live="polite" aria-label="{L.currentTime}: {time}">
+		{#if children}
+			{@render children()}
+		{:else}
+			{L.now}
+		{/if}
+	</span>
+{:else if mode === 'dot'}
+	<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">
+				<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}" role="status" aria-label="{L.currentTime}: {time}">
+		<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/TimeGutter.svelte

@@ -1,105 +1,105 @@
-<!--
-  TimeGutter — shared hour labels / tick marks.
-
-  Two orientations:
+<!--
+  TimeGutter — shared hour labels / tick marks.
+
+  Two orientations:
     "horizontal" — ticks along a horizontal track (for day timeline-style layouts)
-    "vertical"   — label column along a vertical grid (for WeekTimeline style)
--->
-<script lang="ts">
-	import { HOURS } from '../core/time.js';
-	import { fmtH } from '../core/locale.js';
-
-	interface Props {
-		orientation?: 'horizontal' | 'vertical';
-		/** Pixel size per hour (width for horizontal, height for vertical) */
-		hourSize?: number;
-		/** Show half-hour ticks (horizontal only) */
-		halfHour?: boolean;
-		/** Hours to display (default 0-23) */
-		hours?: readonly number[];
-		/** Custom hour formatter */
-		formatHour?: (h: number) => string;
-	}
-
-	let {
-		orientation = 'horizontal',
-		hourSize = 120,
-		halfHour = true,
-		hours = HOURS,
-		formatHour = fmtH,
-	}: Props = $props();
-</script>
-
-{#if orientation === 'horizontal'}
-	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
-		{#each hours as h}
-			<div class="tg-tick" style="left: {h * hourSize}px">
-				<span class="tg-label">{formatHour(h)}</span>
-			</div>
-			{#if halfHour}
-				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
-			{/if}
-		{/each}
-	</div>
-{:else}
-	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
-		{#each hours as h}
-			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
-				<span class="tg-label">{formatHour(h)}</span>
-			</div>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.tg {
-		position: relative;
-		pointer-events: none;
-		user-select: none;
-	}
-
-	/* ── Horizontal ── */
-	.tg-h {
-		height: 100%;
-		width: calc(24 * var(--tg-hour));
-	}
-	.tg-tick {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 0;
-		border-left: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-	}
-	.tg-tick-half {
-		border-left-style: dashed;
-		opacity: 0.4;
-	}
-	.tg-h .tg-label {
-		position: absolute;
-		top: 4px;
-		left: 6px;
-		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
-		white-space: nowrap;
-	}
-
-	/* ── Vertical ── */
-	.tg-v {
-		width: 48px;
-		flex-shrink: 0;
-	}
-	.tg-row {
-		position: absolute;
-		left: 0;
-		right: 0;
-		display: flex;
-		align-items: flex-start;
-		justify-content: flex-end;
-		padding: 2px 8px 0 0;
-		border-top: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-	}
-	.tg-v .tg-label {
-		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
-		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
-	}
-</style>
+    "vertical"   — label column along a vertical grid (for WeekTimeline style)
+-->
+<script lang="ts">
+	import { HOURS } from '../core/time.js';
+	import { fmtH } from '../core/locale.js';
+
+	interface Props {
+		orientation?: 'horizontal' | 'vertical';
+		/** Pixel size per hour (width for horizontal, height for vertical) */
+		hourSize?: number;
+		/** Show half-hour ticks (horizontal only) */
+		halfHour?: boolean;
+		/** Hours to display (default 0-23) */
+		hours?: readonly number[];
+		/** Custom hour formatter */
+		formatHour?: (h: number) => string;
+	}
+
+	let {
+		orientation = 'horizontal',
+		hourSize = 120,
+		halfHour = true,
+		hours = HOURS,
+		formatHour = fmtH,
+	}: Props = $props();
+</script>
+
+{#if orientation === 'horizontal'}
+	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
+		{#each hours as h}
+			<div class="tg-tick" style="left: {h * hourSize}px">
+				<span class="tg-label">{formatHour(h)}</span>
+			</div>
+			{#if halfHour}
+				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
+		{#each hours as h}
+			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
+				<span class="tg-label">{formatHour(h)}</span>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.tg {
+		position: relative;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	/* ── Horizontal ── */
+	.tg-h {
+		height: 100%;
+		width: calc(24 * var(--tg-hour));
+	}
+	.tg-tick {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 0;
+		border-left: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.tg-tick-half {
+		border-left-style: dashed;
+		opacity: 0.4;
+	}
+	.tg-h .tg-label {
+		position: absolute;
+		top: 4px;
+		left: 6px;
+		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		white-space: nowrap;
+	}
+
+	/* ── Vertical ── */
+	.tg-v {
+		width: 48px;
+		flex-shrink: 0;
+	}
+	.tg-row {
+		position: absolute;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: flex-start;
+		justify-content: flex-end;
+		padding: 2px 8px 0 0;
+		border-top: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.tg-v .tg-label {
+		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+	}
+</style>

package/dist/theme/presets.js

@@ -26,44 +26,44 @@ export const auto = ``;
  * Neutral — explicit light theme. White bg, blue accent, inherits host fonts.
  * Use when embedding standalone without ancestor --dt-* vars.
  */
-export const neutral = `
-	--dt-stage-bg: #ffffff;
-	--dt-bg: #ffffff;
-	--dt-surface: #f9fafb;
-	--dt-border: rgba(0, 0, 0, 0.08);
-	--dt-border-day: rgba(0, 0, 0, 0.14);
-	--dt-text: rgba(0, 0, 0, 0.87);
-	--dt-text-2: rgba(0, 0, 0, 0.54);
-	--dt-text-3: rgba(0, 0, 0, 0.38);
-	--dt-accent: #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;
+export const neutral = `
+	--dt-stage-bg: #ffffff;
+	--dt-bg: #ffffff;
+	--dt-surface: #f9fafb;
+	--dt-border: rgba(0, 0, 0, 0.08);
+	--dt-border-day: rgba(0, 0, 0, 0.14);
+	--dt-text: rgba(0, 0, 0, 0.87);
+	--dt-text-2: rgba(0, 0, 0, 0.54);
+	--dt-text-3: rgba(0, 0, 0, 0.38);
+	--dt-accent: #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;
 `;
 /** 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;
+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 = { auto, neutral, midnight };