@alfakit/vue 0.0.0-stage → 0.1.1

package/dist/components/helpdesk/HelpdeskTicketPane.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,289 @@
+import { useFormatter as e, useT as t } from "../../context.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStore as ee } from "../../composables/use-store.js";
+import te from "../ui/Badge2.js";
+import r from "../ui/Button2.js";
+import ne from "../ui/Spinner.js";
+import re from "../actions/ActionList.js";
+import ie from "../ui/Avatar.js";
+import i from "../ui/AvatarFallback.js";
+import a from "../ui/AvatarImage.js";
+import ae from "../realtime/RecordPresence.js";
+import oe from "../ui/Textarea.js";
+import o from "./HelpdeskBadge.js";
+import { helpdeskFileSize as se, presenceInitials as ce } from "@alfakit/core";
+import { Fragment as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, nextTick as le, normalizeClass as h, onMounted as ue, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useId as x, watch as de, withCtx as S, withModifiers as C } from "vue";
+import { ArrowLeftIcon as w, ExternalLinkIcon as T, LockIcon as E, PaperclipIcon as D, SendIcon as O } from "@lucide/vue";
+//#region src/components/helpdesk/HelpdeskTicketPane.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "flex flex-col gap-2 border-b p-3" }, A = { class: "flex items-start gap-2" }, j = { class: "min-w-0 flex-1" }, M = { class: "truncate text-base font-semibold" }, N = { class: "text-muted-foreground me-1.5 font-normal tabular-nums" }, P = { class: "text-muted-foreground truncate text-xs" }, F = [
+	"href",
+	"aria-label",
+	"title"
+], I = { class: "text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs" }, L = { class: "flex items-center gap-1" }, R = { class: "sr-only" }, z = { class: "flex items-center gap-1" }, B = { class: "sr-only" }, V = { class: "flex items-center gap-1" }, H = { class: "text-foreground" }, fe = {
+	key: 0,
+	class: "flex items-center gap-1"
+}, pe = { class: "text-foreground" }, me = {
+	key: 1,
+	class: "flex items-center gap-1"
+}, he = {
+	key: 2,
+	class: "flex items-center gap-1"
+}, ge = {
+	key: 3,
+	class: "flex items-center gap-1"
+}, _e = { class: "text-foreground" }, ve = {
+	key: 4,
+	class: "flex items-center gap-1"
+}, ye = { class: "sr-only" }, be = { class: "flex flex-wrap gap-1" }, xe = ["aria-label"], Se = ["aria-label"], Ce = {
+	key: 0,
+	"data-slot": "helpdesk-message",
+	"data-kind": "event",
+	class: "text-muted-foreground flex items-center gap-2 self-center text-xs"
+}, we = { class: "sr-only" }, Te = ["innerHTML"], Ee = ["datetime"], De = ["data-kind", "data-from"], Oe = { class: "mb-1 flex flex-wrap items-center gap-x-2 text-xs" }, ke = { class: "font-medium" }, Ae = {
+	key: 0,
+	class: "text-warning inline-flex items-center gap-1 font-medium"
+}, je = ["datetime", "title"], Me = ["innerHTML"], Ne = ["aria-label"], Pe = ["href"], Fe = {
+	key: 0,
+	class: "text-muted-foreground"
+}, Ie = {
+	key: 1,
+	class: "inline-flex items-center gap-1 rounded border px-2 py-1 text-xs"
+}, Le = {
+	key: 0,
+	class: "text-muted-foreground border-t p-3 text-sm"
+}, Re = ["data-mode"], ze = { class: "flex items-center justify-between gap-2" }, Be = ["aria-label"], Ve = ["aria-checked", "onClick"], He = {
+	key: 0,
+	class: "text-muted-foreground animate-pulse text-xs",
+	role: "status"
+}, Ue = ["for"], We = {
+	key: 0,
+	role: "alert",
+	class: "text-destructive text-xs"
+}, Ge = { class: "flex items-center justify-between gap-2" }, Ke = ["id"], U = /*@__PURE__*/ m({
+	__name: "HelpdeskTicketPane",
+	props: {
+		ticket: {},
+		controller: {},
+		token: {},
+		actionComponent: {}
+	},
+	setup(m, { expose: U }) {
+		let W = m, G = t(), K = e(), q = ee(W.controller.store), J = _(null), Y = _(null), X = x(), Z = x();
+		function qe() {
+			Y.value?.$el.focus();
+		}
+		U({ focusComposer: qe });
+		function Q() {
+			le(() => {
+				J.value && (J.value.scrollTop = J.value.scrollHeight);
+			});
+		}
+		ue(Q), de(() => [W.ticket.key, W.ticket.messages.length], Q);
+		function Je(e) {
+			e.key === "Enter" && !e.shiftKey && !e.isComposing && (e.preventDefault(), W.controller.send()), e.key === "Escape" && e.currentTarget?.blur();
+		}
+		let $ = (e) => se(e, (e) => K.value.number(e));
+		return (e, t) => (g(), u(s, null, [
+			d("header", k, [
+				d("div", A, [
+					p(r, {
+						variant: "ghost",
+						size: "icon-sm",
+						class: "md:hidden",
+						"aria-label": b(G)("helpdesk.back", {}, "Back to the list"),
+						onClick: t[0] ||= (e) => W.controller.select(null)
+					}, {
+						default: S(() => [p(b(w), { class: "rtl:rotate-180" })]),
+						_: 1
+					}, 8, ["aria-label"]),
+					d("div", j, [d("h2", M, [d("span", N, y(W.ticket.reference), 1), f(y(W.ticket.subject), 1)]), d("p", P, [f(y(W.ticket.requester.name), 1), W.ticket.requester.email ? (g(), u(s, { key: 0 }, [f(" · " + y(W.ticket.requester.email), 1)], 64)) : l("", !0)])]),
+					W.ticket.presence ? (g(), c(ae, {
+						key: 0,
+						presence: W.ticket.presence
+					}, null, 8, ["presence"])) : l("", !0),
+					W.ticket.url ? (g(), c(r, {
+						key: 1,
+						"as-child": "",
+						variant: "ghost",
+						size: "icon-sm"
+					}, {
+						default: S(() => [d("a", {
+							href: W.ticket.url,
+							"aria-label": b(G)("helpdesk.open_page", {}, "Open the ticket page"),
+							title: b(G)("helpdesk.open_page", {}, "Open the ticket page")
+						}, [p(b(T), { class: "rtl:-scale-x-100" })], 8, F)]),
+						_: 1
+					})) : l("", !0)
+				]),
+				d("dl", I, [
+					d("div", L, [d("dt", R, y(b(G)("helpdesk.status", {}, "Status")), 1), d("dd", null, [p(o, { badge: W.ticket.status }, null, 8, ["badge"])])]),
+					d("div", z, [d("dt", B, y(b(G)("helpdesk.priority", {}, "Priority")), 1), d("dd", null, [p(o, { badge: W.ticket.priority }, null, 8, ["badge"])])]),
+					d("div", V, [d("dt", null, y(b(G)("helpdesk.assignee", {}, "Assignee")) + ":", 1), d("dd", H, y(W.ticket.assignee?.name ?? b(G)("helpdesk.unassigned", {}, "Unassigned")), 1)]),
+					W.ticket.group ? (g(), u("div", fe, [d("dt", null, y(b(G)("helpdesk.group", {}, "Group")) + ":", 1), d("dd", pe, y(W.ticket.group.name), 1)])) : l("", !0),
+					W.ticket.sla.firstResponse ? (g(), u("div", me, [d("dt", null, y(b(G)("helpdesk.first_response", {}, "First response")) + ":", 1), d("dd", null, [p(o, {
+						sla: W.ticket.sla.firstResponse,
+						formatter: b(K)
+					}, null, 8, ["sla", "formatter"])])])) : l("", !0),
+					W.ticket.sla.resolution ? (g(), u("div", he, [d("dt", null, y(b(G)("helpdesk.resolution", {}, "Resolution")) + ":", 1), d("dd", null, [p(o, {
+						sla: W.ticket.sla.resolution,
+						formatter: b(K)
+					}, null, 8, ["sla", "formatter"])])])) : l("", !0),
+					W.ticket.satisfaction?.rating === void 0 ? l("", !0) : (g(), u("div", ge, [d("dt", null, y(b(G)("helpdesk.satisfaction", {}, "Satisfaction")) + ":", 1), d("dd", _e, y(b(G)("helpdesk.rating", { rating: W.ticket.satisfaction.rating }, ":rating / 5")), 1)])),
+					W.ticket.tags?.length ? (g(), u("div", ve, [d("dt", ye, y(b(G)("helpdesk.tags", {}, "Tags")), 1), d("dd", be, [(g(!0), u(s, null, v(W.ticket.tags, (e) => (g(), c(te, {
+						key: e,
+						variant: "secondary"
+					}, {
+						default: S(() => [f(y(e), 1)]),
+						_: 2
+					}, 1024))), 128))])])) : l("", !0)
+				]),
+				W.ticket.actions.length > 0 ? (g(), u("div", {
+					key: 0,
+					role: "group",
+					"aria-label": b(G)("helpdesk.actions", {}, "Ticket actions")
+				}, [p(re, {
+					actions: W.ticket.actions,
+					context: {
+						token: W.token,
+						component: W.actionComponent,
+						record: W.ticket.key
+					},
+					size: "xs"
+				}, null, 8, ["actions", "context"])], 8, xe)) : l("", !0)
+			]),
+			d("ol", {
+				ref_key: "messages",
+				ref: J,
+				"aria-label": b(G)("helpdesk.conversation", {}, "Conversation"),
+				class: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3"
+			}, [(g(!0), u(s, null, v(W.ticket.messages, (e) => (g(), u(s, { key: e.key }, [e.kind === "event" ? (g(), u("li", Ce, [
+				d("span", we, y(b(G)("helpdesk.activity", {}, "Activity")) + ":", 1),
+				d("span", {
+					class: "[&_p]:inline",
+					innerHTML: e.html
+				}, null, 8, Te),
+				e.createdAt ? (g(), u("time", {
+					key: 0,
+					datetime: e.createdAt
+				}, "· " + y(b(K).relative(e.createdAt)), 9, Ee)) : l("", !0)
+			])) : (g(), u("li", {
+				key: 1,
+				"data-slot": "helpdesk-message",
+				"data-kind": e.kind,
+				"data-from": e.fromRequester ? "requester" : "agent",
+				class: h(b(n)("flex max-w-[48rem] gap-2.5", !e.fromRequester && "flex-row-reverse self-end text-start"))
+			}, [p(ie, { class: "size-8 shrink-0" }, {
+				default: S(() => [e.author.avatar ? (g(), c(a, {
+					key: 0,
+					src: e.author.avatar,
+					alt: ""
+				}, null, 8, ["src"])) : l("", !0), p(i, { "aria-hidden": "true" }, {
+					default: S(() => [f(y(b(ce)(e.author.name)), 1)]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1024), d("article", { class: h(b(n)("min-w-0 rounded-lg border px-3 py-2", e.kind === "note" ? "border-warning/40 bg-warning/10" : e.fromRequester ? "bg-muted/50" : "bg-primary/5 border-primary/20")) }, [
+				d("header", Oe, [
+					d("span", ke, y(e.author.name), 1),
+					e.kind === "note" ? (g(), u("span", Ae, [p(b(E), {
+						class: "size-3",
+						"aria-hidden": "true"
+					}), f(" " + y(b(G)("helpdesk.internal", {}, "Internal note")), 1)])) : l("", !0),
+					e.createdAt ? (g(), u("time", {
+						key: 1,
+						datetime: e.createdAt,
+						title: b(K).dateTime(e.createdAt),
+						class: "text-muted-foreground"
+					}, y(b(K).relative(e.createdAt)), 9, je)) : l("", !0)
+				]),
+				d("div", {
+					class: "prose prose-sm dark:prose-invert max-w-none break-words",
+					innerHTML: e.html
+				}, null, 8, Me),
+				e.attachments?.length ? (g(), u("ul", {
+					key: 0,
+					"aria-label": b(G)("helpdesk.attachments", {}, "Attachments"),
+					class: "mt-2 flex flex-wrap gap-1.5"
+				}, [(g(!0), u(s, null, v(e.attachments, (e, t) => (g(), u("li", { key: t }, [e.url ? (g(), u("a", {
+					key: 0,
+					href: e.url,
+					target: "_blank",
+					rel: "noopener",
+					class: "hover:bg-muted inline-flex items-center gap-1 rounded border px-2 py-1 text-xs"
+				}, [
+					p(b(D), {
+						class: "size-3",
+						"aria-hidden": "true"
+					}),
+					f(" " + y(e.name) + " ", 1),
+					$(e.size) ? (g(), u("span", Fe, "(" + y($(e.size)) + ")", 1)) : l("", !0)
+				], 8, Pe)) : (g(), u("span", Ie, y(e.name), 1))]))), 128))], 8, Ne)) : l("", !0)
+			], 2)], 10, De))], 64))), 128))], 8, Se),
+			W.ticket.merged ? (g(), u("p", Le, y(b(G)("helpdesk.merged", {}, "This ticket was merged into another one.")), 1)) : l("", !0),
+			W.ticket.canReply ? (g(), u("form", {
+				key: 1,
+				"data-slot": "helpdesk-composer",
+				"data-mode": b(q).composer.mode,
+				class: "data-[mode=note]:bg-warning/5 flex flex-col gap-2 border-t p-3",
+				onSubmit: t[2] ||= C((e) => W.controller.send(), ["prevent"])
+			}, [
+				d("div", ze, [d("div", {
+					role: "radiogroup",
+					"aria-label": b(G)("helpdesk.mode", {}, "Message type"),
+					class: "bg-muted inline-flex rounded-md p-0.5"
+				}, [(g(), u(s, null, v(["reply", "note"], (e) => d("button", {
+					key: e,
+					type: "button",
+					role: "radio",
+					"aria-checked": b(q).composer.mode === e,
+					class: "aria-checked:bg-background aria-checked:text-foreground text-muted-foreground rounded px-2.5 py-1 text-xs font-medium aria-checked:shadow-xs",
+					onClick: (t) => W.controller.setMode(e)
+				}, y(e === "reply" ? b(G)("helpdesk.mode_reply", {}, "Reply") : b(G)("helpdesk.mode_note", {}, "Internal note")), 9, Ve)), 64))], 8, Be), b(q).requesterTyping ? (g(), u("p", He, y(b(G)("helpdesk.requester_typing", { name: W.ticket.requester.name }, ":name is typing…")), 1)) : l("", !0)]),
+				d("label", {
+					for: b(X),
+					class: "sr-only"
+				}, y(b(q).composer.mode === "note" ? b(G)("helpdesk.mode_note", {}, "Internal note") : b(G)("helpdesk.mode_reply", {}, "Reply")), 9, Ue),
+				p(oe, {
+					id: b(X),
+					ref_key: "composer",
+					ref: Y,
+					rows: "3",
+					"model-value": b(q).composer.text,
+					"aria-describedby": b(Z),
+					"aria-invalid": b(q).composer.error ? !0 : void 0,
+					placeholder: b(q).composer.mode === "note" ? b(G)("helpdesk.note_placeholder", {}, "Add a note only agents can see…") : b(G)("helpdesk.reply_placeholder", { name: W.ticket.requester.name }, "Reply to :name…"),
+					class: "max-h-48 min-h-20 resize-y",
+					"onUpdate:modelValue": t[1] ||= (e) => W.controller.setText(e),
+					onKeydown: Je
+				}, null, 8, [
+					"id",
+					"model-value",
+					"aria-describedby",
+					"aria-invalid",
+					"placeholder"
+				]),
+				b(q).composer.error ? (g(), u("p", We, y(b(q).composer.error), 1)) : l("", !0),
+				d("div", Ge, [d("p", {
+					id: b(Z),
+					class: "text-muted-foreground text-xs max-sm:hidden"
+				}, y(b(G)("helpdesk.send_hint", {}, "Enter to send, Shift+Enter for a new line")), 9, Ke), p(r, {
+					type: "submit",
+					size: "sm",
+					class: "ms-auto",
+					variant: b(q).composer.mode === "note" ? "secondary" : "default",
+					disabled: b(q).composer.sending || b(q).composer.text.trim() === ""
+				}, {
+					default: S(() => [b(q).composer.sending ? (g(), c(ne, { key: 0 })) : (g(), c(b(O), {
+						key: 1,
+						class: "rtl:-scale-x-100"
+					})), f(" " + y(b(q).composer.sending ? b(G)("helpdesk.sending", {}, "Sending…") : b(q).composer.mode === "note" ? b(G)("helpdesk.add_note", {}, "Add note") : b(G)("helpdesk.send", {}, "Send")), 1)]),
+					_: 1
+				}, 8, ["variant", "disabled"])])
+			], 40, Re)) : l("", !0)
+		], 64));
+	}
+});
+//#endregion
+export { U as default };
+
+//# sourceMappingURL=HelpdeskTicketPane.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/helpdesk/HelpdeskTicketPane.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpdeskTicketPane.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_createVNode","Button","_unref","_withCtx","_toDisplayString","_createTextVNode","_createCommentVNode","_createBlock","RecordPresence","HelpdeskBadge","_renderList","Badge","ActionList","_normalizeClass","Avatar","AvatarImage","AvatarFallback","_withModifiers","Textarea","Spinner","Badge_default","Button_default","Spinner_default","ActionList_default","Avatar_default","AvatarFallback_default","AvatarImage_default","RecordPresence_default","Textarea_default","HelpdeskBadge_default","_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","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_27","_hoisted_28","_hoisted_29","_hoisted_30","_hoisted_31","_hoisted_32","_hoisted_33","_hoisted_34","_hoisted_35","_hoisted_36","_hoisted_37","_hoisted_38","_hoisted_39","_hoisted_40","_hoisted_41","_hoisted_42","_hoisted_43","_hoisted_44","_hoisted_45","_hoisted_46","_hoisted_47","_hoisted_48","_hoisted_49","HelpdeskTicketPane_vue_vue_type_script_setup_true_lang_default","__expose","props","__props","t","useT","formatter","useFormatter","state","useStore","messages","ref","composer","composerId","useId","hintId","focusComposer","scrollToEnd","onMounted","watch","onKeyDown","event","fileSize","helpdeskFileSize","bytes","value","openBlock","createElementBlock","Fragment","createElementVNode","createVNode","unref","_cache","withCtx","ArrowLeftIcon","toDisplayString","createTextVNode","createCommentVNode","createBlock","ExternalLinkIcon","renderList","tag","message","normalizeClass","cn","presenceInitials","LockIcon","index","file","PaperclipIcon","withModifiers","mode","$event","SendIcon"],"sources":["../../../src/components/helpdesk/HelpdeskTicketPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HelpdeskInboxController, HelpdeskTicket } from '@alfakit/core'\nimport { helpdeskFileSize, presenceInitials } from '@alfakit/core'\nimport { ArrowLeftIcon, ExternalLinkIcon, LockIcon, PaperclipIcon, SendIcon } from '@lucide/vue'\nimport { nextTick, onMounted, ref, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport ActionList from '../actions/ActionList.vue'\nimport RecordPresence from '../realtime/RecordPresence.vue'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport Textarea from '../ui/Textarea.vue'\nimport HelpdeskBadge from './HelpdeskBadge.vue'\n\nconst props = defineProps<{\n  ticket: HelpdeskTicket\n  controller: HelpdeskInboxController\n  token: string\n  actionComponent: string\n}>()\n\nconst t = useT()\nconst formatter = useFormatter()\nconst state = useStore(props.controller.store)\nconst messages = ref<HTMLOListElement | null>(null)\nconst composer = ref<{ $el: HTMLTextAreaElement } | null>(null)\nconst composerId = useId()\nconst hintId = useId()\n\nfunction focusComposer(): void {\n  composer.value?.$el.focus()\n}\n\ndefineExpose({ focusComposer })\n\nfunction scrollToEnd(): void {\n  void nextTick(() => {\n    if (messages.value) messages.value.scrollTop = messages.value.scrollHeight\n  })\n}\n\nonMounted(scrollToEnd)\nwatch(() => [props.ticket.key, props.ticket.messages.length], scrollToEnd)\n\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {\n    event.preventDefault()\n    void props.controller.send()\n  }\n\n  if (event.key === 'Escape') {\n    ;(event.currentTarget as HTMLElement | null)?.blur()\n  }\n}\n\nconst fileSize = (bytes: number | null | undefined) =>\n  helpdeskFileSize(bytes, (value) => formatter.value.number(value))\n</script>\n\n<template>\n  <!-- eslint-disable vue/no-v-html -- message bodies are sanitised on the server (Html::sanitize) -->\n  <header class=\"flex flex-col gap-2 border-b p-3\">\n    <div class=\"flex items-start gap-2\">\n      <Button\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"md:hidden\"\n        :aria-label=\"t('helpdesk.back', {}, 'Back to the list')\"\n        @click=\"props.controller.select(null)\"\n      >\n        <ArrowLeftIcon class=\"rtl:rotate-180\" />\n      </Button>\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"truncate text-base font-semibold\">\n          <span class=\"text-muted-foreground me-1.5 font-normal tabular-nums\">{{\n            props.ticket.reference\n          }}</span\n          >{{ props.ticket.subject }}\n        </h2>\n        <p class=\"text-muted-foreground truncate text-xs\">\n          {{ props.ticket.requester.name\n          }}<template v-if=\"props.ticket.requester.email\">\n            · {{ props.ticket.requester.email }}</template\n          >\n        </p>\n      </div>\n      <RecordPresence v-if=\"props.ticket.presence\" :presence=\"props.ticket.presence\" />\n      <Button v-if=\"props.ticket.url\" as-child variant=\"ghost\" size=\"icon-sm\">\n        <a\n          :href=\"props.ticket.url\"\n          :aria-label=\"t('helpdesk.open_page', {}, 'Open the ticket page')\"\n          :title=\"t('helpdesk.open_page', {}, 'Open the ticket page')\"\n        >\n          <ExternalLinkIcon class=\"rtl:-scale-x-100\" />\n        </a>\n      </Button>\n    </div>\n    <dl class=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n      <div class=\"flex items-center gap-1\">\n        <dt class=\"sr-only\">{{ t('helpdesk.status', {}, 'Status') }}</dt>\n        <dd><HelpdeskBadge :badge=\"props.ticket.status\" /></dd>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <dt class=\"sr-only\">{{ t('helpdesk.priority', {}, 'Priority') }}</dt>\n        <dd><HelpdeskBadge :badge=\"props.ticket.priority\" /></dd>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.assignee', {}, 'Assignee') }}:</dt>\n        <dd class=\"text-foreground\">\n          {{ props.ticket.assignee?.name ?? t('helpdesk.unassigned', {}, 'Unassigned') }}\n        </dd>\n      </div>\n      <div v-if=\"props.ticket.group\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.group', {}, 'Group') }}:</dt>\n        <dd class=\"text-foreground\">{{ props.ticket.group.name }}</dd>\n      </div>\n      <div v-if=\"props.ticket.sla.firstResponse\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.first_response', {}, 'First response') }}:</dt>\n        <dd><HelpdeskBadge :sla=\"props.ticket.sla.firstResponse\" :formatter=\"formatter\" /></dd>\n      </div>\n      <div v-if=\"props.ticket.sla.resolution\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.resolution', {}, 'Resolution') }}:</dt>\n        <dd><HelpdeskBadge :sla=\"props.ticket.sla.resolution\" :formatter=\"formatter\" /></dd>\n      </div>\n      <div v-if=\"props.ticket.satisfaction?.rating !== undefined\" class=\"flex items-center gap-1\">\n        <dt>{{ t('helpdesk.satisfaction', {}, 'Satisfaction') }}:</dt>\n        <dd class=\"text-foreground\">\n          {{ t('helpdesk.rating', { rating: props.ticket.satisfaction.rating }, ':rating / 5') }}\n        </dd>\n      </div>\n      <div v-if=\"props.ticket.tags?.length\" class=\"flex items-center gap-1\">\n        <dt class=\"sr-only\">{{ t('helpdesk.tags', {}, 'Tags') }}</dt>\n        <dd class=\"flex flex-wrap gap-1\">\n          <Badge v-for=\"tag in props.ticket.tags\" :key=\"tag\" variant=\"secondary\">{{ tag }}</Badge>\n        </dd>\n      </div>\n    </dl>\n    <div\n      v-if=\"props.ticket.actions.length > 0\"\n      role=\"group\"\n      :aria-label=\"t('helpdesk.actions', {}, 'Ticket actions')\"\n    >\n      <ActionList\n        :actions=\"props.ticket.actions\"\n        :context=\"{\n          token: props.token,\n          component: props.actionComponent,\n          record: props.ticket.key,\n        }\"\n        size=\"xs\"\n      />\n    </div>\n  </header>\n\n  <ol\n    ref=\"messages\"\n    :aria-label=\"t('helpdesk.conversation', {}, 'Conversation')\"\n    class=\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3\"\n  >\n    <template v-for=\"message in props.ticket.messages\" :key=\"message.key\">\n      <li\n        v-if=\"message.kind === 'event'\"\n        data-slot=\"helpdesk-message\"\n        data-kind=\"event\"\n        class=\"text-muted-foreground flex items-center gap-2 self-center text-xs\"\n      >\n        <span class=\"sr-only\">{{ t('helpdesk.activity', {}, 'Activity') }}:</span>\n        <span class=\"[&_p]:inline\" v-html=\"message.html\" />\n        <time v-if=\"message.createdAt\" :datetime=\"message.createdAt\"\n          >· {{ formatter.relative(message.createdAt) }}</time\n        >\n      </li>\n      <li\n        v-else\n        data-slot=\"helpdesk-message\"\n        :data-kind=\"message.kind\"\n        :data-from=\"message.fromRequester ? 'requester' : 'agent'\"\n        :class=\"\n          cn(\n            'flex max-w-[48rem] gap-2.5',\n            !message.fromRequester && 'flex-row-reverse self-end text-start',\n          )\n        \"\n      >\n        <Avatar class=\"size-8 shrink-0\">\n          <AvatarImage v-if=\"message.author.avatar\" :src=\"message.author.avatar\" alt=\"\" />\n          <AvatarFallback aria-hidden=\"true\">{{\n            presenceInitials(message.author.name)\n          }}</AvatarFallback>\n        </Avatar>\n        <article\n          :class=\"\n            cn(\n              'min-w-0 rounded-lg border px-3 py-2',\n              message.kind === 'note'\n                ? 'border-warning/40 bg-warning/10'\n                : message.fromRequester\n                  ? 'bg-muted/50'\n                  : 'bg-primary/5 border-primary/20',\n            )\n          \"\n        >\n          <header class=\"mb-1 flex flex-wrap items-center gap-x-2 text-xs\">\n            <span class=\"font-medium\">{{ message.author.name }}</span>\n            <span\n              v-if=\"message.kind === 'note'\"\n              class=\"text-warning inline-flex items-center gap-1 font-medium\"\n            >\n              <LockIcon class=\"size-3\" aria-hidden=\"true\" />\n              {{ t('helpdesk.internal', {}, 'Internal note') }}\n            </span>\n            <time\n              v-if=\"message.createdAt\"\n              :datetime=\"message.createdAt\"\n              :title=\"formatter.dateTime(message.createdAt)\"\n              class=\"text-muted-foreground\"\n              >{{ formatter.relative(message.createdAt) }}</time\n            >\n          </header>\n          <div\n            class=\"prose prose-sm dark:prose-invert max-w-none break-words\"\n            v-html=\"message.html\"\n          />\n          <ul\n            v-if=\"message.attachments?.length\"\n            :aria-label=\"t('helpdesk.attachments', {}, 'Attachments')\"\n            class=\"mt-2 flex flex-wrap gap-1.5\"\n          >\n            <li v-for=\"(file, index) in message.attachments\" :key=\"index\">\n              <a\n                v-if=\"file.url\"\n                :href=\"file.url\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                class=\"hover:bg-muted inline-flex items-center gap-1 rounded border px-2 py-1 text-xs\"\n              >\n                <PaperclipIcon class=\"size-3\" aria-hidden=\"true\" />\n                {{ file.name }}\n                <span v-if=\"fileSize(file.size)\" class=\"text-muted-foreground\"\n                  >({{ fileSize(file.size) }})</span\n                >\n              </a>\n              <span\n                v-else\n                class=\"inline-flex items-center gap-1 rounded border px-2 py-1 text-xs\"\n                >{{ file.name }}</span\n              >\n            </li>\n          </ul>\n        </article>\n      </li>\n    </template>\n  </ol>\n\n  <p v-if=\"props.ticket.merged\" class=\"text-muted-foreground border-t p-3 text-sm\">\n    {{ t('helpdesk.merged', {}, 'This ticket was merged into another one.') }}\n  </p>\n\n  <form\n    v-if=\"props.ticket.canReply\"\n    data-slot=\"helpdesk-composer\"\n    :data-mode=\"state.composer.mode\"\n    class=\"data-[mode=note]:bg-warning/5 flex flex-col gap-2 border-t p-3\"\n    @submit.prevent=\"props.controller.send()\"\n  >\n    <div class=\"flex items-center justify-between gap-2\">\n      <div\n        role=\"radiogroup\"\n        :aria-label=\"t('helpdesk.mode', {}, 'Message type')\"\n        class=\"bg-muted inline-flex rounded-md p-0.5\"\n      >\n        <button\n          v-for=\"mode in ['reply', 'note'] as const\"\n          :key=\"mode\"\n          type=\"button\"\n          role=\"radio\"\n          :aria-checked=\"state.composer.mode === mode\"\n          class=\"aria-checked:bg-background aria-checked:text-foreground text-muted-foreground rounded px-2.5 py-1 text-xs font-medium aria-checked:shadow-xs\"\n          @click=\"props.controller.setMode(mode)\"\n        >\n          {{\n            mode === 'reply'\n              ? t('helpdesk.mode_reply', {}, 'Reply')\n              : t('helpdesk.mode_note', {}, 'Internal note')\n          }}\n        </button>\n      </div>\n      <p\n        v-if=\"state.requesterTyping\"\n        class=\"text-muted-foreground animate-pulse text-xs\"\n        role=\"status\"\n      >\n        {{\n          t('helpdesk.requester_typing', { name: props.ticket.requester.name }, ':name is typing…')\n        }}\n      </p>\n    </div>\n    <label :for=\"composerId\" class=\"sr-only\">\n      {{\n        state.composer.mode === 'note'\n          ? t('helpdesk.mode_note', {}, 'Internal note')\n          : t('helpdesk.mode_reply', {}, 'Reply')\n      }}\n    </label>\n    <Textarea\n      :id=\"composerId\"\n      ref=\"composer\"\n      rows=\"3\"\n      :model-value=\"state.composer.text\"\n      :aria-describedby=\"hintId\"\n      :aria-invalid=\"state.composer.error ? true : undefined\"\n      :placeholder=\"\n        state.composer.mode === 'note'\n          ? t('helpdesk.note_placeholder', {}, 'Add a note only agents can see…')\n          : t(\n              'helpdesk.reply_placeholder',\n              { name: props.ticket.requester.name },\n              'Reply to :name…',\n            )\n      \"\n      class=\"max-h-48 min-h-20 resize-y\"\n      @update:model-value=\"props.controller.setText($event)\"\n      @keydown=\"onKeyDown\"\n    />\n    <p v-if=\"state.composer.error\" role=\"alert\" class=\"text-destructive text-xs\">\n      {{ state.composer.error }}\n    </p>\n    <div class=\"flex items-center justify-between gap-2\">\n      <p :id=\"hintId\" class=\"text-muted-foreground text-xs max-sm:hidden\">\n        {{ t('helpdesk.send_hint', {}, 'Enter to send, Shift+Enter for a new line') }}\n      </p>\n      <Button\n        type=\"submit\"\n        size=\"sm\"\n        class=\"ms-auto\"\n        :variant=\"state.composer.mode === 'note' ? 'secondary' : 'default'\"\n        :disabled=\"state.composer.sending || state.composer.text.trim() === ''\"\n      >\n        <Spinner v-if=\"state.composer.sending\" />\n        <SendIcon v-else class=\"rtl:-scale-x-100\" />\n        {{\n          state.composer.sending\n            ? t('helpdesk.sending', {}, 'Sending…')\n            : state.composer.mode === 'note'\n              ? t('helpdesk.add_note', {}, 'Add note')\n              : t('helpdesk.send', {}, 'Send')\n        }}\n      </Button>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,IAAMqF,IAAQC,GAORC,IAAIC,EAAK,GACTC,IAAYC,EAAa,GACzBC,IAAQC,GAASP,EAAM,WAAW,KAAK,GACvCQ,IAAWC,EAA6B,IAAI,GAC5CC,IAAWD,EAAyC,IAAI,GACxDE,IAAaC,EAAM,GACnBC,IAASD,EAAM;EAErB,SAASE,KAAsB;GAC7B,EAAS,OAAO,IAAI,MAAM;EAC5B;EAEA,EAAa,EAAE,kBAAc,CAAC;EAE9B,SAASC,IAAoB;GAC3B,SAAoB;IAClB,AAAIP,EAAS,UAAO,EAAS,MAAM,YAAYA,EAAS,MAAM;GAChE,CAAC;EACH;EAGA,AADAQ,GAAUD,CAAW,GACrBE,SAAY,CAACjB,EAAM,OAAO,KAAKA,EAAM,OAAO,SAAS,MAAM,GAAGe,CAAW;EAEzE,SAASG,GAAU,GAA4B;GAM7C,AALIC,EAAM,QAAQ,WAAW,CAACA,EAAM,YAAY,CAACA,EAAM,gBACrDA,EAAM,eAAe,GACrBnB,EAAW,WAAW,KAAK,IAGzBmB,EAAM,QAAQ,YACfA,EAAO,eAAsC,KAAK;EAEvD;EAEA,IAAMC,KAAY,MAChBC,GAAiBC,IAAQ,MAAUlB,EAAU,MAAM,OAAOmB,CAAK,CAAC;;GAKhEzG,EA2FS,UA3FT+B,GA2FS;IA1FP/B,EAkCM,OAlCNgC,GAkCM;KAjCJ/B,EAQSC,GAAA;MAPP,SAAQ;MACR,MAAK;MACL,OAAM;MACL,cAAYC,EAAAiF,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,kBAAA;MACb,SAAK,AAAA4B,EAAA,QAAA,MAAE9B,EAAM,WAAW,OAAM,IAAA;;MAE/B,SAAA9E,QAAwC,CAAxCH,EAAwCE,EAAA+G,CAAA,GAAA,EAAzB,OAAM,iBAAgB,CAAA,CAAA,CAAA;;;KAEvClH,EAaM,OAbNiC,GAaM,CAZJjC,EAKK,MALLkC,GAKK,CAJHlC,EAGC,QAHDmC,GAGC9B,EAFC6E,EAAM,OAAO,SAAS,GAAA,CAAA,GAEpB5E,EAAAD,EAAA6E,EAAM,OAAO,OAAO,GAAA,CAAA,CAAA,CAAA,GAE1BlF,EAKI,KALJoC,GAKI,CAJC9B,EAAAD,EAAA6E,EAAM,OAAO,UAAU,IAAI,GAAA,CAAA,GACZA,EAAM,OAAO,UAAU,SAAvCrF,EAAA,GAAAC,EAEDC,GAAA,EAAA,KAAA,EAAA,GAAA,CAF+CO,EAAA,QAC5CD,EAAG6E,EAAM,OAAO,UAAU,KAAK,GAAA,CAAA,CAAA,GAAA,EAAA,KAAAmC,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA;KAIjBnC,EAAM,OAAO,YAAnCrF,EAAA,GAAAW,EAAiFC,IAAA;;MAAnC,UAAUyE,EAAM,OAAO;;KACvDA,EAAM,OAAO,OAA3BrF,EAAA,GAAAW,EAQSN,GAAA;;MARuB,YAAA;MAAS,SAAQ;MAAQ,MAAK;;MAC5D,SAAAE,QAMI,CANJJ,EAMI,KAAA;OALD,MAAMkF,EAAM,OAAO;OACnB,cAAY/E,EAAAiF,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,sBAAA;OACb,OAAOjF,EAAAiF,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,sBAAA;MAETnF,GAAAA,CAAAA,EAA6CE,EAAAoH,CAAA,GAAA,EAA3B,OAAM,mBAAkB,CAAA,CAAA,GAAA,GAAAlF,CAAA,CAAA,CAAA;;;;IAIhDrC,EAuCK,MAvCLsC,GAuCK;KAtCHtC,EAGM,OAHNuC,GAGM,CAFJvC,EAAiE,MAAjEwC,GAAiEnC,EAA1CF,EAAAiF,CAAA,CAAC,CAAA,mBAAA,CAAA,GAAA,QAAA,CAAA,GAAA,CAAA,GACxBpF,EAAuD,MAAA,MAAA,CAAnDC,EAA8CS,GAAA,EAA9B,OAAOwE,EAAM,OAAO,OAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA;KAE1ClF,EAGM,OAHNyC,GAGM,CAFJzC,EAAqE,MAArE0C,GAAqErC,EAA9CF,EAAAiF,CAAA,CAAC,CAAA,qBAAA,CAAA,GAAA,UAAA,CAAA,GAAA,CAAA,GACxBpF,EAAyD,MAAA,MAAA,CAArDC,EAAgDS,GAAA,EAAhC,OAAOwE,EAAM,OAAO,SAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA;KAE1ClF,EAKM,OALN2C,GAKM,CAJJ3C,EAAsD,MAAA,MAAAK,EAA/CF,EAAAiF,CAAA,CAAC,CAAA,qBAAA,CAAA,GAAA,UAAA,CAAA,IAAwC,KAAC,CAAA,GACjDpF,EAEK,MAFL4C,GAEKvC,EADA6E,EAAM,OAAO,UAAU,QAAQ/E,EAAAiF,CAAA,CAAC,CAAA,uBAAA,CAAA,GAAA,YAAA,CAAA,GAAA,CAAA,CAAA,CAAA;KAG5BF,EAAM,OAAO,SAAxBrF,EAAA,GAAAC,EAGM,OAHN+C,IAGM,CAFJ7C,EAAgD,MAAA,MAAAK,EAAzCF,EAAAiF,CAAA,CAAC,CAAA,kBAAA,CAAA,GAAA,OAAA,CAAA,IAAkC,KAAC,CAAA,GAC3CpF,EAA8D,MAA9D8C,IAA8DzC,EAA/B6E,EAAM,OAAO,MAAM,IAAI,GAAA,CAAA,CAAA,CAAA,KAAAmC,EAAA,IAAA,EAAA;KAE7CnC,EAAM,OAAO,IAAI,iBAA5BrF,EAAA,GAAAC,EAGM,OAHNiD,IAGM,CAFJ/C,EAAkE,MAAA,MAAAK,EAA3DF,EAAAiF,CAAA,CAAC,CAAA,2BAAA,CAAA,GAAA,gBAAA,CAAA,IAAoD,KAAC,CAAA,GAC7DpF,EAAuF,MAAA,MAAA,CAAnFC,EAA8ES,GAAA;MAA9D,KAAKwE,EAAM,OAAO,IAAI;MAAgB,WAAW/E,EAAAmF,CAAA;;KAE5DJ,EAAM,OAAO,IAAI,cAA5BrF,EAAA,GAAAC,EAGM,OAHNkD,IAGM,CAFJhD,EAA0D,MAAA,MAAAK,EAAnDF,EAAAiF,CAAA,CAAC,CAAA,uBAAA,CAAA,GAAA,YAAA,CAAA,IAA4C,KAAC,CAAA,GACrDpF,EAAoF,MAAA,MAAA,CAAhFC,EAA2ES,GAAA;MAA3D,KAAKwE,EAAM,OAAO,IAAI;MAAa,WAAW/E,EAAAmF,CAAA;;KAEzDJ,EAAM,OAAO,cAAc,WAAW,KAAA,IAGqBmC,EAAA,IAAA,EAAA,KAHtExH,EAAA,GAAAC,EAKM,OALNmD,IAKM,CAJJjD,EAA8D,MAAA,MAAAK,EAAvDF,EAAAiF,CAAA,CAAC,CAAA,yBAAA,CAAA,GAAA,cAAA,CAAA,IAAgD,KAAC,CAAA,GACzDpF,EAEK,MAFLkD,IAEK7C,EADAF,EAAAiF,CAAA,CAAC,CAAA,mBAAA,EAAA,QAA8BF,EAAM,OAAO,aAAa,OAAM,GAAA,aAAA,CAAA,GAAA,CAAA,CAAA,CAAA;KAG3DA,EAAM,OAAO,MAAM,UAA9BrF,EAAA,GAAAC,EAKM,OALNqD,IAKM,CAJJnD,EAA6D,MAA7DoD,IAA6D/C,EAAtCF,EAAAiF,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,MAAA,CAAA,GAAA,CAAA,GACxBpF,EAEK,MAFLqD,IAEK,EADHxD,EAAA,EAAA,GAAAC,EAAwFC,GAAA,MAAAY,EAAnEuE,EAAM,OAAO,OAApB,OAAdrF,EAAA,GAAAW,EAAwFI,IAAA;MAA/C,KAAK6G;MAAK,SAAQ;;MAAY,SAAArH,QAAS,CAANE,EAAAD,EAAAoH,CAAG,GAAA,CAAA,CAAA,CAAA;;;;IAK3EvC,EAAM,OAAO,QAAQ,SAAM,KADnCrF,EAAA,GAAAC,EAcM,OAAA;;KAZJ,MAAK;KACJ,cAAYK,EAAAiF,CAAA,CAAC,CAAA,oBAAA,CAAA,GAAA,gBAAA;IAEdnF,GAAAA,CAAAA,EAQEY,IAAA;KAPC,SAASqE,EAAM,OAAO;KACtB,SAAO;MAAqB,OAAAA,EAAM;MAA4B,WAAAA,EAAM;MAAmC,QAAAA,EAAM,OAAO;;KAKrH,MAAK;;;GAKXlF,EAkGK,MAAA;IAjGC,SAAA;IAAJ,KAAI0F;IACH,cAAYvF,EAAAiF,CAAA,CAAC,CAAA,yBAAA,CAAA,GAAA,cAAA;IACd,OAAM;GAENvF,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EA4FWC,GAAA,MAAAY,EA5FiBuE,EAAM,OAAO,WAAxB,OAAwCwB,EAAA,GAAAC,EAAAC,GAAA,EAAA,KAAAc,EAAQ,IAAA,GAAA,CAEvDA,EAAQ,SAAI,WADpB7H,EAAA,GAAAC,EAWK,MAXL0D,IAWK;IALHxD,EAA0E,QAA1EyD,IAA0EpD,EAAjDF,EAAAiF,CAAA,CAAC,CAAA,qBAAA,CAAA,GAAA,UAAA,CAAA,IAAwC,KAAC,CAAA;IACnEpF,EAAmD,QAAA;KAA7C,OAAM;KAAe,WAAQ0H,EAAQ;;IAC/BA,EAAQ,aAApB7H,EAAA,GAAAC,EAEC,QAAA;;KAF+B,UAAU4H,EAAQ;IAC/C,GAAA,OAAErH,EAAGF,EAAAmF,CAAA,CAAS,CAAC,SAASoC,EAAQ,SAAS,CAAA,GAAA,GAAA/D,EAAA,KAAA0D,EAAA,IAAA,EAAA;GAG9CxH,CAAAA,MAAAA,EAAA,GAAAC,EA8EK,MAAA;;IA5EH,aAAU;IACT,aAAW4H,EAAQ;IACnB,aAAWA,EAAQ,gBAAa,cAAA;IAChC,OAAK5G,EAAaX,EAAAyH,CAAA,CAAE,CAAA,8BAAyD,CAAAF,EAAQ,iBAAa,sCAAA,CAAA;GAOnGzH,GAAAA,CAAAA,EAKSc,IAAA,EALD,OAAM,kBAAiB,GAAA;IAC7B,SAAAX,QAAgF,CAA7DsH,EAAQ,OAAO,UAAlC7H,EAAA,GAAAW,EAAgFQ,GAAA;;KAArC,KAAK0G,EAAQ,OAAO;KAAQ,KAAI;IAC3EzH,GAAAA,MAAAA,GAAAA,CAAAA,KAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAEmBgB,GAAA,EAFH,eAAY,OAAM,GAAA;KAAC,SAAAb,QAEjC,CADAE,EAAAD,EAAAF,EAAA0H,EAAA,CAAgB,CAACH,EAAQ,OAAO,IAAI,CAAA,GAAA,CAAA,CAAA,CAAA;;;;GAGxC1H,GAAAA,IAAAA,GAAAA,EA2DU,WAAA,EA1DP,OAAKc,EAAeX,EAAAyH,CAAA,CAAE,CAAA,uCAAqEF,EAAQ,SAAI,SAAA,oCAAkFA,EAAQ,gBAAA,gBAAA,gCAAA,CAAA,EAAA,GAAA;IAWlM1H,EAgBS,UAhBT6D,IAgBS;KAfP7D,EAA0D,QAA1D8D,IAA0DzD,EAA7BqH,EAAQ,OAAO,IAAI,GAAA,CAAA;KAExCA,EAAQ,SAAI,UADpB7H,EAAA,GAAAC,EAMO,QANPiE,IAMO,CAFL9D,EAA8CE,EAAA2H,CAAA,GAAA;MAApC,OAAM;MAAS,eAAY;KAASxH,CAAAA,GAAAA,EAAA,MAC9CD,EAAGF,EAAAiF,CAAA,CAAC,CAAA,qBAAA,CAAA,GAAA,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAAiC,EAAA,IAAA,EAAA;KAGEK,EAAQ,aADhB7H,EAAA,GAAAC,EAMC,QAAA;;MAJE,UAAU4H,EAAQ;MAClB,OAAOvH,EAAAmF,CAAA,CAAS,CAAC,SAASoC,EAAQ,SAAS;MAC5C,OAAM;KACF,GAAArH,EAAAF,EAAAmF,CAAA,CAAS,CAAC,SAASoC,EAAQ,SAAS,CAAA,GAAA,GAAA1D,EAAA,KAAAqD,EAAA,IAAA,EAAA;;IAG5CrH,EAGE,OAAA;KAFA,OAAM;KACN,WAAQ0H,EAAQ;;IAGVA,EAAQ,aAAa,UAD7B7H,EAAA,GAAAC,EAyBK,MAAA;;KAvBF,cAAYK,EAAAiF,CAAA,CAAC,CAAA,wBAAA,CAAA,GAAA,aAAA;KACd,OAAM;IAENvF,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAmBKC,GAAA,MAAAY,EAnBuB+G,EAAQ,cAAxB,GAAM,OAAlB7H,EAAA,GAAAC,EAmBK,MAAA,EAnB6C,KAAKiI,EAAK,GAAA,CAElDC,EAAK,OADbnI,EAAA,GAAAC,EAYI,KAAA;;KAVD,MAAMkI,EAAK;KACZ,QAAO;KACP,KAAI;KACJ,OAAM;;KAEN/H,EAAmDE,EAAA8H,CAAA,GAAA;MAApC,OAAM;MAAS,eAAY;;KAAS3H,EAAA,MACnDD,EAAG2H,EAAK,IAAI,IAAG,KACf,CAAA;KAAY1B,EAAS0B,EAAK,IAAI,KAA9BnI,EAAA,GAAAC,EAEC,QAFDsE,IACG,MAAC/D,EAAGiG,EAAS0B,EAAK,IAAI,CAAA,IAAI,KAAC,CAAA,KAAAX,EAAA,IAAA,EAAA;IAGhCxH,GAAAA,GAAAA,EAAAA,MAAAA,EAAA,GAAAC,EAIC,QAJDuE,IAIChE,EADK2H,EAAK,IAAI,GAAA,CAAA,EAAA,CAAA;;GASlB9C,EAAM,OAAO,UAAtBrF,EAAA,GAAAC,EAEI,KAFJwE,IAEIjE,EADCF,EAAAiF,CAAA,CAAC,CAAA,mBAAA,CAAA,GAAA,0CAAA,CAAA,GAAA,CAAA,KAAAiC,EAAA,IAAA,EAAA;GAIEnC,EAAM,OAAO,YADrBrF,EAAA,GAAAC,EA2FO,QAAA;;IAzFL,aAAU;IACT,aAAWK,EAAAqF,CAAA,CAAK,CAAC,SAAS;IAC3B,OAAM;IACL,UAAM,AAAAwB,EAAA,OAAA9F,GAAA,MAAUgE,EAAM,WAAW,KAAI,GAAA,CAAA,SAAA,CAAA;;IAEtClF,EA+BM,OA/BNwE,IA+BM,CA9BJxE,EAoBM,OAAA;KAnBJ,MAAK;KACJ,cAAYG,EAAAiF,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,cAAA;KACd,OAAM;IAENvF,GAAAA,EAAAA,EAAA,GAAAC,EAcSC,GAAA,MAAAY,EAbQ,CAAA,SAAA,MAAA,IAAR,MADTX,EAcS,UAAA;KAZN,KAAKmI;KACN,MAAK;KACL,MAAK;KACJ,gBAAchI,EAAAqF,CAAA,CAAK,CAAC,SAAS,SAAS2C;KACvC,OAAM;KACL,UAAK,MAAEjD,EAAM,WAAW,QAAQiD,CAAI;IAGnC,GAAA9H,EAAA8H,MAAI,UAA6BhI,EAAAiF,CAAA,CAAC,CAAA,uBAAA,CAAA,GAAA,OAAA,IAAqDjF,EAAAiF,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,eAAA,CAAA,GAAA,GAAAV,EAAA,CAOtFvE,GAAAA,EAAAA,EAAAA,GAAAA,GAAAA,EAAAA,GAAAA,EAAAqF,CAAA,CAAK,CAAC,mBADd3F,EAAA,GAAAC,EAQI,KARJ6E,IAQItE,EAFAF,EAAAiF,CAAA,CAAC,CAAA,6BAAA,EAAA,MAAsCF,EAAM,OAAO,UAAU,KAAI,GAAA,kBAAA,CAAA,GAAA,CAAA,KAAAmC,EAAA,IAAA,EAAA,CAAA,CAAA;IAIxErH,EAMQ,SAAA;KANA,KAAKG,EAAA0F,CAAA;KAAY,OAAM;IAE3B,GAAAxF,EAAAF,EAAAqF,CAAA,CAAK,CAAC,SAAS,SAAI,SAAwBrF,EAAAiF,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,eAAA,IAAwDjF,EAAAiF,CAAA,CAAC,CAAA,uBAAA,CAAA,GAAA,OAAA,CAAA,GAAA,GAAAR,EAAA;IAKzG3E,EAmBEkB,IAAA;KAlBC,IAAIhB,EAAA0F,CAAA;KACD,SAAA;KAAJ,KAAID;KACJ,MAAK;KACJ,eAAazF,EAAAqF,CAAA,CAAK,CAAC,SAAS;KAC5B,oBAAkBrF,EAAA4F,CAAA;KAClB,gBAAc5F,EAAAqF,CAAA,CAAK,CAAC,SAAS,QAAK,KAAU,KAAA;KAC5C,aAAsBrF,EAAAqF,CAAA,CAAK,CAAC,SAAS,SAAI,SAAwBrF,EAAAiF,CAAA,CAAC,CAAA,6BAAA,CAAA,GAAA,iCAAA,IAAiFjF,EAAAiF,CAAA,CAAC,CAAA,8BAAoE,EAAA,MAAAF,EAAM,OAAO,UAAU,KAAI,GAAA,iBAAA;KASpP,OAAM;KACL,uBAAkB,AAAA8B,EAAA,QAAA,MAAE9B,EAAM,WAAW,QAAQkD,CAAM;KACnD,WAAShC;;;;;;;;IAEHjG,EAAAqF,CAAA,CAAK,CAAC,SAAS,SAAxB3F,EAAA,GAAAC,EAEI,KAFJ+E,IAEIxE,EADCF,EAAAqF,CAAA,CAAK,CAAC,SAAS,KAAK,GAAA,CAAA,KAAA6B,EAAA,IAAA,EAAA;IAEzBrH,EAqBM,OArBN8E,IAqBM,CApBJ9E,EAEI,KAAA;KAFA,IAAIG,EAAA4F,CAAA;KAAQ,OAAM;IACjB,GAAA1F,EAAAF,EAAAiF,CAAA,CAAC,CAAA,sBAAA,CAAA,GAAA,2CAAA,CAAA,GAAA,GAAAL,EAAA,GAEN9E,EAgBSC,GAAA;KAfP,MAAK;KACL,MAAK;KACL,OAAM;KACL,SAASC,EAAAqF,CAAA,CAAK,CAAC,SAAS,SAAI,SAAA,cAAA;KAC5B,UAAUrF,EAAAqF,CAAA,CAAK,CAAC,SAAS,WAAWrF,EAAAqF,CAAA,CAAK,CAAC,SAAS,KAAK,KAAI,MAAA;;KAE7D,SAAApF,QAAyC,CAA1BD,EAAAqF,CAAA,CAAK,CAAC,SAAS,WAA9B3F,EAAA,GAAAW,EAAyCY,IAAA,EAAA,KAAA,EAAA,CAAA,MACzCvB,EAAA,GAAAW,EAA4CL,EAAAkI,CAAA,GAAA;;MAA3B,OAAM;KAAqB/H,CAAAA,IAAAA,EAAA,MAC5CD,EACEF,EAAAqF,CAAA,CAAK,CAAC,SAAS,UAAsBrF,EAAAiF,CAAA,CAAC,CAAA,oBAAA,CAAA,GAAA,UAAA,IAAmDjF,EAAAqF,CAAA,CAAK,CAAC,SAAS,SAAI,SAA4BrF,EAAAiF,CAAA,CAAC,CAAA,qBAAA,CAAA,GAAA,UAAA,IAAsDjF,EAAAiF,CAAA,CAAC,CAAA,iBAAA,CAAA,GAAA,MAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/helpdesk/inbox-lazy.d.ts

@@ -0,0 +1,3 @@
+/** The helpdesk inbox; its code loads the first time the inbox is shown. */
+export declare const HelpdeskInbox: import("vue").Component;
+//# sourceMappingURL=inbox-lazy.d.ts.map

package/dist/components/helpdesk/inbox-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbox-lazy.d.ts","sourceRoot":"","sources":["../../../src/components/helpdesk/inbox-lazy.ts"],"names":[],"mappings":"AAGA,4EAA4E;AAC5E,eAAO,MAAM,aAAa,yBAIzB,CAAA"}

package/dist/components/helpdesk/inbox-lazy.js

@@ -0,0 +1,8 @@
+import { lazyComponent as e } from "../../lib/lazy.js";
+import t from "./HelpdeskInboxSkeleton.js";
+//#region src/components/helpdesk/inbox-lazy.ts
+var n = e("HelpdeskInbox", () => import("./HelpdeskInbox.js").then((e) => e.default), t);
+//#endregion
+export { n as HelpdeskInbox };
+
+//# sourceMappingURL=inbox-lazy.js.map

package/dist/components/helpdesk/inbox-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbox-lazy.js","names":["HelpdeskInboxSkeleton","HelpdeskInboxSkeleton_default","HelpdeskInbox","lazyComponent","module"],"sources":["../../../src/components/helpdesk/inbox-lazy.ts"],"sourcesContent":["import { lazyComponent } from '../../lib/lazy'\nimport HelpdeskInboxSkeleton from './HelpdeskInboxSkeleton.vue'\n\n/** The helpdesk inbox; its code loads the first time the inbox is shown. */\nexport const HelpdeskInbox = lazyComponent(\n  'HelpdeskInbox',\n  () => import('./HelpdeskInbox.vue').then((module) => module.default),\n  HelpdeskInboxSkeleton,\n)\n"],"mappings":";;;AAIA,IAAaE,IAAgBC,EAC3B,uBACM,OAAO,qBAAsB,CAAC,MAAM,MAAWC,EAAO,OAAO,GACnEJ,CACF"}

package/dist/components/helpdesk/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HelpdeskChat } from './HelpdeskChat.vue';
+export { HelpdeskInbox } from './inbox-lazy';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/helpdesk/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/helpdesk/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/kanban/Kanban.js

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

package/dist/components/kanban/Kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.js","names":["_sfc_main","Kanban_vue_vue_type_script_setup_true_lang_default","Kanban_default"],"sources":["../../../src/components/kanban/Kanban.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanSchema, KanbanWidgetSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport KanbanBoard from './KanbanBoard.vue'\n\n/**\n * The board of a `KanbanPage` (schema component `kanban`) or a `KanbanWidget`\n * (alfasix/alfakit-kanban).\n */\nconst props = defineProps<{ component?: KanbanSchema; widget?: KanbanWidgetSchema }>()\nconst board = computed(() => props.component ?? props.widget?.kanban)\n</script>\n\n<template>\n  <KanbanBoard v-if=\"board\" :key=\"board.actionComponent\" :board=\"board\" />\n</template>\n"],"mappings":""}

package/dist/components/kanban/Kanban.vue.d.ts

@@ -0,0 +1,12 @@
+import type { KanbanSchema, KanbanWidgetSchema } from '@alfakit/core';
+/**
+ * The board of a `KanbanPage` (schema component `kanban`) or a `KanbanWidget`
+ * (alfasix/alfakit-kanban).
+ */
+type __VLS_Props = {
+    component?: KanbanSchema;
+    widget?: KanbanWidgetSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=Kanban.vue.d.ts.map

package/dist/components/kanban/Kanban.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.vue.d.ts","sourceRoot":"","sources":["../../../src/components/kanban/Kanban.vue"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAIrE;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,CAAC,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAE,CAAC;;AA+C7E,wBAMG"}

package/dist/components/kanban/Kanban.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,21 @@
+import e from "./KanbanBoard.js";
+import { computed as t, createBlock as n, createCommentVNode as r, defineComponent as i, openBlock as a } from "vue";
+//#region src/components/kanban/Kanban.vue?vue&type=script&setup=true&lang.ts
+var o = /*@__PURE__*/ i({
+	__name: "Kanban",
+	props: {
+		component: {},
+		widget: {}
+	},
+	setup(i) {
+		let o = i, s = t(() => o.component ?? o.widget?.kanban);
+		return (t, i) => s.value ? (a(), n(e, {
+			key: s.value.actionComponent,
+			board: s.value
+		}, null, 8, ["board"])) : r("", !0);
+	}
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=Kanban.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/kanban/Kanban.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","KanbanBoard","_createCommentVNode","KanbanBoard_default","Kanban_vue_vue_type_script_setup_true_lang_default","props","__props","board","computed","openBlock","createBlock","createCommentVNode"],"sources":["../../../src/components/kanban/Kanban.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanSchema, KanbanWidgetSchema } from '@alfakit/core'\nimport { computed } from 'vue'\nimport KanbanBoard from './KanbanBoard.vue'\n\n/**\n * The board of a `KanbanPage` (schema component `kanban`) or a `KanbanWidget`\n * (alfasix/alfakit-kanban).\n */\nconst props = defineProps<{ component?: KanbanSchema; widget?: KanbanWidgetSchema }>()\nconst board = computed(() => props.component ?? props.widget?.kanban)\n</script>\n\n<template>\n  <KanbanBoard v-if=\"board\" :key=\"board.actionComponent\" :board=\"board\" />\n</template>\n"],"mappings":";;;;;;;;;;EASA,IAAMM,IAAQC,GACRC,IAAQC,QAAeH,EAAM,aAAaA,EAAM,QAAQ,MAAM;mBAI/CE,EAAA,SAAnBR,EAAA,GAAAC,EAAwEC,GAAA;GAA7C,KAAKM,EAAA,MAAM;GAAkB,OAAOA,EAAA"}

package/dist/components/kanban/KanbanBoard.js

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

package/dist/components/kanban/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","names":["_sfc_main","KanbanBoard_vue_vue_type_script_setup_true_lang_default","KanbanBoard_default"],"sources":["../../../src/components/kanban/KanbanBoard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { KanbanEnvironment, KanbanSchema } from '@alfakit/core'\nimport {\n  KanbanController,\n  attachKanbanPointer,\n  clientErrorNotification,\n  createKanbanFiltersStore,\n  kanbanActiveFilters,\n  kanbanCardsIn,\n  kanbanInitials,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/vue3'\nimport { ChevronRightIcon, SearchIcon } from '@lucide/vue'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, useId, watch } from 'vue'\nimport { useStore } from '../../composables/use-store'\nimport { useActionRunner, useDirection, usePanel, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { showToast } from '../notifications/flash-toasts'\nimport Avatar from '../ui/Avatar.vue'\nimport AvatarFallback from '../ui/AvatarFallback.vue'\nimport AvatarImage from '../ui/AvatarImage.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\nimport Card from '../ui/Card.vue'\nimport CardTitle from '../ui/CardTitle.vue'\nimport Input from '../ui/Input.vue'\nimport Spinner from '../ui/Spinner.vue'\nimport KanbanCard from './KanbanCard.vue'\nimport KanbanColumnHeader from './KanbanColumnHeader.vue'\nimport KanbanFilters from './KanbanFilters.vue'\n\n/**\n * Cards move by dragging (mouse, pen, touch) or with the keyboard, and every move is\n * saved in one request.\n */\nconst props = defineProps<{ board: KanbanSchema }>()\n\nconst runner = useActionRunner()\nconst page = usePageActionContext()\nconst panel = usePanel()\nconst t = useT()\nconst direction = useDirection()\nconst labelId = useId()\nconst instructionsId = useId()\n\nconst environment = (): KanbanEnvironment => ({\n  runner,\n  token: page.token,\n  t,\n  notify: (notifications) => notifications.forEach((notification) => showToast(notification)),\n  error: (message) => showToast(clientErrorNotification('kanban', message)),\n  visit: (url) => router.visit(url),\n})\n\nconst controller = new KanbanController(toRaw(props.board), environment())\nconst filters = createKanbanFiltersStore(\n  toRaw(props.board),\n  page.token,\n  panel.value.endpoints.schemaOptions,\n)\nconst state = useStore(controller.store)\nconst root = ref<{ $el: HTMLElement } | null>(null)\nconst cards = new Map<string, HTMLElement>()\nconst focused = ref<string | null>(null)\nconst search = ref(state.value.search)\nlet detach: (() => void) | null = null\nlet stopPolling: (() => void) | null = null\n\nwatch(\n  () => props.board,\n  (board) => controller.setBoard(toRaw(board)),\n)\nwatch(\n  () => state.value.search,\n  (value) => {\n    if (value !== search.value) search.value = value\n  },\n)\n\nonMounted(() => {\n  const element = root.value?.$el\n\n  if (element instanceof HTMLElement) detach = attachKanbanPointer(element, controller)\n\n  stopPolling = controller.startPolling()\n})\n\nonBeforeUnmount(() => {\n  detach?.()\n  stopPolling?.()\n  controller.destroy()\n  filters?.destroy()\n})\n\nconst schema = computed(() => {\n  // Re-read when the state changes (the controller swaps its schema with the board).\n  void state.value.columns\n\n  return controller.schema\n})\nconst lanes = computed(() => {\n  void state.value.columns\n\n  return controller.lanes()\n})\nconst filtered = computed(\n  () => state.value.search !== '' || kanbanActiveFilters(state.value.filters) > 0,\n)\nconst keys = computed(() =>\n  state.value.columns.flatMap((column) => column.cards.map((card) => card.key)),\n)\nconst current = computed(() =>\n  focused.value !== null && keys.value.includes(focused.value)\n    ? focused.value\n    : (keys.value[0] ?? null),\n)\nconst template = computed(() =>\n  state.value.columns\n    .map((column) => (state.value.collapsed.has(column.key) ? '3.25rem' : 'minmax(16rem, 20rem)'))\n    .join(' '),\n)\n\nconst setCard = (key: string) => (element: unknown) => {\n  if (element instanceof HTMLElement) cards.set(key, element)\n  else cards.delete(key)\n}\n\nconst focus = (key: string | undefined) => {\n  if (!key) return\n  focused.value = key\n  void nextTick(() => cards.get(key)?.focus())\n}\n\n// A card picked up with the keyboard moves to another list: keep the focus on it.\nwatch(\n  () => state.value.picked,\n  (picked) => {\n    if (picked?.via !== 'keyboard') return\n\n    void nextTick(() => {\n      const element = cards.get(picked.key)\n\n      if (element && document.activeElement !== element) element.focus()\n    })\n  },\n)\n\nconst onKeyDown = (key: string, event: KeyboardEvent) => {\n  if (event.target !== event.currentTarget) return\n\n  const result = controller.handleKey(key, event, direction.value)\n\n  if (!result.handled) return\n\n  event.preventDefault()\n\n  if (result.open) controller.open(key)\n  else focus(result.focus)\n}\n\nconst onSearch = (value: string) => {\n  search.value = value\n  controller.setSearch(value)\n}\n\nconst laneCount = (lane: string) =>\n  state.value.columns.reduce((sum, column) => sum + kanbanCardsIn(column, lane).length, 0)\n</script>\n\n<template>\n  <Card ref=\"root\" role=\"region\" :aria-labelledby=\"labelId\" class=\"gap-3 py-4\" data-slot=\"kanban\">\n    <div class=\"flex flex-wrap items-center gap-2 px-4\" data-slot=\"kanban-toolbar\">\n      <CardTitle v-if=\"schema.heading\" :id=\"labelId\" class=\"text-base\">{{\n        schema.heading\n      }}</CardTitle>\n      <span v-else :id=\"labelId\" class=\"sr-only\">{{ t('kanban.label', {}, 'Kanban board') }}</span>\n      <div class=\"ms-auto flex w-full flex-wrap items-center gap-2 sm:w-auto\">\n        <Spinner v-if=\"state.loading\" class=\"size-4\" />\n        <div v-if=\"schema.searchable\" class=\"relative w-full sm:w-64\">\n          <SearchIcon\n            class=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n            aria-hidden=\"true\"\n          />\n          <Input\n            type=\"search\"\n            :model-value=\"search\"\n            class=\"h-8 ps-8\"\n            :placeholder=\"t('kanban.search_placeholder', {}, 'Search…')\"\n            :aria-label=\"t('kanban.search', {}, 'Search cards')\"\n            @update:model-value=\"onSearch\"\n          />\n        </div>\n        <KanbanFilters v-if=\"filters\" :controller=\"controller\" :store=\"filters\" />\n      </div>\n    </div>\n    <p :id=\"instructionsId\" class=\"sr-only\">\n      {{\n        t(\n          'kanban.instructions',\n          {},\n          'Press Space to pick up a card. While it is picked up, use the arrow keys to move it, Space to drop it and Escape to cancel.',\n        )\n      }}\n    </p>\n    <div\n      class=\"relative overflow-x-auto overscroll-x-contain px-4 pb-2\"\n      data-slot=\"kanban-scroller\"\n    >\n      <div class=\"grid w-max min-w-full snap-x gap-3\" :style=\"{ gridTemplateColumns: template }\">\n        <KanbanColumnHeader\n          v-for=\"column in state.columns\"\n          :id=\"`${labelId}-column-${column.key}`\"\n          :key=\"column.key\"\n          :column=\"column\"\n          :collapsed=\"state.collapsed.has(column.key)\"\n          :creatable=\"Boolean(column.creatable && schema.createAction)\"\n          :filtered=\"filtered\"\n          @toggle=\"controller.toggleColumn(column.key)\"\n          @create=\"controller.create(column.key)\"\n        />\n        <template v-for=\"lane in lanes\" :key=\"lane?.key ?? '__board'\">\n          <div\n            v-if=\"lane\"\n            class=\"flex items-center gap-2 pt-2\"\n            style=\"grid-column: 1 / -1\"\n            data-slot=\"kanban-lane\"\n            :data-lane=\"lane.key\"\n          >\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-expanded=\"!state.collapsedLanes.has(lane.key)\"\n              :aria-label=\"\n                state.collapsedLanes.has(lane.key)\n                  ? t('kanban.expand_lane', { lane: lane.label }, 'Expand row :lane')\n                  : t('kanban.collapse_lane', { lane: lane.label }, 'Collapse row :lane')\n              \"\n              @click=\"controller.toggleLane(lane.key)\"\n            >\n              <ChevronRightIcon\n                :class=\"\n                  cn(\n                    'transition-transform rtl:rotate-180',\n                    !state.collapsedLanes.has(lane.key) && 'rotate-90 rtl:rotate-90',\n                  )\n                \"\n                aria-hidden=\"true\"\n              />\n            </Button>\n            <Avatar v-if=\"lane.avatar\" class=\"size-6\">\n              <AvatarImage :src=\"lane.avatar\" alt=\"\" />\n              <AvatarFallback>{{ kanbanInitials(lane.label) }}</AvatarFallback>\n            </Avatar>\n            <Icon v-else-if=\"lane.icon\" :name=\"lane.icon\" class=\"text-muted-foreground size-4\" />\n            <span :id=\"`${labelId}-lane-${lane.key}`\" class=\"text-sm font-semibold\">{{\n              lane.label\n            }}</span>\n            <Badge variant=\"secondary\" class=\"h-5 px-1.5 tabular-nums\">{{\n              laneCount(lane.key)\n            }}</Badge>\n          </div>\n          <template v-if=\"!lane || !state.collapsedLanes.has(lane.key)\">\n            <ul\n              v-for=\"column in state.columns\"\n              :key=\"column.key\"\n              role=\"list\"\n              :aria-labelledby=\"\n                [\n                  `${labelId}-column-${column.key}`,\n                  lane ? `${labelId}-lane-${lane.key}` : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(' ')\n              \"\n              data-slot=\"kanban-dropzone\"\n              :data-column=\"column.key\"\n              :data-lane=\"lane?.key\"\n              :data-refused=\"state.picked && state.refused?.column === column.key ? '' : undefined\"\n              :class=\"\n                cn(\n                  'bg-muted/40 flex min-h-24 flex-col gap-2 rounded-lg p-2',\n                  lane === null && 'max-h-[70vh] overflow-y-auto',\n                )\n              \"\n            >\n              <template v-if=\"!state.collapsed.has(column.key)\">\n                <KanbanCard\n                  v-for=\"card in kanbanCardsIn(column, lane?.key ?? null)\"\n                  :key=\"card.key\"\n                  :card=\"card\"\n                  :board=\"schema\"\n                  :token=\"page.token\"\n                  :current=\"current === card.key\"\n                  :picked=\"state.picked?.key === card.key ? state.picked.via : undefined\"\n                  :saving=\"state.saving.has(card.key)\"\n                  :described-by=\"instructionsId\"\n                  :set-ref=\"setCard(card.key)\"\n                  @focus=\"focused = card.key\"\n                  @keydown=\"onKeyDown(card.key, $event)\"\n                  @open=\"controller.open(card.key)\"\n                />\n                <li\n                  v-if=\"kanbanCardsIn(column, lane?.key ?? null).length === 0\"\n                  class=\"text-muted-foreground rounded-md border border-dashed px-2 py-6 text-center text-xs\"\n                  data-slot=\"kanban-empty\"\n                >\n                  {{\n                    filtered\n                      ? t('kanban.no_results', {}, 'No cards match')\n                      : (column.emptyState ?? t('kanban.empty', {}, 'No cards'))\n                  }}\n                </li>\n                <li\n                  v-if=\"lane === null && column.total > column.cards.length\"\n                  class=\"text-muted-foreground px-2 text-center text-xs\"\n                >\n                  {{\n                    t(\n                      'kanban.more_cards',\n                      { count: column.total - column.cards.length },\n                      '+:count more',\n                    )\n                  }}\n                </li>\n              </template>\n            </ul>\n          </template>\n        </template>\n      </div>\n    </div>\n    <div class=\"sr-only\" role=\"status\" aria-live=\"polite\">{{ state.announcement }}</div>\n  </Card>\n</template>\n"],"mappings":""}

package/dist/components/kanban/KanbanBoard.vue.d.ts

@@ -0,0 +1,11 @@
+import type { KanbanSchema } from '@alfakit/core';
+/**
+ * Cards move by dragging (mouse, pen, touch) or with the keyboard, and every move is
+ * saved in one request.
+ */
+type __VLS_Props = {
+    board: KanbanSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=KanbanBoard.vue.d.ts.map

package/dist/components/kanban/KanbanBoard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/kanban/KanbanBoard.vue"],"names":[],"mappings":"AAkVA,OAAO,KAAK,EAAqB,YAAY,EAAE,MAAM,eAAe,CAAA;AAgCpE;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,YAAY,CAAA;CAAE,CAAC;;AAuqB3C,wBAMG"}