@adecore/agents-react 0.24.1 → 0.25.0

package/dist/chat/ui/intelligent-ui/renderers/content.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { createContext, useContext, useId } from 'react';
+import { createContext, useContext, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PreviewCard, Tooltip } from '@adecore/ui';
+import { Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useChatHost } from '../../../../host.js';
 import { CodeBlock } from '../../CodeBlock.js';
@@ -16,11 +16,19 @@ const SourceNumbers = createContext(new Map());
 export function CodeBlockRenderer({ node }) {
     return (_jsx(CodeStreamingContext.Provider, { value: !node.complete, children: _jsx(CodeBlock, { code: uiNodeText(node).replace(/^\n|\n$/g, ''), lang: node.props.language ?? 'text' }) }));
 }
-/* Its own component, so the host's hook is only called for an image that names an attachment. */
-function AttachedImage({ scopeId, chatId, attachmentId, alt }) {
+// Set by a Gallery, so the images inside it draw as cells of its grid.
+const GalleryContext = createContext(false);
+/*
+ * Its own component, so the host's hook is only called for an image that names an attachment. In a
+ * gallery a cell that cannot show its picture says what it was, since the square alone tells nothing.
+ */
+function AttachedImage({ scopeId, chatId, attachmentId, alt, cell, unnamed }) {
     const host = useChatHost();
     const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
-    return _jsx(ImageThumb, { source: source, alt: alt, className: "max-h-70 max-w-full object-contain" });
+    if (!cell) {
+        return _jsx(ImageThumb, { source: source, alt: alt, className: "max-h-70 max-w-full object-contain" });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ImageThumb, { source: source, alt: alt, aspect: 1 }), unnamed && source.failure !== null && _jsx("figcaption", { className: "text-xs wrap-anywhere text-text-faint", children: alt })] }));
 }
 /*
  * An attachment of the chat, never a path or an address the model wrote. An image of the latest
@@ -28,10 +36,64 @@ function AttachedImage({ scopeId, chatId, attachmentId, alt }) {
  */
 export function ImageRenderer({ node, children, context }) {
     const { t } = useTranslation('agent-chat');
+    const cell = useContext(GalleryContext);
     const { attachment, alt } = node.props;
     const caption = uiNodeLabel(node);
     const name = alt ?? (caption === '' ? t('blocks.image.label') : caption);
-    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5", children: [attachment === undefined ? (_jsx(ImageThumb, { source: { url: null, failure: t('blocks.image.unavailable') }, alt: name })) : (_jsx(AttachedImage, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, alt: name })), caption !== '' && _jsx("figcaption", { className: "px-2 text-xs text-text-muted", children: children })] }));
+    return (_jsxs("figure", { className: cell ? 'flex min-w-0 flex-col gap-1' : 'flex flex-col items-start gap-1.5', children: [attachment === undefined ? (_jsx(ImageThumb, { source: { url: null, failure: t('blocks.image.unavailable') }, alt: name, aspect: cell ? 1 : undefined })) : (_jsx(AttachedImage, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, alt: name, cell: cell, unnamed: caption === '' })), caption !== '' && _jsx("figcaption", { className: cell ? 'text-xs wrap-anywhere text-text-muted' : 'px-2 text-xs text-text-muted', children: children }), cell && caption === '' && attachment === undefined && (_jsx("figcaption", { className: "text-xs wrap-anywhere text-text-faint", children: alt ?? t('blocks.image.unavailable') }))] }));
+}
+/* Three columns, two in a narrow block; the container decides, not the window, since a chat can be any width. */
+export function GalleryRenderer({ node, children }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx(GalleryContext, { value: true, children: _jsx("div", { role: "group", "aria-label": t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length }), className: "@container px-2", children: _jsx("div", { className: "chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3", children: children }) }) }));
+}
+// The shape of the frame until the first picture reports its own.
+const COMPARE_ASPECT = 4 / 3;
+/* The tallest a comparison stands, in pixels: `max-h-96`. */
+const COMPARE_MAX_HEIGHT = 384;
+/*
+ * Two attachments in one frame, shaped like the first. The split is only this renderer's state. With one
+ * attachment gone the other stands alone with the reason; with both gone the thumbnail says why.
+ */
+export function CompareRenderer({ node, children, context }) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const { before, after } = node.props;
+    const beforeLabel = node.props.beforeLabel || t('blocks.compare.before');
+    const afterLabel = node.props.afterLabel || t('blocks.compare.after');
+    const first = host.attachments.useUrl(context.scopeId, context.chatId, before);
+    const second = host.attachments.useUrl(context.scopeId, context.chatId, after);
+    const [split, setSplit] = useState(0.5);
+    const [aspect, setAspect] = useState(COMPARE_ASPECT);
+    const caption = uiNodeLabel(node);
+    // Each picture is named by its side and by what the whole comparison shows.
+    const describe = (side) => (caption === '' ? side : `${side}: ${caption}`);
+    const loading = (source) => source.url === null && source.failure === null;
+    const label = t('blocks.compare.label', { before: beforeLabel, after: afterLabel });
+    let body;
+    if (loading(first) || loading(second)) {
+        body = _jsx(ImageThumb, { source: { url: null, failure: null }, alt: label, aspect: COMPARE_ASPECT });
+    }
+    else if (first.url !== null && second.url !== null) {
+        body = (_jsxs("div", { className: "relative max-h-96 overflow-hidden rounded-lg border border-border bg-surface-sunken", style: { aspectRatio: aspect, width: `min(100%, ${COMPARE_MAX_HEIGHT * aspect}px)` }, children: [_jsx(Wipe, { value: split, onValueChange: setSplit, label: label, before: _jsx("img", { src: first.url, alt: describe(beforeLabel), draggable: false, className: "size-full object-contain select-none", onLoad: (event) => {
+                            const { naturalWidth, naturalHeight } = event.currentTarget;
+                            if (naturalWidth > 0 && naturalHeight > 0) {
+                                setAspect(naturalWidth / naturalHeight);
+                            }
+                        } }), after: _jsx("img", { src: second.url, alt: describe(afterLabel), draggable: false, className: "size-full object-contain select-none" }) }), _jsx(CompareChip, { side: "left", label: beforeLabel }), _jsx(CompareChip, { side: "right", label: afterLabel })] }));
+    }
+    else if (first.url === null && second.url === null) {
+        body = _jsx(ImageThumb, { source: first, alt: label, aspect: COMPARE_ASPECT });
+    }
+    else {
+        const shown = first.url !== null ? { source: first, name: describe(beforeLabel) } : { source: second, name: describe(afterLabel) };
+        body = (_jsxs(_Fragment, { children: [_jsx(ImageThumb, { source: shown.source, alt: shown.name, className: "max-h-70 max-w-full object-contain" }), _jsx("span", { className: "px-2 text-xs text-text-faint", children: t('blocks.compare.missing') })] }));
+    }
+    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5 px-2", children: [body, caption !== '' && _jsx("figcaption", { className: "text-xs text-text-muted", children: children })] }));
+}
+/* A chip on the picture gets a ground of its own, since a pill's alpha ground would vanish over an image. */
+function CompareChip({ side, label }) {
+    return (_jsx("span", { className: clsx('pointer-events-none absolute top-2 z-20 max-w-2/5 truncate rounded-md bg-surface-raised', side === 'left' ? 'left-2' : 'right-2'), children: _jsx(Pill, { shape: "tag", size: "sm", tone: "muted", children: label }) }));
 }
 export function SourcesRenderer({ node, children }) {
     const { t } = useTranslation('agent-chat');

package/dist/chat/ui/intelligent-ui/renderers/inputs.d.ts

@@ -5,4 +5,6 @@ export declare function ItemRenderer({ node, children }: UiRendererProps<UiProps
 export declare function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>): import("react").JSX.Element;
 export declare function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slider'>>): import("react").JSX.Element;
 export declare function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Segmented'>>): import("react").JSX.Element;
+export declare function TextFieldRenderer({ node, children, context }: UiRendererProps<UiProps<'TextField'>>): import("react").JSX.Element;
+export declare function SelectRenderer({ node, context }: UiRendererProps<UiProps<'Select'>>): import("react").JSX.Element;
 export declare function ButtonRenderer({ node, children, context }: UiRendererProps<UiProps<'Button'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/inputs.js

@@ -1,21 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useId } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Button, Checkbox, Segmented, Slider, Switch, Tooltip } from '@adecore/ui';
-import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text.js';
+import { Button, Checkbox, Input, Segmented, Select, Slider, Switch, Tooltip } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { uiChildrenOf, uiNodeLabel, uiOwnLabel, uiWithUnit } from '../node-text.js';
 import { useTruncated } from '../use-truncated.js';
+import { bindingOf, PENDING } from './binding.js';
 const ChecklistContext = createContext({ values: [], enabled: false, toggle: () => undefined });
-/*
- * The binding of an input, or null for a read-only node. An input works once its own node closed and
- * only through its binding, so the value never leaves the block until a Choice carries it.
- */
-function bindingOf(node, context) {
-    const binding = node.bindings.value;
-    return binding === undefined || !node.complete || context.answer !== null ? null : binding;
-}
-/* An input whose node has not closed yet stands at 60% and takes no pointer. */
-const PENDING = 'pointer-events-none opacity-60';
 /* The rows of a checklist as one named group. */
 function ChecklistGroup({ pending, children }) {
     const { t } = useTranslation('agent-chat');
@@ -68,6 +60,41 @@ export function SegmentedRenderer({ node, context }) {
                 }
             } }) }));
 }
+/* The longest a text field takes when its agent names none; the schema allows up to 1024. */
+const DEFAULT_MAX_LENGTH = 256;
+/* The count under a field appears once the field is this full, and never nags before. */
+const COUNT_FROM = 0.8;
+/*
+ * A line of text: the label above the field, which stops taking characters at its limit. Nothing here binds
+ * a key or submits on Enter, so the value reaches the agent only through a Choice.
+ */
+export function TextFieldRenderer({ node, children, context }) {
+    const { t } = useTranslation('agent-chat');
+    const id = useId();
+    const binding = bindingOf(node, context);
+    const { maxLength = DEFAULT_MAX_LENGTH, placeholder } = node.props;
+    const value = binding?.value ?? node.props.value;
+    const countId = `${id}-count`;
+    const counting = value.length >= maxLength * COUNT_FROM;
+    return (_jsxs("div", { className: clsx('flex flex-col gap-1 px-2', !node.complete && PENDING), children: [_jsx("label", { htmlFor: id, className: "text-sm text-text-muted", children: children }), _jsx(Input, { id: id, value: value, size: "sm", maxLength: maxLength, placeholder: placeholder, disabled: binding === null, "aria-describedby": counting ? countId : undefined, className: "max-w-96", onChange: (event) => binding?.onValueChange(event.target.value) }), counting && (_jsx("span", { id: countId, className: "text-xs text-text-faint tabular-nums", children: t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) }) }))] }));
+}
+/*
+ * Left aligned, never the full width. Like Segmented, each Option is an item by its place, since a value may be any scalar.
+ * The text beside its options is its label, drawn above it and read as its name.
+ */
+export function SelectRenderer({ node, context }) {
+    const { t } = useTranslation('agent-chat');
+    const binding = bindingOf(node, context);
+    const current = binding?.value ?? node.props.value;
+    const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
+    const label = uiOwnLabel(node);
+    return (_jsxs("div", { className: clsx('flex flex-col items-start gap-1 px-2', !node.complete && PENDING), children: [label !== '' && _jsx("span", { className: "text-sm text-text-muted", children: label }), _jsx(Select, { value: options.find((option) => option.value === current)?.id ?? null, items: options.map((option) => ({ value: option.id, label: option.label })), label: label === '' ? t('blocks.options') : label, disabled: binding === null || options.length === 0, onValueChange: (id) => {
+                    const option = options[Number(id)];
+                    if (option !== undefined) {
+                        binding?.onValueChange(option.value);
+                    }
+                } })] }));
+}
 /* Runs its local action once its own node closed; like an input, it closes once the block is answered. A label cut to the button's one line reads whole in its tooltip. */
 export function ButtonRenderer({ node, children, context }) {
     const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;

package/dist/chat/ui/intelligent-ui/renderers/map-slots.d.ts

@@ -0,0 +1,20 @@
+export declare const MAX_LIVE_MAPS = 4;
+export type MapSlotState = 'idle' | 'granted' | 'queued';
+export declare class MapSlots {
+    private readonly capacity;
+    private readonly held;
+    private readonly queue;
+    private readonly listeners;
+    constructor(capacity: number);
+    request(id: string): void;
+    release(id: string): void;
+    take(id: string): void;
+    stateOf(id: string): MapSlotState;
+    subscribe: (listener: () => void) => (() => void);
+    private changed;
+}
+export declare function pageMapSlots(): MapSlots;
+export declare function useMapSlot(id: string, wanted: boolean, slots?: MapSlots): {
+    state: MapSlotState;
+    take(): void;
+};

package/dist/chat/ui/intelligent-ui/renderers/map-slots.js

@@ -0,0 +1,87 @@
+import { useEffect, useSyncExternalStore } from 'react';
+/*
+ * A map holds a WebGL context for as long as it is drawn, and a browser keeps only so many of them before
+ * it drops the oldest without a word. This is the page's budget of them for maps, kept under what the
+ * terminals of `@adecore/terminal` take from the same pool.
+ */
+export const MAX_LIVE_MAPS = 4;
+/*
+ * Who may draw a map right now. A map in view asks for a slot and gets one while there are fewer than
+ * `capacity` held; the others queue, in the order they asked, and are granted a slot as one is given back.
+ * A person can `take` one for a queued map: the longest-held map gives its slot up and queues first.
+ */
+export class MapSlots {
+    capacity;
+    held = [];
+    queue = [];
+    listeners = new Set();
+    constructor(capacity) {
+        this.capacity = capacity;
+    }
+    request(id) {
+        if (this.held.includes(id) || this.queue.includes(id)) {
+            return;
+        }
+        (this.held.length < this.capacity ? this.held : this.queue).push(id);
+        this.changed();
+    }
+    release(id) {
+        const wasHeld = this.held.includes(id);
+        const wasQueued = this.queue.includes(id);
+        if (!wasHeld && !wasQueued) {
+            return;
+        }
+        this.held.splice(0, this.held.length, ...this.held.filter((entry) => entry !== id));
+        this.queue.splice(0, this.queue.length, ...this.queue.filter((entry) => entry !== id));
+        while (this.held.length < this.capacity && this.queue.length > 0) {
+            this.held.push(this.queue.shift());
+        }
+        this.changed();
+    }
+    take(id) {
+        if (this.held.includes(id)) {
+            return;
+        }
+        const at = this.queue.indexOf(id);
+        if (at >= 0) {
+            this.queue.splice(at, 1);
+        }
+        if (this.held.length >= this.capacity) {
+            this.queue.unshift(this.held.shift());
+        }
+        this.held.push(id);
+        this.changed();
+    }
+    stateOf(id) {
+        return this.held.includes(id) ? 'granted' : this.queue.includes(id) ? 'queued' : 'idle';
+    }
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    changed() {
+        for (const listener of [...this.listeners]) {
+            listener();
+        }
+    }
+}
+let page = null;
+/* The one budget of the page, made on first use. */
+export function pageMapSlots() {
+    page ??= new MapSlots(MAX_LIVE_MAPS);
+    return page;
+}
+/* A map's place in the budget while it `wanted`, which is while it is in view; gone from it otherwise and on unmount. */
+export function useMapSlot(id, wanted, slots = pageMapSlots()) {
+    const state = useSyncExternalStore(slots.subscribe, () => slots.stateOf(id), () => 'idle');
+    useEffect(() => {
+        if (!wanted) {
+            return;
+        }
+        slots.request(id);
+        return () => slots.release(id);
+    }, [slots, id, wanted]);
+    return { state, take: () => slots.take(id) };
+}

package/dist/chat/ui/intelligent-ui/renderers/map-style.d.ts

@@ -0,0 +1,18 @@
+import type { LngLatBoundsLike, MapOptions } from 'maplibre-gl';
+export type MapStyle = Exclude<MapOptions['style'], string | undefined>;
+export interface MapColors {
+    land: string;
+    water: string;
+}
+export interface MapPoint {
+    id: string;
+    lat: number;
+    lon: number;
+}
+export declare const MAP_MAX_ZOOM: {
+    readonly tiles: 16;
+    readonly outline: 6;
+};
+export declare function baseMapStyle({ land, water }: MapColors): MapStyle;
+export declare function localizedTextField(original: unknown, field: string): unknown;
+export declare function boundsOf(points: readonly MapPoint[]): LngLatBoundsLike | null;

package/dist/chat/ui/intelligent-ui/renderers/map-style.js

@@ -0,0 +1,72 @@
+import { BASE_LAND_JSON } from './base-land.js';
+/* How far a map zooms to fit its points: street level with tiles, and only a country or two on the outline, which has nothing finer. */
+export const MAP_MAX_ZOOM = { tiles: 16, outline: 6 };
+/* The map a page draws without tiles: land over water, from the outline of the world that ships with the package. */
+export function baseMapStyle({ land, water }) {
+    return {
+        version: 8,
+        sources: { land: { type: 'geojson', data: JSON.parse(BASE_LAND_JSON) } },
+        layers: [
+            { id: 'water', type: 'background', paint: { 'background-color': water } },
+            { id: 'land', type: 'fill', source: 'land', paint: { 'fill-color': land } }
+        ]
+    };
+}
+const TOKEN = /\{([^{}]+)\}/g;
+/* A `{name}` text field as the expression it stands for, since a field combined with another expression is no longer read for tokens. */
+function tokenExpression(text) {
+    const parts = [];
+    let at = 0;
+    for (const match of text.matchAll(TOKEN)) {
+        if (match.index > at) {
+            parts.push(text.slice(at, match.index));
+        }
+        parts.push(['to-string', ['coalesce', ['get', match[1]], '']]);
+        at = match.index + match[0].length;
+    }
+    if (parts.length === 0) {
+        return text;
+    }
+    if (at < text.length) {
+        parts.push(text.slice(at));
+    }
+    return parts.length === 1 && typeof parts[0] !== 'string' ? parts[0] : ['concat', ...parts];
+}
+/*
+ * A label that prefers the property `field` of a feature and falls back to what the style wrote. A text
+ * field that is neither a string nor an expression (a legacy zoom function) is left as it is.
+ */
+export function localizedTextField(original, field) {
+    const fallback = typeof original === 'string' ? tokenExpression(original) : original;
+    if (typeof fallback !== 'string' && !Array.isArray(fallback)) {
+        return original;
+    }
+    return ['coalesce', ['get', field], fallback];
+}
+/*
+ * The bounds that hold every point, or null for none. Longitudes go round the globe, so the bounds leave out
+ * the widest gap between two neighbors: points on both sides of the date line span a few degrees, not 360.
+ * The east edge may then pass 180, which the map takes.
+ */
+export function boundsOf(points) {
+    if (points.length === 0) {
+        return null;
+    }
+    const lons = points.map((point) => point.lon).sort((a, b) => a - b);
+    let widest = lons[0] + 360 - lons[lons.length - 1];
+    let west = lons[0];
+    let east = lons[lons.length - 1];
+    for (let i = 1; i < lons.length; i++) {
+        const gap = lons[i] - lons[i - 1];
+        if (gap > widest) {
+            widest = gap;
+            west = lons[i];
+            east = lons[i - 1] + 360;
+        }
+    }
+    const lats = points.map((point) => point.lat);
+    return [
+        [west, Math.min(...lats)],
+        [east, Math.max(...lats)]
+    ];
+}

package/dist/chat/ui/intelligent-ui/renderers/map-view.d.ts

@@ -0,0 +1,15 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { type UiMapSource } from '../../../../host.js';
+import { type MapPoint } from './map-style.js';
+export type MapViewStatus = 'loading' | 'tiles' | 'base' | 'offline' | 'unavailable' | 'failed' | 'lost';
+export interface MapMarker extends MapPoint {
+    number: number;
+}
+export interface MapViewProps {
+    markers: readonly MapMarker[];
+    source: UiMapSource;
+    selected: string | null;
+    onPick: ((id: string) => void) | null;
+    onStatus: (status: MapViewStatus) => void;
+}
+export declare function MapView({ markers, source, selected, onPick, onStatus }: MapViewProps): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/map-view.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { useEffect, useRef, useState } from 'react';
+import { Map as MapLibreMap, Marker, setWorkerUrl } from 'maplibre-gl';
+import { Minus, Plus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ButtonGroup, IconButton } from '@adecore/ui';
+import { useChatHost } from '../../../../host.js';
+import { baseMapStyle, boundsOf, localizedTextField, MAP_MAX_ZOOM } from './map-style.js';
+const MARKER = 'flex size-5 items-center justify-center rounded-full bg-map-marker text-xs text-map-marker-text tabular-nums shadow-raised';
+const PICKED = 'z-1 bg-accent text-accent-text outline-2 outline-surface';
+// A tile that fails this many times with none loading in between leaves the map empty, so the outline stands in.
+const TILE_ERRORS_IN_A_ROW = 4;
+let workerReady = false;
+/* The worker is a file of the package, so the bundler of the app has to serve it: the default address beside the chunk would not exist. */
+function ensureBundledWorker() {
+    if (!workerReady) {
+        setWorkerUrl(new URL('maplibre-gl/dist/maplibre-gl-worker.mjs', import.meta.url).href);
+        workerReady = true;
+    }
+}
+/* The grounds of the built-in map are theme tokens, which the page resolves; the style needs plain colors. */
+function readColors(element) {
+    const style = getComputedStyle(element);
+    return { land: style.getPropertyValue('--map-land').trim() || 'transparent', water: style.getPropertyValue('--map-water').trim() || 'transparent' };
+}
+/*
+ * The map itself, in the chunk that holds MapLibre. It draws the host's tiles when the source has them
+ * and the outline of the world otherwise, also when the tiles turn out to be out of reach. Its
+ * canvas is hidden from assistive technology, since the list of places beside it says the same.
+ */
+export function MapView({ markers, source, selected, onPick, onStatus }) {
+    const { t, i18n } = useTranslation('agent-chat');
+    const mode = useChatHost().code.useMode();
+    const element = useRef(null);
+    const [map, setMap] = useState(null);
+    const [outline, setOutline] = useState(false);
+    const latest = useRef({ source, onStatus, onPick });
+    useEffect(() => {
+        latest.current = { source, onStatus, onPick };
+    });
+    const language = i18n.language.split('-')[0] ?? 'en';
+    const styleKey = `${mode}:${source.state === 'tiles' ? source.styleUrl(mode) : 'outline'}`;
+    const pointsKey = JSON.stringify(markers.map((marker) => [marker.id, marker.lat, marker.lon]));
+    useEffect(() => {
+        const container = element.current;
+        if (container === null) {
+            return;
+        }
+        const current = latest.current.source;
+        const colors = readColors(container);
+        const offline = current.state === 'tiles' && typeof navigator !== 'undefined' && navigator.onLine === false;
+        const tiles = current.state === 'tiles' && !offline;
+        let created;
+        try {
+            ensureBundledWorker();
+            created = new MapLibreMap({
+                container,
+                style: current.state === 'tiles' && tiles ? current.styleUrl(mode) : baseMapStyle(colors),
+                center: [0, 20],
+                zoom: 1,
+                keyboard: false,
+                cooperativeGestures: true,
+                attributionControl: false,
+                dragRotate: false,
+                pitchWithRotate: false,
+                locale: {
+                    'CooperativeGesturesHandler.WindowsHelpText': t('blocks.map.scrollHint'),
+                    'CooperativeGesturesHandler.MacHelpText': t('blocks.map.scrollHint'),
+                    'CooperativeGesturesHandler.MobileHelpText': t('blocks.map.touchHint')
+                },
+                transformRequest: (url) => {
+                    const now = latest.current.source;
+                    return now.state === 'tiles' && now.transformRequest ? now.transformRequest(url) : { url };
+                }
+            });
+        }
+        catch {
+            latest.current.onStatus('failed');
+            return;
+        }
+        created.touchZoomRotate.disableRotation();
+        const canvas = created.getCanvas();
+        canvas.tabIndex = -1;
+        const wantsTiles = current.state === 'tiles';
+        let drawing = tiles ? 'tiles' : 'outline';
+        // Why the outline is drawn in place of tiles that were asked for; null while the tiles are.
+        let reason = wantsTiles && !tiles ? 'offline' : null;
+        let styleLoaded = false;
+        let restoring = false;
+        let tileErrors = 0;
+        setOutline(!tiles);
+        latest.current.onStatus(tiles ? 'loading' : wantsTiles ? 'offline' : 'base');
+        const drawOutline = (why) => {
+            if (drawing === 'outline' || !wantsTiles) {
+                return;
+            }
+            drawing = 'outline';
+            reason = why;
+            setOutline(true);
+            created.setStyle(baseMapStyle(colors));
+            latest.current.onStatus(why);
+        };
+        const drawTiles = () => {
+            if (current.state !== 'tiles') {
+                return;
+            }
+            drawing = 'tiles';
+            reason = null;
+            styleLoaded = false;
+            restoring = true;
+            tileErrors = 0;
+            setOutline(false);
+            created.setStyle(current.styleUrl(mode));
+            latest.current.onStatus('loading');
+        };
+        const unreachable = () => (typeof navigator !== 'undefined' && navigator.onLine === false ? 'offline' : 'unavailable');
+        created.on('style.load', () => {
+            if (drawing !== 'tiles') {
+                return;
+            }
+            styleLoaded = true;
+            if (restoring) {
+                restoring = false;
+                latest.current.onStatus('tiles');
+            }
+            const field = current.state === 'tiles' ? current.labelField?.(language) : undefined;
+            if (field === undefined) {
+                return;
+            }
+            for (const layer of created.getStyle().layers) {
+                const textField = layer.type === 'symbol' ? layer.layout?.['text-field'] : undefined;
+                if (textField !== undefined) {
+                    created.setLayoutProperty(layer.id, 'text-field', localizedTextField(textField, field));
+                }
+            }
+        });
+        created.on('load', () => {
+            if (drawing === 'tiles') {
+                latest.current.onStatus('tiles');
+            }
+        });
+        created.on('sourcedata', (event) => {
+            if ('tile' in event) {
+                tileErrors = 0;
+            }
+        });
+        created.on('error', (event) => {
+            if (drawing !== 'tiles') {
+                return;
+            }
+            // Before the style is here there is nothing to draw. After it, a tile the host refuses (a ticket
+            // that ran out) or several in a row leave an empty map; a single one the map retries itself.
+            const status = event.error?.status;
+            if (!styleLoaded || status === 401 || status === 403 || ++tileErrors >= TILE_ERRORS_IN_A_ROW) {
+                drawOutline(unreachable());
+            }
+        });
+        const goOffline = () => drawOutline('offline');
+        const goOnline = () => {
+            if (reason === 'offline') {
+                drawTiles();
+            }
+        };
+        const contextLost = () => latest.current.onStatus('lost');
+        if (wantsTiles) {
+            window.addEventListener('offline', goOffline);
+            window.addEventListener('online', goOnline);
+        }
+        canvas.addEventListener('webglcontextlost', contextLost);
+        setMap(created);
+        return () => {
+            window.removeEventListener('offline', goOffline);
+            window.removeEventListener('online', goOnline);
+            canvas.removeEventListener('webglcontextlost', contextLost);
+            setMap(null);
+            created.remove();
+        };
+        // The map is made again when the style it draws changes, and not for any other change of the source.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [styleKey, language]);
+    useEffect(() => {
+        const bounds = boundsOf(markers);
+        if (map === null || bounds === null) {
+            return;
+        }
+        map.fitBounds(bounds, { padding: 32, maxZoom: outline ? MAP_MAX_ZOOM.outline : MAP_MAX_ZOOM.tiles, duration: 0 });
+        // The points are compared by their coordinates, so a render that rebuilt the same list does not move the map.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, pointsKey, outline]);
+    const pickable = onPick !== null;
+    useEffect(() => {
+        if (map === null) {
+            return;
+        }
+        const drawn = markers.map((marker) => {
+            const node = document.createElement('div');
+            node.setAttribute('aria-hidden', 'true');
+            node.dataset.mapMarker = marker.id;
+            node.className = `${MARKER} ${marker.id === selected ? PICKED : ''} ${pickable ? 'cursor-pointer' : ''}`;
+            node.textContent = String(marker.number);
+            node.addEventListener('click', () => latest.current.onPick?.(marker.id));
+            return new Marker({ element: node }).setLngLat([marker.lon, marker.lat]).addTo(map);
+        });
+        return () => {
+            for (const marker of drawn) {
+                marker.remove();
+            }
+        };
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, pointsKey, selected, pickable]);
+    return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: element, "aria-hidden": true, className: "size-full" }), _jsxs(ButtonGroup, { className: "absolute top-2 right-2 rounded-md border border-border bg-surface-raised shadow-raised", children: [_jsx(IconButton, { icon: Plus, size: "sm", label: t('blocks.map.zoomIn'), onClick: () => map?.zoomIn() }), _jsx(IconButton, { icon: Minus, size: "sm", label: t('blocks.map.zoomOut'), onClick: () => map?.zoomOut() })] })] }));
+}

package/dist/chat/ui/intelligent-ui/renderers/map.d.ts

@@ -0,0 +1,3 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiRendererProps } from '../render-context.js';
+export declare function MapRenderer({ node, children, context }: UiRendererProps<UiProps<'Map'>>): import("react").JSX.Element;