@templatical/editor 0.40.0 → 0.42.0

package/dist/cdn/chunks/{MediaPanels-Bq5b-XJM.js → MediaPanels-DMXRQVqg.js}

@@ -11,7 +11,7 @@ var o = /* @__PURE__ */ t({
 		popoverTarget: {}
 	},
 	setup(t) {
-		let o = t, s = a(async () => (await import("./editor-modal-zxvWz8R6.js")).MediaLibraryModal);
+		let o = t, s = a(async () => (await import("./editor-modal-BdI0iA5r.js")).MediaLibraryModal);
 		function c(e) {
 			o.feature.select(e);
 		}
@@ -42,4 +42,4 @@ var o = /* @__PURE__ */ t({
 //#endregion
 export { o as default };
 
-//# sourceMappingURL=MediaPanels-Bq5b-XJM.js.map
+//# sourceMappingURL=MediaPanels-DMXRQVqg.js.map

package/dist/cdn/chunks/{MediaPanels-Bq5b-XJM.js.map → MediaPanels-DMXRQVqg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MediaPanels-Bq5b-XJM.js","names":[],"sources":["../../../src/components/MediaPanels.vue","../../../src/components/MediaPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the media library modal.\n *\n * The modal is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens Browse —\n * `defineAsyncComponent` triggers its `import()` on first render, not at\n * definition time. `Editor.vue` in turn lazy-loads *this* wrapper and renders\n * it only when a `MediaProvider` is configured, so a consumer without one\n * downloads none of it. A callback-only `onRequestMedia` never mounts this.\n *\n * Never static-import `MediaLibraryModal` into `Editor.vue`: that collapses\n * the modal into the main entry for every consumer. Guarded by\n * `tests/editorMediaProvider.test.ts` and `tests/cdn-chunk-granularity.test.ts`.\n *\n * The editor compiles `@templatical/media-library` into this async chunk\n * (same Vue instance as the rest of the editor). Standalone `init()` /\n * `MediaLibraryModal` in a host Vue app still live on that package.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { MediaAsset, MediaProvider } from \"@templatical/types\";\nimport type { UseMediaFeatureReturn } from \"../composables/useMediaFeature\";\n\nconst props = defineProps<{\n  feature: UseMediaFeatureReturn;\n  provider: MediaProvider;\n  locale?: string;\n  uiTheme?: string;\n  popoverTarget?: HTMLElement | null;\n}>();\n\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  const m = await import(\"@templatical/media-library\");\n  return m.MediaLibraryModal;\n});\n\nfunction handleSelect(asset: MediaAsset): void {\n  props.feature.select(asset);\n}\n</script>\n\n<template>\n  <MediaLibraryModal\n    v-if=\"feature.isModalOpen.value\"\n    :visible=\"feature.isModalOpen.value\"\n    :provider=\"provider\"\n    :accept=\"feature.accept.value\"\n    :popover-target=\"popoverTarget\"\n    :locale=\"locale\"\n    :ui-theme=\"uiTheme\"\n    :template-id=\"feature.templateId.value\"\n    :on-error=\"feature.onError\"\n    @select=\"handleSelect\"\n    @close=\"feature.close()\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the media library modal.\n *\n * The modal is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens Browse —\n * `defineAsyncComponent` triggers its `import()` on first render, not at\n * definition time. `Editor.vue` in turn lazy-loads *this* wrapper and renders\n * it only when a `MediaProvider` is configured, so a consumer without one\n * downloads none of it. A callback-only `onRequestMedia` never mounts this.\n *\n * Never static-import `MediaLibraryModal` into `Editor.vue`: that collapses\n * the modal into the main entry for every consumer. Guarded by\n * `tests/editorMediaProvider.test.ts` and `tests/cdn-chunk-granularity.test.ts`.\n *\n * The editor compiles `@templatical/media-library` into this async chunk\n * (same Vue instance as the rest of the editor). Standalone `init()` /\n * `MediaLibraryModal` in a host Vue app still live on that package.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { MediaAsset, MediaProvider } from \"@templatical/types\";\nimport type { UseMediaFeatureReturn } from \"../composables/useMediaFeature\";\n\nconst props = defineProps<{\n  feature: UseMediaFeatureReturn;\n  provider: MediaProvider;\n  locale?: string;\n  uiTheme?: string;\n  popoverTarget?: HTMLElement | null;\n}>();\n\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  const m = await import(\"@templatical/media-library\");\n  return m.MediaLibraryModal;\n});\n\nfunction handleSelect(asset: MediaAsset): void {\n  props.feature.select(asset);\n}\n</script>\n\n<template>\n  <MediaLibraryModal\n    v-if=\"feature.isModalOpen.value\"\n    :visible=\"feature.isModalOpen.value\"\n    :provider=\"provider\"\n    :accept=\"feature.accept.value\"\n    :popover-target=\"popoverTarget\"\n    :locale=\"locale\"\n    :ui-theme=\"uiTheme\"\n    :template-id=\"feature.templateId.value\"\n    :on-error=\"feature.onError\"\n    @select=\"handleSelect\"\n    @close=\"feature.close()\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAQR,IAAoB,EAAqB,aAEtC,MADS,OAAO,8BAAA,CACd,iBACV;EAED,SAAS,EAAa,GAAyB;GAC7C,EAAM,QAAQ,OAAO,CAAK;EAC5B;mBAKU,EAAA,QAAQ,YAAY,SAD5B,EAAA,GAAA,EAYE,EAAA,CAAA,GAAA;;GAVC,SAAS,EAAA,QAAQ,YAAY;GAC7B,UAAU,EAAA;GACV,QAAQ,EAAA,QAAQ,OAAO;GACvB,kBAAgB,EAAA;GAChB,QAAQ,EAAA;GACR,YAAU,EAAA;GACV,eAAa,EAAA,QAAQ,WAAW;GAChC,YAAU,EAAA,QAAQ;GAClB,UAAQ;GACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}
+{"version":3,"file":"MediaPanels-DMXRQVqg.js","names":[],"sources":["../../../src/components/MediaPanels.vue","../../../src/components/MediaPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the media library modal.\n *\n * The modal is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens Browse —\n * `defineAsyncComponent` triggers its `import()` on first render, not at\n * definition time. `Editor.vue` in turn lazy-loads *this* wrapper and renders\n * it only when a `MediaProvider` is configured, so a consumer without one\n * downloads none of it. A callback-only `onRequestMedia` never mounts this.\n *\n * Never static-import `MediaLibraryModal` into `Editor.vue`: that collapses\n * the modal into the main entry for every consumer. Guarded by\n * `tests/editorMediaProvider.test.ts` and `tests/cdn-chunk-granularity.test.ts`.\n *\n * The editor compiles `@templatical/media-library` into this async chunk\n * (same Vue instance as the rest of the editor). Standalone `init()` /\n * `MediaLibraryModal` in a host Vue app still live on that package.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { MediaAsset, MediaProvider } from \"@templatical/types\";\nimport type { UseMediaFeatureReturn } from \"../composables/useMediaFeature\";\n\nconst props = defineProps<{\n  feature: UseMediaFeatureReturn;\n  provider: MediaProvider;\n  locale?: string;\n  uiTheme?: string;\n  popoverTarget?: HTMLElement | null;\n}>();\n\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  const m = await import(\"@templatical/media-library\");\n  return m.MediaLibraryModal;\n});\n\nfunction handleSelect(asset: MediaAsset): void {\n  props.feature.select(asset);\n}\n</script>\n\n<template>\n  <MediaLibraryModal\n    v-if=\"feature.isModalOpen.value\"\n    :visible=\"feature.isModalOpen.value\"\n    :provider=\"provider\"\n    :accept=\"feature.accept.value\"\n    :popover-target=\"popoverTarget\"\n    :locale=\"locale\"\n    :ui-theme=\"uiTheme\"\n    :template-id=\"feature.templateId.value\"\n    :on-error=\"feature.onError\"\n    @select=\"handleSelect\"\n    @close=\"feature.close()\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the media library modal.\n *\n * The modal is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens Browse —\n * `defineAsyncComponent` triggers its `import()` on first render, not at\n * definition time. `Editor.vue` in turn lazy-loads *this* wrapper and renders\n * it only when a `MediaProvider` is configured, so a consumer without one\n * downloads none of it. A callback-only `onRequestMedia` never mounts this.\n *\n * Never static-import `MediaLibraryModal` into `Editor.vue`: that collapses\n * the modal into the main entry for every consumer. Guarded by\n * `tests/editorMediaProvider.test.ts` and `tests/cdn-chunk-granularity.test.ts`.\n *\n * The editor compiles `@templatical/media-library` into this async chunk\n * (same Vue instance as the rest of the editor). Standalone `init()` /\n * `MediaLibraryModal` in a host Vue app still live on that package.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { MediaAsset, MediaProvider } from \"@templatical/types\";\nimport type { UseMediaFeatureReturn } from \"../composables/useMediaFeature\";\n\nconst props = defineProps<{\n  feature: UseMediaFeatureReturn;\n  provider: MediaProvider;\n  locale?: string;\n  uiTheme?: string;\n  popoverTarget?: HTMLElement | null;\n}>();\n\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  const m = await import(\"@templatical/media-library\");\n  return m.MediaLibraryModal;\n});\n\nfunction handleSelect(asset: MediaAsset): void {\n  props.feature.select(asset);\n}\n</script>\n\n<template>\n  <MediaLibraryModal\n    v-if=\"feature.isModalOpen.value\"\n    :visible=\"feature.isModalOpen.value\"\n    :provider=\"provider\"\n    :accept=\"feature.accept.value\"\n    :popover-target=\"popoverTarget\"\n    :locale=\"locale\"\n    :ui-theme=\"uiTheme\"\n    :template-id=\"feature.templateId.value\"\n    :on-error=\"feature.onError\"\n    @select=\"handleSelect\"\n    @close=\"feature.close()\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAQR,IAAoB,EAAqB,aAEtC,MADS,OAAO,8BAAA,CACd,iBACV;EAED,SAAS,EAAa,GAAyB;GAC7C,EAAM,QAAQ,OAAO,CAAK;EAC5B;mBAKU,EAAA,QAAQ,YAAY,SAD5B,EAAA,GAAA,EAYE,EAAA,CAAA,GAAA;;GAVC,SAAS,EAAA,QAAQ,YAAY;GAC7B,UAAU,EAAA;GACV,QAAQ,EAAA,QAAQ,OAAO;GACvB,kBAAgB,EAAA;GAChB,QAAQ,EAAA;GACR,YAAU,EAAA;GACV,eAAa,EAAA,QAAQ,WAAW;GAChC,YAAU,EAAA,QAAQ;GAClB,UAAQ;GACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}

package/dist/cdn/chunks/{MergeTagInput--qTYfCWk.js → MergeTagInput-JcBzr77a.js}

@@ -1,7 +1,7 @@
 import { N as e, Q as t, S as n, at as r, b as i, ct as a, g as o, h as s, m as c, p as l } from "./draggable-IB4x6w2O.js";
 import { t as u } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { p as d } from "./styleConstants-C_YAPdQS.js";
-import { i as f, n as p, r as m, t as h } from "./LogicTagInsertButton-CHc1yZ9v.js";
+import { i as f, n as p, r as m, t as h } from "./LogicTagInsertButton-3pIbVE9p.js";
 //#region src/components/MergeTagInput.vue?vue&type=script&setup=true&lang.ts
 var g = { key: 0 }, _ = {
 	key: 0,
@@ -80,4 +80,4 @@ var g = { key: 0 }, _ = {
 //#endregion
 export { S as t };
 
-//# sourceMappingURL=MergeTagInput--qTYfCWk.js.map
+//# sourceMappingURL=MergeTagInput-JcBzr77a.js.map

package/dist/cdn/chunks/{MergeTagInput--qTYfCWk.js.map → MergeTagInput-JcBzr77a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagInput--qTYfCWk.js","names":[],"sources":["../../../src/components/MergeTagInput.vue","../../../src/components/MergeTagInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n  replaceMergeTagAt,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n      @repick=\"replaceMergeTagAt\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n  replaceMergeTagAt,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n      @repick=\"replaceMergeTagAt\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;GA+DM,IACJ;;;;;;;;;;;;;EAxDF,IAAM,IAAQ,GAcR,IAAO,GAUP,IAAW,EAA6B,IAAI,GAE5C,EACJ,aACA,iBACA,uBACA,yBACA,sBACA,yBACA,cACA,iBACA,gBACA,eAAe,GACf,gBACA,eACA,eACA,mBACA,mBACA,yBACE,EAAiB;GACnB,kBAAkB,EAAM;GACxB,OAAO,MAAU,EAAK,qBAAqB,CAAK;GAChD,YAAY;EACd,CAAC;EAED,SAAS,EAAc,GAA4B;GACjD,AAAK,EAAmB,CAAK,KAC3B,EAAK,WAAW,CAAK;EAEzB;mBAOa,EAAA,CAAA,KAAY,CAAK,EAAA,CAAA,KAA5B,EAAA,GAAA,EAwBM,OAAA,GAAA,CAvBJ,EAOE,GAAA;GANC,UAAU,EAAA,CAAA;GACV,iBAAe;GACf,OAAO,EAAA;GACP,QAAM,EAAA,CAAA;GACN,SAAO,EAAA,CAAA;GACP,UAAQ,EAAA,CAAA;;;;;;;EAGH,CAAA,GAAA,EAAA,CAAA,KAAsB,EAAA,CAAA,KAD9B,EAAA,GAAA,EAcM,OAdN,GAcM,CATI,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA;EAGH,GAAA,MAAA,GAAA,CAAA,YAAA,UAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA;EAIf,GAAA,MAAA,GAAA,CAAA,YAAA,UAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,MAAA,EAAA,GAAA,EA2BM,OAAA,GAAA,CA1BJ,EAUE,SAAA;GATI,SAAA;GAAJ,KAAI;GACH,MAAM,EAAA;GACN,OAAK,EAAA,CAAG,EAAA,CAAA,GAAU,EAAA,kBAAsB,EAAA,MAAK,CAAA,CAAA;GAC7C,OAAO,EAAA;GACP,aAAa,EAAA;GACb,SAAK,AAAA,EAAA,QAAE,GAAA,MAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,WAAS;GACT,SAAK,AAAA,EAAA,QAAE,GAAA,MAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,QAAI,AAAA,EAAA,QAAE,GAAA,MAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;EAGD,GAAA,MAAA,IAAA,CAAA,GAAA,EAAA,CAAA,KAAsB,EAAA,CAAA,KAD9B,EAAA,GAAA,EAcM,OAdN,GAcM,CATI,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA;EAGH,GAAA,MAAA,GAAA,CAAA,YAAA,UAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA"}
+{"version":3,"file":"MergeTagInput-JcBzr77a.js","names":[],"sources":["../../../src/components/MergeTagInput.vue","../../../src/components/MergeTagInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n  replaceMergeTagAt,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n      @repick=\"replaceMergeTagAt\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n  replaceMergeTagAt,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n      @repick=\"replaceMergeTagAt\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;GA+DM,IACJ;;;;;;;;;;;;;EAxDF,IAAM,IAAQ,GAcR,IAAO,GAUP,IAAW,EAA6B,IAAI,GAE5C,EACJ,aACA,iBACA,uBACA,yBACA,sBACA,yBACA,cACA,iBACA,gBACA,eAAe,GACf,gBACA,eACA,eACA,mBACA,mBACA,yBACE,EAAiB;GACnB,kBAAkB,EAAM;GACxB,OAAO,MAAU,EAAK,qBAAqB,CAAK;GAChD,YAAY;EACd,CAAC;EAED,SAAS,EAAc,GAA4B;GACjD,AAAK,EAAmB,CAAK,KAC3B,EAAK,WAAW,CAAK;EAEzB;mBAOa,EAAA,CAAA,KAAY,CAAK,EAAA,CAAA,KAA5B,EAAA,GAAA,EAwBM,OAAA,GAAA,CAvBJ,EAOE,GAAA;GANC,UAAU,EAAA,CAAA;GACV,iBAAe;GACf,OAAO,EAAA;GACP,QAAM,EAAA,CAAA;GACN,SAAO,EAAA,CAAA;GACP,UAAQ,EAAA,CAAA;;;;;;;EAGH,CAAA,GAAA,EAAA,CAAA,KAAsB,EAAA,CAAA,KAD9B,EAAA,GAAA,EAcM,OAdN,GAcM,CATI,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA;EAGH,GAAA,MAAA,GAAA,CAAA,YAAA,UAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA;EAIf,GAAA,MAAA,GAAA,CAAA,YAAA,UAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,MAAA,EAAA,GAAA,EA2BM,OAAA,GAAA,CA1BJ,EAUE,SAAA;GATI,SAAA;GAAJ,KAAI;GACH,MAAM,EAAA;GACN,OAAK,EAAA,CAAG,EAAA,CAAA,GAAU,EAAA,kBAAsB,EAAA,MAAK,CAAA,CAAA;GAC7C,OAAO,EAAA;GACP,aAAa,EAAA;GACb,SAAK,AAAA,EAAA,QAAE,GAAA,MAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,WAAS;GACT,SAAK,AAAA,EAAA,QAAE,GAAA,MAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACP,QAAI,AAAA,EAAA,QAAE,GAAA,MAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;EAGD,GAAA,MAAA,IAAA,CAAA,GAAA,EAAA,CAAA,KAAsB,EAAA,CAAA,KAD9B,EAAA,GAAA,EAcM,OAdN,GAcM,CATI,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA;EAGH,GAAA,MAAA,GAAA,CAAA,YAAA,UAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,KADR,EAAA,GAAA,EAIE,GAAA;;GAFC,UAAU,EAAA,CAAA;GACV,UAAQ,EAAA,CAAA"}

package/dist/cdn/chunks/{MergeTagModeToggle-CdWIGo3Q.js → MergeTagModeToggle-CYmueXS2.js}

@@ -1,8 +1,8 @@
 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-DveVYoWS.js";
+import { u as p } from "./src-BR3I3gOW.js";
 import { F as m, O as h } from "./keys-DCWeHkSF.js";
 import { t as g } from "./useI18n-CyO_Nmca.js";
-import { $ as _, D as v, E as y, p as b } from "./icons-BKkJ-5xF.js";
+import { D as _, O as v, et as y, m as b } from "./icons-Bad3WZ3G.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
 var x = ["aria-label"], S = [
 	"aria-checked",
@@ -20,7 +20,7 @@ var x = ["aria-label"], S = [
 		}, {
 			value: "mobile",
 			label: m.viewport.mobile
-		}]), y = a(() => `translateX(${h.value.findIndex((e) => e.value === s.viewport) * 100}%)`);
+		}]), _ = 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,
@@ -34,7 +34,7 @@ var x = ["aria-label"], S = [
 			style: c({
 				left: "4px",
 				width: `calc((100% - 8px) / ${h.value.length})`,
-				transform: y.value,
+				transform: _.value,
 				backgroundColor: "var(--tpl-bg)",
 				boxShadow: "var(--tpl-shadow)",
 				transition: "transform 120ms cubic-bezier(0.16, 1, 0.3, 1)"
@@ -51,7 +51,7 @@ var x = ["aria-label"], S = [
 			}),
 			title: t.label,
 			onClick: (e) => p("change", t.value)
-		}, [t.value === "desktop" ? (n(), l(i(_), {
+		}, [t.value === "desktop" ? (n(), l(i(y), {
 			key: 0,
 			size: 18,
 			"stroke-width": 1.5
@@ -70,14 +70,14 @@ var x = ["aria-label"], S = [
 	__name: "MergeTagModeToggle",
 	props: { sampleMode: { type: Boolean } },
 	emits: ["change"],
-	setup(r, { emit: _ }) {
-		let v = r, x = _, { t: S } = g(), C = e(h, m), E = a(() => p(C.value)), D = a(() => [{
+	setup(r, { emit: v }) {
+		let y = r, x = v, { t: S } = g(), C = e(h, m), E = a(() => p(C.value)), D = a(() => [{
 			value: !0,
 			label: S.mergeTagPreview.sample
 		}, {
 			value: !1,
 			label: S.mergeTagPreview.labelView
-		}]), O = a(() => `translateX(${D.value.findIndex((e) => e.value === v.sampleMode) * 100}%)`);
+		}]), O = a(() => `translateX(${D.value.findIndex((e) => e.value === y.sampleMode) * 100}%)`);
 		return (e, a) => E.value ? (n(), o("div", {
 			key: 0,
 			role: "radiogroup",
@@ -110,7 +110,7 @@ var x = ["aria-label"], S = [
 			}),
 			title: e.label,
 			onClick: (t) => x("change", e.value)
-		}, [e.value ? (n(), l(i(y), {
+		}, [e.value ? (n(), l(i(_), {
 			key: 0,
 			size: 18,
 			"stroke-width": 1.5
@@ -124,4 +124,4 @@ var x = ["aria-label"], S = [
 //#endregion
 export { C as n, E as t };
 
-//# sourceMappingURL=MergeTagModeToggle-CdWIGo3Q.js.map
+//# sourceMappingURL=MergeTagModeToggle-CYmueXS2.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-CdWIGo3Q.js.map → MergeTagModeToggle-CYmueXS2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-CdWIGo3Q.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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"}
+{"version":3,"file":"MergeTagModeToggle-CYmueXS2.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-BilbVtrG.js → ParagraphEditor-DbjFDnYm.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-IB4x6w2O.js";
-import { G as S } from "./src-DveVYoWS.js";
+import { G as S } from "./src-BR3I3gOW.js";
 import { t as C } from "./dist-CXB2_kBa.js";
-import { C as w, b as T, w as E, x as D } from "./useEditorCore-CQraU2s_.js";
-import { $ as O, A as k, E as A, J as j, Z as ee, g as M, v as N } from "./keys-DCWeHkSF.js";
+import { _ as w, b as T, g as E, y as D } from "./useEditorCore-yd40TFKy.js";
+import { $ as O, A as k, E as A, J as ee, Z as j, g as M, v as N } from "./keys-DCWeHkSF.js";
 import { t as P } from "./useI18n-CyO_Nmca.js";
-import { n as F } from "./usePopoverPosition-BJRvAb-h.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 { n as F } from "./usePopoverPosition-DGXjXKjM.js";
+import { C as te, F as ne, Ht as re, S as ie, _ as ae, at as oe, b as se, dt as ce, g as le, h as ue, l as de, lt as fe, ot as pe, st as me, v as he, wt as I, z as ge, zt as _e } from "./icons-Bad3WZ3G.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 { c as R } from "./LogicTagInsertButton-CHc1yZ9v.js";
-import { n as z, t as B } from "./RichTextEditorContent-Fzuu9pLP.js";
+import { c as R } from "./LogicTagInsertButton-3pIbVE9p.js";
+import { n as z, t as B } from "./RichTextEditorContent-BtM1or8A.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 } = w(), { t: x, format: S } = P(), T = r(null), D = r(null), O = d(() => h.value);
-		E(T, O), C(D, () => {
+		let a = i, { categories: u, isOpen: h, toggle: g, close: v } = D(), { t: x, format: S } = P(), w = r(null), E = r(null), O = d(() => h.value);
+		T(w, O), C(E, () => {
 			h.value && v();
 		});
 		function k(e) {
@@ -28,7 +28,7 @@ var V = [
 		}
 		return (e, r) => (n(), f("div", {
 			ref_key: "rootRef",
-			ref: D,
+			ref: E,
 			class: "tpl:relative"
 		}, [_("button", {
 			type: "button",
@@ -46,7 +46,7 @@ var V = [
 			key: 0,
 			id: "tpl-emoji-picker",
 			ref_key: "pickerRef",
-			ref: T,
+			ref: w,
 			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(j, null), l = e(ee, null), m = O(N, "ParagraphToolbar"), v = F(), S = e(k, null), C = e(A, null), w = e(M, null), T = d(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = P(), D = m.fonts;
+		let i = t, a = r, c = e(ee, null), l = e(j, null), m = O(N, "ParagraphToolbar"), v = F(), S = e(k, null), C = e(A, null), w = e(M, 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();
 		}
@@ -279,7 +279,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(ae),
+				icon: o(re),
 				label: o(E).paragraphEditor.bold,
 				active: t.editor.isActive("bold"),
 				"stroke-width": 2.5,
@@ -290,7 +290,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(he),
+				icon: o(ce),
 				label: o(E).paragraphEditor.italic,
 				active: t.editor.isActive("italic"),
 				onClick: r[1] ||= (e) => t.editor.chain().focus().toggleItalic().run()
@@ -300,7 +300,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(ce),
+				icon: o(de),
 				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(te),
 				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()
@@ -331,7 +331,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(_e),
+				icon: o(se),
 				label: o(E).paragraphEditor.superscript,
 				active: t.editor.isActive("superscript"),
 				onClick: r[5] ||= (e) => t.editor.chain().focus().toggleSuperscript().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(le),
+				icon: o(fe),
 				label: o(E).paragraphEditor.addLink,
 				active: t.editor.isActive("link"),
 				onClick: r[6] ||= (e) => a("open-link-dialog")
@@ -353,7 +353,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			])
 		]), _("div", Oe, [
 			s(q, {
-				icon: o(se),
+				icon: o(pe),
 				label: o(E).paragraphEditor.bulletList,
 				active: t.editor.isActive("bulletList"),
 				onClick: r[7] ||= (e) => t.editor.chain().focus().toggleBulletList().run()
@@ -374,7 +374,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(pe),
+				icon: o(ue),
 				label: o(E).paragraphEditor.alignLeft,
 				active: t.editor.isActive({ textAlign: "left" }),
 				onClick: r[9] ||= (e) => t.editor.chain().focus().setTextAlign("left").run()
@@ -384,7 +384,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(ue),
+				icon: o(ae),
 				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(de),
+				icon: o(le),
 				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(oe),
+				icon: o(he),
 				label: o(E).paragraphEditor.alignJustify,
 				active: t.editor.isActive({ textAlign: "justify" }),
 				onClick: r[12] ||= (e) => t.editor.chain().focus().setTextAlign("justify").run()
@@ -440,7 +440,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(ne),
+				icon: o(ge),
 				label: o(E).paragraphEditor.clearFormatting,
 				onClick: r[13] ||= (e) => t.editor.chain().focus().clearNodes().unsetAllMarks().run()
 			}, null, 8, ["icon", "label"]),
@@ -452,7 +452,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"aria-label": o(E).mergeTag.insert,
 				title: o(E).mergeTag.insert,
 				onClick: r[14] ||= (e) => a("add-merge-tag")
-			}, [s(o(te), {
+			}, [s(o(ne), {
 				size: 16,
 				"stroke-width": 2
 			}), x(" " + b(o(E).mergeTag.insertShort), 1)], 8, ke)], 64)) : p("", !0),
@@ -463,11 +463,11 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				title: o(E).logicTag.insert,
 				"data-testid": "insert-logic-button",
 				onClick: r[15] ||= (e) => a("add-logic-tag")
-			}, [s(o(re), {
+			}, [s(o(_e), {
 				size: 16,
 				"stroke-width": 2
 			}), x(" " + b(o(E).logicTag.insertShort), 1)], 8, Ae)], 64)) : p("", !0)
-		])], 64)) : (n(), f("div", je, [s(o(fe), {
+		])], 64)) : (n(), f("div", je, [s(o(oe), {
 			class: "tpl-spinner",
 			size: 14,
 			"stroke-width": 2
@@ -481,13 +481,13 @@ 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(M, 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: E, insertLink: O, removeLink: k, closeLinkDialog: A, handleLinkKeydown: j, handleAddMergeTag: ee, handleAddLogicTag: N } = T({
+		let i = t, a = r, c = F(), l = e(M, 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: j, handleAddLogicTag: N } = E({
 			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: w, LineBoundaryKeys: T }] = await Promise.all([
+				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-DhLuKyDc.js").then((e) => e.i),
 					import("./tiptap-DhLuKyDc.js").then((e) => e.a),
 					import("./tiptap-DhLuKyDc.js").then((e) => e.u),
@@ -499,7 +499,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 					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-CafoGF65.js")
+					import("./extensions-DK_9-6Bd.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,
-						D(l).configure({
+						w(l).configure({
 							openOnClick: !1,
 							HTMLAttributes: {
 								target: "_blank",
@@ -533,13 +533,13 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 						v.configure({ multicolor: !0 }),
 						S,
 						C,
-						w,
+						T,
 						y.configure({
 							mergeTags: () => e.value,
 							syntax: t
 						}),
 						x.configure({ syntax: t }),
-						T,
+						E,
 						...r && n && e.value.length > 0 ? [b.configure({
 							mergeTags: () => e.value,
 							char: n,
@@ -556,9 +556,9 @@ 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(w),
-				onOpenLinkDialog: o(E),
-				onAddMergeTag: o(ee),
+				"can-insert-logic-tag": o(T),
+				onOpenLinkDialog: o(D),
+				onAddMergeTag: o(j),
 				onAddLogicTag: o(N)
 			}, null, 8, [
 				"editor",
@@ -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-BilbVtrG.js.map
+//# sourceMappingURL=ParagraphEditor-DbjFDnYm.js.map