@@ -17,6 +17,7 @@ import type {
 	SurfaceSchemaLedsConfig,
 } from './Model/Surfaces.js'
 import type { UserConfigGridSize } from './Model/UserConfigModel.js'
+import { estimateFace } from './SurfaceLayoutEstimate.js'
 
 /**
  * The style a control is drawn with: its named preset if it has one, otherwise the required default preset.
@@ -217,41 +218,19 @@ export interface SurfaceGridPlacement {
 	panelGridSize: GridSize
 }
 
-/** The gap left between controls, as a fraction of the smallest control. Stands in for the bezel of a real device. */
-const CONTROL_GAP_RATIO = 0.14
-
 /** How round a control's corners are, as a fraction of its shorter side. A Stream Deck key, near enough. */
 const CONTROL_CORNER_RATIO = 0.12
 
 /** The size of a control which declares no bitmap, when the surface has nothing else to go on */
 const NOMINAL_CONTROL_SIZE = 72
 
-/**
- * How big a control is on the face, in layout units.
- *
- * The one guess in here: the schema says how many pixels a control is drawn with, nothing about its physical size,
- * so this treats a pixel as a fixed amount of face - i.e. it assumes every control has the same pixel density.
- * Real devices don't (a Stream Deck + draws its touch strip at more pixels per mm than its keys), so a strip comes
- * out wider and taller relative to a key than it really is. The shapes and ordering are right; the proportions are
- * only as good as that assumption. Best available until a layout can state a physical size per control.
- */
-function estimateControlSize(
-	bitmap: SurfaceLayoutBitmapSize | undefined,
-	fallbackSide: number
-): { width: number; height: number } {
-	if (!bitmap) return { width: fallbackSide, height: fallbackSide }
-
-	return { width: bitmap.w, height: bitmap.h }
-}
-
 /**
  * Work out where a surface's controls are, and which buttons they drive.
  *
  * Returns null when the layout describes no controls at all.
  *
- * The schema gives a row and column per control and a bitmap size per style, so positions are derived: each column
- * is as wide as the widest control in it, each row as tall as the tallest. A control smaller than its track sits
- * centred in it. Sizes are a guess with a known error - see `estimateControlSize`.
+ * Drawn exactly from the surface's appearance when it described one; otherwise estimated from the layout, see
+ * `estimateFace`.
  */
 export function resolveSurfaceView(
 	layout: SurfaceSchemaLayoutDefinition,
@@ -282,7 +261,8 @@ export function resolveSurfaceView(
 		/** Relative to the surface's own origin, before the offset onto the grid */
 		gridX: number
 		gridY: number
-		size: { width: number; height: number }
+		/** How big its display is on the face, or null when it has none */
+		display: { width: number; height: number } | null
 		feedback: SurfaceControlFeedback
 		leds: SurfaceSchemaLedsConfig | null
 		aspectRatio: AspectRatio | null
@@ -296,15 +276,15 @@ export function resolveSurfaceView(
 
 		const preset = resolveControlStylePreset(layout, control)
 		const bitmap = preset.bitmap
-		const natural = estimateControlSize(bitmap, fallbackSide)
+		const display = bitmap ? { width: bitmap.w, height: bitmap.h } : null
 
 		placed.push({
 			id,
 			cell: { row: gridY + placement.offset.rows, column: gridX + placement.offset.columns },
 			gridX,
 			gridY,
 			// A surface on its side presents its controls on their side too
-			size: quarterTurn ? { width: natural.height, height: natural.width } : natural,
+			display: display && quarterTurn ? { width: display.height, height: display.width } : display,
 			feedback: controlFeedback(preset),
 			leds: preset.leds ?? null,
 			aspectRatio: bitmap ? reduceAspectRatio(bitmap.w, bitmap.h) : null,
@@ -340,50 +320,29 @@ export function resolveSurfaceView(
 		}
 	}
 
-	// Empty tracks between occupied ones keep their room: controls numbered 0, 3, 5 left space for what's between,
-	// and closing it up would draw the device narrower than it is
-	const columnWidths = trackSizes(
-		placed.map((control) => ({ track: control.gridX, size: control.size.width })),
-		fallbackSide
-	)
-	const rowHeights = trackSizes(
-		placed.map((control) => ({ track: control.gridY, size: control.size.height })),
+	const face = estimateFace(
+		placed.map((control) => ({
+			track: { x: control.gridX, y: control.gridY },
+			display: control.display,
+			ring: control.leds?.mode === 'full-ring',
+		})),
 		fallbackSide
 	)
 
-	const gap = Math.round(Math.min(...[...columnWidths.values(), ...rowHeights.values()]) * CONTROL_GAP_RATIO)
-
-	const columnOffsets = trackOffsets(columnWidths, gap)
-	const rowOffsets = trackOffsets(rowHeights, gap)
-
-	const controls: ResolvedSurfaceControl[] = placed.map((control) => {
-		const trackWidth = columnWidths.get(control.gridX) ?? control.size.width
-		const trackHeight = rowHeights.get(control.gridY) ?? control.size.height
-
-		return {
-			id: control.id,
-			cell: control.cell,
-			bounds: {
-				// Centred in the room the device leaves for it, rather than stretched to fill it
-				x: (columnOffsets.get(control.gridX) ?? 0) + (trackWidth - control.size.width) / 2,
-				y: (rowOffsets.get(control.gridY) ?? 0) + (trackHeight - control.size.height) / 2,
-				width: control.size.width,
-				height: control.size.height,
-			},
-			shape: { type: 'rect', cornerRadiusRatio: CONTROL_CORNER_RATIO },
-			feedback: control.feedback,
-			leds: control.leds,
-			aspectRatio: control.aspectRatio,
-			renderSize: control.renderSize,
-		}
-	})
+	const controls: ResolvedSurfaceControl[] = placed.map((control, index) => ({
+		id: control.id,
+		cell: control.cell,
+		bounds: face.bounds[index],
+		shape: { type: 'rect', cornerRadiusRatio: CONTROL_CORNER_RATIO },
+		feedback: control.feedback,
+		leds: control.leds,
+		aspectRatio: control.aspectRatio,
+		renderSize: control.renderSize,
+	}))
 
 	return {
 		controls,
-		extent: {
-			width: trackExtent(columnWidths, gap),
-			height: trackExtent(rowHeights, gap),
-		},
+		extent: face.extent,
 		gridBounds: gridBoundsFromCells(controls),
 		// No described face; the plain ground shows between the controls
 		body: null,
@@ -413,47 +372,3 @@ function gridBoundsFromCells(controls: readonly ResolvedSurfaceControl[]): UserC
 		maxColumn: Math.max(...controls.map((control) => control.cell.column)),
 	}
 }
-
-/**
- * How big each track has to be to hold the largest thing in it. Covers every track from first to last, so an empty
- * one still takes up the room the surface left for it.
- */
-function trackSizes(entries: readonly { track: number; size: number }[], emptySize: number): Map<number, number> {
-	const sizes = new Map<number, number>()
-
-	const tracks = entries.map((entry) => entry.track)
-	for (let track = Math.min(...tracks); track <= Math.max(...tracks); track++) {
-		sizes.set(track, 0)
-	}
-
-	for (const { track, size } of entries) {
-		sizes.set(track, Math.max(sizes.get(track) ?? 0, size))
-	}
-
-	for (const [track, size] of sizes) {
-		if (size === 0) sizes.set(track, emptySize)
-	}
-
-	return sizes
-}
-
-/** Where each track starts, laid out in order with a gap between them */
-function trackOffsets(sizes: ReadonlyMap<number, number>, gap: number): Map<number, number> {
-	const offsets = new Map<number, number>()
-
-	let position = 0
-	for (const track of [...sizes.keys()].sort((a, b) => a - b)) {
-		offsets.set(track, position)
-		position += (sizes.get(track) ?? 0) + gap
-	}
-
-	return offsets
-}
-
-/** How far the tracks reach in total, without a trailing gap */
-function trackExtent(sizes: ReadonlyMap<number, number>, gap: number): number {
-	let extent = 0
-	for (const size of sizes.values()) extent += size + gap
-
-	return Math.max(0, extent - gap)
-}