@nomideusz/svelte-calendar 0.2.2 → 0.3.0

package/dist/primitives/EventBlock.svelte

@@ -62,7 +62,7 @@
 
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
 
-	const ariaLabel = $derived(() => {
+	const ariaLabel = $derived.by(() => {
 		const t = event.title;
 		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
 		const dur = fmtDuration(event.start, event.end);
@@ -78,19 +78,7 @@
 	}
 </script>
 
-<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}
->
+{#snippet content()}
 	{#if children}
 		{@render children(event)}
 	{:else if variant === 'chip'}
@@ -101,12 +89,22 @@
 		<div class="eb-stripe"></div>
 		<div class="eb-body">
 			<span class="eb-title">{event.title}</span>
+			{#if event.subtitle}
+				<span class="eb-subtitle">{event.subtitle}</span>
+			{/if}
 			{#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 event.tags && event.tags.length > 0}
+				<div class="eb-tags">
+					{#each event.tags as tag}
+						<span class="eb-tag">{tag}</span>
+					{/each}
+				</div>
+			{/if}
 			{#if active}<span class="eb-live-badge">now</span>{/if}
 		</div>
 	{:else}
@@ -114,12 +112,53 @@
 		<span class="eb-stripe"></span>
 		<span class="eb-time">{fmtTime(event.start)} – {fmtTime(event.end)}</span>
 		<span class="eb-title">{event.title}</span>
+		{#if event.subtitle}
+			<span class="eb-subtitle">{event.subtitle}</span>
+		{/if}
 		{#if showDuration}
 			<span class="eb-dur">{fmtDuration(event.start, event.end)}</span>
 		{/if}
+		{#if event.tags && event.tags.length > 0}
+			<span class="eb-tags">
+				{#each event.tags as tag}
+					<span class="eb-tag">{tag}</span>
+				{/each}
+			</span>
+		{/if}
 		{#if active}<span class="eb-live-badge">now</span>{/if}
 	{/if}
+{/snippet}
+
+{#if onclick}
+<div
+	class="eb eb-{variant}"
+	class:eb-active={active}
+	class:eb-past={past}
+	class:eb-editable={editable}
+	style="--eb-color: {accentColor}"
+	role="button"
+	tabindex="0"
+	aria-label={ariaLabel}
+	aria-current={active ? 'true' : undefined}
+	onclick={() => onclick?.(event)}
+	onkeydown={handleKeydown}
+>
+	{@render content()}
+</div>
+{:else}
+<div
+	class="eb eb-{variant}"
+	class:eb-active={active}
+	class:eb-past={past}
+	class:eb-editable={editable}
+	style="--eb-color: {accentColor}"
+	role="article"
+	aria-label={ariaLabel}
+	aria-current={active ? 'true' : undefined}
+>
+	{@render content()}
 </div>
+{/if}
 
 <style>
 	.eb {
@@ -243,6 +282,28 @@
 	}
 
 	/* ── Shared ── */
+	.eb-subtitle {
+		font: 400 10px / 1.2 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.eb-tags {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 3px;
+	}
+	.eb-tag {
+		display: inline-block;
+		font: 500 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		padding: 2px 5px;
+		border-radius: 3px;
+		background: color-mix(in srgb, var(--_color) 18%, transparent);
+		color: var(--_color);
+	}
 	.eb-live-badge {
 		display: inline-flex;
 		align-items: center;

package/dist/theme/index.d.ts

@@ -1,2 +1,2 @@
-export { midnight, parchment, indigo, neutral, bare, presets, stageBg, } from './presets.js';
+export { midnight, parchment, indigo, neutral, bare, presets, } from './presets.js';
 export type { PresetName } from './presets.js';

package/dist/theme/index.js

@@ -1,2 +1,2 @@
 // ─── Theme barrel export ────────────────────────────────
-export { midnight, parchment, indigo, neutral, bare, presets, stageBg, } from './presets.js';
+export { midnight, parchment, indigo, neutral, bare, presets, } from './presets.js';

package/dist/theme/presets.d.ts

@@ -5,33 +5,28 @@
  * Pass to the `style` prop of any timeline component.
  */
 /** Midnight Industrial — dark charcoal + red accent, tech monitoring */
-export declare const 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";
+export declare const midnight = "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
 /** Desert Parchment — warm analog planner, burnt sienna on aged paper */
-export declare const parchment = "\n\t--dt-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";
+export declare const parchment = "\n\t--dt-stage-bg: #e4dace;\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
 /** Soft Indigo — calm productivity, muted lavender with indigo markers */
-export declare const indigo = "\n\t--dt-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";
+export declare const indigo = "\n\t--dt-stage-bg: #efedf8;\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
 /**
  * Neutral — inherits fonts from host page, uses standard grays + safe blue accent.
  * Drop-in preset that blends into any website without fighting its design.
  */
-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";
+export declare const neutral = "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
 /**
  * Bare — transparent skeleton that inherits everything from the host page.
  * All colors use currentColor/transparent/inherit so the calendar fully absorbs
  * the parent site's design. Override individual --dt-* tokens as needed.
  */
-export declare const bare = "\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
+export declare const bare = "\n\t--dt-stage-bg: transparent;\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
 /** 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";
+    readonly midnight: "\n\t--dt-stage-bg: #080a0f;\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
+    readonly parchment: "\n\t--dt-stage-bg: #e4dace;\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
+    readonly indigo: "\n\t--dt-stage-bg: #efedf8;\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
+    readonly neutral: "\n\t--dt-stage-bg: #ffffff;\n\t--dt-bg: #ffffff;\n\t--dt-surface: #f9fafb;\n\t--dt-border: rgba(0, 0, 0, 0.08);\n\t--dt-border-day: rgba(0, 0, 0, 0.14);\n\t--dt-text: rgba(0, 0, 0, 0.87);\n\t--dt-text-2: rgba(0, 0, 0, 0.54);\n\t--dt-text-3: rgba(0, 0, 0, 0.38);\n\t--dt-accent: #2563eb;\n\t--dt-accent-dim: rgba(37, 99, 235, 0.12);\n\t--dt-glow: rgba(37, 99, 235, 0.25);\n\t--dt-today-bg: rgba(37, 99, 235, 0.04);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(0, 0, 0, 0.1);\n\t--dt-success: rgba(22, 163, 74, 0.7);\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: ui-monospace, 'SFMono-Regular', monospace;\n\t--dt-hm-empty: rgba(0, 0, 0, 0.03);\n\t--dt-hm-low: rgba(37, 99, 235, 0.12);\n\t--dt-hm-mid: rgba(37, 99, 235, 0.28);\n\t--dt-hm-high: rgba(37, 99, 235, 0.48);\n\t--dt-hm-max: rgba(37, 99, 235, 0.7);\n";
+    readonly bare: "\n\t--dt-stage-bg: transparent;\n\t--dt-bg: transparent;\n\t--dt-surface: transparent;\n\t--dt-border: currentColor;\n\t--dt-border-day: currentColor;\n\t--dt-text: inherit;\n\t--dt-text-2: inherit;\n\t--dt-text-3: inherit;\n\t--dt-accent: currentColor;\n\t--dt-accent-dim: transparent;\n\t--dt-glow: transparent;\n\t--dt-today-bg: transparent;\n\t--dt-btn-text: inherit;\n\t--dt-scrollbar: currentColor;\n\t--dt-success: currentColor;\n\t--dt-serif: inherit;\n\t--dt-sans: inherit;\n\t--dt-mono: inherit;\n\t--dt-hm-empty: transparent;\n\t--dt-hm-low: currentColor;\n\t--dt-hm-mid: currentColor;\n\t--dt-hm-high: currentColor;\n\t--dt-hm-max: currentColor;\n";
 };
 export type PresetName = keyof typeof presets;
-/**
- * Stage background color matching each theme.
- * Useful for the container behind the timeline component.
- */
-export declare const stageBg: Record<PresetName, string>;

package/dist/theme/presets.js

@@ -6,6 +6,7 @@
  */
 /** 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);
@@ -29,6 +30,7 @@ export const midnight = `
 `;
 /** Desert Parchment — warm analog planner, burnt sienna on aged paper */
 export const parchment = `
+	--dt-stage-bg: #e4dace;
 	--dt-bg: #f0e9dd;
 	--dt-surface: #e8dfd0;
 	--dt-border: rgba(139, 110, 70, 0.12);
@@ -54,6 +56,7 @@ export const parchment = `
 `;
 /** Soft Indigo — calm productivity, muted lavender with indigo markers */
 export const indigo = `
+	--dt-stage-bg: #efedf8;
 	--dt-bg: #f7f6fc;
 	--dt-surface: #eeedf8;
 	--dt-border: rgba(99, 102, 241, 0.08);
@@ -81,6 +84,7 @@ export const indigo = `
  * Drop-in preset that blends into any website without fighting its design.
  */
 export const neutral = `
+	--dt-stage-bg: #ffffff;
 	--dt-bg: #ffffff;
 	--dt-surface: #f9fafb;
 	--dt-border: rgba(0, 0, 0, 0.08);
@@ -110,6 +114,7 @@ export const neutral = `
  * the parent site's design. Override individual --dt-* tokens as needed.
  */
 export const bare = `
+	--dt-stage-bg: transparent;
 	--dt-bg: transparent;
 	--dt-surface: transparent;
 	--dt-border: currentColor;
@@ -135,14 +140,3 @@ export const bare = `
 `;
 /** All available presets keyed by name */
 export const presets = { midnight, parchment, indigo, neutral, bare };
-/**
- * Stage background color matching each theme.
- * Useful for the container behind the timeline component.
- */
-export const stageBg = {
-    midnight: '#080a0f',
-    parchment: '#e4dace',
-    indigo: '#efedf8',
-    neutral: '#ffffff',
-    bare: 'transparent',
-};

package/dist/views/agenda/Agenda.svelte

@@ -754,7 +754,7 @@
 		transition: width 1s linear;
 	}
 
-	.ag-empty {
+	:global(.ag-empty) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -880,7 +880,7 @@
 		color: var(--dt-text-3, rgba(255, 255, 255, 0.25));
 		margin-bottom: 2px;
 	}
-	.ag-q-free-next {
+	:global(.ag-q-free-next) {
 		font-size: 10px;
 		font-weight: 500;
 		line-height: 1.2;
@@ -890,7 +890,7 @@
 		text-overflow: ellipsis;
 		margin-bottom: 2px;
 	}
-	.ag-q-free-until {
+	:global(.ag-q-free-until) {
 		font-size: 9px;
 		font-family: var(--dt-mono, monospace);
 		color: var(--dt-accent, #ff6b4a);

package/dist/views/day/DayGrid.svelte

@@ -43,6 +43,11 @@
 		selectedEventId?: string | null;
 		/** Start weeks on Monday */
 		mondayStart?: boolean;
+		/** Read-only mode */
+		readOnly?: boolean;
+		/** Visible hour range [startHour, endHour) — adjusts night collapse */
+		visibleHours?: [number, number];
+		[key: string]: unknown;
 	}
 
 	let {

package/dist/views/day/DayGrid.svelte.d.ts

@@ -27,6 +27,11 @@ interface Props {
     selectedEventId?: string | null;
     /** Start weeks on Monday */
     mondayStart?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Visible hour range [startHour, endHour) — adjusts night collapse */
+    visibleHours?: [number, number];
+    [key: string]: unknown;
 }
 declare const DayGrid: import("svelte").Component<Props, {}, "">;
 type DayGrid = ReturnType<typeof DayGrid>;

package/dist/views/index.d.ts

@@ -3,3 +3,4 @@ export { WeekGrid, WeekHeatmap } from './week/index.js';
 export { Agenda } from './agenda/index.js';
 export { Settings } from './settings/index.js';
 export type { SettingsField } from './settings/index.js';
+export { WeekSchedule } from './schedule/index.js';

package/dist/views/index.js

@@ -3,3 +3,4 @@ export { DayGrid, DayTimeline } from './day/index.js';
 export { WeekGrid, WeekHeatmap } from './week/index.js';
 export { Agenda } from './agenda/index.js';
 export { Settings } from './settings/index.js';
+export { WeekSchedule } from './schedule/index.js';

package/dist/views/schedule/WeekSchedule.svelte

@@ -0,0 +1,133 @@
+<!--
+  WeekSchedule — zero-config weekly schedule display.
+
+  A convenience wrapper that pre-wires Calendar + WeekGrid + Agenda
+  so consumers can render a read-only weekly schedule with a single import.
+
+  Usage:
+    <WeekSchedule
+      events={events}
+      theme={neutral}
+      locale="pl-PL"
+      height={560}
+      readOnly
+    />
+
+  Or with a recurring adapter:
+    <WeekSchedule
+      schedule={weeklyClasses}
+      theme={neutral}
+      readOnly
+    />
+-->
+<script lang="ts">
+	import type { TimelineEvent } from '../../core/types.js';
+	import type { RecurringEvent } from '../../adapters/recurring.js';
+	import type { MemoryAdapterOptions } from '../../adapters/memory.js';
+	import { createMemoryAdapter } from '../../adapters/memory.js';
+	import { createRecurringAdapter, type RecurringAdapterOptions } from '../../adapters/recurring.js';
+	import Calendar from '../../calendar/Calendar.svelte';
+	import type { CalendarView } from '../../calendar/Calendar.svelte';
+	import { WeekGrid } from '../week/index.js';
+	import { Agenda } from '../agenda/index.js';
+
+	interface Props {
+		/** Concrete events (mutually exclusive with `schedule`) */
+		events?: TimelineEvent[];
+		/** Recurring weekly schedule (mutually exclusive with `events`) */
+		schedule?: RecurringEvent[];
+		/** CSS theme string */
+		theme?: string;
+		/** BCP 47 locale */
+		locale?: string;
+		/** Total height */
+		height?: number;
+		/** Start week on Monday */
+		mondayStart?: boolean;
+		/** Read-only mode (default: true for schedule display) */
+		readOnly?: boolean;
+		/** Visible hour range [startHour, endHour) */
+		visibleHours?: [number, number];
+		/** Show toolbar */
+		showToolbar?: boolean;
+		/** Show agenda view toggle */
+		showAgenda?: boolean;
+		/** Map of category/title to color */
+		colorMap?: Record<string, string>;
+		/** Auto-assign colors */
+		autoColor?: boolean;
+		/** Event click handler */
+		oneventclick?: (event: TimelineEvent) => void;
+		/** Event create handler (only works when readOnly is false) */
+		oneventcreate?: (range: { start: Date; end: Date }) => void;
+	}
+
+	let {
+		events,
+		schedule,
+		theme = '',
+		locale,
+		height = 560,
+		mondayStart = true,
+		readOnly = true,
+		visibleHours,
+		showToolbar = true,
+		showAgenda = true,
+		colorMap,
+		autoColor,
+		oneventclick,
+		oneventcreate,
+	}: Props = $props();
+
+	// Auto-create the adapter from events or schedule
+	const adapter = $derived.by(() => {
+		if (schedule) {
+			return createRecurringAdapter(schedule, {
+				mondayStart,
+				colorMap,
+				autoColor,
+			} satisfies RecurringAdapterOptions);
+		}
+		return createMemoryAdapter(events ?? [], {
+			colorMap,
+			autoColor,
+		} satisfies MemoryAdapterOptions);
+	});
+
+	// Pre-wired views
+	const views = $derived.by((): CalendarView[] => {
+		const v: CalendarView[] = [
+			{
+				id: 'week-grid',
+				label: 'Week',
+				granularity: 'week',
+				component: WeekGrid,
+			},
+		];
+		if (showAgenda) {
+			v.push({
+				id: 'agenda',
+				label: 'Agenda',
+				granularity: 'week',
+				component: Agenda,
+				props: { mode: 'week' },
+			});
+		}
+		return v;
+	});
+</script>
+
+<Calendar
+	{adapter}
+	{views}
+	defaultView="week-grid"
+	{theme}
+	{locale}
+	{height}
+	{mondayStart}
+	{readOnly}
+	{visibleHours}
+	{showToolbar}
+	{oneventclick}
+	oneventcreate={readOnly ? undefined : oneventcreate}
+/>

package/dist/views/schedule/WeekSchedule.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { TimelineEvent } from '../../core/types.js';
+import type { RecurringEvent } from '../../adapters/recurring.js';
+interface Props {
+    /** Concrete events (mutually exclusive with `schedule`) */
+    events?: TimelineEvent[];
+    /** Recurring weekly schedule (mutually exclusive with `events`) */
+    schedule?: RecurringEvent[];
+    /** CSS theme string */
+    theme?: string;
+    /** BCP 47 locale */
+    locale?: string;
+    /** Total height */
+    height?: number;
+    /** Start week on Monday */
+    mondayStart?: boolean;
+    /** Read-only mode (default: true for schedule display) */
+    readOnly?: boolean;
+    /** Visible hour range [startHour, endHour) */
+    visibleHours?: [number, number];
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Show agenda view toggle */
+    showAgenda?: boolean;
+    /** Map of category/title to color */
+    colorMap?: Record<string, string>;
+    /** Auto-assign colors */
+    autoColor?: boolean;
+    /** Event click handler */
+    oneventclick?: (event: TimelineEvent) => void;
+    /** Event create handler (only works when readOnly is false) */
+    oneventcreate?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+}
+declare const WeekSchedule: import("svelte").Component<Props, {}, "">;
+type WeekSchedule = ReturnType<typeof WeekSchedule>;
+export default WeekSchedule;

package/dist/views/schedule/index.d.ts

@@ -0,0 +1 @@
+export { default as WeekSchedule } from './WeekSchedule.svelte';

package/dist/views/schedule/index.js

@@ -0,0 +1,2 @@
+// ─── Schedule views barrel export ───────────────────────
+export { default as WeekSchedule } from './WeekSchedule.svelte';

package/dist/views/settings/Settings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import type { PresetName } from '../../theme/presets.js';
-	import { presets, stageBg } from '../../theme/presets.js';
+	import { presets } from '../../theme/presets.js';
 
 	/* ─── Field definition types ─────────────────────── */
 	type RangeField = {
@@ -30,16 +30,20 @@
 
 	let { fields, values = $bindable(), theme = $bindable() }: Props = $props();
 
-	const themeKeys: PresetName[] = ['midnight', 'parchment', 'indigo'];
+	const themeKeys: PresetName[] = ['midnight', 'parchment', 'indigo', 'neutral', 'bare'];
 	const themeLabels: Record<PresetName, string> = {
 		midnight: 'Midnight',
 		parchment: 'Parchment',
 		indigo: 'Indigo',
+		neutral: 'Neutral',
+		bare: 'Bare',
 	};
 	const themeAccents: Record<PresetName, string> = {
 		midnight: '#ef4444',
 		parchment: '#b85c2f',
 		indigo: '#6366f1',
+		neutral: '#94a0b4',
+		bare: '#94a0b4',
 	};
 
 	let open = $state(true);

package/dist/views/week/WeekGrid.svelte

@@ -30,6 +30,9 @@
 		oneventclick?: (event: TimelineEvent) => void;
 		oneventcreate?: (range: { start: Date; end: Date }) => void;
 		selectedEventId?: string | null;
+		readOnly?: boolean;
+		visibleHours?: [number, number];
+		[key: string]: unknown;
 	}
 
 	let {
@@ -41,6 +44,8 @@
 		oneventclick,
 		oneventcreate,
 		selectedEventId = null,
+		readOnly = false,
+		...rest
 	}: Props = $props();
 
 	// ── Drag support (available when inside Calendar) ──
@@ -162,7 +167,7 @@
 	function handleDayCellClick(ms: number, e: Event) {
 		const target = e.target as HTMLElement;
 		if (target.closest('.wg-ev')) return;
-		if (!oneventcreate) return;
+		if (readOnly || !oneventcreate) return;
 		const start = new Date(ms + 9 * 3_600_000);
 		const end = new Date(ms + 10 * 3_600_000);
 		oneventcreate({ start, end });
@@ -182,7 +187,7 @@
 	}
 
 	function onEventPointerDown(e: PointerEvent, ev: TimelineEvent) {
-		if (e.button !== 0 || !drag) return;
+		if (e.button !== 0 || !drag || readOnly) return;
 		e.stopPropagation();
 		evDragStartX = e.clientX;
 		evDragStarted = false;

package/dist/views/week/WeekGrid.svelte.d.ts

@@ -15,6 +15,9 @@ interface Props {
         end: Date;
     }) => void;
     selectedEventId?: string | null;
+    readOnly?: boolean;
+    visibleHours?: [number, number];
+    [key: string]: unknown;
 }
 declare const WeekGrid: import("svelte").Component<Props, {}, "">;
 type WeekGrid = ReturnType<typeof WeekGrid>;

package/dist/views/week/WeekHeatmap.svelte

@@ -27,7 +27,13 @@
 		focusDate,
 		oneventclick,
 		selectedEventId = null,
-	}: WeekTimelineProps = $props();
+		visibleHours,
+		...rest
+	}: WeekTimelineProps & { visibleHours?: [number, number]; [key: string]: unknown } = $props();
+
+	const startHour = $derived(visibleHours?.[0] ?? 0);
+	const endHour = $derived(visibleHours?.[1] ?? 24);
+	const visibleHourCount = $derived(endHour - startHour);
 
 	const clock = createClock();
 
@@ -66,7 +72,7 @@
 			const isToday = ms === clock.today;
 
 			const cells: HeatCell[] = [];
-			for (let h = 0; h < 24; h++) {
+			for (let h = startHour; h < endHour; h++) {
 				const cellStart = ms + h * 3600000;
 				const cellEnd = cellStart + 3600000;
 				const overlaps = events.filter((ev) => ev.start.getTime() < cellEnd && ev.end.getTime() > cellStart);
@@ -179,9 +185,10 @@
 	<!-- Hour labels row -->
 	<div class="hm-hours-row">
 		<div class="hm-row-label"></div>
-		{#each Array(24) as _, h}
-			{#if h % 3 === 0}
-				<span class="hm-hour-mark" style:left="calc({h} * (100% / 24))">{fmtH(h)}</span>
+		{#each Array(visibleHourCount) as _, idx}
+			{@const h = startHour + idx}
+			{#if (h - startHour) % 3 === 0}
+				<span class="hm-hour-mark" style:left="calc({idx} * (100% / {visibleHourCount}))">{fmtH(h)}</span>
 			{/if}
 		{/each}
 	</div>

package/dist/views/week/WeekHeatmap.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { WeekTimelineProps } from '../../core/types.js';
-declare const WeekHeatmap: import("svelte").Component<WeekTimelineProps, {}, "">;
+type $$ComponentProps = WeekTimelineProps & {
+    visibleHours?: [number, number];
+    [key: string]: unknown;
+};
+declare const WeekHeatmap: import("svelte").Component<$$ComponentProps, {}, "">;
 type WeekHeatmap = ReturnType<typeof WeekHeatmap>;
 export default WeekHeatmap;