@templatical/editor 0.40.0 → 0.42.0

package/dist/{LogicTagInsertButton-BimKobaG.js → LogicTagInsertButton-SI6irEtn.js}

@@ -1,17 +1,17 @@
 import { A as e, At as t, B as n, E as r, J as i, K as a, M as o, S as s, W as c, Z as l, at as u, b as d, c as f, d as p, g as m, h, i as g, jt as _, kt as v, l as y, r as b, s as x, u as S, v as C } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { c as w, n as T, s as ee, t as te } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import { B as E, I as D, L as O, N as k } from "./dist-DbUZvK04.js";
+import { F as E, H as D, R as O, z as k } from "./dist-iLUVPysa.js";
 import { t as ne } from "./dist-BDuPwOyn.js";
 import { J as re, Y as A, Z as ie, d as ae } from "./keys-CDqfZIRt.js";
 import { t as j } from "./useI18n-B_CdcBwG.js";
-import { a as oe, i as se, n as ce, r as le, t as ue } from "./usePopoverPosition-DH7z3Ghm.js";
-import { t as M } from "./createLucideIcon-BxY5yz5u.js";
-import { t as de } from "./pencil-DFVFA7Dj.js";
-import { t as N } from "./x-3BHV3Q6K.js";
-import { t as P } from "./useMergeTag-BaVFPdlq.js";
-import { t as F } from "./useLogicTag-D9pvgxQR.js";
+import { a as M, i as oe, n as se, o as ce, r as le, t as ue } from "./usePopoverPosition-BYmd-lhR.js";
+import { t as N } from "./createLucideIcon-BxY5yz5u.js";
+import { t as P } from "./pencil-DFVFA7Dj.js";
+import { t as de } from "./x-3BHV3Q6K.js";
+import { t as F } from "./useMergeTag-Cyad1yBE.js";
+import { t as I } from "./useLogicTag-BaH8gey0.js";
 import { u as fe } from "./styleConstants-C_YAPdQS.js";
-var I = M({
+var pe = N({
 	name: "braces",
 	size: 24,
 	node: [["path", {
@@ -22,7 +22,7 @@ var I = M({
 		key: "e1hn23"
 	}]],
 	aliases: ["curly-braces"]
-}), L = M({
+}), L = N({
 	name: "scan-line",
 	size: 24,
 	node: [
@@ -47,7 +47,7 @@ var I = M({
 			key: "b7w52i"
 		}]
 	]
-}), R = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, z = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n, B = (e) => W(V(e)), V = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+}), R = (e, t = 0, n = 1) => e > n ? n : e < t ? t : e, z = (e, t = 0, n = 10 ** t) => Math.round(n * e) / n, B = (e) => ge(V(e)), V = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
 	r: parseInt(e[0] + e[0], 16),
 	g: parseInt(e[1] + e[1], 16),
 	b: parseInt(e[2] + e[2], 16),
@@ -57,7 +57,7 @@ var I = M({
 	g: parseInt(e.substring(2, 4), 16),
 	b: parseInt(e.substring(4, 6), 16),
 	a: e.length === 8 ? z(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
-}), pe = (e) => ge(he(e)), me = ({ h: e, s: t, v: n, a: r }) => {
+}), H = (e) => he(me(e)), U = ({ h: e, s: t, v: n, a: r }) => {
 	let i = (200 - t) * n / 100;
 	return {
 		h: z(e),
@@ -65,10 +65,10 @@ var I = M({
 		l: z(i / 2),
 		a: z(r, 2)
 	};
-}, H = (e) => {
-	let { h: t, s: n, l: r } = me(e);
+}, W = (e) => {
+	let { h: t, s: n, l: r } = U(e);
 	return `hsl(${t}, ${n}%, ${r}%)`;
-}, he = ({ h: e, s: t, v: n, a: r }) => {
+}, me = ({ h: e, s: t, v: n, a: r }) => {
 	e = e / 360 * 6, t /= 100, n /= 100;
 	let i = Math.floor(e), a = n * (1 - t), o = n * (1 - (e - i) * t), s = n * (1 - (1 - e + i) * t), c = i % 6;
 	return {
@@ -98,13 +98,13 @@ var I = M({
 		][c] * 255),
 		a: z(r, 2)
 	};
-}, U = (e) => {
+}, G = (e) => {
 	let t = e.toString(16);
 	return t.length < 2 ? "0" + t : t;
+}, he = ({ r: e, g: t, b: n, a: r }) => {
+	let i = r < 1 ? G(z(r * 255)) : "";
+	return "#" + G(e) + G(t) + G(n) + i;
 }, ge = ({ r: e, g: t, b: n, a: r }) => {
-	let i = r < 1 ? U(z(r * 255)) : "";
-	return "#" + U(e) + U(t) + U(n) + i;
-}, W = ({ r: e, g: t, b: n, a: r }) => {
 	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = a ? i === e ? (t - n) / a : i === t ? 2 + (n - e) / a : 4 + (e - t) / a : 0;
 	return {
 		h: z(60 * (o < 0 ? o + 6 : o)),
@@ -112,57 +112,57 @@ var I = M({
 		v: z(i / 255 * 100),
 		a: r
 	};
-}, G = (e, t) => {
+}, _e = (e, t) => {
 	if (e === t) return !0;
 	for (let n in e) if (e[n] !== t[n]) return !1;
 	return !0;
-}, K = (e, t) => e.toLowerCase() === t.toLowerCase() || G(V(e), V(t)), q = {}, J = (e) => {
-	let t = q[e];
-	return t || (t = document.createElement("template"), t.innerHTML = e, q[e] = t), t;
-}, Y = (e, t, n) => {
+}, ve = (e, t) => e.toLowerCase() === t.toLowerCase() || _e(V(e), V(t)), K = {}, q = (e) => {
+	let t = K[e];
+	return t || (t = document.createElement("template"), t.innerHTML = e, K[e] = t), t;
+}, J = (e, t, n) => {
 	e.dispatchEvent(new CustomEvent(t, {
 		bubbles: !0,
 		detail: n
 	}));
-}, X = !1, Z = (e) => "touches" in e, _e = (e) => X && !Z(e) ? !1 : (X ||= Z(e), !0), ve = (e, t) => {
-	let n = Z(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
-	Y(e.el, "move", e.getMove({
+}, Y = !1, X = (e) => "touches" in e, ye = (e) => Y && !X(e) ? !1 : (Y ||= X(e), !0), be = (e, t) => {
+	let n = X(t) ? t.touches[0] : t, r = e.el.getBoundingClientRect();
+	J(e.el, "move", e.getMove({
 		x: R((n.pageX - (r.left + window.pageXOffset)) / r.width),
 		y: R((n.pageY - (r.top + window.pageYOffset)) / r.height)
 	}));
-}, ye = (e, t) => {
+}, Z = (e, t) => {
 	let n = t.keyCode;
-	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), Y(e.el, "move", e.getMove({
+	n > 40 || e.xy && n < 37 || n < 33 || (t.preventDefault(), J(e.el, "move", e.getMove({
 		x: n === 39 ? .01 : n === 37 ? -.01 : n === 34 ? .05 : n === 33 ? -.05 : n === 35 ? 1 : n === 36 ? -1 : 0,
 		y: n === 40 ? .01 : n === 38 ? -.01 : 0
 	}, !0)));
-}, be = class {
+}, xe = class {
 	constructor(e, t, n, r) {
-		let i = J(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
+		let i = q(`<div role="slider" tabindex="0" part="${t}" ${n}><div part="${t}-pointer"></div></div>`);
 		e.appendChild(i.content.cloneNode(!0));
 		let a = e.querySelector(`[part=${t}]`);
 		a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
 	}
 	set dragging(e) {
 		let t = e ? document.addEventListener : document.removeEventListener;
-		t(X ? "touchmove" : "mousemove", this), t(X ? "touchend" : "mouseup", this);
+		t(Y ? "touchmove" : "mousemove", this), t(Y ? "touchend" : "mouseup", this);
 	}
 	handleEvent(e) {
 		switch (e.type) {
 			case "mousedown":
 			case "touchstart":
-				if (e.preventDefault(), !_e(e) || !X && e.button != 0) return;
-				this.el.focus(), ve(this, e), this.dragging = !0;
+				if (e.preventDefault(), !ye(e) || !Y && e.button != 0) return;
+				this.el.focus(), be(this, e), this.dragging = !0;
 				break;
 			case "mousemove":
 			case "touchmove":
-				e.preventDefault(), ve(this, e);
+				e.preventDefault(), be(this, e);
 				break;
 			case "mouseup":
 			case "touchend":
 				this.dragging = !1;
 				break;
-			case "keydown": ye(this, e);
+			case "keydown": Z(this, e);
 		}
 	}
 	style(e) {
@@ -170,14 +170,14 @@ var I = M({
 			for (let n in e) this.nodes[t].style.setProperty(n, e[n]);
 		});
 	}
-}, xe = class extends be {
+}, Se = class extends xe {
 	constructor(e) {
 		super(e, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", !1);
 	}
 	update({ h: e }) {
 		this.h = e, this.style([{
 			left: `${e / 360 * 100}%`,
-			color: H({
+			color: W({
 				h: e,
 				s: 100,
 				v: 100,
@@ -188,7 +188,7 @@ var I = M({
 	getMove(e, t) {
 		return { h: t ? R(this.h + e.x * 360, 0, 360) : 360 * e.x };
 	}
-}, Se = class extends be {
+}, Ce = class extends xe {
 	constructor(e) {
 		super(e, "saturation", "aria-label=\"Color\"", !0);
 	}
@@ -196,8 +196,8 @@ var I = M({
 		this.hsva = e, this.style([{
 			top: `${100 - e.v}%`,
 			left: `${e.s}%`,
-			color: H(e)
-		}, { "background-color": H({
+			color: W(e)
+		}, { "background-color": W({
 			h: e.h,
 			s: 100,
 			v: 100,
@@ -210,33 +210,33 @@ var I = M({
 			v: t ? R(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
 		};
 	}
-}, Ce = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", we = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", Te = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", Q = Symbol("same"), Ee = Symbol("color"), De = Symbol("hsva"), $ = Symbol("update"), Oe = Symbol("parts"), ke = Symbol("css"), Ae = Symbol("sliders"), je = class extends HTMLElement {
+}, we = ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}", Te = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", Ee = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", Q = Symbol("same"), De = Symbol("color"), Oe = Symbol("hsva"), $ = Symbol("update"), ke = Symbol("parts"), Ae = Symbol("css"), je = Symbol("sliders"), Me = class extends HTMLElement {
 	static get observedAttributes() {
 		return ["color"];
 	}
-	get [ke]() {
+	get [Ae]() {
 		return [
-			Ce,
 			we,
-			Te
+			Te,
+			Ee
 		];
 	}
-	get [Ae]() {
-		return [Se, xe];
+	get [je]() {
+		return [Ce, Se];
 	}
 	get color() {
-		return this[Ee];
+		return this[De];
 	}
 	set color(e) {
 		if (!this[Q](e)) {
 			let t = this.colorModel.toHsva(e);
-			this[$](t), this[Ee] = e;
+			this[$](t), this[De] = e;
 		}
 	}
 	constructor() {
 		super();
-		let e = J(`<style>${this[ke].join("")}</style>`), t = this.attachShadow({ mode: "open" });
-		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[Oe] = this[Ae].map((e) => new e(t));
+		let e = q(`<style>${this[Ae].join("")}</style>`), t = this.attachShadow({ mode: "open" });
+		t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[ke] = this[je].map((e) => new e(t));
 	}
 	connectedCallback() {
 		if (this.hasOwnProperty("color")) {
@@ -249,72 +249,76 @@ var I = M({
 		this[Q](r) || (this.color = r);
 	}
 	handleEvent(e) {
-		let t = this[De], n = {
+		let t = this[Oe], n = {
 			...t,
 			...e.detail
 		};
 		this[$](n);
 		let r;
-		!G(n, t) && !this[Q](r = this.colorModel.fromHsva(n)) && (this[Ee] = r, Y(this, "color-changed", { value: r }));
+		!_e(n, t) && !this[Q](r = this.colorModel.fromHsva(n)) && (this[De] = r, J(this, "color-changed", { value: r }));
 	}
 	[Q](e) {
 		return this.color && this.colorModel.equal(e, this.color);
 	}
 	[$](e) {
-		this[De] = e, this[Oe].forEach((t) => t.update(e));
+		this[Oe] = e, this[ke].forEach((t) => t.update(e));
 	}
-}, Me = {
+}, Ne = {
 	defaultColor: "#000",
 	toHsva: B,
-	fromHsva: ({ h: e, s: t, v: n }) => pe({
+	fromHsva: ({ h: e, s: t, v: n }) => H({
 		h: e,
 		s: t,
 		v: n,
 		a: 1
 	}),
-	equal: K,
+	equal: ve,
 	fromAttr: (e) => e
-}, Ne = class extends je {
+}, Pe = class extends Me {
 	get colorModel() {
-		return Me;
+		return Ne;
 	}
-}, Pe = class extends Ne {};
-customElements.define("hex-color-picker", Pe);
+}, Fe = class extends Pe {};
+customElements.define("hex-color-picker", Fe);
 //#endregion
 //#region src/components/ColorPicker.vue?vue&type=script&setup=true&lang.ts
-var Fe = [
+var Ie = [
 	"disabled",
 	"aria-label",
 	"title",
 	"aria-expanded"
-], Ie = {
+], Le = {
 	key: 0,
 	class: "tpl:relative tpl:flex-1"
-}, Le = [
+}, Re = [
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-label"
-], Re = ["aria-label", "title"], ze = ["data-tpl-theme"], Be = ["aria-label"], Ve = [
+], ze = ["aria-label", "title"], Be = ["data-tpl-theme"], Ve = [
+	"aria-pressed",
+	"aria-label",
+	"title"
+], He = ["aria-label"], Ue = [
 	"aria-label",
 	"title",
 	"aria-checked",
 	"tabindex"
-], He = [
+], We = [
 	"aria-label",
 	"title",
 	"aria-checked",
 	"tabindex",
 	"onClick"
-], Ue = ["color", "aria-label"], We = {
-	key: 2,
+], Ge = ["color", "aria-label"], Ke = {
+	key: 3,
 	class: "tpl:relative tpl:mt-2"
-}, Ge = [
+}, qe = [
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-label"
-], Ke = ["aria-label", "title"], qe = /* @__PURE__ */ C({
+], Je = ["aria-label", "title"], Ye = /* @__PURE__ */ C({
 	__name: "ColorPicker",
 	props: {
 		modelValue: {},
@@ -334,37 +338,41 @@ var Fe = [
 		allowCustom: {
 			type: Boolean,
 			default: void 0
+		},
+		allowTransparent: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	emits: ["update:modelValue"],
 	setup(r, { emit: i }) {
-		let a = r, c = i, { t: d } = j(), h = l(!1), _ = l(), C = l(), T = l(!1);
-		ne(_, () => {
-			h.value = !1;
-		}, { ignore: [C] });
-		let E = x(() => !a.modelValue), D = x(() => se(a.modelValue)), O = x(() => se(a.modelValue || a.seedColor)), k = x(() => !a.disabled && !E.value), A = s(ae, oe), M = x(() => [...new Set(a.presets ?? A.presets)]), de = x(() => a.allowCustom ?? A.allowCustom), P = x(() => M.value.length > 0), F = x(() => de.value || !P.value), I = x(() => le(a.modelValue));
-		function L(e) {
-			return I.value !== "" && le(e) === I.value;
+		let a = r, c = i, { t: d } = j(), C = l(!1), T = l(), E = l(), D = l(!1);
+		ne(T, () => {
+			C.value = !1;
+		}, { ignore: [E] });
+		let O = x(() => !a.modelValue), k = x(() => a.modelValue.trim().toLowerCase() === "transparent"), A = x(() => oe(a.modelValue)), N = x(() => (a.modelValue ? M(a.modelValue) : null) || (M(a.seedColor) ?? "#ffffff")), P = x(() => !a.disabled && !O.value), F = s(ae, ce), I = x(() => [...new Set(a.presets ?? F.presets)]), pe = x(() => a.allowCustom ?? F.allowCustom), L = x(() => I.value.length > 0), R = x(() => pe.value || !L.value), z = x(() => le(a.modelValue));
+		function B(e) {
+			return z.value !== "" && le(e) === z.value;
 		}
-		function R(e) {
+		function V(e) {
 			c("update:modelValue", e);
 		}
-		let z = x(() => P.value && !F.value);
-		function B(e) {
-			return z.value ? e + 1 : e;
+		let H = x(() => L.value && !R.value);
+		function U(e) {
+			return H.value ? e + 1 : e;
 		}
-		let V = x(() => {
-			if (z.value && E.value) return 0;
-			let e = M.value.findIndex((e) => L(e));
-			return e === -1 ? 0 : B(e);
+		let W = x(() => {
+			if (H.value && O.value) return 0;
+			let e = I.value.findIndex((e) => B(e));
+			return e === -1 ? 0 : U(e);
 		});
-		function pe() {
-			return V.value === 0 ? 0 : -1;
+		function me() {
+			return W.value === 0 ? 0 : -1;
 		}
-		function me(e) {
-			return B(e) === V.value ? 0 : -1;
+		function G(e) {
+			return U(e) === W.value ? 0 : -1;
 		}
-		function H(e) {
+		function he(e) {
 			if (![
 				"ArrowRight",
 				"ArrowDown",
@@ -374,83 +382,89 @@ var Fe = [
 			let t = e.currentTarget, n = Array.from(t.querySelectorAll("[role=\"radio\"]")), r = e.target.closest("[role=\"radio\"]"), i = r ? n.indexOf(r) : -1;
 			i !== -1 && (n[(i + (e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1) + n.length) % n.length]?.focus(), e.preventDefault());
 		}
-		function he(e) {
-			T.value = !0, c("update:modelValue", e.detail.value);
+		function ge(e) {
+			D.value = !0, c("update:modelValue", e.detail.value);
 		}
-		function U() {
-			T.value = !1;
+		function _e() {
+			D.value = !1;
 		}
-		function ge() {
-			!T.value && E.value && c("update:modelValue", O.value);
+		function ve() {
+			!D.value && O.value && c("update:modelValue", N.value);
 		}
-		function W(e) {
+		function K(e) {
 			c("update:modelValue", e.target.value);
 		}
-		function G() {
+		function q() {
 			c("update:modelValue", "");
 		}
-		let K = ce(), { toLocal: q } = ue(), J = s(re, null), Y = s(ie, null), X = l({
+		function J() {
+			c("update:modelValue", "transparent");
+		}
+		let Y = se(), { toLocal: X } = ue(), ye = s(re, null), be = s(ie, null), Z = l({
 			top: 0,
 			left: 0
 		});
-		function Z() {
+		function xe() {
 			if (!a.disabled) {
-				if (!h.value) {
-					let e = C.value?.getBoundingClientRect();
+				if (!C.value) {
+					let e = E.value?.getBoundingClientRect();
 					if (e) {
 						let t = e.bottom + 8 + 240 <= window.innerHeight ? e.bottom + 8 : Math.max(8, e.top - 240 - 8);
-						X.value = q({
+						Z.value = X({
 							top: t,
 							left: e.left
 						});
 					}
 				}
-				h.value = !h.value;
+				C.value = !C.value;
 			}
 		}
 		return (i, a) => (e(), p("div", { class: v(["tpl:flex tpl:items-center tpl:gap-2 tpl:relative", r.disabled && "tpl:opacity-60 tpl:cursor-not-allowed"]) }, [
 			f("button", {
 				ref_key: "swatchRef",
-				ref: C,
+				ref: E,
 				type: "button",
 				disabled: r.disabled,
 				"aria-label": r.ariaLabel || u(d).colorPicker.pickColor,
 				title: r.ariaLabel || void 0,
-				"aria-expanded": h.value,
+				"aria-expanded": C.value,
 				class: v([
 					"tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 					r.disabled ? "tpl:cursor-not-allowed" : "tpl:cursor-pointer",
-					h.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !r.disabled && "tpl:hover:border-[var(--tpl-text-dim)]",
+					C.value ? "tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]" : !r.disabled && "tpl:hover:border-[var(--tpl-text-dim)]",
 					r.size === "sm" ? "tpl:size-8" : "tpl:size-10"
 				]),
-				onClick: Z
+				onClick: xe
 			}, [f("span", {
-				class: v(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", { "tpl-color-swatch-empty": E.value }]),
-				style: t(E.value ? void 0 : { backgroundColor: D.value })
-			}, null, 6)], 10, Fe),
-			!r.swatchOnly && F.value ? (e(), p("div", Ie, [f("input", {
+				class: v(["tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]", {
+					"tpl-color-swatch-empty": O.value,
+					"tpl-color-swatch-transparent": k.value
+				}]),
+				style: t(O.value || k.value ? void 0 : { backgroundColor: A.value })
+			}, null, 6)], 10, Ie),
+			!r.swatchOnly && R.value ? (e(), p("div", Le, [f("input", {
 				type: "text",
 				class: v([u(fe), "tpl:w-full"]),
-				style: t(k.value ? { paddingRight: "2.25rem" } : void 0),
-				value: D.value,
+				style: t(P.value ? { paddingRight: "2.25rem" } : void 0),
+				value: A.value,
 				placeholder: r.placeholder || u(d).colorPicker.notSet,
 				disabled: r.disabled,
 				"aria-label": u(d).colorPicker.hexValue,
-				onInput: W
-			}, null, 46, Le), k.value ? (e(), p("button", {
+				onInput: K
+			}, null, 46, Re), P.value ? (e(), p("button", {
 				key: 0,
 				type: "button",
 				"aria-label": u(d).colorPicker.clear,
 				title: u(d).colorPicker.clear,
 				class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-				onClick: G
-			}, [m(u(N), {
+				onClick: q
+			}, [m(u(de), {
 				size: 14,
 				"stroke-width": 1.5
-			})], 8, Re)) : S("", !0)])) : S("", !0),
+			})], 8, ze)) : S("", !0)])) : S("", !0),
 			(e(), y(g, {
-				to: u(K),
-				disabled: !u(K)
+				to: u(Y),
+				disabled: !u(Y)
 			}, [m(te, {
 				"enter-active-class": "tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]",
 				"enter-from-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1",
@@ -459,93 +473,103 @@ var Fe = [
 				"leave-from-class": "tpl:opacity-100 tpl:scale-100 tpl:translate-y-0",
 				"leave-to-class": "tpl:opacity-0 tpl:scale-95 tpl:translate-y-1"
 			}, {
-				default: n(() => [h.value ? (e(), p("div", {
+				default: n(() => [C.value ? (e(), p("div", {
 					key: 0,
 					ref_key: "popoverRef",
-					ref: _,
-					"data-tpl-theme": u(Y),
+					ref: T,
+					"data-tpl-theme": u(be),
 					class: "tpl-color-popover tpl:absolute tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:shadow-[var(--tpl-shadow-lg)]",
 					style: t({
-						top: `${X.value.top}px`,
-						left: `${X.value.left}px`,
-						...u(J)
+						top: `${Z.value.top}px`,
+						left: `${Z.value.left}px`,
+						...u(ye)
 					})
 				}, [
-					P.value ? (e(), p("div", {
+					r.allowTransparent ? (e(), p("button", {
 						key: 0,
+						type: "button",
+						"data-testid": "color-picker-transparent",
+						"aria-pressed": k.value,
+						"aria-label": u(d).colorPicker.transparent,
+						title: u(d).colorPicker.transparent,
+						class: v(["tpl:mb-2 tpl:flex tpl:w-full tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-2 tpl:py-1 tpl:text-left tpl:text-xs 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:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)]", k.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
+						onClick: J
+					}, [a[2] ||= f("span", { class: "tpl-color-swatch-transparent tpl:size-4 tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)]" }, null, -1), h(" " + _(u(d).colorPicker.transparent), 1)], 10, Ve)) : S("", !0),
+					L.value ? (e(), p("div", {
+						key: 1,
 						role: "radiogroup",
 						"aria-label": u(d).colorPicker.presetColors,
-						class: v(["tpl:flex tpl:flex-wrap tpl:gap-1.5", F.value && "tpl:mb-2"]),
-						onKeydown: H
-					}, [z.value ? (e(), p("button", {
+						class: v(["tpl:flex tpl:flex-wrap tpl:gap-1.5", R.value && "tpl:mb-2"]),
+						onKeydown: he
+					}, [H.value ? (e(), p("button", {
 						key: 0,
 						type: "button",
 						role: "radio",
 						"aria-label": u(d).colorPicker.clear,
 						title: u(d).colorPicker.clear,
-						"aria-checked": E.value,
-						tabindex: pe(),
-						class: v(["tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", E.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
-						onClick: G
-					}, null, 10, Ve)) : S("", !0), (e(!0), p(b, null, o(M.value, (n, r) => (e(), p("button", {
+						"aria-checked": O.value,
+						tabindex: me(),
+						class: v(["tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", O.value ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
+						onClick: q
+					}, null, 10, Ue)) : S("", !0), (e(!0), p(b, null, o(I.value, (n, r) => (e(), p("button", {
 						key: n,
 						type: "button",
 						role: "radio",
 						"aria-label": n,
 						title: n,
-						"aria-checked": L(n),
-						tabindex: me(r),
+						"aria-checked": B(n),
+						tabindex: G(r),
 						style: t({ backgroundColor: n }),
-						class: v(["tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", L(n) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
-						onClick: (e) => R(n)
-					}, null, 14, He))), 128))], 42, Be)) : S("", !0),
-					F.value ? (e(), p("hex-color-picker", {
-						key: 1,
-						color: O.value,
+						class: v(["tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]", B(n) ? "tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]" : "tpl:hover:border-[var(--tpl-text-dim)]"]),
+						onClick: (e) => V(n)
+					}, null, 14, We))), 128))], 42, He)) : S("", !0),
+					R.value ? (e(), p("hex-color-picker", {
+						key: 2,
+						color: N.value,
 						"aria-label": u(d).colorPicker.pickColor,
-						onColorChanged: he,
-						onPointerdown: U,
-						onPointerup: ge,
-						onKeydown: a[0] ||= ee((e) => h.value = !1, ["escape"])
-					}, null, 40, Ue)) : S("", !0),
-					r.swatchOnly && F.value ? (e(), p("div", We, [f("input", {
+						onColorChanged: ge,
+						onPointerdown: _e,
+						onPointerup: ve,
+						onKeydown: a[0] ||= ee((e) => C.value = !1, ["escape"])
+					}, null, 40, Ge)) : S("", !0),
+					r.swatchOnly && R.value ? (e(), p("div", Ke, [f("input", {
 						type: "text",
 						class: v([u(fe), "tpl:w-full"]),
-						style: t(k.value ? { paddingRight: "2.25rem" } : void 0),
-						value: D.value,
+						style: t(P.value ? { paddingRight: "2.25rem" } : void 0),
+						value: A.value,
 						placeholder: r.placeholder || u(d).colorPicker.notSet,
 						disabled: r.disabled,
 						"aria-label": u(d).colorPicker.hexValue,
-						onChange: W,
+						onChange: K,
 						onKeydown: a[1] ||= ee(w((e) => e.target.blur(), ["prevent"]), ["enter"])
-					}, null, 46, Ge), k.value ? (e(), p("button", {
+					}, null, 46, qe), P.value ? (e(), p("button", {
 						key: 0,
 						type: "button",
 						"aria-label": u(d).colorPicker.clear,
 						title: u(d).colorPicker.clear,
 						class: "tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]",
-						onClick: G
-					}, [m(u(N), {
+						onClick: q
+					}, [m(u(de), {
 						size: 14,
 						"stroke-width": 1.5
-					})], 8, Ke)) : S("", !0)])) : S("", !0)
-				], 12, ze)) : S("", !0)]),
+					})], 8, Je)) : S("", !0)])) : S("", !0)
+				], 12, Be)) : S("", !0)]),
 				_: 1
 			})], 8, ["to", "disabled"]))
 		], 2));
 	}
-}), Je = ["id"], Ye = {
+}), Xe = ["id"], Ze = {
 	key: 0,
 	class: "tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]",
 	"data-testid": "merge-tag-suggestion-empty"
-}, Xe = [
+}, Qe = [
 	"id",
 	"aria-selected",
 	"data-selected",
 	"data-merge-tag-value",
 	"onMousedown",
 	"onMousemove"
-], Ze = { class: "tpl:font-medium" }, Qe = { class: "tpl:text-[var(--tpl-text-dim)] tpl:font-mono" }, $e = /* @__PURE__ */ C({
+], $e = { class: "tpl:font-medium" }, et = { class: "tpl:text-[var(--tpl-text-dim)] tpl:font-mono" }, tt = /* @__PURE__ */ C({
 	__name: "MergeTagSuggestionList",
 	props: {
 		items: {},
@@ -564,7 +588,7 @@ var Fe = [
 			class: "tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]",
 			role: "listbox",
 			"data-testid": "merge-tag-suggestion-list"
-		}, [t.items.length === 0 ? (e(), p("div", Ye, _(t.emptyText), 1)) : S("", !0), (e(!0), p(b, null, o(t.items, (i, a) => (e(), p("button", {
+		}, [t.items.length === 0 ? (e(), p("div", Ze, _(t.emptyText), 1)) : S("", !0), (e(!0), p(b, null, o(t.items, (i, a) => (e(), p("button", {
 			key: i.value,
 			id: r(a),
 			type: "button",
@@ -575,21 +599,21 @@ var Fe = [
 			class: v(["tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors", a === t.selectedIndex ? "tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]" : "tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]"]),
 			onMousedown: w((e) => n.$emit("select", i), ["prevent", "stop"]),
 			onMousemove: (e) => a !== t.selectedIndex && n.$emit("hover", a)
-		}, [f("span", Ze, _(i.label), 1), f("span", Qe, _(i.value), 1)], 42, Xe))), 128))], 8, Je));
+		}, [f("span", $e, _(i.label), 1), f("span", et, _(i.value), 1)], 42, Qe))), 128))], 8, Xe));
 	}
-}), et = 10, tt = 0;
-function nt(e, t) {
+}), nt = 10, rt = 0;
+function it(e, t) {
 	let n = t.trim().toLowerCase();
-	return n === "" ? e.slice(0, et) : e.filter((e) => {
+	return n === "" ? e.slice(0, nt) : e.filter((e) => {
 		let t = e.label.toLowerCase(), r = e.value.toLowerCase();
 		return t.includes(n) || r.includes(n);
-	}).slice(0, et);
+	}).slice(0, nt);
 }
-function rt(e, t, n, r) {
+function at(e, t, n, r) {
 	return t.length === 0 ? e.key === "Enter" || e.key === "Tab" : e.key === "ArrowDown" ? (n.value = (n.value + 1) % t.length, !0) : e.key === "ArrowUp" ? (n.value = (n.value - 1 + t.length) % t.length, !0) : e.key === "Enter" || e.key === "Tab" ? (r(t[n.value]), !0) : !1;
 }
-function it(e, t) {
-	let n = null, r = null, i = null, a = l([]), o = l(0), s = null, c = `tpl-merge-tag-suggestion-${++tt}`, u = null, f = [], p = null;
+function ot(e, t) {
+	let n = null, r = null, i = null, a = l([]), o = l(0), s = null, c = `tpl-merge-tag-suggestion-${++rt}`, u = null, f = [], p = null;
 	function m() {
 		y(u?.() ?? null);
 	}
@@ -659,7 +683,7 @@ function it(e, t) {
 	return {
 		open: ({ items: l, getRect: f, anchorEl: p, onCommand: m }) => {
 			a.value = l, o.value = 0, s = m, r = document.createElement("div"), r.setAttribute("data-testid", "merge-tag-suggestion-popup"), i = p, b(r, p), (t?.value ?? document.body).appendChild(r), n = T({ render() {
-				return d($e, {
+				return d(tt, {
 					items: a.value,
 					selectedIndex: o.value,
 					emptyText: e,
@@ -675,7 +699,7 @@ function it(e, t) {
 			a.value = e, o.value >= e.length && (o.value = 0), s = n, S(), u = t, h();
 		},
 		handleKeyDown: (e) => {
-			let t = rt(e, a.value, o, C);
+			let t = at(e, a.value, o, C);
 			return t && S(), t;
 		},
 		close: () => {
@@ -686,7 +710,7 @@ function it(e, t) {
 }
 //#endregion
 //#region src/utils/mergeTagTrigger.ts
-function at(e, t, n, r) {
+function st(e, t, n, r) {
 	if (!n) return null;
 	let i = e.slice(0, t), a = i.lastIndexOf(n);
 	if (a === -1) return null;
@@ -699,8 +723,8 @@ function at(e, t, n, r) {
 }
 //#endregion
 //#region src/utils/textFieldCaret.ts
-var ot = /* @__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 st(e, t, n) {
+var ct = /* @__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 lt(e, t, n) {
 	return {
 		left: e,
 		top: t,
@@ -713,7 +737,7 @@ function st(e, t, n) {
 		toJSON: () => ({})
 	};
 }
-function ct(e, t) {
+function ut(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");
@@ -721,7 +745,7 @@ function ct(e, t) {
 	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 ot) c[e] = l[e];
+	for (let e of ct) 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;
@@ -730,26 +754,26 @@ function ct(e, t) {
 	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 st(y, h.top, h.bottom);
+	if (i) return lt(y, h.top, h.bottom);
 	let b = h.top + p + g - e.scrollTop;
-	return st(y, b, b + v);
+	return lt(y, b, b + v);
 }
 //#endregion
 //#region src/composables/useMergeTagAutocomplete.ts
-var lt = /* @__PURE__ */ new Set([
+var dt = /* @__PURE__ */ new Set([
 	"ArrowLeft",
 	"ArrowRight",
 	"Home",
 	"End"
 ]);
-function ut(e) {
-	let { elementRef: t, modelValue: n, emit: o, mergeTags: l, syntax: u, enabled: d, onInsert: f } = e, p = O(u), m = D(u), h = x(() => d && p !== null && l.value.length > 0), g = s(A, null), _ = it((a(g) ? g.value : g)?.mergeTag?.suggestionEmpty ?? "No matching merge tags", ce()), v = !1;
+function ft(e) {
+	let { elementRef: t, modelValue: n, emit: o, mergeTags: l, syntax: u, enabled: d, onInsert: f } = e, p = k(u), m = O(u), h = x(() => d && p !== null && l.value.length > 0), g = s(A, null), _ = ot((a(g) ? g.value : g)?.mergeTag?.suggestionEmpty ?? "No matching merge tags", se()), v = !1;
 	c() && i(() => {
 		v = !0, _.close();
 	});
 	function y(e) {
 		let t = e.value ?? "";
-		return at(t, e.selectionStart ?? t.length, p, m);
+		return st(t, e.selectionStart ?? t.length, p, m);
 	}
 	function b(e, i, a) {
 		let s = e.value ?? n(), c = s.slice(i.caret), l = m && c.startsWith(m) ? m.length : 0, u = s.slice(0, i.triggerStart), d = s.slice(i.caret + l), p = u + a.value + d, h = u.length + a.value.length;
@@ -771,7 +795,7 @@ function ut(e) {
 			_.close();
 			return;
 		}
-		let r = nt(l.value, n.query), i = () => ct(e, n.triggerStart), a = (t) => b(e, n, t);
+		let r = it(l.value, n.query), i = () => ut(e, n.triggerStart), a = (t) => b(e, n, t);
 		_.isOpen() ? _.update({
 			items: r,
 			getRect: i,
@@ -784,7 +808,7 @@ function ut(e) {
 		});
 	}
 	function C(e) {
-		return _.isOpen() ? e.key === "Escape" ? (_.close(), !0) : lt.has(e.key) ? (_.close(), !1) : _.handleKeyDown(e) : !1;
+		return _.isOpen() ? e.key === "Escape" ? (_.close(), !0) : dt.has(e.key) ? (_.close(), !1) : _.handleKeyDown(e) : !1;
 	}
 	return {
 		available: h,
@@ -796,12 +820,12 @@ function ut(e) {
 }
 //#endregion
 //#region src/composables/useMergeTagField.ts
-function dt(e) {
-	let { modelValue: t, emit: n, elementRef: a } = e, { mergeTags: o, canRequestMergeTag: s, isRequesting: u, isMergeTagValue: d, getMergeTagDisplayLabel: f, findMergeTag: p, requestMergeTag: m, syntax: h, autocomplete: g } = P(), { canInsertLogicTag: _, isRequesting: v, requestLogicTag: y } = F(), b = l(!1), S = !1, C = !1;
+function pt(e) {
+	let { modelValue: t, emit: n, elementRef: a } = e, { mergeTags: o, canRequestMergeTag: s, isRequesting: u, isMergeTagValue: d, getMergeTagDisplayLabel: f, findMergeTag: p, requestMergeTag: m, syntax: h, autocomplete: g } = F(), { canInsertLogicTag: _, isRequesting: v, requestLogicTag: y } = I(), b = l(!1), S = !1, C = !1;
 	c() && i(() => {
 		C = !0;
 	});
-	let w = ut({
+	let w = ft({
 		elementRef: a,
 		modelValue: t,
 		emit: n,
@@ -825,10 +849,10 @@ function dt(e) {
 				type: "mergeTag",
 				value: t,
 				label: f(t)
-			}) : E(t, h) ? n.push({
+			}) : D(t, h) ? n.push({
 				type: "logicMergeTag",
 				value: t,
-				keyword: k(t, h)
+				keyword: E(t, h)
 			}) : n.push({
 				type: "text",
 				value: t
@@ -846,20 +870,20 @@ function dt(e) {
 			a.value?.setSelectionRange(e, e);
 		});
 	}
-	function D() {
+	function O() {
 		S || (b.value = !1);
 	}
-	function O(e) {
+	function k(e) {
 		n(e.target.value), w.refresh();
 	}
 	function ne(e) {
-		return w.handleKeydown(e) ? (e.preventDefault(), !0) : (e.key === "Escape" && D(), !1);
+		return w.handleKeydown(e) ? (e.preventDefault(), !0) : (e.key === "Escape" && O(), !1);
 	}
 	function re() {
 		w.refresh();
 	}
 	function A() {
-		w.close(), D();
+		w.close(), O();
 	}
 	function ie() {
 		n("");
@@ -897,7 +921,7 @@ function dt(e) {
 		}
 		!C && i && n(t.map((t, n) => n === e ? i.value : t.value).join(""));
 	}
-	async function oe() {
+	async function M() {
 		let e = a.value, i = e?.selectionStart ?? t().length, o = e?.selectionEnd ?? i;
 		S = !0;
 		let s;
@@ -921,28 +945,28 @@ function dt(e) {
 		isRequestingLogicTag: v,
 		isEditing: b,
 		startEditing: te,
-		stopEditing: D,
-		handleInput: O,
+		stopEditing: O,
+		handleInput: k,
 		handleKeydown: ne,
 		handleClick: re,
 		handleBlur: A,
 		clearValue: ie,
 		insertMergeTag: ae,
 		replaceMergeTagAt: j,
-		insertLogicTag: oe,
+		insertLogicTag: M,
 		autocompleteAvailable: w.available
 	};
 }
 //#endregion
 //#region src/components/MergeTagSegments.vue?vue&type=script&setup=true&lang.ts
-var ft = ["aria-label"], pt = [
+var mt = ["aria-label"], ht = [
 	"data-tooltip",
 	"aria-label",
 	"onClick"
-], mt = ["data-tooltip"], ht = ["data-tooltip"], gt = {
+], gt = ["data-tooltip"], _t = ["data-tooltip"], vt = {
 	key: 3,
 	class: "tpl:text-sm tpl:text-[var(--tpl-text)]"
-}, _t = ["aria-label", "title"], vt = ["aria-label", "title"], yt = /* @__PURE__ */ C({
+}, yt = ["aria-label", "title"], bt = ["aria-label", "title"], xt = /* @__PURE__ */ C({
 	__name: "MergeTagSegments",
 	props: {
 		segments: {},
@@ -955,7 +979,7 @@ var ft = ["aria-label"], pt = [
 		"repick"
 	],
 	setup(t, { emit: n }) {
-		let r = n, { t: i, format: a } = j(), { canRepickMergeTag: s, showRawValue: c } = P();
+		let r = n, { t: i, format: a } = j(), { canRepickMergeTag: s, showRawValue: c } = F();
 		function l() {
 			r("edit");
 		}
@@ -977,7 +1001,7 @@ var ft = ["aria-label"], pt = [
 					color: "var(--tpl-primary)"
 				},
 				onClick: w((e) => r("repick", n), ["stop"])
-			}, _(t.label), 11, pt)) : t.type === "mergeTag" ? (e(), p("span", {
+			}, _(t.label), 11, ht)) : t.type === "mergeTag" ? (e(), p("span", {
 				key: 1,
 				class: v(["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", u(c) ? "tpl-tooltip" : ""]),
 				"data-tooltip": u(c) ? t.value : void 0,
@@ -985,7 +1009,7 @@ var ft = ["aria-label"], pt = [
 					"background-color": "color-mix(\n            in srgb,\n            var(--tpl-primary) 20%,\n            transparent\n          )",
 					color: "var(--tpl-primary)"
 				}
-			}, _(t.label), 11, mt)) : t.type === "logicMergeTag" ? (e(), p("span", {
+			}, _(t.label), 11, gt)) : t.type === "logicMergeTag" ? (e(), p("span", {
 				key: 2,
 				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": t.value,
@@ -994,7 +1018,7 @@ var ft = ["aria-label"], pt = [
 					border: "1.5px solid\n            color-mix(in srgb, var(--tpl-primary) 50%, transparent)",
 					color: "var(--tpl-primary)"
 				}
-			}, _(t.keyword), 9, ht)) : (e(), p("span", gt, _(t.value), 1))], 64))), 128)),
+			}, _(t.keyword), 9, _t)) : (e(), p("span", vt, _(t.value), 1))], 64))), 128)),
 			f("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 tpl:hover:text-[var(--tpl-primary)] tpl:hover:opacity-100",
@@ -1002,10 +1026,10 @@ var ft = ["aria-label"], pt = [
 				title: u(i).mergeTag.editAsText,
 				"data-testid": "merge-tag-field-edit",
 				onClick: w(l, ["stop"])
-			}, [m(u(de), {
+			}, [m(u(P), {
 				size: 12,
 				"stroke-width": 2
-			})], 8, _t),
+			})], 8, yt),
 			f("button", {
 				type: "button",
 				class: "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 tpl:hover:text-[var(--tpl-danger)] tpl:hover:opacity-100",
@@ -1013,17 +1037,17 @@ var ft = ["aria-label"], pt = [
 				title: u(i).mergeTag.remove,
 				"data-testid": "merge-tag-field-clear",
 				onClick: d[0] ||= w((e) => r("clear"), ["stop"])
-			}, [m(u(N), {
+			}, [m(u(de), {
 				size: 12,
 				"stroke-width": 2.5
-			})], 8, vt)
-		], 10, ft));
+			})], 8, bt)
+		], 10, mt));
 	}
-}), bt = [
+}), St = [
 	"aria-label",
 	"title",
 	"disabled"
-], xt = "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] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]", St = /* @__PURE__ */ C({
+], Ct = "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] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]", wt = /* @__PURE__ */ C({
 	__name: "MergeTagInsertButton",
 	props: { disabled: { type: Boolean } },
 	emits: ["insert"],
@@ -1031,7 +1055,7 @@ var ft = ["aria-label"], pt = [
 		let { t: n } = j();
 		return (r, i) => (e(), p("button", {
 			type: "button",
-			class: v([xt, "tpl:mt-1.5"]),
+			class: v([Ct, "tpl:mt-1.5"]),
 			"aria-label": u(n).mergeTag.insert,
 			title: u(n).mergeTag.insert,
 			disabled: t.disabled,
@@ -1040,13 +1064,13 @@ var ft = ["aria-label"], pt = [
 		}, [m(u(L), {
 			size: 12,
 			"stroke-width": 2
-		}), h(" " + _(u(n).mergeTag.insertShort), 1)], 42, bt));
+		}), h(" " + _(u(n).mergeTag.insertShort), 1)], 42, St));
 	}
-}), Ct = [
+}), Tt = [
 	"aria-label",
 	"title",
 	"disabled"
-], wt = "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] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]", Tt = /* @__PURE__ */ C({
+], Et = "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] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]", Dt = /* @__PURE__ */ C({
 	__name: "LogicTagInsertButton",
 	props: { disabled: { type: Boolean } },
 	emits: ["insert"],
@@ -1054,18 +1078,18 @@ var ft = ["aria-label"], pt = [
 		let { t: n } = j();
 		return (r, i) => (e(), p("button", {
 			type: "button",
-			class: v([wt, "tpl:mt-1.5"]),
+			class: v([Et, "tpl:mt-1.5"]),
 			"aria-label": u(n).logicTag.insert,
 			title: u(n).logicTag.insert,
 			disabled: t.disabled,
 			"data-testid": "field-insert-logic-button",
 			onMousedown: i[0] ||= w(() => {}, ["prevent"]),
 			onClick: i[1] ||= (e) => r.$emit("insert")
-		}, [m(u(I), {
+		}, [m(u(pe), {
 			size: 12,
 			"stroke-width": 2
-		}), h(" " + _(u(n).logicTag.insertShort), 1)], 42, Ct));
+		}), h(" " + _(u(n).logicTag.insertShort), 1)], 42, Tt));
 	}
 });
 //#endregion
-export { it as a, qe as c, dt as i, L as l, St as n, nt as o, yt as r, rt as s, Tt as t, I as u };
+export { ot as a, Ye as c, pt as i, L as l, wt as n, it as o, xt as r, at as s, Dt as t, pe as u };