fauna-api 0.0.0-stage → 1.0.676

package/dist/src/ui/maps.js

@@ -0,0 +1,547 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import maplibregl from "maplibre-gl";
+import { gsap } from "gsap";
+import { Fauna } from "fauna-api";
+function reducedMotion() {
+    try {
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    catch {
+        return false;
+    }
+}
+async function proxied(source, path, init) {
+    const response = await fetch(`${source.proxy.replace(/\/+$/, "")}${path}`, {
+        method: init.method,
+        headers: {
+            ...(init.body !== undefined ? { "Content-Type": "application/json" } : {}),
+            ...source.headers,
+        },
+        body: init.body !== undefined ? JSON.stringify(init.body) : undefined,
+    });
+    if (!response.ok)
+        throw new Error(await response.text());
+    return await response.json();
+}
+function requireSource(source) {
+    if (!source.proxy && !source.authorization)
+        throw new Error("Maps need authorization or a proxy.");
+}
+async function buyPass(source, theme, tiles) {
+    requireSource(source);
+    if (source.proxy) {
+        const pass = await proxied(source, "/maps/tiles/pass", { method: "POST", body: { theme, tiles } });
+        return { ...pass, expires: new Date(pass.expires) };
+    }
+    return Fauna.Maps.createTilePass(source.authorization, { theme, tiles }, source.group);
+}
+function tileTemplate(source, pass) {
+    if (source.proxy)
+        return `${source.proxy.replace(/\/+$/, "")}/maps/tile?pass=${encodeURIComponent(pass.id)}&z={z}&x={x}&y={y}`;
+    return Fauna.Maps.getTileURL(pass);
+}
+async function attributionFor(source, pass, zoom, bounds) {
+    if (source.proxy) {
+        const query = new URLSearchParams({ pass: pass.id, zoom: String(zoom), north: String(bounds.north), south: String(bounds.south), east: String(bounds.east), west: String(bounds.west) });
+        return proxied(source, `/maps/tiles/attribution?${query}`, { method: "GET" });
+    }
+    return Fauna.Maps.getAttribution(pass, zoom, bounds);
+}
+async function suggest(source, text, near) {
+    requireSource(source);
+    if (source.proxy)
+        return proxied(source, "/maps/places/autocomplete", { method: "POST", body: { text, near } });
+    return Fauna.Maps.autocomplete(source.authorization, text, { near }, source.group);
+}
+async function resolvePlace(source, place) {
+    requireSource(source);
+    const places = source.proxy
+        ? await proxied(source, "/maps/geocode", { method: "POST", body: { query: { place } } })
+        : await Fauna.Maps.geocode(source.authorization, { place }, source.group);
+    return places[0];
+}
+function cssColor(element, name, fallback) {
+    return getComputedStyle(element).getPropertyValue(name).trim() || fallback;
+}
+function routeFeatures(routes) {
+    return {
+        type: "FeatureCollection",
+        features: routes.filter((route) => route.path.length > 1).map((route) => ({
+            type: "Feature",
+            properties: { mode: route.mode },
+            geometry: { type: "LineString", coordinates: route.path.map((point) => [point.longitude, point.latitude]) },
+        })),
+    };
+}
+function markerElement(marker, onClick) {
+    const element = document.createElement("button");
+    element.type = "button";
+    element.className = `fauna-map-marker${marker.tone === "muted" ? " is-muted" : ""}`;
+    element.setAttribute("aria-label", marker.label ?? "Marker");
+    const pin = document.createElement("span");
+    pin.className = "fauna-map-pin";
+    element.appendChild(pin);
+    if (marker.label) {
+        const label = document.createElement("span");
+        label.className = "fauna-map-label";
+        label.textContent = marker.label;
+        element.appendChild(label);
+    }
+    if (onClick)
+        element.addEventListener("click", () => onClick(marker));
+    else
+        element.tabIndex = -1;
+    return element;
+}
+/**
+ * A map drawn from prepaid tile passes, with markers and route lines. A pass that
+ * runs out is replaced, up to `maxPasses`. The attribution the pass carries is
+ * always shown, as the tile provider's terms require.
+ */
+export function createMap(container, initial) {
+    let options = { fit: true, interactive: true, tiles: 150, maxPasses: 4, theme: "light", ...initial };
+    let map;
+    let pass;
+    let passes = 0;
+    let renewing = false;
+    let destroyed = false;
+    let markers = [];
+    let attributionTimer;
+    container.classList.add("fauna-map");
+    const canvas = document.createElement("div");
+    canvas.className = "fauna-map-canvas";
+    const credit = document.createElement("div");
+    credit.className = "fauna-map-attribution";
+    const logo = document.createElement("img");
+    logo.alt = "";
+    const text = document.createElement("span");
+    credit.append(logo, text);
+    const notice = document.createElement("div");
+    notice.className = "fauna-map-notice";
+    container.append(canvas, credit, notice);
+    const showAttribution = (value) => {
+        logo.src = value.logo;
+        text.textContent = value.text;
+    };
+    const showNotice = (message) => {
+        notice.textContent = message;
+        notice.classList.toggle("is-shown", Boolean(message));
+    };
+    const refreshAttribution = () => {
+        clearTimeout(attributionTimer);
+        attributionTimer = setTimeout(() => {
+            if (!map || !pass || destroyed)
+                return;
+            const bounds = map.getBounds();
+            const current = pass;
+            attributionFor(options, current, Math.round(map.getZoom()), {
+                north: bounds.getNorth(),
+                south: bounds.getSouth(),
+                east: bounds.getEast(),
+                west: bounds.getWest(),
+            }).then((value) => { if (current === pass && !destroyed)
+                showAttribution(value); }).catch(() => { });
+        }, 400);
+    };
+    const syncMarkers = () => {
+        if (!map)
+            return;
+        for (const marker of markers)
+            marker.remove();
+        markers = (options.markers ?? []).map((marker) => new maplibregl.Marker({ element: markerElement(marker, options.onMarkerClick), anchor: "bottom" })
+            .setLngLat([marker.coordinates.longitude, marker.coordinates.latitude])
+            .addTo(map));
+    };
+    const syncRoutes = () => {
+        if (!map || !map.isStyleLoaded())
+            return;
+        const data = routeFeatures(options.routes ?? []);
+        const source = map.getSource("fauna-routes");
+        if (source) {
+            source.setData(data);
+            return;
+        }
+        map.addSource("fauna-routes", { type: "geojson", data });
+        const color = (mode, fallback) => cssColor(container, `--maps-route-${mode}`, fallback);
+        const width = Number.parseFloat(cssColor(container, "--maps-route-width", "5")) || 5;
+        map.addLayer({
+            id: "fauna-routes-casing",
+            type: "line",
+            source: "fauna-routes",
+            layout: { "line-join": "round", "line-cap": "round" },
+            paint: { "line-color": cssColor(container, "--maps-route-casing", "#ffffff"), "line-width": width + 3, "line-opacity": 0.9 },
+        });
+        map.addLayer({
+            id: "fauna-routes-line",
+            type: "line",
+            source: "fauna-routes",
+            layout: { "line-join": "round", "line-cap": "round" },
+            paint: {
+                "line-color": ["match", ["get", "mode"],
+                    "drive", color("drive", "#AE1B28"),
+                    "walk", color("walk", "#8A8580"),
+                    "transit", color("transit", "#2F6FDE"),
+                    color("flight", "#161617")],
+                "line-width": width,
+                "line-dasharray": ["match", ["get", "mode"], "walk", ["literal", [0.6, 1.6]], ["literal", [1, 0]]],
+            },
+        });
+    };
+    const fitView = () => {
+        if (!map || options.fit === false)
+            return;
+        const points = [
+            ...(options.markers ?? []).map((marker) => marker.coordinates),
+            ...(options.routes ?? []).flatMap((route) => route.path),
+        ];
+        if (points.length === 0)
+            return;
+        if (points.length === 1) {
+            map.easeTo({ center: [points[0].longitude, points[0].latitude], zoom: options.zoom ?? 13, duration: reducedMotion() ? 0 : 600 });
+            return;
+        }
+        const bounds = new maplibregl.LngLatBounds();
+        for (const point of points)
+            bounds.extend([point.longitude, point.latitude]);
+        map.fitBounds(bounds, { padding: 48, maxZoom: 15, duration: reducedMotion() ? 0 : 700 });
+    };
+    const renew = async () => {
+        if (renewing || destroyed || !map)
+            return;
+        if (passes >= (options.maxPasses ?? 4)) {
+            showNotice("This map has used its tiles for now.");
+            return;
+        }
+        renewing = true;
+        try {
+            pass = await buyPass(options, options.theme ?? "light", options.tiles ?? 150);
+            passes++;
+            const source = map.getSource("fauna-base");
+            source?.setTiles([tileTemplate(options, pass)]);
+            showAttribution(pass.attribution);
+        }
+        catch (err) {
+            showNotice(err instanceof Error ? err.message : "The map could not load.");
+        }
+        finally {
+            renewing = false;
+        }
+    };
+    const start = async () => {
+        try {
+            pass = await buyPass(options, options.theme ?? "light", options.tiles ?? 150);
+            passes++;
+        }
+        catch (err) {
+            showNotice(err instanceof Error ? err.message : "The map could not load.");
+            return;
+        }
+        if (destroyed)
+            return;
+        showAttribution(pass.attribution);
+        const center = options.center ?? options.markers?.[0]?.coordinates ?? options.routes?.[0]?.path[0] ?? { latitude: 39.5, longitude: -98.35 };
+        map = new maplibregl.Map({
+            container: canvas,
+            style: {
+                version: 8,
+                sources: {
+                    "fauna-base": { type: "raster", tiles: [tileTemplate(options, pass)], tileSize: pass.size, maxzoom: pass.maxZoom },
+                },
+                layers: [{ id: "fauna-base", type: "raster", source: "fauna-base" }],
+            },
+            center: [center.longitude, center.latitude],
+            zoom: options.zoom ?? (options.center || options.markers?.length ? 12 : 3),
+            interactive: options.interactive !== false,
+            attributionControl: false,
+            dragRotate: false,
+            pitchWithRotate: false,
+        });
+        map.touchZoomRotate.disableRotation();
+        map.on("load", () => {
+            syncRoutes();
+            syncMarkers();
+            fitView();
+            if (!reducedMotion())
+                gsap.fromTo(canvas, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.4, ease: "power2.out" });
+        });
+        map.on("moveend", refreshAttribution);
+        map.on("error", (event) => {
+            if (event.error?.status === 402)
+                void renew();
+            else
+                console.warn("[maps]", event.error);
+        });
+    };
+    void start();
+    return {
+        get map() { return map; },
+        update(next) {
+            const before = options;
+            options = { ...options, ...next };
+            if (!map)
+                return;
+            if (next.markers !== undefined && next.markers !== before.markers)
+                syncMarkers();
+            if (next.routes !== undefined && next.routes !== before.routes)
+                syncRoutes();
+            if ((next.markers !== undefined && next.markers !== before.markers) || (next.routes !== undefined && next.routes !== before.routes))
+                fitView();
+            else if (next.center && (next.center.latitude !== before.center?.latitude || next.center.longitude !== before.center?.longitude)) {
+                map.easeTo({ center: [next.center.longitude, next.center.latitude], zoom: next.zoom ?? map.getZoom(), duration: reducedMotion() ? 0 : 600 });
+            }
+        },
+        destroy() {
+            destroyed = true;
+            clearTimeout(attributionTimer);
+            for (const marker of markers)
+                marker.remove();
+            map?.remove();
+            container.classList.remove("fauna-map");
+            canvas.remove();
+            credit.remove();
+            notice.remove();
+        },
+    };
+}
+/** A map for React. The source and theme are fixed for its life; markers, routes and the view follow props. */
+export function Map(props) {
+    const { className, style, ...options } = props;
+    const ref = useRef(null);
+    const instance = useRef(null);
+    const latest = useRef(options);
+    latest.current = options;
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const created = createMap(ref.current, latest.current);
+        instance.current = created;
+        return () => {
+            created.destroy();
+            instance.current = null;
+        };
+    }, [props.proxy, props.authorization, props.group?.id, props.theme]);
+    useEffect(() => {
+        instance.current?.update({ markers: options.markers, routes: options.routes, center: options.center, zoom: options.zoom, onMarkerClick: options.onMarkerClick });
+    }, [options.markers, options.routes, options.center?.latitude, options.center?.longitude, options.zoom, options.onMarkerClick]);
+    return _jsx("div", { ref: ref, className: className ? `fauna-map ${className}` : "fauna-map", style: style });
+}
+// Directions
+const MODE_ORDER = ["drive", "transit", "walk", "flight"];
+const MODE_LABELS = { drive: "Drive", transit: "Transit", walk: "Walk", flight: "Fly" };
+const MODE_ICONS = { drive: "directions_car", transit: "directions_transit", walk: "directions_walk", flight: "flight" };
+const VEHICLE_ICONS = { bus: "directions_bus", subway: "subway", train: "train", tram: "tram", ferry: "directions_boat" };
+export function formatDuration(seconds) {
+    const minutes = Math.max(1, Math.round(seconds / 60));
+    if (minutes < 60)
+        return `${minutes} min`;
+    const hours = Math.floor(minutes / 60);
+    const rest = minutes % 60;
+    return rest ? `${hours} h ${rest} min` : `${hours} h`;
+}
+export function formatDistance(meters, units = "metric") {
+    if (units === "imperial") {
+        const miles = meters / 1609.344;
+        if (miles < 0.1)
+            return `${Math.round(meters * 3.28084)} ft`;
+        return `${miles < 10 ? miles.toFixed(1) : Math.round(miles)} mi`;
+    }
+    if (meters < 1000)
+        return `${Math.round(meters)} m`;
+    const km = meters / 1000;
+    return `${km < 10 ? km.toFixed(1) : Math.round(km)} km`;
+}
+export function formatMoney(amount, currency) {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency, maximumFractionDigits: amount % 1 === 0 ? 0 : 2 }).format(amount);
+    }
+    catch {
+        return `${amount} ${currency}`;
+    }
+}
+function formatTime(value) {
+    if (!value)
+        return "";
+    const date = typeof value === "string" ? new Date(value) : value;
+    return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+/** Open where to book: a link, or a form posted in a new tab when the offer carries one. */
+export function openOffer(offer) {
+    if (!offer.form) {
+        window.open(offer.url, "_blank", "noopener");
+        return;
+    }
+    const form = document.createElement("form");
+    form.method = "POST";
+    form.action = offer.url;
+    form.target = "_blank";
+    form.rel = "noopener";
+    for (const [name, value] of new URLSearchParams(offer.form)) {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = name;
+        input.value = value;
+        form.appendChild(input);
+    }
+    document.body.appendChild(form);
+    form.submit();
+    form.remove();
+}
+function StepRow({ step, units }) {
+    const icon = step.mode === "transit" ? VEHICLE_ICONS[step.vehicle ?? ""] ?? "directions_transit" : MODE_ICONS[step.mode];
+    const times = step.departure && step.arrival ? `${formatTime(step.departure)} to ${formatTime(step.arrival)}` : "";
+    return (_jsxs("li", { className: `fauna-directions-step is-${step.mode}`, children: [_jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "fauna-directions-step-text", children: [_jsx("span", { children: step.instruction }), _jsx("span", { className: "fauna-directions-muted", children: [
+                            step.line && step.from ? `${step.line} from ${step.from}` : step.line,
+                            step.stops ? `${step.stops} stop${step.stops === 1 ? "" : "s"}` : "",
+                            times,
+                            step.distance ? formatDistance(step.distance, units) : "",
+                        ].filter(Boolean).join(", ") })] })] }));
+}
+function FlightRow({ flight, offers }) {
+    const [state, setState] = useState({ status: "idle", offers: [] });
+    const listRef = useRef(null);
+    useLayoutEffect(() => {
+        if (state.status === "open" && listRef.current && !reducedMotion()) {
+            gsap.fromTo(listRef.current.children, { y: 6, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.25, stagger: 0.04, ease: "power2.out" });
+        }
+    }, [state.status]);
+    const book = async () => {
+        if (!offers)
+            return;
+        if (state.status === "open") {
+            setState({ status: "idle", offers: state.offers });
+            return;
+        }
+        setState({ status: "loading", offers: [] });
+        try {
+            setState({ status: "open", offers: await offers(flight) });
+        }
+        catch {
+            setState({ status: "failed", offers: [] });
+        }
+    };
+    return (_jsxs("li", { className: "fauna-directions-flight", children: [_jsxs("div", { className: "fauna-directions-flight-main", children: [flight.logo ? _jsx("img", { src: flight.logo, alt: "" }) : _jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "flight" }), _jsxs("div", { className: "fauna-directions-step-text", children: [_jsxs("span", { children: [formatTime(flight.departure), " to ", formatTime(flight.arrival)] }), _jsx("span", { className: "fauna-directions-muted", children: [flight.airlines.join(", "), formatDuration(flight.duration), flight.stops === 0 ? "Nonstop" : `${flight.stops} stop${flight.stops === 1 ? "" : "s"}`, `${flight.from} to ${flight.to}`].join(", ") })] }), _jsx("strong", { className: "fauna-directions-price", children: formatMoney(flight.price.amount, flight.price.currency) }), offers && (_jsx("button", { type: "button", className: "fauna-directions-book", onClick: book, disabled: state.status === "loading", children: state.status === "loading" ? "Finding" : state.status === "open" ? "Hide" : "Book" }))] }), state.status === "failed" && _jsx("p", { className: "fauna-directions-muted", children: "Booking options are not available right now." }), state.status === "open" && (_jsxs("ul", { ref: listRef, className: "fauna-directions-offers", children: [state.offers.length === 0 && _jsx("li", { className: "fauna-directions-muted", children: "No one is selling this flight right now." }), state.offers.map((offer, index) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => openOffer(offer), children: [_jsx("span", { children: offer.seller }), offer.price && _jsx("strong", { children: formatMoney(offer.price.amount, offer.price.currency) }), _jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "open_in_new" })] }) }, `${offer.seller}${index}`)))] }))] }));
+}
+/** Ways to get somewhere: a tab per mode, the time, distance and cost, and the steps or flights. */
+export function Directions({ routes, flights = [], units = "metric", mode, recommended, onMode, offers, className }) {
+    const modes = MODE_ORDER.filter((value) => value === "flight" ? flights.length > 0 : routes.some((route) => route.mode === value));
+    const [selected, setSelected] = useState(mode ?? recommended ?? modes[0]);
+    const current = selected && modes.includes(selected) ? selected : modes[0];
+    const bodyRef = useRef(null);
+    const tabsRef = useRef(null);
+    const markRef = useRef(null);
+    useEffect(() => {
+        if (mode)
+            setSelected(mode);
+    }, [mode]);
+    useLayoutEffect(() => {
+        const tab = tabsRef.current?.querySelector(`[data-mode="${current}"]`);
+        const mark = markRef.current;
+        if (!tab || !mark)
+            return;
+        const to = { x: tab.offsetLeft, width: tab.offsetWidth };
+        if (reducedMotion())
+            gsap.set(mark, to);
+        else
+            gsap.to(mark, { ...to, duration: 0.35, ease: "power3.out" });
+        if (bodyRef.current && !reducedMotion())
+            gsap.fromTo(bodyRef.current, { autoAlpha: 0, y: 6 }, { autoAlpha: 1, y: 0, duration: 0.25, ease: "power2.out" });
+    }, [current, modes.length]);
+    if (modes.length === 0) {
+        return _jsx("div", { className: `fauna-directions${className ? ` ${className}` : ""}`, children: _jsx("p", { className: "fauna-directions-muted", children: "No way there was found." }) });
+    }
+    const route = routes.find((value) => value.mode === current);
+    const cheapest = flights.length ? flights.reduce((best, flight) => flight.price.amount < best.price.amount ? flight : best) : undefined;
+    const choose = (value) => {
+        setSelected(value);
+        onMode?.(value);
+    };
+    return (_jsxs("div", { className: `fauna-directions${className ? ` ${className}` : ""}`, children: [_jsxs("div", { ref: tabsRef, className: "fauna-directions-tabs", role: "tablist", children: [_jsx("span", { ref: markRef, className: "fauna-directions-mark", "aria-hidden": "true" }), modes.map((value) => (_jsxs("button", { type: "button", role: "tab", "data-mode": value, "aria-selected": value === current, className: value === current ? "is-current" : "", onClick: () => choose(value), children: [_jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: MODE_ICONS[value] }), MODE_LABELS[value], value === recommended && _jsx("span", { className: "fauna-directions-best", children: "Best" })] }, value)))] }), _jsx("div", { ref: bodyRef, className: "fauna-directions-body", role: "tabpanel", children: current === "flight" ? (_jsxs(_Fragment, { children: [cheapest && (_jsxs("div", { className: "fauna-directions-summary", children: [_jsxs("strong", { children: ["From ", formatMoney(cheapest.price.amount, cheapest.price.currency)] }), _jsxs("span", { className: "fauna-directions-muted", children: [flights.length, " flight", flights.length === 1 ? "" : "s"] })] })), _jsx("ul", { className: "fauna-directions-list", children: flights.map((flight) => _jsx(FlightRow, { flight: flight, offers: offers }, flight.id)) })] })) : route ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "fauna-directions-summary", children: [_jsx("strong", { children: formatDuration(route.duration) }), _jsx("span", { className: "fauna-directions-muted", children: [
+                                        formatDistance(route.distance, units),
+                                        route.fare ? formatMoney(route.fare.amount, route.fare.currency) : "",
+                                        route.departure && route.arrival ? `Leave ${formatTime(route.departure)}, arrive ${formatTime(route.arrival)}` : "",
+                                    ].filter(Boolean).join(", ") })] }), _jsx("ol", { className: "fauna-directions-list", children: route.steps.map((step, index) => _jsx(StepRow, { step: step, units: units }, index)) })] })) : null })] }));
+}
+/** A text box that suggests places as someone types and hands back the one they pick. */
+export function PlaceSearch({ onSelect, near, placeholder = "Search for a place", defaultValue = "", autoFocus, className, ...source }) {
+    const [text, setText] = useState(defaultValue);
+    const [suggestions, setSuggestions] = useState([]);
+    const [active, setActive] = useState(0);
+    const [open, setOpen] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const asked = useRef(0);
+    const listRef = useRef(null);
+    useEffect(() => {
+        const query = text.trim();
+        if (query.length < 2 || !open) {
+            setSuggestions([]);
+            return;
+        }
+        const ticket = ++asked.current;
+        const timer = setTimeout(() => {
+            suggest(source, query, near)
+                .then((found) => {
+                if (ticket !== asked.current)
+                    return;
+                setSuggestions(found);
+                setActive(0);
+            })
+                .catch(() => { if (ticket === asked.current)
+                setSuggestions([]); });
+        }, 250);
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [text, open, near?.latitude, near?.longitude, source.proxy, source.authorization]);
+    useLayoutEffect(() => {
+        if (listRef.current && suggestions.length && !reducedMotion()) {
+            gsap.fromTo(listRef.current, { autoAlpha: 0, y: -4 }, { autoAlpha: 1, y: 0, duration: 0.18, ease: "power2.out" });
+        }
+    }, [suggestions.length > 0]);
+    const pick = async (suggestion) => {
+        setOpen(false);
+        setText(suggestion.name);
+        setBusy(true);
+        try {
+            const place = await resolvePlace(source, suggestion.place);
+            if (place)
+                onSelect({ ...place, name: suggestion.name });
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const onKey = (event) => {
+        if (!suggestions.length)
+            return;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActive((value) => (value + 1) % suggestions.length);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActive((value) => (value - 1 + suggestions.length) % suggestions.length);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            void pick(suggestions[active]);
+        }
+        else if (event.key === "Escape") {
+            setOpen(false);
+        }
+    };
+    const shown = open && suggestions.length > 0;
+    return (_jsxs("div", { className: `fauna-place-search${busy ? " is-busy" : ""}${className ? ` ${className}` : ""}`, children: [_jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "search" }), _jsx("input", { type: "text", value: text, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", role: "combobox", "aria-expanded": shown, "aria-autocomplete": "list", onChange: (event) => {
+                    setText(event.target.value);
+                    setOpen(true);
+                }, onFocus: () => setOpen(true), onBlur: () => setTimeout(() => setOpen(false), 120), onKeyDown: onKey }), shown && (_jsx("ul", { ref: listRef, className: "fauna-place-search-list", role: "listbox", children: suggestions.map((suggestion, index) => (_jsxs("li", { role: "option", "aria-selected": index === active, className: index === active ? "is-active" : "", onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => setActive(index), onClick: () => void pick(suggestion), children: [_jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "location_on" }), _jsxs("span", { className: "fauna-place-search-text", children: [_jsx("strong", { children: suggestion.name }), _jsx("span", { children: suggestion.description })] })] }, suggestion.place))) }))] }));
+}
+/** Place search for apps without React. */
+export function mountPlaceSearch(element, props) {
+    const root = createRoot(element);
+    root.render(_jsx(PlaceSearch, { ...props }));
+    return {
+        update(next) { root.render(_jsx(PlaceSearch, { ...next })); },
+        destroy() { root.unmount(); },
+    };
+}

package/dist/src/ui/roster.d.ts

@@ -0,0 +1,32 @@
+import type { RoomAgent } from "../marmot/browser.js";
+import type { Presence } from "../shared/server.js";
+export type RosterProps = {
+    /** This tab's seat. */
+    self: Presence | null;
+    peers: Presence[];
+    /** The seat whose actions run when no agent holds the room. */
+    controller: string | null;
+    /** Set while an agent holds the room: it shows first and wears the ring. */
+    agent: RoomAgent | null;
+    /** Hand control to a seat, or take it yourself without one. Called after a confirm while an agent holds the room. */
+    onHand: (seat?: string) => void;
+    /** Bumped when someone without control reaches for the room, to point at who has it. */
+    nudge?: number;
+};
+/** Asks before stopping an agent: taking control (`control`) or shutting down (`power`). */
+export declare function AgentConfirm({ kind, onConfirm, onCancel }: {
+    kind: "control" | "power";
+    onConfirm: () => void;
+    onCancel: () => void;
+}): import("react").JSX.Element;
+/**
+ * Who's in the room, who's in control, and a click to hand control to anyone.
+ * While an agent holds the room it comes first with the ring, everyone watches,
+ * and clicking a person asks before stopping the agent.
+ */
+export declare function Roster({ self, peers, controller, agent, onHand, nudge }: RosterProps): import("react").JSX.Element | null;
+/** The roster for apps without React. Call `update` with new props as the room changes. */
+export declare function mountRoster(el: HTMLElement, props: RosterProps): {
+    update(props: RosterProps): void;
+    destroy(): void;
+};