@templatical/editor 0.43.3 → 0.44.0

package/dist/cdn/chunks/{MediaPanels-DiKU1r9P.js → MediaPanels-xFpaxFRH.js}

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

package/dist/cdn/chunks/{MediaPanels-DiKU1r9P.js.map → MediaPanels-xFpaxFRH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MediaPanels-DiKU1r9P.js","names":["_openBlock","_createBlock","_unref","_createCommentVNode","_sfc_main","openBlock","defineComponent","unref","createCommentVNode","createBlock","defineAsyncComponent","MediaPanels_default","props","__props","MediaLibraryModal","handleSelect","asset","_cache"],"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,IAAMY,IAAQC,GAQRC,IAAoBJ,EAAqB,aAEtC,MADS,OAAO,8BAAA,CACd,iBACV;EAED,SAASK,EAAa,GAAyB;GAC7C,EAAM,QAAQ,OAAOC,CAAK;EAC5B;mBAKUH,EAAA,QAAQ,YAAY,SAD5Bb,EAAA,GAAAC,EAYEC,EAAAY,CAAA,GAAA;;GAVC,SAASD,EAAA,QAAQ,YAAY;GAC7B,UAAUA,EAAA;GACV,QAAQA,EAAA,QAAQ,OAAO;GACvB,kBAAgBA,EAAA;GAChB,QAAQA,EAAA;GACR,YAAUA,EAAA;GACV,eAAaA,EAAA,QAAQ,WAAW;GAChC,YAAUA,EAAA,QAAQ;GAClB,UAAQE;GACR,SAAK,AAAAE,EAAA,QAAA,MAAEJ,EAAA,QAAQ,MAAK"}
+{"version":3,"file":"MediaPanels-xFpaxFRH.js","names":["_openBlock","_createBlock","_unref","_createCommentVNode","_sfc_main","openBlock","defineComponent","unref","createCommentVNode","createBlock","defineAsyncComponent","MediaPanels_default","props","__props","MediaLibraryModal","handleSelect","asset","_cache"],"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,IAAMY,IAAQC,GAQRC,IAAoBJ,EAAqB,aAEtC,MADS,OAAO,8BAAA,CACd,iBACV;EAED,SAASK,EAAa,GAAyB;GAC7C,EAAM,QAAQ,OAAOC,CAAK;EAC5B;mBAKUH,EAAA,QAAQ,YAAY,SAD5Bb,EAAA,GAAAC,EAYEC,EAAAY,CAAA,GAAA;;GAVC,SAASD,EAAA,QAAQ,YAAY;GAC7B,UAAUA,EAAA;GACV,QAAQA,EAAA,QAAQ,OAAO;GACvB,kBAAgBA,EAAA;GAChB,QAAQA,EAAA;GACR,YAAUA,EAAA;GACV,eAAaA,EAAA,QAAQ,WAAW;GAChC,YAAUA,EAAA,QAAQ;GAClB,UAAQE;GACR,SAAK,AAAAE,EAAA,QAAA,MAAEJ,EAAA,QAAQ,MAAK"}

package/dist/cdn/chunks/{MergeTagInput-CSC64xNL.js → MergeTagInput-DsPKWbWr.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-FNMVxm_V.js";
+import { i as f, n as p, r as m, t as h } from "./LogicTagInsertButton-gc8ICURV.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-CSC64xNL.js.map
+//# sourceMappingURL=MergeTagInput-DsPKWbWr.js.map

package/dist/cdn/chunks/{MergeTagInput-CSC64xNL.js.map → MergeTagInput-DsPKWbWr.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagInput-CSC64xNL.js","names":["_unref","_openBlock","_createElementBlock","_createVNode","MergeTagSegments","_createBlock","MergeTagInsertButton","_createCommentVNode","LogicTagInsertButton","_createElementVNode","_normalizeClass","_sfc_main","openBlock","ref","defineComponent","unref","createVNode","normalizeClass","createElementBlock","createCommentVNode","createBlock","createBaseVNode","_plugin_vue_export_helper_default","inputClass","useMergeTagField","MergeTagInsertButton_default","MergeTagSegments_default","LogicTagInsertButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","displayClass","MergeTagInput_default","__emit","props","__props","emit","inputRef","handleFieldKeydown","value","handleKeydown","event","hasMergeTags","isEditing","segments","startEditing","clearValue","replaceMergeTagAt","canRequestMergeTag","canInsertLogicTag","isRequestingMergeTag","insertMergeTag","isRequestingLogicTag","insertLogicTag","_cache","args","handleInput","handleClick","handleBlur"],"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+DMiC,IACJ;;;;;;;;;;;;;EAxDF,IAAMG,IAAQC,GAcRC,IAAOH,GAUPI,IAAW1B,EAA6B,IAAI,GAE5C,EACJ,aACA,iBACA,uBACA,yBACA,sBACA,yBACA,cACA,iBACA,gBACA,eAAe2B,GACf,gBACA,eACA,eACA,mBACA,mBACA,yBACEhB,EAAiB;GACnB,kBAAkBY,EAAM;GACxB,OAAO,MAAUE,EAAK,qBAAqBG,CAAK;GAChD,YAAYF;EACd,CAAC;EAED,SAASG,EAAc,GAA4B;GACjD,AAAKF,EAAmBG,CAAK,KAC3BL,EAAK,WAAWK,CAAK;EAEzB;mBAOa3C,EAAA4C,CAAA,KAAY,CAAK5C,EAAA6C,CAAA,KAA5B5C,EAAA,GAAAC,EAwBM,OAAA0B,GAAA,CAvBJzB,EAOEC,GAAA;GANC,UAAUJ,EAAA8C,CAAA;GACV,iBAAeb;GACf,OAAOI,EAAA;GACP,QAAMrC,EAAA+C,CAAA;GACN,SAAO/C,EAAAgD,CAAA;GACP,UAAQhD,EAAAiD,CAAA;;;;;;;EAGHjD,CAAAA,GAAAA,EAAAkD,CAAA,KAAsBlD,EAAAmD,CAAA,KAD9BlD,EAAA,GAAAC,EAcM,OAdN2B,GAcM,CATI7B,EAAAkD,CAAA,KADRjD,EAAA,GAAAI,EAIEC,GAAA;;GAFC,UAAUN,EAAAoD,CAAA;GACV,UAAQpD,EAAAqD,CAAA;EAGHrD,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,UAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAmD,CAAA,KADRlD,EAAA,GAAAI,EAIEG,GAAA;;GAFC,UAAUR,EAAAsD,CAAA;GACV,UAAQtD,EAAAuD,CAAA;EAIftD,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,UAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,CAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,CAAAA,CAAAA,MAAAA,EAAA,GAAAC,EA2BM,OAAA4B,GAAA,CA1BJrB,EAUE,SAAA;GATI,SAAA;GAAJ,KAAI8B;GACH,MAAMF,EAAA;GACN,OAAK3B,EAAA,CAAGV,EAAAuB,CAAA,GAAU,EAAA,kBAAsBc,EAAA,MAAK,CAAA,CAAA;GAC7C,OAAOA,EAAA;GACP,aAAaA,EAAA;GACb,SAAK,AAAAmB,EAAA,QAAE,GAAAC,MAAAzD,EAAA0D,CAAA,KAAA1D,EAAA0D,CAAA,CAAA,CAAA,GAAAD,CAAA;GACP,WAASf;GACT,SAAK,AAAAc,EAAA,QAAE,GAAAC,MAAAzD,EAAA2D,CAAA,KAAA3D,EAAA2D,CAAA,CAAA,CAAA,GAAAF,CAAA;GACP,QAAI,AAAAD,EAAA,QAAE,GAAAC,MAAAzD,EAAA4D,CAAA,KAAA5D,EAAA4D,CAAA,CAAA,CAAA,GAAAH,CAAA;EAGDzD,GAAAA,MAAAA,IAAAA,CAAAA,GAAAA,EAAAkD,CAAA,KAAsBlD,EAAAmD,CAAA,KAD9BlD,EAAA,GAAAC,EAcM,OAdN8B,GAcM,CATIhC,EAAAkD,CAAA,KADRjD,EAAA,GAAAI,EAIEC,GAAA;;GAFC,UAAUN,EAAAoD,CAAA;GACV,UAAQpD,EAAAqD,CAAA;EAGHrD,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,UAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAmD,CAAA,KADRlD,EAAA,GAAAI,EAIEG,GAAA;;GAFC,UAAUR,EAAAsD,CAAA;GACV,UAAQtD,EAAAuD,CAAA"}
+{"version":3,"file":"MergeTagInput-DsPKWbWr.js","names":["_unref","_openBlock","_createElementBlock","_createVNode","MergeTagSegments","_createBlock","MergeTagInsertButton","_createCommentVNode","LogicTagInsertButton","_createElementVNode","_normalizeClass","_sfc_main","openBlock","ref","defineComponent","unref","createVNode","normalizeClass","createElementBlock","createCommentVNode","createBlock","createBaseVNode","_plugin_vue_export_helper_default","inputClass","useMergeTagField","MergeTagInsertButton_default","MergeTagSegments_default","LogicTagInsertButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","displayClass","MergeTagInput_default","__emit","props","__props","emit","inputRef","handleFieldKeydown","value","handleKeydown","event","hasMergeTags","isEditing","segments","startEditing","clearValue","replaceMergeTagAt","canRequestMergeTag","canInsertLogicTag","isRequestingMergeTag","insertMergeTag","isRequestingLogicTag","insertLogicTag","_cache","args","handleInput","handleClick","handleBlur"],"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+DMiC,IACJ;;;;;;;;;;;;;EAxDF,IAAMG,IAAQC,GAcRC,IAAOH,GAUPI,IAAW1B,EAA6B,IAAI,GAE5C,EACJ,aACA,iBACA,uBACA,yBACA,sBACA,yBACA,cACA,iBACA,gBACA,eAAe2B,GACf,gBACA,eACA,eACA,mBACA,mBACA,yBACEhB,EAAiB;GACnB,kBAAkBY,EAAM;GACxB,OAAO,MAAUE,EAAK,qBAAqBG,CAAK;GAChD,YAAYF;EACd,CAAC;EAED,SAASG,EAAc,GAA4B;GACjD,AAAKF,EAAmBG,CAAK,KAC3BL,EAAK,WAAWK,CAAK;EAEzB;mBAOa3C,EAAA4C,CAAA,KAAY,CAAK5C,EAAA6C,CAAA,KAA5B5C,EAAA,GAAAC,EAwBM,OAAA0B,GAAA,CAvBJzB,EAOEC,GAAA;GANC,UAAUJ,EAAA8C,CAAA;GACV,iBAAeb;GACf,OAAOI,EAAA;GACP,QAAMrC,EAAA+C,CAAA;GACN,SAAO/C,EAAAgD,CAAA;GACP,UAAQhD,EAAAiD,CAAA;;;;;;;EAGHjD,CAAAA,GAAAA,EAAAkD,CAAA,KAAsBlD,EAAAmD,CAAA,KAD9BlD,EAAA,GAAAC,EAcM,OAdN2B,GAcM,CATI7B,EAAAkD,CAAA,KADRjD,EAAA,GAAAI,EAIEC,GAAA;;GAFC,UAAUN,EAAAoD,CAAA;GACV,UAAQpD,EAAAqD,CAAA;EAGHrD,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,UAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAmD,CAAA,KADRlD,EAAA,GAAAI,EAIEG,GAAA;;GAFC,UAAUR,EAAAsD,CAAA;GACV,UAAQtD,EAAAuD,CAAA;EAIftD,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,UAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,CAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,CAAAA,CAAAA,MAAAA,EAAA,GAAAC,EA2BM,OAAA4B,GAAA,CA1BJrB,EAUE,SAAA;GATI,SAAA;GAAJ,KAAI8B;GACH,MAAMF,EAAA;GACN,OAAK3B,EAAA,CAAGV,EAAAuB,CAAA,GAAU,EAAA,kBAAsBc,EAAA,MAAK,CAAA,CAAA;GAC7C,OAAOA,EAAA;GACP,aAAaA,EAAA;GACb,SAAK,AAAAmB,EAAA,QAAE,GAAAC,MAAAzD,EAAA0D,CAAA,KAAA1D,EAAA0D,CAAA,CAAA,CAAA,GAAAD,CAAA;GACP,WAASf;GACT,SAAK,AAAAc,EAAA,QAAE,GAAAC,MAAAzD,EAAA2D,CAAA,KAAA3D,EAAA2D,CAAA,CAAA,CAAA,GAAAF,CAAA;GACP,QAAI,AAAAD,EAAA,QAAE,GAAAC,MAAAzD,EAAA4D,CAAA,KAAA5D,EAAA4D,CAAA,CAAA,CAAA,GAAAH,CAAA;EAGDzD,GAAAA,MAAAA,IAAAA,CAAAA,GAAAA,EAAAkD,CAAA,KAAsBlD,EAAAmD,CAAA,KAD9BlD,EAAA,GAAAC,EAcM,OAdN8B,GAcM,CATIhC,EAAAkD,CAAA,KADRjD,EAAA,GAAAI,EAIEC,GAAA;;GAFC,UAAUN,EAAAoD,CAAA;GACV,UAAQpD,EAAAqD,CAAA;EAGHrD,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,UAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAmD,CAAA,KADRlD,EAAA,GAAAI,EAIEG,GAAA;;GAFC,UAAUR,EAAAsD,CAAA;GACV,UAAQtD,EAAAuD,CAAA"}

package/dist/cdn/chunks/{MergeTagModeToggle-027RMXDP.js → MergeTagModeToggle-DU0WqgVH.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-BR3I3gOW.js";
+import { u as p } from "./src-QIGNPFkl.js";
 import { F as m, O as h } from "./keys-DCWeHkSF.js";
 import { t as g } from "./useI18n-CyO_Nmca.js";
-import { D as _, O as v, et as y, m as b } from "./icons-BF0mJX0V.js";
+import { D as _, O as v, et as y, h as b } from "./icons-BjvraR-Y.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
 var x = ["aria-label"], S = [
 	"aria-checked",
@@ -124,4 +124,4 @@ var x = ["aria-label"], S = [
 //#endregion
 export { C as n, E as t };
 
-//# sourceMappingURL=MergeTagModeToggle-027RMXDP.js.map
+//# sourceMappingURL=MergeTagModeToggle-DU0WqgVH.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-027RMXDP.js.map → MergeTagModeToggle-DU0WqgVH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-027RMXDP.js","names":["_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_unref","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_createBlock","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_unref","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_createBlock","_toDisplayString","_createCommentVNode","_sfc_main","inject","renderList","openBlock","defineComponent","unref","computed","createElementBlock","createCommentVNode","normalizeStyle","createBlock","createBaseVNode","Fragment","toDisplayString","hasMergeTagSamples","NO_MERGE_TAGS","MERGE_TAGS_KEY","useI18n","Sparkles","Smartphone","Monitor","TextCursorInput","_hoisted_1$1","_hoisted_2$1","ViewportToggle_default","__emit","props","__props","emit","viewports","t","pillOffset","vp","_hoisted_1","_hoisted_2","MergeTagModeToggle_default","mergeTags","isAvailable","modes","m","mode"],"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-DU0WqgVH.js","names":["_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_unref","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_createBlock","_toDisplayString","_sfc_main","_openBlock","_createElementBlock","_unref","_normalizeStyle","_createElementVNode","_Fragment","_renderList","_createBlock","_toDisplayString","_createCommentVNode","_sfc_main","inject","renderList","openBlock","defineComponent","unref","computed","createElementBlock","createCommentVNode","normalizeStyle","createBlock","createBaseVNode","Fragment","toDisplayString","hasMergeTagSamples","NO_MERGE_TAGS","MERGE_TAGS_KEY","useI18n","Sparkles","Smartphone","Monitor","TextCursorInput","_hoisted_1$1","_hoisted_2$1","ViewportToggle_default","__emit","props","__props","emit","viewports","t","pillOffset","vp","_hoisted_1","_hoisted_2","MergeTagModeToggle_default","mergeTags","isAvailable","modes","m","mode"],"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":";;;;;;;;;;;;;;;;EAMA,IAAMgD,IAAQC,GAIRC,IAAOH,GAIP,EAAE,SAAMR,EAAQ,GAEhBY,IAAYvB,QAAe,CAC/B;GAAE,OAAO;GAA2B,OAAOwB,EAAE,SAAS;EAAQ,GAC9D;GAAE,OAAO;GAA0B,OAAOA,EAAE,SAAS;EAAO,CAC9D,CAAC,GAEKC,IAAazB,QAEV,cADOuB,EAAU,MAAM,WAAW,MAAOG,EAAG,UAAUN,EAAM,QAC9C,IAAQ,IAAI,GAClC;oBAIC9C,EAAA,GAAAC,EA2CM,OAAA;GA1CJ,MAAK;GACJ,cAAYC,EAAAgD,CAAA,CAAC,CAAC,SAAS;GACxB,OAAM;GACL,OAAK/C,EAAA;IAAyC,qBAAA,UAAA8C,EAAA,MAAU,OAAM;;;EAM/D7C,GAAAA,CAAAA,EAUO,OAAA;GATL,OAAM;GACL,OAAKD,EAAA;;IAA+D,OAAA,uBAAA8C,EAAA,MAAU,OAAM;IAAwB,WAAAE,EAAA;;;;;EAU/GnD,GAAAA,MAAAA,CAAAA,IAAAA,EAAA,EAAA,GAAAC,EAoBSI,GAAA,MAAAC,EAnBM2C,EAAA,QAAN,OADTjD,EAAA,GAAAC,EAoBS,UAAA;GAlBN,KAAKmD,EAAG;GACT,MAAK;GACJ,gBAAcL,EAAA,aAAaK,EAAG;GAC9B,cAAYA,EAAG;GAChB,OAAM;GACL,OAAKjD,EAAA;IAA6B,OAAA4C,EAAA,aAAaK,EAAG,QAAA,uBAAA;;;GAOlD,OAAOA,EAAG;GACV,UAAK,MAAEJ,EAAI,UAAWI,EAAG,KAAK;EAEhB,GAAA,CAAAA,EAAG,UAAK,aAAvBpD,EAAA,GAAAO,EAAwEL,EAAAsC,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EACjExC,CAAAA,MAAAA,EAAA,GAAAO,EAAoDL,EAAAqC,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EAC7CnC,CAAAA,IAAAA,EAA2B,QAAA,MAAAI,EAAlB4C,EAAG,KAAK,GAAA,CAAA,CAAA,GAAA,IAAAT,CAAA;;;;;;;;;;;;EE3CvB,IAAMG,IAAQC,GAKRC,IAAOH,GAIP,EAAE,SAAMR,EAAQ,GAEhBmB,IAAYnC,EAAOe,GAAgBD,CAAa,GAChDsB,IAAc/B,QAAeQ,EAAmBsB,EAAU,KAAK,CAAC,GAEhEE,IAAQhC,QAAe,CAC3B;GAAE,OAAO;GAAM,OAAOwB,EAAE,gBAAgB;EAAO,GAC/C;GAAE,OAAO;GAAO,OAAOA,EAAE,gBAAgB;EAAU,CACrD,CAAC,GAEKC,IAAazB,QAEV,cADOgC,EAAM,MAAM,WAAW,MAAMC,EAAE,UAAUb,EAAM,UACxC,IAAQ,IAAI,GAClC;mBAKSW,EAAA,SADR/C,EAAA,GAAAC,EA6CM,OAAA;;GA3CJ,MAAK;GACJ,cAAYC,EAAAsC,CAAA,CAAC,CAAC,gBAAgB;GAC/B,eAAY;GACZ,OAAM;GACL,OAAKrC,EAAA;IAAyC,qBAAA,UAAA6C,EAAA,MAAM,OAAM;;;EAM3D5C,GAAAA,CAAAA,EAUO,OAAA;GATL,OAAM;GACL,OAAKD,EAAA;;IAA+D,OAAA,uBAAA6C,EAAA,MAAM,OAAM;IAAwB,WAAAP,EAAA;;;;;EAU3GzC,GAAAA,MAAAA,CAAAA,IAAAA,EAAA,EAAA,GAAAC,EAoBSI,GAAA,MAAAC,EAnBQ0C,EAAA,QAAR,OADThD,EAAA,GAAAC,EAoBS,UAAA;GAlBN,KAAK,OAAOiD,EAAK,KAAK;GACvB,MAAK;GACJ,gBAAcb,EAAA,eAAea,EAAK;GAClC,cAAYA,EAAK;GAClB,OAAM;GACL,OAAK/C,EAAA;IAA6B,OAAAkC,EAAA,eAAea,EAAK,QAAA,uBAAA;;;GAOtD,OAAOA,EAAK;GACZ,UAAK,MAAEZ,EAAI,UAAWY,EAAK,KAAK;EAEjB,GAAA,CAAAA,EAAK,SAArBlD,EAAA,GAAAO,EAA6DL,EAAA0B,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EACtD5B,CAAAA,MAAAA,EAAA,GAAAO,EAAyDL,EAAA6B,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EAClD3B,CAAAA,IAAAA,EAA6B,QAAA,MAAAI,EAApB0C,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAAN,CAAA"}

package/dist/cdn/chunks/{ParagraphEditor-0Z26-N5u.js → ParagraphEditor-BSDGOsja.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-BR3I3gOW.js";
+import { G as S } from "./src-QIGNPFkl.js";
 import { t as C } from "./dist-CXB2_kBa.js";
-import { _ as w, b as T, g as E, y as D } from "./useEditorCore-DWvAia8X.js";
+import { _ as w, b as T, g as E, y as D } from "./useEditorCore-DjD7fJpq.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-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, lt as de, ot as fe, st as pe, u as me, v as he, wt as I, z as ge, zt as _e } from "./icons-BF0mJX0V.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, lt as ue, m as de, ot as fe, st as pe, u as me, v as he, wt as I, z as ge, zt as _e } from "./icons-BjvraR-Y.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-FNMVxm_V.js";
-import { n as z, t as B } from "./RichTextEditorContent-BOZ_5I76.js";
+import { c as R } from "./LogicTagInsertButton-gc8ICURV.js";
+import { n as z, t as B } from "./RichTextEditorContent-Dkcts8Vh.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var V = [
 	"aria-label",
@@ -342,7 +342,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(de),
+				icon: o(ue),
 				label: o(E).paragraphEditor.addLink,
 				active: t.editor.isActive("link"),
 				onClick: r[6] ||= (e) => a("open-link-dialog")
@@ -374,7 +374,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(ue),
+				icon: o(le),
 				label: o(E).paragraphEditor.alignLeft,
 				active: t.editor.isActive({ textAlign: "left" }),
 				onClick: r[9] ||= (e) => t.editor.chain().focus().setTextAlign("left").run()
@@ -404,7 +404,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(le),
+				icon: o(de),
 				label: o(E).paragraphEditor.alignJustify,
 				active: t.editor.isActive({ textAlign: "justify" }),
 				onClick: r[12] ||= (e) => t.editor.chain().focus().setTextAlign("justify").run()
@@ -499,7 +499,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 					import("./tiptap-02G9FGkl.js").then((e) => e.p),
 					import("./tiptap-02G9FGkl.js").then((e) => e.f),
 					import("./tiptap-02G9FGkl.js").then((e) => e.d),
-					import("./extensions-rPP7qRRm.js")
+					import("./extensions-ClmkNA8R.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -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-0Z26-N5u.js.map
+//# sourceMappingURL=ParagraphEditor-BSDGOsja.js.map