@v-office/website-chat 1.2.0 → 1.3.0

package/dist/panel-B_wg4Wl0.js

@@ -0,0 +1,2594 @@
+import { i as SESSION_TTL_S, r as MAX_MESSAGE_CHARS } from "./protocol-BuNqZAMt.js";
+import { a as CircleInfo, c as Restart, d as TopicIcon, f as clearConversation, g as sendMessage, i as CircleCheck, m as saveConversation, n as Check, o as Cross, p as loadConversation, r as Chevron, s as House, t as Arrow, u as Tag } from "./icons-B0_KM_uQ.js";
+import { d as statePath, r as chatCatalog } from "./catalog-Buxzskkg.js";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { JSONUIProvider, Renderer, defineRegistry, useStateValue } from "@json-render/react";
+import { DEFAULT_MAP_STYLE_URL, partyPairs } from "@v-office/website-headless";
+//#region src/format.ts
+/** A `YYYY-MM-DD` day as a UTC date: the stay's days, never shifted by the visitor's time zone. */
+const day = (value) => /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+/** The locale dates are formatted in: British English ("13 May"), as the replies write dates and as
+*  European visitors read them, never the US order "5/13" that a bare "en" gives. */
+const dateLocale = (locale) => locale === "en" ? "en-GB" : "de-DE";
+/** "14.–21. Juli", "26. Dez.–2. Jan.": the short form, without years even over New Year. */
+const shortPeriod = (stay, locale) => {
+	const short = new Intl.DateTimeFormat(dateLocale(locale), {
+		day: "numeric",
+		month: "short",
+		timeZone: "UTC"
+	});
+	return stay.start.slice(0, 4) === stay.end.slice(0, 4) ? short.formatRange(day(stay.start), day(stay.end)) : `${short.format(day(stay.start))}–${short.format(day(stay.end))}`;
+};
+const nightsOf = (stay) => Math.round((day(stay.end).getTime() - day(stay.start).getTime()) / 864e5);
+/** "1 Kind", "2 Kinder": a count in its plural form, its number and noun joined by a no-break space,
+*  so a narrow card never ends a line on the "2". */
+const counted = (forms, n, locale) => (forms[new Intl.PluralRules(locale).select(n)] ?? forms.other).replace("{n} ", `${n} `).replace("{n}", String(n));
+//#endregion
+//#region src/links.ts
+const REF = ["ref", "chat"];
+/** The query goes before a `#fragment`, so the anchor still lands. */
+const withQuery = (path, pairs) => {
+	const hash = path.indexOf("#");
+	const [base, fragment] = hash === -1 ? [path, ""] : [path.slice(0, hash), path.slice(hash)];
+	return `${base}${base.includes("?") ? "&" : "?"}${new URLSearchParams([...pairs, REF])}${fragment}`;
+};
+/** See {@link ChatHref}. */
+const chatHref = (path) => withQuery(path, []);
+/** The stay's dates, party and chosen rate, as the rental page and the checkout both read them. */
+const stayPairs = (stay) => [
+	["start", stay.start],
+	["end", stay.end],
+	...partyPairs(stay.party, "pets").map(([key, value]) => [key, value]),
+	...stay.policyId ? [["policy", stay.policyId]] : []
+];
+/** See {@link StayHref}. */
+const stayHref = (page, stay, searchPath) => {
+	return withQuery(page ?? searchPath, stay ? stayPairs(stay) : []);
+};
+/** See {@link BookingHref}. */
+const bookingHref = (bookingPage, stay) => withQuery(bookingPage, [...stayPairs(stay), ...(stay.services ?? []).filter((service) => service.count > 0).map((service) => ["service", `${service.id}:${service.count}`])]);
+/** See {@link BookHref}. */
+const bookHref = ({ page, booking }, stay, searchPath) => stay?.bookable && booking ? bookingHref(booking, stay) : stayHref(page, stay?.bookable ? stay : null, searchPath);
+//#endregion
+//#region src/map.tsx
+/** MapLibre and its worker, loaded on the first tap. MapLibre finds its worker beside its own module
+*  by default; bundled, the module is a hashed chunk with nothing beside it, so `?worker&url` has the
+*  site's bundler emit the worker as one self-contained file (MapLibre's own Vite setup), and
+*  `setWorkerUrl` points MapLibre at it before the first map reads it. */
+const loadMapLibre = () => Promise.all([import("maplibre-gl"), import("maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url")]).then(([library, worker]) => {
+	library.setWorkerUrl(worker.default);
+	return library;
+});
+/** What the style's sources ask to be credited, with their links, as MapLibre's attribution control
+*  would show it (OpenStreetMap's to its copyright page). */
+const Attribution = () => /* @__PURE__ */ jsxs("p", {
+	className: "map-attribution",
+	children: [
+		/* @__PURE__ */ jsx("a", {
+			href: "https://openfreemap.org",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: "OpenFreeMap"
+		}),
+		" ",
+		/* @__PURE__ */ jsx("a", {
+			href: "https://www.openmaptiles.org/",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: "© OpenMapTiles"
+		}),
+		" ",
+		"Data from",
+		" ",
+		/* @__PURE__ */ jsx("a", {
+			href: "https://www.openstreetmap.org/copyright",
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: "OpenStreetMap"
+		})
+	]
+});
+const MapCard = ({ rental, label, notice, load, children }) => {
+	const [shown, setShown] = useState(false);
+	const box = useRef(null);
+	const location = rental.location;
+	useEffect(() => {
+		const element = box.current;
+		if (!shown || !element || !location) return;
+		let removed = false;
+		let map;
+		loadMapLibre().then(({ Map, Marker }) => {
+			if (removed) return;
+			const center = [location.lng, location.lat];
+			const created = new Map({
+				container: element,
+				style: DEFAULT_MAP_STYLE_URL,
+				center,
+				zoom: 13,
+				attributionControl: false,
+				scrollZoom: false
+			});
+			const pin = document.createElement("span");
+			pin.className = "map-pin";
+			new Marker({ element: pin }).setLngLat(center).addTo(created);
+			map = created;
+		}).catch(() => {
+			if (!removed) setShown(false);
+		});
+		return () => {
+			removed = true;
+			map?.remove();
+		};
+	}, [shown, location]);
+	if (!location) return null;
+	return /* @__PURE__ */ jsxs("article", {
+		className: "card map-card",
+		children: [shown ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			ref: box,
+			className: "map",
+			role: "group",
+			"aria-label": label
+		}), /* @__PURE__ */ jsx(Attribution, {})] }) : /* @__PURE__ */ jsxs("div", {
+			className: "map-gate",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "muted",
+				children: notice
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "button",
+				onClick: () => setShown(true),
+				children: load
+			})]
+		}), children]
+	});
+};
+//#endregion
+//#region src/sheet.tsx
+const Sheet = ({ host, label, aside, closeLabel, onClose, opener, children }) => {
+	const sheet = useRef(null);
+	const close = useRef(null);
+	useEffect(() => {
+		close.current?.focus();
+		const back = opener.current;
+		return () => back?.focus();
+	}, [opener]);
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			onClose();
+			return;
+		}
+		if (event.key !== "Tab") return;
+		event.stopPropagation();
+		const focusable = [...sheet.current?.querySelectorAll("a[href], button:not([disabled])") ?? []];
+		const active = (sheet.current?.getRootNode())?.activeElement;
+		if (active === (event.shiftKey ? focusable[0] : focusable.at(-1)) || !focusable.includes(active)) {
+			event.preventDefault();
+			(event.shiftKey ? focusable.at(-1) : focusable[0])?.focus();
+		}
+	};
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "sheet-scrim",
+		onClick: onClose,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: sheet,
+			className: "sheet",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": label,
+			tabIndex: -1,
+			onClick: (event) => event.stopPropagation(),
+			onKeyDown,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "sheet-head",
+				children: [
+					/* @__PURE__ */ jsx("strong", {
+						className: "sheet-title",
+						children: label
+					}),
+					aside,
+					/* @__PURE__ */ jsx("button", {
+						ref: close,
+						type: "button",
+						className: "icon-button",
+						"aria-label": closeLabel,
+						onClick: onClose,
+						children: /* @__PURE__ */ jsx(Cross, {})
+					})
+				]
+			}), children]
+		})
+	}), host);
+};
+//#endregion
+//#region src/registry.tsx
+const ChatContext = createContext(null);
+const useChat = () => {
+	const value = useContext(ChatContext);
+	if (!value) throw new Error("A chat component rendered outside the chat panel.");
+	return value;
+};
+/** A stay from the state; with a `rentalId`, only a stay of that rental, so a price never shows
+*  under another rental's name, whatever a spec pairs. */
+const useStay = (stayId, rentalId) => {
+	const stay = useStateValue(statePath("stays", stayId ?? "")) ?? null;
+	return stay && (rentalId === void 0 || stay.rentalId === rentalId) ? stay : null;
+};
+const useRental = (rentalId) => useStateValue(statePath("rentals", rentalId)) ?? null;
+/** The stay the visitor chose in place for a rental in this reply, and how to choose one. Kept by the
+*  panel with the conversation; outside its list, by the component. */
+const useSelection = (rentalId) => {
+	const { message, part, selected, select } = useChat();
+	const [own, setOwn] = useState(null);
+	if (message === void 0 || part === void 0 || !select) return [own, setOwn];
+	const choose = (stayId) => select({
+		message,
+		part,
+		rentalId
+	}, stayId);
+	return [selected?.[`${message}:${part}:${rentalId}`] ?? null, choose];
+};
+/** "12.–19. Juli 2027" from two `YYYY-MM-DD` days. */
+const period = (stay, locale) => new Intl.DateTimeFormat(dateLocale(locale), {
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	timeZone: "UTC"
+}).formatRange(day(stay.start), day(stay.end));
+const withWeekday = (locale) => new Intl.DateTimeFormat(dateLocale(locale), {
+	weekday: "short",
+	day: "numeric",
+	month: "short",
+	timeZone: "UTC"
+});
+/** German writes its short weekday "Sa.," in a date: noise in the largest dates of a reply, and width a
+*  phone does not have. Only the weekday is followed by ".,". */
+const plainWeekday = (text) => text.replaceAll(".,", "");
+/** "Sa 6. – Sa 13. Feb.": a quote's dates with their weekdays, which the visitor checks against the
+*  calendar. */
+const weekdayPeriod = (stay, locale) => plainWeekday(withWeekday(locale).formatRange(day(stay.start), day(stay.end)));
+/** "Sa 6. Feb.". */
+const weekdayDay = (value, locale) => plainWeekday(withWeekday(locale).format(day(value)));
+/** "7. Jan. 2027": a day that may lie in another year than the stay. */
+const fullDay = (value, locale) => new Intl.DateTimeFormat(dateLocale(locale), {
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	timeZone: "UTC"
+}).format(day(value));
+/** "2 Schlafzimmer" from the PMS, its number and noun joined by a no-break space as in `counted`. */
+const keepCount = (fact) => fact.replace(/^(\d+) /, "$1\xA0");
+/** A review count as the PMS formats it ("36", or "1 Bewertungen" on v10), as the number it states. */
+const reviewCount = (count) => Number(count.replace(/\D/g, ""));
+/** "2 Erwachsene, 2 Kinder"; `withAges` adds the children's ages ("2 Kinder (6, 9)") when every
+*  child's age is known (babies have none in the party). */
+const partyText = (stay, copy, locale, withAges = false) => {
+	const { party } = stay;
+	const children = party.children + party.babies;
+	const ages = party.childrenAges.filter((age) => age !== null);
+	const known = withAges && party.babies === 0 && ages.length === party.children;
+	return [
+		counted(copy.adults, party.adults, locale),
+		...children ? [`${counted(copy.children, children, locale)}${known ? ` (${ages.join(", ")})` : ""}`] : [],
+		...party.pets ? [counted(copy.pets, party.pets, locale)] : []
+	].join(", ");
+};
+/** A bookable stay goes to the rental's booking page with everything chosen, where the site has one;
+*  otherwise to the rental page (or the search) with the stay filled in. */
+const useBookHref = (rentalId, stay) => {
+	const { searchPath } = useChat();
+	const page = useStateValue(statePath("pages", rentalId)) ?? null;
+	const booking = useStateValue(statePath("bookingPages", rentalId)) ?? null;
+	return bookHref({
+		page,
+		booking
+	}, stay, searchPath);
+};
+/** A link out of the chat. It waits while a reply streams: leaving the page then aborts the turn,
+*  which neither the service nor the widget keeps, and a first conversation would be lost. */
+const ReplyLink = ({ href, className, children }) => {
+	const { busy } = useChat();
+	return busy ? /* @__PURE__ */ jsx("span", {
+		className,
+		"aria-disabled": "true",
+		children
+	}) : /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		children
+	});
+};
+/** What a booking link is for, for a screen reader: in a links list, eight "Buchen" say nothing. */
+const LinkTarget = ({ rentalId, stay }) => {
+	const { locale } = useChat();
+	const rental = useRental(rentalId);
+	if (!rental) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: `, ${rental.name}${stay?.bookable ? `, ${shortPeriod(stay, locale)}` : ""}`
+	});
+};
+const BookLink = ({ rentalId, stay }) => {
+	const { copy } = useChat();
+	return /* @__PURE__ */ jsxs(ReplyLink, {
+		className: "button",
+		href: useBookHref(rentalId, stay),
+		children: [stay?.bookable ? copy.bookStay : copy.viewRental, /* @__PURE__ */ jsx(LinkTarget, {
+			rentalId,
+			stay
+		})]
+	});
+};
+/** A row that snaps item by item, with arrow buttons and "n / total"; swipe, scroll or keys move it. */
+const Snapper = ({ count, className, label, caption, children }) => {
+	const { copy } = useChat();
+	const row = useRef(null);
+	const [index, setIndex] = useState(0);
+	const [fade, setFade] = useState();
+	useEffect(() => {
+		if (row.current) setFade(hiddenEdges(row.current));
+	}, [count]);
+	const range = (element) => Math.max(1, element.scrollWidth - element.clientWidth);
+	const go = (step) => {
+		const element = row.current;
+		if (!element) return;
+		const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const [first, second] = element.children;
+		const card = first && second ? second.offsetLeft - first.offsetLeft : element.clientWidth;
+		element.scrollBy({
+			left: step * card,
+			behavior: still ? "auto" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${className}-wrap`,
+		role: "group",
+		"aria-roledescription": "carousel",
+		"aria-label": label,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: row,
+			className,
+			"data-fade": fade,
+			onScroll: (event) => {
+				const element = event.currentTarget;
+				setIndex(Math.round(element.scrollLeft / range(element) * (count - 1)));
+				setFade(hiddenEdges(element));
+			},
+			children
+		}), (count > 1 || caption) && /* @__PURE__ */ jsxs("div", {
+			className: "snap-nav",
+			children: [
+				caption && /* @__PURE__ */ jsx("span", {
+					className: "snap-caption",
+					children: caption
+				}),
+				count > 1 && /* @__PURE__ */ jsx("span", {
+					className: "snap-dots",
+					"aria-hidden": "true",
+					children: Array.from({ length: count }, (_, dot) => /* @__PURE__ */ jsx("i", { "data-current": dot === Math.min(index, count - 1) || void 0 }, dot))
+				}),
+				count > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "snap-arrow",
+						"aria-label": copy.previous,
+						disabled: index === 0,
+						onClick: () => go(-1),
+						children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "snap-count muted",
+						children: [
+							Math.min(index + 1, count),
+							" / ",
+							count
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "snap-arrow",
+						"aria-label": copy.next,
+						disabled: index >= count - 1,
+						onClick: () => go(1),
+						children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
+					})
+				] })
+			]
+		})]
+	});
+};
+/** The panel's width on a wide screen (theme.ts, `--chat-width`'s default) and its list's, inside the
+*  list's padding: what a photo on its own is drawn at there. */
+const PANEL_PX = 700;
+const LIST_PX = 652;
+/** The sizes a photo is drawn at, for the browser to pick from the PMS's `srcset`: a phone's card in a
+*  row is most of the screen's width, a wide panel's at most 320 px; a card on its own spans the list. */
+const ROW_PHOTO_SIZES = "(max-width: 480px) 86vw, 320px";
+const SINGLE_PHOTO_SIZES = `(min-width: 1024px) ${LIST_PX}px, 100vw`;
+/** The sheet covers the panel. */
+const SHEET_PHOTO_SIZES = `(min-width: 1024px) ${PANEL_PX}px, 100vw`;
+/** A rental's photos, swiped or stepped through with the arrows a pointer brings up. With `onOpen`
+*  each photo is a button that opens the photos large, and a counter chip says how many there are
+*  (only the shown photo is a Tab stop); without, dots say which one shows. `children` sit on the
+*  photo's foot. */
+const Gallery = ({ images, name, sizes, onOpen, openerRef, children }) => {
+	const { copy } = useChat();
+	const row = useRef(null);
+	const [index, setIndex] = useState(0);
+	if (images.length === 0) return null;
+	const go = (to) => {
+		const element = row.current;
+		if (!element) return;
+		const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		element.scrollTo({
+			left: to * element.clientWidth,
+			behavior: still ? "auto" : "smooth"
+		});
+	};
+	const many = images.length > 1;
+	const shown = Math.min(index, images.length - 1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "gallery-wrap",
+		role: "group",
+		"aria-roledescription": "carousel",
+		"aria-label": name,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: row,
+				className: "gallery",
+				onScroll: (event) => {
+					const element = event.currentTarget;
+					setIndex(Math.round(element.scrollLeft / Math.max(1, element.clientWidth)));
+				},
+				children: images.map((image, imageIndex) => {
+					const photo = /* @__PURE__ */ jsx("img", {
+						src: image.src,
+						...image.srcset && {
+							srcSet: image.srcset,
+							sizes
+						},
+						alt: image.alt || `${name}, ${copy.photo} ${imageIndex + 1}`,
+						loading: "lazy"
+					}, image.src);
+					return onOpen ? /* @__PURE__ */ jsx("button", {
+						ref: imageIndex === shown ? openerRef : void 0,
+						type: "button",
+						className: "photo-open",
+						"aria-label": `${copy.openPhotos.replace("{name}", name)} (${imageIndex + 1} / ${images.length})`,
+						tabIndex: imageIndex === shown ? 0 : -1,
+						onClick: () => onOpen(imageIndex),
+						children: photo
+					}, image.src) : photo;
+				})
+			}),
+			children,
+			onOpen && /* @__PURE__ */ jsxs("span", {
+				className: "photo-count",
+				"aria-hidden": "true",
+				children: [
+					shown + 1,
+					" / ",
+					images.length
+				]
+			}),
+			many && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gallery-arrow",
+					"data-side": "prev",
+					"aria-label": copy.previous,
+					disabled: index === 0,
+					onClick: () => go(index - 1),
+					children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "gallery-arrow",
+					"data-side": "next",
+					"aria-label": copy.next,
+					disabled: index >= images.length - 1,
+					onClick: () => go(index + 1),
+					children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
+				}),
+				!onOpen && /* @__PURE__ */ jsx("span", {
+					className: "dots",
+					"aria-hidden": "true",
+					children: images.map((image, imageIndex) => /* @__PURE__ */ jsx("i", { "data-current": imageIndex === index || void 0 }, image.src))
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: `${copy.photo} ${shown + 1} / ${images.length}`
+				})
+			] })
+		]
+	});
+};
+/** A rental's photos large in a sheet over the panel: uncropped, with the PMS's caption, and the
+*  card's stay with its total and button kept in the foot. */
+const PhotoSheet = ({ rental, stay, start, host, opener, onClose }) => {
+	const { copy, locale } = useChat();
+	const href = useBookHref(rental.id, stay);
+	const row = useRef(null);
+	const [index, setIndex] = useState(start);
+	const { images } = rental;
+	useEffect(() => {
+		const element = row.current;
+		if (element) element.scrollLeft = start * element.clientWidth;
+	}, [start]);
+	const prev = useRef(null);
+	const next = useRef(null);
+	const go = (to) => {
+		flushSync(() => setIndex(to));
+		if (row.current) row.current.scrollLeft = to * row.current.clientWidth;
+		if (to === 0) next.current?.focus();
+		else if (to === images.length - 1) prev.current?.focus();
+	};
+	const caption = images[index]?.alt;
+	const priced = stay?.bookable && stay.total ? stay : null;
+	return /* @__PURE__ */ jsxs(Sheet, {
+		host,
+		label: rental.name,
+		aside: /* @__PURE__ */ jsxs("span", {
+			className: "sheet-count",
+			children: [
+				index + 1,
+				" / ",
+				images.length
+			]
+		}),
+		closeLabel: copy.closePhotos,
+		opener,
+		onClose,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "sheet-photo",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: row,
+					className: "sheet-photos",
+					onScroll: (event) => {
+						const element = event.currentTarget;
+						setIndex(Math.round(element.scrollLeft / Math.max(1, element.clientWidth)));
+					},
+					children: images.map((image, imageIndex) => /* @__PURE__ */ jsx("img", {
+						src: image.src,
+						...image.srcset && {
+							srcSet: image.srcset,
+							sizes: SHEET_PHOTO_SIZES
+						},
+						alt: image.alt || `${rental.name}, ${copy.photo} ${imageIndex + 1}`,
+						loading: Math.abs(imageIndex - start) > 1 ? "lazy" : "eager"
+					}, image.src))
+				}), images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					ref: prev,
+					type: "button",
+					className: "gallery-arrow",
+					"data-side": "prev",
+					"aria-label": copy.previous,
+					disabled: index === 0,
+					onClick: () => go(index - 1),
+					children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
+				}), /* @__PURE__ */ jsx("button", {
+					ref: next,
+					type: "button",
+					className: "gallery-arrow",
+					"data-side": "next",
+					"aria-label": copy.next,
+					disabled: index >= images.length - 1,
+					onClick: () => go(index + 1),
+					children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
+				})] })]
+			}),
+			caption && /* @__PURE__ */ jsx("p", {
+				className: "sheet-caption",
+				children: caption
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "sheet-foot",
+				children: [priced && /* @__PURE__ */ jsxs("div", {
+					className: "foot-price",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "price",
+						children: priced.total
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "foot-meta",
+						children: [
+							copy.total,
+							" · ",
+							/* @__PURE__ */ jsx("span", {
+								className: "period",
+								children: shortPeriod(priced, locale)
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsxs(ReplyLink, {
+					className: "button compact",
+					href,
+					children: [stay?.bookable ? copy.book : copy.view, /* @__PURE__ */ jsx(LinkTarget, {
+						rentalId: rental.id,
+						stay
+					})]
+				})]
+			})
+		]
+	});
+};
+/** "★ 4,8 (23)": the score and how many reviews, read out in words; on a card's photo, or beside the
+*  place of a card without photos. */
+const PhotoRating = ({ rental }) => {
+	const { copy, locale } = useChat();
+	if (!rental.rating) return null;
+	const { value, count } = rental.rating;
+	const reviews = counted(copy.reviews, reviewCount(count), locale);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "photo-rating",
+		role: "img",
+		"aria-label": `${value}, ${reviews}`,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "star",
+				children: "★"
+			}),
+			" ",
+			value.replace(/\/5$/, ""),
+			" ",
+			/* @__PURE__ */ jsxs("small", { children: [
+				"(",
+				reviewCount(count),
+				")"
+			] })
+		]
+	});
+};
+/** The visitor's wishes the latest search that found the rental applied, which it therefore has. */
+const useWishes = (rentalId) => useStateValue(statePath("wishes", rentalId)) ?? [];
+const Wishes = ({ wishes }) => {
+	const { copy } = useChat();
+	if (wishes.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: "wishes",
+		"aria-label": copy.matchesWishes,
+		children: wishes.map((wish) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(Check, {}), wish] }, wish))
+	});
+};
+/** "7 Nächte · 6.–13. Mai": a stay's length and dates, short. */
+const stayMeta = (stay, copy, locale) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	counted(copy.nights, nightsOf(stay), locale),
+	" ·",
+	" ",
+	/* @__PURE__ */ jsx("span", {
+		className: "period",
+		children: shortPeriod(stay, locale)
+	})
+] });
+/** "Gesamtpreis für 7 Nächte": what a total covers. */
+const PriceLabel = ({ stay }) => {
+	const { copy, locale } = useChat();
+	return /* @__PURE__ */ jsx("span", {
+		className: "price-label",
+		children: counted(copy.totalForNights, nightsOf(stay), locale)
+	});
+};
+/** A discount's name beside a card's total: the first the PMS names, else a generic word. */
+const DealBadge = ({ stay }) => {
+	const { copy } = useChat();
+	if (!stay.discount) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "deal compact",
+		children: stay.discount.labels[0] ?? copy.dealFallback
+	});
+};
+/** "Frühbucher · Sie sparen 112,30 €": the discounts the PMS applied and, when it is one amount, the
+*  saving. No struck-through price: the total is what the visitor pays. */
+const DealLine = ({ stay }) => {
+	const { copy } = useChat();
+	if (!stay.discount) return null;
+	const { labels, saving } = stay.discount;
+	return /* @__PURE__ */ jsxs("p", {
+		className: "deal",
+		children: [/* @__PURE__ */ jsx(Tag, {}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("strong", { children: labels.length > 0 ? labels.join(" · ") : copy.dealFallback }), saving !== null && /* @__PURE__ */ jsxs(Fragment, { children: [" · ", /* @__PURE__ */ jsx("span", {
+			className: "saving",
+			children: copy.youSave.replace("{amount}", saving)
+		})] })] })]
+	});
+};
+/** The rate's own name and what cancelling costs, as the PMS's policy states them; nothing without
+*  either (a search result, v9). The model never writes these dates. */
+const Terms = ({ stay }) => {
+	const { copy, locale } = useChat();
+	const { cancellation, rateName } = stay;
+	if (!cancellation && !rateName) return null;
+	const [before, after = ""] = copy.freeCancellation.split("{date}");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [cancellation?.kind === "free" ? /* @__PURE__ */ jsx(CircleCheck, {}) : /* @__PURE__ */ jsx(CircleInfo, {}), /* @__PURE__ */ jsxs("span", { children: [
+		rateName && `${rateName}${cancellation ? " · " : ""}`,
+		cancellation?.kind === "free" && /* @__PURE__ */ jsxs(Fragment, { children: [
+			before,
+			/* @__PURE__ */ jsx("strong", { children: fullDay(cancellation.until, locale) }),
+			after
+		] }),
+		cancellation?.kind === "none" && copy.nonRefundable
+	] })] });
+};
+/** A quote's price lines and total behind "Preisdetails", closed: the total above is what counts. */
+const PriceDetails = ({ stay }) => {
+	const { copy } = useChat();
+	if (stay.lines.length === 0 || !stay.total) return null;
+	return /* @__PURE__ */ jsxs("details", {
+		className: "price-details",
+		children: [
+			/* @__PURE__ */ jsxs("summary", { children: [copy.priceDetails, /* @__PURE__ */ jsx(Chevron, { side: "next" })] }),
+			stay.lines.map((line, index) => /* @__PURE__ */ jsxs("div", {
+				className: "line",
+				children: [/* @__PURE__ */ jsx("span", { children: line.label }), /* @__PURE__ */ jsx("span", { children: line.amount })]
+			}, index)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "line total",
+				children: [/* @__PURE__ */ jsx("span", { children: copy.total }), /* @__PURE__ */ jsx("span", { children: stay.total })]
+			})
+		]
+	});
+};
+/** A card's foot: the stay's total, its length and dates and the party it is for, and the way to
+*  book or to the rental. */
+const CardFoot = ({ rentalId, stay }) => {
+	const { copy, locale } = useChat();
+	const href = useBookHref(rentalId, stay);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "card-foot",
+		children: [stay && /* @__PURE__ */ jsx("div", {
+			className: "foot-price",
+			children: !stay.bookable ? /* @__PURE__ */ jsx("span", {
+				className: "foot-meta",
+				children: copy.notBookable
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				stay.total && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PriceLabel, { stay }), /* @__PURE__ */ jsxs("span", {
+					className: "price-line",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "price",
+						children: stay.total
+					}), /* @__PURE__ */ jsx(DealBadge, { stay })]
+				})] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "foot-meta",
+					children: stay.total ? /* @__PURE__ */ jsx("span", {
+						className: "period",
+						children: shortPeriod(stay, locale)
+					}) : stayMeta(stay, copy, locale)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "foot-meta",
+					children: partyText(stay, copy, locale)
+				})
+			] })
+		}), /* @__PURE__ */ jsxs(ReplyLink, {
+			className: "button compact",
+			href,
+			children: [stay?.bookable ? copy.book : copy.view, /* @__PURE__ */ jsx(LinkTarget, {
+				rentalId,
+				stay
+			})]
+		})]
+	});
+};
+/** A flexible search's other free periods of a card's rental, as pills that switch the card's stay in
+*  place: no message, no model turn; the bar follows. */
+const Periods = ({ rentalId, ids, current, onChoose }) => {
+	const { copy, locale, busy } = useChat();
+	const stays = useStateValue("/stays") ?? {};
+	const options = ids.flatMap((id) => {
+		const stay = stays[id];
+		return stay?.rentalId === rentalId && stay.bookable ? [stay] : [];
+	});
+	if (options.length < 2) return null;
+	const month = options[0].start.slice(0, 7);
+	const oneMonth = options.every((stay) => stay.start.slice(0, 7) === month && stay.end.slice(0, 7) === month);
+	const caption = oneMonth ? copy.freePeriodsIn.replace("{month}", new Intl.DateTimeFormat(dateLocale(locale), {
+		month: "long",
+		timeZone: "UTC"
+	}).format(day(`${month}-01`))) : copy.freePeriods;
+	const days = new Intl.DateTimeFormat(dateLocale(locale), {
+		day: "numeric",
+		timeZone: "UTC"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "periods",
+		role: "group",
+		"aria-label": caption,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "periods-caption",
+			"aria-hidden": "true",
+			children: caption
+		}), /* @__PURE__ */ jsx("div", {
+			className: "period-pills",
+			"data-one-month": oneMonth || void 0,
+			children: options.map((stay) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "period-pill",
+				"aria-pressed": stay.id === current,
+				disabled: busy || !stay.total,
+				onClick: () => onChoose(stay.id),
+				children: oneMonth ? days.formatRange(day(stay.start), day(stay.end)) : shortPeriod(stay, locale)
+			}, stay.id))
+		})]
+	});
+};
+const Card = ({ rentalId, stayId, inRow = false }) => {
+	const rental = useRental(rentalId);
+	const periods = useStateValue(statePath("periods", rentalId)) ?? [];
+	const [chosen, choose] = useSelection(rentalId);
+	const pills = stayId && periods.includes(stayId) ? periods.slice(0, 4) : [];
+	const shown = chosen && pills.includes(chosen) ? chosen : stayId;
+	const stay = useStay(shown, rentalId);
+	const wishes = useWishes(rentalId);
+	const { overlay } = useChat();
+	const [sheet, setSheet] = useState(null);
+	const opener = useRef(null);
+	if (!overlay && sheet !== null) setSheet(null);
+	if (!rental) return null;
+	const photos = rental.images.length > 0;
+	return /* @__PURE__ */ jsxs("article", {
+		className: "card rental-card",
+		"data-stay-id": stay?.id,
+		children: [
+			photos ? /* @__PURE__ */ jsx(Gallery, {
+				images: rental.images,
+				name: rental.name,
+				sizes: inRow ? ROW_PHOTO_SIZES : SINGLE_PHOTO_SIZES,
+				openerRef: opener,
+				...overlay && { onOpen: setSheet },
+				children: (rental.place || rental.rating) && /* @__PURE__ */ jsxs("div", {
+					className: "photo-meta",
+					children: [/* @__PURE__ */ jsx("span", { children: rental.place }), /* @__PURE__ */ jsx(PhotoRating, { rental })]
+				})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "no-photo",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(House, {})
+			}),
+			overlay && sheet !== null && /* @__PURE__ */ jsx(PhotoSheet, {
+				rental,
+				stay,
+				start: sheet,
+				host: overlay,
+				opener,
+				onClose: () => setSheet(null)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "card-body",
+				children: [
+					!photos && /* @__PURE__ */ jsxs("div", {
+						className: "card-meta",
+						children: [rental.place && /* @__PURE__ */ jsx("span", {
+							className: "place",
+							children: rental.place
+						}), /* @__PURE__ */ jsx(PhotoRating, { rental })]
+					}),
+					/* @__PURE__ */ jsx("h3", {
+						className: "card-title",
+						children: rental.name
+					}),
+					rental.highlights.length > 0 && /* @__PURE__ */ jsx("p", {
+						className: "specs",
+						children: rental.highlights.slice(0, 3).map(keepCount).join(" · ")
+					}),
+					/* @__PURE__ */ jsx(Wishes, { wishes })
+				]
+			}),
+			/* @__PURE__ */ jsx(Periods, {
+				rentalId: rental.id,
+				ids: pills,
+				current: shown,
+				onChoose: choose
+			}),
+			/* @__PURE__ */ jsx(CardFoot, {
+				rentalId: rental.id,
+				stay
+			})
+		]
+	});
+};
+/** A quote's head: a small photo, the place and the rental's name. */
+const QuoteHead = ({ rental }) => {
+	if (!rental) return null;
+	const photo = rental.images[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "quote-head",
+		children: [photo && /* @__PURE__ */ jsx("img", {
+			className: "thumb",
+			src: photo.src,
+			srcSet: photo.srcset,
+			sizes: "52px",
+			alt: ""
+		}), /* @__PURE__ */ jsxs("div", { children: [rental.place && /* @__PURE__ */ jsx("span", {
+			className: "place",
+			children: rental.place
+		}), /* @__PURE__ */ jsx("h3", {
+			className: "card-title",
+			children: rental.name
+		})] })]
+	});
+};
+/** The hand-over (`handover`), when the visitor has decided: what was chosen, the total, the one
+*  full-width button, and, where the button opens the rental's booking page, that nothing is booked
+*  until then and what that page asks. */
+const HandOver = ({ rental, stay }) => {
+	const { copy, locale } = useChat();
+	const href = useBookHref(stay.rentalId, stay);
+	const booking = useStateValue(statePath("bookingPages", stay.rentalId)) ?? null;
+	const extras = (stay.services ?? []).filter((service) => service.label);
+	return /* @__PURE__ */ jsx("article", {
+		className: "card stay-card handover",
+		"data-stay-id": stay.id,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx(QuoteHead, { rental }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ho-dates",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							className: "price-label",
+							children: copy.arrival
+						}), /* @__PURE__ */ jsx("strong", { children: weekdayDay(stay.start, locale) })] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "ho-nights",
+							children: counted(copy.nights, nightsOf(stay), locale)
+						}),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							className: "price-label",
+							children: copy.departure
+						}), /* @__PURE__ */ jsx("strong", { children: weekdayDay(stay.end, locale) })] })
+					]
+				}),
+				/* @__PURE__ */ jsxs("ul", {
+					className: "ho-lines",
+					children: [
+						/* @__PURE__ */ jsx("li", { children: partyText(stay, copy, locale, true) }),
+						(stay.cancellation || stay.rateName) && /* @__PURE__ */ jsx("li", {
+							className: "cancel-line",
+							children: /* @__PURE__ */ jsx(Terms, { stay })
+						}),
+						extras.map((extra) => /* @__PURE__ */ jsxs("li", {
+							className: "tick",
+							children: [/* @__PURE__ */ jsx(Check, {}), extra.count > 1 ? `${extra.count} × ${extra.label}` : extra.label]
+						}, extra.id))
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ho-total",
+					children: [/* @__PURE__ */ jsx(PriceLabel, { stay }), /* @__PURE__ */ jsx("span", {
+						className: "price",
+						children: stay.total
+					})]
+				}),
+				/* @__PURE__ */ jsxs(ReplyLink, {
+					className: "button block",
+					href,
+					children: [
+						copy.continueToBooking,
+						/* @__PURE__ */ jsx(Arrow, {}),
+						/* @__PURE__ */ jsx(LinkTarget, {
+							rentalId: stay.rentalId,
+							stay
+						})
+					]
+				}),
+				booking && /* @__PURE__ */ jsx("p", {
+					className: "ho-note",
+					children: copy.nothingBookedYet
+				}),
+				booking && copy.handoverSteps.length > 0 && /* @__PURE__ */ jsx("ol", {
+					className: "ho-steps",
+					children: copy.handoverSteps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step))
+				}),
+				/* @__PURE__ */ jsx(PriceDetails, { stay })
+			]
+		})
+	});
+};
+/** A stay the booking system refused, with the stay lengths it allows from the same arrival: each row
+*  asks for that stay's price, as the visitor's message. */
+const Refused = ({ rental, stay, departures }) => {
+	const { copy, locale, send, busy, suggest } = useChat();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("article", {
+		className: "card stay-card refused",
+		"data-stay-id": stay.id,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [/* @__PURE__ */ jsx(QuoteHead, { rental }), /* @__PURE__ */ jsx("p", {
+				className: "quote-when",
+				children: copy.possibleFrom.replace("{date}", weekdayDay(stay.start, locale))
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "rows",
+			children: departures.map((end) => {
+				const range = period({
+					start: stay.start,
+					end
+				}, locale);
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "row",
+					disabled: !send || busy,
+					onClick: () => send?.(rental ? `${rental.name}: ${range}` : range),
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "row-when",
+						children: [/* @__PURE__ */ jsx("strong", { children: counted(copy.nights, nightsOf({
+							start: stay.start,
+							end
+						}), locale) }), /* @__PURE__ */ jsx("span", { children: copy.until.replace("{date}", weekdayDay(end, locale)) })]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "row-go",
+						children: [copy.showPrice, /* @__PURE__ */ jsx(Chevron, { side: "next" })]
+					})]
+				}, end);
+			})
+		})]
+	}), suggest && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "chip",
+		disabled: busy,
+		onClick: () => suggest(copy.otherArrivalStarter),
+		children: copy.otherArrival
+	})] });
+};
+/** One stay: its dates with weekdays and party, the labelled total with the button, the discount and
+*  the cancellation terms, the price lines folded away. An unbookable stay says only that, as a card
+*  does; with `handover`, a bookable priced stay becomes the hand-over. */
+const Quote = ({ stayId, handover }) => {
+	const { copy, locale } = useChat();
+	const stay = useStay(stayId);
+	const rental = useRental(stay?.rentalId ?? "");
+	const href = useBookHref(stay?.rentalId ?? "", stay);
+	if (!stay) return null;
+	if (!stay.bookable && stay.departures?.length) return /* @__PURE__ */ jsx(Refused, {
+		rental,
+		stay,
+		departures: stay.departures
+	});
+	if (!stay.bookable) return /* @__PURE__ */ jsxs("article", {
+		className: "card stay-card",
+		"data-stay-id": stay.id,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "card-body",
+			children: /* @__PURE__ */ jsx(QuoteHead, { rental })
+		}), /* @__PURE__ */ jsx(CardFoot, {
+			rentalId: stay.rentalId,
+			stay
+		})]
+	});
+	if (handover && stay.total) return /* @__PURE__ */ jsx(HandOver, {
+		rental,
+		stay
+	});
+	return /* @__PURE__ */ jsx("article", {
+		className: "card stay-card",
+		"data-stay-id": stay.id,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx(QuoteHead, { rental }),
+				/* @__PURE__ */ jsxs("p", {
+					className: "quote-when",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "period",
+							children: weekdayPeriod(stay, locale)
+						}),
+						" ·",
+						" ",
+						partyText(stay, copy, locale)
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "price-row",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "foot-price",
+						children: stay.total && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PriceLabel, { stay }), /* @__PURE__ */ jsx("span", {
+							className: "price",
+							children: stay.total
+						})] })
+					}), /* @__PURE__ */ jsxs(ReplyLink, {
+						className: "button compact",
+						href,
+						children: [copy.book, /* @__PURE__ */ jsx(LinkTarget, {
+							rentalId: stay.rentalId,
+							stay
+						})]
+					})]
+				}),
+				(stay.discount || stay.cancellation || stay.rateName) && /* @__PURE__ */ jsxs("div", {
+					className: "quote-facts",
+					children: [/* @__PURE__ */ jsx(DealLine, { stay }), (stay.cancellation || stay.rateName) && /* @__PURE__ */ jsx("p", {
+						className: "cancel-line",
+						children: /* @__PURE__ */ jsx(Terms, { stay })
+					})]
+				}),
+				/* @__PURE__ */ jsx(PriceDetails, { stay })
+			]
+		})
+	});
+};
+/** Monday-first weeks of one month, as `YYYY-MM-DD` days and `null` padding. */
+const monthGrid = (month) => {
+	const first = day(`${month}-01`);
+	const days = new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth() + 1, 0)).getUTCDate();
+	const lead = (first.getUTCDay() + 6) % 7;
+	return [...Array.from({ length: lead }, () => null), ...Array.from({ length: days }, (_, i) => `${month}-${String(i + 1).padStart(2, "0")}`)];
+};
+const monthsOf = (calendar) => {
+	const months = [];
+	for (let month = calendar.from.slice(0, 7); month <= calendar.through.slice(0, 7);) {
+		months.push(month);
+		const next = day(`${month}-01`);
+		next.setUTCMonth(next.getUTCMonth() + 1);
+		month = next.toISOString().slice(0, 7);
+	}
+	return months;
+};
+/** A calendar day's price level as one to three ticks under its numeral: never an amount. */
+const Ticks = ({ level }) => /* @__PURE__ */ jsx("span", {
+	className: "ticks",
+	"aria-hidden": "true",
+	children: Array.from({ length: level }, (_, tick) => /* @__PURE__ */ jsx("i", {}, tick))
+});
+/** A rental's calendar: taken days hatched, arrival days dotted, free days' price levels as ticks.
+*  Where the chat can send, an arrival is a button; a tapped one asks for its price in the foot. */
+const Calendar = ({ rentalId, stayId }) => {
+	const { copy, locale, send, busy } = useChat();
+	const rental = useRental(rentalId);
+	const stay = useStay(stayId, rentalId);
+	const calendar = useStateValue(statePath("availability", rentalId)) ?? null;
+	const months = calendar ? monthsOf(calendar) : [];
+	const [shown, setShown] = useState(() => Math.max(0, stay ? months.indexOf(stay.start.slice(0, 7)) : 0));
+	const [arrival, setArrival] = useState(null);
+	if (!calendar || months.length === 0) return null;
+	const month = months[Math.min(shown, months.length - 1)];
+	const weekdays = Array.from({ length: 7 }, (_, i) => new Intl.DateTimeFormat(dateLocale(locale), {
+		weekday: "short",
+		timeZone: "UTC"
+	}).format(day(`2024-01-0${i + 1}`)));
+	const title = new Intl.DateTimeFormat(dateLocale(locale), {
+		month: "long",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(day(`${month}-01`));
+	const inStay = (date) => Boolean(stay && date >= stay.start && date <= stay.end);
+	const fullDate = new Intl.DateTimeFormat(dateLocale(locale), {
+		weekday: "long",
+		day: "numeric",
+		month: "long",
+		timeZone: "UTC"
+	});
+	const sentDay = new Intl.DateTimeFormat(dateLocale(locale), {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	const statusText = {
+		free: copy.free,
+		booked: copy.booked,
+		closed: copy.closed
+	};
+	const levelText = {
+		1: copy.cheaper,
+		2: null,
+		3: copy.dearer
+	};
+	const arrivals = new Set(calendar.arrivals ?? []);
+	const levels = calendar.levels ?? {};
+	const hasLevels = new Set(Object.values(levels)).size > 1;
+	const tappable = Boolean(send) && !busy;
+	const chosen = tappable && arrival && arrivals.has(arrival) ? arrival : null;
+	const ask = (date) => {
+		const words = copy.arrivalOn.replace("{date}", sentDay.format(day(date)));
+		setArrival(null);
+		send?.(rental ? `${rental.name}: ${words}` : words);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "calendar",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "calendar-head",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": copy.previous,
+						disabled: shown === 0,
+						onClick: () => setShown(shown - 1),
+						children: /* @__PURE__ */ jsx(Chevron, { side: "prev" })
+					}),
+					/* @__PURE__ */ jsxs("span", { children: [title, rental ? ` · ${rental.name}` : ""] }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": copy.next,
+						disabled: shown >= months.length - 1,
+						onClick: () => setShown(shown + 1),
+						children: /* @__PURE__ */ jsx(Chevron, { side: "next" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "calendar-grid",
+				children: [weekdays.map((weekday) => /* @__PURE__ */ jsx("span", {
+					className: "weekday",
+					children: weekday
+				}, weekday)), monthGrid(month).map((date, index) => {
+					if (!date) return /* @__PURE__ */ jsx("span", {}, `pad-${index}`);
+					const status = calendar.days[date] ?? "closed";
+					const canArrive = status === "free" && arrivals.has(date);
+					const level = hasLevels && status === "free" ? levels[date] : void 0;
+					const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: Number(date.slice(8))
+						}),
+						level && /* @__PURE__ */ jsx(Ticks, { level }),
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: [
+								fullDate.format(day(date)),
+								statusText[status],
+								...canArrive ? [copy.arrivalPossible] : [],
+								...level && levelText[level] ? [levelText[level]] : [],
+								...inStay(date) ? [copy.yourStay] : []
+							].join(", ")
+						})
+					] });
+					const marks = {
+						className: "day",
+						"data-status": status,
+						"data-arrival": canArrive || void 0,
+						"data-stay": inStay(date) || void 0
+					};
+					return canArrive && tappable ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						...marks,
+						"aria-pressed": date === chosen,
+						onClick: () => setArrival(date),
+						children: content
+					}, date) : /* @__PURE__ */ jsx("span", {
+						...marks,
+						children: content
+					}, date);
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "legend muted",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-status": "free" }), copy.free] }),
+					arrivals.size > 0 && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-arrival": "true" }), copy.arrivalPossible] }),
+					/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-status": "booked" }), copy.booked] }),
+					stay && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-stay": "true" }), copy.yourStay] }),
+					hasLevels && /* @__PURE__ */ jsxs("span", {
+						className: "legend-levels",
+						children: [
+							copy.cheaper,
+							/* @__PURE__ */ jsx(Ticks, { level: 1 }),
+							/* @__PURE__ */ jsx(Ticks, { level: 3 }),
+							copy.dearer
+						]
+					})
+				]
+			}),
+			chosen && /* @__PURE__ */ jsxs("div", {
+				className: "cal-foot",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					copy.arrivalOn.split("{date}")[0],
+					/* @__PURE__ */ jsx("strong", { children: weekdayDay(chosen, locale) }),
+					copy.arrivalOn.split("{date}")[1]
+				] }), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "button compact",
+					onClick: () => ask(chosen),
+					children: [copy.showPrice, /* @__PURE__ */ jsx(Arrow, {})]
+				})]
+			})
+		]
+	});
+};
+/** One rental of a comparison; its stay marked when its dates are not the first column's. */
+const CompareColumn = ({ rentalId, stayId, reference }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const stay = useStay(stayId, rentalId);
+	const otherDates = stay && reference && (stay.start !== reference.start || stay.end !== reference.end);
+	const href = useBookHref(rentalId, stay);
+	if (!rental) return null;
+	const rooms = rental.rooms.slice(0, 3);
+	const highlights = rental.highlights.filter((highlight) => !rooms.includes(highlight));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "compare-col",
+		children: [
+			/* @__PURE__ */ jsx("strong", {
+				title: rental.name,
+				children: rental.name
+			}),
+			/* @__PURE__ */ jsxs("dl", { children: [
+				/* @__PURE__ */ jsx("dt", { children: copy.compareRating }),
+				/* @__PURE__ */ jsx("dd", { children: rental.rating ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "rating",
+						children: "★"
+					}),
+					" ",
+					`${rental.rating.value} (${counted(copy.reviews, reviewCount(rental.rating.count), locale)})`
+				] }) : "–" }),
+				/* @__PURE__ */ jsx("dt", { children: copy.compareRooms }),
+				/* @__PURE__ */ jsx("dd", { children: rooms.map(keepCount).join(", ") || "–" }),
+				/* @__PURE__ */ jsx("dt", { children: copy.compareHighlights }),
+				/* @__PURE__ */ jsx("dd", { children: highlights.slice(0, 4).map(keepCount).join(", ") || "–" }),
+				stay && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: copy.compareStay }), /* @__PURE__ */ jsxs("dd", { children: [
+					shortPeriod(stay, locale),
+					otherDates && /* @__PURE__ */ jsx("span", {
+						className: "other-date",
+						children: copy.otherDate
+					}),
+					/* @__PURE__ */ jsx("br", {}),
+					/* @__PURE__ */ jsx("span", {
+						className: "muted",
+						children: partyText(stay, copy, locale)
+					}),
+					/* @__PURE__ */ jsx("br", {}),
+					!stay.bookable ? /* @__PURE__ */ jsx("span", {
+						className: "muted",
+						children: copy.notBookable
+					}) : stay.total && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(PriceLabel, { stay }),
+						/* @__PURE__ */ jsx("br", {}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "price-line",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "price",
+								children: stay.total
+							}), /* @__PURE__ */ jsx(DealBadge, { stay })]
+						})
+					] })
+				] })] })
+			] }),
+			/* @__PURE__ */ jsxs(ReplyLink, {
+				className: "button",
+				href,
+				children: [stay?.bookable ? copy.book : copy.view, /* @__PURE__ */ jsx(LinkTarget, {
+					rentalId,
+					stay
+				})]
+			})
+		]
+	});
+};
+/** One arrival of a price calendar: its bar, the PMS's total, the day; tapping asks for that stay. */
+const PriceColumn = ({ rentalId, option, asked, cheapest }) => {
+	const { copy, locale, send, busy } = useChat();
+	const rental = useRental(rentalId);
+	const stay = useStay(option.stayId, rentalId);
+	const free = Boolean(stay?.bookable && stay.total);
+	const arrival = (options) => new Intl.DateTimeFormat(dateLocale(locale), {
+		...options,
+		timeZone: "UTC"
+	}).format(day(option.start));
+	const dates = period(option, locale);
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "price-column",
+		"data-asked": asked || void 0,
+		"data-cheapest": cheapest || void 0,
+		"data-free": free || void 0,
+		disabled: !free || !send || busy,
+		"aria-label": [
+			dates,
+			free ? stay.total : copy.closed,
+			...cheapest ? [copy.cheapest] : [],
+			...asked ? [copy.yourStay] : []
+		].join(", "),
+		onClick: () => send?.(rental ? `${rental.name}: ${dates}` : dates),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "bar-track",
+				"aria-hidden": "true",
+				children: free && /* @__PURE__ */ jsx("span", {
+					className: "bar",
+					style: { height: `${25 + 75 * (option.level ?? 1)}%` }
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "price-text",
+				"aria-hidden": "true",
+				children: free ? stay.total : copy.closed
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "muted",
+				"aria-hidden": "true",
+				children: [
+					arrival({ weekday: "short" }),
+					/* @__PURE__ */ jsx("br", {}),
+					arrival({
+						day: "numeric",
+						month: "short"
+					})
+				]
+			})
+		]
+	}) });
+};
+/** Which ends of a scrolled row have more beyond them, for the fade there. */
+const hiddenEdges = (row) => {
+	const start = row.scrollLeft > 4;
+	const end = row.scrollLeft + row.clientWidth < row.scrollWidth - 4;
+	return start && end ? "both" : start ? "start" : end ? "end" : void 0;
+};
+const PriceCalendarView = ({ rentalId }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const calendar = useStateValue(statePath("priceCalendars", rentalId)) ?? null;
+	const row = useRef(null);
+	const [fade, setFade] = useState();
+	useEffect(() => {
+		const element = row.current;
+		if (!element || !calendar) return;
+		const cheapest = calendar.options.findIndex((option) => option.stayId !== null && option.stayId === calendar.cheapest);
+		const asked = calendar.options.findIndex((option) => option.start === calendar.asked);
+		const column = element.children[cheapest >= 0 ? cheapest : asked];
+		if (column) {
+			const end = column.offsetLeft + column.offsetWidth;
+			if (end > element.clientWidth) element.scrollLeft = end - element.clientWidth;
+		}
+		setFade(hiddenEdges(element));
+	}, [calendar]);
+	if (!calendar || calendar.options.length === 0) return null;
+	return /* @__PURE__ */ jsx("section", {
+		className: "card price-calendar",
+		"aria-label": copy.priceCalendar,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "card-title",
+					children: copy.priceCalendar
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "muted",
+					children: [counted(copy.priceCalendarNights, calendar.nights, locale), rental ? ` · ${rental.name}` : ""]
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					ref: row,
+					className: "price-columns",
+					"data-fade": fade,
+					onScroll: (event) => setFade(hiddenEdges(event.currentTarget)),
+					children: calendar.options.map((option) => /* @__PURE__ */ jsx(PriceColumn, {
+						rentalId,
+						option,
+						asked: option.start === calendar.asked,
+						cheapest: option.stayId !== null && option.stayId === calendar.cheapest
+					}, option.start))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "legend muted",
+					children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-cheapest": "true" }), copy.cheapest] }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", { "data-asked": "true" }), copy.yourStay] })]
+				})
+			]
+		})
+	});
+};
+const ReviewsView = ({ rentalId }) => {
+	const { copy, locale } = useChat();
+	const rental = useRental(rentalId);
+	const reviews = useStateValue(statePath("reviews", rentalId)) ?? null;
+	if (!reviews) return null;
+	return /* @__PURE__ */ jsx("section", {
+		className: "card reviews",
+		"aria-label": copy.reviewsTitle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsxs("h3", {
+					className: "card-title",
+					children: [copy.reviewsTitle, rental ? ` · ${rental.name}` : ""]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "score",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "score-value",
+						children: reviews.rating
+					}), /* @__PURE__ */ jsxs("span", { children: [reviews.grade && /* @__PURE__ */ jsx("strong", { children: reviews.grade }), /* @__PURE__ */ jsxs("span", {
+						className: "muted",
+						children: [" ", counted(copy.reviews, reviewCount(reviews.count), locale)]
+					})] })]
+				}),
+				reviews.categories.length > 0 && /* @__PURE__ */ jsx("dl", {
+					className: "review-categories",
+					children: reviews.categories.map((category) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: category.label }), /* @__PURE__ */ jsx("dd", { children: category.rating })] }, category.label))
+				}),
+				reviews.excerpts.map((excerpt) => /* @__PURE__ */ jsx("blockquote", {
+					className: "excerpt",
+					children: /* @__PURE__ */ jsx("p", { children: excerpt.text })
+				}, excerpt.text))
+			]
+		})
+	});
+};
+const FactsView = ({ rentalId, groups }) => {
+	const rental = useRental(rentalId);
+	const known = useStateValue(statePath("facts", rentalId)) ?? [];
+	const shown = groups.flatMap((label) => {
+		const group = known.find((candidate) => candidate.label.toLowerCase() === label.toLowerCase());
+		return group ? [group] : [];
+	});
+	if (!rental || shown.length === 0) return null;
+	return /* @__PURE__ */ jsx("section", {
+		className: "card facts",
+		"aria-label": rental.name,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "card-title",
+				children: rental.name
+			}), shown.map((group) => /* @__PURE__ */ jsxs("div", {
+				className: "fact-group",
+				children: [/* @__PURE__ */ jsx("h4", { children: group.label }), /* @__PURE__ */ jsx("ul", { children: group.items.map((item) => /* @__PURE__ */ jsx("li", { children: item }, item)) })]
+			}, group.label))]
+		})
+	});
+};
+const RentalMapView = ({ rentalId }) => {
+	const { copy } = useChat();
+	const rental = useRental(rentalId);
+	const href = useBookHref(rentalId, null);
+	if (!rental) return null;
+	return /* @__PURE__ */ jsx(MapCard, {
+		rental,
+		label: copy.mapLabel.replace("{name}", rental.name),
+		notice: copy.mapNotice,
+		load: copy.mapLoad,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "card-body",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					className: "card-title",
+					children: rental.name
+				}),
+				rental.place && /* @__PURE__ */ jsx("span", {
+					className: "muted",
+					children: rental.place
+				}),
+				/* @__PURE__ */ jsx(ReplyLink, {
+					className: "button",
+					href,
+					children: copy.viewRental
+				})
+			]
+		})
+	});
+};
+/** The registry the panel renders specs with. */
+const { registry } = defineRegistry(chatCatalog, { components: {
+	Stack: ({ children }) => /* @__PURE__ */ jsx("div", {
+		className: "ui",
+		children
+	}),
+	RentalCard: ({ props }) => /* @__PURE__ */ jsx(Card, {
+		rentalId: props.rentalId,
+		stayId: props.stayId
+	}),
+	RentalCarousel: ({ props }) => {
+		const { copy } = useChat();
+		const stays = useStateValue("/stays") ?? {};
+		const dates = new Set(props.items.flatMap((item) => {
+			const stay = item.stayId ? stays[item.stayId] : void 0;
+			return stay ? [`${stay.start}/${stay.end}`] : [];
+		}));
+		return /* @__PURE__ */ jsx(Snapper, {
+			count: props.items.length,
+			className: "carousel",
+			label: copy.rentalsFound,
+			...dates.size > 1 && { caption: copy.datesDiffer },
+			children: props.items.map((item) => /* @__PURE__ */ jsx(Card, {
+				rentalId: item.rentalId,
+				stayId: item.stayId,
+				inRow: true
+			}, `${item.rentalId}:${item.stayId}`))
+		});
+	},
+	StayQuote: ({ props }) => /* @__PURE__ */ jsx(Quote, {
+		stayId: props.stayId,
+		handover: props.handover ?? false
+	}),
+	PriceBreakdown: ({ props }) => {
+		const { copy, locale } = useChat();
+		const stay = useStay(props.stayId);
+		const rental = useRental(stay?.rentalId ?? "");
+		if (!stay?.bookable || !stay.total) return null;
+		const label = rental ? `${copy.priceBreakdown} · ${rental.name}` : copy.priceBreakdown;
+		return /* @__PURE__ */ jsx("section", {
+			className: "card breakdown",
+			"aria-label": label,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "card-body",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "muted",
+						children: label
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "foot-meta",
+						children: [
+							stayMeta(stay, copy, locale),
+							" · ",
+							partyText(stay, copy, locale)
+						]
+					}),
+					stay.lines.map((line) => /* @__PURE__ */ jsxs("div", {
+						className: "line",
+						children: [/* @__PURE__ */ jsx("span", { children: line.label }), /* @__PURE__ */ jsx("span", { children: line.amount })]
+					}, `${line.label}:${line.amount}`)),
+					/* @__PURE__ */ jsxs("div", {
+						className: "line total",
+						children: [/* @__PURE__ */ jsx("span", { children: copy.total }), /* @__PURE__ */ jsx("span", { children: stay.total })]
+					})
+				]
+			})
+		});
+	},
+	AlternativeStays: ({ props }) => {
+		const { copy, locale, busy } = useChat();
+		const rental = useRental(props.rentalId);
+		const stays = useStateValue("/stays") ?? {};
+		const [chosen, choose] = useSelection(props.rentalId);
+		const bookable = props.stayIds.flatMap((stayId) => {
+			const stay = stays[stayId];
+			return stay?.rentalId === props.rentalId && stay.bookable ? [stay] : [];
+		});
+		if (bookable.length === 0) return null;
+		const label = rental ? `${copy.otherDates} · ${rental.name}` : copy.otherDates;
+		const photo = rental?.images[0];
+		return /* @__PURE__ */ jsxs("section", {
+			className: "card alternatives",
+			"aria-label": label,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "rows-head",
+				children: [photo && /* @__PURE__ */ jsx("img", {
+					className: "thumb",
+					src: photo.src,
+					srcSet: photo.srcset,
+					sizes: "40px",
+					alt: ""
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: rental?.name ?? copy.otherDates }), /* @__PURE__ */ jsx("span", {
+					className: "muted",
+					children: [rental?.place, partyText(bookable[0], copy, locale)].filter(Boolean).join(" · ")
+				})] })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "rows",
+				children: bookable.map((stay) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "row",
+					"aria-pressed": stay.id === chosen,
+					"data-stay-id": stay.id,
+					disabled: busy || !stay.total,
+					onClick: () => choose(stay.id),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "radio",
+							"aria-hidden": "true",
+							children: stay.id === chosen && /* @__PURE__ */ jsx(Check, {})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "row-when",
+							children: [/* @__PURE__ */ jsx("strong", { children: weekdayPeriod(stay, locale) }), /* @__PURE__ */ jsxs("span", { children: [counted(copy.nights, nightsOf(stay), locale), /* @__PURE__ */ jsx(DealBadge, { stay })] })]
+						}),
+						stay.total && /* @__PURE__ */ jsx("span", {
+							className: "price",
+							children: stay.total
+						})
+					]
+				}, stay.id))
+			})]
+		});
+	},
+	AvailabilityCalendar: ({ props }) => /* @__PURE__ */ jsx(Calendar, {
+		rentalId: props.rentalId,
+		stayId: props.stayId
+	}),
+	PriceCalendar: ({ props }) => /* @__PURE__ */ jsx(PriceCalendarView, { rentalId: props.rentalId }),
+	ReviewSummary: ({ props }) => /* @__PURE__ */ jsx(ReviewsView, { rentalId: props.rentalId }),
+	RentalFacts: ({ props }) => /* @__PURE__ */ jsx(FactsView, {
+		rentalId: props.rentalId,
+		groups: props.groups
+	}),
+	RentalMap: ({ props }) => /* @__PURE__ */ jsx(RentalMapView, { rentalId: props.rentalId }),
+	Compare: ({ props }) => {
+		const stays = useStateValue("/stays") ?? {};
+		const first = props.items[0]?.stayId;
+		const reference = first && stays[first] || null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "compare",
+			children: props.items.map((item) => /* @__PURE__ */ jsx(CompareColumn, {
+				rentalId: item.rentalId,
+				stayId: item.stayId,
+				reference
+			}, `${item.rentalId}:${item.stayId}`))
+		});
+	},
+	StayLink: ({ props }) => {
+		const stay = useStay(props.stayId, props.rentalId);
+		return /* @__PURE__ */ jsx(BookLink, {
+			rentalId: props.rentalId,
+			stay
+		});
+	},
+	ContactLink: () => {
+		const { copy, contactPath } = useChat();
+		return /* @__PURE__ */ jsx(ReplyLink, {
+			className: "link",
+			href: chatHref(contactPath),
+			children: copy.contactLink
+		});
+	},
+	QuickReplies: ({ props }) => {
+		const { send, busy, live = true, answered } = useChat();
+		const options = live ? props.options : props.options.filter((option) => option === answered);
+		if (!send || options.length === 0) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "quick-replies",
+			children: options.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "chip",
+				"data-chosen": !live || void 0,
+				disabled: busy || !live,
+				onClick: () => send(option),
+				children: option
+			}, option))
+		});
+	}
+} });
+//#endregion
+//#region src/dock.tsx
+const CHOOSING = /* @__PURE__ */ new Set(["RentalCarousel", "Compare"]);
+const specsOf = (message) => message.parts.flatMap((part) => part.kind === "ui" ? [part.spec] : []);
+const stateOf = (spec) => spec.state ?? {};
+/** The reply's verdict on the pick, or `undefined` when it shows no stays and the older ones decide. */
+const pickIn = (message, index) => {
+	let quoted = false;
+	const priced = /* @__PURE__ */ new Map();
+	for (const spec of specsOf(message)) {
+		const state = stateOf(spec);
+		for (const element of Object.values(spec.elements ?? {})) {
+			if (CHOOSING.has(element.type)) return null;
+			if (element.type !== "StayQuote" && element.type !== "RentalCard") continue;
+			const stay = state.stays?.[String(element.props.stayId)];
+			const shown = stay?.bookable && stay.total;
+			if (element.type === "StayQuote" || shown) quoted = true;
+			if (shown) priced.set(stay.id, {
+				stay,
+				state
+			});
+		}
+	}
+	if (!quoted) return void 0;
+	const [only, ...more] = priced.values();
+	return only && more.length === 0 ? {
+		kind: "pick",
+		stay: only.stay,
+		state: only.state,
+		message: index
+	} : null;
+};
+/** See {@link DockOf}. */
+const dockOf = (messages, picked) => {
+	let decided = {
+		index: -1,
+		pick: null
+	};
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (message.role !== "assistant") continue;
+		const pick = pickIn(message, index);
+		if (pick !== void 0) {
+			decided = {
+				index,
+				pick
+			};
+			break;
+		}
+	}
+	if (picked && picked.after > decided.index) {
+		const part = messages[picked.message]?.parts[picked.part];
+		const state = part?.kind === "ui" ? stateOf(part.spec) : {};
+		const stay = state.stays?.[picked.stayId];
+		if (stay?.bookable && stay.total) return {
+			kind: "pick",
+			stay,
+			state,
+			message: picked.message
+		};
+	}
+	if (decided.pick) return decided.pick;
+	for (let index = messages.length - 1; index >= 0; index--) {
+		const message = messages[index];
+		if (message.role !== "assistant") continue;
+		const specs = specsOf(message);
+		for (let at = specs.length - 1; at >= 0; at--) {
+			const trip = stateOf(specs[at]).trip;
+			if (trip) return {
+				kind: "trip",
+				trip
+			};
+		}
+	}
+	return null;
+};
+/** "Juli–Aug. 2027" from `YYYY-MM` months; "Juni, Sept. 2027" when they leave a gap, each month with
+*  its year when they span two ("Dez. 2026, Feb. 2027"). */
+const monthsText = (months, locale) => {
+	const sorted = [...new Set(months)].sort();
+	const first = sorted[0];
+	const last = sorted.at(-1);
+	const withYear = new Intl.DateTimeFormat(dateLocale(locale), {
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	if ((Number(last.slice(0, 4)) - Number(first.slice(0, 4))) * 12 + Number(last.slice(5, 7)) - Number(first.slice(5, 7)) === sorted.length - 1) return sorted.length === 1 ? withYear.format(day(`${first}-01`)) : withYear.formatRange(day(`${first}-01`), day(`${last}-01`));
+	const inDate = new Intl.DateTimeFormat(dateLocale(locale), {
+		day: "numeric",
+		month: "short",
+		timeZone: "UTC"
+	});
+	const month = (value) => inDate.formatToParts(day(`${value}-01`)).find((part) => part.type === "month").value;
+	if (first.slice(0, 4) !== last.slice(0, 4)) return sorted.map((value) => `${month(value)} ${value.slice(0, 4)}`).join(", ");
+	return `${sorted.map(month).join(", ")} ${last.slice(0, 4)}`;
+};
+/** The trip's parts as the bar's chips, each with what a tap puts into the input. */
+const tripChips = (trip, copy, locale) => {
+	const chips = [];
+	const { period, party } = trip;
+	if (period?.kind === "dates") chips.push({
+		key: "period",
+		text: shortPeriod(period, locale),
+		starter: "period"
+	});
+	if (period?.kind === "months") chips.push({
+		key: "period",
+		text: monthsText(period.months, locale),
+		starter: "period"
+	});
+	if (period?.kind === "windows" && period.windows.length > 0) chips.push({
+		key: "period",
+		text: [...period.windows].sort((a, b) => a.from.localeCompare(b.from)).map((window) => shortPeriod({
+			start: window.from,
+			end: window.to
+		}, locale)).join(", "),
+		starter: "period"
+	});
+	if (period?.kind === "months" && period.weekend) chips.push({
+		key: "weekend",
+		text: copy.weekend,
+		starter: "period"
+	});
+	const children = party.children + party.babies;
+	chips.push({
+		key: "party",
+		text: [
+			counted(copy.adultsShort, party.adults, locale),
+			...children ? [counted(copy.children, children, locale)] : [],
+			...party.pets ? [counted(copy.pets, party.pets, locale)] : []
+		].join(" + "),
+		starter: "party",
+		assumed: trip.partyAssumed
+	});
+	const nights = period?.kind === "dates" ? null : period?.nights;
+	if (nights) chips.push({
+		key: "nights",
+		text: counted(copy.nights, nights, locale),
+		starter: "nights"
+	});
+	for (const wish of trip.wishes) chips.push({
+		key: `wish:${wish}`,
+		text: wish,
+		starter: "wishes"
+	});
+	return chips;
+};
+const Pick = ({ dock, onShow }) => {
+	const { copy, locale, searchPath } = useChat();
+	const { stay, state } = dock;
+	const rental = state.rentals?.[stay.rentalId] ?? null;
+	const photo = rental?.images[0];
+	const href = bookHref({
+		page: state.pages?.[stay.rentalId] ?? null,
+		booking: state.bookingPages?.[stay.rentalId] ?? null
+	}, stay, searchPath);
+	const { party } = stay;
+	const guests = counted(copy.guests, party.adults + party.children + party.babies, locale);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dock-bar",
+		"data-kind": "pick",
+		role: "region",
+		"aria-label": copy.yourPick,
+		children: [
+			photo && /* @__PURE__ */ jsx("img", {
+				className: "thumb",
+				src: photo.src,
+				srcSet: photo.srcset,
+				sizes: "40px",
+				alt: ""
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "dock-text",
+				onClick: onShow,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "dock-name",
+					children: rental?.name
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "dock-sub",
+					children: [
+						/* @__PURE__ */ jsx("b", {
+							className: "price",
+							children: stay.total
+						}),
+						" · ",
+						shortPeriod(stay, locale),
+						" · ",
+						guests
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(ReplyLink, {
+				className: "button compact",
+				href,
+				children: [copy.book, /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: rental ? `, ${rental.name}` : ""
+				})]
+			})
+		]
+	});
+};
+const Trip = ({ trip }) => {
+	const { copy, locale, suggest } = useChat();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dock-bar",
+		"data-kind": "trip",
+		role: "region",
+		"aria-label": copy.yourTrip,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "trip-chips",
+			children: tripChips(trip, copy, locale).map((chip) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "trip-chip",
+				"data-assumed": chip.assumed || void 0,
+				onClick: () => suggest?.(copy.tripStarters[chip.starter]),
+				children: [chip.text, chip.assumed && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("em", { children: copy.assumed })] })]
+			}, chip.key))
+		})
+	});
+};
+/** The bar; nothing without a pick or a trip. `onShow` brings the pick's card into view. */
+const DockBar = ({ dock, onShow }) => {
+	if (!dock) return null;
+	return dock.kind === "pick" ? /* @__PURE__ */ jsx(Pick, {
+		dock,
+		onShow: () => onShow(dock.message, dock.stay.id)
+	}) : /* @__PURE__ */ jsx(Trip, { trip: dock.trip });
+};
+//#endregion
+//#region src/panel.tsx
+/** Appends one event's content to the reply being streamed (the last message). */
+const appendToReply = (messages, part) => {
+	const last = messages.at(-1);
+	if (!last || last.role !== "assistant") return [...messages, {
+		role: "assistant",
+		parts: [part],
+		unconfirmed: true
+	}];
+	const tail = last.parts.at(-1);
+	const parts = part.kind === "text" && tail?.kind === "text" ? [...last.parts.slice(0, -1), {
+		kind: "text",
+		text: tail.text + part.text
+	}] : [...last.parts, part];
+	return [...messages.slice(0, -1), {
+		...last,
+		parts
+	}];
+};
+/** The service finished the turn: its messages, from its visitor message on, are the
+*  conversation's now. An earlier turn it refused stays unconfirmed, on this page only. */
+const confirmed = (messages) => {
+	const turn = messages.findLastIndex((message) => message.role === "visitor");
+	return messages.map((message, index) => index >= turn && message.unconfirmed ? {
+		role: message.role,
+		parts: message.parts
+	} : message);
+};
+/** The choices as storage indexes them: it keeps only confirmed messages, and a choice names its
+*  message by index, so a refused turn before it moves it up. A choice in a dropped message goes. */
+const storedChoices = (messages, selected, picked) => {
+	const kept = (before) => messages.slice(0, before).filter((message) => !message.unconfirmed).length;
+	const moved = (index) => messages[index]?.unconfirmed ? null : kept(index);
+	const storedSelected = {};
+	for (const [key, stayId] of Object.entries(selected)) {
+		const at = key.indexOf(":");
+		const index = moved(Number(key.slice(0, at)));
+		if (index !== null) storedSelected[`${index}${key.slice(at)}`] = stayId;
+	}
+	const message = picked ? moved(picked.message) : null;
+	return {
+		selected: storedSelected,
+		picked: picked && message !== null ? {
+			...picked,
+			message,
+			after: kept(picked.after)
+		} : null
+	};
+};
+const SCROLL_LOCK = "data-v-office-chat-open";
+/** Locks the page's scroll until the returned function runs. The rule lives in the page's head (a
+*  shadow root's styles cannot reach <html>) and is added once. */
+const lockPageScroll = () => {
+	const root = document.documentElement;
+	if (!document.getElementById(SCROLL_LOCK)) {
+		const style = document.createElement("style");
+		style.id = SCROLL_LOCK;
+		style.textContent = `html[${SCROLL_LOCK}] { overflow: hidden; }`;
+		document.head.append(style);
+	}
+	root.setAttribute(SCROLL_LOCK, "");
+	return () => root.removeAttribute(SCROLL_LOCK);
+};
+/** The assistant's text, its `**bold**` (a rental's name, the dates) as strong text: nothing else
+*  is read as markup, so the model's text never becomes HTML. */
+const RichText = ({ text }) => /* @__PURE__ */ jsx(Fragment, { children: text.split(/\*\*(.+?)\*\*/g).map((piece, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("strong", { children: piece }, index) : piece) });
+/** One card spec of a message; its components learn which part of the message they are in, for the
+*  stays the visitor chooses in them. */
+const SpecView = ({ spec, part }) => {
+	const context = useContext(ChatContext);
+	return /* @__PURE__ */ jsx(ChatContext.Provider, {
+		value: {
+			...context,
+			part
+		},
+		children: /* @__PURE__ */ jsx(JSONUIProvider, {
+			registry,
+			initialState: spec.state ?? {},
+			children: /* @__PURE__ */ jsx(Renderer, {
+				spec,
+				registry
+			})
+		})
+	});
+};
+const Consent = ({ copy, pending, privacyPath, onAccept, buttonRef }) => /* @__PURE__ */ jsxs("div", {
+	className: "consent",
+	children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "message",
+			"data-role": "assistant",
+			children: copy.greeting
+		}),
+		pending && /* @__PURE__ */ jsxs("figure", {
+			className: "pending",
+			children: [/* @__PURE__ */ jsx("figcaption", {
+				className: "muted",
+				children: copy.yourMessage
+			}), /* @__PURE__ */ jsx("p", { children: pending })]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "consent-card",
+			children: [/* @__PURE__ */ jsxs("p", { children: [copy.consent, privacyPath && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("a", {
+				className: "link",
+				href: privacyPath,
+				target: "_blank",
+				rel: "noopener",
+				children: copy.privacyLink
+			})] })] }), /* @__PURE__ */ jsx("button", {
+				ref: buttonRef,
+				type: "button",
+				className: "button compact",
+				onClick: onAccept,
+				children: copy.consentAccept
+			})]
+		})
+	]
+});
+/** Shown until the reply's text: a search takes seconds, and three dots alone read as nothing.
+*  Hidden from a screen reader: inside the busy log it may go unannounced, so the panel's own status,
+*  outside the log, says it. */
+const Thinking = ({ label }) => /* @__PURE__ */ jsxs("div", {
+	className: "thinking",
+	"aria-hidden": "true",
+	children: [
+		/* @__PURE__ */ jsx("i", {}),
+		/* @__PURE__ */ jsx("i", {}),
+		/* @__PURE__ */ jsx("i", {}),
+		/* @__PURE__ */ jsx("span", {
+			className: "thinking-label",
+			children: label
+		})
+	]
+});
+/** Why the chat cannot answer, as its reply to the visitor's message, and where to go instead; with
+*  `onRetry`, first the way to send it again. */
+const Fallback = ({ reason, copy, searchPath, contactPath, onRetry }) => /* @__PURE__ */ jsxs("div", {
+	className: "fallback",
+	role: "status",
+	children: [/* @__PURE__ */ jsx("p", {
+		className: "message",
+		"data-role": "assistant",
+		children: reason === "busy" ? copy.busy : copy.unavailable
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "fallback-links",
+		children: [
+			onRetry && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "button",
+				onClick: onRetry,
+				children: copy.retry
+			}),
+			/* @__PURE__ */ jsx("a", {
+				className: onRetry ? "link" : "button",
+				href: chatHref(searchPath),
+				children: copy.searchLink
+			}),
+			/* @__PURE__ */ jsx("a", {
+				className: "link",
+				href: chatHref(contactPath),
+				children: copy.contactLink
+			})
+		]
+	})]
+});
+/** One message's place in the conversation, for its components: whether it is the newest (its quick
+*  replies still choose) and what the visitor answered it with. Messages from `end` on (a refused
+*  message) answer nothing. */
+const MessageContext = ({ index, messages, end, children }) => {
+	const context = useContext(ChatContext);
+	const next = index + 1 < end ? messages[index + 1] : void 0;
+	const answered = next?.role === "visitor" && next.parts[0]?.kind === "text" ? next.parts[0].text : void 0;
+	return /* @__PURE__ */ jsx(ChatContext.Provider, {
+		value: {
+			...context,
+			message: index,
+			live: index === end - 1,
+			...answered && { answered }
+		},
+		children
+	});
+};
+/** A refusal that a second try can get past: the message goes back into the field to send again. */
+const RETRYABLE = /* @__PURE__ */ new Set(["busy", "error"]);
+function Panel(props) {
+	const { copy, endpoint, open, pending, onSent, onStarted, onClose } = props;
+	const stored = useMemo(() => loadConversation(endpoint), [endpoint]);
+	const [accepted, setAccepted] = useState(stored !== null);
+	const [messages, setMessages] = useState(stored?.messages ?? []);
+	const [selected, setSelected] = useState(stored?.selected ?? {});
+	const [picked, setPicked] = useState(stored?.picked ?? null);
+	const [draft, setDraft] = useState("");
+	const [streaming, setStreaming] = useState(false);
+	const [unavailable, setUnavailable] = useState(null);
+	const [step, setStep] = useState(null);
+	const [noticeOpen, setNoticeOpen] = useState(false);
+	const [keyboard, setKeyboard] = useState(false);
+	const session = useRef(stored?.sessionId ?? null);
+	const abort = useRef(null);
+	const list = useRef(null);
+	const following = useRef(true);
+	const lastRole = useRef(stored?.messages.at(-1)?.role);
+	const start = useRef(null);
+	const composer = useRef(null);
+	const panel = useRef(null);
+	const info = useRef(null);
+	const [sheetHost, setSheetHost] = useState(null);
+	const lastActivity = useRef(stored?.savedAt ?? Date.now());
+	const hasMessages = messages.length > 0;
+	const last = messages.at(-1);
+	const waiting = streaming && !unavailable && (last?.role === "visitor" || !last?.parts.some((part) => part.kind === "text"));
+	const expired = () => Date.now() - lastActivity.current >= SESSION_TTL_S * 1e3;
+	const waitingLabel = step !== null && Object.hasOwn(copy.status, step) ? copy.status[step] : copy.thinking;
+	const dock = useMemo(() => dockOf(messages, picked), [messages, picked]);
+	const lastMessage = messages.at(-1);
+	const retryable = unavailable !== null && RETRYABLE.has(unavailable) && !streaming && lastMessage?.role === "visitor" && lastMessage.parts[0]?.kind === "text" ? lastMessage.parts[0].text : null;
+	const answeredEnd = unavailable !== null && !streaming && lastMessage?.role === "visitor" && lastMessage.unconfirmed ? messages.length - 1 : messages.length;
+	useEffect(() => () => abort.current?.abort(), []);
+	useEffect(() => {
+		const role = messages.at(-1)?.role;
+		const replyStarts = role === "assistant" && lastRole.current === "visitor";
+		lastRole.current = role;
+		const element = list.current;
+		if (!open || !element) return;
+		const turnTop = ([...element.querySelectorAll(":scope > .turn")].at(-1)?.offsetTop ?? 0) - 12;
+		if (replyStarts) element.scrollTop = turnTop;
+		else if (role === "assistant" && following.current) element.scrollTop = Math.max(element.scrollTop, Math.min(element.scrollHeight - element.clientHeight, turnTop));
+		else if (role === "visitor" || following.current) element.scrollTop = element.scrollHeight;
+	}, [
+		messages,
+		open,
+		waiting,
+		unavailable
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const touch = window.matchMedia?.("(pointer: coarse)").matches;
+		if (accepted && hasMessages && touch) panel.current?.focus();
+		else (accepted ? composer : start).current?.focus();
+	}, [accepted, open]);
+	useEffect(() => {
+		onStarted(hasMessages);
+		if (messages.at(-1)?.unconfirmed) return;
+		const kept = messages.filter((message) => !message.unconfirmed);
+		if (kept.length > 0) saveConversation(endpoint, {
+			sessionId: session.current,
+			messages: kept,
+			...storedChoices(messages, selected, picked)
+		}, lastActivity.current);
+	}, [
+		endpoint,
+		hasMessages,
+		messages,
+		onStarted,
+		selected,
+		picked
+	]);
+	/** Sends one visitor message, typed or tapped (QuickReplies); nothing while a reply streams. */
+	const submit = async (text) => {
+		const message = text.trim().slice(0, MAX_MESSAGE_CHARS);
+		if (!message || streaming) return;
+		const fresh = expired();
+		if (fresh) {
+			session.current = null;
+			clearConversation(endpoint);
+			setSelected({});
+			setPicked(null);
+		}
+		setDraft((current) => current.trim() === message.trim() ? "" : current);
+		const restoreDraft = () => setDraft((current) => current || message);
+		setUnavailable(null);
+		setStep(null);
+		setStreaming(true);
+		setMessages((current) => {
+			const before = fresh ? [] : current;
+			const last = before.at(-1);
+			return [...last?.role === "visitor" && last.unconfirmed && last.parts[0]?.kind === "text" && last.parts[0].text === message ? before.slice(0, -1) : before, {
+				role: "visitor",
+				parts: [{
+					kind: "text",
+					text: message
+				}],
+				unconfirmed: true
+			}];
+		});
+		const sentAt = Date.now();
+		const controller = new AbortController();
+		abort.current = controller;
+		try {
+			await sendMessage(endpoint, {
+				sessionId: session.current,
+				message,
+				locale: props.locale,
+				clientVersion: props.clientVersion,
+				picked: dock?.kind === "pick" ? dock.stay.id : null
+			}, (chatEvent) => {
+				if (controller.signal.aborted) return;
+				if (chatEvent.type === "session") session.current = chatEvent.sessionId;
+				else if (chatEvent.type === "status") setStep(chatEvent.step);
+				else if (chatEvent.type === "text") {
+					setStep(null);
+					setMessages((current) => appendToReply(current, {
+						kind: "text",
+						text: chatEvent.delta
+					}));
+				} else if (chatEvent.type === "ui") setMessages((current) => appendToReply(current, {
+					kind: "ui",
+					spec: chatEvent.spec
+				}));
+				else if (chatEvent.type === "unavailable") {
+					setStep(null);
+					setUnavailable(chatEvent.reason);
+					if (RETRYABLE.has(chatEvent.reason)) restoreDraft();
+				} else if (chatEvent.type === "done") {
+					lastActivity.current = sentAt;
+					setStep(null);
+					setMessages(confirmed);
+				}
+			}, controller.signal);
+		} catch {
+			if (!controller.signal.aborted) {
+				setUnavailable("error");
+				restoreDraft();
+			}
+		} finally {
+			if (abort.current === controller) setStreaming(false);
+		}
+	};
+	useEffect(() => {
+		if (!open || !accepted || pending === null) return;
+		onSent();
+		submit(pending);
+	}, [
+		open,
+		accepted,
+		pending,
+		onSent
+	]);
+	/** A new conversation: the service starts a new session at the next message. */
+	const restart = () => {
+		abort.current?.abort();
+		abort.current = null;
+		setStreaming(false);
+		setMessages([]);
+		setSelected({});
+		setPicked(null);
+		setUnavailable(null);
+		setStep(null);
+		setNoticeOpen(false);
+		session.current = null;
+		clearConversation(endpoint);
+		composer.current?.focus();
+	};
+	useEffect(() => {
+		if (!open) return;
+		return lockPageScroll();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		document.addEventListener("astro:before-swap", onClose);
+		return () => document.removeEventListener("astro:before-swap", onClose);
+	}, [open, onClose]);
+	useEffect(() => {
+		if (open && hasMessages && !streaming && expired()) restart();
+	}, [open]);
+	/** Tab stays in the panel while it is open: the page behind the scrim is out of reach. */
+	const trapTab = (event) => {
+		const element = panel.current;
+		if (event.key !== "Tab" || !element) return;
+		const focusable = [...element.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled])")];
+		const active = element.getRootNode().activeElement;
+		const edge = event.shiftKey ? focusable[0] : focusable.at(-1);
+		const outside = !element.contains(active) || event.shiftKey && active === element;
+		if (focusable.length === 0 || active === edge || outside) {
+			event.preventDefault();
+			(event.shiftKey ? focusable.at(-1) : focusable[0])?.focus();
+		}
+	};
+	const send = (event) => {
+		event.preventDefault();
+		submit(draft);
+	};
+	/** A stay chosen in place: shown by its card or row, and the bar's pick until a later reply shows
+	*  another. */
+	const select = (where, stayId) => {
+		setSelected((current) => ({
+			...current,
+			[`${where.message}:${where.part}:${where.rentalId}`]: stayId
+		}));
+		setPicked({
+			stayId,
+			message: where.message,
+			part: where.part,
+			after: messages.length
+		});
+	};
+	/** A message's start in the field, the caret after it, for the visitor to finish. */
+	const suggest = (text) => {
+		setDraft(text);
+		const field = composer.current;
+		if (!field) return;
+		field.focus();
+		requestAnimationFrame(() => field.setSelectionRange(field.value.length, field.value.length));
+	};
+	/** Brings the bar's stay into view in the message it was quoted in, and marks it for a moment. The
+	*  list's own scrollTop, as for new replies. */
+	const showStay = (message, stayId) => {
+		const element = list.current;
+		const card = [...element?.querySelectorAll(`[data-message="${message}"] [data-stay-id]`) ?? []].find((candidate) => candidate.dataset.stayId === stayId);
+		if (!element || !card) return;
+		element.scrollTop += card.getBoundingClientRect().top - element.getBoundingClientRect().top - 12;
+		card.setAttribute("data-pulse", "");
+		setTimeout(() => card.removeAttribute("data-pulse"), 1600);
+	};
+	return /* @__PURE__ */ jsxs(ChatContext.Provider, {
+		value: {
+			...props,
+			send: (text) => void submit(text),
+			busy: streaming,
+			suggest,
+			selected,
+			select,
+			overlay: open ? sheetHost : null
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "scrim",
+			hidden: !open,
+			"aria-hidden": "true",
+			onClick: onClose
+		}), /* @__PURE__ */ jsxs("section", {
+			className: "panel",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": copy.title,
+			ref: panel,
+			tabIndex: -1,
+			hidden: !open,
+			inert: !open,
+			onPointerDown: (event) => {
+				setKeyboard(false);
+				const target = event.target;
+				if (noticeOpen && !target.closest(".notice-pop, .info")) setNoticeOpen(false);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Tab") setKeyboard(true);
+				if (event.key === "Escape") {
+					if (noticeOpen) {
+						setNoticeOpen(false);
+						info.current?.focus();
+					} else onClose();
+				}
+				trapTab(event);
+			},
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "header",
+					"data-slim": hasMessages || void 0,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "title-block",
+							children: [/* @__PURE__ */ jsxs("h2", {
+								className: "title",
+								children: [copy.title, /* @__PURE__ */ jsx("span", {
+									className: "badge",
+									children: copy.aiBadge
+								})]
+							}), hasMessages && /* @__PURE__ */ jsxs("p", {
+								className: "notice-short",
+								children: [/* @__PURE__ */ jsx("span", { children: copy.noticeShort }), /* @__PURE__ */ jsx("button", {
+									ref: info,
+									type: "button",
+									className: "info",
+									"aria-label": copy.noticeMore,
+									title: copy.noticeMore,
+									"aria-expanded": noticeOpen,
+									onClick: () => setNoticeOpen(!noticeOpen),
+									children: /* @__PURE__ */ jsx(CircleInfo, {})
+								})]
+							})]
+						}),
+						hasMessages && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "icon-button restart",
+							"aria-label": copy.newConversation,
+							title: copy.newConversation,
+							onClick: restart,
+							children: /* @__PURE__ */ jsx(Restart, {})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "icon-button close",
+							"aria-label": copy.close,
+							onClick: onClose,
+							children: /* @__PURE__ */ jsx(Cross, {})
+						}),
+						hasMessages && noticeOpen && /* @__PURE__ */ jsx("p", {
+							className: "notice-pop",
+							role: "note",
+							children: copy.notice
+						})
+					]
+				}),
+				!hasMessages && /* @__PURE__ */ jsx("p", {
+					className: "notice",
+					children: copy.notice
+				}),
+				accepted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "messages",
+						role: "log",
+						"aria-busy": streaming,
+						ref: list,
+						onScroll: (event) => {
+							const element = event.currentTarget;
+							following.current = element.scrollHeight - element.scrollTop - element.clientHeight < 80;
+						},
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "message",
+								"data-role": "assistant",
+								children: copy.greeting
+							}),
+							messages.map((message, index) => /* @__PURE__ */ jsxs("div", {
+								className: message.role === "assistant" ? "ui" : "turn",
+								"data-message": index,
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [message.role === "assistant" ? copy.title : copy.yourMessage, ":"]
+								}), /* @__PURE__ */ jsx(MessageContext, {
+									index,
+									messages,
+									end: answeredEnd,
+									children: message.parts.map((part, partIndex) => part.kind === "text" ? /* @__PURE__ */ jsx("div", {
+										className: "message",
+										"data-role": message.role,
+										children: message.role === "assistant" ? /* @__PURE__ */ jsx(RichText, { text: part.text }) : part.text
+									}, partIndex) : /* @__PURE__ */ jsx(SpecView, {
+										spec: part.spec,
+										part: partIndex
+									}, partIndex))
+								})]
+							}, index)),
+							unavailable && /* @__PURE__ */ jsx(Fallback, {
+								reason: unavailable,
+								copy,
+								searchPath: props.searchPath,
+								contactPath: props.contactPath,
+								onRetry: retryable === null ? null : () => void submit(retryable)
+							}),
+							waiting && /* @__PURE__ */ jsx(Thinking, { label: waitingLabel })
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "sr-only",
+						role: "status",
+						children: waiting ? waitingLabel : ""
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "dock",
+						children: [
+							/* @__PURE__ */ jsx(DockBar, {
+								dock,
+								onShow: showStay
+							}),
+							!hasMessages && copy.suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+								className: "suggestions",
+								children: copy.suggestions.map((suggestion) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "suggestion",
+									onClick: () => void submit(suggestion),
+									children: [/* @__PURE__ */ jsx(TopicIcon, { text: suggestion }), suggestion]
+								}, suggestion))
+							}),
+							/* @__PURE__ */ jsxs("form", {
+								className: "composer",
+								"data-keyboard": keyboard || void 0,
+								onSubmit: send,
+								children: [/* @__PURE__ */ jsx("textarea", {
+									ref: composer,
+									rows: 1,
+									value: draft,
+									maxLength: MAX_MESSAGE_CHARS,
+									placeholder: copy.placeholder,
+									"aria-label": copy.placeholder,
+									onChange: (event) => setDraft(event.target.value),
+									onKeyDown: (event) => {
+										if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+										event.preventDefault();
+										event.currentTarget.form?.requestSubmit();
+									}
+								}), /* @__PURE__ */ jsx("button", {
+									type: "submit",
+									className: "send",
+									"aria-label": copy.send,
+									disabled: streaming || !draft.trim(),
+									children: /* @__PURE__ */ jsx(Arrow, {})
+								})]
+							})
+						]
+					})
+				] }) : /* @__PURE__ */ jsx(Consent, {
+					copy,
+					pending,
+					privacyPath: props.privacyPath,
+					onAccept: () => setAccepted(true),
+					buttonRef: start
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sheet-host",
+					ref: setSheetHost
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Panel as default };