@antelopejs/dms-mailing 0.4.1 → 0.5.1

package/frontend-vue/tests/send-modals.test.ts

@@ -17,6 +17,7 @@ import {
 	typeInto,
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
+import { mailingReads, stubApiData } from './helpers/api-data'
 
 const api = {
 	templateContent: vi.fn(),
@@ -25,7 +26,8 @@ const api = {
 	realSend: vi.fn(),
 }
 
-vi.mock('../app/composables/useMailingApi', () => ({
+vi.mock('../app/composables/useMailingApi', async (importOriginal) => ({
+	...(await importOriginal<object>()),
 	useMailingApi: () => api,
 }))
 
@@ -102,6 +104,11 @@ let stubs: NuxtStubs
 
 beforeEach(() => {
 	stubs = stubNuxtGlobals('camille@acme.com')
+	stubApiData().respond(
+		mailingReads({ templateContent: api.templateContent }, ({ url }) => {
+			throw new Error(`unexpected read ${url}`)
+		}),
+	)
 	api.preview.mockResolvedValue({
 		html: '',
 		subject: '20% off every chair',

package/frontend-vue/tests/sortable-list.test.ts

@@ -0,0 +1,253 @@
+// @vitest-environment jsdom
+/**
+ * The drag and drop of the categories, the canvas blocks and the palette:
+ * SortableJS moves the dragged element in the DOM, the list puts it back and
+ * changes its array, and Vue renders the new order. The drags are replayed as
+ * SortableJS reports them, DOM moves included.
+ */
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import {
+	createApp,
+	defineComponent,
+	h,
+	nextTick,
+	reactive,
+	ref,
+	type App,
+} from 'vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+type Options = Record<string, unknown>
+
+interface FakeSortable {
+	el: HTMLElement
+	options: Options
+}
+
+const instances: FakeSortable[] = []
+
+// SortableJS needs a pointer to drag with: what the test drives is the
+// options the list hands it, called as SortableJS calls them.
+vi.mock('@vueuse/integrations/useSortable', async () => {
+	const { onMounted, unref } = await import('vue')
+	return {
+		useSortable: (
+			target: { value: HTMLElement },
+			_list: unknown,
+			options: Options,
+		) => {
+			const sortable = { el: undefined as unknown as HTMLElement, options }
+			onMounted(() => {
+				sortable.el = unref(target)
+				instances.push(sortable)
+			})
+			return {
+				option: (name: string, value: unknown) => {
+					sortable.options[name] = value
+				},
+			}
+		},
+	}
+})
+
+const { useSortableList } = await import('../app/composables/useSortableList')
+
+interface Item {
+	id: string
+}
+
+let app: App | undefined
+
+afterEach(() => {
+	app?.unmount()
+	app = undefined
+	instances.length = 0
+})
+
+const List = defineComponent({
+	props: {
+		items: { type: Array as () => Item[], required: true },
+		options: { type: Object, default: () => ({}) },
+	},
+	setup(props) {
+		const root = ref<HTMLElement | null>(null)
+		useSortableList(root, () => props.items, props.options)
+		return () =>
+			h(
+				'div',
+				{ ref: root },
+				props.items.map((item) =>
+					h('p', { key: item.id, 'data-id': item.id }, item.id),
+				),
+			)
+	},
+})
+
+function mountLists(lists: { items: Item[]; options: Options }[]) {
+	const host = document.createElement('div')
+	document.body.append(host)
+	app = createApp({
+		render: () => lists.map((list) => h(List, list)),
+	})
+	app.mount(host)
+	return host
+}
+
+const ids = (items: Item[]) => items.map((item) => item.id)
+const domIds = (sortable: FakeSortable) =>
+	[...sortable.el.children].map((child) => child.getAttribute('data-id'))
+const call = (sortable: FakeSortable, name: string, event: unknown) =>
+	(sortable.options[name] as (event: unknown) => void)(event)
+
+describe('useSortableList', () => {
+	it('reorders a list in place and renders the new order', async () => {
+		const items = reactive([{ id: 'a' }, { id: 'b' }, { id: 'c' }])
+		const changes: unknown[] = []
+		const ended = vi.fn()
+		mountLists([
+			{
+				items,
+				options: { onChange: (c: unknown) => changes.push(c), onEnd: ended },
+			},
+		])
+		const [list] = instances
+		const item = list!.el.children[0] as HTMLElement
+		call(list!, 'onStart', { item, oldIndex: 0 })
+		// SortableJS has moved the element already when it reports the update.
+		list!.el.append(item)
+		call(list!, 'onUpdate', { item, oldIndex: 0, newIndex: 2 })
+		call(list!, 'onEnd', {})
+		await nextTick()
+		expect(ids(items)).toEqual(['b', 'c', 'a'])
+		expect(domIds(list!)).toEqual(['b', 'c', 'a'])
+		expect(changes).toEqual([
+			{ moved: { element: { id: 'a' }, oldIndex: 0, newIndex: 2 } },
+		])
+		expect(ended).toHaveBeenCalledOnce()
+	})
+
+	it('moves an item to another list of its group', async () => {
+		const source = reactive([{ id: 'a' }, { id: 'b' }])
+		const target = reactive([{ id: 'x' }])
+		const sourceChanges: unknown[] = []
+		const targetChanges: unknown[] = []
+		mountLists([
+			{
+				items: source,
+				options: {
+					group: 'g',
+					onChange: (c: unknown) => sourceChanges.push(c),
+				},
+			},
+			{
+				items: target,
+				options: {
+					group: 'g',
+					onChange: (c: unknown) => targetChanges.push(c),
+				},
+			},
+		])
+		const [from, to] = instances
+		const item = from!.el.children[1] as HTMLElement
+		call(from!, 'onStart', { item, oldIndex: 1 })
+		to!.el.prepend(item)
+		// SortableJS reports the add on the target first, then the remove.
+		call(to!, 'onAdd', { item, newIndex: 0 })
+		call(from!, 'onRemove', { item, oldIndex: 1 })
+		call(from!, 'onEnd', {})
+		await nextTick()
+		expect(ids(source)).toEqual(['a'])
+		expect(ids(target)).toEqual(['b', 'x'])
+		expect(domIds(from!)).toEqual(['a'])
+		expect(domIds(to!)).toEqual(['b', 'x'])
+		expect(sourceChanges).toEqual([
+			{ removed: { element: { id: 'b' }, oldIndex: 1 } },
+		])
+		expect(targetChanges).toEqual([
+			{ added: { element: { id: 'b' }, newIndex: 0 } },
+		])
+	})
+
+	it('hands a copy to the other list and keeps its own item (pull: clone)', async () => {
+		const palette = reactive([{ id: 'tile' }])
+		const canvas = reactive<Item[]>([])
+		const group = { name: 'g', pull: 'clone', put: false }
+		mountLists([
+			{
+				items: palette,
+				options: {
+					group,
+					sort: false,
+					clone: (item: Item) => ({ id: `${item.id}-copy` }),
+				},
+			},
+			{ items: canvas, options: { group: { name: 'g' } } },
+		])
+		const [from, to] = instances
+		expect(from!.options.group).toBe(group)
+		expect(from!.options.sort).toBe(false)
+		const item = from!.el.children[0] as HTMLElement
+		call(from!, 'onStart', { item, oldIndex: 0 })
+		// SortableJS leaves a stand-in where the tile was and drags the tile.
+		const stand = item.cloneNode(true) as HTMLElement
+		from!.el.insertBefore(stand, item)
+		to!.el.append(item)
+		call(to!, 'onAdd', { item, newIndex: 0 })
+		call(from!, 'onRemove', {
+			item,
+			clone: stand,
+			oldIndex: 0,
+			pullMode: 'clone',
+		})
+		call(from!, 'onEnd', {})
+		await nextTick()
+		expect(ids(palette)).toEqual(['tile'])
+		expect(ids(canvas)).toEqual(['tile-copy'])
+		expect(domIds(from!)).toEqual(['tile'])
+		expect(domIds(to!)).toEqual(['tile-copy'])
+	})
+
+	it('passes the handle, the item selector and a disabled state it follows', async () => {
+		const disabled = ref(false)
+		mountLists([
+			{
+				items: reactive([{ id: 'a' }]),
+				options: {
+					handle: '[data-drag-handle]',
+					draggable: '>[data-drag-item]',
+					ghostClass: 'opacity-30',
+					disabled: () => disabled.value,
+				},
+			},
+		])
+		const [list] = instances
+		expect(list!.options).toMatchObject({
+			handle: '[data-drag-handle]',
+			draggable: '>[data-drag-item]',
+			ghostClass: 'opacity-30',
+			disabled: false,
+			sort: true,
+		})
+		disabled.value = true
+		await nextTick()
+		expect(list!.options.disabled).toBe(true)
+	})
+
+	it('leaves SortableJS its defaults for what the list does not set', () => {
+		mountLists([{ items: reactive([{ id: 'a' }]), options: {} }])
+		const [list] = instances
+		// A key present with `undefined` would replace the default: an
+		// undefined `draggable` makes no child an item, and nothing drags.
+		for (const name of ['group', 'handle', 'draggable', 'ghostClass'])
+			expect(list!.options).not.toHaveProperty(name)
+	})
+
+	it('no longer ships vuedraggable, which bundled the Vue compiler', () => {
+		const manifest = JSON.parse(
+			readFileSync(resolve(__dirname, '../package.json'), 'utf8'),
+		) as { dependencies: Record<string, string> }
+		expect(manifest.dependencies).not.toHaveProperty('vuedraggable')
+		expect(manifest.dependencies).toHaveProperty('sortablejs')
+	})
+})

package/frontend-vue/tests/template-drawer.test.ts

@@ -17,6 +17,7 @@ import {
 	typeInto,
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
+import { mailingReads, stubApiData } from './helpers/api-data'
 
 const api = {
 	templateContent: vi.fn(),
@@ -29,12 +30,12 @@ const api = {
 	listTemplates: vi.fn(),
 	duplicate: vi.fn(),
 	starters: vi.fn(),
-	listCategories: vi.fn(),
 	createTemplate: vi.fn(),
 	saveTemplateDetails: vi.fn(),
 }
 
-vi.mock('../app/composables/useMailingApi', () => ({
+vi.mock('../app/composables/useMailingApi', async (importOriginal) => ({
+	...(await importOriginal<object>()),
 	useMailingApi: () => api,
 }))
 
@@ -108,9 +109,27 @@ const globals = {
 
 let stubs: NuxtStubs
 
+let starters: unknown[] = []
+
 beforeEach(() => {
 	stubs = stubNuxtGlobals()
 	menuGroups = []
+	starters = []
+	stubApiData().respond(
+		mailingReads(
+			{
+				templateContent: api.templateContent,
+				performance: api.performance,
+				listTemplates: api.listTemplates,
+			},
+			({ url }) => {
+				if (url === '/api/mailing/templates/categories')
+					return { categories: [] }
+				if (url === '/api/mailing/templates/starters') return { starters }
+				throw new Error(`unexpected read ${url}`)
+			},
+		),
+	)
 	api.performance.mockResolvedValue({
 		id: 't1',
 		slug: 'order-confirmed',
@@ -403,18 +422,15 @@ describe('DuplicateModal', () => {
 
 describe('StarterGallery', () => {
 	beforeEach(() => {
-		api.starters.mockResolvedValue({
-			starters: [
-				{
-					id: 'order-confirmed',
-					name: 'Order confirmation',
-					slug: 'order-confirmed',
-					category: 'orders',
-					locales: ['en'],
-				},
-			],
-		})
-		api.listCategories.mockResolvedValue({ categories: [] })
+		starters = [
+			{
+				id: 'order-confirmed',
+				name: 'Order confirmation',
+				slug: 'order-confirmed',
+				category: 'orders',
+				locales: ['en'],
+			},
+		]
 	})
 
 	it('creates a starter as a draft and opens it', async () => {

package/frontend-vue/tests/template-gallery.test.ts

@@ -12,15 +12,15 @@ import {
 	type NuxtStubs,
 } from './helpers/nuxt-globals'
 
-const api = {
-	listCategories: vi.fn(),
-	templatesOverview: vi.fn(),
-	listTemplates: vi.fn(),
-}
+import {
+	stubApiData,
+	stubRegionalFormat,
+	type ApiDataStub,
+} from './helpers/api-data'
 
-vi.mock('../app/composables/useMailingApi', () => ({
-	useMailingApi: () => api,
-}))
+const CATEGORIES_URL = '/api/mailing/templates/categories'
+const OVERVIEW_URL = '/api/mailing/templates/overview'
+const LIST_URL = '/api/mailing/tables/templates/list'
 
 const RECENT = new Date(Date.now() - 3_600_000).toISOString()
 
@@ -114,22 +114,32 @@ const globals = {
 }
 
 let stubs: NuxtStubs
+let api: ApiDataStub
 let routeQuery: Record<string, unknown> = {}
+let templateTotal = 3
+
+const readsOf = (url: string) => api.reads.filter((read) => read.url === url)
 
 beforeEach(() => {
 	stubs = stubNuxtGlobals()
+	stubRegionalFormat()
 	routeQuery = {}
+	templateTotal = 3
 	vi.stubGlobal('useDmsRoute', () => ({ query: routeQuery }))
-	api.listCategories.mockResolvedValue({
-		categories: [
-			{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
-			{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' },
-		],
-	})
-	api.templatesOverview.mockResolvedValue({
-		items: [stats('live', 6812), stats('missing', 12)],
+	api = stubApiData()
+	api.respond(({ url }) => {
+		if (url === CATEGORIES_URL)
+			return {
+				categories: [
+					{ id: 'orders', label: 'Orders', icon: 'i-ph-package' },
+					{ id: 'billing', label: 'Billing', icon: 'i-ph-file-text' },
+				],
+			}
+		if (url === OVERVIEW_URL)
+			return { items: [stats('live', 6812), stats('missing', 12)] }
+		if (url === LIST_URL) return { results: [LIVE], total: templateTotal }
+		throw new Error(`unexpected read ${url}`)
 	})
-	api.listTemplates.mockResolvedValue({ results: [], total: 3 })
 })
 
 afterEach(() => {
@@ -206,21 +216,32 @@ describe('TemplateGallery', () => {
 		cleared.unmount()
 	})
 
+	it('reads the template count alone, not the rows', async () => {
+		const view = mount(
+			TemplateGallery,
+			{ context: context({ items: [LIVE] }) },
+			globals,
+		)
+		await flush()
+		expect(readsOf(LIST_URL)).toEqual([
+			{ url: LIST_URL, query: { limit: '1' } },
+		])
+		view.unmount()
+	})
+
 	it('reloads the figures when the table refreshes, not when it pages', async () => {
-		api.listTemplates.mockClear()
-		api.templatesOverview.mockClear()
 		const ctx = reactive(context({ items: [LIVE] }))
 		const view = mount(TemplateGallery, { context: ctx }, globals)
 		await flush()
-		expect(api.listTemplates).toHaveBeenCalledTimes(1)
+		expect(readsOf(LIST_URL)).toHaveLength(1)
 		ctx.items = [LIVE]
 		await flush()
-		expect(api.listTemplates).toHaveBeenCalledTimes(2)
-		expect(api.templatesOverview).toHaveBeenCalledTimes(2)
+		expect(readsOf(LIST_URL)).toHaveLength(2)
+		expect(readsOf(OVERVIEW_URL)).toHaveLength(2)
 		ctx.pagination.pageIndex = 1
 		ctx.items = [MISSING_DE]
 		await flush()
-		expect(api.listTemplates).toHaveBeenCalledTimes(2)
+		expect(readsOf(LIST_URL)).toHaveLength(2)
 		view.unmount()
 	})
 
@@ -262,7 +283,7 @@ describe('TemplateGallery', () => {
 	})
 
 	it('shows the starters on a first run', async () => {
-		api.listTemplates.mockResolvedValue({ results: [], total: 0 })
+		templateTotal = 0
 		const view = mount(
 			TemplateGallery,
 			{ context: context({ items: [] }) },

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@antelopejs/dms-mailing",
-  "version": "0.4.1",
+  "version": "0.5.1",
+  "description": "E-mail templates for the AntelopeJS DMS: a block editor with drafts and versions, a send log, delivery metrics and a suppression list.",
+  "keywords": [
+    "antelopejs",
+    "dms",
+    "dms-module",
+    "email",
+    "mailing",
+    "templates"
+  ],
+  "homepage": "https://dms.antelopejs.com/docs/modules/mailing",
+  "bugs": {
+    "url": "https://github.com/AntelopeJS/dms-mailing/issues"
+  },
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -14,6 +27,7 @@
     "!dist/.tsbuildinfo",
     "!dist/test",
     "frontend-vue",
+    "skills",
     "src",
     "!src/test"
   ],
@@ -32,21 +46,21 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@antelopejs/interface-api": ">=0.0.13 <1.0.0",
-    "@antelopejs/interface-api-util": ">=0.1.2 <1.0.0",
-    "@antelopejs/interface-core": ">=0.1.1 <1.0.0",
-    "@antelopejs/interface-data-api": ">=0.2.1 <1.0.0",
-    "@antelopejs/interface-database": ">=0.1.9 <1.0.0",
-    "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.6.0 <1.0.0",
-    "@antelopejs/interface-dms-mailing": ">=0.7.0 <0.8.0",
-    "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
+    "@antelopejs/interface-api": ">=0.0.15 <1.0.0",
+    "@antelopejs/interface-api-util": ">=0.1.3 <1.0.0",
+    "@antelopejs/interface-core": ">=0.2.4 <1.0.0",
+    "@antelopejs/interface-data-api": ">=0.2.2 <1.0.0",
+    "@antelopejs/interface-database": ">=0.1.10 <1.0.0",
+    "@antelopejs/interface-database-decorators": ">=0.1.9 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.7.2 <1.0.0",
+    "@antelopejs/interface-dms-mailing": ">=0.7.1 <0.8.0",
+    "@antelopejs/interface-email": ">=0.0.6 <1.0.0",
     "node-cron": "^4.2.1",
     "zod": "~3.24.2"
   },
   "devDependencies": {
-    "@antelopejs/core": ">=1.13.4 <2",
-    "@antelopejs/tooling-configs": ">=0.0.7 <1.0.0",
+    "@antelopejs/core": ">=1.16.0 <2",
+    "@antelopejs/tooling-configs": ">=0.0.9 <1.0.0",
     "@types/chai": "^4.3.20",
     "@types/mocha": "^10",
     "@types/node": "^24.0.0",
@@ -64,14 +78,17 @@
     "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "@antelopejs/interface-dms-automation": ">=0.1.0 <1.0.0"
+    "@antelopejs/interface-dms-automation": ">=0.2.1 <1.0.0"
   },
   "antelopeJs": {
     "baseUrl": "dist",
     "implements": [
       "@antelopejs/interface-dms-mailing"
     ],
-    "test": "src/test/antelope.test.ts"
+    "test": "src/test/antelope.test.ts",
+    "skills": [
+      "./skills"
+    ]
   },
   "scripts": {
     "build": "rimraf dist && tsc",

package/skills/dms-mailing/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: dms-mailing
+description: Sends and manages transactional e-mail with the @antelopejs/dms-mailing module of the AntelopeJS DMS. Use when installing or configuring dms-mailing, sending a template from code with SendTemplate, reporting provider events with RecordEmailEvent or the webhook, designing templates (blocks, variables, locales, versions), or debugging suppressed, refused, missing-variable or fallback-locale sends.
+icon: i-lucide-mail
+category: messaging
+tags: [email, templates, transactional, webhook, dms-module]
+---
+
+# dms-mailing
+
+Templates edited in the dashboard, sent by slug from code, logged with provider events.
+Pages under `/modules/mailing` (owner-only): Overview, Templates, editor (`templates/:id`), Sends,
+Settings, Suppression list. User docs: `docs/` of this package, published at
+https://dms.antelopejs.com/docs/modules/mailing (sending from code and the webhook format: `extending`).
+
+## When to reach for it
+
+- Code must send an e-mail a non-developer can reword, translate or restyle: create a template, call it by slug.
+  Hard-coding HTML in a route is the path this module replaces.
+- Delivery must be traceable (bounces, opens, clicks) or addresses must stop receiving after a hard bounce.
+
+## Setup
+
+- `ajs project modules add @antelopejs/dms-mailing`, plus a module implementing `@antelopejs/interface-email`
+  (`@antelopejs/nodemailer`, `config: { ethereal: true }` in dev).
+- Mailing 0.5 requires `@antelopejs/dms` >=0.9 (interface-dms 0.7, renderer `@antelopejs/dms-frontend` 0.6);
+  0.4 is the DMS 0.8 line. `@antelopejs/interface-dms-mailing` stays 0.7, so callers do not change.
+- Module option: `useHtmlRender` (default `true`, DMS html-render chain; `false` = built-in standalone HTML).
+- Set the DMS `clientBaseUrl`: the webhook URL and the e-mail logo are built on it.
+- Per-workspace settings (sender, missing-variable guard, fallback locale, webhook secret, retention,
+  categories) live on the Settings page and `GET`/`PUT /api/mailing/settings` (changed fields only).
+
+## Send from code
+
+```typescript
+import { SendTemplate, RecordEmailEvent } from "@antelopejs/interface-dms-mailing";
+
+const result = await SendTemplate("order-confirmed", {
+  tenantId,
+  to: [{ email: "ana@example.com", name: "Ana" }], // one address or an array
+  locale: "fr",
+  variables: { customer: { firstName: "Ana" }, order: { number: "#1042" } },
+  source: "checkout", // shows as "Called from" in the template's performance
+});
+// result.status: queued | sent | ... | failed | suppressed; result.results[] per recipient
+```
+
+- Only the **published** version is sent; drafts go out only as tests (`[TEST]` subject, out of the figures).
+- Variables are typed (`string`, `text`, `number`, `money`, `date`, `url`, `boolean`, `array`) and declared on
+  the template; pass every required one.
+- In-process events: `RecordEmailEvent(tenantId, { provider, messageId, type, details })`.
+  HTTP: `POST <clientBaseUrl>/api/mailing/events/<provider>/<tenantId>` with header `x-mailing-webhook-secret`.
+- Automation (if `interface-dms-automation` is loaded): action `mailing.send-template`, trigger `mailing.email-event`.
+
+## Gotchas
+
+- `status: "suppressed"` = address on the suppression list (hard bounce, spam, unsubscribe, manual). Never retry.
+- `marketing` templates whose footer shows unsubscribe/preferences links require `unsubscribeUrl` /
+  `preferencesUrl` in `variables`; a link without URL is dropped.
+- A missing locale falls back to the workspace's fallback locale (logged as `DE asked`).
+- The template slug is fixed at creation: code depends on it.
+- `mailing.send` permission gates every route that reaches recipients; writes publish on realtime topic `mailing:sends`.
+- 0.4+ does not read a 0.3 database and moved the webhook path (tenant in the URL).

package/src/data/templates-table.ts

@@ -55,11 +55,13 @@ import { findCategory, getSettings } from "../services/settings";
 import { findStarter, starterFields } from "../services/starters";
 import { refreshTemplateAttention } from "../services/template-attention";
 import {
+  assertSlugClaimed,
   blankContent,
   blankFields,
   contentFieldsOf,
   displayName,
   initializeTemplate,
+  releaseTemplateSlugs,
 } from "../services/templates";
 import type { TemplateCategory } from "../types";
 
@@ -142,29 +144,6 @@ function assertKnownCategory(
   throw new HTTPResult(HTTP_UNPROCESSABLE, UNKNOWN_CATEGORY);
 }
 
-const creationTime = (template: MailingTemplate) =>
-  new Date(template.createdAt).getTime();
-
-/**
- * Nothing in the database keeps slugs unique, so two creations racing past
- * the free-slug check both land: the earliest one stays, a later one is
- * removed again and refused like any taken slug.
- */
-async function assertFirstOfSlug(
-  model: TemplateModel,
-  slug: string,
-  templateId: string,
-): Promise<void> {
-  const [first] = (await model.getBy("slug", slug)).sort(
-    (left, right) =>
-      creationTime(left) - creationTime(right) ||
-      left._id.localeCompare(right._id),
-  );
-  if (!first || first._id === templateId) return;
-  await model.delete(templateId);
-  throw new HTTPResult(HTTP_CONFLICT, DUPLICATE_SLUG);
-}
-
 /** The creation's seed, and the body to store: slug and name trimmed. */
 function parseCreation(body: Buffer | string) {
   const raw = parseBody(body);
@@ -209,7 +188,7 @@ function withSeeding(base: DataControllerCallback): DataControllerCallback {
         ...rest,
       )) as string[];
       const templateId = ids[0] as string;
-      await assertFirstOfSlug(model, seed.slug, templateId);
+      await assertSlugClaimed(tenantId, seed.slug, templateId);
       const user = await authenticateTenantRequest(ctx);
       await initializeTemplate(tenantId, templateId, displayName(user), fields);
       return ids;
@@ -270,14 +249,15 @@ export function afterDelete(tenantId: string, ids: string[]): AfterWrite {
     await Promise.all(
       ids.map((id) => versions.getAll(id, "templateId").delete().run()),
     );
+    await releaseTemplateSlugs(tenantId, ids);
     await refreshTemplateAttention(tenantId);
   };
 }
 
 /**
- * Sends resolve templates by slug and nothing enforces its uniqueness but the
- * create checks, so a slug never changes once set; a category must be one the
- * settings declare, and a name holds more than spaces.
+ * Sends resolve templates by slug and only the create paths claim it, so a
+ * slug never changes once set; a category must be one the settings declare,
+ * and a name holds more than spaces.
  */
 export async function assertEditable(
   tenantId: string,