@beeuni/sdk 0.2.0 → 0.3.0

package/dist/genui/react/default-components.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { genuiA11yText } from '../index.js';
+const v = (name, fallback) => `var(--genui-${name}, ${fallback})`;
+const box = {
+    border: `1px solid ${v('border', 'rgba(0,0,0,.12)')}`,
+    borderRadius: v('radius', '10px'),
+    background: v('surface', 'transparent'),
+    padding: 12,
+};
+const muted = { color: v('muted', 'rgba(0,0,0,.6)'), fontSize: 13 };
+const TONE = { good: '#15803d', warn: '#b45309', bad: '#b91c1c', neutral: 'inherit' };
+const kids = (value) => (Array.isArray(value) ? value : []);
+function DataTable({ head, rows, caption }) {
+    return (_jsxs("table", { style: { borderCollapse: 'collapse', width: '100%', fontSize: 14 }, children: [caption ? _jsx("caption", { style: { ...muted, textAlign: 'left', captionSide: 'bottom', paddingTop: 6 }, children: caption }) : null, _jsx("thead", { children: _jsx("tr", { children: head.map((cell, i) => (_jsx("th", { scope: "col", style: { textAlign: 'left', padding: '6px 8px', borderBottom: `1px solid ${v('border', 'rgba(0,0,0,.12)')}` }, children: cell }, i))) }) }), _jsx("tbody", { children: rows.map((row, r) => (_jsx("tr", { children: head.map((_, c) => (_jsx("td", { style: { padding: '6px 8px' }, children: String(row[c] ?? '') }, c))) }, r))) })] }));
+}
+function seriesRows(labels, series) {
+    return labels.map((label, i) => [label, ...series.map((s) => s.props.values?.[i] ?? '')]);
+}
+const Stack = ({ props, renderChild }) => (_jsx("div", { style: { display: 'flex', flexDirection: props.direction === 'row' ? 'row' : 'column', flexWrap: 'wrap', gap: 12 }, children: kids(props.children).map(renderChild) }));
+const Card = ({ props, renderChild }) => (_jsxs("article", { style: box, children: [props.image ? _jsx("img", { src: props.image, alt: "", referrerPolicy: "no-referrer", loading: "lazy", style: { width: '100%', borderRadius: 6, marginBottom: 8 } }) : null, _jsx("h4", { style: { margin: 0 }, children: props.href ? _jsx("a", { href: props.href, target: "_blank", rel: "noopener noreferrer", children: props.title }) : props.title }), props.subtitle ? _jsx("p", { style: muted, children: props.subtitle }) : null, props.body ? _jsx("p", { style: { margin: '6px 0 0' }, children: props.body }) : null, kids(props.badges).length > 0 ? _jsx("div", { style: { display: 'flex', gap: 6, marginTop: 8 }, children: kids(props.badges).map(renderChild) }) : null] }));
+const Stat = ({ props }) => (_jsxs("div", { style: { ...box, minWidth: 120 }, children: [_jsx("div", { style: muted, children: props.label }), _jsxs("div", { style: { fontSize: 22, fontWeight: 600 }, children: [props.value, props.unit ? _jsxs("span", { style: muted, children: [" ", props.unit] }) : null] }), props.delta ? _jsx("div", { style: { color: TONE[props.trend === 'down' ? 'bad' : props.trend === 'up' ? 'good' : 'neutral'] }, children: props.delta }) : null] }));
+const StatRow = ({ props, renderChild }) => (_jsx("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap' }, children: kids(props.stats).map(renderChild) }));
+const Table = ({ props }) => _jsx(DataTable, { head: props.columns, rows: props.rows, caption: props.caption });
+const Compare = ({ props }) => {
+    const items = kids(props.items);
+    const specs = props.specs ?? [];
+    return (_jsxs("div", { style: box, children: [specs.length > 0 ? (_jsx(DataTable, { head: ['', ...items.map((item) => String(item.props.name))], rows: specs.map((spec, i) => [spec, ...items.map((item) => item.props.values[i] ?? '—')]) })) : null, _jsx("div", { style: { display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 12, marginTop: 8 }, children: items.map((item) => (_jsxs("div", { children: [_jsxs("strong", { children: [String(item.props.name), props.winner === item.props.name ? ' ✓' : ''] }), _jsxs("ul", { style: { margin: '6px 0', paddingLeft: 18 }, children: [(item.props.pros ?? []).map((pro, i) => _jsxs("li", { children: ["+ ", pro] }, `p${i}`)), (item.props.cons ?? []).map((con, i) => _jsxs("li", { children: ["\u2212 ", con] }, `c${i}`))] })] }, item.id))) })] }));
+};
+const RankedList = ({ props }) => (_jsx("ol", { style: { margin: 0, paddingLeft: 20, display: 'grid', gap: 8 }, children: kids(props.items).map((item) => (_jsxs("li", { children: [_jsx("strong", { children: item.props.href ? _jsx("a", { href: String(item.props.href), target: "_blank", rel: "noopener noreferrer", children: String(item.props.title) }) : String(item.props.title) }), item.props.meta ? _jsxs("span", { style: muted, children: [" \u00B7 ", String(item.props.meta)] }) : null, _jsx("div", { children: String(item.props.reason) })] }, item.id))) }));
+const Steps = ({ props }) => (_jsx("ol", { style: { margin: 0, paddingLeft: 20, display: 'grid', gap: 8 }, children: kids(props.steps).map((step) => (_jsxs("li", { children: [step.props.image && !step.partial ? (_jsx("img", { src: String(step.props.image), alt: "", width: 64, height: 64, loading: "lazy", referrerPolicy: "no-referrer", style: { objectFit: 'cover', borderRadius: 6 } })) : null, _jsx("strong", { children: String(step.props.title) }), step.props.meta ? _jsxs("span", { style: muted, children: [" \u00B7 ", String(step.props.meta)] }) : null, step.props.text ? _jsx("div", { style: { whiteSpace: 'pre-line' }, children: String(step.props.text) }) : null] }, step.id))) }));
+const Checklist = ({ props }) => (_jsxs("div", { style: box, children: [_jsx("strong", { children: props.title }), _jsx("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: (props.items ?? []).map((item, i) => (_jsx("li", { children: _jsxs("label", { children: [_jsx("input", { type: "checkbox" }), " ", item] }) }, i))) })] }));
+const SeriesChart = ({ node, props }) => {
+    const labels = props.categories ?? props.x ?? [];
+    const series = kids(props.series);
+    return (_jsx("figure", { style: { ...box, margin: 0 }, "aria-label": genuiA11yText(node) ?? undefined, children: _jsx(DataTable, { head: ['', ...series.map((s) => String(s.props.name))], rows: seriesRows(labels, series), caption: `Source: ${props.source}` }) }));
+};
+const PieChart = ({ node, props }) => (_jsx("figure", { style: { ...box, margin: 0 }, "aria-label": genuiA11yText(node) ?? undefined, children: _jsx(DataTable, { head: ['', props.unit ?? ''], rows: kids(props.slices).map((s) => [s.props.label, s.props.value]), caption: `Source: ${props.source}` }) }));
+const Map = ({ node, props }) => (_jsxs("figure", { style: { ...box, margin: 0 }, "aria-label": genuiA11yText(node) ?? undefined, children: [_jsx("ul", { style: { margin: 0, paddingLeft: 18 }, children: kids(props.markers).map((m) => (_jsxs("li", { children: [_jsx("a", { href: `https://www.openstreetmap.org/?mlat=${m.props.lat}&mlon=${m.props.lng}#map=15/${m.props.lat}/${m.props.lng}`, target: "_blank", rel: "noopener noreferrer", children: String(m.props.label) }), m.props.description ? ` — ${String(m.props.description)}` : ''] }, m.id))) }), _jsxs("figcaption", { style: muted, children: ["Source: ", props.source] })] }));
+const Tabs = ({ props, renderChild }) => {
+    const tabs = kids(props.tabs);
+    const [active, setActive] = useState(0);
+    const base = useId();
+    const current = tabs[Math.min(active, tabs.length - 1)];
+    return (_jsxs("div", { children: [_jsx("div", { role: "tablist", style: { display: 'flex', gap: 4, borderBottom: `1px solid ${v('border', 'rgba(0,0,0,.12)')}` }, children: tabs.map((tab, i) => (_jsx("button", { role: "tab", id: `${base}-t${i}`, "aria-selected": i === active, "aria-controls": `${base}-p${i}`, onClick: () => setActive(i), style: { padding: '6px 10px', border: 0, background: 'none', borderBottom: i === active ? `2px solid ${v('accent', 'currentColor')}` : '2px solid transparent', cursor: 'pointer' }, children: String(tab.props.label) }, tab.id))) }), current ? (_jsx("div", { role: "tabpanel", id: `${base}-p${active}`, "aria-labelledby": `${base}-t${active}`, style: { paddingTop: 12, display: 'grid', gap: 12 }, children: kids(current.props.children).map(renderChild) })) : null] }));
+};
+const Accordion = ({ props, renderChild }) => (_jsx("div", { style: { display: 'grid', gap: 6 }, children: kids(props.items).map((item) => (_jsxs("details", { style: box, children: [_jsx("summary", { style: { cursor: 'pointer', fontWeight: 600 }, children: String(item.props.title) }), _jsx("div", { style: { paddingTop: 8, display: 'grid', gap: 12 }, children: kids(item.props.children).map(renderChild) })] }, item.id))) }));
+const Badge = ({ props }) => (_jsx("span", { style: { border: `1px solid ${v('border', 'rgba(0,0,0,.12)')}`, borderRadius: 999, padding: '1px 8px', fontSize: 12, color: TONE[props.tone ?? 'neutral'] }, children: props.label }));
+const Callout = ({ props }) => (_jsxs("aside", { role: "note", style: { ...box, borderLeft: `3px solid ${TONE[props.tone === 'warn' ? 'warn' : props.tone === 'success' ? 'good' : 'neutral']}` }, children: [props.title ? _jsxs("strong", { children: [props.title, " "] }) : null, props.body] }));
+const Image = ({ props }) => (_jsxs("figure", { style: { margin: 0, display: props.text ? 'flex' : undefined, gap: 12, alignItems: 'flex-start' }, children: [_jsx("img", { src: props.src, alt: props.alt, referrerPolicy: "no-referrer", loading: "lazy", style: props.text ? { width: 140, flexShrink: 0, borderRadius: 6 } : { maxWidth: '100%', borderRadius: 6 } }), props.text ? _jsx("figcaption", { children: props.text }) : props.caption ? _jsx("figcaption", { style: muted, children: props.caption }) : null] }));
+const Link = ({ props }) => (_jsx("a", { href: props.href, target: "_blank", rel: "noopener noreferrer", children: props.label }));
+export const defaultGenuiComponents = {
+    Stack,
+    Card,
+    Stat,
+    StatRow,
+    Table,
+    Compare,
+    RankedList,
+    BarChart: SeriesChart,
+    LineChart: SeriesChart,
+    PieChart,
+    Map,
+    Steps,
+    Checklist,
+    Tabs,
+    Accordion,
+    Badge,
+    Callout,
+    Image,
+    Link,
+};

package/dist/genui/react/default-components.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/genui/react/default-components.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { defaultGenuiComponents } from './default-components.js';
+import { GenuiBlock } from './genui-block.js';
+const md = (markdown) => _jsx("pre", { children: markdown });
+const render = (code) => renderToStaticMarkup(_jsx(GenuiBlock, { code: code, streaming: false, components: defaultGenuiComponents, renderMarkdown: md }));
+const ALL = `root = Stack([top, bottom])
+top = Stack([stats, card, table, cmp, list, bar, line])
+bottom = Stack([pie, map, tabs, acc, note, img, link])
+stats = StatRow([s1, s2])
+s1 = Stat("Revenue", "12k", "+4%", "up", "USD")
+s2 = Stat("Users", "900")
+card = Card("Option A", "Close to the venue", "4.7 stars", null, "https://example.com/a", [tag])
+tag = Badge("Top pick", "good")
+table = Table(["Name", "Value"], [["a", 1], ["b", 2]], "Sample")
+cmp = Compare([x, y], ["Price", "Rating"], "X")
+x = CompareItem("X", ["$10", "4.5"], ["Cheap"], ["Small"])
+y = CompareItem("Y", ["$20", "4.8"])
+list = RankedList([r1])
+r1 = RankedItem("First", "Best overall", "4.7 stars")
+bar = BarChart(["Q1", "Q2"], [rev], "billing export", "USD")
+rev = Series("Revenue", [1, 2])
+line = LineChart(["Jan", "Feb"], [rev], "billing export")
+pie = PieChart([p1, p2], "survey tool")
+p1 = Slice("Yes", 3)
+p2 = Slice("No", 1)
+map = Map([m1], "places tool")
+m1 = Marker(48.85, 2.35, "Center", "Main square")
+tabs = Tabs([t1, t2])
+t1 = Tab("One", [b1])
+t2 = Tab("Two", [b2])
+b1 = Badge("first")
+b2 = Badge("second")
+acc = Accordion([a1])
+a1 = AccordionItem("Details", [b1])
+note = Callout("warn", "Check the dates", "Note")
+img = Image("https://example.com/i.png", "A picture", "Caption")
+link = Link("Book", "https://example.com/book")`;
+describe('defaultGenuiComponents', () => {
+    test('renders every v1 component from one block', () => {
+        const html = render(ALL);
+        for (const expected of [
+            'Revenue', '12k', 'Option A', 'Top pick', '<table', 'Sample', 'Cheap', 'Best overall',
+            'Source: billing export', 'Source: survey tool', 'openstreetmap.org', 'role="tablist"', '<details',
+            'Check the dates', 'alt="A picture"', 'href="https://example.com/book"',
+        ]) {
+            expect(html).toContain(expected);
+        }
+        expect(html).not.toContain('<pre>');
+    });
+    test('every block component has a default', () => {
+        const names = ['Stack', 'Card', 'Stat', 'StatRow', 'Table', 'Compare', 'RankedList', 'BarChart', 'LineChart', 'PieChart', 'Map', 'Steps', 'Checklist', 'Tabs', 'Accordion', 'Badge', 'Callout', 'Image', 'Link'];
+        expect(Object.keys(defaultGenuiComponents).sort()).toEqual([...names].sort());
+    });
+    test('Steps render each title, meta, text, and photo; a Checklist renders a checkbox per item', () => {
+        const steps = render('root = Steps([a, b])\na = Step("Home → Central Station", "Take a taxi.", "https://example.com/s.jpg", "about 20 min")\nb = Step("Find your gate")');
+        for (const expected of ['<ol', 'Home → Central Station', 'about 20 min', 'Take a taxi.', 'Find your gate', 'src="https://example.com/s.jpg"', 'referrerPolicy="no-referrer"']) {
+            expect(steps).toContain(expected);
+        }
+        expect(steps).not.toContain('<pre>');
+        const list = render('root = Checklist("Pack", ["Valid passport", "Bank card"])');
+        expect(list).toContain('Pack');
+        expect(list).toContain('Valid passport');
+        expect(list.match(/type="checkbox"/g)).toHaveLength(2);
+        expect(list).not.toContain('<pre>');
+    });
+    test('a Step still streaming loads no photo: its URL may be half-written', () => {
+        const code = 'root = Steps([a, b])\na = Step("Done", "Go.", "https://example.com/a.jpg")\nb = Step("Next", "Go.", "https://example.com/photos/g';
+        const html = renderToStaticMarkup(_jsx(GenuiBlock, { code: code, streaming: true, components: defaultGenuiComponents, renderMarkdown: md }));
+        expect(html).toContain('Next');
+        expect(html).toContain('src="https://example.com/a.jpg"');
+        expect(html).not.toContain('https://example.com/photos/g');
+    });
+    test('external links open safely', () => {
+        expect(render('root = Stack([l])\nl = Link("x", "https://example.com")')).toContain('rel="noopener noreferrer"');
+    });
+    test('charts carry an accessible label', () => {
+        expect(render('root = Stack([c])\nc = BarChart(["a"], [s], "src")\ns = Series("S", [1])')).toContain('aria-label="Bar chart: S. Source: src"');
+    });
+    test('images do not leak the referrer and load lazily', () => {
+        const html = render('root = Stack([i])\ni = Image("https://example.com/i.png", "A picture")');
+        expect(html).toContain('referrerPolicy="no-referrer"');
+        expect(html).toContain('loading="lazy"');
+        const card = render('root = Stack([c])\nc = Card("T", null, null, "https://example.com/c.png")');
+        expect(card).toContain('referrerPolicy="no-referrer"');
+        expect(card).toContain('loading="lazy"');
+    });
+    test('a javascript: link never reaches the markup and siblings still render', () => {
+        const html = render('root = Stack([l, ok])\nl = Link("x", "javascript:alert(1)")\nok = Badge("kept")');
+        expect(html).not.toContain('javascript:');
+        expect(html).toContain('kept');
+    });
+});

package/dist/genui/react/genui-block-disabled.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/genui/react/genui-block-disabled.test.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, mock, test } from 'bun:test';
+import * as langCore from '@openuidev/lang-core';
+import { act, create } from 'react-test-renderer';
+const real = { ...langCore };
+let parsersCreated = 0;
+mock.module('@openuidev/lang-core', () => ({
+    ...real,
+    createStreamingParser: (...args) => {
+        parsersCreated += 1;
+        return real.createStreamingParser(...args);
+    },
+}));
+const { GenuiBlock } = await import('./genui-block.js');
+const { GENUI_CUT_OFF_NOTE } = await import('../markdown.js');
+Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', { value: true, configurable: true });
+const CODE = 'root = Stack([a, b])\na = Badge("kept")\nb = Callout("info", "a longer sentence that streams in")';
+const renderMarkdown = (markdown) => _jsx("pre", { "data-type": "markdown", children: markdown });
+const shown = (renderer) => renderer.root.findAllByProps({ 'data-type': 'markdown' }).map((node) => node.children.join(''));
+function mount(element) {
+    let renderer;
+    act(() => {
+        renderer = create(element);
+    });
+    return renderer;
+}
+test('Rich answers off: streamed ticks never show the cut-off note; a settled cut-off block does', () => {
+    const props = { version: 1, enabled: false, components: {}, renderMarkdown };
+    const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, 30), streaming: true }));
+    const ticks = [];
+    for (let end = 31; end <= CODE.length; end += 3) {
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, end), streaming: true })));
+        ticks.push(shown(renderer));
+    }
+    expect(ticks.flat().some((markdown) => markdown.includes(GENUI_CUT_OFF_NOTE))).toBe(false);
+    expect(ticks.some((markdown) => markdown.join('') === '[kept]')).toBe(true);
+    const cutOff = CODE.slice(0, CODE.indexOf('streams'));
+    act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: cutOff, streaming: false })));
+    expect(shown(renderer)).toEqual([`[kept]\n\n*${GENUI_CUT_OFF_NOTE}*`]);
+});
+test('Rich answers off: a streamed block uses one incremental parser, not one parse per tick', () => {
+    const props = { version: 1, enabled: false, components: {}, renderMarkdown };
+    const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, 30), streaming: true }));
+    parsersCreated = 0;
+    for (let end = 31; end <= CODE.length; end += 3) {
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, end), streaming: true })));
+    }
+    act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: false })));
+    expect(parsersCreated).toBe(0);
+});

package/dist/genui/react/genui-block.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type GenuiNode, type GenuiParseResult } from '../index.js';
+export interface GenuiComponentProps {
+    node: GenuiNode;
+    props: Record<string, any>;
+    renderChild: (node: GenuiNode) => ReactNode;
+    streaming: boolean;
+}
+export type GenuiComponentMap = Readonly<Partial<Record<string, ComponentType<GenuiComponentProps>>>>;
+export type GenuiOutcome = 'rendered' | 'fallback' | 'parse_error' | 'render_error' | 'unsupported';
+export interface GenuiBlockEvent {
+    outcome: GenuiOutcome;
+    components: string[];
+    msToFirstPaint: number | null;
+    issueCount: number;
+}
+export interface GenuiBlockProps {
+    code: string;
+    version?: number;
+    streaming: boolean;
+    components: GenuiComponentMap;
+    renderMarkdown: (markdown: string) => ReactNode;
+    renderPending?: (node: GenuiNode) => ReactNode;
+    enabled?: boolean;
+    onSettled?: (event: GenuiBlockEvent) => void;
+}
+export declare function useGenuiParse(code: string, version: number, streaming: boolean): GenuiParseResult;
+export declare function GenuiBlock({ code, version, streaming, components, renderMarkdown, renderPending, enabled, onSettled, }: GenuiBlockProps): import("react").JSX.Element | null;

package/dist/genui/react/genui-block.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, } from 'react';
+import { genuiResultToMarkdown } from '../markdown.js';
+import { createGenuiParser, genuiNodeToMarkdown, GENUI_CUT_OFF_NOTE, GENUI_SCHEMA_VERSION, GENUI_UNSUPPORTED_NOTE, } from '../index.js';
+const RenderContext = createContext(null);
+const renderNothing = () => null;
+const GenuiNodeView = memo(function NodeView({ node }) {
+    const context = useContext(RenderContext);
+    const renderChild = useCallback((child) => _jsx(GenuiNodeView, { node: child }, child.id), []);
+    if (node.partial)
+        return _jsx(_Fragment, { children: context.renderPending(node) });
+    const HostComponent = context.components[node.type];
+    if (!HostComponent)
+        return _jsx(_Fragment, { children: context.renderMarkdown(genuiNodeToMarkdown(node)) });
+    return _jsx(HostComponent, { node: node, props: node.props, renderChild: renderChild, streaming: context.streaming });
+});
+class BlockBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch() {
+        this.props.onError();
+    }
+    componentDidUpdate(previous) {
+        if (previous.streaming && !this.props.streaming && this.state.failed)
+            this.setState({ failed: false });
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+function collectTypes(node, into) {
+    if (!node)
+        return into;
+    into.add(node.type);
+    for (const value of Object.values(node.props)) {
+        if (Array.isArray(value))
+            for (const child of value)
+                if (child && typeof child === 'object' && 'type' in child)
+                    collectTypes(child, into);
+    }
+    return into;
+}
+const BlockFallback = memo(function BlockFallback({ result, renderMarkdown, }) {
+    const markdown = useMemo(() => genuiResultToMarkdown(result), [result]);
+    return _jsx(_Fragment, { children: markdown ? renderMarkdown(markdown) : null });
+});
+export function useGenuiParse(code, version, streaming) {
+    const parserRef = useRef(null);
+    if (!parserRef.current || parserRef.current.version !== version) {
+        parserRef.current = { version, parser: createGenuiParser(version) };
+    }
+    return parserRef.current.parser.update(code, streaming);
+}
+export function GenuiBlock({ code, version = GENUI_SCHEMA_VERSION, streaming, components, renderMarkdown, renderPending = renderNothing, enabled = true, onSettled, }) {
+    const result = useGenuiParse(code, version, streaming);
+    const mountedAt = useRef(performance.now());
+    const firstPaint = useRef(null);
+    const renderError = useRef(false);
+    if (enabled && result.root && firstPaint.current === null)
+        firstPaint.current = performance.now() - mountedAt.current;
+    const context = useMemo(() => ({ components, renderMarkdown, renderPending, streaming }), [components, renderMarkdown, renderPending, streaming]);
+    const unsupported = version !== GENUI_SCHEMA_VERSION;
+    useEffect(() => {
+        if (streaming || !onSettled)
+            return;
+        const outcome = unsupported
+            ? 'unsupported'
+            : !enabled
+                ? 'fallback'
+                : renderError.current
+                    ? 'render_error'
+                    : result.root
+                        ? 'rendered'
+                        : 'parse_error';
+        onSettled({
+            outcome,
+            components: enabled ? [...collectTypes(result.root, new Set())].sort() : [],
+            msToFirstPaint: firstPaint.current === null ? null : Math.round(firstPaint.current),
+            issueCount: enabled ? result.issues.length : 0,
+        });
+    }, [streaming]);
+    if (unsupported)
+        return _jsx(_Fragment, { children: renderMarkdown(`*${GENUI_UNSUPPORTED_NOTE}*`) });
+    if (!enabled)
+        return _jsx(BlockFallback, { result: result, renderMarkdown: renderMarkdown });
+    if (!result.root)
+        return streaming ? null : _jsx(BlockFallback, { result: result, renderMarkdown: renderMarkdown });
+    return (_jsxs(BlockBoundary, { streaming: streaming, fallback: _jsx(BlockFallback, { result: result, renderMarkdown: renderMarkdown }), onError: () => (renderError.current = !streaming), children: [_jsx(RenderContext.Provider, { value: context, children: _jsx(GenuiNodeView, { node: result.root }) }), !streaming && result.issues.some((issue) => issue.code === 'cut-off') ? renderMarkdown(`*${GENUI_CUT_OFF_NOTE}*`) : null] }));
+}

package/dist/genui/react/genui-block.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/genui/react/genui-block.test.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, test } from 'bun:test';
+import { useEffect } from 'react';
+import { act, create } from 'react-test-renderer';
+import { GenuiBlock } from './genui-block.js';
+Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', { value: true, configurable: true });
+const renders = new Map();
+const count = (id) => renders.set(id, (renders.get(id) ?? 0) + 1);
+const Stack = ({ node, props, renderChild }) => {
+    count(node.id);
+    return _jsx("div", { "data-type": "Stack", children: (props.children ?? []).map(renderChild) });
+};
+const Stat = ({ node, props }) => {
+    count(node.id);
+    return _jsx("span", { "data-type": "Stat", children: `${props.label}=${props.value}` });
+};
+const Boom = () => {
+    throw new Error('render failure');
+};
+const COMPONENTS = { Stack, Stat };
+const renderNothing = () => null;
+const renderMarkdown = (markdown) => _jsx("pre", { "data-type": "markdown", children: markdown });
+const CODE = 'root = Stack([a, b, c])\na = Stat("A", "1")\nb = Stat("B", "2")\nc = Stat("C", "3")';
+function mount(element) {
+    let renderer;
+    act(() => {
+        renderer = create(element);
+    });
+    return renderer;
+}
+describe('GenuiBlock', () => {
+    test('a finished statement renders once while later statements stream', () => {
+        renders.clear();
+        const props = { version: 1, components: COMPONENTS, renderMarkdown };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, 44), streaming: true }));
+        const midString = CODE.indexOf('"2"') + 1;
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, midString), streaming: true })));
+        const cut = CODE.indexOf('\nc =');
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, cut), streaming: true })));
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true })));
+        expect(renders.get('a')).toBe(1);
+        expect(renderer.root.findAll((n) => n.props['data-type'] === 'Stat').map((n) => n.children.join(''))).toEqual([
+            'A=1',
+            'B=2',
+            'C=3',
+        ]);
+    });
+    test('disabled renders the markdown fallback', () => {
+        const renderer = mount(_jsx(GenuiBlock, { code: CODE, streaming: false, enabled: false, components: COMPONENTS, renderMarkdown: renderMarkdown }));
+        expect(renderer.root.findByProps({ 'data-type': 'markdown' }).children.join('')).toBe('**A:** 1\n\n**B:** 2\n\n**C:** 3');
+    });
+    test('a component missing from the host map renders that node as markdown', () => {
+        const renderer = mount(_jsx(GenuiBlock, { code: CODE, streaming: false, components: { Stack }, renderMarkdown: renderMarkdown }));
+        expect(renderer.root.findAllByProps({ 'data-type': 'markdown' }).map((n) => n.children.join(''))).toEqual([
+            '**A:** 1',
+            '**B:** 2',
+            '**C:** 3',
+        ]);
+    });
+    test('a render error falls back to markdown and reports render_error', () => {
+        const events = [];
+        const original = console.error;
+        console.error = () => { };
+        const renderer = mount(_jsx(GenuiBlock, { code: CODE, streaming: false, components: { Stack, Stat: Boom }, renderMarkdown: renderMarkdown, onSettled: (event) => events.push(event) }));
+        console.error = original;
+        expect(renderer.root.findByProps({ 'data-type': 'markdown' })).toBeTruthy();
+        expect(events.map((e) => e.outcome)).toEqual(['render_error']);
+    });
+    test('broken source renders a one-line note, never raw source, and reports parse_error', () => {
+        const events = [];
+        const renderer = mount(_jsx(GenuiBlock, { code: "not openui", streaming: false, components: COMPONENTS, renderMarkdown: renderMarkdown, onSettled: (e) => events.push(e) }));
+        expect(renderer.root.findByProps({ 'data-type': 'markdown' }).children.join('')).toBe('*This content could not be displayed.*');
+        expect(events[0]?.outcome).toBe('parse_error');
+    });
+    test('a block cut off mid-statement renders its valid part and the cut-off note', () => {
+        const renderer = mount(_jsx(GenuiBlock, { code: 'root = Stack([a, b])\na = Stat("A", "1")\nb = Stat("B", "', streaming: false, components: COMPONENTS, renderMarkdown: renderMarkdown }));
+        expect(renderer.root.findAll((n) => n.props['data-type'] === 'Stat').map((n) => n.children.join(''))).toEqual(['A=1']);
+        expect(renderer.root.findByProps({ 'data-type': 'markdown' }).children.join('')).toBe('*Response was cut off.*');
+    });
+    test('a newer version shows the unsupported note', () => {
+        const renderer = mount(_jsx(GenuiBlock, { code: CODE, version: 2, streaming: false, components: COMPONENTS, renderMarkdown: renderMarkdown }));
+        expect(renderer.root.findByProps({ 'data-type': 'markdown' }).children.join('')).toContain('newer version');
+    });
+    test('settled event names components, never content', () => {
+        const events = [];
+        const props = { version: 1, components: COMPONENTS, renderMarkdown, onSettled: (e) => events.push(e) };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true }));
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: false })));
+        expect(events).toHaveLength(1);
+        expect(events[0]).toMatchObject({ outcome: 'rendered', components: ['Stack', 'Stat'], issueCount: 0 });
+        expect(JSON.stringify(events[0])).not.toContain('A=1');
+    });
+    test('a stable renderMarkdown keeps finished nodes from re-rendering', () => {
+        renders.clear();
+        const props = { version: 1, components: COMPONENTS, renderMarkdown, renderPending: renderNothing };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, 44), streaming: true }));
+        const midString = CODE.indexOf('"2"') + 1;
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, midString), streaming: true })));
+        const cut = CODE.indexOf('\nc =');
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, cut), streaming: true })));
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true })));
+        expect(renders.get('a')).toBe(1);
+    });
+    test('swapping renderMarkdown re-renders the fallback', () => {
+        const rendererA = (m) => _jsx("pre", { "data-r": "A", children: m });
+        const rendererB = (m) => _jsx("pre", { "data-r": "B", children: m });
+        const props = { version: 1, enabled: false, components: COMPONENTS, code: CODE, streaming: false };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, renderMarkdown: rendererA }));
+        expect(renderer.root.findAllByProps({ 'data-r': 'A' })).toHaveLength(1);
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, renderMarkdown: rendererB })));
+        expect(renderer.root.findAllByProps({ 'data-r': 'B' })).toHaveLength(1);
+        expect(renderer.root.findAllByProps({ 'data-r': 'A' })).toHaveLength(0);
+    });
+    test('swapping renderMarkdown reaches nodes rendered as markdown', () => {
+        const rendererA = (m) => _jsx("pre", { "data-r": "A", children: m });
+        const rendererB = (m) => _jsx("pre", { "data-r": "B", children: m });
+        const props = { version: 1, components: { Stack }, code: CODE, streaming: false };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, renderMarkdown: rendererA }));
+        expect(renderer.root.findAllByProps({ 'data-r': 'A' }).length).toBeGreaterThan(0);
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, renderMarkdown: rendererB })));
+        expect(renderer.root.findAllByProps({ 'data-r': 'B' }).length).toBeGreaterThan(0);
+        expect(renderer.root.findAllByProps({ 'data-r': 'A' })).toHaveLength(0);
+    });
+    test('the fallback markdown is not computed while a valid block streams', () => {
+        let markdownCalls = 0;
+        const countingMarkdown = (markdown) => {
+            markdownCalls += 1;
+            return _jsx("pre", { "data-type": "markdown", children: markdown });
+        };
+        const props = { version: 1, components: COMPONENTS, renderMarkdown: countingMarkdown };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, 44), streaming: true }));
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE.slice(0, CODE.indexOf('\nc =')), streaming: true })));
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true })));
+        expect(markdownCalls).toBe(0);
+    });
+    test('a throw while streaming gets a fresh try once the stream settles', () => {
+        const FlakyStat = ({ node, props, streaming }) => {
+            if (streaming)
+                throw new Error('only while streaming');
+            count(node.id);
+            return _jsx("span", { "data-type": "Stat", children: `${props.label}=${props.value}` });
+        };
+        const components = { Stack, Stat: FlakyStat };
+        const original = console.error;
+        console.error = () => { };
+        const props = { version: 1, components, renderMarkdown };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true }));
+        expect(renderer.root.findAllByProps({ 'data-type': 'Stat' })).toHaveLength(0);
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: false })));
+        console.error = original;
+        expect(renderer.root.findAll((n) => n.props['data-type'] === 'Stat').map((n) => n.children.join(''))).toEqual([
+            'A=1',
+            'B=2',
+            'C=3',
+        ]);
+    });
+    test('settling does not remount host components', () => {
+        let mounts = 0;
+        const MountCounter = ({ props }) => {
+            useEffect(() => {
+                mounts += 1;
+            }, []);
+            return _jsx("span", { "data-type": "Stat", children: `${props.label}=${props.value}` });
+        };
+        const props = { version: 1, components: { Stack, Stat: MountCounter }, renderMarkdown };
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true }));
+        expect(mounts).toBe(3);
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: false })));
+        expect(mounts).toBe(3);
+    });
+    test('a disabled block reports no components and no first paint', () => {
+        const events = [];
+        mount(_jsx(GenuiBlock, { code: CODE, streaming: false, enabled: false, components: COMPONENTS, renderMarkdown: renderMarkdown, onSettled: (e) => events.push(e) }));
+        expect(events).toHaveLength(1);
+        expect(events[0]).toMatchObject({ outcome: 'fallback', components: [], msToFirstPaint: null });
+    });
+    test('a disabled block reports no issues', () => {
+        const events = [];
+        mount(_jsx(GenuiBlock, { code: CODE, streaming: false, enabled: false, components: COMPONENTS, renderMarkdown: renderMarkdown, onSettled: (e) => events.push(e) }));
+        expect(events[0]?.issueCount).toBe(0);
+    });
+    test('a disabled block converts to markdown once per distinct code, not once per render', () => {
+        let markdownCalls = 0;
+        const counting = (markdown) => {
+            markdownCalls += 1;
+            return _jsx("pre", { "data-type": "markdown", children: markdown });
+        };
+        const props = { version: 1, enabled: false, components: COMPONENTS, renderMarkdown: counting };
+        const ticks = [CODE.slice(0, 44), CODE.slice(0, CODE.indexOf('\nc =')), CODE];
+        const renderer = mount(_jsx(GenuiBlock, { ...props, code: ticks[0], streaming: true }));
+        for (const code of ticks.slice(1))
+            act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: code, streaming: true })));
+        expect(markdownCalls).toBe(3);
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true })));
+        act(() => renderer.update(_jsx(GenuiBlock, { ...props, code: CODE, streaming: true })));
+        expect(markdownCalls).toBe(3);
+    });
+    test('20,000 nested Stack([ never throws, enabled or disabled', () => {
+        const code = `root = ${'Stack(['.repeat(20_000)}Badge("x")${'])'.repeat(20_000)}`;
+        for (const enabled of [true, false]) {
+            const renderer = mount(_jsx(GenuiBlock, { code: code, streaming: false, enabled: enabled, components: COMPONENTS, renderMarkdown: renderMarkdown }));
+            expect(renderer.root.findByProps({ 'data-type': 'markdown' }).children.join('')).toBe('*This content could not be displayed.*');
+        }
+    });
+});

package/dist/genui/react/index.d.ts

@@ -0,0 +1,2 @@
+export { defaultGenuiComponents } from './default-components.js';
+export { GenuiBlock, useGenuiParse, type GenuiBlockEvent, type GenuiBlockProps, type GenuiComponentMap, type GenuiComponentProps, type GenuiOutcome, } from './genui-block.js';

package/dist/genui/react/index.js

@@ -0,0 +1,2 @@
+export { defaultGenuiComponents } from './default-components.js';
+export { GenuiBlock, useGenuiParse, } from './genui-block.js';

package/dist/genui/share.d.ts

@@ -0,0 +1,5 @@
+import type { GenuiNode } from './types.js';
+export declare function shareNodes(root: GenuiNode | null, previous: ReadonlyMap<string, GenuiNode>): {
+    root: GenuiNode | null;
+    byId: Map<string, GenuiNode>;
+};

package/dist/genui/share.js

@@ -0,0 +1,30 @@
+const isNode = (value) => typeof value === 'object' && value !== null && 'id' in value && 'type' in value && 'props' in value;
+function valueEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+        return false;
+    return a.every((item, index) => valueEqual(item, b[index]));
+}
+function propsEqual(a, b) {
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    return keys.every((key) => valueEqual(a[key], b[key]));
+}
+export function shareNodes(root, previous) {
+    const byId = new Map();
+    function share(node) {
+        const props = {};
+        for (const [key, value] of Object.entries(node.props)) {
+            props[key] = Array.isArray(value) && value.length > 0 && value.every(isNode) ? value.map(share) : value;
+        }
+        const before = previous.get(node.id);
+        const kept = before && before.type === node.type && before.partial === node.partial && propsEqual(before.props, props)
+            ? before
+            : { ...node, props };
+        byId.set(node.id, kept);
+        return kept;
+    }
+    return { root: root ? share(root) : null, byId };
+}

package/dist/genui/test-fixtures.d.ts

@@ -0,0 +1,2 @@
+export declare const HOTEL = "root = Stack([stats, list, tip])\nstats = StatRow([a, b])\na = Stat(\"Options checked\", \"24\")\nb = Stat(\"Under budget\", \"9\", \"+2\", \"up\")\nlist = RankedList([h1, h2])\nh1 = RankedItem(\"Option A\", \"Closest to the venue\", \"4.7 stars\", null, \"https://example.com/a\")\nh2 = RankedItem(\"Option B\", \"Quietest rooms\")\ntip = Callout(\"info\", \"Book by Friday\", \"Tip\")";
+export declare const BROKEN_TABS: string;

package/dist/genui/test-fixtures.js

@@ -0,0 +1,16 @@
+export const HOTEL = `root = Stack([stats, list, tip])
+stats = StatRow([a, b])
+a = Stat("Options checked", "24")
+b = Stat("Under budget", "9", "+2", "up")
+list = RankedList([h1, h2])
+h1 = RankedItem("Option A", "Closest to the venue", "4.7 stars", null, "https://example.com/a")
+h2 = RankedItem("Option B", "Quietest rooms")
+tip = Callout("info", "Book by Friday", "Tip")`;
+export const BROKEN_TABS = `root = Stack([tabs])
+tabs = Tabs([t1, t2])
+t1 = Tab("${'L'.repeat(31)}", [note, a])
+t2 = Tab("${'M'.repeat(31)}", [b, c])
+note = Callout("info", "${'x'.repeat(401)}")
+a = Table(["k"], [["1"]])
+b = Table(["k"], [["2"]])
+c = Table(["k"], [["3"]])`;