@orvui/vue 0.0.0-stage → 0.1.1

package/dist/approval-card-BUm2vZie.js

@@ -0,0 +1,417 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { r as t, u as n } from "./ease-rIvCM4O3.js";
+import { t as r } from "./utils-DIrLOK2M.js";
+import { a as i } from "./button-CDD333Yn.js";
+import { t as a } from "./input-B17D4VP0.js";
+import { t as o } from "./Checkbox-yoCQLa6d.js";
+import { n as s, t as c } from "./radio-pBV2VkJS.js";
+import { n as l } from "./action-swap-CIPNHnoQ.js";
+import { r as u, t as d } from "./shared-DAEawhBJ.js";
+import { t as ee } from "./AgentDisclosure-BaLK1NwF.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, getCurrentInstance as te, normalizeClass as x, onBeforeUnmount as ne, openBlock as S, renderList as C, renderSlot as re, toDisplayString as w, unref as T, watch as ie, withCtx as E } from "vue";
+import { AnimatePresence as ae, motion as D } from "motion-v";
+import { ArrowLeft as oe, ArrowRight as O, Check as se, CircleHelp as ce, LoaderCircle as k, MessageSquareText as le, X as A } from "lucide-vue-next";
+// src/agents/approval-card/src/QuestionOptions.vue?vue&type=script&setup=true&lang.ts
+var j = { class: "mt-3" }, M = {
+	key: 0,
+	class: "grid gap-0.5"
+}, ue = /* @__PURE__ */ b({
+	__name: "QuestionOptions",
+	props: {
+		question: {},
+		answer: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["change", "singleSelect"],
+	setup(e, { emit: t }) {
+		let n = e, i = t;
+		function l(e, t) {
+			let r = new Set(n.answer.selected);
+			t ? r.add(e) : r.delete(e), i("change", {
+				...n.answer,
+				selected: [...r]
+			});
+		}
+		function u(e) {
+			i("change", {
+				selected: [e],
+				custom: ""
+			}), i("singleSelect");
+		}
+		function d(e) {
+			i("change", {
+				selected: n.question.multiple ? n.answer.selected : [],
+				custom: e
+			});
+		}
+		return (t, n) => (S(), g("div", j, [e.question.options?.length ? (S(), g(f, { key: 0 }, [e.question.multiple ? (S(), g("div", M, [(S(!0), g(f, null, C(e.question.options, (t) => (S(), m(T(o), {
+			key: t.value,
+			"model-value": e.answer.selected.includes(t.value),
+			disabled: e.disabled || t.disabled,
+			label: t.label,
+			description: t.description,
+			"onUpdate:modelValue": (e) => l(t.value, e),
+			class: "min-h-9 rounded-lg px-1.5 py-1"
+		}, null, 8, [
+			"model-value",
+			"disabled",
+			"label",
+			"description",
+			"onUpdate:modelValue"
+		]))), 128))])) : (S(), m(T(s), {
+			key: 1,
+			"model-value": e.answer.selected[0] ?? "",
+			"onUpdate:modelValue": u,
+			class: "gap-0.5"
+		}, {
+			default: E(() => [(S(!0), g(f, null, C(e.question.options, (t) => (S(), m(T(c), {
+				key: t.value,
+				value: t.value,
+				label: t.label,
+				description: t.description,
+				disabled: e.disabled || t.disabled,
+				class: "min-h-9 rounded-lg px-1.5 py-1"
+			}, null, 8, [
+				"value",
+				"label",
+				"description",
+				"disabled"
+			]))), 128))]),
+			_: 1
+		}, 8, ["model-value"]))], 64)) : h("", !0), e.question.allowCustom ? (S(), m(T(a), {
+			key: 1,
+			"model-value": e.answer.custom ?? "",
+			disabled: e.disabled,
+			placeholder: e.question.customPlaceholder ?? "Add another response…",
+			"aria-label": "Custom answer",
+			"onUpdate:modelValue": d,
+			class: x(T(r)("p-0.5", e.question.options?.length && "mt-1.5")),
+			"class-names": {
+				field: "h-10 rounded-xl border-0 bg-background/70 focus-within:bg-background",
+				input: "px-3 text-sm"
+			}
+		}, null, 8, [
+			"model-value",
+			"disabled",
+			"placeholder",
+			"class"
+		])) : h("", !0)]));
+	}
+}), de = ["data-state", "aria-busy"], fe = { class: "flex items-start gap-3" }, pe = { class: "min-w-0 flex-1" }, N = { class: "flex min-w-0 items-start gap-3" }, P = { class: "min-w-0 flex-1 text-base font-medium leading-5 text-foreground" }, F = {
+	key: 0,
+	class: "shrink-0 text-xs tabular-nums text-muted-foreground/65"
+}, I = {
+	key: 0,
+	class: "mt-1 leading-5 text-muted-foreground"
+}, L = { key: 1 }, R = {
+	key: 0,
+	class: "mt-1 leading-5 text-muted-foreground"
+}, z = {
+	key: 1,
+	class: "mt-3"
+}, B = {
+	key: 2,
+	class: "mt-4 flex items-center gap-3"
+}, me = { class: "flex gap-1.5" }, he = { class: "sr-only" }, V = {
+	key: 3,
+	class: "mt-4 flex flex-wrap items-center gap-2"
+}, ge = {
+	key: 0,
+	class: "mt-1 text-sm text-muted-foreground"
+}, H = /* @__PURE__ */ b({
+	__name: "ApprovalCard",
+	props: {
+		title: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Approval required"
+		},
+		description: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		questions: { default: () => [] },
+		status: { default: "pending" },
+		answers: {},
+		defaultAnswers: { default: () => ({}) },
+		step: {},
+		defaultStep: { default: 0 },
+		approveLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Approve"
+		},
+		submitLabel: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: "Submit response"
+		},
+		result: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			default: void 0
+		}
+	},
+	emits: [
+		"update:answers",
+		"answersChange",
+		"update:step",
+		"stepChange",
+		"submit",
+		"approve",
+		"reject",
+		"requestChanges",
+		"dismiss"
+	],
+	setup(a, { emit: o }) {
+		let s = a, c = o, b = u(() => s.answers, s.defaultAnswers, (e) => {
+			c("update:answers", e), c("answersChange", e);
+		}), j = u(() => s.step, s.defaultStep, (e) => {
+			c("update:step", e), c("stepChange", e);
+		}), M = p(() => Math.max(0, Math.min(j.value, s.questions.length - 1))), H = p(() => s.questions[M.value]), U = p(() => H.value ? b.value[H.value.id] ?? {
+			selected: [],
+			custom: ""
+		} : {
+			selected: [],
+			custom: ""
+		}), W = p(() => s.status === "submitting"), G = p(() => ["pending", "submitting"].includes(s.status)), K = p(() => U.value.selected.length > 0 || !!U.value.custom?.trim()), q = e(), _e = te(), J = (e) => !!_e?.vnode.props?.[e], Y = p(() => ({
+			pending: "Input required",
+			submitting: "Submitting",
+			approved: "Approved",
+			rejected: "Rejected",
+			"changes-requested": "Changes requested",
+			answered: "Response submitted"
+		})[s.status]), X = p(() => ["approved", "answered"].includes(s.status)), ve = p(() => X.value ? "emerald" : s.status === "rejected" ? "rose" : s.status === "changes-requested" ? "amber" : "muted"), ye = {
+			emerald: "text-emerald-600 dark:text-emerald-400",
+			rose: "text-rose-600 dark:text-rose-400",
+			amber: "text-amber-600 dark:text-amber-400",
+			muted: "text-muted-foreground"
+		}, be = {
+			amber: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400",
+			blue: "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400",
+			emerald: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+			rose: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
+		}, xe = p(() => be[s.status === "pending" || s.status === "changes-requested" ? "amber" : W.value ? "blue" : X.value ? "emerald" : "rose"]), Z;
+		function Q() {
+			Z !== void 0 && clearTimeout(Z), Z = void 0;
+		}
+		function $(e) {
+			Q(), j.value = e;
+		}
+		function Se(e) {
+			H.value && (b.value = {
+				...b.value,
+				[H.value.id]: e
+			});
+		}
+		function Ce() {
+			K.value && !W.value && (M.value + 1 < s.questions.length ? $(M.value + 1) : c("submit", b.value));
+		}
+		function we() {
+			Q();
+			let e = H.value, t = M.value;
+			!e || e.multiple || e.autoAdvance === !1 || t + 1 >= s.questions.length || W.value || (Z = setTimeout(() => {
+				Z = void 0, s.status === "pending" && M.value === t && H.value?.id === e.id && $(t + 1);
+			}, 240));
+		}
+		return ie(() => s.status, () => {
+			s.status !== "pending" && Q();
+		}), ne(Q), (e, o) => (S(), g("div", {
+			"data-state": a.status,
+			"aria-busy": W.value,
+			class: "w-full overflow-hidden rounded-2xl bg-muted p-4 text-sm"
+		}, [_("div", fe, [_("span", {
+			"aria-hidden": "true",
+			class: x(T(r)("grid size-5 shrink-0 place-items-center text-muted-foreground", ye[ve.value]))
+		}, [W.value ? (S(), m(T(k), {
+			key: 0,
+			class: x(T(r)("size-4", !T(q) && "animate-spin"))
+		}, null, 8, ["class"])) : G.value && a.questions.length ? (S(), m(T(ce), {
+			key: 1,
+			class: "size-4"
+		})) : G.value ? (S(), m(T(le), {
+			key: 2,
+			class: "size-4"
+		})) : a.status === "rejected" ? (S(), m(T(A), {
+			key: 3,
+			class: "size-4"
+		})) : (S(), m(T(se), {
+			key: 4,
+			class: "size-4"
+		}))], 2), _("div", pe, [
+			_("div", N, [
+				_("h3", P, [y(T(l), { value: H.value?.id ?? String(a.status) }, {
+					default: E(() => [y(T(d), { node: H.value?.title ?? a.title }, null, 8, ["node"])]),
+					_: 1
+				}, 8, ["value"])]),
+				a.questions.length && G.value ? (S(), g(f, { key: 0 }, [a.questions.length > 1 ? (S(), g("span", F, w(M.value + 1) + "/" + w(a.questions.length), 1)) : h("", !0)], 64)) : (S(), g("span", {
+					key: 1,
+					class: x(T(r)("shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors", xe.value))
+				}, w(Y.value), 3)),
+				J("onDismiss") ? (S(), g("button", {
+					key: 2,
+					type: "button",
+					"aria-label": "Dismiss",
+					onClick: o[0] ||= (e) => c("dismiss"),
+					class: "grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+				}, [y(T(A), { class: "size-4" })])) : h("", !0)
+			]),
+			y(ee, { open: G.value }, {
+				default: E(() => [H.value ? (S(), m(T(ae), {
+					key: 0,
+					initial: !1,
+					mode: "wait"
+				}, {
+					default: E(() => [(S(), m(T(D).div, {
+						key: H.value.id,
+						initial: T(q) ? { opacity: 1 } : {
+							opacity: 0,
+							x: 8
+						},
+						animate: {
+							opacity: 1,
+							x: 0
+						},
+						exit: T(q) ? { opacity: 0 } : {
+							opacity: 0,
+							x: -6
+						},
+						transition: {
+							duration: T(q) ? 0 : .2,
+							ease: T(t)
+						}
+					}, {
+						default: E(() => [H.value.description ? (S(), g("p", I, [y(T(d), { node: H.value.description }, null, 8, ["node"])])) : h("", !0), y(ue, {
+							question: H.value,
+							answer: U.value,
+							disabled: W.value,
+							onChange: Se,
+							onSingleSelect: we
+						}, null, 8, [
+							"question",
+							"answer",
+							"disabled"
+						])]),
+						_: 1
+					}, 8, [
+						"initial",
+						"exit",
+						"transition"
+					]))]),
+					_: 1
+				})) : (S(), g("div", L, [a.description ? (S(), g("p", R, [y(T(d), { node: a.description }, null, 8, ["node"])])) : h("", !0), e.$slots.default ? (S(), g("div", z, [re(e.$slots, "default")])) : h("", !0)])), a.questions.length ? (S(), g("div", B, [a.questions.length > 1 ? (S(), g(f, { key: 0 }, [y(T(i), {
+					variant: "ghost",
+					size: "icon",
+					"aria-label": "Previous question",
+					disabled: W.value || M.value === 0,
+					onClick: o[1] ||= (e) => $(M.value - 1),
+					class: "rounded-full"
+				}, {
+					default: E(() => [y(T(oe), { class: "size-4" })]),
+					_: 1
+				}, 8, ["disabled"]), _("span", me, [_("span", he, "Question " + w(M.value + 1) + " of " + w(a.questions.length), 1), (S(!0), g(f, null, C(a.questions, (e, t) => (S(), m(T(D).span, {
+					key: e.id,
+					"aria-hidden": "true",
+					initial: {
+						scale: t === M.value ? 1 : .75,
+						opacity: t <= M.value ? 1 : .35
+					},
+					animate: {
+						scale: t === M.value ? 1 : .75,
+						opacity: t <= M.value ? 1 : .35
+					},
+					transition: T(q) ? { duration: 0 } : T(n),
+					class: "size-1.5 rounded-full bg-foreground"
+				}, null, 8, [
+					"initial",
+					"animate",
+					"transition"
+				]))), 128))])], 64)) : h("", !0), y(T(i), {
+					size: M.value === a.questions.length - 1 ? "sm" : "icon",
+					"aria-label": M.value === a.questions.length - 1 ? "Submit response" : "Next question",
+					disabled: W.value || !K.value,
+					onClick: Ce,
+					class: "ml-auto rounded-full"
+				}, {
+					default: E(() => [W.value ? (S(), m(T(k), {
+						key: 0,
+						class: x(T(r)("size-4", !T(q) && "animate-spin"))
+					}, null, 8, ["class"])) : M.value === a.questions.length - 1 ? (S(), g(f, { key: 1 }, [y(T(d), { node: a.submitLabel }, null, 8, ["node"]), y(T(O), { class: "size-3.5" })], 64)) : (S(), m(T(O), {
+						key: 2,
+						class: "size-4"
+					}))]),
+					_: 1
+				}, 8, [
+					"size",
+					"aria-label",
+					"disabled"
+				])])) : (S(), g("div", V, [
+					y(T(i), {
+						size: "sm",
+						disabled: W.value,
+						onClick: o[2] ||= (e) => c("approve"),
+						class: "rounded-full"
+					}, {
+						default: E(() => [y(T(d), { node: a.approveLabel }, null, 8, ["node"])]),
+						_: 1
+					}, 8, ["disabled"]),
+					J("onRequestChanges") ? (S(), m(T(i), {
+						key: 0,
+						variant: "secondary",
+						size: "sm",
+						disabled: W.value,
+						onClick: o[3] ||= (e) => c("requestChanges"),
+						class: "rounded-full"
+					}, {
+						default: E(() => [...o[5] ||= [v("Request changes", -1)]]),
+						_: 1
+					}, 8, ["disabled"])) : h("", !0),
+					J("onReject") ? (S(), m(T(i), {
+						key: 1,
+						variant: "ghost",
+						size: "sm",
+						disabled: W.value,
+						onClick: o[4] ||= (e) => c("reject"),
+						class: "rounded-full text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400"
+					}, {
+						default: E(() => [...o[6] ||= [v("Reject", -1)]]),
+						_: 1
+					}, 8, ["disabled"])) : h("", !0)
+				]))]),
+				_: 3
+			}, 8, ["open"]),
+			G.value ? h("", !0) : (S(), g("p", ge, [y(T(d), { node: a.result ?? Y.value }, null, 8, ["node"])]))
+		])])], 8, de));
+	}
+});
+export { H as t };
+
+//# sourceMappingURL=approval-card-BUm2vZie.js.map

package/dist/approval-card-BUm2vZie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"approval-card-BUm2vZie.js","names":["_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_unref","Checkbox","RadioGroup","_withCtx","RadioGroupItem","_createCommentVNode","Input","_normalizeClass","_sfc_main","$slots","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_unref","_createBlock","_createVNode","ActionSwapRollText","_withCtx","_Fragment","_toDisplayString","_createCommentVNode","AgentDisclosure","QuestionOptions","_renderSlot","Button","_renderList","_createTextVNode","_sfc_main","useReducedMotion","EASE_OUT","SPRING_SWAP","cn","Button_default","Input_default","Checkbox_default","RadioGroup_default","RadioGroupItem_default","ActionSwapRollText_default","useControllable","RenderNode","AgentDisclosure_default","_hoisted_1$1","_hoisted_2$1","QuestionOptions_default","defineComponent","__emit","props","__props","emit","multiple","values","checked","value","single","custom","openBlock","createElementBlock","Fragment","renderList","createBlock","unref","option","$event","withCtx","createCommentVNode","normalizeClass","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","ApprovalCard_default","responses","position","cursor","computed","currentQuestion","currentAnswer","busy","interactive","valid","reduced","instance","getCurrentInstance","has","event","label","successful","tone","tones","badges","badge","pending","cancelAdvance","go","answer","advance","automatic","question","starting","watch","onBeforeUnmount","createElementVNode","LoaderCircle","CircleHelp","MessageSquareText","X","Check","createVNode","toDisplayString","_cache","AnimatePresence","motion","_ctx","renderSlot","ArrowLeft","item","index","ArrowRight","createTextVNode"],"sources":["../src/agents/approval-card/src/QuestionOptions.vue","../src/agents/approval-card/src/QuestionOptions.vue","../src/agents/approval-card/src/ApprovalCard.vue","../src/agents/approval-card/src/ApprovalCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Checkbox } from \"../../../motion/checkbox\";\nimport { RadioGroup, RadioGroupItem } from \"../../../motion/radio\";\nimport { Input } from \"../../../motion/input\";\nimport { cn } from \"../../../lib/utils\";\nimport type { ApprovalCardAnswer, ApprovalCardQuestion } from \"./types\";\nconst props = defineProps<{\n  question: ApprovalCardQuestion;\n  answer: ApprovalCardAnswer;\n  disabled: boolean;\n}>();\nconst emit = defineEmits<{\n  change: [answer: ApprovalCardAnswer];\n  singleSelect: [];\n}>();\nfunction multiple(value: string, checked: boolean) {\n  const values = new Set(props.answer.selected);\n  if (checked) values.add(value);\n  else values.delete(value);\n  emit(\"change\", { ...props.answer, selected: [...values] });\n}\nfunction single(value: string) {\n  emit(\"change\", { selected: [value], custom: \"\" });\n  emit(\"singleSelect\");\n}\nfunction custom(value: string) {\n  emit(\"change\", {\n    selected: props.question.multiple ? props.answer.selected : [],\n    custom: value,\n  });\n}\n</script>\n<template>\n  <div class=\"mt-3\">\n    <template v-if=\"question.options?.length\">\n      <div v-if=\"question.multiple\" class=\"grid gap-0.5\">\n        <Checkbox\n          v-for=\"option in question.options\"\n          :key=\"option.value\"\n          :model-value=\"answer.selected.includes(option.value)\"\n          :disabled=\"disabled || option.disabled\"\n          :label=\"option.label\"\n          :description=\"option.description\"\n          @update:model-value=\"multiple(option.value, $event)\"\n          class=\"min-h-9 rounded-lg px-1.5 py-1\"\n        />\n      </div>\n      <RadioGroup\n        v-else\n        :model-value=\"answer.selected[0] ?? ''\"\n        @update:model-value=\"single\"\n        class=\"gap-0.5\"\n        ><RadioGroupItem\n          v-for=\"option in question.options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n          :label=\"option.label\"\n          :description=\"option.description\"\n          :disabled=\"disabled || option.disabled\"\n          class=\"min-h-9 rounded-lg px-1.5 py-1\"\n      /></RadioGroup> </template\n    ><Input\n      v-if=\"question.allowCustom\"\n      :model-value=\"answer.custom ?? ''\"\n      :disabled=\"disabled\"\n      :placeholder=\"question.customPlaceholder ?? 'Add another response…'\"\n      aria-label=\"Custom answer\"\n      @update:model-value=\"custom\"\n      :class=\"cn('p-0.5', question.options?.length && 'mt-1.5')\"\n      :class-names=\"{\n        field:\n          'h-10 rounded-xl border-0 bg-background/70 focus-within:bg-background',\n        input: 'px-3 text-sm',\n      }\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Checkbox } from \"../../../motion/checkbox\";\nimport { RadioGroup, RadioGroupItem } from \"../../../motion/radio\";\nimport { Input } from \"../../../motion/input\";\nimport { cn } from \"../../../lib/utils\";\nimport type { ApprovalCardAnswer, ApprovalCardQuestion } from \"./types\";\nconst props = defineProps<{\n  question: ApprovalCardQuestion;\n  answer: ApprovalCardAnswer;\n  disabled: boolean;\n}>();\nconst emit = defineEmits<{\n  change: [answer: ApprovalCardAnswer];\n  singleSelect: [];\n}>();\nfunction multiple(value: string, checked: boolean) {\n  const values = new Set(props.answer.selected);\n  if (checked) values.add(value);\n  else values.delete(value);\n  emit(\"change\", { ...props.answer, selected: [...values] });\n}\nfunction single(value: string) {\n  emit(\"change\", { selected: [value], custom: \"\" });\n  emit(\"singleSelect\");\n}\nfunction custom(value: string) {\n  emit(\"change\", {\n    selected: props.question.multiple ? props.answer.selected : [],\n    custom: value,\n  });\n}\n</script>\n<template>\n  <div class=\"mt-3\">\n    <template v-if=\"question.options?.length\">\n      <div v-if=\"question.multiple\" class=\"grid gap-0.5\">\n        <Checkbox\n          v-for=\"option in question.options\"\n          :key=\"option.value\"\n          :model-value=\"answer.selected.includes(option.value)\"\n          :disabled=\"disabled || option.disabled\"\n          :label=\"option.label\"\n          :description=\"option.description\"\n          @update:model-value=\"multiple(option.value, $event)\"\n          class=\"min-h-9 rounded-lg px-1.5 py-1\"\n        />\n      </div>\n      <RadioGroup\n        v-else\n        :model-value=\"answer.selected[0] ?? ''\"\n        @update:model-value=\"single\"\n        class=\"gap-0.5\"\n        ><RadioGroupItem\n          v-for=\"option in question.options\"\n          :key=\"option.value\"\n          :value=\"option.value\"\n          :label=\"option.label\"\n          :description=\"option.description\"\n          :disabled=\"disabled || option.disabled\"\n          class=\"min-h-9 rounded-lg px-1.5 py-1\"\n      /></RadioGroup> </template\n    ><Input\n      v-if=\"question.allowCustom\"\n      :model-value=\"answer.custom ?? ''\"\n      :disabled=\"disabled\"\n      :placeholder=\"question.customPlaceholder ?? 'Add another response…'\"\n      aria-label=\"Custom answer\"\n      @update:model-value=\"custom\"\n      :class=\"cn('p-0.5', question.options?.length && 'mt-1.5')\"\n      :class-names=\"{\n        field:\n          'h-10 rounded-xl border-0 bg-background/70 focus-within:bg-background',\n        input: 'px-3 text-sm',\n      }\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  computed,\n  getCurrentInstance,\n  onBeforeUnmount,\n  watch,\n  type VNodeChild,\n} from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Check,\n  CircleHelp,\n  LoaderCircle,\n  MessageSquareText,\n  X,\n} from \"lucide-vue-next\";\nimport { Button } from \"../../../motion/button\";\nimport { ActionSwapRollText } from \"../../../motion/action-swap\";\nimport { EASE_OUT, SPRING_SWAP } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { RenderNode, useControllable, type Content } from \"../../shared\";\nimport AgentDisclosure from \"../../AgentDisclosure.vue\";\nimport QuestionOptions from \"./QuestionOptions.vue\";\nimport type {\n  ApprovalCardAnswer,\n  ApprovalCardAnswers,\n  ApprovalCardQuestion,\n  ApprovalCardStatus,\n} from \"./types\";\ndefineSlots<{ default?: () => VNodeChild }>();\nconst props = withDefaults(\n  defineProps<{\n    title?: Content;\n    description?: Content;\n    questions?: ApprovalCardQuestion[];\n    status?: ApprovalCardStatus;\n    answers?: ApprovalCardAnswers;\n    defaultAnswers?: ApprovalCardAnswers;\n    step?: number;\n    defaultStep?: number;\n    approveLabel?: Content;\n    submitLabel?: Content;\n    result?: Content;\n  }>(),\n  {\n    title: \"Approval required\",\n    questions: () => [],\n    status: \"pending\",\n    defaultAnswers: () => ({}),\n    defaultStep: 0,\n    approveLabel: \"Approve\",\n    submitLabel: \"Submit response\",\n    result: undefined,\n  },\n);\nconst emit = defineEmits<{\n  \"update:answers\": [answers: ApprovalCardAnswers];\n  answersChange: [answers: ApprovalCardAnswers];\n  \"update:step\": [step: number];\n  stepChange: [step: number];\n  submit: [answers: ApprovalCardAnswers];\n  approve: [];\n  reject: [];\n  requestChanges: [];\n  dismiss: [];\n}>();\nconst responses = useControllable(\n  () => props.answers,\n  props.defaultAnswers,\n  (value) => {\n    emit(\"update:answers\", value);\n    emit(\"answersChange\", value);\n  },\n);\nconst position = useControllable(\n  () => props.step,\n  props.defaultStep,\n  (value) => {\n    emit(\"update:step\", value);\n    emit(\"stepChange\", value);\n  },\n);\nconst cursor = computed(() =>\n  Math.max(0, Math.min(position.value, props.questions.length - 1)),\n);\nconst currentQuestion = computed(() => props.questions[cursor.value]);\nconst currentAnswer = computed<ApprovalCardAnswer>(() =>\n  currentQuestion.value\n    ? (responses.value[currentQuestion.value.id] ?? {\n        selected: [],\n        custom: \"\",\n      })\n    : { selected: [], custom: \"\" },\n);\nconst busy = computed(() => props.status === \"submitting\");\nconst interactive = computed(() =>\n  [\"pending\", \"submitting\"].includes(props.status),\n);\nconst valid = computed(\n  () =>\n    currentAnswer.value.selected.length > 0 ||\n    !!currentAnswer.value.custom?.trim(),\n);\nconst reduced = useReducedMotion();\nconst instance = getCurrentInstance();\nconst has = (event: string) => !!instance?.vnode.props?.[event];\nconst label = computed(\n  () =>\n    ({\n      pending: \"Input required\",\n      submitting: \"Submitting\",\n      approved: \"Approved\",\n      rejected: \"Rejected\",\n      \"changes-requested\": \"Changes requested\",\n      answered: \"Response submitted\",\n    })[props.status],\n);\nconst successful = computed(() =>\n  [\"approved\", \"answered\"].includes(props.status),\n);\nconst tone = computed(() =>\n  successful.value\n    ? \"emerald\"\n    : props.status === \"rejected\"\n      ? \"rose\"\n      : props.status === \"changes-requested\"\n        ? \"amber\"\n        : \"muted\",\n);\nconst tones = {\n  emerald: \"text-emerald-600 dark:text-emerald-400\",\n  rose: \"text-rose-600 dark:text-rose-400\",\n  amber: \"text-amber-600 dark:text-amber-400\",\n  muted: \"text-muted-foreground\",\n};\nconst badges = {\n  amber:\n    \"border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400\",\n  blue: \"border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400\",\n  emerald:\n    \"border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\",\n  rose: \"border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400\",\n};\nconst badge = computed(\n  () =>\n    badges[\n      props.status === \"pending\" || props.status === \"changes-requested\"\n        ? \"amber\"\n        : busy.value\n          ? \"blue\"\n          : successful.value\n            ? \"emerald\"\n            : \"rose\"\n    ],\n);\nlet pending: ReturnType<typeof setTimeout> | undefined;\nfunction cancelAdvance() {\n  if (pending !== undefined) clearTimeout(pending);\n  pending = undefined;\n}\nfunction go(value: number) {\n  cancelAdvance();\n  position.value = value;\n}\nfunction answer(value: ApprovalCardAnswer) {\n  if (currentQuestion.value)\n    responses.value = { ...responses.value, [currentQuestion.value.id]: value };\n}\nfunction advance() {\n  if (!valid.value || busy.value) return;\n  if (cursor.value + 1 < props.questions.length) go(cursor.value + 1);\n  else emit(\"submit\", responses.value);\n}\nfunction automatic() {\n  cancelAdvance();\n  const question = currentQuestion.value,\n    starting = cursor.value;\n  if (\n    !question ||\n    question.multiple ||\n    question.autoAdvance === false ||\n    starting + 1 >= props.questions.length ||\n    busy.value\n  )\n    return;\n  pending = setTimeout(() => {\n    pending = undefined;\n    if (\n      props.status === \"pending\" &&\n      cursor.value === starting &&\n      currentQuestion.value?.id === question.id\n    )\n      go(starting + 1);\n  }, 240);\n}\nwatch(\n  () => props.status,\n  () => {\n    if (props.status !== \"pending\") cancelAdvance();\n  },\n);\nonBeforeUnmount(cancelAdvance);\n</script>\n<template>\n  <div\n    :data-state=\"status\"\n    :aria-busy=\"busy\"\n    class=\"w-full overflow-hidden rounded-2xl bg-muted p-4 text-sm\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <span\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            'grid size-5 shrink-0 place-items-center text-muted-foreground',\n            tones[tone],\n          )\n        \"\n        ><LoaderCircle\n          v-if=\"busy\"\n          :class=\"cn('size-4', !reduced && 'animate-spin')\" /><CircleHelp\n          v-else-if=\"interactive && questions.length\"\n          class=\"size-4\" /><MessageSquareText\n          v-else-if=\"interactive\"\n          class=\"size-4\" /><X\n          v-else-if=\"status === 'rejected'\"\n          class=\"size-4\" /><Check v-else class=\"size-4\"\n      /></span>\n      <div class=\"min-w-0 flex-1\">\n        <div class=\"flex min-w-0 items-start gap-3\">\n          <h3\n            class=\"min-w-0 flex-1 text-base font-medium leading-5 text-foreground\"\n          >\n            <ActionSwapRollText :value=\"currentQuestion?.id ?? String(status)\"\n              ><RenderNode :node=\"currentQuestion?.title ?? title\"\n            /></ActionSwapRollText>\n          </h3>\n          <template v-if=\"questions.length && interactive\"\n            ><span\n              v-if=\"questions.length > 1\"\n              class=\"shrink-0 text-xs tabular-nums text-muted-foreground/65\"\n              >{{ cursor + 1 }}/{{ questions.length }}</span\n            ></template\n          ><span\n            v-else\n            :class=\"\n              cn(\n                'shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors',\n                badge,\n              )\n            \"\n            >{{ label }}</span\n          >\n          <button\n            v-if=\"has('onDismiss')\"\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            @click=\"emit('dismiss')\"\n            class=\"grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n        <AgentDisclosure :open=\"interactive\"\n          ><AnimatePresence v-if=\"currentQuestion\" :initial=\"false\" mode=\"wait\"\n            ><motion.div\n              :key=\"currentQuestion.id\"\n              :initial=\"reduced ? { opacity: 1 } : { opacity: 0, x: 8 }\"\n              :animate=\"{ opacity: 1, x: 0 }\"\n              :exit=\"reduced ? { opacity: 0 } : { opacity: 0, x: -6 }\"\n              :transition=\"{ duration: reduced ? 0 : 0.2, ease: EASE_OUT }\"\n            >\n              <p\n                v-if=\"currentQuestion.description\"\n                class=\"mt-1 leading-5 text-muted-foreground\"\n              >\n                <RenderNode :node=\"currentQuestion.description\" />\n              </p>\n              <QuestionOptions\n                :question=\"currentQuestion\"\n                :answer=\"currentAnswer\"\n                :disabled=\"busy\"\n                @change=\"answer\"\n                @single-select=\"automatic\"\n              /> </motion.div\n          ></AnimatePresence>\n          <div v-else>\n            <p v-if=\"description\" class=\"mt-1 leading-5 text-muted-foreground\">\n              <RenderNode :node=\"description\" />\n            </p>\n            <div v-if=\"$slots.default\" class=\"mt-3\"><slot /></div>\n          </div>\n          <div v-if=\"questions.length\" class=\"mt-4 flex items-center gap-3\">\n            <template v-if=\"questions.length > 1\"\n              ><Button\n                variant=\"ghost\"\n                size=\"icon\"\n                aria-label=\"Previous question\"\n                :disabled=\"busy || cursor === 0\"\n                @click=\"go(cursor - 1)\"\n                class=\"rounded-full\"\n                ><ArrowLeft class=\"size-4\" /></Button\n              ><span class=\"flex gap-1.5\"\n                ><span class=\"sr-only\"\n                  >Question {{ cursor + 1 }} of {{ questions.length }}</span\n                ><motion.span\n                  v-for=\"(item, index) in questions\"\n                  :key=\"item.id\"\n                  aria-hidden=\"true\"\n                  :initial=\"{\n                    scale: index === cursor ? 1 : 0.75,\n                    opacity: index <= cursor ? 1 : 0.35,\n                  }\"\n                  :animate=\"{\n                    scale: index === cursor ? 1 : 0.75,\n                    opacity: index <= cursor ? 1 : 0.35,\n                  }\"\n                  :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n                  class=\"size-1.5 rounded-full bg-foreground\" /></span\n            ></template>\n            <Button\n              :size=\"cursor === questions.length - 1 ? 'sm' : 'icon'\"\n              :aria-label=\"\n                cursor === questions.length - 1\n                  ? 'Submit response'\n                  : 'Next question'\n              \"\n              :disabled=\"busy || !valid\"\n              @click=\"advance\"\n              class=\"ml-auto rounded-full\"\n              ><LoaderCircle\n                v-if=\"busy\"\n                :class=\"cn('size-4', !reduced && 'animate-spin')\" /><template\n                v-else-if=\"cursor === questions.length - 1\"\n                ><RenderNode :node=\"submitLabel\" /><ArrowRight\n                  class=\"size-3.5\" /></template\n              ><ArrowRight v-else class=\"size-4\"\n            /></Button>\n          </div>\n          <div v-else class=\"mt-4 flex flex-wrap items-center gap-2\">\n            <Button\n              size=\"sm\"\n              :disabled=\"busy\"\n              @click=\"emit('approve')\"\n              class=\"rounded-full\"\n              ><RenderNode :node=\"approveLabel\" /></Button\n            ><Button\n              v-if=\"has('onRequestChanges')\"\n              variant=\"secondary\"\n              size=\"sm\"\n              :disabled=\"busy\"\n              @click=\"emit('requestChanges')\"\n              class=\"rounded-full\"\n              >Request changes</Button\n            ><Button\n              v-if=\"has('onReject')\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :disabled=\"busy\"\n              @click=\"emit('reject')\"\n              class=\"rounded-full text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400\"\n              >Reject</Button\n            >\n          </div>\n        </AgentDisclosure>\n        <p v-if=\"!interactive\" class=\"mt-1 text-sm text-muted-foreground\">\n          <RenderNode :node=\"result ?? label\" />\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  computed,\n  getCurrentInstance,\n  onBeforeUnmount,\n  watch,\n  type VNodeChild,\n} from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Check,\n  CircleHelp,\n  LoaderCircle,\n  MessageSquareText,\n  X,\n} from \"lucide-vue-next\";\nimport { Button } from \"../../../motion/button\";\nimport { ActionSwapRollText } from \"../../../motion/action-swap\";\nimport { EASE_OUT, SPRING_SWAP } from \"../../../lib/ease\";\nimport { cn } from \"../../../lib/utils\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { RenderNode, useControllable, type Content } from \"../../shared\";\nimport AgentDisclosure from \"../../AgentDisclosure.vue\";\nimport QuestionOptions from \"./QuestionOptions.vue\";\nimport type {\n  ApprovalCardAnswer,\n  ApprovalCardAnswers,\n  ApprovalCardQuestion,\n  ApprovalCardStatus,\n} from \"./types\";\ndefineSlots<{ default?: () => VNodeChild }>();\nconst props = withDefaults(\n  defineProps<{\n    title?: Content;\n    description?: Content;\n    questions?: ApprovalCardQuestion[];\n    status?: ApprovalCardStatus;\n    answers?: ApprovalCardAnswers;\n    defaultAnswers?: ApprovalCardAnswers;\n    step?: number;\n    defaultStep?: number;\n    approveLabel?: Content;\n    submitLabel?: Content;\n    result?: Content;\n  }>(),\n  {\n    title: \"Approval required\",\n    questions: () => [],\n    status: \"pending\",\n    defaultAnswers: () => ({}),\n    defaultStep: 0,\n    approveLabel: \"Approve\",\n    submitLabel: \"Submit response\",\n    result: undefined,\n  },\n);\nconst emit = defineEmits<{\n  \"update:answers\": [answers: ApprovalCardAnswers];\n  answersChange: [answers: ApprovalCardAnswers];\n  \"update:step\": [step: number];\n  stepChange: [step: number];\n  submit: [answers: ApprovalCardAnswers];\n  approve: [];\n  reject: [];\n  requestChanges: [];\n  dismiss: [];\n}>();\nconst responses = useControllable(\n  () => props.answers,\n  props.defaultAnswers,\n  (value) => {\n    emit(\"update:answers\", value);\n    emit(\"answersChange\", value);\n  },\n);\nconst position = useControllable(\n  () => props.step,\n  props.defaultStep,\n  (value) => {\n    emit(\"update:step\", value);\n    emit(\"stepChange\", value);\n  },\n);\nconst cursor = computed(() =>\n  Math.max(0, Math.min(position.value, props.questions.length - 1)),\n);\nconst currentQuestion = computed(() => props.questions[cursor.value]);\nconst currentAnswer = computed<ApprovalCardAnswer>(() =>\n  currentQuestion.value\n    ? (responses.value[currentQuestion.value.id] ?? {\n        selected: [],\n        custom: \"\",\n      })\n    : { selected: [], custom: \"\" },\n);\nconst busy = computed(() => props.status === \"submitting\");\nconst interactive = computed(() =>\n  [\"pending\", \"submitting\"].includes(props.status),\n);\nconst valid = computed(\n  () =>\n    currentAnswer.value.selected.length > 0 ||\n    !!currentAnswer.value.custom?.trim(),\n);\nconst reduced = useReducedMotion();\nconst instance = getCurrentInstance();\nconst has = (event: string) => !!instance?.vnode.props?.[event];\nconst label = computed(\n  () =>\n    ({\n      pending: \"Input required\",\n      submitting: \"Submitting\",\n      approved: \"Approved\",\n      rejected: \"Rejected\",\n      \"changes-requested\": \"Changes requested\",\n      answered: \"Response submitted\",\n    })[props.status],\n);\nconst successful = computed(() =>\n  [\"approved\", \"answered\"].includes(props.status),\n);\nconst tone = computed(() =>\n  successful.value\n    ? \"emerald\"\n    : props.status === \"rejected\"\n      ? \"rose\"\n      : props.status === \"changes-requested\"\n        ? \"amber\"\n        : \"muted\",\n);\nconst tones = {\n  emerald: \"text-emerald-600 dark:text-emerald-400\",\n  rose: \"text-rose-600 dark:text-rose-400\",\n  amber: \"text-amber-600 dark:text-amber-400\",\n  muted: \"text-muted-foreground\",\n};\nconst badges = {\n  amber:\n    \"border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400\",\n  blue: \"border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400\",\n  emerald:\n    \"border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\",\n  rose: \"border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400\",\n};\nconst badge = computed(\n  () =>\n    badges[\n      props.status === \"pending\" || props.status === \"changes-requested\"\n        ? \"amber\"\n        : busy.value\n          ? \"blue\"\n          : successful.value\n            ? \"emerald\"\n            : \"rose\"\n    ],\n);\nlet pending: ReturnType<typeof setTimeout> | undefined;\nfunction cancelAdvance() {\n  if (pending !== undefined) clearTimeout(pending);\n  pending = undefined;\n}\nfunction go(value: number) {\n  cancelAdvance();\n  position.value = value;\n}\nfunction answer(value: ApprovalCardAnswer) {\n  if (currentQuestion.value)\n    responses.value = { ...responses.value, [currentQuestion.value.id]: value };\n}\nfunction advance() {\n  if (!valid.value || busy.value) return;\n  if (cursor.value + 1 < props.questions.length) go(cursor.value + 1);\n  else emit(\"submit\", responses.value);\n}\nfunction automatic() {\n  cancelAdvance();\n  const question = currentQuestion.value,\n    starting = cursor.value;\n  if (\n    !question ||\n    question.multiple ||\n    question.autoAdvance === false ||\n    starting + 1 >= props.questions.length ||\n    busy.value\n  )\n    return;\n  pending = setTimeout(() => {\n    pending = undefined;\n    if (\n      props.status === \"pending\" &&\n      cursor.value === starting &&\n      currentQuestion.value?.id === question.id\n    )\n      go(starting + 1);\n  }, 240);\n}\nwatch(\n  () => props.status,\n  () => {\n    if (props.status !== \"pending\") cancelAdvance();\n  },\n);\nonBeforeUnmount(cancelAdvance);\n</script>\n<template>\n  <div\n    :data-state=\"status\"\n    :aria-busy=\"busy\"\n    class=\"w-full overflow-hidden rounded-2xl bg-muted p-4 text-sm\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <span\n        aria-hidden=\"true\"\n        :class=\"\n          cn(\n            'grid size-5 shrink-0 place-items-center text-muted-foreground',\n            tones[tone],\n          )\n        \"\n        ><LoaderCircle\n          v-if=\"busy\"\n          :class=\"cn('size-4', !reduced && 'animate-spin')\" /><CircleHelp\n          v-else-if=\"interactive && questions.length\"\n          class=\"size-4\" /><MessageSquareText\n          v-else-if=\"interactive\"\n          class=\"size-4\" /><X\n          v-else-if=\"status === 'rejected'\"\n          class=\"size-4\" /><Check v-else class=\"size-4\"\n      /></span>\n      <div class=\"min-w-0 flex-1\">\n        <div class=\"flex min-w-0 items-start gap-3\">\n          <h3\n            class=\"min-w-0 flex-1 text-base font-medium leading-5 text-foreground\"\n          >\n            <ActionSwapRollText :value=\"currentQuestion?.id ?? String(status)\"\n              ><RenderNode :node=\"currentQuestion?.title ?? title\"\n            /></ActionSwapRollText>\n          </h3>\n          <template v-if=\"questions.length && interactive\"\n            ><span\n              v-if=\"questions.length > 1\"\n              class=\"shrink-0 text-xs tabular-nums text-muted-foreground/65\"\n              >{{ cursor + 1 }}/{{ questions.length }}</span\n            ></template\n          ><span\n            v-else\n            :class=\"\n              cn(\n                'shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors',\n                badge,\n              )\n            \"\n            >{{ label }}</span\n          >\n          <button\n            v-if=\"has('onDismiss')\"\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            @click=\"emit('dismiss')\"\n            class=\"grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n        <AgentDisclosure :open=\"interactive\"\n          ><AnimatePresence v-if=\"currentQuestion\" :initial=\"false\" mode=\"wait\"\n            ><motion.div\n              :key=\"currentQuestion.id\"\n              :initial=\"reduced ? { opacity: 1 } : { opacity: 0, x: 8 }\"\n              :animate=\"{ opacity: 1, x: 0 }\"\n              :exit=\"reduced ? { opacity: 0 } : { opacity: 0, x: -6 }\"\n              :transition=\"{ duration: reduced ? 0 : 0.2, ease: EASE_OUT }\"\n            >\n              <p\n                v-if=\"currentQuestion.description\"\n                class=\"mt-1 leading-5 text-muted-foreground\"\n              >\n                <RenderNode :node=\"currentQuestion.description\" />\n              </p>\n              <QuestionOptions\n                :question=\"currentQuestion\"\n                :answer=\"currentAnswer\"\n                :disabled=\"busy\"\n                @change=\"answer\"\n                @single-select=\"automatic\"\n              /> </motion.div\n          ></AnimatePresence>\n          <div v-else>\n            <p v-if=\"description\" class=\"mt-1 leading-5 text-muted-foreground\">\n              <RenderNode :node=\"description\" />\n            </p>\n            <div v-if=\"$slots.default\" class=\"mt-3\"><slot /></div>\n          </div>\n          <div v-if=\"questions.length\" class=\"mt-4 flex items-center gap-3\">\n            <template v-if=\"questions.length > 1\"\n              ><Button\n                variant=\"ghost\"\n                size=\"icon\"\n                aria-label=\"Previous question\"\n                :disabled=\"busy || cursor === 0\"\n                @click=\"go(cursor - 1)\"\n                class=\"rounded-full\"\n                ><ArrowLeft class=\"size-4\" /></Button\n              ><span class=\"flex gap-1.5\"\n                ><span class=\"sr-only\"\n                  >Question {{ cursor + 1 }} of {{ questions.length }}</span\n                ><motion.span\n                  v-for=\"(item, index) in questions\"\n                  :key=\"item.id\"\n                  aria-hidden=\"true\"\n                  :initial=\"{\n                    scale: index === cursor ? 1 : 0.75,\n                    opacity: index <= cursor ? 1 : 0.35,\n                  }\"\n                  :animate=\"{\n                    scale: index === cursor ? 1 : 0.75,\n                    opacity: index <= cursor ? 1 : 0.35,\n                  }\"\n                  :transition=\"reduced ? { duration: 0 } : SPRING_SWAP\"\n                  class=\"size-1.5 rounded-full bg-foreground\" /></span\n            ></template>\n            <Button\n              :size=\"cursor === questions.length - 1 ? 'sm' : 'icon'\"\n              :aria-label=\"\n                cursor === questions.length - 1\n                  ? 'Submit response'\n                  : 'Next question'\n              \"\n              :disabled=\"busy || !valid\"\n              @click=\"advance\"\n              class=\"ml-auto rounded-full\"\n              ><LoaderCircle\n                v-if=\"busy\"\n                :class=\"cn('size-4', !reduced && 'animate-spin')\" /><template\n                v-else-if=\"cursor === questions.length - 1\"\n                ><RenderNode :node=\"submitLabel\" /><ArrowRight\n                  class=\"size-3.5\" /></template\n              ><ArrowRight v-else class=\"size-4\"\n            /></Button>\n          </div>\n          <div v-else class=\"mt-4 flex flex-wrap items-center gap-2\">\n            <Button\n              size=\"sm\"\n              :disabled=\"busy\"\n              @click=\"emit('approve')\"\n              class=\"rounded-full\"\n              ><RenderNode :node=\"approveLabel\" /></Button\n            ><Button\n              v-if=\"has('onRequestChanges')\"\n              variant=\"secondary\"\n              size=\"sm\"\n              :disabled=\"busy\"\n              @click=\"emit('requestChanges')\"\n              class=\"rounded-full\"\n              >Request changes</Button\n            ><Button\n              v-if=\"has('onReject')\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :disabled=\"busy\"\n              @click=\"emit('reject')\"\n              class=\"rounded-full text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400\"\n              >Reject</Button\n            >\n          </div>\n        </AgentDisclosure>\n        <p v-if=\"!interactive\" class=\"mt-1 text-sm text-muted-foreground\">\n          <RenderNode :node=\"result ?? label\" />\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMsD,IAAQC,GAKRC,IAAOH;EAIb,SAASI,EAAS,GAAe,GAAkB;GACjD,IAAMC,IAAS,IAAI,IAAIJ,EAAM,OAAO,QAAQ;GAG5C,AAFIK,IAASD,EAAO,IAAIE,CAAK,IACxBF,EAAO,OAAOE,CAAK,GACxBJ,EAAK,UAAU;IAAE,GAAGF,EAAM;IAAQ,UAAU,CAAC,GAAGI,CAAM;GAAE,CAAC;EAC3D;EACA,SAASG,EAAO,GAAe;GAE7B,AADAL,EAAK,UAAU;IAAE,UAAU,CAACI,CAAK;IAAG,QAAQ;GAAG,CAAC,GAChDJ,EAAK,cAAc;EACrB;EACA,SAASM,EAAO,GAAe;GAC7B,EAAK,UAAU;IACb,UAAUR,EAAM,SAAS,WAAWA,EAAM,OAAO,WAAW,CAAC;IAC7D,QAAQM;GACV,CAAC;EACH;E,kBAGE1D,EAAA,GAAAC,EA0CM,OA1CNH,GA0CM,CAzCYuD,EAAA,SAAS,SAAS,UAAlCrD,EAAA,GAAAC,EA2BCC,GAAA,EAAA,KAAA,EAAA,GAAA,CA1BYmD,EAAA,SAAS,YAApBrD,EAAA,GAAAC,EAWM,OAXNF,GAWM,EAVJC,EAAA,EAAA,GAAAC,EASEC,GAAA,MAAAC,EARiBkD,EAAA,SAAS,UAAnB,OADTrD,EAAA,GAAAI,EASEC,EAAAC,CAAA,GAAA;GAPC,KAAK6D,EAAO;GACZ,eAAad,EAAA,OAAO,SAAS,SAASc,EAAO,KAAK;GAClD,UAAUd,EAAA,YAAYc,EAAO;GAC7B,OAAOA,EAAO;GACd,aAAaA,EAAO;GACpB,wBAAkB,MAAEZ,EAASY,EAAO,OAAOC,CAAM;GAClD,OAAM;;;;;;;E,kBAGVpE,EAAA,GAAAI,EAaeC,EAAAE,CAAA,GAAA;;GAXZ,eAAa8C,EAAA,OAAO,SAAQ,MAAA;GAC5B,uBAAoBM;GACrB,OAAM;;GAEJ,SAAAnD,QAAkC,EADnCR,EAAA,EAAA,GAAAC,EAQDC,GAAA,MAAAC,EAPmBkD,EAAA,SAAS,UAAnB,OADRrD,EAAA,GAAAI,EAQDC,EAAAI,CAAA,GAAA;IANG,KAAK0D,EAAO;IACZ,OAAOA,EAAO;IACd,OAAOA,EAAO;IACd,aAAaA,EAAO;IACpB,UAAUd,EAAA,YAAYc,EAAO;IAC9B,OAAM;;;;;;;;E,4CAGJd,EAAA,SAAS,eADhBrD,EAAA,GAAAI,EAaCC,EAAAM,CAAA,GAAA;;GAXC,eAAa0C,EAAA,OAAO,UAAM;GAC1B,UAAUA,EAAA;GACV,aAAaA,EAAA,SAAS,qBAAiB;GACxC,cAAW;GACV,uBAAoBO;GACpB,OAAKhD,EAAEP,EAAAgC,CAAA,CAAE,CAAA,SAAUgB,EAAA,SAAS,SAAS,UAAM,QAAA,CAAA;GAC3C,eAAa;;;GAIb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EExCP,IAAMD,IAAQC,GAyBRC,IAAOH,GAWPqC,IAAY5C,QACVQ,EAAM,SACZA,EAAM,iBACL,MAAU;GAET,AADAE,EAAK,kBAAkBI,CAAK,GAC5BJ,EAAK,iBAAiBI,CAAK;EAC7B,CACF,GACM+B,IAAW7C,QACTQ,EAAM,MACZA,EAAM,cACL,MAAU;GAET,AADAE,EAAK,eAAeI,CAAK,GACzBJ,EAAK,cAAcI,CAAK;EAC1B,CACF,GACMgC,IAASC,QACb,KAAK,IAAI,GAAG,KAAK,IAAIF,EAAS,OAAOrC,EAAM,UAAU,SAAS,CAAC,CAAC,CAClE,GACMwC,IAAkBD,QAAevC,EAAM,UAAUsC,EAAO,MAAM,GAC9DG,IAAgBF,QACpBC,EAAgB,QACXJ,EAAU,MAAMI,EAAgB,MAAM,OAAO;GAC5C,UAAU,CAAC;GACX,QAAQ;EACV,IACA;GAAE,UAAU,CAAC;GAAG,QAAQ;EAAG,CACjC,GACME,IAAOH,QAAevC,EAAM,WAAW,YAAY,GACnD2C,IAAcJ,QAClB,CAAC,WAAW,YAAY,CAAC,CAAC,SAASvC,EAAM,MAAM,CACjD,GACM4C,IAAQL,QAEVE,EAAc,MAAM,SAAS,SAAS,KACtC,CAAC,CAACA,EAAc,MAAM,QAAQ,KAAK,CACvC,GACMI,IAAU/D,EAAiB,GAC3BgE,KAAWC,GAAmB,GAC9BC,KAAO,MAAkB,CAAC,CAACF,IAAU,MAAM,QAAQG,IACnDC,IAAQX,SAET;GACC,SAAS;GACT,YAAY;GACZ,UAAU;GACV,UAAU;GACV,qBAAqB;GACrB,UAAU;EACZ,EAAA,CAAGvC,EAAM,OACb,GACMmD,IAAaZ,QACjB,CAAC,YAAY,UAAU,CAAC,CAAC,SAASvC,EAAM,MAAM,CAChD,GACMoD,KAAOb,QACXY,EAAW,QACP,YACAnD,EAAM,WAAW,aACf,SACAA,EAAM,WAAW,sBACf,UACA,OACV,GACMqD,KAAQ;GACZ,SAAS;GACT,MAAM;GACN,OAAO;GACP,OAAO;EACT,GACMC,KAAS;GACb,OACE;GACF,MAAM;GACN,SACE;GACF,MAAM;EACR,GACMC,KAAQhB,QAEVe,GACEtD,EAAM,WAAW,aAAaA,EAAM,WAAW,sBAC3C,UACA0C,EAAK,QACH,SACAS,EAAW,QACT,YACA,OAEd,GACIK;EACJ,SAASC,IAAgB;GAEvB,AADID,MAAY,KAAA,KAAW,aAAaA,CAAO,GAC/C,IAAU,KAAA;EACZ;EACA,SAASE,EAAG,GAAe;GAEzB,AADAD,EAAc,GACd,EAAS,QAAQnD;EACnB;EACA,SAASqD,GAAO,GAA2B;GACzC,AAAInB,EAAgB,UAClB,EAAU,QAAQ;IAAE,GAAGJ,EAAU;KAAQI,EAAgB,MAAM,KAAKlC;GAAM;EAC9E;EACA,SAASsD,KAAU;GACjB,AAAKhB,EAAM,SAAS,GAAK,UACrBN,EAAO,QAAQ,IAAItC,EAAM,UAAU,SAAQ0D,EAAGpB,EAAO,QAAQ,CAAC,IAC7DpC,EAAK,UAAUkC,EAAU,KAAK;EACrC;EACA,SAASyB,KAAY;GACnB,EAAc;GACd,IAAMC,IAAWtB,EAAgB,OAC/BuB,IAAWzB,EAAO;GACpB,AACE,CAACwB,KACDA,EAAS,YACTA,EAAS,gBAAgB,MACzBC,IAAW,KAAK/D,EAAM,UAAU,UAChC0C,EAAK,UAGP,IAAU,iBAAiB;IAEzB,AADA,IAAU,KAAA,GAER1C,EAAM,WAAW,aACjBsC,EAAO,UAAUyB,KACjBvB,EAAgB,OAAO,OAAOsB,EAAS,MAEvCJ,EAAGK,IAAW,CAAC;GACnB,GAAG,GAAG;EACR;E,OACAC,SACQhE,EAAM,cACN;GACJ,AAAIA,EAAM,WAAW,aAAWyD,EAAc;EAChD,CACF,GACAQ,GAAgBR,CAAa,I,UAG3B9F,EAAA,GAAAC,EAsKM,OAAA;GArKH,cAAYqC,EAAA;GACZ,aAAWyC,EAAA;GACZ,OAAM;E,IAEN7E,EAgKM,OAhKNwD,IAgKM,CA/JJxD,EAiBS,QAAA;GAhBP,eAAY;GACX,OAAKC,EAAaC,EAAAkB,CAAA,CAAE,C,iEAA2FoE,GAAMD,GAAA,M;E,IAO9GV,EAAA,SADP/E,EAAA,GAAAK,EAEqDD,EAAAoG,CAAA,GAAA;;GAAnD,OAAKrG,EAAEC,EAAAkB,CAAA,CAAE,CAAA,UAAA,CAAYlB,EAAA8E,CAAA,KAAO,cAAA,CAAA;E,0BAClBF,EAAA,SAAe1C,EAAA,UAAU,UADgBtC,EAAA,GAAAK,EAEnCD,EAAAqG,EAAA,GAAA;;GAAjB,OAAM;E,MACKzB,EAAA,SADMhF,EAAA,GAAAK,EAEAD,EAAAsG,EAAA,GAAA;;GAAjB,OAAM;E,MACKpE,EAAA,WAAM,cADAtC,EAAA,GAAAK,EAEAD,EAAAuG,CAAA,GAAA;;GAAjB,OAAM;E,OAAW3G,EAAA,GAAAK,EACnBD,EAAAwG,EAAA,GAAA;;GADiC,OAAM;E,UAEzC1G,EA4IM,OA5INyD,IA4IM;GA3IJzD,EAiCM,OAjCN0D,GAiCM;IAhCJ1D,EAMK,MANL2D,GAMK,CAHHvD,EAEuBF,EAAAG,CAAA,GAAA,EAFF,OAAOsE,EAAA,OAAiB,MAAM,OAAOvC,EAAA,MAAM,E;KAC7D,SAAA9B,QACD,CADCF,EACDF,EAAA0B,CAAA,GAAA,EADc,MAAM+C,EAAA,OAAiB,SAASvC,EAAA,M;;;IAGlCA,EAAA,UAAU,UAAU0C,EAAA,SAApChF,EAAA,GAAAC,EAMCQ,GAAA,EAAA,KAAA,EAAA,GAAA,CAJS6B,EAAA,UAAU,SAAM,KADvBtC,EAAA,GAAAC,EAIA,QAJA6D,GAIApD,EADKiE,EAAA,QAAM,CAAA,IAAO,MAACjE,EAAG4B,EAAA,UAAU,MAAM,GAAA,CAAA,K,oBAExCtC,EAAA,GAAAC,EASA,QAAA;;KAPE,OAAKE,EAAiBC,EAAAkB,CAAA,CAAE,C,sFAAwHsE,GAAA,K;IAM7I,GAAAlF,EAAA6E,EAAA,KAAK,GAAA,CAAA;IAGHF,EAAG,WAAA,KADXrF,EAAA,GAAAC,EAQS,UAAA;;KANP,MAAK;KACL,cAAW;KACV,SAAK,AAAA8G,EAAA,QAAA,MAAExE,EAAI,SAAA;KACZ,OAAM;I,IAENjC,EAAoBF,EAAAuG,CAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,C;;GAGrBrG,EAqGkBM,IAAA,EArGA,MAAMoE,EAAA,MAAW,GAAA;IAChC,SAAAxE,QAqBkB,CArBKqE,EAAA,SAAvB7E,EAAA,GAAAK,EAqBkBD,EAAA4G,EAAA,GAAA;;KArBuB,SAAS;KAAO,MAAK;;KAC5D,SAAAxG,QAoBF,EApBER,EAAA,GAAAK,EAoBFD,EAAA6G,CAAA,CAAA,CAAA,KAAA;MAnBI,KAAKpC,EAAA,MAAgB;MACrB,SAASzE,EAAA8E,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;OAAA,SAAA;OAAA,GAAA;MAAA;MAChB,SAAS;OAAA,SAAA;OAAA,GAAA;MAAA;MACT,MAAM9E,EAAA8E,CAAA,IAAO,EAAA,SAAA,EAAA,IAAA;OAAA,SAAA;OAAA,GAAA;MAAA;MACb,YAAU;OAAA,UAAc9E,EAAA8E,CAAA,IAAO,IAAA;OAAA,MAAkB9E,EAAAgB,CAAA;MAAQ;;MAE1D,SAAAZ,QAKI,CAJIqE,EAAA,MAAgB,eADxB7E,EAAA,GAAAC,EAKI,KALJ8D,GAKI,CADFzD,EAAkDF,EAAA0B,CAAA,GAAA,EAArC,MAAM+C,EAAA,MAAgB,Y,sCAErCvE,EAMEO,IAAA;OALC,UAAUgE,EAAA;OACV,QAAQC,EAAA;OACR,UAAUC,EAAA;OACV,UAAQiB;OACR,gBAAeE;;;;;;;;;;;;;I,OAGtBlG,EAAA,GAAAC,EAKM,OAAA+D,GAAA,CAJK1B,EAAA,eAATtC,EAAA,GAAAC,EAEI,KAFJgE,GAEI,CADF3D,EAAkCF,EAAA0B,CAAA,GAAA,EAArB,MAAMQ,EAAA,YAAW,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C,iBAErBvC,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAAsD,OAAtDiE,GAAsD,CAAdpD,GAAQoG,EAAA,QAAA,SAAA,C,oBAEvC5E,EAAA,UAAU,UAArBtC,EAAA,GAAAC,EA8CM,OA9CNkE,GA8CM,CA7CY7B,EAAA,UAAU,SAAM,KAAhCtC,EAAA,GAAAC,EA0BYQ,GAAA,EAAA,KAAA,EAAA,GAAA,CAzBTH,EAQAF,EAAAW,CAAA,GAAA;KAPC,SAAQ;KACR,MAAK;KACL,cAAW;KACV,UAAUgE,EAAA,SAAQJ,EAAA,UAAM;KACxB,SAAK,AAAAoC,EAAA,QAAA,MAAEhB,EAAGpB,EAAA,QAAM,CAAA;KACjB,OAAM;;KACL,SAAAnE,QAA4B,CAA5BF,EAA4BF,EAAAgH,EAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,C;;I,qBAC3BlH,EAiBF,QAjBEkE,IAiBF,CAhBIlE,EAEA,QAFAmE,IACE,cAAS3D,EAAGiE,EAAA,QAAM,CAAA,IAAO,SAAIjE,EAAG4B,EAAA,UAAU,MAAM,GAAA,CAAA,IAClDtC,EAAA,EAAA,GAAAC,EAa+CQ,GAAA,MAAAO,EAZtBsB,EAAA,YAAhB,GAAM,OADftC,EAAA,GAAAK,EAa+CD,EAAA6G,CAAA,CAAA,CAAA,MAAA;KAX7C,KAAKI,EAAK;KACX,eAAY;KACX,SAAO;MAA+B,OAAAC,MAAU3C,EAAA,QAAM,IAAA;MAA0C,SAAA2C,KAAS3C,EAAA,QAAM,IAAA;;KAI/G,SAAO;MAA+B,OAAA2C,MAAU3C,EAAA,QAAM,IAAA;MAA0C,SAAA2C,KAAS3C,EAAA,QAAM,IAAA;;KAI/G,YAAYvE,EAAA8E,CAAA,IAAO,EAAA,UAAA,EAAA,IAAqB9E,EAAAiB,CAAA;KACzC,OAAM;;;;;I,kCAEZf,EAiBWF,EAAAW,CAAA,GAAA;KAhBR,MAAM4D,EAAA,UAAWrC,EAAA,UAAU,SAAM,IAAA,OAAA;KACjC,cAA6BqC,EAAA,UAAWrC,EAAA,UAAU,SAAM,I;KAKxD,UAAUyC,EAAA,SAAI,CAAKE,EAAA;KACnB,SAAOgB;KACR,OAAM;;KACL,SAAAzF,QAEqD,CAD9CuE,EAAA,SADP/E,EAAA,GAAAK,EAEqDD,EAAAoG,CAAA,GAAA;;MAAnD,OAAKrG,EAAEC,EAAAkB,CAAA,CAAE,CAAA,UAAA,CAAYlB,EAAA8E,CAAA,KAAO,cAAA,CAAA;K,0BAClBP,EAAA,UAAWrC,EAAA,UAAU,SAAM,KADctC,EAAA,GAAAC,EAIrDQ,GAAA,EAAA,KAAA,EAAA,GAAA,CAFEH,EAAkCF,EAAA0B,CAAA,GAAA,EAArB,MAAMQ,EAAA,YAAW,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,GAAIhC,EACdF,EAAAmH,CAAA,GAAA,EAAnB,OAAM,WAAU,CAAA,C,WACnBvH,EAAA,GAAAK,EACDD,EAAAmH,CAAA,GAAA;;MADoB,OAAM;;;;;;;I,SAG9BvH,EAAA,GAAAC,EAwBM,OAxBNqE,GAwBM;KAvBJhE,EAMCF,EAAAW,CAAA,GAAA;MALC,MAAK;MACJ,UAAUgE,EAAA;MACV,SAAK,AAAAgC,EAAA,QAAA,MAAExE,EAAI,SAAA;MACZ,OAAM;;MACL,SAAA/B,QAAmC,CAAnCF,EAAmCF,EAAA0B,CAAA,GAAA,EAAtB,MAAMQ,EAAA,aAAY,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C;;;KAE1B+C,EAAG,kBAAA,KADVrF,EAAA,GAAAK,EAQAD,EAAAW,CAAA,GAAA;;MANC,SAAQ;MACR,MAAK;MACJ,UAAUgE,EAAA;MACV,SAAK,AAAAgC,EAAA,QAAA,MAAExE,EAAI,gBAAA;MACZ,OAAM;;MACL,SAAA/B,QAAe,CAAA,GAAA,AAAAuG,EAAA,OAAA,CAAf9F,EAAA,mBAAe,EAAA,C;;;KAEVoE,EAAG,UAAA,KADVrF,EAAA,GAAAK,EAQAD,EAAAW,CAAA,GAAA;;MANC,SAAQ;MACR,MAAK;MACJ,UAAUgE,EAAA;MACV,SAAK,AAAAgC,EAAA,QAAA,MAAExE,EAAI,QAAA;MACZ,OAAM;;MACL,SAAA/B,QAAM,CAAA,GAAA,AAAAuG,EAAA,OAAA,CAAN9F,EAAA,UAAM,EAAA,C;;;;;;GAIH+D,EAAA,Q,aAAVhF,EAAA,GAAAC,EAEI,KAFJsE,IAEI,CADFjE,EAAsCF,EAAA0B,CAAA,GAAA,EAAzB,MAAMQ,EAAA,UAAUiD,EAAA,M"}