npm - @templatical/editor - Versions diffs - 0.39.4 → 0.40.0 - Mend

@templatical/editor 0.39.4 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/dist/cdn/chunks/{TemplateSettings-DjXiiiNr.js.map → TemplateSettings-Dr5OJ0Gi.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemplateSettings-DjXiiiNr.js","names":[],"sources":["../../../src/components/TemplateSettings.vue","../../../src/components/TemplateSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ColorPicker from \"./ColorPicker.vue\";\nimport MergeTagTextarea from \"./MergeTagTextarea.vue\";\nimport ToggleSwitch from \"./ToggleSwitch.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n resolveContentDirection,\n type TemplateSettings,\n} from \"@templatical/types\";\nimport {\n cardClass,\n inputClass,\n inputGroupInputClass,\n inputSuffixClass,\n labelClass,\n DEFAULT_BG_COLOR,\n} from \"../constants/styleConstants\";\nimport { Circle, Eye, Globe, Info, Square } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n FONTS_MANAGER_KEY,\n TEMPLATE_SETTINGS_FIELDS_KEY,\n requireInject,\n} from \"../keys\";\nimport {\n ALL_TEMPLATE_SETTINGS_FIELDS,\n TEMPLATE_SETTINGS_FIELD_CARDS,\n type TemplateSettingsCard,\n type TemplateSettingsField,\n} from \"../utils/templateSettingsFields\";\n\nconst props = defineProps<{\n settings: TemplateSettings;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update\", settings: Partial<TemplateSettings>): void;\n}>();\n\nconst PREHEADER_MAX_LENGTH = 150;\n\nconst { t } = useI18n();\n\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"TemplateSettings\");\nconst fontFamilies = computed(() => fontsManager.fonts.value);\n\n// If current font is not in available list (e.g., custom font when disabled), use default\nconst displayedFontFamily = computed(() => {\n const isAvailable = fontFamilies.value.some(\n (font) => font.value === props.settings.fontFamily,\n );\n return isAvailable\n ? props.settings.fontFamily\n : fontsManager.defaultFont.value;\n});\n\nconst widthPresets = [\n { value: 480, label: \"480px\" },\n { value: 600, label: \"600px\" },\n { value: 700, label: \"700px\" },\n { value: 800, label: \"800px\" },\n];\n\n// Default to every field: the key is absent whenever a consumer configured no\n// `templateSettings`, and that config only ever narrows.\nconst allowedFields = inject(\n TEMPLATE_SETTINGS_FIELDS_KEY,\n new Set(ALL_TEMPLATE_SETTINGS_FIELDS),\n);\n\nfunction shows(field: TemplateSettingsField): boolean {\n return allowedFields.has(field);\n}\n\n// A card earns its heading only if it still has something to hold. Derived from\n// the field→card map rather than hand-listed per card, so a new setting joins\n// its card's gate the moment it joins the map.\nfunction showsCard(card: TemplateSettingsCard): boolean {\n return ALL_TEMPLATE_SETTINGS_FIELDS.some(\n (field) => TEMPLATE_SETTINGS_FIELD_CARDS[field] === card && shows(field),\n );\n}\n\n// Tips is advice about the settings, so it rides on there being at least one:\n// a Settings tab holding nothing but advice reads as a bug. Plain const, like\n// the two helpers above — the allowlist is init-time config, not reactive\n// state, and a `computed` here would imply it can change.\nconst showsAnyField = allowedFields.size > 0;\n\nconst isRtl = computed(() => resolveContentDirection(props.settings) === \"rtl\");\n\n// Cards lay their contents out with a flex gap rather than a bottom margin on\n// every child but the last. A margin leaves dead space under whichever field\n// became last once an excluded one is dropped, and which field that is depends\n// on the consumer's allowlist — so there is no \"last\" to special-case.\nconst cardStackClass = `${cardClass} tpl:flex tpl:flex-col tpl:gap-3.5`;\n</script>\n\n<template>\n <aside\n data-testid=\"template-settings\"\n class=\"tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]\"\n >\n <div\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4\"\n >\n <!-- Layout card -->\n <div\n v-if=\"showsCard('layout')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-layout\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Square\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.layout }}</span>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-preset\">\n <label :class=\"labelClass\">{{\n t.templateSettings.widthPreset\n }}</label>\n <div\n class=\"tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n >\n <button\n v-for=\"preset in widthPresets\"\n :key=\"preset.value\"\n class=\"tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n :style=\"{\n backgroundColor:\n settings.width === preset.value\n ? 'var(--tpl-bg)'\n : 'transparent',\n color:\n settings.width === preset.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n boxShadow:\n settings.width === preset.value\n ? 'var(--tpl-shadow)'\n : 'none',\n }\"\n @click=\"emit('update', { width: preset.value })\"\n >\n {{ preset.label }}\n </button>\n </div>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-custom\">\n <label :class=\"labelClass\">{{\n t.templateSettings.customWidth\n }}</label>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"settings.width\"\n min=\"300\"\n max=\"900\"\n @input=\"\n emit('update', {\n width: Number(($event.target as HTMLInputElement).value),\n })\n \"\n />\n <span :class=\"inputSuffixClass\">px</span>\n </div>\n </div>\n </div>\n\n <!-- Appearance card -->\n <div\n v-if=\"showsCard('appearance')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-appearance\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Circle\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.appearance }}</span>\n </div>\n\n <div\n v-if=\"shows('backgroundColor')\"\n data-testid=\"template-settings-background\"\n >\n <label :class=\"labelClass\">{{\n t.templateSettings.backgroundColor\n }}</label>\n <ColorPicker\n :model-value=\"settings.backgroundColor\"\n :placeholder=\"DEFAULT_BG_COLOR\"\n @update:model-value=\"emit('update', { backgroundColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('textColor')\"\n data-testid=\"template-settings-text-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.textColor }}</label>\n <ColorPicker\n :model-value=\"settings.textColor ?? ''\"\n seed-color=\"#1a1a1a\"\n @update:model-value=\"emit('update', { textColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('linkColor')\"\n data-testid=\"template-settings-link-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.linkColor }}</label>\n <ColorPicker\n :model-value=\"settings.linkColor ?? ''\"\n seed-color=\"#0066cc\"\n @update:model-value=\"\n emit('update', { linkColor: $event \|\| undefined })\n \"\n />\n </div>\n\n <div\n v-if=\"shows('linkUnderline')\"\n data-testid=\"template-settings-link-underline\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"settings.linkUnderline\"\n :label=\"t.templateSettings.linkUnderline\"\n @update:model-value=\"emit('update', { linkUnderline: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('fontFamily')\"\n data-testid=\"template-settings-font-family\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.fontFamily }}</label>\n <select\n :class=\"inputClass\"\n :value=\"displayedFontFamily\"\n @change=\"\n emit('update', {\n fontFamily: ($event.target as HTMLSelectElement).value,\n })\n \"\n >\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 </div>\n </div>\n\n <!-- Language card -->\n <div\n v-if=\"showsCard('language')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-language\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Globe\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.language }}</span>\n </div>\n\n <div v-if=\"shows('locale')\" data-testid=\"template-settings-locale\">\n <label :class=\"labelClass\">{{\n t.templateSettings.contentLocale\n }}</label>\n <input\n type=\"text\"\n :class=\"inputClass\"\n :value=\"settings.locale ?? ''\"\n placeholder=\"en\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n @input=\"\n emit('update', {\n locale:\n ($event.target as HTMLInputElement).value.trim() \|\| undefined,\n })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentLocaleHint }}\n </p>\n </div>\n\n <div\n v-if=\"shows('direction')\"\n data-testid=\"template-settings-direction\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"isRtl\"\n :label=\"t.templateSettings.contentDirection\"\n @update:model-value=\"\n emit('update', { direction: $event ? 'rtl' : 'ltr' })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentDirectionHint }}\n </p>\n </div>\n </div>\n\n <!-- Preheader card -->\n <div\n v-if=\"showsCard('preheader')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-preheader\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Eye\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.preheaderText }}</span>\n </div>\n\n <div\n v-if=\"shows('preheaderText')\"\n data-testid=\"template-settings-preheader\"\n >\n <MergeTagTextarea\n :model-value=\"settings.preheaderText ?? ''\"\n :placeholder=\"t.templateSettings.preheaderTextPlaceholder\"\n :rows=\"2\"\n @update:model-value=\"\n emit('update', {\n preheaderText: $event.replace(/[\\r\\n]/g, ' ') \|\| undefined,\n })\n \"\n />\n <div\n class=\"tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n >\n <span\n class=\"tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.preheaderTextHint }}\n </span>\n <span\n class=\"tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ (settings.preheaderText ?? \"\").length }}/{{\n PREHEADER_MAX_LENGTH\n }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tips card -->\n <div\n v-if=\"showsAnyField\"\n class=\"tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n data-testid=\"template-settings-card-tips\"\n >\n <div\n class=\"tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]\"\n >\n <Info :size=\"14\" :stroke-width=\"2\" />\n <span>{{ t.templateSettings.tips }}</span>\n </div>\n <ul\n class=\"tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip1 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip2 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip3 }}\n </li>\n </ul>\n </div>\n </div>\n </aside>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"./ColorPicker.vue\";\nimport MergeTagTextarea from \"./MergeTagTextarea.vue\";\nimport ToggleSwitch from \"./ToggleSwitch.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n resolveContentDirection,\n type TemplateSettings,\n} from \"@templatical/types\";\nimport {\n cardClass,\n inputClass,\n inputGroupInputClass,\n inputSuffixClass,\n labelClass,\n DEFAULT_BG_COLOR,\n} from \"../constants/styleConstants\";\nimport { Circle, Eye, Globe, Info, Square } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n FONTS_MANAGER_KEY,\n TEMPLATE_SETTINGS_FIELDS_KEY,\n requireInject,\n} from \"../keys\";\nimport {\n ALL_TEMPLATE_SETTINGS_FIELDS,\n TEMPLATE_SETTINGS_FIELD_CARDS,\n type TemplateSettingsCard,\n type TemplateSettingsField,\n} from \"../utils/templateSettingsFields\";\n\nconst props = defineProps<{\n settings: TemplateSettings;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update\", settings: Partial<TemplateSettings>): void;\n}>();\n\nconst PREHEADER_MAX_LENGTH = 150;\n\nconst { t } = useI18n();\n\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"TemplateSettings\");\nconst fontFamilies = computed(() => fontsManager.fonts.value);\n\n// If current font is not in available list (e.g., custom font when disabled), use default\nconst displayedFontFamily = computed(() => {\n const isAvailable = fontFamilies.value.some(\n (font) => font.value === props.settings.fontFamily,\n );\n return isAvailable\n ? props.settings.fontFamily\n : fontsManager.defaultFont.value;\n});\n\nconst widthPresets = [\n { value: 480, label: \"480px\" },\n { value: 600, label: \"600px\" },\n { value: 700, label: \"700px\" },\n { value: 800, label: \"800px\" },\n];\n\n// Default to every field: the key is absent whenever a consumer configured no\n// `templateSettings`, and that config only ever narrows.\nconst allowedFields = inject(\n TEMPLATE_SETTINGS_FIELDS_KEY,\n new Set(ALL_TEMPLATE_SETTINGS_FIELDS),\n);\n\nfunction shows(field: TemplateSettingsField): boolean {\n return allowedFields.has(field);\n}\n\n// A card earns its heading only if it still has something to hold. Derived from\n// the field→card map rather than hand-listed per card, so a new setting joins\n// its card's gate the moment it joins the map.\nfunction showsCard(card: TemplateSettingsCard): boolean {\n return ALL_TEMPLATE_SETTINGS_FIELDS.some(\n (field) => TEMPLATE_SETTINGS_FIELD_CARDS[field] === card && shows(field),\n );\n}\n\n// Tips is advice about the settings, so it rides on there being at least one:\n// a Settings tab holding nothing but advice reads as a bug. Plain const, like\n// the two helpers above — the allowlist is init-time config, not reactive\n// state, and a `computed` here would imply it can change.\nconst showsAnyField = allowedFields.size > 0;\n\nconst isRtl = computed(() => resolveContentDirection(props.settings) === \"rtl\");\n\n// Cards lay their contents out with a flex gap rather than a bottom margin on\n// every child but the last. A margin leaves dead space under whichever field\n// became last once an excluded one is dropped, and which field that is depends\n// on the consumer's allowlist — so there is no \"last\" to special-case.\nconst cardStackClass = `${cardClass} tpl:flex tpl:flex-col tpl:gap-3.5`;\n</script>\n\n<template>\n <aside\n data-testid=\"template-settings\"\n class=\"tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]\"\n >\n <div\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4\"\n >\n <!-- Layout card -->\n <div\n v-if=\"showsCard('layout')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-layout\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Square\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.layout }}</span>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-preset\">\n <label :class=\"labelClass\">{{\n t.templateSettings.widthPreset\n }}</label>\n <div\n class=\"tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n >\n <button\n v-for=\"preset in widthPresets\"\n :key=\"preset.value\"\n class=\"tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n :style=\"{\n backgroundColor:\n settings.width === preset.value\n ? 'var(--tpl-bg)'\n : 'transparent',\n color:\n settings.width === preset.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n boxShadow:\n settings.width === preset.value\n ? 'var(--tpl-shadow)'\n : 'none',\n }\"\n @click=\"emit('update', { width: preset.value })\"\n >\n {{ preset.label }}\n </button>\n </div>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-custom\">\n <label :class=\"labelClass\">{{\n t.templateSettings.customWidth\n }}</label>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"settings.width\"\n min=\"300\"\n max=\"900\"\n @input=\"\n emit('update', {\n width: Number(($event.target as HTMLInputElement).value),\n })\n \"\n />\n <span :class=\"inputSuffixClass\">px</span>\n </div>\n </div>\n </div>\n\n <!-- Appearance card -->\n <div\n v-if=\"showsCard('appearance')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-appearance\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Circle\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.appearance }}</span>\n </div>\n\n <div\n v-if=\"shows('backgroundColor')\"\n data-testid=\"template-settings-background\"\n >\n <label :class=\"labelClass\">{{\n t.templateSettings.backgroundColor\n }}</label>\n <ColorPicker\n :model-value=\"settings.backgroundColor\"\n :placeholder=\"DEFAULT_BG_COLOR\"\n @update:model-value=\"emit('update', { backgroundColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('textColor')\"\n data-testid=\"template-settings-text-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.textColor }}</label>\n <ColorPicker\n :model-value=\"settings.textColor ?? ''\"\n seed-color=\"#1a1a1a\"\n @update:model-value=\"emit('update', { textColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('linkColor')\"\n data-testid=\"template-settings-link-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.linkColor }}</label>\n <ColorPicker\n :model-value=\"settings.linkColor ?? ''\"\n seed-color=\"#0066cc\"\n @update:model-value=\"\n emit('update', { linkColor: $event \|\| undefined })\n \"\n />\n </div>\n\n <div\n v-if=\"shows('linkUnderline')\"\n data-testid=\"template-settings-link-underline\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"settings.linkUnderline\"\n :label=\"t.templateSettings.linkUnderline\"\n @update:model-value=\"emit('update', { linkUnderline: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('fontFamily')\"\n data-testid=\"template-settings-font-family\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.fontFamily }}</label>\n <select\n :class=\"inputClass\"\n :value=\"displayedFontFamily\"\n @change=\"\n emit('update', {\n fontFamily: ($event.target as HTMLSelectElement).value,\n })\n \"\n >\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 </div>\n </div>\n\n <!-- Language card -->\n <div\n v-if=\"showsCard('language')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-language\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Globe\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.language }}</span>\n </div>\n\n <div v-if=\"shows('locale')\" data-testid=\"template-settings-locale\">\n <label :class=\"labelClass\">{{\n t.templateSettings.contentLocale\n }}</label>\n <input\n type=\"text\"\n :class=\"inputClass\"\n :value=\"settings.locale ?? ''\"\n placeholder=\"en\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n @input=\"\n emit('update', {\n locale:\n ($event.target as HTMLInputElement).value.trim() \|\| undefined,\n })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentLocaleHint }}\n </p>\n </div>\n\n <div\n v-if=\"shows('direction')\"\n data-testid=\"template-settings-direction\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"isRtl\"\n :label=\"t.templateSettings.contentDirection\"\n @update:model-value=\"\n emit('update', { direction: $event ? 'rtl' : 'ltr' })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentDirectionHint }}\n </p>\n </div>\n </div>\n\n <!-- Preheader card -->\n <div\n v-if=\"showsCard('preheader')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-preheader\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Eye\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.preheaderText }}</span>\n </div>\n\n <div\n v-if=\"shows('preheaderText')\"\n data-testid=\"template-settings-preheader\"\n >\n <MergeTagTextarea\n :model-value=\"settings.preheaderText ?? ''\"\n :placeholder=\"t.templateSettings.preheaderTextPlaceholder\"\n :rows=\"2\"\n @update:model-value=\"\n emit('update', {\n preheaderText: $event.replace(/[\\r\\n]/g, ' ') \|\| undefined,\n })\n \"\n />\n <div\n class=\"tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n >\n <span\n class=\"tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.preheaderTextHint }}\n </span>\n <span\n class=\"tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ (settings.preheaderText ?? \"\").length }}/{{\n PREHEADER_MAX_LENGTH\n }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tips card -->\n <div\n v-if=\"showsAnyField\"\n class=\"tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n data-testid=\"template-settings-card-tips\"\n >\n <div\n class=\"tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]\"\n >\n <Info :size=\"14\" :stroke-width=\"2\" />\n <span>{{ t.templateSettings.tips }}</span>\n </div>\n <ul\n class=\"tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip1 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip2 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip3 }}\n </li>\n </ul>\n </div>\n </div>\n </aside>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"TemplateSettings-Dr5OJ0Gi.js","names":[],"sources":["../../../src/components/TemplateSettings.vue","../../../src/components/TemplateSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ColorPicker from \"./ColorPicker.vue\";\nimport MergeTagTextarea from \"./MergeTagTextarea.vue\";\nimport ToggleSwitch from \"./ToggleSwitch.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n resolveContentDirection,\n type TemplateSettings,\n} from \"@templatical/types\";\nimport {\n cardClass,\n inputClass,\n inputGroupInputClass,\n inputSuffixClass,\n labelClass,\n DEFAULT_BG_COLOR,\n} from \"../constants/styleConstants\";\nimport { Circle, Eye, Globe, Info, Square } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n FONTS_MANAGER_KEY,\n TEMPLATE_SETTINGS_FIELDS_KEY,\n requireInject,\n} from \"../keys\";\nimport {\n ALL_TEMPLATE_SETTINGS_FIELDS,\n TEMPLATE_SETTINGS_FIELD_CARDS,\n type TemplateSettingsCard,\n type TemplateSettingsField,\n} from \"../utils/templateSettingsFields\";\n\nconst props = defineProps<{\n settings: TemplateSettings;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update\", settings: Partial<TemplateSettings>): void;\n}>();\n\nconst PREHEADER_MAX_LENGTH = 150;\n\nconst { t } = useI18n();\n\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"TemplateSettings\");\nconst fontFamilies = computed(() => fontsManager.fonts.value);\n\n// If current font is not in available list (e.g., custom font when disabled), use default\nconst displayedFontFamily = computed(() => {\n const isAvailable = fontFamilies.value.some(\n (font) => font.value === props.settings.fontFamily,\n );\n return isAvailable\n ? props.settings.fontFamily\n : fontsManager.defaultFont.value;\n});\n\nconst widthPresets = [\n { value: 480, label: \"480px\" },\n { value: 600, label: \"600px\" },\n { value: 700, label: \"700px\" },\n { value: 800, label: \"800px\" },\n];\n\n// Default to every field: the key is absent whenever a consumer configured no\n// `templateSettings`, and that config only ever narrows.\nconst allowedFields = inject(\n TEMPLATE_SETTINGS_FIELDS_KEY,\n new Set(ALL_TEMPLATE_SETTINGS_FIELDS),\n);\n\nfunction shows(field: TemplateSettingsField): boolean {\n return allowedFields.has(field);\n}\n\n// A card earns its heading only if it still has something to hold. Derived from\n// the field→card map rather than hand-listed per card, so a new setting joins\n// its card's gate the moment it joins the map.\nfunction showsCard(card: TemplateSettingsCard): boolean {\n return ALL_TEMPLATE_SETTINGS_FIELDS.some(\n (field) => TEMPLATE_SETTINGS_FIELD_CARDS[field] === card && shows(field),\n );\n}\n\n// Tips is advice about the settings, so it rides on there being at least one:\n// a Settings tab holding nothing but advice reads as a bug. Plain const, like\n// the two helpers above — the allowlist is init-time config, not reactive\n// state, and a `computed` here would imply it can change.\nconst showsAnyField = allowedFields.size > 0;\n\nconst isRtl = computed(() => resolveContentDirection(props.settings) === \"rtl\");\n\n// Cards lay their contents out with a flex gap rather than a bottom margin on\n// every child but the last. A margin leaves dead space under whichever field\n// became last once an excluded one is dropped, and which field that is depends\n// on the consumer's allowlist — so there is no \"last\" to special-case.\nconst cardStackClass = `${cardClass} tpl:flex tpl:flex-col tpl:gap-3.5`;\n</script>\n\n<template>\n <aside\n data-testid=\"template-settings\"\n class=\"tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]\"\n >\n <div\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4\"\n >\n <!-- Layout card -->\n <div\n v-if=\"showsCard('layout')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-layout\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Square\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.layout }}</span>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-preset\">\n <label :class=\"labelClass\">{{\n t.templateSettings.widthPreset\n }}</label>\n <div\n class=\"tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n >\n <button\n v-for=\"preset in widthPresets\"\n :key=\"preset.value\"\n class=\"tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n :style=\"{\n backgroundColor:\n settings.width === preset.value\n ? 'var(--tpl-bg)'\n : 'transparent',\n color:\n settings.width === preset.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n boxShadow:\n settings.width === preset.value\n ? 'var(--tpl-shadow)'\n : 'none',\n }\"\n @click=\"emit('update', { width: preset.value })\"\n >\n {{ preset.label }}\n </button>\n </div>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-custom\">\n <label :class=\"labelClass\">{{\n t.templateSettings.customWidth\n }}</label>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"settings.width\"\n min=\"300\"\n max=\"900\"\n @input=\"\n emit('update', {\n width: Number(($event.target as HTMLInputElement).value),\n })\n \"\n />\n <span :class=\"inputSuffixClass\">px</span>\n </div>\n </div>\n </div>\n\n <!-- Appearance card -->\n <div\n v-if=\"showsCard('appearance')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-appearance\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Circle\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.appearance }}</span>\n </div>\n\n <div\n v-if=\"shows('backgroundColor')\"\n data-testid=\"template-settings-background\"\n >\n <label :class=\"labelClass\">{{\n t.templateSettings.backgroundColor\n }}</label>\n <ColorPicker\n :model-value=\"settings.backgroundColor\"\n :placeholder=\"DEFAULT_BG_COLOR\"\n @update:model-value=\"emit('update', { backgroundColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('textColor')\"\n data-testid=\"template-settings-text-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.textColor }}</label>\n <ColorPicker\n :model-value=\"settings.textColor ?? ''\"\n seed-color=\"#1a1a1a\"\n @update:model-value=\"emit('update', { textColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('linkColor')\"\n data-testid=\"template-settings-link-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.linkColor }}</label>\n <ColorPicker\n :model-value=\"settings.linkColor ?? ''\"\n seed-color=\"#0066cc\"\n @update:model-value=\"\n emit('update', { linkColor: $event \|\| undefined })\n \"\n />\n </div>\n\n <div\n v-if=\"shows('linkUnderline')\"\n data-testid=\"template-settings-link-underline\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"settings.linkUnderline\"\n :label=\"t.templateSettings.linkUnderline\"\n @update:model-value=\"emit('update', { linkUnderline: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('fontFamily')\"\n data-testid=\"template-settings-font-family\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.fontFamily }}</label>\n <select\n :class=\"inputClass\"\n :value=\"displayedFontFamily\"\n @change=\"\n emit('update', {\n fontFamily: ($event.target as HTMLSelectElement).value,\n })\n \"\n >\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 </div>\n </div>\n\n <!-- Language card -->\n <div\n v-if=\"showsCard('language')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-language\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Globe\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.language }}</span>\n </div>\n\n <div v-if=\"shows('locale')\" data-testid=\"template-settings-locale\">\n <label :class=\"labelClass\">{{\n t.templateSettings.contentLocale\n }}</label>\n <input\n type=\"text\"\n :class=\"inputClass\"\n :value=\"settings.locale ?? ''\"\n placeholder=\"en\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n @input=\"\n emit('update', {\n locale:\n ($event.target as HTMLInputElement).value.trim() \|\| undefined,\n })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentLocaleHint }}\n </p>\n </div>\n\n <div\n v-if=\"shows('direction')\"\n data-testid=\"template-settings-direction\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"isRtl\"\n :label=\"t.templateSettings.contentDirection\"\n @update:model-value=\"\n emit('update', { direction: $event ? 'rtl' : 'ltr' })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentDirectionHint }}\n </p>\n </div>\n </div>\n\n <!-- Preheader card -->\n <div\n v-if=\"showsCard('preheader')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-preheader\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Eye\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.preheaderText }}</span>\n </div>\n\n <div\n v-if=\"shows('preheaderText')\"\n data-testid=\"template-settings-preheader\"\n >\n <MergeTagTextarea\n :model-value=\"settings.preheaderText ?? ''\"\n :placeholder=\"t.templateSettings.preheaderTextPlaceholder\"\n :rows=\"2\"\n @update:model-value=\"\n emit('update', {\n preheaderText: $event.replace(/[\\r\\n]/g, ' ') \|\| undefined,\n })\n \"\n />\n <div\n class=\"tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n >\n <span\n class=\"tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.preheaderTextHint }}\n </span>\n <span\n class=\"tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ (settings.preheaderText ?? \"\").length }}/{{\n PREHEADER_MAX_LENGTH\n }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tips card -->\n <div\n v-if=\"showsAnyField\"\n class=\"tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n data-testid=\"template-settings-card-tips\"\n >\n <div\n class=\"tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]\"\n >\n <Info :size=\"14\" :stroke-width=\"2\" />\n <span>{{ t.templateSettings.tips }}</span>\n </div>\n <ul\n class=\"tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip1 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip2 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip3 }}\n </li>\n </ul>\n </div>\n </div>\n </aside>\n</template>\n","<script setup lang=\"ts\">\nimport ColorPicker from \"./ColorPicker.vue\";\nimport MergeTagTextarea from \"./MergeTagTextarea.vue\";\nimport ToggleSwitch from \"./ToggleSwitch.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n resolveContentDirection,\n type TemplateSettings,\n} from \"@templatical/types\";\nimport {\n cardClass,\n inputClass,\n inputGroupInputClass,\n inputSuffixClass,\n labelClass,\n DEFAULT_BG_COLOR,\n} from \"../constants/styleConstants\";\nimport { Circle, Eye, Globe, Info, Square } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n FONTS_MANAGER_KEY,\n TEMPLATE_SETTINGS_FIELDS_KEY,\n requireInject,\n} from \"../keys\";\nimport {\n ALL_TEMPLATE_SETTINGS_FIELDS,\n TEMPLATE_SETTINGS_FIELD_CARDS,\n type TemplateSettingsCard,\n type TemplateSettingsField,\n} from \"../utils/templateSettingsFields\";\n\nconst props = defineProps<{\n settings: TemplateSettings;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update\", settings: Partial<TemplateSettings>): void;\n}>();\n\nconst PREHEADER_MAX_LENGTH = 150;\n\nconst { t } = useI18n();\n\nconst fontsManager = requireInject(FONTS_MANAGER_KEY, \"TemplateSettings\");\nconst fontFamilies = computed(() => fontsManager.fonts.value);\n\n// If current font is not in available list (e.g., custom font when disabled), use default\nconst displayedFontFamily = computed(() => {\n const isAvailable = fontFamilies.value.some(\n (font) => font.value === props.settings.fontFamily,\n );\n return isAvailable\n ? props.settings.fontFamily\n : fontsManager.defaultFont.value;\n});\n\nconst widthPresets = [\n { value: 480, label: \"480px\" },\n { value: 600, label: \"600px\" },\n { value: 700, label: \"700px\" },\n { value: 800, label: \"800px\" },\n];\n\n// Default to every field: the key is absent whenever a consumer configured no\n// `templateSettings`, and that config only ever narrows.\nconst allowedFields = inject(\n TEMPLATE_SETTINGS_FIELDS_KEY,\n new Set(ALL_TEMPLATE_SETTINGS_FIELDS),\n);\n\nfunction shows(field: TemplateSettingsField): boolean {\n return allowedFields.has(field);\n}\n\n// A card earns its heading only if it still has something to hold. Derived from\n// the field→card map rather than hand-listed per card, so a new setting joins\n// its card's gate the moment it joins the map.\nfunction showsCard(card: TemplateSettingsCard): boolean {\n return ALL_TEMPLATE_SETTINGS_FIELDS.some(\n (field) => TEMPLATE_SETTINGS_FIELD_CARDS[field] === card && shows(field),\n );\n}\n\n// Tips is advice about the settings, so it rides on there being at least one:\n// a Settings tab holding nothing but advice reads as a bug. Plain const, like\n// the two helpers above — the allowlist is init-time config, not reactive\n// state, and a `computed` here would imply it can change.\nconst showsAnyField = allowedFields.size > 0;\n\nconst isRtl = computed(() => resolveContentDirection(props.settings) === \"rtl\");\n\n// Cards lay their contents out with a flex gap rather than a bottom margin on\n// every child but the last. A margin leaves dead space under whichever field\n// became last once an excluded one is dropped, and which field that is depends\n// on the consumer's allowlist — so there is no \"last\" to special-case.\nconst cardStackClass = `${cardClass} tpl:flex tpl:flex-col tpl:gap-3.5`;\n</script>\n\n<template>\n <aside\n data-testid=\"template-settings\"\n class=\"tpl:flex tpl:w-full tpl:flex-1 tpl:flex-col tpl:bg-[var(--tpl-bg-elevated)]\"\n >\n <div\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:gap-3 tpl:overflow-y-auto tpl:p-4\"\n >\n <!-- Layout card -->\n <div\n v-if=\"showsCard('layout')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-layout\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Square\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.layout }}</span>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-preset\">\n <label :class=\"labelClass\">{{\n t.templateSettings.widthPreset\n }}</label>\n <div\n class=\"tpl:grid tpl:grid-cols-4 tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]\"\n >\n <button\n v-for=\"preset in widthPresets\"\n :key=\"preset.value\"\n class=\"tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-2 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n :style=\"{\n backgroundColor:\n settings.width === preset.value\n ? 'var(--tpl-bg)'\n : 'transparent',\n color:\n settings.width === preset.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n boxShadow:\n settings.width === preset.value\n ? 'var(--tpl-shadow)'\n : 'none',\n }\"\n @click=\"emit('update', { width: preset.value })\"\n >\n {{ preset.label }}\n </button>\n </div>\n </div>\n\n <div v-if=\"shows('width')\" data-testid=\"template-settings-width-custom\">\n <label :class=\"labelClass\">{{\n t.templateSettings.customWidth\n }}</label>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"settings.width\"\n min=\"300\"\n max=\"900\"\n @input=\"\n emit('update', {\n width: Number(($event.target as HTMLInputElement).value),\n })\n \"\n />\n <span :class=\"inputSuffixClass\">px</span>\n </div>\n </div>\n </div>\n\n <!-- Appearance card -->\n <div\n v-if=\"showsCard('appearance')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-appearance\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Circle\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.appearance }}</span>\n </div>\n\n <div\n v-if=\"shows('backgroundColor')\"\n data-testid=\"template-settings-background\"\n >\n <label :class=\"labelClass\">{{\n t.templateSettings.backgroundColor\n }}</label>\n <ColorPicker\n :model-value=\"settings.backgroundColor\"\n :placeholder=\"DEFAULT_BG_COLOR\"\n @update:model-value=\"emit('update', { backgroundColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('textColor')\"\n data-testid=\"template-settings-text-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.textColor }}</label>\n <ColorPicker\n :model-value=\"settings.textColor ?? ''\"\n seed-color=\"#1a1a1a\"\n @update:model-value=\"emit('update', { textColor: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('linkColor')\"\n data-testid=\"template-settings-link-color\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.linkColor }}</label>\n <ColorPicker\n :model-value=\"settings.linkColor ?? ''\"\n seed-color=\"#0066cc\"\n @update:model-value=\"\n emit('update', { linkColor: $event \|\| undefined })\n \"\n />\n </div>\n\n <div\n v-if=\"shows('linkUnderline')\"\n data-testid=\"template-settings-link-underline\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"settings.linkUnderline\"\n :label=\"t.templateSettings.linkUnderline\"\n @update:model-value=\"emit('update', { linkUnderline: $event })\"\n />\n </div>\n\n <div\n v-if=\"shows('fontFamily')\"\n data-testid=\"template-settings-font-family\"\n >\n <label :class=\"labelClass\">{{ t.templateSettings.fontFamily }}</label>\n <select\n :class=\"inputClass\"\n :value=\"displayedFontFamily\"\n @change=\"\n emit('update', {\n fontFamily: ($event.target as HTMLSelectElement).value,\n })\n \"\n >\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 </div>\n </div>\n\n <!-- Language card -->\n <div\n v-if=\"showsCard('language')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-language\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Globe\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.language }}</span>\n </div>\n\n <div v-if=\"shows('locale')\" data-testid=\"template-settings-locale\">\n <label :class=\"labelClass\">{{\n t.templateSettings.contentLocale\n }}</label>\n <input\n type=\"text\"\n :class=\"inputClass\"\n :value=\"settings.locale ?? ''\"\n placeholder=\"en\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n @input=\"\n emit('update', {\n locale:\n ($event.target as HTMLInputElement).value.trim() \|\| undefined,\n })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentLocaleHint }}\n </p>\n </div>\n\n <div\n v-if=\"shows('direction')\"\n data-testid=\"template-settings-direction\"\n >\n <ToggleSwitch\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n :model-value=\"isRtl\"\n :label=\"t.templateSettings.contentDirection\"\n @update:model-value=\"\n emit('update', { direction: $event ? 'rtl' : 'ltr' })\n \"\n />\n <p\n class=\"tpl:mt-1 tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.contentDirectionHint }}\n </p>\n </div>\n </div>\n\n <!-- Preheader card -->\n <div\n v-if=\"showsCard('preheader')\"\n :class=\"cardStackClass\"\n data-testid=\"template-settings-card-preheader\"\n >\n <div\n class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n <Eye\n class=\"tpl:text-[var(--tpl-text-muted)]\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span>{{ t.templateSettings.preheaderText }}</span>\n </div>\n\n <div\n v-if=\"shows('preheaderText')\"\n data-testid=\"template-settings-preheader\"\n >\n <MergeTagTextarea\n :model-value=\"settings.preheaderText ?? ''\"\n :placeholder=\"t.templateSettings.preheaderTextPlaceholder\"\n :rows=\"2\"\n @update:model-value=\"\n emit('update', {\n preheaderText: $event.replace(/[\\r\\n]/g, ' ') \|\| undefined,\n })\n \"\n />\n <div\n class=\"tpl:mt-1 tpl:flex tpl:items-start tpl:justify-between tpl:gap-2\"\n >\n <span\n class=\"tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.templateSettings.preheaderTextHint }}\n </span>\n <span\n class=\"tpl:shrink-0 tpl:text-xs tpl:tabular-nums tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ (settings.preheaderText ?? \"\").length }}/{{\n PREHEADER_MAX_LENGTH\n }}\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tips card -->\n <div\n v-if=\"showsAnyField\"\n class=\"tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3\"\n data-testid=\"template-settings-card-tips\"\n >\n <div\n class=\"tpl:mb-2.5 tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text-muted)]\"\n >\n <Info :size=\"14\" :stroke-width=\"2\" />\n <span>{{ t.templateSettings.tips }}</span>\n </div>\n <ul\n class=\"tpl:m-0 tpl:pl-[18px] tpl:text-xs tpl:leading-relaxed tpl:text-[var(--tpl-text-dim)]\"\n >\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip1 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip2 }}\n </li>\n <li class=\"tpl:mb-1 tpl:last:mb-0\">\n {{ t.templateSettings.tip3 }}\n </li>\n </ul>\n </div>\n </div>\n </aside>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4WAuCM,KAAuB;;;;;EAR7B,IAAM,IAAQ,GAIR,IAAO,GAMP,EAAE,SAAM,GAAQ,GAEhB,IAAe,GAAc,IAAmB,kBAAkB,GAClE,IAAe,QAAe,EAAa,MAAM,KAAK,GAGtD,KAAsB,QACN,EAAa,MAAM,MACpC,MAAS,EAAK,UAAU,EAAM,SAAS,UAEnC,IACH,EAAM,SAAS,aACf,EAAa,YAAY,KAC9B,GAEK,KAAe;GACnB;IAAE,OAAO;IAAK,OAAO;GAAQ;GAC7B;IAAE,OAAO;IAAK,OAAO;GAAQ;GAC7B;IAAE,OAAO;IAAK,OAAO;GAAQ;GAC7B;IAAE,OAAO;IAAK,OAAO;GAAQ;EAC/B,GAIM,IAAgB,EACpB,IACA,IAAI,IAAI,CAA4B,CACtC;EAEA,SAAS,EAAM,GAAuC;GACpD,OAAO,EAAc,IAAI,CAAK;EAChC;EAKA,SAAS,EAAU,GAAqC;GACtD,OAAO,EAA6B,MACjC,MAAU,GAA8B,OAAW,KAAQ,EAAM,CAAK,CACzE;EACF;EAMA,IAAM,KAAgB,EAAc,OAAO,GAErC,KAAQ,QAAe,GAAwB,EAAM,QAAQ,MAAM,KAAK,GAMxE,IAAiB,GAAG,GAAU;oBAIlC,EAAA,GAAA,EAwTQ,SAxTR,GAwTQ,CApTN,EAmTM,OAnTN,GAmTM;GA9SI,EAAS,QAAA,KADjB,EAAA,GAAA,EAoEM,OAAA;;IAlEH,OAAK,EAAE,CAAc;IACtB,eAAY;;IAEZ,EASM,OATN,GASM,CANJ,EAIE,EAAA,CAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;IAEjB,CAAA,GAAA,EAA4C,QAAA,MAAA,EAAnC,EAAA,CAAA,CAAC,CAAC,iBAAiB,MAAM,GAAA,CAAA,CAAA,CAAA;IAGzB,EAAK,OAAA,KAAhB,EAAA,GAAA,EA8BM,OA9BN,GA8BM,CA7BJ,EAEU,SAAA,EAFF,OAAK,EAAE,EAAA,CAAA,CAAU,EACvB,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,WAAW,GAAA,CAAA,GAEhC,EAyBM,OAzBN,GAyBM,EAtBJ,EAAA,GAAA,EAqBS,GAAA,MAAA,EApBU,KAAV,MADT,EAqBS,UAAA;KAnBN,KAAK,EAAO;KACb,OAAM;KACL,OAAK,EAAA;MAAuD,iBAAA,EAAA,SAAS,UAAU,EAAO,QAAA,kBAAA;MAA0H,OAAA,EAAA,SAAS,UAAU,EAAO,QAAA,uBAAA;MAA6I,WAAA,EAAA,SAAS,UAAU,EAAO,QAAA,sBAAA;;KAcjZ,UAAK,MAAE,EAAI,UAAA,EAAA,OAAoB,EAAO,MAAK,CAAA;IAEzC,GAAA,EAAA,EAAO,KAAK,GAAA,IAAA,CAAA;IAKV,EAAK,OAAA,KAAhB,EAAA,GAAA,EAmBM,OAnBN,GAmBM,CAlBJ,EAEU,SAAA,EAFF,OAAK,EAAE,EAAA,CAAA,CAAU,EACvB,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,WAAW,GAAA,CAAA,GAEhC,EAcM,OAdN,GAcM,CAbJ,EAWE,SAAA;KAVA,MAAK;KACJ,OAAK,EAAE,EAAA,EAAA,CAAoB;KAC3B,OAAO,EAAA,SAAS;KACjB,KAAI;KACJ,KAAI;KACH,SAAK,AAAA,EAAA,QAAA,MAAmB,EAAI,UAAA,EAAsC,OAAA,OAAQ,EAAO,OAA4B,KAAK,EAAA,CAAA;IAMrH,GAAA,MAAA,IAAA,CAAA,GAAA,EAAyC,QAAA,EAAlC,OAAK,EAAE,EAAA,EAAA,CAAgB,EAAE,GAAA,MAAE,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAOhC,EAAS,YAAA,KADjB,EAAA,GAAA,EA2FM,OAAA;;IAzFH,OAAK,EAAE,CAAc;IACtB,eAAY;;IAEZ,EASM,OATN,GASM,CANJ,EAIE,EAAA,CAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;IAEjB,CAAA,GAAA,EAAgD,QAAA,MAAA,EAAvC,EAAA,CAAA,CAAC,CAAC,iBAAiB,UAAU,GAAA,CAAA,CAAA,CAAA;IAIhC,EAAK,iBAAA,KADb,EAAA,GAAA,EAYM,OAZN,GAYM,CARJ,EAEU,SAAA,EAFF,OAAK,EAAE,EAAA,CAAA,CAAU,EACvB,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,eAAe,GAAA,CAAA,GAEpC,EAIE,GAAA;KAHC,eAAa,EAAA,SAAS;KACtB,aAAa,EAAA,CAAA;KACb,uBAAkB,AAAA,EAAA,QAAA,MAAE,EAAI,UAAA,EAAA,iBAA8B,EAAM,CAAA;;IAKzD,EAAK,WAAA,KADb,EAAA,GAAA,EAUM,OAVN,GAUM,CANJ,EAAqE,SAAA,EAA7D,OAAK,EAAE,EAAA,CAAA,CAAU,EAAK,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,SAAS,GAAA,CAAA,GAC1D,EAIE,GAAA;KAHC,eAAa,EAAA,SAAS,aAAS;KAChC,cAAW;KACV,uBAAkB,AAAA,EAAA,QAAA,MAAE,EAAI,UAAA,EAAA,WAAwB,EAAM,CAAA;;IAKnD,EAAK,WAAA,KADb,EAAA,GAAA,EAYM,OAZN,GAYM,CARJ,EAAqE,SAAA,EAA7D,OAAK,EAAE,EAAA,CAAA,CAAU,EAAK,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,SAAS,GAAA,CAAA,GAC1D,EAME,GAAA;KALC,eAAa,EAAA,SAAS,aAAS;KAChC,cAAW;KACV,uBAAkB,AAAA,EAAA,QAAA,MAAiB,EAAI,UAAA,EAAA,WAAwB,KAAU,KAAA,EAAS,CAAA;;IAO/E,EAAK,eAAA,KADb,EAAA,GAAA,EAUM,OAVN,GAUM,CANJ,EAKE,GAAA;KAJA,OAAM;KACL,eAAa,EAAA,SAAS;KACtB,OAAO,EAAA,CAAA,CAAC,CAAC,iBAAiB;KAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAE,EAAI,UAAA,EAAA,eAA4B,EAAM,CAAA;;IAKvD,EAAK,YAAA,KADb,EAAA,GAAA,EAsBM,OAtBN,GAsBM,CAlBJ,EAAsE,SAAA,EAA9D,OAAK,EAAE,EAAA,CAAA,CAAU,EAAK,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,UAAU,GAAA,CAAA,GAC3D,EAgBS,UAAA;KAfN,OAAK,EAAE,EAAA,CAAA,CAAU;KACjB,OAAO,GAAA;KACP,UAAM,AAAA,EAAA,QAAA,MAAiB,EAAI,UAAA,EAA0C,YAAA,EAAO,OAA6B,MAAA,CAAA;IAM1G,GAAA,EAAA,EAAA,EAAA,GAAA,EAMS,GAAA,MAAA,EALQ,EAAA,QAAR,OADT,EAAA,GAAA,EAMS,UAAA;KAJN,KAAK,EAAK;KACV,OAAO,EAAK;IAEV,GAAA,EAAA,EAAK,KAAK,GAAA,GAAA,CAAA;;GAQb,EAAS,UAAA,KADjB,EAAA,GAAA,EA4DM,OAAA;;IA1DH,OAAK,EAAE,CAAc;IACtB,eAAY;;IAEZ,EASM,OATN,GASM,CANJ,EAIE,EAAA,CAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;IAEjB,CAAA,GAAA,EAA8C,QAAA,MAAA,EAArC,EAAA,CAAA,CAAC,CAAC,iBAAiB,QAAQ,GAAA,CAAA,CAAA,CAAA;IAG3B,EAAK,QAAA,KAAhB,EAAA,GAAA,EAwBM,OAxBN,IAwBM;KAvBJ,EAEU,SAAA,EAFF,OAAK,EAAE,EAAA,CAAA,CAAU,EACvB,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,iBAAiB,aAAa,GAAA,CAAA;KAElC,EAcE,SAAA;MAbA,MAAK;MACJ,OAAK,EAAE,EAAA,CAAA,CAAU;MACjB,OAAO,EAAA,SAAS,UAAM;MACvB,aAAY;MACZ,YAAW;MACX,gBAAe;MACf,cAAa;MACZ,SAAK,AAAA,EAAA,QAAA,MAAiB,EAAI,UAAA,EAAA,QAAwD,EAAO,OAA4B,MAAM,KAAI,KAAM,KAAA,EAAA,CAAA;;KAOxI,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAC,CAAC,iBAAiB,iBAAiB,GAAA,CAAA;;IAKnC,EAAK,WAAA,KADb,EAAA,GAAA,EAiBM,OAjBN,IAiBM,CAbJ,EAOE,GAAA;KANA,OAAM;KACL,eAAa,GAAA;KACb,OAAO,EAAA,CAAA,CAAC,CAAC,iBAAiB;KAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAiB,EAAI,UAAA,EAAA,WAAwB,IAAM,QAAA,MAAA,CAAA;IAIxE,GAAA,MAAA,GAAA,CAAA,eAAA,OAAA,CAAA,GAAA,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAC,CAAC,iBAAiB,oBAAoB,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAOxC,EAAS,WAAA,KADjB,EAAA,GAAA,EA+CM,OAAA;;IA7CH,OAAK,EAAE,CAAc;IACtB,eAAY;GAEZ,GAAA,CAAA,EASM,OATN,IASM,CANJ,EAIE,EAAA,CAAA,GAAA;IAHA,OAAM;IACL,MAAM;IACN,gBAAc;GAEjB,CAAA,GAAA,EAAmD,QAAA,MAAA,EAA1C,EAAA,CAAA,CAAC,CAAC,iBAAiB,aAAa,GAAA,CAAA,CAAA,CAAA,GAInC,EAAK,eAAA,KADb,EAAA,GAAA,EA8BM,OA9BN,IA8BM,CA1BJ,EASE,GAAA;IARC,eAAa,EAAA,SAAS,iBAAa;IACnC,aAAa,EAAA,CAAA,CAAC,CAAC,iBAAiB;IAChC,MAAM;IACN,uBAAkB,AAAA,EAAA,QAAA,MAAiB,EAAI,UAAA,EAA4C,eAAA,EAAO,QAAO,WAAA,GAAA,KAAoB,KAAA,EAAA,CAAA;GAMxH,GAAA,MAAA,GAAA,CAAA,eAAA,aAAA,CAAA,GAAA,EAeM,OAfN,IAeM,CAZJ,EAIO,QAJP,IAIO,EADF,EAAA,CAAA,CAAC,CAAC,iBAAiB,iBAAiB,GAAA,CAAA,GAEzC,EAMO,QANP,IAMO,GAHD,EAAA,SAAS,iBAAa,GAAA,CAAQ,MAAM,IAAG,MAAC,EAC1C,EAAoB,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAStB,MADR,EAAA,GAAA,EAwBM,OAxBN,IAwBM,CAnBJ,EAKM,OALN,IAKM,CAFJ,EAAqC,EAAA,EAAA,GAAA;IAA9B,MAAM;IAAK,gBAAc;GAChC,CAAA,GAAA,EAA0C,QAAA,MAAA,EAAjC,EAAA,CAAA,CAAC,CAAC,iBAAiB,IAAI,GAAA,CAAA,CAAA,CAAA,GAElC,EAYK,MAZL,IAYK;IATH,EAEK,MAFL,IAEK,EADA,EAAA,CAAA,CAAC,CAAC,iBAAiB,IAAI,GAAA,CAAA;IAE5B,EAEK,MAFL,IAEK,EADA,EAAA,CAAA,CAAC,CAAC,iBAAiB,IAAI,GAAA,CAAA;IAE5B,EAEK,MAFL,IAEK,EADA,EAAA,CAAA,CAAC,CAAC,iBAAiB,IAAI,GAAA,CAAA"}

package/dist/cdn/chunks/{TestEmailModal-DId9Og-N.js → TestEmailModal-CWTmaJuT.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import { B as e, E as t, F as n, H as r, N as i, Q as a, S as o, U as s, a as ee, at as c, b as l, ct as u, f as d, g as f, h as p, m, o as te, p as h, u as g, ut as _, y as v } from "./draggable-IB4x6w2O.js";
-import { u as ne } from "./src-Dwgq7hf4.js";
-import { N as re } from "./useEditorCore-CXYI14ux.js";
-import { D as ie, P as y, V as ae, g as oe, j as se } from "./keys-dJbD1QPs.js";
-import { t as ce } from "./useI18n-DTZ9sIcv.js";
-import { Lt as le, it as ue } from "./icons-BKkJ-5xF.js";
-import { v as de } from "./styleConstants-C_YAPdQS.js";
-import { n as fe, t as pe } from "./MergeTagModeToggle-n3nvSNeQ.js";
-import { t as me } from "./TplModal-BKqDFLq3.js";
-import { t as he } from "./BlockPreviewCanvas-DeS7Sa--.js";
+import { b as ne, u as re } from "./src-DveVYoWS.js";
+import { P as ie } from "./useEditorCore-CQraU2s_.js";
+import { C as ae, F as oe, H as y, M as se, O as ce, g as le } from "./keys-DCWeHkSF.js";
+import { t as ue } from "./useI18n-CyO_Nmca.js";
+import { Lt as de, it as fe } from "./icons-BKkJ-5xF.js";
+import { v as pe } from "./styleConstants-C_YAPdQS.js";
+import { n as me, t as he } from "./MergeTagModeToggle-CdWIGo3Q.js";
+import { t as ge } from "./TplModal-CEuGD7pt.js";
+import { t as _e } from "./BlockPreviewCanvas-DObWyQfh.js";
 //#region src/utils/validateEmailShape.ts
 var b = /[,;<>()[\]\\"'`|/?#@!$%^&*+=~{}]/;
 function x(e) {
@@ -38,31 +38,31 @@ var S = ["aria-busy"], C = {
 	id: "tpl-test-email-preview",
 	"data-testid": "test-email-preview",
 	class: "tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]"
-}, L = {
+}, ve = {
 	key: 0,
 	role: "status",
 	"aria-busy": "true",
 	"data-testid": "preview-resolution-loading",
 	class: "tpl:flex tpl:flex-col tpl:gap-3"
-}, R = { class: "tpl:sr-only" }, ge = {
+}, ye = { class: "tpl:sr-only" }, be = {
 	key: 1,
 	role: "status",
 	"data-testid": "preview-resolution-failed",
 	class: "tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]"
-}, _e = {
+}, xe = {
 	key: 0,
 	role: "status",
 	"data-testid": "test-email-success",
 	class: "tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]"
-}, ve = {
+}, Se = {
 	key: 1,
 	role: "alert",
 	"data-testid": "test-email-error",
 	class: "tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]"
-}, ye = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2" }, be = ["disabled"], xe = ["disabled"], Se = {
+}, L = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2" }, Ce = ["disabled"], we = ["disabled"], Te = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1.5"
-}, Ce = { key: 1 }, z = /* @__PURE__ */ o({
+}, Ee = { key: 1 }, R = /* @__PURE__ */ o({
 	__name: "TestEmailModal",
 	props: {
 		visible: { type: Boolean },
@@ -74,37 +74,40 @@ var S = ["aria-busy"], C = {
 	},
 	emits: ["send", "close"],
 	setup(o, { emit: b }) {
-		let z = o, B = b, { t: V } = ce(), we = t(oe, null), H = a(""), U = a("desktop"), Te = t(ae, void 0), W = re({
-			resolvePreview: Te ?? void 0,
-			getContent: () => we?.content.value ?? {
-				blocks: [],
-				settings: {}
+		let R = o, z = b, { t: B } = ue(), De = t(le, null), V = t(ae, void 0), H = a(""), U = a("desktop"), Oe = t(y, void 0), W = ie({
+			resolvePreview: Oe ?? void 0,
+			getContent: () => {
+				let e = De?.content.value ?? {
+					blocks: [],
+					settings: {}
+				};
+				return V && R.visible ? ne(V, e) : e;
 			},
-			isActive: () => z.visible,
+			isActive: () => R.visible,
 			getRecipient: () => H.value || void 0
-		}), G = t(se, null), K = a(ne(t(ie, y).value)), q = d({
+		}), G = t(se, null), K = a(re(t(ce, oe).value)), q = d({
 			get: () => W.isConfigured ? !1 : G?.value ?? K.value,
 			set: (e) => {
 				G ? G.value = e : K.value = e;
 			}
-		}), Ee = d(() => W.content.value.blocks ?? []), J = d(() => z.allowedRecipients !== void 0 && z.allowedRecipients.length > 0), De = d(() => z.allowedRecipients?.length === 1);
-		e(() => z.visible, (e) => {
-			e && (H.value = z.defaultRecipient ?? z.allowedRecipients?.[0] ?? "");
+		}), ke = d(() => W.content.value.blocks ?? []), Ae = d(() => W.content.value.settings), J = d(() => R.allowedRecipients !== void 0 && R.allowedRecipients.length > 0), je = d(() => R.allowedRecipients?.length === 1);
+		e(() => R.visible, (e) => {
+			e && (H.value = R.defaultRecipient ?? R.allowedRecipients?.[0] ?? "");
 		}, { immediate: !0 });
-		let Y = d(() => J.value ? H.value.length > 0 : x(H.value)), X = d(() => Y.value && !z.isSending && !z.justSent), Oe = d(() => !J.value && H.value.trim().length > 0 && !Y.value), Z = d(() => z.error ? z.error.kind === "provider" ? z.error.message : V.testEmail.recipientNotAllowed : null);
+		let Y = d(() => J.value ? H.value.length > 0 : x(H.value)), X = d(() => Y.value && !R.isSending && !R.justSent), Me = d(() => !J.value && H.value.trim().length > 0 && !Y.value), Z = d(() => R.error ? R.error.kind === "provider" ? R.error.message : B.testEmail.recipientNotAllowed : null);
 		function Q() {
-			X.value && B("send", H.value.trim());
+			X.value && z("send", H.value.trim());
 		}
 		function $() {
-			z.isSending || B("close");
+			R.isSending || z("close");
 		}
-		function ke(e) {
+		function Ne(e) {
 			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Q()), e.key === "Escape" && $();
 		}
-		return (e, t) => (i(), m(me, {
+		return (e, t) => (i(), m(ge, {
 			visible: o.visible,
 			onClose: $,
-			onKeydown: ke
+			onKeydown: Ne
 		}, {
 			default: r(() => [h("div", {
 				role: "dialog",
@@ -117,10 +120,10 @@ var S = ["aria-busy"], C = {
 					"box-shadow": "var(--tpl-shadow-xl)"
 				}
 			}, [
-				h("h3", C, _(c(V).testEmail.title), 1),
+				h("h3", C, _(c(B).testEmail.title), 1),
 				h("div", w, [
-					h("label", T, _(c(V).testEmail.recipientLabel), 1),
-					De.value ? (i(), f("input", {
+					h("label", T, _(c(B).testEmail.recipientLabel), 1),
+					je.value ? (i(), f("input", {
 						key: 0,
 						id: "tpl-test-email-recipient",
 						type: "text",
@@ -145,62 +148,64 @@ var S = ["aria-busy"], C = {
 						type: "email",
 						autocomplete: "email",
 						spellcheck: "false",
-						placeholder: c(V).testEmail.recipientPlaceholder,
+						placeholder: c(B).testEmail.recipientPlaceholder,
 						disabled: o.isSending || o.justSent,
 						"data-testid": "test-email-recipient",
 						class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
 					}, null, 8, k)), [[te, H.value]]),
-					Oe.value ? (i(), f("p", A, _(c(V).testEmail.invalidAddress), 1)) : p("", !0)
+					Me.value ? (i(), f("p", A, _(c(B).testEmail.invalidAddress), 1)) : p("", !0)
 				]),
-				h("div", j, [h("div", M, [h("span", N, _(c(V).testEmail.preview), 1), h("div", P, [c(W).supersedesSamples.value ? p("", !0) : (i(), m(pe, {
+				h("div", j, [h("div", M, [h("span", N, _(c(B).testEmail.preview), 1), h("div", P, [c(W).supersedesSamples.value ? p("", !0) : (i(), m(he, {
 					key: 0,
 					"sample-mode": q.value,
 					onChange: t[2] ||= (e) => q.value = e
-				}, null, 8, ["sample-mode"])), l(fe, {
+				}, null, 8, ["sample-mode"])), l(me, {
 					viewport: U.value,
 					onChange: t[3] ||= (e) => U.value = e
-				}, null, 8, ["viewport"])])]), h("p", F, _(c(W).supersedesSamples.value ? c(V).previewResolution.hint : q.value ? c(V).testEmail.previewHintSample : c(V).testEmail.previewHint), 1)]),
-				h("div", I, [c(W).isInitialResolve.value ? (i(), f("div", L, [h("span", R, _(c(V).previewResolution.resolving), 1), (i(), f(g, null, n(3, (e) => h("div", {
+				}, null, 8, ["viewport"])])]), h("p", F, _(c(W).supersedesSamples.value ? c(B).previewResolution.hint : q.value ? c(B).testEmail.previewHintSample : c(B).testEmail.previewHint), 1)]),
+				h("div", I, [c(W).isInitialResolve.value ? (i(), f("div", ve, [h("span", ye, _(c(B).previewResolution.resolving), 1), (i(), f(g, null, n(3, (e) => h("div", {
 					key: e,
 					"aria-hidden": "true",
 					class: "tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]"
-				})), 64))])) : c(W).hasFailed.value ? (i(), f("p", ge, _(c(V).previewResolution.failed), 1)) : p("", !0), c(W).isInitialResolve.value ? p("", !0) : (i(), m(he, {
+				})), 64))])) : c(W).hasFailed.value ? (i(), f("p", be, _(c(B).previewResolution.failed), 1)) : p("", !0), c(W).isInitialResolve.value ? p("", !0) : (i(), m(_e, {
 					key: 2,
-					blocks: Ee.value,
+					blocks: ke.value,
+					settings: Ae.value,
 					viewport: U.value,
 					"apply-condition-filter": !c(W).isConfigured
 				}, null, 8, [
 					"blocks",
+					"settings",
 					"viewport",
 					"apply-condition-filter"
 				]))]),
-				o.justSent ? (i(), f("p", _e, [l(c(le), {
+				o.justSent ? (i(), f("p", xe, [l(c(de), {
 					size: 13,
 					"stroke-width": 2.5
-				}), v(" " + _(c(V).testEmail.success), 1)])) : Z.value ? (i(), f("p", ve, _(Z.value), 1)) : p("", !0),
-				h("div", ye, [h("button", {
+				}), v(" " + _(c(B).testEmail.success), 1)])) : Z.value ? (i(), f("p", Se, _(Z.value), 1)) : p("", !0),
+				h("div", L, [h("button", {
 					type: "button",
 					"data-testid": "test-email-cancel",
 					class: u(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", { "tpl:cursor-not-allowed tpl:opacity-50": o.isSending }]),
 					disabled: o.isSending,
 					onClick: $
-				}, _(c(V).testEmail.cancel), 11, be), h("button", {
+				}, _(c(B).testEmail.cancel), 11, Ce), h("button", {
 					type: "button",
 					"data-testid": "test-email-send",
-					class: u(c(de)),
+					class: u(c(pe)),
 					disabled: !X.value,
 					onClick: Q
-				}, [o.isSending ? (i(), f("span", Se, [l(c(ue), {
+				}, [o.isSending ? (i(), f("span", Te, [l(c(fe), {
 					class: "tpl:animate-spin",
 					size: 12,
 					"stroke-width": 2
-				}), v(" " + _(c(V).testEmail.sending), 1)])) : (i(), f("span", Ce, _(c(V).testEmail.send), 1))], 10, xe)])
+				}), v(" " + _(c(B).testEmail.sending), 1)])) : (i(), f("span", Ee, _(c(B).testEmail.send), 1))], 10, we)])
 			], 8, S)]),
 			_: 1
 		}, 8, ["visible"]));
 	}
 });
 //#endregion
-export { z as default };
+export { R as default };
-//# sourceMappingURL=TestEmailModal-DId9Og-N.js.map
+//# sourceMappingURL=TestEmailModal-CWTmaJuT.js.map

package/dist/cdn/chunks/TestEmailModal-CWTmaJuT.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TestEmailModal-CWTmaJuT.js","names":[],"sources":["../../../src/utils/validateEmailShape.ts","../../../src/components/TestEmailModal.vue","../../../src/components/TestEmailModal.vue"],"sourcesContent":["/**\n * Characters that cannot appear in a domain but routinely arrive attached to one.\n *\n * A **denylist**, not an allowlist, so unicode domains keep working — an\n * allowlist of `[a-z0-9.-]` would be the stricter, more obviously \"correct\"\n * choice and would reject them. What this actually targets is the punctuation\n * that comes from pasting out of a list or a mail client: `user@example.com,`\n * and `<user@example.com>`.\n */\nconst IMPOSSIBLE_DOMAIN_CHARS = /[,;<>()[\\]\\\\\"'`|/?#@!$%^&*+=~{}]/;\n\n/**\n * Does this string look like an email address?\n *\n * Deliberately loose: non-empty, no whitespace, exactly one `@`, a non-empty\n * local part, and a domain containing a dot with something either side and no\n * impossible characters. That is enough to catch the mistakes a typo actually\n * produces — a missing `@`, a trailing comma, a half-typed domain — before the\n * user pays for a round-trip.\n *\n * **Do not \"improve\" this into an RFC-ish regex.** Those reliably reject valid\n * addresses (plus-addressing, long new gTLDs, unicode domains) and the resulting\n * bug reports cost far more than the malformed addresses they catch. Only the\n * receiving mail server can really tell, and the sending backend has to validate\n * anyway — this is a fast-feedback affordance, not a gate. `validateEmailShape`\n * has its own test file pinning the addresses that must keep passing.\n */\nexport function looksLikeEmail(value: string): boolean {\n const trimmed = value.trim();\n if (trimmed.length === 0) return false;\n if (/\\s/.test(trimmed)) return false;\n\n const parts = trimmed.split(\"@\");\n if (parts.length !== 2) return false;\n\n const [local, domain] = parts;\n if (local.length === 0) return false;\n if (IMPOSSIBLE_DOMAIN_CHARS.test(domain)) return false;\n\n // A dot with at least one character either side, so `a@b` and `a@b.` fail but\n // `a@b.c` and `a@sub.example.museum` pass.\n const dot = domain.indexOf(\".\");\n return dot > 0 && dot < domain.length - 1;\n}\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n * for BYO senders; Cloud never takes it, because its list comes from a signed\n * JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n * version; there is nothing to choose, so offering an editable field would\n * imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport {\n applyLayout,\n hasMergeTagSamples,\n type ViewportSize,\n} from \"@templatical/types\";\nimport {\n EDITOR_KEY,\n LAYOUT_KEY,\n MERGE_TAGS_KEY,\n NO_MERGE_TAGS,\n MERGE_TAG_SAMPLE_MODE_KEY,\n RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n visible: boolean;\n /** Omitted / undefined means unrestricted, so the field accepts free text. */\n allowedRecipients?: string[];\n defaultRecipient?: string;\n isSending: boolean;\n justSent: boolean;\n error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"send\", recipient: string): void;\n (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\nconst layout = inject(LAYOUT_KEY, undefined);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n *\n * Compose the embedder shell while the dialog is showing. The send payload\n * stays unshelled.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n resolvePreview: resolvePreviewHook ?? undefined,\n getContent: () => {\n const raw = editor?.content.value ?? { blocks: [], settings: {} as never };\n return layout && props.visible ? applyLayout(layout, raw) : raw;\n },\n isActive: () => props.visible,\n getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(\n hasMergeTagSamples(inject(MERGE_TAGS_KEY, NO_MERGE_TAGS).value),\n);\nconst sampleMode = computed({\n get: () =>\n // Off entirely while a resolver is configured — same rule as the canvas.\n previewResolution.isConfigured\n ? false\n : (sharedSampleMode?.value ?? localSampleMode.value),\n set: (on: boolean) => {\n if (sharedSampleMode) sharedSampleMode.value = on;\n else localSampleMode.value = on;\n },\n});\n\nconst previewBlocks = computed(\n () => previewResolution.content.value.blocks ?? [],\n);\n\nconst previewSettings = computed(\n () => previewResolution.content.value.settings,\n);\n\nconst hasAllowlist = computed(\n () =>\n props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n () => props.visible,\n (visible) => {\n if (!visible) return;\n recipient.value =\n props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n },\n { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n hasAllowlist.value\n ? recipient.value.length > 0\n : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n () =>\n !hasAllowlist.value &&\n recipient.value.trim().length > 0 &&\n !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n if (!props.error) return null;\n return props.error.kind === \"provider\"\n ? props.error.message\n : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n if (!canSend.value) return;\n emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n // Sending is the one state that blocks dismissal; the success state closes\n // immediately rather than making the user wait out the timer.\n if (props.isSending) return;\n emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n handleSend();\n }\n if (event.key === \"Escape\") {\n handleClose();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n \n <div\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-busy=\"isSending\"\n aria-labelledby=\"tpl-test-email-title\"\n class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n \"\n >\n <h3\n id=\"tpl-test-email-title\"\n class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ t.testEmail.title }}\n </h3>\n\n \n <div class=\"tpl:mb-3 tpl:shrink-0\">\n <label\n for=\"tpl-test-email-recipient\"\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.testEmail.recipientLabel }}\n </label>\n\n \n <input\n v-if=\"isSingleRecipient\"\n id=\"tpl-test-email-recipient\"\n type=\"text\"\n :value=\"recipient\"\n disabled\n data-testid=\"test-email-recipient\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n />\n\n \n <select\n v-else-if=\"hasAllowlist\"\n id=\"tpl-test-email-recipient\"\n v-model=\"recipient\"\n :disabled=\"isSending || justSent\"\n data-testid=\"test-email-recipient\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n >\n <option\n v-for=\"email in allowedRecipients\"\n :key=\"email\"\n :value=\"email\"\n >\n {{ email }}\n </option>\n </select>\n\n \n <input\n v-else\n id=\"tpl-test-email-recipient\"\n v-model=\"recipient\"\n type=\"email\"\n autocomplete=\"email\"\n spellcheck=\"false\"\n :placeholder=\"t.testEmail.recipientPlaceholder\"\n :disabled=\"isSending || justSent\"\n data-testid=\"test-email-recipient\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n />\n\n <p\n v-if=\"showShapeHint\"\n class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.testEmail.invalidAddress }}\n </p>\n </div>\n\n \n <div class=\"tpl:mb-2 tpl:shrink-0\">\n \n <div\n class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n >\n <span\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.testEmail.preview }}\n </span>\n\n <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n <MergeTagModeToggle\n v-if=\"!previewResolution.supersedesSamples.value\"\n :sample-mode=\"sampleMode\"\n @change=\"sampleMode = $event\"\n />\n\n \n <ViewportToggle\n :viewport=\"previewViewport\"\n @change=\"previewViewport = $event\"\n />\n </div>\n </div>\n\n \n <p\n data-testid=\"test-email-preview-hint\"\n class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{\n previewResolution.supersedesSamples.value\n ? t.previewResolution.hint\n : sampleMode\n ? t.testEmail.previewHintSample\n : t.testEmail.previewHint\n }}\n </p>\n </div>\n\n \n <div\n id=\"tpl-test-email-preview\"\n data-testid=\"test-email-preview\"\n class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n >\n \n <div\n v-if=\"previewResolution.isInitialResolve.value\"\n role=\"status\"\n aria-busy=\"true\"\n data-testid=\"preview-resolution-loading\"\n class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n >\n <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n <div\n v-for=\"n in 3\"\n :key=\"n\"\n aria-hidden=\"true\"\n class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n ></div>\n </div>\n\n \n <p\n v-else-if=\"previewResolution.hasFailed.value\"\n role=\"status\"\n data-testid=\"preview-resolution-failed\"\n class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n >\n {{ t.previewResolution.failed }}\n </p>\n\n <BlockPreviewCanvas\n v-if=\"!previewResolution.isInitialResolve.value\"\n :blocks=\"previewBlocks\"\n :settings=\"previewSettings\"\n :viewport=\"previewViewport\"\n :apply-condition-filter=\"!previewResolution.isConfigured\"\n />\n </div>\n\n \n <p\n v-if=\"justSent\"\n role=\"status\"\n data-testid=\"test-email-success\"\n class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n >\n <Check :size=\"13\" :stroke-width=\"2.5\" />\n {{ t.testEmail.success }}\n </p>\n\n \n <p\n v-else-if=\"errorText\"\n role=\"alert\"\n data-testid=\"test-email-error\"\n class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n >\n {{ errorText }}\n </p>\n\n \n <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n <button\n type=\"button\"\n data-testid=\"test-email-cancel\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n :disabled=\"isSending\"\n :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n @click=\"handleClose\"\n >\n {{ t.testEmail.cancel }}\n </button>\n <button\n type=\"button\"\n data-testid=\"test-email-send\"\n :class=\"primaryBtnClass\"\n :disabled=\"!canSend\"\n @click=\"handleSend\"\n >\n <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n <LoaderCircle\n class=\"tpl:animate-spin\"\n :size=\"12\"\n :stroke-width=\"2\"\n />\n {{ t.testEmail.sending }}\n </span>\n <span v-else>\n {{ t.testEmail.send }}\n </span>\n </button>\n </div>\n </div>\n </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n * for BYO senders; Cloud never takes it, because its list comes from a signed\n * JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n * version; there is nothing to choose, so offering an editable field would\n * imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport {\n applyLayout,\n hasMergeTagSamples,\n type ViewportSize,\n} from \"@templatical/types\";\nimport {\n EDITOR_KEY,\n LAYOUT_KEY,\n MERGE_TAGS_KEY,\n NO_MERGE_TAGS,\n MERGE_TAG_SAMPLE_MODE_KEY,\n RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n visible: boolean;\n /** Omitted / undefined means unrestricted, so the field accepts free text. */\n allowedRecipients?: string[];\n defaultRecipient?: string;\n isSending: boolean;\n justSent: boolean;\n error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n (e: \"send\", recipient: string): void;\n (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\nconst layout = inject(LAYOUT_KEY, undefined);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n *\n * Compose the embedder shell while the dialog is showing. The send payload\n * stays unshelled.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n resolvePreview: resolvePreviewHook ?? undefined,\n getContent: () => {\n const raw = editor?.content.value ?? { blocks: [], settings: {} as never };\n return layout && props.visible ? applyLayout(layout, raw) : raw;\n },\n isActive: () => props.visible,\n getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(\n hasMergeTagSamples(inject(MERGE_TAGS_KEY, NO_MERGE_TAGS).value),\n);\nconst sampleMode = computed({\n get: () =>\n // Off entirely while a resolver is configured — same rule as the canvas.\n previewResolution.isConfigured\n ? false\n : (sharedSampleMode?.value ?? localSampleMode.value),\n set: (on: boolean) => {\n if (sharedSampleMode) sharedSampleMode.value = on;\n else localSampleMode.value = on;\n },\n});\n\nconst previewBlocks = computed(\n () => previewResolution.content.value.blocks ?? [],\n);\n\nconst previewSettings = computed(\n () => previewResolution.content.value.settings,\n);\n\nconst hasAllowlist = computed(\n () =>\n props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n () => props.visible,\n (visible) => {\n if (!visible) return;\n recipient.value =\n props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n },\n { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n hasAllowlist.value\n ? recipient.value.length > 0\n : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n () =>\n !hasAllowlist.value &&\n recipient.value.trim().length > 0 &&\n !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n if (!props.error) return null;\n return props.error.kind === \"provider\"\n ? props.error.message\n : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n if (!canSend.value) return;\n emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n // Sending is the one state that blocks dismissal; the success state closes\n // immediately rather than making the user wait out the timer.\n if (props.isSending) return;\n emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Enter\" && !event.shiftKey) {\n event.preventDefault();\n handleSend();\n }\n if (event.key === \"Escape\") {\n handleClose();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n \n <div\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-busy=\"isSending\"\n aria-labelledby=\"tpl-test-email-title\"\n class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n \"\n >\n <h3\n id=\"tpl-test-email-title\"\n class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ t.testEmail.title }}\n </h3>\n\n \n <div class=\"tpl:mb-3 tpl:shrink-0\">\n <label\n for=\"tpl-test-email-recipient\"\n class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.testEmail.recipientLabel }}\n </label>\n\n \n <input\n v-if=\"isSingleRecipient\"\n id=\"tpl-test-email-recipient\"\n type=\"text\"\n :value=\"recipient\"\n disabled\n data-testid=\"test-email-recipient\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n />\n\n \n <select\n v-else-if=\"hasAllowlist\"\n id=\"tpl-test-email-recipient\"\n v-model=\"recipient\"\n :disabled=\"isSending || justSent\"\n data-testid=\"test-email-recipient\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n >\n <option\n v-for=\"email in allowedRecipients\"\n :key=\"email\"\n :value=\"email\"\n >\n {{ email }}\n </option>\n </select>\n\n \n <input\n v-else\n id=\"tpl-test-email-recipient\"\n v-model=\"recipient\"\n type=\"email\"\n autocomplete=\"email\"\n spellcheck=\"false\"\n :placeholder=\"t.testEmail.recipientPlaceholder\"\n :disabled=\"isSending || justSent\"\n data-testid=\"test-email-recipient\"\n class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:focus:border-[var(--tpl-primary)] tpl:focus:shadow-[var(--tpl-ring)] tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n />\n\n <p\n v-if=\"showShapeHint\"\n class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.testEmail.invalidAddress }}\n </p>\n </div>\n\n \n <div class=\"tpl:mb-2 tpl:shrink-0\">\n \n <div\n class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n >\n <span\n class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n >\n {{ t.testEmail.preview }}\n </span>\n\n <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n <MergeTagModeToggle\n v-if=\"!previewResolution.supersedesSamples.value\"\n :sample-mode=\"sampleMode\"\n @change=\"sampleMode = $event\"\n />\n\n \n <ViewportToggle\n :viewport=\"previewViewport\"\n @change=\"previewViewport = $event\"\n />\n </div>\n </div>\n\n \n <p\n data-testid=\"test-email-preview-hint\"\n class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{\n previewResolution.supersedesSamples.value\n ? t.previewResolution.hint\n : sampleMode\n ? t.testEmail.previewHintSample\n : t.testEmail.previewHint\n }}\n </p>\n </div>\n\n \n <div\n id=\"tpl-test-email-preview\"\n data-testid=\"test-email-preview\"\n class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n >\n \n <div\n v-if=\"previewResolution.isInitialResolve.value\"\n role=\"status\"\n aria-busy=\"true\"\n data-testid=\"preview-resolution-loading\"\n class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n >\n <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n <div\n v-for=\"n in 3\"\n :key=\"n\"\n aria-hidden=\"true\"\n class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n ></div>\n </div>\n\n \n <p\n v-else-if=\"previewResolution.hasFailed.value\"\n role=\"status\"\n data-testid=\"preview-resolution-failed\"\n class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n >\n {{ t.previewResolution.failed }}\n </p>\n\n <BlockPreviewCanvas\n v-if=\"!previewResolution.isInitialResolve.value\"\n :blocks=\"previewBlocks\"\n :settings=\"previewSettings\"\n :viewport=\"previewViewport\"\n :apply-condition-filter=\"!previewResolution.isConfigured\"\n />\n </div>\n\n \n <p\n v-if=\"justSent\"\n role=\"status\"\n data-testid=\"test-email-success\"\n class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n >\n <Check :size=\"13\" :stroke-width=\"2.5\" />\n {{ t.testEmail.success }}\n </p>\n\n \n <p\n v-else-if=\"errorText\"\n role=\"alert\"\n data-testid=\"test-email-error\"\n class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n >\n {{ errorText }}\n </p>\n\n \n <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n <button\n type=\"button\"\n data-testid=\"test-email-cancel\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n :disabled=\"isSending\"\n :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n @click=\"handleClose\"\n >\n {{ t.testEmail.cancel }}\n </button>\n <button\n type=\"button\"\n data-testid=\"test-email-send\"\n :class=\"primaryBtnClass\"\n :disabled=\"!canSend\"\n @click=\"handleSend\"\n >\n <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n <LoaderCircle\n class=\"tpl:animate-spin\"\n :size=\"12\"\n :stroke-width=\"2\"\n />\n {{ t.testEmail.sending }}\n </span>\n <span v-else>\n {{ t.testEmail.send }}\n </span>\n </button>\n </div>\n </div>\n </TplModal>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{TestEmailPanel-B8LwXmeX.js → TestEmailPanel-BdYsVHXA.js} RENAMED Viewed

@@ -5,7 +5,7 @@ var o = /* @__PURE__ */ t({
 	__name: "TestEmailPanel",
 	props: { feature: {} },
 	setup(t) {
-		let o = t, s = a(() => import("./TestEmailModal-DId9Og-N.js"));
+		let o = t, s = a(() => import("./TestEmailModal-CWTmaJuT.js"));
 		function c(e) {
 			o.feature.send(e);
 		}
@@ -32,4 +32,4 @@ var o = /* @__PURE__ */ t({
 //#endregion
 export { o as default };
-//# sourceMappingURL=TestEmailPanel-B8LwXmeX.js.map
+//# sourceMappingURL=TestEmailPanel-BdYsVHXA.js.map

package/dist/cdn/chunks/{TestEmailPanel-B8LwXmeX.js.map → TestEmailPanel-BdYsVHXA.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TestEmailPanel-~~B8LwXmeX~~.js","names":[],"sources":["../../../src/components/TestEmailPanel.vue","../../../src/components/TestEmailPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n Mount point for the test-email dialog, shared by the OSS and Cloud editors.\n \n The dialog is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens it — `defineAsyncComponent`\n * triggers its `import()` on first render, not at definition time. `Editor.vue`\n * in turn lazy-loads this wrapper and renders it only when a\n * `TestEmailProvider` is configured, so a consumer without one downloads none\n * of it.\n \n Never static-import `TestEmailModal` into `Editor.vue`:\n * that collapses it into the main entry for every consumer, including those who\n * never configure a sender. Guarded by `tests/cdn-chunk-granularity.test.ts`.\n /\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseTestEmailFeatureReturn } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n feature: UseTestEmailFeatureReturn;\n}>();\n\nconst TestEmailModal = defineAsyncComponent(\n () => import(\"./TestEmailModal.vue\"),\n);\n\nfunction handleSend(recipient: string): void {\n void props.feature.send(recipient);\n}\n</script>\n\n<template>\n <TestEmailModal\n v-if=\"feature.isModalOpen.value\"\n :visible=\"feature.isModalOpen.value\"\n :allowed-recipients=\"feature.allowedRecipients.value\"\n :default-recipient=\"feature.defaultRecipient.value\"\n :is-sending=\"feature.isSending.value\"\n :just-sent=\"feature.justSent.value\"\n :error=\"feature.error.value\"\n @send=\"handleSend\"\n @close=\"feature.close()\"\n />\n</template>\n","<script setup lang=\"ts\">\n/\n Mount point for the test-email dialog, shared by the OSS and Cloud editors.\n \n The dialog is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens it — `defineAsyncComponent`\n * triggers its `import()` on first render, not at definition time. `Editor.vue`\n * in turn lazy-loads this wrapper and renders it only when a\n * `TestEmailProvider` is configured, so a consumer without one downloads none\n * of it.\n \n Never static-import `TestEmailModal` into `Editor.vue`:\n * that collapses it into the main entry for every consumer, including those who\n * never configure a sender. Guarded by `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseTestEmailFeatureReturn } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n feature: UseTestEmailFeatureReturn;\n}>();\n\nconst TestEmailModal = defineAsyncComponent(\n () => import(\"./TestEmailModal.vue\"),\n);\n\nfunction handleSend(recipient: string): void {\n void props.feature.send(recipient);\n}\n</script>\n\n<template>\n <TestEmailModal\n v-if=\"feature.isModalOpen.value\"\n :visible=\"feature.isModalOpen.value\"\n :allowed-recipients=\"feature.allowedRecipients.value\"\n :default-recipient=\"feature.defaultRecipient.value\"\n :is-sending=\"feature.isSending.value\"\n :just-sent=\"feature.justSent.value\"\n :error=\"feature.error.value\"\n @send=\"handleSend\"\n @close=\"feature.close()\"\n />\n</template>\n"],"mappings":";;;;;;;EAkBA,IAAM,IAAQ,GAIR,IAAiB,QACf,OAAO,+BACf;EAEA,SAAS,EAAW,GAAyB;GAC3C,EAAW,QAAQ,KAAK,CAAS;EACnC;mBAKU,EAAA,QAAQ,YAAY,SAD5B,EAAA,GAAA,EAUE,EAAA,CAAA,GAAA;;GARC,SAAS,EAAA,QAAQ,YAAY;GAC7B,sBAAoB,EAAA,QAAQ,kBAAkB;GAC9C,qBAAmB,EAAA,QAAQ,iBAAiB;GAC5C,cAAY,EAAA,QAAQ,UAAU;GAC9B,aAAW,EAAA,QAAQ,SAAS;GAC5B,OAAO,EAAA,QAAQ,MAAM;GACrB,QAAM;GACN,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}
1	+ {"version":3,"file":"TestEmailPanel-BdYsVHXA.js","names":[],"sources":["../../../src/components/TestEmailPanel.vue","../../../src/components/TestEmailPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n Mount point for the test-email dialog, shared by the OSS and Cloud editors.\n \n The dialog is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens it — `defineAsyncComponent`\n * triggers its `import()` on first render, not at definition time. `Editor.vue`\n * in turn lazy-loads this wrapper and renders it only when a\n * `TestEmailProvider` is configured, so a consumer without one downloads none\n * of it.\n \n Never static-import `TestEmailModal` into `Editor.vue`:\n * that collapses it into the main entry for every consumer, including those who\n * never configure a sender. Guarded by `tests/cdn-chunk-granularity.test.ts`.\n /\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseTestEmailFeatureReturn } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n feature: UseTestEmailFeatureReturn;\n}>();\n\nconst TestEmailModal = defineAsyncComponent(\n () => import(\"./TestEmailModal.vue\"),\n);\n\nfunction handleSend(recipient: string): void {\n void props.feature.send(recipient);\n}\n</script>\n\n<template>\n <TestEmailModal\n v-if=\"feature.isModalOpen.value\"\n :visible=\"feature.isModalOpen.value\"\n :allowed-recipients=\"feature.allowedRecipients.value\"\n :default-recipient=\"feature.defaultRecipient.value\"\n :is-sending=\"feature.isSending.value\"\n :just-sent=\"feature.justSent.value\"\n :error=\"feature.error.value\"\n @send=\"handleSend\"\n @close=\"feature.close()\"\n />\n</template>\n","<script setup lang=\"ts\">\n/\n Mount point for the test-email dialog, shared by the OSS and Cloud editors.\n \n The dialog is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens it — `defineAsyncComponent`\n * triggers its `import()` on first render, not at definition time. `Editor.vue`\n * in turn lazy-loads this wrapper and renders it only when a\n * `TestEmailProvider` is configured, so a consumer without one downloads none\n * of it.\n \n Never static-import `TestEmailModal` into `Editor.vue`:\n * that collapses it into the main entry for every consumer, including those who\n * never configure a sender. Guarded by `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseTestEmailFeatureReturn } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n feature: UseTestEmailFeatureReturn;\n}>();\n\nconst TestEmailModal = defineAsyncComponent(\n () => import(\"./TestEmailModal.vue\"),\n);\n\nfunction handleSend(recipient: string): void {\n void props.feature.send(recipient);\n}\n</script>\n\n<template>\n <TestEmailModal\n v-if=\"feature.isModalOpen.value\"\n :visible=\"feature.isModalOpen.value\"\n :allowed-recipients=\"feature.allowedRecipients.value\"\n :default-recipient=\"feature.defaultRecipient.value\"\n :is-sending=\"feature.isSending.value\"\n :just-sent=\"feature.justSent.value\"\n :error=\"feature.error.value\"\n @send=\"handleSend\"\n @close=\"feature.close()\"\n />\n</template>\n"],"mappings":";;;;;;;EAkBA,IAAM,IAAQ,GAIR,IAAiB,QACf,OAAO,+BACf;EAEA,SAAS,EAAW,GAAyB;GAC3C,EAAW,QAAQ,KAAK,CAAS;EACnC;mBAKU,EAAA,QAAQ,YAAY,SAD5B,EAAA,GAAA,EAUE,EAAA,CAAA,GAAA;;GARC,SAAS,EAAA,QAAQ,YAAY;GAC7B,sBAAoB,EAAA,QAAQ,kBAAkB;GAC9C,qBAAmB,EAAA,QAAQ,iBAAiB;GAC5C,cAAY,EAAA,QAAQ,UAAU;GAC9B,aAAW,EAAA,QAAQ,SAAS;GAC5B,OAAO,EAAA,QAAQ,MAAM;GACrB,QAAM;GACN,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}

package/dist/cdn/chunks/{TitleEditor-C7KMzX1e.js → TitleEditor-pJeeZ-PX.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { E as e, N as t, S as n, at as r, b as i, ct as a, d as o, f as s, g as c, h as l, lt as u, m as d, p as f, q as p, u as m, ut as h, y as g } from "./draggable-IB4x6w2O.js";
-import { b as ee, y as te } from "./useEditorCore-CXYI14ux.js";
-import { K as ne, T as _, Y as v, k as y } from "./keys-dJbD1QPs.js";
-import { t as b } from "./useI18n-DTZ9sIcv.js";
-import { n as x } from "./usePopoverPosition-gB9q-ql7.js";
+import { b as ee, x as te } from "./useEditorCore-CQraU2s_.js";
+import { A as ne, E as _, J as v, Z as y } from "./keys-DCWeHkSF.js";
+import { t as b } from "./useI18n-CyO_Nmca.js";
+import { n as x } from "./usePopoverPosition-BJRvAb-h.js";
 import { P as re, Rt as ie, Vt as ae, ct as oe, it as se, ut as ce } from "./icons-BKkJ-5xF.js";
-import { n as S, t as C } from "./RichTextEditorContent-Ch5zeyZ7.js";
+import { n as S, t as C } from "./RichTextEditorContent-Fzuu9pLP.js";
 //#region src/components/blocks/TitleEditor.vue?vue&type=script&setup=true&lang.ts
 var w = { class: "tpl-text-editor-wrapper tpl:relative" }, T = ["data-tpl-theme", "aria-label"], E = ["aria-label", "title"], D = ["aria-label", "title"], O = ["aria-label", "title"], k = {
 	key: 0,
@@ -23,7 +23,7 @@ var w = { class: "tpl-text-editor-wrapper tpl:relative" }, T = ["data-tpl-theme"
 	},
 	emits: ["done"],
 	setup(n, { emit: P }) {
-		let F = n, I = P, L = e(ne, null), R = e(v, null), z = x(), B = e(y, null), V = e(_, null), le = s(() => (B?.isOpen.value ?? !1) || (V?.isOpen.value ?? !1)), { t: H } = b(), { editor: U, EditorContent: W, isLoading: G, initError: ue, retry: de, showLinkDialog: fe, linkUrl: K, linkColor: q, linkDialogRef: J, canRequestMergeTag: Y, canInsertLogicTag: X, openLinkDialog: Z, insertLink: pe, removeLink: me, closeLinkDialog: he, handleLinkKeydown: ge, handleAddMergeTag: Q, handleAddLogicTag: $ } = te({
+		let F = n, I = P, L = e(v, null), R = e(y, null), z = x(), B = e(ne, null), V = e(_, null), le = s(() => (B?.isOpen.value ?? !1) || (V?.isOpen.value ?? !1)), { t: H } = b(), { editor: U, EditorContent: W, isLoading: G, initError: ue, retry: de, showLinkDialog: fe, linkUrl: K, linkColor: q, linkDialogRef: J, canRequestMergeTag: Y, canInsertLogicTag: X, openLinkDialog: Z, insertLink: pe, removeLink: me, closeLinkDialog: he, handleLinkKeydown: ge, handleAddMergeTag: Q, handleAddLogicTag: $ } = ee({
 			blockId: () => F.block.id,
 			blockContent: () => F.block.content,
 			onDone: () => I("done"),
@@ -33,7 +33,7 @@ var w = { class: "tpl-text-editor-wrapper tpl:relative" }, T = ["data-tpl-theme"
 					import("./tiptap-DhLuKyDc.js").then((e) => e.i),
 					import("./tiptap-DhLuKyDc.js").then((e) => e.a),
 					import("./tiptap-DhLuKyDc.js").then((e) => e.u),
-					import("./extensions-Bhu8UEE5.js")
+					import("./extensions-CafoGF65.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -50,7 +50,7 @@ var w = { class: "tpl-text-editor-wrapper tpl:relative" }, T = ["data-tpl-theme"
 							strike: !1,
 							link: !1
 						}),
-						ee(c).configure({
+						te(c).configure({
 							openOnClick: !1,
 							HTMLAttributes: {
 								target: "_blank",
@@ -196,4 +196,4 @@ var w = { class: "tpl-text-editor-wrapper tpl:relative" }, T = ["data-tpl-theme"
 //#endregion
 export { P as default };
-//# sourceMappingURL=TitleEditor-C7KMzX1e.js.map
+//# sourceMappingURL=TitleEditor-pJeeZ-PX.js.map