@templatical/editor 0.19.0 → 0.21.0

package/dist/NumberWithSuffix-CCPN_oCh.js

@@ -0,0 +1,121 @@
+import { A as e, Dt as t, Et as n, N as r, O as i, Ot as a, _ as o, c as s, d as c, j as l, l as u, m as d, nt as f, r as p, s as m, u as h } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
+import { h as g, m as _, p as v } from "./ColorPicker-s9GHXjZs.js";
+//#region src/components/ToggleSwitch.vue?vue&type=script&setup=true&lang.ts
+var y = { key: 0 }, b = {
+	key: 0,
+	class: "tpl:text-[var(--tpl-danger)]"
+}, x = [
+	"aria-checked",
+	"aria-label",
+	"disabled"
+], S = /* @__PURE__ */ o({
+	__name: "ToggleSwitch",
+	props: {
+		modelValue: { type: Boolean },
+		label: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = t;
+		return (t, o) => (i(), c("label", { class: n(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", e.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [t.$slots.default || e.label || e.required ? (i(), c("span", y, [l(t.$slots, "default", {}, () => [d(a(e.label), 1)]), e.required ? (i(), c("span", b, " *")) : h("", !0)])) : h("", !0), s("button", {
+			type: "button",
+			role: "switch",
+			"aria-checked": e.modelValue,
+			"aria-label": e.label,
+			disabled: e.disabled,
+			class: n([
+				"tpl:relative tpl:inline-flex tpl:h-5 tpl:w-9 tpl:shrink-0 tpl:rounded-full tpl:border-2 tpl:border-transparent tpl:transition-colors tpl:duration-200",
+				e.modelValue ? "tpl:bg-[var(--tpl-primary)]" : "tpl:bg-[var(--tpl-border)]",
+				e.disabled ? "tpl:cursor-not-allowed tpl:opacity-60" : "tpl:cursor-pointer"
+			]),
+			onClick: o[0] ||= (t) => !e.disabled && r("update:modelValue", !e.modelValue)
+		}, [s("span", { class: n(["tpl:pointer-events-none tpl:inline-block tpl:size-4 tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow tpl:transition-transform tpl:duration-200", e.modelValue ? "tpl:translate-x-4" : "tpl:translate-x-0"]) }, null, 2)], 10, x)], 2));
+	}
+}), C = [
+	"aria-checked",
+	"aria-label",
+	"title",
+	"onClick"
+], w = { key: 1 }, T = /* @__PURE__ */ o({
+	__name: "SlidingPillSelect",
+	props: {
+		options: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(n, { emit: o }) {
+		let s = n, l = o, d = m(() => s.options.findIndex((e) => e.value === s.modelValue)), f = m(() => `translateX(${Math.max(d.value, 0) * 100}%)`);
+		return (o, s) => (i(), c("div", {
+			role: "radiogroup",
+			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
+			style: t({
+				gridTemplateColumns: `repeat(${n.options.length}, 1fr)`,
+				backgroundColor: "var(--tpl-bg-hover)"
+			})
+		}, [d.value >= 0 ? (i(), c("div", {
+			key: 0,
+			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
+			style: t({
+				left: "4px",
+				width: `calc((100% - 8px) / ${n.options.length})`,
+				transform: f.value,
+				backgroundColor: "var(--tpl-bg)",
+				boxShadow: "var(--tpl-shadow)",
+				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
+			})
+		}, null, 4)) : h("", !0), (i(!0), c(p, null, e(n.options, (e) => (i(), c("button", {
+			key: e.value,
+			role: "radio",
+			"aria-checked": n.modelValue === e.value,
+			"aria-label": e.label,
+			class: "tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium",
+			style: t({
+				color: n.modelValue === e.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
+			}),
+			title: e.label,
+			onClick: (t) => l("update:modelValue", e.value)
+		}, [e.icon ? (i(), u(r(e.icon), {
+			key: 0,
+			size: 14,
+			"stroke-width": 2
+		})) : (i(), c("span", w, a(e.label), 1))], 12, C))), 128))], 4));
+	}
+}), E = { class: "tpl:mb-3.5" }, D = /* @__PURE__ */ o({
+	__name: "FieldRow",
+	props: { label: {} },
+	setup(e) {
+		return (t, r) => (i(), c("div", E, [e.label ? (i(), c("label", {
+			key: 0,
+			class: n(f(g))
+		}, a(e.label), 3)) : h("", !0), l(t.$slots, "default")]));
+	}
+}), O = { class: "tpl:flex tpl:items-stretch" }, k = [
+	"value",
+	"min",
+	"max"
+], A = /* @__PURE__ */ o({
+	__name: "NumberWithSuffix",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		suffix: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = t;
+		return (t, o) => (i(), c("div", O, [s("input", {
+			type: "number",
+			class: n(f(v)),
+			value: e.modelValue,
+			min: e.min,
+			max: e.max,
+			onInput: o[0] ||= (e) => r("update:modelValue", Number(e.target.value))
+		}, null, 42, k), s("span", { class: n(f(_)) }, a(e.suffix), 3)]));
+	}
+});
+//#endregion
+export { S as i, D as n, T as r, A as t };

package/dist/{ParagraphEditor-Cf75UfSo.js → ParagraphEditor-CkwBirNl.js}

@@ -1,16 +1,16 @@
 import { A as e, Dt as t, Et as n, N as r, O as i, Ot as a, W as o, Y as s, _ as c, c as l, d as u, h as d, i as f, l as p, m, nt as h, r as g, s as _, u as v, x as y } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
 import { c as b, s as x } from "./runtime-dom.esm-bundler-GdMI8WqG.js";
-import { D as S, E as C, S as w, x as T } from "./useEditorCore-ea9OrrH3.js";
-import { n as E, s as D } from "./usePopoverPosition-F9STHRIr.js";
-import { B as O, D as k, L as A, _ as ee, h as te, w as ne, z as re } from "./keys-DFaIbGR8.js";
-import { t as j } from "./useI18n-BNMzZTM5.js";
-import { t as M } from "./createLucideIcon-FSF4peHQ.js";
-import { a as ie, i as ae, n as N, r as oe, t as P } from "./RichTextEditorContent-MdaLz6Q3.js";
-import { n as se, t as ce } from "./scan-line-IAMjPtRw.js";
-import { t as le } from "./loader-circle-BT38qSm3.js";
-import { n as ue, r as de, t as fe } from "./text-align-start-BwsA6QzC.js";
+import { C as S, D as C, O as w, S as T } from "./useEditorCore-Bd9CA4L_.js";
+import { n as E, s as D } from "./usePopoverPosition-BO2LNy5n.js";
+import { B as O, D as k, L as A, _ as ee, h as te, w as ne, z as re } from "./keys-CHPcp-Nz.js";
+import { t as j } from "./useI18n-D2L9Mkik.js";
+import { t as M } from "./createLucideIcon-JWHwTI6N.js";
+import { a as ie, i as ae, n as N, r as oe, t as P } from "./RichTextEditorContent-FbnWsh46.js";
+import { n as se, t as ce } from "./scan-line-BFgesTOY.js";
+import { t as le } from "./loader-circle-C-Z6kgI6.js";
+import { n as ue, r as de, t as fe } from "./text-align-start-Vay3Kvo2.js";
 import { t as F } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { c as pe, o as me, r as he, s as ge, t as I } from "./ColorPicker-BsgpTJqK.js";
+import { c as pe, o as me, r as he, s as ge, t as I } from "./ColorPicker-s9GHXjZs.js";
 var L = M("list-ordered", [
 	["path", {
 		d: "M11 5h10",
@@ -107,7 +107,20 @@ var L = M("list-ordered", [
 		y2: "9",
 		key: "1p4y9e"
 	}]
-]), ye = M("strikethrough", [
+]), ye = M("subscript", [
+	["path", {
+		d: "m4 5 8 8",
+		key: "1eunvl"
+	}],
+	["path", {
+		d: "m12 5-8 8",
+		key: "1ah0jp"
+	}],
+	["path", {
+		d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07",
+		key: "e8ta8j"
+	}]
+]), be = M("strikethrough", [
 	["path", {
 		d: "M16 4H9a3 3 0 0 0-2.83 4",
 		key: "43sutm"
@@ -123,19 +136,6 @@ var L = M("list-ordered", [
 		y2: "12",
 		key: "1e0a9i"
 	}]
-]), be = M("subscript", [
-	["path", {
-		d: "m4 5 8 8",
-		key: "1eunvl"
-	}],
-	["path", {
-		d: "m12 5-8 8",
-		key: "1ah0jp"
-	}],
-	["path", {
-		d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07",
-		key: "e8ta8j"
-	}]
 ]), xe = M("superscript", [
 	["path", {
 		d: "m4 19 8-8",
@@ -166,8 +166,8 @@ var L = M("list-ordered", [
 	__name: "EmojiPickerDropdown",
 	emits: ["insert"],
 	setup(t, { emit: r }) {
-		let o = r, { categories: c, isOpen: f, toggle: p, close: m } = C(), { t: y, format: w } = j(), T = s(null), E = s(null);
-		S(T, _(() => f.value)), D(E, () => {
+		let o = r, { categories: c, isOpen: f, toggle: p, close: m } = C(), { t: y, format: S } = j(), T = s(null), E = s(null);
+		w(T, _(() => f.value)), D(E, () => {
 			f.value && m();
 		});
 		function O(e) {
@@ -206,7 +206,7 @@ var L = M("list-ordered", [
 		}, [l("div", V, a(h(y).emoji[t.key]), 1), l("div", H, [(i(!0), u(g, null, e(t.emojis, (e) => (i(), u("button", {
 			key: e,
 			type: "button",
-			"aria-label": h(w)(h(y).paragraphEditor.emojiItemLabel, { emoji: e }),
+			"aria-label": h(S)(h(y).paragraphEditor.emojiItemLabel, { emoji: e }),
 			class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:text-base tpl:transition-all tpl:duration-100 tpl:hover:scale-125 tpl:hover:bg-[var(--tpl-bg-active)]",
 			onClick: (t) => O(e)
 		}, a(e), 9, U))), 128))])]))), 128))], 40, B)) : v("", !0)], 512));
@@ -457,7 +457,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			d(G, {
-				icon: h(ye),
+				icon: h(be),
 				label: h(D).paragraphEditor.strikethrough,
 				active: e.editor.isActive("strike"),
 				onClick: r[3] ||= (t) => e.editor.chain().focus().toggleStrike().run()
@@ -468,7 +468,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			d(Y),
 			d(G, {
-				icon: h(be),
+				icon: h(ye),
 				label: h(D).paragraphEditor.subscript,
 				active: e.editor.isActive("subscript"),
 				onClick: r[4] ||= (t) => e.editor.chain().focus().toggleSubscript().run()
@@ -618,25 +618,25 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 	},
 	emits: ["done"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, a = E(), { editor: s, EditorContent: c, isLoading: l, initError: f, retry: p, showLinkDialog: m, linkUrl: g, linkColor: _, linkDialogRef: v, canRequestMergeTag: y, canInsertLogicTag: b, openLinkDialog: x, insertLink: S, removeLink: C, closeLinkDialog: D, handleLinkKeydown: O, handleAddMergeTag: k, handleAddLogicTag: A } = T({
+		let n = e, r = t, a = E(), { editor: s, EditorContent: c, isLoading: l, initError: f, retry: p, showLinkDialog: m, linkUrl: g, linkColor: _, linkDialogRef: v, canRequestMergeTag: y, canInsertLogicTag: b, openLinkDialog: x, insertLink: C, removeLink: w, closeLinkDialog: D, handleLinkKeydown: O, handleAddMergeTag: k, handleAddLogicTag: A } = T({
 			blockId: () => n.block.id,
 			blockContent: () => n.block.content,
 			onDone: () => r("done"),
 			editorName: "ParagraphEditor",
 			async loadExtensions({ mergeTags: e, syntax: t, triggerChar: n, autocompleteEnabled: r, suggestionEmptyText: i }) {
-				let [{ Editor: o, EditorContent: s }, { default: c }, { default: l }, { default: u }, { default: d }, { default: f }, { default: p }, { TextStyle: m }, { default: h }, { default: g }, { default: _ }, { MergeTagNode: v, MergeTagSuggestion: y, LogicMergeTagNode: b, FontSize: x, LineHeight: S, LetterSpacing: C }] = await Promise.all([
-					import("./dist-8TKf-Jpg.js").then((e) => e.r),
-					import("./dist-Cx7IUM7J.js"),
-					import("./dist-CcX5sLpz.js"),
-					import("./dist-DXAZUjj3.js"),
-					import("./dist-Dk5AdwoQ.js"),
-					import("./dist-BKKo5wPC.js"),
-					import("./dist-D6M5FAY7.js"),
-					import("./dist-COSN3oDJ.js"),
-					import("./dist-DbekZDmJ.js"),
-					import("./dist-BDVm2MrW.js"),
-					import("./dist-YSCPD13F.js"),
-					import("./extensions-BCA9pyer.js")
+				let [{ Editor: o, EditorContent: s }, { default: c }, { default: l }, { default: u }, { default: d }, { default: f }, { default: p }, { TextStyle: m }, { default: h }, { default: g }, { default: _ }, { MergeTagNode: v, MergeTagSuggestion: y, LogicMergeTagNode: b, FontSize: x, LineHeight: C, LetterSpacing: w }] = await Promise.all([
+					import("./dist-DYClLqy8.js").then((e) => e.r),
+					import("./dist-BgPYC_8-.js"),
+					import("./dist-BuNDAAVp.js"),
+					import("./dist-CtcgoC_R.js"),
+					import("./dist-CrjzhIxB.js"),
+					import("./dist-BkM8A17N.js"),
+					import("./dist-CuXha2_7.js"),
+					import("./dist-CBzCU-a-.js"),
+					import("./dist-CweLDZrs.js"),
+					import("./dist-DOsdqAEZ.js"),
+					import("./dist-CDO52Rxy.js"),
+					import("./extensions-ClY5Sh7S.js")
 				]);
 				return {
 					TiptapEditor: o,
@@ -653,7 +653,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 						u,
 						d,
 						f,
-						w(l).configure({
+						S(l).configure({
 							openOnClick: !1,
 							HTMLAttributes: {
 								target: "_blank",
@@ -666,8 +666,8 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 						g,
 						_.configure({ multicolor: !0 }),
 						x,
-						S,
 						C,
+						w,
 						v.configure({
 							mergeTags: e,
 							syntax: t
@@ -726,8 +726,8 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"link-color": h(_),
 				"onUpdate:linkColor": n[2] ||= (e) => o(_) ? _.value = e : null,
 				onClose: h(D),
-				onInsert: h(S),
-				onRemove: h(C),
+				onInsert: h(C),
+				onRemove: h(w),
 				onKeydown: h(O)
 			}, null, 8, [
 				"visible",

package/dist/{RichTextEditorContent-MdaLz6Q3.js → RichTextEditorContent-FbnWsh46.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-B0xoGkDv.js";
 import { a as v, c as y } from "./runtime-dom.esm-bundler-GdMI8WqG.js";
-import { n as b } from "./usePopoverPosition-F9STHRIr.js";
-import { L as x, h as S, z as C } from "./keys-DFaIbGR8.js";
-import { t as w } from "./useI18n-BNMzZTM5.js";
-import { t as T } from "./createLucideIcon-FSF4peHQ.js";
-import { t as E } from "./x-Ctg_250T.js";
-import { t as D } from "./ColorPicker-BsgpTJqK.js";
+import { n as b } from "./usePopoverPosition-BO2LNy5n.js";
+import { L as x, h as S, z as C } from "./keys-CHPcp-Nz.js";
+import { t as w } from "./useI18n-D2L9Mkik.js";
+import { t as T } from "./createLucideIcon-JWHwTI6N.js";
+import { t as E } from "./x-CkD6A1iB.js";
+import { t as D } from "./ColorPicker-s9GHXjZs.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"

package/dist/SaveBlockDialog-Cc5BSUBx.js

@@ -0,0 +1,264 @@
+import { A as e, Dt as t, E as n, Et as r, I as i, N as a, O as o, Ot as s, R as c, T as l, Y as u, _ as d, c as f, d as p, h as m, l as h, m as g, nt as _, r as v, s as y, u as b, x, z as S } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
+import { a as C, c as w, s as T } from "./runtime-dom.esm-bundler-GdMI8WqG.js";
+import { H as E, P as D, c as O } from "./useEditorCore-Bd9CA4L_.js";
+import { B as k, P as A, f as j, h as M } from "./keys-CHPcp-Nz.js";
+import { t as N } from "./useI18n-D2L9Mkik.js";
+import { t as P } from "./chevron-down-j8GrdTyz.js";
+import { t as F } from "./chevron-up-BACyVhyC.js";
+import { t as I } from "./loader-circle-C-Z6kgI6.js";
+import { t as L } from "./TplModal-BA-Zsg0O.js";
+import { t as R } from "./SavedBlockPreviewCanvas-ubttfmKr.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 = 600, G = 240, K = /* @__PURE__ */ d({
+	__name: "SavedBlockPreviewRow",
+	props: {
+		block: {},
+		position: {},
+		total: {}
+	},
+	emits: ["move"],
+	setup(e, { emit: r }) {
+		let i = e, c = r, { t: d, format: v } = N(), S = x(j, []), C = u(null), O = u(null), k = u(1), A = u(null), M = u(!1), I = null, L = y(() => A.value !== null && A.value > G), K = y(() => A.value === null ? null : M.value || !L.value ? A.value : G);
+		function q() {
+			let e = C.value, t = O.value;
+			if (!e || !t) return;
+			let n = e.clientWidth;
+			if (n <= 0) return;
+			let r = Math.min(1, n / W);
+			k.value = r, A.value = t.offsetHeight * r;
+		}
+		n(() => {
+			q(), !(typeof ResizeObserver > "u") && (I = new ResizeObserver(() => q()), C.value && I.observe(C.value), O.value && I.observe(O.value));
+		}), l(() => {
+			I?.disconnect(), I = null;
+		});
+		let J = y(() => E(i.block, d, S)), Y = y(() => v(d.savedBlocks.reorderHandle, {
+			block: J.value,
+			position: i.position,
+			total: i.total
+		})), X = y(() => v(M.value ? d.savedBlocks.collapsePreview : d.savedBlocks.expandPreview, { block: J.value }));
+		return (n, r) => (o(), p("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)" }
+		}, [f("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": Y.value,
+			title: _(d).savedBlocks.reorderHint,
+			onKeydown: [r[0] ||= T(w((e) => c("move", -1), ["prevent"]), ["up"]), r[1] ||= T(w((e) => c("move", 1), ["prevent"]), ["down"])]
+		}, [m(_(D), {
+			size: 14,
+			"stroke-width": 1.5
+		})], 40, B), f("div", V, [
+			f("div", {
+				ref_key: "frameEl",
+				ref: C,
+				class: "tpl:overflow-hidden",
+				style: t({ height: K.value === null ? void 0 : `${K.value}px` })
+			}, [f("div", {
+				ref_key: "contentEl",
+				ref: O,
+				style: t({
+					width: `${W}px`,
+					transform: `scale(${k.value})`,
+					transformOrigin: "top left"
+				})
+			}, [m(R, { blocks: [e.block] }, null, 8, ["blocks"])], 4)], 4),
+			L.value && !M.value ? (o(), p("div", H)) : b("", !0),
+			L.value ? (o(), p("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": X.value,
+				"aria-expanded": M.value,
+				onClick: r[2] ||= (e) => M.value = !M.value
+			}, [(o(), h(a(M.value ? _(F) : _(P)), {
+				size: 11,
+				"stroke-width": 2
+			})), g(" " + s(M.value ? _(d).savedBlocks.collapse : _(d).savedBlocks.expand), 1)], 8, U)) : b("", !0)
+		])], 8, z));
+	}
+}), q = ["aria-busy"], J = {
+	id: "tpl-save-block-title",
+	class: "tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, Y = { class: "tpl:mb-3 tpl:shrink-0" }, X = { class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, ee = ["placeholder", "disabled"], te = { 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 }, Z = /* @__PURE__ */ d({
+	__name: "SaveBlockDialog",
+	props: {
+		visible: { type: Boolean },
+		pickedIds: {}
+	},
+	emits: ["close", "saved"],
+	setup(t, { emit: n }) {
+		let a = t, l = n, { t: d, format: w } = N(), T = k(M, "SaveBlockDialog"), D = k(A, "SaveBlockDialog"), P = x(j, []), F = u(""), R = u(""), z = u(!1), B = u(null), V = u(""), H = u([]), U = y(() => {
+			let e = new Map(T.content.value.blocks.map((e) => [e.id, e]));
+			return H.value.map((t) => e.get(t)).filter((e) => e !== void 0);
+		}), W = y({
+			get: () => U.value,
+			set: (e) => {
+				H.value = e.map((e) => e.id);
+			}
+		});
+		function G(e, t) {
+			let n = U.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]], H.value = n;
+			let a = U.value[i];
+			V.value = a ? w(d.savedBlocks.reorderAnnouncement, {
+				block: Z(a),
+				position: i + 1,
+				total: n.length
+			}) : "";
+		}
+		function Z(e) {
+			return E(e, d, P);
+		}
+		let ge = y(() => U.value.map(Z).join(", "));
+		i(() => a.visible, (e) => {
+			e && (F.value = "", R.value = "", B.value = null, V.value = "", H.value = [...a.pickedIds]);
+		}, { immediate: !0 });
+		let Q = y(() => F.value.trim().length > 0 && U.value.length > 0 && !z.value);
+		async function _e() {
+			if (!Q.value) return;
+			let e = U.value;
+			if (e.length !== 0) {
+				z.value = !0, B.value = null;
+				try {
+					await D.create(F.value.trim(), e, R.value.trim() || void 0), l("saved"), l("close");
+				} catch (e) {
+					B.value = e.message;
+				} finally {
+					z.value = !1;
+				}
+			}
+		}
+		function $() {
+			z.value || l("close");
+		}
+		function ve(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), _e()), e.key === "Escape" && $();
+		}
+		return (n, i) => (o(), h(L, {
+			visible: t.visible,
+			onClose: $,
+			onKeydown: ve
+		}, {
+			default: c(() => [f("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-busy": z.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"
+				}
+			}, [
+				f("h3", J, s(_(d).savedBlocks.saveAsBlock), 1),
+				f("div", Y, [f("label", X, s(_(d).savedBlocks.name), 1), S(f("input", {
+					"onUpdate:modelValue": i[0] ||= (e) => F.value = e,
+					type: "text",
+					"data-testid": "saved-blocks-name-input",
+					placeholder: _(d).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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+					disabled: z.value
+				}, null, 8, ee), [[C, F.value]])]),
+				f("div", te, [
+					f("label", ne, s(_(d).savedBlocks.category), 1),
+					S(f("input", {
+						id: "tpl-save-block-category",
+						"onUpdate:modelValue": i[1] ||= (e) => R.value = e,
+						type: "text",
+						"data-testid": "saved-blocks-category-input",
+						list: "tpl-saved-block-categories",
+						placeholder: _(d).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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+						disabled: z.value
+					}, null, 8, re), [[C, R.value]]),
+					f("datalist", ie, [(o(!0), p(v, null, e(_(D).categories.value, (e) => (o(), p("option", {
+						key: e,
+						value: e
+					}, null, 8, ae))), 128))])
+				]),
+				f("p", oe, [g(s(_(w)(_(d).savedBlocks.savingCount, { count: U.value.length })) + " ", 1), f("span", se, s(ge.value), 1)]),
+				U.value.length > 1 ? (o(), p("p", ce, s(_(d).savedBlocks.reorderHint), 1)) : b("", !0),
+				m(_(O), {
+					modelValue: W.value,
+					"onUpdate:modelValue": i[2] ||= (e) => W.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: c(() => [(o(!0), p(v, null, e(W.value, (e, t) => (o(), h(K, {
+						key: e.id,
+						block: e,
+						position: t + 1,
+						total: W.value.length,
+						onMove: (t) => G(e.id, t)
+					}, null, 8, [
+						"block",
+						"position",
+						"total",
+						"onMove"
+					]))), 128))]),
+					_: 1
+				}, 8, ["modelValue"]),
+				f("div", le, s(V.value), 1),
+				B.value ? (o(), p("p", ue, s(B.value), 1)) : b("", !0),
+				f("div", de, [f("button", {
+					type: "button",
+					class: r(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", { "tpl:cursor-not-allowed tpl:opacity-50": z.value }]),
+					disabled: z.value,
+					onClick: $
+				}, s(_(d).savedBlocks.cancel), 11, fe), f("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
+					disabled: !Q.value,
+					onClick: _e
+				}, [z.value ? (o(), p("span", me, [m(_(I), {
+					class: "tpl:animate-spin",
+					size: 12,
+					"stroke-width": 2
+				}), g(" " + s(_(d).savedBlocks.saving), 1)])) : (o(), p("span", he, s(_(d).savedBlocks.save), 1))], 8, pe)])
+			], 8, q)]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { Z as default };