@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/composite/OrderStatus.svelte.d.ts

@@ -0,0 +1,71 @@
+import { type DefaultStatus, type LatLng } from './order-status-data.js';
+import type { EventHandlerOrArray } from '@ripple-ui/core';
+type TilePreset = 'osm' | 'carto-voyager' | 'carto-light' | 'carto-dark' | 'osm-hot' | 'custom';
+interface Step {
+    id: string;
+    label: string;
+    description?: string;
+    completedAt?: string;
+    current?: boolean;
+    failed?: boolean;
+}
+interface Tracking {
+    carrier: string;
+    number: string;
+    url?: string;
+}
+interface Place {
+    name?: string;
+    address?: string;
+    lat?: number;
+    lng?: number;
+}
+interface Tracker {
+    lat: number;
+    lng: number;
+    heading?: number;
+    label?: string;
+    color?: string;
+}
+interface OrderEvent {
+    time: string;
+    label: string;
+    location?: string;
+    icon?: string;
+}
+interface Action {
+    id?: string;
+    label: string;
+    icon?: string;
+    variant?: 'default' | 'outline' | 'ghost';
+    actions?: EventHandlerOrArray;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    title?: string;
+    orderId: string;
+    status?: DefaultStatus;
+    steps?: Step[];
+    /** ID of the active step (when using custom `steps`). */
+    currentStep?: string;
+    eta?: string;
+    tracking?: Tracking;
+    origin?: Place;
+    destination?: Place;
+    tracker?: Tracker;
+    route?: LatLng[];
+    showMap?: boolean;
+    mapHeight?: string | number;
+    /** Tile preset; unset uses the host's map default (setMapDefaultTiles). */
+    mapTiles?: TilePreset;
+    /** Auto-pan the map to follow the tracker. Default false. */
+    followTracker?: boolean;
+    events?: OrderEvent[];
+    actions?: Action[];
+    onaction?: (id: string) => void;
+}
+declare const OrderStatus: import("svelte").Component<Props, {}, "">;
+type OrderStatus = ReturnType<typeof OrderStatus>;
+export default OrderStatus;

package/dist/widgets/composite/PipelineDashboard.svelte

@@ -0,0 +1,258 @@
+<!--
+  widgets/composite/PipelineDashboard.svelte: `pipeline-dashboard` (aliases
+  `sales-dashboard`, `funnel-dashboard`). One chat card that answers: how close
+  are we to the target, where do things stall, who carries it, which deals
+  matter and what just happened. The domain may be sales, hiring or a
+  fundraiser; every data rule lives in pipeline-dashboard.ts.
+
+  Frame: the host card is the only frame. A header (h3 title, muted subtitle,
+  plain period text), then sections in one column split by hairlines, each
+  under an h4 label row: quota, funnel (or conversion when there is no usable
+  funnel), leaderboard, deals, recent activity. A section with no data renders
+  nothing; with no data at all one muted line says so.
+
+  Leaderboard: under 480px the sublabel sits under the name and the delta
+  under the value. At 480px and up every row is one 36px line: the sublabel
+  follows the name and truncates first, and the delta sits left of the value
+  on its baseline. The delta is plain muted signed text (no arrow, no pill).
+
+  Never put `text-body` and a `text-ripple-*` colour through one cn() call:
+  tailwind-merge reads both as colours and drops the size.
+
+  Colour: one accent. Only the quota fill, the funnel's own bars and worst
+  step, the lowest conversion rate (accent ink) and the success line at or
+  past target carry colour. No pace judgement: the widget has no pace data.
+
+  Layout follows the root's own width (container query at 480px): the period
+  moves beside the title, leaderboard rows go to one line,
+  activity times move into a right column, and the deals
+  table replaces its stacked rows (Table layout="stack"). Lists cap at 5 reps,
+  6 deals and 4 events behind a "Show N more" (activity: "Show N earlier")
+  button (body ink, a chevron that turns when open); nothing scrolls inside.
+  The root forwards `id` and data-ripple-node for the visual editor.
+-->
+<script lang="ts">
+	import { safeStyle, safeUrl } from '@ripple-ui/core';
+	import Check from '@lucide/svelte/icons/check';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn } from '../../utils.js';
+	import Icon, { iconExists } from '../display/Icon.svelte';
+	import Avatar from '../display/Avatar.svelte';
+	import Funnel from '../data/Funnel.svelte';
+	import Table from '../data/Table.svelte';
+	import Delta from '../data-kit/Delta.svelte';
+	import { plain } from '../data-kit/format.js';
+	import {
+		funnelStages,
+		moreLabel,
+		readCurrency,
+		readDeals,
+		readLeaders,
+		readQuota,
+		readRates,
+		readTicker,
+		usableFunnel,
+		type Leader
+	} from './pipeline-dashboard.js';
+
+	interface Props {
+		id?: string;
+		class?: string;
+		style?: Record<string, string> | string;
+		title?: string;
+		subtitle?: string;
+		period?: string;
+		quota?: { label?: string; current: number; target: number; currency?: string; period?: string };
+		funnel?: { stages: Array<{ label: string; value: number; color?: string }>; title?: string };
+		conversion?: Array<{ from: string; to: string; rate: number }>;
+		leaderboard?: { title?: string; items: Array<Record<string, unknown>> };
+		deals?: { title?: string; columns: Array<{ key: string; label: string; align?: 'left' | 'right' | 'center' }>; rows: Record<string, unknown>[] };
+		ticker?: Array<{ time: string; label: string; actor?: string; icon?: string }>;
+	}
+
+	let { id, class: className, style, title, subtitle, period, quota, funnel, conversion, leaderboard, deals, ticker }: Props = $props();
+
+	const CAP = { leaders: 5, deals: 6, events: 4 };
+
+	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 per = $derived(plain(period));
+
+	const q = $derived(readQuota(quota));
+	const stages = $derived(funnelStages(funnel));
+	const funnelTitle = $derived(plain((funnel as { title?: unknown } | undefined)?.title) || 'Pipeline');
+	const rates = $derived(usableFunnel(stages) ? [] : readRates(conversion));
+	const board = $derived(leaderboard && typeof leaderboard === 'object' ? leaderboard : undefined);
+	const leaders = $derived(readLeaders(board?.items, readCurrency(quota?.currency)));
+	const d = $derived(readDeals(deals, readCurrency(quota?.currency)));
+	const events = $derived(readTicker(ticker));
+	const empty = $derived(!q && !stages.length && !rates.length && !leaders.length && !d.rows.length && !events.length);
+
+	let open = $state({ leaders: false, deals: false, events: false });
+	const cut = <T,>(list: T[], key: keyof typeof CAP) => (open[key] ? list : list.slice(0, CAP[key]));
+
+	const leaderText = (l: Leader) => [l.rank, l.name || 'Unnamed', l.value ?? 'n/a', l.delta, l.sublabel].filter(Boolean).join(', ');
+
+	const sec = 'flex min-w-0 flex-col gap-3 border-t border-ripple-border pt-4 first:border-t-0 first:pt-0';
+	const row = 'border-b border-ripple-border last:border-b-0';
+</script>
+
+{#snippet label(text: string, count?: number)}
+	<h4 class="m-0 text-caption-1 font-semibold uppercase tracking-[0.04em] text-ripple-muted-foreground [overflow-wrap:break-word]">
+		{text}{#if count}<span class="font-normal tabular-nums">{' · '}{count}</span>{/if}
+	</h4>
+{/snippet}
+
+{#snippet more(key: keyof typeof CAP, total: number, noun: string)}
+	{#if total > CAP[key]}
+		<button
+			type="button"
+			aria-expanded={open[key]}
+			onclick={() => (open[key] = !open[key])}
+			class="group -mx-1.5 -my-1 inline-flex min-h-8 items-center gap-1 self-start rounded-md px-1.5 text-callout font-medium text-ripple-surface-foreground transition-colors hover:bg-ripple-track focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ripple-ring active:bg-ripple-border"
+		>
+			{open[key] ? 'Show fewer' : moreLabel(total, CAP[key], noun)}
+			<ChevronDown size={14} aria-hidden="true" class="shrink-0 text-ripple-muted-foreground transition-transform duration-200 ease-(--ripple-ease-out) group-aria-expanded:rotate-180 motion-reduce:transition-none" />
+		</button>
+	{/if}
+{/snippet}
+
+<div {id} data-ripple-node={id} class={cn('@container flex w-full min-w-0 flex-col gap-4 text-ripple-surface-foreground', className)} style={rootStyle} data-widget="pipeline-dashboard">
+	{#if heading || sub || per}
+		<header class="flex min-w-0 flex-col gap-1 @min-[480px]:grid @min-[480px]:grid-cols-[minmax(0,1fr)_auto] @min-[480px]:items-baseline @min-[480px]:gap-x-4">
+			{#if heading}<h3 class="m-0 text-title-3 font-semibold text-pretty [overflow-wrap:break-word]">{heading}</h3>{/if}
+			{#if sub}<p class="m-0 text-callout text-pretty text-ripple-muted-foreground [overflow-wrap:break-word] @min-[480px]:col-start-1">{sub}</p>{/if}
+			{#if per}<p class="m-0 text-callout text-ripple-muted-foreground @min-[480px]:col-start-2 @min-[480px]:row-start-1 @min-[480px]:max-w-[16rem] @min-[480px]:text-right">{per}</p>{/if}
+		</header>
+	{/if}
+
+	{#if empty}
+		<p class="m-0 text-callout text-ripple-muted-foreground">No pipeline data yet</p>
+	{:else}
+		<div class="flex min-w-0 flex-col gap-4 {heading || sub || per ? 'border-t border-ripple-border pt-4' : ''}">
+			{#if q}
+				<section class={sec} data-slot="quota">
+					<h4 class="m-0 text-caption-1 font-semibold tracking-[0.04em] text-pretty text-ripple-muted-foreground [overflow-wrap:break-word]">
+						<span class="uppercase">{q.label}</span>{#if q.period}<span class="font-normal tracking-normal">{' · '}{q.period}</span>{/if}
+					</h4>
+					<div class="flex items-baseline justify-between gap-3">
+						<p class="m-0 min-w-0">
+							<span class="whitespace-nowrap text-title-2 font-semibold tabular-nums">{q.current}</span>
+							{#if q.target}<span class="whitespace-nowrap text-body text-ripple-muted-foreground tabular-nums">of {q.target}</span>{/if}
+						</p>
+						{#if q.pctText}<span class="shrink-0 text-title-3 font-semibold tabular-nums">{q.pctText}</span>{/if}
+					</div>
+					{#if q.pct !== undefined}
+						<div
+							role="progressbar"
+							aria-label={q.label}
+							aria-valuemin={0}
+							aria-valuemax={100}
+							aria-valuenow={Math.min(100, Math.round(q.pct))}
+							aria-valuetext="{q.current} of {q.target}, {q.pctText?.replace('%', ' percent')}"
+							class="h-2 overflow-hidden rounded-full bg-ripple-track"
+						>
+							<div class="h-full rounded-full bg-ripple-accent transition-[width] duration-200 ease-(--ripple-ease-out) motion-reduce:transition-none" style:width="{Math.min(100, q.pct)}%"></div>
+						</div>
+						{#if q.met}
+							<p class="m-0 flex items-center gap-1 text-callout font-medium text-ripple-success-text" data-slot="quota-foot"><Check size={14} strokeWidth={2.5} aria-hidden="true" />{q.foot}</p>
+						{:else}
+							<p class="m-0 text-callout text-ripple-muted-foreground tabular-nums" data-slot="quota-foot">{q.foot}</p>
+						{/if}
+					{/if}
+				</section>
+			{/if}
+
+			{#if stages.length}
+				<section class={sec} data-slot="funnel">
+					{@render label(funnelTitle)}
+					<Funnel data={stages} />
+				</section>
+			{/if}
+
+			{#if rates.length}
+				<section class={sec} data-slot="conversion">
+					{@render label('Conversion')}
+					<ul class="m-0 flex list-none flex-col p-0">
+						{#each rates as r (r.key)}
+							<li class="flex items-baseline justify-between gap-3 py-2 first:pt-0 last:pb-0 {row}">
+								<span class="min-w-0 text-body [overflow-wrap:break-word]">
+									{#if r.from && r.to}{r.from}<ArrowRight size={12} class="mx-1 inline-block align-[-1px] text-ripple-muted-foreground" aria-hidden="true" /><span class="sr-only">{' to '}</span>{r.to}{:else if r.from}From {r.from}{:else}To {r.to}{/if}
+								</span>
+								<span class="shrink-0 text-body font-medium tabular-nums {r.lowest ? 'text-ripple-accent-text' : ''}">{r.text}</span>
+							</li>
+						{/each}
+					</ul>
+				</section>
+			{/if}
+
+			{#if leaders.length}
+				<section class={sec} data-slot="leaderboard">
+					{@render label(plain(board?.title) || 'Leaderboard', leaders.length)}
+					<ol class="m-0 flex list-none flex-col p-0">
+						{#each cut(leaders, 'leaders') as l (l.key)}
+							<li aria-label={leaderText(l)} class="grid min-h-11 grid-cols-[1.5rem_1.75rem_minmax(0,1fr)_auto] items-center gap-x-3 py-1.5 @min-[480px]:min-h-9 @min-[480px]:py-1 {row}">
+								<span aria-hidden="true" class="flex items-center justify-center self-center tabular-nums" data-slot="rank">
+									{#if l.rank <= 3}
+										<span class="inline-flex size-5 items-center justify-center rounded-full bg-ripple-track text-footnote font-semibold">{l.rank}</span>
+									{:else}
+										<span class="text-footnote text-ripple-muted-foreground">{l.rank}</span>
+									{/if}
+								</span>
+								<span aria-hidden="true" class="contents"><Avatar src={safeUrl(l.avatar, { kind: 'resource' })} alt={l.name} class="size-7 text-[11px]" /></span>
+								<span aria-hidden="true" class="flex min-w-0 flex-col @min-[480px]:flex-row @min-[480px]:items-baseline @min-[480px]:gap-x-2">
+									<span class="min-w-0 truncate text-body {l.name ? '' : 'pr-1 italic text-ripple-muted-foreground'}" title={l.name || undefined}>{l.name || 'Unnamed'}</span>
+									{#if l.sublabel}<span class="min-w-0 text-callout text-ripple-muted-foreground [overflow-wrap:break-word] @min-[480px]:shrink-[999] @min-[480px]:truncate" title={l.sublabel}>{l.sublabel}</span>{/if}
+								</span>
+								<span aria-hidden="true" class="flex flex-col items-end gap-0.5 @min-[480px]:flex-row-reverse @min-[480px]:items-baseline @min-[480px]:gap-2">
+									{#if l.value}<span class="whitespace-nowrap text-body font-medium tabular-nums">{l.value}</span>{:else}<span class="text-callout text-ripple-muted-foreground">n/a</span>{/if}
+									{#if l.delta}<Delta text={l.delta} dir={l.dir} sentiment="neutral" arrow={false} class="bg-transparent px-0 py-0" />{/if}
+								</span>
+							</li>
+						{/each}
+					</ol>
+					{@render more('leaders', leaders.length, 'more')}
+				</section>
+			{/if}
+
+			{#if d.rows.length}
+				<section class={sec} data-slot="deals">
+					{@render label(d.title || 'Deals', d.rows.length)}
+					<Table layout="stack" columns={d.columns} rows={cut(d.rows, 'deals')} />
+					{@render more('deals', d.rows.length, 'more')}
+				</section>
+			{/if}
+
+			{#if events.length}
+				<section class={sec} data-slot="activity">
+					{@render label('Recent activity', events.length)}
+					<ol class="m-0 flex list-none flex-col p-0">
+						{#each cut(events, 'events') as e (e.key)}
+							<li class="grid grid-cols-[1rem_minmax(0,1fr)] gap-x-3 py-2 first:pt-0 last:pb-0 @min-[480px]:grid-cols-[1rem_minmax(0,1fr)_auto] {row}">
+								<span class="flex h-[1lh] items-center justify-center text-body text-ripple-muted-foreground" aria-hidden="true" data-slot="event-icon">
+									{#if iconExists(e.icon)}<Icon name={e.icon} size={14} />{:else}<span class="size-1.5 rounded-full bg-ripple-muted-foreground"></span>{/if}
+								</span>
+								<div class="min-w-0">
+									<p class="m-0 text-body text-pretty [overflow-wrap:break-word]">{e.label}</p>
+									{#if e.actor || e.time}
+										<p class="m-0 text-callout text-ripple-muted-foreground">
+											{e.actor}{#if e.time}<span class="@min-[480px]:hidden">{e.actor ? ' · ' : ''}<span class="whitespace-nowrap">{e.time}</span></span>{/if}
+										</p>
+									{/if}
+								</div>
+								{#if e.time}<span class="hidden text-right text-callout whitespace-nowrap text-ripple-muted-foreground tabular-nums @min-[480px]:block">{e.time}</span>{/if}
+							</li>
+						{/each}
+					</ol>
+					{@render more('events', events.length, 'earlier')}
+				</section>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/widgets/composite/PipelineDashboard.svelte.d.ts

@@ -0,0 +1,50 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string> | string;
+    title?: string;
+    subtitle?: string;
+    period?: string;
+    quota?: {
+        label?: string;
+        current: number;
+        target: number;
+        currency?: string;
+        period?: string;
+    };
+    funnel?: {
+        stages: Array<{
+            label: string;
+            value: number;
+            color?: string;
+        }>;
+        title?: string;
+    };
+    conversion?: Array<{
+        from: string;
+        to: string;
+        rate: number;
+    }>;
+    leaderboard?: {
+        title?: string;
+        items: Array<Record<string, unknown>>;
+    };
+    deals?: {
+        title?: string;
+        columns: Array<{
+            key: string;
+            label: string;
+            align?: 'left' | 'right' | 'center';
+        }>;
+        rows: Record<string, unknown>[];
+    };
+    ticker?: Array<{
+        time: string;
+        label: string;
+        actor?: string;
+        icon?: string;
+    }>;
+}
+declare const PipelineDashboard: import("svelte").Component<Props, {}, "">;
+type PipelineDashboard = ReturnType<typeof PipelineDashboard>;
+export default PipelineDashboard;

package/dist/widgets/composite/PlaceResults.svelte

@@ -0,0 +1,293 @@
+<!--
+  widgets/composite/PlaceResults.svelte: `place-results` (aliases `places`,
+  `place-list`). Search results for cafes, restaurants, parks and the like:
+  the model lists places, the widget owns the cards, sorting, the Open now
+  filter and a map whose numbered pins follow the cards.
+
+  Invariants:
+  - Every place row is $derived from props, so a streamed card ends equal to
+    a whole one. Only the visitor's sort, filter and selection are $state.
+  - Covers are generated from `kind` (no images, no links out).
+  - Pin numbers are card positions in the current view, so card 2 is pin 2.
+    Selecting a card colours its pin and a pin click selects (and scrolls to)
+    its card.
+  - The map shows only when some place has coordinates, unless `showMap` is
+    false. It uses the map widget, so the host's default tiles apply.
+  - `on_choose` (as `onchoose`) fires on "Tell me more" with { id, name, text }.
+-->
+<script module lang="ts">
+	import { finite } from '../data-kit/index.js';
+	import { PALETTE, compact, rows, text, within, words } from './cover-art.js';
+
+	export const MAX_PLACES = 20;
+	export const KINDS = ['cafe', 'restaurant', 'bar', 'bakery', 'shop', 'park', 'museum', 'hotel', 'other'] as const;
+	export type Kind = (typeof KINDS)[number];
+	export const KIND_LABEL: Record<Kind, string> = {
+		cafe: 'Cafe', restaurant: 'Restaurant', bar: 'Bar', bakery: 'Bakery', shop: 'Shop', park: 'Park', museum: 'Museum', hotel: 'Hotel', other: 'Place'
+	};
+	export const KIND_PALETTE: Record<Kind, [string, string]> = {
+		cafe: PALETTE.amber, restaurant: PALETTE.orange, bar: PALETTE.violet, bakery: PALETTE.rose, shop: PALETTE.blue,
+		park: PALETTE.green, museum: PALETTE.slate, hotel: PALETTE.teal, other: PALETTE.slate
+	};
+	export type SortKey = 'best' | 'rating' | 'distance' | 'price';
+
+	export interface Place {
+		key: string;
+		name: string;
+		kind: Kind;
+		rating?: number;
+		reviews?: number;
+		price?: number;
+		distance?: string;
+		km?: number;
+		walk?: number;
+		open?: boolean;
+		hours: string;
+		address: string;
+		tags: string[];
+		blurb: string;
+		lat?: number;
+		lng?: number;
+	}
+
+	const toKind = (v: unknown): Kind => {
+		const k = typeof v === 'string' ? v.toLowerCase().trim() : '';
+		return (KINDS as readonly string[]).includes(k) ? (k as Kind) : k === 'coffee' || k === 'coffee shop' ? 'cafe' : 'other';
+	};
+
+	/** "0.4 km", "350 m", "1.2 mi" or a bare number of km, to a label and a km figure for sorting. */
+	function readDistance(v: unknown): { distance?: string; km?: number } {
+		const n = finite(v);
+		if (n !== undefined && n >= 0) return { distance: n < 1 ? `${Math.round(n * 1000)} m` : `${Number(n.toFixed(1))} km`, km: n };
+		const s = text(v, 16);
+		const m = /^([\d.]+)\s*(km|m|mi)?\b/i.exec(s);
+		if (!m) return s ? { distance: s } : {};
+		const x = Number(m[1]);
+		const unit = (m[2] ?? 'km').toLowerCase();
+		return { distance: s, km: unit === 'm' ? x / 1000 : unit === 'mi' ? x * 1.609 : x };
+	}
+
+	export function readPlaces(v: unknown): Place[] {
+		return rows<Record<string, unknown>>(v, MAX_PLACES)
+			.map((r) => {
+				const lat = within(r.lat, -90, 90);
+				const lng = within(r.lng ?? r.lon, -180, 180);
+				const price = within(r.price, 1, 4);
+				return {
+					key: r.key,
+					name: text(r.name ?? r.title, 80),
+					kind: toKind(r.kind ?? r.type),
+					rating: within(r.rating, 0, 5),
+					reviews: within(r.reviews, 0, 1e9),
+					price: price === undefined ? undefined : Math.round(price),
+					...readDistance(r.distance),
+					walk: within(r.walkMinutes, 0, 600),
+					open: typeof r.open === 'boolean' ? r.open : undefined,
+					hours: text(r.hours, 40),
+					address: text(r.address, 120),
+					tags: words(r.tags, 4),
+					blurb: text(r.blurb, 240),
+					...(lat !== undefined && lng !== undefined ? { lat, lng } : {})
+				};
+			})
+			.filter((p) => p.name);
+	}
+
+	const last = (n: number | undefined, asc: boolean) => (n === undefined ? Infinity : asc ? n : -n);
+
+	/** Sorted and filtered copy. Places with no figure for the key go last; ties keep model order. */
+	export function viewOf(list: Place[], sort: SortKey, openOnly: boolean): Place[] {
+		const out = openOnly ? list.filter((p) => p.open === true) : [...list];
+		if (sort === 'rating') out.sort((a, b) => last(a.rating, false) - last(b.rating, false));
+		if (sort === 'distance') out.sort((a, b) => last(a.km ?? a.walk, true) - last(b.km ?? b.walk, true));
+		if (sort === 'price') out.sort((a, b) => last(a.price, true) - last(b.price, true));
+		return out;
+	}
+
+	export const reviewsLabel = (n: number) => compact(n);
+</script>
+
+<script lang="ts">
+	import { safeStyle } from '@ripple-ui/core';
+	import Coffee from '@lucide/svelte/icons/coffee';
+	import Utensils from '@lucide/svelte/icons/utensils-crossed';
+	import Wine from '@lucide/svelte/icons/wine';
+	import Croissant from '@lucide/svelte/icons/croissant';
+	import ShoppingBag from '@lucide/svelte/icons/shopping-bag';
+	import Trees from '@lucide/svelte/icons/trees';
+	import Landmark from '@lucide/svelte/icons/landmark';
+	import Bed from '@lucide/svelte/icons/bed-double';
+	import MapPin from '@lucide/svelte/icons/map-pin';
+	import Star from '@lucide/svelte/icons/star';
+	import Footprints from '@lucide/svelte/icons/footprints';
+	import MapView from '../data/Map.svelte';
+	import { grad } from './cover-art.js';
+
+	interface Props {
+		id?: string;
+		class?: string;
+		style?: string | Record<string, string>;
+		title?: string;
+		query?: string;
+		places?: unknown[];
+		showMap?: boolean;
+		onchoose?: (v: { id: string; name: string; text: string }) => void;
+	}
+
+	let { id, class: className, style, title, query, places, showMap, onchoose }: Props = $props();
+
+	const ICONS = { cafe: Coffee, restaurant: Utensils, bar: Wine, bakery: Croissant, shop: ShoppingBag, park: Trees, museum: Landmark, hotel: Bed, other: MapPin };
+	const SORTS: [SortKey, string][] = [['best', 'Best match'], ['rating', 'Rating'], ['distance', 'Distance'], ['price', 'Price']];
+	const uid = $props.id();
+
+	let sort = $state<SortKey>('best');
+	let openOnly = $state(false);
+	let selected = $state<string | null>(null);
+
+	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(text(title, 80));
+	const sub = $derived(text(query, 120));
+	const list = $derived(readPlaces(places));
+	const view = $derived(viewOf(list, sort, openOnly));
+	const anyOpen = $derived(list.some((p) => p.open !== undefined));
+	const located = $derived(view.map((p, i) => ({ p, n: i + 1 })).filter(({ p }) => p.lat !== undefined));
+	const mapOn = $derived(showMap !== false && list.some((p) => p.lat !== undefined));
+	const ACCENT = '#1877f2';
+	const markers = $derived(
+		located.map(({ p, n }) => ({ id: p.key, lat: p.lat!, lng: p.lng!, label: String(n), color: selected === p.key ? ACCENT : '#64748b' }))
+	);
+	const bounds = $derived.by(() => {
+		const pts = located.map(({ p }) => [p.lat!, p.lng!] as [number, number]);
+		if (!pts.length) return undefined;
+		const lats = pts.map((x) => x[0]);
+		const lngs = pts.map((x) => x[1]);
+		const pad = 0.002;
+		return [
+			[Math.min(...lats) - pad, Math.min(...lngs) - pad],
+			[Math.max(...lats) + pad, Math.max(...lngs) + pad]
+		] as [[number, number], [number, number]];
+	});
+
+	function pick(key: string, scroll = false) {
+		selected = selected === key && !scroll ? null : key;
+		if (scroll) document.getElementById(`${uid}-${key}`)?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+	}
+
+	const focusRing = 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ripple-ring';
+	const chip = 'inline-flex h-8 items-center gap-1.5 rounded-full border px-3 text-footnote font-medium transition-colors duration-150 motion-reduce:transition-none';
+	const chipOff = 'border-ripple-border bg-ripple-surface text-ripple-foreground hover:bg-ripple-muted';
+	const chipOn = 'border-ripple-accent bg-ripple-accent/10 text-ripple-accent';
+</script>
+
+<div {id} class={['@container flex w-full flex-col gap-3 text-ripple-foreground', className]} style={rootStyle} data-widget="place-results">
+	{#if heading || sub}
+		<header class="flex flex-col gap-0.5">
+			{#if heading}<h2 class="text-title-3 font-semibold text-pretty">{heading}</h2>{/if}
+			<p class="text-footnote text-ripple-muted-foreground">
+				{#if sub}{sub} · {/if}{list.length} {list.length === 1 ? 'place' : 'places'}
+			</p>
+		</header>
+	{/if}
+
+	{#if list.length > 1}
+		<div class="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Sort and filter places" data-slot="controls">
+			<div class="flex flex-wrap gap-1.5" role="group" aria-label="Sort by">
+				{#each SORTS as [k, label] (k)}
+					<button type="button" class={[chip, sort === k ? chipOn : chipOff, focusRing]} aria-pressed={sort === k} onclick={() => (sort = k)}>{label}</button>
+				{/each}
+			</div>
+			{#if anyOpen}
+				<span class="mx-1 hidden h-5 w-px bg-ripple-border @min-[420px]:block" aria-hidden="true"></span>
+				<button type="button" class={[chip, openOnly ? chipOn : chipOff, focusRing]} aria-pressed={openOnly} onclick={() => (openOnly = !openOnly)} data-slot="open-filter">
+					<span class="size-2 rounded-full bg-emerald-500" aria-hidden="true"></span>Open now
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	<div class={['grid gap-3', mapOn && '@min-[760px]:grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)]']}>
+		{#if mapOn}
+			<div class="overflow-hidden rounded-ripple border border-ripple-border @min-[760px]:sticky @min-[760px]:top-2 @min-[760px]:order-2 @min-[760px]:self-start" data-slot="map">
+				<MapView {markers} {bounds} boundsPadding={24} height="clamp(220px, 34vh, 380px)" showControls={false} onmarkerclick={(k) => pick(k, true)} />
+			</div>
+		{/if}
+
+		<ol class="grid content-start gap-2.5 @min-[560px]:max-@min-[760px]:grid-cols-2" aria-label="Places" data-slot="list">
+			{#each view as p, i (p.key)}
+				{@const Icon = ICONS[p.kind]}
+				{@const on = selected === p.key}
+				<li id="{uid}-{p.key}" class="min-w-0">
+					<article
+						class={[
+							'group relative flex h-full gap-3 rounded-ripple border bg-ripple-surface p-3 transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none',
+							on ? 'border-ripple-accent shadow-[0_0_0_3px_color-mix(in_oklab,var(--ripple-accent)_18%,transparent)]' : 'border-ripple-border hover:border-ripple-surface-foreground/20'
+						]}
+						data-place={p.key}
+						data-selected={on || undefined}
+					>
+						<button type="button" class={['absolute inset-0 rounded-ripple', focusRing]} aria-label="Show {p.name} on the map" aria-pressed={on} onclick={() => pick(p.key)}></button>
+						<div class="pointer-events-none relative grid size-16 shrink-0 place-items-center overflow-hidden rounded-xl @min-[420px]:size-20" style:background-image={grad(KIND_PALETTE[p.kind])} aria-hidden="true" data-slot="cover">
+							<span class="pr-sheen absolute inset-0"></span>
+							<Icon size={26} strokeWidth={1.5} class="relative text-white drop-shadow" />
+							<span class={['absolute top-1 left-1 grid size-5 place-items-center rounded-full text-[11px] font-semibold tabular-nums', on ? 'bg-ripple-accent text-white' : 'bg-white/90 text-slate-800']} data-slot="pin-number">{i + 1}</span>
+						</div>
+						<div class="pointer-events-none flex min-w-0 flex-1 flex-col gap-1">
+							<div class="flex items-start justify-between gap-2">
+								<h3 class="truncate text-callout font-semibold" data-slot="name">{p.name}</h3>
+								{#if p.open !== undefined}
+									<span class={['shrink-0 rounded-full px-2 py-0.5 text-caption-1 font-medium', p.open ? 'bg-emerald-500/12 text-emerald-700 dark:text-emerald-400' : 'bg-ripple-muted text-ripple-muted-foreground']} data-slot="open">
+										{p.open ? 'Open' : 'Closed'}
+									</span>
+								{/if}
+							</div>
+							<p class="flex flex-wrap items-center gap-x-1.5 text-footnote text-ripple-muted-foreground" data-slot="meta">
+								{#if p.rating !== undefined}
+									<span class="inline-flex items-center gap-0.5 font-medium text-ripple-foreground tabular-nums"><Star size={13} class="fill-amber-400 text-amber-400" aria-hidden="true" />{p.rating.toFixed(1)}</span>
+									{#if p.reviews !== undefined}<span class="tabular-nums">({reviewsLabel(p.reviews)})</span>{/if}
+									<span aria-hidden="true">·</span>
+								{/if}
+								{#if p.price}<span aria-label="Price level {p.price} of 4"><span class="text-ripple-foreground">{'$'.repeat(p.price)}</span><span class="opacity-40">{'$'.repeat(4 - p.price)}</span></span><span aria-hidden="true">·</span>{/if}
+								<span>{KIND_LABEL[p.kind]}</span>
+							</p>
+							{#if p.distance || p.walk !== undefined || p.hours}
+								<p class="flex flex-wrap items-center gap-x-2 text-footnote text-ripple-muted-foreground" data-slot="where">
+									{#if p.distance}<span class="inline-flex items-center gap-1"><MapPin size={12} aria-hidden="true" />{p.distance}</span>{/if}
+									{#if p.walk !== undefined}<span class="inline-flex items-center gap-1"><Footprints size={12} aria-hidden="true" />{p.walk} min walk</span>{/if}
+									{#if p.hours}<span>{p.hours}</span>{/if}
+								</p>
+							{/if}
+							{#if p.blurb}<p class="line-clamp-2 text-footnote text-ripple-foreground/80" data-slot="blurb">{p.blurb}</p>{/if}
+							<div class="mt-auto flex flex-wrap items-center gap-1.5 pt-1">
+								{#each p.tags as t (t)}
+									<span class="rounded-full bg-ripple-muted px-2 py-0.5 text-caption-1 text-ripple-muted-foreground">{t}</span>
+								{/each}
+								{#if onchoose}
+									<button
+										type="button"
+										class={['pointer-events-auto relative ml-auto rounded-full px-2.5 py-1 text-footnote font-medium text-ripple-accent hover:bg-ripple-accent/10', focusRing]}
+										onclick={() => onchoose?.({ id: p.key, name: p.name, text: `Tell me more about ${p.name}` })}
+										data-slot="choose">Tell me more</button
+									>
+								{/if}
+							</div>
+						</div>
+					</article>
+				</li>
+			{:else}
+				<li class="rounded-ripple border border-dashed border-ripple-border p-6 text-center text-callout text-ripple-muted-foreground">
+					{list.length ? 'Nothing open right now.' : 'No places yet.'}
+				</li>
+			{/each}
+		</ol>
+	</div>
+</div>
+
+<style>
+	.pr-sheen {
+		background:
+			radial-gradient(circle at 25% 20%, rgb(255 255 255 / 0.4), transparent 50%),
+			repeating-linear-gradient(45deg, rgb(255 255 255 / 0.07) 0 6px, transparent 6px 14px);
+	}
+</style>