@krizaka/ui 3.21.0 → 3.23.0

package/dist/genui.js

@@ -0,0 +1,533 @@
+"use client";
+import {
+  CardBody,
+  CardRoot,
+  CardTitle,
+  Skeleton
+} from "./chunk-MQPC3P4T.js";
+import {
+  DataTable
+} from "./chunk-F7FVPPBB.js";
+import "./chunk-7Z4KHPFC.js";
+import "./chunk-JXLDUDTD.js";
+import "./chunk-DZU6RMYD.js";
+import "./chunk-KVDB4GXV.js";
+import "./chunk-CEJDH6SA.js";
+import "./chunk-7UCPGXKN.js";
+import "./chunk-D3T54RSL.js";
+import "./chunk-J3NC6ER4.js";
+import {
+  cn
+} from "./chunk-NSLXEDIS.js";
+import "./chunk-REPTKUJ6.js";
+import "./chunk-ZIXB33X7.js";
+import "./chunk-FZBWEDQI.js";
+import "./chunk-CPA5CF35.js";
+
+// src/genui/catalog.tsx
+import { formatCompact, formatMoney, formatNumber, formatPercent } from "@krizaka/intl";
+
+// src/alert/alert.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var alertVariants = tv({
+  slots: {
+    root: "relative flex w-full items-start gap-3 rounded-xl border p-4 text-sm text-fg",
+    icon: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+    content: "flex min-w-0 flex-1 flex-col gap-1",
+    title: "font-semibold text-fg",
+    description: "text-fg-secondary",
+    action: "flex shrink-0 items-center gap-2 self-center"
+  },
+  variants: {
+    tone: {
+      info: { root: "border-info/40 bg-info/10", icon: "text-info" },
+      success: { root: "border-success/40 bg-success/10", icon: "text-success" },
+      warning: { root: "border-warning/50 bg-warning/10", icon: "text-warning" },
+      danger: { root: "border-danger/50 bg-danger/10", icon: "text-danger" }
+    }
+  },
+  defaultVariants: { tone: "info" }
+});
+function Alert({ tone = "info", icon, title, action, className, children, ...props }) {
+  const s = alertVariants({ tone });
+  return /* @__PURE__ */ jsxs("div", { role: tone === "danger" || tone === "warning" ? "alert" : "status", "data-tone": tone, className: s.root({ className }), ...props, children: [
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.icon(), children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: s.content(), children: [
+      title && /* @__PURE__ */ jsx("p", { className: s.title(), children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: s.description(), children })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: s.action(), children: action })
+  ] });
+}
+
+// src/genui/spec.ts
+var GENUI_VERSION = "v0.9";
+var GENUI_CATALOG_ID = "krizaka:genui/v1";
+var GENUI_LIMITS = {
+  /** Components per surface. */
+  components: 300,
+  /** Nesting depth from the root. */
+  depth: 12,
+  /** Characters in one string. */
+  string: 4e3,
+  /** Items in one array of the data model. */
+  array: 1e3,
+  /** Nesting depth of a data model value. */
+  dataDepth: 12,
+  /** Values (objects, arrays, scalars) in one data model update. */
+  dataNodes: 5e4,
+  /** Segments of a data path. */
+  pathSegments: 16
+};
+var ID = /^[A-Za-z0-9_-]{1,64}$/;
+var MESSAGE_KEYS = ["createSurface", "updateComponents", "updateDataModel", "deleteSurface"];
+var FORBIDDEN_SEGMENTS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
+var fail = (error) => ({ ok: false, error });
+function isPlainObject(value) {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function onlyKeys(value, allowed, where) {
+  for (const key of Object.keys(value)) if (!allowed.includes(key)) return `${where}: unknown key "${key}"`;
+  return null;
+}
+function checkId(value, where) {
+  return typeof value === "string" && ID.test(value) ? null : `${where}: an id is 1-64 characters of [A-Za-z0-9_-]`;
+}
+function parsePath(path) {
+  if (typeof path !== "string" || path !== "/" && !path.startsWith("/") || path.length > 512) return fail("a path is a JSON pointer: /a/b");
+  if (path === "/") return { ok: true, value: [] };
+  const segments = path.slice(1).split("/").map((s) => s.replace(/~1/g, "/").replace(/~0/g, "~"));
+  if (segments.length > GENUI_LIMITS.pathSegments) return fail(`a path has at most ${GENUI_LIMITS.pathSegments} segments`);
+  for (const s of segments) {
+    if (s === "" || FORBIDDEN_SEGMENTS.has(s)) return fail(`a path may not hold the segment "${s}"`);
+  }
+  return { ok: true, value: segments };
+}
+function isBinding(value) {
+  return isPlainObject(value) && Object.keys(value).length === 1 && typeof value.path === "string";
+}
+function sanitizeData(value) {
+  let nodes = 0;
+  const walk = (v, depth) => {
+    if (++nodes > GENUI_LIMITS.dataNodes) return fail(`the data holds more than ${GENUI_LIMITS.dataNodes} values`);
+    if (depth > GENUI_LIMITS.dataDepth) return fail(`the data nests deeper than ${GENUI_LIMITS.dataDepth}`);
+    if (v === null || typeof v === "boolean") return { ok: true, value: v };
+    if (typeof v === "number") return Number.isFinite(v) ? { ok: true, value: v } : fail("a number must be finite");
+    if (typeof v === "string") return v.length <= GENUI_LIMITS.string ? { ok: true, value: v } : fail(`a string has at most ${GENUI_LIMITS.string} characters`);
+    if (Array.isArray(v)) {
+      if (v.length > GENUI_LIMITS.array) return fail(`an array has at most ${GENUI_LIMITS.array} items`);
+      const out = [];
+      for (const item of v) {
+        const r = walk(item, depth + 1);
+        if (!r.ok) return r;
+        out.push(r.value);
+      }
+      return { ok: true, value: out };
+    }
+    if (isPlainObject(v)) {
+      const out = /* @__PURE__ */ Object.create(null);
+      for (const [key, item] of Object.entries(v)) {
+        if (FORBIDDEN_SEGMENTS.has(key)) return fail(`a key may not be "${key}"`);
+        const r = walk(item, depth + 1);
+        if (!r.ok) return r;
+        out[key] = r.value;
+      }
+      return { ok: true, value: out };
+    }
+    return fail("the data is plain JSON only");
+  };
+  return walk(value, 0);
+}
+function validateMessage(input, catalog) {
+  if (!isPlainObject(input)) return fail("a message is a JSON object");
+  if (input.version !== GENUI_VERSION) return fail(`version must be "${GENUI_VERSION}"`);
+  const present = MESSAGE_KEYS.filter((k) => k in input);
+  if (present.length !== 1) return fail("a message holds exactly one of createSurface, updateComponents, updateDataModel, deleteSurface");
+  const kind = present[0];
+  const extra = onlyKeys(input, ["version", kind], "message");
+  if (extra) return fail(extra);
+  const body = input[kind];
+  if (!isPlainObject(body)) return fail(`${kind} is an object`);
+  const surface = checkId(body.surfaceId, `${kind}.surfaceId`);
+  if (surface) return fail(surface);
+  switch (kind) {
+    case "createSurface": {
+      const keys = onlyKeys(body, ["surfaceId", "catalogId", "theme", "sendDataModel"], kind);
+      if (keys) return fail(keys);
+      if (body.catalogId !== GENUI_CATALOG_ID) return fail(`catalogId must be "${GENUI_CATALOG_ID}"`);
+      return { ok: true, value: { version: GENUI_VERSION, createSurface: { surfaceId: body.surfaceId, catalogId: GENUI_CATALOG_ID } } };
+    }
+    case "updateComponents": {
+      const keys = onlyKeys(body, ["surfaceId", "components"], kind);
+      if (keys) return fail(keys);
+      if (!Array.isArray(body.components) || body.components.length > GENUI_LIMITS.components) {
+        return fail(`components is an array of at most ${GENUI_LIMITS.components}`);
+      }
+      const components = [];
+      for (const raw of body.components) {
+        if (!isPlainObject(raw)) return fail("a component is an object");
+        const id = checkId(raw.id, "component.id");
+        if (id) return fail(id);
+        if (typeof raw.component !== "string" || !Object.hasOwn(catalog, raw.component)) {
+          return fail(`component "${String(raw.id)}": "${String(raw.component)}" is not in the catalog`);
+        }
+        const clean = sanitizeData(raw);
+        if (!clean.ok) return fail(`component "${raw.id}": ${clean.error}`);
+        const component = { ...clean.value };
+        const problem = catalog[raw.component].check(component);
+        if (problem) return fail(`component "${raw.id}" (${raw.component}): ${problem}`);
+        components.push(component);
+      }
+      return { ok: true, value: { version: GENUI_VERSION, updateComponents: { surfaceId: body.surfaceId, components } } };
+    }
+    case "updateDataModel": {
+      const keys = onlyKeys(body, ["surfaceId", "path", "value"], kind);
+      if (keys) return fail(keys);
+      const path = body.path === void 0 ? "/" : body.path;
+      const parsed = parsePath(path);
+      if (!parsed.ok) return parsed;
+      if (!("value" in body)) return { ok: true, value: { version: GENUI_VERSION, updateDataModel: { surfaceId: body.surfaceId, path } } };
+      const clean = sanitizeData(body.value);
+      if (!clean.ok) return clean;
+      return { ok: true, value: { version: GENUI_VERSION, updateDataModel: { surfaceId: body.surfaceId, path, value: clean.value } } };
+    }
+    default: {
+      const keys = onlyKeys(body, ["surfaceId"], kind);
+      if (keys) return fail(keys);
+      return { ok: true, value: { version: GENUI_VERSION, deleteSurface: { surfaceId: body.surfaceId } } };
+    }
+  }
+}
+function allowKeys(component, keys) {
+  return onlyKeys(component, ["id", "component", ...keys], "properties");
+}
+function checkText(value, name, required) {
+  if (value === void 0) return required ? `${name} is required` : null;
+  if (isBinding(value)) return parsePath(value.path).ok ? null : `${name}: a bad path`;
+  return typeof value === "string" ? null : `${name} is a string`;
+}
+function checkEnum(value, name, allowed, required = false) {
+  if (value === void 0) return required ? `${name} is required` : null;
+  return typeof value === "string" && allowed.includes(value) ? null : `${name} is one of ${allowed.join(", ")}`;
+}
+function checkChildren(value, name = "children") {
+  if (!Array.isArray(value) || value.length > GENUI_LIMITS.components) return `${name} is an array of component ids`;
+  for (const id of value) if (checkId(id, name)) return `${name} holds ids only`;
+  return null;
+}
+function checkBinding(value, name) {
+  if (!isBinding(value)) return `${name} is a binding { "path": "/\u2026" }`;
+  return parsePath(value.path).ok ? null : `${name}: a bad path`;
+}
+function checkNumber(value, name, required) {
+  if (value === void 0) return required ? `${name} is required` : null;
+  if (isBinding(value)) return parsePath(value.path).ok ? null : `${name}: a bad path`;
+  return typeof value === "number" && Number.isFinite(value) ? null : `${name} is a number`;
+}
+var GENUI_FORMATS = ["number", "integer", "compact", "percent", "money"];
+function checkCurrency(value, required) {
+  if (value === void 0) return required ? "currency is required with the money format" : null;
+  return typeof value === "string" && /^[A-Z]{3}$/.test(value) ? null : "currency is a three-letter code (CAD)";
+}
+
+// src/genui/catalog.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var first = (...problems) => problems.find((p) => p !== null) ?? null;
+function asText(value) {
+  if (typeof value === "string") return value.slice(0, GENUI_LIMITS.string);
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return "";
+}
+function formatGenUiValue(value, format, locale, currency) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return asText(value);
+  switch (format) {
+    case "integer":
+      return formatNumber(Math.round(value), { locale, maximumFractionDigits: 0 });
+    case "compact":
+      return formatCompact(value, { locale });
+    case "percent":
+      return formatPercent(value, { locale, maximumFractionDigits: 1 });
+    case "money":
+      return currency ? formatMoney(Math.round(value), { currency, locale }) : formatNumber(value, { locale });
+    default:
+      return formatNumber(value, { locale, maximumFractionDigits: 2 });
+  }
+}
+var TONES = ["info", "success", "warning", "danger"];
+var VARIANTS = ["body", "heading", "caption"];
+var column = {
+  check: (c) => first(allowKeys(c, ["children"]), checkChildren(c.children)),
+  render: (c, ctx) => /* @__PURE__ */ jsx2("div", { className: "flex min-w-0 flex-col gap-4", children: ctx.children(c.children) })
+};
+var row = {
+  check: (c) => first(allowKeys(c, ["children"]), checkChildren(c.children)),
+  render: (c, ctx) => /* @__PURE__ */ jsx2("div", { className: "grid min-w-0 gap-4 [grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))]", children: ctx.children(c.children) })
+};
+var text = {
+  check: (c) => first(allowKeys(c, ["text", "variant"]), checkText(c.text, "text", true), checkEnum(c.variant, "variant", VARIANTS)),
+  render: (c, ctx) => {
+    const value = asText(ctx.resolve(c.text));
+    if (c.variant === "heading") return /* @__PURE__ */ jsx2("h3", { className: "text-base font-semibold text-fg", children: value });
+    if (c.variant === "caption") return /* @__PURE__ */ jsx2("p", { className: "text-xs text-fg-muted", children: value });
+    return /* @__PURE__ */ jsx2("p", { className: "text-sm text-fg", children: value });
+  }
+};
+var card = {
+  check: (c) => first(allowKeys(c, ["title", "child"]), checkText(c.title, "title", false), c.child === void 0 ? null : checkId(c.child, "child")),
+  render: (c, ctx) => /* @__PURE__ */ jsx2(CardRoot, { children: /* @__PURE__ */ jsxs2(CardBody, { children: [
+    c.title !== void 0 && /* @__PURE__ */ jsx2(CardTitle, { children: asText(ctx.resolve(c.title)) }),
+    c.child !== void 0 && /* @__PURE__ */ jsx2("div", { className: "mt-3", children: ctx.child(c.child) })
+  ] }) })
+};
+var callout = {
+  check: (c) => first(allowKeys(c, ["tone", "title", "text"]), checkEnum(c.tone, "tone", TONES), checkText(c.title, "title", false), checkText(c.text, "text", false)),
+  render: (c, ctx) => /* @__PURE__ */ jsx2(Alert, { tone: c.tone ?? "info", title: c.title === void 0 ? void 0 : asText(ctx.resolve(c.title)), children: c.text === void 0 ? void 0 : asText(ctx.resolve(c.text)) })
+};
+function checkColumns(value) {
+  if (!Array.isArray(value) || value.length === 0 || value.length > 12) return "columns is an array of 1 to 12";
+  for (const raw of value) {
+    if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return "a column is an object";
+    const col = raw;
+    const keys = Object.keys(col).find((k) => !["key", "label", "format", "currency"].includes(k));
+    if (keys) return `a column has no key "${keys}"`;
+    if (typeof col.key !== "string" || !/^[A-Za-z0-9_]{1,64}$/.test(col.key)) return "a column key is 1-64 characters of [A-Za-z0-9_]";
+    if (typeof col.label !== "string" || col.label.length > 120) return "a column label is a string";
+    const problem = first(checkEnum(col.format, "format", GENUI_FORMATS), checkCurrency(col.currency, col.format === "money"));
+    if (problem) return problem;
+  }
+  return null;
+}
+function TableView({ c, ctx }) {
+  const columns = c.columns;
+  const raw = ctx.resolve(c.rows);
+  const rows = Array.isArray(raw) ? raw.slice(0, GENUI_LIMITS.array).flatMap((r, i) => r !== null && typeof r === "object" && !Array.isArray(r) ? [{ ...r, __genuiRow: String(i) }] : []) : [];
+  const cols = columns.map((col) => ({
+    id: col.key,
+    header: col.label,
+    sortable: true,
+    type: col.format ? "number" : "text",
+    value: (r) => {
+      const v = r[col.key];
+      return typeof v === "number" || typeof v === "string" ? v : null;
+    },
+    cell: (r) => formatGenUiValue(r[col.key], col.format, ctx.locale, col.currency)
+  }));
+  if (rows.length === 0) return /* @__PURE__ */ jsx2("p", { className: "text-sm text-fg-muted", children: ctx.labels.noData });
+  return /* @__PURE__ */ jsx2(DataTable, { rows, columns: cols, getRowId: (r) => r.__genuiRow, caption: c.caption === void 0 ? ctx.labels.surface : asText(ctx.resolve(c.caption)), showCaption: c.caption !== void 0 });
+}
+var table = {
+  check: (c) => first(allowKeys(c, ["caption", "columns", "rows"]), checkText(c.caption, "caption", false), checkColumns(c.columns), checkBinding(c.rows, "rows")),
+  render: (c, ctx) => /* @__PURE__ */ jsx2(TableView, { c, ctx })
+};
+var baseGenUiCatalog = { Column: column, Row: row, Text: text, Card: card, Callout: callout, Table: table };
+
+// src/genui/store.ts
+var emptyGenUiState = { surfaces: /* @__PURE__ */ new Map(), order: [], errors: [] };
+var withError = (state, error) => ({ ...state, errors: [...state.errors, error] });
+function setAt(root, segments, value, remove) {
+  if (segments.length === 0) return remove ? /* @__PURE__ */ Object.create(null) : value;
+  const [head, ...rest] = segments;
+  if (Array.isArray(root)) {
+    const index = Number(head);
+    if (!Number.isInteger(index) || index < 0 || index > root.length || index >= GENUI_LIMITS.array) return root;
+    const copy = [...root];
+    if (remove && rest.length === 0) copy.splice(index, 1);
+    else copy[index] = setAt(root[index], rest, value, remove);
+    return copy;
+  }
+  const base = Object.assign(/* @__PURE__ */ Object.create(null), root !== null && typeof root === "object" ? root : {});
+  if (remove && rest.length === 0) delete base[head];
+  else base[head] = setAt(base[head], rest, value, remove);
+  return base;
+}
+function readPath(data, path) {
+  const parsed = parsePath(path);
+  if (!parsed.ok) return void 0;
+  let cursor = data;
+  for (const segment of parsed.value) {
+    if (cursor === null || typeof cursor !== "object") return void 0;
+    if (!Object.hasOwn(cursor, segment)) return void 0;
+    cursor = cursor[segment];
+  }
+  return cursor;
+}
+function applyMessage(state, message) {
+  if ("createSurface" in message) {
+    const { surfaceId: surfaceId2 } = message.createSurface;
+    if (state.surfaces.has(surfaceId2)) return withError(state, `surface "${surfaceId2}" already exists`);
+    const surfaces2 = new Map(state.surfaces);
+    surfaces2.set(surfaceId2, { id: surfaceId2, components: /* @__PURE__ */ new Map(), data: /* @__PURE__ */ Object.create(null) });
+    return { ...state, surfaces: surfaces2, order: [...state.order, surfaceId2] };
+  }
+  if ("deleteSurface" in message) {
+    const surfaces2 = new Map(state.surfaces);
+    surfaces2.delete(message.deleteSurface.surfaceId);
+    return { ...state, surfaces: surfaces2, order: state.order.filter((id) => id !== message.deleteSurface.surfaceId) };
+  }
+  const surfaceId = "updateComponents" in message ? message.updateComponents.surfaceId : message.updateDataModel.surfaceId;
+  const surface = state.surfaces.get(surfaceId);
+  if (!surface) return withError(state, `surface "${surfaceId}" was not created`);
+  const surfaces = new Map(state.surfaces);
+  if ("updateComponents" in message) {
+    const components = new Map(surface.components);
+    for (const component of message.updateComponents.components) components.set(component.id, component);
+    if (components.size > GENUI_LIMITS.components) return withError(state, `surface "${surfaceId}" holds more than ${GENUI_LIMITS.components} components`);
+    surfaces.set(surfaceId, { ...surface, components });
+  } else {
+    const { path, value } = message.updateDataModel;
+    const parsed = parsePath(path);
+    if (!parsed.ok) return withError(state, parsed.error);
+    surfaces.set(surfaceId, { ...surface, data: setAt(surface.data, parsed.value, value, !("value" in message.updateDataModel)) });
+  }
+  return { ...state, surfaces };
+}
+function leadingObject(text2) {
+  if (!text2.startsWith("{")) return null;
+  let depth = 0;
+  let inString = false;
+  for (let i = 0; i < text2.length; i++) {
+    const c = text2[i];
+    if (inString) {
+      if (c === "\\") i++;
+      else if (c === '"') inString = false;
+      continue;
+    }
+    if (c === '"') inString = true;
+    else if (c === "{" || c === "[") depth++;
+    else if (c === "}" || c === "]") {
+      depth--;
+      if (depth === 0) return /^[\s}\]]*$/.test(text2.slice(i + 1)) ? text2.slice(0, i + 1) : null;
+    }
+  }
+  return null;
+}
+function applyLine(state, line, catalog) {
+  const text2 = line.trim();
+  if (!text2) return state;
+  let json;
+  try {
+    json = JSON.parse(text2);
+  } catch {
+    const head = leadingObject(text2);
+    if (head === null) return withError(state, "a line is not JSON");
+    try {
+      json = JSON.parse(head);
+    } catch {
+      return withError(state, "a line is not JSON");
+    }
+  }
+  const result = validateMessage(json, catalog);
+  return result.ok ? applyMessage(state, result.value) : withError(state, result.error);
+}
+var FENCE = /```a2ui[^\n]*\n/;
+function extractGenUi(text2) {
+  const open = FENCE.exec(text2);
+  if (!open) return { lines: [], closed: false, prose: text2, found: false };
+  const start = open.index + open[0].length;
+  const end = text2.indexOf("\n```", start - 1);
+  const closed = end >= 0;
+  const body = closed ? text2.slice(start, end) : text2.slice(start);
+  const parts = body.split("\n");
+  const lines = closed ? parts : parts.slice(0, -1);
+  const after = closed ? text2.slice(end + 4).replace(/^[^\n]*\n?/, "") : "";
+  const prose = [text2.slice(0, open.index).trim(), after.trim()].filter(Boolean).join("\n\n");
+  return { lines: lines.filter((l) => l.trim()), closed, prose, found: true };
+}
+function readStream(text2, catalog) {
+  const { lines, prose, found } = extractGenUi(text2);
+  const state = lines.reduce((s, line) => applyLine(s, line, catalog), emptyGenUiState);
+  return { ...state, prose, found };
+}
+
+// src/genui/surface.tsx
+import * as React from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var genUiLabels = { loading: "Building the view\u2026", surface: "Generated view", noData: "No data" };
+function GenUiSurface({ surface, catalog, streaming = false, labels, locale = "en", onError, className }) {
+  const words = { ...genUiLabels, ...labels };
+  const problems = [];
+  const seen = /* @__PURE__ */ new Set();
+  const draw = (id, depth) => {
+    if (typeof id !== "string") return null;
+    if (depth > GENUI_LIMITS.depth) {
+      problems.push(`"${id}" is deeper than ${GENUI_LIMITS.depth}`);
+      return null;
+    }
+    if (seen.has(id)) {
+      problems.push(`"${id}" is drawn twice (a cycle or two parents)`);
+      return null;
+    }
+    const component = surface.components.get(id);
+    if (!component) {
+      if (!streaming) problems.push(`"${id}" never arrived`);
+      return streaming ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-full rounded-lg" }, id) : null;
+    }
+    const entry = Object.hasOwn(catalog, component.component) ? catalog[component.component] : void 0;
+    if (!entry) return null;
+    seen.add(id);
+    const context = {
+      child: (c) => draw(c, depth + 1),
+      children: (ids) => Array.isArray(ids) ? ids.map((c) => /* @__PURE__ */ jsx3(React.Fragment, { children: draw(c, depth + 1) }, String(c))) : [],
+      resolve: (value) => isBinding(value) ? readPath(surface.data, value.path) : value,
+      labels: words,
+      locale
+    };
+    return /* @__PURE__ */ jsx3(React.Fragment, { children: entry.render(component, context) }, id);
+  };
+  const root = draw("root", 0);
+  React.useEffect(() => {
+    if (onError) for (const problem of problems) onError(problem);
+  }, [surface, streaming]);
+  return /* @__PURE__ */ jsx3("section", { "aria-label": words.surface, "aria-busy": streaming || void 0, "data-genui-surface": surface.id, className: cn("flex flex-col gap-4", className), children: root ?? (streaming ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-24 w-full rounded-xl" }) : null) });
+}
+function GenUiStream({ text: text2, catalog, streaming, renderProse, fallback, onError, ...rest }) {
+  const state = React.useMemo(() => readStream(text2, catalog), [text2, catalog]);
+  const reported = React.useRef(0);
+  React.useEffect(() => {
+    if (!onError) return;
+    for (const error of state.errors.slice(reported.current)) onError(error);
+    reported.current = state.errors.length;
+  }, [state, onError]);
+  const prose = (value) => renderProse ? renderProse(value) : value.split(/\n{2,}/).map((p, i) => /* @__PURE__ */ jsx3("p", { children: p }, i));
+  const surfaces = state.order.map((id) => state.surfaces.get(id)).filter((s) => !!s && s.components.has("root"));
+  if (!state.found || !streaming && surfaces.length === 0) return /* @__PURE__ */ jsx3(Fragment2, { children: fallback ? fallback(text2) : prose(text2) });
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", "data-genui-stream": "", children: [
+    state.prose && prose(state.prose),
+    surfaces.map((surface) => /* @__PURE__ */ jsx3(GenUiSurface, { surface, catalog, streaming, onError, ...rest }, surface.id)),
+    streaming && surfaces.length === 0 && /* @__PURE__ */ jsx3(Skeleton, { className: "h-24 w-full rounded-xl" })
+  ] });
+}
+export {
+  GENUI_CATALOG_ID,
+  GENUI_FORMATS,
+  GENUI_LIMITS,
+  GENUI_VERSION,
+  GenUiStream,
+  GenUiSurface,
+  allowKeys,
+  applyLine,
+  applyMessage,
+  baseGenUiCatalog,
+  checkBinding,
+  checkChildren,
+  checkCurrency,
+  checkEnum,
+  checkId,
+  checkNumber,
+  checkText,
+  emptyGenUiState,
+  extractGenUi,
+  formatGenUiValue,
+  genUiLabels,
+  isBinding,
+  leadingObject,
+  parsePath,
+  readPath,
+  readStream,
+  sanitizeData,
+  validateMessage
+};
+//# sourceMappingURL=genui.js.map