@nomideusz/svelte-calendar 0.14.1 → 0.15.2

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

@@ -123,7 +123,8 @@ interface Props {
      * Receives context: { prev, next, goToday, isViewOnToday, focusDate, mode }.
      */
     navigation?: Snippet<[import('../headless/types.js').NavigationContext]>;
-    oneventclick?: (event: TimelineEvent) => void;
+    /** `anchor` is the clicked block's viewport rect where a view has one (planner) — for positioning a FloatingPanel. */
+    oneventclick?: (event: TimelineEvent, anchor?: DOMRect) => void;
     oneventcreate?: (range: {
         start: Date;
         end: Date;

package/dist/headless/types.d.ts

@@ -46,7 +46,7 @@ export interface HeadlessCalendarOptions {
     minDuration?: number;
     /** Maximum event duration in minutes */
     maxDuration?: number;
-    oneventclick?: (event: TimelineEvent) => void;
+    oneventclick?: (event: TimelineEvent, anchor?: DOMRect) => void;
     oneventcreate?: (range: {
         start: Date;
         end: Date;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
+export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, FloatingPanel, } from './primitives/index.js';
 export { Calendar } from './calendar/index.js';
 export { Planner, Agenda, Mobile } from './views/index.js';
 export { default as MonthGrid } from './views/month/MonthGrid.svelte';

package/dist/index.js

@@ -1,5 +1,5 @@
 // ─── Primitives ─────────────────────────────────────────
-export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
+export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, FloatingPanel, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
 export { Calendar } from './calendar/index.js';
 // Raw view components — compose your own shell around the engine if needed

package/dist/primitives/DayHeader.svelte

@@ -6,13 +6,7 @@
     - Short/long weekday + date number for week views
 -->
 <script lang="ts">import { weekdayShort, weekdayLong, monthShort, fmtDay } from "../core/locale.js";
-let {
-  dayMs,
-  todayMs = Date.now(),
-  format = "short",
-  isToday = false,
-  isPast = false
-} = $props();
+let { dayMs, todayMs = Date.now(), format = "short", isToday = false, isPast = false } = $props();
 const dayNum = $derived(new Date(dayMs).getDate());
 </script>
 

package/dist/primitives/EmptySlot.svelte

@@ -7,18 +7,16 @@
 -->
 <script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
 const L = $derived(getLabels());
-let {
-  start,
-  end,
-  onclick,
-  orientation = "vertical"
-} = $props();
+let { start, end, onclick, orientation = "vertical" } = $props();
 const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
 function handleKeydown(e) {
-  if (e.key === "Enter" || e.key === " ") {
-    e.preventDefault();
-    onclick?.({ start, end });
-  }
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		onclick?.({
+			start,
+			end
+		});
+	}
 }
 </script>
 

package/dist/primitives/EventBlock.svelte

@@ -10,36 +10,26 @@
 -->
 <script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
 const L = $derived(getLabels());
-let {
-  event,
-  variant = "chip",
-  active = false,
-  past = false,
-  showTime = false,
-  showDuration = false,
-  editable = false,
-  onclick,
-  children
-} = $props();
+let { event, variant = "chip", active = false, past = false, showTime = false, showDuration = false, editable = false, onclick, children } = $props();
 const accentColor = $derived(event.color || "var(--dt-accent, #2563eb)");
 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 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}`;
+	const t = event.title;
+	const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
+	const dur = fmtDuration(event.start, event.end);
+	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) {
-  if (e.key === "Enter" || e.key === " ") {
-    e.preventDefault();
-    onclick?.(event);
-  }
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		onclick?.(event);
+	}
 }
 </script>
 

package/dist/primitives/FloatingPanel.svelte

@@ -0,0 +1,191 @@
+<script module lang="ts">// Phone sheet scroll-lock: nested panels each take a lock; the page behind
+// unlocks when the last one closes.
+let sheetLocks = 0;
+</script>
+
+<script lang="ts">let { title = "", anchor = {
+	x: 24,
+	y: 24
+}, width = 440, theme = "", closeLabel = "Close", closeOnOutside = true, onclose, children } = $props();
+const GAP = 10;
+const EDGE = 8;
+let el = $state(null);
+// Placed by the effect below once the panel has a size to clamp against.
+let left = $state(EDGE);
+let top = $state(EDGE);
+const clamp = (v, size, max) => Math.max(EDGE, Math.min(v, max - size - EDGE));
+function place(px, py) {
+	if (!el) return;
+	left = clamp(px, el.offsetWidth, window.innerWidth);
+	top = clamp(py, el.offsetHeight, window.innerHeight);
+}
+// Beside the anchor: to its right, else to its left, else over it.
+function beside(a) {
+	if (!el) return;
+	const w = el.offsetWidth;
+	const aw = a.width ?? 0;
+	const right = a.x + aw + GAP;
+	const px = right + w + EDGE <= window.innerWidth ? right : a.x - GAP - w >= EDGE ? a.x - GAP - w : a.x;
+	place(px, a.y);
+}
+// A new anchor (the next click) re-places the panel; each run focuses it.
+$effect(() => {
+	beside(anchor);
+	el?.focus({ preventScroll: true });
+});
+// In sheet mode the page behind must not scroll — drags on the sheet
+// chrome, or reaching the end of the sheet body, would otherwise reach it.
+$effect(() => {
+	if (typeof window === "undefined") return;
+	if (!window.matchMedia("(max-width: 640px)").matches) return;
+	document.body.classList.add("fp-sheet-lock");
+	document.documentElement.classList.add("fp-sheet-lock");
+	sheetLocks++;
+	return () => {
+		sheetLocks--;
+		if (sheetLocks === 0) {
+			document.body.classList.remove("fp-sheet-lock");
+			document.documentElement.classList.remove("fp-sheet-lock");
+		}
+	};
+});
+let grab = null;
+function down(e) {
+	if (e.button !== 0 || e.target.closest("button")) return;
+	grab = {
+		dx: e.clientX - left,
+		dy: e.clientY - top
+	};
+	e.currentTarget.setPointerCapture(e.pointerId);
+}
+function move(e) {
+	if (grab) place(e.clientX - grab.dx, e.clientY - grab.dy);
+}
+function up() {
+	grab = null;
+}
+// The outside pointerdown is swallowed here, before any calendar handler,
+// and so is the click it would synthesize — one tap closes, the next acts.
+let swallowClick = false;
+function outsideDown(e) {
+	if (!closeOnOutside || !el || el.contains(e.target)) return;
+	e.stopPropagation();
+	e.preventDefault();
+	swallowClick = true;
+	onclose?.();
+}
+function outsideClick(e) {
+	if (!swallowClick) return;
+	swallowClick = false;
+	e.stopPropagation();
+	e.preventDefault();
+}
+export {};
+</script>
+
+<svelte:window
+	onkeydown={(e) => e.key === 'Escape' && onclose?.()}
+	onpointerdowncapture={outsideDown}
+	onclickcapture={outsideClick}
+/>
+
+<div
+	class="fp"
+	role="dialog"
+	aria-label={title}
+	tabindex="-1"
+	bind:this={el}
+	style="{theme}; left: {left}px; top: {top}px; width: {width}px"
+>
+	<div class="fp-head" role="presentation" onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}>
+		<span class="fp-title">{title}</span>
+		<button class="fp-close" type="button" aria-label={closeLabel} onclick={onclose}>
+			<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+				<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+			</svg>
+		</button>
+	</div>
+	<div class="fp-body">{@render children()}</div>
+</div>
+
+<style>
+	.fp {
+		position: fixed;
+		z-index: 60;
+		max-width: calc(100vw - 16px);
+		max-height: calc(100vh - 16px);
+		display: flex;
+		flex-direction: column;
+		background: var(--dt-surface, #fff);
+		color: var(--dt-text, #111);
+		border: 1px solid var(--dt-border, #e2e2e2);
+		border-radius: var(--dt-radius, 8px);
+		box-shadow: var(--dt-shadow, 0 16px 48px rgba(0, 0, 0, 0.18));
+		font-family: var(--dt-sans, system-ui, sans-serif);
+		outline: none;
+	}
+	.fp-head {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 8px 8px 14px;
+		border-bottom: 1px solid var(--dt-border, #e2e2e2);
+		cursor: grab;
+		user-select: none;
+		touch-action: none;
+	}
+	.fp-head:active {
+		cursor: grabbing;
+	}
+	.fp-title {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 600;
+	}
+	.fp-close {
+		display: inline-grid;
+		place-items: center;
+		width: 32px;
+		height: 32px;
+		border: 0;
+		border-radius: 6px;
+		background: transparent;
+		color: var(--dt-text-2, #555);
+		cursor: pointer;
+	}
+	.fp-close:hover {
+		background: var(--dt-hover, rgba(0, 0, 0, 0.06));
+		color: var(--dt-text, #111);
+	}
+	.fp-body {
+		/* A flex child defaults to min-height:auto and never shrinks below its
+		   content — so a tall form ran past the panel's max-height, into the
+		   part of a fixed element nothing can scroll to. This is what lets the
+		   body scroll instead. */
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow: auto;
+		overscroll-behavior: contain;
+	}
+	:global(.fp-sheet-lock) {
+		overflow: hidden !important;
+	}
+	@media (max-width: 640px) {
+		.fp {
+			left: 0 !important;
+			right: 0;
+			top: auto !important;
+			bottom: 0;
+			width: auto !important;
+			max-width: none;
+			max-height: 85vh;
+			border-radius: var(--dt-radius, 12px) var(--dt-radius, 12px) 0 0;
+		}
+		.fp-head {
+			cursor: default;
+		}
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type Anchor = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+type $$ComponentProps = {
+    title?: string;
+    /** What to open beside: the clicked block's viewport rect, or a bare point. */
+    anchor?: Anchor;
+    width?: number;
+    /** The same `--dt-*` theme string a Calendar takes. */
+    theme?: string;
+    closeLabel?: string;
+    /** A pointerdown outside closes the panel and goes no further. */
+    closeOnOutside?: boolean;
+    onclose?: () => void;
+    children: Snippet;
+};
+declare const FloatingPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingPanel = ReturnType<typeof FloatingPanel>;
+export default FloatingPanel;

package/dist/primitives/NowIndicator.svelte

@@ -13,19 +13,8 @@
 -->
 <script lang="ts">import { getLabels } from "../core/locale.js";
 const L = $derived(getLabels());
-let {
-  mode = "line",
-  position = 0,
-  orientation = "vertical",
-  time = "",
-  seconds = "",
-  showLabel = true,
-  color,
-  children
-} = $props();
-const posStyle = $derived(
-  orientation === "vertical" ? `left: ${position}px` : `top: ${position}px`
-);
+let { mode = "line", position = 0, orientation = "vertical", time = "", seconds = "", showLabel = true, color, children } = $props();
+const posStyle = $derived(orientation === "vertical" ? `left: ${position}px` : `top: ${position}px`);
 const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 </script>
 

package/dist/primitives/TimeGutter.svelte

@@ -7,13 +7,7 @@
 -->
 <script lang="ts">import { HOURS } from "../core/time.js";
 import { fmtH } from "../core/locale.js";
-let {
-  orientation = "horizontal",
-  hourSize = 120,
-  halfHour = true,
-  hours = HOURS,
-  formatHour = fmtH
-} = $props();
+let { orientation = "horizontal", hourSize = 120, halfHour = true, hours = HOURS, formatHour = fmtH } = $props();
 </script>
 
 {#if orientation === 'horizontal'}

package/dist/primitives/index.d.ts

@@ -3,3 +3,4 @@ export { default as EventBlock } from './EventBlock.svelte';
 export { default as TimeGutter } from './TimeGutter.svelte';
 export { default as DayHeader } from './DayHeader.svelte';
 export { default as EmptySlot } from './EmptySlot.svelte';
+export { default as FloatingPanel } from './FloatingPanel.svelte';

package/dist/primitives/index.js

@@ -4,3 +4,4 @@ export { default as EventBlock } from './EventBlock.svelte';
 export { default as TimeGutter } from './TimeGutter.svelte';
 export { default as DayHeader } from './DayHeader.svelte';
 export { default as EmptySlot } from './EmptySlot.svelte';
+export { default as FloatingPanel } from './FloatingPanel.svelte';

package/dist/views/agenda/AgendaDay.svelte

@@ -1,4 +1,17 @@
-<script lang="ts">import { createClock } from "../../core/clock.svelte.js";
+<script lang="ts">/**
+* AgendaDay — single-day agenda view.
+*
+* Today ("The Queue"):
+*   3-column layout: Done | Now | Up next (hero).
+*   Answers: "What's coming up next?"
+*
+* Past day ("The Log"):
+*   Quiet chronological record of completed events.
+*
+* Future day ("The Plan"):
+*   Clean numbered schedule list.
+*/
+import { createClock } from "../../core/clock.svelte.js";
 import { sod, DAY_MS, dayNum, isAllDay, isMultiDay } from "../../core/time.js";
 import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
@@ -7,91 +20,101 @@ import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../sha
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 const emptySnippet = $derived(ctx.emptySnippet);
-let {
-  locale,
-  height,
-  events = [],
-  style = "",
-  focusDate,
-  oneventclick,
-  selectedEventId = null
-} = $props();
+let { locale, height, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
 const clock = createClock(ctx.timezone);
 const viewState = $derived(ctx.viewState);
 const equalDays = $derived(ctx.equalDays);
 const showDates = $derived(ctx.showDates);
+// Calendar's chrome date label renders exactly when showDates is on and
+// already names this day — drop the in-view header so the date never
+// appears twice. Chromeless (showDates=false) hosts keep it as the only
+// label for swipe navigation.
 const hideDayHead = $derived(showDates && !!viewState);
 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, touch only) ──────────
 let swipeStartX = 0;
 let swipeStartY = 0;
 let swipeActive = false;
 const SWIPE_THRESHOLD = 50;
 function onPointerDown(e) {
-  if (!isMobile || e.pointerType !== "touch") return;
-  swipeActive = true;
-  swipeStartX = e.clientX;
-  swipeStartY = e.clientY;
+	if (!isMobile || e.pointerType !== "touch") return;
+	swipeActive = true;
+	swipeStartX = e.clientX;
+	swipeStartY = e.clientY;
 }
 function onPointerUp(e) {
-  if (!swipeActive || e.pointerType !== "touch") return;
-  swipeActive = false;
-  const dx = e.clientX - swipeStartX;
-  const dy = e.clientY - swipeStartY;
-  if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
-    if (dx > 0) viewState?.prev();
-    else viewState?.next();
-  }
+	if (!swipeActive || e.pointerType !== "touch") return;
+	swipeActive = false;
+	const dx = e.clientX - swipeStartX;
+	const dy = e.clientY - swipeStartY;
+	if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
+		if (dx > 0) viewState?.prev();
+		else viewState?.next();
+	}
 }
 function onPointerCancel() {
-  swipeActive = false;
+	swipeActive = false;
 }
+// ── Format helpers (delegated to shared/format.ts) ──
 const fmt = (d) => fmtTime(d, locale);
 const eta = (ms) => timeUntilMs(ms, clock.tick, L);
 const prog = (ev) => progress(ev, clock.tick);
+// ── Event handlers ──────────────────────────────────
 function handleClick(ev) {
-  oneventclick?.(ev);
+	oneventclick?.(ev);
 }
+// ── Day derivations ─────────────────────────────────
 const dayMs = $derived(focusDate ? sod(focusDate.getTime()) : clock.today);
 const dayEnd = $derived(dayMs + DAY_MS);
 const isToday = $derived(dayMs === clock.today);
 const isTomorrow = $derived(dayMs === clock.today + DAY_MS);
 const isPastDay = $derived(equalDays ? false : dayMs < clock.today);
+/** All events for this day, sorted chronologically */
 const dayEvents = $derived.by(() => {
-  return events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime());
+	return events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime());
 });
+/** All-day / multi-day events shown in a separate strip */
 const allDayBanner = $derived(dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)));
+/** Timed events (non-all-day) for normal slot rendering */
 const timedDayEvents = $derived(dayEvents.filter((ev) => !isAllDay(ev) && !isMultiDay(ev)));
 const dayCat = $derived.by(() => {
-  const now = clock.tick;
-  const past = [];
-  const current = [];
-  const upcoming = [];
-  for (const ev of timedDayEvents) {
-    const s = ev.start.getTime();
-    const e = ev.end.getTime();
-    if (e <= now) past.push(ev);
-    else if (s <= now && e > now) current.push(ev);
-    else upcoming.push(ev);
-  }
-  return { past, current, upcomingSlots: groupIntoSlots(upcoming), totalUp: upcoming.length };
+	const now = clock.tick;
+	const past = [];
+	const current = [];
+	const upcoming = [];
+	for (const ev of timedDayEvents) {
+		const s = ev.start.getTime();
+		const e = ev.end.getTime();
+		if (e <= now) past.push(ev);
+		else if (s <= now && e > now) current.push(ev);
+		else upcoming.push(ev);
+	}
+	return {
+		past,
+		current,
+		upcomingSlots: groupIntoSlots(upcoming),
+		totalUp: upcoming.length
+	};
 });
+/** Flat list of ALL upcoming events for the "Up next" column. The first
+*  few get card treatment; the rest render as compact rows — busy days
+*  (a city-wide feed) would otherwise drown the queue. */
 const upcomingNext = $derived.by(() => {
-  const all = [];
-  for (const slot of dayCat.upcomingSlots) {
-    for (const ev of slot.events) all.push(ev);
-  }
-  return all;
+	const all = [];
+	for (const slot of dayCat.upcomingSlots) {
+		for (const ev of slot.events) all.push(ev);
+	}
+	return all;
 });
 const UPCOMING_CARDS = 4;
+/** Done list collapses past this many items (most recent stay visible). */
 const DONE_VISIBLE = 3;
 let showAllDone = $state(false);
-const visibleDone = $derived(
-  showAllDone ? dayCat.past : dayCat.past.slice(-DONE_VISIBLE)
-);
+const visibleDone = $derived(showAllDone ? dayCat.past : dayCat.past.slice(-DONE_VISIBLE));
 const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.length - DONE_VISIBLE));
 </script>