feat(SPA): media field type

web/visual/check.ts

@@ -68,6 +68,9 @@ const extraSources: Record<string, Source[]> = {
 				'Key already taken',
 				'Schema incompatible',
 				'Offline',
+				'Media field selected',
+				'New media field, seven types',
+				'Media field, required',
 			],
 			alias: {},
 		},
@@ -81,6 +84,50 @@ const extraSources: Record<string, Source[]> = {
 				'Delete type: blocked',
 				'Delete type: confirm',
 				'Delete type: server fallback (409)',
+				'Review: required media field refused',
+				'Review: optional media field',
+			],
+			alias: {},
+		},
+	],
+	content: [
+		{
+			board: schemaBoard,
+			group: '5 Content and entry list',
+			states: ['Thumbnail column', 'Columns menu with Thumbnail', 'Missing image: tooltip'],
+			alias: {},
+		},
+	],
+	entry: [
+		{
+			board: schemaBoard,
+			group: '6 Entry editor',
+			states: [
+				'Media control: empty, optional',
+				'Media control: empty, required',
+				'Media control: filled',
+				'Media control: hover',
+				'Media control: focus',
+				'Media control: validation error',
+				'Media control: image no longer in the library',
+				'Media control: missing image, required',
+				'Media control: saving',
+				'Media control: read-only, type changed',
+			],
+			alias: {},
+		},
+		{
+			board: schemaBoard,
+			group: '10 Media picker for fields',
+			states: [
+				'Library: nothing chosen',
+				'Library: image chosen',
+				'Library: No image chosen',
+				'Library: required field',
+				'Library: empty',
+				'Library: failed to load',
+				'Library: loading',
+				'Upload tab',
 			],
 			alias: {},
 		},
@@ -694,13 +741,22 @@ async function readScreen(name: string): Promise<Screen> {
 			: headingStates.length
 				? headingStates
 				: tableStates(statesMarkdown)
+	const configured = extraSources[name] ?? []
+	const sameGroup = configured.filter((source) => source.group === referenceGroups[0]!)
+	const mergedStates = [
+		...states,
+		...sameGroup.flatMap((source) => source.states).filter((state) => !states.includes(state)),
+	]
 	const primary: Source = {
 		board: reference[1]!,
 		group: referenceGroups[0]!,
-		states,
-		alias: boardAlias[name] ?? {},
+		states: mergedStates,
+		alias: Object.assign(
+			{},
+			boardAlias[name] ?? {},
+			...sameGroup.map((source) => source.alias),
+		),
 	}
-	const configured = extraSources[name] ?? []
 	const documentedExtras = referenceGroups
 		.slice(1)
 		.filter((group) => !configured.some((source) => source.group === group))
@@ -709,7 +765,7 @@ async function readScreen(name: string): Promise<Screen> {
 		name,
 		board: primary.board,
 		group: primary.group,
-		states,
+		states: mergedStates,
 		sources: [
 			primary,
 			...configured.filter((source) => source.group !== primary.group),