@joewinke/jatui 0.41.0 → 0.42.0

package/CLAUDE.md

@@ -46,13 +46,19 @@ Then import:
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
-| `CalendarPicker` | Month calendar with day selection | `selectedDate` (bindable), `availabilityCounts`, `onDateSelect` |
-| `DateRangePicker` | Start/end date range | `selectedRange` (bindable), `onRangeChange` |
-| `TimeSlotPicker` | Time slot grid selector | `slots: TimeSlot[]`, `selectedSlot` (bindable), `onSlotSelect` |
+| `CalendarPicker` | Booking month calendar on the shared grid: `role="grid"` with APG keys (arrows, Home/End, PageUp/PageDown, Shift+Page = year), availability dots in status tokens (announced in each day's name), booking-window rules, static accent map. Six-week `getAvailability` range as before. | `onSelect`, `selectedDate` (bindable), `getAvailability`, `isDateEnabled`, `maxDaysInAdvance` (90), `minNoticeHours` (24), `weekdaysOnly` (true), `accentColor`, `weekStart?` (0 \| 'locale'), `locale?`, `showLegend?`, `size?` |
+| `DatePicker` | Date field replacing `<input type="date">`: trigger + `use:floating` popover grid, typed entry in the LOCALE's order (MM/DD/YYYY en-US, DD/MM/YYYY en-GB — commits on Enter/blur, reverts on Esc or unreadable input), Today, optional pending/Apply step. `name` posts the ISO value; `required` validates natively. | `value` (bindable `YYYY-MM-DD \| null`), `open` (bindable), `onChange(value, date)`, `label`, `name`, `min`/`max` (ISO or Date), `isDateEnabled`, `weekdaysOnly`, `weekStart` ('locale'), `locale`, `format`, `commit` ('instant' \| 'apply'), `typed`, `clearable`, `error`, `size` |
+| `DateRangePicker` | Two modes. `presets` (default, unchanged): the filter-bar dropdown with string presets + native From/To. `mode="calendar"`: two-month range calendar — preset sidebar (Today … Last year + All time), hover/keyboard preview band, typed Start/End, "N days selected", Apply/Cancel. Calendar mode still calls `onRangeChange(presetId \| 'custom', from, to)`. | `selectedRange`, `customFrom`/`customTo`, `onRangeChange`, `compact` · calendar: `mode`, `value` (bindable `{start,end}` ISO), `onChange(range, presetId)`, `presets: RangePreset[]`, `months` (1\|2), `commit` ('apply'), `min`/`max`, `isDateEnabled`, `weekStart`, `nameStart`/`nameEnd` |
+| `TimeSlotPicker` | Slots grouped morning/afternoon/evening as one `role="radiogroup"` (`role="radio"` + `aria-checked`, full spoken date+time): roving arrows skip unavailable slots, Up/Down jump a visual row, Home/End, Space/Enter choose. Times and grouping follow `timeZone`'s wall clock. | `slots: TimeSlot[]`, `onSelect`, `selectedSlot`, `loading`, `accentColor`, `hourCycle?` ('h12' \| 'h23'), `timeZone?` (IANA), `locale?`, `selectOnFocus?`, `timezone?` (snippet row above the slots) |
+| `BookingScheduler` | Calendly-shaped composition over `CalendarPicker` + `TimeSlotPicker`: details pane (host, duration, location, zone), time-zone select + 12h/24h toggle, slot list, Confirm. Container-query layout (3 panes → 2 → 1). Host supplies data; nothing is booked here. | `getSlots(date, timeZone)` (sync/async, stale responses dropped), `getAvailability?`, `selectedDate`/`selectedSlot`/`timeZone`/`hourCycle` (bindable), `title`, `durationMinutes`, `hostName`, `location`, `description`, `details?` (snippet), `onConfirm(slot, {timeZone})`, `confirming` |
+| `EventCalendar` | Month / week / day / agenda event calendar, engine upstreamed from MOS `CalendarGrid`: one lane allocator per month row (`packWeek`/`computeVisibility`, measured lane capacity), "+N more" expands the week IN PLACE, week/day time grid with side-by-side overlap layout (`layoutDay`) + all-day bar row + now-line, agenda list, month-switcher pill (the shared month panel), details popover snippet, HTML5 drag-to-move, drag- or Shift+arrow range select. Event colours from `--jatui-event-N{,-bg,-fg}`. Generic over your event type. | `events: CalendarEventItem[]` (`{id,title,start,end?,allDay?,color?: 1-6 \| semantic,…}`), `view`/`date` (bindable), `views`, `weekStart`, `locale`, `hourCycle`, `dayStartHour`/`dayEndHour`, `hourHeight`, `height`, `eventDetails?`/`eventContent?`/`toolbarEnd?` (snippets), `moreAction`, `onEventClick`, `onDayClick`, `onCreate(date, hour?)`, `onEventMove(ev, {date, hour?, allDay})`, `onRangeSelect`, `onRangeChange(range, view)` |
+| `CalendarMonthGrid` | The shared month panel every picker uses — exported for custom surfaces. `<table role="grid">`, roving tabindex, range band that bridges cell gaps and rounds at week edges, disabled days stay focusable (`aria-disabled`), `day` snippet + `describeDay` for extra per-day content/name. Pair with `createCalendarGrid()`. | `month`, `focusedDate`, `onFocusDate`, `onSelect`, `selected?`, `range?`, `isDisabled?`, `min`/`max`, `weekStart`, `locale`, `showOutsideDays`, `fixedWeeks`, `size`, `onHover?`, `day?`, `describeDay?` |
 | `AvailabilityModal` | Date override editor (modal) | `date`, `overrides`, `onSave`, `onClose` |
 | `BookingForm` | Guest info form for booking | `onSubmit`, `submitting`, `requirePhone`, `accentColor`, `showAttendeeOption` |
 | `CountdownTimer` | Countdown to target date | `targetDate: Date`, `label` |
 
+**Calendar core (`jatui/calendar`, also on the root).** Plain `Date` + `Intl`, no date library. `createCalendarGrid({ initial?, min?, max?, months? })` (getters) → reactive `viewMonth`, `panels`, `focusedDate`, `canPrev`/`canNext`, `focus(date)` (panels follow), `shift(n)`, `reset(date)`. Pure helpers: `buildMonthMatrix(month, weekStart, fixedWeeks?)`, `nextFocusDate(date, key, {weekStart, min, max, rtl, shiftKey})` (the APG key map), `weekStartForLocale` (`Intl.Locale#getWeekInfo` + CLDR fallback), `parseTypedDate`/`formatTypedDate`/`datePlaceholder` (locale field order), `toIsoDate`/`parseIsoDate` (local days, never UTC-shifted), ranges (`pickRangeDate`, `rangeCellState`, `rangeDayCount`, `formatRangeLabel`), presets (`defaultRangePresets()`, `RangePreset = {id, label, range: IsoDateRange \| (now) => IsoDateRange}`, `matchPreset`), time slots (`formatSlotTime`, `groupSlotsByDayPart`, `nextSlotIndex`, `localeHourCycle`, `commonTimeZones`, `timeZoneOffsetLabel`), and the MOS event engine with its tests (`packWeek`, `computeVisibility`, `layoutDay`, `eventInterval` — generic over any `PackableEvent {id, title, start, end?, allDay?}`, so MOS's `CalendarEvent` fits as-is). Demos: `/components/date-picker`, `date-range-picker`, `calendar-picker`, `time-slot-picker`, `booking-scheduler`, `event-calendar`, `calendar-month-grid`.
+
 ### Display & Feedback
 
 | Component | Purpose | Key Props |

package/dist/components/AnimatedNumber.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { Tween } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
 	import { getMotionContext, motionDuration } from '../motion/level';
 
@@ -21,13 +20,32 @@
 
 	// ── Tween mode ─────────────────────────────────────────────────────────
 	let tweenEl: HTMLSpanElement | undefined = $state();
-	const tween = new Tween(untrack(() => value), { easing: cubicOut, duration: 0 });
+	// A hand-rolled rAF tween, NOT svelte/motion's Tween: importing svelte/motion
+	// creates a prefers-reduced-motion MediaQuery at MODULE load, which throws
+	// 'window.matchMedia is not a function' in any jsdom test that merely
+	// imports 'jatui' (jatui-oozkb). Reduced motion comes from motionDuration,
+	// which is 0 under prefers-reduced-motion.
+	let tweenCurrent = $state(untrack(() => value));
 	$effect(() => {
 		if (mode !== 'tween') return;
 		const target = value;
 		// Level-aware (data-motion) and instant under prefers-reduced-motion.
 		const ms = motionDuration(duration ?? 'move', getMotionContext(tweenEl ?? null));
-		void tween.set(target, { duration: ms });
+		const from = untrack(() => tweenCurrent);
+		if (ms <= 0 || from === target || typeof requestAnimationFrame !== 'function') {
+			tweenCurrent = target;
+			return;
+		}
+		let frame = 0;
+		let start: number | null = null;
+		const step = (now: number) => {
+			start ??= now;
+			const t = Math.min(1, (now - start) / ms);
+			tweenCurrent = from + (target - from) * cubicOut(t);
+			if (t < 1) frame = requestAnimationFrame(step);
+		};
+		frame = requestAnimationFrame(step);
+		return () => cancelAnimationFrame(frame);
 	});
 	/** Decimals to show mid-tween: the target's own, unless `format` decides. */
 	const tweenDecimals = $derived.by(() => {
@@ -36,7 +54,7 @@
 		return s.includes('.') && !s.includes('e') ? s.split('.')[1].length : 0;
 	});
 	const tweenText = $derived.by(() => {
-		const v = tween.current;
+		const v = tweenCurrent;
 		const shown = tweenDecimals == null ? v : Number(v.toFixed(tweenDecimals));
 		return formatNumber(shown, format);
 	});

package/dist/components/BookingScheduler.svelte

@@ -0,0 +1,412 @@
+<script lang="ts">
+	/**
+	 * BookingScheduler — the Calendly-shaped booking surface, composed from the
+	 * existing jatui pieces: a details pane, `CalendarPicker` (availability dots,
+	 * booking-window rules) and `TimeSlotPicker` (radiogroup keys, 12/24h, time
+	 * zone), with a time-zone select and a 12h/24h toggle between them.
+	 *
+	 * The host owns the data: `getSlots(date, timeZone)` returns the slots for a
+	 * day (sync or async; stale responses are dropped), `getAvailability` feeds
+	 * the dots. Nothing is booked here — `onConfirm(slot, { timeZone })` hands the
+	 * choice back, and `BookingForm` usually comes next.
+	 *
+	 * Layout follows its own width (container queries): three panes side by side
+	 * when wide, details above calendar + times when medium, one column on a phone.
+	 * Built from BoardUI's public meeting-scheduler behaviour (jatui-lfxyy); no
+	 * BoardUI source is copied and there are no built-in names or mock slots.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { AvailabilityCounts, TimeSlot } from '../types/booking';
+	import CalendarPicker from './CalendarPicker.svelte';
+	import TimeSlotPicker from './TimeSlotPicker.svelte';
+	import {
+		commonTimeZones,
+		formatSlotLabel,
+		localeHourCycle,
+		localTimeZone,
+		timeZoneCity,
+		timeZoneOffsetLabel,
+		type HourCycle
+	} from './calendar/timeSlots';
+	import type { Weekday } from './calendar/calendarGrid';
+
+	let {
+		getSlots,
+		getAvailability,
+		isDateEnabled,
+		maxDaysInAdvance = 90,
+		minNoticeHours = 24,
+		weekdaysOnly = true,
+		selectedDate = $bindable(null),
+		selectedSlot = $bindable(null),
+		timeZone = $bindable(localTimeZone()),
+		hourCycle = $bindable(),
+		timeZones,
+		locale = 'en-US',
+		weekStart = 0,
+		title,
+		durationMinutes,
+		hostName,
+		hostAvatarUrl,
+		description,
+		location,
+		details,
+		showDetails = true,
+		showTimeZone = true,
+		showHourCycleToggle = true,
+		onSelectDate,
+		onSelectSlot,
+		onConfirm,
+		confirmLabel = 'Confirm',
+		confirming = false,
+		accentColor = 'primary',
+		class: className = ''
+	}: {
+		/** Slots for one day, in `timeZone`. Sync or async; a newer request wins. */
+		getSlots: (date: Date, timeZone: string) => TimeSlot[] | Promise<TimeSlot[]>;
+		getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
+		isDateEnabled?: (date: Date) => boolean;
+		maxDaysInAdvance?: number;
+		minNoticeHours?: number;
+		weekdaysOnly?: boolean;
+		selectedDate?: Date | null;
+		selectedSlot?: TimeSlot | null;
+		/** IANA zone the slots are shown in (bindable). Defaults to the viewer's zone. */
+		timeZone?: string;
+		/** 'h12' | 'h23' (bindable). Defaults to the locale's convention. */
+		hourCycle?: HourCycle;
+		/** Zones offered in the picker. Defaults to the viewer's zone + common ones. */
+		timeZones?: string[];
+		locale?: string;
+		weekStart?: Weekday | 'locale';
+		/** Meeting name, e.g. "Intro call". */
+		title?: string;
+		durationMinutes?: number;
+		hostName?: string;
+		hostAvatarUrl?: string;
+		description?: string;
+		/** "Video call", "Phone", an address… */
+		location?: string;
+		/** Replaces the built-in details pane. */
+		details?: Snippet;
+		showDetails?: boolean;
+		showTimeZone?: boolean;
+		showHourCycleToggle?: boolean;
+		onSelectDate?: (date: Date) => void;
+		onSelectSlot?: (slot: TimeSlot) => void;
+		/** Shows a Confirm button once a slot is chosen. */
+		onConfirm?: (slot: TimeSlot, ctx: { timeZone: string }) => void;
+		confirmLabel?: string;
+		/** Busy state for the Confirm button. */
+		confirming?: boolean;
+		accentColor?: string;
+		class?: string;
+	} = $props();
+
+	const cycle = $derived<HourCycle>(hourCycle ?? localeHourCycle(locale));
+	const zones = $derived(timeZones ?? commonTimeZones(timeZone ? [timeZone] : []));
+	const uid = `jbs-${Math.random().toString(36).slice(2, 8)}`;
+
+	let slots = $state<TimeSlot[]>([]);
+	let loading = $state(false);
+	let requestId = 0;
+
+	async function loadSlots(date: Date, zone: string) {
+		const id = ++requestId;
+		loading = true;
+		try {
+			const result = await getSlots(date, zone);
+			if (id !== requestId) return;
+			slots = result;
+			// Drop a selection the new list no longer offers.
+			if (selectedSlot && !result.some((s) => s.available && s.start.getTime() === selectedSlot!.start.getTime())) {
+				selectedSlot = null;
+			}
+		} catch {
+			if (id === requestId) slots = [];
+		} finally {
+			if (id === requestId) loading = false;
+		}
+	}
+
+	$effect(() => {
+		if (selectedDate) void loadSlots(selectedDate, timeZone);
+	});
+
+	function handleDate(date: Date) {
+		selectedDate = date;
+		selectedSlot = null;
+		onSelectDate?.(date);
+	}
+
+	function handleSlot(slot: TimeSlot) {
+		selectedSlot = slot;
+		onSelectSlot?.(slot);
+	}
+
+	const dayHeading = $derived(
+		selectedDate
+			? new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric' }).format(selectedDate)
+			: ''
+	);
+	const durationLabel = $derived.by(() => {
+		if (!durationMinutes) return '';
+		const h = Math.floor(durationMinutes / 60);
+		const m = durationMinutes % 60;
+		return [h ? `${h} hr` : '', m ? `${m} min` : ''].filter(Boolean).join(' ');
+	});
+	const initials = $derived(
+		(hostName ?? '')
+			.split(/\s+/)
+			.filter(Boolean)
+			.slice(0, 2)
+			.map((w) => w[0]?.toUpperCase())
+			.join('')
+	);
+</script>
+
+<div class="jatui-booking {className}" class:has-details={showDetails && (details || title || hostName)}>
+	{#if showDetails && (details || title || hostName || description)}
+		<section class="jatui-booking__details" aria-label="Meeting details">
+			{#if details}
+				{@render details()}
+			{:else}
+				{#if hostName}
+					<div class="jatui-booking__host">
+						{#if hostAvatarUrl}
+							<img src={hostAvatarUrl} alt="" class="jatui-booking__avatar" />
+						{:else}
+							<span class="jatui-booking__avatar jatui-booking__avatar--initials" aria-hidden="true">{initials}</span>
+						{/if}
+						<span class="jatui-booking__host-name">{hostName}</span>
+					</div>
+				{/if}
+				{#if title}<h2 class="jatui-booking__title">{title}</h2>{/if}
+				<ul class="jatui-booking__meta">
+					{#if durationLabel}
+						<li>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path stroke-linecap="round" d="M12 7v5l3 2" /></svg>
+							{durationLabel}
+						</li>
+					{/if}
+					{#if location}
+						<li>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21s-7-6.2-7-11.5A7 7 0 0119 9.5C19 14.8 12 21 12 21z" /><circle cx="12" cy="9.5" r="2.5" /></svg>
+							{location}
+						</li>
+					{/if}
+					{#if showTimeZone}
+						<li>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" /></svg>
+							{timeZoneCity(timeZone)} ({timeZoneOffsetLabel(timeZone)})
+						</li>
+					{/if}
+				</ul>
+				{#if description}<p class="jatui-booking__desc">{description}</p>{/if}
+			{/if}
+		</section>
+	{/if}
+
+	<section class="jatui-booking__calendar" aria-label="Choose a day">
+		<CalendarPicker
+			onSelect={handleDate}
+			bind:selectedDate
+			{getAvailability}
+			{isDateEnabled}
+			{maxDaysInAdvance}
+			{minNoticeHours}
+			{weekdaysOnly}
+			{accentColor}
+			{locale}
+			{weekStart}
+			size="sm"
+		/>
+	</section>
+
+	<section class="jatui-booking__times" aria-labelledby="{uid}-times">
+		<h3 id="{uid}-times" class="jatui-booking__times-heading">
+			{dayHeading || 'Pick a day'}
+		</h3>
+		{#if showTimeZone || showHourCycleToggle}
+			<div class="jatui-booking__tz">
+				{#if showTimeZone}
+					<label class="jatui-booking__tz-label" for="{uid}-tz">Time zone</label>
+					<select id="{uid}-tz" class="select select-sm jatui-booking__tz-select" bind:value={timeZone}>
+						{#each zones as z (z)}
+							<option value={z}>{timeZoneCity(z)} ({timeZoneOffsetLabel(z)})</option>
+						{/each}
+					</select>
+				{/if}
+				{#if showHourCycleToggle}
+					<div class="join" role="group" aria-label="Clock format">
+						<button
+							type="button"
+							class="join-item btn btn-xs {cycle === 'h12' ? 'btn-active' : 'btn-ghost'}"
+							aria-pressed={cycle === 'h12'}
+							onclick={() => (hourCycle = 'h12')}>12h</button
+						>
+						<button
+							type="button"
+							class="join-item btn btn-xs {cycle === 'h23' ? 'btn-active' : 'btn-ghost'}"
+							aria-pressed={cycle === 'h23'}
+							onclick={() => (hourCycle = 'h23')}>24h</button
+						>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if selectedDate}
+			<TimeSlotPicker
+				{slots}
+				{loading}
+				onSelect={handleSlot}
+				{selectedSlot}
+				{accentColor}
+				hourCycle={cycle}
+				{timeZone}
+				{locale}
+			/>
+		{:else}
+			<p class="jatui-booking__hint">Available times appear here once you pick a day.</p>
+		{/if}
+
+		{#if onConfirm && selectedSlot}
+			<div class="jatui-booking__confirm">
+				<p class="jatui-booking__summary" aria-live="polite">
+					{formatSlotLabel(selectedSlot.start, { hourCycle: cycle, timeZone, locale })}
+				</p>
+				<button
+					type="button"
+					class="btn btn-primary btn-sm"
+					disabled={confirming}
+					aria-busy={confirming}
+					onclick={() => selectedSlot && onConfirm?.(selectedSlot, { timeZone })}
+				>
+					{#if confirming}<span class="loading loading-spinner loading-xs" aria-hidden="true"></span>{/if}
+					{confirmLabel}
+				</button>
+			</div>
+		{/if}
+	</section>
+</div>
+
+<style>
+	.jatui-booking {
+		container-type: inline-size;
+		display: grid;
+		gap: 1.5rem;
+		grid-template-columns: minmax(0, 1fr);
+	}
+	@container (min-width: 40rem) {
+		.jatui-booking {
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		}
+		.jatui-booking__details {
+			grid-column: 1 / -1;
+		}
+	}
+	@container (min-width: 60rem) {
+		.jatui-booking.has-details {
+			grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr);
+		}
+		.jatui-booking.has-details .jatui-booking__details {
+			grid-column: auto;
+			padding-inline-end: 1.5rem;
+			border-inline-end: 1px solid var(--jatui-separator, var(--color-base-300));
+		}
+	}
+	.jatui-booking__host {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-block-end: 0.75rem;
+	}
+	.jatui-booking__avatar {
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 9999px;
+		object-fit: cover;
+	}
+	.jatui-booking__avatar--initials {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		background: var(--color-base-200);
+		color: color-mix(in oklab, var(--color-base-content) 75%, transparent);
+	}
+	.jatui-booking__host-name {
+		font-size: 0.875rem;
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+	}
+	.jatui-booking__title {
+		margin: 0 0 0.75rem;
+		font-size: 1.25rem;
+		font-weight: 700;
+		line-height: 1.25;
+	}
+	.jatui-booking__meta {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: 0.875rem;
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+	}
+	.jatui-booking__meta li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.jatui-booking__desc {
+		margin: 1rem 0 0;
+		font-size: 0.875rem;
+		line-height: 1.55;
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+	}
+	.jatui-booking__times-heading {
+		margin: 0 0 0.75rem;
+		font-size: 1rem;
+		font-weight: 600;
+	}
+	.jatui-booking__tz {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		margin-block-end: 1rem;
+	}
+	.jatui-booking__tz-label {
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-booking__tz-select {
+		flex: 1;
+		min-width: 10rem;
+	}
+	.jatui-booking__hint {
+		margin: 2rem 0;
+		font-size: 0.875rem;
+		text-align: center;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+	}
+	.jatui-booking__confirm {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-block-start: 1.25rem;
+		padding-block-start: 1rem;
+		border-block-start: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-booking__summary {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+</style>

package/dist/components/BookingScheduler.svelte.d.ts

@@ -0,0 +1,66 @@
+/**
+     * BookingScheduler — the Calendly-shaped booking surface, composed from the
+     * existing jatui pieces: a details pane, `CalendarPicker` (availability dots,
+     * booking-window rules) and `TimeSlotPicker` (radiogroup keys, 12/24h, time
+     * zone), with a time-zone select and a 12h/24h toggle between them.
+     *
+     * The host owns the data: `getSlots(date, timeZone)` returns the slots for a
+     * day (sync or async; stale responses are dropped), `getAvailability` feeds
+     * the dots. Nothing is booked here — `onConfirm(slot, { timeZone })` hands the
+     * choice back, and `BookingForm` usually comes next.
+     *
+     * Layout follows its own width (container queries): three panes side by side
+     * when wide, details above calendar + times when medium, one column on a phone.
+     * Built from BoardUI's public meeting-scheduler behaviour (jatui-lfxyy); no
+     * BoardUI source is copied and there are no built-in names or mock slots.
+     */
+import type { Snippet } from 'svelte';
+import type { AvailabilityCounts, TimeSlot } from '../types/booking';
+import { type HourCycle } from './calendar/timeSlots';
+import type { Weekday } from './calendar/calendarGrid';
+type $$ComponentProps = {
+    /** Slots for one day, in `timeZone`. Sync or async; a newer request wins. */
+    getSlots: (date: Date, timeZone: string) => TimeSlot[] | Promise<TimeSlot[]>;
+    getAvailability?: (startDate: Date, endDate: Date) => Promise<AvailabilityCounts>;
+    isDateEnabled?: (date: Date) => boolean;
+    maxDaysInAdvance?: number;
+    minNoticeHours?: number;
+    weekdaysOnly?: boolean;
+    selectedDate?: Date | null;
+    selectedSlot?: TimeSlot | null;
+    /** IANA zone the slots are shown in (bindable). Defaults to the viewer's zone. */
+    timeZone?: string;
+    /** 'h12' | 'h23' (bindable). Defaults to the locale's convention. */
+    hourCycle?: HourCycle;
+    /** Zones offered in the picker. Defaults to the viewer's zone + common ones. */
+    timeZones?: string[];
+    locale?: string;
+    weekStart?: Weekday | 'locale';
+    /** Meeting name, e.g. "Intro call". */
+    title?: string;
+    durationMinutes?: number;
+    hostName?: string;
+    hostAvatarUrl?: string;
+    description?: string;
+    /** "Video call", "Phone", an address… */
+    location?: string;
+    /** Replaces the built-in details pane. */
+    details?: Snippet;
+    showDetails?: boolean;
+    showTimeZone?: boolean;
+    showHourCycleToggle?: boolean;
+    onSelectDate?: (date: Date) => void;
+    onSelectSlot?: (slot: TimeSlot) => void;
+    /** Shows a Confirm button once a slot is chosen. */
+    onConfirm?: (slot: TimeSlot, ctx: {
+        timeZone: string;
+    }) => void;
+    confirmLabel?: string;
+    /** Busy state for the Confirm button. */
+    confirming?: boolean;
+    accentColor?: string;
+    class?: string;
+};
+declare const BookingScheduler: import("svelte").Component<$$ComponentProps, {}, "hourCycle" | "timeZone" | "selectedSlot" | "selectedDate">;
+type BookingScheduler = ReturnType<typeof BookingScheduler>;
+export default BookingScheduler;