fix: small design harmonization and overhaul

web/visual/check.ts

@@ -26,6 +26,9 @@ interface Screen {
 	sources: Source[]
 }
 
+const VISUAL_REFERENCE =
+	/Visual reference:\*{0,2}\s*`(?:source\/)?([^`]+)`,?\s*groups?\s+((?:"[^"]+"(?:,\s*)?)+)/
+
 const officeBoard = 'RenewCMS Screens Back-office.dc.html'
 
 const extraSources: Record<string, Source[]> = {
@@ -286,7 +289,15 @@ function variantsScreen(): Screen {
 		'V5i · Purge all: confirm, typed',
 		'V5j · Purge unused: confirm',
 	]
+	const navNames = [
+		'N1 · Parent selected',
+		'N2 · Child selected: Variants',
+		'N3 · Child selected: Cache',
+		'N4 · Mobile drawer, parent selected',
+		'N5 · Mobile drawer, child selected',
+	]
 	sources.push(
+		{ board: officeBoard, group: 'Settings navigation', states: navNames, alias: {} },
 		{ board: variantsBoard, group: 'Cache panel', states: cacheNames, alias: {} },
 		{ board: variantsBoard, group: 'Media library', states: libraryNames, alias: {} },
 		{ board: variantsBoard, group: 'Image detail', states: detailNames, alias: {} },
@@ -303,22 +314,33 @@ function variantsScreen(): Screen {
 			...libraryNames,
 			...detailNames,
 			...editorNames,
+			...navNames,
 		],
 		sources,
 	}
 }
 
+function groupSectionRows(markdown: string, group: string) {
+	const heading = new RegExp(`^### .*\\(group "${group}", \\d+ states?\\)$`, 'm').exec(markdown)
+	if (!heading) {
+		return []
+	}
+	const rest = markdown.slice(heading.index + heading[0].length)
+	const end = rest.search(/^##/m)
+	const section = end === -1 ? rest : rest.slice(0, end)
+	return [...section.matchAll(/^\| \d+ \| ([^|]+?) \|/gm)].map((match) => match[1]!.trim())
+}
+
 async function readScreen(name: string): Promise<Screen> {
 	if (name === 'image-variants') {
 		return variantsScreen()
 	}
 	const markdown = await readFile(join(designRoot, 'screens', `${name}.md`), 'utf8')
-	const reference =
-		/\*\*Visual reference:\*\* `source\/([^`]+)`, group "([^"]+)"/.exec(markdown) ??
-		/^Visual reference: `([^`]+)`, groups? "([^"]+)"/m.exec(markdown)
+	const reference = VISUAL_REFERENCE.exec(markdown)
 	if (!reference) {
 		throw new Error(`docs/design/screens/${name}.md has no visual reference line`)
 	}
+	const referenceGroups = [...reference[2]!.matchAll(/"([^"]+)"/g)].map((match) => match[1]!)
 	const numberedRows = [...markdown.matchAll(/^\| \d+ \| ([^|]+?) \|/gm)].map((match) =>
 		match[1]!.trim(),
 	)
@@ -329,23 +351,35 @@ async function readScreen(name: string): Promise<Screen> {
 	const headingStates = [...statesMarkdown.matchAll(/^### (.+)$/gm)].map((match) =>
 		match[1]!.trim(),
 	)
-	const states = numberedRows.length
-		? numberedRows
-		: headingStates.length
-			? headingStates
-			: tableStates(statesMarkdown)
+	const groupRows = groupSectionRows(markdown, referenceGroups[0]!)
+	const states = groupRows.length
+		? groupRows
+		: numberedRows.length
+			? numberedRows
+			: headingStates.length
+				? headingStates
+				: tableStates(statesMarkdown)
 	const primary: Source = {
 		board: reference[1]!,
-		group: reference[2]!,
+		group: referenceGroups[0]!,
 		states,
 		alias: boardAlias[name] ?? {},
 	}
+	const configured = extraSources[name] ?? []
+	const documentedExtras = referenceGroups
+		.slice(1)
+		.filter((group) => !configured.some((source) => source.group === group))
+		.map((group): Source => ({ board: primary.board, group, states: [], alias: {} }))
 	return {
 		name,
 		board: primary.board,
 		group: primary.group,
 		states,
-		sources: [primary, ...(extraSources[name] ?? [])],
+		sources: [
+			primary,
+			...configured.filter((source) => source.group !== primary.group),
+			...documentedExtras,
+		],
 	}
 }