@templatical/editor 0.34.3 → 0.35.0

package/dist/cdn/chunks/{MergeTagModeToggle-B_mUYJo4.js → MergeTagModeToggle-Dz3gxN2y.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-kbOhCgnk.js";
-import { u as p } from "./src-CLoCCDfs.js";
+import { u as p } from "./src-Dwgq7hf4.js";
 import { E as m } from "./keys-DQp8x7Nx.js";
 import { t as h } from "./useI18n-Ct1VIFcf.js";
-import { $ as g, D as _, E as v, p as y } from "./icons-SP5Itd-A.js";
+import { $ as g, D as _, E as v, m as y } from "./icons-BLxcQUck.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
 var b = ["aria-label"], x = [
 	"aria-checked",
@@ -124,4 +124,4 @@ var b = ["aria-label"], x = [
 //#endregion
 export { S as n, T as t };
 
-//# sourceMappingURL=MergeTagModeToggle-B_mUYJo4.js.map
+//# sourceMappingURL=MergeTagModeToggle-Dz3gxN2y.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-B_mUYJo4.js.map → MergeTagModeToggle-Dz3gxN2y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-B_mUYJo4.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAIR,IAAO,GAIP,EAAE,SAAM,EAAQ,GAEhB,IAAY,QAAe,CAC/B;GAAE,OAAO;GAA2B,OAAO,EAAE,SAAS;EAAQ,GAC9D;GAAE,OAAO;GAA0B,OAAO,EAAE,SAAS;EAAO,CAC9D,CAAC,GAEK,IAAa,QAEV,cADO,EAAU,MAAM,WAAW,MAAO,EAAG,UAAU,EAAM,QAC9C,IAAQ,IAAI,GAClC;oBAIC,EAAA,GAAA,EA2CM,OAAA;GA1CJ,MAAK;GACJ,cAAY,EAAA,CAAA,CAAC,CAAC,SAAS;GACxB,OAAM;GACL,OAAK,EAAA;IAAyC,qBAAA,UAAA,EAAA,MAAU,OAAM;;;EAM/D,GAAA,CAAA,EAUO,OAAA;GATL,OAAM;GACL,OAAK,EAAA;;IAA+D,OAAA,uBAAA,EAAA,MAAU,OAAM;IAAwB,WAAA,EAAA;;;;;EAU/G,GAAA,MAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAoBS,GAAA,MAAA,EAnBM,EAAA,QAAN,OADT,EAAA,GAAA,EAoBS,UAAA;GAlBN,KAAK,EAAG;GACT,MAAK;GACJ,gBAAc,EAAA,aAAa,EAAG;GAC9B,cAAY,EAAG;GAChB,OAAM;GACL,OAAK,EAAA;IAA6B,OAAA,EAAA,aAAa,EAAG,QAAA,uBAAA;;;GAOlD,OAAO,EAAG;GACV,UAAK,MAAE,EAAI,UAAW,EAAG,KAAK;EAEhB,GAAA,CAAA,EAAG,UAAK,aAAvB,EAAA,GAAA,EAAwE,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EACjE,CAAA,MAAA,EAAA,GAAA,EAAoD,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EAC7C,CAAA,IAAA,EAA2B,QAAA,MAAA,EAAlB,EAAG,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;EE3CvB,IAAM,IAAQ,GAKR,IAAO,GAIP,EAAE,SAAM,EAAQ,GAEhB,IAAY,EAAO,GAAgB,CAAC,CAAC,GACrC,IAAc,QAAe,EAAmB,CAAS,CAAC,GAE1D,IAAQ,QAAe,CAC3B;GAAE,OAAO;GAAM,OAAO,EAAE,gBAAgB;EAAO,GAC/C;GAAE,OAAO;GAAO,OAAO,EAAE,gBAAgB;EAAU,CACrD,CAAC,GAEK,IAAa,QAEV,cADO,EAAM,MAAM,WAAW,MAAM,EAAE,UAAU,EAAM,UACxC,IAAQ,IAAI,GAClC;mBAKS,EAAA,SADR,EAAA,GAAA,EA6CM,OAAA;;GA3CJ,MAAK;GACJ,cAAY,EAAA,CAAA,CAAC,CAAC,gBAAgB;GAC/B,eAAY;GACZ,OAAM;GACL,OAAK,EAAA;IAAyC,qBAAA,UAAA,EAAA,MAAM,OAAM;;;EAM3D,GAAA,CAAA,EAUO,OAAA;GATL,OAAM;GACL,OAAK,EAAA;;IAA+D,OAAA,uBAAA,EAAA,MAAM,OAAM;IAAwB,WAAA,EAAA;;;;;EAU3G,GAAA,MAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAoBS,GAAA,MAAA,EAnBQ,EAAA,QAAR,OADT,EAAA,GAAA,EAoBS,UAAA;GAlBN,KAAK,OAAO,EAAK,KAAK;GACvB,MAAK;GACJ,gBAAc,EAAA,eAAe,EAAK;GAClC,cAAY,EAAK;GAClB,OAAM;GACL,OAAK,EAAA;IAA6B,OAAA,EAAA,eAAe,EAAK,QAAA,uBAAA;;;GAOtD,OAAO,EAAK;GACZ,UAAK,MAAE,EAAI,UAAW,EAAK,KAAK;EAEjB,GAAA,CAAA,EAAK,SAArB,EAAA,GAAA,EAA6D,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EACtD,CAAA,MAAA,EAAA,GAAA,EAAyD,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EAClD,CAAA,IAAA,EAA6B,QAAA,MAAA,EAApB,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"MergeTagModeToggle-Dz3gxN2y.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}