@servicetitan/json-render-react 0.2.0 → 0.3.0

package/dist/json-render-react.js

@@ -1,203 +1,855 @@
-import { defineCatalog as e, getByPath as t } from "@json-render/core";
-import { JSONUIProvider as n, Renderer as r, createStateStore as i, defineRegistry as a, useStateStore as o } from "@json-render/react";
-import { schema as s } from "@json-render/react/schema";
-import { z as c } from "zod";
-import { Alert as l, Badge as u, Button as d, Card as f, Checkbox as ee, Chip as te, Divider as ne, FieldLabel as re, Flex as p, Grid as ie, Icon as ae, Link as m, Listbox as h, ProgressBar as g, Radio as _, Switch as oe, Text as v, TextField as se, Textarea as ce } from "@servicetitan/anvil2";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import * as x from "@amcharts/amcharts5";
-import * as S from "@amcharts/amcharts5/xy";
-import { Children as C, useEffect as w, useMemo as T, useRef as E } from "react";
-import le from "@amcharts/amcharts5/themes/Animated";
-import { ThemeCategorical as ue, ThemeMonochrome as D, ThemeSemantic as de } from "@servicetitan/anvil2-ext-charts/am5";
-import O from "@servicetitan/anvil2/assets/icons/material/round/check_circle.svg";
-import k from "@servicetitan/anvil2/assets/icons/material/round/radio_button_unchecked.svg";
-import A from "@servicetitan/anvil2/assets/icons/st/in_progress.svg";
-import * as j from "@amcharts/amcharts5/percent";
-//#region src/core/actions.ts
-var M = {
+import { AiMark as e, Alert as t, Badge as n, Button as r, Card as i, Checkbox as a, Chip as o, Divider as s, FieldLabel as c, Flex as l, Grid as u, Icon as d, Link as f, Listbox as ee, OverflowText as te, ProgressBar as ne, Radio as re, SkeletonRectangle as ie, SkeletonText as ae, Switch as oe, Text as p, TextField as se, Textarea as ce } from "@servicetitan/anvil2";
+import { Card as m, Dialog as le, Link as ue, Text as h } from "@servicetitan/carto-react-kit";
+import { IconChevronDown as de } from "@servicetitan/carto-react-kit/icons";
+import { Children as g, Component as fe, Fragment as pe, useEffect as _, useId as me, useMemo as v, useRef as y, useState as b } from "react";
+import { core as x } from "@servicetitan/anvil2/token";
+import { Fragment as he, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { z as w } from "zod";
+import { DataTable as ge, createColumnHelper as _e } from "@servicetitan/anvil2/beta";
+import ve from "@servicetitan/anvil2/assets/icons/material/round/image.svg";
+import ye from "@servicetitan/anvil2/assets/icons/st/document_audio.svg";
+import be from "@servicetitan/anvil2/assets/icons/st/document_doc.svg";
+import xe from "@servicetitan/anvil2/assets/icons/st/document_form.svg";
+import Se from "@servicetitan/anvil2/assets/icons/st/document_other.svg";
+import Ce from "@servicetitan/anvil2/assets/icons/st/document_pdf.svg";
+import we from "@servicetitan/anvil2/assets/icons/st/document_spreadsheet.svg";
+import Te from "@servicetitan/anvil2/assets/icons/st/document_text.svg";
+import { primitive as Ee } from "@servicetitan/carto-react-kit/tokens";
+import { defineCatalog as T, getByPath as E, validateSpec as De } from "@json-render/core";
+import { schema as D } from "@json-render/react/schema";
+import { JSONUIProvider as Oe, Renderer as ke, createStateStore as Ae, defineRegistry as je, useStateStore as O } from "@json-render/react";
+import * as k from "@amcharts/amcharts5";
+import * as A from "@amcharts/amcharts5/xy";
+import Me from "@amcharts/amcharts5/themes/Animated";
+import { ThemeCategorical as Ne, ThemeMonochrome as Pe, ThemeSemantic as Fe } from "@servicetitan/anvil2-ext-charts/am5";
+import Ie from "@servicetitan/anvil2/assets/icons/material/round/check_circle.svg";
+import Le from "@servicetitan/anvil2/assets/icons/material/round/radio_button_unchecked.svg";
+import Re from "@servicetitan/anvil2/assets/icons/st/in_progress.svg";
+import * as ze from "@amcharts/amcharts5/percent";
+//#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.20.1/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
+function Be(e, t) {
+	if (typeof e != "object" || !e) return e;
+	var n = e[Symbol.toPrimitive];
+	if (n !== void 0) {
+		var r = n.call(e, t || "default");
+		if (typeof r != "object") return r;
+		throw TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return (t === "string" ? String : Number)(e);
+}
+function Ve(e) {
+	var t = Be(e, "string");
+	return typeof t == "symbol" ? t : String(t);
+}
+function He(e, t, n) {
+	return t = Ve(t), t in e ? Object.defineProperty(e, t, {
+		value: n,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[t] = n, e;
+}
+function Ue(e, t) {
+	var n = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var r = Object.getOwnPropertySymbols(e);
+		t && (r = r.filter(function(t) {
+			return Object.getOwnPropertyDescriptor(e, t).enumerable;
+		})), n.push.apply(n, r);
+	}
+	return n;
+}
+function We(e) {
+	for (var t = 1; t < arguments.length; t++) {
+		var n = arguments[t] == null ? {} : arguments[t];
+		t % 2 ? Ue(Object(n), !0).forEach(function(t) {
+			He(e, t, n[t]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Ue(Object(n)).forEach(function(t) {
+			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+		});
+	}
+	return e;
+}
+function Ge(e, t) {
+	var n = {};
+	for (var r in e) n[r] = t(e[r], r);
+	return n;
+}
+var Ke = (e, t, n) => {
+	for (var r of Object.keys(e)) if (e[r] !== (t[r] ?? n[r])) return !1;
+	return !0;
+}, j = (e) => {
+	var t = (t) => {
+		var n = e.defaultClassName, r = We(We({}, e.defaultVariants), t);
+		for (var i in r) {
+			var a = r[i] ?? e.defaultVariants[i];
+			if (a != null) {
+				var o = a;
+				typeof o == "boolean" && (o = o === !0 ? "true" : "false");
+				var s = e.variantClassNames[i][o];
+				s && (n += " " + s);
+			}
+		}
+		for (var [c, l] of e.compoundVariants) Ke(c, r, e.defaultVariants) && (n += " " + l);
+		return n;
+	};
+	return t.variants = () => Object.keys(e.variantClassNames), t.classNames = {
+		get base() {
+			return e.defaultClassName.split(" ")[0];
+		},
+		get variants() {
+			return Ge(e.variantClassNames, (e) => Ge(e, (e) => e.split(" ")[0]));
+		}
+	}, t;
+}, qe = "_7hazmf0", Je = "_7hazmf1", Ye = "_7hazmf2", Xe = j({
+	defaultClassName: "_7hazmf3",
+	variantClassNames: { expanded: {
+		true: "_7hazmf4",
+		false: "_7hazmf5"
+	} },
+	defaultVariants: { expanded: !1 },
+	compoundVariants: []
+}), Ze = j({
+	defaultClassName: "_7hazmf6",
+	variantClassNames: { expanded: {
+		true: "_7hazmf7",
+		false: "_7hazmf8"
+	} },
+	defaultVariants: { expanded: !1 },
+	compoundVariants: []
+}), Qe = "_7hazmf9", $e = "_7hazmfa", et = "_7hazmfb", tt = j({
+	defaultClassName: "_7hazmfc",
+	variantClassNames: { expanded: {
+		true: "_7hazmfd",
+		false: "_7hazmfe"
+	} },
+	defaultVariants: { expanded: !1 },
+	compoundVariants: []
+}), M = [
+	"success",
+	"warning",
+	"danger",
+	"info",
+	"neutral"
+], nt = {
+	success: x.semantic.BackgroundColorSuccessSubdued.value,
+	warning: x.semantic.BackgroundColorWarningSubdued.value,
+	danger: x.semantic.BackgroundColorDangerSubdued.value,
+	info: x.semantic.BackgroundColorPrimarySubdued.value,
+	neutral: x.semantic.BackgroundColorSecondary.value
+};
+function rt(e = "neutral") {
+	return nt[e];
+}
+var it = {
+	success: x.semantic.BackgroundColorSuccess.value,
+	warning: x.semantic.BackgroundColorWarning.value,
+	danger: x.semantic.ForegroundColorDanger.value,
+	info: x.semantic.ForegroundColorPrimary.value,
+	neutral: void 0
+};
+function N(e) {
+	return it[e];
+}
+function at(e) {
+	if (e == null || e === "") return null;
+	if (typeof e == "object" && e && "label" in e) {
+		let t = e;
+		return {
+			label: t.label,
+			tone: t.tone ?? "neutral"
+		};
+	}
+	return typeof e == "string" ? {
+		label: e,
+		tone: "neutral"
+	} : {
+		label: String(e),
+		tone: "neutral"
+	};
+}
+//#endregion
+//#region src/context/components/collapsible-card.tsx
+function ot({ badge: e }) {
+	return typeof e == "number" ? /* @__PURE__ */ S(o, {
+		label: String(e),
+		size: "small",
+		style: { marginTop: "2px" }
+	}) : /* @__PURE__ */ S(o, {
+		label: e.label,
+		size: "small",
+		color: rt(e.tone ?? "neutral"),
+		style: { marginTop: "2px" }
+	});
+}
+var st = ({ title: e, badge: t, defaultExpanded: n = !0, children: r }) => {
+	let [i, a] = b(n), [o, s] = b(n), c = me();
+	return /* @__PURE__ */ S("div", {
+		className: qe,
+		children: /* @__PURE__ */ S(m, {
+			padding: "base",
+			content: /* @__PURE__ */ C("div", {
+				className: Ye,
+				children: [/* @__PURE__ */ S(h, {
+					variant: "headline",
+					el: "h3",
+					size: "substantial",
+					text: /* @__PURE__ */ C("button", {
+						type: "button",
+						"aria-expanded": i,
+						"aria-controls": c,
+						onClick: () => {
+							a((e) => {
+								let t = !e;
+								return t && s(!0), t;
+							});
+						},
+						className: Qe,
+						children: [/* @__PURE__ */ C("span", {
+							className: $e,
+							children: [/* @__PURE__ */ S("span", {
+								className: et,
+								children: e
+							}), t == null ? null : /* @__PURE__ */ S(ot, { badge: t })]
+						}), /* @__PURE__ */ S(de, { className: tt({ expanded: i }) })]
+					})
+				}), /* @__PURE__ */ S("div", {
+					className: Xe({ expanded: i }),
+					onTransitionEnd: (e) => {
+						e.propertyName !== "grid-template-rows" || i || s(!1);
+					},
+					children: /* @__PURE__ */ S("div", {
+						className: Ze({ expanded: i }),
+						children: /* @__PURE__ */ S("div", {
+							id: c,
+							className: Je,
+							"aria-hidden": !i,
+							children: o ? r : null
+						})
+					})
+				})]
+			})
+		})
+	});
+}, ct = w.object({
+	label: w.string(),
+	tone: w.enum(M).optional()
+}), lt = w.union([w.number().int().nonnegative(), ct]), ut = {
+	props: w.object({
+		title: w.string(),
+		defaultExpanded: w.boolean().optional(),
+		badge: lt.optional()
+	}),
+	slots: ["default"],
+	description: "Collapsible card for the Context panel. Each card holds a single content component as its body. Optional badge shows a count (number) or status label ({ label, tone? }) in the card header. Use defaultExpanded: false to start collapsed."
+}, dt = ({ props: e, children: t }) => /* @__PURE__ */ S(st, {
+	title: e.title,
+	...e.badge == null ? {} : { badge: e.badge },
+	defaultExpanded: e.defaultExpanded ?? !0,
+	children: t
+}), ft = w.object({
+	label: w.string(),
+	tone: w.enum(M).optional()
+}), pt = w.union([
+	w.string(),
+	w.number(),
+	w.null(),
+	ft
+]), mt = w.object({
+	key: w.string(),
+	header: w.string(),
+	type: w.enum([
+		"text",
+		"currency",
+		"chip",
+		"delta"
+	]).optional(),
+	sortable: w.boolean().optional()
+}), ht = w.record(w.string(), pt).and(w.object({ id: w.string() })), gt = {
+	props: w.object({
+		columns: w.array(mt),
+		rows: w.array(ht),
+		defaultSortedColumn: w.object({
+			id: w.string(),
+			desc: w.boolean().optional()
+		}).optional()
+	}),
+	slots: [],
+	description: "Read-only DataTable for context cards. Column type: text (default), currency, chip, or delta. Chip cells: plain string (neutral tone) or { label, tone } where tone is success | warning | danger | info | neutral. Delta cells: signed string ('+5%', '-3%') or null — positive renders danger-red, negative renders success-green, null renders '–'. Rows must include id."
+}, _t = "_1b4fiav0", vt = "_1b4fiav1";
+//#endregion
+//#region src/context/catalog/context-data-table.tsx
+function yt(e) {
+	if (e == null || e === "" || e === "–" || e === "0" || e === "0%") return {
+		text: "–",
+		sign: "none"
+	};
+	let t = String(e).trim();
+	return t.startsWith("+") || !t.startsWith("-") && parseFloat(t) > 0 ? {
+		text: t,
+		sign: "positive"
+	} : t.startsWith("-") || parseFloat(t) < 0 ? {
+		text: t,
+		sign: "negative"
+	} : {
+		text: t,
+		sign: "none"
+	};
+}
+var bt = ({ props: e }) => /* @__PURE__ */ S("div", {
+	className: _t,
+	children: /* @__PURE__ */ S(ge, {
+		columns: v(() => {
+			let t = _e();
+			return e.columns.map((e) => t(e.key, {
+				header: { label: e.header },
+				...e.sortable ? { sortable: !0 } : {},
+				...e.type === "currency" ? { type: "currency" } : {},
+				...e.type === "chip" ? { renderCell: (e) => {
+					let t = at(e);
+					return t ? /* @__PURE__ */ S(o, {
+						label: t.label,
+						size: "small",
+						color: rt(t.tone)
+					}) : null;
+				} } : {},
+				...e.type === "delta" ? { renderCell: (e) => {
+					let { text: t, sign: n } = yt(e), r = n === "positive" ? N("danger") : n === "negative" ? N("success") : void 0;
+					return /* @__PURE__ */ S("span", {
+						className: vt,
+						style: r ? { color: r } : void 0,
+						children: t
+					});
+				} } : {}
+			}));
+		}, [e.columns]),
+		data: v(() => e.rows.map((e) => ({ ...e })), [e.rows]),
+		isSelectable: !1,
+		...e.defaultSortedColumn ? { defaultSortedColumn: {
+			id: e.defaultSortedColumn.id,
+			desc: e.defaultSortedColumn.desc ?? !1
+		} } : {}
+	})
+}), xt = w.object({
+	label: w.string(),
+	url: w.string()
+}), St = {
+	props: w.object({ items: w.array(xt) }),
+	slots: [],
+	description: "Vertical list of file attachments and documents. Each row shows a color-coded file-type icon (inferred from the extension: pdf, xlsx/csv, doc/docx, image, or generic) and the filename. Clicking a row opens a preview dialog. Image files render from url; other files show a large icon and a Download footer action. Use for Completed Forms and Attachments sections."
+}, Ct = "_1afcqze0", wt = "_1afcqze1", Tt = "_1afcqze2", Et = "_1afcqze3", Dt = "_1afcqze4", Ot = "_1afcqze5", kt = "_1afcqze6", At = "_1afcqze7", jt = "_1afcqze8";
+//#endregion
+//#region src/context/catalog/context-file-list.tsx
+function Mt(e) {
+	let t = e.toLowerCase();
+	return t.endsWith(".pdf") ? "pdf" : /\.(xlsx|xls|csv|numbers)$/.test(t) ? "spreadsheet" : /\.(doc|docx|pages)$/.test(t) ? /form/i.test(t.replace(/\.[^.]+$/, "")) ? "form" : "doc" : /\.(txt|rtf|md)$/.test(t) ? "text" : /\.(mp3|wav|aac|m4a|flac|ogg)$/.test(t) ? "audio" : /\.(jpg|jpeg|png|gif|webp|heic|svg)$/.test(t) ? "image" : /form/i.test(t.replace(/\.[^.]+$/, "")) ? "form" : "generic";
+}
+var Nt = {
+	pdf: {
+		svg: Ce,
+		color: "#DC2626"
+	},
+	spreadsheet: {
+		svg: we,
+		color: "#16A34A"
+	},
+	doc: {
+		svg: be,
+		color: "#2563EB"
+	},
+	text: {
+		svg: Te,
+		color: "#6B7280"
+	},
+	form: {
+		svg: xe,
+		color: "#2563EB"
+	},
+	audio: {
+		svg: ye,
+		color: "#6B7280"
+	},
+	image: {
+		svg: ve,
+		color: "#374151"
+	},
+	generic: {
+		svg: Se,
+		color: "#6B7280"
+	}
+}, Pt = { "--a2-mod-icon-font-size": "80px" };
+function Ft({ kind: e }) {
+	let { svg: t, color: n } = Nt[e];
+	return /* @__PURE__ */ S("div", {
+		className: Et,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ S(d, {
+			svg: t,
+			size: "medium",
+			color: n
+		})
+	});
+}
+function It(e, t) {
+	let n = document.createElement("a");
+	n.href = e, n.download = t, n.target = "_blank", n.rel = "noopener noreferrer", document.body.appendChild(n), n.click(), n.remove();
+}
+function Lt({ label: e }) {
+	return /* @__PURE__ */ S(h, {
+		variant: "body",
+		size: "regular",
+		text: e,
+		className: jt
+	});
+}
+function Rt({ item: e, kind: t }) {
+	let { svg: n, color: r } = Nt[t];
+	return /* @__PURE__ */ C("div", {
+		className: Dt,
+		children: [/* @__PURE__ */ S("div", {
+			className: Ot,
+			children: t === "image" ? /* @__PURE__ */ S("img", {
+				src: e.url,
+				alt: e.label,
+				className: kt
+			}) : /* @__PURE__ */ S("div", {
+				className: At,
+				children: /* @__PURE__ */ S(d, {
+					svg: n,
+					color: r,
+					style: Pt
+				})
+			})
+		}), /* @__PURE__ */ S(Lt, { label: e.label })]
+	});
+}
+function zt({ item: e, onPreview: t }) {
+	let n = Mt(e.label);
+	return /* @__PURE__ */ S(m, {
+		className: wt,
+		padding: "snug",
+		onPress: t,
+		label: `Preview ${e.label}`,
+		content: /* @__PURE__ */ C("div", {
+			className: Tt,
+			children: [/* @__PURE__ */ S(Ft, { kind: n }), /* @__PURE__ */ S(h, {
+				variant: "body",
+				size: "compact",
+				text: e.label
+			})]
+		})
+	});
+}
+function Bt({ item: e }) {
+	let [t, n] = b(!1), r = Mt(e.label);
+	return /* @__PURE__ */ C(he, { children: [/* @__PURE__ */ S(zt, {
+		item: e,
+		onPreview: () => n(!0)
+	}), /* @__PURE__ */ S(le, {
+		title: "View Attachment",
+		content: /* @__PURE__ */ S(Rt, {
+			item: e,
+			kind: r
+		}),
+		isOpen: t,
+		onOpenChange: n,
+		...r === "image" ? {} : { primaryAction: {
+			label: "Download",
+			onPress: () => It(e.url, e.label)
+		} }
+	})] });
+}
+var Vt = ({ props: e }) => /* @__PURE__ */ S("div", {
+	className: Ct,
+	children: e.items.map((e, t) => /* @__PURE__ */ S(Bt, { item: e }, `${e.label}-${t}`))
+}), Ht = w.object({
+	title: w.string(),
+	identifier: w.string().optional(),
+	identifierHref: w.string().optional(),
+	meta: w.string().optional(),
+	callout: w.string().optional(),
+	calloutTone: w.enum(M).optional(),
+	calloutLabel: w.string().optional()
+}), Ut = {
+	props: w.object({ items: w.array(Ht) }),
+	slots: [],
+	description: "Flat list for timesheets and recent jobs. Each item has a required title, optional identifier link + meta on the left, and optional callout + calloutLabel on the right. For grouped procurement records with aligned columns, use ContextTabularList instead."
+}, Wt = "blgld0", Gt = "blgld1", Kt = "blgld2", qt = "blgld3", Jt = "blgld4", Yt = "blgld5", Xt = "blgld6", Zt = "blgld7";
+//#endregion
+//#region src/context/catalog/context-list.tsx
+function Qt({ item: e }) {
+	let t = e.calloutTone ? N(e.calloutTone) : void 0, n = e.identifier, r = e.callout != null || e.calloutLabel != null;
+	return /* @__PURE__ */ C("div", {
+		className: qt,
+		children: [/* @__PURE__ */ C("div", {
+			className: Jt,
+			children: [/* @__PURE__ */ C("div", {
+				className: Yt,
+				children: [
+					n && e.identifierHref ? /* @__PURE__ */ S(ue, {
+						href: e.identifierHref,
+						target: "_blank",
+						text: n
+					}) : n ? /* @__PURE__ */ S(h, {
+						variant: "body",
+						size: "compact",
+						text: n
+					}) : null,
+					n ? /* @__PURE__ */ S("span", {
+						"aria-hidden": "true",
+						className: Xt
+					}) : null,
+					/* @__PURE__ */ S(h, {
+						variant: "body",
+						size: "regular",
+						text: e.title
+					})
+				]
+			}), e.meta ? /* @__PURE__ */ S(h, {
+				variant: "body",
+				size: "fine",
+				text: e.meta,
+				className: Gt
+			}) : null]
+		}), r ? /* @__PURE__ */ C("div", {
+			className: Zt,
+			children: [e.callout ? /* @__PURE__ */ S(h, {
+				variant: "headline",
+				el: "h6",
+				size: "regular",
+				text: e.callout,
+				...t ? { style: { color: t } } : {}
+			}) : null, e.calloutLabel ? /* @__PURE__ */ S(h, {
+				variant: "eyebrow",
+				text: e.calloutLabel,
+				className: Gt
+			}) : null]
+		}) : null]
+	});
+}
+var $t = ({ props: e }) => /* @__PURE__ */ S("div", {
+	className: Wt,
+	children: e.items.map((e, t) => /* @__PURE__ */ S("div", {
+		className: Kt,
+		children: /* @__PURE__ */ S(Qt, { item: e })
+	}, e.identifier ?? e.title ?? t))
+}), en = w.object({
+	label: w.string(),
+	value: w.string(),
+	tone: w.enum(M).optional()
+}), tn = {
+	props: w.object({
+		items: w.array(en),
+		columns: w.enum(["3", "4"]).optional()
+	}),
+	slots: [],
+	description: "KPI grid with label and value pairs. Optional columns: 3 (default) or 4. Each item supports an optional tone (danger | warning | success | info | neutral) to color the value text."
+}, nn = j({
+	defaultClassName: "_16tl57e0",
+	variantClassNames: { columns: {
+		3: "_16tl57e1",
+		4: "_16tl57e2"
+	} },
+	defaultVariants: { columns: "3" },
+	compoundVariants: []
+}), rn = "_16tl57e3", an = "_16tl57e4", on = ({ props: e }) => /* @__PURE__ */ S("div", {
+	className: nn({ columns: e.columns === "4" ? "4" : "3" }),
+	children: e.items.map((e) => {
+		let t = e.tone ? N(e.tone) : void 0;
+		return /* @__PURE__ */ C("div", {
+			className: an,
+			children: [/* @__PURE__ */ S(h, {
+				variant: "eyebrow",
+				text: e.label.toUpperCase(),
+				className: rn
+			}), /* @__PURE__ */ S(h, {
+				variant: "headline",
+				el: "h6",
+				size: "regular",
+				text: e.value,
+				...t ? { style: { color: t } } : {}
+			})]
+		}, e.label);
+	})
+}), sn = "_2pn4ri0", cn = ({ summary: e }) => /* @__PURE__ */ S("div", {
+	className: sn,
+	"data-carto": "context-ai-summary",
+	children: /* @__PURE__ */ S(m, {
+		highlighted: !0,
+		padding: "snug",
+		role: "status",
+		style: { width: "100%" },
+		content: /* @__PURE__ */ S(h, {
+			variant: "body",
+			size: "regular",
+			text: e
+		})
+	})
+}), ln = "_4l9lye0", un = "_4l9lye1", dn = "_4l9lye2", fn = "_4l9lye3", P = "_4l9lye4", pn = w.object({
+	category: w.string().optional(),
+	body: w.string(),
+	author: w.string().optional(),
+	date: w.string().optional(),
+	truncate: w.boolean().optional()
+}), mn = {
+	props: w.object({
+		summary: w.string().optional(),
+		items: w.array(pn)
+	}),
+	slots: [],
+	description: "Notes & Summaries list. Optional summary renders an AI-highlighted box at the top. Each item shows an optional category eyebrow (e.g. 'JOB SUMMARY'), body text, and optional author + date at top-right. Set truncate: true on long items to clamp to ~3 lines with an inline More/Less expand."
+};
+//#endregion
+//#region src/context/catalog/context-note-list.tsx
+function hn({ item: e }) {
+	return /* @__PURE__ */ C("div", {
+		className: dn,
+		children: [e.category || e.author || e.date ? /* @__PURE__ */ C("div", {
+			className: fn,
+			children: [e.category ? /* @__PURE__ */ S(h, {
+				variant: "eyebrow",
+				text: e.category,
+				className: P
+			}) : /* @__PURE__ */ S("span", {}), e.author || e.date ? /* @__PURE__ */ S(h, {
+				variant: "eyebrow",
+				text: [e.author, e.date].filter(Boolean).join(" · "),
+				className: P
+			}) : null]
+		}) : null, e.truncate ? /* @__PURE__ */ S(te, {
+			rows: 3,
+			expandable: !0,
+			expandText: "More",
+			collapseText: "Less",
+			children: e.body
+		}) : /* @__PURE__ */ S(h, {
+			variant: "body",
+			size: "regular",
+			text: e.body
+		})]
+	});
+}
+var gn = ({ props: e }) => /* @__PURE__ */ C("div", {
+	className: ln,
+	children: [e.summary ? /* @__PURE__ */ S("div", {
+		className: un,
+		children: /* @__PURE__ */ S(cn, { summary: e.summary })
+	}) : null, e.items.map((e, t) => /* @__PURE__ */ S(hn, { item: e }, `${e.category ?? ""}-${t}`))]
+}), _n = {
+	props: w.object({ summary: w.string() }),
+	slots: [],
+	description: "AI-generated overview summary for the Context panel. Optional first child of ContextPanel. Renders as a plain section (not a card): Overview headline with sparkle icon and body text. Leaf node — no children."
+}, vn = "_1ysu3qn0", yn = "_1ysu3qn1", bn = ({ props: t }) => /* @__PURE__ */ C("section", {
+	className: vn,
+	children: [/* @__PURE__ */ C("div", {
+		className: yn,
+		children: [/* @__PURE__ */ S(h, {
+			variant: "headline",
+			el: "h2",
+			size: "substantial",
+			text: "Overview"
+		}), /* @__PURE__ */ S(e, {
+			size: "small",
+			type: "gradient"
+		})]
+	}), /* @__PURE__ */ S(h, {
+		variant: "body",
+		size: "regular",
+		text: t.summary
+	})]
+}), xn = {
+	props: w.object({}),
+	slots: ["default"],
+	description: "Root container for the Context panel. MUST be the spec root. Children MUST only be ContextOverview (optional, first) followed by one or more ContextCard components."
+}, F = "_19nljxi0", Sn = ({ children: e }) => /* @__PURE__ */ S("div", {
+	className: F,
+	children: g.toArray(e).filter(Boolean)
+}), Cn = w.object({
+	label: w.string(),
+	value: w.string()
+}), wn = w.object({
+	eyebrow: w.string().optional(),
+	identifier: w.string().optional(),
+	identifierHref: w.string().optional(),
+	fields: w.array(Cn)
+}), Tn = w.object({
+	label: w.string(),
+	items: w.array(wn)
+}), En = {
+	props: w.object({ groups: w.array(Tn) }),
+	slots: [],
+	description: "Grouped tabular list for procurement-style records. Each group has a vendor label and rows with an optional eyebrow + identifier in the first column and additional label/value field columns (e.g. DATE, AMOUNT). Use inside ContextCard for Procurement sections."
+}, Dn = "_5kl5rv0", On = "_5kl5rv1", kn = "_5kl5rv2", I = "_5kl5rv3", An = "_5kl5rv4", jn = "_5kl5rv5", Mn = "_5kl5rv6";
+//#endregion
+//#region src/context/catalog/context-tabular-list.tsx
+function Nn(e) {
+	let t = e + 1;
+	if (t <= 1) return "max-content";
+	let n = `minmax(${Ee.size[400]}, 1fr)`;
+	return Array(t).fill("max-content").join(` ${n} `);
+}
+function Pn(e) {
+	return e * 2 + 1;
+}
+function Fn({ item: e, gridRow: t }) {
+	let n = (e) => ({
+		style: {
+			gridColumn: Pn(e),
+			gridRow: t
+		},
+		className: Mn
+	});
+	return /* @__PURE__ */ C(he, { children: [/* @__PURE__ */ C("div", {
+		...n(0),
+		children: [e.eyebrow ? /* @__PURE__ */ S(h, {
+			variant: "eyebrow",
+			text: e.eyebrow,
+			className: I
+		}) : null, e.identifier && e.identifierHref ? /* @__PURE__ */ S(ue, {
+			href: e.identifierHref,
+			target: "_blank",
+			text: e.identifier
+		}) : e.identifier ? /* @__PURE__ */ S(h, {
+			variant: "body",
+			size: "compact",
+			text: e.identifier
+		}) : null]
+	}), e.fields.map((e, t) => /* @__PURE__ */ C("div", {
+		...n(t + 1),
+		children: [/* @__PURE__ */ S(h, {
+			variant: "eyebrow",
+			text: e.label,
+			className: I
+		}), /* @__PURE__ */ S(h, {
+			variant: "body",
+			size: "compact",
+			text: e.value
+		})]
+	}, e.label))] });
+}
+var In = ({ props: e }) => /* @__PURE__ */ S("div", {
+	className: Dn,
+	children: e.groups.map((e) => {
+		let t = e.items[0]?.fields.length ?? 0;
+		return /* @__PURE__ */ C("div", {
+			className: On,
+			children: [/* @__PURE__ */ S("div", {
+				className: kn,
+				children: /* @__PURE__ */ S(h, {
+					variant: "headline",
+					el: "h5",
+					size: "regular",
+					text: e.label
+				})
+			}), /* @__PURE__ */ S("div", {
+				className: An,
+				style: { gridTemplateColumns: Nn(t) },
+				children: e.items.map((e, t) => {
+					let n = t * 2 + 1;
+					return /* @__PURE__ */ C(pe, { children: [t > 0 ? /* @__PURE__ */ S("div", {
+						className: jn,
+						style: { gridRow: t * 2 }
+					}) : null, /* @__PURE__ */ S(Fn, {
+						item: e,
+						gridRow: n
+					})] }, e.identifier ?? e.eyebrow ?? t);
+				})
+			})]
+		}, e.label);
+	})
+}), L = {
+	ContextPanel: xn,
+	ContextOverview: _n,
+	ContextCard: ut
+}, R = {
+	ContextNoteList: mn,
+	ContextMetricGrid: tn,
+	ContextDataTable: gt,
+	ContextList: Ut,
+	ContextTabularList: En,
+	ContextFileList: St
+}, z = {
 	"atlas.submitUserAction": {
-		params: c.object({
-			data: c.record(c.string(), c.unknown()).optional(),
-			actionId: c.string().optional()
+		params: w.object({
+			data: w.record(w.string(), w.unknown()).optional(),
+			actionId: w.string().optional()
 		}),
 		description: "Submit form data. actionId overrides default \"form_submit\" identifier."
 	},
 	"atlas.navigate": {
-		params: c.object({ url: c.string() }),
+		params: w.object({ url: w.string() }),
 		description: "Navigate to a URL or internal route. External URLs (http/https) open in a new tab; internal route strings navigate within the app."
 	},
 	"atlas.toolCall": {
-		params: c.object({
-			tool: c.string(),
-			args: c.record(c.string(), c.unknown()).optional()
+		params: w.object({
+			tool: w.string(),
+			args: w.record(w.string(), w.unknown()).optional()
 		}),
 		description: "Invoke a tool on the active artifact panel app (an MCP-backed MFE). args is the tool argument payload; if omitted the current form state is sent."
 	}
-}, fe = {
+}, Ln = {
 	"atlas.submitUserAction": async (e) => {},
 	"atlas.navigate": async (e) => {},
 	"atlas.toolCall": async (e) => {}
-}, N = [
-	"chat",
-	"panel",
-	"app"
-], P = {
-	props: c.object({
-		title: c.string(),
-		status: c.enum([
+}, Rn = {
+	props: w.object({
+		title: w.string(),
+		status: w.enum([
 			"info",
 			"success",
 			"warning",
 			"danger"
 		]).optional(),
-		dismissible: c.boolean().optional()
+		dismissible: w.boolean().optional(),
+		aiMark: w.boolean().optional()
 	}),
 	slots: ["default"],
-	description: "Alert/notification banner. dismissible: true adds a close button that emits a \"close\" event."
-}, pe = ({ props: e, emit: t, children: n }) => /* @__PURE__ */ y(l, {
-	title: e.title,
-	status: e.status ?? "info",
-	...e.dismissible ? { onClose: () => t("close") } : {},
-	children: n
-});
-//#endregion
-//#region src/utils/defined-props.ts
-function F(e) {
-	let t = {};
-	for (let n of Object.keys(e)) {
-		let r = e[n];
-		r !== void 0 && (t[n] = r);
-	}
-	return t;
-}
-//#endregion
-//#region src/core/catalog/badge.catalog.ts
-var I = {
-	props: c.object({
-		content: c.string().optional(),
-		offset: c.object({
-			x: c.string().optional(),
-			y: c.string().optional()
-		}).optional()
-	}),
-	slots: ["default"],
-	description: "Unread notification count on a Button or Link. Wrap the interactive element as a child of Badge (the renderer adds position:relative). content: numerical count only (e.g. 3, 99+); omit for dot-only. offset: {x, y} CSS values to fine-tune position on non-square anchors like links."
-}, me = "_128xbc80", he = ({ props: e, children: t }) => {
-	let n = e.offset ? F({
-		x: e.offset.x,
-		y: e.offset.y
-	}) : void 0, r = n ? /* @__PURE__ */ y(u, {
-		offset: n,
-		children: e.content
-	}) : /* @__PURE__ */ y(u, { children: e.content });
-	return t ? /* @__PURE__ */ b("div", {
-		className: me,
-		children: [t, r]
-	}) : r;
-}, L = {
-	props: c.object({
-		data: c.array(c.object({
-			category: c.string(),
-			value: c.number()
+	events: ["close"],
+	description: "Inline notification banner with a required title. status: info (default) | success | warning | danger — danger for errors, warning for cautions, success for confirmations. Put the main message in the alert's children (rendered below the title). dismissible: true adds a close button that emits a \"close\" event."
+}, zn = {
+	props: w.object({
+		data: w.array(w.object({
+			category: w.string(),
+			value: w.number()
 		})),
-		orientation: c.enum(["vertical", "horizontal"]).optional(),
-		theme: c.enum([
+		orientation: w.enum(["vertical", "horizontal"]).optional(),
+		theme: w.enum([
 			"monochrome",
 			"categorical",
 			"semantic"
 		]).optional(),
-		height: c.number().optional(),
-		unit: c.string().optional()
+		height: w.number().optional(),
+		unit: w.string().optional()
 	}),
 	slots: [],
 	description: "Bar chart (vertical or horizontal) with Anvil2 theme. data: [{category, value}]. theme: monochrome (default, ≤4 vars), categorical (5-9 distinct), semantic (success/neutral/warning/danger order). unit: tooltip suffix."
-}, R = "zf6dad0";
-//#endregion
-//#region src/core/catalog/chart-utils.ts
-function z(e, t = "monochrome") {
-	let n = {
-		monochrome: D,
-		categorical: ue,
-		semantic: de
-	}[t] ?? D;
-	e.setThemes([le.new(e), n.new(e)]);
-}
-//#endregion
-//#region src/core/catalog/bar-chart.tsx
-var ge = ({ props: e }) => {
-	let t = E(null);
-	return w(() => {
-		let n = t.current;
-		if (!n) return;
-		let r, i = () => {
-			r && r.dispose(), r = x.Root.new(n), z(r, e.theme);
-			let t = r.container.children.push(S.XYChart.new(r, { paddingLeft: 0 }));
-			if (e.orientation === "horizontal") {
-				let n = t.yAxes.push(S.CategoryAxis.new(r, {
-					categoryField: "category",
-					renderer: S.AxisRendererY.new(r, { minGridDistance: 20 })
-				})), i = t.xAxes.push(S.ValueAxis.new(r, { renderer: S.AxisRendererX.new(r, {}) })), a = t.series.push(S.ColumnSeries.new(r, {
-					xAxis: i,
-					yAxis: n,
-					valueXField: "value",
-					categoryYField: "category"
-				}));
-				a.columns.template.setAll({ tooltipText: `{categoryY}: ${e.unit ?? ""}{valueX}` }), n.data.setAll(e.data), a.data.setAll(e.data);
-			} else {
-				let n = t.xAxes.push(S.CategoryAxis.new(r, {
-					categoryField: "category",
-					renderer: S.AxisRendererX.new(r, { minGridDistance: 30 })
-				})), i = t.yAxes.push(S.ValueAxis.new(r, { renderer: S.AxisRendererY.new(r, {}) })), a = t.series.push(S.ColumnSeries.new(r, {
-					xAxis: n,
-					yAxis: i,
-					valueYField: "value",
-					categoryXField: "category"
-				}));
-				a.columns.template.setAll({ tooltipText: `{categoryX}: ${e.unit ?? ""}{valueY}` }), n.data.setAll(e.data), a.data.setAll(e.data);
-			}
-		}, a = new ResizeObserver((e) => {
-			(e[0]?.contentRect.width ?? 0) > 0 && !r && i();
-		});
-		return a.observe(n), n.offsetWidth > 0 && i(), () => {
-			a.disconnect(), r?.dispose();
-		};
-	}, []), /* @__PURE__ */ y("div", {
-		ref: t,
-		className: R,
-		style: { height: e.height ?? 300 }
-	});
-}, B = {
-	props: c.object({
-		label: c.string(),
-		appearance: c.enum([
+}, Bn = {
+	props: w.object({
+		label: w.string(),
+		appearance: w.enum([
 			"primary",
 			"secondary",
-			"ghost"
+			"ghost",
+			"danger"
 		]).optional(),
-		size: c.enum([
+		size: w.enum([
 			"xsmall",
 			"small",
 			"medium",
 			"large"
 		]).optional(),
-		loading: c.boolean().optional(),
-		disabled: c.boolean().optional()
+		loading: w.boolean().optional(),
+		disabled: w.boolean().optional(),
+		badge: w.string().optional()
 	}),
 	slots: [],
-	description: "Clickable button. Every button automatically submits form data when pressed — the element key is used as the actionId to identify which button was clicked. loading: true shows a spinner. disabled: true prevents interaction. size: xsmall | small | medium (default) | large."
-}, _e = ({ props: e, emit: t }) => /* @__PURE__ */ y(d, {
-	appearance: e.appearance ?? "secondary",
-	...F({
-		size: e.size,
-		loading: e.loading,
-		disabled: e.disabled
-	}),
-	onClick: () => t("press"),
-	children: e.label
-}), V = {
-	props: c.object({
-		background: c.enum(["strong", "stronger"]).optional(),
-		padding: c.enum([
+	events: ["press"],
+	description: "Clickable button. Emits a \"press\" event when clicked; inside a form the host treats press as a submit and uses the element key as the actionId, so no explicit on.press wiring is needed for form submits. appearance: primary | secondary (default) | ghost | danger (destructive actions like delete/cancel). size: xsmall | small | medium (default) | large. loading: true shows a spinner and blocks interaction. disabled: true prevents interaction. badge: optional notification count shown as a superscript (e.g. \"3\", \"99+\"); use an empty string for a dot-only indicator."
+}, Vn = {
+	props: w.object({
+		title: w.string().optional(),
+		description: w.string().optional(),
+		background: w.enum(["strong", "stronger"]).optional(),
+		padding: w.enum([
 			"0",
 			"xsmall",
 			"small",
@@ -206,39 +858,35 @@ var ge = ({ props: e }) => {
 		]).optional()
 	}),
 	slots: ["default"],
-	description: "White surface with padding; groups related content. background: strong | stronger for elevated surfaces. padding: 0 | xsmall | small | medium (default) | large."
-}, ve = ({ props: e, children: t }) => /* @__PURE__ */ y(f, {
-	...F({
-		background: e.background,
-		padding: e.padding
-	}),
-	children: t
-}), H = {
-	props: c.object({
-		label: c.string(),
-		checked: c.boolean().optional(),
-		disabled: c.boolean().optional()
+	description: "White surface that groups a logical section of related content. title: optional headline rendered at the top of the card. description: optional subdued line below the title. Children render below the header and are stacked vertically with consistent spacing — you do not need to wrap them in a Flex. Prefer the built-in title/description over standalone Text children for the heading. background: strong | stronger for nested/elevated surfaces. padding: 0 | xsmall | small | medium (default) | large. Do not nest a Card inside another Card."
+}, Hn = {
+	props: w.object({
+		label: w.string(),
+		checked: w.boolean().optional(),
+		disabled: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Checkbox input with label. Use $bindState on checked to track state."
-}, ye = {
-	props: c.object({
-		label: c.string(),
-		size: c.enum(["small", "medium"]).optional(),
-		color: c.string().optional(),
-		icon: c.enum([
+	events: ["change"],
+	description: "Checkbox for selecting zero or more independent options that are submitted with a form (one Checkbox per option). For a single on/off setting with immediate effect prefer Switch. Bind state with $bindState on checked; emits a \"change\" event when toggled. disabled: true prevents toggling."
+}, Un = {
+	props: w.object({
+		label: w.string(),
+		size: w.enum(["small", "medium"]).optional(),
+		color: w.string().optional(),
+		icon: w.enum([
 			"check-circle",
 			"in-progress",
 			"radio-button-unchecked"
 		]).optional(),
-		removable: c.boolean().optional()
+		removable: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Inline label pill for metadata, tags, or categories — use for job statuses, not notification counts (use Badge for those). size: small | medium (default). color: any CSS color. icon: optional leading icon. removable: true adds a close button (not available for size=small)."
-}, U = {
-	props: c.object({
-		vertical: c.boolean().optional(),
-		spacing: c.enum([
+	events: ["close"],
+	description: "Inline label pill for metadata, tags, or categories — use for job statuses, not notification counts (use a Button/Link badge prop for those). size: small | medium (default). color: any CSS color. icon: optional leading status icon. removable: true adds a close button that emits a \"close\" event (ignored when size=small)."
+}, Wn = {
+	props: w.object({
+		vertical: w.boolean().optional(),
+		spacing: w.enum([
 			"0",
 			"half",
 			"1",
@@ -250,50 +898,54 @@ var ge = ({ props: e }) => {
 			"8",
 			"12"
 		]).optional(),
-		alignContent: c.enum([
+		alignContent: w.enum([
 			"start",
 			"center",
 			"end"
 		]).optional()
 	}),
 	slots: [],
-	description: "Divider between sections. vertical: true for vertical separator. spacing: gap around the divider. alignContent: alignment of content within the divider."
-}, W = {
-	props: c.object({
-		data: c.array(c.object({
-			category: c.string(),
-			value: c.number()
+	description: "Horizontal (default) or vertical rule that separates content sections. vertical: true for a vertical separator between side-by-side content. spacing (space around the divider, ~4px per step): 0 (default) | half | 1–6 | 8 | 12. alignContent: alignment of any divider content (start | center | end). Place between logical sections — not as a top/bottom border of a container."
+}, Gn = {
+	props: w.object({
+		data: w.array(w.object({
+			category: w.string(),
+			value: w.number()
 		})),
-		theme: c.enum([
+		theme: w.enum([
 			"monochrome",
 			"categorical",
 			"semantic"
 		]).optional(),
-		showLegend: c.boolean().optional(),
-		height: c.number().optional(),
-		unit: c.string().optional()
+		showLegend: w.boolean().optional(),
+		height: w.number().optional(),
+		unit: w.string().optional()
 	}),
 	slots: [],
 	description: "Donut chart with optional legend and Anvil2 theme. data: [{category, value}]. theme: monochrome (≤4 vars), categorical (5-9 distinct), semantic (status values)."
-}, G = {
-	props: c.object({
-		direction: c.enum(["row", "column"]).optional(),
-		gap: c.enum([
+}, Kn = {
+	props: w.object({
+		direction: w.enum(["row", "column"]).optional(),
+		gap: w.enum([
+			"0",
+			"half",
 			"1",
 			"2",
 			"3",
 			"4",
 			"5",
-			"6"
+			"6",
+			"8",
+			"12"
 		]).optional(),
-		alignItems: c.enum([
+		alignItems: w.enum([
 			"center",
 			"flex-start",
 			"flex-end",
 			"stretch",
 			"baseline"
 		]).optional(),
-		justifyContent: c.enum([
+		justifyContent: w.enum([
 			"center",
 			"flex-start",
 			"flex-end",
@@ -301,54 +953,67 @@ var ge = ({ props: e }) => {
 			"space-around",
 			"space-evenly"
 		]).optional(),
-		wrap: c.enum([
+		alignSelf: w.enum([
+			"auto",
+			"center",
+			"flex-start",
+			"flex-end",
+			"stretch",
+			"baseline"
+		]).optional(),
+		wrap: w.enum([
 			"wrap",
 			"nowrap",
 			"wrap-reverse"
 		]).optional(),
-		grow: c.number().optional(),
-		shrink: c.number().optional(),
-		inline: c.boolean().optional()
+		grow: w.number().optional(),
+		shrink: w.number().optional(),
+		basis: w.string().optional(),
+		inline: w.boolean().optional()
 	}),
 	slots: ["default"],
-	description: "Flex layout container. gap: 1=4px 2=8px 3=12px 4=16px 5=20px 6=24px. grow: 1=fill available width. alignItems: vertical alignment. justifyContent: horizontal distribution."
-}, K = {
-	props: c.object({
-		templateColumns: c.string().optional(),
-		gap: c.enum([
+	description: "Flex layout container. direction: row (default) | column — always set column when stacking children vertically. gap (spacing token, ~4px per step): half=2px 1=4px 2=8px 3=12px 4=16px 5=20px 6=24px 8=32px 12=48px. alignItems: cross-axis alignment of children. justifyContent: main-axis distribution. When this Flex is itself a child of another Flex, use grow (1=fill available space), shrink, basis (CSS flex-basis e.g. \"200px\"), and alignSelf to control how it flexes."
+}, B = {
+	props: w.object({
+		templateColumns: w.string().optional(),
+		gap: w.enum([
+			"0",
+			"half",
 			"1",
 			"2",
 			"3",
 			"4",
 			"5",
-			"6"
+			"6",
+			"8",
+			"12"
 		]).optional(),
-		bordered: c.boolean().optional()
+		bordered: w.boolean().optional()
 	}),
 	slots: ["default"],
-	description: "CSS Grid layout. templateColumns: CSS grid-template-columns value — \"repeat(3, 1fr)\" for equal columns, \"200px 1fr\" for fixed+flex two-column (e.g. key-value tables), \"1fr 1fr 80px\" for multi-column tables. Children flow into grid cells left-to-right, top-to-bottom. gap: 1=4px … 6=24px. bordered: true renders a bordered table with row separators and cell padding — use for key-value and data tables."
-}, q = {
-	props: c.object({
-		name: c.enum([
+	description: "CSS Grid layout. templateColumns: CSS grid-template-columns value — \"repeat(3, 1fr)\" for equal columns, \"200px 1fr\" for fixed+flex two-column (e.g. key-value tables), \"1fr 1fr 80px\" for multi-column tables. Children flow into grid cells left-to-right, top-to-bottom. gap (spacing token, ~4px per step): 1=4px 2=8px … 6=24px 8=32px 12=48px (default 2). bordered: true renders a bordered table with row separators and cell padding — use for key-value and data tables."
+}, qn = {
+	props: w.object({
+		name: w.enum([
 			"check-circle",
 			"in-progress",
 			"radio-button-unchecked"
 		]),
-		size: c.enum([
+		size: w.enum([
 			"small",
 			"medium",
 			"large",
 			"xlarge"
 		]).optional(),
-		color: c.string().optional()
+		color: w.string().optional()
 	}),
 	slots: [],
-	description: "Anvil2 icon. name: check-circle=completed checkmark, in-progress=spinning partial circle, radio-button-unchecked=empty circle (pending)"
-}, J = {
-	props: c.object({
-		label: c.string(),
-		placeholder: c.string().optional(),
-		type: c.enum([
+	description: "Small status icon. name (only these three are available): check-circle=completed/success checkmark, in-progress=partial circle (active/working), radio-button-unchecked=empty circle (pending/not started). size: small | medium (default) | large | xlarge. color: any CSS color (defaults to the current text color). Commonly paired with status Text in lists and checklists."
+}, Jn = {
+	props: w.object({
+		label: w.string(),
+		placeholder: w.string().optional(),
+		type: w.enum([
 			"text",
 			"password",
 			"email",
@@ -356,187 +1021,559 @@ var ge = ({ props: e }) => {
 			"url",
 			"number"
 		]).optional(),
-		value: c.string().optional(),
-		disabled: c.boolean().optional()
+		value: w.string().optional(),
+		disabled: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Free-text input field for user-typed values (names, notes, numbers, etc). type: text (default), password (masked), email, tel (phone), url, number. Use $bindState on value to bind to state. Prefer this over Select when the value is not from a fixed list."
-}, Y = {
-	props: c.object({
-		data: c.array(c.record(c.string(), c.union([c.string(), c.number()]))),
-		series: c.array(c.string()).optional(),
-		theme: c.enum([
+	events: ["change"],
+	description: "Free-text input field for user-typed values (names, notes, numbers, etc). type: text (default), password (masked), email, tel (phone), url, number. Bind value with $bindState so the typed value is captured in state; emits a \"change\" event on every keystroke. Prefer this over Listbox when the value is not from a fixed list. disabled: true prevents editing."
+}, Yn = {
+	props: w.object({
+		data: w.array(w.record(w.string(), w.union([w.string(), w.number()]))),
+		series: w.array(w.string()).optional(),
+		theme: w.enum([
 			"monochrome",
 			"categorical",
 			"semantic"
 		]).optional(),
-		showLegend: c.boolean().optional(),
-		showDots: c.boolean().optional(),
-		height: c.number().optional(),
-		unit: c.string().optional()
+		showLegend: w.boolean().optional(),
+		showDots: w.boolean().optional(),
+		height: w.number().optional(),
+		unit: w.string().optional()
 	}),
 	slots: [],
 	description: "Line chart for tracking trends over time with optional multiple series. data: array of objects with a \"category\" key (x-axis label) and one numeric key per series (e.g. [{category: \"Jan\", revenue: 100, cost: 60}]). series: explicit list of series keys to plot (inferred from data keys if omitted, max 6). theme: monochrome (1-2 series), categorical (3-6 distinct). showLegend: true when multiple series (default true for 2+ series). showDots: true adds data-point markers (default true). unit: tooltip value suffix."
-}, X = {
-	props: c.object({
-		label: c.string(),
-		href: c.string(),
-		appearance: c.enum(["primary", "secondary"]).optional(),
-		target: c.enum(["_blank", "_self"]).optional(),
-		ghost: c.boolean().optional()
+}, Xn = {
+	props: w.object({
+		label: w.string(),
+		href: w.string(),
+		appearance: w.enum(["primary", "secondary"]).optional(),
+		target: w.enum(["_blank", "_self"]).optional(),
+		ghost: w.boolean().optional(),
+		badge: w.string().optional()
 	}),
 	slots: [],
-	description: "Inline navigation link. href: destination URL. appearance: primary (default) | secondary. target: _blank opens in new tab (shows external-link icon). ghost: quieter styling (primary only)."
-}, Z = {
-	props: c.object({
-		label: c.string(),
-		options: c.array(c.object({
-			value: c.string(),
-			label: c.string()
+	events: ["press"],
+	description: "Inline navigation link (renders an <a>). Emits a \"press\" event when clicked — handle navigation in on.press; href and target are inputs for the host/router rather than native browser navigation. href: destination URL for the host/router. appearance: primary (default) | secondary. target: _blank marks the link as external (shows external-link icon) and lets the host open a new tab if desired. ghost: quieter styling (primary only). badge: optional notification count shown as a superscript (e.g. \"5\"); use an empty string for a dot-only indicator."
+}, Zn = {
+	props: w.object({
+		label: w.string(),
+		options: w.array(w.object({
+			value: w.string(),
+			label: w.string()
 		})),
-		value: c.string().optional(),
-		disabled: c.boolean().optional()
+		value: w.string().optional(),
+		disabled: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Listbox for choosing from a fixed list of known options. Use only when options are predefined. For free-text user input use Input instead."
-}, Q = {
-	props: c.object({
-		label: c.string(),
-		value: c.number().min(0).max(100).optional(),
-		description: c.string().optional(),
-		indeterminate: c.boolean().optional()
+	events: ["change"],
+	description: "Single-select dropdown for choosing one value from a fixed list of known options. options: [{ value, label }] — value is stored in state, label is shown. Bind the selection with $bindState on value; emits a \"change\" event on selection. Use only when options are predefined; for free-text user input use Input, and for 2–7 visible mutually-exclusive choices prefer RadioGroup. disabled: true prevents selection."
+}, Qn = {
+	props: w.object({
+		label: w.string(),
+		value: w.number().min(0).max(100).optional(),
+		description: w.string().optional(),
+		indeterminate: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Progress bar showing task completion. value: 0–100 (percentage). Omit value and set indeterminate=true for unknown progress."
-}, be = {
-	props: c.object({
-		label: c.string(),
-		options: c.array(c.object({
-			value: c.string(),
-			label: c.string()
+	description: "Horizontal progress bar showing task completion. label is required (the accessible name for the bar). value: 0–100 percentage filled. Omit value and set indeterminate=true when progress cannot be measured (do not set both). description: optional helper text shown below the bar."
+}, $n = {
+	props: w.object({
+		label: w.string(),
+		options: w.array(w.object({
+			value: w.string(),
+			label: w.string()
 		})),
-		value: c.string().optional(),
-		disabled: c.boolean().optional()
+		value: w.string().optional(),
+		disabled: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Group of radio buttons for single selection. Use $bindState on value to capture selection."
-}, xe = {
-	props: c.object({
-		label: c.string(),
-		checked: c.boolean().optional(),
-		disabled: c.boolean().optional()
+	events: ["change"],
+	description: "Group of radio buttons for picking one option from 2–7 visible mutually-exclusive choices. options: [{ value, label }]. Bind the selection with $bindState on value; emits a \"change\" event on selection. For longer option lists use Listbox. disabled: true prevents selection."
+}, er = {
+	props: w.object({
+		label: w.string(),
+		checked: w.boolean().optional(),
+		disabled: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Toggle switch for binary on/off settings. Prefer over Checkbox for enabling/disabling features. Use $bindState on checked to track state."
-}, Se = {
-	props: c.object({
-		content: c.string(),
-		variant: c.enum([
+	events: ["change"],
+	description: "Toggle switch for a single binary on/off setting with immediate effect (no form submit). Prefer over Checkbox for enabling/disabling features. Bind state with $bindState on checked; emits a \"change\" event when toggled. disabled: true prevents toggling."
+}, tr = {
+	props: w.object({
+		content: w.string(),
+		variant: w.enum([
 			"headline",
 			"body",
 			"eyebrow"
 		]).optional(),
-		size: c.enum([
+		size: w.enum([
 			"small",
 			"medium",
 			"large",
 			"xlarge"
 		]).optional(),
-		subdued: c.boolean().optional(),
-		el: c.enum([
-			"h1",
-			"h2",
-			"h3",
-			"h4",
-			"h5",
-			"h6"
-		]).optional()
+		subdued: w.boolean().optional()
+	}),
+	slots: [],
+	description: "Display text. variant: headline=bold title, eyebrow=small uppercase label, body=default (default variant). size: small | medium (default) | large | xlarge — applies to headline and body only (ignored for eyebrow). subdued: deemphasized secondary text (body only). Use eyebrow+headline pairs for KPI/stat labels above values."
+}, nr = {
+	props: w.object({
+		label: w.string(),
+		placeholder: w.string().optional(),
+		description: w.string().optional(),
+		moreInfo: w.string().optional(),
+		value: w.string().optional(),
+		rows: w.number().optional(),
+		disabled: w.boolean().optional()
 	}),
 	slots: [],
-	description: "Display text. variant: headline=bold title, eyebrow=small label, body=default. size: small/medium/large/xlarge (headline and body only). subdued: deemphasized body text. el: heading element for variant=headline (default h3)."
-}, Ce = {
-	props: c.object({
-		label: c.string(),
-		placeholder: c.string().optional(),
-		description: c.string().optional(),
-		moreInfo: c.string().optional(),
-		value: c.string().optional(),
-		rows: c.number().optional(),
-		disabled: c.boolean().optional()
+	events: ["change"],
+	description: "Multi-line free-text input for long values (notes, descriptions, email body). Bind value with $bindState; emits a \"change\" event on every keystroke. rows: visible row count (default 3). description: helper text below the field. moreInfo: tooltip text on the label. disabled: true prevents editing."
+}, V = {
+	Text: tr,
+	Card: Vn,
+	Flex: Kn,
+	Grid: B,
+	Alert: Rn,
+	Divider: Wn,
+	Icon: qn,
+	Chip: Un,
+	Link: Xn,
+	ProgressBar: Qn,
+	BarChart: zn,
+	DonutChart: Gn,
+	LineChart: Yn,
+	Button: Bn,
+	Checkbox: Hn,
+	Input: Jn,
+	Textarea: nr,
+	Listbox: Zn,
+	RadioGroup: $n,
+	Switch: er
+};
+//#endregion
+//#region src/scoped-catalog.ts
+function H(e = {}) {
+	let { core: t = "all", overrides: n = {}, components: r = {} } = e, i = {
+		...t === "all" ? { ...V } : Object.fromEntries(t.map((e) => {
+			let t = V[e];
+			if (!t) throw Error(`Unknown core component: ${String(e)}`);
+			return [e, t];
+		})),
+		...r
+	};
+	for (let [e, t] of Object.entries(n)) {
+		let n = i[e];
+		if (!n || !t) continue;
+		let r = t.description ?? (t.append ? `${n.description} ${t.append}` : n.description);
+		i[e] = {
+			...n,
+			description: r
+		};
+	}
+	return i;
+}
+function rr(e) {
+	return e;
+}
+function ir(e) {
+	let t = H({
+		core: e.core ?? "all",
+		...e.overrides ? { overrides: e.overrides } : {},
+		...e.components ? { components: e.components } : {}
+	}), n = Object.fromEntries(Object.entries(e.actions ?? {}).map(([t, n]) => [`${e.prefix}.${t}`, n])), r = T(D, {
+		components: t,
+		actions: {
+			...z,
+			...n
+		}
+	});
+	return {
+		prefix: e.prefix,
+		catalog: r,
+		prompt(t) {
+			let n = [
+				r.prompt(),
+				"\n",
+				t
+			];
+			return e.rules && n.push("\n", e.rules), n.join("");
+		},
+		jsonSchema() {
+			return r.jsonSchema();
+		}
+	};
+}
+var ar = H({
+	core: [
+		"Text",
+		"Chip",
+		"Link",
+		"Alert"
+	],
+	overrides: { Link: { append: "In a context panel, links appear inside content primitives (ContextList, ContextTabularList identifier links, ContextNoteList, etc.); use a standalone Link only for inline references within rich text." } },
+	components: {
+		...L,
+		...R
+	}
+}), or = T(D, {
+	components: ar,
+	actions: z
+}), U = [
+	{
+		name: "ContextPanel",
+		catalog: L.ContextPanel,
+		renderer: Sn,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextOverview",
+		catalog: L.ContextOverview,
+		renderer: bn,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextCard",
+		catalog: L.ContextCard,
+		renderer: dt,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextNoteList",
+		catalog: R.ContextNoteList,
+		renderer: gn,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextMetricGrid",
+		catalog: R.ContextMetricGrid,
+		renderer: on,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextDataTable",
+		catalog: R.ContextDataTable,
+		renderer: bt,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextList",
+		catalog: R.ContextList,
+		renderer: $t,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextTabularList",
+		catalog: R.ContextTabularList,
+		renderer: In,
+		renderers: ["context"]
+	},
+	{
+		name: "ContextFileList",
+		catalog: R.ContextFileList,
+		renderer: Vt,
+		renderers: ["context"]
+	}
+];
+Object.fromEntries(U.filter(({ name: e }) => e in L).map(({ name: e, renderer: t }) => [e, t])), Object.fromEntries(U.filter(({ name: e }) => e in R).map(({ name: e, renderer: t }) => [e, t]));
+//#endregion
+//#region src/context/constants.ts
+var sr = [
+	"ContextPanel",
+	"ContextOverview",
+	"ContextCard"
+], cr = ["ContextOverview", "ContextCard"];
+function lr(e) {
+	return sr.includes(e);
+}
+function ur(e) {
+	return cr.includes(e);
+}
+//#endregion
+//#region src/context/validate-context-spec.ts
+function W(e, t) {
+	return e.elements[t];
+}
+function dr(e, t, n = /* @__PURE__ */ new Set()) {
+	let r = W(e, t);
+	if (!r || n.has(t)) return n;
+	n.add(t);
+	for (let t of r.children ?? []) dr(e, t, n);
+	return n;
+}
+function G(e) {
+	let t = [], n = e.root, r = W(e, n);
+	if (!r) return t.push({
+		path: "/root",
+		message: "Root element is missing from elements map."
+	}), t;
+	if (r.type !== "ContextPanel") return t.push({
+		path: `/elements/${n}`,
+		message: `Root must be ContextPanel, got "${r.type}".`
+	}), t;
+	let i = 0;
+	for (let n of r.children ?? []) {
+		let r = W(e, n);
+		if (!r) {
+			t.push({
+				path: `/elements/${n}`,
+				message: `Child "${n}" referenced by ContextPanel is missing.`
+			});
+			continue;
+		}
+		if (!ur(r.type)) {
+			t.push({
+				path: `/elements/${n}`,
+				message: `Direct child of ContextPanel must be ContextOverview or ContextCard — got "${r.type}".`
+			});
+			continue;
+		}
+		r.type === "ContextOverview" && (i += 1, i > 1 && t.push({
+			path: `/elements/${n}`,
+			message: "ContextOverview may appear at most once in ContextPanel."
+		}));
+		for (let r of dr(e, n)) {
+			if (r === n) continue;
+			let i = W(e, r);
+			i && lr(i.type) && t.push({
+				path: `/elements/${r}`,
+				message: `Shell component "${i.type}" cannot be nested inside a card.`
+			});
+		}
+	}
+	return t;
+}
+function K(e) {
+	return e.map((e) => `${(e.severity ?? "error").toUpperCase()} ${e.path}: ${e.message}`).join("\n");
+}
+//#endregion
+//#region src/context/validate-context-spec-deep.ts
+function q(e, t, n, r) {
+	e.push({
+		path: t,
+		message: n,
+		severity: r
+	});
+}
+function fr(e, t) {
+	return t.length === 0 ? e : `${e}/${t.map((e) => typeof e == "number" ? `[${e}]` : `.${String(e)}`).join("").replace(/^\./, "")}`;
+}
+function pr(e) {
+	return ar[e];
+}
+function mr(e) {
+	return (e?.slots?.length ?? 0) === 0;
+}
+function hr(e, t) {
+	for (let [n, r] of Object.entries(e.elements)) r && r.type === "ContextCard" && r.props.defaultExpanded === !1 && q(t, `/elements/${n}/props/defaultExpanded`, "defaultExpanded: false shows only the card header until the user expands the card.", "warn");
+}
+function gr(e) {
+	let t = [];
+	for (let n of G(e)) q(t, n.path, n.message, "error");
+	let n = De(e);
+	if (!n.valid) for (let e of n.issues) q(t, e.elementKey ? `/elements/${e.elementKey}` : "/", e.message, e.severity === "warning" ? "warn" : "error");
+	let r = or.validate(e);
+	if (!r.success && r.error) for (let e of r.error.issues) {
+		let n = e.path.length > 0 ? `/${e.path.join("/")}` : "/";
+		n.endsWith("/visible") || n.endsWith("/children") && e.message.includes("expected array, received undefined") || q(t, n, e.message, "error");
+	}
+	for (let [n, r] of Object.entries(e.elements)) {
+		if (!r) continue;
+		let e = pr(r.type);
+		if (!e) {
+			q(t, `/elements/${n}`, `Unknown component type "${r.type}" for context catalog.`, "error");
+			continue;
+		}
+		if (e.props) {
+			let i = e.props.safeParse(r.props ?? {});
+			if (!i.success) for (let e of i.error.issues) q(t, fr(`/elements/${n}/props`, e.path), e.message, "error");
+		}
+		let i = r.children, a = mr(e);
+		i === void 0 && a && q(t, `/elements/${n}/children`, `Leaf element "${r.type}" should include "children": [].`, "warn"), a && (i?.length ?? 0) > 0 && q(t, `/elements/${n}/children`, `Leaf component "${r.type}" must not have children.`, "error");
+	}
+	return hr(e, t), t;
+}
+function _r(e) {
+	let t = [], n = structuredClone(e);
+	for (let [e, r] of Object.entries(n.elements)) {
+		if (!r) continue;
+		let n = mr(pr(r.type));
+		r.children === void 0 && n && (r.children = [], t.push(`Added children: [] to leaf element "${e}".`)), n && r.children && r.children.length > 0 && (r.children = [], t.push(`Removed illegal children from leaf element "${e}".`));
+	}
+	return {
+		spec: n,
+		fixes: t
+	};
+}
+function vr(e) {
+	return e.some((e) => e.severity !== "warn");
+}
+function yr(e) {
+	return K(gr(e));
+}
+//#endregion
+//#region src/core/catalog/alert.tsx
+var br = ({ props: e, emit: n, children: r }) => /* @__PURE__ */ S(t, {
+	title: e.title,
+	status: e.status ?? "info",
+	...e.aiMark ? { aiMark: !0 } : {},
+	...e.dismissible ? { onClose: () => n("close") } : {},
+	children: r
+}), J = "zf6dad0";
+//#endregion
+//#region src/core/catalog/chart-utils.ts
+function Y(e, t = "monochrome") {
+	let n = {
+		monochrome: Pe,
+		categorical: Ne,
+		semantic: Fe
+	}[t] ?? Pe;
+	e.setThemes([Me.new(e), n.new(e)]);
+}
+//#endregion
+//#region src/core/catalog/bar-chart.tsx
+var xr = ({ props: e }) => {
+	let t = y(null);
+	return _(() => {
+		let n = t.current;
+		if (!n) return;
+		let r, i = () => {
+			r && r.dispose(), r = k.Root.new(n), Y(r, e.theme);
+			let t = r.container.children.push(A.XYChart.new(r, { paddingLeft: 0 }));
+			if (e.orientation === "horizontal") {
+				let n = t.yAxes.push(A.CategoryAxis.new(r, {
+					categoryField: "category",
+					renderer: A.AxisRendererY.new(r, { minGridDistance: 20 })
+				})), i = t.xAxes.push(A.ValueAxis.new(r, { renderer: A.AxisRendererX.new(r, {}) })), a = t.series.push(A.ColumnSeries.new(r, {
+					xAxis: i,
+					yAxis: n,
+					valueXField: "value",
+					categoryYField: "category"
+				}));
+				a.columns.template.setAll({ tooltipText: `{categoryY}: ${e.unit ?? ""}{valueX}` }), n.data.setAll(e.data), a.data.setAll(e.data);
+			} else {
+				let n = t.xAxes.push(A.CategoryAxis.new(r, {
+					categoryField: "category",
+					renderer: A.AxisRendererX.new(r, { minGridDistance: 30 })
+				})), i = t.yAxes.push(A.ValueAxis.new(r, { renderer: A.AxisRendererY.new(r, {}) })), a = t.series.push(A.ColumnSeries.new(r, {
+					xAxis: n,
+					yAxis: i,
+					valueYField: "value",
+					categoryXField: "category"
+				}));
+				a.columns.template.setAll({ tooltipText: `{categoryX}: ${e.unit ?? ""}{valueY}` }), n.data.setAll(e.data), a.data.setAll(e.data);
+			}
+		}, a = new ResizeObserver((e) => {
+			(e[0]?.contentRect.width ?? 0) > 0 && !r && i();
+		});
+		return a.observe(n), n.offsetWidth > 0 && i(), () => {
+			a.disconnect(), r?.dispose();
+		};
+	}, []), /* @__PURE__ */ S("div", {
+		ref: t,
+		className: J,
+		style: { height: e.height ?? 300 }
+	});
+};
+//#endregion
+//#region src/utils/defined-props.ts
+function X(e) {
+	let t = {};
+	for (let n of Object.keys(e)) {
+		let r = e[n];
+		r !== void 0 && (t[n] = r);
+	}
+	return t;
+}
+//#endregion
+//#region src/core/catalog/button.tsx
+var Sr = ({ props: e, emit: t }) => /* @__PURE__ */ C(r, {
+	appearance: e.appearance ?? "secondary",
+	...X({
+		size: e.size,
+		loading: e.loading,
+		disabled: e.disabled
 	}),
-	slots: [],
-	description: "Multi-line free-text input for long values (notes, descriptions, email body). Use $bindState on value to bind to state. rows: visible row count (default 3)."
-}, we = {
-	Text: Se,
-	Card: V,
-	Flex: G,
-	Grid: K,
-	Alert: P,
-	Divider: U,
-	Icon: q,
-	Badge: I,
-	Chip: ye,
-	Link: X,
-	ProgressBar: Q,
-	BarChart: L,
-	DonutChart: W,
-	LineChart: Y,
-	Button: B,
-	Checkbox: H,
-	Input: J,
-	Textarea: Ce,
-	Listbox: Z,
-	RadioGroup: be,
-	Switch: xe
-}, Te = e(s, {
-	components: we,
-	actions: M
-}), Ee = ({ props: e, bindings: n, emit: r }) => {
-	let i = n?.checked, { state: a, set: s } = o(), c = i ? t(a, i) : void 0, l = i ? c ?? e.checked ?? !1 : e.checked ?? !1;
-	return /* @__PURE__ */ y(ee, {
+	onClick: () => t("press"),
+	children: [e.label, e.badge === void 0 ? null : /* @__PURE__ */ S(n, {
+		"aria-label": e.badge ? `${e.badge} unread` : "unread",
+		children: e.badge
+	})]
+}), Cr = ({ props: e, children: t }) => {
+	let n = e.title !== void 0 || e.description !== void 0;
+	return /* @__PURE__ */ C(i, {
+		flexDirection: "column",
+		gap: "3",
+		...X({
+			background: e.background,
+			padding: e.padding
+		}),
+		children: [n ? /* @__PURE__ */ C(l, {
+			direction: "column",
+			gap: "half",
+			children: [e.title === void 0 ? null : /* @__PURE__ */ S(p, {
+				variant: "headline",
+				el: "h3",
+				size: "small",
+				children: e.title
+			}), e.description === void 0 ? null : /* @__PURE__ */ S(p, {
+				variant: "body",
+				subdued: !0,
+				children: e.description
+			})]
+		}) : null, t]
+	});
+}, wr = T(D, {
+	components: V,
+	actions: z
+}), Tr = ({ props: e, bindings: t, emit: n }) => {
+	let r = t?.checked, { state: i, set: o } = O(), s = r ? E(i, r) : void 0, c = r ? s ?? e.checked ?? !1 : e.checked ?? !1;
+	return /* @__PURE__ */ S(a, {
 		label: e.label,
-		checked: l,
+		checked: c,
+		...X({ disabled: e.disabled }),
 		onClick: (e, t) => {
-			i && s(i, !(t?.checked ?? !1)), r("change");
+			r && o(r, !(t?.checked ?? !1)), n("change");
 		}
 	});
-}, De = {
-	"check-circle": O,
-	"in-progress": A,
-	"radio-button-unchecked": k
-}, Oe = ({ props: e, emit: t }) => {
-	let n = e.icon ? De[e.icon] : void 0, r = e.removable && e.size !== "small" ? () => t("close") : void 0;
-	return /* @__PURE__ */ y(te, {
+}, Er = {
+	"check-circle": Ie,
+	"in-progress": Re,
+	"radio-button-unchecked": Le
+}, Dr = ({ props: e, emit: t }) => {
+	let n = e.icon ? Er[e.icon] : void 0, r = e.removable && e.size !== "small" ? () => t("close") : void 0;
+	return /* @__PURE__ */ S(o, {
 		label: e.label,
-		...F({
+		...X({
 			size: e.size,
 			color: e.color,
 			icon: n,
 			onClose: r
 		})
 	});
-}, ke = ({ props: e }) => /* @__PURE__ */ y(ne, { ...F({
+}, Or = ({ props: e }) => /* @__PURE__ */ S(s, { ...X({
 	vertical: e.vertical,
 	spacing: e.spacing,
 	alignContent: e.alignContent
-}) }), Ae = ({ props: e }) => {
-	let t = E(null);
-	return w(() => {
+}) }), kr = ({ props: e }) => {
+	let t = y(null);
+	return _(() => {
 		let n = t.current;
 		if (!n) return;
 		let r, i = () => {
-			r && r.dispose(), r = x.Root.new(n), z(r, e.theme);
-			let t = r.container.children.push(j.PieChart.new(r, {
+			r && r.dispose(), r = k.Root.new(n), Y(r, e.theme);
+			let t = r.container.children.push(ze.PieChart.new(r, {
 				layout: r.horizontalLayout,
-				innerRadius: x.percent(50)
-			})), i = t.series.push(j.PieSeries.new(r, {
+				innerRadius: k.percent(50)
+			})), i = t.series.push(ze.PieSeries.new(r, {
 				valueField: "value",
 				categoryField: "category",
 				legendValueText: ""
 			}));
-			i.labels.template.set("text", "{valuePercentTotal.formatNumber('#.')}%"), i.data.setAll(e.data), (e.showLegend ?? !0) && t.children.push(x.Legend.new(r, {
-				centerY: x.percent(50),
-				y: x.percent(50),
+			i.labels.template.set("text", "{valuePercentTotal.formatNumber('#.')}%"), i.data.setAll(e.data), (e.showLegend ?? !0) && t.children.push(k.Legend.new(r, {
+				centerY: k.percent(50),
+				y: k.percent(50),
 				layout: r.verticalLayout
 			})).data.setAll(i.dataItems);
 		}, a = new ResizeObserver((e) => {
@@ -545,107 +1582,109 @@ var ge = ({ props: e }) => {
 		return a.observe(n), n.offsetWidth > 0 && i(), () => {
 			a.disconnect(), r?.dispose();
 		};
-	}, []), /* @__PURE__ */ y("div", {
+	}, []), /* @__PURE__ */ S("div", {
 		ref: t,
-		className: R,
+		className: J,
 		style: { height: e.height ?? 300 }
 	});
-}, je = ({ props: e, children: t }) => /* @__PURE__ */ y(p, {
-	...F({
+}, Ar = ({ props: e, children: t }) => /* @__PURE__ */ S(l, {
+	...X({
 		direction: e.direction,
 		gap: e.gap,
 		alignItems: e.alignItems,
 		justifyContent: e.justifyContent,
+		alignSelf: e.alignSelf,
 		wrap: e.wrap,
 		grow: e.grow,
 		shrink: e.shrink,
+		basis: e.basis,
 		inline: e.inline
 	}),
 	children: t
-}), Me = (...e) => e.filter(Boolean).join(" "), Ne = "_1v76lkh0", Pe = "_1v76lkh1";
+}), jr = (...e) => e.filter(Boolean).join(" "), Mr = "_1v76lkh0", Nr = "_1v76lkh1";
 //#endregion
 //#region src/core/catalog/grid.tsx
-function Fe(e) {
+function Pr(e) {
 	let t = e.match(/repeat\(\s*(\d+)/);
 	return t?.[1] ? Number(t[1]) : e.trim().split(/\s+/).length;
 }
-var Ie = ({ props: e, children: t }) => {
+var Fr = ({ props: e, children: t }) => {
 	if (e.bordered) {
-		let n = e.templateColumns ?? "1fr", r = C.count(t), i = Math.max(1, Fe(n)), a = Math.max(0, r - (r % i || i));
-		return /* @__PURE__ */ y("div", {
-			className: Ne,
+		let n = e.templateColumns ?? "1fr", r = g.count(t), i = Math.max(1, Pr(n)), a = Math.max(0, r - (r % i || i));
+		return /* @__PURE__ */ S("div", {
+			className: Mr,
 			style: { gridTemplateColumns: n },
-			children: C.map(t, (e, t) => /* @__PURE__ */ y("div", {
-				className: Me(Pe, t < a && "_1v76lkh2"),
+			children: g.map(t, (e, t) => /* @__PURE__ */ S("div", {
+				className: jr(Nr, t < a && "_1v76lkh2"),
 				children: e
 			}))
 		});
 	}
-	return /* @__PURE__ */ y(ie, {
+	return /* @__PURE__ */ S(u, {
 		templateColumns: e.templateColumns,
 		gap: e.gap ?? "2",
 		children: t
 	});
-}, Le = {
-	"check-circle": O,
-	"in-progress": A,
-	"radio-button-unchecked": k
-}, Re = ({ props: e }) => {
-	let t = Le[e.name];
-	return t ? /* @__PURE__ */ y(ae, {
+}, Ir = {
+	"check-circle": Ie,
+	"in-progress": Re,
+	"radio-button-unchecked": Le
+}, Lr = ({ props: e }) => {
+	let t = Ir[e.name];
+	return t ? /* @__PURE__ */ S(d, {
 		svg: t,
-		...F({
+		...X({
 			size: e.size,
 			color: e.color
 		})
 	}) : null;
-}, ze = ({ props: e, bindings: n, emit: r }) => {
-	let i = n?.value, { state: a, set: s } = o(), c = i ? t(a, i) : void 0, l = i ? c ?? e.value ?? "" : e.value ?? "";
-	return /* @__PURE__ */ y(se, {
+}, Rr = ({ props: e, bindings: t, emit: n }) => {
+	let r = t?.value, { state: i, set: a } = O(), o = r ? E(i, r) : void 0, s = r ? o ?? e.value ?? "" : e.value ?? "";
+	return /* @__PURE__ */ S(se, {
 		label: e.label,
 		type: e.type ?? "text",
-		value: l,
-		...F({
+		value: s,
+		...X({
 			placeholder: e.placeholder,
 			disabled: e.disabled
 		}),
 		onChange: (e) => {
-			i && s(i, e.target.value), r("change");
+			r && a(r, e.target.value), n("change");
 		}
 	});
-}, Be = ({ props: e }) => {
-	let t = E(null);
-	return w(() => {
+}, zr = ({ props: e }) => {
+	let t = y(null);
+	return _(() => {
 		let n = t.current;
 		if (!n) return;
 		let r, i = () => {
-			r && r.dispose(), r = x.Root.new(n), z(r, e.theme);
-			let t = r.container.children.push(S.XYChart.new(r, { paddingLeft: 0 })), i = t.xAxes.push(S.CategoryAxis.new(r, {
+			r && r.dispose(), r = k.Root.new(n), Y(r, e.theme);
+			let t = r.container.children.push(A.XYChart.new(r, { paddingLeft: 0 })), i = t.xAxes.push(A.CategoryAxis.new(r, {
 				categoryField: "category",
-				renderer: S.AxisRendererX.new(r, { minGridDistance: 30 })
-			})), a = t.yAxes.push(S.ValueAxis.new(r, { renderer: S.AxisRendererY.new(r, {}) })), o = e.data[0], s = e.series ?? (o ? Object.keys(o).filter((e) => e !== "category") : []);
+				renderer: A.AxisRendererX.new(r, { minGridDistance: 30 })
+			})), a = t.yAxes.push(A.ValueAxis.new(r, { renderer: A.AxisRendererY.new(r, {}) })), o = e.data[0], s = e.series ?? (o ? Object.keys(o).filter((e) => e !== "category") : []);
 			for (let n of s) {
-				let o = t.series.push(S.LineSeries.new(r, {
+				let o = t.series.push(A.LineSeries.new(r, {
 					name: n,
 					xAxis: i,
 					yAxis: a,
 					valueYField: n,
 					categoryXField: "category",
-					tooltip: x.Tooltip.new(r, { labelText: `${n}: ${e.unit ?? ""}{valueY}` })
+					tooltip: k.Tooltip.new(r, { labelText: `${n}: ${e.unit ?? ""}{valueY}` })
 				}));
 				o.strokes.template.setAll({ strokeWidth: 2 }), (e.showDots ?? !0) && o.bullets.push(() => {
 					if (!r) throw Error("Chart root is not initialized");
 					let e = o.get("fill");
-					return x.Bullet.new(r, { sprite: x.Circle.new(r, {
+					return k.Bullet.new(r, { sprite: k.Circle.new(r, {
 						radius: 4,
 						...e ? { fill: e } : {},
 						strokeWidth: 0
 					}) });
 				}), o.data.setAll(e.data);
 			}
-			i.data.setAll(e.data), (e.showLegend ?? s.length > 1) && t.children.push(x.Legend.new(r, {
-				centerX: x.percent(50),
-				x: x.percent(50),
+			i.data.setAll(e.data), (e.showLegend ?? s.length > 1) && t.children.push(k.Legend.new(r, {
+				centerX: k.percent(50),
+				x: k.percent(50),
 				marginTop: 8
 			})).data.setAll(t.series.values);
 		}, a = new ResizeObserver((e) => {
@@ -654,114 +1693,51 @@ var Ie = ({ props: e, children: t }) => {
 		return a.observe(n), n.offsetWidth > 0 && i(), () => {
 			a.disconnect(), r?.dispose();
 		};
-	}, []), /* @__PURE__ */ y("div", {
+	}, []), /* @__PURE__ */ S("div", {
 		ref: t,
-		className: R,
+		className: J,
 		style: { height: e.height ?? 300 }
 	});
-}, Ve = ({ props: e, emit: t }) => {
-	let { label: n, href: r, appearance: i, target: a, ghost: o } = e, s = (e) => {
+}, Br = ({ props: e, emit: t }) => {
+	let { label: r, href: i, appearance: a, target: o, ghost: s, badge: c } = e, l = (e) => {
 		e.preventDefault(), t("press");
-	};
-	return i === "secondary" ? /* @__PURE__ */ y(m, {
+	}, u = c === void 0 ? r : /* @__PURE__ */ C("span", {
+		style: {
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center"
+		},
+		children: [r, /* @__PURE__ */ S(n, {
+			"aria-label": c ? `${c} unread` : "unread",
+			offset: {
+				x: "8px",
+				y: "0px"
+			},
+			children: c
+		})]
+	});
+	return a === "secondary" ? /* @__PURE__ */ S(f, {
 		appearance: "secondary",
 		ghost: !1,
-		href: r,
-		...a ? { target: a } : {},
-		onClick: s,
-		children: n
-	}) : o === void 0 ? /* @__PURE__ */ y(m, {
+		href: i,
+		...o ? { target: o } : {},
+		onClick: l,
+		children: u
+	}) : s === void 0 ? /* @__PURE__ */ S(f, {
 		appearance: "primary",
-		href: r,
-		...a ? { target: a } : {},
-		onClick: s,
-		children: n
-	}) : /* @__PURE__ */ y(m, {
+		href: i,
+		...o ? { target: o } : {},
+		onClick: l,
+		children: u
+	}) : /* @__PURE__ */ S(f, {
 		appearance: "primary",
-		ghost: o,
-		href: r,
-		...a ? { target: a } : {},
-		onClick: s,
-		children: n
+		ghost: s,
+		href: i,
+		...o ? { target: o } : {},
+		onClick: l,
+		children: u
 	});
-};
-//#endregion
-//#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.20.1/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
-function He(e, t) {
-	if (typeof e != "object" || !e) return e;
-	var n = e[Symbol.toPrimitive];
-	if (n !== void 0) {
-		var r = n.call(e, t || "default");
-		if (typeof r != "object") return r;
-		throw TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return (t === "string" ? String : Number)(e);
-}
-function Ue(e) {
-	var t = He(e, "string");
-	return typeof t == "symbol" ? t : String(t);
-}
-function We(e, t, n) {
-	return t = Ue(t), t in e ? Object.defineProperty(e, t, {
-		value: n,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[t] = n, e;
-}
-function Ge(e, t) {
-	var n = Object.keys(e);
-	if (Object.getOwnPropertySymbols) {
-		var r = Object.getOwnPropertySymbols(e);
-		t && (r = r.filter(function(t) {
-			return Object.getOwnPropertyDescriptor(e, t).enumerable;
-		})), n.push.apply(n, r);
-	}
-	return n;
-}
-function Ke(e) {
-	for (var t = 1; t < arguments.length; t++) {
-		var n = arguments[t] == null ? {} : arguments[t];
-		t % 2 ? Ge(Object(n), !0).forEach(function(t) {
-			We(e, t, n[t]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Ge(Object(n)).forEach(function(t) {
-			Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
-		});
-	}
-	return e;
-}
-function qe(e, t) {
-	var n = {};
-	for (var r in e) n[r] = t(e[r], r);
-	return n;
-}
-var Je = (e, t, n) => {
-	for (var r of Object.keys(e)) if (e[r] !== (t[r] ?? n[r])) return !1;
-	return !0;
-}, Ye = (e) => {
-	var t = (t) => {
-		var n = e.defaultClassName, r = Ke(Ke({}, e.defaultVariants), t);
-		for (var i in r) {
-			var a = r[i] ?? e.defaultVariants[i];
-			if (a != null) {
-				var o = a;
-				typeof o == "boolean" && (o = o === !0 ? "true" : "false");
-				var s = e.variantClassNames[i][o];
-				s && (n += " " + s);
-			}
-		}
-		for (var [c, l] of e.compoundVariants) Je(c, r, e.defaultVariants) && (n += " " + l);
-		return n;
-	};
-	return t.variants = () => Object.keys(e.variantClassNames), t.classNames = {
-		get base() {
-			return e.defaultClassName.split(" ")[0];
-		},
-		get variants() {
-			return qe(e.variantClassNames, (e) => qe(e, (e) => e.split(" ")[0]));
-		}
-	}, t;
-}, Xe = Ye({
+}, Vr = j({
 	defaultClassName: "_1le8ba60",
 	variantClassNames: { disabled: {
 		true: "_1le8ba61",
@@ -769,163 +1745,151 @@ var Je = (e, t, n) => {
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), Ze = [
+}), Hr = [
 	{
 		name: "Text",
-		catalog: Se,
-		renderer: ({ props: e }) => {
-			if (e.variant === "headline") {
-				let t = e.el ?? "h3";
-				return e.size === void 0 ? /* @__PURE__ */ y(v, {
-					variant: "headline",
-					el: t,
-					children: e.content
-				}) : /* @__PURE__ */ y(v, {
-					variant: "headline",
-					el: t,
-					size: e.size,
-					children: e.content
-				});
-			}
-			return e.variant === "eyebrow" ? /* @__PURE__ */ y(v, {
-				variant: "eyebrow",
-				children: e.content
-			}) : e.size !== void 0 && e.subdued !== void 0 ? /* @__PURE__ */ y(v, {
-				variant: "body",
-				size: e.size,
-				subdued: e.subdued,
-				children: e.content
-			}) : e.size === void 0 ? e.subdued === void 0 ? /* @__PURE__ */ y(v, {
-				variant: "body",
-				children: e.content
-			}) : /* @__PURE__ */ y(v, {
-				variant: "body",
-				subdued: e.subdued,
-				children: e.content
-			}) : /* @__PURE__ */ y(v, {
-				variant: "body",
-				size: e.size,
-				children: e.content
-			});
-		},
-		renderers: N
+		catalog: tr,
+		renderer: ({ props: e }) => e.variant === "headline" ? e.size === void 0 ? /* @__PURE__ */ S(p, {
+			variant: "headline",
+			el: "h3",
+			children: e.content
+		}) : /* @__PURE__ */ S(p, {
+			variant: "headline",
+			el: "h3",
+			size: e.size,
+			children: e.content
+		}) : e.variant === "eyebrow" ? /* @__PURE__ */ S(p, {
+			variant: "eyebrow",
+			children: e.content
+		}) : e.size !== void 0 && e.subdued !== void 0 ? /* @__PURE__ */ S(p, {
+			variant: "body",
+			size: e.size,
+			subdued: e.subdued,
+			children: e.content
+		}) : e.size === void 0 ? e.subdued === void 0 ? /* @__PURE__ */ S(p, {
+			variant: "body",
+			children: e.content
+		}) : /* @__PURE__ */ S(p, {
+			variant: "body",
+			subdued: e.subdued,
+			children: e.content
+		}) : /* @__PURE__ */ S(p, {
+			variant: "body",
+			size: e.size,
+			children: e.content
+		}),
+		renderers: ["all"]
 	},
 	{
 		name: "Card",
-		catalog: V,
-		renderer: ve,
-		renderers: N
+		catalog: Vn,
+		renderer: Cr,
+		renderers: ["all"]
 	},
 	{
 		name: "Flex",
-		catalog: G,
-		renderer: je,
-		renderers: N
+		catalog: Kn,
+		renderer: Ar,
+		renderers: ["all"]
 	},
 	{
 		name: "Grid",
-		catalog: K,
-		renderer: Ie,
-		renderers: N
+		catalog: B,
+		renderer: Fr,
+		renderers: ["all"]
 	},
 	{
 		name: "Alert",
-		catalog: P,
-		renderer: pe,
-		renderers: N
+		catalog: Rn,
+		renderer: br,
+		renderers: ["all"]
 	},
 	{
 		name: "Divider",
-		catalog: U,
-		renderer: ke,
-		renderers: N
+		catalog: Wn,
+		renderer: Or,
+		renderers: ["all"]
 	},
 	{
 		name: "Icon",
-		catalog: q,
-		renderer: Re,
-		renderers: N
-	},
-	{
-		name: "Badge",
-		catalog: I,
-		renderer: he,
-		renderers: N
+		catalog: qn,
+		renderer: Lr,
+		renderers: ["all"]
 	},
 	{
 		name: "Chip",
-		catalog: ye,
-		renderer: Oe,
-		renderers: N
+		catalog: Un,
+		renderer: Dr,
+		renderers: ["all"]
 	},
 	{
 		name: "Link",
-		catalog: X,
-		renderer: Ve,
-		renderers: N
+		catalog: Xn,
+		renderer: Br,
+		renderers: ["all"]
 	},
 	{
 		name: "ProgressBar",
-		catalog: Q,
+		catalog: Qn,
 		renderer: ({ props: e }) => {
-			let t = F({ description: e.description });
-			return e.indeterminate || e.value === void 0 ? /* @__PURE__ */ y(g, {
+			let t = X({ description: e.description });
+			return e.indeterminate || e.value === void 0 ? /* @__PURE__ */ S(ne, {
 				label: e.label,
 				indeterminate: !0,
 				...t
-			}) : /* @__PURE__ */ y(g, {
+			}) : /* @__PURE__ */ S(ne, {
 				label: e.label,
 				value: e.value,
 				...t
 			});
 		},
-		renderers: N
+		renderers: ["all"]
 	},
 	{
 		name: "BarChart",
-		catalog: L,
-		renderer: ge,
-		renderers: N
+		catalog: zn,
+		renderer: xr,
+		renderers: ["all"]
 	},
 	{
 		name: "DonutChart",
-		catalog: W,
-		renderer: Ae,
-		renderers: N
+		catalog: Gn,
+		renderer: kr,
+		renderers: ["all"]
 	},
 	{
 		name: "LineChart",
-		catalog: Y,
-		renderer: Be,
-		renderers: N
+		catalog: Yn,
+		renderer: zr,
+		renderers: ["all"]
 	},
 	{
 		name: "Button",
-		catalog: B,
-		renderer: _e,
-		renderers: N
+		catalog: Bn,
+		renderer: Sr,
+		renderers: ["all"]
 	},
 	{
 		name: "Checkbox",
-		catalog: H,
-		renderer: Ee,
-		renderers: N
+		catalog: Hn,
+		renderer: Tr,
+		renderers: ["all"]
 	},
 	{
 		name: "Input",
-		catalog: J,
-		renderer: ze,
-		renderers: N
+		catalog: Jn,
+		renderer: Rr,
+		renderers: ["all"]
 	},
 	{
 		name: "Textarea",
-		catalog: Ce,
-		renderer: ({ props: e, bindings: n, emit: r }) => {
-			let i = n?.value, { state: a, set: s } = o(), c = i ? t(a, i) : void 0, l = i ? c ?? e.value ?? "" : e.value ?? "";
-			return /* @__PURE__ */ y(ce, {
+		catalog: nr,
+		renderer: ({ props: e, bindings: t, emit: n }) => {
+			let r = t?.value, { state: i, set: a } = O(), o = r ? E(i, r) : void 0, s = r ? o ?? e.value ?? "" : e.value ?? "";
+			return /* @__PURE__ */ S(ce, {
 				label: e.label,
-				value: l,
-				...F({
+				value: s,
+				...X({
 					placeholder: e.placeholder,
 					description: e.description,
 					moreInfo: e.moreInfo,
@@ -933,123 +1897,93 @@ var Je = (e, t, n) => {
 					disabled: e.disabled
 				}),
 				onChange: (e) => {
-					i && s(i, e.target.value), r("change");
+					r && a(r, e.target.value), n("change");
 				}
 			});
 		},
-		renderers: N
+		renderers: ["all"]
 	},
 	{
 		name: "Listbox",
-		catalog: Z,
-		renderer: ({ props: e, bindings: n, emit: r }) => {
-			let i = n?.value, { state: a, set: s } = o(), c = i ? t(a, i) : void 0, l = i ? c ?? e.value ?? "" : e.value ?? "", u = e.options.map((e) => ({
+		catalog: Zn,
+		renderer: ({ props: e, bindings: t, emit: n }) => {
+			let r = t?.value, { state: i, set: a } = O(), o = r ? E(i, r) : void 0, s = r ? o ?? e.value ?? "" : e.value ?? "", l = e.options.map((e) => ({
 				id: e.value,
 				label: e.label
-			})), d = u.find((e) => e.id === l);
-			return /* @__PURE__ */ b("div", {
-				className: Xe({ disabled: e.disabled ?? !1 }),
-				children: [/* @__PURE__ */ y(re, { children: e.label }), /* @__PURE__ */ y(h, {
-					items: u,
-					...d ? { selected: d } : {},
+			})), u = l.find((e) => e.id === s);
+			return /* @__PURE__ */ C("div", {
+				className: Vr({ disabled: e.disabled ?? !1 }),
+				children: [/* @__PURE__ */ S(c, { children: e.label }), /* @__PURE__ */ S(ee, {
+					items: l,
+					...u ? { selected: u } : {},
 					onSelectionChange: (e) => {
 						let t = e?.id ?? "";
-						i && s(i, t), r("change");
+						r && a(r, t), n("change");
 					},
-					children: ({ items: e }) => e.map((e) => /* @__PURE__ */ y(h.Option, {
+					children: ({ items: e }) => e.map((e) => /* @__PURE__ */ S(ee.Option, {
 						item: e,
 						children: e.label
 					}, e.id))
 				})]
 			});
 		},
-		renderers: N
+		renderers: ["all"]
 	},
 	{
 		name: "RadioGroup",
-		catalog: be,
-		renderer: ({ props: e, bindings: n, emit: r }) => {
-			let i = n?.value, { state: a, set: s } = o(), c = i ? t(a, i) : void 0, l = i ? c ?? e.value ?? "" : e.value ?? "";
-			return /* @__PURE__ */ y(_.Group, {
+		catalog: $n,
+		renderer: ({ props: e, bindings: t, emit: n }) => {
+			let r = t?.value, { state: i, set: a } = O(), o = r ? E(i, r) : void 0, s = r ? o ?? e.value ?? "" : e.value ?? "";
+			return /* @__PURE__ */ S(re.Group, {
 				legend: e.label,
-				children: e.options.map((e) => /* @__PURE__ */ y(_, {
-					label: e.label,
-					value: e.value,
-					checked: l === e.value,
+				children: e.options.map((t) => /* @__PURE__ */ S(re, {
+					label: t.label,
+					value: t.value,
+					checked: s === t.value,
+					...X({ disabled: e.disabled }),
 					onChange: () => {
-						i && s(i, e.value), r("change");
+						r && a(r, t.value), n("change");
 					}
-				}, e.value))
+				}, t.value))
 			});
 		},
-		renderers: N
+		renderers: ["all"]
 	},
 	{
 		name: "Switch",
-		catalog: xe,
-		renderer: ({ props: e, bindings: n, emit: r }) => {
-			let i = n?.checked, { state: a, set: s } = o(), c = i ? t(a, i) : void 0, l = i ? c ?? e.checked ?? !1 : e.checked ?? !1;
-			return /* @__PURE__ */ y(oe, {
+		catalog: er,
+		renderer: ({ props: e, bindings: t, emit: n }) => {
+			let r = t?.checked, { state: i, set: a } = O(), o = r ? E(i, r) : void 0, s = r ? o ?? e.checked ?? !1 : e.checked ?? !1;
+			return /* @__PURE__ */ S(oe, {
 				label: e.label,
 				value: e.label,
-				checked: l,
+				checked: s,
+				...X({ disabled: e.disabled }),
 				onChange: (e, t) => {
-					i && s(i, t?.checked ?? !1), r("change");
+					r && a(r, t?.checked ?? !1), n("change");
 				}
 			});
 		},
-		renderers: N
+		renderers: ["all"]
 	}
 ];
-Object.fromEntries(Ze.map(({ name: e, renderer: t }) => [e, t]));
-//#endregion
-//#region src/team-catalog.ts
-function Qe(e) {
-	return e;
-}
-function $e(t) {
-	let n = {
-		...we,
-		...t.components ?? {}
-	}, r = Object.fromEntries(Object.entries(t.actions ?? {}).map(([e, n]) => [`${t.prefix}.${e}`, n])), i = e(s, {
-		components: n,
-		actions: {
-			...M,
-			...r
-		}
-	});
-	return {
-		prefix: t.prefix,
-		catalog: i,
-		prompt(e) {
-			let n = [
-				i.prompt(),
-				"\n",
-				e
-			];
-			return t.rules && n.push("\n", t.rules), n.join("");
-		},
-		jsonSchema() {
-			return i.jsonSchema();
-		}
-	};
-}
+Object.fromEntries(Hr.map(({ name: e, renderer: t }) => [e, t]));
 //#endregion
 //#region src/marketing/catalog/components/revenue-card.catalog.ts
-var et = {
-	props: c.object({
-		title: c.string(),
-		value: c.string(),
-		trend: c.enum([
+var Ur = {
+	props: w.object({
+		title: w.string(),
+		value: w.string(),
+		trend: w.enum([
 			"up",
 			"down",
 			"flat"
 		]).optional(),
-		delta: c.string().optional()
+		delta: w.string().optional()
 	}),
 	slots: [],
 	description: "KPI metric card. trend: up=green↑ down=red↓ flat=grey→. delta e.g. \"+12% vs last month\". Leaf node — no children."
-}, tt = Ye({
+}, Wr = j({
 	defaultClassName: "cy2dbi0",
 	variantClassNames: { trend: {
 		up: "cy2dbi1",
@@ -1058,32 +1992,32 @@ var et = {
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), nt = [{
+}), Gr = [{
 	name: "RevenueCard",
-	catalog: et,
+	catalog: Ur,
 	renderer: ({ props: e }) => {
-		let t = e.trend ?? "flat", n = e.trend === "up" ? "↑" : e.trend === "down" ? "↓" : "→", r = tt({ trend: t });
-		return /* @__PURE__ */ y(f, { children: /* @__PURE__ */ b(p, {
+		let t = e.trend ?? "flat", n = e.trend === "up" ? "↑" : e.trend === "down" ? "↓" : "→", r = Wr({ trend: t });
+		return /* @__PURE__ */ S(i, { children: /* @__PURE__ */ C(l, {
 			direction: "column",
 			gap: "2",
 			children: [
-				/* @__PURE__ */ y(v, {
+				/* @__PURE__ */ S(p, {
 					variant: "eyebrow",
 					children: e.title
 				}),
-				/* @__PURE__ */ y(v, {
+				/* @__PURE__ */ S(p, {
 					variant: "headline",
 					el: "h3",
 					children: e.value
 				}),
-				e.delta && /* @__PURE__ */ b(p, {
+				e.delta && /* @__PURE__ */ C(l, {
 					direction: "row",
 					gap: "1",
 					alignItems: "center",
-					children: [/* @__PURE__ */ y("span", {
+					children: [/* @__PURE__ */ S("span", {
 						className: r,
 						children: n
-					}), /* @__PURE__ */ y(v, {
+					}), /* @__PURE__ */ S(p, {
 						variant: "eyebrow",
 						className: r,
 						children: e.delta
@@ -1092,36 +2026,43 @@ var et = {
 			]
 		}) });
 	},
-	renderers: N
+	renderers: ["chat"]
 }];
 //#endregion
 //#region src/registry-utils.ts
-function rt(e, t) {
-	return e.filter(({ renderers: e }) => e.includes(t));
+function Kr(e, t) {
+	return t === "all" ? [...e] : e.filter(({ renderers: e }) => e.includes("all") || e.includes(t));
 }
-function it(e) {
+function qr(e) {
 	return Object.fromEntries(e.map(({ name: e, catalog: t }) => [e, t]));
 }
-function at(e) {
+function Jr(e) {
 	return Object.fromEntries(e.map(({ name: e, renderer: t }) => [e, t]));
 }
 //#endregion
 //#region src/registry.ts
-var ot = [...Ze, ...nt];
-function st(t = "chat") {
-	let n = rt(ot, t), r = it(n), i = at(n);
-	return a(e(s, {
-		components: r,
-		actions: M
+var Yr = [
+	...Hr,
+	...Gr,
+	...U
+];
+function Z(e = "chat") {
+	let t = Kr(Yr, e), n = qr(t), r = Jr(t);
+	return je(T(D, {
+		components: n,
+		actions: z
 	}), {
-		components: i,
-		actions: fe
+		components: r,
+		actions: Ln
 	});
 }
-var $ = st("chat"), ct = $.registry, lt = $.handlers, ut = $.executeAction;
+var Q = Z("chat"), Xr = Q.registry, Zr = Q.handlers, Qr = Q.executeAction;
+function $r() {
+	return Z("context");
+}
 //#endregion
 //#region src/renderers/internal/enrichments/button-actions.ts
-function dt(e) {
+function ei(e) {
 	let t = { ...e.elements };
 	for (let [e, n] of Object.entries(t)) {
 		if (n.type !== "Button" || n.on?.press) continue;
@@ -1144,40 +2085,214 @@ function dt(e) {
 }
 //#endregion
 //#region src/renderers/internal/enrichments/useEnrichedSpec.ts
-function ft(e, t) {
-	return T(() => t.reduce((e, t) => t(e), e), [e, t]);
+function ti(e, t) {
+	return v(() => t.reduce((e, t) => t(e), e), [e, t]);
 }
 //#endregion
 //#region src/renderers/spec-renderer.tsx
-var pt = [dt], mt = ({ spec: e, registry: t, handlers: a, actions: o }) => {
-	let s = ft(e, pt), c = E(null), l = E(null);
-	if (c.current !== e && (c.current = e, l.current = i(s.state ?? {})), l.current === null) throw Error("State store is not initialized");
-	let u = l.current;
-	return /* @__PURE__ */ y(n, {
+var ni = [ei], $ = ({ spec: e, registry: t, handlers: n, actions: r, loading: i }) => {
+	let a = ti(e, ni), o = y(null), s = y(null);
+	if (o.current !== e && (o.current = e, s.current = Ae(a.state ?? {})), s.current === null) throw Error("State store is not initialized");
+	let c = s.current;
+	return /* @__PURE__ */ S(Oe, {
 		registry: t,
-		store: u,
-		handlers: T(() => {
-			let e = a(() => void 0, () => u.getSnapshot()), t = o ? o({
-				setState: u.set,
-				getSnapshot: () => u.getSnapshot()
+		store: c,
+		handlers: v(() => {
+			let e = n(() => void 0, () => c.getSnapshot()), t = r ? r({
+				setState: c.set,
+				getSnapshot: () => c.getSnapshot()
 			}) : {};
 			return {
 				...e,
 				...t
 			};
 		}, [
-			a,
-			o,
-			u
+			n,
+			r,
+			c
 		]),
-		functions: T(() => ({ computeTotal: (e) => `$${((Number.parseFloat(String(e.quantity ?? 0)) || 0) * (Number.parseFloat(String(e.unitPrice ?? "0").replace(/[^0-9.]/g, "")) || 0)).toFixed(2)}` }), []),
-		children: /* @__PURE__ */ y(r, {
-			spec: s,
-			registry: t
+		functions: v(() => ({ computeTotal: (e) => `$${((Number.parseFloat(String(e.quantity ?? 0)) || 0) * (Number.parseFloat(String(e.unitPrice ?? "0").replace(/[^0-9.]/g, "")) || 0)).toFixed(2)}` }), []),
+		children: /* @__PURE__ */ S(ke, {
+			spec: a,
+			registry: t,
+			loading: i ?? !1
 		})
 	});
+}, ri = class extends fe {
+	state = {
+		hasError: !1,
+		message: ""
+	};
+	static getDerivedStateFromError(e) {
+		return {
+			hasError: !0,
+			message: e.message
+		};
+	}
+	componentDidCatch(e, t) {
+		console.error(`[ContextSpecRenderer] Rendering error in <${this.props.elementType}>:`, e, t.componentStack), this.props.onError?.({
+			elementType: this.props.elementType,
+			message: e.message
+		});
+	}
+	render() {
+		return this.state.hasError ? process.env.NODE_ENV === "production" ? null : /* @__PURE__ */ S(t, {
+			status: "danger",
+			title: `${this.props.elementType} failed to render`,
+			children: /* @__PURE__ */ S(p, {
+				variant: "body",
+				children: this.state.message
+			})
+		}) : this.props.children;
+	}
+};
+//#endregion
+//#region src/renderers/wrap-context-registry.tsx
+function ii(e, t) {
+	if (process.env.NODE_ENV === "production") return e;
+	let n = { ...e };
+	for (let [r, i] of Object.entries(e)) {
+		let e = i;
+		n[r] = ((n) => /* @__PURE__ */ S(ri, {
+			elementType: r,
+			...t ? { onError: t } : {},
+			children: /* @__PURE__ */ S(e, { ...n })
+		}));
+	}
+	return n;
+}
+//#endregion
+//#region src/renderers/context-spec-renderer.tsx
+var ai = ({ spec: e, registry: t, handlers: n, actions: r, onRenderError: i, loading: a }) => {
+	let o = a ? [] : G(e);
+	o.length > 0 && process.env.NODE_ENV !== "production" && console.warn(`[ContextSpecRenderer] Spec validation issues:\n${K(o.map((e) => ({
+		...e,
+		severity: "error"
+	})))}`);
+	let s = t ?? Z("context").registry, c = n ?? Z("context").handlers;
+	return /* @__PURE__ */ S($, {
+		spec: e,
+		registry: v(() => ii(s, i), [s, i]),
+		handlers: c,
+		...r ? { actions: r } : {},
+		...a === void 0 ? {} : { loading: a }
+	});
+}, oi = "nilaa0";
+//#endregion
+//#region src/renderers/sectioned-context-renderer.tsx
+function si(e, t) {
+	let n = {}, r = !1, i = (t) => {
+		let a = e.elements[t];
+		if (!a) {
+			r = !0;
+			return;
+		}
+		if (!n[t]) {
+			n[t] = a;
+			for (let e of a.children ?? []) i(e);
+		}
+	};
+	return i(t), {
+		elements: n,
+		hasMissingRefs: r
+	};
+}
+function ci(e, t) {
+	let { elements: n, hasMissingRefs: r } = si(e, t), i = {
+		root: t,
+		elements: n
+	}, a = e.state;
+	return a !== void 0 && (i.state = a), {
+		spec: i,
+		hasMissingRefs: r
+	};
+}
+function li(e, t) {
+	let n = y(/* @__PURE__ */ new Map());
+	return v(() => {
+		if (!e?.root) return [];
+		let r = e.elements[e.root];
+		if (!r) return [];
+		let i = (r.children ?? []).filter((t) => e.elements[t]), a = n.current, o = /* @__PURE__ */ new Map(), s = i.map((n, r) => {
+			let { spec: s, hasMissingRefs: c } = ci(e, n), l = JSON.stringify(s), u = a.get(n), d = u && u.key === l ? u.spec : s;
+			o.set(n, {
+				key: l,
+				spec: d
+			});
+			let f = r === i.length - 1;
+			return {
+				id: n,
+				spec: d,
+				status: c || f && t ? "loading" : "ready"
+			};
+		});
+		return n.current = o, s;
+	}, [e, t]);
+}
+function ui(e) {
+	let t = y(/* @__PURE__ */ new Map());
+	return v(() => {
+		let n = t.current, r = /* @__PURE__ */ new Map(), i = e.map((e) => {
+			let t = e.spec ? JSON.stringify(e.spec) : "", i = n.get(e.id), a = e.spec && i && i.key === t ? i.spec : e.spec;
+			return r.set(e.id, {
+				key: t,
+				spec: a
+			}), a === e.spec ? e : {
+				...e,
+				spec: a
+			};
+		});
+		return t.current = r, i;
+	}, [e]);
+}
+function di({ title: e }) {
+	return /* @__PURE__ */ C("div", {
+		className: Je,
+		"data-testid": "context-section-skeleton",
+		children: [/* @__PURE__ */ S(ae, {
+			variant: "headline",
+			...e ? { "aria-label": `Loading ${e}` } : {}
+		}), /* @__PURE__ */ S(ie, { height: "64px" })]
+	});
+}
+function fi({ slot: e, registry: t, handlers: n, actions: r }) {
+	return e.spec ? /* @__PURE__ */ C("div", {
+		"data-testid": `context-section-${e.id}`,
+		"data-status": e.status,
+		children: [/* @__PURE__ */ S($, {
+			spec: e.spec,
+			registry: t,
+			handlers: n,
+			loading: e.status === "loading",
+			...r ? { actions: r } : {}
+		}), e.status === "loading" ? /* @__PURE__ */ S("div", {
+			className: oi,
+			children: /* @__PURE__ */ S(ae, {
+				variant: "body",
+				rows: 2,
+				"aria-label": "Loading more of this section"
+			})
+		}) : null]
+	}) : /* @__PURE__ */ S(di, { ...e.title ? { title: e.title } : {} });
+}
+var pi = ({ spec: e, sections: t, loading: n = !1, registry: r, handlers: i, actions: a, onRenderError: o }) => {
+	let s = v(() => Z("context"), []), c = r ?? s.registry, l = i ?? s.handlers, u = v(() => ii(c, o), [c, o]), d = li(e, n);
+	return /* @__PURE__ */ S("div", {
+		className: F,
+		"data-testid": "sectioned-context-panel",
+		children: ui(t ?? d).map((e) => /* @__PURE__ */ S(ri, {
+			elementType: e.id,
+			...o ? { onError: o } : {},
+			children: /* @__PURE__ */ S(fi, {
+				slot: e,
+				registry: u,
+				handlers: l,
+				...a ? { actions: a } : {}
+			})
+		}, e.id))
+	});
 };
 //#endregion
-export { mt as SpecRenderer, Te as catalog, Qe as createTeamCatalog, ut as executeAction, st as getRegistry, lt as handlers, $e as mergeCatalogs, ct as registry };
+export { ai as ContextSpecRenderer, pi as SectionedContextRenderer, $ as SpecRenderer, wr as catalog, H as composeCatalogComponents, or as contextCatalog, rr as createScopedCatalog, Qr as executeAction, ci as extractSectionSpec, yr as formatContextRenderReport, K as formatContextSpecIssues, $r as getContextRegistry, Z as getRegistry, Zr as handlers, vr as hasContextSpecErrors, ir as mergeCatalogs, _r as postProcessContextSpec, Xr as registry, G as validateContextSpec, gr as validateContextSpecDeep };
 
 //# sourceMappingURL=json-render-react.js.map