Add physical dimensions to bin editor for correct aspect ratio

When de-perspectiving a bin photo taken at an angle, inferring the
output size from the quadrilateral shape squishes the result. Entering
real-world W×H (mm) lets the server use the correct aspect ratio,
scaled to the same resolution as the inferred size.

- Bin editor dialog: W×H number inputs, pre-filled from saved phys_w/phys_h
- PUT /api/bins/:id/corners: accepts optional phys_w/phys_h; when provided,
  derives bin_w/bin_h from the physical aspect ratio at equivalent area
- phys_w/phys_h stored on the bin record for re-use on next edit
- future-plans.md: bin types note (reusable dimensions per model)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/app.mjs

@@ -2106,6 +2106,8 @@ function open_bin_editor(bin) {
 
 	bin_editor_bin_id = bin.id;
 	document.getElementById('bin-editor-name').value = bin.name;
+	document.getElementById('bin-editor-width').value  = bin.phys_w ?? '';
+	document.getElementById('bin-editor-height').value = bin.phys_h ?? '';
 
 	// Show dialog first so the canvas has correct layout dimensions before
 	// load_image reads parentElement.clientWidth to size itself.
@@ -2353,6 +2355,8 @@ async function init() {
 	document.getElementById('bin-editor-save').addEventListener('click', async () => {
 		const corners = bin_editor_instance?.get_corners();
 		const name = document.getElementById('bin-editor-name').value.trim();
+		const phys_w = parseFloat(document.getElementById('bin-editor-width').value) || null;
+		const phys_h = parseFloat(document.getElementById('bin-editor-height').value) || null;
 		if (!corners) { alert('Load an image first.'); return; }
 		const id = bin_editor_bin_id;
 		try {
@@ -2361,7 +2365,7 @@ async function init() {
 				const r = await api.rename_bin(id, name);
 				updated = r.bin;
 			}
-			const r2 = await api.update_bin_corners(id, corners);
+			const r2 = await api.update_bin_corners(id, corners, phys_w, phys_h);
 			updated = r2.bin;
 			all_bins = all_bins.map(b => b.id === id ? updated : b);
 			document.getElementById('dialog-bin-editor').close();

public/lib/api.mjs

@@ -66,7 +66,7 @@ export const get_bins            = () => req('GET', '/api/bins');
 export const create_bin_from_source = (source_id, name) => req('POST', '/api/bins/from-source', { source_id, name });
 export const get_bin         = (id) => req('GET', `/api/bins/${id}`);
 export const rename_bin      = (id, name) => req('PUT', `/api/bins/${id}`, { name });
-export const update_bin_corners = (id, corners) => req('PUT', `/api/bins/${id}/corners`, { corners });
+export const update_bin_corners = (id, corners, phys_w, phys_h) => req('PUT', `/api/bins/${id}/corners`, { corners, phys_w, phys_h });
 export const delete_bin      = (id) => req('DELETE', `/api/bins/${id}`);
 
 export async function upload_bin(file, name) {

public/style.css

@@ -1972,6 +1972,22 @@ nav {
 	flex: 1;
 }
 
+.bin-editor-dims {
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+}
+
+.bin-editor-dims input {
+	width: 5rem;
+}
+
+.form-hint {
+	font-size: 0.78rem;
+	color: var(--text-faint);
+	margin-left: 0.25rem;
+}
+
 .bin-editor-canvas {
 	display: block;
 	border-radius: 4px;

public/templates.html

@@ -656,6 +656,15 @@
 			<label>Name</label>
 			<input type="text" id="bin-editor-name" autocomplete="off">
 		</div>
+		<div class="form-row">
+			<label>Dimensions (mm)</label>
+			<div class="bin-editor-dims">
+				<input type="number" id="bin-editor-width" placeholder="W" min="1" step="1">
+				<span>×</span>
+				<input type="number" id="bin-editor-height" placeholder="H" min="1" step="1">
+				<span class="form-hint">Leave blank to infer from corners</span>
+			</div>
+		</div>
 		<canvas id="bin-editor-canvas" class="bin-editor-canvas"></canvas>
 		<div class="dialog-actions">
 			<button type="button" class="btn btn-secondary" id="bin-editor-cancel">Cancel</button>