Add component name formatters and grid-link navigation

Templates section:
- Define JS formatter functions per template (e.g. resistor, capacitor)
- First non-null result from any formatter is used as display name
- Live preview in template editor against first component
- Display names applied in component list, detail view, and inventory rows

Grid navigation:
- Grid-type inventory entries in component detail view show a '⊞' button
  to navigate directly to that grid's viewer

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

public/style.css

@@ -795,6 +795,71 @@ nav {
 	line-height: 1.5;
 }
 
+/* ===== TEMPLATES SECTION ===== */
+
+.template-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.template-card {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	padding: 0.75rem 1rem;
+}
+
+.template-card-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0.4rem;
+}
+
+.template-card-name {
+	font-weight: 600;
+}
+
+.template-card-formatter {
+	font-family: var(--font-mono);
+	font-size: 0.8rem;
+	color: var(--text-dim);
+	white-space: pre-wrap;
+	margin: 0;
+}
+
+.code-input {
+	font-family: var(--font-mono);
+	font-size: 0.85rem;
+	width: 100%;
+	resize: vertical;
+	background: var(--bg);
+	color: var(--text);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	padding: 0.5rem;
+}
+
+.tmpl-preview-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.85rem;
+	min-height: 1.5rem;
+}
+
+.tmpl-preview-value {
+	font-family: var(--font-mono);
+	color: var(--accent, #5b9cf6);
+}
+
+.section-empty-note {
+	color: var(--text-dim);
+	font-size: 0.9rem;
+	margin: 1rem 0;
+}
+
 /* ===== TAB BAR ===== */
 
 .tab-bar {