@cerebro-labs/agentnava-sdk 0.50.0 → 0.53.2

package/react.css

@@ -0,0 +1,409 @@
+/*
+ * Default look for @cerebro-labs/agentnava-sdk/react.
+ *
+ *   import '@cerebro-labs/agentnava-sdk/react/styles.css'
+ *
+ * Theme it by setting these variables on any ancestor (or :root). Fonts are
+ * inherited from your page. Every class starts with an-w- so nothing here
+ * reaches the rest of your app.
+ */
+.an-w,
+.an-reply {
+  --an-w-ink: #16181d;
+  --an-w-muted: #6b7280;
+  --an-w-line: #e5e7eb;
+  --an-w-surface: #f8f9fb;
+  --an-w-tint: #eef2f7;
+  --an-w-accent: #1f2937;
+  --an-w-accent-ink: #ffffff;
+  --an-w-s0: #2563eb;
+  --an-w-s1: #d97706;
+  --an-w-s2: #059669;
+  --an-w-s3: #7c3aed;
+  --an-w-high: #dc2626;
+  --an-w-medium: #d97706;
+  --an-w-good: #059669;
+  --an-w-info: #2563eb;
+  --an-w-radius: 8px;
+}
+
+.an-reply > * + * {
+  margin-top: 8px;
+}
+.an-reply-text {
+  margin: 0;
+}
+
+.an-w {
+  color: var(--an-w-ink);
+  font-size: 0.95em;
+  line-height: 1.45;
+  max-width: 100%;
+}
+.an-w p,
+.an-w figure,
+.an-w dl,
+.an-w ul,
+.an-w ol {
+  margin: 0;
+}
+
+.an-w-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.an-w-gap-small {
+  gap: 6px;
+}
+.an-w-gap-large {
+  gap: 16px;
+}
+.an-w-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.an-w-row > * {
+  flex: 1 1 0;
+  min-width: 96px;
+}
+.an-w-row.is-scroll {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+}
+.an-w-row.is-scroll > * {
+  flex: 0 0 72%;
+  scroll-snap-align: start;
+}
+
+.an-w-card {
+  border: 1px solid var(--an-w-line);
+  border-radius: var(--an-w-radius);
+  background: var(--an-w-surface);
+  overflow: hidden;
+}
+.an-w-card > img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+}
+.an-w-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+}
+.an-w-card-link {
+  color: inherit;
+  text-decoration: none;
+}
+.an-w-card-link:hover .an-w-card {
+  border-color: var(--an-w-muted);
+}
+
+.an-w-text.is-title {
+  font-size: 1.15em;
+  font-weight: 600;
+}
+.an-w-text.is-heading {
+  font-weight: 600;
+}
+.an-w-text.is-caption {
+  color: var(--an-w-muted);
+  font-size: 0.9em;
+}
+.an-w-title {
+  color: var(--an-w-muted);
+  font-size: 0.9em;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.an-w-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 8px 10px;
+  border-radius: var(--an-w-radius);
+  background: var(--an-w-tint);
+}
+.an-w-stat strong {
+  font-size: 1.25em;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.an-w-stat span {
+  font-weight: 500;
+}
+.an-w-stat small {
+  color: var(--an-w-muted);
+  font-size: 0.85em;
+  line-height: 1.3;
+}
+
+.an-w-kv dl > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 5px 0;
+  border-bottom: 1px solid var(--an-w-line);
+}
+.an-w-kv dt {
+  color: var(--an-w-muted);
+}
+.an-w-kv dd {
+  margin: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.an-w-kv .is-total {
+  border-bottom: 0;
+  font-weight: 600;
+}
+.an-w-kv .is-total dt {
+  color: var(--an-w-ink);
+}
+
+.an-w-table {
+  overflow-x: auto;
+}
+.an-w-table table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.an-w-table th,
+.an-w-table td {
+  text-align: left;
+  padding: 5px 10px 5px 0;
+  border-bottom: 1px solid var(--an-w-line);
+  white-space: nowrap;
+}
+.an-w-table th {
+  color: var(--an-w-muted);
+  font-weight: 500;
+}
+.an-w-table td.is-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.an-w-chart figcaption {
+  color: var(--an-w-muted);
+  font-size: 0.9em;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+.an-w-chart svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+.an-w-chart text {
+  font-size: 10px;
+  fill: var(--an-w-muted);
+}
+.an-w-chart rect.an-w-s0,
+.an-w-chart circle.an-w-s0 {
+  fill: var(--an-w-s0);
+}
+.an-w-chart rect.an-w-s1,
+.an-w-chart circle.an-w-s1 {
+  fill: var(--an-w-s1);
+}
+.an-w-chart rect.an-w-s2,
+.an-w-chart circle.an-w-s2 {
+  fill: var(--an-w-s2);
+}
+.an-w-chart rect.an-w-s3,
+.an-w-chart circle.an-w-s3 {
+  fill: var(--an-w-s3);
+}
+.an-w-line {
+  fill: none;
+  stroke-width: 2;
+}
+.an-w-line.an-w-s0 {
+  stroke: var(--an-w-s0);
+}
+.an-w-line.an-w-s1 {
+  stroke: var(--an-w-s1);
+}
+.an-w-line.an-w-s2 {
+  stroke: var(--an-w-s2);
+}
+.an-w-line.an-w-s3 {
+  stroke: var(--an-w-s3);
+}
+.an-w-ref line {
+  stroke: var(--an-w-muted);
+  stroke-dasharray: 4 3;
+}
+.an-w-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  color: var(--an-w-muted);
+  font-size: 0.9em;
+  margin-top: 4px;
+}
+.an-w-legend i {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.an-w-legend i.an-w-s0 {
+  background: var(--an-w-s0);
+}
+.an-w-legend i.an-w-s1 {
+  background: var(--an-w-s1);
+}
+.an-w-legend i.an-w-s2 {
+  background: var(--an-w-s2);
+}
+.an-w-legend i.an-w-s3 {
+  background: var(--an-w-s3);
+}
+
+.an-w-image img {
+  display: block;
+  max-width: 100%;
+  border-radius: var(--an-w-radius);
+}
+.an-w-image figcaption {
+  color: var(--an-w-muted);
+  font-size: 0.9em;
+  margin-top: 4px;
+}
+
+.an-w-list ul,
+.an-w-list ol {
+  list-style: none;
+  padding: 0;
+}
+.an-w-list li {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--an-w-line);
+}
+.an-w-list li:last-child {
+  border-bottom: 0;
+}
+.an-w-list li > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.an-w-list li span,
+.an-w-list li small {
+  color: var(--an-w-muted);
+}
+.an-w-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--an-w-info);
+}
+.an-w-dot.is-high {
+  background: var(--an-w-high);
+}
+.an-w-dot.is-medium {
+  background: var(--an-w-medium);
+}
+.an-w-dot.is-good {
+  background: var(--an-w-good);
+}
+
+.an-w-note {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: var(--an-w-radius);
+  background: var(--an-w-tint);
+}
+
+.an-w-badge {
+  align-self: flex-start;
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 0.85em;
+  font-weight: 500;
+  background: var(--an-w-tint);
+}
+.an-w-badge.is-high {
+  color: var(--an-w-high);
+}
+.an-w-badge.is-medium {
+  color: var(--an-w-medium);
+}
+.an-w-badge.is-good {
+  color: var(--an-w-good);
+}
+.an-w-badge.is-info,
+.an-w-badge.is-low {
+  color: var(--an-w-info);
+}
+
+.an-w-link {
+  color: var(--an-w-info);
+  font-weight: 500;
+}
+
+.an-w-button {
+  align-self: flex-start;
+  font: inherit;
+  padding: 6px 14px;
+  border-radius: var(--an-w-radius);
+  border: 1px solid var(--an-w-accent);
+  cursor: pointer;
+}
+.an-w-button.is-primary {
+  background: var(--an-w-accent);
+  color: var(--an-w-accent-ink);
+}
+.an-w-button.is-secondary {
+  background: transparent;
+  color: var(--an-w-ink);
+  border-color: var(--an-w-line);
+}
+.an-w-button:disabled,
+.an-w-suggest button:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.an-w-suggest {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.an-w-suggest button {
+  font: inherit;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--an-w-line);
+  background: transparent;
+  color: var(--an-w-ink);
+  cursor: pointer;
+  text-align: left;
+}
+.an-w-suggest button:hover:not(:disabled) {
+  border-color: var(--an-w-muted);
+}
+
+.an-w-divider {
+  border: 0;
+  border-top: 1px solid var(--an-w-line);
+  margin: 2px 0;
+  width: 100%;
+}

package/react.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import type { Widget, WidgetPart } from './types.ts';
+export { placeWidgets, type ReplyPiece } from './widgets.ts';
+/** Every kind of part an agent may draw. */
+export type WidgetKind = 'Column' | 'Row' | 'Card' | 'Text' | 'Stat' | 'KeyValue' | 'Table' | 'Chart' | 'Image' | 'List' | 'Note' | 'Badge' | 'Link' | 'Button' | 'Suggestions' | 'Divider';
+/** What a replacement for one kind of part receives. */
+export interface PartProps {
+    part: WidgetPart;
+    /** The part's children, already drawn (containers only). */
+    children?: ReactNode;
+    /** Send words as the reader's next message (Button, Suggestions). */
+    onAsk?: ((text: string) => void) | undefined;
+}
+export interface WidgetViewProps {
+    widget: Widget;
+    /** Called with a Button's label or a tapped suggestion: send it as the next message. */
+    onAsk?: (text: string) => void;
+    /** Your own component for any kind of part, in place of the default. */
+    parts?: Partial<Record<WidgetKind, (props: PartProps) => ReactNode>>;
+    /** ISO currency code for charts and numbers marked as money. Default "USD". */
+    currency?: string;
+    /** Locale for numbers. Default: the reader's. */
+    locale?: string;
+    /** Whether a link or picture address may be opened. Default: https:// only. */
+    allowUrl?: (url: string, use: 'link' | 'image') => boolean;
+    className?: string;
+}
+export interface ReplyViewProps extends Omit<WidgetViewProps, 'widget' | 'className'> {
+    /** The reply's words, as `text` events or `done.reply` give them. */
+    text: string;
+    /** The reply's widgets, as `widget` events or `done.widgets` give them. */
+    widgets?: readonly Widget[] | undefined;
+    /** How to draw the words. Default: paragraphs. Pass your markdown renderer here. */
+    renderText?: (text: string) => ReactNode;
+    className?: string;
+}
+/** One widget, drawn from its root part. Draws nothing when there is no root yet. */
+export declare function WidgetView(props: WidgetViewProps): import("react/jsx-runtime").JSX.Element | null;
+/** A whole reply: its words, with each widget drawn where it sits. */
+export declare function ReplyView({ text, widgets, renderText, className, ...widgetProps }: ReplyViewProps): import("react/jsx-runtime").JSX.Element;

package/react.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Ready-made React views for the widgets an agent draws in its replies.
+//
+//   import { ReplyView } from '@cerebro-labs/agentnava-sdk/react'
+//   import '@cerebro-labs/agentnava-sdk/react/styles.css'
+//
+//   <ReplyView text={reply} widgets={widgets} onAsk={send} />
+//
+// React is optional for the SDK: only this entry needs it, and the rest of the
+// package never imports it. Every kind of part has a default look (styles.css,
+// themed through CSS variables), and any kind can be swapped for your own
+// component with `parts`.
+//
+// A widget is written by the model, so it is drawn defensively: a kind this
+// does not know, or a part missing a field, is skipped; each part is drawn
+// once, even if two containers name it; links and pictures open only over
+// https:// (narrow it further with `allowUrl`); and a widget that throws while
+// drawing is left out rather than breaking the screen around it.
+import { Component, Fragment } from 'react';
+import { placeWidgets } from "./widgets.js";
+export { placeWidgets } from "./widgets.js";
+const str = (v) => (typeof v === 'string' || typeof v === 'number' ? String(v) : '');
+const list = (v) => (Array.isArray(v) ? v : []);
+const TONES = new Set(['high', 'medium', 'low', 'good', 'info']);
+const toneOf = (v) => (typeof v === 'string' && TONES.has(v) ? v : 'info');
+const httpsOnly = (url) => /^https:\/\//i.test(url);
+/** A widget that throws while drawing is left out, never a crash of the screen. */
+class Boundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+function Chart({ part, ctx }) {
+    const series = list(part.series)
+        .map((s) => ({
+        name: str(s?.name),
+        points: list(s?.points).filter((p) => typeof p?.y === 'number' && Number.isFinite(p.y)),
+    }))
+        .filter((s) => s.points.length > 0);
+    if (series.length === 0)
+        return null;
+    const xs = series[0].points.map((p) => str(p.x));
+    const ref = part.reference;
+    const refY = typeof ref?.y === 'number' && Number.isFinite(ref.y) ? ref.y : undefined;
+    const ys = [...series.flatMap((s) => s.points.map((p) => p.y)), ...(refY === undefined ? [] : [refY])];
+    // Zero sits between the extremes, so a negative value draws below the zero
+    // line instead of collapsing onto it and reading as 0.
+    const lo = Math.min(...ys, 0);
+    const span = Math.max(...ys, 0) - lo || 1;
+    const W = 320;
+    const H = 140;
+    const step = W / Math.max(xs.length, 1);
+    const fmt = (n) => (part.unit === 'currency' ? ctx.money(n) : part.unit === 'percent' ? `${ctx.number(n)}%` : ctx.number(n));
+    const yOf = (y) => H - ((y - lo) / span) * (H - 18);
+    const zero = yOf(0);
+    const labelled = series.length === 1 && xs.length <= 6;
+    return (_jsxs("figure", { className: "an-w-chart", children: [str(part.title) && _jsx("figcaption", { children: str(part.title) }), _jsxs("svg", { viewBox: `0 0 ${W} ${H + 18}`, role: "img", "aria-label": str(part.title) || 'Chart', children: [series.map((s, si) => part.type === 'bar' ? (s.points.map((p, i) => {
+                        const bw = (step * 0.7) / series.length;
+                        const x = i * step + step * 0.15 + si * bw;
+                        const y = yOf(p.y);
+                        return (_jsxs("g", { children: [_jsx("rect", { className: `an-w-s${si % 4}`, x: x, y: Math.min(y, zero), width: bw, height: Math.abs(zero - y), rx: 2, children: _jsx("title", { children: `${str(p.x)}: ${fmt(p.y)}` }) }), labelled && (_jsx("text", { x: x + bw / 2, y: Math.min(y, zero) - 4, textAnchor: "middle", children: fmt(p.y) }))] }, `${si}-${i}`));
+                    })) : (_jsxs("g", { children: [_jsx("polyline", { className: `an-w-line an-w-s${si % 4}${part.type === 'area' ? ' is-area' : ''}`, points: s.points.map((p, i) => `${i * step + step / 2},${yOf(p.y)}`).join(' ') }), s.points.map((p, i) => (_jsxs("g", { children: [_jsx("circle", { className: `an-w-s${si % 4}`, cx: i * step + step / 2, cy: yOf(p.y), r: 3, children: _jsx("title", { children: `${str(p.x)}: ${fmt(p.y)}` }) }), labelled && (_jsx("text", { x: i * step + step / 2, y: yOf(p.y) - 7, textAnchor: "middle", children: fmt(p.y) }))] }, i)))] }, si))), lo < 0 && _jsx("line", { x1: 0, x2: W, y1: zero, y2: zero, stroke: "currentColor", strokeOpacity: 0.4 }), refY !== undefined && (_jsxs("g", { className: "an-w-ref", children: [_jsx("line", { x1: 0, x2: W, y1: yOf(refY), y2: yOf(refY) }), str(ref?.label) && (_jsx("text", { x: W, y: yOf(refY) - 4, textAnchor: "end", children: str(ref?.label) }))] })), xs.map((x, i) => (_jsx("text", { x: i * step + step / 2, y: H + 14, textAnchor: "middle", children: x }, i)))] }), series.length > 1 && (_jsx("div", { className: "an-w-legend", children: series.map((s, si) => (_jsxs("span", { children: [_jsx("i", { className: `an-w-s${si % 4}` }), s.name] }, si))) }))] }));
+}
+/** The default look of one part. `kids` is its children, already drawn. */
+function defaultPart(part, kids, ctx) {
+    const onAsk = ctx.props.onAsk;
+    switch (part.component) {
+        case 'Column':
+            return _jsx("div", { className: `an-w-col an-w-gap-${['small', 'large'].includes(str(part.gap)) ? str(part.gap) : 'medium'}`, children: kids });
+        case 'Row':
+            return _jsx("div", { className: `an-w-row${part.scroll === true ? ' is-scroll' : ''}`, children: kids });
+        case 'Card': {
+            const image = ctx.url(part.image, 'image');
+            const href = ctx.url(part.href, 'link');
+            const body = (_jsxs("div", { className: "an-w-card", children: [image && _jsx("img", { src: image, alt: str(part.imageAlt), referrerPolicy: "no-referrer", loading: "lazy" }), _jsx("div", { className: "an-w-card-body", children: kids })] }));
+            return href ? (_jsx("a", { className: "an-w-card-link", href: href, target: "_blank", rel: "noreferrer noopener", children: body })) : (body);
+        }
+        case 'Text': {
+            if (!str(part.text))
+                return null;
+            const v = ['title', 'heading', 'caption'].includes(str(part.variant)) ? str(part.variant) : 'body';
+            return _jsx("p", { className: `an-w-text is-${v}`, children: str(part.text) });
+        }
+        case 'Stat':
+            if (!str(part.value))
+                return null;
+            return (_jsxs("div", { className: "an-w-stat", children: [_jsx("strong", { children: str(part.value) }), str(part.label) && _jsx("span", { children: str(part.label) }), str(part.caption) && _jsx("small", { children: str(part.caption) })] }));
+        case 'KeyValue': {
+            const rows = list(part.rows).filter((r) => str(r?.label) || str(r?.value));
+            if (rows.length === 0)
+                return null;
+            return (_jsxs("div", { className: "an-w-kv", children: [str(part.title) && _jsx("div", { className: "an-w-title", children: str(part.title) }), _jsx("dl", { children: rows.map((r, i) => (_jsxs("div", { className: r?.emphasis ? 'is-total' : undefined, children: [_jsx("dt", { children: str(r?.label) }), _jsx("dd", { children: str(r?.value) })] }, i))) })] }));
+        }
+        case 'Table': {
+            const cols = list(part.columns).map(str);
+            const rows = list(part.rows).filter(Array.isArray);
+            if (cols.length === 0 && rows.length === 0)
+                return null;
+            return (_jsxs("div", { className: "an-w-table", children: [str(part.title) && _jsx("div", { className: "an-w-title", children: str(part.title) }), _jsxs("table", { children: [cols.length > 0 && (_jsx("thead", { children: _jsx("tr", { children: cols.map((c, j) => (_jsx("th", { children: c }, j))) }) })), _jsx("tbody", { children: rows.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { className: typeof c === 'number' ? 'is-num' : undefined, children: typeof c === 'number' ? ctx.number(c) : str(c) }, j))) }, i))) })] })] }));
+        }
+        case 'Chart':
+            return _jsx(Chart, { part: part, ctx: ctx });
+        case 'Image': {
+            const url = ctx.url(part.url, 'image');
+            return url ? (_jsxs("figure", { className: "an-w-image", children: [_jsx("img", { src: url, alt: str(part.alt), referrerPolicy: "no-referrer", loading: "lazy" }), str(part.caption) && _jsx("figcaption", { children: str(part.caption) })] })) : null;
+        }
+        case 'List': {
+            const items = list(part.items).filter((it) => str(it?.title));
+            if (items.length === 0)
+                return null;
+            const Tag = part.ordered === true ? 'ol' : 'ul';
+            return (_jsxs("div", { className: "an-w-list", children: [str(part.title) && _jsx("div", { className: "an-w-title", children: str(part.title) }), _jsx(Tag, { children: items.map((it, i) => (_jsxs("li", { children: [_jsx("i", { className: `an-w-dot is-${toneOf(it?.tone)}`, "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("strong", { children: str(it?.title) }), str(it?.detail) && _jsx("span", { children: str(it?.detail) })] }), str(it?.meta) && _jsx("small", { children: str(it?.meta) })] }, i))) })] }));
+        }
+        case 'Note':
+            if (!str(part.text))
+                return null;
+            return (_jsxs("div", { className: "an-w-note", children: [str(part.title) && _jsx("strong", { children: str(part.title) }), _jsx("span", { children: str(part.text) })] }));
+        case 'Badge':
+            return str(part.text) ? _jsx("span", { className: `an-w-badge is-${toneOf(part.tone)}`, children: str(part.text) }) : null;
+        case 'Link': {
+            const url = ctx.url(part.url, 'link');
+            return url && str(part.label) ? (_jsx("a", { className: "an-w-link", href: url, target: "_blank", rel: "noreferrer noopener", children: str(part.label) })) : null;
+        }
+        case 'Button':
+            if (!str(part.label))
+                return null;
+            return (_jsx("button", { type: "button", className: `an-w-button is-${part.variant === 'secondary' ? 'secondary' : 'primary'}`, disabled: !onAsk, onClick: () => onAsk?.(str(part.label)), children: str(part.label) }));
+        case 'Suggestions': {
+            const options = list(part.options).map(str).filter(Boolean);
+            if (options.length === 0)
+                return null;
+            return (_jsx("div", { className: "an-w-suggest", children: options.map((o, i) => (_jsx("button", { type: "button", disabled: !onAsk, onClick: () => onAsk?.(o), children: o }, i))) }));
+        }
+        case 'Divider':
+            return _jsx("hr", { className: "an-w-divider" });
+        default:
+            return null;
+    }
+}
+const CONTAINERS = new Set(['Column', 'Row', 'Card']);
+// A plain function, not a component: the set of parts already drawn lives for
+// one render of the widget. As a component, React's development mode would draw
+// each part twice and find every one "already drawn" on its second pass.
+function draw(id, ctx) {
+    const part = ctx.byId.get(id);
+    // A part listed twice, or a loop of containers, is drawn once.
+    if (!part || ctx.seen.has(id))
+        return null;
+    ctx.seen.add(id);
+    const kids = CONTAINERS.has(part.component)
+        ? list(part.children)
+            .filter((k) => typeof k === 'string')
+            .map((k) => _jsx(Fragment, { children: draw(k, ctx) }, k))
+        : undefined;
+    const own = ctx.props.parts?.[part.component];
+    return own ? own({ part, children: kids, onAsk: ctx.props.onAsk }) : defaultPart(part, kids, ctx);
+}
+/** One widget, drawn from its root part. Draws nothing when there is no root yet. */
+export function WidgetView(props) {
+    const { widget, currency = 'USD', locale, allowUrl } = props;
+    const byId = new Map();
+    for (const p of Array.isArray(widget?.components) ? widget.components : []) {
+        if (p && typeof p === 'object' && typeof p.id === 'string' && typeof p.component === 'string' && !byId.has(p.id))
+            byId.set(p.id, p);
+    }
+    if (!byId.has('root'))
+        return null;
+    let moneyFormat;
+    try {
+        moneyFormat = new Intl.NumberFormat(locale, { style: 'currency', currency, maximumFractionDigits: 0 });
+    }
+    catch {
+        moneyFormat = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 });
+    }
+    const numberFormat = new Intl.NumberFormat(locale);
+    const ctx = {
+        byId,
+        seen: new Set(),
+        props,
+        money: (n) => moneyFormat.format(n),
+        number: (n) => numberFormat.format(n),
+        url: (v, use) => (typeof v === 'string' && httpsOnly(v) && (allowUrl ? allowUrl(v, use) : true) ? v : undefined),
+    };
+    return (_jsx(Boundary, { children: _jsx("div", { className: `an-w${props.className ? ` ${props.className}` : ''}`, "data-surface": widget.surfaceId, children: draw('root', ctx) }) }));
+}
+function Paragraphs({ text }) {
+    return (_jsx(_Fragment, { children: text
+            .trim()
+            .split(/\n{2,}/)
+            .map((p, i) => (_jsx("p", { className: "an-reply-text", children: p.split('\n').map((line, j) => (_jsxs(Fragment, { children: [j > 0 && _jsx("br", {}), line] }, j))) }, i))) }));
+}
+/** A whole reply: its words, with each widget drawn where it sits. */
+export function ReplyView({ text, widgets, renderText, className, ...widgetProps }) {
+    return (_jsx("div", { className: `an-reply${className ? ` ${className}` : ''}`, children: placeWidgets(text, widgets ?? []).map((piece, i) => piece.kind === 'text' ? (_jsx(Fragment, { children: renderText ? renderText(piece.text) : _jsx(Paragraphs, { text: piece.text }) }, `t${i}`)) : (_jsx(WidgetView, { widget: piece.widget, ...widgetProps }, piece.widget.surfaceId))) }));
+}
+//# sourceMappingURL=react.js.map