@templatical/editor 0.14.0 → 0.15.1

package/dist/styles-B2OrgEnn.js

@@ -0,0 +1,4164 @@
+import { A as e, Dt as t, Et as n, H as r, I as i, K as a, N as o, O as s, Ot as c, R as l, W as u, Y as d, _ as f, c as p, d as m, g as h, h as g, j as _, l as v, m as y, nt as b, q as x, r as S, s as C, u as w, w as T, x as E, y as D, z as O } from "./vue.runtime.esm-bundler-l0XAqiyv.js";
+import { a as k, c as A, o as j, s as M, t as N } from "./runtime-dom.esm-bundler-BzuoCyNp.js";
+import { C as P, D as F, E as I, O as L, k as R, o as z, r as B, s as V, u as ee, w as te } from "./dist-BibU4HNl.js";
+import { D as ne, F as re, I as H, L as ie, M as ae, N as oe, P as se, R as ce, S as le, _ as ue, a as de, c as fe, f as pe, g as me, h as he, i as ge, j as _e, l as ve, m as ye, n as be, o as xe, p as Se, r as Ce, s as we, u as Te, v as Ee, y as De } from "./useEditorCore-DJeOXVxQ.js";
+import { c as Oe, m as ke } from "./dist-CTT6WYJ6.js";
+import { D as Ae, F as je, I as Me, L as Ne, N as Pe, P as Fe, T as Ie, a as Le, d as Re, f as ze, g as Be, k as Ve, m as He, n as Ue, o as We, p as Ge, s as Ke, u as qe, w as Je, x as Ye } from "./keys-Cv8-8GsD.js";
+import { t as U } from "./useI18n-C-TDeJBt.js";
+import { t as W } from "./createLucideIcon-Dx-EjR9r.js";
+import { n as Xe, t as Ze } from "./scan-line-DgijVq9y.js";
+import { t as Qe } from "./chevron-down-BKe__NOD.js";
+import { t as $e } from "./circle-alert-C8xmpMsK.js";
+import { i as et, n as tt, r as nt, t as rt } from "./blockTypeIcons-BxEbbev5.js";
+import { n as it, t as at } from "./refresh-cw-D1JQ1LNa.js";
+import { t as ot } from "./image-up-BwBCmQ4P.js";
+import { t as st } from "./info-TCn7uWR5.js";
+import { t as ct } from "./list-checks-CSrOWNgq.js";
+import { t as lt } from "./loader-circle-BLmicnPG.js";
+import { t as ut } from "./sparkles-M4azPVSP.js";
+import { n as dt, r as ft, t as pt } from "./text-align-start-CMya5pCQ.js";
+import { t as mt } from "./trash-2-C-81rkLS.js";
+import { t as ht } from "./upload-CWBIoLd4.js";
+import { t as gt } from "./x-CQSvXnGR.js";
+import { t as _t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as vt } from "./useCloudI18n-AKCy98qD.js";
+import { t as yt } from "./useMergeTag-DSrBY0-2.js";
+import { t as bt } from "./useAliveFlag-CECL_OUb.js";
+import { t as xt } from "./readableTextColor-f8Kykfnh.js";
+import { t as St } from "./CountdownBlock-apiYUhkQ.js";
+import { _ as Ct, c as wt, f as G, g as Tt, h as K, l as Et, m as q, p as J, r as Dt, t as Ot } from "./styleConstants-lGobwiLH.js";
+import { i as Y, n as X, r as Z, t as kt } from "./NumberWithSuffix-CrA6quxx.js";
+import { n as At, r as jt } from "./MergeTagSuggestion-CH2SUxBo.js";
+import { t as Mt } from "./usePopoverRoot-DKUDnr55.js";
+import { t as Nt } from "./TplModal-BtKB-0Bx.js";
+var Pt = W("circle", [["circle", {
+	cx: "12",
+	cy: "12",
+	r: "10",
+	key: "1mglay"
+}]]), Ft = W("globe", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		key: "1mglay"
+	}],
+	["path", {
+		d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",
+		key: "13o1zl"
+	}],
+	["path", {
+		d: "M2 12h20",
+		key: "9i4pu4"
+	}]
+]), It = W("layout-template", [
+	["rect", {
+		width: "18",
+		height: "7",
+		x: "3",
+		y: "3",
+		rx: "1",
+		key: "f1a2em"
+	}],
+	["rect", {
+		width: "9",
+		height: "7",
+		x: "3",
+		y: "14",
+		rx: "1",
+		key: "jqznyg"
+	}],
+	["rect", {
+		width: "5",
+		height: "7",
+		x: "16",
+		y: "14",
+		rx: "1",
+		key: "q5h2i8"
+	}]
+]), Lt = W("lock-open", [["rect", {
+	width: "18",
+	height: "11",
+	x: "3",
+	y: "11",
+	rx: "2",
+	ry: "2",
+	key: "1w4ew1"
+}], ["path", {
+	d: "M7 11V7a5 5 0 0 1 9.9-1",
+	key: "1mm8w8"
+}]]), Rt = W("lock", [["rect", {
+	width: "18",
+	height: "11",
+	x: "3",
+	y: "11",
+	rx: "2",
+	ry: "2",
+	key: "1w4ew1"
+}], ["path", {
+	d: "M7 11V7a5 5 0 0 1 10 0v4",
+	key: "fwvmzm"
+}]]), zt = W("monitor", [
+	["rect", {
+		width: "20",
+		height: "14",
+		x: "2",
+		y: "3",
+		rx: "2",
+		key: "48i651"
+	}],
+	["line", {
+		x1: "8",
+		x2: "16",
+		y1: "21",
+		y2: "21",
+		key: "1svkeh"
+	}],
+	["line", {
+		x1: "12",
+		x2: "12",
+		y1: "17",
+		y2: "21",
+		key: "vw1qmm"
+	}]
+]), Bt = W("moon", [["path", {
+	d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+	key: "kfwtm"
+}]]), Vt = W("panel-top", [["rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2",
+	key: "afitv7"
+}], ["path", {
+	d: "M3 9h18",
+	key: "1pudct"
+}]]), Q = W("plus", [["path", {
+	d: "M5 12h14",
+	key: "1ays0h"
+}], ["path", {
+	d: "M12 5v14",
+	key: "s699le"
+}]]), Ht = W("rotate-ccw", [["path", {
+	d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+	key: "1357e3"
+}], ["path", {
+	d: "M3 3v5h5",
+	key: "1xhq8a"
+}]]), Ut = W("settings", [["path", {
+	d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+	key: "1i5ecw"
+}], ["circle", {
+	cx: "12",
+	cy: "12",
+	r: "3",
+	key: "1v7zrd"
+}]]), Wt = W("smartphone", [["rect", {
+	width: "14",
+	height: "20",
+	x: "5",
+	y: "2",
+	rx: "2",
+	ry: "2",
+	key: "1yt0o3"
+}], ["path", {
+	d: "M12 18h.01",
+	key: "mhygvu"
+}]]), Gt = W("square-plus", [
+	["rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2",
+		key: "afitv7"
+	}],
+	["path", {
+		d: "M8 12h8",
+		key: "1wcyev"
+	}],
+	["path", {
+		d: "M12 8v8",
+		key: "napkw2"
+	}]
+]), Kt = W("square", [["rect", {
+	width: "18",
+	height: "18",
+	x: "3",
+	y: "3",
+	rx: "2",
+	key: "afitv7"
+}]]), qt = W("sun", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "4",
+		key: "4exip2"
+	}],
+	["path", {
+		d: "M12 2v2",
+		key: "tus03m"
+	}],
+	["path", {
+		d: "M12 20v2",
+		key: "1lh1kg"
+	}],
+	["path", {
+		d: "m4.93 4.93 1.41 1.41",
+		key: "149t6j"
+	}],
+	["path", {
+		d: "m17.66 17.66 1.41 1.41",
+		key: "ptbguv"
+	}],
+	["path", {
+		d: "M2 12h2",
+		key: "1t8f8n"
+	}],
+	["path", {
+		d: "M20 12h2",
+		key: "1q8mjw"
+	}],
+	["path", {
+		d: "m6.34 17.66-1.41 1.41",
+		key: "1m8zz5"
+	}],
+	["path", {
+		d: "m19.07 4.93-1.41 1.41",
+		key: "1shlcs"
+	}]
+]);
+//#endregion
+//#region src/utils/resolveLintOptions.ts
+function Jt(e) {
+	return {
+		...e.lint,
+		locale: e.locale
+	};
+}
+//#endregion
+//#region src/components/Canvas.vue?vue&type=script&setup=true&lang.ts
+var Yt = ["aria-label"], Xt = {
+	key: 0,
+	class: "tpl-canvas-empty-content tpl:flex tpl:flex-col tpl:items-center"
+}, Zt = { class: "tpl-canvas-empty-icon tpl:mb-4 tpl:text-[var(--tpl-primary)]" }, Qt = { class: "tpl-canvas-empty-title tpl:m-0 tpl:mb-2 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-primary)]" }, $t = { class: "tpl-canvas-empty-text tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-dim)]" }, en = {
+	key: 0,
+	class: "tpl:m-0 tpl:mt-2 tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-center tpl:gap-x-1 tpl:gap-y-0.5 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
+}, tn = {
+	key: 1,
+	class: "tpl:m-0 tpl:mt-4 tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-center tpl:gap-x-1 tpl:gap-y-0.5 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
+}, nn = { class: "tpl:relative" }, rn = {
+	class: "tpl:inline-flex tpl:size-3 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[8px] tpl:font-bold",
+	style: { "background-color": "color-mix(\n                        in srgb,\n                        var(--tpl-bg) 30%,\n                        transparent\n                      )" }
+}, an = 96, on = /*#__PURE__*/ _t(/* @__PURE__ */ f({
+	__name: "Canvas",
+	props: {
+		viewport: {},
+		content: {},
+		selectedBlockId: {},
+		darkMode: { type: Boolean },
+		previewMode: { type: Boolean },
+		lockedBlocks: {}
+	},
+	emits: [
+		"select-block",
+		"open-ai-chat",
+		"open-design-reference"
+	],
+	setup(r, { emit: i }) {
+		let a = {
+			section: we,
+			title: ve,
+			paragraph: Se,
+			image: he,
+			button: re,
+			divider: Ee,
+			spacer: ge,
+			html: ue,
+			social: de,
+			menu: ye,
+			table: Ce,
+			video: be,
+			countdown: St,
+			custom: De
+		}, u = r, f = i, { t: h } = U(), { t: _ } = vt(), x = Ne(He, "Canvas"), T = E(qe, null), D = E(We, null), k = E(Ke, {}), A = C(() => (k.plan?.hasFeature("ai_generation") ?? !1) && (k.ai?.isFeatureEnabled("chat") ?? !1)), M = C(() => (k.plan?.hasFeature("ai_generation") ?? !1) && (k.ai?.isFeatureEnabled("designToTemplate") ?? !1)), N = C({
+			get: () => u.content.blocks,
+			set: (e) => {
+				x.setContent({
+					...u.content,
+					blocks: e
+				});
+			}
+		}), P = C(() => {
+			switch (u.viewport) {
+				case "mobile": return 375;
+				default: return u.content.settings.width;
+			}
+		}), F = C(() => P.value + an * 2), I = C(() => ({ fontFamily: u.content.settings.fontFamily })), L = C(() => N.value.length === 0 && !u.previewMode), R = d(0), z = C(() => L.value && R.value > 0);
+		function B() {
+			L.value && (R.value += 1);
+		}
+		function V() {
+			L.value && (R.value = Math.max(0, R.value - 1));
+		}
+		function ee() {
+			R.value = 0;
+		}
+		function te(e) {
+			u.previewMode || e.target === e.currentTarget && f("select-block", null);
+		}
+		function ne(e) {
+			return pe(e, D, a);
+		}
+		function H(e) {
+			return u.lockedBlocks?.get(e) ?? null;
+		}
+		function ie(e, t) {
+			e.type === "custom" && x.updateBlock(e.id, {
+				fieldValues: t.fieldValues,
+				dataSourceFetched: t.dataSourceFetched
+			});
+		}
+		return (i, a) => (s(), m("div", {
+			class: "tpl-canvas-stage tpl:relative tpl:flex tpl:justify-center tpl:rounded-lg",
+			style: t({
+				width: `${F.value}px`,
+				boxShadow: r.darkMode ? "none" : "var(--tpl-shadow-xl)",
+				transition: "width 300ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+			})
+		}, [p("div", {
+			class: "tpl-canvas-bg tpl:absolute tpl:inset-0 tpl:rounded-lg tpl:pointer-events-none",
+			style: t({
+				backgroundColor: r.content.settings.backgroundColor,
+				...r.darkMode ? { filter: "invert(1) hue-rotate(180deg)" } : {},
+				transition: "filter 300ms ease"
+			})
+		}, null, 4), p("div", {
+			"data-testid": "canvas-wrapper",
+			role: "region",
+			"aria-label": b(h).landmarks.canvas,
+			class: "tpl-canvas-wrapper tpl:relative",
+			style: t({
+				width: `${P.value}px`,
+				transition: "width 300ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+			})
+		}, [p("div", {
+			class: n(["tpl-canvas tpl:relative tpl:rounded-lg", {
+				"tpl-canvas--dark-mode": r.darkMode,
+				"tpl-preview-mode": r.previewMode
+			}]),
+			style: t(I.value),
+			onClick: te
+		}, [g(b(fe), {
+			modelValue: N.value,
+			"onUpdate:modelValue": a[2] ||= (e) => N.value = e,
+			group: "blocks",
+			animation: 150,
+			"ghost-class": "tpl-ghost",
+			"drag-class": "tpl-dragging",
+			handle: ".tpl-block-btn",
+			"invert-swap": !0,
+			"inverted-swap-threshold": .65,
+			disabled: r.previewMode,
+			draggable: ".tpl-block-item",
+			"force-fallback": !0,
+			class: n([
+				"tpl-canvas-blocks",
+				L.value ? "tpl-canvas-empty tpl:m-6 tpl:flex tpl:min-h-[400px] tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-xl tpl:border-2 tpl:border-dashed tpl:px-10 tpl:py-12 tpl:text-center tpl:bg-[var(--tpl-bg-elevated)] tpl:font-[var(--tpl-font-family)] tpl:transition-colors tpl:duration-150" : "",
+				L.value && z.value ? "tpl-canvas-empty--drag-over tpl:border-[var(--tpl-primary-hover)] tpl:bg-[var(--tpl-primary-light)]" : "",
+				L.value && !z.value ? "tpl:border-[var(--tpl-primary)]" : ""
+			]),
+			onDragenter: B,
+			onDragleave: V,
+			onDrop: ee
+		}, {
+			default: l(() => [L.value ? (s(), m("div", Xt, [
+				p("div", Zt, [g(b(Gt), {
+					size: 48,
+					"stroke-width": 1
+				})]),
+				p("p", Qt, c(b(h).canvas.noBlocks), 1),
+				p("p", $t, c(b(h).canvas.dragHint), 1),
+				A.value && b(_) ? (s(), m("p", en, [
+					y(c(b(h).canvas.aiHintChat) + " ", 1),
+					p("button", {
+						class: "tpl:inline-flex tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:whitespace-nowrap tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-0.5 tpl:text-sm tpl:font-semibold tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary-hover)]",
+						onClick: a[0] ||= (e) => f("open-ai-chat")
+					}, [g(b(ut), {
+						size: 14,
+						"stroke-width": 2
+					}), y(" " + c(b(_).aiMenu.aiAssistant), 1)]),
+					y(" " + c(b(h).canvas.aiHintChatSuffix), 1)
+				])) : w("", !0),
+				M.value && b(_) ? (s(), m("p", tn, [
+					y(c(b(h).canvas.aiHintDesign) + " ", 1),
+					p("button", {
+						class: "tpl:inline-flex tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:whitespace-nowrap tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-0.5 tpl:text-sm tpl:font-semibold tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary-hover)]",
+						onClick: a[1] ||= (e) => f("open-design-reference")
+					}, [g(b(ot), {
+						size: 14,
+						"stroke-width": 2
+					}), y(" " + c(b(_).aiMenu.designToTemplate), 1)]),
+					y(" " + c(b(h).canvas.aiHintDesignSuffix), 1)
+				])) : w("", !0)
+			])) : w("", !0), (s(!0), m(S, null, e(N.value, (e) => O((s(), m("div", {
+				key: e.id,
+				class: "tpl-block-item"
+			}, [p("div", nn, [H(e.id) ? (s(), m("div", {
+				key: 0,
+				class: "tpl-collab-lock tpl:pointer-events-none tpl:absolute tpl:inset-0 tpl:z-[4] tpl:rounded-sm",
+				style: t({
+					outline: `2px solid ${H(e.id).color}`,
+					outlineOffset: "-1px"
+				})
+			}, [p("span", {
+				class: "tpl:absolute tpl:-top-0.5 tpl:left-1/2 tpl:z-[5] tpl:flex tpl:-translate-x-1/2 tpl:-translate-y-full tpl:items-center tpl:gap-1 tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:whitespace-nowrap",
+				style: t({
+					backgroundColor: H(e.id).color,
+					color: b(xt)(H(e.id).color)
+				})
+			}, [p("span", rn, c(H(e.id).name.charAt(0)), 1), y(" " + c(H(e.id).name), 1)], 4)], 4)) : w("", !0), g(Te, {
+				block: e,
+				"is-selected": !r.previewMode && r.selectedBlockId === e.id && !H(e.id),
+				viewport: r.viewport,
+				"preview-mode": r.previewMode,
+				onSelect: (t) => r.previewMode || H(e.id) ? void 0 : f("select-block", e.id)
+			}, {
+				default: l(() => [(s(), v(o(ne(e)), {
+					block: e,
+					viewport: r.viewport,
+					onFetchData: (t) => ie(e, t),
+					onUpdate: (t) => b(x).updateBlock(e.id, t)
+				}, null, 40, [
+					"block",
+					"viewport",
+					"onFetchData",
+					"onUpdate"
+				]))]),
+				_: 2
+			}, 1032, [
+				"block",
+				"is-selected",
+				"viewport",
+				"preview-mode",
+				"onSelect"
+			])])])), [[j, !b(T)?.isHidden(e.id)]])), 128))]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"disabled",
+			"class"
+		])], 6)], 12, Yt)], 4));
+	}
+}), [["__scopeId", "data-v-a9a1158b"]]), sn = f({
+	name: "CustomBlockStylesheets",
+	setup() {
+		let e = E(ze, null);
+		return () => e ? e.value.map((e, t) => D("style", {
+			key: t,
+			"data-tpl-custom-block-stylesheet": "",
+			innerHTML: e
+		})) : null;
+	}
+});
+//#endregion
+//#region src/utils/resolvePaletteBlocks.ts
+function cn(e, t) {
+	if (!t || t.length === 0) return {
+		items: e,
+		unknown: []
+	};
+	let n = new Map(e.map((e) => [e.type, e])), r = [], i = [], a = /* @__PURE__ */ new Set();
+	for (let e of t) {
+		if (a.has(e)) continue;
+		a.add(e);
+		let t = n.get(e);
+		t ? r.push(t) : i.push(e);
+	}
+	return {
+		items: r,
+		unknown: i
+	};
+}
+//#endregion
+//#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var ln = ["aria-label"], un = {
+	key: 0,
+	class: "tpl:border-b tpl:px-1 tpl:pb-1 tpl:border-[var(--tpl-border)]"
+}, dn = ["aria-label"], fn = {
+	key: 0,
+	class: "tpl:flex-1 tpl:truncate tpl:text-sm tpl:font-medium"
+}, pn = {
+	key: 1,
+	class: "tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]"
+}, mn = [
+	"data-palette-type",
+	"aria-label",
+	"onClick",
+	"onKeydown"
+], hn = { class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:transition-transform tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:scale-105" }, gn = {
+	key: 0,
+	class: "tpl:truncate tpl:text-sm tpl:font-medium"
+}, _n = /* @__PURE__ */ f({
+	__name: "Sidebar",
+	setup(n) {
+		let { t: r, format: a } = U(), { t: u } = vt(), f = E(Re, []), h = E(Ve, void 0), _ = E(Le, void 0), y = E(He, null), x = E(Ke, {}), T = C(() => (x.savedModules?.moduleCount.value ?? 0) > 0), D = d(!1), O = d(!1);
+		function k() {
+			O.value || (D.value = !1);
+		}
+		function A() {
+			O.value = !0;
+		}
+		function j() {
+			O.value = !1;
+		}
+		let M = [
+			"section",
+			"image",
+			"title",
+			"paragraph",
+			"button",
+			"divider",
+			"video",
+			"social",
+			"menu",
+			"table",
+			"spacer",
+			"html"
+		], N = C(() => {
+			let e = M.map((e) => ({
+				type: e,
+				label: ie(e, r)
+			}));
+			return x.plan && e.splice(-1, 0, {
+				type: "countdown",
+				label: ie("countdown", r)
+			}), e;
+		}), P = C(() => f.map((e) => ({
+			type: `custom:${e.type}`,
+			label: e.name,
+			isCustom: !0,
+			icon: e.icon
+		}))), F = C(() => [...N.value, ...P.value]), I = C(() => cn(F.value, h)), L = C(() => I.value.items), R = /* @__PURE__ */ new Set();
+		i(() => I.value.unknown, (e) => {
+			for (let t of e) R.has(t) || (R.add(t), H.warn(`config.paletteBlocks: "${t}" is not a built-in or registered custom block (use the "custom:" prefix for custom blocks) — skipping it in the palette.`));
+		}, { immediate: !0 });
+		function z(e) {
+			if (e.isCustom) {
+				let t = e.type.replace("custom:", ""), n = f.find((e) => e.type === t);
+				if (n) return ee(n);
+			}
+			return V(e.type, _);
+		}
+		function B(e) {
+			if (!y) return;
+			let t = z(e);
+			y.addBlock(t), y.selectBlock(t.id);
+		}
+		function te(e, t) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), B(t));
+		}
+		return (n, i) => (s(), m("aside", {
+			"aria-label": b(r).sidebarNav.palette,
+			class: "tpl-sidebar-rail tpl:absolute tpl:top-14 tpl:bottom-0 tpl:left-0 tpl:z-40 tpl:flex tpl:flex-col tpl:overflow-hidden",
+			style: t({
+				width: D.value ? "200px" : "48px",
+				backgroundColor: "var(--tpl-bg-elevated)",
+				borderRight: "1px solid var(--tpl-border)",
+				boxShadow: D.value ? "var(--tpl-shadow-lg)" : "none",
+				transition: "width 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1)"
+			}),
+			onMouseenter: i[1] ||= (e) => D.value = !0,
+			onMouseleave: k,
+			onFocusin: i[2] ||= (e) => D.value = !0,
+			onFocusout: i[3] ||= (e) => D.value = !1
+		}, [T.value && b(u) ? (s(), m("div", un, [p("button", {
+			type: "button",
+			"aria-label": b(r).sidebarNav.browseModules,
+			class: "tpl:flex tpl:h-10 tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-3 tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)]",
+			style: t({ justifyContent: D.value ? "flex-start" : "center" }),
+			onClick: i[0] ||= (e) => b(x).savedModules?.openBrowser()
+		}, [
+			g(b(nt), {
+				size: 20,
+				"stroke-width": 1.5,
+				class: "tpl:shrink-0"
+			}),
+			D.value ? (s(), m("span", fn, c(b(u).modules.title), 1)) : w("", !0),
+			D.value ? (s(), m("span", pn, c(b(x).savedModules?.moduleCount.value ?? 0), 1)) : w("", !0)
+		], 12, dn)])) : w("", !0), g(b(fe), {
+			"model-value": L.value,
+			group: {
+				name: "blocks",
+				pull: "clone",
+				put: !1
+			},
+			clone: z,
+			sort: !1,
+			animation: 150,
+			"force-fallback": !0,
+			class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col tpl:gap-0.5 tpl:overflow-y-auto tpl:p-1",
+			onChoose: A,
+			onEnd: j
+		}, {
+			default: l(() => [(s(!0), m(S, null, e(L.value, (e) => (s(), m("button", {
+				key: e.type,
+				type: "button",
+				"data-palette-type": e.type,
+				"aria-label": b(a)(b(r).sidebarNav.insertBlock, { block: e.label }),
+				class: "tpl:flex tpl:h-10 tpl:w-full tpl:shrink-0 tpl:cursor-grab tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-3 tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)] active:tpl:cursor-grabbing",
+				style: t({ justifyContent: D.value ? "flex-start" : "center" }),
+				onClick: (t) => B(e),
+				onKeydown: (t) => te(t, e)
+			}, [p("div", hn, [b(rt)[e.type] ? (s(), v(o(b(rt)[e.type]), {
+				key: 0,
+				size: 20,
+				"stroke-width": 1.5
+			})) : e.isCustom ? (s(), v(ne, {
+				key: 1,
+				icon: e.icon,
+				size: 20
+			}, null, 8, ["icon"])) : w("", !0)]), D.value ? (s(), m("span", gn, c(e.label), 1)) : w("", !0)], 44, mn))), 128))]),
+			_: 1
+		}, 8, ["model-value"])], 44, ln));
+	}
+});
+//#endregion
+//#region src/utils/mergeTagTrigger.ts
+function vn(e, t, n, r) {
+	if (!n) return null;
+	let i = e.slice(0, t), a = i.lastIndexOf(n);
+	if (a === -1) return null;
+	let o = i.slice(a + n.length);
+	return /\s/.test(o) || r && o.includes(r) ? null : {
+		triggerStart: a,
+		caret: t,
+		query: o
+	};
+}
+//#endregion
+//#region src/utils/textFieldCaret.ts
+var yn = /* @__PURE__ */ "boxSizing.width.borderTopWidth.borderRightWidth.borderBottomWidth.borderLeftWidth.borderStyle.paddingTop.paddingRight.paddingBottom.paddingLeft.fontStyle.fontVariant.fontWeight.fontStretch.fontSize.lineHeight.fontFamily.textAlign.textTransform.textIndent.letterSpacing.wordSpacing.tabSize.whiteSpace.wordWrap.wordBreak".split(".");
+function bn(e, t, n) {
+	return {
+		left: e,
+		top: t,
+		bottom: n,
+		right: e,
+		width: 0,
+		height: n - t,
+		x: e,
+		y: t,
+		toJSON: () => ({})
+	};
+}
+function xn(e, t) {
+	let n = e.ownerDocument, r = n.defaultView;
+	if (!r) return null;
+	let i = e.tagName === "INPUT", a = r.getComputedStyle(e), o = n.createElement("div");
+	o.setAttribute("aria-hidden", "true");
+	let s = o.style;
+	s.position = "absolute", s.visibility = "hidden", s.top = "0", s.left = "0", s.overflow = "hidden", s.whiteSpace = i ? "pre" : "pre-wrap", s.wordWrap = i ? "normal" : "break-word";
+	let c = s, l = a;
+	for (let e of yn) c[e] = l[e];
+	i && (s.width = "auto", s.whiteSpace = "pre");
+	let u = e.value, d = u.slice(0, t);
+	i && (d = d.replace(/\s/g, "\xA0")), o.textContent = d;
+	let f = n.createElement("span");
+	f.textContent = u.slice(t) || ".", o.appendChild(f), n.body.appendChild(o);
+	let p = f.offsetTop, m = f.offsetLeft;
+	n.body.removeChild(o);
+	let h = e.getBoundingClientRect(), g = parseFloat(a.borderTopWidth) || 0, _ = parseFloat(a.borderLeftWidth) || 0, v = parseFloat(a.lineHeight) || parseFloat(a.fontSize) || 0, y = h.left + m + _ - e.scrollLeft;
+	if (i) return bn(y, h.top, h.bottom);
+	let b = h.top + p + g - e.scrollTop;
+	return bn(y, b, b + v);
+}
+//#endregion
+//#region src/composables/useMergeTagAutocomplete.ts
+var Sn = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+function Cn(e) {
+	let { elementRef: t, modelValue: n, emit: i, mergeTags: o, syntax: s, enabled: c, onInsert: l } = e, d = F(s), f = I(s), p = c && d !== null && o.length > 0, m = E(je, null), h = At((u(m) ? m.value : m)?.mergeTag?.suggestionEmpty ?? "No matching merge tags", Mt()), g = !1;
+	r() && a(() => {
+		g = !0, h.close();
+	});
+	function _(e) {
+		let t = e.value ?? "";
+		return vn(t, e.selectionStart ?? t.length, d, f);
+	}
+	function v(e, r, a) {
+		let o = e.value ?? n(), s = o.slice(r.caret), c = f && s.startsWith(f) ? f.length : 0, u = o.slice(0, r.triggerStart), d = o.slice(r.caret + c), p = u + a.value + d, m = u.length + a.value.length;
+		l?.(), i(p), h.close(), T(() => {
+			if (g) return;
+			let e = t.value;
+			e?.focus(), e?.setSelectionRange(m, m);
+		});
+	}
+	function y() {
+		if (!p || g) return;
+		let e = t.value;
+		if (!e) {
+			h.close();
+			return;
+		}
+		let n = _(e);
+		if (!n) {
+			h.close();
+			return;
+		}
+		let r = jt(o, n.query), i = () => xn(e, n.triggerStart), a = (t) => v(e, n, t);
+		h.isOpen() ? h.update({
+			items: r,
+			getRect: i,
+			onCommand: a
+		}) : h.open({
+			items: r,
+			getRect: i,
+			anchorEl: e,
+			onCommand: a
+		});
+	}
+	function b(e) {
+		return h.isOpen() ? e.key === "Escape" ? (h.close(), !0) : Sn.has(e.key) ? (h.close(), !1) : h.handleKeyDown(e) : !1;
+	}
+	return {
+		available: p,
+		refresh: y,
+		handleKeydown: b,
+		close: () => h.close(),
+		isOpen: () => h.isOpen()
+	};
+}
+//#endregion
+//#region src/composables/useMergeTagField.ts
+function wn(e) {
+	let { modelValue: t, emit: n, elementRef: i } = e, { mergeTags: o, canRequestMergeTag: s, isRequesting: c, isMergeTagValue: l, getMergeTagLabel: u, requestMergeTag: f, syntax: p, autocomplete: m } = yt(), { canInsertLogicTag: h, isRequesting: g, requestLogicTag: _ } = le(), v = d(!1), y = !1, b = !1;
+	r() && a(() => {
+		b = !0;
+	});
+	let x = Cn({
+		elementRef: i,
+		modelValue: t,
+		emit: n,
+		mergeTags: o,
+		syntax: p,
+		enabled: m,
+		onInsert: () => {
+			v.value = !0;
+		}
+	}), S = C(() => {
+		let e = t();
+		if (!e) return [];
+		let n = [], r = `(${p.value.source}|${p.logic.source})`, i = new RegExp(r, "g"), a = 0, o;
+		for (; (o = i.exec(e)) !== null;) {
+			o.index > a && n.push({
+				type: "text",
+				value: e.slice(a, o.index)
+			});
+			let t = o[0];
+			l(t) ? n.push({
+				type: "mergeTag",
+				value: t,
+				label: u(t)
+			}) : R(t, p) ? n.push({
+				type: "logicMergeTag",
+				value: t,
+				keyword: te(t, p)
+			}) : n.push({
+				type: "text",
+				value: t
+			}), a = o.index + t.length;
+		}
+		return a < e.length && n.push({
+			type: "text",
+			value: e.slice(a)
+		}), n;
+	}), w = C(() => S.value.some((e) => e.type === "mergeTag" || e.type === "logicMergeTag"));
+	function E() {
+		v.value = !0, T(() => {
+			i.value?.focus();
+			let e = t()?.length || 0;
+			i.value?.setSelectionRange(e, e);
+		});
+	}
+	function D() {
+		y || (v.value = !1);
+	}
+	function O(e) {
+		n(e.target.value), x.refresh();
+	}
+	function k(e) {
+		if (x.handleKeydown(e)) {
+			e.preventDefault();
+			return;
+		}
+		e.key === "Escape" && D();
+	}
+	function A() {
+		x.refresh();
+	}
+	function j() {
+		x.close(), D();
+	}
+	function M() {
+		n("");
+	}
+	async function N() {
+		let e = v.value && i.value ? i.value.selectionStart ?? t().length : t().length;
+		y = !0;
+		let r;
+		try {
+			r = await f();
+		} finally {
+			y = !1;
+		}
+		if (!b && r) {
+			let a = t().slice(0, e), o = t().slice(e), s = a + r.value + o;
+			n(s), v.value = !0, T(() => {
+				if (b) return;
+				let t = e + r.value.length;
+				i.value?.focus(), i.value?.setSelectionRange(t, t);
+			});
+		}
+	}
+	async function P() {
+		let e = i.value, r = e?.selectionStart ?? t().length, a = e?.selectionEnd ?? r;
+		y = !0;
+		let o;
+		try {
+			o = await _();
+		} finally {
+			y = !1;
+		}
+		if (b || !o) return;
+		let s = t(), c, l;
+		"before" in o ? (c = s.slice(0, r) + o.before + s.slice(r, a) + o.after + s.slice(a), l = r + o.before.length + (a - r)) : (c = s.slice(0, r) + o.value + s.slice(r), l = r + o.value.length), n(c), v.value = !0, T(() => {
+			b || (i.value?.focus(), i.value?.setSelectionRange(l, l));
+		});
+	}
+	return {
+		segments: S,
+		hasMergeTags: w,
+		canRequestMergeTag: s,
+		isRequestingMergeTag: c,
+		canInsertLogicTag: h,
+		isRequestingLogicTag: g,
+		isEditing: v,
+		startEditing: E,
+		stopEditing: D,
+		handleInput: O,
+		handleKeydown: k,
+		handleClick: A,
+		handleBlur: j,
+		clearValue: M,
+		insertMergeTag: N,
+		insertLogicTag: P,
+		autocompleteAvailable: x.available
+	};
+}
+//#endregion
+//#region src/components/MergeTagSegments.vue?vue&type=script&setup=true&lang.ts
+var Tn = ["aria-label", "onKeydown"], En = ["data-tooltip"], Dn = ["data-tooltip"], On = {
+	key: 2,
+	class: "tpl:text-sm tpl:text-[var(--tpl-text)]"
+}, kn = ["aria-label", "title"], An = /* @__PURE__ */ f({
+	__name: "MergeTagSegments",
+	props: {
+		segments: {},
+		displayClass: {},
+		pulse: { type: Boolean }
+	},
+	emits: ["edit", "clear"],
+	setup(t, { emit: r }) {
+		let i = r, { t: a } = U();
+		function o() {
+			i("edit");
+		}
+		return (r, l) => (s(), m("div", {
+			role: "button",
+			tabindex: "0",
+			"aria-label": b(a).mergeTag.clickToEdit,
+			class: n([t.displayClass, { "tpl-pulse-fill": t.pulse }]),
+			onClick: o,
+			onKeydown: [M(o, ["enter"]), M(A(o, ["prevent"]), ["space"])]
+		}, [(s(!0), m(S, null, e(t.segments, (e, t) => (s(), m(S, { key: `${e.type}-${t}-${e.value}` }, [e.type === "mergeTag" ? (s(), m("span", {
+			key: 0,
+			class: "tpl-tooltip tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium",
+			"data-tooltip": e.value,
+			style: {
+				"background-color": "color-mix(\n            in srgb,\n            var(--tpl-primary) 20%,\n            transparent\n          )",
+				color: "var(--tpl-primary)"
+			}
+		}, c(e.label), 9, En)) : e.type === "logicMergeTag" ? (s(), m("span", {
+			key: 1,
+			class: "tpl-tooltip tpl:inline-flex tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase",
+			"data-tooltip": e.value,
+			style: {
+				"background-color": "transparent",
+				border: "1.5px solid\n            color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
+				color: "var(--tpl-primary)"
+			}
+		}, c(e.keyword), 9, Dn)) : (s(), m("span", On, c(e.value), 1))], 64))), 128)), p("button", {
+			type: "button",
+			class: "tpl:ml-auto tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-dim)] tpl:opacity-60 tpl:transition-all hover:tpl:text-[var(--tpl-danger)] hover:tpl:opacity-100",
+			"aria-label": b(a).mergeTag.remove,
+			title: b(a).mergeTag.remove,
+			onClick: l[0] ||= A((e) => i("clear"), ["stop"])
+		}, [g(b(gt), {
+			size: 12,
+			"stroke-width": 2.5
+		})], 8, kn)], 42, Tn));
+	}
+}), jn = [
+	"aria-label",
+	"title",
+	"disabled"
+], Mn = "tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)] hover:tpl:border-[var(--tpl-primary)]", Nn = /* @__PURE__ */ f({
+	__name: "MergeTagInsertButton",
+	props: { disabled: { type: Boolean } },
+	emits: ["insert"],
+	setup(e) {
+		let { t } = U();
+		return (r, i) => (s(), m("button", {
+			type: "button",
+			class: n([Mn, "tpl:mt-1.5"]),
+			"aria-label": b(t).mergeTag.insert,
+			title: b(t).mergeTag.insert,
+			disabled: e.disabled,
+			onMousedown: i[0] ||= A(() => {}, ["prevent"]),
+			onClick: i[1] ||= (e) => r.$emit("insert")
+		}, [g(b(Ze), {
+			size: 12,
+			"stroke-width": 2
+		}), y(" " + c(b(t).mergeTag.insertShort), 1)], 42, jn));
+	}
+}), Pn = [
+	"aria-label",
+	"title",
+	"disabled"
+], Fn = "tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] hover:tpl:bg-[var(--tpl-primary-light)] hover:tpl:text-[var(--tpl-primary)] hover:tpl:border-[var(--tpl-primary)]", In = /* @__PURE__ */ f({
+	__name: "LogicTagInsertButton",
+	props: { disabled: { type: Boolean } },
+	emits: ["insert"],
+	setup(e) {
+		let { t } = U();
+		return (r, i) => (s(), m("button", {
+			type: "button",
+			class: n([Fn, "tpl:mt-1.5"]),
+			"aria-label": b(t).logicTag.insert,
+			title: b(t).logicTag.insert,
+			disabled: e.disabled,
+			"data-testid": "field-insert-logic-button",
+			onMousedown: i[0] ||= A(() => {}, ["prevent"]),
+			onClick: i[1] ||= (e) => r.$emit("insert")
+		}, [g(b(Xe), {
+			size: 12,
+			"stroke-width": 2
+		}), y(" " + c(b(t).logicTag.insertShort), 1)], 42, Pn));
+	}
+}), Ln = { key: 0 }, Rn = {
+	key: 0,
+	class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
+}, zn = { key: 1 }, Bn = [
+	"value",
+	"placeholder",
+	"rows"
+], Vn = {
+	key: 0,
+	class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
+}, Hn = "tpl:w-full tpl:resize-y tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-xs 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:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:placeholder:text-[var(--tpl-text-dim)] tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)]", Un = "tpl:flex tpl:w-full tpl:min-h-20 tpl:cursor-pointer tpl:items-start tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-xs tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", Wn = /* @__PURE__ */ f({
+	__name: "MergeTagTextarea",
+	props: {
+		modelValue: {},
+		placeholder: { default: "" },
+		rows: { default: 3 }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, a = d(null), { segments: o, hasMergeTags: c, canRequestMergeTag: l, isRequestingMergeTag: u, canInsertLogicTag: f, isRequestingLogicTag: h, isEditing: _, startEditing: y, handleInput: x, handleKeydown: S, handleClick: C, handleBlur: T, clearValue: E, insertMergeTag: D, insertLogicTag: O } = wn({
+			modelValue: () => r.modelValue,
+			emit: (e) => i("update:modelValue", e),
+			elementRef: a
+		});
+		return (t, r) => b(c) && !b(_) ? (s(), m("div", Ln, [g(An, {
+			segments: b(o),
+			"display-class": Un,
+			onEdit: b(y),
+			onClear: b(E)
+		}, null, 8, [
+			"segments",
+			"onEdit",
+			"onClear"
+		]), b(l) || b(f) ? (s(), m("div", Rn, [b(l) ? (s(), v(Nn, {
+			key: 0,
+			disabled: b(u),
+			onInsert: b(D)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0), b(f) ? (s(), v(In, {
+			key: 1,
+			disabled: b(h),
+			onInsert: b(O)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0)])) : w("", !0)])) : (s(), m("div", zn, [p("textarea", {
+			ref_key: "textareaRef",
+			ref: a,
+			class: n(Hn),
+			value: e.modelValue,
+			placeholder: e.placeholder,
+			rows: e.rows,
+			onInput: r[0] ||= (...e) => b(x) && b(x)(...e),
+			onKeydown: r[1] ||= (...e) => b(S) && b(S)(...e),
+			onClick: r[2] ||= (...e) => b(C) && b(C)(...e),
+			onBlur: r[3] ||= (...e) => b(T) && b(T)(...e)
+		}, null, 40, Bn), b(l) || b(f) ? (s(), m("div", Vn, [b(l) ? (s(), v(Nn, {
+			key: 0,
+			disabled: b(u),
+			onInsert: b(D)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0), b(f) ? (s(), v(In, {
+			key: 1,
+			disabled: b(h),
+			onInsert: b(O)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0)])) : w("", !0)]));
+	}
+}), Gn = { class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]" }, Kn = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4" }, qn = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Jn = { class: "tpl:mb-3.5" }, Yn = { class: "tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]" }, Xn = ["onClick"], Zn = { class: "tpl:flex tpl:items-stretch" }, Qn = ["value"], $n = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, er = { class: "tpl:mb-3.5" }, tr = ["value"], nr = ["value"], rr = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, ir = ["value"], ar = { class: "tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, or = { class: "tpl:mb-3.5 tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, sr = { class: "tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2" }, cr = { class: "tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, lr = { class: "tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]" }, ur = { class: "tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3" }, dr = { class: "tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]" }, fr = { class: "tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]" }, pr = { class: "tpl:mb-1 tpl:last:mb-0" }, mr = { class: "tpl:mb-1 tpl:last:mb-0" }, hr = { class: "tpl:mb-1 tpl:last:mb-0" }, gr = 150, _r = /* @__PURE__ */ f({
+	__name: "TemplateSettings",
+	props: { settings: {} },
+	emits: ["update"],
+	setup(r, { emit: i }) {
+		let a = r, o = i, { t: l } = U(), u = Ne(Be, "TemplateSettings"), d = C(() => u.fonts.value), f = C(() => d.value.some((e) => e.value === a.settings.fontFamily) ? a.settings.fontFamily : u.defaultFont.value), h = [
+			{
+				value: 480,
+				label: "480px"
+			},
+			{
+				value: 600,
+				label: "600px"
+			},
+			{
+				value: 700,
+				label: "700px"
+			},
+			{
+				value: 800,
+				label: "800px"
+			}
+		];
+		return (i, a) => (s(), m("aside", Gn, [p("div", Kn, [
+			p("div", { class: n(b(Et)) }, [
+				p("div", qn, [g(b(Kt), {
+					class: "tpl:text-[var(--tpl-text-muted)]",
+					size: 14,
+					"stroke-width": 2
+				}), p("span", null, c(b(l).templateSettings.layout), 1)]),
+				p("div", Jn, [p("label", { class: n(b(K)) }, c(b(l).templateSettings.widthPreset), 3), p("div", Yn, [(s(), m(S, null, e(h, (e) => p("button", {
+					key: e.value,
+					class: "tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
+					style: t({
+						backgroundColor: r.settings.width === e.value ? "var(--tpl-bg)" : "transparent",
+						color: r.settings.width === e.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						boxShadow: r.settings.width === e.value ? "var(--tpl-shadow)" : "none"
+					}),
+					onClick: (t) => o("update", { width: e.value })
+				}, c(e.label), 13, Xn)), 64))])]),
+				p("div", null, [p("label", { class: n(b(K)) }, c(b(l).templateSettings.customWidth), 3), p("div", Zn, [p("input", {
+					type: "number",
+					class: n(b(J)),
+					value: r.settings.width,
+					min: "300",
+					max: "900",
+					onInput: a[0] ||= (e) => o("update", { width: Number(e.target.value) })
+				}, null, 42, Qn), p("span", { class: n(b(q)) }, "px", 2)])])
+			], 2),
+			p("div", { class: n(b(Et)) }, [
+				p("div", $n, [g(b(Pt), {
+					class: "tpl:text-[var(--tpl-text-muted)]",
+					size: 14,
+					"stroke-width": 2
+				}), p("span", null, c(b(l).templateSettings.appearance), 1)]),
+				p("div", er, [p("label", { class: n(b(K)) }, c(b(l).templateSettings.backgroundColor), 3), g(Y, {
+					"model-value": r.settings.backgroundColor,
+					placeholder: b(Ot),
+					"onUpdate:modelValue": a[1] ||= (e) => o("update", { backgroundColor: e })
+				}, null, 8, ["model-value", "placeholder"])]),
+				p("div", null, [p("label", { class: n(b(K)) }, c(b(l).templateSettings.fontFamily), 3), p("select", {
+					class: n(b(G)),
+					value: f.value,
+					onChange: a[2] ||= (e) => o("update", { fontFamily: e.target.value })
+				}, [(s(!0), m(S, null, e(d.value, (e) => (s(), m("option", {
+					key: e.value,
+					value: e.value
+				}, c(e.label), 9, nr))), 128))], 42, tr)])
+			], 2),
+			p("div", { class: n(b(Et)) }, [p("div", rr, [g(b(Ft), {
+				class: "tpl:text-[var(--tpl-text-muted)]",
+				size: 14,
+				"stroke-width": 2
+			}), p("span", null, c(b(l).templateSettings.language), 1)]), p("div", null, [
+				p("label", { class: n(b(K)) }, c(b(l).templateSettings.contentLocale), 3),
+				p("input", {
+					type: "text",
+					class: n(b(G)),
+					value: r.settings.locale ?? "",
+					placeholder: "en",
+					spellcheck: "false",
+					autocapitalize: "off",
+					autocomplete: "off",
+					onInput: a[3] ||= (e) => o("update", { locale: e.target.value.trim() || void 0 })
+				}, null, 42, ir),
+				p("p", ar, c(b(l).templateSettings.contentLocaleHint), 1)
+			])], 2),
+			p("div", { class: n(b(Et)) }, [p("div", or, [g(b(it), {
+				class: "tpl:text-[var(--tpl-text-muted)]",
+				size: 14,
+				"stroke-width": 2
+			}), p("span", null, c(b(l).templateSettings.preheaderText), 1)]), p("div", null, [g(Wn, {
+				"model-value": r.settings.preheaderText ?? "",
+				placeholder: b(l).templateSettings.preheaderTextPlaceholder,
+				rows: 2,
+				"onUpdate:modelValue": a[4] ||= (e) => o("update", { preheaderText: e.replace(/[\r\n]/g, " ") || void 0 })
+			}, null, 8, ["model-value", "placeholder"]), p("div", sr, [p("span", cr, c(b(l).templateSettings.preheaderTextHint), 1), p("span", lr, c((r.settings.preheaderText ?? "").length) + "/" + c(gr), 1)])])], 2),
+			p("div", ur, [p("div", dr, [g(b(st), {
+				size: 14,
+				"stroke-width": 2
+			}), p("span", null, c(b(l).templateSettings.tips), 1)]), p("ul", fr, [
+				p("li", pr, c(b(l).templateSettings.tip1), 1),
+				p("li", mr, c(b(l).templateSettings.tip2), 1),
+				p("li", hr, c(b(l).templateSettings.tip3), 1)
+			])])
+		])]));
+	}
+}), vr = { key: 0 }, yr = {
+	key: 0,
+	class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
+}, br = { key: 1 }, xr = [
+	"type",
+	"value",
+	"placeholder"
+], Sr = {
+	key: 0,
+	class: "tpl:flex tpl:flex-wrap tpl:gap-1.5"
+}, Cr = "tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-xs tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", $ = /*#__PURE__*/ _t(/* @__PURE__ */ f({
+	__name: "MergeTagInput",
+	props: {
+		modelValue: {},
+		type: { default: "text" },
+		placeholder: { default: "" },
+		pulse: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, a = d(null), { segments: o, hasMergeTags: c, canRequestMergeTag: l, isRequestingMergeTag: u, canInsertLogicTag: f, isRequestingLogicTag: h, isEditing: _, startEditing: y, handleInput: x, handleKeydown: S, handleClick: C, handleBlur: T, clearValue: E, insertMergeTag: D, insertLogicTag: O } = wn({
+			modelValue: () => r.modelValue,
+			emit: (e) => i("update:modelValue", e),
+			elementRef: a
+		});
+		return (t, r) => b(c) && !b(_) ? (s(), m("div", vr, [g(An, {
+			segments: b(o),
+			"display-class": Cr,
+			pulse: e.pulse,
+			onEdit: b(y),
+			onClear: b(E)
+		}, null, 8, [
+			"segments",
+			"pulse",
+			"onEdit",
+			"onClear"
+		]), b(l) || b(f) ? (s(), m("div", yr, [b(l) ? (s(), v(Nn, {
+			key: 0,
+			disabled: b(u),
+			onInsert: b(D)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0), b(f) ? (s(), v(In, {
+			key: 1,
+			disabled: b(h),
+			onInsert: b(O)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0)])) : w("", !0)])) : (s(), m("div", br, [p("input", {
+			ref_key: "inputRef",
+			ref: a,
+			type: e.type,
+			class: n([b(G), { "tpl-pulse-fill": e.pulse }]),
+			value: e.modelValue,
+			placeholder: e.placeholder,
+			onInput: r[0] ||= (...e) => b(x) && b(x)(...e),
+			onKeydown: r[1] ||= (...e) => b(S) && b(S)(...e),
+			onClick: r[2] ||= (...e) => b(C) && b(C)(...e),
+			onBlur: r[3] ||= (...e) => b(T) && b(T)(...e)
+		}, null, 42, xr), b(l) || b(f) ? (s(), m("div", Sr, [b(l) ? (s(), v(Nn, {
+			key: 0,
+			disabled: b(u),
+			onInsert: b(D)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0), b(f) ? (s(), v(In, {
+			key: 1,
+			disabled: b(h),
+			onInsert: b(O)
+		}, null, 8, ["disabled", "onInsert"])) : w("", !0)])) : w("", !0)]));
+	}
+}), [["__scopeId", "data-v-d6563be6"]]), wr = { class: "tpl:mb-3.5" }, Tr = ["value"], Er = { value: "" }, Dr = ["value"], Or = { class: "tpl:mb-3.5" }, kr = { class: "tpl:mb-3.5" }, Ar = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
+}, jr = ["checked"], Mr = { class: "tpl:mb-3.5" }, Nr = { class: "tpl:mb-3.5" }, Pr = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, Fr = { class: "tpl:mb-3.5" }, Ir = { class: "tpl:flex tpl:items-stretch" }, Lr = ["value"], Rr = { class: "tpl:mb-3.5" }, zr = { class: "tpl:flex tpl:items-stretch" }, Br = ["value"], Vr = { class: "tpl:mb-3.5" }, Hr = ["value"], Ur = { value: "auto" }, Wr = { value: "full" }, Gr = { value: "custom" }, Kr = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:items-stretch"
+}, qr = ["value"], Jr = 200, Yr = /* @__PURE__ */ f({
+	__name: "ButtonToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, { t: o } = U(), l = C(() => i.block.width === "full" ? "full" : typeof i.block.width == "number" ? "custom" : "auto");
+		function u(e, t) {
+			a("update", { [e]: t });
+		}
+		function d(e) {
+			if (e === "full") {
+				u("width", "full");
+				return;
+			}
+			if (e === "custom") {
+				u("width", typeof i.block.width == "number" ? i.block.width : Jr);
+				return;
+			}
+			u("width", void 0);
+		}
+		function f(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t <= 0 || u("width", t);
+		}
+		return (r, i) => (s(), m(S, null, [
+			p("div", wr, [p("label", { class: n(b(K)) }, c(b(o).button.fontFamily), 3), p("select", {
+				class: n(b(G)),
+				value: t.block.fontFamily || "",
+				onChange: i[0] ||= (e) => u("fontFamily", e.target.value || void 0)
+			}, [p("option", Er, c(b(o).button.inheritFont), 1), (s(!0), m(S, null, e(t.fontFamilies, (e) => (s(), m("option", {
+				key: e.value,
+				value: e.value
+			}, c(e.label), 9, Dr))), 128))], 42, Tr)]),
+			p("div", Or, [p("label", { class: n(b(K)) }, c(b(o).button.text), 3), g($, {
+				"model-value": t.block.text,
+				type: "text",
+				"onUpdate:modelValue": i[1] ||= (e) => u("text", e)
+			}, null, 8, ["model-value"])]),
+			p("div", kr, [
+				p("label", { class: n(b(K)) }, c(b(o).button.url), 3),
+				g($, {
+					"model-value": t.block.url,
+					type: "url",
+					placeholder: b(o).button.urlPlaceholder,
+					"onUpdate:modelValue": i[2] ||= (e) => u("url", e)
+				}, null, 8, ["model-value", "placeholder"]),
+				t.block.url ? (s(), m("label", Ar, [p("input", {
+					type: "checkbox",
+					class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
+					checked: t.block.openInNewTab ?? !1,
+					onChange: i[3] ||= (e) => u("openInNewTab", e.target.checked)
+				}, null, 40, jr), y(" " + c(b(o).button.openInNewTab), 1)])) : w("", !0)
+			]),
+			p("div", Mr, [p("label", { class: n(b(K)) }, c(b(o).button.background), 3), g(Y, {
+				"model-value": t.block.backgroundColor,
+				"onUpdate:modelValue": i[4] ||= (e) => u("backgroundColor", e)
+			}, null, 8, ["model-value"])]),
+			p("div", Nr, [p("label", { class: n(b(K)) }, c(b(o).button.textColor), 3), g(Y, {
+				"model-value": t.block.textColor,
+				"onUpdate:modelValue": i[5] ||= (e) => u("textColor", e)
+			}, null, 8, ["model-value"])]),
+			p("div", Pr, [p("div", Fr, [p("label", { class: n(b(K)) }, c(b(o).button.borderRadius), 3), p("div", Ir, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.borderRadius,
+				min: "0",
+				max: "50",
+				onInput: i[6] ||= (e) => u("borderRadius", Number(e.target.value))
+			}, null, 42, Lr), p("span", { class: n(b(q)) }, "px", 2)])]), p("div", Rr, [p("label", { class: n(b(K)) }, c(b(o).button.fontSize), 3), p("div", zr, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.fontSize,
+				min: "10",
+				max: "36",
+				onInput: i[7] ||= (e) => u("fontSize", Number(e.target.value))
+			}, null, 42, Br), p("span", { class: n(b(q)) }, "px", 2)])])]),
+			p("div", Vr, [
+				p("label", { class: n(b(K)) }, c(b(o).button.width), 3),
+				p("select", {
+					class: n(b(G)),
+					value: l.value,
+					onChange: i[8] ||= (e) => d(e.target.value)
+				}, [
+					p("option", Ur, c(b(o).button.widthAuto), 1),
+					p("option", Wr, c(b(o).button.fullWidth), 1),
+					p("option", Gr, c(b(o).button.widthCustom), 1)
+				], 42, Hr),
+				l.value === "custom" ? (s(), m("div", Kr, [p("input", {
+					type: "number",
+					class: n(b(J)),
+					value: typeof t.block.width == "number" ? t.block.width : Jr,
+					min: "20",
+					onInput: i[9] ||= (e) => f(e.target.value)
+				}, null, 42, qr), p("span", { class: n(b(q)) }, "px", 2)])) : w("", !0)
+			])
+		], 64));
+	}
+}), Xr = { class: "spacing-control" }, Zr = { class: "tpl:mb-2 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Qr = { class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-1.5" }, $r = { class: "tpl:flex tpl:items-center" }, ei = ["aria-label"], ti = ["value", "aria-label"], ni = ["aria-label"], ri = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ii = { class: "tpl:flex tpl:items-center" }, ai = ["aria-label"], oi = ["value", "aria-label"], si = ["aria-label"], ci = ["aria-label", "title"], li = { class: "tpl:flex tpl:items-center" }, ui = ["aria-label"], di = ["value", "aria-label"], fi = ["aria-label"], pi = { class: "tpl:flex tpl:items-center" }, mi = ["aria-label"], hi = ["value", "aria-label"], gi = ["aria-label"], _i = "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)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)] active:tpl:bg-[var(--tpl-bg-active)]", vi = "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] focus:tpl:border-[var(--tpl-primary)] focus:tpl:shadow-[var(--tpl-ring)]", yi = /*#__PURE__*/ _t(/* @__PURE__ */ f({
+	__name: "SpacingControl",
+	props: {
+		modelValue: {},
+		label: {}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, a = t, { t: o } = U(), l = C(() => r.modelValue.top === r.modelValue.right && r.modelValue.right === r.modelValue.bottom && r.modelValue.bottom === r.modelValue.left), u = d(l.value);
+		i(l, (e) => {
+			!e && u.value && (u.value = !1);
+		});
+		function f(e, t) {
+			let n = r.modelValue[e], i = Math.max(0, n + t);
+			u.value ? a("update:modelValue", {
+				top: i,
+				right: i,
+				bottom: i,
+				left: i
+			}) : a("update:modelValue", {
+				...r.modelValue,
+				[e]: i
+			});
+		}
+		function h(e, t) {
+			let n = Math.max(0, t);
+			u.value ? a("update:modelValue", {
+				top: n,
+				right: n,
+				bottom: n,
+				left: n
+			}) : a("update:modelValue", {
+				...r.modelValue,
+				[e]: n
+			});
+		}
+		function _() {
+			if (u.value = !u.value, u.value) {
+				let e = r.modelValue.top;
+				a("update:modelValue", {
+					top: e,
+					right: e,
+					bottom: e,
+					left: e
+				});
+			}
+		}
+		return (t, r) => (s(), m("div", Xr, [p("label", Zr, c(e.label), 1), p("div", Qr, [
+			p("div", $r, [
+				p("button", {
+					"aria-label": b(o).spacingControl.decreaseTop,
+					class: n([_i, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+					onClick: r[0] ||= (e) => f("top", -1)
+				}, [g(b(et), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, ei),
+				p("input", {
+					type: "number",
+					class: n(vi),
+					value: e.modelValue.top,
+					"aria-label": b(o).spacingControl.top,
+					min: "0",
+					onInput: r[1] ||= (e) => h("top", Number(e.target.value))
+				}, null, 40, ti),
+				p("button", {
+					"aria-label": b(o).spacingControl.increaseTop,
+					class: n([_i, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+					onClick: r[2] ||= (e) => f("top", 1)
+				}, [g(b(Q), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, ni)
+			]),
+			p("div", ri, [
+				p("div", ii, [
+					p("button", {
+						"aria-label": b(o).spacingControl.decreaseLeft,
+						class: n([_i, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+						onClick: r[3] ||= (e) => f("left", -1)
+					}, [g(b(et), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, ai),
+					p("input", {
+						type: "number",
+						class: n(vi),
+						value: e.modelValue.left,
+						"aria-label": b(o).spacingControl.left,
+						min: "0",
+						onInput: r[4] ||= (e) => h("left", Number(e.target.value))
+					}, null, 40, oi),
+					p("button", {
+						"aria-label": b(o).spacingControl.increaseLeft,
+						class: n([_i, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+						onClick: r[5] ||= (e) => f("left", 1)
+					}, [g(b(Q), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, si)
+				]),
+				p("button", {
+					class: n(["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)]", u.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)] hover:tpl:bg-[var(--tpl-bg-hover)]"]),
+					"aria-label": u.value ? b(o).spacingControl.unlock : b(o).spacingControl.lockAll,
+					title: u.value ? b(o).spacingControl.unlock : b(o).spacingControl.lockAll,
+					onClick: _
+				}, [u.value ? (s(), v(b(Rt), {
+					key: 0,
+					size: 14,
+					"stroke-width": 2
+				})) : (s(), v(b(Lt), {
+					key: 1,
+					size: 14,
+					"stroke-width": 2
+				}))], 10, ci),
+				p("div", li, [
+					p("button", {
+						"aria-label": b(o).spacingControl.decreaseRight,
+						class: n([_i, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+						onClick: r[6] ||= (e) => f("right", -1)
+					}, [g(b(et), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, ui),
+					p("input", {
+						type: "number",
+						class: n(vi),
+						value: e.modelValue.right,
+						"aria-label": b(o).spacingControl.right,
+						min: "0",
+						onInput: r[7] ||= (e) => h("right", Number(e.target.value))
+					}, null, 40, di),
+					p("button", {
+						"aria-label": b(o).spacingControl.increaseRight,
+						class: n([_i, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+						onClick: r[8] ||= (e) => f("right", 1)
+					}, [g(b(Q), {
+						size: 12,
+						"stroke-width": 2
+					})], 10, fi)
+				])
+			]),
+			p("div", pi, [
+				p("button", {
+					"aria-label": b(o).spacingControl.decreaseBottom,
+					class: n([_i, "tpl:rounded-l-[var(--tpl-radius-sm)]"]),
+					onClick: r[9] ||= (e) => f("bottom", -1)
+				}, [g(b(et), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, mi),
+				p("input", {
+					type: "number",
+					class: n(vi),
+					value: e.modelValue.bottom,
+					"aria-label": b(o).spacingControl.bottom,
+					min: "0",
+					onInput: r[10] ||= (e) => h("bottom", Number(e.target.value))
+				}, null, 40, hi),
+				p("button", {
+					"aria-label": b(o).spacingControl.increaseBottom,
+					class: n([_i, "tpl:rounded-r-[var(--tpl-radius-sm)]"]),
+					onClick: r[11] ||= (e) => f("bottom", 1)
+				}, [g(b(Q), {
+					size: 12,
+					"stroke-width": 2
+				})], 10, gi)
+			])
+		])]));
+	}
+}), [["__scopeId", "data-v-9a9c8a07"]]), bi = { class: "tpl:mt-3" }, xi = /* @__PURE__ */ f({
+	__name: "CollapsibleSection",
+	props: {
+		title: {},
+		open: { type: Boolean },
+		noBorder: { type: Boolean }
+	},
+	emits: ["toggle"],
+	setup(e) {
+		return (t, r) => (s(), m("div", { class: n(["tpl:py-3", e.noBorder ? "" : "tpl:border-t tpl:border-[var(--tpl-border)]"]) }, [p("button", {
+			type: "button",
+			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: r[0] ||= (e) => t.$emit("toggle")
+		}, [g(b(Qe), {
+			class: n(["tpl:transition-transform tpl:duration-200", e.open ? "tpl:rotate-0" : "tpl:-rotate-90"]),
+			size: 12,
+			"stroke-width": 2
+		}, null, 8, ["class"]), p("span", null, c(e.title), 1)]), O(p("div", bi, [_(t.$slots, "default")], 512), [[j, e.open]])], 2));
+	}
+}), Si = { class: "tpl:space-y-2" }, Ci = ["checked", "onChange"], wi = { class: "tpl:space-y-2" }, Ti = ["value"], Ei = { value: "" }, Di = ["label"], Oi = ["value"], ki = ["value"], Ai = {
+	key: 0,
+	value: "__custom__"
+}, ji = {
+	key: 0,
+	class: "tpl:space-y-2"
+}, Mi = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Ni = { class: "tpl:mb-1 tpl:block tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Pi = { class: "tpl:flex tpl:justify-end" }, Fi = ["disabled"], Ii = {
+	key: 0,
+	class: "tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]"
+}, Li = { class: "tpl:space-y-1" }, Ri = { 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)]" }, zi = {
+	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)]"
+}, Bi = /* @__PURE__ */ f({
+	__name: "CommonBlockSettings",
+	props: {
+		block: {},
+		isFirstSection: { type: Boolean }
+	},
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let a = t, u = r, { t: f } = U(), h = E(Ge, []), _ = E(Ue, !1), T = x(/* @__PURE__ */ new Set()), D = d(!1), A = d(""), j = d(""), M = [{
+			key: "desktop",
+			icon: zt,
+			labelKey: "showOnDesktop"
+		}, {
+			key: "mobile",
+			icon: Wt,
+			labelKey: "showOnMobile"
+		}];
+		function N(e) {
+			T.has(e) ? T.delete(e) : T.add(e);
+		}
+		let P = C(() => h.length > 0 || _), F = C(() => a.block.displayCondition ? !h.some((e) => e.label === a.block.displayCondition?.label) : !1);
+		function I() {
+			D.value = !0, F.value && a.block.displayCondition ? (A.value = a.block.displayCondition.before, j.value = a.block.displayCondition.after ?? "") : (A.value = "", j.value = "");
+		}
+		function L() {
+			A.value.trim() && (u("update", { displayCondition: {
+				label: f.blockSettings.customCondition,
+				before: A.value.trim(),
+				after: j.value.trim()
+			} }), D.value = !1, A.value = "", j.value = "");
+		}
+		i(() => a.block.displayCondition, (e) => {
+			if (!e) {
+				D.value = !1, A.value = "", j.value = "";
+				return;
+			}
+			F.value && (A.value = e.before, j.value = e.after ?? "");
+		}, { immediate: !0 });
+		let R = C(() => {
+			let e = {};
+			for (let t of h) {
+				let n = t.group ?? "";
+				e[n] || (e[n] = []), e[n].push(t);
+			}
+			return e;
+		});
+		function z(e, t) {
+			u("update", { styles: {
+				...a.block.styles,
+				[e]: t
+			} });
+		}
+		function B(e) {
+			return a.block.visibility?.[e] !== !1;
+		}
+		function V(e) {
+			let t = {
+				desktop: B("desktop"),
+				mobile: B("mobile")
+			};
+			t[e] = !t[e], u("update", { visibility: t });
+		}
+		return (r, i) => (s(), m("div", { class: n(["tpl:flex tpl:flex-col", t.isFirstSection ? "" : "tpl:mt-4"]) }, [
+			g(xi, {
+				title: b(f).blockSettings.spacing,
+				open: T.has("spacing"),
+				"no-border": t.isFirstSection,
+				onToggle: i[1] ||= (e) => N("spacing")
+			}, {
+				default: l(() => [g(yi, {
+					label: b(f).blockSettings.padding,
+					"model-value": t.block.styles.padding,
+					"onUpdate:modelValue": i[0] ||= (e) => z("padding", e)
+				}, null, 8, ["label", "model-value"])]),
+				_: 1
+			}, 8, [
+				"title",
+				"open",
+				"no-border"
+			]),
+			g(xi, {
+				title: b(f).blockSettings.background,
+				open: T.has("bg"),
+				onToggle: i[3] ||= (e) => N("bg")
+			}, {
+				default: l(() => [p("label", { class: n(b(K)) }, c(b(f).blockSettings.color), 3), g(Y, {
+					"model-value": t.block.styles.backgroundColor ?? "",
+					"onUpdate:modelValue": i[2] ||= (e) => z("backgroundColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["title", "open"]),
+			g(xi, {
+				title: b(f).blockSettings.display,
+				open: T.has("display"),
+				onToggle: i[4] ||= (e) => N("display")
+			}, {
+				default: l(() => [p("div", Si, [(s(), m(S, null, e(M, (e) => p("label", {
+					key: e.key,
+					class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]"
+				}, [
+					p("input", {
+						type: "checkbox",
+						class: "tpl:accent-[var(--tpl-primary)]",
+						checked: B(e.key),
+						onChange: (t) => V(e.key)
+					}, null, 40, Ci),
+					(s(), v(o(e.icon), {
+						size: 14,
+						"stroke-width": 1.5
+					})),
+					y(" " + c(b(f).blockSettings[e.labelKey]), 1)
+				])), 64))])]),
+				_: 1
+			}, 8, ["title", "open"]),
+			P.value ? (s(), v(xi, {
+				key: 0,
+				title: b(f).blockSettings.displayCondition,
+				open: T.has("condition"),
+				onToggle: i[8] ||= (e) => N("condition")
+			}, {
+				default: l(() => [p("div", wi, [p("select", {
+					class: n(["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:duration-150 tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[0_0_0_3px_var(--tpl-primary-light)]", t.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: D.value || F.value ? "__custom__" : t.block.displayCondition?.label ?? "",
+					onChange: i[5] ||= (e) => {
+						let t = e.target.value;
+						if (t === "__custom__") {
+							I();
+							return;
+						}
+						if (D.value = !1, !t) {
+							u("update", { displayCondition: void 0 });
+							return;
+						}
+						let n = b(h).find((e) => e.label === t);
+						n && u("update", { displayCondition: n });
+					}
+				}, [
+					p("option", Ei, c(b(f).blockSettings.noCondition), 1),
+					(s(!0), m(S, null, e(R.value, (t, n) => (s(), m(S, { key: n }, [n ? (s(), m("optgroup", {
+						key: 0,
+						label: String(n)
+					}, [(s(!0), m(S, null, e(t, (e) => (s(), m("option", {
+						key: e.label,
+						value: e.label
+					}, c(e.label), 9, Oi))), 128))], 8, Di)) : (s(!0), m(S, { key: 1 }, e(t, (e) => (s(), m("option", {
+						key: e.label,
+						value: e.label
+					}, c(e.label), 9, ki))), 128))], 64))), 128)),
+					b(_) ? (s(), m("option", Ai, c(b(f).blockSettings.customCondition), 1)) : w("", !0)
+				], 42, Ti), D.value || F.value ? (s(), m("div", ji, [
+					p("div", null, [p("label", Mi, c(b(f).blockSettings.customConditionBefore), 1), O(p("textarea", {
+						"onUpdate:modelValue": i[6] ||= (e) => A.value = e,
+						rows: "2",
+						class: n(b(Tt))
+					}, null, 2), [[k, A.value]])]),
+					p("div", null, [p("label", Ni, c(b(f).blockSettings.customConditionAfter), 1), O(p("textarea", {
+						"onUpdate:modelValue": i[7] ||= (e) => j.value = e,
+						rows: "2",
+						class: n(b(Tt))
+					}, null, 2), [[k, j.value]])]),
+					p("div", Pi, [p("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-bg)] tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:opacity-50",
+						disabled: !A.value.trim(),
+						onClick: L
+					}, c(b(f).blockSettings.applyCondition), 9, Fi)])
+				])) : t.block.displayCondition && !F.value ? (s(), m(S, { key: 1 }, [t.block.displayCondition.description ? (s(), m("p", Ii, c(t.block.displayCondition.description), 1)) : w("", !0), p("div", Li, [p("pre", Ri, c(t.block.displayCondition.before), 1), t.block.displayCondition.after ? (s(), m("pre", zi, c(t.block.displayCondition.after), 1)) : w("", !0)])], 64)) : w("", !0)])]),
+				_: 1
+			}, 8, ["title", "open"])) : w("", !0)
+		], 2));
+	}
+}), Vi = ["title"], Hi = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, Ui = {
+	key: 1,
+	class: "tpl:text-[var(--tpl-danger)]"
+}, Wi = [
+	"aria-checked",
+	"aria-label",
+	"disabled"
+], Gi = /* @__PURE__ */ f({
+	__name: "BooleanField",
+	props: {
+		field: {},
+		modelValue: { type: Boolean },
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = t, { t: i } = U();
+		return (t, a) => (s(), m("div", {
+			class: "tpl:mb-3.5",
+			title: e.readOnly ? b(i).customBlocks.dataSource.readOnlyTooltip : void 0
+		}, [p("label", { class: n(["tpl:flex tpl:items-center tpl:justify-between tpl:gap-2", e.readOnly ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer"]) }, [p("span", Hi, [
+			y(c(e.field.label) + " ", 1),
+			e.readOnly ? (s(), v(b(Rt), {
+				key: 0,
+				size: 12,
+				class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
+			})) : w("", !0),
+			e.field.required ? (s(), m("span", Ui, " * ")) : w("", !0)
+		]), p("button", {
+			type: "button",
+			role: "switch",
+			"aria-checked": e.modelValue,
+			"aria-label": e.field.label,
+			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.readOnly ? "tpl:opacity-60 tpl:cursor-not-allowed" : "tpl:cursor-pointer"
+			]),
+			disabled: e.readOnly,
+			onClick: a[0] ||= (t) => !e.readOnly && r("update:modelValue", !e.modelValue)
+		}, [p("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, Wi)], 2)], 8, Vi));
+	}
+}), Ki = { class: "tpl:mb-3.5" }, qi = {
+	key: 1,
+	class: "tpl:text-[var(--tpl-danger)]"
+}, Ji = /* @__PURE__ */ f({
+	__name: "FieldWrapper",
+	props: {
+		label: {},
+		required: { type: Boolean },
+		readOnly: { type: Boolean }
+	},
+	setup(e) {
+		return (t, r) => (s(), m("div", Ki, [p("label", { class: n(b(K)) }, [
+			y(c(e.label) + " ", 1),
+			e.readOnly ? (s(), v(b(Rt), {
+				key: 0,
+				size: 12,
+				class: "tpl:inline tpl:text-[var(--tpl-text-dim)]"
+			})) : w("", !0),
+			e.required ? (s(), m("span", qi, "*")) : w("", !0)
+		], 2), _(t.$slots, "default")]));
+	}
+}), Yi = /* @__PURE__ */ f({
+	__name: "ColorField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = U();
+		return (t, i) => (s(), v(Ji, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: l(() => [g(Y, {
+				"model-value": e.modelValue,
+				placeholder: e.field.placeholder,
+				disabled: e.readOnly,
+				title: e.readOnly ? b(r).customBlocks.dataSource.readOnlyTooltip : void 0,
+				"onUpdate:modelValue": i[0] ||= (e) => n("update:modelValue", e)
+			}, null, 8, [
+				"model-value",
+				"placeholder",
+				"disabled",
+				"title"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), Xi = {
+	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)" }
+}, Zi = [
+	"value",
+	"placeholder",
+	"title"
+], Qi = ["value", "placeholder"], $i = /* @__PURE__ */ f({
+	__name: "ImageField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, { t: a } = U(), o = E(Ae, null), u = bt(), f = C(() => !!o);
+		async function h() {
+			let e = await o?.({ accept: ["images"] });
+			u.alive && e && i("update:modelValue", e.url);
+		}
+		let _ = d(), x = d(!1), T = C(() => f.value && !x.value && !r.readOnly);
+		async function D(e) {
+			if (o) {
+				x.value = !0;
+				try {
+					let t = await o({
+						accept: ["images"],
+						files: e
+					});
+					if (!u.alive) return;
+					t && i("update:modelValue", t.url);
+				} finally {
+					u.alive && (x.value = !1);
+				}
+			}
+		}
+		let { isOver: O } = me({
+			target: _,
+			enabled: T,
+			onFiles: D
+		});
+		return (t, r) => (s(), v(Ji, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: l(() => [p("div", {
+				ref_key: "dropZoneRef",
+				ref: _,
+				class: "tpl:relative"
+			}, [
+				T.value && (b(O) || x.value) ? (s(), m("div", Xi, [x.value ? (s(), m(S, { key: 0 }, [g(b(lt), {
+					class: "tpl-spinner",
+					size: 18,
+					"stroke-width": 2
+				}), y(" " + c(b(a).image.uploading), 1)], 64)) : (s(), m(S, { key: 1 }, [g(b(ht), {
+					size: 18,
+					"stroke-width": 1.5
+				}), y(" " + c(b(a).image.dropToUpload), 1)], 64))])) : w("", !0),
+				e.readOnly ? (s(), m("input", {
+					key: 1,
+					type: "url",
+					class: n([b(G), "tpl:opacity-60 tpl:cursor-not-allowed"]),
+					value: e.modelValue,
+					placeholder: e.field.placeholder || "https://...",
+					disabled: "",
+					title: b(a).customBlocks.dataSource.readOnlyTooltip
+				}, null, 10, Zi)) : (s(), m("input", {
+					key: 2,
+					type: "url",
+					class: n(b(G)),
+					value: e.modelValue,
+					placeholder: e.field.placeholder || "https://...",
+					onInput: r[0] ||= (e) => i("update:modelValue", e.target.value)
+				}, null, 42, Qi)),
+				f.value && !e.readOnly ? (s(), m("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:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)] tpl:bg-[var(--tpl-bg)]",
+					onClick: r[1] ||= (e) => h()
+				}, [g(b(_e), {
+					size: 14,
+					"stroke-width": 1.5
+				}), y(" " + c(b(a).image.browseMedia), 1)])) : w("", !0)
+			], 512)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), ea = [
+	"value",
+	"placeholder",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"title"
+], ta = /* @__PURE__ */ f({
+	__name: "NumberField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = t, { t: i } = U();
+		return (t, a) => (s(), v(Ji, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: l(() => [p("input", {
+				type: "number",
+				class: n([b(G), 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 ? b(i).customBlocks.dataSource.readOnlyTooltip : void 0,
+				onInput: a[0] ||= (t) => !e.readOnly && r("update:modelValue", Number(t.target.value))
+			}, null, 42, ea)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), na = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, ra = { class: "tpl:mb-2 tpl:flex tpl:items-center tpl:justify-between" }, ia = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]" }, aa = ["title", "onClick"], oa = {
+	key: 1,
+	class: "tpl:m-0 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, sa = /* @__PURE__ */ f({
+	__name: "RepeatableField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, { t: u } = U(), d = C(() => i.modelValue || []), f = C(() => !i.field.maxItems || d.value.length < i.field.maxItems), h = C(() => !i.field.minItems || d.value.length > i.field.minItems);
+		function _() {
+			if (!f.value || i.readOnly) return;
+			let e = {};
+			for (let t of i.field.fields) e[t.key] = t.default ?? "";
+			a("update:modelValue", [...d.value, e]);
+		}
+		function x(e) {
+			if (!h.value || i.readOnly) return;
+			let t = [...d.value];
+			t.splice(e, 1), a("update:modelValue", t);
+		}
+		function T(e, t, n) {
+			let r = d.value.map((r, i) => i === e ? {
+				...r,
+				[t]: n
+			} : r);
+			a("update:modelValue", r);
+		}
+		return (r, i) => (s(), v(Ji, {
+			label: t.field.label,
+			required: t.field.required,
+			"read-only": t.readOnly
+		}, {
+			default: l(() => [p("div", na, [
+				(s(!0), m(S, null, e(d.value, (n, r) => (s(), m("div", {
+					key: `${t.field.key}-${r}`,
+					class: "tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:p-3"
+				}, [p("div", ra, [p("span", ia, " #" + c(r + 1), 1), h.value && !t.readOnly ? (s(), m("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:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]",
+					title: b(u).customBlocks.fields.removeItem,
+					onClick: (e) => x(r)
+				}, [g(b(mt), {
+					size: 12,
+					"stroke-width": 2
+				})], 8, aa)) : w("", !0)]), (s(!0), m(S, null, e(t.field.fields, (e) => (s(), v(o(b(ga)(e.type)), {
+					key: e.key,
+					field: e,
+					"model-value": n[e.key],
+					"read-only": t.readOnly,
+					"onUpdate:modelValue": (t) => T(r, e.key, t)
+				}, null, 8, [
+					"field",
+					"model-value",
+					"read-only",
+					"onUpdate:modelValue"
+				]))), 128))]))), 128)),
+				f.value && !t.readOnly ? (s(), m("button", {
+					key: 0,
+					type: "button",
+					class: n(b(wt)),
+					onClick: _
+				}, [g(b(Q), {
+					size: 14,
+					"stroke-width": 2
+				}), y(" " + c(b(u).customBlocks.fields.addItem), 1)], 2)) : w("", !0),
+				!f.value && !t.readOnly ? (s(), m("p", oa, c(b(u).customBlocks.fields.maxItemsReached), 1)) : w("", !0)
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), ca = [
+	"value",
+	"disabled",
+	"title"
+], la = ["value"], ua = /* @__PURE__ */ f({
+	__name: "SelectField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: r }) {
+		let i = r, { t: a } = U();
+		return (r, o) => (s(), v(Ji, {
+			label: t.field.label,
+			required: t.field.required,
+			"read-only": t.readOnly
+		}, {
+			default: l(() => [p("select", {
+				class: n([b(G), t.readOnly && "tpl:opacity-60 tpl:cursor-not-allowed"]),
+				value: t.modelValue,
+				disabled: t.readOnly,
+				title: t.readOnly ? b(a).customBlocks.dataSource.readOnlyTooltip : void 0,
+				onChange: o[0] ||= (e) => !t.readOnly && i("update:modelValue", e.target.value)
+			}, [(s(!0), m(S, null, e(t.field.options, (e) => (s(), m("option", {
+				key: e.value,
+				value: e.value
+			}, c(e.label), 9, la))), 128))], 42, ca)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), da = [
+	"value",
+	"placeholder",
+	"title"
+], fa = /* @__PURE__ */ f({
+	__name: "TextField",
+	props: {
+		field: {},
+		modelValue: {},
+		readOnly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let r = t, { t: i } = U();
+		return (t, a) => (s(), v(Ji, {
+			label: e.field.label,
+			required: e.field.required,
+			"read-only": e.readOnly
+		}, {
+			default: l(() => [e.readOnly ? (s(), m("input", {
+				key: 0,
+				type: "text",
+				class: n([b(G), "tpl:opacity-60 tpl:cursor-not-allowed"]),
+				value: e.modelValue,
+				placeholder: e.field.placeholder,
+				disabled: "",
+				title: b(i).customBlocks.dataSource.readOnlyTooltip
+			}, null, 10, da)) : (s(), v($, {
+				key: 1,
+				"model-value": e.modelValue,
+				placeholder: e.field.placeholder,
+				"onUpdate:modelValue": a[0] ||= (e) => r("update:modelValue", e)
+			}, null, 8, ["model-value", "placeholder"]))]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"read-only"
+		]));
+	}
+}), pa = [
+	"value",
+	"placeholder",
+	"title"
+], ma = "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", ha = {
+	text: fa,
+	textarea: /* @__PURE__ */ f({
+		__name: "TextareaField",
+		props: {
+			field: {},
+			modelValue: {},
+			readOnly: { type: Boolean }
+		},
+		emits: ["update:modelValue"],
+		setup(e, { emit: t }) {
+			let r = t, { t: i } = U();
+			return (t, a) => (s(), v(Ji, {
+				label: e.field.label,
+				required: e.field.required,
+				"read-only": e.readOnly
+			}, {
+				default: l(() => [e.readOnly ? (s(), m("textarea", {
+					key: 0,
+					value: e.modelValue,
+					placeholder: e.field.placeholder,
+					rows: "3",
+					disabled: "",
+					title: b(i).customBlocks.dataSource.readOnlyTooltip,
+					class: n(ma)
+				}, null, 8, pa)) : (s(), v(Wn, {
+					key: 1,
+					"model-value": e.modelValue,
+					placeholder: e.field.placeholder,
+					"onUpdate:modelValue": a[0] ||= (e) => r("update:modelValue", e)
+				}, null, 8, ["model-value", "placeholder"]))]),
+				_: 1
+			}, 8, [
+				"label",
+				"required",
+				"read-only"
+			]));
+		}
+	}),
+	image: $i,
+	color: Yi,
+	number: ta,
+	select: ua,
+	boolean: Gi,
+	repeatable: sa
+};
+function ga(e) {
+	return ha[e] ?? fa;
+}
+//#endregion
+//#region src/components/toolbar/CustomBlockToolbar.vue?vue&type=script&setup=true&lang.ts
+var _a = {
+	key: 0,
+	class: "tpl:p-4"
+}, va = { class: "tpl:m-0 tpl:text-center tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, ya = { key: 1 }, ba = {
+	key: 0,
+	class: "tpl:m-0 tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, xa = {
+	key: 1,
+	class: "tpl:mb-4"
+}, Sa = {
+	key: 1,
+	class: "tpl:flex tpl:h-[32px] tpl:items-center"
+}, Ca = {
+	key: 0,
+	class: "tpl:w-full tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
+}, wa = {
+	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)]"
+}, Ta = /* @__PURE__ */ f({
+	__name: "CustomBlockToolbar",
+	props: { block: {} },
+	emits: ["updateFieldValues", "updateDataSourceFetched"],
+	setup(t, { emit: n }) {
+		let r = t, i = n, { t: a } = U(), l = E(Re, []), u = C(() => l.find((e) => e.type === r.block.customType)), { isFetching: d, fetchError: f, fetch: h, hasDataSource: _, needsFetch: x } = ce({
+			definition: u,
+			block: C(() => r.block),
+			onUpdate: (e, t) => {
+				i("updateFieldValues", e), i("updateDataSourceFetched", t);
+			}
+		});
+		function T(e) {
+			return e.readOnly === !0 && _.value && !!r.block.dataSourceFetched;
+		}
+		function D(e, t) {
+			i("updateFieldValues", {
+				...r.block.fieldValues,
+				[e]: t
+			});
+		}
+		return (n, r) => u.value ? (s(), m("div", ya, [
+			u.value.description ? (s(), m("p", ba, c(u.value.description), 1)) : w("", !0),
+			b(_) ? (s(), m("div", xa, [b(x) && !b(d) ? (s(), m("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-bg)] tpl:transition-all tpl:duration-150 tpl:bg-[var(--tpl-primary)]",
+				onClick: r[0] ||= (...e) => b(h) && b(h)(...e)
+			}, c(u.value?.dataSource?.label || b(a).customBlocks.dataSource.fetchButton), 1)) : (s(), m("div", Sa, [b(d) ? (s(), m("div", Ca, c(b(a).customBlocks.dataSource.fetching), 1)) : (s(), m("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:duration-150 tpl:hover:border-[var(--tpl-primary)] tpl:hover:text-[var(--tpl-primary)]",
+				onClick: r[1] ||= (...e) => b(h) && b(h)(...e)
+			}, [g(b(at), { size: 12 }), y(" " + c(b(a).customBlocks.dataSource.changeButton), 1)]))])), b(f) ? (s(), m("p", wa, [g(b($e), {
+				size: 14,
+				class: "tpl:shrink-0"
+			}), y(" " + c(b(a).customBlocks.dataSource.fetchError), 1)])) : w("", !0)])) : w("", !0),
+			(s(!0), m(S, null, e(u.value.fields, (e) => (s(), v(o(b(ga)(e.type)), {
+				key: e.key,
+				field: e,
+				"model-value": t.block.fieldValues[e.key],
+				"read-only": T(e),
+				"onUpdate:modelValue": (t) => D(e.key, t)
+			}, null, 8, [
+				"field",
+				"model-value",
+				"read-only",
+				"onUpdate:modelValue"
+			]))), 128))
+		])) : (s(), m("div", _a, [p("p", va, c(b(a).customBlocks.toolbar.noDefinition), 1)]));
+	}
+}), Ea = { class: "tpl:mb-3.5" }, Da = { class: "tpl:mb-3.5" }, Oa = { class: "tpl:mb-3.5" }, ka = { class: "tpl:flex tpl:items-stretch" }, Aa = ["value"], ja = /* @__PURE__ */ f({
+	__name: "DividerToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = t, { t: i } = U();
+		function a(e, t) {
+			r("update", { [e]: t });
+		}
+		return (t, r) => (s(), m(S, null, [
+			p("div", Ea, [p("label", { class: n(b(K)) }, c(b(i).divider.style), 3), g(Z, {
+				options: [
+					{
+						value: "solid",
+						label: b(i).divider.solid
+					},
+					{
+						value: "dashed",
+						label: b(i).divider.dashed
+					},
+					{
+						value: "dotted",
+						label: b(i).divider.dotted
+					}
+				],
+				"model-value": e.block.lineStyle,
+				"onUpdate:modelValue": r[0] ||= (e) => a("lineStyle", e)
+			}, null, 8, ["options", "model-value"])]),
+			p("div", Da, [p("label", { class: n(b(K)) }, c(b(i).divider.color), 3), g(Y, {
+				"model-value": e.block.color,
+				"onUpdate:modelValue": r[1] ||= (e) => a("color", e)
+			}, null, 8, ["model-value"])]),
+			p("div", Oa, [p("label", { class: n(b(K)) }, c(b(i).divider.thickness), 3), p("div", ka, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: e.block.thickness,
+				min: "1",
+				max: "10",
+				onInput: r[2] ||= (e) => a("thickness", Number(e.target.value))
+			}, null, 42, Aa), p("span", { class: n(b(q)) }, "px", 2)])])
+		], 64));
+	}
+}), Ma = { class: "tpl:mb-3.5" }, Na = ["value"], Pa = { class: "tpl:mt-1.5 tpl:flex tpl:items-start tpl:gap-1.5 tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, Fa = /* @__PURE__ */ f({
+	__name: "HtmlToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = t, { t: i } = U();
+		return (t, a) => (s(), m("div", Ma, [
+			p("label", { class: n(b(K)) }, c(b(i).html.content), 3),
+			p("textarea", {
+				value: e.block.content,
+				placeholder: "<div>...</div>",
+				rows: "10",
+				class: n(b(Tt)),
+				onInput: a[0] ||= (e) => r("update", { content: e.target.value })
+			}, null, 42, Na),
+			p("p", Pa, [g(b(st), {
+				size: 12,
+				class: "tpl:mt-0.5 tpl:shrink-0"
+			}), y(" " + c(b(i).html.sanitizationHint), 1)])
+		]));
+	}
+}), Ia = { class: "tpl:mb-3.5" }, La = {
+	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)" }
+}, Ra = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, za = ["value", "placeholder"], Ba = { class: "tpl:mb-3.5" }, Va = { class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]" }, Ha = ["checked"], Ua = { class: "tpl:block tpl:text-[var(--tpl-text-dim)]" }, Wa = { class: "tpl:mb-3.5" }, Ga = ["value"], Ka = { value: "full" }, qa = { value: "custom" }, Ja = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:items-stretch"
+}, Ya = ["value"], Xa = { class: "tpl:mb-3.5" }, Za = { class: "tpl:mb-3.5" }, Qa = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
+}, $a = ["checked"], eo = 350, to = /* @__PURE__ */ f({
+	__name: "ImageToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, { t: a } = U(), o = E(Ae, null), l = E(Ie, B.liquid), u = bt(), f = C(() => !!o), h = d(!1), _ = d(!1), { start: v } = ke(() => {
+			h.value = !1;
+		}, 1e3, { immediate: !1 }), x = [
+			300,
+			400,
+			500
+		], T = C(() => {
+			let e = r.block.width;
+			return e === "full" ? "full" : x.includes(e) ? String(e) : "custom";
+		});
+		function D(e, t) {
+			i("update", { [e]: t });
+		}
+		function O(e) {
+			if (e === "custom") {
+				let e = r.block.width;
+				(typeof e != "number" || x.includes(e)) && D("width", eo);
+				return;
+			}
+			D("width", e === "full" ? "full" : Number(e));
+		}
+		function k(e) {
+			let t = Number(e);
+			!Number.isFinite(t) || t <= 0 || D("width", t);
+		}
+		async function A() {
+			let e = await o?.({ accept: ["images"] });
+			u.alive && e && (D("src", e.url), e.alt && (D("alt", e.alt), _.value = !0), h.value = !0, v());
+		}
+		let j = d(), M = d(!1), N = C(() => z(r.block.src, l)), P = C(() => f.value && !M.value && !N.value);
+		async function F(e) {
+			if (o) {
+				M.value = !0;
+				try {
+					let t = await o({
+						accept: ["images"],
+						files: e
+					});
+					if (!u.alive) return;
+					t && (D("src", t.url), t.alt && (D("alt", t.alt), _.value = !0), h.value = !0, v());
+				} finally {
+					u.alive && (M.value = !1);
+				}
+			}
+		}
+		let { isOver: I } = me({
+			target: j,
+			enabled: P,
+			onFiles: F
+		});
+		return (t, r) => (s(), m(S, null, [
+			p("div", Ia, [p("label", { class: n(b(K)) }, c(b(a).image.imageUrl), 3), p("div", {
+				ref_key: "dropZoneRef",
+				ref: j,
+				class: "tpl:relative"
+			}, [
+				P.value && (b(I) || M.value) ? (s(), m("div", La, [M.value ? (s(), m(S, { key: 0 }, [g(b(lt), {
+					class: "tpl-spinner",
+					size: 18,
+					"stroke-width": 2
+				}), y(" " + c(b(a).image.uploading), 1)], 64)) : (s(), m(S, { key: 1 }, [g(b(ht), {
+					size: 18,
+					"stroke-width": 1.5
+				}), y(" " + c(b(a).image.dropToUpload), 1)], 64))])) : w("", !0),
+				g($, {
+					"model-value": e.block.src,
+					type: "url",
+					placeholder: b(a).image.imageUrlPlaceholder,
+					pulse: h.value,
+					"onUpdate:modelValue": r[0] ||= (e) => D("src", e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"pulse"
+				]),
+				f.value ? (s(), m("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 tpl:duration-150",
+					style: {
+						"border-color": "var(--tpl-border)",
+						color: "var(--tpl-primary)",
+						"background-color": "var(--tpl-bg)"
+					},
+					onClick: A
+				}, [g(b(_e), {
+					size: 14,
+					"stroke-width": 1.5
+				}), y(" " + c(b(a).image.browseMedia), 1)])) : w("", !0)
+			], 512)]),
+			b(z)(e.block.src, b(l)) ? (s(), m("div", Ra, [p("label", { class: n(b(K)) }, [y(c(b(a).image.placeholderUrl) + " ", 1), r[9] ||= p("span", { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, c("(optional)"), -1)], 2), p("input", {
+				type: "url",
+				class: n(b(G)),
+				value: e.block.placeholderUrl || "",
+				placeholder: b(a).image.placeholderUrlPlaceholder,
+				onInput: r[1] ||= (e) => D("placeholderUrl", e.target.value)
+			}, null, 42, za)])) : w("", !0),
+			p("div", Ba, [
+				p("label", { class: n(b(K)) }, c(b(a).image.altText), 3),
+				g($, {
+					"model-value": e.block.alt,
+					type: "text",
+					placeholder: b(a).image.altTextPlaceholder,
+					pulse: _.value,
+					disabled: e.block.decorative === !0,
+					"onUpdate:modelValue": r[2] ||= (e) => D("alt", e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"pulse",
+					"disabled"
+				]),
+				p("label", Va, [p("input", {
+					type: "checkbox",
+					class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
+					checked: e.block.decorative === !0,
+					onChange: r[3] ||= (e) => D("decorative", e.target.checked)
+				}, null, 40, Ha), p("span", null, [y(c(b(a).image.decorative) + " ", 1), p("span", Ua, c(b(a).image.decorativeHint), 1)])])
+			]),
+			p("div", Wa, [
+				p("label", { class: n(b(K)) }, c(b(a).image.width), 3),
+				p("select", {
+					class: n(b(G)),
+					value: T.value,
+					onChange: r[4] ||= (e) => O(e.target.value)
+				}, [
+					p("option", Ka, c(b(a).image.fullWidth), 1),
+					r[10] ||= p("option", { value: "300" }, "300px", -1),
+					r[11] ||= p("option", { value: "400" }, "400px", -1),
+					r[12] ||= p("option", { value: "500" }, "500px", -1),
+					p("option", qa, c(b(a).image.widthCustom), 1)
+				], 42, Ga),
+				T.value === "custom" ? (s(), m("div", Ja, [p("input", {
+					type: "number",
+					class: n(b(J)),
+					value: typeof e.block.width == "number" ? e.block.width : eo,
+					min: "20",
+					onInput: r[5] ||= (e) => k(e.target.value)
+				}, null, 42, Ya), p("span", { class: n(b(q)) }, "px", 2)])) : w("", !0)
+			]),
+			p("div", Xa, [p("label", { class: n(b(K)) }, c(b(a).title.align), 3), g(Z, {
+				options: [
+					{
+						value: "left",
+						label: b(a).title.alignLeft
+					},
+					{
+						value: "center",
+						label: b(a).title.alignCenter
+					},
+					{
+						value: "right",
+						label: b(a).title.alignRight
+					}
+				],
+				"model-value": e.block.align,
+				"onUpdate:modelValue": r[6] ||= (e) => D("align", e)
+			}, null, 8, ["options", "model-value"])]),
+			p("div", Za, [
+				p("label", { class: n(b(K)) }, c(b(a).image.linkUrl), 3),
+				g($, {
+					"model-value": e.block.linkUrl || "",
+					type: "url",
+					placeholder: b(a).image.imageUrlPlaceholder,
+					"onUpdate:modelValue": r[7] ||= (e) => D("linkUrl", e)
+				}, null, 8, ["model-value", "placeholder"]),
+				e.block.linkUrl ? (s(), m("label", Qa, [p("input", {
+					type: "checkbox",
+					class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
+					checked: e.block.linkOpenInNewTab ?? !1,
+					onChange: r[8] ||= (e) => D("linkOpenInNewTab", e.target.checked)
+				}, null, 40, $a), y(" " + c(b(a).image.openInNewTab), 1)])) : w("", !0)
+			])
+		], 64));
+	}
+}), no = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, ro = { class: "tpl:flex tpl:items-center tpl:gap-2" }, io = [
+	"value",
+	"placeholder",
+	"onInput"
+], ao = ["title", "onClick"], oo = { class: "tpl:flex tpl:items-center tpl:gap-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, so = ["checked", "onChange"], co = { class: "tpl:flex tpl:items-center tpl:gap-2" }, lo = ["value"], uo = { value: "" }, fo = ["value"], po = ["value"], mo = /* @__PURE__ */ f({
+	__name: "MenuToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, { t: o } = U(), u = C(() => [
+			{
+				key: "openInNewTab",
+				label: o.menu.openInNewTab
+			},
+			{
+				key: "bold",
+				label: o.menu.bold
+			},
+			{
+				key: "underline",
+				label: o.menu.underline
+			}
+		]), d = C(() => [
+			{
+				value: "left",
+				label: o.title.alignLeft,
+				icon: pt
+			},
+			{
+				value: "center",
+				label: o.title.alignCenter,
+				icon: dt
+			},
+			{
+				value: "right",
+				label: o.title.alignRight,
+				icon: ft
+			}
+		]);
+		function f(e, t) {
+			a("update", { [e]: t });
+		}
+		function h() {
+			let e = {
+				id: P(),
+				text: "",
+				url: "",
+				openInNewTab: !1,
+				bold: !1,
+				underline: !1
+			};
+			a("update", { items: [...i.block.items, e] });
+		}
+		function _(e, t, n) {
+			let r = i.block.items.map((r) => r.id === e ? {
+				...r,
+				[t]: n
+			} : r);
+			a("update", { items: r });
+		}
+		function v(e) {
+			a("update", { items: i.block.items.filter((t) => t.id !== e) });
+		}
+		return (r, i) => (s(), m(S, null, [
+			g(X, { label: b(o).menu.items }, {
+				default: l(() => [p("div", no, [(s(!0), m(S, null, e(t.block.items, (r) => (s(), m("div", {
+					key: r.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"
+				}, [
+					p("div", ro, [p("input", {
+						type: "text",
+						class: n([b(G), "tpl:flex-1"]),
+						value: r.text,
+						placeholder: b(o).menu.text,
+						onInput: (e) => _(r.id, "text", e.target.value)
+					}, null, 42, io), p("button", {
+						class: n(b(Ct)),
+						title: b(o).menu.removeItem,
+						onClick: (e) => v(r.id)
+					}, [g(b(gt), {
+						size: 14,
+						"stroke-width": 2
+					})], 10, ao)]),
+					g($, {
+						"model-value": r.url,
+						type: "url",
+						placeholder: b(o).menu.urlPlaceholder,
+						"onUpdate:modelValue": (e) => _(r.id, "url", e)
+					}, null, 8, [
+						"model-value",
+						"placeholder",
+						"onUpdate:modelValue"
+					]),
+					p("div", oo, [(s(!0), m(S, null, e(u.value, (e) => (s(), m("label", {
+						key: e.key,
+						class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1"
+					}, [p("input", {
+						type: "checkbox",
+						checked: r[e.key],
+						class: "tpl:accent-[var(--tpl-primary)]",
+						onChange: (t) => _(r.id, e.key, t.target.checked)
+					}, null, 40, so), y(" " + c(e.label), 1)]))), 128))]),
+					p("div", co, [p("label", { class: n([b(K), "tpl:!mb-0"]) }, c(b(o).menu.color), 3), g(Y, {
+						"swatch-only": "",
+						"model-value": r.color || t.block.linkColor || t.block.color,
+						"onUpdate:modelValue": (e) => _(r.id, "color", e)
+					}, null, 8, ["model-value", "onUpdate:modelValue"])])
+				]))), 128)), p("button", {
+					class: n(b(wt)),
+					onClick: h
+				}, [g(b(Q), {
+					size: 14,
+					"stroke-width": 2
+				}), y(" " + c(b(o).menu.addItem), 1)], 2)])]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.fontFamily }, {
+				default: l(() => [p("select", {
+					class: n(b(G)),
+					value: t.block.fontFamily || "",
+					onChange: i[0] ||= (e) => f("fontFamily", e.target.value || void 0)
+				}, [p("option", uo, c(b(o).title.inheritFont), 1), (s(!0), m(S, null, e(t.fontFamilies, (e) => (s(), m("option", {
+					key: e.value,
+					value: e.value
+				}, c(e.label), 9, fo))), 128))], 42, lo)]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.fontSize }, {
+				default: l(() => [g(kt, {
+					"model-value": t.block.fontSize,
+					min: 8,
+					max: 48,
+					suffix: "px",
+					"onUpdate:modelValue": i[1] ||= (e) => f("fontSize", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.color }, {
+				default: l(() => [g(Y, {
+					"model-value": t.block.color,
+					"onUpdate:modelValue": i[2] ||= (e) => f("color", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.linkColor }, {
+				default: l(() => [g(Y, {
+					"model-value": t.block.linkColor || t.block.color,
+					"onUpdate:modelValue": i[3] ||= (e) => f("linkColor", e || void 0)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.textAlign }, {
+				default: l(() => [g(Z, {
+					options: d.value,
+					"model-value": t.block.textAlign,
+					"onUpdate:modelValue": i[4] ||= (e) => f("textAlign", e)
+				}, null, 8, ["options", "model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.separator }, {
+				default: l(() => [p("input", {
+					type: "text",
+					class: n(b(G)),
+					value: t.block.separator,
+					onInput: i[5] ||= (e) => f("separator", e.target.value)
+				}, null, 42, po)]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.separatorColor }, {
+				default: l(() => [g(Y, {
+					"model-value": t.block.separatorColor,
+					"onUpdate:modelValue": i[6] ||= (e) => f("separatorColor", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"]),
+			g(X, { label: b(o).menu.spacing }, {
+				default: l(() => [g(kt, {
+					"model-value": t.block.spacing,
+					min: 0,
+					max: 50,
+					suffix: "px",
+					"onUpdate:modelValue": i[7] ||= (e) => f("spacing", e)
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}, 8, ["label"])
+		], 64));
+	}
+});
+//#endregion
+//#region src/utils/rebalanceColumnChildren.ts
+function ho(e) {
+	return e === "1" ? 1 : e === "3" ? 3 : 2;
+}
+function go(e, t) {
+	let n = ho(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 _o = { class: "tpl:mb-3.5" }, vo = ["value"], yo = ["value"], bo = { class: "tpl:mb-3.5" }, xo = { class: "tpl:flex tpl:items-stretch" }, So = ["value"], Co = { class: "tpl:mb-3.5" }, wo = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, To = ["checked"], Eo = {
+	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"
+}, Do = { class: "tpl:flex tpl:items-stretch" }, Oo = ["value"], ko = /* @__PURE__ */ f({
+	__name: "SectionToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, { t: o } = U(), l = C(() => [
+			{
+				value: "1",
+				label: o.section.column1
+			},
+			{
+				value: "2",
+				label: o.section.column2
+			},
+			{
+				value: "3",
+				label: o.section.column3
+			},
+			{
+				value: "1-2",
+				label: o.section.ratio12
+			},
+			{
+				value: "2-1",
+				label: o.section.ratio21
+			}
+		]);
+		function u(e) {
+			let t = e.target.value, n = go(i.block.children, t);
+			a("update", {
+				columns: t,
+				children: n
+			});
+		}
+		function d(e) {
+			let t = Number(e.target.value);
+			a("update", { borderRadius: t });
+		}
+		function f(e) {
+			a("update", { wrapper: e ? { padding: {
+				top: 20,
+				right: 20,
+				bottom: 20,
+				left: 20
+			} } : void 0 });
+		}
+		function h(e) {
+			a("update", { wrapper: {
+				...i.block.wrapper,
+				...e
+			} });
+		}
+		function _(e) {
+			h({ padding: e });
+		}
+		function v(e) {
+			h({ borderRadius: Number(e.target.value) });
+		}
+		return (r, i) => (s(), m(S, null, [
+			p("div", _o, [p("label", { class: n(b(K)) }, c(b(o).section.columns), 3), p("select", {
+				class: n(b(G)),
+				value: t.block.columns,
+				onChange: u
+			}, [(s(!0), m(S, null, e(l.value, (e) => (s(), m("option", {
+				key: e.value,
+				value: e.value
+			}, c(e.label), 9, yo))), 128))], 42, vo)]),
+			p("div", bo, [p("label", { class: n(b(K)) }, c(b(o).section.borderRadius), 3), p("div", xo, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.borderRadius ?? 0,
+				min: "0",
+				max: "50",
+				onInput: d
+			}, null, 42, So), p("span", { class: n(b(q)) }, "px", 2)])]),
+			p("div", Co, [p("label", wo, [p("input", {
+				type: "checkbox",
+				class: "tpl:accent-[var(--tpl-primary)]",
+				checked: !!t.block.wrapper,
+				onChange: i[0] ||= (e) => f(e.target.checked)
+			}, null, 40, To), y(" " + c(b(o).section.wrapperEnable), 1)]), t.block.wrapper ? (s(), m("div", Eo, [
+				p("div", null, [p("label", { class: n(b(K)) }, c(b(o).blockSettings.color), 3), g(Y, {
+					"model-value": t.block.wrapper.backgroundColor ?? "",
+					"onUpdate:modelValue": i[1] ||= (e) => h({ backgroundColor: e })
+				}, null, 8, ["model-value"])]),
+				g(yi, {
+					label: b(o).blockSettings.padding,
+					"model-value": t.block.wrapper.padding ?? {
+						top: 0,
+						right: 0,
+						bottom: 0,
+						left: 0
+					},
+					"onUpdate:modelValue": _
+				}, null, 8, ["label", "model-value"]),
+				p("div", null, [p("label", { class: n(b(K)) }, c(b(o).section.borderRadius), 3), p("div", Do, [p("input", {
+					type: "number",
+					class: n(b(J)),
+					value: t.block.wrapper.borderRadius ?? 0,
+					min: "0",
+					max: "50",
+					onInput: v
+				}, null, 42, Oo), p("span", { class: n(b(q)) }, "px", 2)])])
+			])) : w("", !0)])
+		], 64));
+	}
+}), Ao = { class: "tpl:mb-3.5" }, jo = { class: "tpl:flex tpl:flex-col tpl:gap-2" }, Mo = { class: "tpl:flex tpl:items-center tpl:gap-2" }, No = ["value", "onChange"], Po = ["value"], Fo = ["title", "onClick"], Io = { class: "tpl:mb-3.5" }, Lo = ["value"], Ro = { value: "solid" }, zo = { value: "outlined" }, Bo = { value: "rounded" }, Vo = { value: "square" }, Ho = { value: "circle" }, Uo = { class: "tpl:mb-3.5" }, Wo = { class: "tpl:mb-3.5" }, Go = { class: "tpl:flex tpl:items-stretch" }, Ko = ["value"], qo = { class: "tpl:mb-3.5" }, Jo = /* @__PURE__ */ f({
+	__name: "SocialToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, { t: o } = U();
+		function l(e, t) {
+			a("update", { [e]: t });
+		}
+		function u() {
+			let e = {
+				id: P(),
+				platform: "facebook",
+				url: ""
+			};
+			a("update", { icons: [...i.block.icons, e] });
+		}
+		function d(e, t, n) {
+			let r = i.block.icons.map((r) => r.id === e ? {
+				...r,
+				[t]: n
+			} : r);
+			a("update", { icons: r });
+		}
+		function f(e) {
+			a("update", { icons: i.block.icons.filter((t) => t.id !== e) });
+		}
+		return (r, i) => (s(), m(S, null, [
+			p("div", Ao, [p("label", { class: n(b(K)) }, c(b(o).social.icons), 3), p("div", jo, [(s(!0), m(S, null, e(t.block.icons, (t) => (s(), m("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"
+			}, [p("div", Mo, [p("select", {
+				"data-testid": "social-platform-select",
+				class: n([b(G), "tpl:flex-1"]),
+				value: t.platform,
+				onChange: (e) => d(t.id, "platform", e.target.value)
+			}, [(s(!0), m(S, null, e(b(xe), (e) => (s(), m("option", {
+				key: e,
+				value: e
+			}, c(b(o).social.platforms[e]), 9, Po))), 128))], 42, No), p("button", {
+				class: n(b(Ct)),
+				title: b(o).social.removeIcon,
+				onClick: (e) => f(t.id)
+			}, [g(b(gt), {
+				size: 14,
+				"stroke-width": 2
+			})], 10, Fo)]), g($, {
+				"model-value": t.url,
+				type: "url",
+				placeholder: b(o).social.urlPlaceholder,
+				"onUpdate:modelValue": (e) => d(t.id, "url", e)
+			}, null, 8, [
+				"model-value",
+				"placeholder",
+				"onUpdate:modelValue"
+			])]))), 128)), p("button", {
+				class: n(b(wt)),
+				onClick: u
+			}, [g(b(Q), {
+				size: 14,
+				"stroke-width": 2
+			}), y(" " + c(b(o).social.addIcon), 1)], 2)])]),
+			p("div", Io, [p("label", { class: n(b(K)) }, c(b(o).social.style), 3), p("select", {
+				class: n(b(G)),
+				value: t.block.iconStyle,
+				onChange: i[0] ||= (e) => l("iconStyle", e.target.value)
+			}, [
+				p("option", Ro, c(b(o).social.styleSolid), 1),
+				p("option", zo, c(b(o).social.styleOutlined), 1),
+				p("option", Bo, c(b(o).social.styleRounded), 1),
+				p("option", Vo, c(b(o).social.styleSquare), 1),
+				p("option", Ho, c(b(o).social.styleCircle), 1)
+			], 42, Lo)]),
+			p("div", Uo, [p("label", { class: n(b(K)) }, c(b(o).social.size), 3), g(Z, {
+				options: [
+					{
+						value: "small",
+						label: b(o).social.sizeSmall
+					},
+					{
+						value: "medium",
+						label: b(o).social.sizeMedium
+					},
+					{
+						value: "large",
+						label: b(o).social.sizeLarge
+					}
+				],
+				"model-value": t.block.iconSize,
+				"onUpdate:modelValue": i[1] ||= (e) => l("iconSize", e)
+			}, null, 8, ["options", "model-value"])]),
+			p("div", Wo, [p("label", { class: n(b(K)) }, c(b(o).social.spacing), 3), p("div", Go, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.spacing,
+				min: "0",
+				max: "50",
+				onInput: i[2] ||= (e) => l("spacing", Number(e.target.value))
+			}, null, 42, Ko), p("span", { class: n(b(q)) }, "px", 2)])]),
+			p("div", qo, [p("label", { class: n(b(K)) }, c(b(o).social.align), 3), g(Z, {
+				options: [
+					{
+						value: "left",
+						label: b(o).title.alignLeft,
+						icon: b(pt)
+					},
+					{
+						value: "center",
+						label: b(o).title.alignCenter,
+						icon: b(dt)
+					},
+					{
+						value: "right",
+						label: b(o).title.alignRight,
+						icon: b(ft)
+					}
+				],
+				"model-value": t.block.align,
+				"onUpdate:modelValue": i[3] ||= (e) => l("align", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), Yo = { class: "tpl:mb-3.5" }, Xo = { class: "tpl:flex tpl:items-stretch" }, Zo = ["value"], Qo = ["value"], $o = /* @__PURE__ */ f({
+	__name: "SpacerToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = t, { t: i } = U();
+		return (t, a) => (s(), m("div", Yo, [
+			p("label", { class: n(b(K)) }, c(b(i).spacer.height), 3),
+			p("div", Xo, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: e.block.height,
+				min: "10",
+				max: "100",
+				onInput: a[0] ||= (e) => r("update", { height: Number(e.target.value) })
+			}, null, 42, Zo), p("span", { class: n(b(q)) }, "px", 2)]),
+			p("input", {
+				type: "range",
+				class: "tpl:mt-2 tpl:w-full tpl:accent-[var(--tpl-primary)]",
+				value: e.block.height,
+				min: "10",
+				max: "100",
+				onInput: a[1] ||= (e) => r("update", { height: Number(e.target.value) })
+			}, null, 40, Qo)
+		]));
+	}
+}), es = { class: "tpl:mb-3.5" }, ts = { class: "tpl:flex tpl:items-center tpl:gap-3" }, ns = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, rs = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, is = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, as = ["disabled"], os = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, ss = { class: "tpl:flex tpl:flex-1 tpl:items-center tpl:gap-1.5" }, cs = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, ls = { class: "tpl:flex tpl:items-center tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, us = ["disabled"], ds = { class: "tpl:min-w-[20px] tpl:text-center tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, fs = { class: "tpl:mb-3.5" }, ps = { class: "tpl:mb-1.5 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, ms = ["checked"], hs = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, gs = { class: "tpl:mb-3.5" }, _s = { class: "tpl:mb-3.5" }, vs = { class: "tpl:flex tpl:items-stretch" }, ys = ["value"], bs = { class: "tpl:mb-3.5" }, xs = { class: "tpl:flex tpl:items-stretch" }, Ss = ["value"], Cs = { class: "tpl:mb-3.5" }, ws = ["value"], Ts = { value: "" }, Es = ["value"], Ds = { class: "tpl:mb-3.5" }, Os = { class: "tpl:flex tpl:items-stretch" }, ks = ["value"], As = { class: "tpl:mb-3.5" }, js = { class: "tpl:mb-3.5" }, Ms = /* @__PURE__ */ f({
+	__name: "TableToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, { t: o } = U(), l = C(() => i.block.rows.length > 0 ? i.block.rows[0].cells.length : 0);
+		function u(e, t) {
+			a("update", { [e]: t });
+		}
+		function d() {
+			let e = i.block.rows.length > 0 ? i.block.rows[0].cells.length : 3, t = {
+				id: P(),
+				cells: Array.from({ length: e }, () => ({
+					id: P(),
+					content: ""
+				}))
+			};
+			a("update", { rows: [...i.block.rows, t] });
+		}
+		function f(e) {
+			a("update", { rows: i.block.rows.filter((t) => t.id !== e) });
+		}
+		function h() {
+			let e = i.block.rows.map((e) => ({
+				...e,
+				cells: [...e.cells, {
+					id: P(),
+					content: ""
+				}]
+			}));
+			a("update", { rows: e });
+		}
+		function _(e) {
+			let t = i.block.rows.map((t) => ({
+				...t,
+				cells: t.cells.filter((t, n) => n !== e)
+			}));
+			a("update", { rows: t });
+		}
+		return (r, i) => (s(), m(S, null, [
+			p("div", es, [p("label", { class: n(b(K)) }, c(b(o).table.dimensions), 3), p("div", ts, [p("div", ns, [p("span", rs, c(b(o).table.rows), 1), p("div", is, [
+				p("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:duration-150 tpl:hover:text-[var(--tpl-primary)] tpl:disabled:opacity-30",
+					disabled: t.block.rows.length <= 1,
+					onClick: i[0] ||= (e) => f(t.block.rows[t.block.rows.length - 1].id)
+				}, [g(b(et), {
+					size: 12,
+					"stroke-width": 2
+				})], 8, as),
+				p("span", os, c(t.block.rows.length), 1),
+				p("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:duration-150 tpl:hover:text-[var(--tpl-primary)]",
+					onClick: d
+				}, [g(b(Q), {
+					size: 12,
+					"stroke-width": 2
+				})])
+			])]), p("div", ss, [p("span", cs, c(b(o).table.columns), 1), p("div", ls, [
+				p("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:duration-150 tpl:hover:text-[var(--tpl-primary)] tpl:disabled:opacity-30",
+					disabled: l.value <= 1,
+					onClick: i[1] ||= (e) => _(l.value - 1)
+				}, [g(b(et), {
+					size: 12,
+					"stroke-width": 2
+				})], 8, us),
+				p("span", ds, c(l.value), 1),
+				p("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:duration-150 tpl:hover:text-[var(--tpl-primary)]",
+					onClick: h
+				}, [g(b(Q), {
+					size: 12,
+					"stroke-width": 2
+				})])
+			])])])]),
+			p("div", fs, [p("label", ps, [p("input", {
+				type: "checkbox",
+				checked: t.block.hasHeaderRow,
+				class: "tpl:accent-[var(--tpl-primary)]",
+				onChange: i[2] ||= (e) => u("hasHeaderRow", e.target.checked)
+			}, null, 40, ms), y(" " + c(b(o).table.hasHeaderRow), 1)])]),
+			t.block.hasHeaderRow ? (s(), m("div", hs, [p("label", { class: n(b(K)) }, c(b(o).table.headerBackgroundColor), 3), g(Y, {
+				"model-value": t.block.headerBackgroundColor ?? "",
+				"seed-color": b(Dt),
+				placeholder: b(o).table.noHeaderBg,
+				"onUpdate:modelValue": i[3] ||= (e) => u("headerBackgroundColor", e || null)
+			}, null, 8, [
+				"model-value",
+				"seed-color",
+				"placeholder"
+			])])) : w("", !0),
+			p("div", gs, [p("label", { class: n(b(K)) }, c(b(o).table.borderColor), 3), g(Y, {
+				"model-value": t.block.borderColor,
+				"onUpdate:modelValue": i[4] ||= (e) => u("borderColor", e)
+			}, null, 8, ["model-value"])]),
+			p("div", _s, [p("label", { class: n(b(K)) }, c(b(o).table.borderWidth), 3), p("div", vs, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.borderWidth,
+				min: "0",
+				max: "10",
+				onInput: i[5] ||= (e) => u("borderWidth", Number(e.target.value))
+			}, null, 42, ys), p("span", { class: n(b(q)) }, "px", 2)])]),
+			p("div", bs, [p("label", { class: n(b(K)) }, c(b(o).table.cellPadding), 3), p("div", xs, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.cellPadding,
+				min: "0",
+				max: "30",
+				onInput: i[6] ||= (e) => u("cellPadding", Number(e.target.value))
+			}, null, 42, Ss), p("span", { class: n(b(q)) }, "px", 2)])]),
+			p("div", Cs, [p("label", { class: n(b(K)) }, c(b(o).table.fontFamily), 3), p("select", {
+				class: n(b(G)),
+				value: t.block.fontFamily || "",
+				onChange: i[7] ||= (e) => u("fontFamily", e.target.value || void 0)
+			}, [p("option", Ts, c(b(o).title.inheritFont), 1), (s(!0), m(S, null, e(t.fontFamilies, (e) => (s(), m("option", {
+				key: e.value,
+				value: e.value
+			}, c(e.label), 9, Es))), 128))], 42, ws)]),
+			p("div", Ds, [p("label", { class: n(b(K)) }, c(b(o).table.fontSize), 3), p("div", Os, [p("input", {
+				type: "number",
+				class: n(b(J)),
+				value: t.block.fontSize,
+				min: "10",
+				max: "32",
+				onInput: i[8] ||= (e) => u("fontSize", Number(e.target.value))
+			}, null, 42, ks), p("span", { class: n(b(q)) }, "px", 2)])]),
+			p("div", As, [p("label", { class: n(b(K)) }, c(b(o).table.color), 3), g(Y, {
+				"model-value": t.block.color,
+				"onUpdate:modelValue": i[9] ||= (e) => u("color", e)
+			}, null, 8, ["model-value"])]),
+			p("div", js, [p("label", { class: n(b(K)) }, c(b(o).table.textAlign), 3), g(Z, {
+				options: [
+					{
+						value: "left",
+						label: b(o).title.alignLeft,
+						icon: b(pt)
+					},
+					{
+						value: "center",
+						label: b(o).title.alignCenter,
+						icon: b(dt)
+					},
+					{
+						value: "right",
+						label: b(o).title.alignRight,
+						icon: b(ft)
+					}
+				],
+				"model-value": t.block.textAlign,
+				"onUpdate:modelValue": i[10] ||= (e) => u("textAlign", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), Ns = { class: "tpl:mb-3.5" }, Ps = ["value"], Fs = { value: 1 }, Is = { value: 2 }, Ls = { value: 3 }, Rs = { value: 4 }, zs = { class: "tpl:mb-3.5" }, Bs = ["value"], Vs = { value: "" }, Hs = ["value"], Us = { class: "tpl:mb-3.5" }, Ws = { class: "tpl:mb-3.5" }, Gs = /* @__PURE__ */ f({
+	__name: "TitleToolbar",
+	props: {
+		block: {},
+		fontFamilies: {}
+	},
+	emits: ["update"],
+	setup(t, { emit: r }) {
+		let i = r, { t: a } = U();
+		function o(e, t) {
+			i("update", { [e]: t });
+		}
+		return (r, i) => (s(), m(S, null, [
+			p("div", Ns, [p("label", { class: n(b(K)) }, c(b(a).title.level), 3), p("select", {
+				class: n(b(G)),
+				value: t.block.level,
+				onChange: i[0] ||= (e) => o("level", Number(e.target.value))
+			}, [
+				p("option", Fs, c(b(a).title.heading1), 1),
+				p("option", Is, c(b(a).title.heading2), 1),
+				p("option", Ls, c(b(a).title.heading3), 1),
+				p("option", Rs, c(b(a).title.heading4), 1)
+			], 42, Ps)]),
+			p("div", zs, [p("label", { class: n(b(K)) }, c(b(a).title.fontFamily), 3), p("select", {
+				class: n(b(G)),
+				value: t.block.fontFamily || "",
+				onChange: i[1] ||= (e) => o("fontFamily", e.target.value || void 0)
+			}, [p("option", Vs, c(b(a).title.inheritFont), 1), (s(!0), m(S, null, e(t.fontFamilies, (e) => (s(), m("option", {
+				key: e.value,
+				value: e.value
+			}, c(e.label), 9, Hs))), 128))], 42, Bs)]),
+			p("div", Us, [p("label", { class: n(b(K)) }, c(b(a).title.color), 3), g(Y, {
+				"model-value": t.block.color,
+				"onUpdate:modelValue": i[2] ||= (e) => o("color", e)
+			}, null, 8, ["model-value"])]),
+			p("div", Ws, [p("label", { class: n(b(K)) }, c(b(a).title.align), 3), g(Z, {
+				options: [
+					{
+						value: "left",
+						label: b(a).title.alignLeft,
+						icon: b(pt)
+					},
+					{
+						value: "center",
+						label: b(a).title.alignCenter,
+						icon: b(dt)
+					},
+					{
+						value: "right",
+						label: b(a).title.alignRight,
+						icon: b(ft)
+					}
+				],
+				"model-value": t.block.textAlign,
+				"onUpdate:modelValue": i[3] ||= (e) => o("textAlign", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), Ks = { class: "tpl:mb-3.5" }, qs = {
+	key: 0,
+	class: "tpl:mt-2 tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text-muted)]"
+}, Js = ["checked"], Ys = {
+	key: 0,
+	class: "tpl:mb-3.5"
+}, Xs = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, Zs = [
+	"value",
+	"placeholder",
+	"title"
+], Qs = { class: "tpl:mb-3.5" }, $s = { class: "tpl:font-normal tpl:text-[var(--tpl-text-dim)]" }, ec = { class: "tpl:mb-3.5" }, tc = { class: "tpl:mb-3.5" }, nc = ["value"], rc = { value: "full" }, ic = { class: "tpl:mb-3.5" }, ac = /* @__PURE__ */ f({
+	__name: "VideoToolbar",
+	props: { block: {} },
+	emits: ["update"],
+	setup(e, { emit: t }) {
+		let r = e, i = t, { t: a } = U(), o = E(Ae, null), l = E(Ie, B.liquid), u = bt(), f = C(() => !!o), h = C(() => z(r.block.url, l)), _ = d(!1), { start: v } = ke(() => {
+			_.value = !1;
+		}, 1e3, { immediate: !1 });
+		function x(e, t) {
+			i("update", { [e]: t });
+		}
+		async function T() {
+			let e = await o?.({ accept: ["images"] });
+			u.alive && e && (x("thumbnailUrl", e.url), _.value = !0, v());
+		}
+		return (t, r) => (s(), m(S, null, [
+			p("div", Ks, [
+				p("label", { class: n(b(K)) }, c(b(a).video.videoUrl), 3),
+				g($, {
+					"model-value": e.block.url,
+					type: "url",
+					placeholder: b(a).video.videoUrlPlaceholder,
+					"onUpdate:modelValue": r[0] ||= (e) => x("url", e)
+				}, null, 8, ["model-value", "placeholder"]),
+				e.block.url ? (s(), m("label", qs, [p("input", {
+					type: "checkbox",
+					class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
+					checked: e.block.openInNewTab ?? !1,
+					onChange: r[1] ||= (e) => x("openInNewTab", e.target.checked)
+				}, null, 40, Js), y(" " + c(b(a).video.openInNewTab), 1)])) : w("", !0)
+			]),
+			h.value ? (s(), m("div", Ys, [p("label", { class: n(b(K)) }, [y(c(b(a).video.placeholderUrl) + " ", 1), p("span", Xs, c(b(a).video.optional), 1)], 2), p("input", {
+				type: "url",
+				class: n(b(G)),
+				value: e.block.placeholderUrl || "",
+				placeholder: b(a).video.placeholderUrlPlaceholder,
+				title: b(a).video.placeholderUrlTooltip,
+				onInput: r[2] ||= (e) => x("placeholderUrl", e.target.value)
+			}, null, 42, Zs)])) : w("", !0),
+			p("div", Qs, [
+				p("label", { class: n(b(K)) }, [y(c(b(a).video.customThumbnail) + " ", 1), p("span", $s, c(b(a).video.optional), 1)], 2),
+				g($, {
+					"model-value": e.block.thumbnailUrl,
+					type: "url",
+					placeholder: b(a).video.thumbnailPlaceholder,
+					pulse: _.value,
+					"onUpdate:modelValue": r[3] ||= (e) => x("thumbnailUrl", e)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"pulse"
+				]),
+				f.value ? (s(), m("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 tpl:duration-150",
+					style: {
+						"border-color": "var(--tpl-border)",
+						color: "var(--tpl-primary)",
+						"background-color": "var(--tpl-bg)"
+					},
+					onClick: T
+				}, [g(b(_e), {
+					size: 14,
+					"stroke-width": 1.5
+				}), y(" " + c(b(a).image.browseMedia), 1)])) : w("", !0)
+			]),
+			p("div", ec, [p("label", { class: n(b(K)) }, c(b(a).video.altText), 3), g($, {
+				"model-value": e.block.alt,
+				type: "text",
+				placeholder: b(a).video.altTextPlaceholder,
+				"onUpdate:modelValue": r[4] ||= (e) => x("alt", e)
+			}, null, 8, ["model-value", "placeholder"])]),
+			p("div", tc, [p("label", { class: n(b(K)) }, c(b(a).video.width), 3), p("select", {
+				class: n(b(G)),
+				value: e.block.width,
+				onChange: r[5] ||= (e) => x("width", e.target.value === "full" ? "full" : Number(e.target.value))
+			}, [
+				p("option", rc, c(b(a).video.fullWidth), 1),
+				r[7] ||= p("option", { value: "300" }, "300px", -1),
+				r[8] ||= p("option", { value: "400" }, "400px", -1),
+				r[9] ||= p("option", { value: "500" }, "500px", -1)
+			], 42, nc)]),
+			p("div", ic, [p("label", { class: n(b(K)) }, c(b(a).title.align), 3), g(Z, {
+				options: [
+					{
+						value: "left",
+						label: b(a).title.alignLeft
+					},
+					{
+						value: "center",
+						label: b(a).title.alignCenter
+					},
+					{
+						value: "right",
+						label: b(a).title.alignRight
+					}
+				],
+				"model-value": e.block.align,
+				"onUpdate:modelValue": r[6] ||= (e) => x("align", e)
+			}, null, 8, ["options", "model-value"])])
+		], 64));
+	}
+}), oc = ["aria-label"], sc = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3.5" }, cc = { class: "tpl:flex tpl:items-center tpl:gap-2 tpl:text-[var(--tpl-primary)]" }, lc = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, uc = { class: "tpl:flex tpl:gap-1" }, dc = ["title"], fc = ["title"], pc = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, mc = /*#__PURE__*/ _t(/* @__PURE__ */ f({
+	__name: "Toolbar",
+	props: { block: {} },
+	emits: [
+		"update",
+		"delete",
+		"duplicate"
+	],
+	setup(e, { emit: t }) {
+		let n = h(() => import("./CountdownToolbar-CS0axcjz.js")), r = e, i = t, { t: a } = U(), l = Ne(Be, "Toolbar"), u = E(Re, []), d = C(() => r.block.type), f = C(() => L(r.block)), _ = C(() => {
+			if (f.value) return u.find((e) => e.type === r.block.customType);
+		}), y = C(() => f.value ? _.value?.name ?? r.block.customType : ie(d.value, a)), x = l.fonts;
+		function T(e) {
+			i("update", e);
+		}
+		return (t, r) => (s(), m("aside", {
+			"aria-label": b(a).landmarks.blockToolbar,
+			class: "tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]"
+		}, [p("div", sc, [p("div", cc, [b(rt)[d.value] ? (s(), v(o(b(rt)[d.value]), {
+			key: 0,
+			size: 16,
+			"stroke-width": 1.5
+		})) : f.value ? (s(), v(b(se), {
+			key: 1,
+			size: 16,
+			"stroke-width": 1.5
+		})) : w("", !0), p("h3", lc, c(y.value), 1)]), p("div", uc, [p("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:duration-150 tpl:hover:bg-[var(--tpl-bg-active)] tpl:hover:text-[var(--tpl-text)]",
+			title: b(a).toolbar.duplicate,
+			onClick: r[0] ||= (e) => i("duplicate")
+		}, [g(b(oe), {
+			size: 14,
+			"stroke-width": 2
+		})], 8, dc), p("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:duration-150 tpl:hover:border-[var(--tpl-danger)] tpl:hover:bg-[var(--tpl-danger-light)] tpl:hover:text-[var(--tpl-danger)]",
+			title: b(a).toolbar.delete,
+			onClick: r[1] ||= (e) => i("delete")
+		}, [g(b(mt), {
+			size: 14,
+			"stroke-width": 2
+		})], 8, fc)])]), p("div", pc, [f.value ? (s(), v(Ta, {
+			key: 0,
+			block: e.block,
+			onUpdateFieldValues: r[2] ||= (e) => i("update", { fieldValues: e }),
+			onUpdateDataSourceFetched: r[3] ||= (e) => i("update", { dataSourceFetched: e })
+		}, null, 8, ["block"])) : d.value === "section" ? (s(), v(ko, {
+			key: 1,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "title" ? (s(), v(Gs, {
+			key: 2,
+			block: e.block,
+			"font-families": b(x),
+			onUpdate: T
+		}, null, 8, ["block", "font-families"])) : d.value === "paragraph" ? (s(), m(S, { key: 3 }, [], 64)) : d.value === "image" ? (s(), v(to, {
+			key: 4,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "video" ? (s(), v(ac, {
+			key: 5,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "button" ? (s(), v(Yr, {
+			key: 6,
+			block: e.block,
+			"font-families": b(x),
+			onUpdate: T
+		}, null, 8, ["block", "font-families"])) : d.value === "divider" ? (s(), v(ja, {
+			key: 7,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "social" ? (s(), v(Jo, {
+			key: 8,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "menu" ? (s(), v(mo, {
+			key: 9,
+			block: e.block,
+			"font-families": b(x),
+			onUpdate: T
+		}, null, 8, ["block", "font-families"])) : d.value === "table" ? (s(), v(Ms, {
+			key: 10,
+			block: e.block,
+			"font-families": b(x),
+			onUpdate: T
+		}, null, 8, ["block", "font-families"])) : d.value === "spacer" ? (s(), v($o, {
+			key: 11,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "html" ? (s(), v(Fa, {
+			key: 12,
+			block: e.block,
+			onUpdate: T
+		}, null, 8, ["block"])) : d.value === "countdown" ? (s(), v(b(n), {
+			key: 13,
+			block: e.block,
+			"font-families": b(x),
+			onUpdate: T
+		}, null, 8, ["block", "font-families"])) : w("", !0), g(Bi, {
+			block: e.block,
+			"is-first-section": d.value === "paragraph",
+			onUpdate: T
+		}, null, 8, ["block", "is-first-section"])])], 8, oc));
+	}
+}), [["__scopeId", "data-v-2ac88283"]]), hc = ["aria-label"], gc = {
+	role: "tablist",
+	class: "tpl:relative tpl:flex tpl:gap-1 tpl:border-b tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-active)] tpl:p-1.5"
+}, _c = [
+	"aria-selected",
+	"aria-label",
+	"title"
+], vc = { key: 0 }, yc = [
+	"aria-selected",
+	"aria-label",
+	"title"
+], bc = { key: 0 }, xc = [
+	"aria-selected",
+	"aria-label",
+	"title"
+], Sc = { key: 0 }, Cc = {
+	key: 1,
+	class: "tpl:ml-1 tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-1.5 tpl:text-[10px]"
+}, wc = {
+	key: 0,
+	id: "tpl-tabpanel-content",
+	role: "tabpanel",
+	"aria-labelledby": "tpl-tab-content",
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
+}, Tc = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:px-6 tpl:py-10 tpl:text-center tpl:text-[var(--tpl-text-muted)]"
+}, Ec = { class: "tpl:mb-4 tpl:text-[var(--tpl-text-dim)]" }, Dc = { class: "tpl:m-0 tpl:mb-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Oc = { class: "tpl:m-0 tpl:text-sm tpl:leading-normal" }, kc = {
+	key: 1,
+	id: "tpl-tabpanel-settings",
+	role: "tabpanel",
+	"aria-labelledby": "tpl-tab-settings",
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
+}, Ac = {
+	key: 2,
+	id: "tpl-tabpanel-issues",
+	role: "tabpanel",
+	"aria-labelledby": "tpl-tab-issues",
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-y-auto"
+}, jc = /* @__PURE__ */ f({
+	__name: "RightSidebar",
+	props: {
+		selectedBlock: {},
+		settings: {},
+		shiftedLeft: { type: Boolean }
+	},
+	emits: [
+		"update-block",
+		"delete-block",
+		"duplicate-block",
+		"update-settings"
+	],
+	setup(e, { emit: r }) {
+		let a = h(() => import("./IssuesPanel-CR1MPaDE.js")), o = e, l = r, { t: u } = U(), f = d("content"), _ = E(Pe, null), y = C(() => _ !== null), x = C(() => _?.issues.value.length ?? 0);
+		function S(e) {
+			return f.value === e ? "tpl:flex-1 tpl:text-[var(--tpl-primary)]" : "tpl:shrink-0 tpl:text-[var(--tpl-text-muted)] hover:tpl:text-[var(--tpl-text)]";
+		}
+		function T(e) {
+			return f.value === e ? {
+				backgroundColor: "var(--tpl-bg)",
+				boxShadow: "var(--tpl-shadow-md)"
+			} : { backgroundColor: "transparent" };
+		}
+		return i(() => o.selectedBlock, (e) => {
+			e && (f.value = "content");
+		}), (r, i) => (s(), m("aside", {
+			"aria-label": b(u).landmarks.rightSidebar,
+			class: n(["tpl-right-sidebar tpl:absolute tpl:top-14 tpl:bottom-0 tpl:z-40 tpl:flex tpl:w-[320px] tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)] tpl:transition-all tpl:duration-200 tpl:border-l tpl:border-[var(--tpl-border)]", e.shiftedLeft ? "tpl:right-[360px]" : "tpl:right-0"])
+		}, [
+			p("div", gc, [
+				p("button", {
+					id: "tpl-tab-content",
+					role: "tab",
+					"aria-selected": f.value === "content",
+					"aria-controls": "tpl-tabpanel-content",
+					"aria-label": b(u).sidebar.content,
+					title: b(u).sidebar.content,
+					class: n(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", S("content")]),
+					style: t(T("content")),
+					onClick: i[0] ||= (e) => f.value = "content"
+				}, [g(b(Vt), {
+					size: 14,
+					"stroke-width": 2
+				}), f.value === "content" ? (s(), m("span", vc, c(b(u).sidebar.content), 1)) : w("", !0)], 14, _c),
+				p("button", {
+					id: "tpl-tab-settings",
+					role: "tab",
+					"aria-selected": f.value === "settings",
+					"aria-controls": "tpl-tabpanel-settings",
+					"aria-label": b(u).sidebar.settings,
+					title: b(u).sidebar.settings,
+					class: n(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", S("settings")]),
+					style: t(T("settings")),
+					onClick: i[1] ||= (e) => f.value = "settings"
+				}, [g(b(Ut), {
+					size: 14,
+					"stroke-width": 1.5
+				}), f.value === "settings" ? (s(), m("span", bc, c(b(u).sidebar.settings), 1)) : w("", !0)], 14, yc),
+				y.value ? (s(), m("button", {
+					key: 0,
+					id: "tpl-tab-issues",
+					role: "tab",
+					"aria-selected": f.value === "issues",
+					"aria-controls": "tpl-tabpanel-issues",
+					"aria-label": b(u).issues.panelTabLabel,
+					title: b(u).issues.panelTabLabel,
+					class: n(["tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]", S("issues")]),
+					style: t(T("issues")),
+					onClick: i[2] ||= (e) => f.value = "issues"
+				}, [
+					g(b(ct), {
+						size: 14,
+						"stroke-width": 1.5
+					}),
+					f.value === "issues" ? (s(), m("span", Sc, c(b(u).issues.panelTabLabel), 1)) : w("", !0),
+					x.value > 0 ? (s(), m("span", Cc, c(x.value), 1)) : w("", !0)
+				], 14, xc)) : w("", !0)
+			]),
+			f.value === "content" ? (s(), m("div", wc, [e.selectedBlock ? (s(), v(mc, {
+				key: 0,
+				block: e.selectedBlock,
+				onUpdate: i[3] ||= (e) => l("update-block", e),
+				onDelete: i[4] ||= (e) => l("delete-block"),
+				onDuplicate: i[5] ||= (e) => l("duplicate-block")
+			}, null, 8, ["block"])) : (s(), m("div", Tc, [
+				p("div", Ec, [g(b(It), {
+					size: 40,
+					"stroke-width": 1.5
+				})]),
+				p("h3", Dc, c(b(u).sidebar.noSelection), 1),
+				p("p", Oc, c(b(u).sidebar.noSelectionHint), 1)
+			]))])) : w("", !0),
+			f.value === "settings" ? (s(), m("div", kc, [g(_r, {
+				settings: e.settings,
+				onUpdate: i[6] ||= (e) => l("update-settings", e)
+			}, null, 8, ["settings"])])) : w("", !0),
+			f.value === "issues" && y.value ? (s(), m("div", Ac, [g(b(a))])) : w("", !0)
+		], 10, hc));
+	}
+}), Mc = {
+	class: "tpl-small-screen-notice tpl:absolute tpl:inset-0 tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-4 tpl:px-6 tpl:py-10 tpl:text-center tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)]",
+	style: { "z-index": "10001" },
+	role: "status",
+	"data-testid": "small-screen-notice"
+}, Nc = { class: "tpl:text-[var(--tpl-text-dim)]" }, Pc = { class: "tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]" }, Fc = { class: "tpl:m-0 tpl:max-w-sm tpl:text-sm tpl:leading-normal" }, Ic = /* @__PURE__ */ f({
+	__name: "SmallScreenNotice",
+	setup(e) {
+		let { t } = U();
+		return (e, n) => (s(), m("div", Mc, [
+			p("div", Nc, [g(b(zt), {
+				size: 48,
+				"stroke-width": 1.5
+			})]),
+			p("h2", Pc, c(b(t).smallScreen.title), 1),
+			p("p", Fc, c(b(t).smallScreen.message), 1)
+		]));
+	}
+}), Lc = ["aria-label"], Rc = [
+	"aria-checked",
+	"aria-label",
+	"title",
+	"onClick"
+], zc = /* @__PURE__ */ f({
+	__name: "ViewportToggle",
+	props: { viewport: {} },
+	emits: ["change"],
+	setup(n, { emit: r }) {
+		let i = n, a = r, { t: o } = U(), l = C(() => [{
+			value: "desktop",
+			label: o.viewport.desktop
+		}, {
+			value: "mobile",
+			label: o.viewport.mobile
+		}]), u = C(() => `translateX(${l.value.findIndex((e) => e.value === i.viewport) * 100}%)`);
+		return (r, i) => (s(), m("div", {
+			role: "radiogroup",
+			"aria-label": b(o).viewport.label,
+			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
+			style: t({
+				gridTemplateColumns: `repeat(${l.value.length}, 1fr)`,
+				backgroundColor: "var(--tpl-bg-hover)"
+			})
+		}, [p("div", {
+			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
+			style: t({
+				left: "4px",
+				width: `calc((100% - 8px) / ${l.value.length})`,
+				transform: u.value,
+				backgroundColor: "var(--tpl-bg)",
+				boxShadow: "var(--tpl-shadow)",
+				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
+			})
+		}, null, 4), (s(!0), m(S, null, e(l.value, (e) => (s(), m("button", {
+			key: e.value,
+			role: "radio",
+			"aria-checked": n.viewport === 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.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium",
+			style: t({
+				color: n.viewport === 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) => a("change", e.value)
+		}, [e.value === "desktop" ? (s(), v(b(zt), {
+			key: 0,
+			size: 18,
+			"stroke-width": 1.5
+		})) : (s(), v(b(Wt), {
+			key: 1,
+			size: 18,
+			"stroke-width": 1.5
+		})), p("span", null, c(e.label), 1)], 12, Rc))), 128))], 12, Lc));
+	}
+}), Bc = [
+	"aria-label",
+	"title",
+	"aria-pressed"
+], Vc = /*#__PURE__*/ _t(/* @__PURE__ */ f({
+	__name: "PreviewToggle",
+	props: { previewMode: { type: Boolean } },
+	emits: ["change"],
+	setup(e, { emit: n }) {
+		let r = n, { t: i } = U();
+		return (n, a) => (s(), m("button", {
+			class: "tpl-preview-toggle tpl:relative tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:p-2 tpl:transition-all tpl:duration-150",
+			style: t({
+				color: e.previewMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+				backgroundColor: e.previewMode ? "var(--tpl-primary-light)" : "transparent"
+			}),
+			"aria-label": e.previewMode ? b(i).previewMode.disable : b(i).previewMode.enable,
+			title: e.previewMode ? b(i).previewMode.disable : b(i).previewMode.enable,
+			"aria-pressed": e.previewMode,
+			onClick: a[0] ||= (t) => r("change", !e.previewMode)
+		}, [g(N, {
+			"enter-active-class": "tpl-icon-enter-active",
+			"leave-active-class": "tpl-icon-leave-active",
+			"enter-from-class": "tpl-icon-enter-from",
+			"leave-to-class": "tpl-icon-leave-to",
+			mode: "out-in"
+		}, {
+			default: l(() => [e.previewMode ? (s(), v(b(it), {
+				key: "eye",
+				size: 18,
+				"stroke-width": 1.5
+			})) : (s(), v(b(ae), {
+				key: "eye-off",
+				size: 18,
+				"stroke-width": 1.5
+			}))]),
+			_: 1
+		})], 12, Bc));
+	}
+}), [["__scopeId", "data-v-af87d02a"]]), Hc = [
+	"aria-label",
+	"title",
+	"aria-pressed"
+], Uc = /*#__PURE__*/ _t(/* @__PURE__ */ f({
+	__name: "DarkModeToggle",
+	props: { darkMode: { type: Boolean } },
+	emits: ["change"],
+	setup(e, { emit: n }) {
+		let r = n, { t: i } = U();
+		return (n, a) => (s(), m("button", {
+			class: "tpl-dark-mode-toggle tpl:relative tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:p-2 tpl:transition-all tpl:duration-150",
+			style: t({
+				color: e.darkMode ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+				backgroundColor: e.darkMode ? "var(--tpl-primary-light)" : "transparent"
+			}),
+			"aria-label": e.darkMode ? b(i).darkMode.disable : b(i).darkMode.enable,
+			title: e.darkMode ? b(i).darkMode.disable : b(i).darkMode.enable,
+			"aria-pressed": e.darkMode,
+			onClick: a[0] ||= (t) => r("change", !e.darkMode)
+		}, [g(N, {
+			"enter-active-class": "tpl-icon-enter-active",
+			"leave-active-class": "tpl-icon-leave-active",
+			"enter-from-class": "tpl-icon-enter-from",
+			"leave-to-class": "tpl-icon-leave-to",
+			mode: "out-in"
+		}, {
+			default: l(() => [e.darkMode ? (s(), v(b(Bt), {
+				key: "moon",
+				size: 18,
+				"stroke-width": 1.5
+			})) : (s(), v(b(qt), {
+				key: "sun",
+				size: 18,
+				"stroke-width": 1.5
+			}))]),
+			_: 1
+		})], 12, Hc));
+	}
+}), [["__scopeId", "data-v-f8694f76"]]), Wc = {
+	class: "tpl:pointer-events-auto tpl:flex tpl:items-center tpl:gap-1.5 tpl:rounded-tl-lg tpl:p-1",
+	style: {
+		"background-color": "color-mix(\n          in srgb,\n          var(--tpl-canvas-bg) 85%,\n          transparent\n        )",
+		"backdrop-filter": "blur(8px)",
+		"-webkit-backdrop-filter": "blur(8px)"
+	}
+}, Gc = {
+	href: "https://github.com/templatical/sdk",
+	target: "_blank",
+	rel: "noopener noreferrer",
+	class: "tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-dim)]",
+	style: { "text-decoration": "none" }
+}, Kc = /* @__PURE__ */ f({
+	__name: "EditorFooter",
+	props: { positionClass: {} },
+	setup(e) {
+		let { t } = U();
+		return (r, i) => (s(), m("footer", { class: n(["tpl:pointer-events-none tpl:absolute tpl:bottom-0 tpl:z-50 tpl:flex tpl:h-8 tpl:items-center tpl:justify-end tpl:pr-4 tpl:text-[9px] tpl:opacity-90 tpl:transition-all tpl:duration-300 tpl:text-[var(--tpl-text-dim)]", e.positionClass]) }, [p("div", Wc, [
+			p("span", null, c(b(t).footer.poweredBy), 1),
+			i[0] ||= p("a", {
+				href: "https://templatical.com",
+				target: "_blank",
+				rel: "noopener noreferrer",
+				class: "tpl:inline-flex tpl:items-center tpl:gap-1 tpl:font-medium tpl:transition-colors tpl:duration-150 hover:tpl:opacity-80 tpl:text-[var(--tpl-text-muted)]",
+				style: { "text-decoration": "none" }
+			}, [p("img", {
+				width: "14",
+				height: "14",
+				src: "https://templatical.com/logo.svg",
+				alt: ""
+			}), y(" Templatical ")], -1),
+			i[1] ||= p("span", { class: "tpl:text-[var(--tpl-border)]" }, "·", -1),
+			p("a", Gc, c(b(t).footer.openSource), 1)
+		])], 2));
+	}
+}), qc = ["aria-labelledby", "data-tpl-theme"], Jc = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:gap-3 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, Yc = ["id"], Xc = ["aria-label"], Zc = { class: "tpl:relative tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, Qc = [
+	"id",
+	"placeholder",
+	"aria-label",
+	"aria-activedescendant"
+], $c = {
+	key: 0,
+	class: "tpl:flex tpl:gap-1.5 tpl:overflow-x-auto tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2",
+	"data-testid": "merge-tag-picker-group-pills"
+}, el = ["data-group-name", "onClick"], tl = ["aria-label"], nl = {
+	key: 0,
+	class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
+	"data-testid": "merge-tag-picker-empty"
+}, rl = {
+	key: 1,
+	class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
+	"data-testid": "merge-tag-picker-empty"
+}, il = [
+	"aria-expanded",
+	"data-group-name",
+	"data-group-collapsed",
+	"onClick"
+], al = { class: "tpl:ml-1 tpl:font-normal" }, ol = [
+	"id",
+	"aria-selected",
+	"data-selected",
+	"data-merge-tag-index",
+	"data-merge-tag-value",
+	"title",
+	"onMousemove",
+	"onClick"
+], sl = { class: "tpl:text-sm tpl:font-medium" }, cl = { class: "tpl:line-clamp-2 tpl:font-mono tpl:text-xs tpl:text-ellipsis tpl:break-all tpl:text-[var(--tpl-text-dim)]" }, ll = {
+	key: 0,
+	class: "tpl:line-clamp-2 tpl:text-xs tpl:text-ellipsis tpl:text-[var(--tpl-text-dim)]"
+}, ul = "tpl-merge-tag-picker-list", dl = /* @__PURE__ */ f({
+	__name: "MergeTagPickerModal",
+	setup(r) {
+		let a = Ne(Je, "MergeTagPickerModal"), { t: o, format: u } = U(), f = E(Fe, null), h = E(Me, null), _ = d(""), y = Oe(_, 200), x = d(null), D = C(() => y.value.trim().length > 0), j = d(0), N = C(() => a.tags.value.some((e) => !!e.group)), P = d(/* @__PURE__ */ new Set());
+		function F(e) {
+			return P.value.has(e);
+		}
+		function I(e) {
+			let t = new Set(P.value);
+			t.has(e) ? t.delete(e) : t.add(e), P.value = t, j.value = 0;
+		}
+		let L = C(() => {
+			let e = y.value.trim().toLowerCase();
+			return e ? a.tags.value.filter((t) => [
+				t.label,
+				t.value,
+				t.description ?? ""
+			].join(" ").toLowerCase().includes(e)) : a.tags.value;
+		}), R = C(() => {
+			if (!N.value) return [];
+			let e = o.mergeTag.picker.otherGroup, t = /* @__PURE__ */ new Set(), n = [];
+			for (let r of a.tags.value) {
+				let i = r.group ?? e;
+				t.has(i) || (t.add(i), n.push(i));
+			}
+			return n;
+		}), z = C(() => {
+			let e = L.value;
+			if (!N.value || D.value) return e.map((e, t) => ({
+				kind: "tag",
+				tag: e,
+				index: t
+			}));
+			let t = o.mergeTag.picker.otherGroup, n = /* @__PURE__ */ new Map(), r = [];
+			for (let i of e) {
+				let e = i.group ?? t;
+				n.has(e) || (n.set(e, []), r.push(e)), n.get(e).push(i);
+			}
+			let i = [], a = 0;
+			for (let e of r) {
+				let t = n.get(e);
+				if (i.push({
+					kind: "header",
+					group: e,
+					count: t.length
+				}), !P.value.has(e)) for (let e of t) i.push({
+					kind: "tag",
+					tag: e,
+					index: a
+				}), a++;
+			}
+			return i;
+		}), B = C(() => z.value.flatMap((e) => e.kind === "tag" ? [e.tag] : []));
+		i(() => a.isOpen.value, (e) => {
+			e && (_.value = "", j.value = 0, P.value = /* @__PURE__ */ new Set(), T(() => {
+				x.value?.focus();
+			}));
+		}), i(B, (e) => {
+			j.value >= e.length && (j.value = Math.max(0, e.length - 1));
+		});
+		function V(e) {
+			a.resolve(e);
+		}
+		function ee() {
+			a.resolve(null);
+		}
+		function te(e) {
+			if (B.value.length === 0) return;
+			let t = j.value + e;
+			j.value = Math.max(0, Math.min(B.value.length - 1, t)), ie();
+		}
+		let ne = d(null), re = d({});
+		function H(e, t) {
+			re.value[e] = t ?? null;
+		}
+		function ie() {
+			T(() => {
+				let e = ne.value;
+				e && e.querySelector(`[data-merge-tag-index="${j.value}"]`)?.scrollIntoView({ block: "nearest" });
+			});
+		}
+		function ae(e) {
+			if (P.value.has(e)) {
+				let t = new Set(P.value);
+				t.delete(e), P.value = t;
+			}
+			T(() => {
+				let t = ne.value;
+				if (!t) return;
+				let n = 0, r = !1;
+				for (let i of Array.from(t.children)) {
+					if (i.dataset.testid === "merge-tag-picker-group-header" && i.dataset.groupName === e) {
+						r = !0;
+						break;
+					}
+					n += i.offsetHeight;
+				}
+				r && t.scrollTo({
+					top: n,
+					behavior: "smooth"
+				});
+			});
+		}
+		function oe(e) {
+			if (e.key === "ArrowDown") e.preventDefault(), te(1);
+			else if (e.key === "ArrowUp") e.preventDefault(), te(-1);
+			else if (e.key === "Enter") {
+				e.preventDefault();
+				let t = B.value[j.value];
+				t && V(t);
+			}
+		}
+		function se() {
+			if (B.value.length !== 0) return `${ul}-opt-${j.value}`;
+		}
+		function ce(e) {
+			return `${ul}-opt-${e}`;
+		}
+		let le = C(() => a.tags.value.length === 0), ue = C(() => !le.value && L.value.length === 0), de = C(() => N.value && R.value.length > 1 && !D.value);
+		return (r, i) => (s(), v(Nt, {
+			visible: b(a).isOpen.value,
+			onClose: ee,
+			onKeydown: oe
+		}, {
+			default: l(() => [p("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": `${ul}-title`,
+				"data-tpl-theme": b(h),
+				"data-testid": "merge-tag-picker-modal",
+				class: "tpl tpl:flex tpl:max-h-[80vh] tpl:w-[min(420px,92vw)] tpl:flex-col tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:shadow-[var(--tpl-shadow-lg)]",
+				style: t(b(f))
+			}, [
+				p("header", Jc, [p("h2", {
+					id: `${ul}-title`,
+					class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+				}, c(b(o).mergeTag.picker.title), 9, Yc), p("button", {
+					type: "button",
+					class: "tpl:flex tpl:h-7 tpl:w-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
+					"aria-label": b(o).mergeTag.picker.close,
+					"data-testid": "merge-tag-picker-close",
+					onClick: ee
+				}, [g(b(gt), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, Xc)]),
+				p("div", Zc, [g(b(tt), {
+					class: "tpl:pointer-events-none tpl:absolute tpl:top-1/2 tpl:left-5 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]",
+					size: 14,
+					"stroke-width": 2
+				}), O(p("input", {
+					id: `${ul}-search`,
+					ref_key: "searchInputRef",
+					ref: x,
+					"onUpdate:modelValue": i[0] ||= (e) => _.value = e,
+					type: "text",
+					class: "tpl:w-full tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)]",
+					placeholder: b(o).mergeTag.picker.searchPlaceholder,
+					"aria-label": b(o).mergeTag.picker.searchAriaLabel,
+					"aria-controls": ul,
+					"aria-activedescendant": se(),
+					"data-testid": "merge-tag-picker-search",
+					onKeydown: i[1] ||= M(A(() => {}, ["prevent"]), ["enter"])
+				}, null, 40, Qc), [[k, _.value]])]),
+				de.value ? (s(), m("div", $c, [(s(!0), m(S, null, e(R.value, (e) => (s(), m("button", {
+					key: e,
+					type: "button",
+					class: "tpl:flex tpl:flex-shrink-0 tpl:cursor-pointer tpl:items-center tpl:rounded-full tpl:border tpl:border-[var(--tpl-border)] tpl:bg-transparent tpl:px-2.5 tpl:py-0.5 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
+					"data-testid": "merge-tag-picker-group-pill",
+					"data-group-name": e,
+					onClick: (t) => ae(e)
+				}, c(e), 9, el))), 128))])) : w("", !0),
+				p("div", {
+					id: ul,
+					ref_key: "listRef",
+					ref: ne,
+					class: "tpl:relative tpl:max-h-[60vh] tpl:flex-1 tpl:overflow-y-auto",
+					role: "listbox",
+					"aria-label": b(o).mergeTag.picker.title,
+					"data-testid": "merge-tag-picker-list"
+				}, [le.value ? (s(), m("div", nl, c(b(o).mergeTag.picker.empty), 1)) : ue.value ? (s(), m("div", rl, c(b(o).mergeTag.picker.noResults), 1)) : (s(!0), m(S, { key: 2 }, e(z.value, (e, t) => (s(), m(S, { key: t }, [e.kind === "header" ? (s(), m("button", {
+					key: 0,
+					ref_for: !0,
+					ref: (t) => H(e.group, t),
+					type: "button",
+					"aria-expanded": !F(e.group),
+					"aria-controls": ul,
+					class: "tpl:sticky tpl:top-0 tpl:z-10 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-1.5 tpl:border-none tpl:bg-[var(--tpl-bg-elevated)] tpl:px-3 tpl:pt-2.5 tpl:pb-1 tpl:text-left tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)]",
+					"data-testid": "merge-tag-picker-group-header",
+					"data-group-name": e.group,
+					"data-group-collapsed": F(e.group) ? "true" : "false",
+					onClick: (t) => I(e.group)
+				}, [
+					g(b(Qe), {
+						size: 12,
+						"stroke-width": 2,
+						class: n(["tpl:transition-transform", F(e.group) ? "tpl:-rotate-90" : ""])
+					}, null, 8, ["class"]),
+					p("span", null, c(e.group), 1),
+					p("span", al, " (" + c(b(u)(b(o).mergeTag.picker.groupCount, { count: e.count })) + ") ", 1)
+				], 8, il)) : (s(), m("button", {
+					key: 1,
+					id: ce(e.index),
+					type: "button",
+					role: "option",
+					"aria-selected": e.index === j.value,
+					"data-selected": e.index === j.value ? "true" : "false",
+					"data-merge-tag-index": e.index,
+					"data-merge-tag-value": e.tag.value,
+					title: e.tag.description ? `${e.tag.value} — ${e.tag.description}` : e.tag.value,
+					class: n(["tpl:flex tpl:w-full tpl:cursor-pointer tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:border-none tpl:px-3 tpl:py-1.5 tpl:text-left tpl:transition-colors", e.index === j.value ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:bg-transparent tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
+					"data-testid": "merge-tag-picker-item",
+					onMousemove: (t) => j.value = e.index,
+					onClick: (t) => V(e.tag)
+				}, [
+					p("span", sl, c(e.tag.label), 1),
+					p("span", cl, c(e.tag.value), 1),
+					e.tag.description ? (s(), m("span", ll, c(e.tag.description), 1)) : w("", !0)
+				], 42, ol))], 64))), 128))], 8, tl)
+			], 12, qc)]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+}), fl = ["data-logic-keyword"], pl = /* @__PURE__ */ f({
+	__name: "LogicTagBadge",
+	props: {
+		value: {},
+		syntax: {}
+	},
+	setup(e) {
+		let t = e, n = C(() => R(t.value, t.syntax)), r = C(() => te(t.value, t.syntax));
+		return (e, t) => n.value ? (s(), m("span", {
+			key: 0,
+			class: "tpl:inline-flex tpl:flex-shrink-0 tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:leading-none tpl:font-bold tpl:tracking-wide tpl:uppercase",
+			style: {
+				border: "1.5px solid\n        color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
+				color: "var(--tpl-primary)"
+			},
+			"data-testid": "merge-tag-logic-badge",
+			"data-logic-keyword": r.value
+		}, c(r.value), 9, fl)) : w("", !0);
+	}
+}), ml = ["aria-labelledby", "data-tpl-theme"], hl = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:gap-3 tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, gl = ["id"], _l = ["aria-label"], vl = { class: "tpl:relative tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-3 tpl:py-2.5" }, yl = [
+	"id",
+	"placeholder",
+	"aria-label",
+	"aria-activedescendant"
+], bl = ["aria-label"], xl = {
+	key: 0,
+	class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
+	"data-testid": "logic-picker-empty"
+}, Sl = {
+	key: 1,
+	class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
+	"data-testid": "logic-picker-empty"
+}, Cl = ["data-group-name"], wl = [
+	"id",
+	"aria-selected",
+	"data-selected",
+	"data-logic-index",
+	"data-logic-kind",
+	"onMousemove",
+	"onClick"
+], Tl = { class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-between tpl:gap-2" }, El = { class: "tpl:text-sm tpl:font-medium" }, Dl = {
+	key: 0,
+	class: "tpl:flex tpl:items-center"
+}, Ol = {
+	key: 1,
+	class: "tpl:flex tpl:items-center tpl:gap-1"
+}, kl = { class: "tpl:line-clamp-2 tpl:font-mono tpl:text-xs tpl:text-ellipsis tpl:break-all tpl:text-[var(--tpl-text-dim)]" }, Al = {
+	key: 0,
+	class: "tpl:line-clamp-2 tpl:text-xs tpl:text-ellipsis tpl:text-[var(--tpl-text-dim)]"
+}, jl = "tpl-logic-picker-list", Ml = /* @__PURE__ */ f({
+	__name: "LogicTagPickerModal",
+	setup(r) {
+		let a = Ne(Ye, "LogicTagPickerModal"), { t: o } = U(), u = E(Ie, B.liquid), f = E(Fe, null), h = E(Me, null), _ = d(""), y = Oe(_, 200), x = d(null), D = C(() => y.value.trim().length > 0), j = d(0);
+		function N(e) {
+			let t = y.value.trim().toLowerCase();
+			return !t || e.filter(Boolean).join(" ").toLowerCase().includes(t);
+		}
+		let P = C(() => a.tags.value.filter((e) => N([
+			e.label,
+			e.value,
+			e.description
+		]))), F = C(() => a.pairs.value.filter((e) => N([
+			e.label,
+			e.before,
+			e.after,
+			e.description
+		]))), I = C(() => [...F.value.map((e) => ({
+			kind: "pair",
+			pair: e,
+			group: e.group
+		})), ...P.value.map((e) => ({
+			kind: "tag",
+			tag: e,
+			group: e.group
+		}))]), L = C(() => a.tags.value.some((e) => !!e.group) || a.pairs.value.some((e) => !!e.group));
+		function R(e) {
+			let t = o.logicTag.picker.otherGroup, n = /* @__PURE__ */ new Map(), r = [];
+			for (let i of e) {
+				let e = i.group ?? t;
+				n.has(e) || (n.set(e, []), r.push(e)), n.get(e).push(i);
+			}
+			return r.map((e) => [e, n.get(e)]);
+		}
+		let z = C(() => {
+			let e = [], t = [], n = 0, r = (r) => {
+				r.kind === "tag" ? (e.push({
+					kind: "tag",
+					tag: r.tag,
+					index: n
+				}), t.push(r.tag)) : (e.push({
+					kind: "pair",
+					pair: r.pair,
+					index: n
+				}), t.push(r.pair)), n++;
+			}, i = I.value;
+			if (D.value || !L.value) for (let e of i) r(e);
+			else for (let [t, n] of R(i)) {
+				e.push({
+					kind: "header",
+					label: t
+				});
+				for (let e of n) r(e);
+			}
+			return {
+				rows: e,
+				items: t
+			};
+		}), V = C(() => z.value.items), ee = C(() => a.tags.value.length === 0 && a.pairs.value.length === 0), te = C(() => !ee.value && V.value.length === 0);
+		i(() => a.isOpen.value, (e) => {
+			e && (_.value = "", j.value = 0, T(() => x.value?.focus()));
+		}), i(V, (e) => {
+			j.value >= e.length && (j.value = Math.max(0, e.length - 1));
+		});
+		let ne = d(null);
+		function re(e) {
+			a.resolve(e);
+		}
+		function H() {
+			a.resolve(null);
+		}
+		function ie(e) {
+			V.value.length !== 0 && (j.value = Math.max(0, Math.min(V.value.length - 1, j.value + e)), T(() => {
+				ne.value?.querySelector(`[data-logic-index="${j.value}"]`)?.scrollIntoView({ block: "nearest" });
+			}));
+		}
+		function ae(e) {
+			if (e.key === "ArrowDown") e.preventDefault(), ie(1);
+			else if (e.key === "ArrowUp") e.preventDefault(), ie(-1);
+			else if (e.key === "Enter") {
+				e.preventDefault();
+				let t = V.value[j.value];
+				t && re(t);
+			}
+		}
+		function oe(e) {
+			return `${jl}-opt-${e}`;
+		}
+		function se() {
+			return V.value.length === 0 ? void 0 : `${jl}-opt-${j.value}`;
+		}
+		return (r, i) => (s(), v(Nt, {
+			visible: b(a).isOpen.value,
+			onClose: H,
+			onKeydown: ae
+		}, {
+			default: l(() => [p("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": `${jl}-title`,
+				"data-tpl-theme": b(h),
+				"data-testid": "logic-picker-modal",
+				class: "tpl tpl:flex tpl:max-h-[80vh] tpl:w-[min(420px,92vw)] tpl:flex-col tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:shadow-[var(--tpl-shadow-lg)]",
+				style: t(b(f))
+			}, [
+				p("header", hl, [p("h2", {
+					id: `${jl}-title`,
+					class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+				}, c(b(o).logicTag.picker.title), 9, gl), p("button", {
+					type: "button",
+					class: "tpl:flex tpl:h-7 tpl:w-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
+					"aria-label": b(o).logicTag.picker.close,
+					"data-testid": "logic-picker-close",
+					onClick: H
+				}, [g(b(gt), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, _l)]),
+				p("div", vl, [g(b(tt), {
+					class: "tpl:pointer-events-none tpl:absolute tpl:top-1/2 tpl:left-5 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]",
+					size: 14,
+					"stroke-width": 2
+				}), O(p("input", {
+					id: `${jl}-search`,
+					ref_key: "searchInputRef",
+					ref: x,
+					"onUpdate:modelValue": i[0] ||= (e) => _.value = e,
+					type: "text",
+					class: "tpl:w-full tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-sm tpl:text-[var(--tpl-text)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)]",
+					placeholder: b(o).logicTag.picker.searchPlaceholder,
+					"aria-label": b(o).logicTag.picker.searchAriaLabel,
+					"aria-controls": jl,
+					"aria-activedescendant": se(),
+					"data-testid": "logic-picker-search",
+					onKeydown: i[1] ||= M(A(() => {}, ["prevent"]), ["enter"])
+				}, null, 40, yl), [[k, _.value]])]),
+				p("div", {
+					id: jl,
+					ref_key: "listRef",
+					ref: ne,
+					class: "tpl:relative tpl:max-h-[60vh] tpl:flex-1 tpl:overflow-y-auto",
+					role: "listbox",
+					"aria-label": b(o).logicTag.picker.title,
+					"data-testid": "logic-picker-list"
+				}, [ee.value ? (s(), m("div", xl, c(b(o).logicTag.picker.empty), 1)) : te.value ? (s(), m("div", Sl, c(b(o).logicTag.picker.noResults), 1)) : (s(!0), m(S, { key: 2 }, e(z.value.rows, (e, t) => (s(), m(S, { key: t }, [e.kind === "header" ? (s(), m("div", {
+					key: 0,
+					class: "tpl:px-3 tpl:pt-2.5 tpl:pb-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-dim)]",
+					"data-testid": "logic-picker-header",
+					"data-group-name": e.label
+				}, c(e.label), 9, Cl)) : (s(), m("button", {
+					key: 1,
+					id: oe(e.index),
+					type: "button",
+					role: "option",
+					"aria-selected": e.index === j.value,
+					"data-selected": e.index === j.value ? "true" : "false",
+					"data-logic-index": e.index,
+					"data-logic-kind": e.kind,
+					class: n(["tpl:flex tpl:w-full tpl:cursor-pointer tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:border-none tpl:px-3 tpl:py-1.5 tpl:text-left tpl:transition-colors", e.index === j.value ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:bg-transparent tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
+					"data-testid": "logic-picker-item",
+					onMousemove: (t) => j.value = e.index,
+					onClick: (t) => re(e.kind === "tag" ? e.tag : e.pair)
+				}, [
+					p("span", Tl, [p("span", El, c(e.kind === "tag" ? e.tag.label : e.pair.label), 1), e.kind === "tag" ? (s(), m("span", Dl, [g(pl, {
+						value: e.tag.value,
+						syntax: b(u)
+					}, null, 8, ["value", "syntax"])])) : (s(), m("span", Ol, [
+						g(pl, {
+							value: e.pair.before,
+							syntax: b(u)
+						}, null, 8, ["value", "syntax"]),
+						i[2] ||= p("span", { class: "tpl:text-[var(--tpl-text-dim)]" }, "…", -1),
+						g(pl, {
+							value: e.pair.after,
+							syntax: b(u)
+						}, null, 8, ["value", "syntax"])
+					]))]),
+					p("span", kl, c(e.kind === "tag" ? e.tag.value : `${e.pair.before} … ${e.pair.after}`), 1),
+					(e.kind === "tag" ? e.tag.description : e.pair.description) ? (s(), m("span", Al, c(e.kind === "tag" ? e.tag.description : e.pair.description), 1)) : w("", !0)
+				], 42, wl))], 64))), 128))], 8, bl)
+			], 12, ml)]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { Vc as a, jc as c, on as d, Jt as f, Uc as i, _n as l, dl as n, zc as o, Ht as p, Kc as r, Ic as s, Ml as t, sn as u };