@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/IconPickerInline-D8b5_XxF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPickerInline-D8b5_XxF.js","names":[],"sources":["../../src/components/compositions/elements/picker/IconPickerInline.vue","../../src/components/compositions/elements/picker/IconPickerInline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven inline icon picker composition. A trigger Button +\n * Popover with a searchable grid of lucide icons.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <IconPickerInline v-model=\"iconName\" label=\"Pick an icon\" />\n */\nimport { computed, h, ref, type Component } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport { Search } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface IconPickerInlineProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<IconPickerInlineProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * Curated subset of lucide icons. Hardcoded so we don't enumerate\n * the entire ~1400-icon set in the picker UI.\n */\nconst ICON_NAMES: readonly string[] = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"File\",\n  \"Flag\",\n  \"Folder\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Info\",\n  \"Link\",\n  \"Lock\",\n  \"Mail\",\n  \"MapPin\",\n  \"MessageSquare\",\n  \"Plus\",\n  \"Search\",\n  \"Settings\",\n  \"Star\",\n  \"Tag\",\n  \"Trash\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"X\",\n  \"Zap\",\n]\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  const registry = LucideIcons as unknown as Record<string, Component | undefined>\n  return registry[name]\n}\n\nfunction renderIcon(name: string, cls = \"size-4\") {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: cls }) : null\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction onSelect(name: string): void {\n  model.value = name\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"icon-picker-inline\"\n  >\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          class=\"w-fit justify-start gap-2\"\n          :disabled=\"disabled\"\n          :data-element-name=\"name ?? undefined\"\n          data-testid=\"icon-picker-inline-trigger\"\n        >\n          <component\n            :is=\"previewIcon\"\n            v-if=\"previewIcon\"\n            class=\"size-4\"\n          />\n          <span>{{ model || \"Pick an icon\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-72 p-2\">\n        <div class=\"mb-2 flex items-center gap-2\">\n          <Search class=\"size-4 text-muted-foreground\" />\n          <Input\n            v-model=\"query\"\n            placeholder=\"Search icons…\"\n            data-testid=\"icon-picker-inline-search\"\n            class=\"h-8\"\n          />\n        </div>\n        <div\n          class=\"grid max-h-60 grid-cols-6 gap-1 overflow-auto\"\n          data-testid=\"icon-picker-inline-grid\"\n        >\n          <button\n            v-for=\"iconName in filtered\"\n            :key=\"iconName\"\n            type=\"button\"\n            class=\"flex aspect-square items-center justify-center rounded border border-transparent hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            :class=\"model === iconName ? 'border-primary bg-primary/10' : ''\"\n            :aria-label=\"iconName\"\n            :title=\"iconName\"\n            :data-testid=\"`icon-picker-inline-item-${iconName}`\"\n            @click=\"onSelect(iconName)\"\n          >\n            <component :is=\"renderIcon(iconName)\" />\n          </button>\n        </div>\n        <p\n          v-if=\"!filtered.length\"\n          class=\"p-3 text-center text-sm text-muted-foreground\"\n        >\n          No icons match.\n        </p>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven inline icon picker composition. A trigger Button +\n * Popover with a searchable grid of lucide icons.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <IconPickerInline v-model=\"iconName\" label=\"Pick an icon\" />\n */\nimport { computed, h, ref, type Component } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport { Search } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface IconPickerInlineProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<IconPickerInlineProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\n/**\n * Curated subset of lucide icons. Hardcoded so we don't enumerate\n * the entire ~1400-icon set in the picker UI.\n */\nconst ICON_NAMES: readonly string[] = [\n  \"Activity\",\n  \"AlertCircle\",\n  \"Archive\",\n  \"Bell\",\n  \"Bookmark\",\n  \"Calendar\",\n  \"Camera\",\n  \"Check\",\n  \"Clock\",\n  \"Cloud\",\n  \"Code\",\n  \"Download\",\n  \"Edit\",\n  \"Eye\",\n  \"File\",\n  \"Flag\",\n  \"Folder\",\n  \"Globe\",\n  \"Heart\",\n  \"Home\",\n  \"Image\",\n  \"Info\",\n  \"Link\",\n  \"Lock\",\n  \"Mail\",\n  \"MapPin\",\n  \"MessageSquare\",\n  \"Plus\",\n  \"Search\",\n  \"Settings\",\n  \"Star\",\n  \"Tag\",\n  \"Trash\",\n  \"Upload\",\n  \"User\",\n  \"Video\",\n  \"X\",\n  \"Zap\",\n]\n\nconst filtered = computed<readonly string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (!q) {\n    return ICON_NAMES\n  }\n  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))\n})\n\nfunction resolveIcon(name: string): Component | undefined {\n  const registry = LucideIcons as unknown as Record<string, Component | undefined>\n  return registry[name]\n}\n\nfunction renderIcon(name: string, cls = \"size-4\") {\n  const icon = resolveIcon(name)\n  return icon ? h(icon, { class: cls }) : null\n}\n\nconst previewIcon = computed<Component | undefined>(() =>\n  resolveIcon(model.value ?? \"\"),\n)\n\nfunction onSelect(name: string): void {\n  model.value = name\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"icon-picker-inline\"\n  >\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          class=\"w-fit justify-start gap-2\"\n          :disabled=\"disabled\"\n          :data-element-name=\"name ?? undefined\"\n          data-testid=\"icon-picker-inline-trigger\"\n        >\n          <component\n            :is=\"previewIcon\"\n            v-if=\"previewIcon\"\n            class=\"size-4\"\n          />\n          <span>{{ model || \"Pick an icon\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-72 p-2\">\n        <div class=\"mb-2 flex items-center gap-2\">\n          <Search class=\"size-4 text-muted-foreground\" />\n          <Input\n            v-model=\"query\"\n            placeholder=\"Search icons…\"\n            data-testid=\"icon-picker-inline-search\"\n            class=\"h-8\"\n          />\n        </div>\n        <div\n          class=\"grid max-h-60 grid-cols-6 gap-1 overflow-auto\"\n          data-testid=\"icon-picker-inline-grid\"\n        >\n          <button\n            v-for=\"iconName in filtered\"\n            :key=\"iconName\"\n            type=\"button\"\n            class=\"flex aspect-square items-center justify-center rounded border border-transparent hover:border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            :class=\"model === iconName ? 'border-primary bg-primary/10' : ''\"\n            :aria-label=\"iconName\"\n            :title=\"iconName\"\n            :data-testid=\"`icon-picker-inline-item-${iconName}`\"\n            @click=\"onSelect(iconName)\"\n          >\n            <component :is=\"renderIcon(iconName)\" />\n          </button>\n        </div>\n        <p\n          v-if=\"!filtered.length\"\n          class=\"p-3 text-center text-sm text-muted-foreground\"\n        >\n          No icons match.\n        </p>\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,IAAM,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAQ,EAAY,EAAE,GAMtB,IAAgC,4QAuCtC,GAEM,IAAW,QAAkC;GACjD,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY;GAIzC,OAHK,IAGE,EAAW,QAAQ,MAAS,EAAK,YAAY,EAAE,SAAS,CAAC,CAAC,IAFxD;EAGX,CAAC;EAED,SAAS,EAAY,GAAqC;GAExD,OAAO,EAAS;EAClB;EAEA,SAAS,EAAW,GAAc,IAAM,UAAU;GAChD,IAAM,IAAO,EAAY,CAAI;GAC7B,OAAO,IAAO,EAAE,GAAM,EAAE,OAAO,EAAI,CAAC,IAAI;EAC1C;EAEA,IAAM,IAAc,QAClB,EAAY,EAAM,SAAS,EAAE,CAC/B;EAEA,SAAS,EAAS,GAAoB;GACpC,EAAM,QAAQ;EAChB;yBAIE,EA+Da,EAAA,CAAA,GAAA;GA9DV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;GACT,eAAY;;oBAuDF,CArDV,EAqDU,EAAA,CAAA,GAAA,MAAA;qBApCS,CAhBjB,EAgBiB,EAAA,CAAA,GAAA,EAhBD,YAAA,GAAQ,GAAA;sBAeb,CAdT,EAcS,EAAA,CAAA,GAAA;MAbP,MAAK;MACL,SAAQ;MACR,OAAM;MACL,UAAU,EAAA;MACV,qBAAmB,EAAA,QAAQ,KAAA;MAC5B,eAAY;;uBAMV,CAFM,EAAA,SAAA,EAAA,GAFR,EAIE,EAHK,EAAA,KAAW,GAAA;;OAEhB,OAAM;uBAER,EAA0C,QAAA,MAAA,EAAjC,EAAA,SAAK,cAAA,GAAA,CAAA,CAAA,CAAA;;;;QAGlB,EAkCiB,EAAA,CAAA,GAAA,EAlCD,OAAM,WAAU,GAAA;sBASxB;MARN,EAQM,OARN,GAQM,CAPJ,EAA+C,EAAA,CAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA,GAC5C,EAKE,EAAA,CAAA,GAAA;mBAJS,EAAA;gDAAK,QAAA;OACd,aAAY;OACZ,eAAY;OACZ,OAAM;;MAGV,EAiBM,OAjBN,GAiBM,EAAA,EAAA,EAAA,GAbJ,EAYS,GAAA,MAAA,EAXY,EAAA,QAAZ,YADT,EAYS,UAAA;OAVN,KAAK;OACN,MAAK;OACL,OAAK,EAAA,CAAC,+LACE,EAAA,UAAU,IAAQ,iCAAA,EAAA,CAAA;OACzB,cAAY;OACZ,OAAO;OACP,eAAW,2BAA6B;OACxC,UAAK,MAAE,EAAS,CAAQ;gBAEzB,EAAwC,EAAxB,EAAW,CAAQ,CAAA,CAAA,EAAA,GAAA,IAAA,CAAA;MAI9B,EAAA,MAAS,SAIlB,EAAA,IAAA,EAAA,KAJkB,EAAA,GADlB,EAKI,KALJ,GAGC,mBAED"}

package/dist/chunks/IconToggleBoolean-CPIcs--Q.js

@@ -0,0 +1,84 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./toggle-Mpe_iE71.js";
+import { t as n } from "./field-frame-n5oLDNBT.js";
+import { computed as r, createBlock as i, createVNode as a, defineComponent as o, mergeModels as s, openBlock as c, resolveDynamicComponent as l, unref as u, useModel as d, withCtx as f } from "vue";
+import * as p from "@lucide/vue";
+import { ToggleLeft as m, ToggleRight as h } from "@lucide/vue";
+//#region src/components/compositions/elements/boolean/IconToggleBoolean.vue?vue&type=script&setup=true&lang.ts
+var g = /* @__PURE__ */ o({
+	__name: "IconToggleBoolean",
+	props: /* @__PURE__ */ s({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		trueIcon: {},
+		falseIcon: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let o = e, s = d(e, "modelValue"), g = p;
+		function _(e, t) {
+			return e ? g[e.split(/[-_\s]/).filter(Boolean).map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("")] ?? g[e] ?? t : t;
+		}
+		let v = r(() => _(o.trueIcon, h)), y = r(() => _(o.falseIcon, m)), b = r(() => s.value ? v.value : y.value);
+		function x(e) {
+			s.value = e;
+		}
+		return (r, o) => (c(), i(u(n), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: f(() => [a(u(t), {
+				id: e.id,
+				name: e.name,
+				disabled: e.disabled || e.readonly,
+				required: e.required,
+				pressed: s.value,
+				variant: "outline",
+				"data-element-name": e.name ?? void 0,
+				"aria-label": e.label,
+				"onUpdate:pressed": x
+			}, {
+				default: f(() => [(c(), i(l(b.value), { class: "h-4 w-4" }))]),
+				_: 1
+			}, 8, [
+				"id",
+				"name",
+				"disabled",
+				"required",
+				"pressed",
+				"data-element-name",
+				"aria-label"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), _ = /* @__PURE__ */ e({ default: () => v }), v = g;
+//#endregion
+export { _ as n, v as t };
+
+//# sourceMappingURL=IconToggleBoolean-CPIcs--Q.js.map

package/dist/chunks/IconToggleBoolean-CPIcs--Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggleBoolean-CPIcs--Q.js","names":[],"sources":["../../src/components/compositions/elements/boolean/IconToggleBoolean.vue","../../src/components/compositions/elements/boolean/IconToggleBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven icon-toggle composition. Renders a Toggle primitive that\n * shows `trueIcon` when pressed and `falseIcon` when not. Icons are\n * looked up from `@lucide/vue` by name; missing icons fall back to\n * `ToggleRight` / `ToggleLeft`.\n *\n *   <IconToggleBoolean\n *     v-model=\"darkMode\"\n *     label=\"Dark mode\"\n *     true-icon=\"moon\"\n *     false-icon=\"sun\"\n *   />\n */\nimport { computed } from \"vue\"\nimport { ToggleLeft, ToggleRight } from \"@lucide/vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconToggleBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Lucide icon shown when value is true. */\n  trueIcon?: string\n  /** Lucide icon shown when value is false. */\n  falseIcon?: string\n}\n\nconst props = withDefaults(defineProps<IconToggleBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\n\nfunction resolveIcon(name: string | undefined, fallback: LucideIcon): LucideIcon {\n  if (!name) {\n    return fallback\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] ?? fallback\n}\n\nconst trueIconComponent = computed(() =>\n  resolveIcon(props.trueIcon, ToggleRight),\n)\nconst falseIconComponent = computed(() =>\n  resolveIcon(props.falseIcon, ToggleLeft),\n)\n\nconst activeIcon = computed(() =>\n  model.value ? trueIconComponent.value : falseIconComponent.value,\n)\n\nfunction onUpdate(pressed: boolean): void {\n  model.value = pressed\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Toggle\n      :id=\"id\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :pressed=\"model\"\n      variant=\"outline\"\n      :data-element-name=\"name ?? undefined\"\n      :aria-label=\"label\"\n      @update:pressed=\"onUpdate\"\n    >\n      <component :is=\"activeIcon\" class=\"h-4 w-4\" />\n    </Toggle>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven icon-toggle composition. Renders a Toggle primitive that\n * shows `trueIcon` when pressed and `falseIcon` when not. Icons are\n * looked up from `@lucide/vue` by name; missing icons fall back to\n * `ToggleRight` / `ToggleLeft`.\n *\n *   <IconToggleBoolean\n *     v-model=\"darkMode\"\n *     label=\"Dark mode\"\n *     true-icon=\"moon\"\n *     false-icon=\"sun\"\n *   />\n */\nimport { computed } from \"vue\"\nimport { ToggleLeft, ToggleRight } from \"@lucide/vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Toggle } from \"@/components/ui/toggle\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface IconToggleBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Lucide icon shown when value is true. */\n  trueIcon?: string\n  /** Lucide icon shown when value is false. */\n  falseIcon?: string\n}\n\nconst props = withDefaults(defineProps<IconToggleBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\n\nfunction resolveIcon(name: string | undefined, fallback: LucideIcon): LucideIcon {\n  if (!name) {\n    return fallback\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] ?? fallback\n}\n\nconst trueIconComponent = computed(() =>\n  resolveIcon(props.trueIcon, ToggleRight),\n)\nconst falseIconComponent = computed(() =>\n  resolveIcon(props.falseIcon, ToggleLeft),\n)\n\nconst activeIcon = computed(() =>\n  model.value ? trueIconComponent.value : falseIconComponent.value,\n)\n\nfunction onUpdate(pressed: boolean): void {\n  model.value = pressed\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <Toggle\n      :id=\"id\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :pressed=\"model\"\n      variant=\"outline\"\n      :data-element-name=\"name ?? undefined\"\n      :aria-label=\"label\"\n      @update:pressed=\"onUpdate\"\n    >\n      <component :is=\"activeIcon\" class=\"h-4 w-4\" />\n    </Toggle>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,IAAM,IAAQ,GAIR,IAAQ,EAAoB,GAAC,YAAgC,GAE7D,IAAc;EAEpB,SAAS,EAAY,GAA0B,GAAkC;GAS/E,OARK,IAQE,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,MAAS,IAP1C;EAQX;EAEA,IAAM,IAAoB,QACxB,EAAY,EAAM,UAAU,CAAW,CACzC,GACM,IAAqB,QACzB,EAAY,EAAM,WAAW,CAAU,CACzC,GAEM,IAAa,QACjB,EAAM,QAAQ,EAAkB,QAAQ,EAAmB,KAC7D;EAEA,SAAS,EAAS,GAAwB;GACxC,EAAM,QAAQ;EAChB;yBAIE,EAqBa,EAAA,CAAA,GAAA;GApBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAcA,CAZT,EAYS,EAAA,CAAA,GAAA;IAXN,IAAI,EAAA;IACJ,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,SAAS,EAAA;IACV,SAAQ;IACP,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,cAAY,EAAA;IACZ,oBAAgB;;qBAE6B,EAAA,EAAA,GAA9C,EAA8C,EAA9B,EAAA,KAAU,GAAA,EAAE,OAAM,UAAS,CAAA,EAAA,CAAA"}

package/dist/chunks/IframeDisplay-CTQ16HhD.js

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

package/dist/chunks/IframeDisplay-CTQ16HhD.js.map

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

package/dist/chunks/ImageDisplay-CJA_mjzo.js

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

package/dist/chunks/ImageDisplay-CJA_mjzo.js.map

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

package/dist/chunks/ImageEditor-HEbjO2Db.js

@@ -0,0 +1,70 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { o as n, s as r } from "./card-DAfWnvro.js";
+import { t as i } from "./field-frame-n5oLDNBT.js";
+import { createBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, openBlock as d, unref as f, useModel as p, withCtx as m } from "vue";
+import { Construction as h } from "@lucide/vue";
+//#region src/components/compositions/elements/editor/ImageEditor.vue?vue&type=script&setup=true&lang.ts
+var g = /* @__PURE__ */ l({
+	__name: "ImageEditor",
+	props: /* @__PURE__ */ u({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		return p(e, "modelValue"), (l, u) => (d(), a(f(i), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors,
+			"data-testid": "image-editor"
+		}, {
+			default: m(() => [c(f(r), {
+				class: "border-dashed",
+				"data-element-name": e.name ?? void 0,
+				"data-stub": "editor/image-editor"
+			}, {
+				default: m(() => [c(f(n), { class: "flex items-center gap-3 py-6 text-sm text-muted-foreground" }, {
+					default: m(() => [
+						c(f(h), { class: "h-5 w-5" }),
+						u[1] ||= o("span", null, "Image editor — coming soon", -1),
+						c(f(t), {
+							variant: "outline",
+							class: "ml-auto font-mono text-[10px]"
+						}, {
+							default: m(() => [...u[0] ||= [s(" editor/image-editor ", -1)]]),
+							_: 1
+						})
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["data-element-name"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), _ = /* @__PURE__ */ e({ default: () => v }), v = g;
+//#endregion
+export { _ as n, v as t };
+
+//# sourceMappingURL=ImageEditor-HEbjO2Db.js.map

package/dist/chunks/ImageEditor-HEbjO2Db.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor-HEbjO2Db.js","names":[],"sources":["../../src/components/compositions/elements/editor/ImageEditor.vue","../../src/components/compositions/elements/editor/ImageEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven stub for `editor/image-editor`.\n *\n * Placeholder until the canvas-based crop / annotate editor lands.\n * Reserves the `modelValue` slot so a saved value (data URL or asset\n * reference) round-trips even though there's no real UI yet.\n *\n *   <ImageEditor label=\"Banner\" />\n */\nimport { Construction } from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface ImageEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<ImageEditorProps>(), {\n  errors: () => [],\n})\n\ndefineModel<string | null>(\"modelValue\")\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"image-editor\"\n  >\n    <Card class=\"border-dashed\" :data-element-name=\"name ?? undefined\" data-stub=\"editor/image-editor\">\n      <CardContent class=\"flex items-center gap-3 py-6 text-sm text-muted-foreground\">\n        <Construction class=\"h-5 w-5\" />\n        <span>Image editor — coming soon</span>\n        <Badge variant=\"outline\" class=\"ml-auto font-mono text-[10px]\">\n          editor/image-editor\n        </Badge>\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven stub for `editor/image-editor`.\n *\n * Placeholder until the canvas-based crop / annotate editor lands.\n * Reserves the `modelValue` slot so a saved value (data URL or asset\n * reference) round-trips even though there's no real UI yet.\n *\n *   <ImageEditor label=\"Banner\" />\n */\nimport { Construction } from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface ImageEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nwithDefaults(defineProps<ImageEditorProps>(), {\n  errors: () => [],\n})\n\ndefineModel<string | null>(\"modelValue\")\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"image-editor\"\n  >\n    <Card class=\"border-dashed\" :data-element-name=\"name ?? undefined\" data-stub=\"editor/image-editor\">\n      <CardContent class=\"flex items-center gap-3 py-6 text-sm text-muted-foreground\">\n        <Construction class=\"h-5 w-5\" />\n        <span>Image editor — coming soon</span>\n        <Badge variant=\"outline\" class=\"ml-auto font-mono text-[10px]\">\n          editor/image-editor\n        </Badge>\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;SA+BA,EAA0B,GAAC,YAAY,mBAIrC,EAkBa,EAAA,CAAA,GAAA;GAjBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;GACT,eAAY;;oBAUL,CARP,EAQO,EAAA,CAAA,GAAA;IARD,OAAM;IAAiB,qBAAmB,EAAA,QAAQ,KAAA;IAAW,aAAU;;qBAO7D,CANd,EAMc,EAAA,CAAA,GAAA,EAND,OAAM,6DAA4D,GAAA;sBAC7C;MAAhC,EAAgC,EAAA,CAAA,GAAA,EAAlB,OAAM,UAAS,CAAA;eAC7B,EAAuC,QAAA,MAAjC,8BAA0B,EAAA;MAChC,EAEQ,EAAA,CAAA,GAAA;OAFD,SAAQ;OAAU,OAAM;;wBAE/B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF+D,yBAE/D,EAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/InfoCard-1LxVfz7I.js

@@ -0,0 +1,141 @@
+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 { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+//#region src/components/compositions/cards/InfoCard.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-testid"], C = { class: "flex flex-col gap-1.5" }, w = {
+	key: 0,
+	class: "flex flex-col gap-2",
+	"data-testid": "info-card-fields"
+}, T = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, E = ["data-testid"], D = { key: 1 }, O = {
+	key: 1,
+	class: "flex flex-col gap-2",
+	"data-testid": "info-card-bare"
+}, k = {
+	key: 0,
+	class: "flex flex-row items-start gap-3"
+}, A = ["data-testid"], j = { class: "flex flex-col gap-0.5" }, M = {
+	key: 0,
+	class: "text-base font-semibold"
+}, N = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, P = {
+	key: 1,
+	class: "flex flex-col gap-2",
+	"data-testid": "info-card-fields"
+}, F = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, I = ["data-testid"], L = { key: 1 }, R = /* @__PURE__ */ m({
+	__name: "InfoCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		icon: {},
+		iconColor: {},
+		headerImage: {},
+		defaultHeaderImage: {},
+		headerRatio: {},
+		fields: { default: () => [] },
+		bodyClassList: {},
+		lessPadding: {
+			type: Boolean,
+			default: !1
+		},
+		item: { default: () => ({}) }
+	},
+	setup(e) {
+		let m = e, R = s(() => m.showCard !== !1), z = s(() => !!m.title || !!m.subtitle || !!m.icon), B = s(() => m.fields ?? []), V = s(() => {
+			let e = m.bodyClassList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		function H(e, t) {
+			if (!t) return;
+			let n = t.split("."), r = e;
+			for (let e of n) {
+				if (typeof r != "object" || !r) return;
+				r = r[e];
+			}
+			return r;
+		}
+		function U(e) {
+			let t = e.classList;
+			return t ? Array.isArray(t) ? t.join(" ") : t : "";
+		}
+		function W(e, t) {
+			if (t == null || t === "") return "";
+			let n = typeof t == "string" ? t : String(t);
+			return `${e.prepend ?? ""}${n}${e.append ?? ""}`;
+		}
+		function G(e) {
+			return W(e, H(m.item, e.value));
+		}
+		return (s, m) => R.value ? (_(), c(b(a), {
+			key: 0,
+			class: "flex flex-col"
+		}, {
+			default: x(() => [z.value ? (_(), c(b(i), {
+				key: 0,
+				class: "flex flex-row items-start gap-3"
+			}, {
+				default: x(() => [e.icon ? (_(), u("span", {
+					key: 0,
+					class: "text-2xl leading-none",
+					style: g({ color: e.iconColor ?? void 0 }),
+					"data-testid": `info-card-icon-${e.icon}`,
+					"aria-hidden": "true"
+				}, y(e.icon), 13, S)) : l("", !0), d("div", C, [e.title ? (_(), c(b(n), { key: 0 }, {
+					default: x(() => [f(y(e.title), 1)]),
+					_: 1
+				})) : l("", !0), e.subtitle ? (_(), c(b(t), { key: 1 }, {
+					default: x(() => [f(y(e.subtitle), 1)]),
+					_: 1
+				})) : l("", !0)])]),
+				_: 1
+			})) : l("", !0), p(b(r), { class: h([
+				V.value,
+				e.lessPadding ? "p-3" : "",
+				z.value ? "" : "pt-6"
+			]) }, {
+				default: x(() => [B.value.length ? (_(), u("dl", w, [(_(!0), u(o, null, v(B.value, (e, t) => (_(), u("div", {
+					key: `${e.value}-${t}`,
+					class: "flex items-baseline justify-between gap-3",
+					"data-testid": "info-card-field"
+				}, [d("dt", T, [e.icon ? (_(), u("span", {
+					key: 0,
+					class: "text-base leading-none",
+					"data-testid": `info-card-field-icon-${e.icon}`,
+					"aria-hidden": "true"
+				}, y(e.icon), 9, E)) : l("", !0), e.label ? (_(), u("span", D, y(e.label), 1)) : l("", !0)]), d("dd", {
+					class: h(["text-sm font-medium text-foreground", U(e)]),
+					"data-testid": "info-card-field-value"
+				}, y(G(e)), 3)]))), 128))])) : l("", !0)]),
+				_: 1
+			}, 8, ["class"])]),
+			_: 1
+		})) : (_(), u("section", O, [z.value ? (_(), u("header", k, [e.icon ? (_(), u("span", {
+			key: 0,
+			class: "text-2xl leading-none",
+			style: g({ color: e.iconColor ?? void 0 }),
+			"data-testid": `info-card-icon-${e.icon}`,
+			"aria-hidden": "true"
+		}, y(e.icon), 13, A)) : l("", !0), d("div", j, [e.title ? (_(), u("h3", M, y(e.title), 1)) : l("", !0), e.subtitle ? (_(), u("p", N, y(e.subtitle), 1)) : l("", !0)])])) : l("", !0), B.value.length ? (_(), u("dl", P, [(_(!0), u(o, null, v(B.value, (e, t) => (_(), u("div", {
+			key: `${e.value}-${t}`,
+			class: "flex items-baseline justify-between gap-3",
+			"data-testid": "info-card-field"
+		}, [d("dt", F, [e.icon ? (_(), u("span", {
+			key: 0,
+			class: "text-base leading-none",
+			"data-testid": `info-card-field-icon-${e.icon}`,
+			"aria-hidden": "true"
+		}, y(e.icon), 9, I)) : l("", !0), e.label ? (_(), u("span", L, y(e.label), 1)) : l("", !0)]), d("dd", {
+			class: h(["text-sm font-medium text-foreground", U(e)]),
+			"data-testid": "info-card-field-value"
+		}, y(G(e)), 3)]))), 128))])) : l("", !0)]));
+	}
+}), z = /* @__PURE__ */ e({ default: () => B }), B = R;
+//#endregion
+export { z as n, B as t };
+
+//# sourceMappingURL=InfoCard-1LxVfz7I.js.map

package/dist/chunks/InfoCard-1LxVfz7I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard-1LxVfz7I.js","names":[],"sources":["../../src/components/compositions/cards/InfoCard.vue","../../src/components/compositions/cards/InfoCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `info-card` composition. Renders a read-only summary\n * tile: optional icon header, title, subtitle, and a list of\n * `{ label, value, icon? }` rows resolved from the data model.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <InfoCard\n *     title=\"Account summary\"\n *     icon=\"user\"\n *     :fields=\"[{ label: 'Name', value: 'user.name' }]\"\n *     :item=\"{ user: { name: 'Jane' } }\"\n *   />\n *\n * `field.value` is treated as a dot-path into `item`. When the path\n * resolves to `undefined` / `null` the row still renders so the label\n * remains visible — this matches v2 behaviour for info tiles.\n */\nimport { computed } from \"vue\"\nimport type { InfoCardField } from \"@/definitions/cards/InfoCard\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface InfoCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  icon?: string\n  iconColor?: string\n  headerImage?: string\n  defaultHeaderImage?: string\n  headerRatio?: string\n  fields?: InfoCardField[]\n  bodyClassList?: string[] | string\n  lessPadding?: boolean\n  /** Page-level data model used to resolve `field.value` dot-paths. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<InfoCardProps>(), {\n  showCard: true,\n  fields: () => [],\n  lessPadding: false,\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () =>\n    Boolean(props.title) ||\n    Boolean(props.subtitle) ||\n    Boolean(props.icon),\n)\n\nconst fieldList = computed<InfoCardField[]>(() => props.fields ?? [])\n\nconst bodyClass = computed(() => {\n  const list = props.bodyClassList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n})\n\nfunction resolvePath(item: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let cursor: unknown = item\n  for (const seg of segments) {\n    if (cursor === null || cursor === undefined) {\n      return undefined\n    }\n    if (typeof cursor !== \"object\") {\n      return undefined\n    }\n    cursor = (cursor as Record<string, unknown>)[seg]\n  }\n  return cursor\n}\n\nfunction fieldClass(field: InfoCardField): string {\n  const list = field.classList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n}\n\nfunction formatValue(field: InfoCardField, raw: unknown): string {\n  if (raw === undefined || raw === null || raw === \"\") {\n    return \"\"\n  }\n  const text = typeof raw === \"string\" ? raw : String(raw)\n  return `${field.prepend ?? \"\"}${text}${field.append ?? \"\"}`\n}\n\nfunction valueFor(field: InfoCardField): string {\n  return formatValue(field, resolvePath(props.item, field.value))\n}\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"flex flex-col gap-1.5\">\n        <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n        <CardDescription v-if=\"subtitle\">\n          {{ subtitle }}\n        </CardDescription>\n      </div>\n    </CardHeader>\n    <CardContent\n      :class=\"[\n        bodyClass,\n        lessPadding ? 'p-3' : '',\n        hasHeader ? '' : 'pt-6',\n      ]\"\n    >\n      <dl\n        v-if=\"fieldList.length\"\n        class=\"flex flex-col gap-2\"\n        data-testid=\"info-card-fields\"\n      >\n        <div\n          v-for=\"(field, index) in fieldList\"\n          :key=\"`${field.value}-${index}`\"\n          class=\"flex items-baseline justify-between gap-3\"\n          data-testid=\"info-card-field\"\n        >\n          <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n            <span\n              v-if=\"field.icon\"\n              class=\"text-base leading-none\"\n              :data-testid=\"`info-card-field-icon-${field.icon}`\"\n              aria-hidden=\"true\"\n            >\n              {{ field.icon }}\n            </span>\n            <span v-if=\"field.label\">{{ field.label }}</span>\n          </dt>\n          <dd\n            class=\"text-sm font-medium text-foreground\"\n            :class=\"fieldClass(field)\"\n            data-testid=\"info-card-field-value\"\n          >\n            {{ valueFor(field) }}\n          </dd>\n        </div>\n      </dl>\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col gap-2\"\n    data-testid=\"info-card-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"flex flex-col gap-0.5\">\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      </div>\n    </header>\n    <dl\n      v-if=\"fieldList.length\"\n      class=\"flex flex-col gap-2\"\n      data-testid=\"info-card-fields\"\n    >\n      <div\n        v-for=\"(field, index) in fieldList\"\n        :key=\"`${field.value}-${index}`\"\n        class=\"flex items-baseline justify-between gap-3\"\n        data-testid=\"info-card-field\"\n      >\n        <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n          <span\n            v-if=\"field.icon\"\n            class=\"text-base leading-none\"\n            :data-testid=\"`info-card-field-icon-${field.icon}`\"\n            aria-hidden=\"true\"\n          >\n            {{ field.icon }}\n          </span>\n          <span v-if=\"field.label\">{{ field.label }}</span>\n        </dt>\n        <dd\n          class=\"text-sm font-medium text-foreground\"\n          :class=\"fieldClass(field)\"\n          data-testid=\"info-card-field-value\"\n        >\n          {{ valueFor(field) }}\n        </dd>\n      </div>\n    </dl>\n  </section>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `info-card` composition. Renders a read-only summary\n * tile: optional icon header, title, subtitle, and a list of\n * `{ label, value, icon? }` rows resolved from the data model.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <InfoCard\n *     title=\"Account summary\"\n *     icon=\"user\"\n *     :fields=\"[{ label: 'Name', value: 'user.name' }]\"\n *     :item=\"{ user: { name: 'Jane' } }\"\n *   />\n *\n * `field.value` is treated as a dot-path into `item`. When the path\n * resolves to `undefined` / `null` the row still renders so the label\n * remains visible — this matches v2 behaviour for info tiles.\n */\nimport { computed } from \"vue\"\nimport type { InfoCardField } from \"@/definitions/cards/InfoCard\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface InfoCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  icon?: string\n  iconColor?: string\n  headerImage?: string\n  defaultHeaderImage?: string\n  headerRatio?: string\n  fields?: InfoCardField[]\n  bodyClassList?: string[] | string\n  lessPadding?: boolean\n  /** Page-level data model used to resolve `field.value` dot-paths. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<InfoCardProps>(), {\n  showCard: true,\n  fields: () => [],\n  lessPadding: false,\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () =>\n    Boolean(props.title) ||\n    Boolean(props.subtitle) ||\n    Boolean(props.icon),\n)\n\nconst fieldList = computed<InfoCardField[]>(() => props.fields ?? [])\n\nconst bodyClass = computed(() => {\n  const list = props.bodyClassList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n})\n\nfunction resolvePath(item: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let cursor: unknown = item\n  for (const seg of segments) {\n    if (cursor === null || cursor === undefined) {\n      return undefined\n    }\n    if (typeof cursor !== \"object\") {\n      return undefined\n    }\n    cursor = (cursor as Record<string, unknown>)[seg]\n  }\n  return cursor\n}\n\nfunction fieldClass(field: InfoCardField): string {\n  const list = field.classList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n}\n\nfunction formatValue(field: InfoCardField, raw: unknown): string {\n  if (raw === undefined || raw === null || raw === \"\") {\n    return \"\"\n  }\n  const text = typeof raw === \"string\" ? raw : String(raw)\n  return `${field.prepend ?? \"\"}${text}${field.append ?? \"\"}`\n}\n\nfunction valueFor(field: InfoCardField): string {\n  return formatValue(field, resolvePath(props.item, field.value))\n}\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"flex flex-col gap-1.5\">\n        <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n        <CardDescription v-if=\"subtitle\">\n          {{ subtitle }}\n        </CardDescription>\n      </div>\n    </CardHeader>\n    <CardContent\n      :class=\"[\n        bodyClass,\n        lessPadding ? 'p-3' : '',\n        hasHeader ? '' : 'pt-6',\n      ]\"\n    >\n      <dl\n        v-if=\"fieldList.length\"\n        class=\"flex flex-col gap-2\"\n        data-testid=\"info-card-fields\"\n      >\n        <div\n          v-for=\"(field, index) in fieldList\"\n          :key=\"`${field.value}-${index}`\"\n          class=\"flex items-baseline justify-between gap-3\"\n          data-testid=\"info-card-field\"\n        >\n          <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n            <span\n              v-if=\"field.icon\"\n              class=\"text-base leading-none\"\n              :data-testid=\"`info-card-field-icon-${field.icon}`\"\n              aria-hidden=\"true\"\n            >\n              {{ field.icon }}\n            </span>\n            <span v-if=\"field.label\">{{ field.label }}</span>\n          </dt>\n          <dd\n            class=\"text-sm font-medium text-foreground\"\n            :class=\"fieldClass(field)\"\n            data-testid=\"info-card-field-value\"\n          >\n            {{ valueFor(field) }}\n          </dd>\n        </div>\n      </dl>\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col gap-2\"\n    data-testid=\"info-card-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"flex flex-col gap-0.5\">\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      </div>\n    </header>\n    <dl\n      v-if=\"fieldList.length\"\n      class=\"flex flex-col gap-2\"\n      data-testid=\"info-card-fields\"\n    >\n      <div\n        v-for=\"(field, index) in fieldList\"\n        :key=\"`${field.value}-${index}`\"\n        class=\"flex items-baseline justify-between gap-3\"\n        data-testid=\"info-card-field\"\n      >\n        <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n          <span\n            v-if=\"field.icon\"\n            class=\"text-base leading-none\"\n            :data-testid=\"`info-card-field-icon-${field.icon}`\"\n            aria-hidden=\"true\"\n          >\n            {{ field.icon }}\n          </span>\n          <span v-if=\"field.label\">{{ field.label }}</span>\n        </dt>\n        <dd\n          class=\"text-sm font-medium text-foreground\"\n          :class=\"fieldClass(field)\"\n          data-testid=\"info-card-field-value\"\n        >\n          {{ valueFor(field) }}\n        </dd>\n      </div>\n    </dl>\n  </section>\n</template>\n"],"mappings":"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"}

package/dist/chunks/InfoCard-CnnX07eL.js

@@ -0,0 +1,92 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { a as t, n, o as r, r as i, s as a } from "./card-DAfWnvro.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+//#region src/components/compositions/elements/card/InfoCard.vue?vue&type=script&setup=true&lang.ts
+var S = ["src", "alt"], C = { class: "flex items-center gap-2" }, w = {
+	key: 0,
+	class: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm"
+}, T = { class: "font-medium text-muted-foreground" }, E = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, D = {
+	key: 0,
+	class: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm"
+}, O = { class: "font-medium text-muted-foreground" }, k = /* @__PURE__ */ m({
+	__name: "InfoCard",
+	props: {
+		label: {},
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		icon: {},
+		iconColor: {},
+		headerImage: {},
+		headerRatio: {},
+		lessPadding: {
+			type: Boolean,
+			default: !1
+		},
+		fields: { default: () => [] },
+		item: { default: () => ({}) },
+		classList: {}
+	},
+	setup(m) {
+		let k = m, A = s(() => k.title ?? k.label);
+		function j(e, t) {
+			return e.split(".").reduce((e, t) => {
+				if (e && typeof e == "object" && t in e) return e[t];
+			}, t);
+		}
+		function M(e) {
+			let t = j(e.value, k.item), n = t == null ? e.value : String(t);
+			return `${e.prepend ?? ""}${n}${e.append ?? ""}`;
+		}
+		return (s, m) => k.showCard === !1 ? (_(), u("div", {
+			key: 1,
+			class: h(b(e)(k.classList))
+		}, [k.fields.length ? (_(), u("dl", D, [(_(!0), u(o, null, v(k.fields, (e) => (_(), u(o, { key: e.label + e.value }, [d("dt", O, y(e.label), 1), d("dd", null, y(M(e)), 1)], 64))), 128))])) : l("", !0)], 2)) : (_(), c(b(a), {
+			key: 0,
+			class: h(b(e)(k.classList))
+		}, {
+			default: x(() => [
+				k.headerImage ? (_(), u("div", {
+					key: 0,
+					class: "overflow-hidden rounded-t-lg bg-muted",
+					style: g(k.headerRatio ? { aspectRatio: k.headerRatio } : { height: "10rem" })
+				}, [d("img", {
+					src: k.headerImage,
+					alt: A.value ?? "Info card header",
+					class: "h-full w-full object-cover"
+				}, null, 8, S)], 4)) : l("", !0),
+				A.value || k.subtitle || k.icon ? (_(), c(b(i), {
+					key: 1,
+					class: h(k.lessPadding ? "py-2" : "")
+				}, {
+					default: x(() => [d("div", C, [k.icon ? (_(), u("span", {
+						key: 0,
+						class: h(["lucide text-lg", k.iconColor ?? "text-muted-foreground"])
+					}, y(k.icon), 3)) : l("", !0), d("div", null, [A.value ? (_(), c(b(n), { key: 0 }, {
+						default: x(() => [f(y(A.value), 1)]),
+						_: 1
+					})) : l("", !0), k.subtitle ? (_(), c(b(t), { key: 1 }, {
+						default: x(() => [f(y(k.subtitle), 1)]),
+						_: 1
+					})) : l("", !0)])])]),
+					_: 1
+				}, 8, ["class"])) : l("", !0),
+				p(b(r), { class: h(k.lessPadding ? "py-2" : "") }, {
+					default: x(() => [k.fields.length ? (_(), u("dl", w, [(_(!0), u(o, null, v(k.fields, (e) => (_(), u(o, { key: e.label + e.value }, [d("dt", T, y(e.label), 1), d("dd", null, y(M(e)), 1)], 64))), 128))])) : (_(), u("p", E, "No fields configured."))]),
+					_: 1
+				}, 8, ["class"])
+			]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=InfoCard-CnnX07eL.js.map

package/dist/chunks/InfoCard-CnnX07eL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard-CnnX07eL.js","names":[],"sources":["../../src/components/compositions/elements/card/InfoCard.vue","../../src/components/compositions/elements/card/InfoCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * `card.info` element composition.\n *\n * Wraps the cards/InfoCard composition as an element-tier component.\n * Renders a read-only summary tile: optional icon/image header, title,\n * subtitle, and a list of label/value display rows.\n */\nimport { computed } from \"vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\ninterface InfoField {\n  label: string\n  value: string\n  icon?: string\n  format?: string\n  prepend?: string\n  append?: string\n}\n\nexport interface InfoCardProps {\n  label?: string\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  icon?: string\n  iconColor?: string\n  headerImage?: string\n  headerRatio?: string\n  lessPadding?: boolean\n  fields?: InfoField[]\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<InfoCardProps>(), {\n  showCard: true,\n  lessPadding: false,\n  fields: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\n/** Resolve a dot-path string against the item object. */\nfunction resolvePath(path: string, item: Record<string, unknown>): unknown {\n  return path.split(\".\").reduce<unknown>((acc, key) => {\n    if (acc && typeof acc === \"object\" && key in (acc as Record<string, unknown>)) {\n      return (acc as Record<string, unknown>)[key]\n    }\n    return undefined\n  }, item)\n}\n\nfunction formatValue(field: InfoField): string {\n  const raw = resolvePath(field.value, props.item)\n  const str = raw !== undefined && raw !== null ? String(raw) : field.value\n  return `${field.prepend ?? \"\"}${str}${field.append ?? \"\"}`\n}\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <!-- Header image -->\n    <div\n      v-if=\"props.headerImage\"\n      class=\"overflow-hidden rounded-t-lg bg-muted\"\n      :style=\"props.headerRatio ? { aspectRatio: props.headerRatio } : { height: '10rem' }\"\n    >\n      <img\n        :src=\"props.headerImage\"\n        :alt=\"heading ?? 'Info card header'\"\n        class=\"h-full w-full object-cover\"\n      />\n    </div>\n\n    <CardHeader v-if=\"heading || props.subtitle || props.icon\" :class=\"props.lessPadding ? 'py-2' : ''\">\n      <div class=\"flex items-center gap-2\">\n        <span v-if=\"props.icon\" :class=\"['lucide text-lg', props.iconColor ?? 'text-muted-foreground']\">\n          {{ props.icon }}\n        </span>\n        <div>\n          <CardTitle v-if=\"heading\">{{ heading }}</CardTitle>\n          <CardDescription v-if=\"props.subtitle\">{{ props.subtitle }}</CardDescription>\n        </div>\n      </div>\n    </CardHeader>\n\n    <CardContent :class=\"props.lessPadding ? 'py-2' : ''\">\n      <dl\n        v-if=\"props.fields.length\"\n        class=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm\"\n      >\n        <template v-for=\"field in props.fields\" :key=\"field.label + field.value\">\n          <dt class=\"font-medium text-muted-foreground\">{{ field.label }}</dt>\n          <dd>{{ formatValue(field) }}</dd>\n        </template>\n      </dl>\n      <p v-else class=\"text-sm text-muted-foreground\">No fields configured.</p>\n    </CardContent>\n  </Card>\n\n  <!-- Chromeless variant -->\n  <div v-else :class=\"cn(props.classList)\">\n    <dl\n      v-if=\"props.fields.length\"\n      class=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm\"\n    >\n      <template v-for=\"field in props.fields\" :key=\"field.label + field.value\">\n        <dt class=\"font-medium text-muted-foreground\">{{ field.label }}</dt>\n        <dd>{{ formatValue(field) }}</dd>\n      </template>\n    </dl>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * `card.info` element composition.\n *\n * Wraps the cards/InfoCard composition as an element-tier component.\n * Renders a read-only summary tile: optional icon/image header, title,\n * subtitle, and a list of label/value display rows.\n */\nimport { computed } from \"vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\ninterface InfoField {\n  label: string\n  value: string\n  icon?: string\n  format?: string\n  prepend?: string\n  append?: string\n}\n\nexport interface InfoCardProps {\n  label?: string\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  icon?: string\n  iconColor?: string\n  headerImage?: string\n  headerRatio?: string\n  lessPadding?: boolean\n  fields?: InfoField[]\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<InfoCardProps>(), {\n  showCard: true,\n  lessPadding: false,\n  fields: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\n/** Resolve a dot-path string against the item object. */\nfunction resolvePath(path: string, item: Record<string, unknown>): unknown {\n  return path.split(\".\").reduce<unknown>((acc, key) => {\n    if (acc && typeof acc === \"object\" && key in (acc as Record<string, unknown>)) {\n      return (acc as Record<string, unknown>)[key]\n    }\n    return undefined\n  }, item)\n}\n\nfunction formatValue(field: InfoField): string {\n  const raw = resolvePath(field.value, props.item)\n  const str = raw !== undefined && raw !== null ? String(raw) : field.value\n  return `${field.prepend ?? \"\"}${str}${field.append ?? \"\"}`\n}\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <!-- Header image -->\n    <div\n      v-if=\"props.headerImage\"\n      class=\"overflow-hidden rounded-t-lg bg-muted\"\n      :style=\"props.headerRatio ? { aspectRatio: props.headerRatio } : { height: '10rem' }\"\n    >\n      <img\n        :src=\"props.headerImage\"\n        :alt=\"heading ?? 'Info card header'\"\n        class=\"h-full w-full object-cover\"\n      />\n    </div>\n\n    <CardHeader v-if=\"heading || props.subtitle || props.icon\" :class=\"props.lessPadding ? 'py-2' : ''\">\n      <div class=\"flex items-center gap-2\">\n        <span v-if=\"props.icon\" :class=\"['lucide text-lg', props.iconColor ?? 'text-muted-foreground']\">\n          {{ props.icon }}\n        </span>\n        <div>\n          <CardTitle v-if=\"heading\">{{ heading }}</CardTitle>\n          <CardDescription v-if=\"props.subtitle\">{{ props.subtitle }}</CardDescription>\n        </div>\n      </div>\n    </CardHeader>\n\n    <CardContent :class=\"props.lessPadding ? 'py-2' : ''\">\n      <dl\n        v-if=\"props.fields.length\"\n        class=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm\"\n      >\n        <template v-for=\"field in props.fields\" :key=\"field.label + field.value\">\n          <dt class=\"font-medium text-muted-foreground\">{{ field.label }}</dt>\n          <dd>{{ formatValue(field) }}</dd>\n        </template>\n      </dl>\n      <p v-else class=\"text-sm text-muted-foreground\">No fields configured.</p>\n    </CardContent>\n  </Card>\n\n  <!-- Chromeless variant -->\n  <div v-else :class=\"cn(props.classList)\">\n    <dl\n      v-if=\"props.fields.length\"\n      class=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm\"\n    >\n      <template v-for=\"field in props.fields\" :key=\"field.label + field.value\">\n        <dt class=\"font-medium text-muted-foreground\">{{ field.label }}</dt>\n        <dd>{{ formatValue(field) }}</dd>\n      </template>\n    </dl>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAOR,IAAU,QAAe,EAAM,SAAS,EAAM,KAAK;EAGzD,SAAS,EAAY,GAAc,GAAwC;GACzE,OAAO,EAAK,MAAM,GAAG,EAAE,QAAiB,GAAK,MAAQ;IACnD,IAAI,KAAO,OAAO,KAAQ,YAAY,KAAQ,GAC5C,OAAQ,EAAgC;GAG5C,GAAG,CAAI;EACT;EAEA,SAAS,EAAY,GAA0B;GAC7C,IAAM,IAAM,EAAY,EAAM,OAAO,EAAM,IAAI,GACzC,IAAM,KAA6B,OAAqB,EAAM,QAApB,OAAO,CAAG;GAC1D,OAAO,GAAG,EAAM,WAAW,KAAK,IAAM,EAAM,UAAU;EACxD;mBAIc,EAAM,aAAQ,WAyC1B,EAUM,OAAA;;GAVO,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;MAE5B,EAAM,OAAO,UAAA,EAAA,GADrB,EAQK,MARL,GAQK,EAAA,EAAA,EAAA,GAJH,EAGW,GAAA,MAAA,EAHe,EAAM,SAAf,wBAA6B,EAAM,QAAQ,EAAM,MAAA,GAAA,CAChE,EAAoE,MAApE,GAAoE,EAAnB,EAAM,KAAK,GAAA,CAAA,GAC5D,EAAiC,MAAA,MAAA,EAA1B,EAAY,CAAK,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,mCAhDJ,EAAA,GAA1B,EAsCO,EAAA,CAAA,GAAA;;GAtCgC,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;;oBAYxD;IATE,EAAM,eAAA,EAAA,GADd,EAUM,OAAA;;KARJ,OAAM;KACL,OAAK,EAAE,EAAM,cAAW,EAAA,aAAkB,EAAM,YAAW,IAAA,EAAA,QAAA,QAAA,CAAA;QAE5D,EAIE,OAAA;KAHC,KAAK,EAAM;KACX,KAAK,EAAA,SAAO;KACb,OAAM;;IAIQ,EAAA,SAAW,EAAM,YAAY,EAAM,QAAA,EAAA,GAArD,EAUa,EAAA,CAAA,GAAA;;KAV+C,OAAK,EAAE,EAAM,cAAW,SAAA,EAAA;;sBAS5E,CARN,EAQM,OARN,GAQM,CAPQ,EAAM,QAAA,EAAA,GAAlB,EAEO,QAAA;;MAFkB,OAAK,EAAA,CAAA,kBAAqB,EAAM,aAAS,uBAAA,CAAA;UAC7D,EAAM,IAAI,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAEf,EAGM,OAAA,MAAA,CAFa,EAAA,SAAA,EAAA,GAAjB,EAAmD,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;uBAAZ,CAAA,EAAA,EAAV,EAAA,KAAO,GAAA,CAAA,CAAA,CAAA;;sBACb,EAAM,YAAA,EAAA,GAA7B,EAA6E,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;uBAAlB,CAAA,EAAA,EAAjB,EAAM,QAAQ,GAAA,CAAA,CAAA,CAAA;;;;;IAK9D,EAWc,EAAA,CAAA,GAAA,EAXA,OAAK,EAAE,EAAM,cAAW,SAAA,EAAA,EAAA,GAAA;sBAS/B,CAPG,EAAM,OAAO,UAAA,EAAA,GADrB,EAQK,MARL,GAQK,EAAA,EAAA,EAAA,GAJH,EAGW,GAAA,MAAA,EAHe,EAAM,SAAf,wBAA6B,EAAM,QAAQ,EAAM,MAAA,GAAA,CAChE,EAAoE,MAApE,GAAoE,EAAnB,EAAM,KAAK,GAAA,CAAA,GAC5D,EAAiC,MAAA,MAAA,EAA1B,EAAY,CAAK,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,sBAG5B,EAAyE,KAAzE,GAAgD,uBAAqB,EAAA,CAAA"}