@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/composite/Itinerary.svelte

@@ -0,0 +1,758 @@
+<!--
+  widgets/composite/Itinerary.svelte — a day-by-day trip plan you can tick off
+  and add to (design doc 2026-10-09 §3.5). The model fills plain data (route,
+  budget, days of stops, legs, packing); the widget does the design: a route
+  strip that fits the width (a dot rail up to 4 cities, 7 from 480 px, else a
+  wrapping inline route), one spend line with one bar, the days as rows of one
+  "Days" section with a time rail whose markers tick stops off, then
+  "Getting around" (only when it adds refs, costs or off-route legs) and
+  packing, paired by the section rule.
+
+  Invariants:
+  - `days` is the one bound field (bind contract `days` / `ondayschange`).
+    Ticking or adding a stop builds a NEW days array, assigns the $bindable
+    and calls ondayschange; nothing mutates the prop in place. The open day
+    (`open`, a Svelte-side $bindable) is held as an Edit (data-kit/edit.ts),
+    so a host re-sending the spec on a days change does not close it.
+  - Every read and edit of a day's stops goes through stopsOf/stopRec, so a
+    bare-string stop or a comma-string `stops` renders AND survives a tick.
+  - Rows key by `${id ?? ''}:${index}`, never by a model string; a stop with
+    no title (mid-stream, junk) is skipped but keeps its index for edits.
+  - Nothing parses a date or time for display. `when` goes through dateLabel,
+    `time` renders as written (a bare hour "9" becomes "9:00"): in the time
+    column only when every time that day is H:MM, else at the start of the
+    meta line.
+  - A stop photo keeps its 16:9 frame only while it loads or has loaded; a
+    refused or failed image drops the row (the kind icon is on the marker).
+  - Days is framed as a section only beside Getting around or packing.
+  - The route strip is the static fallback the route globe (GL-2) replaces;
+    `geo` is accepted and unused until then.
+-->
+<script module lang="ts">
+	import type { StopKind, LegKind } from '../data-kit/icons.js';
+	import { safeArray } from '../../utils/safe-props.js';
+
+	export interface ItineraryStop {
+		id?: string;
+		time?: string;
+		title: string;
+		kind?: StopKind;
+		place?: string;
+		cost?: number;
+		minutes?: number;
+		must?: boolean;
+		done?: boolean;
+		image?: string;
+		geo?: [number, number];
+	}
+	export interface ItineraryDay {
+		id?: string;
+		label?: string;
+		when?: string;
+		theme?: string;
+		stay?: string;
+		stops?: ItineraryStop[];
+	}
+	export interface ItineraryLeg {
+		id?: string;
+		from: string;
+		to: string;
+		kind?: LegKind;
+		ref?: string;
+		minutes?: number;
+		cost?: number;
+	}
+	export interface PackingGroup {
+		id?: string;
+		group: string;
+		items: string[];
+	}
+
+	const HHMM = /^(\d{1,2}):(\d{2})$/;
+
+	/** Minutes past midnight for an `HH:MM` time, else undefined ("Morning", "8 AM"). */
+	export function clockMinutes(t: unknown): number | undefined {
+		const m = typeof t === 'string' ? HHMM.exec(t.trim()) : null;
+		return m ? Number(m[1]) * 60 + Number(m[2]) : undefined;
+	}
+
+	/** A bare hour ("9") reads as a count; give it a clock ("9:00"). Anything else as written. */
+	export function hourTime(t: string): string {
+		return /^\d{1,2}$/.test(t) && Number(t) <= 23 ? `${Number(t)}:00` : t;
+	}
+
+	/** Insert before the first stop timed later than this one; untimed on either side appends. */
+	export function insertByTime<T>(stops: readonly T[], stop: ItineraryStop): (T | ItineraryStop)[] {
+		const t = clockMinutes(stop.time);
+		const at = t === undefined ? -1 : stops.findIndex((s) => (clockMinutes(stopRec(s).time) ?? -1) > t);
+		return at < 0 ? [...stops, stop] : [...stops.slice(0, at), stop, ...stops.slice(at)];
+	}
+
+	/** "1h 30m", "45m", "2h"; nothing for a missing or non-positive value. */
+	export function duration(minutes: number | undefined): string {
+		if (minutes === undefined || minutes <= 0) return '';
+		const h = Math.floor(minutes / 60);
+		const m = Math.round(minutes % 60);
+		return h && m ? `${h}h ${m}m` : h ? `${h}h` : `${m}m`;
+	}
+
+	/** Planned spend against budget: warn past 90%, bad over; neutral without a budget. */
+	export function budgetStatus(planned: number, budget: number | undefined): 'good' | 'warn' | 'bad' | 'neutral' {
+		if (!budget || budget <= 0) return 'neutral';
+		const r = planned / budget;
+		return r > 1 ? 'bad' : r > 0.9 ? 'warn' : 'good';
+	}
+
+	function rec(v: unknown): Record<string, unknown> {
+		return v !== null && typeof v === 'object' && !Array.isArray(v) ? (v as Record<string, unknown>) : {};
+	}
+
+	/** A stop written as a bare string is a stop with that title. */
+	function stopRec(v: unknown): Record<string, unknown> {
+		return typeof v === 'string' ? { title: v } : rec(v);
+	}
+
+	/** A day's stops; the model habit of one comma string splits like packing items. */
+	function stopsOf(day: unknown): unknown[] {
+		const stops = rec(day).stops;
+		return typeof stops === 'string' ? stops.split(/\s*,\s*/).filter(Boolean) : safeArray<unknown>(stops);
+	}
+</script>
+
+<script lang="ts">
+	import { safeStyle, safeUrl } from '@ripple-ui/core';
+	import Check from '@lucide/svelte/icons/check';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Star from '@lucide/svelte/icons/star';
+	import Plus from '@lucide/svelte/icons/plus';
+	import BedDouble from '@lucide/svelte/icons/bed-double';
+	import RouteIcon from '@lucide/svelte/icons/route';
+	import Luggage from '@lucide/svelte/icons/luggage';
+	import MapPin from '@lucide/svelte/icons/map-pin';
+	import {
+		PhotoTile,
+		SectionCard,
+		SectionGrid,
+		StatusPill,
+		VerdictLine,
+		STOP_ICONS,
+		LEG_ICONS,
+		STATUS_CLASS,
+		MAX_HALF_ROWS,
+		kindIcon,
+		finite,
+		money,
+		plain,
+		sum,
+		dateLabel,
+		holds,
+		nextEdit,
+		rise
+	} from '../data-kit/index.js';
+	import type { Edit } from '../data-kit/edit.js';
+	import type { Verdict } from '../data-kit/types.js';
+
+	interface Props {
+		id?: string;
+		class?: string;
+		style?: string | Record<string, string>;
+		title?: string;
+		subtitle?: string;
+		verdict?: Verdict;
+		/** ISO 4217, default USD. */
+		currency?: string;
+		budget?: number;
+		/** City names in order; derived from `legs` when absent. */
+		route?: string[];
+		/** The trip. Two-way bindable: ticking or adding a stop emits a new array. */
+		days?: ItineraryDay[];
+		/** Index of the expanded day (-1 for none). Bindable. */
+		open?: number;
+		legs?: ItineraryLeg[];
+		packing?: PackingGroup[];
+		ondayschange?: (days: ItineraryDay[]) => void;
+	}
+
+	let {
+		id,
+		class: className,
+		style,
+		title,
+		subtitle,
+		verdict,
+		currency = 'USD',
+		budget,
+		route,
+		days = $bindable(),
+		open = $bindable(0),
+		legs,
+		packing,
+		ondayschange
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	const rootStyle = $derived(
+		style && typeof style === 'object'
+			? safeStyle(Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';'))
+			: safeStyle(typeof style === 'string' ? style : '')
+	);
+
+	const heading = $derived(plain(title));
+	const sub = $derived(plain(subtitle));
+	const cash = (v: number) => money(v, currency, { whole: true });
+	const costLabel = (v: number | undefined) => (v === undefined ? '' : v === 0 ? 'Free' : cash(v));
+
+	let openEdit = $state.raw<Edit<number> | null>(null);
+	function setOpen(next: number) {
+		openEdit = nextEdit(openEdit, open, next);
+		open = next;
+	}
+	const dayList = $derived(safeArray<unknown>(days, { widget: 'itinerary', key: 'days' }));
+
+	const view = $derived(
+		dayList.map((raw, di) => {
+			const d = rec(raw);
+			const stops = stopsOf(raw).flatMap((rs, si) => {
+				const s = stopRec(rs);
+				const name = plain(s.title);
+				if (!name) return [];
+				const cost = finite(s.cost);
+				return [
+					{
+						key: `${s.id ?? ''}:${si}`,
+						i: si,
+						title: name,
+						time: hourTime(plain(s.time)),
+						kind: s.kind,
+						place: plain(s.place),
+						cost: cost !== undefined && cost >= 0 ? cost : undefined,
+						minutes: finite(s.minutes),
+						must: s.must === true,
+						done: s.done === true,
+						image: s.image
+					}
+				];
+			});
+			const name = plain(d.label) || `Day ${di + 1}`;
+			const times = stops.filter((s) => s.time);
+			const label = new RegExp(`^day\\s*${di + 1}$`, 'i').test(name) ? '' : name;
+			const when = dateLabel(d.when);
+			const theme = plain(d.theme);
+			const dayCost = sum(stops.map((s) => s.cost));
+			const costText = dayCost > 0 ? cash(dayCost) : '';
+			// No theme: the label or date moves up to line 2, since the done count already says how many stops.
+			const promote = !theme && stops.length > 0;
+			return {
+				key: `${d.id ?? ''}:${di}`,
+				name,
+				// The tile already says the number; a "Day N" label would repeat it.
+				eyebrow: promote ? '' : [label, when, costText].filter(Boolean).join(' · '),
+				headCost: promote ? costText : '',
+				headline: theme || (promote ? [label, when].filter(Boolean).join(' · ') || name : 'No stops yet'),
+				stay: plain(d.stay),
+				stops,
+				clock: times.length > 0 && times.every((s) => clockMinutes(s.time) !== undefined),
+				planned: dayCost,
+				done: stops.filter((s) => s.done).length
+			};
+		})
+	);
+
+	const single = $derived(view.length === 1);
+	const at = $derived.by(() => {
+		const n = Math.trunc(finite(holds(openEdit, open) ? openEdit.value : open) ?? 0);
+		if (n < 0) return -1;
+		return n < view.length ? n : Math.max(0, view.findIndex((d) => d.stops.length));
+	});
+	const anyDone = $derived(view.some((d) => d.done > 0));
+
+	const legList = $derived(
+		safeArray<unknown>(legs, { widget: 'itinerary', key: 'legs' })
+			.map((raw, i) => {
+				const l = rec(raw);
+				return {
+					key: `${l.id ?? ''}:${i}`,
+					from: plain(l.from),
+					to: plain(l.to),
+					kind: l.kind,
+					ref: plain(l.ref),
+					minutes: finite(l.minutes),
+					cost: finite(l.cost)
+				};
+			})
+			.filter((l) => l.from && l.to)
+	);
+
+	const packList = $derived(
+		safeArray<unknown>(packing, { widget: 'itinerary', key: 'packing' })
+			.map((raw, i) => {
+				const g = rec(raw);
+				// A model habit: items as one comma-separated string.
+				const items = typeof g.items === 'string' ? g.items.split(/\s*,\s*/) : safeArray<unknown>(g.items);
+				return { key: `${g.id ?? ''}:${i}`, group: plain(g.group), items: items.map(plain).filter(Boolean) };
+			})
+			.filter((g) => g.items.length)
+	);
+
+	const same = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();
+
+	/** Cities with the leg that leaves each one (matched by from/to names). */
+	const hops = $derived.by(() => {
+		let cities = safeArray<unknown>(route, { widget: 'itinerary', key: 'route' })
+			.filter((c) => typeof c === 'string')
+			.map(plain)
+			.filter(Boolean);
+		if (!cities.length && legList.length) cities = [legList[0].from, ...legList.map((l) => l.to)];
+		return cities.map((city, i) => {
+			const next = cities[i + 1];
+			const leg = next ? legList.find((l) => same(l.from, city) && same(l.to, next)) : undefined;
+			return { city, leg, last: i === cities.length - 1 };
+		});
+	});
+	// Each rail hop needs about 72 px narrow and 96 px wide; past that the route wraps inline.
+	const railFits = $derived(hops.length <= 4 ? 'all' : hops.length <= 7 ? 'wide' : 'none');
+	// Leg durations sit under the glyphs on the cell edges; city names then pad in to clear them.
+	const legTimes = $derived(hops.some((h) => duration(h.leg?.minutes)));
+
+	const cap = $derived.by(() => {
+		const b = finite(budget);
+		return b !== undefined && b > 0 ? b : undefined;
+	});
+	const legCost = $derived(sum(legList.map((l) => l.cost)));
+	const planned = $derived(sum(view.map((d) => d.planned)) + legCost);
+	const spent = $derived(sum(view.flatMap((d) => d.stops.filter((s) => s.done).map((s) => s.cost))));
+	const spendStatus = $derived(budgetStatus(planned, cap));
+	const scale = $derived(Math.max(cap ?? 0, planned, 1));
+	const pct = (v: number) => `${Math.min(Math.max((v / scale) * 100, 0), 100)}%`;
+	const spendWord = $derived(
+		spendStatus === 'bad' ? `Over by ${cash(planned - (cap ?? 0))}` : spendStatus === 'warn' ? 'Near budget' : 'Within budget'
+	);
+
+	/** The first stop not yet ticked, in trip order: what's next. */
+	const nextKey = $derived.by(() => {
+		for (const [di, d] of view.entries()) for (const s of d.stops) if (!s.done) return `${di}/${s.key}`;
+		return undefined;
+	});
+
+	// Getting around earns its section only with something the route strip cannot show.
+	const legsAddSomething = $derived(
+		legList.some((l) => l.ref || l.cost !== undefined || hops.length < 2 || !hops.some((h) => h.leg === l))
+	);
+	const extras = $derived([
+		...(legList.length && legsAddSomething ? [{ id: 'legs' as const, rows: legList.length }] : []),
+		...(packList.length ? [{ id: 'packing' as const, rows: packList.length }] : [])
+	]);
+	const half = (s: { rows: number }) => s.rows <= MAX_HALF_ROWS;
+
+	function commit(next: unknown[]) {
+		days = next as ItineraryDay[];
+		ondayschange?.(next as ItineraryDay[]);
+	}
+
+	function editStops(di: number, fn: (stops: unknown[]) => unknown[]) {
+		commit(dayList.map((raw, i) => (i === di ? { ...rec(raw), stops: fn(stopsOf(raw)) } : raw)));
+	}
+
+	function toggle(di: number, si: number) {
+		editStops(di, (stops) => stops.map((s, j) => (j === si ? { ...stopRec(s), done: stopRec(s).done !== true } : s)));
+	}
+
+	let adding = $state<number | null>(null);
+	let draft = $state<{ title: string; time: string; cost: number | null }>({ title: '', time: '', cost: null });
+
+	function startAdd(di: number) {
+		adding = di;
+		draft = { title: '', time: '', cost: null };
+	}
+
+	function addStop(di: number, e: SubmitEvent) {
+		e.preventDefault();
+		const name = draft.title.trim();
+		if (!name) return;
+		const cost = finite(draft.cost);
+		const stop: ItineraryStop = {
+			id: `added-${Date.now().toString(36)}`,
+			title: name,
+			kind: 'activity',
+			...(draft.time && { time: draft.time }),
+			...(cost !== undefined && cost >= 0 && { cost })
+		};
+		editStops(di, (stops) => insertByTime(stops, stop));
+		draft = { title: '', time: '', cost: null };
+	}
+
+	// A refused or failed photo drops its row: the kind icon is already on the rail marker.
+	let failed = $state<Record<string, true>>({});
+	const photo = (v: unknown) => {
+		const u = safeUrl(v, { kind: 'resource' });
+		return u && !failed[u] ? u : undefined;
+	};
+
+	const field =
+		'h-8 min-w-0 rounded-md border border-ripple-border bg-ripple-input px-2 text-callout text-ripple-input-foreground placeholder:text-ripple-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ripple-ring';
+	const focusRing = 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ripple-ring';
+</script>
+
+{#snippet dayHead(d: (typeof view)[number], di: number, isOpen: boolean)}
+	{#if !single}
+		<span
+			class="grid size-6 shrink-0 place-items-center rounded-md bg-ripple-muted text-headline tabular-nums @min-[480px]:size-7"
+			aria-hidden="true">{di + 1}</span
+		>
+	{/if}
+	<!-- min-h = the tile, so a one-line header centres on it and a wrapped one stays top-aligned -->
+	<span class="flex min-h-6 min-w-0 flex-1 flex-col justify-center gap-0.5 @min-[480px]:min-h-7">
+		{#if d.eyebrow}
+			<span class="text-footnote text-ripple-muted-foreground tabular-nums [overflow-wrap:anywhere]">{d.eyebrow}</span>
+		{/if}
+		<span class="text-body-emph text-pretty [overflow-wrap:anywhere]"
+			>{d.headline}{#if d.headCost}<span class="font-normal text-ripple-muted-foreground tabular-nums">{` · ${d.headCost}`}</span>{/if}</span
+		>
+	</span>
+	{#if d.stops.length}
+		<span
+			class={[
+				'inline-flex shrink-0 items-center gap-1 pt-0.5 text-footnote tabular-nums',
+				d.done === d.stops.length ? 'text-ripple-success-text' : 'text-ripple-muted-foreground'
+			]}
+		>
+			<Check size={12} strokeWidth={2} aria-hidden="true" />{d.done}/{d.stops.length}<span class="sr-only">{' done'}</span>
+		</span>
+	{/if}
+	{#if !single}
+		<ChevronDown
+			size={16}
+			strokeWidth={1.75}
+			aria-hidden="true"
+			class="mt-px shrink-0 text-ripple-muted-foreground transition-transform duration-150 motion-reduce:transition-none {isOpen ? 'rotate-180' : ''}"
+		/>
+	{/if}
+{/snippet}
+
+<div {id} class={['@container text-ripple-surface-foreground', className]} style={rootStyle} data-widget="itinerary">
+	<div class="flex flex-col gap-3">
+		{#if heading || sub}
+			<header class="flex min-w-0 flex-col gap-0.5">
+				{#if heading}<h2 class="text-title-3 font-semibold text-pretty">{heading}</h2>{/if}
+				{#if sub}<p class="text-callout text-pretty text-ripple-muted-foreground">{sub}</p>{/if}
+			</header>
+		{/if}
+
+		<VerdictLine {verdict} />
+
+		{#if hops.length > 1}
+			<nav aria-label="Route" class="min-w-0" data-slot="route">
+				{#if railFits !== 'none'}
+					<ol
+						class={['grid items-start', railFits === 'wide' && 'hidden @min-[480px]:grid']}
+						style:grid-template-columns="repeat({hops.length}, minmax(0, 1fr))"
+						data-route="rail"
+					>
+						{#each hops as h, i (i)}
+							{@const LegIcon = kindIcon(LEG_ICONS, h.leg?.kind, MapPin)}
+							<li class="relative flex min-w-0 flex-col items-center gap-1">
+								<span class="flex h-5 items-center" aria-hidden="true">
+									<span
+										class={[
+											'relative z-[1] size-2.5 rounded-full border-2 border-ripple-accent',
+											i === 0 || h.last ? 'bg-ripple-accent' : 'bg-ripple-surface'
+										]}
+									></span>
+								</span>
+								<span class={['px-0.5 text-center text-footnote font-medium text-balance break-normal', legTimes && '@min-[480px]:px-6']}>{h.city}</span>
+								{#if !h.last}
+									<span class="absolute top-0 left-1/2 flex h-5 w-full items-center justify-center" data-leg={h.leg?.kind ?? ''}>
+										<span
+											class={['absolute inset-x-2 top-1/2 border-t border-ripple-control-border', h.leg?.kind === 'flight' && 'border-dashed']}
+											aria-hidden="true"
+										></span>
+										{#if h.leg}
+											<span
+												class="relative grid size-5 place-items-center rounded-full border border-ripple-border bg-ripple-surface text-ripple-muted-foreground"
+											>
+												<LegIcon size={14} strokeWidth={1.75} aria-hidden="true" />
+											</span>
+											<span class="sr-only">{` then by ${h.leg.kind ?? 'road'}${h.leg.minutes ? `, ${duration(h.leg.minutes)}` : ''}`}</span>
+											{#if duration(h.leg.minutes)}
+												<span
+													class="absolute top-full mt-1 hidden text-caption-1 whitespace-nowrap text-ripple-muted-foreground tabular-nums @min-[480px]:block"
+													aria-hidden="true">{duration(h.leg.minutes)}</span
+												>
+											{/if}
+										{/if}
+									</span>
+								{/if}
+							</li>
+						{/each}
+					</ol>
+				{/if}
+				{#if railFits !== 'all'}
+					<ol
+						class={['flex flex-wrap items-center gap-x-1.5 gap-y-1 text-footnote', railFits === 'wide' && '@min-[480px]:hidden']}
+						data-route="inline"
+					>
+						{#each hops as h, i (i)}
+							{@const LegIcon = h.leg ? kindIcon(LEG_ICONS, h.leg.kind, MapPin) : ChevronRight}
+							<li class="inline-flex min-w-0 items-center gap-1.5">
+								<span
+									class={['font-medium [overflow-wrap:anywhere]', (i === 0 || h.last) && 'text-ripple-accent-text']}
+								>{h.city}</span>
+								{#if !h.last}
+									<span class="inline-flex text-ripple-muted-foreground" data-leg={h.leg?.kind ?? ''}>
+										<LegIcon size={12} strokeWidth={1.75} aria-hidden="true" />
+										{#if h.leg}<span class="sr-only">{` then by ${h.leg.kind ?? 'road'}${h.leg.minutes ? `, ${duration(h.leg.minutes)}` : ''}`}</span>{/if}
+									</span>
+								{/if}
+							</li>
+						{/each}
+					</ol>
+				{/if}
+			</nav>
+		{/if}
+
+		{#if planned > 0 || cap}
+			<div class="flex flex-col gap-1.5" data-slot="spend" data-status={spendStatus}>
+				<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3">
+					<div class="min-w-0">
+						<p class="text-headline tabular-nums">{cash(planned)}</p>
+						<p class="text-footnote text-ripple-muted-foreground tabular-nums">
+							{cap ? `planned of ${cash(cap)} budget` : 'planned'}
+						</p>
+					</div>
+					{#if cap}<StatusPill status={spendStatus} label={spendWord} />{/if}
+				</div>
+				{#if cap}
+					<div class="relative h-1.5 overflow-hidden rounded-full bg-ripple-track" aria-hidden="true">
+						<div class={['absolute inset-y-0 left-0 rounded-full', STATUS_CLASS[spendStatus].fill]} style:width={pct(planned)}></div>
+						{#if planned > cap}
+							<div class="absolute inset-y-0 w-0.5 -translate-x-1/2 bg-ripple-surface-foreground" style:left={pct(cap)}></div>
+						{/if}
+					</div>
+				{/if}
+				{#if spent > 0}
+					<p class="text-footnote text-ripple-muted-foreground tabular-nums">{cash(spent)} spent so far</p>
+				{/if}
+			</div>
+		{/if}
+
+		{#snippet daysBlock()}
+				<ol class="flex flex-col divide-y divide-ripple-border" aria-label="Days">
+					{#each view as d, di (d.key)}
+						{@const isOpen = single || at === di}
+						{@const panel = `${uid}-day-${di}`}
+						<li class="min-w-0 py-2 first:pt-0 last:pb-0" in:rise={{ index: di }} data-open={isOpen}>
+							<h3>
+								{#if single}
+									<span class="flex w-full items-start gap-2.5">{@render dayHead(d, di, true)}</span>
+								{:else}
+									<button
+										type="button"
+										class={[
+											'-mx-1.5 flex w-[calc(100%+0.75rem)] items-start gap-2.5 rounded-md px-1.5 py-1 text-left transition-colors duration-150 hover:bg-ripple-muted active:bg-ripple-muted motion-reduce:transition-none',
+											focusRing
+										]}
+										aria-expanded={isOpen}
+										aria-controls={panel}
+										onclick={() => setOpen(isOpen ? -1 : di)}
+									>
+										{@render dayHead(d, di, isOpen)}
+									</button>
+								{/if}
+							</h3>
+
+							{#if isOpen}
+								<div id={panel} class="pt-2.5">
+									{#if d.stops.length}
+										{#if !anyDone}
+											<p class="mb-2 text-footnote text-ripple-muted-foreground" data-slot="hint">Select a circle to tick a stop off.</p>
+										{/if}
+										<ol class="flex flex-col">
+											{#each d.stops as s, k (s.key)}
+												{@const KindIcon = kindIcon(STOP_ICONS, s.kind, MapPin)}
+												{@const isNext = nextKey === `${di}/${s.key}`}
+												{@const pic = photo(s.image)}
+												{@const segs = [
+													{ t: d.clock ? '' : s.time, star: false },
+													{ t: s.must ? 'Must see' : '', star: true },
+													{ t: s.place, star: false },
+													{ t: duration(s.minutes), star: false },
+													{ t: costLabel(s.cost), star: false }
+												].filter((x) => x.t)}
+												<li
+													class={['grid gap-x-2.5', d.clock ? 'grid-cols-[3rem_1.5rem_minmax(0,1fr)]' : 'grid-cols-[1.5rem_minmax(0,1fr)]']}
+													in:rise={{ index: k }}
+													data-done={s.done}
+													data-next={isNext || undefined}
+												>
+													{#if d.clock}
+														<span class="pt-1 text-right text-footnote whitespace-nowrap text-ripple-muted-foreground tabular-nums">{s.time}</span>
+													{/if}
+													<div class="relative flex justify-center">
+														{#if k < d.stops.length - 1}
+															<span
+																class={['absolute top-6 bottom-0 w-px', s.done ? 'bg-ripple-success' : 'bg-ripple-control-border']}
+																aria-hidden="true"
+															></span>
+														{/if}
+														<button
+															type="button"
+															role="checkbox"
+															aria-checked={s.done}
+															aria-label={s.time ? `${s.title}, ${s.time}` : s.title}
+															class={[
+																'group/mark relative grid size-6 shrink-0 place-items-center rounded-full border-[1.5px] transition-colors duration-150 motion-reduce:transition-none',
+																focusRing,
+																s.done
+																	? 'border-ripple-success bg-ripple-success text-ripple-success-foreground hover:opacity-85'
+																	: 'border-ripple-control-border bg-ripple-surface text-ripple-muted-foreground hover:border-ripple-accent focus-visible:border-ripple-accent active:bg-ripple-muted',
+																isNext && 'ring-2 ring-ripple-accent/50 ring-offset-1 ring-offset-ripple-surface'
+															]}
+															onclick={() => toggle(di, s.i)}
+														>
+															{#if s.done}
+																<Check size={14} strokeWidth={2.25} aria-hidden="true" />
+															{:else}
+																<KindIcon size={13} strokeWidth={1.75} aria-hidden="true" class="group-hover/mark:hidden group-focus-visible/mark:hidden" />
+																<Check
+																	size={14}
+																	strokeWidth={2.25}
+																	aria-hidden="true"
+																	class="hidden text-ripple-accent-text group-hover/mark:block group-focus-visible/mark:block"
+																/>
+															{/if}
+														</button>
+													</div>
+													<div class={['min-w-0', k < d.stops.length - 1 ? 'pb-3' : 'pb-1']}>
+														<p class="py-1 text-body-emph text-pretty [overflow-wrap:anywhere]">
+															<span class={[s.done && 'text-ripple-muted-foreground line-through']}>{s.title}</span>
+															{#if isNext}<span class="ml-1.5 text-caption-1 font-semibold whitespace-nowrap text-ripple-accent-text">Next</span>{/if}
+														</p>
+														{#if segs.length}
+															<p class="-mt-0.5 text-footnote text-ripple-muted-foreground tabular-nums [overflow-wrap:anywhere]">
+																{#each segs as x, j (j)}
+																	{#if j}<span aria-hidden="true">{' · '}</span>{/if}
+																	{#if x.star}
+																		<span class="whitespace-nowrap"
+																			><Star
+																				size={11}
+																				strokeWidth={2}
+																				fill="currentColor"
+																				aria-hidden="true"
+																				class="mr-0.5 inline-block align-[-1px] text-ripple-warning-text"
+																			/>{x.t}</span
+																		>
+																	{:else}
+																		<span>{x.t}</span>
+																	{/if}
+																{/each}
+															</p>
+														{/if}
+														{#if pic}
+															<PhotoTile src={safeUrl(s.image, { kind: 'resource' })} alt={s.title} ratio="16:9" icon={KindIcon} class="mt-2 w-full max-w-80" onerror={() => (failed[pic] = true)} />
+														{/if}
+													</div>
+												</li>
+											{/each}
+										</ol>
+									{:else}
+										<p class="pb-1 text-callout text-ripple-muted-foreground">Nothing planned. Add a stop or ask for a day plan.</p>
+									{/if}
+
+									{#if d.stay}
+										<p class="mt-1 flex items-start gap-2 border-t border-dashed border-ripple-border pt-2 text-callout">
+											<BedDouble size={14} strokeWidth={1.75} aria-hidden="true" class="mt-px shrink-0 text-ripple-muted-foreground" />
+											<span class="text-ripple-muted-foreground">Stay</span>
+											<span class="min-w-0 font-medium [overflow-wrap:anywhere]">{d.stay}</span>
+										</p>
+									{/if}
+
+									{#if adding === di}
+										<form
+											class="mt-2 grid grid-cols-2 gap-2 rounded-md bg-ripple-muted p-2 @min-[560px]:grid-cols-[minmax(0,1fr)_6.5rem_5.5rem_auto]"
+											onsubmit={(e) => addStop(di, e)}
+											aria-label="Add a stop to {d.name}"
+										>
+											<input class={[field, 'col-span-2 @min-[560px]:col-span-1']} bind:value={draft.title} required placeholder="What, e.g. Ramen lunch" aria-label="Stop" />
+											<input class={field} type="time" bind:value={draft.time} aria-label="Time" />
+											<input class={field} type="number" min="0" step="any" inputmode="decimal" bind:value={draft.cost} placeholder="Cost" aria-label="Cost in {currency}" />
+											<div class="col-span-2 flex gap-2 @min-[560px]:col-span-1">
+												<button type="submit" class={['h-8 flex-1 rounded-md bg-ripple-accent px-3 text-callout font-medium text-ripple-accent-foreground hover:opacity-90', focusRing]}>Add</button>
+												<button type="button" class={['h-8 rounded-md px-2 text-callout text-ripple-muted-foreground hover:text-ripple-surface-foreground', focusRing]} onclick={() => (adding = null)}>Done</button>
+											</div>
+										</form>
+									{:else}
+										<button
+											type="button"
+											class={['mt-1 -ml-1 inline-flex h-7 items-center gap-1.5 rounded-md px-1 text-callout text-ripple-accent-text hover:bg-ripple-muted', focusRing]}
+											onclick={() => startAdd(di)}
+										>
+											<Plus size={14} strokeWidth={1.75} aria-hidden="true" />Add a stop
+										</button>
+									{/if}
+								</div>
+							{/if}
+						</li>
+					{/each}
+				</ol>
+		{/snippet}
+
+		{#if view.length && extras.length}
+			<SectionCard title="Days">{@render daysBlock()}</SectionCard>
+		{:else if view.length}
+			<!-- The only section: no frame inside the card's own frame. -->
+			{@render daysBlock()}
+		{:else}
+			<SectionCard title="Days" empty="No stops yet. Ask for a day plan." />
+		{/if}
+
+		{#if extras.length}
+			<SectionGrid sections={extras} {half}>
+				{#snippet section(x)}
+					{#if x.id === 'legs'}
+						<SectionCard title="Getting around" icon={RouteIcon}>
+							{#snippet aside()}
+								{#if legCost > 0}<span class="text-footnote text-ripple-muted-foreground tabular-nums">{cash(legCost)}</span>{/if}
+							{/snippet}
+							<ul class="flex flex-col divide-y divide-ripple-border">
+								{#each legList as l, i (l.key)}
+									{@const LegIcon = kindIcon(LEG_ICONS, l.kind, MapPin)}
+									<li class="flex items-start gap-2.5 py-2 first:pt-0 last:pb-0" in:rise={{ index: i }}>
+										<span class="grid size-8 shrink-0 place-items-center rounded-md bg-ripple-muted text-ripple-muted-foreground">
+											<LegIcon size={16} strokeWidth={1.75} aria-hidden="true" />
+										</span>
+										<div class="min-w-0 flex-1">
+											<p class="text-body-emph text-pretty [overflow-wrap:anywhere]">{l.from} <span aria-hidden="true">→</span><span class="sr-only">to</span> {l.to}</p>
+											{#if l.ref || duration(l.minutes)}
+												<p class="line-clamp-2 text-footnote text-ripple-muted-foreground [overflow-wrap:anywhere]">{[l.ref, duration(l.minutes)].filter(Boolean).join(' · ')}</p>
+											{/if}
+										</div>
+										{#if l.cost !== undefined && l.cost >= 0}
+											<span class="shrink-0 text-callout tabular-nums">{costLabel(l.cost)}</span>
+										{/if}
+									</li>
+								{/each}
+							</ul>
+						</SectionCard>
+					{:else}
+						<SectionCard title="Packing" icon={Luggage}>
+							<div class="flex flex-col gap-2.5">
+								{#each packList as g, i (g.key)}
+									<div class={[!g.group && i > 0 && 'border-t border-ripple-border pt-2.5']} in:rise={{ index: i }}>
+										{#if g.group}<p class="mb-1 text-footnote font-medium text-ripple-muted-foreground">{g.group}</p>{/if}
+										<ul class="flex flex-wrap gap-1">
+											{#each g.items as item, j (j)}
+												<li class="rounded-md bg-ripple-muted px-1.5 py-0.5 text-callout [overflow-wrap:anywhere]">{item}</li>
+											{/each}
+										</ul>
+									</div>
+								{/each}
+							</div>
+						</SectionCard>
+					{/if}
+				{/snippet}
+			</SectionGrid>
+		{/if}
+	</div>
+</div>