@templatical/editor 0.39.0 → 0.39.2

package/dist/cdn/chunks/Toolbar-dxDYwN5E.js

@@ -0,0 +1,2385 @@
+import { n as e } from "./rolldown-runtime-B0aSnxlc.js";
+import { B as t, E as n, F as r, H as i, I as a, N as o, Q as s, R as c, S as l, U as u, X as d, at as f, b as p, ct as m, f as h, g, h as _, lt as v, m as y, o as b, p as x, s as S, u as C, ut as w, x as T, y as E } from "./draggable-IB4x6w2O.js";
+import { L as D, W as O, i as k, it as A, r as j } from "./src-Dwgq7hf4.js";
+import { a as M, h as N, i as ee, r as P, s as te } from "./socialIcons-9VrG8X3m.js";
+import { _ as ne } from "./dist-BRZhN8qJ.js";
+import { I as re, N as ie, Z as F, c as ae, d as oe, h as se, n as ce, p as le, v as I } from "./keys-dJbD1QPs.js";
+import { t as L } from "./useI18n-DTZ9sIcv.js";
+import { a as ue } from "./usePopoverPosition-gB9q-ql7.js";
+import { $ as de, D as fe, Et as pe, It as me, Mt as he, Ot as ge, U as R, d as _e, dt as ve, et as z, ft as ye, g as B, h as V, it as be, m as H, n as xe, nt as Se, rt as Ce, s as we, z as Te } from "./icons-BKkJ-5xF.js";
+import { t as Ee } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as De } from "./useAliveFlag-DAlQLbM2.js";
+import { _ as Oe, b as ke, c as Ae, g as U, h as W, m as G, p as K, r as je } from "./styleConstants-C_YAPdQS.js";
+import { t as Me } from "./blockTypeIcons-raBjStuv.js";
+import { c as q } from "./LogicTagInsertButton-DpyPozop.js";
+import { n as Ne, t as J } from "./ToggleSwitch-CDy8OfcB.js";
+import { t as Y } from "./MergeTagInput-ERJr7bP_.js";
+//#region src/components/SlidingPillSelect.vue?vue&type=script&setup=true&lang.ts
+var Pe = [
+	"aria-checked",
+	"aria-label",
+	"title",
+	"onClick"
+], Fe = { key: 1 }, X = /* @__PURE__ */ l({
+	__name: "SlidingPillSelect",
+	props: {
+		options: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, a = h(() => n.options.findIndex((e) => e.value === n.modelValue)), s = h(() => `translateX(${Math.max(a.value, 0) * 100}%)`);
+		return (t, n) => (o(), g("div", {
+			role: "radiogroup",
+			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
+			style: v({
+				gridTemplateColumns: `repeat(${e.options.length}, 1fr)`,
+				backgroundColor: "var(--tpl-bg-hover)"
+			})
+		}, [a.value >= 0 ? (o(), g("div", {
+			key: 0,
+			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
+			style: v({
+				left: "4px",
+				width: `calc((100% - 8px) / ${e.options.length})`,
+				transform: s.value,
+				backgroundColor: "var(--tpl-bg)",
+				boxShadow: "var(--tpl-shadow)",
+				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
+			})
+		}, null, 4)) : _("", !0), (o(!0), g(C, null, r(e.options, (t) => (o(), g("button", {
+			key: t.value,
+			role: "radio",
+			"aria-checked": e.modelValue === t.value,
+			"aria-label": t.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: v({
+				color: e.modelValue === t.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
+			}),
+			title: t.label,
+			onClick: (e) => i("update:modelValue", t.value)
+		}, [t.icon ? (o(), y(c(t.icon), {
+			key: 0,
+			size: 14,
+			"stroke-width": 2
+		})) : (o(), g("span", Fe, w(t.label), 1))], 12, Pe))), 128))], 4));
+	}
+}), Ie = { class: "tpl:mb-3.5" }, Le = ["value"], Re = { value: "" }, ze = ["value"], Be = { class: "tpl:mb-3.5" }, Ve = { class: "tpl:mb-3.5" }, He = { class: "tpl:mb-3.5" }, Ue = { class: "tpl:mb-3.5" }, We = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, Ge = { class: "tpl:mb-3.5" }, Ke = { class: "tpl:flex tpl:items-stretch" }, qe = ["value"], Je = { class: "tpl:mb-3.5" }, Ye = { class: "tpl:flex tpl:items-stretch" }, Xe = ["value"], Ze = { class: "tpl:mb-3.5" }, Qe = ["value"], $e = { value: "auto" }, et = { value: "full" }, tt = { value: "custom" }, nt = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:items-stretch"
+}, rt = ["value"], it = { class: "tpl:mb-3.5" }, at = 200, ot = /* @__PURE__ */ l({
+	__name: "ButtonToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { t: a } = L(), s = h(() => n.block.width === "full" ? "full" : typeof n.block.width == "number" ? "custom" : "auto");
+		function c(e, t) {
+			i("update", { [e]: t });
+		}
+		function l(e) {
+			if (e === "full") {
+				c("width", "full");
+				return;
+			}
+			if (e === "custom") {
+				c("width", typeof n.block.width == "number" ? n.block.width : at);
+				return;
+			}
+			c("width", void 0);
+		}
+		function u(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t <= 0 || c("width", t);
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", Ie, [x("label", { class: m(f(U)) }, w(f(a).button.fontFamily), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.fontFamily || "",
+				onChange: n[0] ||= (e) => c("fontFamily", e.target.value || void 0)
+			}, [x("option", Re, w(f(a).button.inheritFont), 1), (o(!0), g(C, null, r(e.fontFamilies, (e) => (o(), g("option", {
+				key: e.value,
+				value: e.value
+			}, w(e.label), 9, ze))), 128))], 42, Le)]),
+			x("div", Be, [x("label", { class: m(f(U)) }, w(f(a).button.text), 3), p(Y, {
+				"model-value": e.block.text,
+				type: "text",
+				"onUpdate:modelValue": n[1] ||= (e) => c("text", e)
+			}, null, 8, ["model-value"])]),
+			x("div", Ve, [
+				x("label", { class: m(f(U)) }, w(f(a).button.url), 3),
+				p(Y, {
+					"model-value": e.block.url,
+					type: "url",
+					placeholder: f(a).button.urlPlaceholder,
+					"onUpdate:modelValue": n[2] ||= (e) => c("url", e)
+				}, null, 8, ["model-value", "placeholder"]),
+				e.block.url ? (o(), y(J, {
+					key: 0,
+					class: "tpl:mt-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]",
+					"model-value": e.block.openInNewTab ?? !1,
+					label: f(a).button.openInNewTab,
+					"onUpdate:modelValue": n[3] ||= (e) => c("openInNewTab", e)
+				}, null, 8, ["model-value", "label"])) : _("", !0)
+			]),
+			x("div", He, [x("label", { class: m(f(U)) }, w(f(a).button.background), 3), p(q, {
+				"model-value": e.block.backgroundColor,
+				"onUpdate:modelValue": n[4] ||= (e) => c("backgroundColor", e)
+			}, null, 8, ["model-value"])]),
+			x("div", Ue, [x("label", { class: m(f(U)) }, w(f(a).button.textColor), 3), p(q, {
+				"model-value": e.block.textColor,
+				"onUpdate:modelValue": n[5] ||= (e) => c("textColor", e)
+			}, null, 8, ["model-value"])]),
+			x("div", We, [x("div", Ge, [x("label", { class: m(f(U)) }, w(f(a).button.borderRadius), 3), x("div", Ke, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.borderRadius,
+				min: "0",
+				max: "50",
+				onInput: n[6] ||= (e) => c("borderRadius", Number(e.target.value))
+			}, null, 42, qe), x("span", { class: m(f(W)) }, "px", 2)])]), x("div", Je, [x("label", { class: m(f(U)) }, w(f(a).button.fontSize), 3), x("div", Ye, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.fontSize,
+				min: "10",
+				max: "36",
+				onInput: n[7] ||= (e) => c("fontSize", Number(e.target.value))
+			}, null, 42, Xe), x("span", { class: m(f(W)) }, "px", 2)])])]),
+			x("div", Ze, [
+				x("label", { class: m(f(U)) }, w(f(a).button.width), 3),
+				x("select", {
+					class: m(f(K)),
+					value: s.value,
+					onChange: n[8] ||= (e) => l(e.target.value)
+				}, [
+					x("option", $e, w(f(a).button.widthAuto), 1),
+					x("option", et, w(f(a).button.fullWidth), 1),
+					x("option", tt, w(f(a).button.widthCustom), 1)
+				], 42, Qe),
+				s.value === "custom" ? (o(), g("div", nt, [x("input", {
+					type: "number",
+					class: m(f(G)),
+					value: typeof e.block.width == "number" ? e.block.width : at,
+					min: "20",
+					onInput: n[9] ||= (e) => u(e.target.value)
+				}, null, 42, rt), x("span", { class: m(f(W)) }, "px", 2)])) : _("", !0)
+			]),
+			x("div", it, [x("label", { class: m(f(U)) }, w(f(a).title.align), 3), p(X, {
+				options: [
+					{
+						value: "left",
+						label: f(a).title.alignLeft
+					},
+					{
+						value: "center",
+						label: f(a).title.alignCenter
+					},
+					{
+						value: "right",
+						label: f(a).title.alignRight
+					}
+				],
+				"model-value": e.block.align ?? "center",
+				"onUpdate:modelValue": n[10] ||= (e) => c("align", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), st = { class: "spacing-control" }, ct = { class: "tpl:mb-2 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, lt = { class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-1.5" }, ut = { class: "tpl:flex tpl:items-center" }, dt = ["aria-label"], ft = ["value", "aria-label"], pt = ["aria-label"], mt = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ht = { class: "tpl:flex tpl:items-center" }, gt = ["aria-label"], _t = ["value", "aria-label"], vt = ["aria-label"], yt = ["aria-label", "title"], bt = { class: "tpl:flex tpl:items-center" }, xt = ["aria-label"], St = ["value", "aria-label"], Ct = ["aria-label"], wt = { class: "tpl:flex tpl:items-center" }, Tt = ["aria-label"], Et = ["value", "aria-label"], Dt = ["aria-label"], Z = "tpl:flex tpl:items-center tpl:justify-center tpl:w-8 tpl:h-8 tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg)] tpl:border tpl:border-[var(--tpl-border)] tpl:cursor-pointer tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)] tpl:active:bg-[var(--tpl-bg-active)]", Ot = "tpl:w-10 tpl:h-8 tpl:text-center tpl:text-xs tpl:font-medium tpl:border-y tpl:border-x-0 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]", kt = /*#__PURE__*/ Ee(/* @__PURE__ */ l({
+	__name: "SpacingControl",
+	props: {
+		modelValue: {},
+		label: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: n }) {
+		let r = e, i = n, { t: a } = L(), c = h(() => r.modelValue.top === r.modelValue.right && r.modelValue.right === r.modelValue.bottom && r.modelValue.bottom === r.modelValue.left), l = s(c.value);
+		t(c, (e) => {
+			!e && l.value && (l.value = !1);
+		});
+		function u(e, t) {
+			let n = Math.max(0, r.modelValue[e] + t);
+			l.value ? i("update:modelValue", {
+				top: n,
+				right: n,
+				bottom: n,
+				left: n
+			}) : i("update:modelValue", {
+				...r.modelValue,
+				[e]: n
+			});
+		}
+		function d(e, t) {
+			let n = Math.max(0, t);
+			l.value ? i("update:modelValue", {
+				top: n,
+				right: n,
+				bottom: n,
+				left: n
+			}) : i("update:modelValue", {
+				...r.modelValue,
+				[e]: n
+			});
+		}
+		function _() {
+			if (l.value = !l.value, l.value) {
+				let e = r.modelValue.top;
+				i("update:modelValue", {
+					top: e,
+					right: e,
+					bottom: e,
+					left: e
+				});
+			}
+		}
+		return (t, n) => (o(), g("div", st, [x("label", ct, w(e.label), 1), x("div", lt, [
+			x("div", ut, [
+				x("button", {
+					"aria-label": f(a).spacingControl.decreaseTop,
+					class: m([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+					onClick: n[0] ||= (e) => u("top", -1)
+				}, [p(f(z), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, dt),
+				x("input", {
+					type: "number",
+					class: m(Ot),
+					value: e.modelValue.top,
+					"aria-label": f(a).spacingControl.top,
+					min: "0",
+					onInput: n[1] ||= (e) => d("top", Number(e.target.value))
+				}, null, 40, ft),
+				x("button", {
+					"aria-label": f(a).spacingControl.increaseTop,
+					class: m([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+					onClick: n[2] ||= (e) => u("top", 1)
+				}, [p(f(R), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, pt)
+			]),
+			x("div", mt, [
+				x("div", ht, [
+					x("button", {
+						"aria-label": f(a).spacingControl.decreaseLeft,
+						class: m([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+						onClick: n[3] ||= (e) => u("left", -1)
+					}, [p(f(z), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, gt),
+					x("input", {
+						type: "number",
+						class: m(Ot),
+						value: e.modelValue.left,
+						"aria-label": f(a).spacingControl.left,
+						min: "0",
+						onInput: n[4] ||= (e) => d("left", Number(e.target.value))
+					}, null, 40, _t),
+					x("button", {
+						"aria-label": f(a).spacingControl.increaseLeft,
+						class: m([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+						onClick: n[5] ||= (e) => u("left", 1)
+					}, [p(f(R), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, vt)
+				]),
+				x("button", {
+					class: m(["tpl:flex tpl:h-8 tpl:w-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", l.value ? "tpl:border-[var(--tpl-primary)] tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
+					"aria-label": l.value ? f(a).spacingControl.unlock : f(a).spacingControl.lockAll,
+					title: l.value ? f(a).spacingControl.unlock : f(a).spacingControl.lockAll,
+					onClick: _
+				}, [l.value ? (o(), y(f(Se), {
+					key: 0,
+					size: 14,
+					"stroke-width": 2
+				})) : (o(), y(f(Ce), {
+					key: 1,
+					size: 14,
+					"stroke-width": 2
+				}))], 10, yt),
+				x("div", bt, [
+					x("button", {
+						"aria-label": f(a).spacingControl.decreaseRight,
+						class: m([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+						onClick: n[6] ||= (e) => u("right", -1)
+					}, [p(f(z), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, xt),
+					x("input", {
+						type: "number",
+						class: m(Ot),
+						value: e.modelValue.right,
+						"aria-label": f(a).spacingControl.right,
+						min: "0",
+						onInput: n[7] ||= (e) => d("right", Number(e.target.value))
+					}, null, 40, St),
+					x("button", {
+						"aria-label": f(a).spacingControl.increaseRight,
+						class: m([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+						onClick: n[8] ||= (e) => u("right", 1)
+					}, [p(f(R), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, Ct)
+				])
+			]),
+			x("div", wt, [
+				x("button", {
+					"aria-label": f(a).spacingControl.decreaseBottom,
+					class: m([Z, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+					onClick: n[9] ||= (e) => u("bottom", -1)
+				}, [p(f(z), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, Tt),
+				x("input", {
+					type: "number",
+					class: m(Ot),
+					value: e.modelValue.bottom,
+					"aria-label": f(a).spacingControl.bottom,
+					min: "0",
+					onInput: n[10] ||= (e) => d("bottom", Number(e.target.value))
+				}, null, 40, Et),
+				x("button", {
+					"aria-label": f(a).spacingControl.increaseBottom,
+					class: m([Z, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+					onClick: n[11] ||= (e) => u("bottom", 1)
+				}, [p(f(R), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, Dt)
+			])
+		])]));
+	}
+}), [["__scopeId", "data-v-69591c1e"]]), At = ["data-testid"], jt = { class: "tpl:mt-3" }, Mt = /* @__PURE__ */ l({
+	__name: "CollapsibleSection",
+	props: {
+		title: {},
+		open: { type: Boolean },
+		noBorder: { type: Boolean },
+		headerTestId: {}
+	},
+	emits: ["toggle"],
+	setup(e) {
+		return (t, n) => (o(), g("div", { class: m(["tpl:py-3", e.noBorder ? "" : "tpl:border-t tpl:border-[var(--tpl-border)]"]) }, [x("button", {
+			type: "button",
+			"data-testid": e.headerTestId,
+			class: "tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-1.5 tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+			onClick: n[0] ||= (e) => t.$emit("toggle")
+		}, [p(f(me), {
+			class: m(["tpl:transition-transform tpl:duration-200", e.open ? "tpl:rotate-0" : "tpl:-rotate-90"]),
+			size: 12,
+			"stroke-width": 2
+		}, null, 8, ["class"]), x("span", null, w(e.title), 1)], 8, At), u(x("div", jt, [a(t.$slots, "default")], 512), [[S, e.open]])], 2));
+	}
+}), Nt = { class: "tpl:space-y-2" }, Pt = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ft = { class: "tpl:space-y-2" }, It = ["value"], Lt = { value: "" }, Rt = ["label"], zt = ["value"], Bt = ["value"], Vt = {
+	key: 0,
+	value: "__custom__"
+}, Ht = {
+	key: 0,
+	class: "tpl:space-y-2"
+}, Ut = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Wt = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Gt = { class: "tpl:flex tpl:justify-end" }, Kt = ["disabled"], qt = {
+	key: 0,
+	class: "tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]"
+}, Jt = { class: "tpl:space-y-1" }, Yt = { class: "tpl:m-0 tpl:overflow-x-auto tpl:rounded tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-muted)]" }, Xt = {
+	key: 0,
+	class: "tpl:m-0 tpl:overflow-x-auto tpl:rounded tpl:bg-[var(--tpl-bg)] tpl:p-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-muted)]"
+}, Zt = /* @__PURE__ */ l({
+	__name: "CommonBlockSettings",
+	props: {
+		block: {},
+		isFirstSection: { type: Boolean }
+	},
+	emits: ["update"],
+	setup(e, { emit: a }) {
+		let l = e, v = a, { t: S } = L(), T = n(se, []), D = n(ce, !1), O = d(/* @__PURE__ */ new Set()), k = s(!1), A = s(""), j = s(""), M = [{
+			key: "desktop",
+			icon: de,
+			labelKey: "showOnDesktop"
+		}, {
+			key: "mobile",
+			icon: fe,
+			labelKey: "showOnMobile"
+		}];
+		function N(e) {
+			O.has(e) ? O.delete(e) : O.add(e);
+		}
+		let ee = h(() => T.length > 0 || D), P = h(() => l.block.displayCondition ? !T.some((e) => e.label === l.block.displayCondition?.label) : !1);
+		function te() {
+			k.value = !0, P.value && l.block.displayCondition ? (A.value = l.block.displayCondition.before, j.value = l.block.displayCondition.after ?? "") : (A.value = "", j.value = "");
+		}
+		function ne() {
+			A.value.trim() && (v("update", { displayCondition: {
+				label: S.blockSettings.customCondition,
+				before: A.value.trim(),
+				after: j.value.trim()
+			} }), k.value = !1, A.value = "", j.value = "");
+		}
+		t(() => l.block.displayCondition, (e) => {
+			if (!e) {
+				k.value = !1, A.value = "", j.value = "";
+				return;
+			}
+			P.value && (A.value = e.before, j.value = e.after ?? "");
+		}, { immediate: !0 });
+		let re = h(() => {
+			let e = {};
+			for (let t of T) {
+				let n = t.group ?? "";
+				e[n] || (e[n] = []), e[n].push(t);
+			}
+			return e;
+		});
+		function ie(e, t) {
+			v("update", { styles: {
+				...l.block.styles,
+				[e]: t
+			} });
+		}
+		function F(e) {
+			return l.block.visibility?.[e] !== !1;
+		}
+		function ae(e) {
+			let t = {
+				desktop: F("desktop"),
+				mobile: F("mobile")
+			};
+			t[e] = !t[e], v("update", { visibility: t });
+		}
+		return (t, n) => (o(), g("div", { class: m(["tpl:flex tpl:flex-col", e.isFirstSection ? "" : "tpl:mt-4"]) }, [
+			p(Mt, {
+				title: f(S).blockSettings.spacing,
+				open: O.has("spacing"),
+				"no-border": e.isFirstSection,
+				onToggle: n[1] ||= (e) => N("spacing")
+			}, {
+				default: i(() => [p(kt, {
+					label: f(S).blockSettings.padding,
+					"model-value": e.block.styles.padding,
+					"onUpdate:modelValue": n[0] ||= (e) => ie("padding", e)
+				}, null, 8, ["label", "model-value"])]),
+				_: 1
+			}, 8, [
+				"title",
+				"open",
+				"no-border"
+			]),
+			p(Mt, {
+				title: f(S).blockSettings.background,
+				open: O.has("bg"),
+				onToggle: n[3] ||= (e) => N("bg")
+			}, {
+				default: i(() => [x("label", { class: m(f(U)) }, w(f(S).blockSettings.color), 3), p(q, {
+					"model-value": e.block.styles.backgroundColor ?? "",
+					"onUpdate:modelValue": n[2] ||= (e) => ie("backgroundColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["title", "open"]),
+			p(Mt, {
+				title: f(S).blockSettings.display,
+				open: O.has("display"),
+				onToggle: n[4] ||= (e) => N("display")
+			}, {
+				default: i(() => [x("div", Nt, [(o(), g(C, null, r(M, (e) => p(J, {
+					key: e.key,
+					class: "tpl:text-xs tpl:text-[var(--tpl-text)]",
+					"model-value": F(e.key),
+					label: f(S).blockSettings[e.labelKey],
+					"onUpdate:modelValue": (t) => ae(e.key)
+				}, {
+					default: i(() => [x("span", Pt, [(o(), y(c(e.icon), {
+						size: 14,
+						"stroke-width": 1.5
+					})), E(" " + w(f(S).blockSettings[e.labelKey]), 1)])]),
+					_: 2
+				}, 1032, [
+					"model-value",
+					"label",
+					"onUpdate:modelValue"
+				])), 64))])]),
+				_: 1
+			}, 8, ["title", "open"]),
+			ee.value ? (o(), y(Mt, {
+				key: 0,
+				"header-test-id": "display-condition-section",
+				title: f(S).blockSettings.displayCondition,
+				open: O.has("condition"),
+				onToggle: n[8] ||= (e) => N("condition")
+			}, {
+				default: i(() => [x("div", Ft, [x("select", {
+					"data-testid": "display-condition-select",
+					class: m(["tpl:w-full tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-2 tpl:text-xs tpl:outline-none tpl:transition-all tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", e.block.displayCondition ? "tpl:border-[var(--tpl-primary)] tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-text)]" : "tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"]),
+					value: k.value || P.value ? "__custom__" : e.block.displayCondition?.label ?? "",
+					onChange: n[5] ||= (e) => {
+						let t = e.target.value;
+						if (t === "__custom__") {
+							te();
+							return;
+						}
+						if (k.value = !1, !t) {
+							v("update", { displayCondition: void 0 });
+							return;
+						}
+						let n = f(T).find((e) => e.label === t);
+						n && v("update", { displayCondition: n });
+					}
+				}, [
+					x("option", Lt, w(f(S).blockSettings.noCondition), 1),
+					(o(!0), g(C, null, r(re.value, (e, t) => (o(), g(C, { key: t }, [t ? (o(), g("optgroup", {
+						key: 0,
+						label: String(t)
+					}, [(o(!0), g(C, null, r(e, (e) => (o(), g("option", {
+						key: e.label,
+						value: e.label
+					}, w(e.label), 9, zt))), 128))], 8, Rt)) : (o(!0), g(C, { key: 1 }, r(e, (e) => (o(), g("option", {
+						key: e.label,
+						value: e.label
+					}, w(e.label), 9, Bt))), 128))], 64))), 128)),
+					f(D) ? (o(), g("option", Vt, w(f(S).blockSettings.customCondition), 1)) : _("", !0)
+				], 42, It), k.value || P.value ? (o(), g("div", Ht, [
+					x("div", null, [x("label", Ut, w(f(S).blockSettings.customConditionBefore), 1), u(x("textarea", {
+						"onUpdate:modelValue": n[6] ||= (e) => A.value = e,
+						rows: "2",
+						class: m(f(Oe))
+					}, null, 2), [[b, A.value]])]),
+					x("div", null, [x("label", Wt, w(f(S).blockSettings.customConditionAfter), 1), u(x("textarea", {
+						"onUpdate:modelValue": n[7] ||= (e) => j.value = e,
+						rows: "2",
+						class: m(f(Oe))
+					}, null, 2), [[b, j.value]])]),
+					x("div", Gt, [x("button", {
+						type: "button",
+						class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-[var(--tpl-primary)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-on-primary)] tpl:transition-all tpl:hover:opacity-90 tpl:disabled:opacity-50",
+						disabled: !A.value.trim(),
+						onClick: ne
+					}, w(f(S).blockSettings.applyCondition), 9, Kt)])
+				])) : e.block.displayCondition && !P.value ? (o(), g(C, { key: 1 }, [e.block.displayCondition.description ? (o(), g("p", qt, w(e.block.displayCondition.description), 1)) : _("", !0), x("div", Jt, [x("pre", Yt, w(e.block.displayCondition.before), 1), e.block.displayCondition.after ? (o(), g("pre", Xt, w(e.block.displayCondition.after), 1)) : _("", !0)])], 64)) : _("", !0)])]),
+				_: 1
+			}, 8, ["title", "open"])) : _("", !0)
+		], 2));
+	}
+}), Qt = ["title"], $t = /* @__PURE__ */ l({
+	__name: "BooleanField",
+	props: {
+		field: {},
+		modelValue: { type: Boolean },
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		return (t, a) => (o(), g("div", {
+			class: "tpl:mb-3.5",
+			title: e.readOnly ? f(r).customBlocks.dataSource.readOnlyTooltip : void 0
+		}, [p(J, {
+			class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+			"model-value": e.modelValue,
+			label: e.field.label,
+			required: e.field.required,
+			disabled: e.readOnly,
+			"onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
+		}, {
+			default: i(() => [E(w(e.field.label) + " ", 1), e.readOnly ? (o(), y(f(Se), {
+				key: 0,
+				size: 12,
+				class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
+			})) : _("", !0)]),
+			_: 1
+		}, 8, [
+			"model-value",
+			"label",
+			"required",
+			"disabled"
+		])], 8, Qt));
+	}
+}), en = { class: "tpl:mb-3.5" }, tn = ["title"], nn = { class: "tpl-sr-only" }, rn = ["title"], an = { class: "tpl-sr-only" }, Q = /* @__PURE__ */ l({
+	__name: "FieldWrapper",
+	props: {
+		label: {},
+		required: { type: Boolean },
+		readOnly: { type: Boolean }
+	},
+	setup(e) {
+		let { t } = L();
+		return (n, r) => (o(), g("div", en, [x("label", { class: m(f(U)) }, [
+			E(w(e.label) + " ", 1),
+			e.readOnly ? (o(), g("span", {
+				key: 0,
+				title: f(t).customBlocks.dataSource.readOnlyTooltip
+			}, [p(f(Se), {
+				size: 12,
+				class: "tpl:inline tpl:text-[var(--tpl-text-dim)]",
+				"aria-hidden": "true"
+			}), x("span", nn, w(f(t).customBlocks.dataSource.readOnlyTooltip), 1)], 8, tn)) : _("", !0),
+			e.required ? (o(), g("span", {
+				key: 1,
+				class: "tpl:text-[var(--tpl-danger)]",
+				title: f(t).customBlocks.fields.required
+			}, [r[0] ||= x("span", { "aria-hidden": "true" }, "*", -1), x("span", an, w(f(t).customBlocks.fields.required), 1)], 8, rn)) : _("", !0)
+		], 2), a(n.$slots, "default")]));
+	}
+}), on = /* @__PURE__ */ l({
+	__name: "ColorField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, a = t, { t: s } = L(), c = n(oe, ue), l = h(() => M(r.field, c));
+		return (t, n) => (o(), y(Q, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: i(() => [p(q, {
+				"model-value": e.modelValue,
+				placeholder: e.field.placeholder,
+				disabled: e.readOnly,
+				presets: l.value.presets,
+				"allow-custom": l.value.allowCustom,
+				title: e.readOnly ? f(s).customBlocks.dataSource.readOnlyTooltip : void 0,
+				"onUpdate:modelValue": n[0] ||= (e) => a("update:modelValue", e)
+			}, null, 8, [
+				"model-value",
+				"placeholder",
+				"disabled",
+				"presets",
+				"allow-custom",
+				"title"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), sn = {
+	key: 0,
+	class: "tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-2 tpl:border-dashed tpl:text-xs tpl:font-medium tpl:border-[var(--tpl-primary)] tpl:text-[var(--tpl-primary)]",
+	style: { "background-color": "color-mix(in srgb, var(--tpl-bg) 90%, transparent)" }
+}, cn = [
+	"value",
+	"placeholder",
+	"title"
+], ln = ["value", "placeholder"], un = /* @__PURE__ */ l({
+	__name: "ImageField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, a = t, { t: c } = L(), l = n(re, null), u = n(ae, null), d = De(), v = h(() => !!l);
+		async function b() {
+			let e = await l?.({ accept: ["images"] });
+			d.alive && e && a("update:modelValue", e.url);
+		}
+		let S = s(), T = s(!1), D = h(() => (u?.value ?? !!l) && !T.value && !r.readOnly);
+		async function O(e) {
+			if (l) {
+				T.value = !0;
+				try {
+					let t = await l({
+						accept: ["images"],
+						files: e
+					});
+					if (!d.alive) return;
+					t && a("update:modelValue", t.url);
+				} finally {
+					d.alive && (T.value = !1);
+				}
+			}
+		}
+		let { isOver: k } = ee({
+			target: S,
+			enabled: D,
+			onFiles: O
+		});
+		return (t, n) => (o(), y(Q, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: i(() => [x("div", {
+				ref_key: "dropZoneRef",
+				ref: S,
+				class: "tpl:relative"
+			}, [
+				D.value && (f(k) || T.value) ? (o(), g("div", sn, [T.value ? (o(), g(C, { key: 0 }, [p(f(be), {
+					class: "tpl-spinner",
+					size: 18,
+					"stroke-width": 2
+				}), E(" " + w(f(c).image.uploading), 1)], 64)) : (o(), g(C, { key: 1 }, [p(f(we), {
+					size: 18,
+					"stroke-width": 1.5
+				}), E(" " + w(f(c).image.dropToUpload), 1)], 64))])) : _("", !0),
+				e.readOnly ? (o(), g("input", {
+					key: 1,
+					type: "url",
+					class: m([f(K), "tpl:opacity-60 tpl:cursor-not-allowed"]),
+					value: e.modelValue,
+					placeholder: e.field.placeholder || "https://...",
+					disabled: "",
+					title: f(c).customBlocks.dataSource.readOnlyTooltip
+				}, null, 10, cn)) : (o(), g("input", {
+					key: 2,
+					type: "url",
+					class: m(f(K)),
+					value: e.modelValue,
+					placeholder: e.field.placeholder || "https://...",
+					onInput: n[0] ||= (e) => a("update:modelValue", e.target.value)
+				}, null, 42, ln)),
+				v.value && !e.readOnly ? (o(), g("button", {
+					key: 3,
+					class: "tpl:mt-2 tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg)]",
+					onClick: n[1] ||= (e) => b()
+				}, [p(f(ye), {
+					size: 14,
+					"stroke-width": 1.5
+				}), E(" " + w(f(c).image.browseMedia), 1)])) : _("", !0)
+			], 512)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), dn = [
+	"value",
+	"placeholder",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"title"
+], fn = /* @__PURE__ */ l({
+	__name: "NumberField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		return (t, a) => (o(), y(Q, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: i(() => [x("input", {
+				type: "number",
+				class: m([f(K), e.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
+				value: e.modelValue,
+				placeholder: e.field.placeholder,
+				min: e.field.min,
+				max: e.field.max,
+				step: e.field.step,
+				disabled: e.readOnly,
+				title: e.readOnly ? f(r).customBlocks.dataSource.readOnlyTooltip : void 0,
+				onInput: a[0] ||= (t) => !e.readOnly && n("update:modelValue", Number(t.target.value))
+			}, null, 42, dn)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), pn = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, mn = { class: "tpl:mb-2 tpl:flex tpl:items-center tpl:justify-between" }, hn = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]" }, gn = ["title", "onClick"], _n = {
+	key: 1,
+	class: "tpl:m-0 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, vn = {
+	key: 2,
+	class: "tpl:m-0 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, yn = /* @__PURE__ */ l({
+	__name: "RepeatableField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, a = t, { t: s, format: l } = L(), u = h(() => n.modelValue || []), d = h(() => !n.field.maxItems || u.value.length < n.field.maxItems), v = h(() => !n.field.minItems || u.value.length > n.field.minItems);
+		function b() {
+			if (!d.value || n.readOnly) return;
+			let e = {};
+			for (let t of n.field.fields) e[t.key] = t.default ?? "";
+			a("update:modelValue", [...u.value, e]);
+		}
+		function S(e) {
+			if (!v.value || n.readOnly) return;
+			let t = [...u.value];
+			t.splice(e, 1), a("update:modelValue", t);
+		}
+		function T(e, t, n) {
+			let r = u.value.map((r, i) => i === e ? {
+				...r,
+				[t]: n
+			} : r);
+			a("update:modelValue", r);
+		}
+		return (t, n) => (o(), y(Q, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: i(() => [x("div", pn, [
+				(o(!0), g(C, null, r(u.value, (t, n) => (o(), g("div", {
+					key: `${e.field.key}-${n}`,
+					class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-3"
+				}, [x("div", mn, [x("span", hn, " #" + w(n + 1), 1), v.value && !e.readOnly ? (o(), g("button", {
+					key: 0,
+					type: "button",
+					class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]",
+					title: f(s).customBlocks.fields.removeItem,
+					onClick: (e) => S(n)
+				}, [p(f(_e), {
+					size: 12,
+					"stroke-width": 2
+				})], 8, gn)) : _("", !0)]), (o(!0), g(C, null, r(e.field.fields, (r) => (o(), y(c(f(On)(r.type)), {
+					key: r.key,
+					field: r,
+					"model-value": t[r.key],
+					"read-only": e.readOnly,
+					"onUpdate:modelValue": (e) => T(n, r.key, e)
+				}, null, 8, [
+					"field",
+					"model-value",
+					"read-only",
+					"onUpdate:modelValue"
+				]))), 128))]))), 128)),
+				d.value && !e.readOnly ? (o(), g("button", {
+					key: 0,
+					type: "button",
+					class: m(f(Ae)),
+					onClick: b
+				}, [p(f(R), {
+					size: 14,
+					"stroke-width": 2
+				}), E(" " + w(f(s).customBlocks.fields.addItem), 1)], 2)) : _("", !0),
+				!d.value && !e.readOnly ? (o(), g("p", _n, w(f(s).customBlocks.fields.maxItemsReached), 1)) : _("", !0),
+				!v.value && !e.readOnly ? (o(), g("p", vn, w(f(l)(f(s).customBlocks.fields.minItemsRequired, { count: e.field.minItems ?? 0 })), 1)) : _("", !0)
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), bn = [
+	"value",
+	"disabled",
+	"title"
+], xn = ["value"], Sn = /* @__PURE__ */ l({
+	__name: "SelectField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, { t: a } = L();
+		return (t, s) => (o(), y(Q, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: i(() => [x("select", {
+				class: m([f(K), e.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
+				value: e.modelValue,
+				disabled: e.readOnly,
+				title: e.readOnly ? f(a).customBlocks.dataSource.readOnlyTooltip : void 0,
+				onChange: s[0] ||= (t) => !e.readOnly && n("update:modelValue", t.target.value)
+			}, [(o(!0), g(C, null, r(e.field.options, (e) => (o(), g("option", {
+				key: e.value,
+				value: e.value
+			}, w(e.label), 9, xn))), 128))], 42, bn)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), Cn = [
+	"value",
+	"placeholder",
+	"title"
+], wn = /* @__PURE__ */ l({
+	__name: "TextField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		return (t, a) => (o(), y(Q, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: i(() => [e.readOnly ? (o(), g("input", {
+				key: 0,
+				type: "text",
+				class: m([f(K), "tpl:opacity-60 tpl:cursor-not-allowed"]),
+				value: e.modelValue,
+				placeholder: e.field.placeholder,
+				disabled: "",
+				title: f(r).customBlocks.dataSource.readOnlyTooltip
+			}, null, 10, Cn)) : (o(), y(Y, {
+				key: 1,
+				"model-value": e.modelValue,
+				placeholder: e.field.placeholder,
+				"onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
+			}, null, 8, ["model-value", "placeholder"]))]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), Tn = [
+	"value",
+	"placeholder",
+	"title"
+], En = "tpl:w-full tpl:resize-y tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:opacity-60 tpl:cursor-not-allowed", Dn = {
+	text: wn,
+	textarea: /* @__PURE__ */ l({
+		__name: "TextareaField",
+		props: {
+			field: {},
+			modelValue: {},
+			readOnly: { type: Boolean }
+		},
+		emits: ["update:modelValue"],
+		setup(e, { emit: t }) {
+			let n = t, { t: r } = L();
+			return (t, a) => (o(), y(Q, {
+				label: e.field.label,
+				required: e.field.required,
+				"read-only": e.readOnly
+			}, {
+				default: i(() => [e.readOnly ? (o(), g("textarea", {
+					key: 0,
+					value: e.modelValue,
+					placeholder: e.field.placeholder,
+					rows: "3",
+					disabled: "",
+					title: f(r).customBlocks.dataSource.readOnlyTooltip,
+					class: m(En)
+				}, null, 8, Tn)) : (o(), y(Ne, {
+					key: 1,
+					"model-value": e.modelValue,
+					placeholder: e.field.placeholder,
+					"onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
+				}, null, 8, ["model-value", "placeholder"]))]),
+				_: 1
+			}, 8, [
+				"label",
+				"required",
+				"read-only"
+			]));
+		}
+	}),
+	image: un,
+	color: on,
+	number: fn,
+	select: Sn,
+	boolean: $t,
+	repeatable: yn
+};
+function On(e) {
+	return Dn[e] ?? wn;
+}
+//#endregion
+//#region src/components/toolbar/CustomBlockToolbar.vue?vue&type=script&setup=true&lang.ts
+var kn = {
+	key: 0,
+	class: "tpl:p-4"
+}, An = { class: "tpl:m-0 tpl:text-center tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, jn = { key: 1 }, Mn = {
+	key: 0,
+	class: "tpl:m-0 tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, Nn = {
+	key: 1,
+	class: "tpl:mb-4"
+}, Pn = {
+	key: 1,
+	class: "tpl:flex tpl:h-[32px] tpl:items-center"
+}, Fn = {
+	key: 0,
+	class: "tpl:w-full tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
+}, In = {
+	key: 2,
+	class: "tpl:m-0 tpl:mt-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]"
+}, Ln = /* @__PURE__ */ l({
+	__name: "CustomBlockToolbar",
+	props: { block: {} },
+	emits: ["updateFieldValues", "updateDataSourceFetched"],
+	setup(e, { emit: t }) {
+		let i = e, a = t, { t: s } = L(), l = n(le, []), u = h(() => l.find((e) => e.type === i.block.customType)), d = h(() => i.block), { isFetching: m, fetchError: v, fetch: b, hasDataSource: S, needsFetch: T } = N({
+			definition: u,
+			block: d,
+			onUpdate: (e, t) => {
+				a("updateFieldValues", e), a("updateDataSourceFetched", t);
+			}
+		});
+		function D(e) {
+			return e.readOnly === !0 && S.value && !!i.block.dataSourceFetched;
+		}
+		function O(e, t) {
+			a("updateFieldValues", {
+				...i.block.fieldValues,
+				[e]: t
+			});
+		}
+		return (t, n) => u.value ? (o(), g("div", jn, [
+			u.value.description ? (o(), g("p", Mn, w(u.value.description), 1)) : _("", !0),
+			f(S) ? (o(), g("div", Nn, [f(T) && !f(m) ? (o(), g("button", {
+				key: 0,
+				type: "button",
+				class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-md tpl:px-3 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-on-primary)] tpl:transition-all tpl:bg-[var(--tpl-primary)]",
+				onClick: n[0] ||= (...e) => f(b) && f(b)(...e)
+			}, w(u.value?.dataSource?.label || f(s).customBlocks.dataSource.fetchButton), 1)) : (o(), g("div", Pn, [f(m) ? (o(), g("div", Fn, w(f(s).customBlocks.dataSource.fetching), 1)) : (o(), g("button", {
+				key: 1,
+				type: "button",
+				class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]",
+				onClick: n[1] ||= (...e) => f(b) && f(b)(...e)
+			}, [p(f(Te), { size: 12 }), E(" " + w(f(s).customBlocks.dataSource.changeButton), 1)]))])), f(v) ? (o(), g("p", In, [p(f(he), {
+				size: 14,
+				class: "tpl:shrink-0"
+			}), E(" " + w(f(s).customBlocks.dataSource.fetchError), 1)])) : _("", !0)])) : _("", !0),
+			(o(!0), g(C, null, r(u.value.fields, (t) => (o(), y(c(f(On)(t.type)), {
+				key: t.key,
+				field: t,
+				"model-value": e.block.fieldValues[t.key],
+				"read-only": D(t),
+				"onUpdate:modelValue": (e) => O(t.key, e)
+			}, null, 8, [
+				"field",
+				"model-value",
+				"read-only",
+				"onUpdate:modelValue"
+			]))), 128))
+		])) : (o(), g("div", kn, [x("p", An, w(f(s).customBlocks.toolbar.noDefinition), 1)]));
+	}
+}), Rn = { class: "tpl:mb-3.5" }, zn = { class: "tpl:mb-3.5" }, Bn = { class: "tpl:mb-3.5" }, Vn = { class: "tpl:flex tpl:items-stretch" }, Hn = ["value"], Un = /* @__PURE__ */ l({
+	__name: "DividerToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		function i(e, t) {
+			n("update", { [e]: t });
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", Rn, [x("label", { class: m(f(U)) }, w(f(r).divider.style), 3), p(X, {
+				options: [
+					{
+						value: "solid",
+						label: f(r).divider.solid
+					},
+					{
+						value: "dashed",
+						label: f(r).divider.dashed
+					},
+					{
+						value: "dotted",
+						label: f(r).divider.dotted
+					}
+				],
+				"model-value": e.block.lineStyle,
+				"onUpdate:modelValue": n[0] ||= (e) => i("lineStyle", e)
+			}, null, 8, ["options", "model-value"])]),
+			x("div", zn, [x("label", { class: m(f(U)) }, w(f(r).divider.color), 3), p(q, {
+				"model-value": e.block.color,
+				"onUpdate:modelValue": n[1] ||= (e) => i("color", e)
+			}, null, 8, ["model-value"])]),
+			x("div", Bn, [x("label", { class: m(f(U)) }, w(f(r).divider.thickness), 3), x("div", Vn, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.thickness,
+				min: "1",
+				max: "10",
+				onInput: n[2] ||= (e) => i("thickness", Number(e.target.value))
+			}, null, 42, Hn), x("span", { class: m(f(W)) }, "px", 2)])])
+		], 64));
+	}
+}), Wn = { class: "tpl:mb-3.5" }, Gn = ["value"], Kn = { class: "tpl:mt-1.5 tpl:flex tpl:items-start tpl:gap-1.5 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, qn = /* @__PURE__ */ l({
+	__name: "HtmlToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		return (t, i) => (o(), g("div", Wn, [
+			x("label", { class: m(f(U)) }, w(f(r).html.content), 3),
+			x("textarea", {
+				value: e.block.content,
+				placeholder: "<div>...</div>",
+				rows: "10",
+				class: m(f(Oe)),
+				onInput: i[0] ||= (e) => n("update", { content: e.target.value })
+			}, null, 42, Gn),
+			x("p", Kn, [p(f(ve), {
+				size: 12,
+				class: "tpl:mt-0.5 tpl:shrink-0"
+			}), E(" " + w(f(r).html.sanitizationHint), 1)])
+		]));
+	}
+}), Jn = { class: "tpl:flex tpl:items-stretch" }, Yn = [
+	"data-testid",
+	"value",
+	"min",
+	"max"
+], Xn = /* @__PURE__ */ l({
+	__name: "NumberWithSuffix",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		suffix: {},
+		testid: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			let t = e.target;
+			t.validity?.badInput || n("update:modelValue", Number(t.value));
+		}
+		return (t, n) => (o(), g("div", Jn, [x("input", {
+			type: "number",
+			"data-testid": e.testid,
+			class: m(f(G)),
+			value: e.modelValue,
+			min: e.min,
+			max: e.max,
+			onInput: r
+		}, null, 42, Yn), x("span", { class: m(f(W)) }, w(e.suffix), 3)]));
+	}
+}), Zn = { class: "tpl:mb-3.5" }, Qn = {
+	key: 0,
+	class: "tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-2 tpl:border-dashed tpl:text-xs tpl:font-medium tpl:border-[var(--tpl-primary)] tpl:text-[var(--tpl-primary)]",
+	style: { "background-color": "color-mix(in srgb, var(--tpl-bg) 90%, transparent)" }
+}, $n = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, er = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, tr = [
+	"value",
+	"placeholder",
+	"title"
+], nr = { class: "tpl:mb-3.5" }, rr = { class: "tpl:block tpl:text-[var(--tpl-text-dim)]" }, ir = { class: "tpl:mb-3.5" }, ar = ["value"], or = { value: "full" }, sr = { value: "custom" }, cr = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:items-stretch"
+}, lr = ["value"], ur = { class: "tpl:mb-3.5" }, dr = ["value"], fr = { value: "auto" }, pr = { value: "custom" }, mr = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:items-stretch"
+}, hr = ["value"], gr = { class: "tpl:mb-3.5" }, _r = { class: "tpl:mb-3.5" }, vr = { class: "tpl:mb-3.5" }, yr = 350, br = 200, xr = /* @__PURE__ */ l({
+	__name: "ImageToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = e, a = t, { t: c } = L(), l = n(re, null), u = n(ae, null), d = n(ie, j.liquid), v = De(), b = h(() => !!l), S = s(!1), T = s(!1), { start: D } = ne(() => {
+			S.value = !1;
+		}, 1e3, { immediate: !1 }), O = [
+			300,
+			400,
+			500
+		], A = h(() => {
+			let e = r.block.width;
+			return e === "full" ? "full" : O.includes(e) ? String(e) : "custom";
+		}), M = h(() => typeof r.block.height == "number" ? "custom" : "auto");
+		function N(e, t) {
+			a("update", { [e]: t });
+		}
+		function P(e) {
+			if (e === "custom") {
+				let e = r.block.width;
+				(typeof e != "number" || O.includes(e)) && N("width", yr);
+				return;
+			}
+			N("width", e === "full" ? "full" : Number(e));
+		}
+		function te(e) {
+			N("height", e === "custom" ? br : void 0);
+		}
+		function F(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t <= 0 || N("height", t);
+		}
+		function oe(e) {
+			!Number.isFinite(e) || e < 0 || N("borderRadius", e > 0 ? e : void 0);
+		}
+		function se(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t <= 0 || N("width", t);
+		}
+		async function ce() {
+			let e = await l?.({ accept: ["images"] });
+			v.alive && e && (N("src", e.url), e.alt && (N("alt", e.alt), T.value = !0), S.value = !0, D());
+		}
+		let le = s(), I = s(!1), ue = h(() => k(r.block.src, d)), de = h(() => (u?.value ?? !!l) && !I.value && !ue.value);
+		async function fe(e) {
+			if (l) {
+				I.value = !0;
+				try {
+					let t = await l({
+						accept: ["images"],
+						files: e
+					});
+					if (!v.alive) return;
+					t && (N("src", t.url), t.alt && (N("alt", t.alt), T.value = !0), S.value = !0, D());
+				} finally {
+					v.alive && (I.value = !1);
+				}
+			}
+		}
+		let { isOver: pe } = ee({
+			target: le,
+			enabled: de,
+			onFiles: fe
+		});
+		return (t, n) => (o(), g(C, null, [
+			x("div", Zn, [x("label", { class: m(f(U)) }, w(f(c).image.imageUrl), 3), x("div", {
+				ref_key: "dropZoneRef",
+				ref: le,
+				class: "tpl:relative"
+			}, [
+				de.value && (f(pe) || I.value) ? (o(), g("div", Qn, [I.value ? (o(), g(C, { key: 0 }, [p(f(be), {
+					class: "tpl-spinner",
+					size: 18,
+					"stroke-width": 2
+				}), E(" " + w(f(c).image.uploading), 1)], 64)) : (o(), g(C, { key: 1 }, [p(f(we), {
+					size: 18,
+					"stroke-width": 1.5
+				}), E(" " + w(f(c).image.dropToUpload), 1)], 64))])) : _("", !0),
+				p(Y, {
+					"model-value": e.block.src,
+					type: "url",
+					placeholder: f(c).image.imageUrlPlaceholder,
+					pulse: S.value,
+					"onUpdate:modelValue": n[0] ||= (e) => N("src", e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"pulse"
+				]),
+				b.value ? (o(), g("button", {
+					key: 1,
+					class: "tpl:mt-2 tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all",
+					style: {
+						"border-color": "var(--tpl-border)",
+						color: "var(--tpl-primary)",
+						"background-color": "var(--tpl-bg)"
+					},
+					onClick: ce
+				}, [p(f(ye), {
+					size: 14,
+					"stroke-width": 1.5
+				}), E(" " + w(f(c).image.browseMedia), 1)])) : _("", !0)
+			], 512)]),
+			f(k)(e.block.src, f(d)) ? (o(), g("div", $n, [x("label", { class: m(f(U)) }, [E(w(f(c).image.placeholderUrl) + " ", 1), x("span", er, w(f(c).image.optional), 1)], 2), x("input", {
+				type: "url",
+				class: m(f(K)),
+				value: e.block.placeholderUrl || "",
+				placeholder: f(c).image.placeholderUrlPlaceholder,
+				title: f(c).image.placeholderUrlTooltip,
+				onInput: n[1] ||= (e) => N("placeholderUrl", e.target.value)
+			}, null, 42, tr)])) : _("", !0),
+			x("div", nr, [
+				x("label", { class: m(f(U)) }, w(f(c).image.altText), 3),
+				p(Y, {
+					"model-value": e.block.alt,
+					type: "text",
+					placeholder: f(c).image.altTextPlaceholder,
+					pulse: T.value,
+					disabled: e.block.decorative === !0,
+					"onUpdate:modelValue": n[2] ||= (e) => N("alt", e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"pulse",
+					"disabled"
+				]),
+				p(J, {
+					class: "tpl:mt-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]",
+					"model-value": e.block.decorative === !0,
+					label: f(c).image.decorative,
+					"onUpdate:modelValue": n[3] ||= (e) => N("decorative", e)
+				}, {
+					default: i(() => [x("span", null, [E(w(f(c).image.decorative) + " ", 1), x("span", rr, w(f(c).image.decorativeHint), 1)])]),
+					_: 1
+				}, 8, ["model-value", "label"])
+			]),
+			x("div", ir, [
+				x("label", { class: m(f(U)) }, w(f(c).image.width), 3),
+				x("select", {
+					class: m(f(K)),
+					value: A.value,
+					onChange: n[4] ||= (e) => P(e.target.value)
+				}, [
+					x("option", or, w(f(c).image.fullWidth), 1),
+					n[11] ||= x("option", { value: "300" }, "300px", -1),
+					n[12] ||= x("option", { value: "400" }, "400px", -1),
+					n[13] ||= x("option", { value: "500" }, "500px", -1),
+					x("option", sr, w(f(c).image.widthCustom), 1)
+				], 42, ar),
+				A.value === "custom" ? (o(), g("div", cr, [x("input", {
+					type: "number",
+					class: m(f(G)),
+					value: typeof e.block.width == "number" ? e.block.width : yr,
+					min: "20",
+					onInput: n[5] ||= (e) => se(e.target.value)
+				}, null, 42, lr), x("span", { class: m(f(W)) }, "px", 2)])) : _("", !0)
+			]),
+			x("div", ur, [
+				x("label", { class: m(f(U)) }, w(f(c).image.height), 3),
+				x("select", {
+					class: m(f(K)),
+					"data-testid": "image-height-mode",
+					value: M.value,
+					onChange: n[6] ||= (e) => te(e.target.value)
+				}, [x("option", fr, w(f(c).image.heightAuto), 1), x("option", pr, w(f(c).image.heightCustom), 1)], 42, dr),
+				M.value === "custom" ? (o(), g("div", mr, [x("input", {
+					type: "number",
+					"data-testid": "image-height-input",
+					class: m(f(G)),
+					value: e.block.height,
+					min: "20",
+					onInput: n[7] ||= (e) => F(e.target.value)
+				}, null, 42, hr), x("span", { class: m(f(W)) }, "px", 2)])) : _("", !0)
+			]),
+			x("div", gr, [x("label", { class: m(f(U)) }, w(f(c).image.borderRadius), 3), p(Xn, {
+				"model-value": e.block.borderRadius ?? 0,
+				min: 0,
+				suffix: "px",
+				testid: "image-border-radius-input",
+				"onUpdate:modelValue": oe
+			}, null, 8, ["model-value"])]),
+			x("div", _r, [x("label", { class: m(f(U)) }, w(f(c).title.align), 3), p(X, {
+				options: [
+					{
+						value: "left",
+						label: f(c).title.alignLeft
+					},
+					{
+						value: "center",
+						label: f(c).title.alignCenter
+					},
+					{
+						value: "right",
+						label: f(c).title.alignRight
+					}
+				],
+				"model-value": e.block.align,
+				"onUpdate:modelValue": n[8] ||= (e) => N("align", e)
+			}, null, 8, ["options", "model-value"])]),
+			x("div", vr, [
+				x("label", { class: m(f(U)) }, w(f(c).image.linkUrl), 3),
+				p(Y, {
+					"model-value": e.block.linkUrl || "",
+					type: "url",
+					placeholder: f(c).image.imageUrlPlaceholder,
+					"onUpdate:modelValue": n[9] ||= (e) => N("linkUrl", e)
+				}, null, 8, ["model-value", "placeholder"]),
+				e.block.linkUrl ? (o(), y(J, {
+					key: 0,
+					class: "tpl:mt-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]",
+					"model-value": e.block.linkOpenInNewTab ?? !1,
+					label: f(c).image.openInNewTab,
+					"onUpdate:modelValue": n[10] ||= (e) => N("linkOpenInNewTab", e)
+				}, null, 8, ["model-value", "label"])) : _("", !0)
+			])
+		], 64));
+	}
+}), Sr = { class: "tpl:mb-3.5" }, $ = /* @__PURE__ */ l({
+	__name: "FieldRow",
+	props: { label: {} },
+	setup(e) {
+		return (t, n) => (o(), g("div", Sr, [e.label ? (o(), g("label", {
+			key: 0,
+			class: m(f(U))
+		}, w(e.label), 3)) : _("", !0), a(t.$slots, "default")]));
+	}
+}), Cr = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, wr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Tr = [
+	"value",
+	"placeholder",
+	"onInput"
+], Er = ["title", "onClick"], Dr = { class: "tpl:flex tpl:flex-wrap tpl:items-center tpl:gap-x-3 tpl:gap-y-1.5 tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Or = { class: "tpl:flex tpl:items-center tpl:gap-2" }, kr = ["value"], Ar = { value: "" }, jr = ["value"], Mr = ["value"], Nr = /* @__PURE__ */ l({
+	__name: "MenuToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = e, a = t, { t: s } = L(), c = h(() => [
+			{
+				key: "openInNewTab",
+				label: s.menu.openInNewTab
+			},
+			{
+				key: "bold",
+				label: s.menu.bold
+			},
+			{
+				key: "underline",
+				label: s.menu.underline
+			}
+		]), l = h(() => [
+			{
+				value: "left",
+				label: s.title.alignLeft,
+				icon: H
+			},
+			{
+				value: "center",
+				label: s.title.alignCenter,
+				icon: B
+			},
+			{
+				value: "right",
+				label: s.title.alignRight,
+				icon: V
+			}
+		]);
+		function u(e, t) {
+			a("update", { [e]: t });
+		}
+		function d() {
+			let e = {
+				id: D(),
+				text: "",
+				url: "",
+				openInNewTab: !1,
+				bold: !1,
+				underline: !1
+			};
+			a("update", { items: [...n.block.items, e] });
+		}
+		function _(e, t, r) {
+			let i = n.block.items.map((n) => n.id === e ? {
+				...n,
+				[t]: r
+			} : n);
+			a("update", { items: i });
+		}
+		function v(e) {
+			a("update", { items: n.block.items.filter((t) => t.id !== e) });
+		}
+		return (t, n) => (o(), g(C, null, [
+			p($, { label: f(s).menu.items }, {
+				default: i(() => [x("div", Cr, [(o(!0), g(C, null, r(e.block.items, (t) => (o(), g("div", {
+					key: t.id,
+					class: "tpl:flex tpl:flex-col tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-2"
+				}, [
+					x("div", wr, [x("input", {
+						type: "text",
+						class: m([f(K), "tpl:flex-1"]),
+						value: t.text,
+						placeholder: f(s).menu.text,
+						onInput: (e) => _(t.id, "text", e.target.value)
+					}, null, 42, Tr), x("button", {
+						class: m(f(ke)),
+						title: f(s).menu.removeItem,
+						onClick: (e) => v(t.id)
+					}, [p(f(xe), {
+						size: 14,
+						"stroke-width": 2
+					})], 10, Er)]),
+					p(Y, {
+						"model-value": t.url,
+						type: "url",
+						placeholder: f(s).menu.urlPlaceholder,
+						"onUpdate:modelValue": (e) => _(t.id, "url", e)
+					}, null, 8, [
+						"model-value",
+						"placeholder",
+						"onUpdate:modelValue"
+					]),
+					x("div", Dr, [(o(!0), g(C, null, r(c.value, (e) => (o(), y(J, {
+						key: e.key,
+						"model-value": t[e.key],
+						label: e.label,
+						"onUpdate:modelValue": (n) => _(t.id, e.key, n)
+					}, null, 8, [
+						"model-value",
+						"label",
+						"onUpdate:modelValue"
+					]))), 128))]),
+					x("div", Or, [x("label", { class: m([f(U), "tpl:!mb-0"]) }, w(f(s).menu.color), 3), p(q, {
+						"swatch-only": "",
+						"model-value": t.color || e.block.linkColor || e.block.color || "",
+						"onUpdate:modelValue": (e) => _(t.id, "color", e)
+					}, null, 8, ["model-value", "onUpdate:modelValue"])])
+				]))), 128)), x("button", {
+					class: m(f(Ae)),
+					onClick: d
+				}, [p(f(R), {
+					size: 14,
+					"stroke-width": 2
+				}), E(" " + w(f(s).menu.addItem), 1)], 2)])]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.fontFamily }, {
+				default: i(() => [x("select", {
+					class: m(f(K)),
+					value: e.block.fontFamily || "",
+					onChange: n[0] ||= (e) => u("fontFamily", e.target.value || void 0)
+				}, [x("option", Ar, w(f(s).title.inheritFont), 1), (o(!0), g(C, null, r(e.fontFamilies, (e) => (o(), g("option", {
+					key: e.value,
+					value: e.value
+				}, w(e.label), 9, jr))), 128))], 42, kr)]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.fontSize }, {
+				default: i(() => [p(Xn, {
+					"model-value": e.block.fontSize,
+					min: 8,
+					max: 48,
+					suffix: "px",
+					"onUpdate:modelValue": n[1] ||= (e) => u("fontSize", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.color }, {
+				default: i(() => [p(q, {
+					"model-value": e.block.color ?? "",
+					"onUpdate:modelValue": n[2] ||= (e) => u("color", e || void 0)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.linkColor }, {
+				default: i(() => [p(q, {
+					"model-value": e.block.linkColor || e.block.color || "",
+					"onUpdate:modelValue": n[3] ||= (e) => u("linkColor", e || void 0)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.textAlign }, {
+				default: i(() => [p(X, {
+					options: l.value,
+					"model-value": e.block.textAlign,
+					"onUpdate:modelValue": n[4] ||= (e) => u("textAlign", e)
+				}, null, 8, ["options", "model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.separator }, {
+				default: i(() => [x("input", {
+					type: "text",
+					class: m(f(K)),
+					value: e.block.separator,
+					onInput: n[5] ||= (e) => u("separator", e.target.value)
+				}, null, 42, Mr)]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.separatorColor }, {
+				default: i(() => [p(q, {
+					"model-value": e.block.separatorColor,
+					"onUpdate:modelValue": n[6] ||= (e) => u("separatorColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			p($, { label: f(s).menu.spacing }, {
+				default: i(() => [p(Xn, {
+					"model-value": e.block.spacing,
+					min: 0,
+					max: 50,
+					suffix: "px",
+					"onUpdate:modelValue": n[7] ||= (e) => u("spacing", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"])
+		], 64));
+	}
+}), Pr = {
+	class: "tpl:mb-3.5",
+	"data-testid": "paragraph-spacing"
+}, Fr = { class: "tpl:flex tpl:items-stretch" }, Ir = ["value"], Lr = /* @__PURE__ */ l({
+	__name: "ParagraphToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		return (t, i) => (o(), g("div", Pr, [x("label", { class: m(f(U)) }, w(f(r).paragraph.paragraphSpacing), 3), x("div", Fr, [x("input", {
+			type: "number",
+			class: m(f(G)),
+			value: e.block.paragraphSpacing ?? f(A).paragraphGap,
+			min: "0",
+			max: "64",
+			onInput: i[0] ||= (e) => n("update", { paragraphSpacing: Number(e.target.value) })
+		}, null, 42, Ir), x("span", { class: m(f(W)) }, "px", 2)])]));
+	}
+});
+//#endregion
+//#region src/utils/rebalanceColumnChildren.ts
+function Rr(e) {
+	return e === "1" ? 1 : e === "3" ? 3 : 2;
+}
+function zr(e, t) {
+	let n = Rr(t);
+	if (e.length === n) return e;
+	if (e.length < n) {
+		let t = Array.from({ length: n - e.length }, () => []);
+		return [...e, ...t];
+	}
+	let r = e.slice(0, n), i = e.slice(n).flat(), a = [...r[n - 1], ...i];
+	return [...r.slice(0, n - 1), a];
+}
+//#endregion
+//#region src/components/toolbar/SectionToolbar.vue?vue&type=script&setup=true&lang.ts
+var Br = { class: "tpl:mb-3.5" }, Vr = ["value"], Hr = ["value"], Ur = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, Wr = { class: "tpl:mb-3.5" }, Gr = { class: "tpl:flex tpl:items-stretch" }, Kr = ["value"], qr = { class: "tpl:mb-3.5" }, Jr = {
+	key: 0,
+	class: "tpl:mt-3 tpl:ml-0.5 tpl:space-y-3 tpl:border-l tpl:border-[var(--tpl-border)] tpl:pl-3"
+}, Yr = { class: "tpl:flex tpl:items-stretch" }, Xr = ["value"], Zr = /* @__PURE__ */ l({
+	__name: "SectionToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { t: a } = L(), s = h(() => [
+			{
+				value: "1",
+				label: a.section.column1
+			},
+			{
+				value: "2",
+				label: a.section.column2
+			},
+			{
+				value: "3",
+				label: a.section.column3
+			},
+			{
+				value: "1-2",
+				label: a.section.ratio12
+			},
+			{
+				value: "2-1",
+				label: a.section.ratio21
+			}
+		]);
+		function c(e) {
+			let t = e.target.value, r = zr(n.block.children, t);
+			i("update", {
+				columns: t,
+				children: r
+			});
+		}
+		function l(e) {
+			i("update", { stackOnMobile: e });
+		}
+		function u(e) {
+			let t = Number(e.target.value);
+			i("update", { borderRadius: t });
+		}
+		function d(e) {
+			i("update", { wrapper: e ? { padding: {
+				top: 20,
+				right: 20,
+				bottom: 20,
+				left: 20
+			} } : void 0 });
+		}
+		function v(e) {
+			i("update", { wrapper: {
+				...n.block.wrapper,
+				...e
+			} });
+		}
+		function y(e) {
+			v({ padding: e });
+		}
+		function b(e) {
+			v({ borderRadius: Number(e.target.value) });
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", Br, [x("label", { class: m(f(U)) }, w(f(a).section.columns), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.columns,
+				onChange: c
+			}, [(o(!0), g(C, null, r(s.value, (e) => (o(), g("option", {
+				key: e.value,
+				value: e.value
+			}, w(e.label), 9, Hr))), 128))], 42, Vr)]),
+			e.block.columns === "1" ? _("", !0) : (o(), g("div", Ur, [p(J, {
+				class: "tpl:text-xs tpl:text-[var(--tpl-text)]",
+				"model-value": e.block.stackOnMobile !== !1,
+				label: f(a).section.stackOnMobile,
+				"onUpdate:modelValue": n[0] ||= (e) => l(e)
+			}, null, 8, ["model-value", "label"])])),
+			x("div", Wr, [x("label", { class: m(f(U)) }, w(f(a).section.borderRadius), 3), x("div", Gr, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.borderRadius ?? 0,
+				min: "0",
+				max: "50",
+				onInput: u
+			}, null, 42, Kr), x("span", { class: m(f(W)) }, "px", 2)])]),
+			x("div", qr, [p(J, {
+				class: "tpl:text-xs tpl:text-[var(--tpl-text)]",
+				"model-value": !!e.block.wrapper,
+				label: f(a).section.wrapperEnable,
+				"onUpdate:modelValue": n[1] ||= (e) => d(e)
+			}, null, 8, ["model-value", "label"]), e.block.wrapper ? (o(), g("div", Jr, [
+				x("div", null, [x("label", { class: m(f(U)) }, w(f(a).blockSettings.color), 3), p(q, {
+					"model-value": e.block.wrapper.backgroundColor ?? "",
+					"onUpdate:modelValue": n[2] ||= (e) => v({ backgroundColor: e })
+				}, null, 8, ["model-value"])]),
+				p(kt, {
+					label: f(a).blockSettings.padding,
+					"model-value": e.block.wrapper.padding ?? {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0
+					},
+					"onUpdate:modelValue": y
+				}, null, 8, ["label", "model-value"]),
+				x("div", null, [x("label", { class: m(f(U)) }, w(f(a).section.borderRadius), 3), x("div", Yr, [x("input", {
+					type: "number",
+					class: m(f(G)),
+					value: e.block.wrapper.borderRadius ?? 0,
+					min: "0",
+					max: "50",
+					onInput: b
+				}, null, 42, Xr), x("span", { class: m(f(W)) }, "px", 2)])])
+			])) : _("", !0)])
+		], 64));
+	}
+}), Qr = { class: "tpl:mb-3.5" }, $r = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, ei = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ti = ["value", "onChange"], ni = ["value"], ri = ["title", "onClick"], ii = { class: "tpl:mb-3.5" }, ai = ["value"], oi = { value: "solid" }, si = { value: "outlined" }, ci = { value: "rounded" }, li = { value: "square" }, ui = { value: "circle" }, di = { class: "tpl:mb-3.5" }, fi = { class: "tpl:mb-3.5" }, pi = { class: "tpl:flex tpl:items-stretch" }, mi = ["value"], hi = { class: "tpl:mb-3.5" }, gi = /* @__PURE__ */ l({
+	__name: "SocialToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { t: a } = L();
+		function s(e, t) {
+			i("update", { [e]: t });
+		}
+		function c() {
+			let e = {
+				id: D(),
+				platform: "facebook",
+				url: ""
+			};
+			i("update", { icons: [...n.block.icons, e] });
+		}
+		function l(e, t, r) {
+			let a = n.block.icons.map((n) => n.id === e ? {
+				...n,
+				[t]: r
+			} : n);
+			i("update", { icons: a });
+		}
+		function u(e) {
+			i("update", { icons: n.block.icons.filter((t) => t.id !== e) });
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", Qr, [x("label", { class: m(f(U)) }, w(f(a).social.icons), 3), x("div", $r, [(o(!0), g(C, null, r(e.block.icons, (e) => (o(), g("div", {
+				key: e.id,
+				class: "tpl:flex tpl:flex-col tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-2"
+			}, [x("div", ei, [x("select", {
+				"data-testid": "social-platform-select",
+				class: m([f(K), "tpl:flex-1"]),
+				value: e.platform,
+				onChange: (t) => l(e.id, "platform", t.target.value)
+			}, [(o(!0), g(C, null, r(f(P), (e) => (o(), g("option", {
+				key: e,
+				value: e
+			}, w(f(a).social.platforms[e]), 9, ni))), 128))], 42, ti), x("button", {
+				class: m(f(ke)),
+				title: f(a).social.removeIcon,
+				onClick: (t) => u(e.id)
+			}, [p(f(xe), {
+				size: 14,
+				"stroke-width": 2
+			})], 10, ri)]), p(Y, {
+				"model-value": e.url,
+				type: "url",
+				placeholder: f(a).social.urlPlaceholder,
+				"onUpdate:modelValue": (t) => l(e.id, "url", t)
+			}, null, 8, [
+				"model-value",
+				"placeholder",
+				"onUpdate:modelValue"
+			])]))), 128)), x("button", {
+				class: m(f(Ae)),
+				onClick: c
+			}, [p(f(R), {
+				size: 14,
+				"stroke-width": 2
+			}), E(" " + w(f(a).social.addIcon), 1)], 2)])]),
+			x("div", ii, [x("label", { class: m(f(U)) }, w(f(a).social.style), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.iconStyle,
+				onChange: n[0] ||= (e) => s("iconStyle", e.target.value)
+			}, [
+				x("option", oi, w(f(a).social.styleSolid), 1),
+				x("option", si, w(f(a).social.styleOutlined), 1),
+				x("option", ci, w(f(a).social.styleRounded), 1),
+				x("option", li, w(f(a).social.styleSquare), 1),
+				x("option", ui, w(f(a).social.styleCircle), 1)
+			], 42, ai)]),
+			x("div", di, [x("label", { class: m(f(U)) }, w(f(a).social.size), 3), p(X, {
+				options: [
+					{
+						value: "small",
+						label: f(a).social.sizeSmall
+					},
+					{
+						value: "medium",
+						label: f(a).social.sizeMedium
+					},
+					{
+						value: "large",
+						label: f(a).social.sizeLarge
+					}
+				],
+				"model-value": e.block.iconSize,
+				"onUpdate:modelValue": n[1] ||= (e) => s("iconSize", e)
+			}, null, 8, ["options", "model-value"])]),
+			x("div", fi, [x("label", { class: m(f(U)) }, w(f(a).social.spacing), 3), x("div", pi, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.spacing,
+				min: "0",
+				max: "50",
+				onInput: n[2] ||= (e) => s("spacing", Number(e.target.value))
+			}, null, 42, mi), x("span", { class: m(f(W)) }, "px", 2)])]),
+			x("div", hi, [x("label", { class: m(f(U)) }, w(f(a).social.align), 3), p(X, {
+				options: [
+					{
+						value: "left",
+						label: f(a).title.alignLeft,
+						icon: f(H)
+					},
+					{
+						value: "center",
+						label: f(a).title.alignCenter,
+						icon: f(B)
+					},
+					{
+						value: "right",
+						label: f(a).title.alignRight,
+						icon: f(V)
+					}
+				],
+				"model-value": e.block.align,
+				"onUpdate:modelValue": n[3] ||= (e) => s("align", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), _i = { class: "tpl:mb-3.5" }, vi = { class: "tpl:flex tpl:items-stretch" }, yi = ["value"], bi = ["value"], xi = /* @__PURE__ */ l({
+	__name: "SpacerToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = L();
+		return (t, i) => (o(), g("div", _i, [
+			x("label", { class: m(f(U)) }, w(f(r).spacer.height), 3),
+			x("div", vi, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.height,
+				min: "10",
+				max: "100",
+				onInput: i[0] ||= (e) => n("update", { height: Number(e.target.value) })
+			}, null, 42, yi), x("span", { class: m(f(W)) }, "px", 2)]),
+			x("input", {
+				type: "range",
+				class: "tpl:mt-2 tpl:w-full tpl:accent-[var(--tpl-primary)]",
+				value: e.block.height,
+				min: "10",
+				max: "100",
+				onInput: i[1] ||= (e) => n("update", { height: Number(e.target.value) })
+			}, null, 40, bi)
+		]));
+	}
+}), Si = { class: "tpl:mb-3.5" }, Ci = { class: "tpl:flex tpl:items-center tpl:gap-3" }, wi = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, Ti = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, Ei = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, Di = ["disabled"], Oi = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, ki = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, Ai = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, ji = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, Mi = ["disabled"], Ni = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, Pi = { class: "tpl:mb-3.5" }, Fi = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, Ii = { class: "tpl:mb-3.5" }, Li = { class: "tpl:mb-3.5" }, Ri = { class: "tpl:flex tpl:items-stretch" }, zi = ["value"], Bi = { class: "tpl:mb-3.5" }, Vi = { class: "tpl:flex tpl:items-stretch" }, Hi = ["value"], Ui = { class: "tpl:mb-3.5" }, Wi = ["value"], Gi = { value: "" }, Ki = ["value"], qi = { class: "tpl:mb-3.5" }, Ji = { class: "tpl:flex tpl:items-stretch" }, Yi = ["value"], Xi = { class: "tpl:mb-3.5" }, Zi = { class: "tpl:mb-3.5" }, Qi = /* @__PURE__ */ l({
+	__name: "TableToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, { t: a } = L(), s = h(() => n.block.rows.length > 0 ? n.block.rows[0].cells.length : 0);
+		function c(e, t) {
+			i("update", { [e]: t });
+		}
+		function l() {
+			let e = n.block.rows.length > 0 ? n.block.rows[0].cells.length : 3, t = {
+				id: D(),
+				cells: Array.from({ length: e }, () => ({
+					id: D(),
+					content: ""
+				}))
+			};
+			i("update", { rows: [...n.block.rows, t] });
+		}
+		function u(e) {
+			i("update", { rows: n.block.rows.filter((t) => t.id !== e) });
+		}
+		function d() {
+			let e = n.block.rows.map((e) => ({
+				...e,
+				cells: [...e.cells, {
+					id: D(),
+					content: ""
+				}]
+			}));
+			i("update", { rows: e });
+		}
+		function v(e) {
+			let t = n.block.rows.map((t) => ({
+				...t,
+				cells: t.cells.filter((t, n) => n !== e)
+			}));
+			i("update", { rows: t });
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", Si, [x("label", { class: m(f(U)) }, w(f(a).table.dimensions), 3), x("div", Ci, [x("div", wi, [x("span", Ti, w(f(a).table.rows), 1), x("div", Ei, [
+				x("button", {
+					class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:hover:text-[var(--tpl-primary)] tpl:disabled:opacity-30",
+					disabled: e.block.rows.length <= 1,
+					onClick: n[0] ||= (t) => u(e.block.rows[e.block.rows.length - 1].id)
+				}, [p(f(z), {
+					size: 12,
+					"stroke-width": 2
+				})], 8, Di),
+				x("span", Oi, w(e.block.rows.length), 1),
+				x("button", {
+					class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:hover:text-[var(--tpl-primary)]",
+					onClick: l
+				}, [p(f(R), {
+					size: 12,
+					"stroke-width": 2
+				})])
+			])]), x("div", ki, [x("span", Ai, w(f(a).table.columns), 1), x("div", ji, [
+				x("button", {
+					class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:hover:text-[var(--tpl-primary)] tpl:disabled:opacity-30",
+					disabled: s.value <= 1,
+					onClick: n[1] ||= (e) => v(s.value - 1)
+				}, [p(f(z), {
+					size: 12,
+					"stroke-width": 2
+				})], 8, Mi),
+				x("span", Ni, w(s.value), 1),
+				x("button", {
+					class: "tpl:flex tpl:items-center tpl:justify-center tpl:px-1.5 tpl:py-1 tpl:text-[var(--tpl-text-muted)] tpl:transition-colors tpl:hover:text-[var(--tpl-primary)]",
+					onClick: d
+				}, [p(f(R), {
+					size: 12,
+					"stroke-width": 2
+				})])
+			])])])]),
+			x("div", Pi, [p(J, {
+				class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]",
+				"model-value": e.block.hasHeaderRow,
+				label: f(a).table.hasHeaderRow,
+				"onUpdate:modelValue": n[2] ||= (e) => c("hasHeaderRow", e)
+			}, null, 8, ["model-value", "label"])]),
+			e.block.hasHeaderRow ? (o(), g("div", Fi, [x("label", { class: m(f(U)) }, w(f(a).table.headerBackgroundColor), 3), p(q, {
+				"model-value": e.block.headerBackgroundColor ?? "",
+				"seed-color": f(je),
+				placeholder: f(a).table.noHeaderBg,
+				"onUpdate:modelValue": n[3] ||= (e) => c("headerBackgroundColor", e || null)
+			}, null, 8, [
+				"model-value",
+				"seed-color",
+				"placeholder"
+			])])) : _("", !0),
+			x("div", Ii, [x("label", { class: m(f(U)) }, w(f(a).table.borderColor), 3), p(q, {
+				"model-value": e.block.borderColor,
+				"onUpdate:modelValue": n[4] ||= (e) => c("borderColor", e)
+			}, null, 8, ["model-value"])]),
+			x("div", Li, [x("label", { class: m(f(U)) }, w(f(a).table.borderWidth), 3), x("div", Ri, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.borderWidth,
+				min: "0",
+				max: "10",
+				onInput: n[5] ||= (e) => c("borderWidth", Number(e.target.value))
+			}, null, 42, zi), x("span", { class: m(f(W)) }, "px", 2)])]),
+			x("div", Bi, [x("label", { class: m(f(U)) }, w(f(a).table.cellPadding), 3), x("div", Vi, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.cellPadding,
+				min: "0",
+				max: "30",
+				onInput: n[6] ||= (e) => c("cellPadding", Number(e.target.value))
+			}, null, 42, Hi), x("span", { class: m(f(W)) }, "px", 2)])]),
+			x("div", Ui, [x("label", { class: m(f(U)) }, w(f(a).table.fontFamily), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.fontFamily || "",
+				onChange: n[7] ||= (e) => c("fontFamily", e.target.value || void 0)
+			}, [x("option", Gi, w(f(a).title.inheritFont), 1), (o(!0), g(C, null, r(e.fontFamilies, (e) => (o(), g("option", {
+				key: e.value,
+				value: e.value
+			}, w(e.label), 9, Ki))), 128))], 42, Wi)]),
+			x("div", qi, [x("label", { class: m(f(U)) }, w(f(a).table.fontSize), 3), x("div", Ji, [x("input", {
+				type: "number",
+				class: m(f(G)),
+				value: e.block.fontSize,
+				min: "10",
+				max: "32",
+				onInput: n[8] ||= (e) => c("fontSize", Number(e.target.value))
+			}, null, 42, Yi), x("span", { class: m(f(W)) }, "px", 2)])]),
+			x("div", Xi, [x("label", { class: m(f(U)) }, w(f(a).table.color), 3), p(q, {
+				"model-value": e.block.color ?? "",
+				"onUpdate:modelValue": n[9] ||= (e) => c("color", e || void 0)
+			}, null, 8, ["model-value"])]),
+			x("div", Zi, [x("label", { class: m(f(U)) }, w(f(a).table.textAlign), 3), p(X, {
+				options: [
+					{
+						value: "left",
+						label: f(a).title.alignLeft,
+						icon: f(H)
+					},
+					{
+						value: "center",
+						label: f(a).title.alignCenter,
+						icon: f(B)
+					},
+					{
+						value: "right",
+						label: f(a).title.alignRight,
+						icon: f(V)
+					}
+				],
+				"model-value": e.block.textAlign,
+				"onUpdate:modelValue": n[10] ||= (e) => c("textAlign", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), $i = { class: "tpl:mb-3.5" }, ea = ["value"], ta = { value: 1 }, na = { value: 2 }, ra = { value: 3 }, ia = { value: 4 }, aa = { class: "tpl:mb-3.5" }, oa = ["value"], sa = { value: "" }, ca = ["value"], la = { class: "tpl:mb-3.5" }, ua = { class: "tpl:mb-3.5" }, da = /* @__PURE__ */ l({
+	__name: "TitleToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let n = t, { t: i } = L();
+		function a(e, t) {
+			n("update", { [e]: t });
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", $i, [x("label", { class: m(f(U)) }, w(f(i).title.level), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.level,
+				onChange: n[0] ||= (e) => a("level", Number(e.target.value))
+			}, [
+				x("option", ta, w(f(i).title.heading1), 1),
+				x("option", na, w(f(i).title.heading2), 1),
+				x("option", ra, w(f(i).title.heading3), 1),
+				x("option", ia, w(f(i).title.heading4), 1)
+			], 42, ea)]),
+			x("div", aa, [x("label", { class: m(f(U)) }, w(f(i).title.fontFamily), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.fontFamily || "",
+				onChange: n[1] ||= (e) => a("fontFamily", e.target.value || void 0)
+			}, [x("option", sa, w(f(i).title.inheritFont), 1), (o(!0), g(C, null, r(e.fontFamilies, (e) => (o(), g("option", {
+				key: e.value,
+				value: e.value
+			}, w(e.label), 9, ca))), 128))], 42, oa)]),
+			x("div", la, [x("label", { class: m(f(U)) }, w(f(i).title.color), 3), p(q, {
+				"model-value": e.block.color ?? "",
+				"onUpdate:modelValue": n[2] ||= (e) => a("color", e || void 0)
+			}, null, 8, ["model-value"])]),
+			x("div", ua, [x("label", { class: m(f(U)) }, w(f(i).title.align), 3), p(X, {
+				options: [
+					{
+						value: "left",
+						label: f(i).title.alignLeft,
+						icon: f(H)
+					},
+					{
+						value: "center",
+						label: f(i).title.alignCenter,
+						icon: f(B)
+					},
+					{
+						value: "right",
+						label: f(i).title.alignRight,
+						icon: f(V)
+					}
+				],
+				"model-value": e.block.textAlign,
+				"onUpdate:modelValue": n[3] ||= (e) => a("textAlign", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), fa = { class: "tpl:mb-3.5" }, pa = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, ma = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, ha = [
+	"value",
+	"placeholder",
+	"title"
+], ga = { class: "tpl:mb-3.5" }, _a = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, va = { class: "tpl:mb-3.5" }, ya = { class: "tpl:mb-3.5" }, ba = ["value"], xa = { value: "full" }, Sa = { class: "tpl:mb-3.5" }, Ca = ["value"], wa = { value: "auto" }, Ta = { value: "custom" }, Ea = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:items-stretch"
+}, Da = ["value"], Oa = { class: "tpl:mb-3.5" }, ka = 200, Aa = /* @__PURE__ */ l({
+	__name: "VideoToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, { t: a } = L(), c = n(re, null), l = n(ie, j.liquid), u = De(), d = h(() => !!c), v = h(() => k(r.block.url, l)), b = h(() => typeof r.block.height == "number" ? "custom" : "auto"), S = s(!1), { start: T } = ne(() => {
+			S.value = !1;
+		}, 1e3, { immediate: !1 });
+		function D(e, t) {
+			i("update", { [e]: t });
+		}
+		function O(e) {
+			D("height", e === "custom" ? ka : void 0);
+		}
+		function A(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t <= 0 || D("height", t);
+		}
+		async function M() {
+			let e = await c?.({ accept: ["images"] });
+			u.alive && e && (D("thumbnailUrl", e.url), S.value = !0, T());
+		}
+		return (t, n) => (o(), g(C, null, [
+			x("div", fa, [
+				x("label", { class: m(f(U)) }, w(f(a).video.videoUrl), 3),
+				p(Y, {
+					"model-value": e.block.url,
+					type: "url",
+					placeholder: f(a).video.videoUrlPlaceholder,
+					"onUpdate:modelValue": n[0] ||= (e) => D("url", e)
+				}, null, 8, ["model-value", "placeholder"]),
+				e.block.url ? (o(), y(J, {
+					key: 0,
+					class: "tpl:mt-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]",
+					"model-value": e.block.openInNewTab ?? !1,
+					label: f(a).video.openInNewTab,
+					"onUpdate:modelValue": n[1] ||= (e) => D("openInNewTab", e)
+				}, null, 8, ["model-value", "label"])) : _("", !0)
+			]),
+			v.value ? (o(), g("div", pa, [x("label", { class: m(f(U)) }, [E(w(f(a).video.placeholderUrl) + " ", 1), x("span", ma, w(f(a).video.optional), 1)], 2), x("input", {
+				type: "url",
+				class: m(f(K)),
+				value: e.block.placeholderUrl || "",
+				placeholder: f(a).video.placeholderUrlPlaceholder,
+				title: f(a).video.placeholderUrlTooltip,
+				onInput: n[2] ||= (e) => D("placeholderUrl", e.target.value)
+			}, null, 42, ha)])) : _("", !0),
+			x("div", ga, [
+				x("label", { class: m(f(U)) }, [E(w(f(a).video.customThumbnail) + " ", 1), x("span", _a, w(f(a).video.optional), 1)], 2),
+				p(Y, {
+					"model-value": e.block.thumbnailUrl,
+					type: "url",
+					placeholder: f(a).video.thumbnailPlaceholder,
+					pulse: S.value,
+					"onUpdate:modelValue": n[3] ||= (e) => D("thumbnailUrl", e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"pulse"
+				]),
+				d.value ? (o(), g("button", {
+					key: 0,
+					class: "tpl:mt-2 tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all",
+					style: {
+						"border-color": "var(--tpl-border)",
+						color: "var(--tpl-primary)",
+						"background-color": "var(--tpl-bg)"
+					},
+					onClick: M
+				}, [p(f(ye), {
+					size: 14,
+					"stroke-width": 1.5
+				}), E(" " + w(f(a).image.browseMedia), 1)])) : _("", !0)
+			]),
+			x("div", va, [x("label", { class: m(f(U)) }, w(f(a).video.altText), 3), p(Y, {
+				"model-value": e.block.alt,
+				type: "text",
+				placeholder: f(a).video.altTextPlaceholder,
+				"onUpdate:modelValue": n[4] ||= (e) => D("alt", e)
+			}, null, 8, ["model-value", "placeholder"])]),
+			x("div", ya, [x("label", { class: m(f(U)) }, w(f(a).video.width), 3), x("select", {
+				class: m(f(K)),
+				value: e.block.width,
+				onChange: n[5] ||= (e) => D("width", e.target.value === "full" ? "full" : Number(e.target.value))
+			}, [
+				x("option", xa, w(f(a).video.fullWidth), 1),
+				n[9] ||= x("option", { value: "300" }, "300px", -1),
+				n[10] ||= x("option", { value: "400" }, "400px", -1),
+				n[11] ||= x("option", { value: "500" }, "500px", -1)
+			], 42, ba)]),
+			x("div", Sa, [
+				x("label", { class: m(f(U)) }, w(f(a).video.height), 3),
+				x("select", {
+					class: m(f(K)),
+					"data-testid": "video-height-mode",
+					value: b.value,
+					onChange: n[6] ||= (e) => O(e.target.value)
+				}, [x("option", wa, w(f(a).video.heightAuto), 1), x("option", Ta, w(f(a).video.heightCustom), 1)], 42, Ca),
+				b.value === "custom" ? (o(), g("div", Ea, [x("input", {
+					type: "number",
+					"data-testid": "video-height-input",
+					class: m(f(G)),
+					value: e.block.height,
+					min: "20",
+					onInput: n[7] ||= (e) => A(e.target.value)
+				}, null, 42, Da), x("span", { class: m(f(W)) }, "px", 2)])) : _("", !0)
+			]),
+			x("div", Oa, [x("label", { class: m(f(U)) }, w(f(a).title.align), 3), p(X, {
+				options: [
+					{
+						value: "left",
+						label: f(a).title.alignLeft
+					},
+					{
+						value: "center",
+						label: f(a).title.alignCenter
+					},
+					{
+						value: "right",
+						label: f(a).title.alignRight
+					}
+				],
+				"model-value": e.block.align,
+				"onUpdate:modelValue": n[8] ||= (e) => D("align", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), ja = ["aria-label"], Ma = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3.5" }, Na = { class: "tpl:flex tpl:items-center tpl:gap-2 tpl:text-[var(--tpl-primary)]" }, Pa = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Fa = { class: "tpl:flex tpl:gap-1" }, Ia = ["title"], La = ["title"], Ra = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, za = /*@__PURE__*/ l({
+	__name: "Toolbar",
+	props: { block: {} },
+	emits: [
+		"update",
+		"delete",
+		"duplicate"
+	],
+	setup(e, { emit: t }) {
+		let r = T(() => import("./CountdownToolbar-CN9h4nlC.js")), i = e, a = t, { t: s } = L(), l = F(I, "Toolbar"), u = n(le, []), d = h(() => i.block.type), m = h(() => O(i.block)), v = h(() => {
+			if (m.value) return u.find((e) => e.type === i.block.customType);
+		}), b = h(() => m.value ? v.value?.name ?? i.block.customType : te(d.value, s)), S = l.fonts;
+		function C(e) {
+			a("update", e);
+		}
+		return (t, n) => (o(), g("aside", {
+			"data-testid": "block-toolbar",
+			"aria-label": f(s).landmarks.blockToolbar,
+			class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]"
+		}, [x("div", Ma, [x("div", Na, [f(Me)[d.value] ? (o(), y(c(f(Me)[d.value]), {
+			key: 0,
+			size: 16,
+			"stroke-width": 1.5
+		})) : m.value ? (o(), y(f(ge), {
+			key: 1,
+			size: 16,
+			"stroke-width": 1.5
+		})) : _("", !0), x("h3", Pa, w(b.value), 1)]), x("div", Fa, [x("button", {
+			class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:hover:bg-[var(--tpl-bg-active)] tpl:hover:text-[var(--tpl-text)]",
+			title: f(s).toolbar.duplicate,
+			onClick: n[0] ||= (e) => a("duplicate")
+		}, [p(f(pe), {
+			size: 14,
+			"stroke-width": 2
+		})], 8, Ia), x("button", {
+			class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]",
+			title: f(s).toolbar.delete,
+			onClick: n[1] ||= (e) => a("delete")
+		}, [p(f(_e), {
+			size: 14,
+			"stroke-width": 2
+		})], 8, La)])]), x("div", Ra, [m.value ? (o(), y(Ln, {
+			key: 0,
+			block: e.block,
+			onUpdateFieldValues: n[2] ||= (e) => a("update", { fieldValues: e }),
+			onUpdateDataSourceFetched: n[3] ||= (e) => a("update", { dataSourceFetched: e })
+		}, null, 8, ["block"])) : d.value === "section" ? (o(), y(Zr, {
+			key: 1,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "title" ? (o(), y(da, {
+			key: 2,
+			block: e.block,
+			"font-families": f(S),
+			onUpdate: C
+		}, null, 8, ["block", "font-families"])) : d.value === "paragraph" ? (o(), y(Lr, {
+			key: 3,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "image" ? (o(), y(xr, {
+			key: 4,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "video" ? (o(), y(Aa, {
+			key: 5,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "button" ? (o(), y(ot, {
+			key: 6,
+			block: e.block,
+			"font-families": f(S),
+			onUpdate: C
+		}, null, 8, ["block", "font-families"])) : d.value === "divider" ? (o(), y(Un, {
+			key: 7,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "social" ? (o(), y(gi, {
+			key: 8,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "menu" ? (o(), y(Nr, {
+			key: 9,
+			block: e.block,
+			"font-families": f(S),
+			onUpdate: C
+		}, null, 8, ["block", "font-families"])) : d.value === "table" ? (o(), y(Qi, {
+			key: 10,
+			block: e.block,
+			"font-families": f(S),
+			onUpdate: C
+		}, null, 8, ["block", "font-families"])) : d.value === "spacer" ? (o(), y(xi, {
+			key: 11,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "html" ? (o(), y(qn, {
+			key: 12,
+			block: e.block,
+			onUpdate: C
+		}, null, 8, ["block"])) : d.value === "countdown" ? (o(), y(f(r), {
+			key: 13,
+			block: e.block,
+			"font-families": f(S),
+			onUpdate: C
+		}, null, 8, ["block", "font-families"])) : _("", !0), p(Zt, {
+			block: e.block,
+			"is-first-section": d.value === "paragraph",
+			onUpdate: C
+		}, null, 8, ["block", "is-first-section"])])], 8, ja));
+	}
+}), Ba = /* @__PURE__ */ e({ default: () => Va }), Va = /*#__PURE__*/ Ee(za, [["__scopeId", "data-v-1038bf62"]]);
+//#endregion
+export { Va as default, X as i, $ as n, Xn as r, Ba as t };
+
+//# sourceMappingURL=Toolbar-dxDYwN5E.js.map