@cueplusplus/ui 0.13.0

package/dist/elements/generative/icons.js

@@ -0,0 +1,190 @@
+"use client";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/generative/icons.tsx
+/**
+* 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.
+*/
+const GENERATIVE_ICONS = [
+	"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"
+];
+/** The eight rays of the sun, as one path so the glyph is two elements. */
+const SUN_RAYS = "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4";
+/** The cloud body every weather glyph is built on. */
+const CLOUD = "M17.5 18a4.5 4.5 0 0 0 .5-8.98A6 6 0 0 0 6.2 10.4 3.8 3.8 0 0 0 6.5 18Z";
+/** The same body, lifted so the precipitation below it has room. */
+const CLOUD_HIGH = "M17.5 15a4 4 0 0 0 .5-7.98A5.5 5.5 0 0 0 6.6 8.4 3.5 3.5 0 0 0 6.9 15Z";
+/**
+* The glyphs, keyed by name.
+*
+* Elements rather than components: each is created once at module scope and
+* handed to React as-is, so drawing the same icon in forty list rows allocates
+* nothing. React elements are frozen in development and immutable by contract,
+* which makes sharing one across a tree safe.
+*/
+const GLYPH = {
+	sun: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4"
+	}), /* @__PURE__ */ jsx("path", { d: SUN_RAYS })] }),
+	moon: /* @__PURE__ */ jsx("path", { d: "M20 14.5A8.5 8.5 0 0 1 9.5 4a7.5 7.5 0 1 0 10.5 10.5Z" }),
+	cloud: /* @__PURE__ */ jsx("path", { d: CLOUD }),
+	rain: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: CLOUD_HIGH }), /* @__PURE__ */ jsx("path", { d: "M8 18.5v2M12 18.5v2.5M16 18.5v2" })] }),
+	snow: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: CLOUD_HIGH }), /* @__PURE__ */ jsx("path", { d: "M8 19h.01M12 21h.01M16 19h.01M8 22h.01M16 22h.01" })] }),
+	wind: /* @__PURE__ */ jsx("path", { d: "M3 8h9a2.5 2.5 0 1 0-2.5-2.5M3 12h13a2.5 2.5 0 1 1-2.5 2.5M3 16h7a2 2 0 1 1-2 2" }),
+	play: /* @__PURE__ */ jsx("path", { d: "M7 4.5 19 12 7 19.5Z" }),
+	pause: /* @__PURE__ */ jsx("path", { d: "M8.5 4.5v15M15.5 4.5v15" }),
+	check: /* @__PURE__ */ jsx("path", { d: "m4.5 12.5 5 5 10-11" }),
+	x: /* @__PURE__ */ jsx("path", { d: "m5.5 5.5 13 13M18.5 5.5l-13 13" }),
+	star: /* @__PURE__ */ jsx("path", { d: "m12 3.2 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.8l6.2-.9Z" }),
+	heart: /* @__PURE__ */ jsx("path", { d: "M12 20.5 4.3 13a4.8 4.8 0 0 1 6.8-6.8l.9.9.9-.9A4.8 4.8 0 0 1 19.7 13Z" }),
+	"arrow-right": /* @__PURE__ */ jsx("path", { d: "M4 12h15m-6-6 6 6-6 6" }),
+	"arrow-up-right": /* @__PURE__ */ jsx("path", { d: "M7 17 17 7m-7 0h7v7" }),
+	"chevron-right": /* @__PURE__ */ jsx("path", { d: "m9.5 5.5 7 6.5-7 6.5" }),
+	calendar: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		x: "3.5",
+		y: "5",
+		width: "17",
+		height: "15.5",
+		rx: "2.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M3.5 10h17M8 3v4M16 3v4" })] }),
+	clock: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "8.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M12 7v5.3l3.4 2" })] }),
+	"map-pin": /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M12 21.5s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z" }), /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "10.5",
+		r: "2.5"
+	})] }),
+	plane: /* @__PURE__ */ jsx("path", { d: "M10.5 19.5 12 21l1.5-1.5V15l7.5 2.5v-2L13.5 10V4.5a1.5 1.5 0 0 0-3 0V10L3 15.5v2L10.5 15Z" }),
+	truck: /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M2.5 6.5h10v9h-10ZM12.5 10h4l3 3v2.5h-7Z" }),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "6.5",
+			cy: "17.5",
+			r: "1.8"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "16.5",
+			cy: "17.5",
+			r: "1.8"
+		})
+	] }),
+	"credit-card": /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		x: "2.5",
+		y: "5.5",
+		width: "19",
+		height: "13",
+		rx: "2.5"
+	}), /* @__PURE__ */ jsx("path", { d: "M2.5 10h19M6 14.5h3" })] }),
+	user: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "8",
+		r: "3.8"
+	}), /* @__PURE__ */ jsx("path", { d: "M4.5 20.5a7.5 7.5 0 0 1 15 0" })] }),
+	search: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+		cx: "10.5",
+		cy: "10.5",
+		r: "6.5"
+	}), /* @__PURE__ */ jsx("path", { d: "m15.5 15.5 4.5 4.5" })] }),
+	bell: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M18 16.5V11a6 6 0 1 0-12 0v5.5L4.5 19h15Z" }), /* @__PURE__ */ jsx("path", { d: "M10 19a2 2 0 0 0 4 0" })] })
+};
+const KNOWN = new Set(GENERATIVE_ICONS);
+/** Whether `name` is one of the 24 the vocabulary publishes. */
+function isGenerativeIcon(name) {
+	return KNOWN.has(name);
+}
+/**
+* One glyph, or the placeholder ring when the name is not one of the 24.
+*
+* The unknown case is deliberately *not* the unknown-component fallback. An
+* `Icon` with a name nobody publishes is still an `Icon` — the node is
+* well-formed, its place in the layout is correct, and the only thing missing
+* is a drawing. Replacing it with a notice would break the row it sits in to
+* report something a reader can see for themselves; a dotted ring keeps the
+* shape, keeps the alignment, and reads as "there is a picture here that this
+* version does not have".
+*
+* `aria-hidden`, always. Every icon in this vocabulary sits beside its own
+* label — a button's text, a fact's value, a list row — and an announced name
+* would double it. A model that wants an icon to carry meaning on its own has
+* `Caption` for that.
+*/
+function GenerativeIcon({ name, size }) {
+	const known = name !== void 0 && isGenerativeIcon(name);
+	return /* @__PURE__ */ jsx("span", {
+		"data-aui": "icon",
+		"data-aui-icon": known ? name : "unknown",
+		"data-aui-size": size,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: known ? GLYPH[name] : /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "7.5",
+				strokeDasharray: "3 3"
+			})
+		})
+	});
+}
+//#endregion
+export { GENERATIVE_ICONS, GenerativeIcon, isGenerativeIcon };

package/dist/elements/generative/intrinsics.js

@@ -0,0 +1,483 @@
+"use client";
+import { GenerativeFallback } from "./faults.js";
+import { actionOf, childList, choice, columnList, describe, flag, isGenerativeType, isNode, list, num, optionList, rowCells, safeColor, safeLength, safeSrc, scale, str, strOr } from "./spec.js";
+import { GenerativeChart } from "./chart.js";
+import { GenerativeIcon } from "./icons.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/generative/intrinsics.tsx
+/** How many slides a carousel draws, whatever the model sent. */
+const MAX_SLIDES = 10;
+/**
+* One value from the tree, as elements.
+*
+* `path` is the dotted position from the root — `root.children.2.children.0` —
+* and it is threaded rather than reconstructed because it is the only thing
+* that makes a fault actionable. "Unknown component Cauldron" tells a
+* developer what happened; "at root.children.2" tells them where to look in a
+* spec that may be four hundred lines of JSON.
+*/
+function renderValue(value, path, depth, ctx, within) {
+	if (depth > ctx.maxDepth) return fault(ctx, {
+		kind: "too-deep",
+		path,
+		message: `Nesting stops at ${ctx.maxDepth} levels; this branch goes further.`
+	});
+	if (!isNode(value)) return fault(ctx, {
+		kind: "not-a-node",
+		path,
+		message: `Expected a component here and found ${describe(value)}.`
+	});
+	if (!isGenerativeType(value.$type)) return fault(ctx, {
+		kind: "unknown-type",
+		path,
+		type: value.$type,
+		message: `“${value.$type}” is not a component this version can draw.`
+	});
+	return intrinsic(value, value.$type, path, depth, ctx, within);
+}
+/** Record a refusal and draw it in place. */
+function fault(ctx, detail) {
+	ctx.faults.push(detail);
+	return /* @__PURE__ */ jsx(GenerativeFallback, { fault: detail });
+}
+/** A node's children, walked. */
+function children(node, path, depth, ctx, within) {
+	return childList(node).map((child, at) => /* @__PURE__ */ jsx(React.Fragment, { children: renderValue(child, `${path}.children.${at}`, depth + 1, ctx, within) }, at));
+}
+/** Fire `$action`, if the node carries one and a caller is listening. */
+function fire(ctx, node, type, value, values) {
+	const action = actionOf(node);
+	if (action === void 0 || ctx.onAction === void 0) return;
+	ctx.onAction({
+		action,
+		type,
+		...value === void 0 ? {} : { value },
+		...values === void 0 ? {} : { values }
+	});
+}
+/**
+* Every named control in a submitted form, keyed by its `name`.
+*
+* `FormData` reads the DOM rather than any state this renderer keeps, which is
+* deliberate: the intrinsics are uncontrolled — a model's spec supplies
+* *defaults*, and what the person typed lives in the elements. Keeping a
+* parallel copy in React state would mean a re-render on every keystroke of a
+* tree that may be a hundred nodes, and two answers to "what is in this field".
+*
+* File entries are dropped. A generative form has no upload intrinsic, so the
+* only way one appears is a spec that was not composed by this vocabulary.
+*/
+function valuesOf(form) {
+	const values = {};
+	for (const [name, value] of new FormData(form).entries()) if (typeof value === "string") values[name] = value;
+	return values;
+}
+/**
+* A form submit, always prevented.
+*
+* There is no URL for a generative form to post to, and the default action of
+* an un-prevented submit inside a chat console is a full page navigation that
+* loses the conversation. So the handler prevents first and decides second: a
+* form with no `$action` is inert, not a page load.
+*/
+function submitter(ctx, node, type) {
+	return (event) => {
+		event.preventDefault();
+		fire(ctx, node, type, void 0, valuesOf(event.currentTarget));
+	};
+}
+const SIZES = [
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl"
+];
+const WEIGHTS = [
+	"normal",
+	"medium",
+	"semibold",
+	"bold"
+];
+const COLORS = [
+	"emphasis",
+	"secondary",
+	"alpha-70",
+	"white",
+	"white-70",
+	"white-50"
+];
+const ALIGN = [
+	"start",
+	"center",
+	"end"
+];
+const JUSTIFY = [
+	"start",
+	"center",
+	"end",
+	"between"
+];
+const BUTTON_STYLES = [
+	"primary",
+	"secondary",
+	"outline",
+	"ghost",
+	"danger"
+];
+const BADGE_VARIANTS = [
+	"default",
+	"secondary",
+	"info",
+	"success",
+	"warning"
+];
+const TONES = [
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+const IMAGE_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* The label half of a labelled control.
+*
+* Wrapped rather than associated by `id`. A model composes several forms into
+* one message and has no idea what other ids are on the page, so generating
+* them here would either collide or need a counter that survives re-renders;
+* a `<label>` that contains its control needs neither and is what assistive
+* technology reads either way.
+*/
+function Labelled({ label, children: control }) {
+	if (label === void 0) return /* @__PURE__ */ jsx(Fragment, { children: control });
+	return /* @__PURE__ */ jsxs("label", {
+		"data-aui": "field",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-aui": "field-label",
+			children: label
+		}), control]
+	});
+}
+/**
+* One node, drawn.
+*
+* The switch is exhaustive over {@link GenerativeTypeName}, which is what makes
+* adding a 28th intrinsic a type error here rather than a silent fallback at
+* runtime.
+*/
+function intrinsic(node, type, path, depth, ctx, within) {
+	switch (type) {
+		case "Card": {
+			const title = str(node, "title");
+			const confirm = str(node, "confirm");
+			const cancel = str(node, "cancel");
+			const background = safeColor(node, "background");
+			const surface = background !== void 0 || confirm !== void 0 || cancel !== void 0;
+			const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+				title === void 0 ? null : /* @__PURE__ */ jsx("h3", {
+					"data-aui": "card-title",
+					children: title
+				}),
+				children(node, path, depth, ctx),
+				confirm === void 0 && cancel === void 0 ? null : /* @__PURE__ */ jsxs("div", {
+					"data-aui": "card-footer",
+					children: [cancel === void 0 ? null : /* @__PURE__ */ jsx("button", {
+						"data-aui": "card-cancel",
+						type: "button",
+						onClick: () => fire(ctx, node, "Card", "cancel"),
+						children: cancel
+					}), confirm === void 0 ? null : /* @__PURE__ */ jsx("button", {
+						"data-aui": "card-confirm",
+						type: flag(node, "asForm") ? "submit" : "button",
+						onClick: flag(node, "asForm") ? void 0 : () => fire(ctx, node, "Card", "confirm"),
+						children: confirm
+					})]
+				})
+			] });
+			const shared = {
+				"data-aui-padding": scale(node, "padding"),
+				style: background === void 0 ? void 0 : { background },
+				...surface || within === "Carousel" ? { "data-aui-surface": "" } : {}
+			};
+			return flag(node, "asForm") ? /* @__PURE__ */ jsx("form", {
+				"data-aui": "card",
+				...shared,
+				onSubmit: submitter(ctx, node, "Card"),
+				children: body
+			}) : /* @__PURE__ */ jsx("section", {
+				"data-aui": "card",
+				...shared,
+				children: body
+			});
+		}
+		case "Row": return /* @__PURE__ */ jsx("div", {
+			"data-aui": "row",
+			"data-aui-gap": scale(node, "gap"),
+			"data-aui-align": choice(node, "align", ALIGN),
+			"data-aui-justify": choice(node, "justify", JUSTIFY),
+			children: children(node, path, depth, ctx)
+		});
+		case "Col": return /* @__PURE__ */ jsx("div", {
+			"data-aui": "col",
+			"data-aui-gap": scale(node, "gap"),
+			"data-aui-align": choice(node, "align", ALIGN),
+			children: children(node, path, depth, ctx)
+		});
+		case "Box": {
+			const radius = str(node, "radius") === "full" ? "9999px" : safeLength(node, "radius");
+			return /* @__PURE__ */ jsx("div", {
+				"data-aui": "box",
+				style: {
+					width: safeLength(node, "width"),
+					height: safeLength(node, "height"),
+					borderRadius: radius,
+					background: safeColor(node, "background")
+				},
+				children: children(node, path, depth, ctx)
+			});
+		}
+		case "Spacer": return /* @__PURE__ */ jsx("div", {
+			"data-aui": "spacer",
+			"aria-hidden": "true"
+		});
+		case "Divider": return /* @__PURE__ */ jsx("hr", {
+			"data-aui": "divider",
+			...flag(node, "flush") ? { "data-aui-flush": "" } : {}
+		});
+		case "Carousel": {
+			const label = str(node, "label");
+			return /* @__PURE__ */ jsx("div", {
+				"data-aui": "carousel",
+				role: "group",
+				"aria-label": label,
+				"aria-roledescription": "carousel",
+				children: childList(node).slice(0, MAX_SLIDES).map((child, at) => /* @__PURE__ */ jsx("div", {
+					"data-aui": "carousel-slide",
+					children: renderValue(child, `${path}.children.${at}`, depth + 1, ctx, "Carousel")
+				}, at))
+			});
+		}
+		case "Header": return /* @__PURE__ */ jsx("h3", {
+			"data-aui": "header",
+			"data-aui-size": choice(node, "size", SIZES) ?? "lg",
+			children: strOr(node, "text", "")
+		});
+		case "Text": return /* @__PURE__ */ jsx("p", {
+			"data-aui": "text",
+			"data-aui-size": choice(node, "size", SIZES),
+			"data-aui-weight": choice(node, "weight", WEIGHTS),
+			"data-aui-color": choice(node, "color", COLORS),
+			children: strOr(node, "value", "")
+		});
+		case "Caption": return /* @__PURE__ */ jsx("p", {
+			"data-aui": "caption",
+			children: strOr(node, "value", "")
+		});
+		case "Markdown": {
+			const value = strOr(node, "value", "");
+			return /* @__PURE__ */ jsx("div", {
+				"data-aui": "markdown",
+				children: ctx.renderMarkdown?.(value) ?? value
+			});
+		}
+		case "Fact": return /* @__PURE__ */ jsxs("div", {
+			"data-aui": "fact",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-aui": "fact-label",
+				children: strOr(node, "label", "")
+			}), /* @__PURE__ */ jsx("span", {
+				"data-aui": "fact-value",
+				children: strOr(node, "value", "")
+			})]
+		});
+		case "Table": {
+			const columns = columnList(node["columns"]);
+			return /* @__PURE__ */ jsxs("table", {
+				"data-aui": "table",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, at) => /* @__PURE__ */ jsx("th", {
+					"data-aui": "table-col",
+					"data-aui-align": column.align,
+					scope: "col",
+					children: column.label
+				}, at)) }) }), /* @__PURE__ */ jsx("tbody", { children: list(node, "rows").map((row, at) => /* @__PURE__ */ jsx("tr", { children: rowCells(row, columns).map((cell, column) => /* @__PURE__ */ jsx("td", {
+					"data-aui-align": columns[column]?.align,
+					children: cell
+				}, column)) }, at)) })]
+			});
+		}
+		case "Chart": return /* @__PURE__ */ jsx(GenerativeChart, { node });
+		case "Badge": return /* @__PURE__ */ jsx("span", {
+			"data-aui": "badge",
+			"data-aui-variant": choice(node, "variant", BADGE_VARIANTS),
+			children: strOr(node, "value", "")
+		});
+		case "Image": {
+			const pixels = num(node, "size");
+			return /* @__PURE__ */ jsx("img", {
+				"data-aui": "image",
+				"data-aui-size": choice(node, "size", IMAGE_SIZES),
+				...flag(node, "round") ? { "data-aui-round": "" } : {},
+				src: safeSrc(str(node, "src")),
+				alt: strOr(node, "alt", ""),
+				style: pixels === void 0 ? void 0 : {
+					width: `${pixels}px`,
+					height: `${pixels}px`
+				}
+			});
+		}
+		case "Icon": return /* @__PURE__ */ jsx(GenerativeIcon, {
+			name: str(node, "name"),
+			size: choice(node, "size", SIZES)
+		});
+		case "Button": return /* @__PURE__ */ jsx("button", {
+			"data-aui": "button",
+			"data-aui-style": choice(node, "buttonStyle", BUTTON_STYLES),
+			...flag(node, "block") ? { "data-aui-block": "" } : {},
+			type: flag(node, "submit") ? "submit" : "button",
+			onClick: () => fire(ctx, node, "Button"),
+			children: strOr(node, "label", "")
+		});
+		case "Select": {
+			const options = optionList(node["options"]);
+			const placeholder = str(node, "placeholder");
+			return /* @__PURE__ */ jsx(Labelled, {
+				label: str(node, "label"),
+				children: /* @__PURE__ */ jsxs("select", {
+					"data-aui": "select",
+					name: str(node, "name"),
+					defaultValue: placeholder === void 0 ? void 0 : "",
+					onChange: (event) => fire(ctx, node, "Select", event.currentTarget.value),
+					children: [placeholder === void 0 ? null : /* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						children: placeholder
+					}), options.map((option, at) => /* @__PURE__ */ jsx("option", {
+						value: option.value,
+						children: option.label
+					}, at))]
+				})
+			});
+		}
+		case "Input": {
+			const multiline = flag(node, "multiline");
+			const onBlur = (event) => {
+				fire(ctx, node, "Input", event.currentTarget.value);
+			};
+			return /* @__PURE__ */ jsx(Labelled, {
+				label: str(node, "label"),
+				children: multiline ? /* @__PURE__ */ jsx("textarea", {
+					"data-aui": "input",
+					"data-aui-multiline": "",
+					name: str(node, "name"),
+					placeholder: str(node, "placeholder"),
+					defaultValue: str(node, "value"),
+					onBlur
+				}) : /* @__PURE__ */ jsx("input", {
+					"data-aui": "input",
+					type: "text",
+					name: str(node, "name"),
+					placeholder: str(node, "placeholder"),
+					defaultValue: str(node, "value"),
+					onBlur
+				})
+			});
+		}
+		case "DatePicker": return /* @__PURE__ */ jsx(Labelled, {
+			label: str(node, "label"),
+			children: /* @__PURE__ */ jsx("input", {
+				"data-aui": "datepicker",
+				type: "date",
+				name: str(node, "name"),
+				defaultValue: str(node, "value"),
+				min: str(node, "min"),
+				max: str(node, "max"),
+				onChange: (event) => fire(ctx, node, "DatePicker", event.currentTarget.value)
+			})
+		});
+		case "Checkbox": return /* @__PURE__ */ jsxs("label", {
+			"data-aui": "checkbox",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				name: str(node, "name"),
+				defaultChecked: flag(node, "defaultChecked"),
+				onChange: (event) => fire(ctx, node, "Checkbox", event.currentTarget.checked)
+			}), /* @__PURE__ */ jsx("span", {
+				"data-aui": "field-label",
+				children: strOr(node, "label", "")
+			})]
+		});
+		case "RadioGroup": {
+			const name = str(node, "name");
+			const chosen = str(node, "defaultValue");
+			const label = str(node, "label");
+			return /* @__PURE__ */ jsxs("fieldset", {
+				"data-aui": "radiogroup",
+				children: [label === void 0 ? null : /* @__PURE__ */ jsx("legend", {
+					"data-aui": "field-label",
+					children: label
+				}), optionList(node["options"]).map((option, at) => /* @__PURE__ */ jsxs("label", {
+					"data-aui": "radiogroup-option",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name,
+						value: option.value,
+						defaultChecked: chosen === option.value,
+						onChange: () => fire(ctx, node, "RadioGroup", option.value)
+					}), /* @__PURE__ */ jsx("span", {
+						"data-aui": "field-label",
+						children: option.label
+					})]
+				}, at))]
+			});
+		}
+		case "Form": return /* @__PURE__ */ jsx("form", {
+			"data-aui": "form",
+			"data-aui-gap": scale(node, "gap"),
+			onSubmit: submitter(ctx, node, "Form"),
+			children: children(node, path, depth, ctx)
+		});
+		case "ListView": return /* @__PURE__ */ jsx("ul", {
+			"data-aui": "listview",
+			children: children(node, path, depth, ctx, "ListView")
+		});
+		case "ListViewItem": {
+			const body = actionOf(node) === void 0 ? children(node, path, depth, ctx) : /* @__PURE__ */ jsx("button", {
+				"data-aui": "listview-item-trigger",
+				type: "button",
+				onClick: () => fire(ctx, node, "ListViewItem"),
+				children: children(node, path, depth, ctx)
+			});
+			return within === "ListView" ? /* @__PURE__ */ jsx("li", {
+				"data-aui": "listview-item",
+				children: body
+			}) : /* @__PURE__ */ jsx("div", {
+				"data-aui": "listview-item",
+				children: body
+			});
+		}
+		case "Alert": {
+			const tone = choice(node, "tone", TONES) ?? "info";
+			const description = str(node, "description");
+			return /* @__PURE__ */ jsxs("div", {
+				"data-aui": "alert",
+				"data-aui-tone": tone,
+				role: tone === "danger" ? "alert" : "status",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-aui": "alert-title",
+					children: strOr(node, "title", "")
+				}), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-aui": "alert-desc",
+					children: description
+				})]
+			});
+		}
+	}
+}
+//#endregion
+export { renderValue };