@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/configuration-block/RepeatableBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,141 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import { useFormDataStore as n } from "../../../../stores/formDataStore.js";
+import { FORM_ID_KEY as r } from "../../../../engine/useFormData.js";
+import i from "./RepeatableRow.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, nextTick as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, watch as S, withCtx as C, withModifiers as w } from "vue";
+import { ChevronDown as T, ChevronRight as E, Plus as D, Trash2 as O } from "@lucide/vue";
+//#region src/components/compositions/elements/configuration-block/RepeatableBlock.vue?vue&type=script&setup=true&lang.ts
+var k = ["data-element-name"], A = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, j = ["onClick"], M = { class: "flex items-center gap-1.5 text-sm font-medium" }, N = {
+	key: 0,
+	class: "border-t px-3 py-3"
+}, P = /* @__PURE__ */ p({
+	__name: "RepeatableBlock",
+	props: {
+		label: { default: "Repeatable" },
+		name: {},
+		modelValue: { default: () => [] },
+		nestedElements: { default: () => [] },
+		addButtonLabel: { default: "Add row" },
+		optionLabelFields: { default: () => [] },
+		collapsedByDefault: {
+			type: Boolean,
+			default: !1
+		},
+		item: { default: () => ({}) },
+		classList: {}
+	},
+	emits: ["update:modelValue"],
+	setup(p, { emit: P }) {
+		let F = p, I = P, L = m(r, "default"), R = n(), z = o(() => (F.nestedElements ?? []).filter((e) => typeof e == "object" && !!e && typeof e.type == "string")), B = 0;
+		function V(e) {
+			return `${L}__${F.name ?? "repeatable"}__${e}`;
+		}
+		function H(e) {
+			let t = B++, n = V(t);
+			return R.ensureForm(n), e && Object.keys(e).length > 0 && R.setInitialValues(n, e), {
+				id: t,
+				formId: n,
+				collapsed: F.collapsedByDefault
+			};
+		}
+		function U(e) {
+			return e.map((e) => H(typeof e == "object" && e ? e : {}));
+		}
+		let W = v(Array.isArray(F.modelValue) && F.modelValue.length > 0 ? U(F.modelValue) : []);
+		function G() {
+			return W.value.map((e) => ({ ...R.forms[e.formId]?.values ?? {} }));
+		}
+		function K(e, t) {
+			let n = F.optionLabelFields ?? [];
+			if (n.length > 0) {
+				let t = R.forms[e.formId]?.values ?? {}, r = n.map((e) => t[e]).filter((e) => typeof e == "string" && e.trim() !== "").join(" ");
+				if (r) return r;
+			}
+			return `${F.label} ${t + 1}`;
+		}
+		let q = !1;
+		S(() => W.value.map((e) => ({ ...R.forms[e.formId]?.values })), () => {
+			q || (q = !0, I("update:modelValue", G()), h(() => {
+				q = !1;
+			}));
+		}, { deep: !0 }), S(() => F.modelValue, (e) => {
+			if (!(q || !Array.isArray(e)) && e.length !== W.value.length) {
+				if (q = !0, e.length > W.value.length) for (; W.value.length < e.length;) {
+					let t = e[W.value.length];
+					W.value.push(H(typeof t == "object" && t ? t : {}));
+				}
+				else W.value.splice(e.length).forEach((e) => R.resetForm(e.formId));
+				h(() => {
+					q = !1;
+				});
+			}
+		});
+		function J() {
+			W.value.push(H());
+		}
+		function Y(e) {
+			let t = W.value.findIndex((t) => t.id === e);
+			if (t < 0) return;
+			let [n] = W.value.splice(t, 1);
+			R.resetForm(n.formId);
+		}
+		function X(e) {
+			let t = W.value.find((t) => t.id === e);
+			t && (t.collapsed = !t.collapsed);
+		}
+		return (n, r) => (_(), l("div", {
+			class: g(x(e)("flex flex-col gap-1", F.classList)),
+			"data-element-name": F.name ?? void 0
+		}, [W.value.length ? (_(), l("div", A, [(_(!0), l(a, null, y(W.value, (e, n) => (_(), l("div", {
+			key: e.id,
+			class: "rounded-md border bg-card",
+			"data-testid": "repeatable-row"
+		}, [u("div", {
+			class: "flex cursor-pointer items-center justify-between gap-2 px-3 py-2",
+			onClick: (t) => X(e.id)
+		}, [u("div", M, [e.collapsed ? (_(), s(x(E), {
+			key: 1,
+			class: "size-3.5 shrink-0 text-muted-foreground"
+		})) : (_(), s(x(T), {
+			key: 0,
+			class: "size-3.5 shrink-0 text-muted-foreground"
+		})), u("span", null, b(K(e, n)), 1)]), f(x(t), {
+			variant: "ghost",
+			size: "icon-sm",
+			type: "button",
+			"aria-label": "Remove row",
+			class: "shrink-0 text-muted-foreground hover:text-destructive",
+			onClick: w((t) => Y(e.id), ["stop"])
+		}, {
+			default: C(() => [f(x(O), { class: "size-3.5" })]),
+			_: 1
+		}, 8, ["onClick"])], 8, j), !e.collapsed && z.value.length ? (_(), l("div", N, [f(i, {
+			"form-id": e.formId,
+			schema: z.value,
+			item: F.item
+		}, null, 8, [
+			"form-id",
+			"schema",
+			"item"
+		])])) : c("", !0)]))), 128))])) : c("", !0), f(x(t), {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			class: "self-start",
+			"data-testid": "repeatable-add",
+			onClick: J
+		}, {
+			default: C(() => [f(x(D), { class: "size-3.5" }), d(" " + b(F.addButtonLabel), 1)]),
+			_: 1
+		})], 10, k));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=RepeatableBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/configuration-block/RepeatableBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatableBlock.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/configuration-block/RepeatableBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, nextTick, ref, watch } from \"vue\"\nimport { ChevronDown, ChevronRight, Plus, Trash2 } from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport { Button } from \"@/components/ui/button\"\nimport { useFormDataStore } from \"@/stores/formDataStore\"\nimport { FORM_ID_KEY } from \"@/engine/useFormData\"\nimport { cn } from \"@/lib/utils\"\nimport RepeatableRow from \"./RepeatableRow.vue\"\n\nexport interface RepeatableBlockProps {\n  label?: string\n  name?: string | null\n  modelValue?: unknown[]\n  /** Child element schema for each row. Engine remaps selectOptions → nestedElements. */\n  nestedElements?: Array<Record<string, unknown>>\n  addButtonLabel?: string\n  /** Field names whose values in a row are joined to form the row's header label. */\n  optionLabelFields?: ReadonlyArray<string>\n  /** Collapse all rows on initial render. */\n  collapsedByDefault?: boolean\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<RepeatableBlockProps>(), {\n  label: \"Repeatable\",\n  addButtonLabel: \"Add row\",\n  modelValue: () => [],\n  nestedElements: () => [],\n  optionLabelFields: () => [],\n  collapsedByDefault: false,\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: unknown[]): void\n}>()\n\nconst parentFormId = inject(FORM_ID_KEY, \"default\")\nconst store = useFormDataStore()\n\nconst rowSchema = computed<CardElement[]>(() =>\n  (props.nestedElements ?? []).filter(\n    (entry): boolean =>\n      typeof entry === \"object\" &&\n      entry !== null &&\n      typeof (entry as { type?: unknown }).type === \"string\",\n  ) as unknown as CardElement[],\n)\n\ninterface RowEntry {\n  id: number\n  formId: string\n  collapsed: boolean\n}\n\nlet nextRowId = 0\n\nfunction makeRowFormId(rowId: number): string {\n  return `${parentFormId}__${props.name ?? \"repeatable\"}__${rowId}`\n}\n\nfunction makeRow(initialData?: Record<string, unknown>): RowEntry {\n  const id = nextRowId++\n  const formId = makeRowFormId(id)\n  store.ensureForm(formId)\n  if (initialData && Object.keys(initialData).length > 0) {\n    store.setInitialValues(formId, initialData)\n  }\n  return { id, formId, collapsed: props.collapsedByDefault }\n}\n\nfunction buildRows(data: unknown[]): RowEntry[] {\n  return data.map((d) => makeRow(typeof d === \"object\" && d !== null ? (d as Record<string, unknown>) : {}))\n}\n\nconst rows = ref<RowEntry[]>(\n  Array.isArray(props.modelValue) && props.modelValue.length > 0\n    ? buildRows(props.modelValue)\n    : [],\n)\n\nfunction collectRowData(): unknown[] {\n  return rows.value.map((row) => ({ ...(store.forms[row.formId]?.values ?? {}) }))\n}\n\nfunction rowLabel(row: RowEntry, index: number): string {\n  const labelFields = props.optionLabelFields ?? []\n  if (labelFields.length > 0) {\n    const values = store.forms[row.formId]?.values ?? {}\n    const parts = labelFields\n      .map((f) => values[f])\n      .filter((v) => typeof v === \"string\" && v.trim() !== \"\")\n      .join(\" \")\n    if (parts) {\n      return parts\n    }\n  }\n  return `${props.label} ${index + 1}`\n}\n\nlet suppressSync = false\n\nwatch(\n  () => rows.value.map((r) => ({ ...store.forms[r.formId]?.values })),\n  () => {\n    if (suppressSync) {\n      return\n    }\n    suppressSync = true\n    emit(\"update:modelValue\", collectRowData())\n    void nextTick(() => {\n      suppressSync = false\n    })\n  },\n  { deep: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (next) => {\n    if (suppressSync || !Array.isArray(next)) {\n      return\n    }\n    if (next.length === rows.value.length) {\n      return\n    }\n    suppressSync = true\n    if (next.length > rows.value.length) {\n      while (rows.value.length < next.length) {\n        const d = next[rows.value.length]\n        rows.value.push(makeRow(typeof d === \"object\" && d !== null ? (d as Record<string, unknown>) : {}))\n      }\n    } else {\n      const removed = rows.value.splice(next.length)\n      removed.forEach((r) => store.resetForm(r.formId))\n    }\n    void nextTick(() => {\n      suppressSync = false\n    })\n  },\n)\n\nfunction addRow(): void {\n  rows.value.push(makeRow())\n}\n\nfunction removeRow(rowId: number): void {\n  const idx = rows.value.findIndex((r) => r.id === rowId)\n  if (idx < 0) {\n    return\n  }\n  const [removed] = rows.value.splice(idx, 1)\n  store.resetForm(removed.formId)\n}\n\nfunction toggleRow(rowId: number): void {\n  const row = rows.value.find((r) => r.id === rowId)\n  if (row) {\n    row.collapsed = !row.collapsed\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col gap-1', props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n  >\n    <div v-if=\"rows.length\" class=\"flex flex-col gap-2\">\n      <div\n        v-for=\"(row, index) in rows\"\n        :key=\"row.id\"\n        class=\"rounded-md border bg-card\"\n        data-testid=\"repeatable-row\"\n      >\n        <!-- Row header -->\n        <div\n          class=\"flex cursor-pointer items-center justify-between gap-2 px-3 py-2\"\n          @click=\"toggleRow(row.id)\"\n        >\n          <div class=\"flex items-center gap-1.5 text-sm font-medium\">\n            <ChevronDown v-if=\"!row.collapsed\" class=\"size-3.5 shrink-0 text-muted-foreground\" />\n            <ChevronRight v-else class=\"size-3.5 shrink-0 text-muted-foreground\" />\n            <span>{{ rowLabel(row, index) }}</span>\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            type=\"button\"\n            aria-label=\"Remove row\"\n            class=\"shrink-0 text-muted-foreground hover:text-destructive\"\n            @click.stop=\"removeRow(row.id)\"\n          >\n            <Trash2 class=\"size-3.5\" />\n          </Button>\n        </div>\n\n        <!-- Row content -->\n        <div v-if=\"!row.collapsed && rowSchema.length\" class=\"border-t px-3 py-3\">\n          <RepeatableRow\n            :form-id=\"row.formId\"\n            :schema=\"rowSchema\"\n            :item=\"props.item\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"sm\"\n      class=\"self-start\"\n      data-testid=\"repeatable-add\"\n      @click=\"addRow\"\n    >\n      <Plus class=\"size-3.5\" />\n      {{ props.addButtonLabel }}\n    </Button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/configuration-block/RepeatableRow.js

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

package/dist/components/compositions/elements/configuration-block/RepeatableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatableRow.js","names":[],"sources":["../../../../../src/components/compositions/elements/configuration-block/RepeatableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Single row inside a RepeatableBlock.\n *\n * Provides its own isolated formId via Vue's inject/provide so every\n * child ElementRenderer binds to that row's slot in the formDataStore\n * rather than the parent form's slot.\n */\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { provideFormId } from \"@/engine/useFormData\"\n\nconst props = defineProps<{\n  /** Unique key for this row's isolated formDataStore entry. */\n  formId: string\n  /** CardElement schema for each field in the row. */\n  schema: CardElement[]\n  /** Read-only context item forwarded from the parent. */\n  item: Record<string, unknown>\n}>()\n\n// Must be synchronous — provide happens during component setup so all\n// descendant ElementRenderers pick it up before their own setup runs.\nprovideFormId(props.formId)\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ElementRenderer\n      v-for=\"child in props.schema\"\n      :key=\"child.id\"\n      :element=\"child\"\n      :item=\"props.item\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/configuration-block/RepeatableRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { provideFormId as e } from "../../../../engine/useFormData.js";
+import t from "../../../../engine/ElementRenderer.js";
+import { Fragment as n, createBlock as r, createElementBlock as i, defineComponent as a, openBlock as o, renderList as s } from "vue";
+//#region src/components/compositions/elements/configuration-block/RepeatableRow.vue?vue&type=script&setup=true&lang.ts
+var c = { class: "flex flex-col gap-2" }, l = /* @__PURE__ */ a({
+	__name: "RepeatableRow",
+	props: {
+		formId: {},
+		schema: {},
+		item: {}
+	},
+	setup(a) {
+		let l = a;
+		return e(l.formId), (e, a) => (o(), i("div", c, [(o(!0), i(n, null, s(l.schema, (e) => (o(), r(t, {
+			key: e.id,
+			element: e,
+			item: l.item
+		}, null, 8, ["element", "item"]))), 128))]));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=RepeatableRow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/configuration-block/RepeatableRow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/configuration-block/RepeatableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Single row inside a RepeatableBlock.\n *\n * Provides its own isolated formId via Vue's inject/provide so every\n * child ElementRenderer binds to that row's slot in the formDataStore\n * rather than the parent form's slot.\n */\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { provideFormId } from \"@/engine/useFormData\"\n\nconst props = defineProps<{\n  /** Unique key for this row's isolated formDataStore entry. */\n  formId: string\n  /** CardElement schema for each field in the row. */\n  schema: CardElement[]\n  /** Read-only context item forwarded from the parent. */\n  item: Record<string, unknown>\n}>()\n\n// Must be synchronous — provide happens during component setup so all\n// descendant ElementRenderers pick it up before their own setup runs.\nprovideFormId(props.formId)\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ElementRenderer\n      v-for=\"child in props.schema\"\n      :key=\"child.id\"\n      :element=\"child\"\n      :item=\"props.item\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAYA,IAAM,IAAQ;SAWd,EAAc,EAAM,MAAM,mBAIxB,EAOM,OAPN,GAOM,EAAA,EAAA,EAAA,GANJ,EAKE,GAAA,MAAA,EAJgB,EAAM,SAAf,YADT,EAKE,GAAA;GAHC,KAAK,EAAM;GACX,SAAS;GACT,MAAM,EAAM"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/BannerDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven banner display.\n *\n * Wraps the Alert primitive: `title` is the alert title and `value`\n * is the description. `variant` selects the colour scheme and `icon`\n * is a lucide icon name (PascalCase or kebab-case). The library is\n * lazy-imported so we only pay for it when an icon is requested.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { Info } from \"@lucide/vue\"\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\nimport type { AlertVariants } from \"@/components/ui/alert\"\n\nexport interface BannerDisplayProps {\n  value?: string | number | null\n  title?: string\n  variant?: AlertVariants[\"variant\"]\n  icon?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BannerDisplayProps>(), {\n  variant: \"default\",\n})\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 toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string | undefined): 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[toPascalCase(name)] ?? null\n}\n\nwatch(\n  () => props.icon,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Alert\n    :variant=\"variant\"\n    :class=\"rootClass\"\n    data-testid=\"banner-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"icon && ResolvedIcon\"\n    />\n    <Info v-else-if=\"!icon\" />\n    <AlertTitle v-if=\"title\">\n      {{ title }}\n    </AlertTitle>\n    <AlertDescription v-if=\"content\">\n      {{ content }}\n    </AlertDescription>\n  </Alert>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,58 @@
+import e from "../../../ui/alert/Alert.js";
+import t from "../../../ui/alert/AlertDescription.js";
+import n from "../../../ui/alert/AlertTitle.js";
+import "../../../ui/alert/index.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, ref as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, watch as m, withCtx as h } from "vue";
+import { Info as g } from "@lucide/vue";
+//#region src/components/compositions/elements/display/BannerDisplay.vue?vue&type=script&setup=true&lang.ts
+var _ = /* @__PURE__ */ s({
+	__name: "BannerDisplay",
+	props: {
+		value: {},
+		title: {},
+		variant: { default: "default" },
+		icon: {},
+		classList: {}
+	},
+	setup(s) {
+		let _ = s, v = r(() => _.value === void 0 || _.value === null ? "" : String(_.value)), y = r(() => {
+			let e = _.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		function b(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		let x = u(null);
+		async function S(e) {
+			if (!e) {
+				x.value = null;
+				return;
+			}
+			x.value = (await import("@lucide/vue"))[b(e)] ?? null;
+		}
+		return m(() => _.icon, (e) => {
+			S(e);
+		}, { immediate: !0 }), (r, u) => (l(), i(p(e), {
+			variant: s.variant,
+			class: c(y.value),
+			"data-testid": "banner-display"
+		}, {
+			default: h(() => [
+				s.icon && x.value ? (l(), i(d(x.value), { key: 0 })) : s.icon ? a("", !0) : (l(), i(p(g), { key: 1 })),
+				s.title ? (l(), i(p(n), { key: 2 }, {
+					default: h(() => [o(f(s.title), 1)]),
+					_: 1
+				})) : a("", !0),
+				v.value ? (l(), i(p(t), { key: 3 }, {
+					default: h(() => [o(f(v.value), 1)]),
+					_: 1
+				})) : a("", !0)
+			]),
+			_: 1
+		}, 8, ["variant", "class"]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=BannerDisplay.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/BannerDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven banner display.\n *\n * Wraps the Alert primitive: `title` is the alert title and `value`\n * is the description. `variant` selects the colour scheme and `icon`\n * is a lucide icon name (PascalCase or kebab-case). The library is\n * lazy-imported so we only pay for it when an icon is requested.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { Info } from \"@lucide/vue\"\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\nimport type { AlertVariants } from \"@/components/ui/alert\"\n\nexport interface BannerDisplayProps {\n  value?: string | number | null\n  title?: string\n  variant?: AlertVariants[\"variant\"]\n  icon?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BannerDisplayProps>(), {\n  variant: \"default\",\n})\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 toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string | undefined): 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[toPascalCase(name)] ?? null\n}\n\nwatch(\n  () => props.icon,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Alert\n    :variant=\"variant\"\n    :class=\"rootClass\"\n    data-testid=\"banner-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"icon && ResolvedIcon\"\n    />\n    <Info v-else-if=\"!icon\" />\n    <AlertTitle v-if=\"title\">\n      {{ title }}\n    </AlertTitle>\n    <AlertDescription v-if=\"content\">\n      {{ content }}\n    </AlertDescription>\n  </Alert>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAsBA,IAAM,IAAQ,GAIR,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,EAAa,GAAuB;GAC3C,OAAO,EACJ,QAAQ,iBAAiB,GAAG,MAAiB,IAAK,EAAG,YAAY,IAAI,EAAG,EACxE,QAAQ,SAAS,MAAM,EAAE,YAAY,CAAC;EAC3C;EAEA,IAAM,IAAe,EAAsB,IAAI;EAE/C,eAAe,EAAS,GAAyC;GAC/D,IAAI,CAAC,GAAM;IACT,EAAa,QAAQ;IACrB;GACF;GAGA,EAAa,SAAQ,MAFH,OAAO,gBAEK,EAAa,CAAI,MAAM;EACvD;SAEA,QACQ,EAAM,OACX,MAAS;GACR,EAAc,CAAI;EACpB,GACA,EAAE,WAAW,GAAK,CACpB,mBAIE,EAgBQ,EAAA,CAAA,GAAA;GAfL,SAAS,EAAA;GACT,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;;oBAKV;IADM,EAAA,QAAQ,EAAA,SAAA,EAAA,GAFhB,EAGE,EAFK,EAAA,KAAY,GAAA,EAAA,KAAA,EAAA,CAAA,KAGD,EAAA,OAAQ,EAAA,IAAA,EAAA,KAAR,EAAA,GAAlB,EAA0B,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA;IACR,EAAA,SAAA,EAAA,GAAlB,EAEa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADA,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;IAEc,EAAA,SAAA,EAAA,GAAxB,EAEmB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADJ,CAAA,EAAA,EAAV,EAAA,KAAO,GAAA,CAAA,CAAA,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/BarcodeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven barcode display.\n *\n * Generates a barcode SVG from `value` using the `jsbarcode` library,\n * lazy-imported on mount. Default format is CODE128; supply alternates\n * (EAN13, UPC, ...) via the `format` prop.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\nexport interface BarcodeDisplayProps {\n  value?: string | number | null\n  format?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BarcodeDisplayProps>(), {\n  format: \"CODE128\",\n})\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 svgRef = useTemplateRef<SVGSVGElement>(\"svgRef\")\nconst error = ref<string>(\"\")\n\nasync function renderBarcode(): Promise<void> {\n  if (!svgRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"jsbarcode\")\n    const JsBarcode = (mod as unknown as { default: (el: SVGElement | HTMLElement, value: string, options?: Record<string, unknown>) => void }).default\n    JsBarcode(svgRef.value, content.value, {\n      format: props.format,\n      displayValue: true,\n      margin: 4,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render barcode\"\n  }\n}\n\nonMounted(() => {\n  void renderBarcode()\n})\n\nwatch(\n  () => [content.value, props.format],\n  () => {\n    void renderBarcode()\n  },\n)\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"barcode-display\"\n  >\n    <svg\n      ref=\"svgRef\"\n      role=\"img\"\n      :aria-label=\"`Barcode: ${content}`\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"barcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/BarcodeDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven barcode display.\n *\n * Generates a barcode SVG from `value` using the `jsbarcode` library,\n * lazy-imported on mount. Default format is CODE128; supply alternates\n * (EAN13, UPC, ...) via the `format` prop.\n */\nimport { computed, onMounted, ref, useTemplateRef, watch } from \"vue\"\n\nexport interface BarcodeDisplayProps {\n  value?: string | number | null\n  format?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BarcodeDisplayProps>(), {\n  format: \"CODE128\",\n})\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 svgRef = useTemplateRef<SVGSVGElement>(\"svgRef\")\nconst error = ref<string>(\"\")\n\nasync function renderBarcode(): Promise<void> {\n  if (!svgRef.value || !content.value) {\n    return\n  }\n  try {\n    const mod = await import(\"jsbarcode\")\n    const JsBarcode = (mod as unknown as { default: (el: SVGElement | HTMLElement, value: string, options?: Record<string, unknown>) => void }).default\n    JsBarcode(svgRef.value, content.value, {\n      format: props.format,\n      displayValue: true,\n      margin: 4,\n    })\n    error.value = \"\"\n  } catch (e) {\n    error.value = e instanceof Error ? e.message : \"Failed to render barcode\"\n  }\n}\n\nonMounted(() => {\n  void renderBarcode()\n})\n\nwatch(\n  () => [content.value, props.format],\n  () => {\n    void renderBarcode()\n  },\n)\n</script>\n\n<template>\n  <div\n    class=\"inline-block\"\n    :class=\"rootClass\"\n    data-testid=\"barcode-display\"\n  >\n    <svg\n      ref=\"svgRef\"\n      role=\"img\"\n      :aria-label=\"`Barcode: ${content}`\"\n    />\n    <p\n      v-if=\"error\"\n      class=\"mt-1 text-xs text-destructive\"\n      data-testid=\"barcode-error\"\n    >\n      {{ error }}\n    </p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAgBA,IAAM,IAAQ,GAIR,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,IAAS,EAA8B,QAAQ,GAC/C,IAAQ,EAAY,EAAE;EAE5B,eAAe,IAA+B;GACxC,OAAC,EAAO,SAAS,CAAC,EAAQ,QAG9B,IAAI;IAEF,IAAM,KAAa,MADD,OAAO,cACmH;IAM5I,AALA,EAAU,EAAO,OAAO,EAAQ,OAAO;KACrC,QAAQ,EAAM;KACd,cAAc;KACd,QAAQ;IACV,CAAC,GACD,EAAM,QAAQ;GAChB,SAAS,GAAG;IACV,EAAM,QAAQ,aAAa,QAAQ,EAAE,UAAU;GACjD;EACF;SAEA,QAAgB;GACd,EAAmB;EACrB,CAAC,GAED,QACQ,CAAC,EAAQ,OAAO,EAAM,MAAM,SAC5B;GACJ,EAAmB;EACrB,CACF,mBAIE,EAiBM,OAAA;GAhBJ,OAAK,EAAA,CAAC,gBACE,EAAA,KAAS,CAAA;GACjB,eAAY;YAEZ,EAIE,OAAA;YAHI;GAAJ,KAAI;GACJ,MAAK;GACJ,cAAU,YAAc,EAAA;mBAGnB,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/CarouselDisplay.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselDisplay.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/CarouselDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven carousel display.\n *\n * Wraps `embla-carousel-vue` to render a slideshow of image / html / text\n * slides. Read-only — no `modelValue`. Supports looping, autoplay (via a\n * lightweight `setInterval`, since `embla-carousel-autoplay` is not a\n * dependency here), prev/next arrows, and dot indicators.\n *\n *   <CarouselDisplay :slides=\"[{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg' }]\" />\n */\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\"\nimport emblaCarouselVue from \"embla-carousel-vue\"\nimport { ChevronLeft, ChevronRight } from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface CarouselSlide {\n  src?: string\n  alt?: string\n  caption?: string\n  html?: string\n}\n\nexport interface CarouselDisplayProps {\n  slides?: CarouselSlide[]\n  loop?: boolean\n  autoplay?: boolean\n  autoplayDelayMs?: number\n  showIndicators?: boolean\n  showArrows?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<CarouselDisplayProps>(), {\n  slides: () => [],\n  loop: true,\n  autoplay: false,\n  autoplayDelayMs: 5000,\n  showIndicators: true,\n  showArrows: true,\n})\n\nconst [emblaRef, emblaApi] = emblaCarouselVue(\n  computed(() => ({ loop: props.loop })),\n)\n\nconst selectedIndex = ref<number>(0)\nconst slideCount = computed<number>(() => props.slides.length)\n\nfunction onSelect(): void {\n  const api = emblaApi.value\n  if (!api) {\n    return\n  }\n  selectedIndex.value = api.selectedScrollSnap()\n}\n\nwatch(emblaApi, (api) => {\n  if (!api) {\n    return\n  }\n  onSelect()\n  api.on(\"select\", onSelect)\n  api.on(\"reInit\", onSelect)\n})\n\nlet autoplayTimer: ReturnType<typeof setInterval> | null = null\n\nfunction clearAutoplay(): void {\n  if (autoplayTimer !== null) {\n    clearInterval(autoplayTimer)\n    autoplayTimer = null\n  }\n}\n\nfunction startAutoplay(): void {\n  clearAutoplay()\n  if (!props.autoplay || slideCount.value <= 1) {\n    return\n  }\n  autoplayTimer = setInterval(() => {\n    emblaApi.value?.scrollNext()\n  }, props.autoplayDelayMs)\n}\n\nwatch(\n  () => [props.autoplay, props.autoplayDelayMs, slideCount.value] as const,\n  () => {\n    startAutoplay()\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  clearAutoplay()\n})\n\nfunction scrollPrev(): void {\n  emblaApi.value?.scrollPrev()\n}\n\nfunction scrollNext(): void {\n  emblaApi.value?.scrollNext()\n}\n\nfunction scrollTo(index: number): void {\n  emblaApi.value?.scrollTo(index)\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=\"cn('relative w-full overflow-hidden', rootClass)\"\n    data-testid=\"carousel-display\"\n  >\n    <div\n      v-if=\"slideCount === 0\"\n      class=\"flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-sm text-muted-foreground\"\n      data-testid=\"carousel-display-empty\"\n    >\n      No slides\n    </div>\n    <template v-else>\n      <div ref=\"emblaRef\" class=\"overflow-hidden\" data-testid=\"carousel-viewport\">\n        <div class=\"flex\">\n          <div\n            v-for=\"(slide, index) in slides\"\n            :key=\"index\"\n            class=\"min-w-0 flex-[0_0_100%]\"\n            data-testid=\"carousel-slide\"\n          >\n            <img\n              v-if=\"slide.src\"\n              :src=\"slide.src\"\n              :alt=\"slide.alt ?? ''\"\n              class=\"block h-auto w-full rounded\"\n              loading=\"lazy\"\n            >\n            <div\n              v-else-if=\"slide.html\"\n              class=\"h-full w-full\"\n              v-html=\"slide.html\"\n            />\n            <div\n              v-else\n              class=\"flex h-full w-full items-center justify-center p-6 text-center text-sm\"\n            >\n              {{ slide.caption ?? \"\" }}\n            </div>\n            <p\n              v-if=\"slide.src && slide.caption\"\n              class=\"mt-2 text-sm text-muted-foreground\"\n              data-testid=\"carousel-slide-caption\"\n            >\n              {{ slide.caption }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <template v-if=\"showArrows && slideCount > 1\">\n        <button\n          type=\"button\"\n          class=\"absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-foreground shadow ring-1 ring-border hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          aria-label=\"Previous slide\"\n          data-testid=\"carousel-prev\"\n          @click=\"scrollPrev\"\n        >\n          <ChevronLeft class=\"size-4\" />\n        </button>\n        <button\n          type=\"button\"\n          class=\"absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-foreground shadow ring-1 ring-border hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          aria-label=\"Next slide\"\n          data-testid=\"carousel-next\"\n          @click=\"scrollNext\"\n        >\n          <ChevronRight class=\"size-4\" />\n        </button>\n      </template>\n\n      <div\n        v-if=\"showIndicators && slideCount > 1\"\n        class=\"mt-2 flex items-center justify-center gap-1.5\"\n        data-testid=\"carousel-indicators\"\n      >\n        <button\n          v-for=\"(_, index) in slides\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"h-2 w-2 rounded-full bg-muted-foreground/40 transition-colors hover:bg-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          :class=\"index === selectedIndex ? 'bg-primary' : ''\"\n          :aria-label=\"`Go to slide ${index + 1}`\"\n          :aria-current=\"index === selectedIndex ? 'true' : undefined\"\n          data-testid=\"carousel-indicator\"\n          @click=\"scrollTo(index)\"\n        />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,140 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, watch as h } from "vue";
+import { ChevronLeft as g, ChevronRight as _ } from "@lucide/vue";
+import v from "embla-carousel-vue";
+//#region src/components/compositions/elements/display/CarouselDisplay.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	key: 0,
+	class: "flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-sm text-muted-foreground",
+	"data-testid": "carousel-display-empty"
+}, b = { class: "flex" }, x = ["src", "alt"], S = ["innerHTML"], C = {
+	key: 2,
+	class: "flex h-full w-full items-center justify-center p-6 text-center text-sm"
+}, w = {
+	key: 3,
+	class: "mt-2 text-sm text-muted-foreground",
+	"data-testid": "carousel-slide-caption"
+}, T = {
+	key: 1,
+	class: "mt-2 flex items-center justify-center gap-1.5",
+	"data-testid": "carousel-indicators"
+}, E = [
+	"aria-label",
+	"aria-current",
+	"onClick"
+], D = /* @__PURE__ */ s({
+	__name: "CarouselDisplay",
+	props: {
+		slides: { default: () => [] },
+		loop: {
+			type: Boolean,
+			default: !0
+		},
+		autoplay: {
+			type: Boolean,
+			default: !1
+		},
+		autoplayDelayMs: { default: 5e3 },
+		showIndicators: {
+			type: Boolean,
+			default: !0
+		},
+		showArrows: {
+			type: Boolean,
+			default: !0
+		},
+		classList: {}
+	},
+	setup(s) {
+		let D = s, [O, k] = v(n(() => ({ loop: D.loop }))), A = d(0), j = n(() => D.slides.length);
+		function M() {
+			let e = k.value;
+			e && (A.value = e.selectedScrollSnap());
+		}
+		h(k, (e) => {
+			e && (M(), e.on("select", M), e.on("reInit", M));
+		});
+		let N = null;
+		function P() {
+			N !== null && (clearInterval(N), N = null);
+		}
+		function F() {
+			P(), !(!D.autoplay || j.value <= 1) && (N = setInterval(() => {
+				k.value?.scrollNext();
+			}, D.autoplayDelayMs));
+		}
+		h(() => [
+			D.autoplay,
+			D.autoplayDelayMs,
+			j.value
+		], () => {
+			F();
+		}, { immediate: !0 }), l(() => {
+			P();
+		});
+		function I() {
+			k.value?.scrollPrev();
+		}
+		function L() {
+			k.value?.scrollNext();
+		}
+		function R(e) {
+			k.value?.scrollTo(e);
+		}
+		let z = n(() => {
+			let e = D.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (n, l) => (u(), i("div", {
+			class: c(m(e)("relative w-full overflow-hidden", z.value)),
+			"data-testid": "carousel-display"
+		}, [j.value === 0 ? (u(), i("div", y, " No slides ")) : (u(), i(t, { key: 1 }, [
+			a("div", {
+				ref_key: "emblaRef",
+				ref: O,
+				class: "overflow-hidden",
+				"data-testid": "carousel-viewport"
+			}, [a("div", b, [(u(!0), i(t, null, f(s.slides, (e, t) => (u(), i("div", {
+				key: t,
+				class: "min-w-0 flex-[0_0_100%]",
+				"data-testid": "carousel-slide"
+			}, [e.src ? (u(), i("img", {
+				key: 0,
+				src: e.src,
+				alt: e.alt ?? "",
+				class: "block h-auto w-full rounded",
+				loading: "lazy"
+			}, null, 8, x)) : e.html ? (u(), i("div", {
+				key: 1,
+				class: "h-full w-full",
+				innerHTML: e.html
+			}, null, 8, S)) : (u(), i("div", C, p(e.caption ?? ""), 1)), e.src && e.caption ? (u(), i("p", w, p(e.caption), 1)) : r("", !0)]))), 128))])], 512),
+			s.showArrows && j.value > 1 ? (u(), i(t, { key: 0 }, [a("button", {
+				type: "button",
+				class: "absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-foreground shadow ring-1 ring-border hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"aria-label": "Previous slide",
+				"data-testid": "carousel-prev",
+				onClick: I
+			}, [o(m(g), { class: "size-4" })]), a("button", {
+				type: "button",
+				class: "absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-foreground shadow ring-1 ring-border hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"aria-label": "Next slide",
+				"data-testid": "carousel-next",
+				onClick: L
+			}, [o(m(_), { class: "size-4" })])], 64)) : r("", !0),
+			s.showIndicators && j.value > 1 ? (u(), i("div", T, [(u(!0), i(t, null, f(s.slides, (e, t) => (u(), i("button", {
+				key: t,
+				type: "button",
+				class: c(["h-2 w-2 rounded-full bg-muted-foreground/40 transition-colors hover:bg-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", t === A.value ? "bg-primary" : ""]),
+				"aria-label": `Go to slide ${t + 1}`,
+				"aria-current": t === A.value ? "true" : void 0,
+				"data-testid": "carousel-indicator",
+				onClick: (e) => R(t)
+			}, null, 10, E))), 128))])) : r("", !0)
+		], 64))], 2));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=CarouselDisplay.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselDisplay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/display/CarouselDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven carousel display.\n *\n * Wraps `embla-carousel-vue` to render a slideshow of image / html / text\n * slides. Read-only — no `modelValue`. Supports looping, autoplay (via a\n * lightweight `setInterval`, since `embla-carousel-autoplay` is not a\n * dependency here), prev/next arrows, and dot indicators.\n *\n *   <CarouselDisplay :slides=\"[{ src: '/a.jpg', alt: 'A' }, { src: '/b.jpg' }]\" />\n */\nimport { computed, onBeforeUnmount, ref, watch } from \"vue\"\nimport emblaCarouselVue from \"embla-carousel-vue\"\nimport { ChevronLeft, ChevronRight } from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface CarouselSlide {\n  src?: string\n  alt?: string\n  caption?: string\n  html?: string\n}\n\nexport interface CarouselDisplayProps {\n  slides?: CarouselSlide[]\n  loop?: boolean\n  autoplay?: boolean\n  autoplayDelayMs?: number\n  showIndicators?: boolean\n  showArrows?: boolean\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<CarouselDisplayProps>(), {\n  slides: () => [],\n  loop: true,\n  autoplay: false,\n  autoplayDelayMs: 5000,\n  showIndicators: true,\n  showArrows: true,\n})\n\nconst [emblaRef, emblaApi] = emblaCarouselVue(\n  computed(() => ({ loop: props.loop })),\n)\n\nconst selectedIndex = ref<number>(0)\nconst slideCount = computed<number>(() => props.slides.length)\n\nfunction onSelect(): void {\n  const api = emblaApi.value\n  if (!api) {\n    return\n  }\n  selectedIndex.value = api.selectedScrollSnap()\n}\n\nwatch(emblaApi, (api) => {\n  if (!api) {\n    return\n  }\n  onSelect()\n  api.on(\"select\", onSelect)\n  api.on(\"reInit\", onSelect)\n})\n\nlet autoplayTimer: ReturnType<typeof setInterval> | null = null\n\nfunction clearAutoplay(): void {\n  if (autoplayTimer !== null) {\n    clearInterval(autoplayTimer)\n    autoplayTimer = null\n  }\n}\n\nfunction startAutoplay(): void {\n  clearAutoplay()\n  if (!props.autoplay || slideCount.value <= 1) {\n    return\n  }\n  autoplayTimer = setInterval(() => {\n    emblaApi.value?.scrollNext()\n  }, props.autoplayDelayMs)\n}\n\nwatch(\n  () => [props.autoplay, props.autoplayDelayMs, slideCount.value] as const,\n  () => {\n    startAutoplay()\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  clearAutoplay()\n})\n\nfunction scrollPrev(): void {\n  emblaApi.value?.scrollPrev()\n}\n\nfunction scrollNext(): void {\n  emblaApi.value?.scrollNext()\n}\n\nfunction scrollTo(index: number): void {\n  emblaApi.value?.scrollTo(index)\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=\"cn('relative w-full overflow-hidden', rootClass)\"\n    data-testid=\"carousel-display\"\n  >\n    <div\n      v-if=\"slideCount === 0\"\n      class=\"flex h-32 w-full items-center justify-center rounded border border-dashed bg-muted text-sm text-muted-foreground\"\n      data-testid=\"carousel-display-empty\"\n    >\n      No slides\n    </div>\n    <template v-else>\n      <div ref=\"emblaRef\" class=\"overflow-hidden\" data-testid=\"carousel-viewport\">\n        <div class=\"flex\">\n          <div\n            v-for=\"(slide, index) in slides\"\n            :key=\"index\"\n            class=\"min-w-0 flex-[0_0_100%]\"\n            data-testid=\"carousel-slide\"\n          >\n            <img\n              v-if=\"slide.src\"\n              :src=\"slide.src\"\n              :alt=\"slide.alt ?? ''\"\n              class=\"block h-auto w-full rounded\"\n              loading=\"lazy\"\n            >\n            <div\n              v-else-if=\"slide.html\"\n              class=\"h-full w-full\"\n              v-html=\"slide.html\"\n            />\n            <div\n              v-else\n              class=\"flex h-full w-full items-center justify-center p-6 text-center text-sm\"\n            >\n              {{ slide.caption ?? \"\" }}\n            </div>\n            <p\n              v-if=\"slide.src && slide.caption\"\n              class=\"mt-2 text-sm text-muted-foreground\"\n              data-testid=\"carousel-slide-caption\"\n            >\n              {{ slide.caption }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <template v-if=\"showArrows && slideCount > 1\">\n        <button\n          type=\"button\"\n          class=\"absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-foreground shadow ring-1 ring-border hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          aria-label=\"Previous slide\"\n          data-testid=\"carousel-prev\"\n          @click=\"scrollPrev\"\n        >\n          <ChevronLeft class=\"size-4\" />\n        </button>\n        <button\n          type=\"button\"\n          class=\"absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-background/70 text-foreground shadow ring-1 ring-border hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          aria-label=\"Next slide\"\n          data-testid=\"carousel-next\"\n          @click=\"scrollNext\"\n        >\n          <ChevronRight class=\"size-4\" />\n        </button>\n      </template>\n\n      <div\n        v-if=\"showIndicators && slideCount > 1\"\n        class=\"mt-2 flex items-center justify-center gap-1.5\"\n        data-testid=\"carousel-indicators\"\n      >\n        <button\n          v-for=\"(_, index) in slides\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"h-2 w-2 rounded-full bg-muted-foreground/40 transition-colors hover:bg-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          :class=\"index === selectedIndex ? 'bg-primary' : ''\"\n          :aria-label=\"`Go to slide ${index + 1}`\"\n          :aria-current=\"index === selectedIndex ? 'true' : undefined\"\n          data-testid=\"carousel-indicator\"\n          @click=\"scrollTo(index)\"\n        />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GASR,CAAC,GAAU,KAAY,EAC3B,SAAgB,EAAE,MAAM,EAAM,KAAK,EAAE,CACvC,GAEM,IAAgB,EAAY,CAAC,GAC7B,IAAa,QAAuB,EAAM,OAAO,MAAM;EAE7D,SAAS,IAAiB;GACxB,IAAM,IAAM,EAAS;GAChB,MAGL,EAAc,QAAQ,EAAI,mBAAmB;EAC/C;EAEA,EAAM,IAAW,MAAQ;GAClB,MAGL,EAAS,GACT,EAAI,GAAG,UAAU,CAAQ,GACzB,EAAI,GAAG,UAAU,CAAQ;EAC3B,CAAC;EAED,IAAI,IAAuD;EAE3D,SAAS,IAAsB;GAC7B,AAAI,MAAkB,SACpB,cAAc,CAAa,GAC3B,IAAgB;EAEpB;EAEA,SAAS,IAAsB;GAC7B,EAAc,GACV,GAAC,EAAM,YAAY,EAAW,SAAS,OAG3C,IAAgB,kBAAkB;IAChC,EAAS,OAAO,WAAW;GAC7B,GAAG,EAAM,eAAe;EAC1B;EAUA,AARA,QACQ;GAAC,EAAM;GAAU,EAAM;GAAiB,EAAW;EAAK,SACxD;GACJ,EAAc;EAChB,GACA,EAAE,WAAW,GAAK,CACpB,GAEA,QAAsB;GACpB,EAAc;EAChB,CAAC;EAED,SAAS,IAAmB;GAC1B,EAAS,OAAO,WAAW;EAC7B;EAEA,SAAS,IAAmB;GAC1B,EAAS,OAAO,WAAW;EAC7B;EAEA,SAAS,EAAS,GAAqB;GACrC,EAAS,OAAO,SAAS,CAAK;EAChC;EAEA,IAAM,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAwFM,OAAA;GAvFH,OAAK,EAAE,EAAA,CAAA,EAAE,mCAAoC,EAAA,KAAS,CAAA;GACvD,eAAY;MAGJ,EAAA,UAAU,KAAA,EAAA,GADlB,EAMM,OANN,GAIC,aAED,MAAA,EAAA,GACA,EA4EW,GAAA,EAAA,KAAA,EAAA,GAAA;GA3ET,EAmCM,OAAA;aAnCG;IAAJ,KAAI;IAAW,OAAM;IAAkB,eAAY;OACtD,EAiCM,OAjCN,GAiCM,EAAA,EAAA,EAAA,GAhCJ,EA+BM,GAAA,MAAA,EA9BqB,EAAA,SAAjB,GAAO,YADjB,EA+BM,OAAA;IA7BH,KAAK;IACN,OAAM;IACN,eAAY;OAGJ,EAAM,OAAA,EAAA,GADd,EAMC,OAAA;;IAJE,KAAK,EAAM;IACX,KAAK,EAAM,OAAG;IACf,OAAM;IACN,SAAQ;qBAGG,EAAM,QAAA,EAAA,GADnB,EAIE,OAAA;;IAFA,OAAM;IACN,WAAQ,EAAM;2BAEhB,EAKM,OALN,GAKM,EADD,EAAM,WAAO,EAAA,GAAA,CAAA,IAGV,EAAM,OAAO,EAAM,WAAA,EAAA,GAD3B,EAMI,KANJ,GAMI,EADC,EAAM,OAAO,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAMR,EAAA,cAAc,EAAA,QAAU,KAAA,EAAA,GAAxC,EAmBW,GAAA,EAAA,KAAA,EAAA,GAAA,CAlBT,EAQS,UAAA;IAPP,MAAK;IACL,OAAM;IACN,cAAW;IACX,eAAY;IACX,SAAO;OAER,EAA8B,EAAA,CAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,CAAA,GAE7B,EAQS,UAAA;IAPP,MAAK;IACL,OAAM;IACN,cAAW;IACX,eAAY;IACX,SAAO;OAER,EAA+B,EAAA,CAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA;GAKxB,EAAA,kBAAkB,EAAA,QAAU,KAAA,EAAA,GADpC,EAgBM,OAhBN,GAgBM,EAAA,EAAA,EAAA,GAXJ,EAUE,GAAA,MAAA,EATqB,EAAA,SAAb,GAAG,YADb,EAUE,UAAA;IARC,KAAK;IACN,MAAK;IACL,OAAK,EAAA,CAAC,mKACE,MAAU,EAAA,QAAa,eAAA,EAAA,CAAA;IAC9B,cAAU,eAAiB,IAAK;IAChC,gBAAc,MAAU,EAAA,QAAa,SAAY,KAAA;IAClD,eAAY;IACX,UAAK,MAAE,EAAS,CAAK"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDisplay.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":""}