@templatical/editor 0.16.0 → 0.16.2

package/dist/cdn/chunks/{CountdownBlock-Y-nycxv2.js.map → CountdownBlock-Bul4tczj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownBlock-Y-nycxv2.js","names":[],"sources":["../../../src/components/blocks/CountdownBlock.vue","../../../src/components/blocks/CountdownBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CountdownBlock-Bul4tczj.js","names":[],"sources":["../../../src/components/blocks/CountdownBlock.vue","../../../src/components/blocks/CountdownBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{CountdownToolbar-9LqnhGyh.js → CountdownToolbar-DYvATR0J.js}

@@ -1,7 +1,7 @@
-import { M as e, P as t, V as n, ct as r, f as i, g as a, it as o, m as s, ot as c, p as l, u, v as d, x as f, y as p } from "./draggable-kG-D5Xsm.js";
-import { Lt as m } from "./features-DO71hPJr.js";
-import { f as h } from "./styleConstants-lGobwiLH.js";
-import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-Conp_Pki.js";
+import { M as e, P as t, V as n, ct as r, f as i, g as a, it as o, m as s, ot as c, p as l, u, v as d, x as f, y as p } from "./draggable-D840DIZB.js";
+import { Rt as m } from "./features-C-cjT_8L.js";
+import { f as h, t as g } from "./ColorPicker-BggAWrc9.js";
+import { n as _, r as v, t as y } from "./NumberWithSuffix-BImuhc9K.js";
 //#region src/components/toolbar/CheckboxItem.vue?vue&type=script&setup=true&lang.ts
 var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, x = ["checked"], S = /* @__PURE__ */ f({
 	__name: "CheckboxItem",
@@ -209,4 +209,4 @@ var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:tex
 //#endregion
 export { I as default };
 
-//# sourceMappingURL=CountdownToolbar-9LqnhGyh.js.map
+//# sourceMappingURL=CountdownToolbar-DYvATR0J.js.map

package/dist/cdn/chunks/{CountdownToolbar-9LqnhGyh.js.map → CountdownToolbar-DYvATR0J.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CountdownToolbar-9LqnhGyh.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CountdownToolbar-DYvATR0J.js","names":[],"sources":["../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CheckboxItem.vue","../../../src/components/toolbar/CountdownToolbar.vue","../../../src/components/toolbar/CountdownToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  modelValue: boolean;\n  label: string;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n</script>\n\n<template>\n  <label\n    class=\"tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]\"\n      :checked=\"modelValue\"\n      @change=\"\n        emit('update:modelValue', ($event.target as HTMLInputElement).checked)\n      \"\n    />\n    {{ label }}\n  </label>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"../ColorPicker.vue\";\nimport SlidingPillSelect from \"../SlidingPillSelect.vue\";\nimport FieldRow from \"./FieldRow.vue\";\nimport CheckboxItem from \"./CheckboxItem.vue\";\nimport NumberWithSuffix from \"./NumberWithSuffix.vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { inputClass } from \"../../constants/styleConstants\";\nimport type { CountdownBlock } from \"@templatical/types\";\nimport { computed } from \"vue\";\n\ndefineProps<{\n  block: CountdownBlock;\n  fontFamilies: Array<{ value: string; label: string }>;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update\", updates: Partial<CountdownBlock>): void;\n}>();\n\nconst { t } = useI18n();\n\nconst TIMEZONES = [\n  \"UTC\",\n  \"America/New_York\",\n  \"America/Chicago\",\n  \"America/Denver\",\n  \"America/Los_Angeles\",\n  \"Europe/London\",\n  \"Europe/Berlin\",\n  \"Europe/Paris\",\n  \"Europe/Moscow\",\n  \"Asia/Dubai\",\n  \"Asia/Kolkata\",\n  \"Asia/Shanghai\",\n  \"Asia/Tokyo\",\n  \"Australia/Sydney\",\n  \"Pacific/Auckland\",\n];\n\nconst SEPARATORS = [\n  { value: \":\", label: \":\" },\n  { value: \"-\", label: \"-\" },\n  { value: \" \", label: \"␣\" },\n];\n\ntype UnitKey = \"Days\" | \"Hours\" | \"Minutes\" | \"Seconds\";\nconst UNITS: UnitKey[] = [\"Days\", \"Hours\", \"Minutes\", \"Seconds\"];\n\nconst unitItems = computed(() =>\n  UNITS.map((unit) => ({\n    unit,\n    showKey: `show${unit}` as const,\n    labelKey: `label${unit}` as const,\n    translationKey: unit.toLowerCase() as\n      \"days\" | \"hours\" | \"minutes\" | \"seconds\",\n  })),\n);\n\nfunction updateField(field: keyof CountdownBlock, value: unknown): void {\n  emit(\"update\", { [field]: value } as Partial<CountdownBlock>);\n}\n</script>\n\n<template>\n  <FieldRow :label=\"t.countdown.targetDate\">\n    <input\n      type=\"datetime-local\"\n      :class=\"inputClass\"\n      :value=\"block.targetDate\"\n      @input=\"\n        updateField('targetDate', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.timezone\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.timezone\"\n      @change=\"\n        updateField('timezone', ($event.target as HTMLSelectElement).value)\n      \"\n    >\n      <option v-for=\"tz in TIMEZONES\" :key=\"tz\" :value=\"tz\">{{ tz }}</option>\n    </select>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.display\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <CheckboxItem\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        :model-value=\"block[item.showKey]\"\n        :label=\"t.countdown[item.translationKey]\"\n        @update:model-value=\"updateField(item.showKey, $event)\"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.separator\">\n    <SlidingPillSelect\n      :options=\"SEPARATORS\"\n      :model-value=\"block.separator\"\n      @update:model-value=\"updateField('separator', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.fontFamily\">\n    <select\n      :class=\"inputClass\"\n      :value=\"block.fontFamily || ''\"\n      @change=\"\n        updateField(\n          'fontFamily',\n          ($event.target as HTMLSelectElement).value || undefined,\n        )\n      \"\n    >\n      <option value=\"\">{{ t.countdown.inheritFont }}</option>\n      <option\n        v-for=\"font in fontFamilies\"\n        :key=\"font.value\"\n        :value=\"font.value\"\n      >\n        {{ font.label }}\n      </option>\n    </select>\n  </FieldRow>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.digitFontSize\"\n        :min=\"12\"\n        :max=\"72\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('digitFontSize', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelFontSize\">\n      <NumberWithSuffix\n        :model-value=\"block.labelFontSize\"\n        :min=\"8\"\n        :max=\"24\"\n        suffix=\"px\"\n        @update:model-value=\"updateField('labelFontSize', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-3\">\n    <FieldRow :label=\"t.countdown.digitColor\">\n      <ColorPicker\n        :model-value=\"block.digitColor\"\n        @update:model-value=\"updateField('digitColor', $event)\"\n      />\n    </FieldRow>\n    <FieldRow :label=\"t.countdown.labelColor\">\n      <ColorPicker\n        :model-value=\"block.labelColor\"\n        @update:model-value=\"updateField('labelColor', $event)\"\n      />\n    </FieldRow>\n  </div>\n\n  <FieldRow :label=\"t.countdown.background\">\n    <ColorPicker\n      :model-value=\"block.backgroundColor\"\n      @update:model-value=\"updateField('backgroundColor', $event)\"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.labels\">\n    <div class=\"tpl:grid tpl:grid-cols-2 tpl:gap-2\">\n      <input\n        v-for=\"item in unitItems\"\n        :key=\"item.unit\"\n        type=\"text\"\n        :class=\"inputClass\"\n        :value=\"block[item.labelKey]\"\n        :placeholder=\"t.countdown[item.translationKey]\"\n        @input=\"\n          updateField(item.labelKey, ($event.target as HTMLInputElement).value)\n        \"\n      />\n    </div>\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiry\">\n    <input\n      type=\"text\"\n      :class=\"inputClass\"\n      :value=\"block.expiredMessage\"\n      :placeholder=\"t.countdown.expiredMessagePlaceholder\"\n      @input=\"\n        updateField('expiredMessage', ($event.target as HTMLInputElement).value)\n      \"\n    />\n  </FieldRow>\n\n  <FieldRow :label=\"t.countdown.expiredImageUrl\">\n    <input\n      type=\"url\"\n      :class=\"inputClass\"\n      :value=\"block.expiredImageUrl\"\n      placeholder=\"https://...\"\n      @input=\"\n        updateField(\n          'expiredImageUrl',\n          ($event.target as HTMLInputElement).value,\n        )\n      \"\n    />\n  </FieldRow>\n\n  <CheckboxItem\n    :model-value=\"block.hideOnExpiry\"\n    :label=\"t.countdown.hideOnExpiry\"\n    class=\"tpl:mb-3.5\"\n    @update:model-value=\"updateField('hideOnExpiry', $event)\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{IssuesPanel-BYfGf1rC.js → IssuesPanel-BhHU-hq3.js}

@@ -1,6 +1,6 @@
-import { L as e, M as t, P as n, T as r, ct as i, f as a, g as o, h as s, it as c, m as l, ot as u, p as d, u as f, v as p, x as m, y as h } from "./draggable-kG-D5Xsm.js";
-import { Lt as g, Xt as _, an as v, kt as y, lt as b, xt as x } from "./features-DO71hPJr.js";
-import { Q as S, t as C, z as w } from "./icons-BfP1cRNb.js";
+import { L as e, M as t, P as n, T as r, ct as i, f as a, g as o, h as s, it as c, m as l, ot as u, p as d, u as f, v as p, x as m, y as h } from "./draggable-D840DIZB.js";
+import { At as g, Rt as _, St as v, Zt as y, on as b, ut as x } from "./features-C-cjT_8L.js";
+import { Q as S, t as C, z as w } from "./icons-ay0_fN-T.js";
 //#region src/components/sidebar/IssuesPanel.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:flex tpl:items-center tpl:gap-2" }, D = { class: "tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]" }, O = ["title"], k = {
 	key: 0,
@@ -14,7 +14,7 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 }, N = { class: "tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]" }, P = { class: "tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]" }, F = { class: "tpl:flex tpl:gap-1.5" }, I = ["onClick"], L = ["title", "onClick"], R = /* @__PURE__ */ m({
 	__name: "IssuesPanel",
 	setup(m) {
-		let { t: R, format: z } = g(), B = r(v, null), V = r(_, null), H = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "error")), U = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "warning")), W = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "info")), G = a(() => H.value.length + U.value.length + W.value.length);
+		let { t: R, format: z } = _(), B = r(b, null), V = r(y, null), H = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "error")), U = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "warning")), W = a(() => (B?.issues.value ?? []).filter((e) => e.severity === "info")), G = a(() => H.value.length + U.value.length + W.value.length);
 		function K(e) {
 			V && e.blockId && V.selectBlock(e.blockId);
 		}
@@ -36,21 +36,21 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 			{
 				key: "errors",
 				title: c(R).issues.groupErrors,
-				icon: c(y),
+				icon: c(g),
 				items: H.value,
 				tone: "tpl:text-[var(--tpl-danger)]"
 			},
 			{
 				key: "warnings",
 				title: c(R).issues.groupWarnings,
-				icon: c(b),
+				icon: c(x),
 				items: U.value,
 				tone: "tpl:text-[var(--tpl-warning)]"
 			},
 			{
 				key: "info",
 				title: c(R).issues.groupInfo,
-				icon: c(x),
+				icon: c(v),
 				items: W.value,
 				tone: "tpl:text-[var(--tpl-text-muted)]"
 			}
@@ -94,4 +94,4 @@ var T = { class: "tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4" }, E = { class: "tpl:
 //#endregion
 export { R as default };
 
-//# sourceMappingURL=IssuesPanel-BYfGf1rC.js.map
+//# sourceMappingURL=IssuesPanel-BhHU-hq3.js.map

package/dist/cdn/chunks/{IssuesPanel-BYfGf1rC.js.map → IssuesPanel-BhHU-hq3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"IssuesPanel-BYfGf1rC.js","names":[],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (issue.blockId) editor.selectBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (issue.blockId) editor.selectBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"IssuesPanel-BhHU-hq3.js","names":[],"sources":["../../../src/components/sidebar/IssuesPanel.vue","../../../src/components/sidebar/IssuesPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (issue.blockId) editor.selectBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport {\n  ListChecks,\n  AlertCircle,\n  AlertTriangle,\n  Info,\n  ArrowRight,\n  Wrench,\n} from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY, EDITOR_KEY } from \"../../keys\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\nconst { t, format } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\nconst editor = inject(EDITOR_KEY, null);\n\nconst errors = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"error\"),\n);\nconst warnings = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"warning\"),\n);\nconst infos = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.severity === \"info\"),\n);\n\nconst totalCount = computed(\n  () => errors.value.length + warnings.value.length + infos.value.length,\n);\n\nfunction jumpTo(issue: LintIssue): void {\n  if (!editor) return;\n  if (issue.blockId) editor.selectBlock(issue.blockId);\n}\n\nfunction applyFix(issue: LintIssue): void {\n  lint?.applyFix(issue);\n}\n</script>\n\n<template>\n  <div class=\"tpl:flex tpl:flex-col tpl:gap-4 tpl:p-4\">\n    <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <ListChecks :size=\"16\" :stroke-width=\"1.5\" />\n      <h3\n        class=\"tpl:m-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.issues.panelTitle }}\n      </h3>\n      <span\n        v-if=\"totalCount > 0\"\n        class=\"tpl:ml-auto tpl:rounded-full tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-0.5 tpl:text-[11px] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"format(t.issues.issueCountTooltip, { count: totalCount })\"\n      >\n        {{ totalCount }}\n      </span>\n    </header>\n\n    <div\n      v-if=\"!lint || lint.unavailable.value\"\n      class=\"tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      <!-- Quality package not available; render nothing visible beyond a hint. -->\n    </div>\n\n    <div\n      v-else-if=\"totalCount === 0\"\n      class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{ t.issues.emptyState }}\n    </div>\n\n    <template v-else>\n      <section\n        v-for=\"group in [\n          {\n            key: 'errors',\n            title: t.issues.groupErrors,\n            icon: AlertCircle,\n            items: errors,\n            tone: 'tpl:text-[var(--tpl-danger)]',\n          },\n          {\n            key: 'warnings',\n            title: t.issues.groupWarnings,\n            icon: AlertTriangle,\n            items: warnings,\n            tone: 'tpl:text-[var(--tpl-warning)]',\n          },\n          {\n            key: 'info',\n            title: t.issues.groupInfo,\n            icon: Info,\n            items: infos,\n            tone: 'tpl:text-[var(--tpl-text-muted)]',\n          },\n        ]\"\n        :key=\"group.key\"\n      >\n        <header\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:mb-2 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-[11px] tpl:font-semibold tpl:uppercase tpl:tracking-wide\"\n          :class=\"group.tone\"\n        >\n          <component :is=\"group.icon\" :size=\"12\" :stroke-width=\"2\" />\n          {{ group.title }}\n          <span class=\"tpl:ml-auto tpl:font-normal tpl:opacity-70\">\n            {{ group.items.length }}\n          </span>\n        </header>\n        <ul\n          v-if=\"group.items.length > 0\"\n          class=\"tpl:m-0 tpl:mb-3 tpl:flex tpl:list-none tpl:flex-col tpl:gap-2 tpl:p-0\"\n        >\n          <li\n            v-for=\"issue in group.items\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n          >\n            <p class=\"tpl:m-0 tpl:mb-2 tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </p>\n            <p\n              class=\"tpl:m-0 tpl:mb-2 tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </p>\n            <div class=\"tpl:flex tpl:gap-1.5\">\n              <button\n                v-if=\"issue.blockId\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-[var(--tpl-text)]\"\n                @click=\"jumpTo(issue)\"\n              >\n                <ArrowRight :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.jump }}\n              </button>\n              <button\n                v-if=\"issue.fix\"\n                type=\"button\"\n                class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-md tpl:bg-[var(--tpl-primary)] tpl:px-2 tpl:py-1 tpl:text-[11px] tpl:font-medium tpl:text-white\"\n                :title=\"issue.fix.description\"\n                @click=\"applyFix(issue)\"\n              >\n                <Wrench :size=\"10\" :stroke-width=\"2\" />\n                {{ t.issues.fix }}\n              </button>\n            </div>\n          </li>\n        </ul>\n      </section>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{MergeTagSuggestion-DQzKlLH7.js → MergeTagSuggestion-jesxS7An.js}

@@ -1,5 +1,5 @@
-import { C as e, M as t, P as n, Z as r, ct as i, g as a, h as o, l as s, ot as c, p as l, r as u, u as d, x as f } from "./draggable-kG-D5Xsm.js";
-import { h as p, m } from "./tiptap-DVHUKGZf.js";
+import { C as e, M as t, P as n, Z as r, ct as i, g as a, h as o, l as s, ot as c, p as l, r as u, u as d, x as f } from "./draggable-D840DIZB.js";
+import { h as p, m } from "./tiptap-zpXk5mN4.js";
 //#region src/components/MergeTagSuggestionList.vue?vue&type=script&setup=true&lang.ts
 var h = ["id"], g = {
 	key: 0,
@@ -210,4 +210,4 @@ var D = p.create({
 //#endregion
 export { w as i, T as n, C as r, D as t };
 
-//# sourceMappingURL=MergeTagSuggestion-DQzKlLH7.js.map
+//# sourceMappingURL=MergeTagSuggestion-jesxS7An.js.map

package/dist/cdn/chunks/{MergeTagSuggestion-DQzKlLH7.js.map → MergeTagSuggestion-jesxS7An.js.map}

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

package/dist/cdn/chunks/{ModuleBrowserModal-EzKgW5TG.js → ModuleBrowserModal-BGd5Ryyx.js}

@@ -1,7 +1,7 @@
-import { H as e, L as t, M as n, P as r, V as ee, Z as i, a as te, b as a, ct as o, f as s, g as c, h as ne, it as l, l as u, m as d, o as re, p as f, st as ie, u as p, x as m, y as h, z as ae } from "./draggable-kG-D5Xsm.js";
-import { Lt as oe, O as se, Xt as ce, ln as g, rn as le, rt as ue, st as de, ut as fe } from "./features-DO71hPJr.js";
-import { A as _, y as pe } from "./icons-BfP1cRNb.js";
-import { t as v } from "./blockTypeIcons-d4Sb61H-.js";
+import { H as e, L as t, M as n, P as r, V as ee, Z as i, a as te, b as a, ct as o, f as s, g as c, h as ne, it as l, l as u, m as d, o as re, p as f, st as ie, u as p, x as m, y as h, z as ae } from "./draggable-D840DIZB.js";
+import { O as oe, Rt as se, Zt as ce, ct as le, dt as ue, in as de, it as fe, un as g } from "./features-C-cjT_8L.js";
+import { A as _, y as pe } from "./icons-ay0_fN-T.js";
+import { t as v } from "./blockTypeIcons-Cx1FAqL6.js";
 //#region src/cloud/components/ModuleBrowserModal.vue?vue&type=script&setup=true&lang.ts
 var me = {
 	role: "dialog",
@@ -40,7 +40,7 @@ var me = {
 	props: { visible: { type: Boolean } },
 	emits: ["close", "insert"],
 	setup(m, { emit: B }) {
-		let Te = m, V = B, Ee = a(() => import("./ModulePreviewCanvas-DxbSzXm8.js")), { t: De } = oe(), { t: H } = ue(), U = g(le, "ModuleBrowserModal"), W = g(ce, "ModuleBrowserModal"), G = i(""), K = i(null), q = i(null), J = i("end"), Y = s(() => {
+		let Te = m, V = B, Ee = a(() => import("./ModulePreviewCanvas-Hx6SCCjB.js")), { t: De } = se(), { t: H } = fe(), U = g(de, "ModuleBrowserModal"), W = g(ce, "ModuleBrowserModal"), G = i(""), K = i(null), q = i(null), J = i("end"), Y = s(() => {
 			let e = U.modules.value;
 			if (!G.value) return e;
 			let t = G.value.toLowerCase();
@@ -105,7 +105,7 @@ var me = {
 		function Me(e) {
 			e.key === "Escape" && $(), e.key === "Enter" && X.value && (e.preventDefault(), Q());
 		}
-		return (i, a) => (n(), d(se, {
+		return (i, a) => (n(), d(oe, {
 			visible: m.visible,
 			onClose: $,
 			onKeydown: Me
@@ -115,7 +115,7 @@ var me = {
 					"aria-label": l(H).modules.close,
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
 					onClick: $
-				}, [h(l(de), {
+				}, [h(l(le), {
 					size: 16,
 					"stroke-width": 2
 				})], 8, b)]),
@@ -158,7 +158,7 @@ var me = {
 						"aria-label": l(H).modules.delete,
 						title: l(H).modules.delete,
 						onClick: u((t) => q.value = e.id, ["stop"])
-					}, [h(l(fe), {
+					}, [h(l(ue), {
 						size: 12,
 						"stroke-width": 1.5
 					})], 8, F))
@@ -195,4 +195,4 @@ var me = {
 //#endregion
 export { B as default };
 
-//# sourceMappingURL=ModuleBrowserModal-EzKgW5TG.js.map
+//# sourceMappingURL=ModuleBrowserModal-BGd5Ryyx.js.map