@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/ReactiveCanvasDisplay-CmStQoGO.js.map

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

package/dist/chunks/RepeatableBlock-vSZem8Oa.js

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

package/dist/chunks/RepeatableBlock-vSZem8Oa.js.map

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

package/dist/chunks/RepeatableRow-CtJm_xGm.js

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

package/dist/chunks/RepeatableRow-CtJm_xGm.js.map

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

package/dist/chunks/RichTextEditor-BjUtQx6D.js

@@ -0,0 +1,207 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./button-BAwcISlK.js";
+import { t as r } from "./field-frame-n5oLDNBT.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, openBlock as m, renderList as h, resolveDynamicComponent as g, unref as _, watch as v, withCtx as y } from "vue";
+import { Bold as b, Code as x, Heading1 as S, Heading2 as C, Heading3 as w, Italic as T, List as E, ListOrdered as D, Minus as O, Quote as k, Redo as A, Strikethrough as j, Undo as M } from "@lucide/vue";
+import { EditorContent as N, useEditor as P } from "@tiptap/vue-3";
+import F from "@tiptap/starter-kit";
+//#region src/components/compositions/elements/editor/RichTextEditor.vue?vue&type=script&setup=true&lang.ts
+var I = ["data-element-name"], L = /* @__PURE__ */ u({
+	__name: "RichTextEditor",
+	props: {
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		minHeight: { default: "12rem" },
+		extensions: { default: () => [] }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: u }) {
+		let L = e, R = u, z = P({
+			content: L.modelValue ?? "",
+			editable: !(L.disabled || L.readonly),
+			extensions: [F, ...L.extensions],
+			onUpdate: ({ editor: e }) => {
+				R("update:modelValue", e.getHTML());
+			}
+		});
+		v(() => L.modelValue, (e) => {
+			let t = z.value;
+			if (!t) return;
+			let n = e ?? "";
+			n !== t.getHTML() && t.commands.setContent(n, { emitUpdate: !1 });
+		}), v(() => [L.disabled, L.readonly], ([e, t]) => {
+			z.value?.setEditable(!(e || t));
+		}), p(() => {
+			z.value?.destroy();
+		});
+		let B = a(() => L.errors.length > 0), V = a(() => !!L.disabled), H = a(() => !!L.readonly), U = a(() => V.value || H.value), W = a(() => ({ minHeight: L.minHeight }));
+		function G(e, t) {
+			let n = z.value;
+			return n ? t ? n.isActive(e, t) : n.isActive(e) : !1;
+		}
+		let K = a(() => [
+			{
+				key: "bold",
+				label: "Bold",
+				icon: b,
+				isActive: () => G("bold"),
+				run: () => z.value?.chain().focus().toggleBold().run()
+			},
+			{
+				key: "italic",
+				label: "Italic",
+				icon: T,
+				isActive: () => G("italic"),
+				run: () => z.value?.chain().focus().toggleItalic().run()
+			},
+			{
+				key: "strike",
+				label: "Strikethrough",
+				icon: j,
+				isActive: () => G("strike"),
+				run: () => z.value?.chain().focus().toggleStrike().run()
+			},
+			{
+				key: "code",
+				label: "Inline code",
+				icon: x,
+				isActive: () => G("code"),
+				run: () => z.value?.chain().focus().toggleCode().run()
+			},
+			{
+				key: "h1",
+				label: "Heading 1",
+				icon: S,
+				isActive: () => G("heading", { level: 1 }),
+				run: () => z.value?.chain().focus().toggleHeading({ level: 1 }).run()
+			},
+			{
+				key: "h2",
+				label: "Heading 2",
+				icon: C,
+				isActive: () => G("heading", { level: 2 }),
+				run: () => z.value?.chain().focus().toggleHeading({ level: 2 }).run()
+			},
+			{
+				key: "h3",
+				label: "Heading 3",
+				icon: w,
+				isActive: () => G("heading", { level: 3 }),
+				run: () => z.value?.chain().focus().toggleHeading({ level: 3 }).run()
+			},
+			{
+				key: "bullet-list",
+				label: "Bullet list",
+				icon: E,
+				isActive: () => G("bulletList"),
+				run: () => z.value?.chain().focus().toggleBulletList().run()
+			},
+			{
+				key: "ordered-list",
+				label: "Ordered list",
+				icon: D,
+				isActive: () => G("orderedList"),
+				run: () => z.value?.chain().focus().toggleOrderedList().run()
+			},
+			{
+				key: "blockquote",
+				label: "Blockquote",
+				icon: k,
+				isActive: () => G("blockquote"),
+				run: () => z.value?.chain().focus().toggleBlockquote().run()
+			},
+			{
+				key: "horizontal-rule",
+				label: "Horizontal rule",
+				icon: O,
+				isActive: () => !1,
+				run: () => z.value?.chain().focus().setHorizontalRule().run()
+			},
+			{
+				key: "undo",
+				label: "Undo",
+				icon: M,
+				isActive: () => !1,
+				run: () => z.value?.chain().focus().undo().run(),
+				disabled: () => !z.value?.can().chain().focus().undo().run()
+			},
+			{
+				key: "redo",
+				label: "Redo",
+				icon: A,
+				isActive: () => !1,
+				run: () => z.value?.chain().focus().redo().run(),
+				disabled: () => !z.value?.can().chain().focus().redo().run()
+			}
+		]);
+		return (a, u) => (m(), o(_(r), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors,
+			"data-testid": "rich-text-editor"
+		}, {
+			default: y(() => [l("div", {
+				class: d(_(t)("rounded-md border border-input bg-background shadow-sm overflow-hidden", B.value ? "border-destructive ring-1 ring-destructive" : "", V.value ? "opacity-60" : "")),
+				"data-element-name": e.name ?? void 0
+			}, [l("div", {
+				class: d(["flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1", U.value ? "pointer-events-none opacity-50" : ""]),
+				role: "toolbar",
+				"aria-label": "Formatting",
+				"data-testid": "rich-text-editor-toolbar"
+			}, [(m(!0), c(i, null, h(K.value, (e) => (m(), o(_(n), {
+				key: e.key,
+				type: "button",
+				size: "icon-sm",
+				variant: e.isActive() ? "secondary" : "ghost",
+				disabled: U.value || (e.disabled ? e.disabled() : !1),
+				"aria-label": e.label,
+				title: e.label,
+				"data-testid": `rich-text-editor-toolbar-${e.key}`,
+				"aria-pressed": e.isActive(),
+				onClick: (t) => e.run()
+			}, {
+				default: y(() => [(m(), o(g(e.icon)))]),
+				_: 2
+			}, 1032, [
+				"variant",
+				"disabled",
+				"aria-label",
+				"title",
+				"data-testid",
+				"aria-pressed",
+				"onClick"
+			]))), 128))], 2), _(z) ? (m(), o(_(N), {
+				key: 0,
+				editor: _(z),
+				style: f(W.value),
+				class: "prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none",
+				"data-testid": "rich-text-editor-content"
+			}, null, 8, ["editor", "style"])) : s("", !0)], 10, I)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), R = /* @__PURE__ */ e({ default: () => z }), z = L;
+//#endregion
+export { R as n, z as t };
+
+//# sourceMappingURL=RichTextEditor-BjUtQx6D.js.map

package/dist/chunks/RichTextEditor-BjUtQx6D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor-BjUtQx6D.js","names":[],"sources":["../../src/components/compositions/elements/editor/RichTextEditor.vue","../../src/components/compositions/elements/editor/RichTextEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven rich-text editor composition. Wraps Tiptap (`@tiptap/vue-3`\n * + StarterKit) inside a FieldFrame, exposing the standard input chrome:\n * label / required / helpText / errors / hideLabel.\n *\n * The model is HTML — emits `update:modelValue` with `editor.getHTML()` on\n * every internal change.\n *\n *   <RichTextEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed, onBeforeUnmount, watch } from \"vue\"\nimport { EditorContent, useEditor } from \"@tiptap/vue-3\"\nimport type { AnyExtension } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport {\n  Bold,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Redo,\n  Strikethrough,\n  Undo,\n} from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface RichTextEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  minHeight?: string\n  extensions?: unknown[]\n}\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  errors: () => [],\n  minHeight: \"12rem\",\n  extensions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !(props.disabled || props.readonly),\n  extensions: [\n    StarterKit,\n    ...(props.extensions as AnyExtension[]),\n  ],\n  onUpdate: ({ editor }) => {\n    emit(\"update:modelValue\", editor.getHTML())\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const instance = editor.value\n    if (!instance) {\n      return\n    }\n    const next = value ?? \"\"\n    if (next === instance.getHTML()) {\n      return\n    }\n    instance.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(\n  () => [props.disabled, props.readonly] as const,\n  ([disabled, readonly]) => {\n    editor.value?.setEditable(!(disabled || readonly))\n  },\n)\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nconst hasErrors = computed<boolean>(() => props.errors.length > 0)\nconst isDisabled = computed<boolean>(() => Boolean(props.disabled))\nconst isReadonly = computed<boolean>(() => Boolean(props.readonly))\nconst isInert = computed<boolean>(() => isDisabled.value || isReadonly.value)\n\nconst contentStyle = computed<Record<string, string>>(() => ({\n  minHeight: props.minHeight,\n}))\n\ninterface ToolbarAction {\n  key: string\n  label: string\n  icon: typeof Bold\n  isActive: () => boolean\n  run: () => void\n  disabled?: () => boolean\n}\n\nfunction active(name: string, attrs?: Record<string, unknown>): boolean {\n  const instance = editor.value\n  if (!instance) {\n    return false\n  }\n  return attrs ? instance.isActive(name, attrs) : instance.isActive(name)\n}\n\nconst toolbarActions = computed<ToolbarAction[]>(() => [\n  {\n    key: \"bold\",\n    label: \"Bold\",\n    icon: Bold,\n    isActive: () => active(\"bold\"),\n    run: () => editor.value?.chain().focus().toggleBold().run(),\n  },\n  {\n    key: \"italic\",\n    label: \"Italic\",\n    icon: Italic,\n    isActive: () => active(\"italic\"),\n    run: () => editor.value?.chain().focus().toggleItalic().run(),\n  },\n  {\n    key: \"strike\",\n    label: \"Strikethrough\",\n    icon: Strikethrough,\n    isActive: () => active(\"strike\"),\n    run: () => editor.value?.chain().focus().toggleStrike().run(),\n  },\n  {\n    key: \"code\",\n    label: \"Inline code\",\n    icon: Code,\n    isActive: () => active(\"code\"),\n    run: () => editor.value?.chain().focus().toggleCode().run(),\n  },\n  {\n    key: \"h1\",\n    label: \"Heading 1\",\n    icon: Heading1,\n    isActive: () => active(\"heading\", { level: 1 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    key: \"h2\",\n    label: \"Heading 2\",\n    icon: Heading2,\n    isActive: () => active(\"heading\", { level: 2 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    key: \"h3\",\n    label: \"Heading 3\",\n    icon: Heading3,\n    isActive: () => active(\"heading\", { level: 3 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  {\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    icon: List,\n    isActive: () => active(\"bulletList\"),\n    run: () => editor.value?.chain().focus().toggleBulletList().run(),\n  },\n  {\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    icon: ListOrdered,\n    isActive: () => active(\"orderedList\"),\n    run: () => editor.value?.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    icon: Quote,\n    isActive: () => active(\"blockquote\"),\n    run: () => editor.value?.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    icon: Minus,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().setHorizontalRule().run(),\n  },\n  {\n    key: \"undo\",\n    label: \"Undo\",\n    icon: Undo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().undo().run(),\n    disabled: () => !editor.value?.can().chain().focus().undo().run(),\n  },\n  {\n    key: \"redo\",\n    label: \"Redo\",\n    icon: Redo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().redo().run(),\n    disabled: () => !editor.value?.can().chain().focus().redo().run(),\n  },\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=\"rich-text-editor\"\n  >\n    <div\n      :class=\"\n        cn(\n          'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n          hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n          isDisabled ? 'opacity-60' : '',\n        )\n      \"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        class=\"flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none opacity-50' : ''\"\n        role=\"toolbar\"\n        aria-label=\"Formatting\"\n        data-testid=\"rich-text-editor-toolbar\"\n      >\n        <Button\n          v-for=\"action in toolbarActions\"\n          :key=\"action.key\"\n          type=\"button\"\n          size=\"icon-sm\"\n          :variant=\"action.isActive() ? 'secondary' : 'ghost'\"\n          :disabled=\"isInert || (action.disabled ? action.disabled() : false)\"\n          :aria-label=\"action.label\"\n          :title=\"action.label\"\n          :data-testid=\"`rich-text-editor-toolbar-${action.key}`\"\n          :aria-pressed=\"action.isActive()\"\n          @click=\"action.run()\"\n        >\n          <component :is=\"action.icon\" />\n        </Button>\n      </div>\n\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"rich-text-editor-content\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven rich-text editor composition. Wraps Tiptap (`@tiptap/vue-3`\n * + StarterKit) inside a FieldFrame, exposing the standard input chrome:\n * label / required / helpText / errors / hideLabel.\n *\n * The model is HTML — emits `update:modelValue` with `editor.getHTML()` on\n * every internal change.\n *\n *   <RichTextEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed, onBeforeUnmount, watch } from \"vue\"\nimport { EditorContent, useEditor } from \"@tiptap/vue-3\"\nimport type { AnyExtension } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport {\n  Bold,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Redo,\n  Strikethrough,\n  Undo,\n} from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface RichTextEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  minHeight?: string\n  extensions?: unknown[]\n}\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  errors: () => [],\n  minHeight: \"12rem\",\n  extensions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !(props.disabled || props.readonly),\n  extensions: [\n    StarterKit,\n    ...(props.extensions as AnyExtension[]),\n  ],\n  onUpdate: ({ editor }) => {\n    emit(\"update:modelValue\", editor.getHTML())\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const instance = editor.value\n    if (!instance) {\n      return\n    }\n    const next = value ?? \"\"\n    if (next === instance.getHTML()) {\n      return\n    }\n    instance.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(\n  () => [props.disabled, props.readonly] as const,\n  ([disabled, readonly]) => {\n    editor.value?.setEditable(!(disabled || readonly))\n  },\n)\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nconst hasErrors = computed<boolean>(() => props.errors.length > 0)\nconst isDisabled = computed<boolean>(() => Boolean(props.disabled))\nconst isReadonly = computed<boolean>(() => Boolean(props.readonly))\nconst isInert = computed<boolean>(() => isDisabled.value || isReadonly.value)\n\nconst contentStyle = computed<Record<string, string>>(() => ({\n  minHeight: props.minHeight,\n}))\n\ninterface ToolbarAction {\n  key: string\n  label: string\n  icon: typeof Bold\n  isActive: () => boolean\n  run: () => void\n  disabled?: () => boolean\n}\n\nfunction active(name: string, attrs?: Record<string, unknown>): boolean {\n  const instance = editor.value\n  if (!instance) {\n    return false\n  }\n  return attrs ? instance.isActive(name, attrs) : instance.isActive(name)\n}\n\nconst toolbarActions = computed<ToolbarAction[]>(() => [\n  {\n    key: \"bold\",\n    label: \"Bold\",\n    icon: Bold,\n    isActive: () => active(\"bold\"),\n    run: () => editor.value?.chain().focus().toggleBold().run(),\n  },\n  {\n    key: \"italic\",\n    label: \"Italic\",\n    icon: Italic,\n    isActive: () => active(\"italic\"),\n    run: () => editor.value?.chain().focus().toggleItalic().run(),\n  },\n  {\n    key: \"strike\",\n    label: \"Strikethrough\",\n    icon: Strikethrough,\n    isActive: () => active(\"strike\"),\n    run: () => editor.value?.chain().focus().toggleStrike().run(),\n  },\n  {\n    key: \"code\",\n    label: \"Inline code\",\n    icon: Code,\n    isActive: () => active(\"code\"),\n    run: () => editor.value?.chain().focus().toggleCode().run(),\n  },\n  {\n    key: \"h1\",\n    label: \"Heading 1\",\n    icon: Heading1,\n    isActive: () => active(\"heading\", { level: 1 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    key: \"h2\",\n    label: \"Heading 2\",\n    icon: Heading2,\n    isActive: () => active(\"heading\", { level: 2 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    key: \"h3\",\n    label: \"Heading 3\",\n    icon: Heading3,\n    isActive: () => active(\"heading\", { level: 3 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  {\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    icon: List,\n    isActive: () => active(\"bulletList\"),\n    run: () => editor.value?.chain().focus().toggleBulletList().run(),\n  },\n  {\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    icon: ListOrdered,\n    isActive: () => active(\"orderedList\"),\n    run: () => editor.value?.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    icon: Quote,\n    isActive: () => active(\"blockquote\"),\n    run: () => editor.value?.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    icon: Minus,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().setHorizontalRule().run(),\n  },\n  {\n    key: \"undo\",\n    label: \"Undo\",\n    icon: Undo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().undo().run(),\n    disabled: () => !editor.value?.can().chain().focus().undo().run(),\n  },\n  {\n    key: \"redo\",\n    label: \"Redo\",\n    icon: Redo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().redo().run(),\n    disabled: () => !editor.value?.can().chain().focus().redo().run(),\n  },\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=\"rich-text-editor\"\n  >\n    <div\n      :class=\"\n        cn(\n          'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n          hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n          isDisabled ? 'opacity-60' : '',\n        )\n      \"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        class=\"flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none opacity-50' : ''\"\n        role=\"toolbar\"\n        aria-label=\"Formatting\"\n        data-testid=\"rich-text-editor-toolbar\"\n      >\n        <Button\n          v-for=\"action in toolbarActions\"\n          :key=\"action.key\"\n          type=\"button\"\n          size=\"icon-sm\"\n          :variant=\"action.isActive() ? 'secondary' : 'ghost'\"\n          :disabled=\"isInert || (action.disabled ? action.disabled() : false)\"\n          :aria-label=\"action.label\"\n          :title=\"action.label\"\n          :data-testid=\"`rich-text-editor-toolbar-${action.key}`\"\n          :aria-pressed=\"action.isActive()\"\n          @click=\"action.run()\"\n        >\n          <component :is=\"action.icon\" />\n        </Button>\n      </div>\n\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"rich-text-editor-content\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/chunks/SearchInput-Bc0p16ND.js

@@ -0,0 +1,84 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { t } from "./input-tw5ZQGKQ.js";
+import { t as n } from "./field-frame-n5oLDNBT.js";
+import { createBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, onMounted as l, openBlock as u, unref as d, useModel as f, useTemplateRef as p, withCtx as m } from "vue";
+import { Search as h } from "@lucide/vue";
+//#region src/components/compositions/elements/input/SearchInput.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "relative" }, _ = /* @__PURE__ */ o({
+	__name: "SearchInput",
+	props: /* @__PURE__ */ s({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let o = e, s = f(e, "modelValue"), _ = p("inputRef");
+		return l(() => {
+			o.autoFocus && _.value?.focus();
+		}), (o, l) => (u(), r(d(n), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: m(() => [i("div", g, [a(d(h), { class: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), a(d(t), {
+				ref_key: "inputRef",
+				ref: _,
+				"model-value": s.value ?? void 0,
+				id: e.id,
+				name: e.name ?? void 0,
+				type: "search",
+				placeholder: e.placeholder ?? "",
+				readonly: e.readonly,
+				disabled: e.disabled,
+				required: e.required,
+				maxlength: e.maxlength,
+				minlength: e.minlength,
+				"data-element-name": e.name ?? void 0,
+				class: c(["pl-9", e.errors.length ? "border-destructive ring-destructive" : ""]),
+				"onUpdate:modelValue": l[0] ||= (e) => s.value = e == null ? "" : String(e)
+			}, null, 8, [
+				"model-value",
+				"id",
+				"name",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"maxlength",
+				"minlength",
+				"data-element-name",
+				"class"
+			])])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), v = /* @__PURE__ */ e({ default: () => y }), y = _;
+//#endregion
+export { v as n, y as t };
+
+//# sourceMappingURL=SearchInput-Bc0p16ND.js.map

package/dist/chunks/SearchInput-Bc0p16ND.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput-Bc0p16ND.js","names":[],"sources":["../../src/components/compositions/elements/input/SearchInput.vue","../../src/components/compositions/elements/input/SearchInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven search input composition. Composes the shadcn `Input`\n * primitive (with `type=\"search\"`) and a leading lucide Search icon.\n * Wrapped with `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <SearchInput v-model=\"query\" label=\"Search\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Search } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SearchInputProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<SearchInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\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    <div class=\"relative\">\n      <Search\n        class=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\"\n      />\n      <Input\n        ref=\"inputRef\"\n        :model-value=\"model ?? undefined\"\n        :id=\"id\"\n        :name=\"name ?? undefined\"\n        type=\"search\"\n        :placeholder=\"placeholder ?? ''\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :maxlength=\"maxlength\"\n        :minlength=\"minlength\"\n        :data-element-name=\"name ?? undefined\"\n        :class=\"[\n          'pl-9',\n          errors.length ? 'border-destructive ring-destructive' : '',\n        ]\"\n        @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven search input composition. Composes the shadcn `Input`\n * primitive (with `type=\"search\"`) and a leading lucide Search icon.\n * Wrapped with `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <SearchInput v-model=\"query\" label=\"Search\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Search } from \"@lucide/vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SearchInputProps {\n  modelValue?: string\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<SearchInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\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    <div class=\"relative\">\n      <Search\n        class=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\"\n      />\n      <Input\n        ref=\"inputRef\"\n        :model-value=\"model ?? undefined\"\n        :id=\"id\"\n        :name=\"name ?? undefined\"\n        type=\"search\"\n        :placeholder=\"placeholder ?? ''\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :maxlength=\"maxlength\"\n        :minlength=\"minlength\"\n        :data-element-name=\"name ?? undefined\"\n        :class=\"[\n          'pl-9',\n          errors.length ? 'border-destructive ring-destructive' : '',\n        ]\"\n        @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAM,IAAQ,GAIR,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAW,EAAiC,UAAU;SAE5D,QAAgB;GACd,AAAI,EAAM,aACR,EAAS,OAAO,MAAM;EAE1B,CAAC,mBAIC,EAgCa,EAAA,CAAA,GAAA;GA/BV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAyBH,CAvBN,EAuBM,OAvBN,GAuBM,CAtBJ,EAEE,EAAA,CAAA,GAAA,EADA,OAAM,6FAA4F,CAAA,GAEpG,EAkBE,EAAA,CAAA,GAAA;aAjBI;IAAJ,KAAI;IACH,eAAa,EAAA,SAAS,KAAA;IACtB,IAAI,EAAA;IACJ,MAAM,EAAA,QAAQ,KAAA;IACf,MAAK;IACJ,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,WAAW,EAAA;IACX,WAAW,EAAA;IACX,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAA,CAAA,QAAgC,EAAA,OAAO,SAAM,wCAAA,EAAA,CAAA;IAIlD,uBAAkB,AAAA,EAAA,QAAG,MAAoC,EAAA,QAAQ,KAAC,OAAA,KAAgB,OAAO,CAAC"}