@antelopejs/dms-mailing 0.9.2 → 0.10.1

package/frontend-vue/app/components/OverviewGate.vue

@@ -83,7 +83,7 @@ function createTemplate(): void {
 </script>
 
 <template>
-	<DmsCard
+	<DmsCardPanel
 		v-if="state === 'loading' && !facts"
 		:padded="false"
 		aria-busy="true"
@@ -92,16 +92,16 @@ function createTemplate(): void {
 			<USkeleton class="h-6 w-56" />
 			<USkeleton v-for="row in SKELETON_ROWS" :key="row" class="h-10 w-full" />
 		</div>
-	</DmsCard>
+	</DmsCardPanel>
 
-	<DmsCard v-else-if="state === 'error' && !facts" :padded="false">
+	<DmsCardPanel v-else-if="state === 'error' && !facts" :padded="false">
 		<DmsEmptyState
 			variant="error"
 			:title="key('error_title')"
 			:description="key('error_description')"
 			:actions="errorActions"
 		/>
-	</DmsCard>
+	</DmsCardPanel>
 
 	<div v-else class="flex flex-col gap-4">
 		<div v-if="canResume" class="flex justify-end">
@@ -115,7 +115,7 @@ function createTemplate(): void {
 			/>
 		</div>
 
-		<DmsCard v-if="showsSetup" :padded="false">
+		<DmsCardPanel v-if="showsSetup" :padded="false">
 			<div
 				class="grid gap-8 p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]"
 			>
@@ -196,7 +196,7 @@ function createTemplate(): void {
 					</li>
 				</ol>
 			</div>
-		</DmsCard>
+		</DmsCardPanel>
 
 		<slot v-if="showsDashboard" />
 	</div>

package/frontend-vue/app/components/RealSendModal.vue

@@ -345,7 +345,7 @@ async function submit(): Promise<void> {
 		novalidate
 		@submit.prevent="submit"
 	>
-		<DmsBanner
+		<DmsNoticeBanner
 			tone="error"
 			icon="i-ph-paper-plane-right"
 			:title="
@@ -362,7 +362,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.test_send.locale')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="locale"
 						:items="localeItems"
@@ -420,7 +420,7 @@ async function submit(): Promise<void> {
 			</p>
 		</section>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			v-if="detail && !hasSender"
 			tone="warning"
 			icon="i-ph-at"
@@ -437,7 +437,7 @@ async function submit(): Promise<void> {
 					@click="openSettings"
 				/>
 			</template>
-		</DmsBanner>
+		</DmsNoticeBanner>
 
 		<div class="border-default rounded-lg border px-3">
 			<DmsKeyValueList
@@ -478,7 +478,7 @@ async function submit(): Promise<void> {
 			</DmsKeyValueList>
 		</div>
 
-		<DmsCheckbox
+		<DmsInputCheckbox
 			v-model="isAcknowledged"
 			:disabled="!recipients.length"
 			:label="
@@ -517,7 +517,7 @@ async function submit(): Promise<void> {
 	</form>
 
 	<div v-else class="flex flex-col gap-4">
-		<DmsBanner
+		<DmsNoticeBanner
 			tone="warning"
 			icon="i-ph-paper-plane-right"
 			:title="

package/frontend-vue/app/components/RenderingModal.vue

@@ -116,7 +116,7 @@ onMounted(load)
 				{{ key('description') }}
 				<span class="font-mono text-[12px]">{{ sendIdValue }}</span>
 			</p>
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-model="view"
 				size="xs"
 				:items="viewItems"
@@ -138,7 +138,7 @@ onMounted(load)
 		/>
 
 		<template v-else>
-			<DmsBanner
+			<DmsNoticeBanner
 				v-if="rendering.approximate"
 				tone="warning"
 				size="sm"

package/frontend-vue/app/components/RetentionInput.vue

@@ -167,7 +167,7 @@ form?.addValidator(guardSubmit)
 <template>
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-wrap items-center gap-2">
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-model="choice"
 				:items="items"
 				:disabled="disabled"

package/frontend-vue/app/components/SendDrawer.vue

@@ -424,7 +424,7 @@ onMounted(() => {
 		<template v-else-if="send">
 			<header class="border-default flex flex-col gap-1.5 border-b pb-4">
 				<div class="flex items-center gap-1">
-					<DmsEyebrow
+					<DmsEyebrowLabel
 						class="min-w-0 flex-1"
 						truncate
 						:label="key('eyebrow', { id: shortSendId(send._id) })"
@@ -481,7 +481,7 @@ onMounted(() => {
 					columns-from="md"
 					:items="stats"
 				/>
-				<DmsBanner
+				<DmsNoticeBanner
 					v-if="problem"
 					:tone="isResolved ? 'info' : problemTone(problem.kind)"
 					:size="isResolved ? 'sm' : undefined"
@@ -492,7 +492,7 @@ onMounted(() => {
 					"
 					data-problem-banner
 				/>
-				<DmsBanner
+				<DmsNoticeBanner
 					v-if="suppression"
 					:tone="suppression.tone"
 					size="sm"
@@ -519,8 +519,8 @@ onMounted(() => {
 							@click="openSuppressionList"
 						/>
 					</template>
-				</DmsBanner>
-				<DmsBanner
+				</DmsNoticeBanner>
+				<DmsNoticeBanner
 					v-for="link in linkedSends"
 					:key="link.id"
 					tone="info"
@@ -539,7 +539,7 @@ onMounted(() => {
 							@click="void showSend(link.id)"
 						/>
 					</template>
-				</DmsBanner>
+				</DmsNoticeBanner>
 			</section>
 
 			<!--
@@ -548,7 +548,7 @@ onMounted(() => {
 			-->
 			<div class="@2xl:grid-cols-2 grid gap-6" data-send-details-grid>
 				<section class="flex min-w-0 flex-col gap-2">
-					<DmsEyebrow :label="key('timeline')" />
+					<DmsEyebrowLabel :label="key('timeline')" />
 					<ol class="flex flex-col">
 						<li
 							v-for="item in timeline"
@@ -581,7 +581,7 @@ onMounted(() => {
 				</section>
 
 				<section class="flex min-w-0 flex-col gap-2">
-					<DmsEyebrow :label="key('origin')" />
+					<DmsEyebrowLabel :label="key('origin')" />
 					<div
 						class="border-default divide-default divide-y overflow-hidden rounded-lg border"
 					>
@@ -623,7 +623,7 @@ onMounted(() => {
 
 			<section class="flex flex-col gap-2">
 				<div class="flex items-center justify-between gap-2">
-					<DmsEyebrow :label="key('payload')" />
+					<DmsEyebrowLabel :label="key('payload')" />
 					<UButton
 						v-if="payload"
 						size="xs"

package/frontend-vue/app/components/StarterGallery.vue

@@ -90,7 +90,7 @@ async function createFrom(starter: StarterSummary): Promise<void> {
 							class="rounded-(--dms-radius-card) h-[150px] w-full"
 						/>
 					</template>
-					<DmsCard
+					<DmsCardPanel
 						v-for="starter in starters"
 						v-else
 						:key="starter.id"
@@ -131,7 +131,7 @@ async function createFrom(starter: StarterSummary): Promise<void> {
 								{{ starter.slug }}
 							</span>
 						</div>
-					</DmsCard>
+					</DmsCardPanel>
 				</div>
 				<UButton
 					icon="i-ph-plus"

package/frontend-vue/app/components/SystemVariables.vue

@@ -22,7 +22,7 @@ const { t } = useI18n()
 		v-if="variables.length || checks.length"
 		class="flex min-w-0 flex-col gap-1"
 	>
-		<DmsEyebrow :label="t(`${KEY}.title`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.title`)" />
 		<p class="text-muted text-[12px] [overflow-wrap:anywhere]">
 			{{ t(`${KEY}.description`) }}
 		</p>

package/frontend-vue/app/components/TemplateCard.vue

@@ -159,7 +159,7 @@ function chipLabel(code: string, present: boolean): string {
 </script>
 
 <template>
-	<DmsCard
+	<DmsCardPanel
 		as="article"
 		:padded="false"
 		interactive
@@ -302,5 +302,5 @@ function chipLabel(code: string, present: boolean): string {
 				<span v-else class="truncate">{{ footerText }}</span>
 			</div>
 		</div>
-	</DmsCard>
+	</DmsCardPanel>
 </template>

package/frontend-vue/app/components/TemplateDrawer.vue

@@ -451,7 +451,7 @@ function onResolved(preview: PreviewResponse): void {
 		<template v-else-if="template">
 			<div class="flex flex-col gap-1.5 pb-3">
 				<div class="flex items-center gap-1">
-					<DmsEyebrow :label="t('dms_mailing.templates.drawer.eyebrow')" />
+					<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.eyebrow')" />
 					<div class="ml-auto flex items-center gap-0.5">
 						<template v-if="navigation">
 							<UButton
@@ -569,7 +569,7 @@ function onResolved(preview: PreviewResponse): void {
 
 			<div v-show="tab === 'preview'" class="flex flex-col gap-3 py-4">
 				<div class="flex items-center justify-between gap-2">
-					<DmsSegmented
+					<DmsSegmentedControl
 						v-if="localeItems.length > 1"
 						v-model="locale"
 						:items="localeItems"
@@ -599,7 +599,7 @@ function onResolved(preview: PreviewResponse): void {
 						/>
 					</div>
 				</div>
-				<DmsBanner
+				<DmsNoticeBanner
 					v-if="isLocaleMissing"
 					tone="warning"
 					size="sm"
@@ -629,7 +629,7 @@ function onResolved(preview: PreviewResponse): void {
 							@click="openEditor(locale)"
 						/>
 					</template>
-				</DmsBanner>
+				</DmsNoticeBanner>
 			</div>
 
 			<div v-show="tab === 'variables'" class="flex flex-col gap-4 py-4">

package/frontend-vue/app/components/TemplateGallery.vue

@@ -250,7 +250,7 @@ useEventListener(
 				​
 			</div>
 			<div class="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] gap-4">
-				<DmsCard
+				<DmsCardPanel
 					v-for="index in SKELETON_CARDS"
 					:key="index"
 					:padded="false"
@@ -273,7 +273,7 @@ useEventListener(
 							&#8203;
 						</div>
 					</div>
-				</DmsCard>
+				</DmsCardPanel>
 			</div>
 		</section>
 

package/frontend-vue/app/components/TestSendModal.vue

@@ -242,7 +242,7 @@ async function submit(): Promise<void> {
 				:label="t('dms_mailing.real_send.version')"
 			>
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="versionChoice"
 						:items="versionItems"
@@ -257,7 +257,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.test_send.locale')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="locale"
 						:items="localeItems"
@@ -271,7 +271,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.test_send.data')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="dataChoice"
 						:items="dataItems"
@@ -284,7 +284,7 @@ async function submit(): Promise<void> {
 			</FormFieldRow>
 		</FormRows>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			tone="info"
 			icon="i-ph-info"
 			:title="t('dms_mailing.test_send.info_title')"

package/frontend-vue/app/components/VersionPreview.vue

@@ -62,7 +62,7 @@ function onResolved(preview: PreviewResponse): void {
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex items-center justify-between gap-2">
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-if="localeItems.length > 1"
 				v-model="locale"
 				:items="localeItems"
@@ -95,7 +95,7 @@ function onResolved(preview: PreviewResponse): void {
 
 		<div class="grid gap-4 sm:grid-cols-2">
 			<div class="flex flex-col gap-1.5">
-				<DmsEyebrow :label="t(`${KEY}.brought`)" />
+				<DmsEyebrowLabel :label="t(`${KEY}.brought`)" />
 				<ul v-if="lines.length" class="flex flex-col gap-1 text-[12.5px]">
 					<li
 						v-for="line in lines"
@@ -114,7 +114,7 @@ function onResolved(preview: PreviewResponse): void {
 				</p>
 			</div>
 			<div class="flex flex-col gap-1.5">
-				<DmsEyebrow :label="t(`${KEY}.declared`)" />
+				<DmsEyebrowLabel :label="t(`${KEY}.declared`)" />
 				<p v-if="!declared.length" class="text-muted text-[12.5px]">
 					{{ t(`${KEY}.no_variables`) }}
 				</p>

package/frontend-vue/app/components/editor/EditorBlockFields.vue

@@ -91,7 +91,7 @@ function patchChecked(field: BlockField, value: unknown): void {
 				:is-multiline="field.kind === 'tokens'"
 				@update:model-value="patch(field.key, $event)"
 			/>
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-else-if="field.kind === 'align'"
 				:model-value="text(field.key) || ALIGNMENTS[0]"
 				:items="alignItems"

package/frontend-vue/app/components/editor/EditorCompare.vue

@@ -178,7 +178,7 @@ watch(locale, load, { immediate: true })
 			>
 				<div class="flex min-w-0 flex-col gap-0.5">
 					<div class="flex items-center gap-2">
-						<DmsEyebrow :label="side.label" />
+						<DmsEyebrowLabel :label="side.label" />
 						<span
 							v-if="side.preview"
 							class="text-highlighted min-w-0 truncate text-xs font-medium"

package/frontend-vue/app/components/editor/EditorEnvelope.vue

@@ -29,7 +29,7 @@ function openEnvelope(): void {
 			class="hover:bg-elevated/50 col-span-2 grid min-h-[38px] w-full grid-cols-subgrid items-center gap-x-2.5 px-3 text-left"
 			@click.stop="openEnvelope()"
 		>
-			<DmsEyebrow
+			<DmsEyebrowLabel
 				:label="t(`${KEY}.subject`)"
 				class="min-w-[78px] whitespace-nowrap"
 			/>
@@ -57,7 +57,7 @@ function openEnvelope(): void {
 			class="border-default hover:bg-elevated/50 col-span-2 grid min-h-[38px] w-full grid-cols-subgrid items-center gap-x-2.5 border-t px-3 text-left"
 			@click.stop="openEnvelope()"
 		>
-			<DmsEyebrow
+			<DmsEyebrowLabel
 				:label="t(`${KEY}.preheader`)"
 				class="min-w-[78px] whitespace-nowrap"
 			/>

package/frontend-vue/app/components/editor/EditorLifecycle.vue

@@ -45,7 +45,7 @@ const buttons = computed(() => lifecycleActions(status.value))
 
 <template>
 	<div class="flex flex-col gap-3">
-		<DmsEyebrow :label="t(`${KEY}.title`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.title`)" />
 		<DmsStatGroup :items="stats" layout="joined" :columns="3" />
 		<div class="flex flex-wrap items-center gap-1.5">
 			<UButton

package/frontend-vue/app/components/editor/EditorPaletteGroup.vue

@@ -37,7 +37,7 @@ useSortableList(root, () => props.entries, {
 
 <template>
 	<section>
-		<DmsEyebrow :label="title" class="mb-2 block" />
+		<DmsEyebrowLabel :label="title" class="mb-2 block" />
 		<div ref="root" class="grid grid-cols-2 gap-1.5">
 			<template v-for="element in entries" :key="element.type">
 				<button

package/frontend-vue/app/components/editor/EditorPublishReview.vue

@@ -43,7 +43,7 @@ const { t } = useI18n()
 			{{ t(`${KEY}.no_changes`, { version: currentVersion }) }}
 		</p>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			v-if="blockers.length"
 			tone="error"
 			icon="i-ph-prohibit"
@@ -54,9 +54,9 @@ const { t } = useI18n()
 					<li v-for="blocker in blockers" :key="blocker">{{ blocker }}</li>
 				</ul>
 			</template>
-		</DmsBanner>
+		</DmsNoticeBanner>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			v-if="warnings.length"
 			tone="warning"
 			icon="i-ph-warning"
@@ -67,7 +67,7 @@ const { t } = useI18n()
 					<li v-for="warning in warnings" :key="warning">{{ warning }}</li>
 				</ul>
 			</template>
-		</DmsBanner>
+		</DmsNoticeBanner>
 
 		<div class="border-default -mx-1 flex items-center gap-2 border-t pt-4">
 			<UButton

package/frontend-vue/app/components/editor/EditorTemplatePane.vue

@@ -95,7 +95,7 @@ const preheader = computed({
 
 		<template v-if="editor.current">
 			<USeparator />
-			<DmsEyebrow
+			<DmsEyebrowLabel
 				:label="t(`${KEY}.envelope`, { locale: editor.locale.toUpperCase() })"
 			/>
 			<UFormField :label="t('dms_mailing.editor.subject')" size="sm">
@@ -112,7 +112,7 @@ const preheader = computed({
 
 		<USeparator />
 		<div class="flex flex-col gap-2">
-			<DmsEyebrow :label="t('dms_mailing.history.title')" />
+			<DmsEyebrowLabel :label="t('dms_mailing.history.title')" />
 			<MailingVersionHistory
 				v-if="session.state.version > 0"
 				:template-id="templateId"

package/frontend-vue/app/components/editor/EditorTestDataPane.vue

@@ -91,7 +91,7 @@ async function save(): Promise<void> {
 		</div>
 
 		<USeparator />
-		<DmsEyebrow :label="t(`${KEY}.checks`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.checks`)" />
 		<DmsCheckList :items="items" size="sm" />
 		<MailingEditorMissingPolicy />
 	</div>

package/frontend-vue/app/components/editor/EditorVariablesPane.vue

@@ -114,7 +114,7 @@ function insert(path: string): void {
 
 <template>
 	<div class="flex flex-col gap-2">
-		<DmsEyebrow :label="t(`${KEY}.insert_hint`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.insert_hint`)" />
 		<p class="text-muted text-xs">{{ t(`${KEY}.draft_hint`) }}</p>
 
 		<p v-if="merged.length === 0" class="text-muted text-xs">

package/frontend-vue/app/components/editor/EditorViewSwitches.vue

@@ -58,7 +58,7 @@ const mode = computed({
 			"
 		>
 			<span class="inline-flex">
-				<DmsSegmented
+				<DmsSegmentedControl
 					v-model="device"
 					size="xs"
 					:items="deviceItems"
@@ -66,7 +66,7 @@ const mode = computed({
 				/>
 			</span>
 		</UTooltip>
-		<DmsSegmented
+		<DmsSegmentedControl
 			v-model="mode"
 			size="xs"
 			:items="modeItems"

package/frontend-vue/app/components/editor/EditorVisibility.vue

@@ -66,7 +66,7 @@ const mode = computed({
 <template>
 	<div class="flex flex-col gap-2">
 		<p class="text-highlighted text-sm font-medium">{{ t(`${KEY}.label`) }}</p>
-		<DmsSegmented
+		<DmsSegmentedControl
 			v-model="mode"
 			size="xs"
 			:items="items"

package/frontend-vue/app/composables/useEditorContext.ts

@@ -21,7 +21,7 @@ export interface EditorContext {
 }
 
 const EDITOR_KEY: InjectionKey<EditorContext> = Symbol('dms-mailing-editor')
-const MISSING_CONTEXT = 'useEditorContext() must be called inside MailingEditor'
+const MISSING_CONTEXT = 'useEditorContext() must be called inside MailingTemplateEditor'
 
 export function provideEditorContext(context: EditorContext): void {
 	provide(EDITOR_KEY, context)

package/frontend-vue/build/backend-boundary.ts

@@ -74,6 +74,11 @@ function backendSourceFile(id: string): string | undefined {
 		: undefined
 }
 
+/** `path` with `/` separators, the form Vite gives an importer, so a boundary error names both paths alike on every OS. */
+function forwardSlashes(path: string): string {
+	return path.split(sep).join('/')
+}
+
 /**
  * Fails the build and the dev server when a module of the frontend resolves to
  * a file under the `src` of the backend package: the browser reaches the
@@ -113,9 +118,9 @@ function boundaryCheck(): VitePlugin {
 			const from =
 				importer === undefined
 					? 'an entry point'
-					: importer.replace(QUERY_OR_HASH, '')
+					: forwardSlashes(importer.replace(QUERY_OR_HASH, ''))
 			return this.error(
-				`Backend boundary: ${from} imports ${file}, which is under the src of ${BACKEND_PACKAGE}. The frontend reaches the backend only through its HTTP interface.`,
+				`Backend boundary: ${from} imports ${forwardSlashes(file)}, which is under the src of ${BACKEND_PACKAGE}. The frontend reaches the backend only through its HTTP interface.`,
 			)
 		},
 	}

package/frontend-vue/dms.frontend.ts

@@ -8,17 +8,14 @@ interface VueModule {
 }
 
 const COMPONENT_PREFIX = 'Mailing'
-const BLOCKS_DIRECTORY = '/components/blocks/'
-const BLOCK_NAME_PREFIX = 'Block'
 
 const components = import.meta.glob<VueModule>('./app/components/**/*.vue')
 
 function componentName(path: string): string {
-	const base = path
+	return path
 		.split('/')
 		.at(-1)!
 		.replace(/\.vue$/, '')
-	return path.includes(BLOCKS_DIRECTORY) ? `${BLOCK_NAME_PREFIX}${base}` : base
 }
 
 const frontendModule: DmsFrontendModule = {

package/frontend-vue/eslint.config.mjs

@@ -9,7 +9,6 @@ export default [
 	{
 		files: ['**/*.ts', '**/*.vue'],
 		languageOptions: { parserOptions: { parser: ts.parser } },
-		rules: { 'vue/multi-word-component-names': 'off' },
 	},
 	{ files: ['**/*.ts'], languageOptions: { parser: ts.parser } },
 	{
@@ -21,6 +20,15 @@ export default [
 			'antelopejs/no-typeof-function-only-test': 'error',
 			'antelopejs/no-self-import-in-tests': 'error',
 			'anti-slop/no-module-mocking': 'error',
+			'no-restricted-syntax': [
+				'error',
+				{
+					selector:
+						'CallExpression:matches([callee.name=/^(it|test)$/], [callee.object.name=/^(it|test)$/], [callee.callee.object.name=/^(it|test)$/]) ImportExpression',
+					message:
+						'Import the module under test statically at the top of the file: a dynamic import inside a test body counts the module load in the test timeout.',
+				},
+			],
 		},
 	},
 ]

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.2.0",
   "engines": {
-    "@antelopejs/dms-frontend": ">=0.10.0 <0.11.0"
+    "@antelopejs/dms-frontend": ">=0.11.0 <0.12.0"
   },
   "scripts": {
     "format": "prettier --write .",
@@ -21,7 +21,7 @@
     "vue": "^3.5.18"
   },
   "devDependencies": {
-    "@antelopejs/tooling-configs": "^0.3.3",
+    "@antelopejs/tooling-configs": ">=0.7.1 <0.8.0",
     "@nuxt/ui": "4.10.0",
     "@types/sortablejs": "^1.15.9",
     "@vitejs/plugin-vue": "^6.0.0",