@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/picker/AsyncSelectPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,174 @@
+import e from "../../../ui/combobox/Combobox.js";
+import t from "../../../ui/combobox/ComboboxAnchor.js";
+import n from "../../../ui/combobox/ComboboxContent.js";
+import r from "../../../ui/combobox/ComboboxEmpty.js";
+import i from "../../../ui/combobox/ComboboxInput.js";
+import a from "../../../ui/combobox/ComboboxItem.js";
+import o from "../../../ui/combobox/ComboboxItemIndicator.js";
+import "../../../ui/combobox/index.js";
+import s from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { useAsyncSearch as c } from "../../../../composables/useAsyncSearch.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeModels as v, normalizeClass as y, openBlock as b, renderList as x, toDisplayString as S, unref as C, useModel as w, watch as T, withCtx as E } from "vue";
+import { ChevronsUpDown as D, Loader2 as O, Search as k } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/AsyncSelectPicker.vue?vue&type=script&setup=true&lang.ts
+var A = {
+	key: 0,
+	class: "truncate text-sm",
+	"data-testid": "async-picker-label"
+}, j = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, M = { class: "flex items-center border-b px-2 py-1.5" }, N = {
+	key: 0,
+	class: "px-2 py-2 text-sm text-muted-foreground",
+	"data-testid": "async-picker-loading-text"
+}, P = /* @__PURE__ */ _({
+	__name: "AsyncSelectPicker",
+	props: /* @__PURE__ */ v({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		onSearch: {},
+		initialOptions: { default: () => [] },
+		minSearchLength: { default: 1 },
+		debounceMs: { default: 250 },
+		loadingText: { default: "Loading..." },
+		emptyText: { default: "No results" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(_, { expose: v }) {
+		let P = _, F = w(_, "modelValue");
+		function I(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let { query: L, results: R, isLoading: z, trigger: B } = c({
+			onSearch: P.onSearch,
+			initialOptions: P.initialOptions,
+			minSearchLength: P.minSearchLength,
+			debounceMs: P.debounceMs
+		});
+		T(() => P.initialOptions, (e) => {
+			L.value.length < P.minSearchLength && (R.value = e ? [...e] : []);
+		});
+		let V = u(() => (R.value ?? []).map(I)), H = u(() => {
+			let e = (P.initialOptions ?? []).map(I), t = V.value, n = /* @__PURE__ */ new Map();
+			for (let t of e) n.set(t.value, t);
+			for (let e of t) n.set(e.value, e);
+			return Array.from(n.values());
+		}), U = u(() => {
+			if (!(F.value === void 0 || F.value === null)) return String(F.value);
+		}), W = u(() => {
+			if (U.value === void 0) return "";
+			let e = H.value.find((e) => e.value === U.value);
+			return e ? e.label : U.value;
+		});
+		function G(e) {
+			let t = e.target.value;
+			B(t);
+		}
+		function K(e) {
+			if (Array.isArray(e)) {
+				F.value = e[0] === void 0 ? null : e[0];
+				return;
+			}
+			F.value = e === void 0 ? null : e;
+		}
+		function q(e) {
+			e && L.value === "" && (R.value = P.initialOptions ? [...P.initialOptions] : []);
+		}
+		return v({ trigger: B }), (c, u) => (b(), d(C(s), {
+			label: _.label,
+			required: _.required,
+			"hide-label": _.hideLabel,
+			for: _.id,
+			"help-text": _.helpText,
+			errors: _.errors
+		}, {
+			default: E(() => [g(C(e), {
+				"model-value": U.value,
+				disabled: _.disabled || _.readonly,
+				"ignore-filter": "",
+				"onUpdate:modelValue": K,
+				"onUpdate:open": q
+			}, {
+				default: E(() => [g(C(t), {
+					"data-element-name": _.name ?? void 0,
+					"data-testid": "async-picker-anchor",
+					class: y(["justify-between text-left", _.errors.length ? "border-destructive ring-destructive" : ""])
+				}, {
+					default: E(() => [W.value ? (b(), p("span", A, S(W.value), 1)) : (b(), p("span", j, S(_.placeholder ?? "Select…"), 1)), g(C(D), { class: "ml-2 h-4 w-4 shrink-0 opacity-50" })]),
+					_: 1
+				}, 8, ["data-element-name", "class"]), g(C(n), null, {
+					default: E(() => [
+						m("div", M, [
+							g(C(k), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+							g(C(i), {
+								id: _.id,
+								"model-value": C(L),
+								placeholder: _.placeholder ?? "Search…",
+								class: "h-8",
+								"data-testid": "async-picker-input",
+								onInput: G
+							}, null, 8, [
+								"id",
+								"model-value",
+								"placeholder"
+							]),
+							C(z) ? (b(), d(C(O), {
+								key: 0,
+								"data-testid": "async-picker-loader",
+								class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+							})) : f("", !0)
+						]),
+						C(z) ? (b(), p("div", N, S(_.loadingText), 1)) : V.value.length === 0 ? (b(), d(C(r), { key: 1 }, {
+							default: E(() => [h(S(_.emptyText), 1)]),
+							_: 1
+						})) : f("", !0),
+						(b(!0), p(l, null, x(V.value, (e) => (b(), d(C(a), {
+							key: e.value,
+							value: e.value,
+							disabled: e.disabled
+						}, {
+							default: E(() => [g(C(o)), h(" " + S(e.label), 1)]),
+							_: 2
+						}, 1032, ["value", "disabled"]))), 128))
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=AsyncSelectPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/picker/AsyncSelectPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelectPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/AsyncSelectPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven async select picker composition. Same callback-driven\n * search surface as `AsyncSelectOption` but presented as a button-style\n * picker — the trigger reads as a single selected value with a chevron,\n * and the Combobox panel appears beneath it.\n *\n *   <AsyncSelectPicker\n *     v-model=\"userId\"\n *     label=\"User\"\n *     :on-search=\"(q) => fetch(`/users?q=${q}`).then(r => r.json())\"\n *   />\n */\nimport { computed, watch } from \"vue\"\nimport { ChevronsUpDown, Loader2, Search } from \"@lucide/vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { useAsyncSearch } from \"@/composables/useAsyncSearch\"\n\nexport interface AsyncSelectPickerProps {\n  modelValue?: string | number | 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  onSearch?: (query: string) => Promise<SelectOptionLike[]>\n  initialOptions?: SelectOptionLike[]\n  minSearchLength?: number\n  debounceMs?: number\n  loadingText?: string\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<AsyncSelectPickerProps>(), {\n  errors: () => [],\n  initialOptions: () => [],\n  minSearchLength: 1,\n  debounceMs: 250,\n  loadingText: \"Loading...\",\n  emptyText: \"No results\",\n})\n\nconst model = defineModel<string | number | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst { query, results, isLoading, trigger } = useAsyncSearch({\n  onSearch: props.onSearch,\n  initialOptions: props.initialOptions,\n  minSearchLength: props.minSearchLength,\n  debounceMs: props.debounceMs,\n})\n\nwatch(\n  () => props.initialOptions,\n  (next) => {\n    if (query.value.length < props.minSearchLength) {\n      results.value = next ? [...next] : []\n    }\n  },\n)\n\nconst normalisedResults = computed<NormalisedOption[]>(() =>\n  (results.value ?? []).map(normaliseOption),\n)\n\nconst normalisedAll = computed<NormalisedOption[]>(() => {\n  const initial = (props.initialOptions ?? []).map(normaliseOption)\n  const fromResults = normalisedResults.value\n  const merged = new Map<string, NormalisedOption>()\n  for (const o of initial) {\n    merged.set(o.value, o)\n  }\n  for (const o of fromResults) {\n    merged.set(o.value, o)\n  }\n  return Array.from(merged.values())\n})\n\nconst currentValue = computed<string | undefined>(() => {\n  if (model.value === undefined || model.value === null) {\n    return undefined\n  }\n  return String(model.value)\n})\n\nconst selectedLabel = computed<string>(() => {\n  if (currentValue.value === undefined) {\n    return \"\"\n  }\n  const match = normalisedAll.value.find((o) => o.value === currentValue.value)\n  return match ? match.label : currentValue.value\n})\n\nfunction onInput(event: Event): void {\n  const next = (event.target as HTMLInputElement).value\n  trigger(next)\n}\n\nfunction onUpdate(next: unknown): void {\n  if (Array.isArray(next)) {\n    model.value = next[0] === undefined ? null : (next[0] as string | number)\n    return\n  }\n  model.value = next === undefined ? null : (next as string | number)\n}\n\nfunction onOpenChange(open: boolean): void {\n  if (open && query.value === \"\") {\n    results.value = props.initialOptions ? [...props.initialOptions] : []\n  }\n}\n\ndefineExpose({ trigger })\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    <Combobox\n      :model-value=\"currentValue\"\n      :disabled=\"disabled || readonly\"\n      ignore-filter\n      @update:model-value=\"onUpdate\"\n      @update:open=\"onOpenChange\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        data-testid=\"async-picker-anchor\"\n        :class=\"[\n          'justify-between text-left',\n          errors.length ? 'border-destructive ring-destructive' : '',\n        ]\"\n      >\n        <span\n          v-if=\"selectedLabel\"\n          class=\"truncate text-sm\"\n          data-testid=\"async-picker-label\"\n        >\n          {{ selectedLabel }}\n        </span>\n        <span v-else class=\"text-sm text-muted-foreground\">\n          {{ placeholder ?? \"Select…\" }}\n        </span>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div class=\"flex items-center border-b px-2 py-1.5\">\n          <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n          <ComboboxInput\n            :id=\"id\"\n            :model-value=\"query\"\n            :placeholder=\"placeholder ?? 'Search…'\"\n            class=\"h-8\"\n            data-testid=\"async-picker-input\"\n            @input=\"onInput\"\n          />\n          <Loader2\n            v-if=\"isLoading\"\n            data-testid=\"async-picker-loader\"\n            class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n          />\n        </div>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"async-picker-loading-text\"\n        >\n          {{ loadingText }}\n        </div>\n        <ComboboxEmpty v-else-if=\"normalisedResults.length === 0\">\n          {{ emptyText }}\n        </ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"opt in normalisedResults\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          <ComboboxItemIndicator />\n          {{ opt.label }}\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GASR,IAAQ,EAAmC,GAAC,YAAY;EAQ9D,SAAS,EAAgB,GAAyC;GAIhE,OAHI,OAAO,KAAQ,WACV;IAAE,OAAO;IAAK,OAAO;IAAK,UAAU;GAAM,IAE5C;IACL,OAAO,EAAI;IACX,OAAO,OAAO,EAAI,KAAK;IACvB,UAAU,EAAQ,EAAI;GACxB;EACF;EAEA,IAAM,EAAE,UAAO,YAAS,cAAW,eAAY,EAAe;GAC5D,UAAU,EAAM;GAChB,gBAAgB,EAAM;GACtB,iBAAiB,EAAM;GACvB,YAAY,EAAM;EACpB,CAAC;EAED,QACQ,EAAM,iBACX,MAAS;GACR,AAAI,EAAM,MAAM,SAAS,EAAM,oBAC7B,EAAQ,QAAQ,IAAO,CAAC,GAAG,CAAI,IAAI,CAAC;EAExC,CACF;EAEA,IAAM,IAAoB,SACvB,EAAQ,SAAS,CAAC,GAAG,IAAI,CAAe,CAC3C,GAEM,IAAgB,QAAmC;GACvD,IAAM,KAAW,EAAM,kBAAkB,CAAC,GAAG,IAAI,CAAe,GAC1D,IAAc,EAAkB,OAChC,oBAAS,IAAI,IAA8B;GACjD,KAAK,IAAM,KAAK,GACd,EAAO,IAAI,EAAE,OAAO,CAAC;GAEvB,KAAK,IAAM,KAAK,GACd,EAAO,IAAI,EAAE,OAAO,CAAC;GAEvB,OAAO,MAAM,KAAK,EAAO,OAAO,CAAC;EACnC,CAAC,GAEK,IAAe,QAAmC;GAClD,QAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OAGjD,OAAO,OAAO,EAAM,KAAK;EAC3B,CAAC,GAEK,IAAgB,QAAuB;GAC3C,IAAI,EAAa,UAAU,KAAA,GACzB,OAAO;GAET,IAAM,IAAQ,EAAc,MAAM,MAAM,MAAM,EAAE,UAAU,EAAa,KAAK;GAC5E,OAAO,IAAQ,EAAM,QAAQ,EAAa;EAC5C,CAAC;EAED,SAAS,EAAQ,GAAoB;GACnC,IAAM,IAAQ,EAAM,OAA4B;GAChD,EAAQ,CAAI;EACd;EAEA,SAAS,EAAS,GAAqB;GACrC,IAAI,MAAM,QAAQ,CAAI,GAAG;IACvB,EAAM,QAAQ,EAAK,OAAO,KAAA,IAAY,OAAQ,EAAK;IACnD;GACF;GACA,EAAM,QAAQ,MAAS,KAAA,IAAY,OAAQ;EAC7C;EAEA,SAAS,EAAa,GAAqB;GACzC,AAAI,KAAQ,EAAM,UAAU,OAC1B,EAAQ,QAAQ,EAAM,iBAAiB,CAAC,GAAG,EAAM,cAAc,IAAI,CAAC;EAExE;SAEA,EAAa,EAAE,WAAQ,CAAC,mBAItB,EAyEa,EAAA,CAAA,GAAA;GAxEV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAkEE,CAhEX,EAgEW,EAAA,CAAA,GAAA;IA/DR,eAAa,EAAA;IACb,UAAU,EAAA,YAAY,EAAA;IACvB,iBAAA;IACC,uBAAoB;IACpB,iBAAa;;qBAqBG,CAnBjB,EAmBiB,EAAA,CAAA,GAAA;KAlBd,qBAAmB,EAAA,QAAQ,KAAA;KAC5B,eAAY;KACX,OAAK,EAAA,CAAA,6BAAqD,EAAA,OAAO,SAAM,wCAAA,EAAA,CAAA;;sBAWjE,CALC,EAAA,SAAA,EAAA,GADR,EAMO,QANP,GAMO,EADF,EAAA,KAAa,GAAA,CAAA,MAAA,EAAA,GAElB,EAEO,QAFP,GAEO,EADF,EAAA,eAAW,SAAA,GAAA,CAAA,IAEhB,EAA2D,EAAA,CAAA,GAAA,EAA3C,OAAM,mCAAkC,CAAA,CAAA,CAAA;;2CAE1D,EAoCkB,EAAA,CAAA,GAAA,MAAA;sBApBV;MAfN,EAeM,OAfN,GAeM;OAdJ,EAAmD,EAAA,CAAA,GAAA,EAA3C,OAAM,mCAAkC,CAAA;OAChD,EAOE,EAAA,CAAA,GAAA;QANC,IAAI,EAAA;QACJ,eAAa,EAAA,CAAA;QACb,aAAa,EAAA,eAAW;QACzB,OAAM;QACN,eAAY;QACJ;;;;;;OAGF,EAAA,CAAA,KAAA,EAAA,GADR,EAIE,EAAA,CAAA,GAAA;;QAFA,eAAY;QACZ,OAAM;;;MAIF,EAAA,CAAA,KAAA,EAAA,GADR,EAMM,OANN,GAMM,EADD,EAAA,WAAW,GAAA,CAAA,KAEU,EAAA,MAAkB,WAAM,KAAA,EAAA,GAAlD,EAEgB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;wBADC,CAAA,EAAA,EAAZ,EAAA,SAAS,GAAA,CAAA,CAAA,CAAA;;;cAEd,EAQe,GAAA,MAAA,EAPC,EAAA,QAAP,YADT,EAQe,EAAA,CAAA,GAAA;OANZ,KAAK,EAAI;OACT,OAAO,EAAI;OACX,UAAU,EAAI;;wBAEU,CAAzB,EAAyB,EAAA,CAAA,CAAA,GAAA,EAAA,MACzB,EAAG,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/picker/ColorPicker.js

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

package/dist/components/compositions/elements/picker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/ColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven color picker composition. Native `<input type=\"color\">`\n * inside a Popover plus a hex Input fallback. Optional `swatches` render\n * as preset chips. Round-trips a lowercased hex string (with leading\n * `#`).\n *\n *   <ColorPicker v-model=\"color\" label=\"Brand color\" />\n */\nimport { computed, watch } from \"vue\"\nimport { Pipette } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface ColorPickerProps {\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  colorFormat?: \"hex\" | \"rgb\" | \"hsl\"\n  swatches?: string[]\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  errors: () => [],\n  swatches: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst currentColor = computed<string>(() => {\n  const raw = model.value\n  if (raw && typeof raw === \"string\") {\n    return normalizeHex(raw)\n  }\n  return \"#000000\"\n})\n\n// Ensure stored value is normalized once the user picks a hex.\nwatch(model, (next) => {\n  if (typeof next === \"string\" && next.length > 0) {\n    const normalized = normalizeHex(next)\n    if (normalized !== next) {\n      model.value = normalized\n    }\n  }\n})\n\nfunction normalizeHex(value: string): string {\n  if (!value) {\n    return \"#000000\"\n  }\n  const trimmed = value.trim().toLowerCase()\n  if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) {\n    return trimmed\n  }\n  if (/^([0-9a-f]{6})$/.test(trimmed)) {\n    return `#${trimmed}`\n  }\n  return value\n}\n\nfunction setColor(next: string): void {\n  model.value = normalizeHex(next)\n}\n\nfunction onNativeInput(event: Event): void {\n  const target = event.target as HTMLInputElement | null\n  setColor(target?.value ?? \"#000000\")\n}\n\nfunction onHexInput(value: string | number | undefined): void {\n  setColor(typeof value === \"string\" ? value : \"\")\n}\n\nconst swatchList = computed<string[]>(() =>\n  Array.isArray(props.swatches) ? props.swatches : [],\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=\"flex items-center gap-2\" :data-element-name=\"name ?? undefined\">\n      <Popover>\n        <PopoverTrigger as-child>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon\"\n            :disabled=\"disabled\"\n            aria-label=\"Choose a color\"\n            data-testid=\"color-swatch-trigger\"\n          >\n            <span\n              class=\"size-5 rounded-sm border\"\n              :style=\"{ backgroundColor: currentColor }\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-3\">\n          <div class=\"flex flex-col gap-3\">\n            <input\n              type=\"color\"\n              :value=\"currentColor\"\n              :disabled=\"disabled || readonly\"\n              class=\"h-10 w-32 cursor-pointer rounded border\"\n              data-testid=\"color-native-input\"\n              @input=\"onNativeInput\"\n            >\n            <div v-if=\"swatchList.length\" class=\"flex flex-wrap gap-2\">\n              <button\n                v-for=\"swatch in swatchList\"\n                :key=\"swatch\"\n                type=\"button\"\n                class=\"size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                :style=\"{ backgroundColor: swatch }\"\n                :aria-label=\"`Use ${swatch}`\"\n                :disabled=\"disabled\"\n                data-testid=\"color-swatch\"\n                @click=\"setColor(swatch)\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <Input\n        :model-value=\"currentColor\"\n        :placeholder=\"placeholder ?? '#000000'\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        class=\"w-32 font-mono uppercase\"\n        data-testid=\"color-hex-input\"\n        spellcheck=\"false\"\n        @update:model-value=\"onHexInput\"\n      />\n      <Pipette\n        v-if=\"!swatchList.length\"\n        class=\"size-4 text-muted-foreground\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/picker/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,156 @@
+import e from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import t from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import n from "../../../ui/popover/Popover.js";
+import r from "../../../ui/popover/PopoverContent.js";
+import i from "../../../ui/popover/PopoverTrigger.js";
+import "../../../ui/popover/index.js";
+import a from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeStyle as h, openBlock as g, renderList as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
+import { Pipette as S } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-element-name"], w = { class: "flex flex-col gap-3" }, T = ["value", "disabled"], E = {
+	key: 0,
+	class: "flex flex-wrap gap-2"
+}, D = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], O = /* @__PURE__ */ p({
+	__name: "ColorPicker",
+	props: /* @__PURE__ */ m({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		colorFormat: {},
+		swatches: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(p) {
+		let m = p, O = y(p, "modelValue"), k = s(() => {
+			let e = O.value;
+			return e && typeof e == "string" ? A(e) : "#000000";
+		});
+		b(O, (e) => {
+			if (typeof e == "string" && e.length > 0) {
+				let t = A(e);
+				t !== e && (O.value = t);
+			}
+		});
+		function A(e) {
+			if (!e) return "#000000";
+			let t = e.trim().toLowerCase();
+			return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(t) ? t : /^([0-9a-f]{6})$/.test(t) ? `#${t}` : e;
+		}
+		function j(e) {
+			O.value = A(e);
+		}
+		function M(e) {
+			let t = e.target;
+			j(t?.value ?? "#000000");
+		}
+		function N(e) {
+			j(typeof e == "string" ? e : "");
+		}
+		let P = s(() => Array.isArray(m.swatches) ? m.swatches : []);
+		return (s, m) => (g(), c(v(a), {
+			label: p.label,
+			required: p.required,
+			"hide-label": p.hideLabel,
+			for: p.id,
+			"help-text": p.helpText,
+			errors: p.errors
+		}, {
+			default: x(() => [d("div", {
+				class: "flex items-center gap-2",
+				"data-element-name": p.name ?? void 0
+			}, [
+				f(v(n), null, {
+					default: x(() => [f(v(i), { "as-child": "" }, {
+						default: x(() => [f(v(e), {
+							type: "button",
+							variant: "outline",
+							size: "icon",
+							disabled: p.disabled,
+							"aria-label": "Choose a color",
+							"data-testid": "color-swatch-trigger"
+						}, {
+							default: x(() => [d("span", {
+								class: "size-5 rounded-sm border",
+								style: h({ backgroundColor: k.value })
+							}, null, 4)]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}), f(v(r), { class: "w-auto p-3" }, {
+						default: x(() => [d("div", w, [d("input", {
+							type: "color",
+							value: k.value,
+							disabled: p.disabled || p.readonly,
+							class: "h-10 w-32 cursor-pointer rounded border",
+							"data-testid": "color-native-input",
+							onInput: M
+						}, null, 40, T), P.value.length ? (g(), u("div", E, [(g(!0), u(o, null, _(P.value, (e) => (g(), u("button", {
+							key: e,
+							type: "button",
+							class: "size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+							style: h({ backgroundColor: e }),
+							"aria-label": `Use ${e}`,
+							disabled: p.disabled,
+							"data-testid": "color-swatch",
+							onClick: (t) => j(e)
+						}, null, 12, D))), 128))])) : l("", !0)])]),
+						_: 1
+					})]),
+					_: 1
+				}),
+				f(v(t), {
+					"model-value": k.value,
+					placeholder: p.placeholder ?? "#000000",
+					disabled: p.disabled,
+					readonly: p.readonly,
+					required: p.required,
+					class: "w-32 font-mono uppercase",
+					"data-testid": "color-hex-input",
+					spellcheck: "false",
+					"onUpdate:modelValue": N
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"disabled",
+					"readonly",
+					"required"
+				]),
+				P.value.length ? l("", !0) : (g(), c(v(S), {
+					key: 0,
+					class: "size-4 text-muted-foreground"
+				}))
+			], 8, C)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=ColorPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/picker/ColorPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/ColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven color picker composition. Native `<input type=\"color\">`\n * inside a Popover plus a hex Input fallback. Optional `swatches` render\n * as preset chips. Round-trips a lowercased hex string (with leading\n * `#`).\n *\n *   <ColorPicker v-model=\"color\" label=\"Brand color\" />\n */\nimport { computed, watch } from \"vue\"\nimport { Pipette } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport interface ColorPickerProps {\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  colorFormat?: \"hex\" | \"rgb\" | \"hsl\"\n  swatches?: string[]\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  errors: () => [],\n  swatches: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst currentColor = computed<string>(() => {\n  const raw = model.value\n  if (raw && typeof raw === \"string\") {\n    return normalizeHex(raw)\n  }\n  return \"#000000\"\n})\n\n// Ensure stored value is normalized once the user picks a hex.\nwatch(model, (next) => {\n  if (typeof next === \"string\" && next.length > 0) {\n    const normalized = normalizeHex(next)\n    if (normalized !== next) {\n      model.value = normalized\n    }\n  }\n})\n\nfunction normalizeHex(value: string): string {\n  if (!value) {\n    return \"#000000\"\n  }\n  const trimmed = value.trim().toLowerCase()\n  if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(trimmed)) {\n    return trimmed\n  }\n  if (/^([0-9a-f]{6})$/.test(trimmed)) {\n    return `#${trimmed}`\n  }\n  return value\n}\n\nfunction setColor(next: string): void {\n  model.value = normalizeHex(next)\n}\n\nfunction onNativeInput(event: Event): void {\n  const target = event.target as HTMLInputElement | null\n  setColor(target?.value ?? \"#000000\")\n}\n\nfunction onHexInput(value: string | number | undefined): void {\n  setColor(typeof value === \"string\" ? value : \"\")\n}\n\nconst swatchList = computed<string[]>(() =>\n  Array.isArray(props.swatches) ? props.swatches : [],\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=\"flex items-center gap-2\" :data-element-name=\"name ?? undefined\">\n      <Popover>\n        <PopoverTrigger as-child>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"icon\"\n            :disabled=\"disabled\"\n            aria-label=\"Choose a color\"\n            data-testid=\"color-swatch-trigger\"\n          >\n            <span\n              class=\"size-5 rounded-sm border\"\n              :style=\"{ backgroundColor: currentColor }\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-auto p-3\">\n          <div class=\"flex flex-col gap-3\">\n            <input\n              type=\"color\"\n              :value=\"currentColor\"\n              :disabled=\"disabled || readonly\"\n              class=\"h-10 w-32 cursor-pointer rounded border\"\n              data-testid=\"color-native-input\"\n              @input=\"onNativeInput\"\n            >\n            <div v-if=\"swatchList.length\" class=\"flex flex-wrap gap-2\">\n              <button\n                v-for=\"swatch in swatchList\"\n                :key=\"swatch\"\n                type=\"button\"\n                class=\"size-6 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                :style=\"{ backgroundColor: swatch }\"\n                :aria-label=\"`Use ${swatch}`\"\n                :disabled=\"disabled\"\n                data-testid=\"color-swatch\"\n                @click=\"setColor(swatch)\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n      <Input\n        :model-value=\"currentColor\"\n        :placeholder=\"placeholder ?? '#000000'\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        :required=\"required\"\n        class=\"w-32 font-mono uppercase\"\n        data-testid=\"color-hex-input\"\n        spellcheck=\"false\"\n        @update:model-value=\"onHexInput\"\n      />\n      <Pipette\n        v-if=\"!swatchList.length\"\n        class=\"size-4 text-muted-foreground\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAQ,GAKR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAe,QAAuB;GAC1C,IAAM,IAAM,EAAM;GAIlB,OAHI,KAAO,OAAO,KAAQ,WACjB,EAAa,CAAG,IAElB;EACT,CAAC;EAGD,EAAM,IAAQ,MAAS;GACrB,IAAI,OAAO,KAAS,YAAY,EAAK,SAAS,GAAG;IAC/C,IAAM,IAAa,EAAa,CAAI;IACpC,AAAI,MAAe,MACjB,EAAM,QAAQ;GAElB;EACF,CAAC;EAED,SAAS,EAAa,GAAuB;GAC3C,IAAI,CAAC,GACH,OAAO;GAET,IAAM,IAAU,EAAM,KAAK,EAAE,YAAY;GAOzC,OANI,2CAA2C,KAAK,CAAO,IAClD,IAEL,kBAAkB,KAAK,CAAO,IACzB,IAAI,MAEN;EACT;EAEA,SAAS,EAAS,GAAoB;GACpC,EAAM,QAAQ,EAAa,CAAI;EACjC;EAEA,SAAS,EAAc,GAAoB;GACzC,IAAM,IAAS,EAAM;GACrB,EAAS,GAAQ,SAAS,SAAS;EACrC;EAEA,SAAS,EAAW,GAA0C;GAC5D,EAAS,OAAO,KAAU,WAAW,IAAQ,EAAE;EACjD;EAEA,IAAM,IAAa,QACjB,MAAM,QAAQ,EAAM,QAAQ,IAAI,EAAM,WAAW,CAAC,CACpD;yBAIE,EAmEa,EAAA,CAAA,GAAA;GAlEV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA4DH,CA1DN,EA0DM,OAAA;IA1DD,OAAM;IAA2B,qBAAmB,EAAA,QAAQ,KAAA;;IAC/D,EAyCU,EAAA,CAAA,GAAA,MAAA;sBA1BS,CAdjB,EAciB,EAAA,CAAA,GAAA,EAdD,YAAA,GAAQ,GAAA;uBAab,CAZT,EAYS,EAAA,CAAA,GAAA;OAXP,MAAK;OACL,SAAQ;OACR,MAAK;OACJ,UAAU,EAAA;OACX,cAAW;OACX,eAAY;;wBAKV,CAHF,EAGE,QAAA;QAFA,OAAM;QACL,OAAK,EAAA,EAAA,iBAAqB,EAAA,MAAY,CAAA;;;;;SAI7C,EAwBiB,EAAA,CAAA,GAAA,EAxBD,OAAM,aAAY,GAAA;uBAuB1B,CAtBN,EAsBM,OAtBN,GAsBM,CArBJ,EAOC,SAAA;OANC,MAAK;OACJ,OAAO,EAAA;OACP,UAAU,EAAA,YAAY,EAAA;OACvB,OAAM;OACN,eAAY;OACX,SAAO;uBAEC,EAAA,MAAW,UAAA,EAAA,GAAtB,EAYM,OAZN,GAYM,EAAA,EAAA,EAAA,GAXJ,EAUE,GAAA,MAAA,EATiB,EAAA,QAAV,YADT,EAUE,UAAA;OARC,KAAK;OACN,MAAK;OACL,OAAM;OACL,OAAK,EAAA,EAAA,iBAAqB,EAAM,CAAA;OAChC,cAAU,OAAS;OACnB,UAAU,EAAA;OACX,eAAY;OACX,UAAK,MAAE,EAAS,CAAM;;;;;;IAMjC,EAUE,EAAA,CAAA,GAAA;KATC,eAAa,EAAA;KACb,aAAa,EAAA,eAAW;KACxB,UAAU,EAAA;KACV,UAAU,EAAA;KACV,UAAU,EAAA;KACX,OAAM;KACN,eAAY;KACZ,YAAW;KACV,uBAAoB;;;;;;;;IAGd,EAAA,MAAW,sBAAA,EAAA,GADpB,EAGE,EAAA,CAAA,GAAA;;KADA,OAAM"}

package/dist/components/compositions/elements/picker/DataModelPicker.js

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

package/dist/components/compositions/elements/picker/DataModelPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelPicker.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/DataModelPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven data-model picker composition. Searchable combobox over a\n * list of field-path keys supplied via `dataModelKeys`. Used by the\n * FormBuilder inspector to pick a data-model key; the eventual async\n * lookup service will swap in the same surface area.\n *\n *   <DataModelPicker\n *     v-model=\"key\"\n *     label=\"Field\"\n *     :data-model-keys=\"['first_name', 'last_name', 'email']\"\n *   />\n */\nimport { computed, ref } from \"vue\"\nimport { Code2 } from \"@lucide/vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface DataModelPickerProps {\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  /** Candidate field paths to choose from. */\n  dataModelKeys?: string[]\n}\n\nconst props = withDefaults(defineProps<DataModelPickerProps>(), {\n  errors: () => [],\n  dataModelKeys: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  const keys = Array.isArray(props.dataModelKeys) ? props.dataModelKeys : []\n  if (!q) {\n    return keys.slice(0, 200)\n  }\n  return keys.filter((k) => k.toLowerCase().includes(q)).slice(0, 200)\n})\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\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    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <Code2 class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'data.key.path'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n          class=\"font-mono text-sm\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No fields match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"key in filtered\" :key=\"key\" :value=\"key\">\n          <ComboboxItemIndicator />\n          <span class=\"font-mono\">{{ key }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/picker/DataModelPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,102 @@
+import e from "../../../ui/combobox/Combobox.js";
+import t from "../../../ui/combobox/ComboboxAnchor.js";
+import n from "../../../ui/combobox/ComboboxContent.js";
+import r from "../../../ui/combobox/ComboboxEmpty.js";
+import i from "../../../ui/combobox/ComboboxInput.js";
+import a from "../../../ui/combobox/ComboboxItem.js";
+import o from "../../../ui/combobox/ComboboxItemIndicator.js";
+import "../../../ui/combobox/index.js";
+import s from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as c, computed as l, createBlock as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useModel as S, withCtx as C } from "vue";
+import { Code2 as w } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/DataModelPicker.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "font-mono" }, E = /* @__PURE__ */ h({
+	__name: "DataModelPicker",
+	props: /* @__PURE__ */ g({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		dataModelKeys: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(h) {
+		let g = h, E = S(h, "modelValue"), D = v(""), O = l(() => {
+			let e = D.value.trim().toLowerCase(), t = Array.isArray(g.dataModelKeys) ? g.dataModelKeys : [];
+			return e ? t.filter((t) => t.toLowerCase().includes(e)).slice(0, 200) : t.slice(0, 200);
+		});
+		function k(e) {
+			E.value = typeof e == "string" ? e : "";
+		}
+		return (l, g) => (_(), u(x(s), {
+			label: h.label,
+			required: h.required,
+			"hide-label": h.hideLabel,
+			for: h.id,
+			"help-text": h.helpText,
+			errors: h.errors
+		}, {
+			default: C(() => [m(x(e), {
+				"model-value": E.value ?? "",
+				disabled: h.disabled,
+				"onUpdate:modelValue": k
+			}, {
+				default: C(() => [m(x(t), {
+					"data-element-name": h.name ?? void 0,
+					"data-readonly": h.readonly || void 0
+				}, {
+					default: C(() => [m(x(w), { class: "mr-2 size-4 shrink-0 opacity-50" }), m(x(i), {
+						modelValue: D.value,
+						"onUpdate:modelValue": g[0] ||= (e) => D.value = e,
+						placeholder: h.placeholder ?? "data.key.path",
+						readonly: h.readonly,
+						required: h.required,
+						class: "font-mono text-sm"
+					}, null, 8, [
+						"modelValue",
+						"placeholder",
+						"readonly",
+						"required"
+					])]),
+					_: 1
+				}, 8, ["data-element-name", "data-readonly"]), m(x(n), null, {
+					default: C(() => [m(x(r), null, {
+						default: C(() => [...g[1] ||= [p("No fields match.", -1)]]),
+						_: 1
+					}), (_(!0), d(c, null, y(O.value, (e) => (_(), u(x(a), {
+						key: e,
+						value: e
+					}, {
+						default: C(() => [m(x(o)), f("span", T, b(e), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=DataModelPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/picker/DataModelPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/DataModelPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven data-model picker composition. Searchable combobox over a\n * list of field-path keys supplied via `dataModelKeys`. Used by the\n * FormBuilder inspector to pick a data-model key; the eventual async\n * lookup service will swap in the same surface area.\n *\n *   <DataModelPicker\n *     v-model=\"key\"\n *     label=\"Field\"\n *     :data-model-keys=\"['first_name', 'last_name', 'email']\"\n *   />\n */\nimport { computed, ref } from \"vue\"\nimport { Code2 } from \"@lucide/vue\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface DataModelPickerProps {\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  /** Candidate field paths to choose from. */\n  dataModelKeys?: string[]\n}\n\nconst props = withDefaults(defineProps<DataModelPickerProps>(), {\n  errors: () => [],\n  dataModelKeys: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst query = ref<string>(\"\")\n\nconst filtered = computed<string[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  const keys = Array.isArray(props.dataModelKeys) ? props.dataModelKeys : []\n  if (!q) {\n    return keys.slice(0, 200)\n  }\n  return keys.filter((k) => k.toLowerCase().includes(q)).slice(0, 200)\n})\n\nfunction onSelect(value: unknown): void {\n  model.value = typeof value === \"string\" ? value : \"\"\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    <Combobox\n      :model-value=\"model ?? ''\"\n      :disabled=\"disabled\"\n      @update:model-value=\"onSelect\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :data-readonly=\"readonly || undefined\"\n      >\n        <Code2 class=\"mr-2 size-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'data.key.path'\"\n          :readonly=\"readonly\"\n          :required=\"required\"\n          class=\"font-mono text-sm\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No fields match.</ComboboxEmpty>\n        <ComboboxItem v-for=\"key in filtered\" :key=\"key\" :value=\"key\">\n          <ComboboxItemIndicator />\n          <span class=\"font-mono\">{{ key }}</span>\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAKR,IAAQ,EAA0B,GAAC,YAAY,GAE/C,IAAQ,EAAY,EAAE,GAEtB,IAAW,QAAyB;GACxC,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY,GACnC,IAAO,MAAM,QAAQ,EAAM,aAAa,IAAI,EAAM,gBAAgB,CAAC;GAIzE,OAHK,IAGE,EAAK,QAAQ,MAAM,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,IAF1D,EAAK,MAAM,GAAG,GAAG;EAG5B,CAAC;EAED,SAAS,EAAS,GAAsB;GACtC,EAAM,QAAQ,OAAO,KAAU,WAAW,IAAQ;EACpD;yBAIE,EAkCa,EAAA,CAAA,GAAA;GAjCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA2BE,CAzBX,EAyBW,EAAA,CAAA,GAAA;IAxBR,eAAa,EAAA,SAAK;IAClB,UAAU,EAAA;IACV,uBAAoB;;qBAcJ,CAZjB,EAYiB,EAAA,CAAA,GAAA;KAXd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,iBAAe,EAAA,YAAY,KAAA;;sBAEqB,CAAjD,EAAiD,EAAA,CAAA,GAAA,EAA1C,OAAM,kCAAiC,CAAA,GAC9C,EAME,EAAA,CAAA,GAAA;kBALS,EAAA;+CAAK,QAAA;MACb,aAAa,EAAA,eAAW;MACxB,UAAU,EAAA;MACV,UAAU,EAAA;MACX,OAAM;;;;;;;;mDAGV,EAMkB,EAAA,CAAA,GAAA,MAAA;sBAL+B,CAA/C,EAA+C,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAhB,oBAAgB,EAAA,CAAA,CAAA,CAAA;;iBAC/B,EAGe,GAAA,MAAA,EAHa,EAAA,QAAP,YAArB,EAGe,EAAA,CAAA,GAAA;MAH6B;MAAM,OAAO;;uBAC9B,CAAzB,EAAyB,EAAA,CAAA,CAAA,GACzB,EAAwC,QAAxC,GAAwC,EAAb,CAAG,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/picker/DatePicker.js

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

package/dist/components/compositions/elements/picker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/DatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven date picker composition. Popover trigger Button shows the\n * formatted current date; the popover hosts the shadcn `Calendar`.\n * Values round-trip as ISO date strings (`yyyy-MM-dd` by default).\n *\n *   <DatePicker v-model=\"startsAt\" label=\"Starts at\" />\n *\n * Self-contained — no Pinia / store coupling. Composes `FieldFrame` for\n * label / helpText / errors chrome.\n */\nimport { computed, ref } from \"vue\"\nimport { Calendar as CalendarIcon } from \"@lucide/vue\"\nimport {\n  CalendarDate,\n  parseDate,\n  type DateValue,\n} from \"@internationalized/date\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DatePickerProps {\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  /** ISO date string, e.g. \"2024-06-10\" */\n  minDate?: string\n  /** ISO date string, e.g. \"2024-06-25\" */\n  maxDate?: string\n  /** Display format. Default `yyyy-MM-dd`. */\n  format?: string\n}\n\nconst props = withDefaults(defineProps<DatePickerProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string | null>(\"modelValue\")\n\nconst open = ref(false)\n\nconst calendarValue = computed<DateValue | undefined>(() => {\n  const iso = model.value\n  if (!iso) {\n    return undefined\n  }\n  return safeParseDate(iso)\n})\n\nconst min = computed<DateValue | undefined>(() =>\n  props.minDate ? safeParseDate(props.minDate) : undefined,\n)\n\nconst max = computed<DateValue | undefined>(() =>\n  props.maxDate ? safeParseDate(props.maxDate) : undefined,\n)\n\nconst displayValue = computed<string>(() => {\n  const iso = model.value\n  if (!iso) {\n    return \"\"\n  }\n  return formatDate(iso, props.format)\n})\n\nfunction safeParseDate(value: string): DateValue | undefined {\n  try {\n    // Accept full ISO datetime (\"2024-06-15T00:00:00Z\") or date-only.\n    const dateOnly = value.includes(\"T\") ? value.slice(0, 10) : value\n    return parseDate(dateOnly)\n  } catch {\n    return undefined\n  }\n}\n\nfunction formatDate(iso: string, format?: string): string {\n  const parsed = safeParseDate(iso)\n  if (!parsed) {\n    return iso\n  }\n  if (!format || format === \"yyyy-MM-dd\") {\n    return parsed.toString()\n  }\n  const date = new Date(parsed.year, parsed.month - 1, parsed.day)\n  try {\n    return new Intl.DateTimeFormat(undefined, {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"2-digit\",\n    }).format(date)\n  } catch {\n    return parsed.toString()\n  }\n}\n\nfunction onSelect(value: DateValue | undefined): void {\n  if (!value) {\n    model.value = null\n    return\n  }\n  const calendar =\n    value instanceof CalendarDate\n      ? value\n      : new CalendarDate(value.year, value.month, value.day)\n  model.value = calendar.toString()\n  open.value = false\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    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          :disabled=\"disabled\"\n          :class=\"\n            cn(\n              'w-full justify-start text-left font-normal',\n              !model && 'text-muted-foreground',\n            )\n          \"\n          :data-element-name=\"name ?? undefined\"\n          :data-readonly=\"readonly || undefined\"\n        >\n          <CalendarIcon class=\"mr-2 size-4\" />\n          <span>{{ displayValue || placeholder || \"Pick a date\" }}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\">\n        <Calendar\n          :model-value=\"calendarValue\"\n          :min-value=\"min\"\n          :max-value=\"max\"\n          :placeholder=\"calendarValue ?? min ?? max\"\n          @update:model-value=\"onSelect\"\n        />\n      </PopoverContent>\n    </Popover>\n  </FieldFrame>\n</template>\n"],"mappings":""}