@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/ButtonGroupAction-CNKJcaR9.js

@@ -0,0 +1,73 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./button-BAwcISlK.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderList as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import * as g from "@lucide/vue";
+//#region src/components/compositions/elements/action/ButtonGroupAction.vue?vue&type=script&setup=true&lang.ts
+var _ = ["id", "data-element-name"], v = /* @__PURE__ */ c({
+	__name: "ButtonGroupAction",
+	props: {
+		items: { default: () => [] },
+		variant: { default: "default" },
+		size: { default: "md" },
+		block: { type: Boolean },
+		id: {},
+		name: {}
+	},
+	emits: ["action", "click"],
+	setup(e, { emit: c }) {
+		let v = e, y = c, b = {
+			sm: "sm",
+			md: "default",
+			lg: "lg"
+		}, x = r(() => b[v.size] ?? "default"), S = g;
+		function C(e) {
+			if (e) return S[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? S[e];
+		}
+		function w(e) {
+			return e.variant ?? v.variant;
+		}
+		function T(e, t) {
+			y("click", t, e), !e.href && (t.preventDefault(), e.emit && y("action", {
+				name: e.emit,
+				item: e
+			}));
+		}
+		return (r, c) => (u(), o("div", {
+			id: e.id,
+			class: "inline-flex flex-wrap items-center gap-2",
+			role: "group",
+			"data-element-name": e.name ?? void 0
+		}, [(u(!0), o(n, null, d(e.items, (n, r) => (u(), i(m(t), {
+			key: n.id ?? `${n.label}-${r}`,
+			as: n.href ? "a" : "button",
+			href: n.href,
+			target: n.href ? n.target : void 0,
+			variant: w(n),
+			size: x.value,
+			disabled: n.disabled,
+			class: l(e.block ? "flex-1" : ""),
+			"data-item-emit": n.emit,
+			onClick: (e) => T(n, e)
+		}, {
+			default: h(() => [C(n.icon) ? (u(), i(f(C(n.icon)), {
+				key: 0,
+				class: "h-4 w-4"
+			})) : a("", !0), s("span", null, p(n.label), 1)]),
+			_: 2
+		}, 1032, [
+			"as",
+			"href",
+			"target",
+			"variant",
+			"size",
+			"disabled",
+			"class",
+			"data-item-emit",
+			"onClick"
+		]))), 128))], 8, _));
+	}
+}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
+//#endregion
+export { y as n, b as t };
+
+//# sourceMappingURL=ButtonGroupAction-CNKJcaR9.js.map

package/dist/chunks/ButtonGroupAction-CNKJcaR9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroupAction-CNKJcaR9.js","names":[],"sources":["../../src/components/compositions/elements/action/ButtonGroupAction.vue","../../src/components/compositions/elements/action/ButtonGroupAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven button-group composition. Renders an array of child\n * actions as a row of Buttons, each capable of emitting a click or\n * navigating to its href.\n *\n *   <ButtonGroupAction\n *     :items=\"[\n *       { label: 'Edit', emit: 'edit' },\n *       { label: 'Delete', variant: 'destructive', emit: 'delete' },\n *     ]\"\n *     @action=\"onAction\"\n *   />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport type {\n  ButtonActionSize,\n  ButtonActionVariant,\n} from \"./ButtonAction.vue\"\n\nexport interface ButtonGroupItem {\n  id?: string\n  label: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Visual variant; falls back to the group's variant prop. */\n  variant?: ButtonActionVariant\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n}\n\nexport interface ButtonGroupActionProps {\n  items?: ButtonGroupItem[]\n  /** Default variant applied to items that don't specify one. */\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Render the group stretched (each child becomes flex-1). */\n  block?: boolean\n  /** Group HTML id. */\n  id?: string\n  /** Group name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<ButtonGroupActionProps>(), {\n  items: () => [],\n  variant: \"default\",\n  size: \"md\",\n})\n\nconst emit = defineEmits<{\n  (\n    e: \"action\",\n    payload: { name: string; item: ButtonGroupItem },\n  ): void\n  (e: \"click\", event: MouseEvent, item: ButtonGroupItem): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\n)\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\n\nfunction variantFor(item: ButtonGroupItem): ButtonActionVariant {\n  return item.variant ?? props.variant\n}\n\nfunction onClick(child: ButtonGroupItem, event: MouseEvent): void {\n  emit(\"click\", event, child)\n  if (child.href) {\n    return\n  }\n  event.preventDefault()\n  if (child.emit) {\n    emit(\"action\", { name: child.emit, item: child })\n  }\n}\n</script>\n\n<template>\n  <div\n    :id=\"id\"\n    class=\"inline-flex flex-wrap items-center gap-2\"\n    role=\"group\"\n    :data-element-name=\"name ?? undefined\"\n  >\n    <Button\n      v-for=\"(child, idx) in items\"\n      :key=\"child.id ?? `${child.label}-${idx}`\"\n      :as=\"child.href ? 'a' : 'button'\"\n      :href=\"child.href\"\n      :target=\"child.href ? child.target : undefined\"\n      :variant=\"variantFor(child)\"\n      :size=\"mappedSize\"\n      :disabled=\"child.disabled\"\n      :class=\"block ? 'flex-1' : ''\"\n      :data-item-emit=\"child.emit\"\n      @click=\"(e: MouseEvent) => onClick(child, e)\"\n    >\n      <component :is=\"resolveIcon(child.icon)\" v-if=\"resolveIcon(child.icon)\" class=\"h-4 w-4\" />\n      <span>{{ child.label }}</span>\n    </Button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven button-group composition. Renders an array of child\n * actions as a row of Buttons, each capable of emitting a click or\n * navigating to its href.\n *\n *   <ButtonGroupAction\n *     :items=\"[\n *       { label: 'Edit', emit: 'edit' },\n *       { label: 'Delete', variant: 'destructive', emit: 'delete' },\n *     ]\"\n *     @action=\"onAction\"\n *   />\n */\nimport { computed } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport type {\n  ButtonActionSize,\n  ButtonActionVariant,\n} from \"./ButtonAction.vue\"\n\nexport interface ButtonGroupItem {\n  id?: string\n  label: string\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Visual variant; falls back to the group's variant prop. */\n  variant?: ButtonActionVariant\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  disabled?: boolean\n}\n\nexport interface ButtonGroupActionProps {\n  items?: ButtonGroupItem[]\n  /** Default variant applied to items that don't specify one. */\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Render the group stretched (each child becomes flex-1). */\n  block?: boolean\n  /** Group HTML id. */\n  id?: string\n  /** Group name (used as `data-element-name`). */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<ButtonGroupActionProps>(), {\n  items: () => [],\n  variant: \"default\",\n  size: \"md\",\n})\n\nconst emit = defineEmits<{\n  (\n    e: \"action\",\n    payload: { name: string; item: ButtonGroupItem },\n  ): void\n  (e: \"click\", event: MouseEvent, item: ButtonGroupItem): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\n)\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\n\nfunction variantFor(item: ButtonGroupItem): ButtonActionVariant {\n  return item.variant ?? props.variant\n}\n\nfunction onClick(child: ButtonGroupItem, event: MouseEvent): void {\n  emit(\"click\", event, child)\n  if (child.href) {\n    return\n  }\n  event.preventDefault()\n  if (child.emit) {\n    emit(\"action\", { name: child.emit, item: child })\n  }\n}\n</script>\n\n<template>\n  <div\n    :id=\"id\"\n    class=\"inline-flex flex-wrap items-center gap-2\"\n    role=\"group\"\n    :data-element-name=\"name ?? undefined\"\n  >\n    <Button\n      v-for=\"(child, idx) in items\"\n      :key=\"child.id ?? `${child.label}-${idx}`\"\n      :as=\"child.href ? 'a' : 'button'\"\n      :href=\"child.href\"\n      :target=\"child.href ? child.target : undefined\"\n      :variant=\"variantFor(child)\"\n      :size=\"mappedSize\"\n      :disabled=\"child.disabled\"\n      :class=\"block ? 'flex-1' : ''\"\n      :data-item-emit=\"child.emit\"\n      @click=\"(e: MouseEvent) => onClick(child, e)\"\n    >\n      <component :is=\"resolveIcon(child.icon)\" v-if=\"resolveIcon(child.icon)\" class=\"h-4 w-4\" />\n      <span>{{ child.label }}</span>\n    </Button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAsDA,IAAM,IAAQ,GAMR,IAAO,GAQP,IAA4D;GAChE,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAEM,IAAa,QACX,EAAQ,EAAM,SAAS,SAC/B,GAEM,IAAc;EACpB,SAAS,EAAY,GAAkD;GAChE,OAQL,OAAO,EALQ,EACZ,MAAM,QAAQ,EACd,OAAO,OAAO,EACd,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EACW,MAAW,EAAY;EAC5C;EAEA,SAAS,EAAW,GAA4C;GAC9D,OAAO,EAAK,WAAW,EAAM;EAC/B;EAEA,SAAS,EAAQ,GAAwB,GAAyB;GAChE,EAAK,SAAS,GAAO,CAAK,GACtB,GAAM,SAGV,EAAM,eAAe,GACjB,EAAM,QACR,EAAK,UAAU;IAAE,MAAM,EAAM;IAAM,MAAM;GAAM,CAAC;EAEpD;yBAIE,EAsBM,OAAA;GArBH,IAAI,EAAA;GACL,OAAM;GACN,MAAK;GACJ,qBAAmB,EAAA,QAAQ,KAAA;cAE5B,EAeS,GAAA,MAAA,EAdgB,EAAA,QAAf,GAAO,YADjB,EAeS,EAAA,CAAA,GAAA;GAbN,KAAK,EAAM,MAAE,GAAO,EAAM,MAAK,GAAI;GACnC,IAAI,EAAM,OAAI,MAAA;GACd,MAAM,EAAM;GACZ,QAAQ,EAAM,OAAO,EAAM,SAAS,KAAA;GACpC,SAAS,EAAW,CAAK;GACzB,MAAM,EAAA;GACN,UAAU,EAAM;GAChB,OAAK,EAAE,EAAA,QAAK,WAAA,EAAA;GACZ,kBAAgB,EAAM;GACtB,UAAQ,MAAkB,EAAQ,GAAO,CAAC;;oBAgBxC,CAd4C,EAAY,EAAM,IAAI,KAAA,EAAA,GAArE,EAA0F,EAA1E,EAAY,EAAM,IAAI,CAAA,GAAA;;IAAkC,OAAM;oBAC9E,EAA8B,QAAA,MAAA,EAArB,EAAM,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/CardListCard-BipufbBz.js

@@ -0,0 +1,105 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t, n, o as r, r as i, s as a } from "./card-DAfWnvro.js";
+import { t as o } from "./CardRenderer-N4R08uDO.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, ref as v, renderList as y, resolveDynamicComponent as b, toDisplayString as x, unref as S, withCtx as C } from "vue";
+//#region src/components/compositions/cards/CardListCard.vue?vue&type=script&setup=true&lang.ts
+var w = {
+	key: 1,
+	class: "mb-3 flex flex-col gap-0.5"
+}, T = {
+	key: 0,
+	class: "text-base font-semibold"
+}, E = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, D = {
+	key: 0,
+	class: "text-sm text-muted-foreground italic",
+	"data-testid": "card-list-empty"
+}, O = [
+	"draggable",
+	"data-card-list-item-id",
+	"onDragstart",
+	"onDrop"
+], k = /* @__PURE__ */ m({
+	__name: "CardListCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		dragTargetData: {},
+		gutterY: { default: "1rem" },
+		gutterX: { default: "1rem" },
+		cards: { default: () => [] },
+		item: { default: () => ({}) },
+		id: {}
+	},
+	emits: ["reorder"],
+	setup(e, { emit: m }) {
+		let k = e, A = m, j = v(null), M = c(() => j.value ?? k.cards), N = c(() => k.showCard !== !1), P = c(() => ({
+			rowGap: k.gutterY,
+			columnGap: k.gutterX
+		})), F = v(null);
+		function I(e, t) {
+			k.draggable && (F.value = t, e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", k.dragTargetData ?? k.id ?? "")));
+		}
+		function L(e) {
+			k.draggable && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"));
+		}
+		function R(e, t) {
+			if (!k.draggable || F.value === null) return;
+			e.preventDefault();
+			let n = [...M.value], [r] = n.splice(F.value, 1);
+			n.splice(t, 0, r), j.value = n, F.value = null, A("reorder", n);
+		}
+		function z() {
+			F.value = null;
+		}
+		return (c, m) => (_(), l(b(N.value ? S(a) : "section"), { class: h(["gxp-card-list", N.value ? "" : "flex flex-col bg-transparent border-0 shadow-none"]) }, {
+			default: C(() => [N.value && (e.title || e.subtitle) ? (_(), l(S(i), { key: 0 }, {
+				default: C(() => [e.title ? (_(), l(S(n), { key: 0 }, {
+					default: C(() => [f(x(e.title), 1)]),
+					_: 1
+				})) : u("", !0), e.subtitle ? (_(), l(S(t), { key: 1 }, {
+					default: C(() => [f(x(e.subtitle), 1)]),
+					_: 1
+				})) : u("", !0)]),
+				_: 1
+			})) : e.title || e.subtitle ? (_(), d("header", w, [e.title ? (_(), d("h3", T, x(e.title), 1)) : u("", !0), e.subtitle ? (_(), d("p", E, x(e.subtitle), 1)) : u("", !0)])) : u("", !0), (_(), l(b(N.value ? S(r) : "div"), {
+				class: "flex flex-col",
+				style: g(P.value)
+			}, {
+				default: C(() => [M.value.length === 0 ? (_(), d("p", D, " No cards to display. ")) : (_(!0), d(s, { key: 1 }, y(M.value, (t, n) => (_(), d("div", {
+					key: t.id,
+					draggable: e.draggable === !0,
+					"data-card-list-item-id": t.id,
+					class: h([
+						"gxp-card-list__item",
+						e.draggable ? "cursor-move" : "",
+						F.value === n ? "opacity-50" : ""
+					]),
+					onDragstart: (e) => I(e, n),
+					onDragover: L,
+					onDrop: (e) => R(e, n),
+					onDragend: z
+				}, [p(o, {
+					card: t,
+					item: e.item
+				}, null, 8, ["card", "item"])], 42, O))), 128))]),
+				_: 1
+			}, 8, ["style"]))]),
+			_: 1
+		}, 8, ["class"]));
+	}
+}), A = /* @__PURE__ */ e({ default: () => j }), j = k;
+//#endregion
+export { A as n, j as t };
+
+//# sourceMappingURL=CardListCard-BipufbBz.js.map

package/dist/chunks/CardListCard-BipufbBz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardListCard-BipufbBz.js","names":[],"sources":["../../src/components/compositions/cards/CardListCard.vue","../../src/components/compositions/cards/CardListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `card-list` composition — renders a list of nested\n * DisplayCards via `CardRenderer`. Each child card is a fully-resolved\n * DisplayCard (not an ID lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <CardListCard\n *     title=\"Settings\"\n *     :cards=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * Drag-and-drop reordering is a lightweight HTML5 implementation when\n * `draggable === true`; on drop the new card order is emitted as\n * `reorder` so a parent (e.g. the FormBuilder) can persist it.\n */\nimport { computed, ref } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\"\n\nexport interface CardListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  draggable?: boolean\n  dragTargetData?: string\n  gutterY?: string\n  gutterX?: string\n  /** Resolved child cards (NOT IDs). */\n  cards?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Identifier used as a fallback drag payload when `dragTargetData` is unset. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<CardListCardProps>(), {\n  showCard: true,\n  draggable: false,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  cards: () => [],\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"reorder\", value: DisplayCard[]): void\n}>()\n\nconst internalOrder = ref<DisplayCard[] | null>(null)\n\nconst order = computed<DisplayCard[]>(\n  () => internalOrder.value ?? props.cards,\n)\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst gridStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n\nconst dragIndex = ref<number | null>(null)\n\nfunction onDragStart(event: DragEvent, index: number): void {\n  if (!props.draggable) {\n    return\n  }\n  dragIndex.value = index\n  if (event.dataTransfer) {\n    event.dataTransfer.effectAllowed = \"move\"\n    event.dataTransfer.setData(\n      \"text/plain\",\n      props.dragTargetData ?? props.id ?? \"\",\n    )\n  }\n}\n\nfunction onDragOver(event: DragEvent): void {\n  if (!props.draggable) {\n    return\n  }\n  event.preventDefault()\n  if (event.dataTransfer) {\n    event.dataTransfer.dropEffect = \"move\"\n  }\n}\n\nfunction onDrop(event: DragEvent, targetIndex: number): void {\n  if (!props.draggable || dragIndex.value === null) {\n    return\n  }\n  event.preventDefault()\n  const next = [...order.value]\n  const [moved] = next.splice(dragIndex.value, 1)\n  next.splice(targetIndex, 0, moved)\n  internalOrder.value = next\n  dragIndex.value = null\n  emit(\"reorder\", next)\n}\n\nfunction onDragEnd(): void {\n  dragIndex.value = null\n}\n</script>\n\n<template>\n  <component\n    :is=\"showChrome ? Card : 'section'\"\n    :class=\"[\n      'gxp-card-list',\n      showChrome ? '' : 'flex flex-col bg-transparent border-0 shadow-none',\n    ]\"\n  >\n    <CardHeader v-if=\"showChrome && (title || subtitle)\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <header\n      v-else-if=\"title || subtitle\"\n      class=\"mb-3 flex flex-col gap-0.5\"\n    >\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n\n    <component\n      :is=\"showChrome ? CardContent : 'div'\"\n      class=\"flex flex-col\"\n      :style=\"gridStyle\"\n    >\n      <template v-if=\"order.length === 0\">\n        <p\n          class=\"text-sm text-muted-foreground italic\"\n          data-testid=\"card-list-empty\"\n        >\n          No cards to display.\n        </p>\n      </template>\n      <template v-else>\n        <div\n          v-for=\"(child, index) in order\"\n          :key=\"child.id\"\n          :draggable=\"draggable === true\"\n          :data-card-list-item-id=\"child.id\"\n          :class=\"[\n            'gxp-card-list__item',\n            draggable ? 'cursor-move' : '',\n            dragIndex === index ? 'opacity-50' : '',\n          ]\"\n          @dragstart=\"onDragStart($event, index)\"\n          @dragover=\"onDragOver\"\n          @drop=\"onDrop($event, index)\"\n          @dragend=\"onDragEnd\"\n        >\n          <CardRenderer :card=\"child\" :item=\"item\" />\n        </div>\n      </template>\n    </component>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `card-list` composition — renders a list of nested\n * DisplayCards via `CardRenderer`. Each child card is a fully-resolved\n * DisplayCard (not an ID lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <CardListCard\n *     title=\"Settings\"\n *     :cards=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * Drag-and-drop reordering is a lightweight HTML5 implementation when\n * `draggable === true`; on drop the new card order is emitted as\n * `reorder` so a parent (e.g. the FormBuilder) can persist it.\n */\nimport { computed, ref } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\"\n\nexport interface CardListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  draggable?: boolean\n  dragTargetData?: string\n  gutterY?: string\n  gutterX?: string\n  /** Resolved child cards (NOT IDs). */\n  cards?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Identifier used as a fallback drag payload when `dragTargetData` is unset. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<CardListCardProps>(), {\n  showCard: true,\n  draggable: false,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  cards: () => [],\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"reorder\", value: DisplayCard[]): void\n}>()\n\nconst internalOrder = ref<DisplayCard[] | null>(null)\n\nconst order = computed<DisplayCard[]>(\n  () => internalOrder.value ?? props.cards,\n)\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst gridStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n\nconst dragIndex = ref<number | null>(null)\n\nfunction onDragStart(event: DragEvent, index: number): void {\n  if (!props.draggable) {\n    return\n  }\n  dragIndex.value = index\n  if (event.dataTransfer) {\n    event.dataTransfer.effectAllowed = \"move\"\n    event.dataTransfer.setData(\n      \"text/plain\",\n      props.dragTargetData ?? props.id ?? \"\",\n    )\n  }\n}\n\nfunction onDragOver(event: DragEvent): void {\n  if (!props.draggable) {\n    return\n  }\n  event.preventDefault()\n  if (event.dataTransfer) {\n    event.dataTransfer.dropEffect = \"move\"\n  }\n}\n\nfunction onDrop(event: DragEvent, targetIndex: number): void {\n  if (!props.draggable || dragIndex.value === null) {\n    return\n  }\n  event.preventDefault()\n  const next = [...order.value]\n  const [moved] = next.splice(dragIndex.value, 1)\n  next.splice(targetIndex, 0, moved)\n  internalOrder.value = next\n  dragIndex.value = null\n  emit(\"reorder\", next)\n}\n\nfunction onDragEnd(): void {\n  dragIndex.value = null\n}\n</script>\n\n<template>\n  <component\n    :is=\"showChrome ? Card : 'section'\"\n    :class=\"[\n      'gxp-card-list',\n      showChrome ? '' : 'flex flex-col bg-transparent border-0 shadow-none',\n    ]\"\n  >\n    <CardHeader v-if=\"showChrome && (title || subtitle)\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <header\n      v-else-if=\"title || subtitle\"\n      class=\"mb-3 flex flex-col gap-0.5\"\n    >\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n\n    <component\n      :is=\"showChrome ? CardContent : 'div'\"\n      class=\"flex flex-col\"\n      :style=\"gridStyle\"\n    >\n      <template v-if=\"order.length === 0\">\n        <p\n          class=\"text-sm text-muted-foreground italic\"\n          data-testid=\"card-list-empty\"\n        >\n          No cards to display.\n        </p>\n      </template>\n      <template v-else>\n        <div\n          v-for=\"(child, index) in order\"\n          :key=\"child.id\"\n          :draggable=\"draggable === true\"\n          :data-card-list-item-id=\"child.id\"\n          :class=\"[\n            'gxp-card-list__item',\n            draggable ? 'cursor-move' : '',\n            dragIndex === index ? 'opacity-50' : '',\n          ]\"\n          @dragstart=\"onDragStart($event, index)\"\n          @dragover=\"onDragOver\"\n          @drop=\"onDrop($event, index)\"\n          @dragend=\"onDragEnd\"\n        >\n          <CardRenderer :card=\"child\" :item=\"item\" />\n        </div>\n      </template>\n    </component>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAQ,GASR,IAAO,GAIP,IAAgB,EAA0B,IAAI,GAE9C,IAAQ,QACN,EAAc,SAAS,EAAM,KACrC,GAEM,IAAa,QAAwB,EAAM,aAAa,EAAK,GAE7D,IAAY,SAAgB;GAChC,QAAQ,EAAM;GACd,WAAW,EAAM;EACnB,EAAE,GAEI,IAAY,EAAmB,IAAI;EAEzC,SAAS,EAAY,GAAkB,GAAqB;GACrD,EAAM,cAGX,EAAU,QAAQ,GACd,EAAM,iBACR,EAAM,aAAa,gBAAgB,QACnC,EAAM,aAAa,QACjB,cACA,EAAM,kBAAkB,EAAM,MAAM,EACtC;EAEJ;EAEA,SAAS,EAAW,GAAwB;GACrC,EAAM,cAGX,EAAM,eAAe,GACjB,EAAM,iBACR,EAAM,aAAa,aAAa;EAEpC;EAEA,SAAS,EAAO,GAAkB,GAA2B;GAC3D,IAAI,CAAC,EAAM,aAAa,EAAU,UAAU,MAC1C;GAEF,EAAM,eAAe;GACrB,IAAM,IAAO,CAAC,GAAG,EAAM,KAAK,GACtB,CAAC,KAAS,EAAK,OAAO,EAAU,OAAO,CAAC;GAI9C,AAHA,EAAK,OAAO,GAAa,GAAG,CAAK,GACjC,EAAc,QAAQ,GACtB,EAAU,QAAQ,MAClB,EAAK,WAAW,CAAI;EACtB;EAEA,SAAS,IAAkB;GACzB,EAAU,QAAQ;EACpB;yBAIE,EA0DY,EAzDL,EAAA,QAAa,EAAA,CAAA,IAAI,SAAA,GAAA,EACrB,OAAK,EAAA,CAAA,iBAAiC,EAAA,QAAU,KAAA,mDAAA,CAAA,EAAA,GAAA;oBAUpC,CALK,EAAA,UAAe,EAAA,SAAS,EAAA,aAAA,EAAA,GAA1C,EAKa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBAJoC,CAA9B,EAAA,SAAA,EAAA,GAAjB,EAA+C,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBAAZ,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;qBACT,EAAA,YAAA,EAAA,GAAvB,EAEkB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADF,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;;;SAIF,EAAA,SAAS,EAAA,YAAA,EAAA,GADtB,EAUS,UAVT,GAUS,CANG,EAAA,SAAA,EAAA,GAAV,EAEK,MAFL,GAEK,EADA,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAED,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,GAIf,EAgCY,EA/BL,EAAA,QAAa,EAAA,CAAA,IAAW,KAAA,GAAA;IAC7B,OAAM;IACL,OAAK,EAAE,EAAA,KAAS;;qBASN,CAPK,EAAA,MAAM,WAAM,KAAA,EAAA,GAC1B,EAKI,KALJ,GAGC,wBAED,MAAA,EAAA,EAAA,GAGA,EAgBM,GAAA,EAAA,KAAA,EAAA,GAAA,EAfqB,EAAA,QAAjB,GAAO,YADjB,EAgBM,OAAA;KAdH,KAAK,EAAM;KACX,WAAW,EAAA,cAAS;KACpB,0BAAwB,EAAM;KAC9B,OAAK,EAAA;;MAAmD,EAAA,YAAS,gBAAA;MAAmC,EAAA,UAAc,IAAK,eAAA;;KAKvH,cAAS,MAAE,EAAY,GAAQ,CAAK;KACpC,YAAU;KACV,SAAI,MAAE,EAAO,GAAQ,CAAK;KAC1B,WAAS;QAEV,EAA2C,GAAA;KAA5B,MAAM;KAAQ,MAAM,EAAA"}

package/dist/chunks/CardRenderer-N4R08uDO.js

@@ -0,0 +1,140 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { i as t } from "./registry-DF6UGvEI.js";
+import { n, t as r } from "./useDisplayConditions-Dopsa2vu.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, defineAsyncComponent as c, defineComponent as l, guardReactiveProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m } from "vue";
+//#region src/engine/useCardLoader.ts
+var h = /* @__PURE__ */ Object.assign({
+	"../components/compositions/cards/CardListCard.vue": () => import("./CardListCard-BipufbBz.js").then((e) => e.n),
+	"../components/compositions/cards/DataTableCard.vue": () => import("./DataTableCard-BpsxPMb7.js").then((e) => e.n),
+	"../components/compositions/cards/ElementDisplayCard.vue": () => import("./ElementDisplayCard-CgWTdKNZ.js").then((e) => e.n),
+	"../components/compositions/cards/ElementListCard.vue": () => import("./ElementListCard-B8oVHSqE.js").then((e) => e.n),
+	"../components/compositions/cards/GridViewCard.vue": () => import("./GridViewCard-BxiLP409.js").then((e) => e.n),
+	"../components/compositions/cards/InfoCard.vue": () => import("./InfoCard-1LxVfz7I.js").then((e) => e.n),
+	"../components/compositions/cards/TabListCard.vue": () => import("./TabListCard-DTtWVg57.js").then((e) => e.n)
+}), g = /* @__PURE__ */ new Map();
+function _(e) {
+	let r = g.get(e);
+	if (r) return r;
+	let i = t(e);
+	if (!i) {
+		let t = n("card", e);
+		return g.set(e, t), t;
+	}
+	let a = h[`../components/compositions/cards/${i}.vue`];
+	if (!a) {
+		let t = n("card", e, i);
+		return g.set(e, t), t;
+	}
+	let o = c({
+		loader: async () => {
+			let e = await a();
+			return e.default ?? e;
+		},
+		errorComponent: n("card", e, i),
+		delay: 0,
+		suspensible: !1
+	});
+	return g.set(e, o), o;
+}
+function v(e) {
+	let n = t(e);
+	if (!n) return Promise.resolve();
+	let r = h[`../components/compositions/cards/${n}.vue`];
+	return r ? r() : Promise.resolve();
+}
+//#endregion
+//#region src/engine/CardRenderer.vue?vue&type=script&setup=true&lang.ts
+var y = ["data-card-id", "data-card-type"], b = /* @__PURE__ */ l({
+	__name: "CardRenderer",
+	props: {
+		card: {},
+		item: { default: () => ({}) },
+		elements: { default: () => ({}) },
+		cards: { default: () => ({}) },
+		evaluationContext: { default: () => ({}) }
+	},
+	setup(t) {
+		let n = t, c = i(() => r(n.card, n.item, n.evaluationContext)), l = i(() => _(n.card.cardType)), h = new Set([
+			"cardType",
+			"conditionParams",
+			"conditionGroupLogic",
+			"condition",
+			"features",
+			"permissions",
+			"columns",
+			"columnsSm",
+			"columnsMd",
+			"columnsLg",
+			"columnsXl",
+			"columnsXxl",
+			"wrapperClassList",
+			"columnClassList",
+			"order",
+			"elementList",
+			"cardList",
+			"tabList",
+			"elementId"
+		]), g = i(() => {
+			let e = n.card, t = {};
+			for (let [n, r] of Object.entries(e)) h.has(n) || (t[n] = r);
+			if (t.item = n.item, Array.isArray(e.elementList)) {
+				let r = e.elementList, i = [];
+				for (let e of r) {
+					let t = n.elements[e];
+					t && i.push(t);
+				}
+				t.elements = i;
+			}
+			if (Array.isArray(e.cardList)) {
+				let r = e.cardList, i = [];
+				for (let e of r) {
+					let t = n.cards[e];
+					t && i.push(t);
+				}
+				t.cards = i;
+			}
+			if (Array.isArray(e.tabList)) {
+				let r = e.tabList, i = [];
+				for (let e of r) {
+					let t = n.cards[e];
+					t && i.push(t);
+				}
+				t.tabs = i;
+			}
+			if (n.card.cardType === "grid-view" && typeof e.gridLayout == "object" && e.gridLayout !== null) {
+				let r = e.gridLayout, i = /* @__PURE__ */ new Set();
+				for (let e of Object.values(r)) if (Array.isArray(e)) {
+					for (let t of e) if (t && typeof t == "object" && "i" in t) {
+						let e = t.i;
+						typeof e == "string" && n.elements[e] && i.add(e);
+					}
+				}
+				i.size > 0 && (t.gridElements = Array.from(i).map((e) => n.elements[e]).filter(Boolean));
+			}
+			let r = e.elementId;
+			if (typeof r == "string" && r.length > 0) {
+				let e = n.elements[r];
+				e && (t.element = e);
+			}
+			return t;
+		}), v = i(() => e("gxp-card", `gxp-card--${n.card.cardType}`, b("col", n.card.columns), b("col-sm", n.card.columnsSm), b("col-md", n.card.columnsMd), b("col-lg", n.card.columnsLg), b("col-xl", n.card.columnsXl), x(n.card.wrapperClassList)));
+		function b(e, t) {
+			if (typeof t != "number") return;
+			let n = Math.max(0, Math.min(12, t)) / 12;
+			return e === "col" ? `basis-[${(n * 100).toFixed(4)}%]` : `${e}:basis-[${(n * 100).toFixed(4)}%]`;
+		}
+		function x(e) {
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}
+		return (e, n) => c.value ? (p(), s("div", {
+			key: 0,
+			class: d(v.value),
+			"data-card-id": t.card.id,
+			"data-card-type": t.card.cardType
+		}, [(p(), a(m(l.value), f(u(g.value)), null, 16))], 10, y)) : o("", !0);
+	}
+});
+//#endregion
+export { _ as n, v as r, b as t };
+
+//# sourceMappingURL=CardRenderer-N4R08uDO.js.map

package/dist/chunks/CardRenderer-N4R08uDO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardRenderer-N4R08uDO.js","names":[],"sources":["../../src/engine/useCardLoader.ts","../../src/engine/CardRenderer.vue","../../src/engine/CardRenderer.vue"],"sourcesContent":["import { type Component, defineAsyncComponent } from \"vue\"\nimport { resolveCardPath } from \"./registry\"\nimport { __createMissingFallback } from \"./useElementLoader\"\n\nconst cardModules = import.meta.glob(\"../components/compositions/cards/**/*.vue\")\n\nconst componentCache = new Map<string, Component>()\n\n/**\n * Resolves the Vue component for a given DisplayCard `cardType`.\n * Same lazy-loading + fallback semantics as `getElementComponent`.\n */\nexport function getCardComponent(cardType: string): Component {\n  const cached = componentCache.get(cardType)\n  if (cached) {\n    return cached\n  }\n\n  const path = resolveCardPath(cardType)\n  if (!path) {\n    const fallback = __createMissingFallback(\"card\", cardType)\n    componentCache.set(cardType, fallback)\n    return fallback\n  }\n\n  const importer = cardModules[`../components/compositions/cards/${path}.vue`]\n  if (!importer) {\n    const fallback = __createMissingFallback(\"card\", cardType, path)\n    componentCache.set(cardType, fallback)\n    return fallback\n  }\n\n  const component = defineAsyncComponent({\n    loader: async () => {\n      const mod = (await (importer as () => Promise<{ default: Component }>)())\n      return mod.default ?? (mod as unknown as Component)\n    },\n    errorComponent: __createMissingFallback(\"card\", cardType, path),\n    delay: 0,\n    suspensible: false,\n  })\n  componentCache.set(cardType, component)\n  return component\n}\n\nexport function preloadCard(cardType: string): Promise<unknown> {\n  const path = resolveCardPath(cardType)\n  if (!path) {\n    return Promise.resolve()\n  }\n  const importer = cardModules[`../components/compositions/cards/${path}.vue`]\n  return importer ? importer() : Promise.resolve()\n}\n\nexport function __clearCardCache(): void {\n  componentCache.clear()\n}\n","<script setup lang=\"ts\">\n/**\n * Renders a single DisplayCard by dispatching its JSON definition into\n * the matching composition under `components/compositions/cards/`.\n *\n * The renderer is the bridge layer:\n *   - resolves the composition by `card.cardType` via the registry\n *   - evaluates the card's visibility (`shouldRender`)\n *   - applies responsive layout + classList chrome at the wrapper level\n *   - resolves ID-referenced child lists against the page-level\n *     `elements` / `cards` maps:\n *       - `card.elementList: string[]` → pass as `elements: CardElement[]`\n *       - `card.cardList: string[]`    → pass as `cards: DisplayCard[]`\n *       - `card.tabList: string[]`     → pass as `tabs: DisplayCard[]`\n *       - `card.elementId: string`     → pass as `element: CardElement`\n *   - strips schema-only keys (cardType, conditionParams, columns*, ...)\n *     and passes the rest through as Vue props\n *\n * Compositions don't know about the page-level maps or the JSON schema —\n * they receive resolved children + display props and emit normal Vue\n * events. They're directly mountable in any app.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport { cn } from \"@/lib/utils\"\nimport { getCardComponent } from \"./useCardLoader\"\nimport {\n  shouldRender,\n  type EvaluationContext,\n} from \"./useDisplayConditions\"\n\ninterface Props {\n  card: DisplayCard\n  item?: Record<string, unknown>\n  /** Page-level element registry: id → CardElement JSON. */\n  elements?: Record<string, CardElement>\n  /** Page-level card registry: id → DisplayCard JSON (for nested cards). */\n  cards?: Record<string, DisplayCard>\n  evaluationContext?: EvaluationContext\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  item: () => ({}),\n  elements: () => ({}),\n  cards: () => ({}),\n  evaluationContext: () => ({}),\n})\n\nconst visible = computed(() =>\n  shouldRender(props.card, props.item, props.evaluationContext),\n)\n\nconst resolved = computed(() => getCardComponent(props.card.cardType))\n\n/**\n * Keys that live on every DisplayCard and are NOT meant to flow\n * through to the composition as props. These are either consumed by\n * this renderer (`columns*`, `conditionParams`, `cardType`, ...) or\n * resolved into their concrete child arrays below.\n */\nconst STRIPPED_KEYS = new Set<string>([\n  \"cardType\",\n  \"conditionParams\",\n  \"conditionGroupLogic\",\n  \"condition\",\n  \"features\",\n  \"permissions\",\n  \"columns\",\n  \"columnsSm\",\n  \"columnsMd\",\n  \"columnsLg\",\n  \"columnsXl\",\n  \"columnsXxl\",\n  \"wrapperClassList\",\n  \"columnClassList\",\n  \"order\",\n  // ID-referenced child lists — resolved below into concrete arrays.\n  \"elementList\",\n  \"cardList\",\n  \"tabList\",\n  \"elementId\",\n])\n\n/**\n * Compute the props object to pass to the resolved composition.\n *\n * - Strips schema-only keys (`cardType`, `conditionParams`, ...).\n * - Resolves `elementList` / `cardList` / `tabList` / `elementId` against\n *   the page-level registries and exposes them as concrete arrays /\n *   objects under composition-facing prop names.\n * - Forwards `item` as-is for child renderers to use.\n */\nconst compositionProps = computed<Record<string, unknown>>(() => {\n  const c = props.card as unknown as Record<string, unknown>\n  const result: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(c)) {\n    if (!STRIPPED_KEYS.has(key)) {\n      result[key] = value\n    }\n  }\n\n  // Pass through the data model.\n  result.item = props.item\n\n  // Resolve `elementList: string[]` → `elements: CardElement[]`.\n  if (Array.isArray((c as { elementList?: unknown }).elementList)) {\n    const ids = (c as { elementList: string[] }).elementList\n    const out: CardElement[] = []\n    for (const id of ids) {\n      const el = props.elements[id]\n      if (el) {\n        out.push(el)\n      }\n    }\n    result.elements = out\n  }\n\n  // Resolve `cardList: string[]` → `cards: DisplayCard[]`.\n  if (Array.isArray((c as { cardList?: unknown }).cardList)) {\n    const ids = (c as { cardList: string[] }).cardList\n    const out: DisplayCard[] = []\n    for (const id of ids) {\n      const child = props.cards[id]\n      if (child) {\n        out.push(child)\n      }\n    }\n    result.cards = out\n  }\n\n  // Resolve `tabList: string[]` → `tabs: DisplayCard[]`.\n  if (Array.isArray((c as { tabList?: unknown }).tabList)) {\n    const ids = (c as { tabList: string[] }).tabList\n    const out: DisplayCard[] = []\n    for (const id of ids) {\n      const child = props.cards[id]\n      if (child) {\n        out.push(child)\n      }\n    }\n    result.tabs = out\n  }\n\n  // For GridViewCard: resolve element refs that appear inside\n  // `gridLayout[breakpoint][n].i` against the page-level elements\n  // map. Card refs at the same position already work because the\n  // composition resolves them against `cards` (resolved above).\n  // Elements need a separate `gridElements` array on the composition.\n  if (\n    props.card.cardType === \"grid-view\" &&\n    typeof (c as { gridLayout?: unknown }).gridLayout === \"object\" &&\n    (c as { gridLayout?: unknown }).gridLayout !== null\n  ) {\n    const layout = (c as { gridLayout: Record<string, unknown> }).gridLayout\n    const elementIds = new Set<string>()\n    for (const breakpoint of Object.values(layout)) {\n      if (Array.isArray(breakpoint)) {\n        for (const item of breakpoint) {\n          if (item && typeof item === \"object\" && \"i\" in item) {\n            const id = (item as { i: unknown }).i\n            if (typeof id === \"string\" && props.elements[id]) {\n              elementIds.add(id)\n            }\n          }\n        }\n      }\n    }\n    if (elementIds.size > 0) {\n      result.gridElements = Array.from(elementIds)\n        .map((id) => props.elements[id]!)\n        .filter(Boolean)\n    }\n  }\n\n  // Resolve `elementId: string` → `element: CardElement`.\n  const elementId = (c as { elementId?: unknown }).elementId\n  if (typeof elementId === \"string\" && elementId.length > 0) {\n    const el = props.elements[elementId]\n    if (el) {\n      result.element = el\n    }\n  }\n\n  return result\n})\n\nconst wrapperClass = computed(() =>\n  cn(\n    \"gxp-card\",\n    `gxp-card--${props.card.cardType}`,\n    columnClass(\"col\", props.card.columns),\n    columnClass(\"col-sm\", props.card.columnsSm),\n    columnClass(\"col-md\", props.card.columnsMd),\n    columnClass(\"col-lg\", props.card.columnsLg),\n    columnClass(\"col-xl\", props.card.columnsXl),\n    normalizeClasses(props.card.wrapperClassList),\n  ),\n)\n\nfunction columnClass(prefix: string, n?: number): string | undefined {\n  if (typeof n !== \"number\") {\n    return undefined\n  }\n  const pct = Math.max(0, Math.min(12, n)) / 12\n  return prefix === \"col\"\n    ? `basis-[${(pct * 100).toFixed(4)}%]`\n    : `${prefix}:basis-[${(pct * 100).toFixed(4)}%]`\n}\n\nfunction normalizeClasses(value: string | string[] | undefined): string {\n  if (!value) {\n    return \"\"\n  }\n  return Array.isArray(value) ? value.join(\" \") : value\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    :class=\"wrapperClass\"\n    :data-card-id=\"card.id\"\n    :data-card-type=\"card.cardType\"\n  >\n    <component :is=\"resolved\" v-bind=\"compositionProps\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Renders a single DisplayCard by dispatching its JSON definition into\n * the matching composition under `components/compositions/cards/`.\n *\n * The renderer is the bridge layer:\n *   - resolves the composition by `card.cardType` via the registry\n *   - evaluates the card's visibility (`shouldRender`)\n *   - applies responsive layout + classList chrome at the wrapper level\n *   - resolves ID-referenced child lists against the page-level\n *     `elements` / `cards` maps:\n *       - `card.elementList: string[]` → pass as `elements: CardElement[]`\n *       - `card.cardList: string[]`    → pass as `cards: DisplayCard[]`\n *       - `card.tabList: string[]`     → pass as `tabs: DisplayCard[]`\n *       - `card.elementId: string`     → pass as `element: CardElement`\n *   - strips schema-only keys (cardType, conditionParams, columns*, ...)\n *     and passes the rest through as Vue props\n *\n * Compositions don't know about the page-level maps or the JSON schema —\n * they receive resolved children + display props and emit normal Vue\n * events. They're directly mountable in any app.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport { cn } from \"@/lib/utils\"\nimport { getCardComponent } from \"./useCardLoader\"\nimport {\n  shouldRender,\n  type EvaluationContext,\n} from \"./useDisplayConditions\"\n\ninterface Props {\n  card: DisplayCard\n  item?: Record<string, unknown>\n  /** Page-level element registry: id → CardElement JSON. */\n  elements?: Record<string, CardElement>\n  /** Page-level card registry: id → DisplayCard JSON (for nested cards). */\n  cards?: Record<string, DisplayCard>\n  evaluationContext?: EvaluationContext\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  item: () => ({}),\n  elements: () => ({}),\n  cards: () => ({}),\n  evaluationContext: () => ({}),\n})\n\nconst visible = computed(() =>\n  shouldRender(props.card, props.item, props.evaluationContext),\n)\n\nconst resolved = computed(() => getCardComponent(props.card.cardType))\n\n/**\n * Keys that live on every DisplayCard and are NOT meant to flow\n * through to the composition as props. These are either consumed by\n * this renderer (`columns*`, `conditionParams`, `cardType`, ...) or\n * resolved into their concrete child arrays below.\n */\nconst STRIPPED_KEYS = new Set<string>([\n  \"cardType\",\n  \"conditionParams\",\n  \"conditionGroupLogic\",\n  \"condition\",\n  \"features\",\n  \"permissions\",\n  \"columns\",\n  \"columnsSm\",\n  \"columnsMd\",\n  \"columnsLg\",\n  \"columnsXl\",\n  \"columnsXxl\",\n  \"wrapperClassList\",\n  \"columnClassList\",\n  \"order\",\n  // ID-referenced child lists — resolved below into concrete arrays.\n  \"elementList\",\n  \"cardList\",\n  \"tabList\",\n  \"elementId\",\n])\n\n/**\n * Compute the props object to pass to the resolved composition.\n *\n * - Strips schema-only keys (`cardType`, `conditionParams`, ...).\n * - Resolves `elementList` / `cardList` / `tabList` / `elementId` against\n *   the page-level registries and exposes them as concrete arrays /\n *   objects under composition-facing prop names.\n * - Forwards `item` as-is for child renderers to use.\n */\nconst compositionProps = computed<Record<string, unknown>>(() => {\n  const c = props.card as unknown as Record<string, unknown>\n  const result: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(c)) {\n    if (!STRIPPED_KEYS.has(key)) {\n      result[key] = value\n    }\n  }\n\n  // Pass through the data model.\n  result.item = props.item\n\n  // Resolve `elementList: string[]` → `elements: CardElement[]`.\n  if (Array.isArray((c as { elementList?: unknown }).elementList)) {\n    const ids = (c as { elementList: string[] }).elementList\n    const out: CardElement[] = []\n    for (const id of ids) {\n      const el = props.elements[id]\n      if (el) {\n        out.push(el)\n      }\n    }\n    result.elements = out\n  }\n\n  // Resolve `cardList: string[]` → `cards: DisplayCard[]`.\n  if (Array.isArray((c as { cardList?: unknown }).cardList)) {\n    const ids = (c as { cardList: string[] }).cardList\n    const out: DisplayCard[] = []\n    for (const id of ids) {\n      const child = props.cards[id]\n      if (child) {\n        out.push(child)\n      }\n    }\n    result.cards = out\n  }\n\n  // Resolve `tabList: string[]` → `tabs: DisplayCard[]`.\n  if (Array.isArray((c as { tabList?: unknown }).tabList)) {\n    const ids = (c as { tabList: string[] }).tabList\n    const out: DisplayCard[] = []\n    for (const id of ids) {\n      const child = props.cards[id]\n      if (child) {\n        out.push(child)\n      }\n    }\n    result.tabs = out\n  }\n\n  // For GridViewCard: resolve element refs that appear inside\n  // `gridLayout[breakpoint][n].i` against the page-level elements\n  // map. Card refs at the same position already work because the\n  // composition resolves them against `cards` (resolved above).\n  // Elements need a separate `gridElements` array on the composition.\n  if (\n    props.card.cardType === \"grid-view\" &&\n    typeof (c as { gridLayout?: unknown }).gridLayout === \"object\" &&\n    (c as { gridLayout?: unknown }).gridLayout !== null\n  ) {\n    const layout = (c as { gridLayout: Record<string, unknown> }).gridLayout\n    const elementIds = new Set<string>()\n    for (const breakpoint of Object.values(layout)) {\n      if (Array.isArray(breakpoint)) {\n        for (const item of breakpoint) {\n          if (item && typeof item === \"object\" && \"i\" in item) {\n            const id = (item as { i: unknown }).i\n            if (typeof id === \"string\" && props.elements[id]) {\n              elementIds.add(id)\n            }\n          }\n        }\n      }\n    }\n    if (elementIds.size > 0) {\n      result.gridElements = Array.from(elementIds)\n        .map((id) => props.elements[id]!)\n        .filter(Boolean)\n    }\n  }\n\n  // Resolve `elementId: string` → `element: CardElement`.\n  const elementId = (c as { elementId?: unknown }).elementId\n  if (typeof elementId === \"string\" && elementId.length > 0) {\n    const el = props.elements[elementId]\n    if (el) {\n      result.element = el\n    }\n  }\n\n  return result\n})\n\nconst wrapperClass = computed(() =>\n  cn(\n    \"gxp-card\",\n    `gxp-card--${props.card.cardType}`,\n    columnClass(\"col\", props.card.columns),\n    columnClass(\"col-sm\", props.card.columnsSm),\n    columnClass(\"col-md\", props.card.columnsMd),\n    columnClass(\"col-lg\", props.card.columnsLg),\n    columnClass(\"col-xl\", props.card.columnsXl),\n    normalizeClasses(props.card.wrapperClassList),\n  ),\n)\n\nfunction columnClass(prefix: string, n?: number): string | undefined {\n  if (typeof n !== \"number\") {\n    return undefined\n  }\n  const pct = Math.max(0, Math.min(12, n)) / 12\n  return prefix === \"col\"\n    ? `basis-[${(pct * 100).toFixed(4)}%]`\n    : `${prefix}:basis-[${(pct * 100).toFixed(4)}%]`\n}\n\nfunction normalizeClasses(value: string | string[] | undefined): string {\n  if (!value) {\n    return \"\"\n  }\n  return Array.isArray(value) ? value.join(\" \") : value\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    :class=\"wrapperClass\"\n    :data-card-id=\"card.id\"\n    :data-card-type=\"card.cardType\"\n  >\n    <component :is=\"resolved\" v-bind=\"compositionProps\" />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/chunks/CarouselDisplay-rn7JL3jv.js

@@ -0,0 +1,141 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, onBeforeUnmount as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, watch as g } from "vue";
+import { ChevronLeft as _, ChevronRight as v } from "@lucide/vue";
+import y from "embla-carousel-vue";
+//#region src/components/compositions/elements/display/CarouselDisplay.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	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"
+}, x = { class: "flex" }, S = ["src", "alt"], C = ["innerHTML"], w = {
+	key: 2,
+	class: "flex h-full w-full items-center justify-center p-6 text-center text-sm"
+}, T = {
+	key: 3,
+	class: "mt-2 text-sm text-muted-foreground",
+	"data-testid": "carousel-slide-caption"
+}, E = {
+	key: 1,
+	class: "mt-2 flex items-center justify-center gap-1.5",
+	"data-testid": "carousel-indicators"
+}, D = [
+	"aria-label",
+	"aria-current",
+	"onClick"
+], O = /* @__PURE__ */ c({
+	__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(e) {
+		let c = e, [O, k] = y(r(() => ({ loop: c.loop }))), A = f(0), j = r(() => c.slides.length);
+		function M() {
+			let e = k.value;
+			e && (A.value = e.selectedScrollSnap());
+		}
+		g(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(), !(!c.autoplay || j.value <= 1) && (N = setInterval(() => {
+				k.value?.scrollNext();
+			}, c.autoplayDelayMs));
+		}
+		g(() => [
+			c.autoplay,
+			c.autoplayDelayMs,
+			j.value
+		], () => {
+			F();
+		}, { immediate: !0 }), u(() => {
+			P();
+		});
+		function I() {
+			k.value?.scrollPrev();
+		}
+		function L() {
+			k.value?.scrollNext();
+		}
+		function R(e) {
+			k.value?.scrollTo(e);
+		}
+		let z = r(() => {
+			let e = c.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (r, c) => (d(), a("div", {
+			class: l(h(t)("relative w-full overflow-hidden", z.value)),
+			"data-testid": "carousel-display"
+		}, [j.value === 0 ? (d(), a("div", b, " No slides ")) : (d(), a(n, { key: 1 }, [
+			o("div", {
+				ref_key: "emblaRef",
+				ref: O,
+				class: "overflow-hidden",
+				"data-testid": "carousel-viewport"
+			}, [o("div", x, [(d(!0), a(n, null, p(e.slides, (e, t) => (d(), a("div", {
+				key: t,
+				class: "min-w-0 flex-[0_0_100%]",
+				"data-testid": "carousel-slide"
+			}, [e.src ? (d(), a("img", {
+				key: 0,
+				src: e.src,
+				alt: e.alt ?? "",
+				class: "block h-auto w-full rounded",
+				loading: "lazy"
+			}, null, 8, S)) : e.html ? (d(), a("div", {
+				key: 1,
+				class: "h-full w-full",
+				innerHTML: e.html
+			}, null, 8, C)) : (d(), a("div", w, m(e.caption ?? ""), 1)), e.src && e.caption ? (d(), a("p", T, m(e.caption), 1)) : i("", !0)]))), 128))])], 512),
+			e.showArrows && j.value > 1 ? (d(), a(n, { key: 0 }, [o("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
+			}, [s(h(_), { class: "size-4" })]), o("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
+			}, [s(h(v), { class: "size-4" })])], 64)) : i("", !0),
+			e.showIndicators && j.value > 1 ? (d(), a("div", E, [(d(!0), a(n, null, p(e.slides, (e, t) => (d(), a("button", {
+				key: t,
+				type: "button",
+				class: l(["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, D))), 128))])) : i("", !0)
+		], 64))], 2));
+	}
+}), k = /* @__PURE__ */ e({ default: () => A }), A = O;
+//#endregion
+export { k as n, A as t };
+
+//# sourceMappingURL=CarouselDisplay-rn7JL3jv.js.map

package/dist/chunks/CarouselDisplay-rn7JL3jv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselDisplay-rn7JL3jv.js","names":[],"sources":["../../src/components/compositions/elements/display/CarouselDisplay.vue","../../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","<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":"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"}