@templatical/editor 0.38.0 → 0.39.1

package/dist/cdn/chunks/{MergeTagModeToggle-DYxkAGtA.js → MergeTagModeToggle-n3nvSNeQ.js}

@@ -1,45 +1,45 @@
-import { E as e, F as t, N as n, S as r, at as i, f as a, g as o, h as s, lt as c, m as l, p as u, u as d, ut as f } from "./draggable-kbOhCgnk.js";
+import { E as e, F as t, N as n, S as r, at as i, f as a, g as o, h as s, lt as c, m as l, p as u, u as d, ut as f } from "./draggable-IB4x6w2O.js";
 import { u as p } from "./src-Dwgq7hf4.js";
-import { D as m } from "./keys-DBFhDFng.js";
-import { t as h } from "./useI18n-Dlo7R9RA.js";
-import { $ as g, D as _, E as v, p as y } from "./icons-BUlqGSgd.js";
+import { D as m, P as h } from "./keys-dJbD1QPs.js";
+import { t as g } from "./useI18n-DTZ9sIcv.js";
+import { $ as _, D as v, E as y, p as b } from "./icons-BKkJ-5xF.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
-var b = ["aria-label"], x = [
+var x = ["aria-label"], S = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], S = /* @__PURE__ */ r({
+], C = /* @__PURE__ */ r({
 	__name: "ViewportToggle",
 	props: { viewport: {} },
 	emits: ["change"],
 	setup(e, { emit: r }) {
-		let s = e, p = r, { t: m } = h(), v = a(() => [{
+		let s = e, p = r, { t: m } = g(), h = a(() => [{
 			value: "desktop",
 			label: m.viewport.desktop
 		}, {
 			value: "mobile",
 			label: m.viewport.mobile
-		}]), y = a(() => `translateX(${v.value.findIndex((e) => e.value === s.viewport) * 100}%)`);
+		}]), y = a(() => `translateX(${h.value.findIndex((e) => e.value === s.viewport) * 100}%)`);
 		return (r, a) => (n(), o("div", {
 			role: "radiogroup",
 			"aria-label": i(m).viewport.label,
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
 			style: c({
-				gridTemplateColumns: `repeat(${v.value.length}, 1fr)`,
+				gridTemplateColumns: `repeat(${h.value.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
 		}, [u("div", {
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
 			style: c({
 				left: "4px",
-				width: `calc((100% - 8px) / ${v.value.length})`,
+				width: `calc((100% - 8px) / ${h.value.length})`,
 				transform: y.value,
 				backgroundColor: "var(--tpl-bg)",
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4), (n(!0), o(d, null, t(v.value, (t) => (n(), o("button", {
+		}, null, 4), (n(!0), o(d, null, t(h.value, (t) => (n(), o("button", {
 			key: t.value,
 			role: "radio",
 			"aria-checked": e.viewport === t.value,
@@ -51,54 +51,54 @@ var b = ["aria-label"], x = [
 			}),
 			title: t.label,
 			onClick: (e) => p("change", t.value)
-		}, [t.value === "desktop" ? (n(), l(i(g), {
+		}, [t.value === "desktop" ? (n(), l(i(_), {
 			key: 0,
 			size: 18,
 			"stroke-width": 1.5
-		})) : (n(), l(i(_), {
+		})) : (n(), l(i(v), {
 			key: 1,
 			size: 18,
 			"stroke-width": 1.5
-		})), u("span", null, f(t.label), 1)], 12, x))), 128))], 12, b));
+		})), u("span", null, f(t.label), 1)], 12, S))), 128))], 12, x));
 	}
-}), C = ["aria-label"], w = [
+}), w = ["aria-label"], T = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], T = /* @__PURE__ */ r({
+], E = /* @__PURE__ */ r({
 	__name: "MergeTagModeToggle",
 	props: { sampleMode: { type: Boolean } },
 	emits: ["change"],
-	setup(r, { emit: g }) {
-		let _ = r, b = g, { t: x } = h(), S = e(m, []), T = a(() => p(S)), E = a(() => [{
+	setup(r, { emit: _ }) {
+		let v = r, x = _, { t: S } = g(), C = e(m, h), E = a(() => p(C.value)), D = a(() => [{
 			value: !0,
-			label: x.mergeTagPreview.sample
+			label: S.mergeTagPreview.sample
 		}, {
 			value: !1,
-			label: x.mergeTagPreview.labelView
-		}]), D = a(() => `translateX(${E.value.findIndex((e) => e.value === _.sampleMode) * 100}%)`);
-		return (e, a) => T.value ? (n(), o("div", {
+			label: S.mergeTagPreview.labelView
+		}]), O = a(() => `translateX(${D.value.findIndex((e) => e.value === v.sampleMode) * 100}%)`);
+		return (e, a) => E.value ? (n(), o("div", {
 			key: 0,
 			role: "radiogroup",
-			"aria-label": i(x).mergeTagPreview.label,
+			"aria-label": i(S).mergeTagPreview.label,
 			"data-testid": "merge-tag-mode-toggle",
 			class: "tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1",
 			style: c({
-				gridTemplateColumns: `repeat(${E.value.length}, 1fr)`,
+				gridTemplateColumns: `repeat(${D.value.length}, 1fr)`,
 				backgroundColor: "var(--tpl-bg-hover)"
 			})
 		}, [u("div", {
 			class: "tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]",
 			style: c({
 				left: "4px",
-				width: `calc((100% - 8px) / ${E.value.length})`,
-				transform: D.value,
+				width: `calc((100% - 8px) / ${D.value.length})`,
+				transform: O.value,
 				backgroundColor: "var(--tpl-bg)",
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			})
-		}, null, 4), (n(!0), o(d, null, t(E.value, (e) => (n(), o("button", {
+		}, null, 4), (n(!0), o(d, null, t(D.value, (e) => (n(), o("button", {
 			key: String(e.value),
 			role: "radio",
 			"aria-checked": r.sampleMode === e.value,
@@ -109,19 +109,19 @@ var b = ["aria-label"], x = [
 				transition: "color 120ms cubic-bezier(0.16, 1, 0.3, 1)"
 			}),
 			title: e.label,
-			onClick: (t) => b("change", e.value)
-		}, [e.value ? (n(), l(i(v), {
+			onClick: (t) => x("change", e.value)
+		}, [e.value ? (n(), l(i(y), {
 			key: 0,
 			size: 18,
 			"stroke-width": 1.5
-		})) : (n(), l(i(y), {
+		})) : (n(), l(i(b), {
 			key: 1,
 			size: 18,
 			"stroke-width": 1.5
-		})), u("span", null, f(e.label), 1)], 12, w))), 128))], 12, C)) : s("", !0);
+		})), u("span", null, f(e.label), 1)], 12, T))), 128))], 12, w)) : s("", !0);
 	}
 });
 //#endregion
-export { S as n, T as t };
+export { C as n, E as t };
 
-//# sourceMappingURL=MergeTagModeToggle-DYxkAGtA.js.map
+//# sourceMappingURL=MergeTagModeToggle-n3nvSNeQ.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-DYxkAGtA.js.map → MergeTagModeToggle-n3nvSNeQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-DYxkAGtA.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      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\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      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\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      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\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      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\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"MergeTagModeToggle-n3nvSNeQ.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      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\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      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\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY, NO_MERGE_TAGS } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, NO_MERGE_TAGS);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags.value));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      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\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY, NO_MERGE_TAGS } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, NO_MERGE_TAGS);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags.value));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      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\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{ParagraphEditor-Bd-GQXee.js → ParagraphEditor-DO4RzP8l.js}

@@ -1,15 +1,15 @@
-import { E as e, F as t, N as n, Q as r, R as i, S as a, at as o, b as s, c, ct as l, d as u, f as d, g as f, h as p, l as m, lt as h, m as g, p as _, q as v, u as y, ut as b, y as x } from "./draggable-kbOhCgnk.js";
+import { E as e, F as t, N as n, Q as r, R as i, S as a, at as o, b as s, c, ct as l, d as u, f as d, g as f, h as p, l as m, lt as h, m as g, p as _, q as v, u as y, ut as b, y as x } from "./draggable-IB4x6w2O.js";
 import { R as S } from "./src-Dwgq7hf4.js";
-import { E as C, S as w, T, x as E } from "./useEditorCore-Cs7rYVBo.js";
-import { t as D } from "./dist-CAFTQ6Y2.js";
-import { T as O, W as k, Y as A, g as ee, k as j, q as M, v as N } from "./keys-DBFhDFng.js";
-import { t as P } from "./useI18n-Dlo7R9RA.js";
-import { n as F } from "./usePopoverPosition-ElP3ABaV.js";
-import { Ct as I, P as te, R as ne, Rt as re, S as ie, Vt as ae, _ as oe, at as se, ct as ce, g as le, h as ue, it as de, l as fe, m as pe, ot as me, ut as he, x as ge, y as _e } from "./icons-BUlqGSgd.js";
+import { t as C } from "./dist-CXB2_kBa.js";
+import { C as w, S as T, b as E, y as D } from "./useEditorCore-BHmIp1hW.js";
+import { K as O, T as k, Y as A, Z as j, g as ee, k as M, v as N } from "./keys-dJbD1QPs.js";
+import { t as P } from "./useI18n-DTZ9sIcv.js";
+import { n as F } from "./usePopoverPosition-gB9q-ql7.js";
+import { Ct as I, P as te, R as ne, Rt as re, S as ie, Vt as ae, _ as oe, at as se, c as ce, ct as le, g as ue, h as de, it as fe, m as pe, ot as me, ut as he, x as ge, y as _e } from "./icons-BKkJ-5xF.js";
 import { t as L } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { a as ve, n as ye, o as be, s as xe } from "./styleConstants-C_YAPdQS.js";
-import { t as R } from "./ColorPicker-LcrzgMoW.js";
-import { n as z, t as B } from "./RichTextEditorContent-D_rb0rmU.js";
+import { c as R } from "./LogicTagInsertButton-DpyPozop.js";
+import { n as z, t as B } from "./RichTextEditorContent-Ch5zeyZ7.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var V = [
 	"aria-label",
@@ -19,8 +19,8 @@ var V = [
 	__name: "EmojiPickerDropdown",
 	emits: ["insert"],
 	setup(e, { emit: i }) {
-		let a = i, { categories: u, isOpen: h, toggle: g, close: v } = T(), { t: x, format: S } = P(), w = r(null), E = r(null), O = d(() => h.value);
-		C(w, O), D(E, () => {
+		let a = i, { categories: u, isOpen: h, toggle: g, close: v } = T(), { t: x, format: S } = P(), E = r(null), D = r(null), O = d(() => h.value);
+		w(E, O), C(D, () => {
 			h.value && v();
 		});
 		function k(e) {
@@ -28,7 +28,7 @@ var V = [
 		}
 		return (e, r) => (n(), f("div", {
 			ref_key: "rootRef",
-			ref: E,
+			ref: D,
 			class: "tpl:relative"
 		}, [_("button", {
 			type: "button",
@@ -46,7 +46,7 @@ var V = [
 			key: 0,
 			id: "tpl-emoji-picker",
 			ref_key: "pickerRef",
-			ref: w,
+			ref: E,
 			role: "dialog",
 			"aria-modal": "false",
 			"aria-label": o(x).paragraphEditor.insertEmoji,
@@ -158,7 +158,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 		"add-logic-tag"
 	],
 	setup(t, { emit: r }) {
-		let i = t, a = r, c = e(k, null), l = e(M, null), m = A(N, "ParagraphToolbar"), v = F(), S = e(j, null), C = e(O, null), w = e(ee, null), T = d(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = P(), D = m.fonts;
+		let i = t, a = r, c = e(O, null), l = e(A, null), m = j(N, "ParagraphToolbar"), v = F(), S = e(M, null), C = e(k, null), w = e(ee, null), T = d(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = P(), D = m.fonts;
 		function I(e) {
 			i.editor?.chain().focus().insertContent(e).run();
 		}
@@ -300,7 +300,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(fe),
+				icon: o(ce),
 				label: o(E).paragraphEditor.underline,
 				active: t.editor.isActive("underline"),
 				onClick: r[2] ||= (e) => t.editor.chain().focus().toggleUnderline().run()
@@ -342,7 +342,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(ce),
+				icon: o(le),
 				label: o(E).paragraphEditor.addLink,
 				active: t.editor.isActive("link"),
 				onClick: r[6] ||= (e) => a("open-link-dialog")
@@ -384,7 +384,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(oe),
+				icon: o(ue),
 				label: o(E).paragraphEditor.alignCenter,
 				active: t.editor.isActive({ textAlign: "center" }),
 				onClick: r[10] ||= (e) => t.editor.chain().focus().setTextAlign("center").run()
@@ -394,7 +394,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(le),
+				icon: o(de),
 				label: o(E).paragraphEditor.alignRight,
 				active: t.editor.isActive({ textAlign: "right" }),
 				onClick: r[11] ||= (e) => t.editor.chain().focus().setTextAlign("right").run()
@@ -404,7 +404,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(ue),
+				icon: o(oe),
 				label: o(E).paragraphEditor.alignJustify,
 				active: t.editor.isActive({ textAlign: "justify" }),
 				onClick: r[12] ||= (e) => t.editor.chain().focus().setTextAlign("justify").run()
@@ -467,7 +467,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				size: 16,
 				"stroke-width": 2
 			}), x(" " + b(o(E).logicTag.insertShort), 1)], 8, Ae)], 64)) : p("", !0)
-		])], 64)) : (n(), f("div", je, [s(o(de), {
+		])], 64)) : (n(), f("div", je, [s(o(fe), {
 			class: "tpl-spinner",
 			size: 14,
 			"stroke-width": 2
@@ -481,25 +481,25 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 	},
 	emits: ["done"],
 	setup(t, { emit: r }) {
-		let i = t, a = r, c = F(), l = e(ee, null), u = S(l?.content?.value?.settings ?? { locale: "en" }) === "rtl" ? "right" : "left", { editor: d, EditorContent: p, isLoading: m, initError: h, retry: g, showLinkDialog: _, linkUrl: y, linkColor: b, linkDialogRef: x, canRequestMergeTag: C, canInsertLogicTag: T, openLinkDialog: D, insertLink: O, removeLink: k, closeLinkDialog: A, handleLinkKeydown: j, handleAddMergeTag: M, handleAddLogicTag: N } = E({
+		let i = t, a = r, c = F(), l = e(ee, null), u = S(l?.content?.value?.settings ?? { locale: "en" }) === "rtl" ? "right" : "left", { editor: d, EditorContent: p, isLoading: m, initError: h, retry: g, showLinkDialog: _, linkUrl: y, linkColor: b, linkDialogRef: x, canRequestMergeTag: C, canInsertLogicTag: w, openLinkDialog: T, insertLink: O, removeLink: k, closeLinkDialog: A, handleLinkKeydown: j, handleAddMergeTag: M, handleAddLogicTag: N } = D({
 			blockId: () => i.block.id,
 			blockContent: () => i.block.content,
 			onDone: () => a("done"),
 			editorName: "ParagraphEditor",
 			async loadExtensions({ mergeTags: e, syntax: t, triggerChar: n, autocompleteEnabled: r, suggestionEmptyText: i }) {
-				let [{ Editor: a, EditorContent: o }, { default: s }, { default: l }, { default: d }, { default: f }, { default: p }, { default: m }, { TextStyle: h }, { default: g }, { default: _ }, { default: v }, { MergeTagNode: y, MergeTagSuggestion: b, LogicMergeTagNode: x, FontSize: S, LineHeight: C, LetterSpacing: T, LineBoundaryKeys: E }] = await Promise.all([
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.r),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.i),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.l),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.a),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.c),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.s),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.o),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.p),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.f),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.d),
-					import("./tiptap-Epe8m3Vo.js").then((e) => e.u),
-					import("./extensions-B8_jnIkD.js")
+				let [{ Editor: a, EditorContent: o }, { default: s }, { default: l }, { default: d }, { default: f }, { default: p }, { default: m }, { TextStyle: h }, { default: g }, { default: _ }, { default: v }, { MergeTagNode: y, MergeTagSuggestion: b, LogicMergeTagNode: x, FontSize: S, LineHeight: C, LetterSpacing: w, LineBoundaryKeys: T }] = await Promise.all([
+					import("./tiptap-DhLuKyDc.js").then((e) => e.i),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.a),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.u),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.o),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.l),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.c),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.s),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.m),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.p),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.f),
+					import("./tiptap-DhLuKyDc.js").then((e) => e.d),
+					import("./extensions-Bhu8UEE5.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -516,7 +516,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 						d,
 						f,
 						p,
-						w(l).configure({
+						E(l).configure({
 							openOnClick: !1,
 							HTMLAttributes: {
 								target: "_blank",
@@ -533,15 +533,15 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 						v.configure({ multicolor: !0 }),
 						S,
 						C,
-						T,
+						w,
 						y.configure({
-							mergeTags: e,
+							mergeTags: () => e.value,
 							syntax: t
 						}),
 						x.configure({ syntax: t }),
-						E,
-						...r && n && e.length > 0 ? [b.configure({
-							mergeTags: e,
+						T,
+						...r && n && e.value.length > 0 ? [b.configure({
+							mergeTags: () => e.value,
 							char: n,
 							emptyText: i,
 							popoverRoot: c
@@ -556,8 +556,8 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"toolbar-position": t.toolbarPosition,
 				"is-loading": o(m),
 				"can-request-merge-tag": o(C),
-				"can-insert-logic-tag": o(T),
-				onOpenLinkDialog: o(D),
+				"can-insert-logic-tag": o(w),
+				onOpenLinkDialog: o(T),
 				onAddMergeTag: o(M),
 				onAddLogicTag: o(N)
 			}, null, 8, [
@@ -613,4 +613,4 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 //#endregion
 export { Pe as default };
 
-//# sourceMappingURL=ParagraphEditor-Bd-GQXee.js.map
+//# sourceMappingURL=ParagraphEditor-DO4RzP8l.js.map