fix(seed): menu item i18n (emdash-cms#943)

* fix(seed): round-trip menu item translation_group across export and apply

* fix(seed): enable full i18n round-trip for menu and taxonomy seeds by adding ID, locale, and translation tracking.

Author: Rimander

.changeset/seed-menu-item-i18n.md

@@ -0,0 +1,5 @@
+---
+"emdash": patch
+---
+
+Fixes seed menu items losing their `translation_group` across export/apply by adding optional `id`, `locale`, and `translationOf` fields to `SeedMenuItem`. The export emits stable seed IDs and `translationOf` references; the apply resolves them to the anchor's `translation_group`, matching the existing pattern for content entries, taxonomies, and terms.

packages/core/src/cli/commands/export-seed.ts

@@ -32,6 +32,7 @@ import type {
 	SeedWidget,
 	SeedContentEntry,
 } from "../../seed/types.js";
+import { slugify } from "../../utils/slugify.js";
 
 const SETTINGS_PREFIX = "site:";
 
@@ -101,7 +102,7 @@ export const exportSeedCommand = defineCommand({
 /**
  * Export database to seed file format
  */
-async function exportSeed(db: Kysely<Database>, withContent?: string): Promise<SeedFile> {
+export async function exportSeed(db: Kysely<Database>, withContent?: string): Promise<SeedFile> {
 	const seed: SeedFile = {
 		$schema: "https://emdashcms.com/seed.schema.json",
 		version: "1",
@@ -317,6 +318,9 @@ async function exportMenus(db: Kysely<Database>): Promise<SeedMenu[]> {
 	const result: SeedMenu[] = [];
 	// translation_group -> seed-local id of the anchor menu in that group.
 	const groupToSeedId = new Map<string, string>();
+	// Shared across menus: translated items reference anchor items in sibling menus.
+	const itemGroupToSeedId = new Map<string, string>();
+	const usedItemSeedIds = new Set<string>();
 
 	for (const menu of menus) {
 		const seedId =
@@ -329,7 +333,13 @@ async function exportMenus(db: Kysely<Database>): Promise<SeedMenu[]> {
 			.orderBy("sort_order", "asc")
 			.execute();
 
-		const seedItems = buildMenuItemTree(items);
+		const seedItems = buildMenuItemTree(items, {
+			i18nEnabled,
+			menuName: menu.name,
+			menuLocale: menu.locale ?? null,
+			itemGroupToSeedId,
+			usedItemSeedIds,
+		});
 
 		const seedMenu: SeedMenu = {
 			id: seedId,
@@ -376,7 +386,17 @@ function buildMenuItemTree(
 		target: string | null;
 		title_attr: string | null;
 		css_classes: string | null;
+		locale?: string | null;
+		translation_group?: string | null;
 	}>,
+	i18nCtx: {
+		i18nEnabled: boolean;
+		menuName: string;
+		menuLocale: string | null;
+		// translation_group -> seed-local id of the anchor item in that group.
+		itemGroupToSeedId: Map<string, string>;
+		usedItemSeedIds: Set<string>;
+	},
 ): SeedMenuItem[] {
 	// Build parent -> children map
 	const childMap = new Map<string | null, typeof items>();
@@ -389,10 +409,28 @@ function buildMenuItemTree(
 		childMap.get(parentId)!.push(item);
 	}
 
+	function makeSeedId(item: (typeof items)[number]): string {
+		const base = slugify(item.label || "") || item.id;
+		const locale = i18nCtx.i18nEnabled ? (item.locale ?? i18nCtx.menuLocale) : null;
+		const candidate = locale
+			? `item:${i18nCtx.menuName}:${base}:${locale}`
+			: `item:${i18nCtx.menuName}:${base}`;
+		if (!i18nCtx.usedItemSeedIds.has(candidate)) {
+			i18nCtx.usedItemSeedIds.add(candidate);
+			return candidate;
+		}
+		// Collision fallback: append DB id to disambiguate duplicate labels.
+		const fallback = locale
+			? `item:${i18nCtx.menuName}:${base}:${item.id}:${locale}`
+			: `item:${i18nCtx.menuName}:${base}:${item.id}`;
+		i18nCtx.usedItemSeedIds.add(fallback);
+		return fallback;
+	}
+
 	// Recursively build tree
 	function buildLevel(parentId: string | null): SeedMenuItem[] {
 		const children = childMap.get(parentId) || [];
-		return children.map((item) => {
+		const result = children.map((item) => {
 			const seedItem: SeedMenuItem = {
 				type: item.type,
 				label: item.label || undefined,
@@ -415,6 +453,18 @@ function buildMenuItemTree(
 				seedItem.cssClasses = item.css_classes;
 			}
 
+			if (i18nCtx.i18nEnabled) {
+				const itemLocale = item.locale ?? i18nCtx.menuLocale;
+				const seedId = makeSeedId(item);
+				seedItem.id = seedId;
+				if (itemLocale) seedItem.locale = itemLocale;
+				if (item.translation_group) {
+					const anchor = i18nCtx.itemGroupToSeedId.get(item.translation_group);
+					if (anchor && anchor !== seedId) seedItem.translationOf = anchor;
+					else if (!anchor) i18nCtx.itemGroupToSeedId.set(item.translation_group, seedId);
+				}
+			}
+
 			// Add children
 			const itemChildren = buildLevel(item.id);
 			if (itemChildren.length > 0) {
@@ -423,6 +473,10 @@ function buildMenuItemTree(
 
 			return seedItem;
 		});
+
+		// Sibling order is preserved (maps to sort_order on import). Cross-menu
+		// `translationOf` already resolves because exportMenus sorts anchors first.
+		return result;
 	}
 
 	return buildLevel(null);

packages/core/src/seed/apply.ts

@@ -512,6 +512,8 @@ export async function applySeed(
 	if (seed.menus) {
 		// seed-local id -> resolved info, used to wire `translationOf` refs.
 		const menuSeedIdMap = new Map<string, { id: string; translationGroup: string }>();
+		// Shared across menus: translated items reference anchor items in sibling menus.
+		const itemSeedIdMap = new Map<string, { id: string; translationGroup: string }>();
 		const fallbackLocale = getI18nConfig()?.defaultLocale ?? "en";
 
 		for (const menu of seed.menus) {
@@ -569,6 +571,7 @@ export async function applySeed(
 				null, // parent_id
 				0, // sort_order
 				seedIdMap,
+				itemSeedIdMap,
 			);
 			result.menus.items += itemCount;
 		}
@@ -920,11 +923,10 @@ async function applyContentTaxonomies(
 /**
  * Apply menu items recursively.
  *
- * Each item gets a fresh `translation_group` (= its own id). The seed format's
- * `SeedMenuItem` has no `id`/`translationOf` fields, so we can't express the
- * cross-locale "same nav entry" link here — items diverge across locales on
- * re-apply. Runtime navigation still resolves correctly because `reference_id`
- * already holds the content's translation_group.
+ * When a `SeedMenuItem` carries `id`/`translationOf`, the import resolves the
+ * source item's `translation_group` so cross-locale "same nav entry" links
+ * survive export → apply. Items without `translationOf` get a fresh group
+ * (= their own id).
  */
 async function applyMenuItems(
 	db: Kysely<Database>,
@@ -934,12 +936,14 @@ async function applyMenuItems(
 	parentId: string | null,
 	startOrder: number,
 	seedIdMap: Map<string, string>,
+	itemSeedIdMap: Map<string, { id: string; translationGroup: string }>,
 ): Promise<number> {
 	let count = 0;
 	let order = startOrder;
 
 	for (const item of items) {
 		const itemId = ulid();
+		const itemLocale = item.locale ?? locale;
 
 		// Resolve reference if needed
 		let referenceId: string | null = null;
@@ -955,6 +959,16 @@ async function applyMenuItems(
 			// If not in map, the content might not exist yet (will be broken link)
 		}
 
+		let translationGroup = itemId;
+		if (item.translationOf) {
+			const source = itemSeedIdMap.get(item.translationOf);
+			if (source) translationGroup = source.translationGroup;
+			else
+				console.warn(
+					`menu item "${item.label ?? item.url ?? item.ref ?? "(unlabeled)"}" (${itemLocale}): translationOf "${item.translationOf}" not found yet; minting a fresh group.`,
+				);
+		}
+
 		await db
 			.insertInto("_emdash_menu_items")
 			.values({
@@ -971,23 +985,26 @@ async function applyMenuItems(
 				target: item.target ?? null,
 				css_classes: item.cssClasses ?? null,
 				created_at: new Date().toISOString(),
-				locale,
-				translation_group: itemId,
+				locale: itemLocale,
+				translation_group: translationGroup,
 			})
 			.execute();
 
+		if (item.id) itemSeedIdMap.set(item.id, { id: itemId, translationGroup });
+
 		count++;
 		order++;
 
 		if (item.children && item.children.length > 0) {
 			const childCount = await applyMenuItems(
 				db,
 				menuId,
-				locale,
+				itemLocale,
 				item.children,
 				itemId,
 				0,
 				seedIdMap,
+				itemSeedIdMap,
 			);
 			count += childCount;
 		}

packages/core/src/seed/types.ts

@@ -134,6 +134,8 @@ export interface SeedMenu {
  * Menu item in seed
  */
 export interface SeedMenuItem {
+	/** Optional seed-local id, e.g. "item:primary:home:en". */
+	id?: string;
 	type: string;
 	label?: string;
 	url?: string; // For custom type
@@ -142,6 +144,8 @@ export interface SeedMenuItem {
 	target?: "_blank" | "_self";
 	titleAttr?: string;
 	cssClasses?: string;
+	locale?: string;
+	translationOf?: string;
 	children?: SeedMenuItem[];
 }
 

packages/core/tests/unit/seed/apply.test.ts

@@ -1131,6 +1131,109 @@ describe("applySeed", () => {
 			expect(rows[0]?.translation_group).toBe(rows[1]?.translation_group);
 		});
 
+		it("imports menu item translations sharing one translation_group", async () => {
+			const seed: SeedFile = {
+				version: "1",
+				menus: [
+					{
+						id: "menu:primary:en",
+						name: "primary",
+						label: "Primary",
+						locale: "en",
+						items: [
+							{ id: "item:primary:home:en", type: "custom", label: "Home", url: "/", locale: "en" },
+							{
+								id: "item:primary:about:en",
+								type: "custom",
+								label: "About",
+								url: "/about",
+								locale: "en",
+							},
+						],
+					},
+					{
+						id: "menu:primary:es",
+						name: "primary",
+						label: "Principal",
+						locale: "es",
+						translationOf: "menu:primary:en",
+						items: [
+							{
+								id: "item:primary:home:es",
+								type: "custom",
+								label: "Inicio",
+								url: "/",
+								locale: "es",
+								translationOf: "item:primary:home:en",
+							},
+							{
+								id: "item:primary:about:es",
+								type: "custom",
+								label: "Acerca",
+								url: "/about",
+								locale: "es",
+								translationOf: "item:primary:about:en",
+							},
+						],
+					},
+				],
+			};
+
+			await applySeed(db, seed);
+
+			const items = await db
+				.selectFrom("_emdash_menu_items")
+				.selectAll()
+				.orderBy(["label", "locale"])
+				.execute();
+
+			expect(items).toHaveLength(4);
+
+			const enHome = items.find((i) => i.label === "Home");
+			const esHome = items.find((i) => i.label === "Inicio");
+			const enAbout = items.find((i) => i.label === "About");
+			const esAbout = items.find((i) => i.label === "Acerca");
+
+			expect(enHome?.translation_group).toBe(esHome?.translation_group);
+			expect(enHome?.translation_group).toBe(enHome?.id);
+			expect(enAbout?.translation_group).toBe(esAbout?.translation_group);
+			expect(enAbout?.translation_group).not.toBe(enHome?.translation_group);
+		});
+
+		it("falls back to fresh group when item translationOf is missing", async () => {
+			const seed: SeedFile = {
+				version: "1",
+				menus: [
+					{
+						id: "menu:primary:es",
+						name: "primary",
+						label: "Principal",
+						locale: "es",
+						items: [
+							{
+								id: "item:primary:home:es",
+								type: "custom",
+								label: "Inicio",
+								url: "/",
+								locale: "es",
+								translationOf: "item:primary:home:en",
+							},
+						],
+					},
+				],
+			};
+
+			await applySeed(db, seed);
+
+			const item = await db
+				.selectFrom("_emdash_menu_items")
+				.selectAll()
+				.where("label", "=", "Inicio")
+				.executeTakeFirst();
+
+			expect(item?.translation_group).toBe(item?.id);
+		});
+
 		it("imports term translations sharing one translation_group", async () => {
 			const seed: SeedFile = {
 				version: "1",