@burdenoff/fe-libs 2026.1027.2 → 2026.1027.3

package/dist/shared/assistant/openui/library.js

@@ -0,0 +1,191 @@
+import { barWidthPercent as e } from "./limits.js";
+import { array as t, number as n, object as r, string as i, union as a } from "../../../node_modules/zod/v4/classic/schemas.js";
+import { createLibrary$1 as o, defineComponent$1 as s, useRenderNode as c } from "../../../node_modules/@openuidev/react-lang/dist/exports-CLfR509v.js";
+import "../../../node_modules/@openuidev/react-lang/dist/index.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/shared/assistant/openui/library.tsx
+var d = ({ items: e, limit: t, className: n, testId: r, cellClassName: i }) => {
+	let a = c();
+	return /* @__PURE__ */ l("div", {
+		className: n,
+		"data-testid": r,
+		children: e.slice(0, t).map((e, t) => /* @__PURE__ */ l("div", {
+			className: i,
+			children: a(e)
+		}, t))
+	});
+}, f = a([i(), n()]), p = s({
+	name: "Stat",
+	description: "One headline figure: a short label, its value, and an optional one-line hint.",
+	props: r({
+		label: i().describe("What the figure measures, e.g. \"Open tasks\""),
+		value: f.describe("The figure itself, e.g. 12 or \"98%\""),
+		hint: i().optional().describe("Optional context, e.g. \"+3 since yesterday\"")
+	}),
+	component: ({ props: e }) => /* @__PURE__ */ u("div", {
+		className: "min-w-0 rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5",
+		"data-testid": "assistant-openui-stat",
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "truncate text-[12px] text-text-muted",
+				children: e.label
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "mt-0.5 truncate text-xl font-semibold leading-tight text-text-primary",
+				children: String(e.value)
+			}),
+			e.hint ? /* @__PURE__ */ l("div", {
+				className: "mt-0.5 truncate text-[12px] text-text-muted",
+				children: e.hint
+			}) : null
+		]
+	})
+}), m = s({
+	name: "StatGrid",
+	description: "A row of up to 8 Stat cards for headline numbers.",
+	props: r({ stats: t(p.ref) }),
+	component: ({ props: e }) => /* @__PURE__ */ l(d, {
+		className: "grid grid-cols-2 gap-2",
+		testId: "assistant-openui-stat-grid",
+		items: e.stats,
+		limit: 8,
+		cellClassName: "min-w-0"
+	})
+}), h = s({
+	name: "DataTable",
+	description: "A table. columns are the header labels (max 8); rows are arrays of cells in the same order (max 50 rows).",
+	props: r({
+		columns: t(i()),
+		rows: t(t(f)),
+		caption: i().optional()
+	}),
+	component: ({ props: e }) => {
+		let t = e.columns.slice(0, 8), n = e.rows.slice(0, 50);
+		return /* @__PURE__ */ l("div", {
+			className: "overflow-x-auto rounded-lg border border-border-subtle",
+			"data-testid": "assistant-openui-table",
+			children: /* @__PURE__ */ u("table", {
+				className: "w-full border-collapse text-[0.9em]",
+				children: [
+					e.caption ? /* @__PURE__ */ l("caption", {
+						className: "px-2 py-1.5 text-left text-[12px] text-text-muted",
+						children: e.caption
+					}) : null,
+					/* @__PURE__ */ l("thead", {
+						className: "bg-bg-sunken",
+						children: /* @__PURE__ */ l("tr", { children: t.map((e, t) => /* @__PURE__ */ l("th", {
+							scope: "col",
+							className: "px-2 py-1.5 text-left font-semibold text-text-primary",
+							children: e
+						}, t)) })
+					}),
+					/* @__PURE__ */ l("tbody", { children: n.map((e, n) => /* @__PURE__ */ l("tr", {
+						className: "border-t border-border-subtle",
+						children: t.map((t, n) => /* @__PURE__ */ l("td", {
+							className: "px-2 py-1.5 align-top text-text-primary",
+							children: e[n] === void 0 ? "" : String(e[n])
+						}, n))
+					}, n)) })
+				]
+			})
+		});
+	}
+}), g = s({
+	name: "Bar",
+	description: "One bar of a BarChart: a label and a non-negative number.",
+	props: r({
+		label: i(),
+		value: n()
+	}),
+	component: ({ props: e }) => /* @__PURE__ */ u("span", { children: [
+		e.label,
+		": ",
+		e.value
+	] })
+}), _ = s({
+	name: "BarChart",
+	description: "A horizontal bar chart comparing up to 20 values. Use for rankings and breakdowns.",
+	props: r({
+		title: i().optional(),
+		bars: t(g.ref)
+	}),
+	component: ({ props: t }) => {
+		let n = t.bars.slice(0, 20).map((e) => e.props), r = Math.max(0, ...n.map((e) => Number.isFinite(e.value) ? e.value : 0));
+		return /* @__PURE__ */ u("figure", {
+			className: "rounded-lg border border-border-subtle bg-bg-surface p-3",
+			"data-testid": "assistant-openui-bar-chart",
+			children: [t.title ? /* @__PURE__ */ l("figcaption", {
+				className: "mb-2 text-[13px] font-semibold text-text-primary",
+				children: t.title
+			}) : null, /* @__PURE__ */ l("ul", {
+				className: "space-y-1.5",
+				children: n.map((t, n) => /* @__PURE__ */ u("li", {
+					className: "text-[12px]",
+					children: [/* @__PURE__ */ u("div", {
+						className: "mb-0.5 flex justify-between gap-2 text-text-primary",
+						children: [/* @__PURE__ */ l("span", {
+							className: "min-w-0 truncate",
+							children: t.label
+						}), /* @__PURE__ */ l("span", {
+							className: "shrink-0 text-text-muted",
+							children: t.value
+						})]
+					}), /* @__PURE__ */ l("div", {
+						className: "h-2 overflow-hidden rounded-full bg-bg-sunken",
+						children: /* @__PURE__ */ l("div", {
+							className: "h-full rounded-full bg-action-primary-bg",
+							style: { width: `${e(t.value, r)}%` }
+						})
+					})]
+				}, n))
+			})]
+		});
+	}
+}), v = s({
+	name: "Callout",
+	description: "A short highlighted note: a one-line title and a sentence or two of body.",
+	props: r({
+		title: i(),
+		body: i().optional()
+	}),
+	component: ({ props: e }) => /* @__PURE__ */ u("div", {
+		className: "rounded-lg border border-border-default bg-bg-sunken px-3 py-2",
+		role: "note",
+		"data-testid": "assistant-openui-callout",
+		children: [/* @__PURE__ */ l("div", {
+			className: "text-[13px] font-semibold text-text-primary",
+			children: e.title
+		}), e.body ? /* @__PURE__ */ l("div", {
+			className: "mt-0.5 text-[13px] leading-relaxed text-text-muted",
+			children: e.body
+		}) : null]
+	})
+}), y = o({
+	components: [
+		s({
+			name: "Stack",
+			description: "The root: lays out up to 12 blocks (StatGrid, DataTable, BarChart, Callout) top to bottom.",
+			props: r({ children: t(a([
+				m.ref,
+				h.ref,
+				_.ref,
+				v.ref
+			])) }),
+			component: ({ props: e }) => /* @__PURE__ */ l(d, {
+				className: "my-2 flex flex-col gap-2",
+				testId: "assistant-openui-stack",
+				items: e.children,
+				limit: 12
+			})
+		}),
+		m,
+		p,
+		h,
+		_,
+		g,
+		v
+	],
+	root: "Stack"
+});
+//#endregion
+export { y as default };

package/dist/shared/assistant/openui/limits.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Size limits for generative-UI blocks (BOFF-9710). A reply is untrusted model
+ * output, so every collection the library draws is capped; kept apart from the
+ * library so they can be read without loading the OpenUI runtime.
+ */
+export declare const MAX_STATS = 8;
+export declare const MAX_TABLE_COLUMNS = 8;
+export declare const MAX_TABLE_ROWS = 50;
+export declare const MAX_BARS = 20;
+export declare const MAX_STACK_CHILDREN = 12;
+/** Bar length as a percentage of the largest value; zero, negative or non-finite draws no bar. */
+export declare function barWidthPercent(value: number, max: number): number;

package/dist/shared/assistant/openui/limits.js

@@ -0,0 +1,7 @@
+//#region src/shared/assistant/openui/limits.ts
+var e = 8, t = 8, n = 50, r = 20, i = 12;
+function a(e, t) {
+	return !Number.isFinite(e) || e <= 0 || !Number.isFinite(t) || t <= 0 ? 0 : Math.min(100, Math.round(e / t * 100));
+}
+//#endregion
+export { r as MAX_BARS, i as MAX_STACK_CHILDREN, e as MAX_STATS, t as MAX_TABLE_COLUMNS, n as MAX_TABLE_ROWS, a as barWidthPercent };

package/dist/shared/assistant/openui/segments.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Splits an assistant reply into markdown and generative-UI segments (BOFF-9710).
+ *
+ * The agent keeps writing ordinary markdown and puts a structured answer in a
+ * fenced block whose info string is `openui`:
+ *
+ *     Here is the breakdown.
+ *
+ *     ```openui
+ *     root = Stack([StatGrid([Stat("Open", "12")])])
+ *     ```
+ *
+ * Everything outside such a fence is returned untouched, so a reply with no
+ * block is a single markdown segment and renders exactly as it did before.
+ *
+ * Only a fence that STARTS a line counts. A block quoted inside another code
+ * fence (a reply explaining the syntax) is therefore left as text.
+ */
+export type OpenUiSegment = {
+    readonly kind: 'markdown';
+    readonly text: string;
+}
+/**
+ * `complete` is false when the closing fence has not arrived — a turn still
+ * streaming, or a model that stopped mid-block. The caller decides whether to
+ * show a placeholder or the raw source.
+ */
+ | {
+    readonly kind: 'openui';
+    readonly source: string;
+    readonly complete: boolean;
+};
+/** Cheap pre-check so the common, no-block reply skips line splitting. */
+export declare function hasOpenUiBlock(content: string): boolean;
+export declare function splitOpenUiSegments(content: string): OpenUiSegment[];
+/**
+ * The reply as text for anything that cannot draw UI — Copy, Listen, export. A
+ * block becomes `placeholder` (or nothing) rather than raw component syntax.
+ */
+export declare function stripOpenUiBlocks(content: string, placeholder?: string): string;

package/dist/shared/assistant/openui/segments.js

@@ -0,0 +1,52 @@
+//#region src/shared/assistant/openui/segments.ts
+var e = /^[ \t]{0,3}```openui[ \t]*$/, t = /^[ \t]{0,3}(`{3,}|~{3,})/, n = /^[ \t]{0,3}(`{3,}|~{3,})[ \t]*$/;
+function r(e, t) {
+	let r = n.exec(e)?.[1];
+	return r !== void 0 && r[0] === t[0] && r.length >= t.length;
+}
+function i(e) {
+	return e.includes("```openui");
+}
+function a(n) {
+	if (!i(n)) return n ? [{
+		kind: "markdown",
+		text: n
+	}] : [];
+	let a = [], o = [], s = [], c = null, l = "", u = () => {
+		let e = o.join("\n");
+		o.length = 0, e.trim() && a.push({
+			kind: "markdown",
+			text: e
+		});
+	};
+	for (let i of n.split("\n")) {
+		if (c === "openui") {
+			r(i, "```") ? (a.push({
+				kind: "openui",
+				source: s.join("\n"),
+				complete: !0
+			}), s.length = 0, c = null) : s.push(i);
+			continue;
+		}
+		if (c === "other") {
+			o.push(i), r(i, l) && (c = null);
+			continue;
+		}
+		if (e.test(i)) {
+			u(), c = "openui";
+			continue;
+		}
+		let n = t.exec(i)?.[1];
+		n !== void 0 && (c = "other", l = n), o.push(i);
+	}
+	return c === "openui" ? a.push({
+		kind: "openui",
+		source: s.join("\n"),
+		complete: !1
+	}) : u(), a;
+}
+function o(e, t = "") {
+	return i(e) ? a(e).map((e) => e.kind === "markdown" ? e.text : t).filter((e) => e !== "").join("\n\n") : e;
+}
+//#endregion
+export { i as hasOpenUiBlock, a as splitOpenUiSegments, o as stripOpenUiBlocks };