@nomideusz/svelte-calendar 0.6.3 → 0.6.4

package/dist/primitives/EventBlock.svelte

@@ -48,13 +48,19 @@
 	}: Props = $props();
 
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
+	const isCancelled = $derived(event.status === 'cancelled');
+	const isTentative = $derived(event.status === 'tentative');
+	const isFull = $derived(event.status === 'full');
+	const isLimited = $derived(event.status === 'limited');
 
 	const ariaLabel = $derived.by(() => {
 		const t = event.title;
 		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
 		const dur = fmtDuration(event.start, event.end);
-		const status = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : '';
-		return `${t}, ${time}, ${dur}${status}`;
+		const loc = event.location ? `, ${event.location}` : '';
+		const statusStr = isCancelled ? ', cancelled' : isTentative ? ', tentative' : isFull ? ', full' : isLimited ? ', limited' : '';
+		const activeStr = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : '';
+		return `${t}${loc}, ${time}, ${dur}${statusStr}${activeStr}`;
 	});
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -79,6 +85,9 @@
 			{#if event.subtitle}
 				<span class="eb-subtitle">{event.subtitle}</span>
 			{/if}
+			{#if event.location}
+				<span class="eb-location">📍 {event.location}</span>
+			{/if}
 			{#if showTime}
 				<span class="eb-time">{fmtTime(event.start)} – {fmtTime(event.end)}</span>
 			{/if}
@@ -92,6 +101,10 @@
 					{/each}
 				</div>
 			{/if}
+			{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">Cancelled</span>{/if}
+			{#if isTentative}<span class="eb-status-badge eb-tentative-badge">Tentative</span>{/if}
+			{#if isFull}<span class="eb-status-badge eb-full-badge">Full</span>{/if}
+			{#if isLimited}<span class="eb-status-badge eb-limited-badge">Limited</span>{/if}
 			{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
 		</div>
 	{:else}
@@ -102,6 +115,9 @@
 		{#if event.subtitle}
 			<span class="eb-subtitle">{event.subtitle}</span>
 		{/if}
+		{#if event.location}
+			<span class="eb-location">📍 {event.location}</span>
+		{/if}
 		{#if showDuration}
 			<span class="eb-dur">{fmtDuration(event.start, event.end)}</span>
 		{/if}
@@ -112,6 +128,9 @@
 				{/each}
 			</span>
 		{/if}
+		{#if isCancelled}<span class="eb-status-badge eb-cancelled-badge">Cancelled</span>{/if}
+		{#if isFull}<span class="eb-status-badge eb-full-badge">Full</span>{/if}
+		{#if isLimited}<span class="eb-status-badge eb-limited-badge">Limited</span>{/if}
 		{#if active}<span class="eb-live-badge">{L.now}</span>{/if}
 	{/if}
 {/snippet}
@@ -121,6 +140,10 @@
 	class="eb eb-{variant}"
 	class:eb-active={active}
 	class:eb-past={past}
+	class:eb-cancelled={isCancelled}
+	class:eb-tentative={isTentative}
+	class:eb-full={isFull}
+	class:eb-limited={isLimited}
 	class:eb-editable={editable}
 	style="--eb-color: {accentColor}"
 	role="button"
@@ -137,6 +160,10 @@
 	class="eb eb-{variant}"
 	class:eb-active={active}
 	class:eb-past={past}
+	class:eb-cancelled={isCancelled}
+	class:eb-tentative={isTentative}
+	class:eb-full={isFull}
+	class:eb-limited={isLimited}
 	class:eb-editable={editable}
 	style="--eb-color: {accentColor}"
 	role="article"
@@ -167,6 +194,31 @@
 	.eb-past {
 		opacity: 0.5;
 	}
+	.eb-cancelled {
+		opacity: 0.45;
+	}
+	.eb-cancelled .eb-title {
+		text-decoration: line-through;
+	}
+	.eb-tentative {
+		opacity: 0.7;
+	}
+	.eb-tentative .eb-stripe {
+		background: repeating-linear-gradient(
+			45deg,
+			var(--_color),
+			var(--_color) 2px,
+			transparent 2px,
+			transparent 4px
+		);
+	}
+	.eb-full {
+		opacity: 0.55;
+	}
+	.eb-limited .eb-stripe {
+		border-left: 2px dashed var(--_color);
+		background: none;
+	}
 
 	/* ── Chip ── */
 	.eb-chip {
@@ -291,6 +343,39 @@
 		background: color-mix(in srgb, var(--_color) 18%, transparent);
 		color: var(--_color);
 	}
+	.eb-location {
+		font: 400 9px / 1.2 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.eb-status-badge {
+		display: inline-flex;
+		align-items: center;
+		font: 700 8px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		padding: 2px 6px;
+		border-radius: 3px;
+		width: fit-content;
+	}
+	.eb-cancelled-badge {
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
+		background: color-mix(in srgb, var(--dt-text-2, rgba(148, 163, 184, 0.3)) 15%, transparent);
+	}
+	.eb-tentative-badge {
+		color: var(--_color);
+		background: color-mix(in srgb, var(--_color) 12%, transparent);
+	}
+	.eb-full-badge {
+		color: #ef4444;
+		background: color-mix(in srgb, #ef4444 15%, transparent);
+	}
+	.eb-limited-badge {
+		color: var(--_color);
+		background: color-mix(in srgb, var(--_color) 12%, transparent);
+	}
 	.eb-live-badge {
 		display: inline-flex;
 		align-items: center;

package/dist/views/agenda/AgendaDay.svelte

@@ -12,14 +12,16 @@
 	 * Future day ("The Plan"):
 	 *   Clean numbered schedule list.
 	 */
-	import { getContext } from 'svelte';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent } from '../../core/types.js';
 	import { sod, DAY_MS, isAllDay, isMultiDay } from '../../core/time.js';
-	import { fmtTime as _fmtTime, fmtDuration, getLabels } from '../../core/locale.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
+	import { getLabels } from '../../core/locale.js';
+	import { useCalendarContext } from '../shared/context.svelte.js';
+	import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from '../shared/format.js';
+	import type { TimeSlot } from '../shared/format.js';
 
 	const L = $derived(getLabels());
+	const ctx = useCalendarContext();
 
 	interface Props {
 		locale?: string;
@@ -43,17 +45,15 @@
 	}: Props = $props();
 
 	const clock = createClock();
-	const viewState = getContext<ViewState>('calendar:viewState') as ViewState | undefined;
-	const showNavCtx = getContext<{ current: boolean }>('calendar:showNavigation') as { current: boolean } | undefined;
-	const equalDaysCtx = getContext<{ current: boolean }>('calendar:equalDays') as { current: boolean } | undefined;
-	const showDatesCtx = getContext<{ current: boolean }>('calendar:showDates') as { current: boolean } | undefined;
-	const mobileCtx = getContext<{ current: boolean }>('calendar:mobile') as { current: boolean } | undefined;
-	const autoHeightCtx = getContext<{ current: boolean }>('calendar:autoHeight') as { current: boolean } | undefined;
-	const showNav = $derived(showNavCtx?.current ?? true);
-	const equalDays = $derived(equalDaysCtx?.current ?? false);
-	const showDates = $derived(showDatesCtx?.current ?? true);
-	const isMobile = $derived(mobileCtx?.current ?? false);
-	const autoHeight = $derived(autoHeightCtx?.current ?? false);
+	const viewState = $derived(ctx.viewState);
+	const showNav = $derived(ctx.showNav);
+	const equalDays = $derived(ctx.equalDays);
+	const showDates = $derived(ctx.showDates);
+	const isMobile = $derived(ctx.isMobile);
+	const autoHeight = $derived(ctx.autoHeight);
+	const compact = $derived(ctx.compact);
+	const oneventhover = $derived(ctx.oneventhover);
+	const disabledSet = $derived(ctx.disabledSet);
 
 	// ── Swipe navigation (mobile) ──────────────────────
 	let swipeStartX = 0;
@@ -76,65 +76,10 @@
 		}
 	}
 
-	// ── New feature contexts ──
-	const callbacksCtx = getContext<{ oneventhover?: (event: TimelineEvent) => void }>('calendar:callbacks') as { oneventhover?: (event: TimelineEvent) => void } | undefined;
-	const disabledDatesCtx = getContext<{ current: Date[] | undefined }>('calendar:disabledDates') as { current: Date[] | undefined } | undefined;
-	const oneventhover = $derived(callbacksCtx?.oneventhover);
-	const disabledDates = $derived(disabledDatesCtx?.current);
-	const disabledSet = $derived(new Set(disabledDates?.map(d => sod(d.getTime())) ?? []));
-
-	// ── Format helpers ──────────────────────────────────
-	function fmtTime(d: Date): string {
-		return _fmtTime(d, locale);
-	}
-
-	function duration(ev: TimelineEvent): string {
-		return fmtDuration(ev.start, ev.end);
-	}
-
-	function timeUntilMs(ms: number): string {
-		const diff = ms - clock.tick;
-		if (diff <= 0) return L.now;
-		const tMins = Math.floor(diff / 60000);
-		if (tMins < 60) return `in ${tMins}m`;
-		const hrs = Math.floor(tMins / 60);
-		const rm = tMins % 60;
-		if (hrs < 24) return rm > 0 ? `in ${hrs}h ${rm}m` : `in ${hrs}h`;
-		const days = Math.floor(hrs / 24);
-		return `in ${days}d`;
-	}
-
-	function progress(ev: TimelineEvent): number {
-		const s = ev.start.getTime();
-		const e = ev.end.getTime();
-		return Math.min(1, Math.max(0, (clock.tick - s) / (e - s)));
-	}
-
-	// ── Overlap grouping ────────────────────────────────
-	interface TimeSlot {
-		startMs: number;
-		endMs: number;
-		events: TimelineEvent[];
-	}
-
-	function groupIntoSlots(evts: TimelineEvent[]): TimeSlot[] {
-		const sorted = [...evts].sort((a, b) => a.start.getTime() - b.start.getTime());
-		const slots: TimeSlot[] = [];
-		for (const ev of sorted) {
-			const last = slots[slots.length - 1];
-			if (last && ev.start.getTime() < last.endMs) {
-				last.events.push(ev);
-				last.endMs = Math.max(last.endMs, ev.end.getTime());
-			} else {
-				slots.push({
-					startMs: ev.start.getTime(),
-					endMs: ev.end.getTime(),
-					events: [ev],
-				});
-			}
-		}
-		return slots;
-	}
+	// ── Format helpers (delegated to shared/format.ts) ──
+	const fmt = (d: Date) => fmtTime(d, locale);
+	const eta = (ms: number) => timeUntilMs(ms, clock.tick);
+	const prog = (ev: TimelineEvent) => progress(ev, clock.tick);
 
 	// ── Event handlers ──────────────────────────────────
 	function handleClick(ev: TimelineEvent): void {
@@ -244,7 +189,44 @@
 			</div>
 		{/if}
 
-		{#if isToday}
+		{#if compact}
+			<!-- ─── Compact: minimal text rows ─── -->
+			<div class="ag-compact-list">
+				{#if timedDayEvents.length === 0 && allDayBanner.length === 0}
+					<div class="ag-q-empty">{L.nothingScheduledYet}</div>
+				{:else}
+					{#each timedDayEvents as ev (ev.id)}
+						<div
+							class="ag-compact-row"
+							class:ag-compact-row--selected={selectedEventId === ev.id}
+							class:ag-compact-row--cancelled={ev.status === 'cancelled'}
+							class:ag-compact-row--tentative={ev.status === 'tentative'}
+							style:--ev-color={ev.color || 'var(--dt-accent)'}
+							role="button"
+							tabindex="0"
+							aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+							onclick={() => handleClick(ev)}
+							onpointerenter={() => oneventhover?.(ev)}
+							onkeydown={(e) => handleKeydown(e, ev)}
+						>
+							<span class="ag-compact-row-dot"></span>
+							<span class="ag-compact-row-time">{fmt(ev.start)}</span>
+							<span class="ag-compact-row-title">{ev.title}</span>
+							{#if ev.subtitle}
+								<span class="ag-compact-row-sub">{ev.subtitle}</span>
+							{/if}
+							{#if ev.tags?.length}
+								{#each ev.tags as tag}
+									<span class="ag-compact-row-tag">{tag}</span>
+								{/each}
+							{/if}
+							<span class="ag-compact-row-dur">{duration(ev)}</span>
+						</div>
+					{/each}
+				{/if}
+			</div>
+
+		{:else if isToday}
 			<!-- ─── Today: "The Queue" — upcoming is the hero ─── -->
 			<div class="ag-q">
 				<!-- NOW column: past events stacked above NOW strip -->
@@ -258,7 +240,7 @@
 									class:ag-q-done-item--selected={selectedEventId === ev.id}
 									role="button"
 									tabindex="0"
-									aria-label="{ev.title}, {L.completed}, {fmtTime(ev.start)}"
+									aria-label="{ev.title}, {L.completed}, {fmt(ev.start)}"
 									onclick={() => handleClick(ev)}
 									onkeydown={(e) => handleKeydown(e, ev)}
 								>
@@ -278,14 +260,14 @@
 								style:--ev-color={ev.color || 'var(--dt-accent)'}
 								role="button"
 								tabindex="0"
-								aria-label="{ev.title}, {L.happeningNow}, {L.percentComplete(Math.round(progress(ev) * 100))}"
+								aria-label="{ev.title}, {L.happeningNow}, {L.percentComplete(Math.round(prog(ev) * 100))}"
 								onclick={() => handleClick(ev)}							onpointerenter={() => oneventhover?.(ev)}								onkeydown={(e) => handleKeydown(e, ev)}
 							>
 								<div class="ag-q-now-dot"></div>
 								<div class="ag-q-now-title">{ev.title}</div>
-								<div class="ag-q-now-time">{L.until} {fmtTime(ev.end)}</div>
+								<div class="ag-q-now-time">{L.until} {fmt(ev.end)}</div>
 								<div class="ag-q-now-track">
-									<div class="ag-q-now-fill" style:width="{progress(ev) * 100}%"></div>
+									<div class="ag-q-now-fill" style:width="{prog(ev) * 100}%"></div>
 								</div>
 							</div>
 						{/each}
@@ -312,7 +294,7 @@
 								style:--ev-color={ev.color || 'var(--dt-accent)'}
 								role="button"
 								tabindex="0"
-								aria-label="{ev.title}, {fmtTime(ev.start)}, {duration(ev)}"
+								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
 								onclick={() => handleClick(ev)}
 								onpointerenter={() => oneventhover?.(ev)}
 								onkeydown={(e) => handleKeydown(e, ev)}
@@ -320,13 +302,13 @@
 								<div class="ag-card-body">
 									<div class="ag-card-top">
 										<span class="ag-card-title">{ev.title}</span>
-										<span class="ag-card-eta">{timeUntilMs(ev.start.getTime())}</span>
+										<span class="ag-card-eta">{eta(ev.start.getTime())}</span>
 									</div>
 									{#if ev.subtitle}
 										<span class="ag-card-sub">{ev.subtitle}</span>
 									{/if}
 									<div class="ag-card-meta">
-										{fmtTime(ev.start)} – {fmtTime(ev.end)}
+										{fmt(ev.start)} – {fmt(ev.end)}
 										<span class="ag-card-dur">{duration(ev)}</span>
 									</div>
 									{#if ev.tags?.length}
@@ -356,11 +338,11 @@
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
 							role="button"
 							tabindex="0"
-							aria-label="{ev.title}, {fmtTime(ev.start)} to {fmtTime(ev.end)}"
+							aria-label="{ev.title}, {fmt(ev.start)} to {fmt(ev.end)}"
 							onclick={() => handleClick(ev)}						onpointerenter={() => oneventhover?.(ev)}							onkeydown={(e) => handleKeydown(e, ev)}
 						>
 							<span class="ag-log-check">✓</span>
-							<span class="ag-log-time">{fmtTime(ev.start)}</span>
+							<span class="ag-log-time">{fmt(ev.start)}</span>
 							<span class="ag-log-dot" style:background={ev.color || 'var(--dt-accent)'}></span>
 							<span class="ag-log-title">{ev.title}</span>
 							<span class="ag-log-dur">{duration(ev)}</span>
@@ -380,10 +362,14 @@
 							class="ag-card ag-card--plan"
 							class:ag-card--first={i === 0}
 							class:ag-card--selected={selectedEventId === ev.id}
+							class:ag-card--cancelled={ev.status === 'cancelled'}
+							class:ag-card--tentative={ev.status === 'tentative'}
+							class:ag-card--full={ev.status === 'full'}
+							class:ag-card--limited={ev.status === 'limited'}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
 							role="button"
 							tabindex="0"
-							aria-label="{ev.title}, {fmtTime(ev.start)} to {fmtTime(ev.end)}, {duration(ev)}"
+							aria-label="{ev.title}{ev.status === 'cancelled' ? ' (cancelled)' : ''}{ev.status === 'tentative' ? ' (tentative)' : ''}{ev.status === 'full' ? ' (full)' : ''}{ev.status === 'limited' ? ' (limited)' : ''}, {fmt(ev.start)} to {fmt(ev.end)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}						onpointerenter={() => oneventhover?.(ev)}							onkeydown={(e) => handleKeydown(e, ev)}
 						>
 							<div class="ag-card-body">
@@ -394,8 +380,11 @@
 								{#if ev.subtitle}
 									<span class="ag-card-sub">{ev.subtitle}</span>
 								{/if}
+								{#if ev.location}
+									<span class="ag-card-loc">{ev.location}</span>
+								{/if}
 								<div class="ag-card-meta">
-									{fmtTime(ev.start)} – {fmtTime(ev.end)}
+									{fmt(ev.start)} – {fmt(ev.end)}
 									<span class="ag-card-dur">{duration(ev)}</span>
 								</div>
 								{#if ev.tags?.length}
@@ -528,6 +517,9 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		width: 100%;
+		min-width: 0;
+		box-sizing: border-box;
 		color: var(--dt-text, rgba(255, 255, 255, 0.92));
 		font-family: var(--dt-sans, system-ui, sans-serif);
 	}
@@ -543,9 +535,11 @@
 	.ag-body {
 		flex: 1;
 		min-height: 0;
+		min-width: 0;
 		display: flex;
 		flex-direction: column;
 		overflow-y: auto;
+		overflow-x: hidden;
 		padding-top: 44px;
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-border) transparent;
@@ -640,6 +634,23 @@
 		border-color: var(--ev-color);
 		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #191919));
 	}
+	.ag-card--cancelled {
+		opacity: 0.5;
+	}
+	.ag-card--cancelled .ag-card-title {
+		text-decoration: line-through;
+	}
+	.ag-card--tentative {
+		opacity: 0.65;
+		border-style: dashed;
+	}
+	.ag-card--full {
+		opacity: 0.55;
+	}
+	.ag-card--limited {
+		opacity: 0.65;
+		border-style: dashed;
+	}
 	.ag-card-body {
 		padding: 10px 12px;
 		display: flex;
@@ -653,15 +664,15 @@
 		justify-content: space-between;
 		align-items: flex-start;
 		gap: 8px;
+		min-width: 0;
 	}
 	.ag-card-title {
 		font-size: 13px;
 		font-weight: 600;
-		line-height: 1.2;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		line-height: 1.3;
+		word-break: break-word;
 		flex: 1;
+		min-width: 0;
 	}
 	.ag-card-meta {
 		font-size: 11px;
@@ -678,6 +689,11 @@
 		color: var(--dt-text-2, rgba(255, 255, 255, 0.45));
 		line-height: 1;
 	}
+	.ag-card-loc {
+		font-size: 10px;
+		color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
+		line-height: 1;
+	}
 	.ag-card-tags {
 		display: flex;
 		gap: 4px;
@@ -1057,6 +1073,84 @@
 		flex-shrink: 0;
 	}
 
+	/* ═══ Compact Day ═══ */
+	.ag-compact-list {
+		flex: 1;
+		padding: 8px 20px 12px;
+		overflow-y: auto;
+		scrollbar-width: none;
+	}
+	.ag-compact-list::-webkit-scrollbar { display: none; }
+	.ag-compact-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 4px 0;
+		cursor: pointer;
+	}
+	.ag-compact-row--selected {
+		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
+		border-radius: 4px;
+		padding-left: 6px;
+		padding-right: 6px;
+	}
+	.ag-compact-row:hover .ag-compact-row-title { color: var(--dt-text); }
+	.ag-compact-row:focus-visible {
+		outline: 2px solid var(--dt-accent, #ff6b4a);
+		outline-offset: 2px;
+	}
+	.ag-compact-row-dot {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: var(--ev-color, var(--dt-accent));
+		flex-shrink: 0;
+	}
+	.ag-compact-row-time {
+		font-size: 11px;
+		font-family: var(--dt-mono, monospace);
+		color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
+		min-width: 64px;
+		flex-shrink: 0;
+	}
+	.ag-compact-row-title {
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--dt-text-2, rgba(255, 255, 255, 0.5));
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		transition: color 150ms;
+	}
+	.ag-compact-row-dur {
+		font-size: 10px;
+		font-family: var(--dt-mono, monospace);
+		color: var(--dt-text-3, rgba(255, 255, 255, 0.3));
+		flex-shrink: 0;
+	}
+	.ag-compact-row-sub {
+		font-size: 10px;
+		color: var(--dt-text-3, rgba(255, 255, 255, 0.35));
+		flex-shrink: 0;
+	}
+	.ag-compact-row-tag {
+		font: 500 8px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 12%, transparent);
+		padding: 1px 4px;
+		border-radius: 3px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+	.ag-compact-row--cancelled { opacity: 0.5; }
+	.ag-compact-row--cancelled .ag-compact-row-title { text-decoration: line-through; }
+	.ag-compact-row--tentative { opacity: 0.65; }
+	/* Mobile: larger touch targets for compact rows */
+	.ag--mobile .ag-compact-row { padding: 8px 0; }
+	.ag--mobile .ag-compact-row-title { font-size: 14px; }
+	.ag--mobile .ag-compact-row-time { font-size: 12px; }
+
 	/* ═══ Future Day: "The Plan" ═══ */
 	.ag-plan {
 		flex: 1;