@templatical/editor 0.26.3 → 0.27.0

package/dist/RestoreVersionDialog-DIn1muFD.js

@@ -0,0 +1,86 @@
+import { Dt as e, c as t, d as n, g as r, h as i, k as a, kt as o, l as s, rt as c, u as l, v as u, z as d } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { t as f } from "./useI18n-BfXff_Sy.js";
+import { t as p } from "./loader-circle-DqTxB7Kr.js";
+import { t as m } from "./triangle-alert-Fw0ce8oQ.js";
+import { d as h, v as g, x as _ } from "./styleConstants-ByDqaYj_.js";
+import { t as v } from "./TplModal-chvLhXmC.js";
+//#region src/components/RestoreVersionDialog.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-busy"], b = { class: "tpl:flex tpl:items-center tpl:gap-2" }, x = {
+	id: "tpl-restore-version-title",
+	class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, S = {
+	id: "tpl-restore-version-body",
+	class: "tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]"
+}, C = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, w = ["disabled"], T = ["disabled"], E = ["disabled"], D = /* @__PURE__ */ u({
+	__name: "RestoreVersionDialog",
+	props: {
+		visible: { type: Boolean },
+		canSave: { type: Boolean },
+		isBusy: { type: Boolean }
+	},
+	emits: [
+		"cancel",
+		"save-and-restore",
+		"discard-and-restore"
+	],
+	setup(u, { emit: D }) {
+		let O = D, { t: k } = f();
+		return (f, D) => (a(), s(v, {
+			visible: u.visible,
+			onClose: D[3] ||= (e) => O("cancel")
+		}, {
+			default: d(() => [t("div", {
+				role: "alertdialog",
+				"aria-modal": "true",
+				"aria-busy": u.isBusy,
+				"aria-labelledby": "tpl-restore-version-title",
+				"aria-describedby": "tpl-restore-version-body",
+				"data-testid": "restore-version-dialog",
+				class: "tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
+				style: {
+					"background-color": "var(--tpl-bg-elevated)",
+					"box-shadow": "var(--tpl-shadow-xl)"
+				}
+			}, [
+				t("div", b, [r(c(m), {
+					size: 18,
+					"stroke-width": 2,
+					class: "tpl:text-[var(--tpl-warning)]"
+				}), t("h3", x, o(c(k).versionPreview.restoreConfirm.title), 1)]),
+				t("p", S, o(u.canSave ? c(k).versionPreview.restoreConfirm.unsavedWithSave : c(k).versionPreview.restoreConfirm.unsavedNoSave), 1),
+				t("div", C, [
+					t("button", {
+						type: "button",
+						"data-testid": "restore-version-cancel",
+						class: e(c(_)),
+						disabled: u.isBusy,
+						onClick: D[0] ||= (e) => O("cancel")
+					}, o(c(k).versionPreview.restoreConfirm.cancel), 11, w),
+					t("button", {
+						type: "button",
+						"data-testid": "restore-version-discard",
+						class: e(c(h)),
+						disabled: u.isBusy,
+						onClick: D[1] ||= (e) => O("discard-and-restore")
+					}, o(c(k).versionPreview.restoreConfirm.restoreAnyway), 11, T),
+					u.canSave ? (a(), n("button", {
+						key: 0,
+						type: "button",
+						"data-testid": "restore-version-save-first",
+						class: e(c(g)),
+						disabled: u.isBusy,
+						onClick: D[2] ||= (e) => O("save-and-restore")
+					}, [u.isBusy ? (a(), s(c(p), {
+						key: 0,
+						class: "tpl:animate-spin",
+						size: 12,
+						"stroke-width": 2
+					})) : l("", !0), i(" " + o(c(k).versionPreview.restoreConfirm.saveAndRestore), 1)], 10, E)) : l("", !0)
+				])
+			], 8, y)]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { D as default };

package/dist/{RichTextEditorContent-fbYJXAio.js → RichTextEditorContent-I83k5DtQ.js}

@@ -1,11 +1,11 @@
-import { C as e, Dt as t, N as n, O as r, Ot as i, P as a, _ as o, c as s, d as c, h as l, i as u, l as d, m as f, nt as p, s as m, u as h, x as g, z as _ } from "./vue.runtime.esm-bundler-D1diBMsm.js";
-import { a as v, c as y } from "./runtime-dom.esm-bundler-CepEmvwF.js";
-import { n as b } from "./usePopoverPosition-C0dPEF4X.js";
-import { U as x, V as S, g as C } from "./keys-fwF3qZax.js";
-import { t as w } from "./useI18n-DoVKdCTH.js";
-import { t as T } from "./createLucideIcon-C8WzBYCv.js";
-import { t as E } from "./x-Mby7KlhS.js";
-import { t as D } from "./ColorPicker-ClETsjA3.js";
+import { B as e, F as t, Ot as n, P as r, S as i, c as a, d as o, g as s, h as c, i as l, k as u, kt as d, l as f, rt as p, s as m, u as h, v as g, w as _ } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { a as v, c as y } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
+import { B as b, H as x, h as S } from "./keys-BxixS0TN.js";
+import { t as C } from "./useI18n-BfXff_Sy.js";
+import { n as w } from "./usePopoverPosition-CxhCX3SQ.js";
+import { t as T } from "./createLucideIcon-L-wQXW_R.js";
+import { t as E } from "./x-BjTlFqRv.js";
+import { t as D } from "./ColorPicker-DCjFQCAg.js";
 var O = T("bold", [["path", {
 	d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
 	key: "mg9rjx"
@@ -43,9 +43,9 @@ var O = T("bold", [["path", {
 }, P = ["aria-label"], F = { class: "tpl:p-5" }, I = { class: "tpl:mb-4 tpl:last:mb-0" }, L = {
 	for: "tpl-link-dialog-url",
 	class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase"
-}, R = ["placeholder"], z = { class: "tpl:mb-4 tpl:last:mb-0" }, B = { class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase" }, V = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4" }, H = { class: "tpl:ml-auto tpl:flex tpl:gap-2" }, U = /* @__PURE__ */ o({
+}, R = ["placeholder"], z = { class: "tpl:mb-4 tpl:last:mb-0" }, B = { class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium tpl:tracking-wide tpl:text-[var(--tpl-text-muted)] tpl:uppercase" }, V = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:px-5 tpl:py-4" }, H = { class: "tpl:ml-auto tpl:flex tpl:gap-2" }, U = /* @__PURE__ */ g({
 	__name: "RichTextLinkDialog",
-	props: /*@__PURE__*/ e({
+	props: /*@__PURE__*/ _({
 		visible: { type: Boolean },
 		isEditingLink: { type: Boolean }
 	}, {
@@ -56,7 +56,7 @@ var O = T("bold", [["path", {
 		dialogRef: { required: !0 },
 		dialogRefModifiers: {}
 	}),
-	emits: /*@__PURE__*/ e([
+	emits: /*@__PURE__*/ _([
 		"close",
 		"insert",
 		"remove",
@@ -66,60 +66,60 @@ var O = T("bold", [["path", {
 		"update:linkColor",
 		"update:dialogRef"
 	]),
-	setup(e, { emit: n }) {
-		let o = a(e, "linkUrl"), f = a(e, "linkColor"), T = a(e, "dialogRef"), O = n, k = g(S, null), A = g(x, null), U = b(), W = g(C, null), G = m(() => W?.content.value.settings.linkColor || "#2c85de"), { t: K } = w();
-		return (n, a) => p(U) ? (r(), d(u, {
+	setup(r, { emit: c }) {
+		let g = t(r, "linkUrl"), _ = t(r, "linkColor"), T = t(r, "dialogRef"), O = c, k = i(b, null), A = i(x, null), U = w(), W = i(S, null), G = m(() => W?.content.value.settings.linkColor || "#2c85de"), { t: K } = C();
+		return (t, i) => p(U) ? (u(), f(l, {
 			key: 0,
 			to: p(U)
-		}, [e.visible ? (r(), c("div", {
+		}, [r.visible ? (u(), o("div", {
 			key: 0,
 			"data-tpl-theme": p(A),
 			class: "tpl tpl-link-dialog tpl:fixed tpl:inset-0 tpl:z-modal tpl:flex tpl:items-center tpl:justify-center",
-			style: t(p(k)),
-			onClick: a[7] ||= y((e) => O("close"), ["self"])
-		}, [s("div", {
+			style: n(p(k)),
+			onClick: i[7] ||= y((e) => O("close"), ["self"])
+		}, [a("div", {
 			ref: (e) => T.value = e,
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-labelledby": "tpl-link-dialog-title",
-			class: "tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-lg"
+			class: "tpl:w-[400px] tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-lg)]"
 		}, [
-			s("div", M, [s("h4", N, i(e.isEditingLink ? p(K).linkDialog.editLink : p(K).linkDialog.insertLink), 1), s("button", {
+			a("div", M, [a("h4", N, d(r.isEditingLink ? p(K).linkDialog.editLink : p(K).linkDialog.insertLink), 1), a("button", {
 				type: "button",
 				"aria-label": p(K).linkDialog.cancel,
 				class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-				onClick: a[0] ||= (e) => O("close")
-			}, [l(p(E), {
+				onClick: i[0] ||= (e) => O("close")
+			}, [s(p(E), {
 				size: 16,
 				"stroke-width": 2
 			})], 8, P)]),
-			s("div", F, [s("div", I, [s("label", L, i(p(K).linkDialog.urlLabel), 1), _(s("input", {
+			a("div", F, [a("div", I, [a("label", L, d(p(K).linkDialog.urlLabel), 1), e(a("input", {
 				id: "tpl-link-dialog-url",
-				"onUpdate:modelValue": a[1] ||= (e) => o.value = e,
+				"onUpdate:modelValue": i[1] ||= (e) => g.value = e,
 				type: "url",
-				class: "tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]",
+				class: "tpl:w-full tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:transition-all tpl:outline-none tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]",
 				placeholder: p(K).linkDialog.urlPlaceholder,
 				autofocus: "",
-				onKeydown: a[2] ||= (e) => O("keydown", e)
-			}, null, 40, R), [[v, o.value]])]), s("div", z, [s("label", B, i(p(K).linkDialog.colorLabel), 1), l(D, {
-				"model-value": f.value,
+				onKeydown: i[2] ||= (e) => O("keydown", e)
+			}, null, 40, R), [[v, g.value]])]), a("div", z, [a("label", B, d(p(K).linkDialog.colorLabel), 1), s(D, {
+				"model-value": _.value,
 				"seed-color": G.value,
-				"onUpdate:modelValue": a[3] ||= (e) => f.value = e
+				"onUpdate:modelValue": i[3] ||= (e) => _.value = e
 			}, null, 8, ["model-value", "seed-color"])])]),
-			s("div", V, [e.isEditingLink ? (r(), c("button", {
+			a("div", V, [r.isEditingLink ? (u(), o("button", {
 				key: 0,
 				type: "button",
-				class: "tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-danger-light)]",
-				onClick: a[4] ||= (e) => O("remove")
-			}, i(p(K).linkDialog.removeLink), 1)) : h("", !0), s("div", H, [s("button", {
+				class: "tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-danger)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-danger)] tpl:transition-all tpl:hover:bg-[var(--tpl-danger-light)]",
+				onClick: i[4] ||= (e) => O("remove")
+			}, d(p(K).linkDialog.removeLink), 1)) : h("", !0), a("div", H, [a("button", {
 				type: "button",
-				class: "tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-				onClick: a[5] ||= (e) => O("close")
-			}, i(p(K).linkDialog.cancel), 1), s("button", {
+				class: "tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
+				onClick: i[5] ||= (e) => O("close")
+			}, d(p(K).linkDialog.cancel), 1), a("button", {
 				type: "button",
-				class: "tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-bg)]",
-				onClick: a[6] ||= (e) => O("insert")
-			}, i(e.isEditingLink ? p(K).linkDialog.updateLink : p(K).linkDialog.insertLink), 1)])])
+				class: "tpl:inline-flex tpl:cursor-pointer tpl:items-center tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-4 tpl:py-2 tpl:text-[13px] tpl:font-medium tpl:transition-all tpl:hover:bg-[var(--tpl-primary-hover)] tpl:text-[var(--tpl-on-primary)]",
+				onClick: i[6] ||= (e) => O("insert")
+			}, d(r.isEditingLink ? p(K).linkDialog.updateLink : p(K).linkDialog.insertLink), 1)])])
 		], 512)], 12, j)) : h("", !0)], 8, ["to"])) : h("", !0);
 	}
 }), W = {
@@ -128,7 +128,7 @@ var O = T("bold", [["path", {
 }, G = { class: "tpl:animate-pulse tpl:text-[var(--tpl-text-dim)]" }, K = {
 	key: 1,
 	class: "tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:p-2 tpl:text-center tpl:text-xs tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-text-muted)]"
-}, q = /* @__PURE__ */ o({
+}, q = /* @__PURE__ */ g({
 	__name: "RichTextEditorContent",
 	props: {
 		editor: {},
@@ -138,11 +138,11 @@ var O = T("bold", [["path", {
 	},
 	emits: ["retry"],
 	setup(e, { emit: t }) {
-		let a = t, { t: o } = w();
-		return (t, l) => e.isLoading ? (r(), c("div", W, [s("div", G, i(p(o).errors.editorLoading), 1)])) : e.initError ? (r(), c("div", K, [f(i(p(o).errors.editorLoadFailed) + " ", 1), s("button", {
+		let n = t, { t: i } = C();
+		return (t, s) => e.isLoading ? (u(), o("div", W, [a("div", G, d(p(i).errors.editorLoading), 1)])) : e.initError ? (u(), o("div", K, [c(d(p(i).errors.editorLoadFailed) + " ", 1), a("button", {
 			class: "tpl:ml-1 tpl:cursor-pointer tpl:border-none tpl:bg-transparent tpl:p-0 tpl:underline tpl:text-[var(--tpl-primary)]",
-			onClick: l[0] ||= (e) => a("retry")
-		}, i(p(o).errors.retry), 1)])) : e.editorContent && e.editor ? (r(), d(n(e.editorContent), {
+			onClick: s[0] ||= (e) => n("retry")
+		}, d(p(i).errors.retry), 1)])) : e.editorContent && e.editor ? (u(), f(r(e.editorContent), {
 			key: 2,
 			editor: e.editor,
 			class: "tpl-text-editable tpl:min-h-[1.5em] tpl:rounded tpl:border tpl:border-dashed tpl:border-[var(--tpl-primary)] tpl:p-2"

package/dist/SaveBlockDialog-C_QvYAeL.js

@@ -0,0 +1,266 @@
+import { B as e, D as t, Dt as n, E as r, L as i, Ot as a, P as o, S as s, X as c, c as l, d as u, g as d, h as f, j as p, k as m, kt as h, l as g, r as _, rt as v, s as y, u as b, v as x, z as S } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { a as C, c as w, s as T } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
+import { B as E, N as D, c as O } from "./useEditorCore-B-kONNRw.js";
+import { L as k, W as A, f as j, h as ee } from "./keys-BxixS0TN.js";
+import { t as te } from "./useI18n-BfXff_Sy.js";
+import { t as M } from "./chevron-down-nYScOLeZ.js";
+import { t as N } from "./chevron-up-CpYpDLnc.js";
+import { t as P } from "./loader-circle-DqTxB7Kr.js";
+import { n as F } from "./emailFrameWidth-BmFCN2dp.js";
+import { v as I } from "./styleConstants-ByDqaYj_.js";
+import { t as L } from "./TplModal-chvLhXmC.js";
+import { t as R } from "./BlockPreviewCanvas-GZbr0ph5.js";
+//#region src/components/SavedBlockPreviewRow.vue?vue&type=script&setup=true&lang.ts
+var z = ["data-block-id"], B = ["aria-label", "title"], V = { class: "tpl:relative tpl:min-w-0 tpl:flex-1" }, H = {
+	key: 0,
+	"data-testid": "saved-blocks-preview-fade",
+	"aria-hidden": "true",
+	class: "tpl:pointer-events-none tpl:absolute tpl:inset-x-0 tpl:bottom-0 tpl:h-10",
+	style: { background: "linear-gradient(\n            to bottom,\n            transparent,\n            var(--tpl-bg) 90%\n          )" }
+}, U = ["aria-label", "aria-expanded"], W = 240, G = /* @__PURE__ */ x({
+	__name: "SavedBlockPreviewRow",
+	props: {
+		block: {},
+		position: {},
+		total: {}
+	},
+	emits: ["move"],
+	setup(e, { emit: n }) {
+		let i = e, p = n, { t: _, format: x } = te(), S = s(j, []), C = s(ee, null), O = y(() => F(C?.content.value.settings)), k = c(null), A = c(null), P = c(1), I = c(null), L = c(!1), G = null, K = y(() => I.value !== null && I.value > W), q = y(() => I.value === null ? null : L.value || !K.value ? I.value : W);
+		function J() {
+			let e = k.value, t = A.value;
+			if (!e || !t) return;
+			let n = e.clientWidth;
+			if (n <= 0) return;
+			let r = Math.min(1, n / O.value);
+			P.value = r, I.value = t.offsetHeight * r;
+		}
+		t(() => {
+			J(), !(typeof ResizeObserver > "u") && (G = new ResizeObserver(() => J()), k.value && G.observe(k.value), A.value && G.observe(A.value));
+		}), r(() => {
+			G?.disconnect(), G = null;
+		});
+		let Y = y(() => E(i.block, _, S)), X = y(() => x(_.savedBlocks.reorderHandle, {
+			block: Y.value,
+			position: i.position,
+			total: i.total
+		})), Z = y(() => x(L.value ? _.savedBlocks.collapsePreview : _.savedBlocks.expandPreview, { block: Y.value }));
+		return (t, n) => (m(), u("div", {
+			"data-testid": "saved-blocks-reorder-row",
+			"data-block-id": e.block.id,
+			class: "tpl:flex tpl:items-start tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:p-1.5 tpl:border-[var(--tpl-border)]",
+			style: { "background-color": "var(--tpl-bg)" }
+		}, [l("button", {
+			type: "button",
+			"data-testid": "saved-blocks-reorder-handle",
+			class: "tpl-saved-block-reorder-handle tpl:mt-0.5 tpl:shrink-0 tpl:cursor-grab tpl:rounded tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:text-[var(--tpl-text-dim)]",
+			"aria-label": X.value,
+			title: v(_).savedBlocks.reorderHint,
+			onKeydown: [n[0] ||= T(w((e) => p("move", -1), ["prevent"]), ["up"]), n[1] ||= T(w((e) => p("move", 1), ["prevent"]), ["down"])]
+		}, [d(v(D), {
+			size: 14,
+			"stroke-width": 1.5
+		})], 40, B), l("div", V, [
+			l("div", {
+				ref_key: "frameEl",
+				ref: k,
+				class: "tpl:overflow-hidden",
+				style: a({ height: q.value === null ? void 0 : `${q.value}px` })
+			}, [l("div", {
+				ref_key: "contentEl",
+				ref: A,
+				style: a({
+					width: `${O.value}px`,
+					transform: `scale(${P.value})`,
+					transformOrigin: "top left"
+				})
+			}, [d(R, { blocks: [e.block] }, null, 8, ["blocks"])], 4)], 4),
+			K.value && !L.value ? (m(), u("div", H)) : b("", !0),
+			K.value ? (m(), u("button", {
+				key: 1,
+				type: "button",
+				"data-testid": "saved-blocks-preview-toggle",
+				class: "tpl:absolute tpl:bottom-1 tpl:right-1 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded tpl:border tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:text-[var(--tpl-text-muted)]",
+				"aria-label": Z.value,
+				"aria-expanded": L.value,
+				onClick: n[2] ||= (e) => L.value = !L.value
+			}, [(m(), g(o(L.value ? v(N) : v(M)), {
+				size: 11,
+				"stroke-width": 2
+			})), f(" " + h(L.value ? v(_).savedBlocks.collapse : v(_).savedBlocks.expand), 1)], 8, U)) : b("", !0)
+		])], 8, z));
+	}
+}), K = ["aria-busy"], q = {
+	id: "tpl-save-block-title",
+	class: "tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, J = { class: "tpl:mb-3 tpl:shrink-0" }, Y = { class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, X = ["placeholder", "disabled"], Z = { class: "tpl:mb-3 tpl:shrink-0" }, ne = {
+	for: "tpl-save-block-category",
+	class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]"
+}, re = ["placeholder", "disabled"], ie = { id: "tpl-saved-block-categories" }, ae = ["value"], oe = {
+	"data-testid": "saved-blocks-save-summary",
+	class: "tpl:mb-1.5 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
+}, se = { class: "tpl:text-[var(--tpl-text-dim)]" }, ce = {
+	key: 0,
+	class: "tpl:mb-1.5 tpl:shrink-0 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]"
+}, le = {
+	class: "tpl-sr-only",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, ue = {
+	key: 1,
+	role: "alert",
+	class: "tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]"
+}, de = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2" }, fe = ["disabled"], pe = ["disabled"], me = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:gap-1.5"
+}, he = { key: 1 }, Q = /* @__PURE__ */ x({
+	__name: "SaveBlockDialog",
+	props: {
+		visible: { type: Boolean },
+		pickedIds: {}
+	},
+	emits: ["close", "saved"],
+	setup(t, { emit: r }) {
+		let a = t, o = r, { t: x, format: w } = te(), T = A(ee, "SaveBlockDialog"), D = A(k, "SaveBlockDialog"), M = s(j, []), N = c(""), F = c(""), R = c(!1), z = c(null), B = c(""), V = c([]), H = y(() => {
+			let e = new Map(T.content.value.blocks.map((e) => [e.id, e]));
+			return V.value.map((t) => e.get(t)).filter((e) => e !== void 0);
+		}), U = y({
+			get: () => H.value,
+			set: (e) => {
+				V.value = e.map((e) => e.id);
+			}
+		});
+		function W(e, t) {
+			let n = H.value.map((e) => e.id), r = n.indexOf(e), i = r + t;
+			if (r === -1 || i < 0 || i >= n.length) return;
+			[n[r], n[i]] = [n[i], n[r]], V.value = n;
+			let a = H.value[i];
+			B.value = a ? w(x.savedBlocks.reorderAnnouncement, {
+				block: Q(a),
+				position: i + 1,
+				total: n.length
+			}) : "";
+		}
+		function Q(e) {
+			return E(e, x, M);
+		}
+		let ge = y(() => H.value.map(Q).join(", "));
+		i(() => a.visible, (e) => {
+			e && (N.value = "", F.value = "", z.value = null, B.value = "", V.value = [...a.pickedIds]);
+		}, { immediate: !0 });
+		let _e = y(() => N.value.trim().length > 0 && H.value.length > 0 && !R.value);
+		async function ve() {
+			if (!_e.value) return;
+			let e = H.value;
+			if (e.length !== 0) {
+				R.value = !0, z.value = null;
+				try {
+					await D.create(N.value.trim(), e, F.value.trim() || void 0), o("saved"), o("close");
+				} catch (e) {
+					z.value = e.message;
+				} finally {
+					R.value = !1;
+				}
+			}
+		}
+		function $() {
+			R.value || o("close");
+		}
+		function ye(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), ve()), e.key === "Escape" && $();
+		}
+		return (r, i) => (m(), g(L, {
+			visible: t.visible,
+			onClose: $,
+			onKeydown: ye
+		}, {
+			default: S(() => [l("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-busy": R.value,
+				"aria-labelledby": "tpl-save-block-title",
+				class: "tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-2xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
+				style: {
+					"background-color": "var(--tpl-bg-elevated)",
+					"box-shadow": "var(--tpl-shadow-xl)",
+					"max-height": "90vh"
+				}
+			}, [
+				l("h3", q, h(v(x).savedBlocks.saveAsBlock), 1),
+				l("div", J, [l("label", Y, h(v(x).savedBlocks.name), 1), e(l("input", {
+					"onUpdate:modelValue": i[0] ||= (e) => N.value = e,
+					type: "text",
+					"data-testid": "saved-blocks-name-input",
+					placeholder: v(x).savedBlocks.namePlaceholder,
+					class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+					disabled: R.value
+				}, null, 8, X), [[C, N.value]])]),
+				l("div", Z, [
+					l("label", ne, h(v(x).savedBlocks.category), 1),
+					e(l("input", {
+						id: "tpl-save-block-category",
+						"onUpdate:modelValue": i[1] ||= (e) => F.value = e,
+						type: "text",
+						"data-testid": "saved-blocks-category-input",
+						list: "tpl-saved-block-categories",
+						placeholder: v(x).savedBlocks.categoryPlaceholder,
+						class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+						disabled: R.value
+					}, null, 8, re), [[C, F.value]]),
+					l("datalist", ie, [(m(!0), u(_, null, p(v(D).categories.value, (e) => (m(), u("option", {
+						key: e,
+						value: e
+					}, null, 8, ae))), 128))])
+				]),
+				l("p", oe, [f(h(v(w)(v(x).savedBlocks.savingCount, { count: H.value.length })) + " ", 1), l("span", se, h(ge.value), 1)]),
+				H.value.length > 1 ? (m(), u("p", ce, h(v(x).savedBlocks.reorderHint), 1)) : b("", !0),
+				d(v(O), {
+					modelValue: U.value,
+					"onUpdate:modelValue": i[2] ||= (e) => U.value = e,
+					"data-testid": "saved-blocks-reorder-list",
+					animation: 150,
+					"ghost-class": "tpl-ghost",
+					"drag-class": "tpl-dragging",
+					handle: ".tpl-saved-block-reorder-handle",
+					"force-fallback": !0,
+					class: "tpl:mb-4 tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto"
+				}, {
+					default: S(() => [(m(!0), u(_, null, p(U.value, (e, t) => (m(), g(G, {
+						key: e.id,
+						block: e,
+						position: t + 1,
+						total: U.value.length,
+						onMove: (t) => W(e.id, t)
+					}, null, 8, [
+						"block",
+						"position",
+						"total",
+						"onMove"
+					]))), 128))]),
+					_: 1
+				}, 8, ["modelValue"]),
+				l("div", le, h(B.value), 1),
+				z.value ? (m(), u("p", ue, h(z.value), 1)) : b("", !0),
+				l("div", de, [l("button", {
+					type: "button",
+					class: n(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", { "tpl:cursor-not-allowed tpl:opacity-50": R.value }]),
+					disabled: R.value,
+					onClick: $
+				}, h(v(x).savedBlocks.cancel), 11, fe), l("button", {
+					type: "button",
+					class: n(v(I)),
+					disabled: !_e.value,
+					onClick: ve
+				}, [R.value ? (m(), u("span", me, [d(v(P), {
+					class: "tpl:animate-spin",
+					size: 12,
+					"stroke-width": 2
+				}), f(" " + h(v(x).savedBlocks.saving), 1)])) : (m(), u("span", he, h(v(x).savedBlocks.save), 1))], 10, pe)])
+			], 8, K)]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { Q as default };