@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/display/ChartDisplay.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/compositions/elements/display/ChartDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../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 */\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</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      :is=\"chartComponent\"\n      :data=\"data\"\n      :options=\"mergedOptions\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAkDA,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;yBAIA,EAWM,OAAA;GAVH,OAAK,EAAE,EAAA,KAAY;GACnB,OAAK,EAAE,EAAA,KAAc;GACtB,eAAY;GACX,mBAAiB,EAAA;YAElB,EAIE,EAHK,EAAA,KAAc,GAAA;GAClB,MAAM,EAAA;GACN,SAAS,EAAA"}

package/dist/components/compositions/elements/display/HtmlDisplay.js

@@ -0,0 +1,7 @@
+import e from "./HtmlDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/HtmlDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=HtmlDisplay.js.map

package/dist/components/compositions/elements/display/HtmlDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/HtmlDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven raw HTML display.\n *\n * SECURITY: the caller is responsible for trusting the source of\n * `value`. The wrapping `<div>` provides a styling boundary but does\n * not sanitise the markup. Pair with a server-side sanitiser when\n * accepting user input.\n */\nimport { computed } from \"vue\"\n\nexport interface HtmlDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<HtmlDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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</script>\n\n<template>\n  <div\n    class=\"gxp-html-display\"\n    :class=\"rootClass\"\n    data-testid=\"html-display\"\n    v-html=\"content\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/HtmlDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/compositions/elements/display/HtmlDisplay.vue?vue&type=script&setup=true&lang.ts
+var a = ["innerHTML"], o = /* @__PURE__ */ n({
+	__name: "HtmlDisplay",
+	props: {
+		value: {},
+		classList: {}
+	},
+	setup(n) {
+		let o = n, s = e(() => o.value === void 0 || o.value === null ? "" : String(o.value)), c = e(() => {
+			let e = o.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (e, n) => (i(), t("div", {
+			class: r(["gxp-html-display", c.value]),
+			"data-testid": "html-display",
+			innerHTML: s.value
+		}, null, 10, a));
+	}
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=HtmlDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/HtmlDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/HtmlDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven raw HTML display.\n *\n * SECURITY: the caller is responsible for trusting the source of\n * `value`. The wrapping `<div>` provides a styling boundary but does\n * not sanitise the markup. Pair with a server-side sanitiser when\n * accepting user input.\n */\nimport { computed } from \"vue\"\n\nexport interface HtmlDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<HtmlDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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</script>\n\n<template>\n  <div\n    class=\"gxp-html-display\"\n    :class=\"rootClass\"\n    data-testid=\"html-display\"\n    v-html=\"content\"\n  />\n</template>\n"],"mappings":";;;;;;;;;EAgBA,IAAM,IAAQ,GAER,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAKE,OAAA;GAJA,OAAK,EAAA,CAAC,oBACE,EAAA,KAAS,CAAA;GACjB,eAAY;GACZ,WAAQ,EAAA"}

package/dist/components/compositions/elements/display/IconDisplay.js

@@ -0,0 +1,7 @@
+import e from "./IconDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/IconDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=IconDisplay.js.map

package/dist/components/compositions/elements/display/IconDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/IconDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon display.\n *\n * Dynamically resolves a lucide icon by its PascalCase name (kebab-case\n * is normalised). The library is lazy-imported so we only pay for it\n * when an icon actually renders.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { X } from \"@lucide/vue\"\n\nexport interface IconDisplayProps {\n  iconName?: string\n  size?: number\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<IconDisplayProps>(), {\n  size: 20,\n})\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\nconst resolvedIconName = computed<string>(() => {\n  if (!props.iconName) {\n    return \"\"\n  }\n  return toPascalCase(props.iconName)\n})\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\nconst sizeStyle = computed<Record<string, string>>(() => ({\n  width: `${props.size}px`,\n  height: `${props.size}px`,\n}))\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[name] ?? null\n}\n\nwatch(\n  resolvedIconName,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span\n    class=\"inline-flex items-center\"\n    :class=\"rootClass\"\n    :data-icon-name=\"resolvedIconName\"\n    data-testid=\"icon-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"ResolvedIcon\"\n      :style=\"sizeStyle\"\n      :aria-label=\"resolvedIconName\"\n    />\n    <X\n      v-else-if=\"!resolvedIconName\"\n      :style=\"sizeStyle\"\n      class=\"text-muted-foreground\"\n      aria-hidden=\"true\"\n      data-testid=\"icon-display-fallback\"\n    />\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/IconDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, resolveDynamicComponent as l, unref as u, watch as d } from "vue";
+import { X as f } from "@lucide/vue";
+//#region src/components/compositions/elements/display/IconDisplay.vue?vue&type=script&setup=true&lang.ts
+var p = ["data-icon-name"], m = /* @__PURE__ */ i({
+	__name: "IconDisplay",
+	props: {
+		iconName: {},
+		size: { default: 20 },
+		classList: {}
+	},
+	setup(i) {
+		let m = i;
+		function h(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		let g = e(() => m.iconName ? h(m.iconName) : ""), _ = e(() => {
+			let e = m.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), v = e(() => ({
+			width: `${m.size}px`,
+			height: `${m.size}px`
+		})), y = c(null);
+		async function b(e) {
+			if (!e) {
+				y.value = null;
+				return;
+			}
+			y.value = (await import("@lucide/vue"))[e] ?? null;
+		}
+		return d(g, (e) => {
+			b(e);
+		}, { immediate: !0 }), (e, i) => (s(), r("span", {
+			class: a(["inline-flex items-center", _.value]),
+			"data-icon-name": g.value,
+			"data-testid": "icon-display"
+		}, [y.value ? (s(), t(l(y.value), {
+			key: 0,
+			style: o(v.value),
+			"aria-label": g.value
+		}, null, 8, ["style", "aria-label"])) : g.value ? n("", !0) : (s(), t(u(f), {
+			key: 1,
+			style: o(v.value),
+			class: "text-muted-foreground",
+			"aria-hidden": "true",
+			"data-testid": "icon-display-fallback"
+		}, null, 8, ["style"]))], 10, p));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=IconDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/IconDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/IconDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon display.\n *\n * Dynamically resolves a lucide icon by its PascalCase name (kebab-case\n * is normalised). The library is lazy-imported so we only pay for it\n * when an icon actually renders.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { X } from \"@lucide/vue\"\n\nexport interface IconDisplayProps {\n  iconName?: string\n  size?: number\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<IconDisplayProps>(), {\n  size: 20,\n})\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\nconst resolvedIconName = computed<string>(() => {\n  if (!props.iconName) {\n    return \"\"\n  }\n  return toPascalCase(props.iconName)\n})\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\nconst sizeStyle = computed<Record<string, string>>(() => ({\n  width: `${props.size}px`,\n  height: `${props.size}px`,\n}))\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[name] ?? null\n}\n\nwatch(\n  resolvedIconName,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <span\n    class=\"inline-flex items-center\"\n    :class=\"rootClass\"\n    :data-icon-name=\"resolvedIconName\"\n    data-testid=\"icon-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"ResolvedIcon\"\n      :style=\"sizeStyle\"\n      :aria-label=\"resolvedIconName\"\n    />\n    <X\n      v-else-if=\"!resolvedIconName\"\n      :style=\"sizeStyle\"\n      class=\"text-muted-foreground\"\n      aria-hidden=\"true\"\n      data-testid=\"icon-display-fallback\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;EAiBA,IAAM,IAAQ;EAId,SAAS,EAAa,GAAuB;GAC3C,OAAO,EACJ,QAAQ,iBAAiB,GAAG,MAAiB,IAAK,EAAG,YAAY,IAAI,EAAG,EACxE,QAAQ,SAAS,MAAM,EAAE,YAAY,CAAC;EAC3C;EAEA,IAAM,IAAmB,QAClB,EAAM,WAGJ,EAAa,EAAM,QAAQ,IAFzB,EAGV,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAEK,IAAY,SAAwC;GACxD,OAAO,GAAG,EAAM,KAAK;GACrB,QAAQ,GAAG,EAAM,KAAK;EACxB,EAAE,GAEI,IAAe,EAAsB,IAAI;EAE/C,eAAe,EAAS,GAA6B;GACnD,IAAI,CAAC,GAAM;IACT,EAAa,QAAQ;IACrB;GACF;GAGA,EAAa,SAAQ,MAFH,OAAO,gBAEK,MAAS;EACzC;SAEA,EACE,IACC,MAAS;GACR,EAAc,CAAI;EACpB,GACA,EAAE,WAAW,GAAK,CACpB,mBAIE,EAmBO,QAAA;GAlBL,OAAK,EAAA,CAAC,4BACE,EAAA,KAAS,CAAA;GAChB,kBAAgB,EAAA;GACjB,eAAY;MAIJ,EAAA,SAAA,EAAA,GAFR,EAKE,EAJK,EAAA,KAAY,GAAA;;GAEhB,OAAK,EAAE,EAAA,KAAS;GAChB,cAAY,EAAA;0CAGD,EAAA,qBAAA,EAAA,GADd,EAME,EAAA,CAAA,GAAA;;GAJC,OAAK,EAAE,EAAA,KAAS;GACjB,OAAM;GACN,eAAY;GACZ,eAAY"}

package/dist/components/compositions/elements/display/IframeDisplay.js

@@ -0,0 +1,7 @@
+import e from "./IframeDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/IframeDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=IframeDisplay.js.map

package/dist/components/compositions/elements/display/IframeDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/IframeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven iframe display.\n *\n * Embeds a remote document inside a sandboxed iframe. The wrapper\n * enforces a 16:9 aspect ratio and responsive width by default.\n */\nimport { computed } from \"vue\"\n\nexport interface IframeDisplayProps {\n  src?: string\n  title?: string\n  sandbox?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<IframeDisplayProps>(), {\n  sandbox: \"allow-scripts allow-same-origin\",\n})\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</script>\n\n<template>\n  <div\n    class=\"relative w-full overflow-hidden rounded-lg border\"\n    :class=\"rootClass\"\n    style=\"aspect-ratio: 16 / 9\"\n    data-testid=\"iframe-display\"\n  >\n    <iframe\n      v-if=\"src\"\n      :src=\"src\"\n      :title=\"title ?? 'Embedded content'\"\n      class=\"absolute inset-0 h-full w-full\"\n      :sandbox=\"sandbox\"\n      loading=\"lazy\"\n      referrerpolicy=\"no-referrer\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/IframeDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
+//#region src/components/compositions/elements/display/IframeDisplay.vue?vue&type=script&setup=true&lang.ts
+var o = [
+	"src",
+	"title",
+	"sandbox"
+], s = /* @__PURE__ */ r({
+	__name: "IframeDisplay",
+	props: {
+		src: {},
+		title: {},
+		sandbox: { default: "allow-scripts allow-same-origin" },
+		classList: {}
+	},
+	setup(r) {
+		let s = r, c = e(() => {
+			let e = s.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (e, s) => (a(), n("div", {
+			class: i(["relative w-full overflow-hidden rounded-lg border", c.value]),
+			style: { "aspect-ratio": "16 / 9" },
+			"data-testid": "iframe-display"
+		}, [r.src ? (a(), n("iframe", {
+			key: 0,
+			src: r.src,
+			title: r.title ?? "Embedded content",
+			class: "absolute inset-0 h-full w-full",
+			sandbox: r.sandbox,
+			loading: "lazy",
+			referrerpolicy: "no-referrer"
+		}, null, 8, o)) : t("", !0)], 2));
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=IframeDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/IframeDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/IframeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven iframe display.\n *\n * Embeds a remote document inside a sandboxed iframe. The wrapper\n * enforces a 16:9 aspect ratio and responsive width by default.\n */\nimport { computed } from \"vue\"\n\nexport interface IframeDisplayProps {\n  src?: string\n  title?: string\n  sandbox?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<IframeDisplayProps>(), {\n  sandbox: \"allow-scripts allow-same-origin\",\n})\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</script>\n\n<template>\n  <div\n    class=\"relative w-full overflow-hidden rounded-lg border\"\n    :class=\"rootClass\"\n    style=\"aspect-ratio: 16 / 9\"\n    data-testid=\"iframe-display\"\n  >\n    <iframe\n      v-if=\"src\"\n      :src=\"src\"\n      :title=\"title ?? 'Embedded content'\"\n      class=\"absolute inset-0 h-full w-full\"\n      :sandbox=\"sandbox\"\n      loading=\"lazy\"\n      referrerpolicy=\"no-referrer\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAgBA,IAAM,IAAQ,GAIR,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAeM,OAAA;GAdJ,OAAK,EAAA,CAAC,qDACE,EAAA,KAAS,CAAA;GACjB,OAAA,EAAA,gBAAA,SAAA;GACA,eAAY;MAGJ,EAAA,OAAA,EAAA,GADR,EAQE,UAAA;;GANC,KAAK,EAAA;GACL,OAAO,EAAA,SAAK;GACb,OAAM;GACL,SAAS,EAAA;GACV,SAAQ;GACR,gBAAe"}

package/dist/components/compositions/elements/display/ImageDisplay.js

@@ -0,0 +1,7 @@
+import e from "./ImageDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/ImageDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ImageDisplay.js.map

package/dist/components/compositions/elements/display/ImageDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/ImageDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven image display.\n *\n * Shows a responsive `<img>` when `src` is set, otherwise renders a\n * dashed placeholder.\n */\nimport { computed } from \"vue\"\nimport { ImageIcon } from \"@lucide/vue\"\n\nexport interface ImageDisplayProps {\n  src?: string\n  alt?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<ImageDisplayProps>()\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</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"image-display\"\n  >\n    <img\n      v-if=\"src\"\n      :src=\"src\"\n      :alt=\"alt ?? ''\"\n      class=\"h-auto max-w-full rounded\"\n      loading=\"lazy\"\n    >\n    <div\n      v-else\n      class=\"flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-muted-foreground\"\n      data-testid=\"image-display-empty\"\n    >\n      <ImageIcon class=\"size-6\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/ImageDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { computed as e, createElementBlock as t, createVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, unref as o } from "vue";
+import { ImageIcon as s } from "@lucide/vue";
+//#region src/components/compositions/elements/display/ImageDisplay.vue?vue&type=script&setup=true&lang.ts
+var c = ["src", "alt"], l = {
+	key: 1,
+	class: "flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-muted-foreground",
+	"data-testid": "image-display-empty"
+}, u = /* @__PURE__ */ r({
+	__name: "ImageDisplay",
+	props: {
+		src: {},
+		alt: {},
+		classList: {}
+	},
+	setup(r) {
+		let u = r, d = e(() => {
+			let e = u.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (e, u) => (a(), t("div", {
+			class: i(["inline-block", d.value]),
+			"data-testid": "image-display"
+		}, [r.src ? (a(), t("img", {
+			key: 0,
+			src: r.src,
+			alt: r.alt ?? "",
+			class: "h-auto max-w-full rounded",
+			loading: "lazy"
+		}, null, 8, c)) : (a(), t("div", l, [n(o(s), { class: "size-6" })]))], 2));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=ImageDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/ImageDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/ImageDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven image display.\n *\n * Shows a responsive `<img>` when `src` is set, otherwise renders a\n * dashed placeholder.\n */\nimport { computed } from \"vue\"\nimport { ImageIcon } from \"@lucide/vue\"\n\nexport interface ImageDisplayProps {\n  src?: string\n  alt?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<ImageDisplayProps>()\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</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"image-display\"\n  >\n    <img\n      v-if=\"src\"\n      :src=\"src\"\n      :alt=\"alt ?? ''\"\n      class=\"h-auto max-w-full rounded\"\n      loading=\"lazy\"\n    >\n    <div\n      v-else\n      class=\"flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-muted-foreground\"\n      data-testid=\"image-display-empty\"\n    >\n      <ImageIcon class=\"size-6\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAgBA,IAAM,IAAQ,GAER,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAmBM,OAAA;GAlBJ,OAAK,EAAA,CAAC,gBACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAGJ,EAAA,OAAA,EAAA,GADR,EAMC,OAAA;;GAJE,KAAK,EAAA;GACL,KAAK,EAAA,OAAG;GACT,OAAM;GACN,SAAQ;0BAEV,EAMM,OANN,GAMM,CADJ,EAA4B,EAAA,CAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA"}

package/dist/components/compositions/elements/display/MarkdownDisplay.js

@@ -0,0 +1,7 @@
+import e from "./MarkdownDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/MarkdownDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=MarkdownDisplay.js.map

package/dist/components/compositions/elements/display/MarkdownDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/MarkdownDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven markdown display.\n *\n * Renders a tiny, dependency-free markdown subset (headings, bold,\n * italic, code, fenced code, links, lists). Output is sanitised by\n * escaping HTML in the raw source before transformation. For\n * real-world rich markdown, swap in `marked` or `markdown-it`.\n */\nimport { computed } from \"vue\"\n\nexport interface MarkdownDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<MarkdownDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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\nfunction escapeHtml(input: string): string {\n  return input\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\")\n}\n\nfunction renderMarkdown(src: string): string {\n  if (!src) {\n    return \"\"\n  }\n  let text = escapeHtml(src)\n\n  // Fenced code blocks ```...```\n  text = text.replace(/```([\\s\\S]*?)```/g, (_, code: string) => {\n    return `<pre class=\"bg-muted rounded p-3 overflow-auto\"><code class=\"font-mono text-sm\">${code.trim()}</code></pre>`\n  })\n\n  // Inline code `...`\n  text = text.replace(/`([^`\\n]+)`/g, '<code class=\"font-mono bg-muted px-1 rounded text-sm\">$1</code>')\n\n  // Headings (# .. ######)\n  text = text.replace(/^######\\s+(.+)$/gm, '<h6 class=\"text-base font-semibold\">$1</h6>')\n  text = text.replace(/^#####\\s+(.+)$/gm, '<h5 class=\"text-lg font-semibold\">$1</h5>')\n  text = text.replace(/^####\\s+(.+)$/gm, '<h4 class=\"text-xl font-semibold\">$1</h4>')\n  text = text.replace(/^###\\s+(.+)$/gm, '<h3 class=\"text-2xl font-semibold\">$1</h3>')\n  text = text.replace(/^##\\s+(.+)$/gm, '<h2 class=\"text-3xl font-semibold\">$1</h2>')\n  text = text.replace(/^#\\s+(.+)$/gm, '<h1 class=\"text-4xl font-bold\">$1</h1>')\n\n  // Bold **text**\n  text = text.replace(/\\*\\*([^*]+)\\*\\*/g, \"<strong>$1</strong>\")\n  // Italic *text*\n  text = text.replace(/(^|[^*])\\*([^*\\n]+)\\*(?!\\*)/g, \"$1<em>$2</em>\")\n\n  // Links [text](url)\n  text = text.replace(\n    /\\[([^\\]]+)\\]\\(([^)\\s]+)\\)/g,\n    '<a href=\"$2\" class=\"text-primary underline\" target=\"_blank\" rel=\"noreferrer\">$1</a>',\n  )\n\n  // Unordered list items\n  text = text.replace(/^\\s*[-*+]\\s+(.+)$/gm, \"<li>$1</li>\")\n  // Ordered list items\n  text = text.replace(/^\\s*\\d+\\.\\s+(.+)$/gm, \"<li>$1</li>\")\n  // Wrap consecutive <li> in <ul>\n  text = text.replace(/(<li>[\\s\\S]*?<\\/li>)(?!\\s*<li>)/g, \"<ul class=\\\"list-disc pl-6\\\">$1</ul>\")\n\n  // Paragraphs: any remaining double-newline blocks\n  text = text\n    .split(/\\n{2,}/)\n    .map((block) => {\n      if (/^<(h\\d|ul|ol|pre|blockquote|li)/.test(block.trim())) {\n        return block\n      }\n      const trimmed = block.trim()\n      return trimmed ? `<p class=\"leading-7\">${trimmed.replace(/\\n/g, \"<br />\")}</p>` : \"\"\n    })\n    .join(\"\\n\")\n\n  return text\n}\n\nconst html = computed<string>(() => renderMarkdown(content.value))\n</script>\n\n<template>\n  <div\n    class=\"prose prose-sm max-w-none\"\n    :class=\"rootClass\"\n    data-testid=\"markdown-display\"\n    v-html=\"html\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/MarkdownDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/compositions/elements/display/MarkdownDisplay.vue?vue&type=script&setup=true&lang.ts
+var a = ["innerHTML"], o = /* @__PURE__ */ n({
+	__name: "MarkdownDisplay",
+	props: {
+		value: {},
+		classList: {}
+	},
+	setup(n) {
+		let o = n, s = e(() => o.value === void 0 || o.value === null ? "" : String(o.value)), c = e(() => {
+			let e = o.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		function l(e) {
+			return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		}
+		function u(e) {
+			if (!e) return "";
+			let t = l(e);
+			return t = t.replace(/```([\s\S]*?)```/g, (e, t) => `<pre class="bg-muted rounded p-3 overflow-auto"><code class="font-mono text-sm">${t.trim()}</code></pre>`), t = t.replace(/`([^`\n]+)`/g, "<code class=\"font-mono bg-muted px-1 rounded text-sm\">$1</code>"), t = t.replace(/^######\s+(.+)$/gm, "<h6 class=\"text-base font-semibold\">$1</h6>"), t = t.replace(/^#####\s+(.+)$/gm, "<h5 class=\"text-lg font-semibold\">$1</h5>"), t = t.replace(/^####\s+(.+)$/gm, "<h4 class=\"text-xl font-semibold\">$1</h4>"), t = t.replace(/^###\s+(.+)$/gm, "<h3 class=\"text-2xl font-semibold\">$1</h3>"), t = t.replace(/^##\s+(.+)$/gm, "<h2 class=\"text-3xl font-semibold\">$1</h2>"), t = t.replace(/^#\s+(.+)$/gm, "<h1 class=\"text-4xl font-bold\">$1</h1>"), t = t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"), t = t.replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, "$1<em>$2</em>"), t = t.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, "<a href=\"$2\" class=\"text-primary underline\" target=\"_blank\" rel=\"noreferrer\">$1</a>"), t = t.replace(/^\s*[-*+]\s+(.+)$/gm, "<li>$1</li>"), t = t.replace(/^\s*\d+\.\s+(.+)$/gm, "<li>$1</li>"), t = t.replace(/(<li>[\s\S]*?<\/li>)(?!\s*<li>)/g, "<ul class=\"list-disc pl-6\">$1</ul>"), t = t.split(/\n{2,}/).map((e) => {
+				if (/^<(h\d|ul|ol|pre|blockquote|li)/.test(e.trim())) return e;
+				let t = e.trim();
+				return t ? `<p class="leading-7">${t.replace(/\n/g, "<br />")}</p>` : "";
+			}).join("\n"), t;
+		}
+		let d = e(() => u(s.value));
+		return (e, n) => (i(), t("div", {
+			class: r(["prose prose-sm max-w-none", c.value]),
+			"data-testid": "markdown-display",
+			innerHTML: d.value
+		}, null, 10, a));
+	}
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=MarkdownDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/MarkdownDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/MarkdownDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven markdown display.\n *\n * Renders a tiny, dependency-free markdown subset (headings, bold,\n * italic, code, fenced code, links, lists). Output is sanitised by\n * escaping HTML in the raw source before transformation. For\n * real-world rich markdown, swap in `marked` or `markdown-it`.\n */\nimport { computed } from \"vue\"\n\nexport interface MarkdownDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<MarkdownDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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\nfunction escapeHtml(input: string): string {\n  return input\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\")\n}\n\nfunction renderMarkdown(src: string): string {\n  if (!src) {\n    return \"\"\n  }\n  let text = escapeHtml(src)\n\n  // Fenced code blocks ```...```\n  text = text.replace(/```([\\s\\S]*?)```/g, (_, code: string) => {\n    return `<pre class=\"bg-muted rounded p-3 overflow-auto\"><code class=\"font-mono text-sm\">${code.trim()}</code></pre>`\n  })\n\n  // Inline code `...`\n  text = text.replace(/`([^`\\n]+)`/g, '<code class=\"font-mono bg-muted px-1 rounded text-sm\">$1</code>')\n\n  // Headings (# .. ######)\n  text = text.replace(/^######\\s+(.+)$/gm, '<h6 class=\"text-base font-semibold\">$1</h6>')\n  text = text.replace(/^#####\\s+(.+)$/gm, '<h5 class=\"text-lg font-semibold\">$1</h5>')\n  text = text.replace(/^####\\s+(.+)$/gm, '<h4 class=\"text-xl font-semibold\">$1</h4>')\n  text = text.replace(/^###\\s+(.+)$/gm, '<h3 class=\"text-2xl font-semibold\">$1</h3>')\n  text = text.replace(/^##\\s+(.+)$/gm, '<h2 class=\"text-3xl font-semibold\">$1</h2>')\n  text = text.replace(/^#\\s+(.+)$/gm, '<h1 class=\"text-4xl font-bold\">$1</h1>')\n\n  // Bold **text**\n  text = text.replace(/\\*\\*([^*]+)\\*\\*/g, \"<strong>$1</strong>\")\n  // Italic *text*\n  text = text.replace(/(^|[^*])\\*([^*\\n]+)\\*(?!\\*)/g, \"$1<em>$2</em>\")\n\n  // Links [text](url)\n  text = text.replace(\n    /\\[([^\\]]+)\\]\\(([^)\\s]+)\\)/g,\n    '<a href=\"$2\" class=\"text-primary underline\" target=\"_blank\" rel=\"noreferrer\">$1</a>',\n  )\n\n  // Unordered list items\n  text = text.replace(/^\\s*[-*+]\\s+(.+)$/gm, \"<li>$1</li>\")\n  // Ordered list items\n  text = text.replace(/^\\s*\\d+\\.\\s+(.+)$/gm, \"<li>$1</li>\")\n  // Wrap consecutive <li> in <ul>\n  text = text.replace(/(<li>[\\s\\S]*?<\\/li>)(?!\\s*<li>)/g, \"<ul class=\\\"list-disc pl-6\\\">$1</ul>\")\n\n  // Paragraphs: any remaining double-newline blocks\n  text = text\n    .split(/\\n{2,}/)\n    .map((block) => {\n      if (/^<(h\\d|ul|ol|pre|blockquote|li)/.test(block.trim())) {\n        return block\n      }\n      const trimmed = block.trim()\n      return trimmed ? `<p class=\"leading-7\">${trimmed.replace(/\\n/g, \"<br />\")}</p>` : \"\"\n    })\n    .join(\"\\n\")\n\n  return text\n}\n\nconst html = computed<string>(() => renderMarkdown(content.value))\n</script>\n\n<template>\n  <div\n    class=\"prose prose-sm max-w-none\"\n    :class=\"rootClass\"\n    data-testid=\"markdown-display\"\n    v-html=\"html\"\n  />\n</template>\n"],"mappings":";;;;;;;;;EAgBA,IAAM,IAAQ,GAER,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;EAED,SAAS,EAAW,GAAuB;GACzC,OAAO,EACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ,EACtB,QAAQ,MAAM,OAAO;EAC1B;EAEA,SAAS,EAAe,GAAqB;GAC3C,IAAI,CAAC,GACH,OAAO;GAET,IAAI,IAAO,EAAW,CAAG;GAgDzB,OA7CA,IAAO,EAAK,QAAQ,sBAAsB,GAAG,MACpC,mFAAmF,EAAK,KAAK,EAAE,cACvG,GAGD,IAAO,EAAK,QAAQ,gBAAgB,mEAAiE,GAGrG,IAAO,EAAK,QAAQ,qBAAqB,+CAA6C,GACtF,IAAO,EAAK,QAAQ,oBAAoB,6CAA2C,GACnF,IAAO,EAAK,QAAQ,mBAAmB,6CAA2C,GAClF,IAAO,EAAK,QAAQ,kBAAkB,8CAA4C,GAClF,IAAO,EAAK,QAAQ,iBAAiB,8CAA4C,GACjF,IAAO,EAAK,QAAQ,gBAAgB,0CAAwC,GAG5E,IAAO,EAAK,QAAQ,oBAAoB,qBAAqB,GAE7D,IAAO,EAAK,QAAQ,gCAAgC,eAAe,GAGnE,IAAO,EAAK,QACV,8BACA,6FACF,GAGA,IAAO,EAAK,QAAQ,uBAAuB,aAAa,GAExD,IAAO,EAAK,QAAQ,uBAAuB,aAAa,GAExD,IAAO,EAAK,QAAQ,oCAAoC,sCAAsC,GAG9F,IAAO,EACJ,MAAM,QAAQ,EACd,KAAK,MAAU;IACd,IAAI,kCAAkC,KAAK,EAAM,KAAK,CAAC,GACrD,OAAO;IAET,IAAM,IAAU,EAAM,KAAK;IAC3B,OAAO,IAAU,wBAAwB,EAAQ,QAAQ,OAAO,QAAQ,EAAE,QAAQ;GACpF,CAAC,EACA,KAAK,IAAI,GAEL;EACT;EAEA,IAAM,IAAO,QAAuB,EAAe,EAAQ,KAAK,CAAC;yBAI/D,EAKE,OAAA;GAJA,OAAK,EAAA,CAAC,6BACE,EAAA,KAAS,CAAA;GACjB,eAAY;GACZ,WAAQ,EAAA"}

package/dist/components/compositions/elements/display/ProgressBarDisplay.js

@@ -0,0 +1,7 @@
+import e from "./ProgressBarDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/ProgressBarDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ProgressBarDisplay.js.map

package/dist/components/compositions/elements/display/ProgressBarDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/ProgressBarDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven progress bar display.\n *\n * Wraps the shadcn-vue Progress primitive. The numeric `progress`\n * prop (0-100) is clamped before being passed to the underlying\n * indicator.\n */\nimport { computed } from \"vue\"\nimport { Progress } from \"@/components/ui/progress\"\n\nexport interface ProgressBarDisplayProps {\n  progress?: number\n  label?: string\n  hideLabel?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ProgressBarDisplayProps>(), {\n  progress: 0,\n})\n\nfunction clamp(n: number): number {\n  if (n < 0) {\n    return 0\n  }\n  if (n > 100) {\n    return 100\n  }\n  return n\n}\n\nconst value = computed<number>(() => {\n  if (typeof props.progress !== \"number\" || !Number.isFinite(props.progress)) {\n    return 0\n  }\n  return clamp(props.progress)\n})\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</script>\n\n<template>\n  <div\n    class=\"flex flex-col gap-1.5\"\n    :class=\"rootClass\"\n    data-testid=\"progress-bar-display\"\n  >\n    <div\n      v-if=\"(label && !hideLabel) || !hideLabel\"\n      class=\"flex items-center justify-between text-sm\"\n    >\n      <span v-if=\"label && !hideLabel\">{{ label }}</span>\n      <span\n        class=\"text-muted-foreground\"\n        data-testid=\"progress-bar-value\"\n      >{{ value }}%</span>\n    </div>\n    <Progress\n      :value=\"value\"\n      :max=\"100\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/ProgressBarDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import e from "../../../ui/progress/Progress.js";
+import "../../../ui/progress/index.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, toDisplayString as l, unref as u } from "vue";
+//#region src/components/compositions/elements/display/ProgressBarDisplay.vue?vue&type=script&setup=true&lang.ts
+var d = {
+	key: 0,
+	class: "flex items-center justify-between text-sm"
+}, f = { key: 0 }, p = {
+	class: "text-muted-foreground",
+	"data-testid": "progress-bar-value"
+}, m = /* @__PURE__ */ o({
+	__name: "ProgressBarDisplay",
+	props: {
+		progress: { default: 0 },
+		label: {},
+		hideLabel: { type: Boolean },
+		classList: {}
+	},
+	setup(o) {
+		let m = o;
+		function h(e) {
+			return e < 0 ? 0 : e > 100 ? 100 : e;
+		}
+		let g = t(() => typeof m.progress != "number" || !Number.isFinite(m.progress) ? 0 : h(m.progress)), _ = t(() => {
+			let e = m.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (t, m) => (c(), r("div", {
+			class: s(["flex flex-col gap-1.5", _.value]),
+			"data-testid": "progress-bar-display"
+		}, [o.label && !o.hideLabel || !o.hideLabel ? (c(), r("div", d, [o.label && !o.hideLabel ? (c(), r("span", f, l(o.label), 1)) : n("", !0), i("span", p, l(g.value) + "%", 1)])) : n("", !0), a(u(e), {
+			value: g.value,
+			max: 100
+		}, null, 8, ["value"])], 2));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=ProgressBarDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/ProgressBarDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/ProgressBarDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven progress bar display.\n *\n * Wraps the shadcn-vue Progress primitive. The numeric `progress`\n * prop (0-100) is clamped before being passed to the underlying\n * indicator.\n */\nimport { computed } from \"vue\"\nimport { Progress } from \"@/components/ui/progress\"\n\nexport interface ProgressBarDisplayProps {\n  progress?: number\n  label?: string\n  hideLabel?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ProgressBarDisplayProps>(), {\n  progress: 0,\n})\n\nfunction clamp(n: number): number {\n  if (n < 0) {\n    return 0\n  }\n  if (n > 100) {\n    return 100\n  }\n  return n\n}\n\nconst value = computed<number>(() => {\n  if (typeof props.progress !== \"number\" || !Number.isFinite(props.progress)) {\n    return 0\n  }\n  return clamp(props.progress)\n})\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</script>\n\n<template>\n  <div\n    class=\"flex flex-col gap-1.5\"\n    :class=\"rootClass\"\n    data-testid=\"progress-bar-display\"\n  >\n    <div\n      v-if=\"(label && !hideLabel) || !hideLabel\"\n      class=\"flex items-center justify-between text-sm\"\n    >\n      <span v-if=\"label && !hideLabel\">{{ label }}</span>\n      <span\n        class=\"text-muted-foreground\"\n        data-testid=\"progress-bar-value\"\n      >{{ value }}%</span>\n    </div>\n    <Progress\n      :value=\"value\"\n      :max=\"100\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAkBA,IAAM,IAAQ;EAId,SAAS,EAAM,GAAmB;GAOhC,OANI,IAAI,IACC,IAEL,IAAI,MACC,MAEF;EACT;EAEA,IAAM,IAAQ,QACR,OAAO,EAAM,YAAa,YAAY,CAAC,OAAO,SAAS,EAAM,QAAQ,IAChE,IAEF,EAAM,EAAM,QAAQ,CAC5B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAmBM,OAAA;GAlBJ,OAAK,EAAA,CAAC,yBACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAGH,EAAA,SAAK,CAAK,EAAA,aAAS,CAAM,EAAA,aAAA,EAAA,GADlC,EASM,OATN,GASM,CALQ,EAAA,SAAK,CAAK,EAAA,aAAA,EAAA,GAAtB,EAAmD,QAAA,GAAA,EAAf,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GACzC,EAGoB,QAHpB,GAGoB,EAAhB,EAAA,KAAK,IAAG,KAAC,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEf,EAGE,EAAA,CAAA,GAAA;GAFC,OAAO,EAAA;GACP,KAAK"}

package/dist/components/compositions/elements/display/QrCodeDisplay.js

@@ -0,0 +1,7 @@
+import e from "./QrCodeDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/QrCodeDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=QrCodeDisplay.js.map

package/dist/components/compositions/elements/display/QrCodeDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/QrCodeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven QR code display.\n *\n * Generates a QR code into a `<canvas>` via the `qrcode` library,\n * lazy-imported on mount.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\nexport interface QrCodeDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<QrCodeDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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\nconst canvasRef = useTemplateRef<HTMLCanvasElement>(\"canvasRef\")\nconst error = ref<string>(\"\")\n\nasync function renderQr(): Promise<void> {\n  if (!canvasRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"qrcode\")\n    const QRCode = (mod as unknown as { default: { toCanvas: (canvas: HTMLCanvasElement, text: string, opts?: Record<string, unknown>) => Promise<void> } }).default\n    await QRCode.toCanvas(canvasRef.value, content.value, {\n      margin: 1,\n      width: 160,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render QR code\"\n  }\n}\n\nonMounted(() => {\n  void renderQr()\n})\n\nwatch(content, () => {\n  void renderQr()\n})\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"qrcode-display\"\n  >\n    <canvas\n      ref=\"canvasRef\"\n      :aria-label=\"`QR code: ${content}`\"\n      role=\"img\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"qrcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/QrCodeDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, onMounted as o, openBlock as s, ref as c, toDisplayString as l, useTemplateRef as u, watch as d } from "vue";
+//#region src/components/compositions/elements/display/QrCodeDisplay.vue?vue&type=script&setup=true&lang.ts
+var f = ["aria-label"], p = {
+	key: 0,
+	class: "mt-1 text-xs text-destructive",
+	"data-testid": "qrcode-error"
+}, m = /* @__PURE__ */ i({
+	__name: "QrCodeDisplay",
+	props: {
+		value: {},
+		classList: {}
+	},
+	setup(i) {
+		let m = i, h = e(() => m.value === void 0 || m.value === null ? "" : String(m.value)), g = e(() => {
+			let e = m.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), _ = u("canvasRef"), v = c("");
+		async function y() {
+			if (!(!_.value || !h.value)) try {
+				await (await import("qrcode")).default.toCanvas(_.value, h.value, {
+					margin: 1,
+					width: 160
+				}), v.value = "";
+			} catch (e) {
+				v.value = e instanceof Error ? e.message : "Failed to render QR code";
+			}
+		}
+		return o(() => {
+			y();
+		}), d(h, () => {
+			y();
+		}), (e, i) => (s(), n("div", {
+			class: a(["inline-block", g.value]),
+			"data-testid": "qrcode-display"
+		}, [r("canvas", {
+			ref_key: "canvasRef",
+			ref: _,
+			"aria-label": `QR code: ${h.value}`,
+			role: "img"
+		}, null, 8, f), v.value ? (s(), n("p", p, l(v.value), 1)) : t("", !0)], 2));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=QrCodeDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/QrCodeDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCodeDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/QrCodeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven QR code display.\n *\n * Generates a QR code into a `<canvas>` via the `qrcode` library,\n * lazy-imported on mount.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\nexport interface QrCodeDisplayProps {\n  value?: string | number | null\n  classList?: string[] | string\n}\n\nconst props = defineProps<QrCodeDisplayProps>()\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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\nconst canvasRef = useTemplateRef<HTMLCanvasElement>(\"canvasRef\")\nconst error = ref<string>(\"\")\n\nasync function renderQr(): Promise<void> {\n  if (!canvasRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"qrcode\")\n    const QRCode = (mod as unknown as { default: { toCanvas: (canvas: HTMLCanvasElement, text: string, opts?: Record<string, unknown>) => Promise<void> } }).default\n    await QRCode.toCanvas(canvasRef.value, content.value, {\n      margin: 1,\n      width: 160,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render QR code\"\n  }\n}\n\nonMounted(() => {\n  void renderQr()\n})\n\nwatch(content, () => {\n  void renderQr()\n})\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"qrcode-display\"\n  >\n    <canvas\n      ref=\"canvasRef\"\n      :aria-label=\"`QR code: ${content}`\"\n      role=\"img\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"qrcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAcA,IAAM,IAAQ,GAER,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC,GAEK,IAAY,EAAkC,WAAW,GACzD,IAAQ,EAAY,EAAE;EAE5B,eAAe,IAA0B;GACnC,OAAC,EAAU,SAAS,CAAC,EAAQ,QAGjC,IAAI;IAOF,AAJA,OADgB,MADE,OAAO,WACgI,QAC5I,SAAS,EAAU,OAAO,EAAQ,OAAO;KACpD,QAAQ;KACR,OAAO;IACT,CAAC,GACD,EAAM,QAAQ;GAChB,SAAS,GAAG;IACV,EAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;GACjD;EACF;SAEA,QAAgB;GACd,EAAc;EAChB,CAAC,GAED,EAAM,SAAe;GACnB,EAAc;EAChB,CAAC,mBAIC,EAiBM,OAAA;GAhBJ,OAAK,EAAA,CAAC,gBACE,EAAA,KAAS,CAAA;GACjB,eAAY;MAEZ,EAIE,UAAA;YAHI;GAAJ,KAAI;GACH,cAAU,YAAc,EAAA;GACzB,MAAK;kBAGC,EAAA,SAAA,EAAA,GADR,EAMI,KANJ,GAMI,EADC,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA"}

package/dist/components/compositions/elements/display/ReactiveCanvasDisplay.js

@@ -0,0 +1,7 @@
+import e from "./ReactiveCanvasDisplay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/display/ReactiveCanvasDisplay.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ReactiveCanvasDisplay.js.map

package/dist/components/compositions/elements/display/ReactiveCanvasDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveCanvasDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/ReactiveCanvasDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * STUB props-driven reactive canvas display.\n *\n * Pending the reactive canvas runtime (which itself depends on the\n * builder counterpart).\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface ReactiveCanvasDisplayProps {\n  label?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<ReactiveCanvasDisplayProps>()\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</script>\n\n<template>\n  <Card\n    :class=\"rootClass\"\n    data-testid=\"reactive-canvas-display\"\n  >\n    <CardHeader class=\"flex flex-row items-center gap-3 p-4\">\n      <Construction class=\"size-5 text-muted-foreground\" />\n      <div class=\"flex-1\">\n        <CardTitle class=\"text-base\">\n          {{ label ?? \"Reactive Canvas\" }}\n        </CardTitle>\n        <CardDescription>\n          Coming soon — reactive canvas runtime is not yet implemented.\n        </CardDescription>\n      </div>\n      <Badge variant=\"secondary\">\n        reactive-canvas\n      </Badge>\n    </CardHeader>\n    <CardContent class=\"p-4 pt-0 text-sm text-muted-foreground\">\n      Awaiting the reactive-canvas builder counterpart.\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/display/ReactiveCanvasDisplay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import e from "../../../ui/badge/Badge.js";
+import "../../../ui/badge/index.js";
+import t from "../../../ui/card/Card.js";
+import n from "../../../ui/card/CardContent.js";
+import r from "../../../ui/card/CardDescription.js";
+import i from "../../../ui/card/CardHeader.js";
+import a from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import { computed as o, createBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { Construction as _ } from "@lucide/vue";
+//#region src/components/compositions/elements/display/ReactiveCanvasDisplay.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "flex-1" }, y = /* @__PURE__ */ d({
+	__name: "ReactiveCanvasDisplay",
+	props: {
+		label: {},
+		classList: {}
+	},
+	setup(d) {
+		let y = d, b = o(() => {
+			let e = y.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (o, y) => (p(), s(h(t), {
+			class: f(b.value),
+			"data-testid": "reactive-canvas-display"
+		}, {
+			default: g(() => [u(h(i), { class: "flex flex-row items-center gap-3 p-4" }, {
+				default: g(() => [
+					u(h(_), { class: "size-5 text-muted-foreground" }),
+					c("div", v, [u(h(a), { class: "text-base" }, {
+						default: g(() => [l(m(d.label ?? "Reactive Canvas"), 1)]),
+						_: 1
+					}), u(h(r), null, {
+						default: g(() => [...y[0] ||= [l(" Coming soon — reactive canvas runtime is not yet implemented. ", -1)]]),
+						_: 1
+					})]),
+					u(h(e), { variant: "secondary" }, {
+						default: g(() => [...y[1] ||= [l(" reactive-canvas ", -1)]]),
+						_: 1
+					})
+				]),
+				_: 1
+			}), u(h(n), { class: "p-4 pt-0 text-sm text-muted-foreground" }, {
+				default: g(() => [...y[2] ||= [l(" Awaiting the reactive-canvas builder counterpart. ", -1)]]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=ReactiveCanvasDisplay.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/display/ReactiveCanvasDisplay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveCanvasDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/ReactiveCanvasDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * STUB props-driven reactive canvas display.\n *\n * Pending the reactive canvas runtime (which itself depends on the\n * builder counterpart).\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface ReactiveCanvasDisplayProps {\n  label?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<ReactiveCanvasDisplayProps>()\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</script>\n\n<template>\n  <Card\n    :class=\"rootClass\"\n    data-testid=\"reactive-canvas-display\"\n  >\n    <CardHeader class=\"flex flex-row items-center gap-3 p-4\">\n      <Construction class=\"size-5 text-muted-foreground\" />\n      <div class=\"flex-1\">\n        <CardTitle class=\"text-base\">\n          {{ label ?? \"Reactive Canvas\" }}\n        </CardTitle>\n        <CardDescription>\n          Coming soon — reactive canvas runtime is not yet implemented.\n        </CardDescription>\n      </div>\n      <Badge variant=\"secondary\">\n        reactive-canvas\n      </Badge>\n    </CardHeader>\n    <CardContent class=\"p-4 pt-0 text-sm text-muted-foreground\">\n      Awaiting the reactive-canvas builder counterpart.\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAER,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAqBO,EAAA,CAAA,GAAA;GApBJ,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;;oBAeC,CAbb,EAaa,EAAA,CAAA,GAAA,EAbD,OAAM,uCAAsC,GAAA;qBACD;KAArD,EAAqD,EAAA,CAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;KAClD,EAOM,OAPN,GAOM,CANJ,EAEY,EAAA,CAAA,GAAA,EAFD,OAAM,YAAW,GAAA;uBACM,CAAA,EAAA,EAA7B,EAAA,SAAK,iBAAA,GAAA,CAAA,CAAA,CAAA;;SAEV,EAEkB,EAAA,CAAA,GAAA,MAAA;uBAAlB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFiB,mEAEjB,EAAA,CAAA,CAAA,CAAA;;;KAEF,EAEQ,EAAA,CAAA,GAAA,EAFD,SAAQ,YAAW,GAAA;uBAE1B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF2B,qBAE3B,EAAA,CAAA,CAAA,CAAA;;;;;OAEF,EAEc,EAAA,CAAA,GAAA,EAFD,OAAM,yCAAwC,GAAA;qBAE3D,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF4D,uDAE5D,EAAA,CAAA,CAAA,CAAA"}