@templatical/editor 0.26.3 → 0.27.0

package/dist/CommentsSidebar-BoTIxpLE.js

@@ -0,0 +1,481 @@
+import { B as e, Dt as t, L as n, Ot as r, T as i, X as a, c as o, d as s, g as c, h as ee, j as l, k as u, kt as d, l as f, r as p, rt as m, s as h, u as g, v as _, z as v } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { a as y, t as b } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
+import { W as te, h as ne } from "./keys-BxixS0TN.js";
+import { t as re } from "./useI18n-BfXff_Sy.js";
+import { t as x } from "./createLucideIcon-L-wQXW_R.js";
+import { t as ie } from "./check-DZbmkMQe.js";
+import { t as ae } from "./chevron-down-nYScOLeZ.js";
+import { t as oe } from "./chevron-up-CpYpDLnc.js";
+import { t as S } from "./loader-circle-DqTxB7Kr.js";
+import { t as C } from "./message-circle-BZ7YpB22.js";
+import { t as w } from "./pencil-DmbRhTJu.js";
+import { t as T } from "./send-B-wasJJC.js";
+import { t as E } from "./trash-2-C0shEPry.js";
+import { t as D } from "./x-BjTlFqRv.js";
+import { t as O } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as se } from "./formatRelativeTime-CtUU-QZ8.js";
+var ce = x("circle-check", [["circle", {
+	cx: "12",
+	cy: "12",
+	r: "10",
+	key: "1mglay"
+}], ["path", {
+	d: "m9 12 2 2 4-4",
+	key: "dzmm74"
+}]]), le = x("reply", [["path", {
+	d: "M20 18v-2a4 4 0 0 0-4-4H4",
+	key: "5vmcpk"
+}], ["path", {
+	d: "m9 17-5-5 5-5",
+	key: "nvlc11"
+}]]), ue = {
+	key: 0,
+	"data-testid": "comments-sidebar",
+	class: "tpl-comments-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
+}, de = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, fe = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, pe = {
+	key: 0,
+	class: "tpl:ml-1 tpl:inline-flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]"
+}, me = { class: "tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2" }, he = { class: "tpl:flex-1 tpl:overflow-y-auto" }, ge = {
+	key: 0,
+	class: "tpl:flex tpl:h-full tpl:items-center tpl:justify-center"
+}, _e = {
+	key: 1,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:px-6 tpl:text-center"
+}, ve = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, ye = {
+	key: 2,
+	class: "tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3"
+}, be = { class: "tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3" }, xe = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Se = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, Ce = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, we = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, Te = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
+}, Ee = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, De = ["title", "onClick"], Oe = ["title", "onClick"], ke = ["title", "onClick"], Ae = {
+	key: 0,
+	class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]"
+}, je = {
+	key: 0,
+	class: "tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]"
+}, Me = ["onClick"], Ne = {
+	key: 2,
+	class: "tpl:mt-2"
+}, Pe = ["onKeydown"], Fe = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, Ie = ["disabled", "onClick"], Le = {
+	key: 3,
+	class: "tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
+}, Re = {
+	key: 4,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]"
+}, ze = { class: "tpl:flex-1" }, Be = ["onClick"], Ve = {
+	key: 5,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2"
+}, He = ["title", "onClick"], Ue = ["onClick"], We = {
+	key: 0,
+	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
+}, Ge = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Ke = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, qe = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Je = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, Ye = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
+}, Xe = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, Ze = ["title", "onClick"], Qe = ["title", "onClick"], $e = {
+	key: 0,
+	class: "tpl:mt-1.5"
+}, et = ["onKeydown"], tt = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, nt = ["disabled", "onClick"], rt = {
+	key: 1,
+	class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
+}, it = {
+	key: 2,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]"
+}, at = { class: "tpl:flex-1" }, ot = ["onClick"], st = {
+	key: 0,
+	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
+}, ct = { class: "tpl-comments-input-wrapper tpl-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, lt = ["placeholder", "onKeydown"], ut = ["disabled", "onClick"], dt = {
+	key: 0,
+	class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]"
+}, ft = {
+	key: 0,
+	class: "tpl:flex tpl:min-h-[68px] tpl:items-center tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)]"
+}, pt = {
+	key: 1,
+	class: "tpl-comments-input-wrapper tpl-focus-ring-host tpl:flex tpl:min-h-[68px] tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]"
+}, mt = ["placeholder", "disabled"], ht = ["disabled"], k = /*#__PURE__*/ O(/* @__PURE__ */ _({
+	__name: "CommentsSidebar",
+	props: {
+		visible: { type: Boolean },
+		feature: {}
+	},
+	emits: ["close"],
+	setup(_, { expose: x, emit: O }) {
+		let k = _, gt = O, { t: A, format: j } = re(), M = te(ne, "CommentsSidebar"), N = h(() => k.feature.headless), P = a("unresolved"), F = a(""), I = a(null), L = a(""), R = a(null), z = a(""), B = a(/* @__PURE__ */ new Set()), V = a(null), H = a(null), U = h(() => k.feature.filterBlockId.value);
+		n(U, (e) => {
+			e && (P.value = "block");
+		}, { immediate: !0 });
+		let _t = h(() => N.value.isLoading.value && N.value.comments.value.length === 0), vt = h(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of M.content.value.blocks) if (e.add(t.id), t.type === "section") for (let n of t.children) for (let t of n) e.add(t.id);
+			return e;
+		});
+		function yt(e) {
+			return e ? !vt.value.has(e) : !1;
+		}
+		let bt = h(() => P.value !== "block" || !U.value ? !1 : k.feature.capability.isBlockSaved(U.value) === !1), W = h(() => {
+			let e = N.value.comments.value;
+			return P.value === "unresolved" ? e = e.filter((e) => !e.resolvedAt) : P.value === "block" && U.value && (e = e.filter((e) => e.blockId === U.value)), e;
+		});
+		n(() => M.state.selectedBlockId, (e) => {
+			P.value === "block" && e && (k.feature.filterBlockId.value = e);
+		});
+		function G(e, t) {
+			P.value = e, k.feature.filterBlockId.value = e === "block" ? t ?? null : null;
+		}
+		function xt(e) {
+			G("block", e);
+		}
+		function St(e) {
+			B.value.has(e) ? B.value.delete(e) : B.value.add(e);
+		}
+		function Ct(e) {
+			I.value = e, L.value = "", R.value = null, B.value.has(e) || B.value.add(e);
+		}
+		function wt() {
+			I.value = null, L.value = "";
+		}
+		function K(e) {
+			R.value = e.id, z.value = e.body, I.value = null;
+		}
+		function q() {
+			R.value = null, z.value = "";
+		}
+		function J(e) {
+			V.value = e;
+		}
+		function Y() {
+			V.value = null;
+		}
+		async function X() {
+			let e = F.value.trim();
+			if (!e || !N.value.canCreate.value) return;
+			let t = P.value === "block" ? U.value : void 0;
+			try {
+				await N.value.create({
+					body: e,
+					blockId: t ?? void 0
+				}), F.value = "";
+			} catch {}
+		}
+		async function Z(e) {
+			let t = L.value.trim();
+			if (!t || !N.value.canCreate.value) return;
+			let n = N.value.find(e);
+			try {
+				await N.value.create({
+					body: t,
+					blockId: n?.blockId ?? void 0,
+					parentId: e
+				}), I.value = null, L.value = "";
+			} catch {}
+		}
+		async function Q(e) {
+			let t = z.value.trim();
+			if (t) try {
+				await N.value.update(e, { body: t }), R.value = null, z.value = "";
+			} catch {}
+		}
+		async function Tt(e) {
+			try {
+				await N.value.remove(e);
+			} catch {}
+			V.value = null;
+		}
+		async function Et(e) {
+			try {
+				await N.value.setResolved(e.id, !e.resolvedAt);
+			} catch {}
+		}
+		function Dt(e) {
+			return N.value.canUpdate.value && N.value.isOwn(e);
+		}
+		function Ot(e) {
+			return N.value.canDelete.value && N.value.isOwn(e);
+		}
+		function kt(e) {
+			return se(e, A.time) ?? e;
+		}
+		function At(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), X());
+		}
+		function jt(e, t) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Z(t));
+		}
+		function $(e, t) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Q(t)), e.key === "Escape" && q();
+		}
+		function Mt() {
+			i(() => {
+				H.value?.focus();
+			});
+		}
+		return x({
+			filterByBlock: xt,
+			focusNewComment: Mt
+		}), (n, i) => (u(), f(b, {
+			"enter-active-class": "tpl-comments-slide-enter-active",
+			"enter-from-class": "tpl:translate-x-full",
+			"enter-to-class": "tpl:translate-x-0",
+			"leave-active-class": "tpl-comments-slide-leave-active",
+			"leave-from-class": "tpl:translate-x-0",
+			"leave-to-class": "tpl:translate-x-full"
+		}, {
+			default: v(() => [_.visible ? (u(), s("div", ue, [
+				o("div", de, [o("div", fe, [
+					c(m(C), {
+						size: 13,
+						"stroke-width": 2
+					}),
+					o("span", null, d(m(A).comments.title), 1),
+					_.feature.unresolvedCount.value > 0 ? (u(), s("span", pe, d(_.feature.unresolvedCount.value), 1)) : g("", !0)
+				]), o("button", {
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+					onClick: i[0] ||= (e) => gt("close")
+				}, [c(m(D), {
+					size: 14,
+					"stroke-width": 2
+				})])]),
+				o("div", me, [
+					o("button", {
+						class: t(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", P.value === "unresolved" ? "tpl-comment-filter--active" : ""]),
+						"data-testid": "comments-filter-unresolved",
+						onClick: i[1] ||= (e) => G("unresolved")
+					}, d(m(A).comments.filterUnresolved), 3),
+					o("button", {
+						class: t(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", P.value === "all" ? "tpl-comment-filter--active" : ""]),
+						"data-testid": "comments-filter-all",
+						onClick: i[2] ||= (e) => G("all")
+					}, d(m(A).comments.filterAll), 3),
+					m(M).state.selectedBlockId ? (u(), s("button", {
+						key: 0,
+						class: t(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors", P.value === "block" ? "tpl-comment-filter--active" : ""]),
+						onClick: i[3] ||= (e) => G("block", m(M).state.selectedBlockId ?? void 0)
+					}, d(m(A).comments.filterBlock), 3)) : g("", !0)
+				]),
+				o("div", he, [_t.value ? (u(), s("div", ge, [c(m(S), {
+					class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
+					size: 24,
+					"stroke-width": 2
+				})])) : W.value.length === 0 ? (u(), s("div", _e, [c(m(C), {
+					size: 32,
+					"stroke-width": 1.5,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), o("p", ve, d(P.value === "all" ? m(A).comments.noCommentsHint : m(A).comments.noComments), 1)])) : (u(), s("div", ye, [(u(!0), s(p, null, l(W.value, (n) => (u(), s("div", {
+					key: n.id,
+					class: "tpl-comment-thread",
+					"data-testid": "comment-thread"
+				}, [
+					o("div", be, [
+						o("div", xe, [o("div", Se, [
+							o("span", Ce, d(N.value.isOwn(n) ? m(A).comments.ownedByYou : n.author.name), 1),
+							o("span", we, d(kt(n.createdAt)), 1),
+							n.updatedAt ? (u(), s("span", Te, " (" + d(m(A).comments.edited) + ") ", 1)) : g("", !0)
+						]), o("div", Ee, [
+							N.value.canResolve.value ? (u(), s("button", {
+								key: 0,
+								"data-testid": "comment-resolve",
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: n.resolvedAt ? m(A).comments.unresolve : m(A).comments.resolve,
+								onClick: (e) => Et(n)
+							}, [c(m(ce), {
+								size: 13,
+								"stroke-width": 2,
+								class: "tpl-resolve-icon",
+								style: r({ color: n.resolvedAt ? "var(--tpl-primary)" : void 0 })
+							}, null, 8, ["style"])], 8, De)) : g("", !0),
+							Dt(n) ? (u(), s("button", {
+								key: 1,
+								"data-testid": "comment-edit",
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: m(A).comments.edit,
+								onClick: (e) => K(n)
+							}, [c(m(w), {
+								size: 12,
+								"stroke-width": 2
+							})], 8, Oe)) : g("", !0),
+							Ot(n) ? (u(), s("button", {
+								key: 2,
+								"data-testid": "comment-delete",
+								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: m(A).comments.delete,
+								onClick: (e) => J(n.id)
+							}, [c(m(E), {
+								size: 12,
+								"stroke-width": 2
+							})], 8, ke)) : g("", !0)
+						])]),
+						c(b, { name: "tpl-resolve" }, {
+							default: v(() => [n.resolvedAt ? (u(), s("div", Ae, [c(m(ie), {
+								size: 10,
+								"stroke-width": 2.5
+							}), o("span", null, d(m(j)(m(A).comments.resolvedBy, { name: n.resolvedBy?.name ?? "" })), 1)])) : g("", !0)]),
+							_: 2
+						}, 1024),
+						n.blockId && yt(n.blockId) ? (u(), s("span", je, d(m(A).comments.missingBlock), 1)) : n.blockId ? (u(), s("button", {
+							key: 1,
+							class: "tpl:mt-1 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
+							onClick: (e) => m(M).selectBlock(n.blockId ?? "")
+						}, d(m(A).comments.jumpToBlock), 9, Me)) : g("", !0),
+						R.value === n.id ? (u(), s("div", Ne, [e(o("textarea", {
+							"onUpdate:modelValue": i[4] ||= (e) => z.value = e,
+							class: "tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+							rows: "3",
+							onKeydown: (e) => $(e, n.id)
+						}, null, 40, Pe), [[y, z.value]]), o("div", Fe, [o("button", {
+							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
+							disabled: !z.value.trim() || N.value.isSubmitting.value,
+							onClick: (e) => Q(n.id)
+						}, d(m(A).comments.save), 9, Ie), o("button", {
+							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+							onClick: i[5] ||= (e) => q()
+						}, d(m(A).comments.cancel), 1)])])) : (u(), s("p", Le, d(n.body), 1)),
+						V.value === n.id ? (u(), s("div", Re, [
+							o("span", ze, d(m(A).comments.deleteConfirm), 1),
+							o("button", {
+								class: "tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]",
+								"data-testid": "comment-delete-confirm",
+								onClick: (e) => Tt(n.id)
+							}, d(m(A).comments.delete), 9, Be),
+							o("button", {
+								class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+								onClick: i[6] ||= (e) => Y()
+							}, d(m(A).comments.cancel), 1)
+						])) : g("", !0),
+						R.value !== n.id && V.value !== n.id ? (u(), s("div", Ve, [N.value.canCreate.value ? (u(), s("button", {
+							key: 0,
+							"data-testid": "comment-reply",
+							class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+							title: m(A).comments.reply,
+							onClick: (e) => Ct(n.id)
+						}, [c(m(le), {
+							size: 13,
+							"stroke-width": 2,
+							class: "tpl:text-[var(--tpl-primary)]"
+						})], 8, He)) : g("", !0), (n.replies?.length ?? 0) > 0 ? (u(), s("button", {
+							key: 1,
+							class: "tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+							onClick: (e) => St(n.id)
+						}, [B.value.has(n.id) ? (u(), f(m(oe), {
+							key: 0,
+							size: 11,
+							"stroke-width": 2
+						})) : (u(), f(m(ae), {
+							key: 1,
+							size: 11,
+							"stroke-width": 2
+						})), ee(" " + d((n.replies?.length ?? 0) === 1 ? m(j)(m(A).comments.replyOne, { count: String(n.replies?.length ?? 0) }) : m(j)(m(A).comments.replyMany, { count: String(n.replies?.length ?? 0) })), 1)], 8, Ue)) : g("", !0)])) : g("", !0)
+					]),
+					c(b, { name: "tpl-replies" }, {
+						default: v(() => [B.value.has(n.id) && (n.replies?.length ?? 0) > 0 ? (u(), s("div", We, [(u(!0), s(p, null, l(n.replies, (r, a) => (u(), s("div", {
+							key: r.id,
+							class: t(["tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5", a < (n.replies?.length ?? 0) - 1 ? "tpl:mb-2" : ""])
+						}, [
+							o("div", Ge, [o("div", Ke, [
+								o("span", qe, d(N.value.isOwn(r) ? m(A).comments.ownedByYou : r.author.name), 1),
+								o("span", Je, d(kt(r.createdAt)), 1),
+								r.updatedAt ? (u(), s("span", Ye, " (" + d(m(A).comments.edited) + ") ", 1)) : g("", !0)
+							]), o("div", Xe, [Dt(r) ? (u(), s("button", {
+								key: 0,
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: m(A).comments.edit,
+								onClick: (e) => K(r)
+							}, [c(m(w), {
+								size: 11,
+								"stroke-width": 2
+							})], 8, Ze)) : g("", !0), Ot(r) ? (u(), s("button", {
+								key: 1,
+								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors",
+								title: m(A).comments.delete,
+								onClick: (e) => J(r.id)
+							}, [c(m(E), {
+								size: 11,
+								"stroke-width": 2
+							})], 8, Qe)) : g("", !0)])]),
+							R.value === r.id ? (u(), s("div", $e, [e(o("textarea", {
+								"onUpdate:modelValue": i[7] ||= (e) => z.value = e,
+								class: "tpl:w-full tpl:resize-none tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:font-sans tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+								rows: "2",
+								onKeydown: (e) => $(e, r.id)
+							}, null, 40, et), [[y, z.value]]), o("div", tt, [o("button", {
+								class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
+								disabled: !z.value.trim() || N.value.isSubmitting.value,
+								onClick: (e) => Q(r.id)
+							}, d(m(A).comments.save), 9, nt), o("button", {
+								class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+								onClick: i[8] ||= (e) => q()
+							}, d(m(A).comments.cancel), 1)])])) : (u(), s("p", rt, d(r.body), 1)),
+							V.value === r.id ? (u(), s("div", it, [
+								o("span", at, d(m(A).comments.deleteConfirm), 1),
+								o("button", {
+									class: "tpl:rounded tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-medium tpl:bg-[var(--tpl-danger)] tpl:text-[var(--tpl-bg)]",
+									"data-testid": "comment-delete-confirm",
+									onClick: (e) => Tt(r.id)
+								}, d(m(A).comments.delete), 9, ot),
+								o("button", {
+									class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+									onClick: i[9] ||= (e) => Y()
+								}, d(m(A).comments.cancel), 1)
+							])) : g("", !0)
+						], 2))), 128))])) : g("", !0)]),
+						_: 2
+					}, 1024),
+					c(b, { name: "tpl-replies" }, {
+						default: v(() => [I.value === n.id ? (u(), s("div", st, [o("div", ct, [
+							e(o("textarea", {
+								"onUpdate:modelValue": i[10] ||= (e) => L.value = e,
+								class: "tpl:max-h-24 tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]",
+								placeholder: m(A).comments.replyPlaceholder,
+								rows: "2",
+								onKeydown: (e) => jt(e, n.id)
+							}, null, 40, lt), [[y, L.value]]),
+							o("button", {
+								class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+								disabled: !L.value.trim() || N.value.isSubmitting.value,
+								onClick: (e) => Z(n.id)
+							}, [c(m(T), {
+								size: 14,
+								"stroke-width": 2
+							})], 8, ut),
+							o("button", {
+								class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:text-[var(--tpl-text-muted)]",
+								onClick: i[11] ||= (e) => wt()
+							}, [c(m(D), {
+								size: 14,
+								"stroke-width": 2
+							})])
+						])])) : g("", !0)]),
+						_: 2
+					}, 1024)
+				]))), 128))]))]),
+				N.value.canCreate.value ? (u(), s("div", dt, [bt.value ? (u(), s("div", ft, d(m(A).comments.saveTemplateFirst), 1)) : (u(), s("div", pt, [e(o("textarea", {
+					ref_key: "newCommentInput",
+					ref: H,
+					"onUpdate:modelValue": i[12] ||= (e) => F.value = e,
+					class: "tpl:max-h-24 tpl:min-h-[48px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-xs tpl:outline-none tpl:text-[var(--tpl-text)]",
+					"data-testid": "comments-input",
+					placeholder: m(A).comments.placeholder,
+					disabled: N.value.isSubmitting.value,
+					rows: "2",
+					onKeydown: At
+				}, null, 40, mt), [[y, F.value]]), o("button", {
+					class: "tpl-comments-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+					"data-testid": "comments-send",
+					disabled: !F.value.trim() || N.value.isSubmitting.value,
+					onClick: X
+				}, [N.value.isSubmitting.value ? (u(), f(m(S), {
+					key: 0,
+					class: "tpl-spinner",
+					size: 16,
+					"stroke-width": 2
+				})) : (u(), f(m(T), {
+					key: 1,
+					size: 16,
+					"stroke-width": 2
+				}))], 8, ht)]))])) : g("", !0)
+			])) : g("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-40431726"]]);
+//#endregion
+export { k as default };

package/dist/{cdn/chunks/CountdownBlock-vLTkTI9e.js → CountdownBlock-BFX8iU90.js}

@@ -1,6 +1,6 @@
-import { M as e, P as t, Z as n, ct as r, f as i, g as a, h as o, it as s, lt as c, p as l, u, x as d } from "./draggable-DCs9qL-b.js";
-import { g as f } from "./dist-C6z8AjBC.js";
-import { t as p } from "./useI18n-UMs0F71x.js";
+import { Ot as e, X as t, c as n, d as r, j as i, k as a, kt as o, r as s, rt as c, s as l, u, v as d } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { p as f } from "./dist-CqcGTIiX.js";
+import { t as p } from "./useI18n-BfXff_Sy.js";
 //#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
 var m = {
 	key: 0,
@@ -15,15 +15,15 @@ var m = {
 		viewport: {}
 	},
 	setup(d) {
-		let _ = d, { t: v } = p(), y = n(Date.now());
+		let _ = d, { t: v } = p(), y = t(Date.now());
 		f(() => {
 			y.value = Date.now();
 		}, 1e3);
-		let b = i(() => {
+		let b = l(() => {
 			if (!_.block.targetDate) return null;
 			let e = new Date(_.block.targetDate);
 			return isNaN(e.getTime()) ? null : e.getTime();
-		}), x = i(() => b.value ? y.value >= b.value : !1), S = i(() => {
+		}), x = l(() => b.value ? y.value >= b.value : !1), S = l(() => {
 			if (!b.value || x.value) return {
 				days: 0,
 				hours: 0,
@@ -37,7 +37,7 @@ var m = {
 				minutes: Math.floor(t % 3600 / 60),
 				seconds: t % 60
 			};
-		}), C = i(() => {
+		}), C = l(() => {
 			let e = [];
 			return _.block.showDays && e.push({
 				value: String(S.value.days).padStart(2, "0"),
@@ -52,42 +52,40 @@ var m = {
 				value: String(S.value.seconds).padStart(2, "0"),
 				label: _.block.labelSeconds
 			}), e;
-		}), w = i(() => ({
+		}), w = l(() => ({
 			backgroundColor: _.block.backgroundColor,
 			fontFamily: _.block.fontFamily || "inherit"
-		})), T = i(() => ({
+		})), T = l(() => ({
 			fontSize: `${_.block.digitFontSize}px`,
 			fontWeight: "bold",
 			color: _.block.digitColor,
 			lineHeight: "1.2"
-		})), E = i(() => ({
+		})), E = l(() => ({
 			fontSize: `${_.block.labelFontSize}px`,
 			color: _.block.labelColor,
 			marginTop: "4px"
-		})), D = i(() => ({
+		})), D = l(() => ({
 			fontSize: `${_.block.digitFontSize}px`,
 			color: _.block.digitColor,
 			fontFamily: _.block.fontFamily || "inherit"
 		}));
-		return (n, i) => d.block.targetDate ? x.value && d.block.hideOnExpiry ? (e(), a("div", h, c(s(v).countdown.hidden), 1)) : x.value ? (e(), a("div", {
+		return (t, l) => d.block.targetDate ? x.value && d.block.hideOnExpiry ? (a(), r("div", h, o(c(v).countdown.hidden), 1)) : x.value ? (a(), r("div", {
 			key: 2,
-			style: r(w.value),
+			style: e(w.value),
 			class: "tpl:py-4 tpl:text-center"
-		}, [l("span", { style: r({
+		}, [n("span", { style: e({
 			fontSize: `${d.block.digitFontSize}px`,
 			color: d.block.digitColor
-		}) }, c(d.block.expiredMessage), 5)], 4)) : (e(), a("div", {
+		}) }, o(d.block.expiredMessage), 5)], 4)) : (a(), r("div", {
 			key: 3,
-			style: r(w.value),
+			style: e(w.value),
 			class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4"
-		}, [(e(!0), a(u, null, t(C.value, (t, n) => (e(), a(u, { key: t.label }, [n > 0 ? (e(), a("span", {
+		}, [(a(!0), r(s, null, i(C.value, (t, i) => (a(), r(s, { key: t.label }, [i > 0 ? (a(), r("span", {
 			key: 0,
-			style: r(D.value),
+			style: e(D.value),
 			class: "tpl:self-start"
-		}, c(d.block.separator), 5)) : o("", !0), l("div", g, [l("div", { style: r(T.value) }, c(t.value), 5), l("div", { style: r(E.value) }, c(t.label), 5)])], 64))), 128))], 4)) : (e(), a("div", m, c(s(v).countdown.setDate), 1));
+		}, o(d.block.separator), 5)) : u("", !0), n("div", g, [n("div", { style: e(T.value) }, o(t.value), 5), n("div", { style: e(E.value) }, o(t.label), 5)])], 64))), 128))], 4)) : (a(), r("div", m, o(c(v).countdown.setDate), 1));
 	}
 });
 //#endregion
 export { _ as default };
-
-//# sourceMappingURL=CountdownBlock-vLTkTI9e.js.map