@templatical/editor 0.0.6 → 0.1.1

package/dist/{CollaboratorBar-D2Gu5Xj2.js → CollaboratorBar-CWVdp2Y6.js}

@@ -1,9 +1,9 @@
-import { t as e } from "./useI18n-D6m7ZUgY.js";
-import "./useEditorCore-ColJh1ST.js";
-import { n as t } from "./_plugin-vue_export-helper-5TQrnOhO.js";
-import { t as n } from "./readableTextColor-B809bF5J.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeStyle as u, openBlock as d, renderList as f, toDisplayString as p, unref as m } from "vue";
-var h = t("wifi-off", [
+import { M as e, Ot as t, P as n, S as r, _ as i, d as a, g as o, h as s, m as c, p as l, tt as u, wt as d } from "./vue.runtime.esm-bundler-DryoQb-v.js";
+import { t as f } from "./useI18n-B8CN2iWs.js";
+import "./useEditorCore-DMH2QpUL.js";
+import { n as p } from "./_plugin-vue_export-helper-OO6pH1Dh.js";
+import { t as m } from "./readableTextColor-CYCxm1jQ.js";
+var h = p("wifi-off", [
 	["path", {
 		d: "M12 20h.01",
 		key: "zekei9"
@@ -32,7 +32,7 @@ var h = t("wifi-off", [
 		d: "m2 2 20 20",
 		key: "1ooewy"
 	}]
-]), g = t("wifi", [
+]), g = p("wifi", [
 	["path", {
 		d: "M12 20h.01",
 		key: "zekei9"
@@ -52,43 +52,43 @@ var h = t("wifi-off", [
 ]), _ = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, v = ["title"], y = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:-space-x-1.5"
-}, b = ["title"], x = ["title"], S = 3, C = /* @__PURE__ */ l({
+}, b = ["title"], x = ["title"], S = 3, C = /* @__PURE__ */ r({
 	__name: "CollaboratorBar",
 	props: {
 		collaborators: {},
 		isConnected: { type: Boolean }
 	},
-	setup(t) {
-		let l = t, { t: C } = e(), w = i(() => l.collaborators.slice(0, S)), T = i(() => l.collaborators.slice(S)), E = i(() => T.value.length), D = i(() => T.value.map((e) => e.name).join("\n"));
+	setup(r) {
+		let p = r, { t: C } = f(), w = l(() => p.collaborators.slice(0, S)), T = l(() => p.collaborators.slice(S)), E = l(() => T.value.length), D = l(() => T.value.map((e) => e.name).join("\n"));
 		function O(e) {
 			let t = e.trim().split(/\s+/);
 			return t.length >= 2 ? (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase() : e.charAt(0).toUpperCase();
 		}
-		return (e, i) => (d(), s("div", _, [c("div", {
+		return (l, f) => (e(), i("div", _, [c("div", {
 			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]",
-			style: u({ color: t.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
-			title: t.isConnected ? m(C).collaboration.connected : m(C).collaboration.disconnected
-		}, [t.isConnected ? (d(), a(m(g), {
+			style: d({ color: r.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
+			title: r.isConnected ? u(C).collaboration.connected : u(C).collaboration.disconnected
+		}, [r.isConnected ? (e(), s(u(g), {
 			key: 0,
 			size: 12,
 			"stroke-width": 2
-		})) : (d(), a(m(h), {
+		})) : (e(), s(u(h), {
 			key: 1,
 			size: 12,
 			"stroke-width": 2
-		}))], 12, v), t.collaborators.length > 0 ? (d(), s("div", y, [(d(!0), s(r, null, f(w.value, (e) => (d(), s("div", {
-			key: e.id,
+		}))], 12, v), r.collaborators.length > 0 ? (e(), i("div", y, [(e(!0), i(a, null, n(w.value, (n) => (e(), i("div", {
+			key: n.id,
 			class: "tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:duration-150 tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]",
-			style: u({
-				backgroundColor: e.color,
-				color: m(n)(e.color)
+			style: d({
+				backgroundColor: n.color,
+				color: u(m)(n.color)
 			}),
-			title: e.name
-		}, p(O(e.name)), 13, b))), 128)), E.value > 0 ? (d(), s("div", {
+			title: n.name
+		}, t(O(n.name)), 13, b))), 128)), E.value > 0 ? (e(), i("div", {
 			key: 0,
 			class: "tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
 			title: D.value
-		}, " +" + p(E.value), 9, x)) : o("", !0)])) : o("", !0)]));
+		}, " +" + t(E.value), 9, x)) : o("", !0)])) : o("", !0)]));
 	}
 });
 //#endregion

package/dist/CommentsSidebar-CSPHhbQH.js

@@ -0,0 +1,439 @@
+import { Ct as e, H as t, M as n, O as r, Ot as i, P as a, S as o, V as s, Y as c, _ as l, b as u, d, g as f, h as p, m, p as h, s as g, t as _, tt as v, wt as ee, y as te, z as y } from "./vue.runtime.esm-bundler-DryoQb-v.js";
+import { T as b, c as ne, f as re, r as ie } from "./keys-CIw9mUI2.js";
+import { t as ae } from "./useI18n-B8CN2iWs.js";
+import { n as x, t as S } from "./_plugin-vue_export-helper-OO6pH1Dh.js";
+import { t as oe } from "./check-Bff5NzCh.js";
+import { t as se } from "./chevron-down-Bbv4SJwx.js";
+import { t as C } from "./loader-circle-BYeKJ3to.js";
+import { t as w } from "./message-circle-PhNlI7e7.js";
+import { t as T } from "./send-CJPSzbLO.js";
+import { t as ce } from "./trash-2-BY-xp5hg.js";
+import { t as le } from "./x-D-7GkO6Z.js";
+import { t as ue } from "./formatRelativeTime-BSpx5DHC.js";
+var de = x("chevron-up", [["path", {
+	d: "m18 15-6-6-6 6",
+	key: "153udz"
+}]]), fe = x("circle-check", [["circle", {
+	cx: "12",
+	cy: "12",
+	r: "10",
+	key: "1mglay"
+}], ["path", {
+	d: "m9 12 2 2 4-4",
+	key: "dzmm74"
+}]]), E = x("pencil", [["path", {
+	d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+	key: "1a8usu"
+}], ["path", {
+	d: "m15 5 4 4",
+	key: "1mk7zo"
+}]]), pe = 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"
+}]]), me = {
+	key: 0,
+	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)]"
+}, he = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, ge = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, _e = {
+	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-bg)]"
+}, ve = { class: "tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-2" }, ye = { class: "tpl:flex-1 tpl:overflow-y-auto" }, be = {
+	key: 0,
+	class: "tpl:flex tpl:h-full tpl:items-center tpl:justify-center"
+}, xe = {
+	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"
+}, Se = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, Ce = {
+	key: 2,
+	class: "tpl:flex tpl:flex-col tpl:gap-3 tpl:p-3"
+}, we = { class: "tpl-comment-card tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-3" }, Te = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Ee = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, De = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Oe = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, ke = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
+}, Ae = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, je = ["title", "onClick"], Me = ["title", "onClick"], Ne = ["title", "onClick"], Pe = {
+	key: 0,
+	class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1 tpl:text-[10px] tpl:text-[var(--tpl-primary)]"
+}, Fe = {
+	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)]"
+}, Ie = ["onClick"], Le = {
+	key: 2,
+	class: "tpl:mt-2"
+}, Re = ["onKeydown"], ze = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, Be = ["disabled", "onClick"], Ve = {
+	key: 3,
+	class: "tpl:mt-1.5 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
+}, He = {
+	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)]"
+}, Ue = { class: "tpl:flex-1" }, We = ["onClick"], Ge = {
+	key: 5,
+	class: "tpl:mt-2 tpl:flex tpl:items-center tpl:gap-2"
+}, Ke = ["title", "onClick"], qe = ["onClick"], Je = {
+	key: 0,
+	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
+}, Ye = { class: "tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, Xe = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, Ze = { class: "tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Qe = { class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, $e = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:italic tpl:text-[var(--tpl-text-dim)]"
+}, et = { class: "tpl:flex tpl:items-center tpl:gap-0.5" }, tt = ["title", "onClick"], nt = ["title", "onClick"], rt = {
+	key: 0,
+	class: "tpl:mt-1.5"
+}, it = ["onKeydown"], at = { class: "tpl:mt-1.5 tpl:flex tpl:gap-1.5" }, ot = ["disabled", "onClick"], st = {
+	key: 1,
+	class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:whitespace-pre-wrap tpl:text-[var(--tpl-text)]"
+}, ct = {
+	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)]"
+}, lt = { class: "tpl:flex-1" }, ut = ["onClick"], dt = {
+	key: 0,
+	class: "tpl-comment-replies tpl:ml-5 tpl:pl-3 tpl:pt-2"
+}, ft = { class: "tpl:flex tpl:items-end tpl:gap-2" }, pt = ["placeholder", "onKeydown"], mt = { class: "tpl:flex tpl:shrink-0 tpl:flex-col tpl:gap-1" }, ht = ["disabled", "onClick"], gt = { class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]" }, _t = {
+	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)]"
+}, vt = {
+	key: 1,
+	class: "tpl-comments-input-wrapper 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)]"
+}, yt = ["placeholder", "disabled"], bt = ["disabled"], D = /* @__PURE__ */ S(/* @__PURE__ */ o({
+	__name: "CommentsSidebar",
+	props: { visible: { type: Boolean } },
+	emits: ["close", "filterBlock"],
+	setup(o, { expose: x, emit: S }) {
+		let D = o, O = S, { t: k, format: A } = ae(), j = b(re, "CommentsSidebar"), xt = b(ie, "CommentsSidebar"), M = b(ne, "CommentsSidebar"), N = c("unresolved"), P = c(null), F = c(""), I = c(null), L = c(""), R = c(null), z = c(""), B = c(/* @__PURE__ */ new Set()), V = c(null), H = c(null), St = h(() => xt.userConfig?.id ?? null), Ct = h(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of j.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 wt(e) {
+			return e ? !Ct.value.has(e) : !1;
+		}
+		let Tt = h(() => N.value !== "block" || !P.value ? !1 : !(j.savedBlockIds?.value.has(P.value) ?? !0)), U = h(() => {
+			let e = M.comments.value;
+			return N.value === "unresolved" ? e = e.filter((e) => !e.resolved_at) : N.value === "block" && P.value && (e = e.filter((e) => e.block_id === P.value)), e;
+		});
+		y(() => D.visible, (e) => {
+			e && M.loadComments();
+		}), y(() => j.state.selectedBlockId, (e) => {
+			N.value === "block" && e && (P.value = e);
+		});
+		function W(e, t) {
+			N.value = e, P.value = e === "block" ? t ?? null : null;
+		}
+		function Et(e) {
+			W("block", e), O("filterBlock", e);
+		}
+		function Dt(e) {
+			B.value.has(e) ? B.value.delete(e) : B.value.add(e);
+		}
+		function Ot(e) {
+			I.value = e, L.value = "", R.value = null, B.value.has(e) || B.value.add(e);
+		}
+		function kt() {
+			I.value = null, L.value = "";
+		}
+		function G(e) {
+			R.value = e.id, z.value = e.body, I.value = null;
+		}
+		function K() {
+			R.value = null, z.value = "";
+		}
+		function q(e) {
+			V.value = e;
+		}
+		function J() {
+			V.value = null;
+		}
+		async function Y() {
+			let e = F.value.trim();
+			if (!e) return;
+			let t = N.value === "block" ? P.value : void 0;
+			await M.addComment(e, t ?? void 0), F.value = "";
+		}
+		async function X(e) {
+			let t = L.value.trim();
+			if (!t) return;
+			let n = M.comments.value.find((t) => t.id === e);
+			await M.addComment(t, n?.block_id ?? void 0, e), I.value = null, L.value = "";
+		}
+		async function Z(e) {
+			let t = z.value.trim();
+			t && (await M.editComment(e, t), R.value = null, z.value = "");
+		}
+		async function Q(e) {
+			await M.removeComment(e), V.value = null;
+		}
+		async function At(e) {
+			await M.toggleResolve(e);
+		}
+		function $(e) {
+			return e.author_identifier === St.value;
+		}
+		function jt(e) {
+			return ue(e, k.snapshotHistory) ?? e;
+		}
+		function Mt(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Y());
+		}
+		function Nt(e, t) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), X(t));
+		}
+		function Pt(e, t) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Z(t)), e.key === "Escape" && K();
+		}
+		function Ft() {
+			r(() => {
+				H.value?.focus();
+			});
+		}
+		return x({
+			filterByBlock: Et,
+			focusNewComment: Ft
+		}), (r, c) => (n(), p(_, {
+			"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: s(() => [o.visible ? (n(), l("div", me, [
+				m("div", he, [m("div", ge, [
+					u(v(w), {
+						size: 13,
+						"stroke-width": 2
+					}),
+					m("span", null, i(v(k).comments.title), 1),
+					v(M).unresolvedCount.value > 0 ? (n(), l("span", _e, i(v(M).unresolvedCount.value), 1)) : f("", !0)
+				]), m("button", {
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+					onClick: c[0] ||= (e) => O("close")
+				}, [u(v(le), {
+					size: 14,
+					"stroke-width": 2
+				})])]),
+				m("div", ve, [
+					m("button", {
+						class: e(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150", N.value === "unresolved" ? "tpl-comment-filter--active" : ""]),
+						onClick: c[1] ||= (e) => W("unresolved")
+					}, i(v(k).comments.filterUnresolved), 3),
+					m("button", {
+						class: e(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150", N.value === "all" ? "tpl-comment-filter--active" : ""]),
+						onClick: c[2] ||= (e) => W("all")
+					}, i(v(k).comments.filterAll), 3),
+					v(j).state.selectedBlockId ? (n(), l("button", {
+						key: 0,
+						class: e(["tpl-comment-filter tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150", N.value === "block" ? "tpl-comment-filter--active" : ""]),
+						onClick: c[3] ||= (e) => W("block", v(j).state.selectedBlockId ?? void 0)
+					}, i(v(k).comments.filterBlock), 3)) : f("", !0)
+				]),
+				m("div", ye, [v(M).isLoading.value ? (n(), l("div", be, [u(v(C), {
+					class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
+					size: 24,
+					"stroke-width": 2
+				})])) : U.value.length === 0 ? (n(), l("div", xe, [u(v(w), {
+					size: 32,
+					"stroke-width": 1.5,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), m("p", Se, i(N.value === "all" ? v(k).comments.noCommentsHint : v(k).comments.noComments), 1)])) : (n(), l("div", Ce, [(n(!0), l(d, null, a(U.value, (r) => (n(), l("div", {
+					key: r.id,
+					class: "tpl-comment-thread"
+				}, [
+					m("div", we, [
+						m("div", Te, [m("div", Ee, [
+							m("span", De, i($(r) ? v(k).comments.ownedByYou : r.author_name), 1),
+							m("span", Oe, i(jt(r.created_at)), 1),
+							r.updated_at === r.created_at ? f("", !0) : (n(), l("span", ke, " (" + i(v(k).comments.edited) + ") ", 1))
+						]), m("div", Ae, [
+							m("button", {
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
+								title: r.resolved_at ? v(k).comments.unresolve : v(k).comments.resolve,
+								onClick: (e) => At(r.id)
+							}, [u(v(fe), {
+								size: 13,
+								"stroke-width": 2,
+								class: "tpl-resolve-icon",
+								style: ee({ color: r.resolved_at ? "var(--tpl-primary)" : void 0 })
+							}, null, 8, ["style"])], 8, je),
+							$(r) ? (n(), l("button", {
+								key: 0,
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
+								title: v(k).comments.edit,
+								onClick: (e) => G(r)
+							}, [u(v(E), {
+								size: 12,
+								"stroke-width": 2
+							})], 8, Me)) : f("", !0),
+							$(r) ? (n(), l("button", {
+								key: 1,
+								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
+								title: v(k).comments.delete,
+								onClick: (e) => q(r.id)
+							}, [u(v(ce), {
+								size: 12,
+								"stroke-width": 2
+							})], 8, Ne)) : f("", !0)
+						])]),
+						u(_, { name: "tpl-resolve" }, {
+							default: s(() => [r.resolved_at ? (n(), l("div", Pe, [u(v(oe), {
+								size: 10,
+								"stroke-width": 2.5
+							}), m("span", null, i(v(A)(v(k).comments.resolvedBy, { name: r.resolved_by_name ?? "" })), 1)])) : f("", !0)]),
+							_: 2
+						}, 1024),
+						r.block_id && wt(r.block_id) ? (n(), l("span", Fe, i(v(k).comments.missingBlock), 1)) : r.block_id ? (n(), l("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:duration-150 tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
+							onClick: (e) => v(j).selectBlock(r.block_id ?? "")
+						}, " Block ", 8, Ie)) : f("", !0),
+						R.value === r.id ? (n(), l("div", Le, [t(m("textarea", {
+							"onUpdate:modelValue": c[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) => Pt(e, r.id)
+						}, null, 40, Re), [[g, z.value]]), m("div", ze, [m("button", {
+							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
+							disabled: !z.value.trim() || v(M).isSubmitting.value,
+							onClick: (e) => Z(r.id)
+						}, i(v(k).comments.save), 9, Be), m("button", {
+							class: "tpl:rounded-md tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+							onClick: c[5] ||= (e) => K()
+						}, i(v(k).comments.cancel), 1)])])) : (n(), l("p", Ve, i(r.body), 1)),
+						V.value === r.id ? (n(), l("div", He, [
+							m("span", Ue, i(v(k).comments.deleteConfirm), 1),
+							m("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)]",
+								onClick: (e) => Q(r.id)
+							}, i(v(k).comments.delete), 9, We),
+							m("button", {
+								class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+								onClick: c[6] ||= (e) => J()
+							}, i(v(k).comments.cancel), 1)
+						])) : f("", !0),
+						R.value !== r.id && V.value !== r.id ? (n(), l("div", Ge, [m("button", {
+							class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
+							title: v(k).comments.reply,
+							onClick: (e) => Ot(r.id)
+						}, [u(v(pe), {
+							size: 13,
+							"stroke-width": 2,
+							class: "tpl:text-[var(--tpl-primary)]"
+						})], 8, Ke), (r.replies?.length ?? 0) > 0 ? (n(), l("button", {
+							key: 0,
+							class: "tpl:flex tpl:items-center tpl:gap-0.5 tpl:text-[11px] tpl:font-medium tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+							onClick: (e) => Dt(r.id)
+						}, [B.value.has(r.id) ? (n(), p(v(de), {
+							key: 0,
+							size: 11,
+							"stroke-width": 2
+						})) : (n(), p(v(se), {
+							key: 1,
+							size: 11,
+							"stroke-width": 2
+						})), te(" " + i((r.replies?.length ?? 0) === 1 ? v(A)(v(k).comments.replyOne, { count: String(r.replies?.length ?? 0) }) : v(A)(v(k).comments.replyMany, { count: String(r.replies?.length ?? 0) })), 1)], 8, qe)) : f("", !0)])) : f("", !0)
+					]),
+					u(_, { name: "tpl-replies" }, {
+						default: s(() => [B.value.has(r.id) && (r.replies?.length ?? 0) > 0 ? (n(), l("div", Je, [(n(!0), l(d, null, a(r.replies, (a, o) => (n(), l("div", {
+							key: a.id,
+							class: e(["tpl-comment-reply-card tpl:relative tpl:rounded-lg tpl:border tpl:px-3.5 tpl:py-2.5", o < (r.replies?.length ?? 0) - 1 ? "tpl:mb-2" : ""])
+						}, [
+							m("div", Ye, [m("div", Xe, [
+								m("span", Ze, i($(a) ? v(k).comments.ownedByYou : a.author_name), 1),
+								m("span", Qe, i(jt(a.created_at)), 1),
+								a.updated_at === a.created_at ? f("", !0) : (n(), l("span", $e, " (" + i(v(k).comments.edited) + ") ", 1))
+							]), m("div", et, [$(a) ? (n(), l("button", {
+								key: 0,
+								class: "tpl-comment-action tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
+								title: v(k).comments.edit,
+								onClick: (e) => G(a)
+							}, [u(v(E), {
+								size: 11,
+								"stroke-width": 2
+							})], 8, tt)) : f("", !0), $(a) ? (n(), l("button", {
+								key: 1,
+								class: "tpl-comment-action tpl-comment-delete tpl:rounded tpl:p-1 tpl:transition-colors tpl:duration-150",
+								title: v(k).comments.delete,
+								onClick: (e) => q(a.id)
+							}, [u(v(ce), {
+								size: 11,
+								"stroke-width": 2
+							})], 8, nt)) : f("", !0)])]),
+							R.value === a.id ? (n(), l("div", rt, [t(m("textarea", {
+								"onUpdate:modelValue": c[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) => Pt(e, a.id)
+							}, null, 40, it), [[g, z.value]]), m("div", at, [m("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-bg)]",
+								disabled: !z.value.trim() || v(M).isSubmitting.value,
+								onClick: (e) => Z(a.id)
+							}, i(v(k).comments.save), 9, ot), m("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: c[8] ||= (e) => K()
+							}, i(v(k).comments.cancel), 1)])])) : (n(), l("p", st, i(a.body), 1)),
+							V.value === a.id ? (n(), l("div", ct, [
+								m("span", lt, i(v(k).comments.deleteConfirm), 1),
+								m("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)]",
+									onClick: (e) => Q(a.id)
+								}, i(v(k).comments.delete), 9, ut),
+								m("button", {
+									class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+									onClick: c[9] ||= (e) => J()
+								}, i(v(k).comments.cancel), 1)
+							])) : f("", !0)
+						], 2))), 128))])) : f("", !0)]),
+						_: 2
+					}, 1024),
+					u(_, { name: "tpl-replies" }, {
+						default: s(() => [I.value === r.id ? (n(), l("div", dt, [m("div", ft, [t(m("textarea", {
+							"onUpdate:modelValue": c[10] ||= (e) => L.value = e,
+							class: "tpl:flex-1 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)]",
+							placeholder: v(k).comments.replyPlaceholder,
+							rows: "2",
+							onKeydown: (e) => Nt(e, r.id)
+						}, null, 40, pt), [[g, L.value]]), m("div", mt, [m("button", {
+							class: "tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+							disabled: !L.value.trim() || v(M).isSubmitting.value,
+							onClick: (e) => X(r.id)
+						}, [u(v(T), {
+							size: 14,
+							"stroke-width": 2
+						})], 8, ht), m("button", {
+							class: "tpl:flex tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+							onClick: c[11] ||= (e) => kt()
+						}, [u(v(le), {
+							size: 14,
+							"stroke-width": 2
+						})])])])])) : f("", !0)]),
+						_: 2
+					}, 1024)
+				]))), 128))]))]),
+				m("div", gt, [Tt.value ? (n(), l("div", _t, i(v(k).comments.saveTemplateFirst), 1)) : (n(), l("div", vt, [t(m("textarea", {
+					ref_key: "newCommentInput",
+					ref: H,
+					"onUpdate:modelValue": c[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)]",
+					placeholder: v(k).comments.placeholder,
+					disabled: v(M).isSubmitting.value,
+					rows: "2",
+					onKeydown: Mt
+				}, null, 40, yt), [[g, F.value]]), m("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:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+					disabled: !F.value.trim() || v(M).isSubmitting.value,
+					onClick: Y
+				}, [v(M).isSubmitting.value ? (n(), p(v(C), {
+					key: 0,
+					class: "tpl-spinner",
+					size: 16,
+					"stroke-width": 2
+				})) : (n(), p(v(T), {
+					key: 1,
+					size: 16,
+					"stroke-width": 2
+				}))], 8, bt)]))])
+			])) : f("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-5e7fbab3"]]);
+//#endregion
+export { D as default };

package/dist/CountdownBlock-DK6P_RaQ.js

@@ -0,0 +1,92 @@
+import { r as e } from "./rolldown-runtime-BZGGJVDF.js";
+import { M as t, Ot as n, P as r, S as i, Y as a, _ as o, d as s, g as c, m as l, p as u, tt as d, wt as f } from "./vue.runtime.esm-bundler-DryoQb-v.js";
+import { o as p } from "./dist-n0PkFNGl.js";
+import { t as m } from "./useI18n-B8CN2iWs.js";
+//#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
+}, g = {
+	key: 1,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50"
+}, _ = { class: "tpl:text-center" }, v = /* @__PURE__ */ i({
+	__name: "CountdownBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(e) {
+		let i = e, { t: v } = m(), y = a(Date.now());
+		p(() => {
+			y.value = Date.now();
+		}, 1e3);
+		let b = u(() => {
+			if (!i.block.targetDate) return null;
+			let e = new Date(i.block.targetDate);
+			return isNaN(e.getTime()) ? null : e.getTime();
+		}), x = u(() => b.value ? y.value >= b.value : !1), S = u(() => {
+			if (!b.value || x.value) return {
+				days: 0,
+				hours: 0,
+				minutes: 0,
+				seconds: 0
+			};
+			let e = b.value - y.value, t = Math.floor(e / 1e3);
+			return {
+				days: Math.floor(t / 86400),
+				hours: Math.floor(t % 86400 / 3600),
+				minutes: Math.floor(t % 3600 / 60),
+				seconds: t % 60
+			};
+		}), C = u(() => {
+			let e = [];
+			return i.block.showDays && e.push({
+				value: String(S.value.days).padStart(2, "0"),
+				label: i.block.labelDays
+			}), i.block.showHours && e.push({
+				value: String(S.value.hours).padStart(2, "0"),
+				label: i.block.labelHours
+			}), i.block.showMinutes && e.push({
+				value: String(S.value.minutes).padStart(2, "0"),
+				label: i.block.labelMinutes
+			}), i.block.showSeconds && e.push({
+				value: String(S.value.seconds).padStart(2, "0"),
+				label: i.block.labelSeconds
+			}), e;
+		}), w = u(() => ({
+			backgroundColor: i.block.backgroundColor,
+			fontFamily: i.block.fontFamily || "inherit"
+		})), T = u(() => ({
+			fontSize: `${i.block.digitFontSize}px`,
+			fontWeight: "bold",
+			color: i.block.digitColor,
+			lineHeight: "1.2"
+		})), E = u(() => ({
+			fontSize: `${i.block.labelFontSize}px`,
+			color: i.block.labelColor,
+			marginTop: "4px"
+		})), D = u(() => ({
+			fontSize: `${i.block.digitFontSize}px`,
+			color: i.block.digitColor,
+			fontFamily: i.block.fontFamily || "inherit"
+		}));
+		return (i, a) => e.block.targetDate ? x.value && e.block.hideOnExpiry ? (t(), o("div", g, n(d(v).countdown.hidden), 1)) : x.value ? (t(), o("div", {
+			key: 2,
+			style: f(w.value),
+			class: "tpl:py-4 tpl:text-center"
+		}, [l("span", { style: f({
+			fontSize: `${e.block.digitFontSize}px`,
+			color: e.block.digitColor
+		}) }, n(e.block.expiredMessage), 5)], 4)) : (t(), o("div", {
+			key: 3,
+			style: f(w.value),
+			class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4"
+		}, [(t(!0), o(s, null, r(C.value, (r, i) => (t(), o(s, { key: r.label }, [i > 0 ? (t(), o("span", {
+			key: 0,
+			style: f(D.value),
+			class: "tpl:self-start"
+		}, n(e.block.separator), 5)) : c("", !0), l("div", _, [l("div", { style: f(T.value) }, n(r.value), 5), l("div", { style: f(E.value) }, n(r.label), 5)])], 64))), 128))], 4)) : (t(), o("div", h, n(d(v).countdown.setDate), 1));
+	}
+}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
+//#endregion
+export { y as n, b as t };