feat: site languages, setup and site URL settings

web/visual/check.ts

@@ -7,8 +7,9 @@ import { chromium, type Browser, type BrowserContext, type Page } from 'playwrig
 import { icons as lucide } from '@iconify-json/lucide'
 import { getIconData, getIcons, iconToHTML, iconToSVG, replaceIDs } from '@iconify/utils'
 import { visualStates, type ApiMock, type DiffException, type VisualState } from './states'
+import { localizationSizeLabel, parseLocalizationScreen } from './localizationScreen'
 
-type Viewport = 'desktop' | 'mobile'
+type Viewport = 'desktop' | 'tablet' | 'mobile'
 type Theme = 'light' | 'dark'
 
 interface Source {
@@ -24,6 +25,7 @@ interface Screen {
 	group: string
 	states: string[]
 	sources: Source[]
+	sizes?: Record<string, Viewport[]>
 }
 
 const VISUAL_REFERENCE =
@@ -596,6 +598,7 @@ const configFile = join(webRoot, 'vite.config.ts')
 
 const frames: Record<Viewport, { width: number; height: number }> = {
 	desktop: { width: 1440, height: 900 },
+	tablet: { width: 1024, height: 768 },
 	mobile: { width: 390, height: 844 },
 }
 
@@ -629,7 +632,7 @@ function budgetFor(cap: DiffException['maxPercent'] | undefined, viewport: Viewp
 	if (cap === undefined) {
 		return maxDiffPercent
 	}
-	return typeof cap === 'number' ? cap : cap[viewport]
+	return typeof cap === 'number' ? cap : cap[viewport === 'mobile' ? 'mobile' : 'desktop']
 }
 
 function describeCap(cap: DiffException['maxPercent']) {
@@ -660,7 +663,11 @@ function parseArgs(argv: string[]) {
 			'Usage: task visual:check -- <screen> [state] [--viewport=desktop|mobile] [--theme=light|dark]',
 		)
 	}
-	const viewports = (flags.get('viewport')?.split(',') ?? ['desktop', 'mobile']) as Viewport[]
+	const viewports = (flags.get('viewport')?.split(',') ?? [
+		'desktop',
+		'tablet',
+		'mobile',
+	]) as Viewport[]
 	const themes = (flags.get('theme')?.split(',') ?? ['light', 'dark']) as Theme[]
 	return { screen, state: stateWords.join(' ') || undefined, viewports, themes }
 }
@@ -934,7 +941,39 @@ function rolesScreen(): Screen {
 	}
 }
 
+async function localizationScreen(name: string): Promise<Screen> {
+	const markdown = await readFile(join(designRoot, 'screens', `${name}.md`), 'utf8')
+	const parsed = parseLocalizationScreen(markdown)
+	const sources = parsed.groups.map(
+		(group): Source => ({
+			board: parsed.board,
+			group: group.label,
+			states: group.states.map((state) => state.id),
+			alias: Object.fromEntries(group.states.map((state) => [state.id, state.name])),
+		}),
+	)
+	const first = sources[0]!
+	return {
+		name,
+		board: first.board,
+		group: first.group,
+		states: sources.flatMap((source) => source.states),
+		sources,
+		sizes: Object.fromEntries(
+			parsed.groups.flatMap((group) =>
+				group.states.map((state) => [
+					state.id,
+					state.sizes.map(localizationSizeLabel) as Viewport[],
+				]),
+			),
+		),
+	}
+}
+
 async function readScreen(name: string): Promise<Screen> {
+	if (name.startsWith('localization-')) {
+		return localizationScreen(name)
+	}
 	if (name === 'image-variants') {
 		return variantsScreen()
 	}
@@ -1142,6 +1181,7 @@ const REALIGNED_BOARD_STATES = new Set(['9j. Navigation: scroll-spy on Content t
 const SCROLL_REALIGN_MAX_DRIFT = 60
 const BOARD_SCROLL_OFFSETS = {
 	desktop: [32],
+	tablet: [32],
 	mobile: [64],
 }
 
@@ -1270,7 +1310,7 @@ async function captureDesign(
 			group: screen.group,
 			state,
 			...frames[viewport],
-			widths: [frames.desktop.width, frames.mobile.width],
+			widths: [frames.desktop.width, frames.tablet.width, frames.mobile.width],
 		},
 	)
 	if (!found) {
@@ -1467,6 +1507,10 @@ async function main() {
 					const sourceScreen = { ...screen, board: source.board, group: source.group }
 					const board = await openBoard(browser, design.origin, sourceScreen, theme)
 					for (const state of source.states) {
+						const wanted = screen.sizes?.[state] ?? ['desktop', 'mobile']
+						if (!wanted.includes(viewport)) {
+							continue
+						}
 						const skip = setups[state]?.skip
 						if (skip === 'pending') {
 							pending++