@templatical/editor 0.38.0 → 0.39.0

package/dist/cdn/chunks/{MergeTagModeToggle-DYxkAGtA.js → MergeTagModeToggle-QGTUIWWo.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 { 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-DXYJTLZF.js";
+import { t as g } from "./useI18n-BhE7ndNr.js";
+import { $ as _, D as v, E as y, p as b } from "./icons-DdrAicM2.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-QGTUIWWo.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-DYxkAGtA.js.map → MergeTagModeToggle-QGTUIWWo.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-QGTUIWWo.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/{MergeTagSuggestion-t8Uj00Er.js → MergeTagSuggestion-CY6WK8Eb.js}

@@ -179,14 +179,14 @@ var D = p.create({
 	name: "mergeTagSuggestion",
 	addOptions() {
 		return {
-			mergeTags: [],
+			mergeTags: () => [],
 			char: "{{",
 			emptyText: "No matching merge tags",
 			popoverRoot: null
 		};
 	},
 	addProseMirrorPlugins() {
-		let e = this.options.mergeTags, t = this.options.emptyText, n = this.options.popoverRoot, r = {
+		let e = this.options.mergeTags(), t = this.options.emptyText, n = this.options.popoverRoot, r = {
 			char: this.options.char,
 			allowSpaces: !1,
 			startOfLine: !1,
@@ -212,4 +212,4 @@ var D = p.create({
 //#endregion
 export { w as i, T as n, C as r, D as t };
 
-//# sourceMappingURL=MergeTagSuggestion-t8Uj00Er.js.map
+//# sourceMappingURL=MergeTagSuggestion-CY6WK8Eb.js.map

package/dist/cdn/chunks/MergeTagSuggestion-CY6WK8Eb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MergeTagSuggestion-CY6WK8Eb.js","names":["$emit"],"sources":["../../../src/components/MergeTagSuggestionList.vue","../../../src/components/MergeTagSuggestionList.vue","../../../src/extensions/MergeTagSuggestion.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    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)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"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\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    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)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"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\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","import type { MergeTag } from \"@templatical/types\";\nimport { Extension } from \"@tiptap/core\";\nimport Suggestion, {\n  type SuggestionOptions,\n  type SuggestionProps,\n  type SuggestionKeyDownProps,\n} from \"@tiptap/suggestion\";\nimport { type App, createApp, h, ref, type Ref } from \"vue\";\nimport MergeTagSuggestionList from \"../components/MergeTagSuggestionList.vue\";\n\nconst MAX_RESULTS = 10;\n\n// Monotonic counter for unique listbox IDs across multiple popup instances.\nlet POPUP_ID_SEQ = 0;\n\nexport interface MergeTagSuggestionOptions {\n  /** Available merge tags */\n  /**\n   * Read live, not captured: the list can be replaced while a block is being\n   * edited (`editor.setMergeTags`), and a snapshot taken when the extension\n   * was configured would keep suggesting the old tags.\n   */\n  mergeTags: () => MergeTag[];\n  /** Trigger string (e.g. \"{{\", \"*|\", \"%%=\") */\n  char: string;\n  /** Localized empty-state label */\n  emptyText: string;\n  /**\n   * Mount target for the suggestion popup. When provided with a non-null\n   * `.value`, the popup attaches into that element instead of\n   * `document.body` — keeping it inside the editor's effective DOM root\n   * (shadow-aware). Pass the ref returned by `usePopoverRoot()`.\n   *\n   * Falls back to `document.body` when omitted or when the ref's value is\n   * null at popup-open time (e.g. headless/test editors without an editor\n   * shell). Preserves pre-Phase-3 behavior for callers that don't migrate.\n   */\n  popoverRoot?: Ref<HTMLElement | null> | null;\n}\n\n/**\n * Filter merge tags by query against label and value (case-insensitive).\n * Capped at MAX_RESULTS. Exported for testing.\n */\nexport function filterMergeTags(tags: MergeTag[], query: string): MergeTag[] {\n  const trimmed = query.trim().toLowerCase();\n  if (trimmed === \"\") {\n    return tags.slice(0, MAX_RESULTS);\n  }\n  return tags\n    .filter((tag) => {\n      const label = tag.label.toLowerCase();\n      const value = tag.value.toLowerCase();\n      return label.includes(trimmed) || value.includes(trimmed);\n    })\n    .slice(0, MAX_RESULTS);\n}\n\n/**\n * Handle a keydown event against a list of items. Returns whether the\n * event was handled (so the suggestion plugin can stop propagation).\n * Exported for testing.\n */\nexport function handleSuggestionKeyDown(\n  event: KeyboardEvent,\n  items: MergeTag[],\n  selectedIndex: Ref<number>,\n  onSelect: (item: MergeTag) => void,\n): boolean {\n  if (items.length === 0) {\n    if (event.key === \"Enter\" || event.key === \"Tab\") return true;\n    return false;\n  }\n\n  if (event.key === \"ArrowDown\") {\n    selectedIndex.value = (selectedIndex.value + 1) % items.length;\n    return true;\n  }\n  if (event.key === \"ArrowUp\") {\n    selectedIndex.value =\n      (selectedIndex.value - 1 + items.length) % items.length;\n    return true;\n  }\n  if (event.key === \"Enter\" || event.key === \"Tab\") {\n    onSelect(items[selectedIndex.value]);\n    return true;\n  }\n  return false;\n}\n\n/** Options for opening the merge-tag popup. */\nexport interface MergeTagPopupOpenOptions {\n  /** Filtered tags to render. */\n  items: MergeTag[];\n  /**\n   * Anchor rect getter (the caret rect). Same contract as\n   * `@tiptap/suggestion`'s `clientRect`: viewport coordinates, re-read on\n   * every reposition so the popup tracks the caret through scroll.\n   */\n  getRect: (() => DOMRect | null) | null;\n  /**\n   * Element that owns the ARIA combobox state and serves as the theme +\n   * scroll-ancestor anchor — the ProseMirror `view.dom` in rich text, the\n   * `<input>`/`<textarea>` in a field.\n   */\n  anchorEl: HTMLElement | null;\n  /** Called with the item the user picks. */\n  onCommand: (item: MergeTag) => void;\n}\n\n/** Options for updating the popup after the query changed. */\nexport interface MergeTagPopupUpdateOptions {\n  items: MergeTag[];\n  getRect: (() => DOMRect | null) | null;\n  onCommand: (item: MergeTag) => void;\n}\n\n/**\n * Imperative handle over a single merge-tag suggestion popup.\n * Both the TipTap suggestion renderer and the input/textarea autocomplete\n * driver drive the SAME controller, so the popup's rendering, positioning,\n * scroll-tracking, ARIA wiring, and keyboard behavior are identical across\n * rich-text and plain-field surfaces by construction.\n */\nexport interface MergeTagPopupController {\n  /** Mount the popup and start tracking the caret. */\n  open(options: MergeTagPopupOpenOptions): void;\n  /** Refresh items + anchor after the query changed. */\n  update(options: MergeTagPopupUpdateOptions): void;\n  /**\n   * Handle a navigation/selection key (Arrow/Enter/Tab). Returns whether it\n   * was handled. Does NOT handle Escape — each caller owns Escape (TipTap's\n   * plugin closes via `onExit`; the field driver calls `close()`).\n   */\n  handleKeyDown(event: KeyboardEvent): boolean;\n  /** Unmount the popup, clear ARIA, and detach listeners. Idempotent. */\n  close(): void;\n  /** Whether the popup is currently mounted. */\n  isOpen(): boolean;\n}\n\n/**\n * Creates a merge-tag suggestion popup controller: mount, ARIA wiring,\n * caret-tracking position (flip-above + off-screen freeze), scroll/resize\n * repositioning, and cleanup. Framework-agnostic — it takes a plain caret\n * rect getter and an anchor element, so it serves both the ProseMirror\n * suggestion plugin and native text fields.\n */\nexport function createMergeTagPopup(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): MergeTagPopupController {\n  let app: App | null = null;\n  let container: HTMLElement | null = null;\n  let editableEl: HTMLElement | null = null;\n  const itemsRef = ref<MergeTag[]>([]);\n  const selectedIndex = ref(0);\n  let currentCommand: ((item: MergeTag) => void) | null = null;\n  const listId = `tpl-merge-tag-suggestion-${++POPUP_ID_SEQ}`;\n  let latestClientRect: (() => DOMRect | null) | null = null;\n  let scrollTargets: Array<EventTarget> = [];\n  let pendingRaf: number | null = null;\n\n  function reposition(): void {\n    position(latestClientRect?.() ?? null);\n  }\n\n  /**\n   * Reposition immediately and on the next animation frame.\n   * After a keystroke triggers the suggestion, TipTap may run its\n   * own `scrollIntoView` to keep the caret visible. That scroll\n   * lands AFTER the current task's `position()` call but BEFORE\n   * the browser's next paint, so we re-measure on rAF to catch\n   * the post-scroll caret rect. Without this, the popup pins to\n   * the pre-scroll caret position and ends up offset on slower\n   * runners.\n   */\n  function repositionAfterPaint(): void {\n    reposition();\n    if (pendingRaf !== null) cancelAnimationFrame(pendingRaf);\n    pendingRaf = requestAnimationFrame(() => {\n      pendingRaf = null;\n      reposition();\n    });\n  }\n\n  function collectScrollAncestors(el: HTMLElement | null): HTMLElement[] {\n    // Walk up the DOM finding scrollable ancestors. ProseMirror's\n    // scrollIntoView fires on whichever ancestor scrolls — listening\n    // to all of them ensures we reposition regardless of which one\n    // moves.\n    const result: HTMLElement[] = [];\n    let node: HTMLElement | null = el?.parentElement ?? null;\n    while (\n      node &&\n      // shadow-ok: ancestor walk terminator; not a mount target\n      node !== document.body &&\n      node !== document.documentElement\n    ) {\n      const style = window.getComputedStyle(node);\n      const overflow = style.overflow + style.overflowX + style.overflowY;\n      if (/(auto|scroll|overlay)/.test(overflow)) {\n        result.push(node);\n      }\n      node = node.parentElement;\n    }\n    return result;\n  }\n\n  function attachScrollListeners(viewDom: HTMLElement | null): void {\n    scrollTargets = [window, ...collectScrollAncestors(viewDom)];\n    for (const target of scrollTargets) {\n      target.addEventListener(\"scroll\", reposition, {\n        passive: true,\n        capture: true,\n      });\n    }\n    window.addEventListener(\"resize\", reposition, { passive: true });\n  }\n\n  function detachScrollListeners(): void {\n    for (const target of scrollTargets) {\n      target.removeEventListener(\"scroll\", reposition, {\n        capture: true,\n      } as EventListenerOptions);\n    }\n    window.removeEventListener(\"resize\", reposition);\n    scrollTargets = [];\n  }\n\n  function position(rect: DOMRect | null): void {\n    if (!container || !rect) return;\n    // If the caret has scrolled out of the viewport, freeze the\n    // popup at its last on-screen position. Following the caret\n    // off-screen produces an invisible popup the user can't reach,\n    // and lets pathological scroll loops drag the popup further\n    // each tick.\n    if (rect.bottom < 0 || rect.top > window.innerHeight) return;\n    // Position `absolute` relative to the mount target — the popover root\n    // (`position: relative`) or the <body> fallback. The caret rect is in\n    // viewport space, so subtract the offset parent's rect to get local\n    // coords: a transformed ancestor of the editor becomes the containing\n    // block for a `fixed` popup and would offset it, but not for an\n    // `absolute` popup anchored inside the positioned popover root. The\n    // off-screen freeze and flip-above decisions still use viewport metrics.\n    container.style.position = \"absolute\";\n    container.style.zIndex = \"9999\";\n    const origin = container.offsetParent?.getBoundingClientRect();\n    const originTop = origin?.top ?? 0;\n    const originLeft = origin?.left ?? 0;\n    container.style.left = `${rect.left - originLeft}px`;\n    // Place below caret first; offsetHeight is sync-readable after\n    // the Vue app has mounted (or after onUpdate's reactive flush).\n    container.style.top = `${rect.bottom - originTop}px`;\n    const popupHeight = container.offsetHeight;\n    if (popupHeight === 0) return;\n    const spaceBelow = window.innerHeight - rect.bottom;\n    if (spaceBelow < popupHeight) {\n      // Not enough room below — flip above. Clamp to 0 so the\n      // popup never positions off the top of the viewport.\n      const flippedTop = Math.max(0, rect.top - popupHeight);\n      container.style.top = `${flippedTop - originTop}px`;\n    }\n  }\n\n  function applyThemeContext(\n    target: HTMLElement,\n    editorEl: HTMLElement | null | undefined,\n  ): void {\n    // When the popup mounts to document.body its `position: fixed`\n    // resolves against the viewport — any transform/filter on a\n    // consumer-page ancestor (route transitions, reveal animations,\n    // dark canvas inversion) creates a containing block and moves\n    // fixed descendants with it. Body ancestors don't transform.\n    //\n    // When mounting inside the editor's popover root, the popup is a\n    // descendant of the `.tpl[data-tpl-theme]` root so CSS vars + font\n    // would inherit — but the snapshot below is still emitted inline\n    // because inline declarations win and the cost is negligible. This\n    // keeps a single behavior across both mount paths.\n    //\n    // CSS vars (--tpl-bg-elevated, --tpl-border, etc.) are scoped to\n    // `.tpl` and `.tpl[data-tpl-theme=\"dark\"]` in the editor's\n    // stylesheet, so the popup wouldn't inherit them at body root.\n    // Adding `class=\"tpl\"` would also pull base rules (min-height,\n    // flex, full-page bg) we don't want on a popup. Instead, snapshot\n    // every --tpl-* custom property from the editor's theme root and\n    // re-emit them inline on the popup wrapper.\n    const themeRoot = editorEl?.closest<HTMLElement>(\"[data-tpl-theme]\");\n    if (!themeRoot) return;\n    const themeValue = themeRoot.getAttribute(\"data-tpl-theme\");\n    if (themeValue) target.setAttribute(\"data-tpl-theme\", themeValue);\n    const computed = window.getComputedStyle(themeRoot);\n    for (let i = 0; i < computed.length; i++) {\n      const prop = computed[i];\n      if (prop.startsWith(\"--tpl-\")) {\n        target.style.setProperty(prop, computed.getPropertyValue(prop));\n      }\n    }\n    // The popup is teleported out of the editor wrapper, so it inherits no\n    // font from it: without this its content renders in the page's default font\n    // and ends up at a different height — which changes the flip-above decision\n    // and shifts the popup off the caret. Copy typography too.\n    target.style.fontFamily = computed.fontFamily;\n    target.style.fontSize = computed.fontSize;\n    target.style.lineHeight = computed.lineHeight;\n  }\n\n  function setEditableAria(active: boolean): void {\n    if (!editableEl) return;\n    if (active) {\n      editableEl.setAttribute(\"role\", \"combobox\");\n      editableEl.setAttribute(\"aria-haspopup\", \"listbox\");\n      editableEl.setAttribute(\"aria-expanded\", \"true\");\n      editableEl.setAttribute(\"aria-controls\", listId);\n    } else {\n      editableEl.removeAttribute(\"aria-expanded\");\n      editableEl.removeAttribute(\"aria-controls\");\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      editableEl.removeAttribute(\"aria-haspopup\");\n      editableEl.removeAttribute(\"role\");\n    }\n  }\n\n  function setActiveDescendant(): void {\n    if (!editableEl) return;\n    if (itemsRef.value.length === 0) {\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      return;\n    }\n    editableEl.setAttribute(\n      \"aria-activedescendant\",\n      `${listId}-opt-${selectedIndex.value}`,\n    );\n  }\n\n  function select(item: MergeTag): void {\n    currentCommand?.(item);\n  }\n\n  return {\n    open: ({ items, getRect, anchorEl, onCommand }) => {\n      itemsRef.value = items;\n      selectedIndex.value = 0;\n      currentCommand = onCommand;\n\n      container = document.createElement(\"div\");\n      container.setAttribute(\"data-testid\", \"merge-tag-suggestion-popup\");\n      editableEl = anchorEl;\n      applyThemeContext(container, anchorEl);\n      // Prefer the editor's popover root (shadow-aware) when wired by\n      // the consumer. Falls back to document.body for headless callers\n      // that don't pass `popoverRoot` to configure().\n      // shadow-ok: fallback when popoverRoot wasn't provided (e.g., headless caller); editor mounts pass the shadow-aware root\n      const mountTarget = popoverRootRef?.value ?? document.body;\n      mountTarget.appendChild(container);\n\n      app = createApp({\n        render() {\n          return h(MergeTagSuggestionList, {\n            items: itemsRef.value,\n            selectedIndex: selectedIndex.value,\n            emptyText,\n            listId,\n            onSelect: (item: MergeTag) => select(item),\n            onHover: (index: number) => {\n              selectedIndex.value = index;\n              setActiveDescendant();\n            },\n          });\n        },\n      });\n      app.mount(container);\n      setEditableAria(true);\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n      attachScrollListeners(anchorEl);\n    },\n    update: ({ items, getRect, onCommand }) => {\n      itemsRef.value = items;\n      // Reset selection when item set changes (query changed).\n      if (selectedIndex.value >= items.length) {\n        selectedIndex.value = 0;\n      }\n      currentCommand = onCommand;\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n    },\n    handleKeyDown: (event: KeyboardEvent): boolean => {\n      const handled = handleSuggestionKeyDown(\n        event,\n        itemsRef.value,\n        selectedIndex,\n        select,\n      );\n      if (handled) setActiveDescendant();\n      return handled;\n    },\n    close: () => {\n      // Idempotent: nothing to tear down (and no window listeners to detach)\n      // when the popup was never opened. Keeps repeated close() / close-before-\n      // open cheap and side-effect-free.\n      if (container === null) return;\n      if (pendingRaf !== null) {\n        cancelAnimationFrame(pendingRaf);\n        pendingRaf = null;\n      }\n      detachScrollListeners();\n      setEditableAria(false);\n      app?.unmount();\n      container.remove();\n      app = null;\n      container = null;\n      editableEl = null;\n      currentCommand = null;\n      latestClientRect = null;\n    },\n    isOpen: () => container !== null,\n  };\n}\n\n/**\n * Builds the `@tiptap/suggestion` `render` factory for the merge-tag popup.\n * A thin adapter over {@link createMergeTagPopup}: it maps ProseMirror's\n * `SuggestionProps` (items, `clientRect`, `view.dom`, `command`) onto the\n * controller. Exported as a standalone function so that mapping can be\n * unit-tested with mocked `SuggestionProps` instead of a full editor.\n */\nexport function createMergeTagSuggestionRenderer(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): NonNullable<SuggestionOptions<MergeTag>[\"render\"]> {\n  return () => {\n    const popup = createMergeTagPopup(emptyText, popoverRootRef);\n\n    return {\n      onStart: (props: SuggestionProps<MergeTag>) => {\n        // Use view.dom (ProseMirror contenteditable, actually\n        // attached to the DOM) rather than options.element, which may\n        // be a detached div when no `element` is passed to the editor\n        // constructor (as is the case with @tiptap/vue-3 EditorContent).\n        const viewDom = props.editor.view?.dom as HTMLElement | undefined;\n        popup.open({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          anchorEl: viewDom ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onUpdate: (props: SuggestionProps<MergeTag>) => {\n        popup.update({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onKeyDown: (props: SuggestionKeyDownProps): boolean => {\n        // Escape closes via TipTap's suggestion plugin (→ onExit); report it\n        // handled without selecting.\n        if (props.event.key === \"Escape\") {\n          return true;\n        }\n        return popup.handleKeyDown(props.event);\n      },\n      onExit: () => popup.close(),\n    };\n  };\n}\n\nexport const MergeTagSuggestion = Extension.create<MergeTagSuggestionOptions>({\n  name: \"mergeTagSuggestion\",\n\n  addOptions() {\n    return {\n      mergeTags: () => [],\n      char: \"{{\",\n      emptyText: \"No matching merge tags\",\n      popoverRoot: null,\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const tags = this.options.mergeTags();\n    const emptyText = this.options.emptyText;\n    const popoverRootRef = this.options.popoverRoot;\n\n    const config: Omit<SuggestionOptions<MergeTag>, \"editor\"> = {\n      char: this.options.char,\n      allowSpaces: false,\n      startOfLine: false,\n      // Default is [\" \"] which requires whitespace/line-start before the\n      // trigger char — so `.{{` would not fire. Allow any preceding char.\n      allowedPrefixes: null,\n      items: ({ query }: { query: string }) => filterMergeTags(tags, query),\n      command: ({\n        editor,\n        range,\n        props,\n      }: {\n        editor: SuggestionProps<MergeTag>[\"editor\"];\n        range: { from: number; to: number };\n        props: MergeTag;\n      }) => {\n        // Use insertContentAt for atomic replace (matches the canonical\n        // @tiptap/suggestion + Mention pattern). Avoids edge cases where\n        // chained deleteRange + insertMergeTag fails to insert when the\n        // selection state shifts mid-chain.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(range, {\n            type: \"mergeTagNode\",\n            attrs: { label: props.label, value: props.value },\n          })\n          .run();\n      },\n      render: createMergeTagSuggestionRenderer(emptyText, popoverRootRef),\n    };\n\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...config,\n      }),\n    ];\n  },\n});\n"],"mappings":"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"}

package/dist/cdn/chunks/{ParagraphEditor-Bd-GQXee.js → ParagraphEditor-D1tsPv4v.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 { R as S } from "./src-Dwgq7hf4.js";
-import { E as C, S as w, T, x as E } from "./useEditorCore-Cs7rYVBo.js";
+import { E as C, S as w, T, x as E } from "./useEditorCore-06PtcUi1.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 { K as O, T as k, Y as A, Z as ee, g as j, k as M, v as N } from "./keys-DXYJTLZF.js";
+import { t as P } from "./useI18n-BhE7ndNr.js";
+import { n as F } from "./usePopoverPosition-BPL891uG.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-DdrAicM2.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 { t as R } from "./ColorPicker-BaonTCAQ.js";
+import { n as z, t as B } from "./RichTextEditorContent-BBxzACFQ.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var V = [
 	"aria-label",
@@ -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 = ee(N, "ParagraphToolbar"), v = F(), S = e(M, null), C = e(k, null), w = e(j, 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()
@@ -310,7 +310,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(ie),
+				icon: o(ge),
 				label: o(E).paragraphEditor.strikethrough,
 				active: t.editor.isActive("strike"),
 				onClick: r[3] ||= (e) => t.editor.chain().focus().toggleStrike().run()
@@ -321,7 +321,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(ge),
+				icon: o(ie),
 				label: o(E).paragraphEditor.subscript,
 				active: t.editor.isActive("subscript"),
 				onClick: r[4] ||= (e) => t.editor.chain().focus().toggleSubscript().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")
@@ -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(ue),
 				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(de),
 				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,7 +481,7 @@ 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(j, 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: ee, handleAddMergeTag: M, handleAddLogicTag: N } = E({
 			blockId: () => i.block.id,
 			blockContent: () => i.block.content,
 			onDone: () => a("done"),
@@ -499,7 +499,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 					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")
+					import("./extensions-D2YIhF7u.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -535,13 +535,13 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 						C,
 						T,
 						y.configure({
-							mergeTags: e,
+							mergeTags: () => e.value,
 							syntax: t
 						}),
 						x.configure({ syntax: t }),
 						E,
-						...r && n && e.length > 0 ? [b.configure({
-							mergeTags: e,
+						...r && n && e.value.length > 0 ? [b.configure({
+							mergeTags: () => e.value,
 							char: n,
 							emptyText: i,
 							popoverRoot: c
@@ -595,7 +595,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				onClose: o(A),
 				onInsert: o(O),
 				onRemove: o(k),
-				onKeydown: o(j)
+				onKeydown: o(ee)
 			}, null, 8, [
 				"visible",
 				"is-editing-link",
@@ -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-D1tsPv4v.js.map