@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/ChartDisplay-CjXvzzQv.js

@@ -0,0 +1,68 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { computed as n, createBlock as r, createElementBlock as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, resolveDynamicComponent as l, unref as u } from "vue";
+import { ArcElement as d, BarController as f, BarElement as p, BubbleController as m, CategoryScale as h, Chart as g, DoughnutController as _, Filler as v, Legend as y, LineController as b, LineElement as x, LinearScale as S, PieController as C, PointElement as w, PolarAreaController as T, RadarController as E, RadialLinearScale as D, ScatterController as O, Title as k, Tooltip as A } from "chart.js";
+import { Bar as j, Bubble as M, Doughnut as N, Line as P, Pie as F, PolarArea as I, Radar as L, Scatter as R } from "vue-chartjs";
+//#region src/components/compositions/elements/display/ChartDisplay.vue?vue&type=script&setup=true&lang.ts
+var z = ["data-chart-type"], B = {
+	key: 1,
+	"aria-hidden": "true",
+	"data-chart-placeholder": "true"
+}, V = /* @__PURE__ */ a({
+	__name: "ChartDisplay",
+	props: {
+		chartType: { default: "line" },
+		data: {},
+		options: {},
+		width: { default: "100%" },
+		height: { default: 300 },
+		classList: {}
+	},
+	setup(e) {
+		g.register(h, S, D, p, x, w, d, f, b, C, _, E, T, m, O, A, y, k, v);
+		let a = e, V = {
+			line: P,
+			bar: j,
+			pie: F,
+			doughnut: N,
+			radar: L,
+			polarArea: I,
+			bubble: M,
+			scatter: R
+		}, H = n(() => V[a.chartType] ?? P), U = n(() => {
+			let e = a.classList, n = "relative";
+			return e ? t(n, Array.isArray(e) ? e.join(" ") : e) : n;
+		}), W = n(() => {
+			let e = (e) => typeof e == "number" ? `${e}px` : e;
+			return {
+				width: e(a.width),
+				height: e(a.height)
+			};
+		}), G = n(() => ({
+			responsive: !0,
+			maintainAspectRatio: !1,
+			...a.options ?? {}
+		})), K = (() => {
+			if (typeof document > "u" || typeof navigator < "u" && /jsdom/i.test(navigator.userAgent)) return !1;
+			try {
+				return !!document.createElement("canvas").getContext("2d");
+			} catch {
+				return !1;
+			}
+		})();
+		return (t, n) => (c(), i("div", {
+			class: o(U.value),
+			style: s(W.value),
+			"data-testid": "chart-display",
+			"data-chart-type": e.chartType
+		}, [u(K) ? (c(), r(l(H.value), {
+			key: 0,
+			data: e.data,
+			options: G.value
+		}, null, 8, ["data", "options"])) : (c(), i("canvas", B))], 14, z));
+	}
+}), H = /* @__PURE__ */ e({ default: () => U }), U = V;
+//#endregion
+export { H as n, U as t };
+
+//# sourceMappingURL=ChartDisplay-CjXvzzQv.js.map

package/dist/chunks/ChartDisplay-CjXvzzQv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDisplay-CjXvzzQv.js","names":[],"sources":["../../src/components/compositions/elements/display/ChartDisplay.vue","../../src/components/compositions/elements/display/ChartDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven chart display.\n *\n * Renders any of Chart.js's standard chart types via `vue-chartjs`.\n * Chart.js is \"tree-shakable\" — the components it needs (scales,\n * elements, plugins) have to be registered once at module load before\n * a chart can render. We do that side-effecting `Chart.register(...)`\n * call at the top of this module so consumers don't have to think\n * about it.\n *\n * If a 2D canvas context can't be acquired (jsdom, SSR, hardened\n * browsers without canvas), the component renders an inert placeholder\n * canvas instead of mounting chart.js — this keeps consumer tests in\n * jsdom-based environments quiet and crash-free.\n */\nimport type { Component } from \"vue\"\nimport type { ChartData, ChartOptions } from \"chart.js\"\nimport { computed } from \"vue\"\nimport {\n  ArcElement,\n  BarElement,\n  BubbleController,\n  CategoryScale,\n  Chart,\n  DoughnutController,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PieController,\n  PointElement,\n  PolarAreaController,\n  RadarController,\n  RadialLinearScale,\n  ScatterController,\n  Title,\n  Tooltip,\n  BarController,\n} from \"chart.js\"\nimport {\n  Bar,\n  Bubble,\n  Doughnut,\n  Line,\n  Pie,\n  PolarArea,\n  Radar,\n  Scatter,\n} from \"vue-chartjs\"\nimport { cn } from \"@/lib/utils\"\n\n// Register everything we expose. Idempotent — Chart.register is safe\n// to call multiple times.\nChart.register(\n  CategoryScale,\n  LinearScale,\n  RadialLinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  ArcElement,\n  BarController,\n  LineController,\n  PieController,\n  DoughnutController,\n  RadarController,\n  PolarAreaController,\n  BubbleController,\n  ScatterController,\n  Tooltip,\n  Legend,\n  Title,\n  Filler,\n)\n\nexport type ChartDisplayType =\n  | \"line\"\n  | \"bar\"\n  | \"pie\"\n  | \"doughnut\"\n  | \"radar\"\n  | \"polarArea\"\n  | \"bubble\"\n  | \"scatter\"\n\nexport interface ChartDisplayProps {\n  chartType?: ChartDisplayType\n  data: ChartData\n  options?: ChartOptions\n  width?: number | string\n  height?: number | string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ChartDisplayProps>(), {\n  chartType: \"line\",\n  width: \"100%\",\n  height: 300,\n})\n\nconst componentMap: Record<ChartDisplayType, Component> = {\n  line: Line,\n  bar: Bar,\n  pie: Pie,\n  doughnut: Doughnut,\n  radar: Radar,\n  polarArea: PolarArea,\n  bubble: Bubble,\n  scatter: Scatter,\n}\n\nconst chartComponent = computed<Component>(\n  () => componentMap[props.chartType] ?? Line,\n)\n\nconst wrapperClass = computed<string>(() => {\n  const cl = props.classList\n  const base = \"relative\"\n  if (!cl) {\n    return base\n  }\n  const extra = Array.isArray(cl) ? cl.join(\" \") : cl\n  return cn(base, extra)\n})\n\nconst dimensionStyle = computed<Record<string, string>>(() => {\n  const toCss = (v: number | string): string =>\n    typeof v === \"number\" ? `${v}px` : v\n  return {\n    width: toCss(props.width),\n    height: toCss(props.height),\n  }\n})\n\nconst mergedOptions = computed<ChartOptions>(() => ({\n  responsive: true,\n  maintainAspectRatio: false,\n  ...(props.options ?? {}),\n}))\n\n// Detect whether the host environment can actually paint to a canvas.\n// True in real browsers, false in jsdom (where getContext returns null\n// AND writes \"Not implemented: getContext()\" to stderr on every call),\n// SSR (no `document`), and hardened browsers with canvas disabled.\n//\n// We detect jsdom up-front via its userAgent rather than invoking\n// `getContext(\"2d\")` to test for support — invoking it would itself\n// trigger the noisy warning we're trying to avoid.\n//\n// Evaluated once at module load. Every ChartDisplay instance shares\n// this value, so there's no per-mount cost.\nconst canvasSupported: boolean = (() => {\n  if (typeof document === \"undefined\") {\n    return false\n  }\n  if (typeof navigator !== \"undefined\" && /jsdom/i.test(navigator.userAgent)) {\n    return false\n  }\n  try {\n    return !!document.createElement(\"canvas\").getContext(\"2d\")\n  } catch {\n    return false\n  }\n})()\n</script>\n\n<template>\n  <div\n    :class=\"wrapperClass\"\n    :style=\"dimensionStyle\"\n    data-testid=\"chart-display\"\n    :data-chart-type=\"chartType\"\n  >\n    <component\n      v-if=\"canvasSupported\"\n      :is=\"chartComponent\"\n      :data=\"data\"\n      :options=\"mergedOptions\"\n    />\n    <!-- Inert placeholder: keeps tests/SSR markup stable when canvas can't paint. -->\n    <canvas v-else aria-hidden=\"true\" data-chart-placeholder=\"true\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven chart display.\n *\n * Renders any of Chart.js's standard chart types via `vue-chartjs`.\n * Chart.js is \"tree-shakable\" — the components it needs (scales,\n * elements, plugins) have to be registered once at module load before\n * a chart can render. We do that side-effecting `Chart.register(...)`\n * call at the top of this module so consumers don't have to think\n * about it.\n *\n * If a 2D canvas context can't be acquired (jsdom, SSR, hardened\n * browsers without canvas), the component renders an inert placeholder\n * canvas instead of mounting chart.js — this keeps consumer tests in\n * jsdom-based environments quiet and crash-free.\n */\nimport type { Component } from \"vue\"\nimport type { ChartData, ChartOptions } from \"chart.js\"\nimport { computed } from \"vue\"\nimport {\n  ArcElement,\n  BarElement,\n  BubbleController,\n  CategoryScale,\n  Chart,\n  DoughnutController,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PieController,\n  PointElement,\n  PolarAreaController,\n  RadarController,\n  RadialLinearScale,\n  ScatterController,\n  Title,\n  Tooltip,\n  BarController,\n} from \"chart.js\"\nimport {\n  Bar,\n  Bubble,\n  Doughnut,\n  Line,\n  Pie,\n  PolarArea,\n  Radar,\n  Scatter,\n} from \"vue-chartjs\"\nimport { cn } from \"@/lib/utils\"\n\n// Register everything we expose. Idempotent — Chart.register is safe\n// to call multiple times.\nChart.register(\n  CategoryScale,\n  LinearScale,\n  RadialLinearScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  ArcElement,\n  BarController,\n  LineController,\n  PieController,\n  DoughnutController,\n  RadarController,\n  PolarAreaController,\n  BubbleController,\n  ScatterController,\n  Tooltip,\n  Legend,\n  Title,\n  Filler,\n)\n\nexport type ChartDisplayType =\n  | \"line\"\n  | \"bar\"\n  | \"pie\"\n  | \"doughnut\"\n  | \"radar\"\n  | \"polarArea\"\n  | \"bubble\"\n  | \"scatter\"\n\nexport interface ChartDisplayProps {\n  chartType?: ChartDisplayType\n  data: ChartData\n  options?: ChartOptions\n  width?: number | string\n  height?: number | string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ChartDisplayProps>(), {\n  chartType: \"line\",\n  width: \"100%\",\n  height: 300,\n})\n\nconst componentMap: Record<ChartDisplayType, Component> = {\n  line: Line,\n  bar: Bar,\n  pie: Pie,\n  doughnut: Doughnut,\n  radar: Radar,\n  polarArea: PolarArea,\n  bubble: Bubble,\n  scatter: Scatter,\n}\n\nconst chartComponent = computed<Component>(\n  () => componentMap[props.chartType] ?? Line,\n)\n\nconst wrapperClass = computed<string>(() => {\n  const cl = props.classList\n  const base = \"relative\"\n  if (!cl) {\n    return base\n  }\n  const extra = Array.isArray(cl) ? cl.join(\" \") : cl\n  return cn(base, extra)\n})\n\nconst dimensionStyle = computed<Record<string, string>>(() => {\n  const toCss = (v: number | string): string =>\n    typeof v === \"number\" ? `${v}px` : v\n  return {\n    width: toCss(props.width),\n    height: toCss(props.height),\n  }\n})\n\nconst mergedOptions = computed<ChartOptions>(() => ({\n  responsive: true,\n  maintainAspectRatio: false,\n  ...(props.options ?? {}),\n}))\n\n// Detect whether the host environment can actually paint to a canvas.\n// True in real browsers, false in jsdom (where getContext returns null\n// AND writes \"Not implemented: getContext()\" to stderr on every call),\n// SSR (no `document`), and hardened browsers with canvas disabled.\n//\n// We detect jsdom up-front via its userAgent rather than invoking\n// `getContext(\"2d\")` to test for support — invoking it would itself\n// trigger the noisy warning we're trying to avoid.\n//\n// Evaluated once at module load. Every ChartDisplay instance shares\n// this value, so there's no per-mount cost.\nconst canvasSupported: boolean = (() => {\n  if (typeof document === \"undefined\") {\n    return false\n  }\n  if (typeof navigator !== \"undefined\" && /jsdom/i.test(navigator.userAgent)) {\n    return false\n  }\n  try {\n    return !!document.createElement(\"canvas\").getContext(\"2d\")\n  } catch {\n    return false\n  }\n})()\n</script>\n\n<template>\n  <div\n    :class=\"wrapperClass\"\n    :style=\"dimensionStyle\"\n    data-testid=\"chart-display\"\n    :data-chart-type=\"chartType\"\n  >\n    <component\n      v-if=\"canvasSupported\"\n      :is=\"chartComponent\"\n      :data=\"data\"\n      :options=\"mergedOptions\"\n    />\n    <!-- Inert placeholder: keeps tests/SSR markup stable when canvas can't paint. -->\n    <canvas v-else aria-hidden=\"true\" data-chart-placeholder=\"true\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAuDA,EAAM,SACJ,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,CACF;EAqBA,IAAM,IAAQ,GAMR,IAAoD;GACxD,MAAM;GACN,KAAK;GACL,KAAK;GACL,UAAU;GACV,OAAO;GACP,WAAW;GACX,QAAQ;GACR,SAAS;EACX,GAEM,IAAiB,QACf,EAAa,EAAM,cAAc,CACzC,GAEM,IAAe,QAAuB;GAC1C,IAAM,IAAK,EAAM,WACX,IAAO;GAKb,OAJK,IAIE,EAAG,GADI,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,CAC5B,IAHZ;EAIX,CAAC,GAEK,IAAiB,QAAuC;GAC5D,IAAM,KAAS,MACb,OAAO,KAAM,WAAW,GAAG,EAAE,MAAM;GACrC,OAAO;IACL,OAAO,EAAM,EAAM,KAAK;IACxB,QAAQ,EAAM,EAAM,MAAM;GAC5B;EACF,CAAC,GAEK,IAAgB,SAA8B;GAClD,YAAY;GACZ,qBAAqB;GACrB,GAAI,EAAM,WAAW,CAAC;EACxB,EAAE,GAaI,WAAkC;GAItC,IAHI,OAAO,WAAa,OAGpB,OAAO,YAAc,OAAe,SAAS,KAAK,UAAU,SAAS,GACvE,OAAO;GAET,IAAI;IACF,OAAO,CAAC,CAAC,SAAS,cAAc,QAAQ,EAAE,WAAW,IAAI;GAC3D,QAAQ;IACN,OAAO;GACT;EACF,GAAG;yBAID,EAcM,OAAA;GAbH,OAAK,EAAE,EAAA,KAAY;GACnB,OAAK,EAAE,EAAA,KAAc;GACtB,eAAY;GACX,mBAAiB,EAAA;MAGV,EAAA,CAAA,KAAA,EAAA,GADR,EAKE,EAHK,EAAA,KAAc,GAAA;;GAClB,MAAM,EAAA;GACN,SAAS,EAAA;4CAGZ,EAAkE,UAAlE,CAAkE,EAAA,GAAA,IAAA,CAAA"}

package/dist/chunks/ChatMessage-Bp6bw3Xo.js

@@ -0,0 +1,215 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { i as n, n as r, r as i } from "./avatar-D__e2bNE.js";
+import { n as a } from "./badge-4iQG4kuk.js";
+import { n as o } from "./button-BAwcISlK.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, resolveDynamicComponent as b, toDisplayString as x, unref as S, watch as C, withCtx as w } from "vue";
+import { cva as T } from "class-variance-authority";
+//#region src/components/compositions/elements/code/ChatMessage.vue?vue&type=script&setup=true&lang.ts
+var E = [
+	"data-role",
+	"data-align",
+	"data-variant"
+], D = {
+	key: 0,
+	class: "font-medium",
+	"data-testid": "chat-message-author"
+}, O = {
+	key: 1,
+	class: "flex items-center gap-1 py-1",
+	"data-testid": "chat-message-pending",
+	"aria-label": "Typing"
+}, k = ["innerHTML"], A = {
+	key: 3,
+	class: "whitespace-pre-wrap leading-snug",
+	"data-testid": "chat-message-body"
+}, j = {
+	key: 0,
+	class: "text-xs text-destructive",
+	"data-testid": "chat-message-error"
+}, M = /* @__PURE__ */ h({
+	__name: "ChatMessage",
+	props: {
+		message: {},
+		role: { default: "user" },
+		authorName: {},
+		authorAvatarUrl: {},
+		authorAvatarFallback: {},
+		timestamp: {},
+		pending: {
+			type: Boolean,
+			default: !1
+		},
+		error: {},
+		actions: { default: () => [] },
+		align: { default: "auto" },
+		variant: {},
+		allowHtml: {
+			type: Boolean,
+			default: !1
+		},
+		classList: {}
+	},
+	emits: ["action"],
+	setup(e, { emit: h }) {
+		let M = e, N = h, P = c(() => M.align === "start" || M.align === "end" ? M.align : M.role === "user" ? "end" : "start"), F = c(() => P.value === "end"), I = {
+			user: "accent",
+			assistant: "muted",
+			system: "default",
+			tool: "muted"
+		}, L = c(() => M.variant ? M.variant : I[M.role] ?? "default"), R = T("max-w-[36rem] min-w-0 break-words rounded-2xl border px-3 py-2 text-sm shadow-sm", {
+			variants: {
+				variant: {
+					default: "bg-card text-card-foreground border-border",
+					muted: "bg-muted text-foreground border-transparent",
+					accent: "bg-primary text-primary-foreground border-transparent",
+					destructive: "bg-destructive text-destructive-foreground border-transparent"
+				},
+				align: {
+					start: "rounded-tl-sm",
+					end: "rounded-tr-sm"
+				}
+			},
+			defaultVariants: {
+				variant: "default",
+				align: "start"
+			}
+		}), z = c(() => R({
+			variant: L.value,
+			align: P.value
+		})), B = c(() => {
+			if (M.authorAvatarFallback) return M.authorAvatarFallback;
+			let e = (M.authorName ?? M.role ?? "?").trim();
+			return e ? e.charAt(0).toUpperCase() : "?";
+		}), V = c(() => {
+			let e = M.timestamp;
+			if (!e) return "";
+			let t = e instanceof Date ? e : new Date(e);
+			if (Number.isNaN(t.getTime())) return "";
+			try {
+				return new Intl.DateTimeFormat(void 0, {
+					hour: "numeric",
+					minute: "2-digit"
+				}).format(t);
+			} catch {
+				return t.toISOString();
+			}
+		}), H = c(() => {
+			let e = M.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), U = c(() => !!M.role && M.role !== "user"), W = v({});
+		function G(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		async function K(e) {
+			let t = e.filter((e) => e.icon).map((e) => e.icon);
+			if (t.length === 0) return;
+			let n = await import("@lucide/vue"), r = { ...W.value };
+			for (let e of t) r[e] = n[G(e)] ?? null;
+			W.value = r;
+		}
+		C(() => M.actions, (e) => {
+			K(e ?? []);
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		function q(e) {
+			N("action", { id: e });
+		}
+		return (e, c) => (_(), d("div", {
+			class: g(S(t)("flex w-full items-end gap-2", F.value ? "justify-end" : "justify-start", H.value)),
+			"data-role": M.role,
+			"data-align": P.value,
+			"data-variant": L.value,
+			"data-testid": "chat-message"
+		}, [
+			F.value ? u("", !0) : (_(), l(S(n), {
+				key: 0,
+				size: "sm",
+				class: "mb-1",
+				"data-testid": "chat-message-avatar"
+			}, {
+				default: w(() => [M.authorAvatarUrl ? (_(), l(S(r), {
+					key: 0,
+					src: M.authorAvatarUrl,
+					alt: M.authorName ?? M.role
+				}, null, 8, ["src", "alt"])) : u("", !0), m(S(i), null, {
+					default: w(() => [p(x(B.value), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})),
+			f("div", { class: g(S(t)("flex min-w-0 flex-col gap-1", F.value ? "items-end" : "items-start")) }, [
+				f("div", {
+					class: g(z.value),
+					"data-testid": "chat-message-bubble"
+				}, [M.authorName || U.value || V.value ? (_(), d("div", {
+					key: 0,
+					class: g(S(t)("mb-1 flex w-full items-center gap-2 text-xs", F.value ? "flex-row-reverse" : "flex-row"))
+				}, [
+					M.authorName ? (_(), d("span", D, x(M.authorName), 1)) : u("", !0),
+					U.value ? (_(), l(S(a), {
+						key: 1,
+						variant: "outline",
+						size: "sm",
+						"data-testid": "chat-message-role-badge"
+					}, {
+						default: w(() => [p(x(M.role), 1)]),
+						_: 1
+					})) : u("", !0),
+					V.value ? (_(), d("span", {
+						key: 2,
+						class: g(S(t)("text-[11px] opacity-70", L.value === "accent" || L.value === "destructive" ? "" : "text-muted-foreground", F.value ? "mr-auto" : "ml-auto")),
+						"data-testid": "chat-message-timestamp"
+					}, x(V.value), 3)) : u("", !0)
+				], 2)) : u("", !0), M.pending ? (_(), d("div", O, [...c[0] ||= [
+					f("span", { class: "size-1.5 animate-bounce rounded-full bg-current opacity-60" }, null, -1),
+					f("span", { class: "size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]" }, null, -1),
+					f("span", { class: "size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]" }, null, -1)
+				]])) : M.allowHtml && M.message ? (_(), d("div", {
+					key: 2,
+					class: "whitespace-pre-wrap leading-snug",
+					"data-testid": "chat-message-body",
+					innerHTML: M.message
+				}, null, 8, k)) : M.message ? (_(), d("div", A, x(M.message), 1)) : u("", !0)], 2),
+				M.error ? (_(), d("p", j, x(M.error), 1)) : u("", !0),
+				M.actions && M.actions.length > 0 ? (_(), d("div", {
+					key: 1,
+					class: g(S(t)("flex flex-wrap gap-1", F.value ? "justify-end" : "justify-start")),
+					"data-testid": "chat-message-actions"
+				}, [(_(!0), d(s, null, y(M.actions, (e) => (_(), l(S(o), {
+					key: e.id,
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					"data-action-id": e.id,
+					onClick: (t) => q(e.id)
+				}, {
+					default: w(() => [e.icon && W.value[e.icon] ? (_(), l(b(e.icon ? W.value[e.icon] : null), { key: 0 })) : u("", !0), f("span", null, x(e.label), 1)]),
+					_: 2
+				}, 1032, ["data-action-id", "onClick"]))), 128))], 2)) : u("", !0)
+			], 2),
+			F.value ? (_(), l(S(n), {
+				key: 1,
+				size: "sm",
+				class: "mb-1",
+				"data-testid": "chat-message-avatar"
+			}, {
+				default: w(() => [M.authorAvatarUrl ? (_(), l(S(r), {
+					key: 0,
+					src: M.authorAvatarUrl,
+					alt: M.authorName ?? M.role
+				}, null, 8, ["src", "alt"])) : u("", !0), m(S(i), null, {
+					default: w(() => [p(x(B.value), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})) : u("", !0)
+		], 10, E));
+	}
+}), N = /* @__PURE__ */ e({ default: () => P }), P = M;
+//#endregion
+export { N as n, P as t };
+
+//# sourceMappingURL=ChatMessage-Bp6bw3Xo.js.map

package/dist/chunks/ChatMessage-Bp6bw3Xo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage-Bp6bw3Xo.js","names":[],"sources":["../../src/components/compositions/elements/code/ChatMessage.vue","../../src/components/compositions/elements/code/ChatMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Generic chat-message bubble composition.\n *\n * Display-only — renders a single chat bubble in the style of Slack /\n * Discord / iMessage. Side-aligned by role, color-tinted by variant,\n * optional avatar, role badge, timestamp, typing indicator, inline\n * error, and a row of ghost-button actions.\n *\n * No platform-specific integration. Form-data store is not touched.\n *\n *   <ChatMessage\n *     role=\"assistant\"\n *     authorName=\"Assistant\"\n *     message=\"Hello, how can I help?\"\n *     :timestamp=\"new Date()\"\n *   />\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ChatMessageAlign = \"auto\" | \"start\" | \"end\"\nexport type ChatMessageVariant =\n  | \"default\"\n  | \"muted\"\n  | \"accent\"\n  | \"destructive\"\n\nexport interface ChatMessageAction {\n  id: string\n  label: string\n  icon?: string\n}\n\nexport interface ChatMessageProps {\n  message?: string\n  role?: \"user\" | \"assistant\" | \"system\" | \"tool\" | string\n  authorName?: string\n  authorAvatarUrl?: string\n  authorAvatarFallback?: string\n  timestamp?: string | Date\n  pending?: boolean\n  error?: string\n  actions?: ChatMessageAction[]\n  align?: ChatMessageAlign\n  variant?: ChatMessageVariant\n  allowHtml?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ChatMessageProps>(), {\n  role: \"user\",\n  align: \"auto\",\n  pending: false,\n  allowHtml: false,\n  actions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"action\", payload: { id: string }): void\n}>()\n\n/* ---------- alignment ---------- */\n\nconst resolvedAlign = computed<\"start\" | \"end\">(() => {\n  if (props.align === \"start\" || props.align === \"end\") {\n    return props.align\n  }\n  return props.role === \"user\" ? \"end\" : \"start\"\n})\n\nconst isEnd = computed<boolean>(() => resolvedAlign.value === \"end\")\n\n/* ---------- variant ---------- */\n\nconst ROLE_VARIANT: Record<string, ChatMessageVariant> = {\n  user: \"accent\",\n  assistant: \"muted\",\n  system: \"default\",\n  tool: \"muted\",\n}\n\nconst resolvedVariant = computed<ChatMessageVariant>(() => {\n  if (props.variant) {\n    return props.variant\n  }\n  return ROLE_VARIANT[props.role] ?? \"default\"\n})\n\nconst bubbleVariants = cva(\n  \"max-w-[36rem] min-w-0 break-words rounded-2xl border px-3 py-2 text-sm shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground border-border\",\n        muted: \"bg-muted text-foreground border-transparent\",\n        accent: \"bg-primary text-primary-foreground border-transparent\",\n        destructive:\n          \"bg-destructive text-destructive-foreground border-transparent\",\n      },\n      align: {\n        start: \"rounded-tl-sm\",\n        end: \"rounded-tr-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      align: \"start\",\n    },\n  },\n)\n\ntype BubbleVariants = VariantProps<typeof bubbleVariants>\n\nconst bubbleClass = computed<string>(() =>\n  bubbleVariants({\n    variant: resolvedVariant.value as BubbleVariants[\"variant\"],\n    align: resolvedAlign.value,\n  }),\n)\n\n/* ---------- avatar fallback ---------- */\n\nconst derivedAvatarFallback = computed<string>(() => {\n  if (props.authorAvatarFallback) {\n    return props.authorAvatarFallback\n  }\n  const source = (props.authorName ?? props.role ?? \"?\").trim()\n  return source ? source.charAt(0).toUpperCase() : \"?\"\n})\n\n/* ---------- timestamp ---------- */\n\nconst formattedTimestamp = computed<string>(() => {\n  const ts = props.timestamp\n  if (!ts) {\n    return \"\"\n  }\n  const date = ts instanceof Date ? ts : new Date(ts)\n  if (Number.isNaN(date.getTime())) {\n    return \"\"\n  }\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n    }).format(date)\n  } catch {\n    return date.toISOString()\n  }\n})\n\n/* ---------- root class ---------- */\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\n/* ---------- role badge ---------- */\n\nconst showRoleBadge = computed<boolean>(() => {\n  return Boolean(props.role) && props.role !== \"user\"\n})\n\n/* ---------- actions (lucide icons, lazy) ---------- */\n\nconst ActionIcons = ref<Record<string, Component | null>>({})\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nasync function loadActionIcons(actions: ChatMessageAction[]): Promise<void> {\n  const needed = actions.filter((a) => a.icon).map((a) => a.icon as string)\n  if (needed.length === 0) {\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  const next: Record<string, Component | null> = { ...ActionIcons.value }\n  for (const raw of needed) {\n    const name = toPascalCase(raw)\n    next[raw] = registry[name] ?? null\n  }\n  ActionIcons.value = next\n}\n\nwatch(\n  () => props.actions,\n  (next) => {\n    void loadActionIcons(next ?? [])\n  },\n  { immediate: true, deep: true },\n)\n\nfunction onAction(id: string): void {\n  emit(\"action\", { id })\n}\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex w-full items-end gap-2',\n        isEnd ? 'justify-end' : 'justify-start',\n        rootClass,\n      )\n    \"\n    :data-role=\"props.role\"\n    :data-align=\"resolvedAlign\"\n    :data-variant=\"resolvedVariant\"\n    data-testid=\"chat-message\"\n  >\n    <!-- left-side avatar -->\n    <Avatar\n      v-if=\"!isEnd\"\n      size=\"sm\"\n      class=\"mb-1\"\n      data-testid=\"chat-message-avatar\"\n    >\n      <AvatarImage\n        v-if=\"props.authorAvatarUrl\"\n        :src=\"props.authorAvatarUrl\"\n        :alt=\"props.authorName ?? props.role\"\n      />\n      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>\n    </Avatar>\n\n    <div\n      :class=\"\n        cn(\n          'flex min-w-0 flex-col gap-1',\n          isEnd ? 'items-end' : 'items-start',\n        )\n      \"\n    >\n      <!-- bubble -->\n      <div :class=\"bubbleClass\" data-testid=\"chat-message-bubble\">\n        <!-- header -->\n        <div\n          v-if=\"props.authorName || showRoleBadge || formattedTimestamp\"\n          :class=\"\n            cn(\n              'mb-1 flex w-full items-center gap-2 text-xs',\n              isEnd ? 'flex-row-reverse' : 'flex-row',\n            )\n          \"\n        >\n          <span\n            v-if=\"props.authorName\"\n            class=\"font-medium\"\n            data-testid=\"chat-message-author\"\n          >\n            {{ props.authorName }}\n          </span>\n          <Badge\n            v-if=\"showRoleBadge\"\n            variant=\"outline\"\n            size=\"sm\"\n            data-testid=\"chat-message-role-badge\"\n          >\n            {{ props.role }}\n          </Badge>\n          <span\n            v-if=\"formattedTimestamp\"\n            :class=\"\n              cn(\n                'text-[11px] opacity-70',\n                resolvedVariant === 'accent' || resolvedVariant === 'destructive'\n                  ? ''\n                  : 'text-muted-foreground',\n                isEnd ? 'mr-auto' : 'ml-auto',\n              )\n            \"\n            data-testid=\"chat-message-timestamp\"\n          >\n            {{ formattedTimestamp }}\n          </span>\n        </div>\n\n        <!-- body -->\n        <div\n          v-if=\"props.pending\"\n          class=\"flex items-center gap-1 py-1\"\n          data-testid=\"chat-message-pending\"\n          aria-label=\"Typing\"\n        >\n          <span class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60\" />\n          <span\n            class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]\"\n          />\n          <span\n            class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]\"\n          />\n        </div>\n        <div\n          v-else-if=\"props.allowHtml && props.message\"\n          class=\"whitespace-pre-wrap leading-snug\"\n          data-testid=\"chat-message-body\"\n          v-html=\"props.message\"\n        />\n        <div\n          v-else-if=\"props.message\"\n          class=\"whitespace-pre-wrap leading-snug\"\n          data-testid=\"chat-message-body\"\n        >\n          {{ props.message }}\n        </div>\n      </div>\n\n      <!-- error -->\n      <p\n        v-if=\"props.error\"\n        class=\"text-xs text-destructive\"\n        data-testid=\"chat-message-error\"\n      >\n        {{ props.error }}\n      </p>\n\n      <!-- actions -->\n      <div\n        v-if=\"props.actions && props.actions.length > 0\"\n        :class=\"\n          cn(\n            'flex flex-wrap gap-1',\n            isEnd ? 'justify-end' : 'justify-start',\n          )\n        \"\n        data-testid=\"chat-message-actions\"\n      >\n        <Button\n          v-for=\"action in props.actions\"\n          :key=\"action.id\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          :data-action-id=\"action.id\"\n          @click=\"onAction(action.id)\"\n        >\n          <component\n            :is=\"action.icon ? ActionIcons[action.icon] : null\"\n            v-if=\"action.icon && ActionIcons[action.icon]\"\n          />\n          <span>{{ action.label }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- right-side avatar -->\n    <Avatar\n      v-if=\"isEnd\"\n      size=\"sm\"\n      class=\"mb-1\"\n      data-testid=\"chat-message-avatar\"\n    >\n      <AvatarImage\n        v-if=\"props.authorAvatarUrl\"\n        :src=\"props.authorAvatarUrl\"\n        :alt=\"props.authorName ?? props.role\"\n      />\n      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>\n    </Avatar>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Generic chat-message bubble composition.\n *\n * Display-only — renders a single chat bubble in the style of Slack /\n * Discord / iMessage. Side-aligned by role, color-tinted by variant,\n * optional avatar, role badge, timestamp, typing indicator, inline\n * error, and a row of ghost-button actions.\n *\n * No platform-specific integration. Form-data store is not touched.\n *\n *   <ChatMessage\n *     role=\"assistant\"\n *     authorName=\"Assistant\"\n *     message=\"Hello, how can I help?\"\n *     :timestamp=\"new Date()\"\n *   />\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ChatMessageAlign = \"auto\" | \"start\" | \"end\"\nexport type ChatMessageVariant =\n  | \"default\"\n  | \"muted\"\n  | \"accent\"\n  | \"destructive\"\n\nexport interface ChatMessageAction {\n  id: string\n  label: string\n  icon?: string\n}\n\nexport interface ChatMessageProps {\n  message?: string\n  role?: \"user\" | \"assistant\" | \"system\" | \"tool\" | string\n  authorName?: string\n  authorAvatarUrl?: string\n  authorAvatarFallback?: string\n  timestamp?: string | Date\n  pending?: boolean\n  error?: string\n  actions?: ChatMessageAction[]\n  align?: ChatMessageAlign\n  variant?: ChatMessageVariant\n  allowHtml?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ChatMessageProps>(), {\n  role: \"user\",\n  align: \"auto\",\n  pending: false,\n  allowHtml: false,\n  actions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"action\", payload: { id: string }): void\n}>()\n\n/* ---------- alignment ---------- */\n\nconst resolvedAlign = computed<\"start\" | \"end\">(() => {\n  if (props.align === \"start\" || props.align === \"end\") {\n    return props.align\n  }\n  return props.role === \"user\" ? \"end\" : \"start\"\n})\n\nconst isEnd = computed<boolean>(() => resolvedAlign.value === \"end\")\n\n/* ---------- variant ---------- */\n\nconst ROLE_VARIANT: Record<string, ChatMessageVariant> = {\n  user: \"accent\",\n  assistant: \"muted\",\n  system: \"default\",\n  tool: \"muted\",\n}\n\nconst resolvedVariant = computed<ChatMessageVariant>(() => {\n  if (props.variant) {\n    return props.variant\n  }\n  return ROLE_VARIANT[props.role] ?? \"default\"\n})\n\nconst bubbleVariants = cva(\n  \"max-w-[36rem] min-w-0 break-words rounded-2xl border px-3 py-2 text-sm shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground border-border\",\n        muted: \"bg-muted text-foreground border-transparent\",\n        accent: \"bg-primary text-primary-foreground border-transparent\",\n        destructive:\n          \"bg-destructive text-destructive-foreground border-transparent\",\n      },\n      align: {\n        start: \"rounded-tl-sm\",\n        end: \"rounded-tr-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      align: \"start\",\n    },\n  },\n)\n\ntype BubbleVariants = VariantProps<typeof bubbleVariants>\n\nconst bubbleClass = computed<string>(() =>\n  bubbleVariants({\n    variant: resolvedVariant.value as BubbleVariants[\"variant\"],\n    align: resolvedAlign.value,\n  }),\n)\n\n/* ---------- avatar fallback ---------- */\n\nconst derivedAvatarFallback = computed<string>(() => {\n  if (props.authorAvatarFallback) {\n    return props.authorAvatarFallback\n  }\n  const source = (props.authorName ?? props.role ?? \"?\").trim()\n  return source ? source.charAt(0).toUpperCase() : \"?\"\n})\n\n/* ---------- timestamp ---------- */\n\nconst formattedTimestamp = computed<string>(() => {\n  const ts = props.timestamp\n  if (!ts) {\n    return \"\"\n  }\n  const date = ts instanceof Date ? ts : new Date(ts)\n  if (Number.isNaN(date.getTime())) {\n    return \"\"\n  }\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n    }).format(date)\n  } catch {\n    return date.toISOString()\n  }\n})\n\n/* ---------- root class ---------- */\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n\n/* ---------- role badge ---------- */\n\nconst showRoleBadge = computed<boolean>(() => {\n  return Boolean(props.role) && props.role !== \"user\"\n})\n\n/* ---------- actions (lucide icons, lazy) ---------- */\n\nconst ActionIcons = ref<Record<string, Component | null>>({})\n\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nasync function loadActionIcons(actions: ChatMessageAction[]): Promise<void> {\n  const needed = actions.filter((a) => a.icon).map((a) => a.icon as string)\n  if (needed.length === 0) {\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  const next: Record<string, Component | null> = { ...ActionIcons.value }\n  for (const raw of needed) {\n    const name = toPascalCase(raw)\n    next[raw] = registry[name] ?? null\n  }\n  ActionIcons.value = next\n}\n\nwatch(\n  () => props.actions,\n  (next) => {\n    void loadActionIcons(next ?? [])\n  },\n  { immediate: true, deep: true },\n)\n\nfunction onAction(id: string): void {\n  emit(\"action\", { id })\n}\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex w-full items-end gap-2',\n        isEnd ? 'justify-end' : 'justify-start',\n        rootClass,\n      )\n    \"\n    :data-role=\"props.role\"\n    :data-align=\"resolvedAlign\"\n    :data-variant=\"resolvedVariant\"\n    data-testid=\"chat-message\"\n  >\n    <!-- left-side avatar -->\n    <Avatar\n      v-if=\"!isEnd\"\n      size=\"sm\"\n      class=\"mb-1\"\n      data-testid=\"chat-message-avatar\"\n    >\n      <AvatarImage\n        v-if=\"props.authorAvatarUrl\"\n        :src=\"props.authorAvatarUrl\"\n        :alt=\"props.authorName ?? props.role\"\n      />\n      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>\n    </Avatar>\n\n    <div\n      :class=\"\n        cn(\n          'flex min-w-0 flex-col gap-1',\n          isEnd ? 'items-end' : 'items-start',\n        )\n      \"\n    >\n      <!-- bubble -->\n      <div :class=\"bubbleClass\" data-testid=\"chat-message-bubble\">\n        <!-- header -->\n        <div\n          v-if=\"props.authorName || showRoleBadge || formattedTimestamp\"\n          :class=\"\n            cn(\n              'mb-1 flex w-full items-center gap-2 text-xs',\n              isEnd ? 'flex-row-reverse' : 'flex-row',\n            )\n          \"\n        >\n          <span\n            v-if=\"props.authorName\"\n            class=\"font-medium\"\n            data-testid=\"chat-message-author\"\n          >\n            {{ props.authorName }}\n          </span>\n          <Badge\n            v-if=\"showRoleBadge\"\n            variant=\"outline\"\n            size=\"sm\"\n            data-testid=\"chat-message-role-badge\"\n          >\n            {{ props.role }}\n          </Badge>\n          <span\n            v-if=\"formattedTimestamp\"\n            :class=\"\n              cn(\n                'text-[11px] opacity-70',\n                resolvedVariant === 'accent' || resolvedVariant === 'destructive'\n                  ? ''\n                  : 'text-muted-foreground',\n                isEnd ? 'mr-auto' : 'ml-auto',\n              )\n            \"\n            data-testid=\"chat-message-timestamp\"\n          >\n            {{ formattedTimestamp }}\n          </span>\n        </div>\n\n        <!-- body -->\n        <div\n          v-if=\"props.pending\"\n          class=\"flex items-center gap-1 py-1\"\n          data-testid=\"chat-message-pending\"\n          aria-label=\"Typing\"\n        >\n          <span class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60\" />\n          <span\n            class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]\"\n          />\n          <span\n            class=\"size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]\"\n          />\n        </div>\n        <div\n          v-else-if=\"props.allowHtml && props.message\"\n          class=\"whitespace-pre-wrap leading-snug\"\n          data-testid=\"chat-message-body\"\n          v-html=\"props.message\"\n        />\n        <div\n          v-else-if=\"props.message\"\n          class=\"whitespace-pre-wrap leading-snug\"\n          data-testid=\"chat-message-body\"\n        >\n          {{ props.message }}\n        </div>\n      </div>\n\n      <!-- error -->\n      <p\n        v-if=\"props.error\"\n        class=\"text-xs text-destructive\"\n        data-testid=\"chat-message-error\"\n      >\n        {{ props.error }}\n      </p>\n\n      <!-- actions -->\n      <div\n        v-if=\"props.actions && props.actions.length > 0\"\n        :class=\"\n          cn(\n            'flex flex-wrap gap-1',\n            isEnd ? 'justify-end' : 'justify-start',\n          )\n        \"\n        data-testid=\"chat-message-actions\"\n      >\n        <Button\n          v-for=\"action in props.actions\"\n          :key=\"action.id\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          :data-action-id=\"action.id\"\n          @click=\"onAction(action.id)\"\n        >\n          <component\n            :is=\"action.icon ? ActionIcons[action.icon] : null\"\n            v-if=\"action.icon && ActionIcons[action.icon]\"\n          />\n          <span>{{ action.label }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- right-side avatar -->\n    <Avatar\n      v-if=\"isEnd\"\n      size=\"sm\"\n      class=\"mb-1\"\n      data-testid=\"chat-message-avatar\"\n    >\n      <AvatarImage\n        v-if=\"props.authorAvatarUrl\"\n        :src=\"props.authorAvatarUrl\"\n        :alt=\"props.authorName ?? props.role\"\n      />\n      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>\n    </Avatar>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,IAAM,IAAQ,GAQR,IAAO,GAMP,IAAgB,QAChB,EAAM,UAAU,WAAW,EAAM,UAAU,QACtC,EAAM,QAER,EAAM,SAAS,SAAS,QAAQ,OACxC,GAEK,IAAQ,QAAwB,EAAc,UAAU,KAAK,GAI7D,IAAmD;GACvD,MAAM;GACN,WAAW;GACX,QAAQ;GACR,MAAM;EACR,GAEM,IAAkB,QAClB,EAAM,UACD,EAAM,UAER,EAAa,EAAM,SAAS,SACpC,GAEK,IAAiB,EACrB,oFACA;GACE,UAAU;IACR,SAAS;KACP,SAAS;KACT,OAAO;KACP,QAAQ;KACR,aACE;IACJ;IACA,OAAO;KACL,OAAO;KACP,KAAK;IACP;GACF;GACA,iBAAiB;IACf,SAAS;IACT,OAAO;GACT;EACF,CACF,GAIM,IAAc,QAClB,EAAe;GACb,SAAS,EAAgB;GACzB,OAAO,EAAc;EACvB,CAAC,CACH,GAIM,IAAwB,QAAuB;GACnD,IAAI,EAAM,sBACR,OAAO,EAAM;GAEf,IAAM,KAAU,EAAM,cAAc,EAAM,QAAQ,KAAK,KAAK;GAC5D,OAAO,IAAS,EAAO,OAAO,CAAC,EAAE,YAAY,IAAI;EACnD,CAAC,GAIK,IAAqB,QAAuB;GAChD,IAAM,IAAK,EAAM;GACjB,IAAI,CAAC,GACH,OAAO;GAET,IAAM,IAAO,aAAc,OAAO,IAAK,IAAI,KAAK,CAAE;GAClD,IAAI,OAAO,MAAM,EAAK,QAAQ,CAAC,GAC7B,OAAO;GAET,IAAI;IACF,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;KACxC,MAAM;KACN,QAAQ;IACV,CAAC,EAAE,OAAO,CAAI;GAChB,QAAQ;IACN,OAAO,EAAK,YAAY;GAC1B;EACF,CAAC,GAIK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAIK,IAAgB,QACb,EAAQ,EAAM,QAAS,EAAM,SAAS,MAC9C,GAIK,IAAc,EAAsC,CAAC,CAAC;EAE5D,SAAS,EAAa,GAAuB;GAC3C,OAAO,EACJ,QAAQ,iBAAiB,GAAG,MAAiB,IAAK,EAAG,YAAY,IAAI,EAAG,EACxE,QAAQ,SAAS,MAAM,EAAE,YAAY,CAAC;EAC3C;EAEA,eAAe,EAAgB,GAA6C;GAC1E,IAAM,IAAS,EAAQ,QAAQ,MAAM,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,IAAc;GACxE,IAAI,EAAO,WAAW,GACpB;GAGF,IAAM,IAAW,MADC,OAAO,gBAEnB,IAAyC,EAAE,GAAG,EAAY,MAAM;GACtE,KAAK,IAAM,KAAO,GAEhB,EAAK,KAAO,EADC,EAAa,CACL,MAAS;GAEhC,EAAY,QAAQ;EACtB;EAEA,QACQ,EAAM,UACX,MAAS;GACR,EAAqB,KAAQ,CAAC,CAAC;EACjC,GACA;GAAE,WAAW;GAAM,MAAM;EAAK,CAChC;EAEA,SAAS,EAAS,GAAkB;GAClC,EAAK,UAAU,EAAE,MAAG,CAAC;EACvB;yBAIE,EAkKM,OAAA;GAjKH,OAAK,EAAS,EAAA,CAAA,EAAA,+BAAmD,EAAA,QAAK,gBAAA,iBAA4C,EAAA,KAAA,CAAA;GAOlH,aAAW,EAAM;GACjB,cAAY,EAAA;GACZ,gBAAc,EAAA;GACf,eAAY;;GAIH,EAAA,qBAAA,EAAA,GADT,EAYS,EAAA,CAAA,GAAA;;IAVP,MAAK;IACL,OAAM;IACN,eAAY;;qBAMV,CAHM,EAAM,mBAAA,EAAA,GADd,EAIE,EAAA,CAAA,GAAA;;KAFC,KAAK,EAAM;KACX,KAAK,EAAM,cAAc,EAAM;8CAElC,EAA4D,EAAA,CAAA,GAAA,MAAA;sBAAjB,CAAA,EAAA,EAAxB,EAAA,KAAqB,GAAA,CAAA,CAAA,CAAA;;;;;GAG1C,EAsHM,OAAA,EArHH,OAAK,EAAW,EAAA,CAAA,EAAA,+BAAuD,EAAA,QAAK,cAAA,aAAA,CAAA,EAAA,GAAA;IAQ7E,EAuEM,OAAA;KAvEA,OAAK,EAAE,EAAA,KAAW;KAAE,eAAY;QAG5B,EAAM,cAAc,EAAA,SAAiB,EAAA,SAAA,EAAA,GAD7C,EAuCM,OAAA;;KArCH,OAAK,EAAe,EAAA,CAAA,EAAA,+CAA+E,EAAA,QAAK,qBAAA,UAAA,CAAA;;KAQjG,EAAM,cAAA,EAAA,GADd,EAMO,QANP,GAMO,EADF,EAAM,UAAU,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;KAGb,EAAA,SAAA,EAAA,GADR,EAOQ,EAAA,CAAA,GAAA;;MALN,SAAQ;MACR,MAAK;MACL,eAAY;;uBAEI,CAAA,EAAA,EAAb,EAAM,IAAI,GAAA,CAAA,CAAA,CAAA;;;KAGP,EAAA,SAAA,EAAA,GADR,EAcO,QAAA;;MAZJ,OAAK,EAAiB,EAAA,CAAA,EAAA,0BAA8D,EAAA,UAAe,YAAiB,EAAA,UAAe,gBAAA,KAAA,yBAAuG,EAAA,QAAK,YAAA,SAAA,CAAA;MAShP,eAAY;UAET,EAAA,KAAkB,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;wBAMjB,EAAM,WAAA,EAAA,GADd,EAaM,OAbN,GAaM,CAAA,GAAA,AAAA,EAAA,OAAA;KAPJ,EAA2E,QAAA,EAArE,OAAM,6DAA4D,GAAA,MAAA,EAAA;KACxE,EAEE,QAAA,EADA,OAAM,qFAAoF,GAAA,MAAA,EAAA;KAE5F,EAEE,QAAA,EADA,OAAM,qFAAoF,GAAA,MAAA,EAAA;WAIjF,EAAM,aAAa,EAAM,WAAA,EAAA,GADtC,EAKE,OAAA;;KAHA,OAAM;KACN,eAAY;KACZ,WAAQ,EAAM;sBAGH,EAAM,WAAA,EAAA,GADnB,EAMM,OANN,GAMM,EADD,EAAM,OAAO,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA;IAMZ,EAAM,SAAA,EAAA,GADd,EAMI,KANJ,GAMI,EADC,EAAM,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAKR,EAAM,WAAW,EAAM,QAAQ,SAAM,KAAA,EAAA,GAD7C,EAyBM,OAAA;;KAvBH,OAAK,EAAa,EAAA,CAAA,EAAA,wBAAoD,EAAA,QAAK,gBAAA,eAAA,CAAA;KAM5E,eAAY;gBAEZ,EAcS,GAAA,MAAA,EAbU,EAAM,UAAhB,YADT,EAcS,EAAA,CAAA,GAAA;KAZN,KAAK,EAAO;KACb,MAAK;KACL,SAAQ;KACR,MAAK;KACJ,kBAAgB,EAAO;KACvB,UAAK,MAAE,EAAS,EAAO,EAAE;;sBAKxB,CADM,EAAO,QAAQ,EAAA,MAAY,EAAO,SAAA,EAAA,GAF1C,EAGE,EAFK,EAAO,OAAO,EAAA,MAAY,EAAO,QAAI,IAAA,GAAA,EAAA,KAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAG5C,EAA+B,QAAA,MAAA,EAAtB,EAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;GAOnB,EAAA,SAAA,EAAA,GADR,EAYS,EAAA,CAAA,GAAA;;IAVP,MAAK;IACL,OAAM;IACN,eAAY;;qBAMV,CAHM,EAAM,mBAAA,EAAA,GADd,EAIE,EAAA,CAAA,GAAA;;KAFC,KAAK,EAAM;KACX,KAAK,EAAM,cAAc,EAAM;8CAElC,EAA4D,EAAA,CAAA,GAAA,MAAA;sBAAjB,CAAA,EAAA,EAAxB,EAAA,KAAqB,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/CheckboxBoolean-Br3cEUia.js

@@ -0,0 +1,79 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { t } from "./checkbox-BunQDZRV.js";
+import { n } from "./label-I5voJX5E.js";
+import { t as r } from "./field-frame-n5oLDNBT.js";
+import { createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, openBlock as f, toDisplayString as p, unref as m, useModel as h, withCtx as g } from "vue";
+//#region src/components/compositions/elements/boolean/CheckboxBoolean.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "flex items-start gap-2" }, v = {
+	key: 1,
+	class: "sr-only",
+	"data-testid": "field-frame-label-sr"
+}, y = /* @__PURE__ */ u({
+	__name: "CheckboxBoolean",
+	props: /* @__PURE__ */ d({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let u = h(e, "modelValue");
+		function d(e) {
+			u.value = e === !0;
+		}
+		return (h, y) => (f(), i(m(r), {
+			"hide-label": !0,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: g(() => [s("div", _, [l(m(t), {
+				id: e.id,
+				name: e.name,
+				disabled: e.disabled || e.readonly,
+				required: e.required,
+				"model-value": u.value,
+				"data-element-name": e.name ?? void 0,
+				"onUpdate:modelValue": d
+			}, null, 8, [
+				"id",
+				"name",
+				"disabled",
+				"required",
+				"model-value",
+				"data-element-name"
+			]), !e.hideLabel && e.label ? (f(), i(m(n), {
+				key: 0,
+				for: e.id,
+				required: e.required,
+				class: "cursor-pointer leading-tight",
+				"data-testid": "field-frame-label"
+			}, {
+				default: g(() => [c(p(e.label), 1)]),
+				_: 1
+			}, 8, ["for", "required"])) : e.label ? (f(), o("span", v, p(e.label), 1)) : a("", !0)])]),
+			_: 1
+		}, 8, [
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), b = /* @__PURE__ */ e({ default: () => x }), x = y;
+//#endregion
+export { b as n, x as t };
+
+//# sourceMappingURL=CheckboxBoolean-Br3cEUia.js.map

package/dist/chunks/CheckboxBoolean-Br3cEUia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxBoolean-Br3cEUia.js","names":[],"sources":["../../src/components/compositions/elements/boolean/CheckboxBoolean.vue","../../src/components/compositions/elements/boolean/CheckboxBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven checkbox composition. Wraps the shadcn-vue Checkbox\n * primitive with `FieldFrame` chrome (label + helpText + errors).\n *\n *   <CheckboxBoolean v-model=\"agreed\" label=\"I agree\" required />\n */\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<CheckboxBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nfunction onUpdate(checked: boolean | \"indeterminate\"): void {\n  model.value = checked === true\n}\n</script>\n\n<template>\n  <FieldFrame\n    :hide-label=\"true\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <Checkbox\n        :id=\"id\"\n        :name=\"name\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :model-value=\"model\"\n        :data-element-name=\"name ?? undefined\"\n        @update:model-value=\"onUpdate\"\n      />\n      <Label\n        v-if=\"!hideLabel && label\"\n        :for=\"id\"\n        :required=\"required\"\n        class=\"cursor-pointer leading-tight\"\n        data-testid=\"field-frame-label\"\n      >\n        {{ label }}\n      </Label>\n      <span\n        v-else-if=\"label\"\n        class=\"sr-only\"\n        data-testid=\"field-frame-label-sr\"\n      >\n        {{ label }}\n      </span>\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven checkbox composition. Wraps the shadcn-vue Checkbox\n * primitive with `FieldFrame` chrome (label + helpText + errors).\n *\n *   <CheckboxBoolean v-model=\"agreed\" label=\"I agree\" required />\n */\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<CheckboxBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nfunction onUpdate(checked: boolean | \"indeterminate\"): void {\n  model.value = checked === true\n}\n</script>\n\n<template>\n  <FieldFrame\n    :hide-label=\"true\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-start gap-2\">\n      <Checkbox\n        :id=\"id\"\n        :name=\"name\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :model-value=\"model\"\n        :data-element-name=\"name ?? undefined\"\n        @update:model-value=\"onUpdate\"\n      />\n      <Label\n        v-if=\"!hideLabel && label\"\n        :for=\"id\"\n        :required=\"required\"\n        class=\"cursor-pointer leading-tight\"\n        data-testid=\"field-frame-label\"\n      >\n        {{ label }}\n      </Label>\n      <span\n        v-else-if=\"label\"\n        class=\"sr-only\"\n        data-testid=\"field-frame-label-sr\"\n      >\n        {{ label }}\n      </span>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,IAAM,IAAQ,EAAoB,GAAC,YAAgC;EAEnE,SAAS,EAAS,GAA0C;GAC1D,EAAM,QAAQ,MAAY;EAC5B;yBAIE,EAiCa,EAAA,CAAA,GAAA;GAhCV,cAAY;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA4BH,CA1BN,EA0BM,OA1BN,GA0BM,CAzBJ,EAQE,EAAA,CAAA,GAAA;IAPC,IAAI,EAAA;IACJ,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,eAAa,EAAA;IACb,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,uBAAoB;;;;;;;;QAGd,EAAA,aAAa,EAAA,SAAA,EAAA,GADtB,EAQQ,EAAA,CAAA,GAAA;;IANL,KAAK,EAAA;IACL,UAAU,EAAA;IACX,OAAM;IACN,eAAY;;qBAED,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;iCAGG,EAAA,SAAA,EAAA,GADb,EAMO,QANP,GAMO,EADF,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/CheckboxOption-CckqMgyH.js

@@ -0,0 +1,96 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { t } from "./checkbox-BunQDZRV.js";
+import { n } from "./label-I5voJX5E.js";
+import { t as r } from "./field-frame-n5oLDNBT.js";
+import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, renderList as h, toDisplayString as g, unref as _, useModel as v, withCtx as y } from "vue";
+//#region src/components/compositions/elements/option-select/CheckboxOption.vue?vue&type=script&setup=true&lang.ts
+var b = ["data-element-name"], x = /* @__PURE__ */ d({
+	__name: "CheckboxOption",
+	props: /* @__PURE__ */ f({
+		modelValue: {},
+		options: { default: () => [] },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		inline: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let d = e, f = v(e, "modelValue");
+		function x(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let S = a(() => (d.options ?? []).map(x)), C = a(() => {
+			let e = f.value;
+			return e ? Array.isArray(e) ? e.map((e) => String(e)) : [String(e)] : [];
+		});
+		function w(e) {
+			return C.value.includes(e);
+		}
+		function T(e, t) {
+			let n = C.value;
+			t === !0 ? n.includes(e) || (f.value = [...n, e]) : f.value = n.filter((t) => t !== e);
+		}
+		return (a, d) => (m(), o(_(r), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: y(() => [c("div", {
+				class: p(e.inline ? "flex flex-row flex-wrap gap-4" : "grid gap-2"),
+				"data-element-name": e.name ?? void 0
+			}, [(m(!0), s(i, null, h(S.value, (r) => (m(), s("div", {
+				key: r.value,
+				class: "flex items-center gap-2"
+			}, [u(_(t), {
+				id: `${e.id ?? "checkbox"}-${r.value}`,
+				name: e.name,
+				"model-value": w(r.value),
+				disabled: r.disabled || e.disabled || e.readonly,
+				"onUpdate:modelValue": (e) => T(r.value, e)
+			}, null, 8, [
+				"id",
+				"name",
+				"model-value",
+				"disabled",
+				"onUpdate:modelValue"
+			]), u(_(n), {
+				for: `${e.id ?? "checkbox"}-${r.value}`,
+				class: "cursor-pointer"
+			}, {
+				default: y(() => [l(g(r.label), 1)]),
+				_: 2
+			}, 1032, ["for"])]))), 128))], 10, b)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"help-text",
+			"errors"
+		]));
+	}
+}), S = /* @__PURE__ */ e({ default: () => C }), C = x;
+//#endregion
+export { S as n, C as t };
+
+//# sourceMappingURL=CheckboxOption-CckqMgyH.js.map

package/dist/chunks/CheckboxOption-CckqMgyH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption-CckqMgyH.js","names":[],"sources":["../../src/components/compositions/elements/option-select/CheckboxOption.vue","../../src/components/compositions/elements/option-select/CheckboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven multi-checkbox composition. Renders one Checkbox per\n * option and stores the result as an array of selected values.\n *\n *   <CheckboxOption v-model=\"prefs\" :options=\"[...]\" label=\"Preferences\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxOptionProps {\n  modelValue?: Array<string | number> | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  inline?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<CheckboxOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n  const v = model.value\n  if (!v) {\n    return []\n  }\n  if (Array.isArray(v)) {\n    return v.map((x) => String(x))\n  }\n  return [String(v)]\n})\n\nfunction isChecked(val: string): boolean {\n  return selected.value.includes(val)\n}\n\nfunction onToggle(val: string, checked: boolean | \"indeterminate\"): void {\n  const current = selected.value\n  if (checked === true) {\n    if (!current.includes(val)) {\n      model.value = [...current, val]\n    }\n  } else {\n    model.value = current.filter((v) => v !== val)\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      :class=\"inline ? 'flex flex-row flex-wrap gap-4' : 'grid gap-2'\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        class=\"flex items-center gap-2\"\n      >\n        <Checkbox\n          :id=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          :name=\"name\"\n          :model-value=\"isChecked(opt.value)\"\n          :disabled=\"opt.disabled || disabled || readonly\"\n          @update:model-value=\"(c) => onToggle(opt.value, c)\"\n        />\n        <Label\n          :for=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          class=\"cursor-pointer\"\n        >\n          {{ opt.label }}\n        </Label>\n      </div>\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven multi-checkbox composition. Renders one Checkbox per\n * option and stores the result as an array of selected values.\n *\n *   <CheckboxOption v-model=\"prefs\" :options=\"[...]\" label=\"Preferences\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxOptionProps {\n  modelValue?: Array<string | number> | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  inline?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<CheckboxOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n  const v = model.value\n  if (!v) {\n    return []\n  }\n  if (Array.isArray(v)) {\n    return v.map((x) => String(x))\n  }\n  return [String(v)]\n})\n\nfunction isChecked(val: string): boolean {\n  return selected.value.includes(val)\n}\n\nfunction onToggle(val: string, checked: boolean | \"indeterminate\"): void {\n  const current = selected.value\n  if (checked === true) {\n    if (!current.includes(val)) {\n      model.value = [...current, val]\n    }\n  } else {\n    model.value = current.filter((v) => v !== val)\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      :class=\"inline ? 'flex flex-row flex-wrap gap-4' : 'grid gap-2'\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        class=\"flex items-center gap-2\"\n      >\n        <Checkbox\n          :id=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          :name=\"name\"\n          :model-value=\"isChecked(opt.value)\"\n          :disabled=\"opt.disabled || disabled || readonly\"\n          @update:model-value=\"(c) => onToggle(opt.value, c)\"\n        />\n        <Label\n          :for=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          class=\"cursor-pointer\"\n        >\n          {{ opt.label }}\n        </Label>\n      </div>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,IAAM,IAAQ,GAKR,IAAQ,EAA0C,GAAC,YAAY;EAQrE,SAAS,EAAgB,GAAyC;GAIhE,OAHI,OAAO,KAAQ,WACV;IAAE,OAAO;IAAK,OAAO;IAAK,UAAU;GAAM,IAE5C;IACL,OAAO,EAAI;IACX,OAAO,OAAO,EAAI,KAAK;IACvB,UAAU,EAAQ,EAAI;GACxB;EACF;EAEA,IAAM,IAAa,SAChB,EAAM,WAAW,CAAC,GAAG,IAAI,CAAe,CAC3C,GAEM,IAAW,QAAyB;GACxC,IAAM,IAAI,EAAM;GAOhB,OANK,IAGD,MAAM,QAAQ,CAAC,IACV,EAAE,KAAK,MAAM,OAAO,CAAC,CAAC,IAExB,CAAC,OAAO,CAAC,CAAC,IALR,CAAC;EAMZ,CAAC;EAED,SAAS,EAAU,GAAsB;GACvC,OAAO,EAAS,MAAM,SAAS,CAAG;EACpC;EAEA,SAAS,EAAS,GAAa,GAA0C;GACvE,IAAM,IAAU,EAAS;GACzB,AAAI,MAAY,KACT,EAAQ,SAAS,CAAG,MACvB,EAAM,QAAQ,CAAC,GAAG,GAAS,CAAG,KAGhC,EAAM,QAAQ,EAAQ,QAAQ,MAAM,MAAM,CAAG;EAEjD;yBAIE,EA+Ba,EAAA,CAAA,GAAA;GA9BV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAyBH,CAvBN,EAuBM,OAAA;IAtBH,OAAK,EAAE,EAAA,SAAM,kCAAA,YAAA;IACb,qBAAmB,EAAA,QAAQ,KAAA;eAE5B,EAkBM,GAAA,MAAA,EAjBU,EAAA,QAAP,YADT,EAkBM,OAAA;IAhBH,KAAK,EAAI;IACV,OAAM;OAEN,EAME,EAAA,CAAA,GAAA;IALC,IAAE,GAAK,EAAA,MAAE,WAAA,GAAkB,EAAI;IAC/B,MAAM,EAAA;IACN,eAAa,EAAU,EAAI,KAAK;IAChC,UAAU,EAAI,YAAY,EAAA,YAAY,EAAA;IACtC,wBAAqB,MAAM,EAAS,EAAI,OAAO,CAAC;;;;;;;OAEnD,EAKQ,EAAA,CAAA,GAAA;IAJL,KAAG,GAAK,EAAA,MAAE,WAAA,GAAkB,EAAI;IACjC,OAAM;;qBAES,CAAA,EAAA,EAAZ,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}