Add grid image system with multi-panel support and SPA routing

- Grid images: photograph component boxes in sub-sections, assemble
  into one logical grid via perspective warp (homography)
- Source image gallery: bulk upload photos separately from grid setup
- Grid drafts: persist partial work, resume across sessions
- Multi-panel grids: define rows/cols per photo, system computes panel
  layout; process partially configured grids, edit individual panels
- Pan/zoom canvas editor (HiDPI-aware, touch support) for corner alignment
- SPA routing with canonical URLs (history.pushState, server catch-all)
- Express error visibility: uncaughtException/unhandledRejection handlers
  and 4-arg error middleware
- Original filename stored on source image upload
- Various null-safety fixes and CSS [hidden] override fixes

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

public/templates.html

@@ -1,28 +1,21 @@
 <!-- ===== COMPONENTS SECTION ===== -->
 <template id="t-section-components">
 	<section class="section" id="section-components">
-		<div class="section-toolbar">
-			<input type="search" id="component-search" class="search-input" placeholder="Search components…">
-			<button class="btn btn-primary" id="btn-add-component">+ Add component</button>
+		<div class="split-layout">
+			<div class="list-pane">
+				<input type="search" id="component-search" class="search-input" placeholder="Search…">
+				<input type="text" id="quick-add" class="quick-add-input" placeholder="New component… ↵" autocomplete="off" spellcheck="false">
+				<div id="component-list" class="component-list"></div>
+			</div>
+			<div class="detail-pane" id="detail-pane"></div>
 		</div>
-		<div id="component-list" class="item-list"></div>
 	</section>
 </template>
 
 <template id="t-component-row">
-	<div class="component-row">
-		<div class="component-main">
-			<div class="component-header">
-				<span class="component-name"></span>
-				<span class="component-description"></span>
-			</div>
-			<div class="component-fields"></div>
-			<div class="component-locations"></div>
-		</div>
-		<div class="row-actions">
-			<button class="btn-icon btn-edit" title="Edit">✎</button>
-			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
-		</div>
+	<div class="component-row" tabindex="0">
+		<div class="component-name"></div>
+		<div class="component-tags"></div>
 	</div>
 </template>
 
@@ -30,8 +23,86 @@
 	<span class="field-tag"><span class="tag-name"></span><span class="tag-value"></span></span>
 </template>
 
-<template id="t-location-badge">
-	<span class="location-badge"><span class="badge-icon"></span><span class="badge-text"></span></span>
+<!-- ===== DETAIL PANEL ===== -->
+<template id="t-detail-placeholder">
+	<div class="detail-placeholder">Select a component to view details</div>
+</template>
+
+<template id="t-detail-content">
+	<div class="detail-content">
+		<div class="detail-header">
+			<div>
+				<h2 class="detail-name"></h2>
+				<p class="detail-description"></p>
+			</div>
+			<div class="detail-header-actions">
+				<button class="btn btn-secondary detail-edit-btn">Edit</button>
+				<button class="btn btn-danger detail-delete-btn">Delete</button>
+			</div>
+		</div>
+
+		<div class="detail-block">
+			<div class="detail-block-label">Fields</div>
+			<div class="detail-fields-list"></div>
+		</div>
+
+		<div class="detail-block">
+			<div class="detail-block-label">Images</div>
+			<div class="detail-images-row">
+				<div class="image-grid comp-image-grid"></div>
+				<label class="btn-add-image">
+					<input type="file" accept="image/*" multiple hidden class="comp-img-input">
+					+ Add image
+				</label>
+			</div>
+		</div>
+
+		<div class="detail-block">
+			<div class="detail-block-label">
+				Inventory
+				<button class="btn btn-secondary detail-add-inv-btn">+ Add entry</button>
+			</div>
+			<div class="detail-inventory-list"></div>
+		</div>
+	</div>
+</template>
+
+<template id="t-detail-field-row">
+	<div class="detail-field-row">
+		<span class="detail-field-name"></span>
+		<span class="detail-field-value"></span>
+	</div>
+</template>
+
+<template id="t-detail-inv-entry">
+	<div class="detail-inv-entry">
+		<div class="detail-inv-header">
+			<span class="detail-inv-type"></span>
+			<span class="detail-inv-ref"></span>
+			<span class="detail-inv-qty"></span>
+			<span class="detail-inv-notes"></span>
+			<span class="row-actions">
+				<button class="btn-icon btn-edit" title="Edit">✎</button>
+				<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
+			</span>
+		</div>
+		<div class="detail-inv-images">
+			<div class="image-grid inv-image-grid"></div>
+			<label class="btn-add-image btn-add-image-sm">
+				<input type="file" accept="image/*" multiple hidden class="inv-img-input">
+				+ Image
+			</label>
+		</div>
+	</div>
+</template>
+
+<template id="t-image-thumb">
+	<div class="image-thumb">
+		<a class="thumb-link" target="_blank" rel="noopener">
+			<img class="thumb-img" alt="">
+		</a>
+		<button type="button" class="thumb-delete btn-icon btn-danger" title="Remove">✕</button>
+	</div>
 </template>
 
 <!-- ===== INVENTORY SECTION ===== -->
@@ -47,30 +118,32 @@
 			</select>
 			<button class="btn btn-primary" id="btn-add-inventory">+ Add entry</button>
 		</div>
-		<div class="table-header inventory-grid">
-			<span>Component</span>
-			<span>Type</span>
-			<span>Location / Reference</span>
-			<span>Qty</span>
-			<span>Notes</span>
-			<span></span>
-		</div>
-		<div id="inventory-list" class="item-list"></div>
+		<table class="data-table">
+			<thead><tr>
+				<th>Component</th>
+				<th class="col-type">Type</th>
+				<th>Location / Reference</th>
+				<th class="col-qty">Qty</th>
+				<th>Notes</th>
+				<th class="col-actions"></th>
+			</tr></thead>
+			<tbody id="inventory-list"></tbody>
+		</table>
 	</section>
 </template>
 
 <template id="t-inventory-row">
-	<div class="inventory-row inventory-grid">
-		<span class="inv-component-name"></span>
-		<span class="inv-type-badge"></span>
-		<span class="inv-location-ref"></span>
-		<span class="inv-quantity"></span>
-		<span class="inv-notes"></span>
-		<span class="row-actions">
+	<tr class="data-row">
+		<td class="inv-component-name"></td>
+		<td class="inv-type-badge"></td>
+		<td class="inv-location-ref"></td>
+		<td class="inv-quantity"></td>
+		<td class="inv-notes"></td>
+		<td class="row-actions">
 			<button class="btn-icon btn-edit" title="Edit">✎</button>
 			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
-		</span>
-	</div>
+		</td>
+	</tr>
 </template>
 
 <!-- ===== FIELDS SECTION ===== -->
@@ -80,25 +153,169 @@
 			<span class="section-note">Master field index — fields available for all components</span>
 			<button class="btn btn-primary" id="btn-add-field">+ Add field</button>
 		</div>
-		<div class="table-header fields-grid">
-			<span>Field name</span>
-			<span>Unit</span>
-			<span>Description</span>
-			<span></span>
-		</div>
-		<div id="field-list" class="item-list"></div>
+		<table class="data-table">
+			<thead><tr>
+				<th>Field name</th>
+				<th class="col-unit">Unit</th>
+				<th>Description</th>
+				<th class="col-actions"></th>
+			</tr></thead>
+			<tbody id="field-list"></tbody>
+		</table>
 	</section>
 </template>
 
 <template id="t-field-row">
-	<div class="field-def-row fields-grid">
-		<span class="fdef-name"></span>
-		<span class="fdef-unit"></span>
-		<span class="fdef-description"></span>
-		<span class="row-actions">
+	<tr class="data-row">
+		<td class="fdef-name"></td>
+		<td class="fdef-unit"></td>
+		<td class="fdef-description"></td>
+		<td class="row-actions">
 			<button class="btn-icon btn-edit" title="Edit">✎</button>
 			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
-		</span>
+		</td>
+	</tr>
+</template>
+
+<!-- ===== EMPTY STATES ===== -->
+<template id="t-empty-row">
+	<tr><td class="empty-state"></td></tr>
+</template>
+<template id="t-empty-block">
+	<div class="empty-state"></div>
+</template>
+
+<!-- ===== GRIDS SECTION ===== -->
+<template id="t-section-grids">
+	<section class="section" id="section-grids">
+		<div class="section-toolbar">
+			<div class="tab-bar">
+				<button class="tab-btn" id="btn-tab-grids">Grids</button>
+				<button class="tab-btn" id="btn-tab-sources">Source images</button>
+			</div>
+			<button class="btn btn-primary" id="btn-new-grid">+ New grid</button>
+			<label class="btn btn-secondary" id="btn-upload-sources">
+				+ Upload
+				<input type="file" accept="image/*" multiple hidden id="source-upload-input">
+			</label>
+		</div>
+		<div id="tab-grids-content">
+			<div id="grid-list" class="grid-card-list"></div>
+		</div>
+		<div id="tab-sources-content" hidden>
+			<div id="source-image-list" class="source-gallery"></div>
+		</div>
+	</section>
+</template>
+
+<template id="t-source-card">
+	<div class="source-card">
+		<a class="source-card-link" target="_blank" rel="noopener">
+			<img class="source-card-img" alt="">
+		</a>
+		<div class="source-card-meta"></div>
+		<button type="button" class="btn-icon btn-danger source-card-delete" title="Delete">✕</button>
+	</div>
+</template>
+
+<template id="t-draft-card">
+	<div class="draft-card">
+		<div class="draft-badge">Draft</div>
+		<div class="draft-card-info">
+			<div class="draft-card-name"></div>
+			<div class="draft-card-meta"></div>
+		</div>
+		<div class="row-actions">
+			<button class="btn-icon btn-danger btn-delete" title="Discard">✕</button>
+		</div>
+	</div>
+</template>
+
+<template id="t-grid-card">
+	<div class="grid-card">
+		<div class="grid-card-preview"></div>
+		<div class="grid-card-info">
+			<div class="grid-card-name"></div>
+			<div class="grid-card-meta"></div>
+		</div>
+		<div class="row-actions">
+			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
+		</div>
+	</div>
+</template>
+
+<!-- ===== PANEL MANAGER VIEW ===== -->
+<template id="t-panel-manager">
+	<div class="panel-manager" id="panel-manager">
+		<div class="panel-manager-header">
+			<div>
+				<h2 class="pm-name"></h2>
+				<div class="pm-meta"></div>
+			</div>
+			<div class="pm-actions">
+				<button class="btn btn-secondary" id="pm-cancel">Cancel</button>
+				<button class="btn btn-primary" id="pm-process" disabled>Process all panels</button>
+			</div>
+		</div>
+		<div class="panel-slot-grid" id="panel-slot-grid"></div>
+		<div class="setup-progress" id="pm-progress" hidden>Processing panels…</div>
+	</div>
+</template>
+
+<template id="t-panel-slot">
+	<div class="panel-slot" tabindex="0">
+		<div class="panel-slot-preview">
+			<img class="panel-slot-thumb" alt="" hidden>
+			<div class="panel-slot-empty-icon"></div>
+		</div>
+		<div class="panel-slot-label"></div>
+		<div class="panel-slot-range"></div>
+	</div>
+</template>
+
+<!-- ===== GRID SETUP VIEW ===== -->
+<template id="t-grid-setup">
+	<div class="grid-setup" id="grid-setup">
+		<div class="grid-setup-left">
+			<canvas id="grid-canvas" class="grid-canvas"></canvas>
+			<div class="grid-setup-hint">Scroll to zoom · drag to pan · drag handles to align</div>
+		</div>
+		<div class="grid-setup-right">
+			<div class="gs-panel-info" id="gs-panel-info"></div>
+			<div class="setup-cell-size" id="gs-cell-size"></div>
+			<div class="setup-actions">
+				<button class="btn btn-secondary" id="gs-cancel">← Back</button>
+				<button class="btn btn-primary" id="gs-confirm">Confirm panel</button>
+			</div>
+			<div class="setup-progress" id="gs-progress" hidden></div>
+		</div>
+	</div>
+</template>
+
+<!-- ===== GRID VIEWER ===== -->
+<template id="t-grid-viewer">
+	<div class="grid-viewer" id="grid-viewer">
+		<div class="grid-viewer-header">
+			<div>
+				<h2 class="viewer-name"></h2>
+				<div class="viewer-meta"></div>
+			</div>
+			<div class="grid-viewer-actions">
+				<button class="btn btn-secondary" id="gv-back">← Back</button>
+				<button class="btn btn-secondary" id="gv-edit-panels">Edit panels</button>
+				<button class="btn btn-danger" id="gv-delete">Delete</button>
+			</div>
+		</div>
+		<div class="grid-cells" id="grid-cells"></div>
+	</div>
+</template>
+
+<template id="t-grid-cell">
+	<div class="grid-cell">
+		<div class="grid-cell-img-wrap">
+			<img class="grid-cell-img" alt="">
+		</div>
+		<div class="grid-cell-label"></div>
 	</div>
 </template>
 
@@ -194,6 +411,63 @@
 	</dialog>
 </template>
 
+<!-- ===== DIALOG: NEW GRID ===== -->
+<template id="t-dialog-new-grid">
+	<dialog id="dialog-new-grid" class="app-dialog">
+		<h2 class="dialog-title">New grid</h2>
+		<form method="dialog" id="form-new-grid">
+			<div class="form-row">
+				<label for="ng-name">Name</label>
+				<input type="text" id="ng-name" autocomplete="off" placeholder="e.g. Capacitor box A">
+			</div>
+			<div class="form-row-pair">
+				<div class="form-row">
+					<label for="ng-rows">Total rows</label>
+					<input type="number" id="ng-rows" min="1" max="500" value="4">
+				</div>
+				<div class="form-row">
+					<label for="ng-cols">Total columns</label>
+					<input type="number" id="ng-cols" min="1" max="500" value="6">
+				</div>
+			</div>
+			<div class="form-section-label">Photo coverage <span class="label-hint">(cells visible in each photo)</span></div>
+			<div class="form-row-pair">
+				<div class="form-row">
+					<label for="ng-photo-rows">Rows per photo</label>
+					<input type="number" id="ng-photo-rows" min="1" max="500" value="4">
+				</div>
+				<div class="form-row">
+					<label for="ng-photo-cols">Cols per photo</label>
+					<input type="number" id="ng-photo-cols" min="1" max="500" value="6">
+				</div>
+			</div>
+			<div class="ng-summary" id="ng-summary"></div>
+			<div class="dialog-actions">
+				<button type="button" class="btn btn-secondary" id="ng-cancel">Cancel</button>
+				<button type="submit" class="btn btn-primary">Continue →</button>
+			</div>
+		</form>
+	</dialog>
+</template>
+
+<!-- ===== DIALOG: SOURCE PICKER ===== -->
+<template id="t-dialog-source-picker">
+	<dialog id="dialog-source-picker" class="app-dialog app-dialog-wide">
+		<h2 class="dialog-title">Choose source image</h2>
+		<div class="picker-toolbar">
+			<label class="btn btn-secondary">
+				+ Upload new
+				<input type="file" accept="image/*" multiple hidden id="picker-upload-input">
+			</label>
+			<span class="picker-hint">or select an existing image below</span>
+		</div>
+		<div id="source-picker-grid" class="source-gallery picker-gallery"></div>
+		<div class="dialog-actions">
+			<button type="button" class="btn btn-secondary" id="picker-cancel">Cancel</button>
+		</div>
+	</dialog>
+</template>
+
 <!-- ===== DIALOG: CONFIRM ===== -->
 <template id="t-dialog-confirm">
 	<dialog id="dialog-confirm" class="app-dialog app-dialog-sm">