feat: image variants settings screens

web/visual/check.ts

@@ -186,7 +186,72 @@ function tableStates(markdown: string) {
 		.filter((cell) => cell !== 'State' && !/^-+$/.test(cell))
 }
 
+const variantsBoard = 'RenewCMS Screens Image variants.dc.html'
+
+function numberedStates(prefix: string, names: string[]) {
+	return Object.fromEntries(
+		names.map((state, index) => [
+			state,
+			`${prefix}${String.fromCharCode(97 + index)} · ${state}`,
+		]),
+	)
+}
+
+function variantsScreen(): Screen {
+	const listNames = [
+		'Loaded',
+		'Loading',
+		'Empty',
+		'Error loading',
+		'Forbidden',
+		'Row menu',
+		'Row action in progress',
+		'Purge confirm',
+		'Delete confirm',
+		'Delete in progress',
+		'Request reference',
+		'Entry: sidebar',
+	]
+	const formNames = [
+		'Create: pristine',
+		'Create: dirty',
+		'Field errors',
+		'No dimension',
+		'Name already taken',
+		'Saving',
+		'Save error',
+		'Edit: pristine',
+		'Edit: dirty',
+		'Unsaved changes',
+		'PNG: no quality',
+	]
+	const sources: Source[] = [
+		{
+			board: variantsBoard,
+			group: 'Variants list',
+			states: listNames,
+			alias: numberedStates('1', listNames),
+		},
+		{
+			board: variantsBoard,
+			group: 'Add edit variant',
+			states: formNames,
+			alias: numberedStates('2', formNames),
+		},
+	]
+	return {
+		name: 'image-variants',
+		board: variantsBoard,
+		group: 'Variants list',
+		states: [...listNames, ...formNames],
+		sources,
+	}
+}
+
 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)
 	if (!reference) {