@cueplusplus/ui 0.13.0

package/dist/elements/file-tree.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { take } from "./range.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, FileIcon, FolderIcon } from "lucide-react";
+//#region src/elements/file-tree.tsx
+/**
+* Everything a run touched, as a tree, with the churn spelled out per file.
+*
+* @example
+* import { FileTree } from "@cueplusplus/ui/elements";
+*
+* <FileTree
+*   nodes={nodes}
+*   visibleCount={nodes.length}
+*   totalAdditions={78}
+*   totalDeletions={9}
+* />
+*/
+function FileTree({ nodes, visibleCount, totalAdditions, totalDeletions, className, ...props }) {
+	const files = nodes.filter((node) => node.kind === "file").length;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-tree",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 rounded-(--radius-overlay) p-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between px-1",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-(length:--cue-text-body) font-medium",
+				children: [files, " files changed"]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn(mono, "tabular-nums"),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-ok",
+						children: ["+", totalAdditions]
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-danger",
+						children: ["−", totalDeletions]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: take(nodes, visibleCount).map((node) => /* @__PURE__ */ jsx("div", {
+				className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2 rounded-(--radius-surface) px-1 py-1 text-(length:--cue-text-body) transition-colors duration-300",
+				style: { paddingInlineStart: `${.25 + node.depth * .85}rem` },
+				children: node.kind === "folder" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-fg-subtle size-3 shrink-0" }),
+					/* @__PURE__ */ jsx(FolderIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted min-w-0 flex-1 truncate",
+						children: node.name
+					})
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(FileIcon, { className: "text-fg-subtle ms-3 size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-fg-muted min-w-0 flex-1 truncate",
+						children: node.name
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: cn(mono, "shrink-0 tabular-nums"),
+						children: [
+							node.additions ? /* @__PURE__ */ jsxs("span", {
+								className: "text-ok",
+								children: ["+", node.additions]
+							}) : null,
+							" ",
+							node.deletions ? /* @__PURE__ */ jsxs("span", {
+								className: "text-danger",
+								children: ["−", node.deletions]
+							}) : null
+						]
+					})
+				] })
+			}, node.path))
+		})]
+	});
+}
+//#endregion
+export { FileTree };

package/dist/elements/flow-graph.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps } from "react";
+//#region src/elements/flow-graph.d.ts
+/** Where one node of the graph got to: `done`, `active`, or still `pending`. */
+type FlowNodeState = "done" | "active" | "pending";
+/** One box of the graph: what it is, where it sits on the grid, and how it is going. */
+interface FlowNode {
+  /**
+   * Stable identity for the row key, and how edges name their endpoints. FlowGraph
+   * exposes no callbacks, so nothing else reports it.
+   */
+  id: string;
+  /** Text inside the node, rendered in mono and not wrapped. */
+  label: string;
+  /** Zero-based column. Drives horizontal position and the edge curves. */
+  column: number;
+  /** Zero-based row. */
+  row: number;
+  /** Done is filled and dim, active is tinted, pending is a dashed outline. */
+  state: FlowNodeState;
+}
+/** One arrow of the graph, drawn from the centre of one node to the centre of another. */
+interface FlowEdge {
+  /** The `id` of the node the arrow leaves. */
+  from: string;
+  /** The `id` of the node it arrives at. A node may be the target of several. */
+  to: string;
+}
+/**
+ * Work as a graph rather than a list: branches that fan out and rejoin.
+ *
+ * @example
+ * import { FlowGraph } from "@cueplusplus/ui/elements";
+ *
+ * <FlowGraph nodes={nodes} edges={edges} visibleCount={nodes.length} />
+ */
+declare function FlowGraph({ nodes, edges, visibleCount, className, ...props }: Omit<ComponentProps<"div">, "children" | "nodes" | "edges" | "visibleCount"> & {
+  /** Every node with its grid position. Layout is explicit; the element runs no solver. */
+  nodes: readonly FlowNode[];
+  /** Connections by node id. An edge dims until both of its ends are visible. */
+  edges: readonly FlowEdge[];
+  /** How many nodes have been reached so far. */
+  visibleCount: number;
+}): import("react").JSX.Element;
+//#endregion
+export { FlowEdge, FlowGraph, FlowNode, FlowNodeState };

package/dist/elements/flow-graph.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mono, paper } from "./surfaces.js";
+import { take } from "./range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/flow-graph.tsx
+const COL_W = 96;
+const ROW_H = 58;
+const NODE_W = 78;
+const NODE_H = 30;
+/**
+* Work as a graph rather than a list: branches that fan out and rejoin.
+*
+* @example
+* import { FlowGraph } from "@cueplusplus/ui/elements";
+*
+* <FlowGraph nodes={nodes} edges={edges} visibleCount={nodes.length} />
+*/
+function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
+	const shown = take(nodes, visibleCount);
+	const shownIds = new Set(shown.map((node) => node.id));
+	const columns = Math.max(0, ...nodes.map((node) => node.column)) + 1;
+	const rows = Math.max(0, ...nodes.map((node) => node.row)) + 1;
+	const width = (columns - 1) * COL_W + NODE_W;
+	const height = (rows - 1) * ROW_H + NODE_H;
+	const center = (node) => ({
+		x: node.column * COL_W + NODE_W / 2,
+		y: node.row * ROW_H + NODE_H / 2
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "flow-graph",
+		className: cn(paper, "w-full max-w-md overflow-x-auto rounded-(--radius-overlay) p-4", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			style: {
+				width,
+				height,
+				minWidth: width
+			},
+			children: [/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				className: "absolute inset-0 overflow-visible",
+				width,
+				height,
+				children: edges.map((edge) => {
+					const from = nodes.find((node) => node.id === edge.from);
+					const to = nodes.find((node) => node.id === edge.to);
+					if (!from || !to) return null;
+					const live = shownIds.has(edge.from) && shownIds.has(edge.to);
+					const a = center(from);
+					const b = center(to);
+					const midX = (a.x + b.x) / 2;
+					return /* @__PURE__ */ jsx("path", {
+						d: `M ${a.x + NODE_W / 2} ${a.y} C ${midX} ${a.y}, ${midX} ${b.y}, ${b.x - NODE_W / 2} ${b.y}`,
+						fill: "none",
+						strokeWidth: "1.5",
+						className: cn("transition-opacity duration-500 motion-reduce:transition-none", "stroke-fg-subtle", live ? "opacity-100" : "opacity-30")
+					}, `${edge.from}-${edge.to}`);
+				})
+			}), shown.map((node) => /* @__PURE__ */ jsx("div", {
+				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both absolute flex items-center justify-center rounded-(--radius-surface) border text-center text-(length:--cue-text-ui) leading-tight duration-300", node.state === "done" && "border-border bg-surface-1 text-fg-muted", node.state === "active" && "text-fg border-stream/30 bg-stream/10", node.state === "pending" && "border-border text-fg-subtle border-dashed"),
+				style: {
+					left: node.column * COL_W,
+					top: node.row * ROW_H,
+					width: NODE_W,
+					height: NODE_H
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn(mono, "px-2"),
+					children: node.label
+				})
+			}, node.id))]
+		})
+	});
+}
+//#endregion
+export { FlowGraph };

package/dist/elements/generative/chart.js

@@ -0,0 +1,200 @@
+"use client";
+import { choice, flag, safeColor, seriesList, str, stringList } from "./spec.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/generative/chart.tsx
+/**
+* The one intrinsic that has to draw rather than lay out.
+*
+* `Chart` is where a spec-driven vocabulary stops being a wrapper around HTML.
+* Everything else in `intrinsics.tsx` is an element with attributes on it; this
+* one takes a list of numbers whose range nobody declared and has to produce
+* coordinates. That makes it the one file where a hostile spec can do something
+* other than look wrong — a `NaN` in a `points` attribute is an SVG that fails
+* to parse, and an unbounded value is a path that leaves the viewport and takes
+* the layout with it.
+*
+* So the geometry is fixed and the data is fitted into it. The viewBox never
+* changes, every coordinate is clamped to it, and a series whose numbers do not
+* produce a finite span is drawn flat rather than not at all. The chart is
+* `recharts`-free for the same reason the icons are `lucide`-free: this subpath
+* declares no optional peer, and a widget a model composed has to render in a
+* host that installed nothing.
+*
+* Colour is not decided here. Each series carries `data-aui-series="0…4"` and
+* the stylesheet answers it, which is upstream's own arrangement — five rungs,
+* cycled — so an island can restate five values instead of this file
+* restating a palette.
+*/
+/** The drawing area, in user units. Fixed: the frame scales, the numbers do not. */
+const W = 300;
+const H = 120;
+/** Room for a stroke's own width at the edges, so a peak is not clipped in half. */
+const PAD = 4;
+/** The gutter the y-axis labels sit in when `showAxis` is on. */
+const GUTTER = 26;
+/** How many colour rungs the stylesheet declares. The sixth series reuses the first. */
+const SERIES_RUNGS = 5;
+/** The four shapes a model may ask for. */
+const VARIANTS = [
+	"bar",
+	"line",
+	"sparkline",
+	"area"
+];
+/** A number, forced into the drawable range. jsdom and SVG both dislike `NaN`. */
+function fit(value, low, high) {
+	if (!Number.isFinite(value)) return low;
+	return Math.max(low, Math.min(high, value));
+}
+/** Two decimal places, without the trailing zeroes that triple a path's length. */
+function round(value) {
+	return Math.round(value * 100) / 100;
+}
+/**
+* The vertical extent to draw against.
+*
+* The floor is zero whenever the data is non-negative, which is what makes a
+* bar chart read as a bar chart rather than as a magnified slice of one. A
+* series that is all one value gets a span of 1 rather than 0, so it draws as a
+* flat line halfway up instead of dividing by zero.
+*/
+function extentOf(series, stacked) {
+	const values = [];
+	if (stacked) {
+		const depth = Math.max(0, ...series.map((one) => one.data.length));
+		for (let at = 0; at < depth; at += 1) {
+			let positive = 0;
+			let negative = 0;
+			for (const one of series) {
+				const value = one.data[at] ?? 0;
+				if (value >= 0) positive += value;
+				else negative += value;
+			}
+			values.push(positive, negative);
+		}
+	} else for (const one of series) values.push(...one.data);
+	if (values.length === 0) return {
+		low: 0,
+		high: 1
+	};
+	const max = Math.max(...values);
+	const min = Math.min(...values);
+	const low = min > 0 ? 0 : min;
+	const high = max < 0 ? 0 : max;
+	return high - low === 0 ? {
+		low,
+		high: low + 1
+	} : {
+		low,
+		high
+	};
+}
+function plotter(extent, left) {
+	const span = extent.high - extent.low;
+	return {
+		x: (at, count) => count <= 1 ? left + (W - left) / 2 : left + at * (W - left - PAD) / (count - 1),
+		y: (value) => fit(116 - (value - extent.low) / span * 112, PAD, 116)
+	};
+}
+/** `x,y` pairs for a polyline or polygon. */
+function points(data, plot) {
+	return data.map((value, at) => `${round(plot.x(at, data.length))},${round(plot.y(value))}`).join(" ");
+}
+/**
+* A chart, from whatever the model sent.
+*
+* The four variants share one pass over the data and differ only in what each
+* series draws: a polyline, a filled polygon under the same polyline, or one
+* rect per point. `sparkline` is `line` with the axis and legend suppressed
+* whatever the spec asked for — it is the variant that exists to sit inside a
+* sentence, and an axis in a sentence is not a sparkline.
+*/
+function GenerativeChart({ node }) {
+	const variant = choice(node, "variant", VARIANTS) ?? "line";
+	const series = seriesList(node).slice(0, 24);
+	const bare = variant === "sparkline";
+	const stacked = flag(node, "stacked") && (variant === "bar" || variant === "area");
+	const showAxis = !bare && flag(node, "showAxis");
+	const showLegend = !bare && flag(node, "showLegend");
+	const labels = stringList(node["labels"]);
+	const override = safeColor(node, "color");
+	const extent = extentOf(series, stacked);
+	const left = showAxis ? GUTTER : PAD;
+	const plot = plotter(extent, left);
+	const zero = plot.y(Math.max(extent.low, Math.min(0, extent.high)));
+	const floors = [];
+	if (stacked) {
+		const running = [];
+		for (const one of series) {
+			const floor = one.data.map((_, at) => running[at] ?? 0);
+			floors.push(floor);
+			one.data.forEach((value, at) => {
+				running[at] = (running[at] ?? 0) + value;
+			});
+		}
+	}
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-aui": "chart",
+		"data-aui-variant": variant,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-aui": "chart-frame",
+				children: /* @__PURE__ */ jsxs("svg", {
+					viewBox: `0 0 ${W} ${H}`,
+					preserveAspectRatio: "none",
+					role: "presentation",
+					children: [showAxis ? /* @__PURE__ */ jsx("g", {
+						"data-aui": "chart-ticks",
+						children: [
+							extent.high,
+							(extent.high + extent.low) / 2,
+							extent.low
+						].map((value, at) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("line", {
+							x1: left,
+							x2: 296,
+							y1: plot.y(value),
+							y2: plot.y(value)
+						}), /* @__PURE__ */ jsx("text", {
+							x: left - 4,
+							y: fit(plot.y(value) + 3, 8, 118),
+							textAnchor: "end",
+							children: round(value)
+						})] }, at))
+					}) : null, series.map((one, index) => /* @__PURE__ */ jsx("g", {
+						"data-aui": "chart-series",
+						"data-aui-series": String(index % SERIES_RUNGS),
+						style: override === void 0 ? void 0 : { ["--aui-series-color"]: override },
+						children: variant === "bar" ? one.data.map((value, at) => {
+							const width = Math.max(1, (W - left - PAD) / Math.max(one.data.length * 1.6, 1));
+							const base = stacked ? plot.y(floors[index]?.[at] ?? 0) : zero;
+							const top = stacked ? plot.y((floors[index]?.[at] ?? 0) + value) : plot.y(value);
+							return /* @__PURE__ */ jsx("rect", {
+								x: round(plot.x(at, one.data.length) - width / 2),
+								y: round(Math.min(base, top)),
+								width: round(width),
+								height: round(Math.max(1, Math.abs(base - top)))
+							}, at);
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [variant === "area" ? /* @__PURE__ */ jsx("polygon", { points: `${round(plot.x(0, one.data.length))},${round(zero)} ${points(stacked ? one.data.map((value, at) => (floors[index]?.[at] ?? 0) + value) : one.data, plot)} ${round(plot.x(one.data.length - 1, one.data.length))},${round(zero)}` }) : null, /* @__PURE__ */ jsx("polyline", { points: points(stacked ? one.data.map((value, at) => (floors[index]?.[at] ?? 0) + value) : one.data, plot) })] })
+					}, `${one.label}:${index}`))]
+				})
+			}),
+			labels.length > 0 && !bare ? /* @__PURE__ */ jsx("div", {
+				"data-aui": "chart-xlabels",
+				children: labels.map((label, at) => /* @__PURE__ */ jsx("span", { children: label }, `${label}:${at}`))
+			}) : null,
+			showLegend ? /* @__PURE__ */ jsx("figcaption", {
+				"data-aui": "chart-legend",
+				children: series.map((one, index) => /* @__PURE__ */ jsxs("span", {
+					"data-aui": "chart-legend-item",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-aui": "chart-legend-swatch",
+						"data-aui-series": String(index % SERIES_RUNGS)
+					}), one.label === "" ? str(node, "label") : one.label]
+				}, `${one.label}:${index}`))
+			}) : null
+		]
+	});
+}
+//#endregion
+export { GenerativeChart };

package/dist/elements/generative/faults.js

@@ -0,0 +1,111 @@
+"use client";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/generative/faults.tsx
+/**
+* What the renderer draws when it will not guess.
+*
+* Two shapes, and the difference between them is how much of the message
+* survived. A **fallback** is one node the renderer could not draw — an unknown
+* `$type`, a child that is not a node, a subtree past the depth cap — and it is
+* drawn *in place*, so the nodes around it still render and the person still
+* gets their answer with one hole in it. An **error state** is the whole spec
+* failing at the root, where there is nothing to draw around.
+*
+* Neither is a thrown exception, and that is the whole design. A model composes
+* this tree; a model is wrong sometimes; and a console that unmounts a
+* conversation because a widget named a component that does not exist has
+* turned a cosmetic problem into a lost session. The cost of never throwing is
+* that a caller who wants to know has to be told another way, which is what
+* `onFault` is for.
+*/
+/** What a reader is told, per kind of refusal. */
+const HEADLINE = {
+	"unknown-type": "Unsupported component",
+	"not-a-node": "Malformed content",
+	"missing-prop": "Incomplete component",
+	"too-deep": "Nested too deeply"
+};
+/**
+* The in-place notice for one node.
+*
+* Deliberately legible rather than discreet. The temptation with a fallback is
+* to render nothing and keep the composition looking intact, and it is the
+* wrong instinct twice over: a missing card is indistinguishable from a model
+* that chose not to send one, so nobody ever reports it; and the person best
+* placed to notice that this console is a version behind the model driving it
+* is the person looking at the screen.
+*
+* `role="note"` rather than `alert`: several of these can appear in one
+* message, and a screen reader announcing each interruption in the middle of a
+* response is worse than the hole it is describing. The error state below is
+* the one that interrupts.
+*/
+function GenerativeFallback({ fault }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-aui": "fallback",
+		"data-aui-fault": fault.kind,
+		role: "note",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-aui": "fallback-headline",
+			children: HEADLINE[fault.kind]
+		}), /* @__PURE__ */ jsx("span", {
+			"data-aui": "fallback-detail",
+			children: fault.message
+		})]
+	});
+}
+/**
+* The root-level error state: what a spec that is not a spec looks like.
+*
+* The contract this exists for is "not a blank". A renderer handed a string, an
+* array, `null`, or an object with no `$type` has nothing to walk, and the
+* natural implementation returns `null` — which draws an empty box where a
+* response should be, tells nobody anything, and looks exactly like a message
+* that is still streaming. So the empty case is a *rendered* case, with words
+* in it.
+*
+* `role="alert"` here and nowhere else: this one is the whole answer failing.
+*/
+function GenerativeError({ detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-aui": "error",
+		role: "alert",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-aui": "error-headline",
+			children: "This response could not be displayed"
+		}), /* @__PURE__ */ jsx("span", {
+			"data-aui": "error-detail",
+			children: detail
+		})]
+	});
+}
+/**
+* An error boundary around the walk, because every reader has a limit.
+*
+* The readers in `spec.ts` cover the shapes this renderer knows to expect, and
+* an error boundary covers the ones it does not. Three things can still throw
+* inside a node that read cleanly: a caller's own `renderMarkdown`, which is
+* arbitrary code this module invokes with a model's string; a getter on a spec
+* that arrived as a live object rather than parsed JSON; and any future
+* intrinsic whose author was less careful than this file's. Without a boundary
+* each of those unmounts the nearest ancestor that has one — in a chat console,
+* usually the transcript.
+*
+* A class component, which is the only way React exposes this. It is also why
+* the walk happens *inside* the boundary rather than in `GenerativeUI`'s own
+* render: a throw during the parent's render is a throw the child's boundary
+* never sees.
+*/
+var GenerativeBoundary = class extends React.Component {
+	state = { thrown: null };
+	static getDerivedStateFromError(error) {
+		return { thrown: error instanceof Error ? error.message : String(error) };
+	}
+	render() {
+		if (this.state.thrown === null) return this.props.children;
+		return /* @__PURE__ */ jsx(GenerativeError, { detail: `The renderer stopped: ${this.state.thrown}.` });
+	}
+};
+//#endregion
+export { GenerativeBoundary, GenerativeError, GenerativeFallback };

package/dist/elements/generative/icons.d.ts

@@ -0,0 +1,41 @@
+import "react";
+//#region src/elements/generative/icons.d.ts
+/**
+ * The 24 glyphs the vocabulary publishes, drawn here rather than imported.
+ *
+ * `Icon` takes a `name` from a fixed set — upstream's list, transcribed in the
+ * catalogue report §B — and every element in the elements family beside this
+ * one draws its icons with `lucide-react`, an optional peer of `./elements`.
+ * This subpath deliberately does not, and the reason is the same reason the
+ * stylesheet is plain CSS: a spec-driven widget has to render in a host that
+ * brought nothing. `./elements/generative` declares no optional peer at all, so
+ * an app can put a model's composition on the screen with `@cueplusplus/ui`
+ * installed and nothing else — and there is no package in the tree whose
+ * absence turns a weather card into a stack trace.
+ *
+ * It buys one more property, which the suite asserts: no element the renderer
+ * produces carries a `class` attribute. lucide stamps `class="lucide
+ * lucide-sun"` on every icon it draws, which is harmless and is still a name in
+ * the host app's global namespace that cue never asked for.
+ *
+ * The geometry is a 24×24 grid with a 2-unit margin, `currentColor` on the
+ * stroke and nothing on the fill, which is the convention every icon set in
+ * this repo already follows. Stroke weight is *not* an attribute here: the
+ * stylesheet sets it from `--aui-icon-stroke`, so it tracks the console's own
+ * `--cue-icon-stroke` and an island can change it without re-rendering.
+ */
+/**
+ * Every name a model may put in `Icon.name`.
+ *
+ * The order is upstream's, which groups them by what they are for — weather,
+ * transport controls, marks, shapes, arrows, and the eight object glyphs — and
+ * that is worth keeping: it is the order the docs page lists, so a reader
+ * comparing the two is comparing like with like.
+ */
+declare const GENERATIVE_ICONS: readonly ["sun", "moon", "cloud", "rain", "snow", "wind", "play", "pause", "check", "x", "star", "heart", "arrow-right", "arrow-up-right", "chevron-right", "calendar", "clock", "map-pin", "plane", "truck", "credit-card", "user", "search", "bell"];
+/** One of the 24 names {@link GENERATIVE_ICONS} lists. */
+type GenerativeIconName = (typeof GENERATIVE_ICONS)[number];
+/** Whether `name` is one of the 24 the vocabulary publishes. */
+declare function isGenerativeIcon(name: string): name is GenerativeIconName;
+//#endregion
+export { GENERATIVE_ICONS, GenerativeIconName, isGenerativeIcon };