commit f06b8a68b83c9a330312c3a19caf80606e34538f
Author: Taras Greben <taras.greben@gmail.com>
Date:   Sun Dec 21 00:31:26 2025 +0200

    PCB ReTrace initial

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ac69a22
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,38 @@
+# --- Operating System Files ---
+.DS_Store
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+._*
+
+# --- Editor & IDE Configs ---
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+*.sublime-workspace
+*.sublime-project
+
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# --- Exported Data & Backups ---
+# Prevent committing personal board data, exports, or test images
+*.zip
+*.csv
+*.net
+*.kicad_sch
+*.kicad_pcb
+
+# Specific JSON exports (extracted from ZIPs)
+# Note: We allow *.json generally for configs, but ignore these specific export names
+device.json
+bom.json
+
+# --- Temporary / Test Files ---
+tmp/
+temp/
+*.log
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..3cd14bb
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,33 @@
+PCB ReTrace - Dual Licensing Notice
+========================================================================
+
+This software is available under two different licenses:
+
+1. GNU Affero General Public License v3.0 (AGPLv3)
+   This is the default license. It allows you to use, modify, and distribute 
+   this software for free, provided that you disclose your source code and 
+   license modified versions under the same AGPLv3 terms (including network use).
+
+2. Commercial License
+   If you wish to use this software in a proprietary setting, without the 
+   obligations of the AGPLv3 (such as disclosing your modifications), you 
+   must acquire a commercial license. 
+   
+   Please contact [Taras Greben <taras.greben@gmail.com>] for pricing and terms.
+
+========================================================================
+
+GNU AFFERO GENERAL PUBLIC LICENSE
+Version 3, 19 November 2007
+
+Copyright (C) 2025 Taras Greben
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.txt>.
+
+SPDX-License-Identifier: AGPL-3.0-only
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..da8b526
--- /dev/null
+++ b/README.md
@@ -0,0 +1,73 @@
+# PCB ReTrace
+
+**Digitize, document, and reverse engineer printed circuit boards entirely in your browser.**
+
+[**Launch PCB ReTrace**](https://pcb.etaras.com/studio.html)
+
+---
+
+## 🔍 Overview
+**PCB ReTrace** is a local-first web application designed for electronics engineers, repair technicians, and hardware hackers. It helps you move from a physical PCB to a digital representation (BOM & Netlist) using only photographs.
+
+It runs 100% client-side using HTML5, Vanilla JS, and WebAssembly. **No data is ever uploaded to a server.**
+
+## ✨ Key Features
+
+*   **BOM Management:** Map components on board photos to a digital Bill of Materials.
+*   **Visual Inspection:** View multiple board layers (Top/Bottom) simultaneously.
+*   **Computer Vision Stitching:** Automatically align close-up macro shots with wide-angle reference photos using OpenCV.
+*   **X-Ray View:** Manually stitch Top and Bottom images to trace vias and through-holes across layers.
+*   **Netlist Tracing:** click-to-trace connectivity and export to **KiCad** compatible netlists (`.net`).
+*   **Integrated Tools:**
+    *   Resistor Color Code Decoder (3-6 bands)
+    *   Inductor Color Code Decoder
+    *   Air-core Coil Calculator
+*   **Privacy First:** All data is stored in your browser's IndexedDB.
+
+## 🚀 Getting Started
+
+### Online
+Simply visit the [GitHub Pages deployment](https://dev-lab.github.io/pcb-retrace/).
+
+### Offline / Local Development
+Since the project uses no build tools, you can run it directly from the source:
+
+1.  Clone this repository:
+    ```bash
+    git clone https://github.com/dev-lab/pcb-retrace.git
+    ```
+2.  Navigate to the `docs` folder (where the source code lives):
+    ```bash
+    cd pcb-retrace/docs
+    ```
+3.  Open `index.html` in your browser.
+    *   *Note: Some features (like Camera access) require a secure context (HTTPS) or `localhost`. For best results, use a simple local server like Python's `http.server`.*
+
+## 📂 Project Structure
+
+This project follows a "Build-Free" architecture. All source code is located in the `/docs` folder to support GitHub Pages directly.
+
+*   `docs/studio.html`: The main application entry point.
+*   `docs/studio.js`: Core controller and logic.
+*   `docs/cv-core.js`: Computer Vision & Homography logic (OpenCV wrapper).
+*   `docs/inspector.js`: Visual trace tracking logic.
+*   `docs/nets.js`: Netlist management and KiCad export.
+
+## ⚖️ License & Commercial Use
+
+This project is **Dual Licensed**:
+
+1.  **Open Source (AGPLv3):** Ideal for hobbyists, educational use, and open-source projects. You are free to use and modify the software, provided that any modifications are also made open source under the same terms.
+2.  **Commercial License:** For proprietary use, internal corporate deployment without copyleft restrictions, or integration into closed-source workflows, a commercial license is available.
+
+Please see [LICENSE](LICENSE) for details.
+
+For commercial licensing inquiries, please contact: Taras Greben <taras.greben@gmail.com>.
+
+
+## 📦 Third-Party Libraries
+
+*   **OpenCV.js:** Computer Vision (Apache 2.0 License)
+*   **JSZip:** File compression/decompression (MIT License)
+
+See [THIRD_PARTY_LICENSES.md](THIRD_PARTY_LICENSES.md) for full text.
diff --git a/THIRD_PARTY_LICENSES.md b/THIRD_PARTY_LICENSES.md
new file mode 100644
index 0000000..675554d
--- /dev/null
+++ b/THIRD_PARTY_LICENSES.md
@@ -0,0 +1,54 @@
+# Third-Party Licenses
+
+This software uses the following open-source packages:
+
+---
+
+## OpenCV.js
+**License:** Apache License 2.0
+**Copyright:** (C) 2000-2022, Intel Corporation, all rights reserved.
+**Copyright:** (C) 2009-2011, Willow Garage Inc., all rights reserved.
+**Copyright:** (C) 2009-2016, NVIDIA Corporation, all rights reserved.
+**Copyright:** (C) 2010-2013, Advanced Micro Devices, Inc., all rights reserved.
+**Copyright:** (C) 2015-2023, OpenCV Foundation, all rights reserved.
+**Copyright:** (C) 2008-2016, Itseez Inc., all rights reserved.
+**Copyright:** (C) 2019-2023, Xperience AI, all rights reserved.
+**Copyright:** (C) 2019-2022, Shenzhen Institute of Artificial Intelligence and Robotics for Society, all rights reserved.
+**Copyright:** (C) 2022-2023, Southern University of Science And Technology, all rights reserved.
+**Copyright:** (C) 2023-2025, OpenCV AI, all rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+---
+
+## JSZip
+**License:** MIT License
+**Copyright:** (c) 2009-2016 Stuart Knightley, David Duponchel, Franz Buchinger, António Afonso
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/docs/canvas-ui.js b/docs/canvas-ui.js
new file mode 100644
index 0000000..c824718
--- /dev/null
+++ b/docs/canvas-ui.js
@@ -0,0 +1,158 @@
+/* canvas-ui.js - Shared Canvas Logic */
+
+class PanZoomCanvas {
+	constructor(id, onDraw, onClick, onDragPt) {
+		this.canvas = document.getElementById(id);
+		this.container = this.canvas ? this.canvas.parentElement : null;
+		this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
+		this.bmp = null;
+		
+		this.t = {x:0, y:0, k:1}; // Changed default k to 1, but fit() will override
+		
+		this.drag = false;
+		this.lm = {x:0, y:0};
+		this.activePtIdx = -1;
+		this.isMirrored = false;
+		
+		this.onDraw = onDraw; 
+		this.onClick = onClick; 
+		this.onDragPt = onDragPt;
+		this.onMouseMove = null; 
+
+		if(this.container) {
+			new ResizeObserver(() => {
+				if(this.container && this.container.clientWidth > 0) {
+					this.canvas.width = this.container.clientWidth;
+					this.canvas.height = this.container.clientHeight;
+					this.draw();
+				}
+			}).observe(this.container);
+			this.initEvents();
+		}
+	}
+
+	initEvents() {
+		this.canvas.onwheel = e => {
+			e.preventDefault();
+			const f = Math.exp(-e.deltaY * 0.001);
+			const r = this.canvas.getBoundingClientRect();
+			const mx = e.clientX - r.left, my = e.clientY - r.top;
+			const wx = (mx - this.t.x) / this.t.k, wy = (my - this.t.y) / this.t.k;
+			this.t.k = Math.max(0.01, Math.min(20, this.t.k * f));
+			this.t.x = mx - wx * this.t.k;
+			this.t.y = my - wy * this.t.k;
+			this.draw();
+		};
+
+		this.canvas.onmousedown = e => {
+			const coords = this.getImgCoords(e.clientX, e.clientY);
+			if (this.onDragPt) {
+				const idx = this.onDragPt(coords.x, coords.y, 'check');
+				if (idx !== -1) {
+					this.activePtIdx = idx;
+					this.drag = true;
+					this.lm = { x: e.clientX, y: e.clientY };
+					return;
+				}
+			}
+			this.drag = true;
+			this.lm = { x: e.clientX, y: e.clientY };
+			this.activePtIdx = -1;
+		};
+
+		this.canvas.oncontextmenu = e => {
+			e.preventDefault();
+			const coords = this.getImgCoords(e.clientX, e.clientY);
+			if (this.onDragPt) this.onDragPt(coords.x, coords.y, 'delete');
+		};
+
+		window.addEventListener('mousemove', e => {
+			if (this.drag) {
+				if (this.activePtIdx !== -1) {
+					const r = this.canvas.getBoundingClientRect();
+					const curr = this.getImgCoords(e.clientX, e.clientY);
+					const prev = this.getImgCoords(this.lm.x, this.lm.y);
+					const dx = curr.x - prev.x;
+					const dy = curr.y - prev.y;
+					this.onDragPt(dx, dy, 'move', this.activePtIdx);
+					this.lm = { x: e.clientX, y: e.clientY };
+				} else {
+					this.t.x += e.clientX - this.lm.x;
+					this.t.y += e.clientY - this.lm.y;
+					this.lm = { x: e.clientX, y: e.clientY };
+					this.draw();
+				}
+			}
+			if(this.onMouseMove && e.target === this.canvas) {
+				const coords = this.getImgCoords(e.clientX, e.clientY);
+				this.onMouseMove(coords.x, coords.y);
+			}
+		});
+
+		window.addEventListener('mouseup', e => {
+			if (this.drag && this.activePtIdx === -1 && e.shiftKey && this.onClick) {
+				const coords = this.getImgCoords(e.clientX, e.clientY);
+				this.onClick(coords.x, coords.y);
+			}
+			this.drag = false;
+			this.activePtIdx = -1;
+		});
+	}
+
+	getImgCoords(screenX, screenY) {
+		const r = this.canvas.getBoundingClientRect();
+		const mx = (screenX - r.left - this.t.x) / this.t.k;
+		const my = (screenY - r.top - this.t.y) / this.t.k;
+		if (this.isMirrored && this.bmp) { return { x: this.bmp.width - mx, y: my }; }
+		return { x: mx, y: my };
+	}
+
+	setMirror(val) { this.isMirrored = val; this.draw(); }
+	setImage(b) { this.bmp = b; this.draw(); }
+
+	setDimmed(isDimmed) {
+		if(isDimmed) this.canvas.style.filter = "brightness(0.4) grayscale(100%)";
+		else this.canvas.style.filter = "none";
+	}
+
+	// [NEW] Fit Image to Container
+	fit() {
+		if(!this.bmp || !this.canvas) return;
+		const vw = this.canvas.width;
+		const vh = this.canvas.height;
+		if (vw === 0 || vh === 0) return;
+		
+		const iw = this.bmp.width;
+		const ih = this.bmp.height;
+		
+		// Scale to fit
+		const scale = Math.min(vw / iw, vh / ih);
+		
+		// Center
+		const cx = (vw - iw * scale) / 2;
+		const cy = (vh - ih * scale) / 2;
+		
+		this.t = { x: cx, y: cy, k: scale };
+		this.draw();
+	}
+
+	draw() {
+		if(!this.ctx) return;
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.ctx.save();
+		this.ctx.translate(this.t.x, this.t.y);
+		this.ctx.scale(this.t.k, this.t.k);
+
+		if (this.bmp) {
+			this.ctx.save();
+			if (this.isMirrored) {
+				this.ctx.translate(this.bmp.width, 0);
+				this.ctx.scale(-1, 1);
+			}
+			this.ctx.drawImage(this.bmp, 0, 0);
+			this.ctx.restore();
+		}
+		if (this.onDraw) this.onDraw(this.ctx, this.t.k);
+		this.ctx.restore();
+	}
+}
diff --git a/docs/coil.html b/docs/coil.html
new file mode 100644
index 0000000..f4630aa
--- /dev/null
+++ b/docs/coil.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("consent","default",{ad_storage:"granted",ad_user_data:"granted",ad_personalization:"granted",analytics_storage:"granted"});gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",region:"AT,BE,BG,HR,CY,CZ,DK,EE,FI,FR,DE,GR,HU,IE,IT,LV,LT,LU,MT,NL,PL,PT,RO,SK,SI,ES,SE,IS,LI,NO,GB,CH,UA".split(",")});</script>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1MKL6C4B0"></script>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-X1MKL6C4B0");</script>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Air Core Coil</title>
+	<script src="tool-bridge.js"></script>
+	<script src="spyglass.js"></script>
+	<link rel="stylesheet" href="tool-style.css">
+	<style>
+		:root {
+			/* Copper Theme */
+			--accent: #ea580c;
+			--copper-dark: #9a3412;
+			--bg: #fff7ed;
+			--border: #fed7aa;
+			--focus-ring: #ffedd5;
+		}
+
+		/* Layout overrides */
+		.coil-viz {
+			width: 100%; height: 120px; display: flex; align-items: center; justify-content: center;
+			background: linear-gradient(to bottom, #fff7ed, #fff);
+			border: 1px solid #fed7aa; border-radius: 0.5rem;
+			overflow: hidden; position: relative; flex-shrink: 0; margin-bottom: 1rem;
+		}
+
+		.coil-viz svg {
+			width: 100%;
+			height: 100%;
+			display: block;
+		}
+
+		svg path {
+			fill: none; stroke: url(#copperGradient); stroke-width: 4; stroke-linecap: round;
+			filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2));
+		}
+
+		/* Specific Label Color from original file */
+		label { color: #78350f !important; opacity: 1 !important; }
+
+		/* MOBILE OVERRIDES */
+		@media (max-width: 600px) {
+			.result-val { font-size: 1.5rem; }
+
+			/* NEW: Smaller Coil Graphic on Mobile */
+			.coil-viz {
+				height: 80px;	   /* Reduced from 120px */
+				margin-bottom: 0.5rem;
+		   }
+	   }
+	</style>
+</head>
+<body>
+
+<div class="container">
+	<h1 id="app-title">Air Core Calc</h1>
+
+	<div class="top-section">
+		<div id="spyglass-col" class="col-spyglass">
+			<div class="spyglass-wrapper">
+				<canvas id="tool-canvas" class="spyglass-canvas" width="600" height="600"></canvas>
+				<div id="tool-zoom" class="zoom-badge">2x</div>
+			</div>
+			<div class="spyglass-hint">Scroll to zoom</div>
+			<div id="view-selector"></div>
+		</div>
+
+		<div class="col-controls">
+			<div class="input-grid">
+				<div class="form-group">
+					<label>Turns (N)</label>
+					<div class="input-wrapper">
+						<input type="number" id="inp-turns" value="10" min="1" step="1" oninput="updateLength()">
+						<span class="unit">T</span>
+					</div>
+				</div>
+				<div class="form-group">
+					<label>Diameter (D)</label>
+					<div class="input-wrapper">
+						<input type="number" id="inp-dia" value="6" min="0.1" step="0.1" oninput="calculate()">
+						<span class="unit">mm</span>
+					</div>
+				</div>
+				<div class="form-group">
+					<label>Wire Ø (d)</label>
+					<div class="input-wrapper">
+						<input type="number" id="inp-wire" value="0.5" min="0.05" step="0.05" oninput="updateLength()">
+						<span class="unit">mm</span>
+					</div>
+				</div>
+				<div class="form-group">
+					<label>Length (L)</label>
+					<div class="input-wrapper">
+						<input type="number" id="inp-len" value="5" min="0.1" step="0.1" oninput="calculate()" style="background:#f9fafb; color:#666">
+						<span class="unit">mm</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="coil-viz">
+		<svg width="300" height="100" viewBox="0 0 300 100" id="coil-svg">
+			<defs>
+				<linearGradient id="copperGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+					<stop offset="0%" style="stop-color:#fdba74;stop-opacity:1" />
+					<stop offset="50%" style="stop-color:#ea580c;stop-opacity:1" />
+					<stop offset="100%" style="stop-color:#7c2d12;stop-opacity:1" />
+				</linearGradient>
+			</defs>
+			<path id="coil-path" d="" />
+		</svg>
+	</div>
+
+	<div class="result-box">
+		<div class="result-row" style="background:#fff7ed; border:1px solid #fed7aa;">
+			<div class="val-group">
+				<span class="val-text" id="res-val" style="color:#9a3412">---</span>
+				<span class="meta-text" id="res-desc" style="color:#c2410c">Adjust parameters above</span>
+			</div>
+			<button id="btn-select" class="btn-select" style="display:none;" onclick="sendResult()">Select</button>
+		</div>
+	</div>
+
+	<div class="app-footer">Copyright © 2025 Taras Greben — <a href="https://pcb.etaras.com">pcb.eTaras.com</a></div>
+</div>
+
+<script>
+	let isEmbed = false;
+	let calculatedValues = { val: '', desc: '' };
+	let bridge = null;
+
+	function init() {
+		const urlParams = new URLSearchParams(window.location.search);
+		if (urlParams.has('embed') || window.self !== window.top) {
+			isEmbed = true;
+			document.getElementById('btn-select').style.display = 'block';
+			document.getElementById('app-title').style.display = 'none';
+		}
+		calculate();
+	}
+
+	function parseDescription(desc) {
+		try {
+			const regex = /([\d\.]+)T,\s*([\d\.]+)mm ID,\s*([\d\.]+)mm Cu/;
+			const match = desc.match(regex);
+			if (match) {
+				document.getElementById('inp-turns').value = match[1];
+				document.getElementById('inp-dia').value = match[2];
+				document.getElementById('inp-wire').value = match[3];
+				updateLength();
+			}
+		} catch(e) {}
+	}
+
+	function updateLength() {
+		const N = parseFloat(document.getElementById('inp-turns').value) || 0;
+		const d_wire = parseFloat(document.getElementById('inp-wire').value) || 0;
+		const len = (N * d_wire * 1.05).toFixed(2);
+		document.getElementById('inp-len').value = len;
+		calculate();
+	}
+
+	function calculate() {
+		const N = parseFloat(document.getElementById('inp-turns').value);
+		const D_mm = parseFloat(document.getElementById('inp-dia').value);
+		const l_mm = parseFloat(document.getElementById('inp-len').value);
+		const w_mm = parseFloat(document.getElementById('inp-wire').value);
+
+		if (!N || !D_mm || !l_mm) return;
+
+		const d_in = D_mm / 25.4;
+		const l_in = l_mm / 25.4;
+		const num = Math.pow(d_in, 2) * Math.pow(N, 2);
+		const den = (18 * d_in) + (40 * l_in);
+		let uH = num / den;
+
+		let displayVal = "", cleanVal = "";
+		if (uH < 1) {
+			let nH = uH * 1000;
+			displayVal = nH.toFixed(0) + " nH";
+			cleanVal = nH.toFixed(0) + "nH";
+		} else {
+			displayVal = uH.toFixed(2) + " µH";
+			cleanVal = uH.toFixed(2) + "uH";
+		}
+
+		const desc = `Air Core: ${N}T, ${D_mm}mm ID, ${w_mm}mm Cu`;
+
+		document.getElementById('res-val').innerText = displayVal;
+		document.getElementById('res-desc').innerText = desc;
+		calculatedValues = { val: cleanVal, desc: desc };
+		drawCoil(N);
+	}
+
+	function drawCoil(turns) {
+		const path = document.getElementById('coil-path');
+		const width = 300;
+		const height = 100;
+		const padding = 20;
+
+		const visualTurns = Math.min(Math.max(turns, 1), 20);
+		const pitch = (width - padding*2) / visualTurns;
+
+		const radius = 24;
+		const midY = 60;
+
+		let d = `M ${padding} ${midY + radius}`;
+		for (let i = 0; i < visualTurns; i++) {
+			const x = padding + (i * pitch);
+			// The magic number 2.5 defines the 'height' of the back loop perspective
+			d += ` C ${x + pitch*0.2} ${midY - radius*2.5}, ${x + pitch*0.8} ${midY - radius*2.5}, ${x + pitch} ${midY + radius}`;
+		}
+		path.setAttribute('d', d);
+	}
+
+	function sendResult() {
+		if(bridge) bridge.sendResult();
+	}
+
+	init();
+
+	bridge = new ToolBridge({
+		onData: (d) => {
+			if(d.description) parseDescription(d.description);
+			calculate();
+		},
+		onNominal: () => calculatedValues.val,
+		onDescription: () => calculatedValues.desc
+	});
+</script>
+</body>
+</html>
diff --git a/docs/common.css b/docs/common.css
new file mode 100644
index 0000000..cc49aed
--- /dev/null
+++ b/docs/common.css
@@ -0,0 +1,43 @@
+:root {
+	--border: #cbd5e1;
+	--text-muted: #94a3b8;
+	--bg-default: #f1f5f9;
+	--text-default: #1e293b;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	margin: 0;
+	padding: 0;
+
+	/* MOBILE VIEWPORT FIX */
+	height: 100vh;		/* Fallback */
+	height: 100dvh;		/* Dynamic height handles mobile toolbars */
+
+	display: flex;
+	flex-direction: column;
+	overflow: hidden; /* Prevent body scroll, let containers scroll */
+}
+
+/* COMPACT FOOTER */
+.app-footer {
+	padding: 0.2rem 0;
+	text-align: center;
+	font-size: 0.65rem;
+	color: var(--text-muted);
+	border-top: 1px solid var(--border);
+	background: rgba(255, 255, 255, 0.9); /* Slight transparency */
+	flex-shrink: 0;
+	z-index: 20;
+	width: 100%;
+}
+
+.app-footer a {
+	color: inherit;
+	text-decoration: none;
+	border-bottom: 1px dotted var(--border);
+}
+
+@keyframes spin {
+	100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
+}
diff --git a/docs/cv-core.js b/docs/cv-core.js
new file mode 100644
index 0000000..f9ed4a7
--- /dev/null
+++ b/docs/cv-core.js
@@ -0,0 +1,172 @@
+/* cv-core.js - Computer Vision Logic for PCB ReTrace Suite */
+class CVManager {
+	constructor() {
+		this.ready = false;
+		this.initAttempts = 0;
+		this.detector = null;
+		this.matcher = null;
+	}
+
+	async init() {
+		if (this.ready) return;
+		if (typeof cv !== 'undefined' && cv.Mat) {
+			try {
+				// Tuned Settings: ORB 5000, Hamming
+				this.detector = new cv.ORB(5000);
+				this.matcher = new cv.BFMatcher(cv.NORM_HAMMING, false);
+				this.ready = true;
+				console.log("CV Core Initialized");
+			} catch (e) {
+				console.error("CV Init Error:", e);
+			}
+		} else {
+			this.initAttempts++;
+			if (this.initAttempts < 50) setTimeout(() => this.init(), 500);
+			else console.error("CV Failed to load OpenCV.js");
+		}
+	}
+
+	// Helper: Project (x,y) using Homography Matrix
+	projectPoint(x, y, h) {
+		if (!h || h.length < 9) return null;
+		const Z = h[6] * x + h[7] * y + h[8];
+		if (Math.abs(Z) < 0.0001) return null;
+		return {
+			x: (h[0] * x + h[1] * y + h[2]) / Z,
+			y: (h[3] * x + h[4] * y + h[5]) / Z
+		};
+	}
+
+	// Helper: Resize for processing (Speed optimization)
+	async createSmallMat(blob) {
+		const maxWidth = 2000; // Tuned for optimal accuracy/speed
+		const bmp = await createImageBitmap(blob);
+		const canvas = document.createElement('canvas');
+		const scale = Math.min(1, maxWidth / bmp.width);
+
+		canvas.width = bmp.width * scale;
+		canvas.height = bmp.height * scale;
+
+		const ctx = canvas.getContext('2d');
+		ctx.drawImage(bmp, 0, 0, canvas.width, canvas.height);
+
+		const mat = cv.imread(canvas);
+		const gray = new cv.Mat();
+		cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY);
+		mat.delete();
+
+		// Cleanup canvas to free memory
+		canvas.width = 0; canvas.height = 0;
+
+		return { mat: gray, scale: scale, width: bmp.width, height: bmp.height };
+	}
+
+	// Solve Manual Stitch (Least Squares)
+	solveManual(pairs) {
+		if (pairs.length < 4) return null;
+		const srcMat = new cv.Mat(pairs.length, 1, cv.CV_32FC2);
+		const dstMat = new cv.Mat(pairs.length, 1, cv.CV_32FC2);
+
+		for (let i = 0; i < pairs.length; i++) {
+			srcMat.data32F[i * 2] = pairs[i].s.x;
+			srcMat.data32F[i * 2 + 1] = pairs[i].s.y;
+			dstMat.data32F[i * 2] = pairs[i].d.x;
+			dstMat.data32F[i * 2 + 1] = pairs[i].d.y;
+		}
+
+		// Method 0 = Least Squares (Best for manual precise points)
+		const H = cv.findHomography(srcMat, dstMat, 0);
+
+		if (H.empty()) {
+			srcMat.delete(); dstMat.delete(); H.delete();
+			return null;
+		}
+
+		const hd = [];
+		const Hi = H.inv(cv.DECOMP_LU);
+		const ihd = [];
+
+		for (let i = 0; i < 9; i++) hd.push(H.data64F[i]);
+		for (let i = 0; i < 9; i++) ihd.push(Hi.data64F[i]);
+
+		srcMat.delete(); dstMat.delete(); H.delete(); Hi.delete();
+		return { hData: hd, invHData: ihd };
+	}
+
+	// Extract Features
+	async feats(blob) {
+		if (!this.ready) return null;
+		const { mat, scale, width, height } = await this.createSmallMat(blob);
+		const kp = new cv.KeyPointVector();
+		const des = new cv.Mat();
+		this.detector.detectAndCompute(mat, new cv.Mat(), kp, des);
+		mat.delete();
+		return { kp, des, scale, w: width, h: height };
+	}
+
+	// Chain two homographies: H_total = H2 * H1
+	multiplyH(H2, H1) {
+		// H1 and H2 are flat arrays [0..8] representing 3x3 matrices
+		// Standard Matrix Multiplication
+		const res = new Array(9);
+		for (let r = 0; r < 3; r++) {
+			for (let c = 0; c < 3; c++) {
+				let sum = 0;
+				for (let k = 0; k < 3; k++) {
+					sum += H2[r*3 + k] * H1[k*3 + c];
+				}
+				res[r*3 + c] = sum;
+			}
+		}
+		return res;
+	}
+
+	// Find Homography between two feature sets
+	findH(s, d) {
+		if (s.des.rows === 0 || d.des.rows === 0) return null;
+
+		const mv = new cv.DMatchVectorVector();
+		this.matcher.knnMatch(s.des, d.des, mv, 2);
+
+		const good = [];
+		for (let i = 0; i < mv.size(); i++) {
+			const m = mv.get(i).get(0), n = mv.get(i).get(1);
+			if (m.distance < 0.70 * n.distance) good.push(m); // Ratio Test 0.70
+		}
+		mv.delete();
+
+		if (good.length > 8) {
+			const sp = new cv.Mat(good.length, 1, cv.CV_32FC2);
+			const dp = new cv.Mat(good.length, 1, cv.CV_32FC2);
+
+			for (let i = 0; i < good.length; i++) {
+				const k1 = s.kp.get(good[i].queryIdx);
+				const k2 = d.kp.get(good[i].trainIdx);
+				sp.data32F[i * 2] = k1.pt.x / s.scale;
+				sp.data32F[i * 2 + 1] = k1.pt.y / s.scale;
+				dp.data32F[i * 2] = k2.pt.x / d.scale;
+				dp.data32F[i * 2 + 1] = k2.pt.y / d.scale;
+			}
+
+			const mask = new cv.Mat();
+			// RANSAC 8.0 (Tuned for 2000px resolution)
+			const H = cv.findHomography(sp, dp, cv.RANSAC, 8.0, mask);
+
+			if (H.empty()) {
+				sp.delete(); dp.delete(); mask.delete(); H.delete();
+				return null;
+			}
+
+			const hd = [];
+			const Hi = H.inv(cv.DECOMP_LU);
+			const ihd = [];
+
+			for (let i = 0; i < 9; i++) hd.push(H.data64F[i]);
+			for (let i = 0; i < 9; i++) ihd.push(Hi.data64F[i]);
+
+			sp.delete(); dp.delete(); mask.delete(); H.delete(); Hi.delete();
+			return { hData: hd, invHData: ihd, matches: good.length };
+		}
+		return null;
+	}
+}
diff --git a/docs/guide.html b/docs/guide.html
new file mode 100644
index 0000000..7c603f3
--- /dev/null
+++ b/docs/guide.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>User Guide - PCB ReTrace</title>
+	<link rel="stylesheet" href="common.css">
+	<style>
+		/* Override common.css app locks for document flow */
+		html, body {
+			height: auto !important;
+			overflow-y: auto !important;
+			display: block !important;
+			margin: 0; padding: 0;
+		}
+
+		body { background: #f8fafc; color: #334155; line-height: 1.6; }
+
+		.container { 
+			max-width: 800px; 
+			margin: 0 auto; 
+			padding: 2rem 1rem; 
+			background: white; 
+			min-height: 100vh; 
+			box-shadow: 0 0 20px rgba(0,0,0,0.05); 
+			box-sizing: border-box;
+		}
+		
+		h1 { color: #0f172a; margin-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 1rem; }
+		h2 { color: #1e293b; margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; }
+		h3 { color: #2563eb; margin-top: 1.5rem; font-size: 1.1rem; }
+		
+		.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold; background: #e2e8f0; color: #475569; }
+		.badge.pro { background: #dcfce7; color: #166534; }
+		
+		ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
+		li { margin-bottom: 0.5rem; }
+		
+		.tip-box { background: #eff6ff; border-left: 4px solid #2563eb; padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; font-size: 0.95rem; }
+		.warn-box { background: #fff1f2; border-left: 4px solid #f43f5e; padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; font-size: 0.95rem; }
+		
+		code { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 3px; font-family: monospace; font-size: 0.9em; color: #0f172a; border: 1px solid #e2e8f0; }
+
+		.nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; }
+		.back-link { text-decoration: none; color: #64748b; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
+		.back-link:hover { color: #2563eb; }
+		
+		footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; color: #94a3b8; font-size: 0.8rem; text-align: center; }
+	</style>
+</head>
+<body>
+
+<div class="container">
+	<nav class="nav-header">
+		<a href="index.html" class="back-link">← Back to Home</a>
+		<span style="color:#94a3b8; font-size:0.9rem;">Documentation v5.3</span>
+	</nav>
+
+	<h1>PCB ReTrace Guide</h1>
+	<p class="lead">A local-first browser tool for reverse engineering, documenting, and inspecting printed circuit boards.</p>
+
+	<div class="tip-box">
+		<strong>Privacy Note:</strong> This application runs 100% in your browser. All images and data are stored in your browser's local database (IndexedDB). No data is uploaded to any server.
+	</div>
+
+	<h2>1. Concept & Hierarchy</h2>
+	<p>ReTrace organizes data to match physical hardware:</p>
+	<ol>
+		<li><strong>Device:</strong> The physical unit (e.g., "Multimeter Model X").</li>
+		<li><strong>Board:</strong> A specific PCB inside the device (e.g., "Mainboard", "Power Supply").</li>
+		<li><strong>Images:</strong> Photos of the board (Top, Bottom, Angled shots).</li>
+	</ol>
+
+	<h2>2. The Workflow</h2>
+
+	<h3>Step 1: Setup</h3>
+	<p>Create a <strong>New Device</strong> and a <strong>New Board</strong> using the top menu. Then, upload your images. High-resolution, flat photos work best.</p>
+
+	<h3>Step 2: Mapping Components (BOM)</h3>
+	<p>Navigate to the <strong>Images</strong> tab. Click on a component in the photo to mark it.</p>
+	<ul>
+		<li>The app switches to the <strong>BOM</strong> list.</li>
+		<li>Enter the Reference (e.g., <code>R1</code>).</li>
+		<li>If identifying the value requires calculation, click the tool icon to open the built-in decoders (Resistor Bands, Inductors).</li>
+	</ul>
+
+	<h3>Step 3: Tracing Nets</h3>
+	<p>Use the <strong>Inspect</strong> and <strong>Nets</strong> tabs to document connectivity.</p>
+	<ul>
+		<li><strong>New Net:</strong> In the Inspect tab, click anywhere on the image to create a node. You will be prompted to name the Pin/Pad. If no net is currently active, entering a name will <strong>automatically start a new net</strong>.</li>
+		<li><strong>Add Nodes:</strong> Click on other pins that belong to the same electrical connection.</li>
+		<li><strong>Export:</strong> In the Nets tab, you can export a <code>.net</code> file compatible with <strong>KiCad</strong> to help verify your reverse engineering in a professional EDA tool.</li>
+	</ul>
+
+	<h2>3. Computer Vision & Stitching</h2>
+	<p>ReTrace uses Computer Vision (CV) for <strong>Spatial Alignment</strong>. It allows you to synchronize the view across different images.</p>
+
+	<div class="warn-box">
+		<strong>Important:</strong> The CV engine does <em>not</em> automatically recognize components (it won't read "10k" off a resistor). Its purpose is to mathematically align coordinates between images so you can see through the board.
+	</div>
+
+	<h3>Auto-Stitch (Same Side)</h3>
+	<p>When you upload a new image, ReTrace <strong>automatically attempts to stitch</strong> it against existing images on the board in the background. If features match (e.g., a close-up vs. a wide shot), connections are created automatically.</p>
+	<p>You can also run this manually:</p>
+	<ol>
+		<li>Open <strong>Image Settings</strong> on your Main image.</li>
+		<li>Select <strong>Stitch / Connections</strong> -> <strong>Run Auto-CV</strong>.</li>
+	</ol>
+
+	<h3>Manual Stitch (Top vs. Bottom)</h3>
+	<p>To create an "X-Ray" view where clicking a pin on the Top automatically shows the corresponding pin on the Bottom:</p>
+	<ol>
+		<li>Select your <strong>Top Image</strong>.</li>
+		<li>Go to <strong>Image Settings</strong> -> <strong>Connections</strong>.</li>
+		<li>Find your <strong>Bottom Image</strong> and click <strong>"Edit Stitch"</strong>.</li>
+		<li><strong>Flip Target:</strong> Click the <button style="padding:0 4px; font-size:0.8em;">↔ Flip Target</button> button. This mirrors the bottom image horizontally.</li>
+		<li><strong>Match Points:</strong> Click 4 common features (Vias, Holes, Corners) visible on both images.</li>
+		<li>Click <strong>Save Match</strong>.</li>
+	</ol>
+
+	<h2>4. Tools</h2>
+	<p>ReTrace includes standalone calculators accessible from the BOM editor:</p>
+	<ul>
+		<li><strong>Resistor:</strong> 3-6 Band decoder with reverse lookup.</li>
+		<li><strong>Inductor:</strong> Standard and Military codes.</li>
+		<li><strong>Coil:</strong> Calculator for hand-wound air-core inductors.</li>
+	</ul>
+
+	<h2>5. Data Management</h2>
+	<ul>
+		<li><strong>Device Export (ZIP):</strong> Full backup including all boards and images.</li>
+		<li><strong>Board Export (ZIP):</strong> Portable backup of a single board.</li>
+		<li><strong>CSV Export:</strong> Standard spreadsheet export for BOM ordering.</li>
+		<li><strong>KiCad Export (.net):</strong> Exports identified components and traced nets for use in PCB design software.</li>
+	</ul>
+
+	<footer>
+		Copyright &copy; 2025 Taras Greben.
+	</footer>
+</div>
+
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..c244f8d
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("consent","default",{ad_storage:"granted",ad_user_data:"granted",ad_personalization:"granted",analytics_storage:"granted"});gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",region:"AT,BE,BG,HR,CY,CZ,DK,EE,FI,FR,DE,GR,HU,IE,IT,LV,LT,LU,MT,NL,PL,PT,RO,SK,SI,ES,SE,IS,LI,NO,GB,CH,UA".split(",")});</script>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1MKL6C4B0"></script>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-X1MKL6C4B0");</script>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>PCB ReTrace</title>
+	<link rel="stylesheet" href="common.css">
+	<style>
+		/* OVERRIDE COMMON.CSS APP LOCKS */
+		/* This ensures the landing page scrolls normally and footer is visible */
+		html, body {
+			height: auto !important;
+			overflow-y: auto !important; /* Force scrollbar */
+			display: block !important;   /* Disable app flex layout */
+			margin: 0;
+			padding: 0;
+			background: white;
+			color: var(--text-default);
+		}
+
+		:root { --hero-bg: #f8fafc; --text-main: #0f172a; --text-sub: #475569; --primary: #2563eb; }
+		
+		/* HERO SECTION */
+		.hero {
+			padding: 4rem 1rem 3rem;
+			text-align: center;
+			background: radial-gradient(circle at 50% 50%, #f1f5f9 0%, #fff 70%);
+			border-bottom: 1px solid #e2e8f0;
+		}
+		.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.05em; color: var(--text-main); }
+		.hero p { font-size: 1.2rem; color: var(--text-sub); max-width: 600px; margin: 0 auto 2rem; }
+		
+		.cta-button {
+			display: inline-block;
+			background: var(--primary); color: white;
+			padding: 0.8rem 2rem; border-radius: 2rem;
+			font-weight: 700; text-decoration: none; font-size: 1.1rem;
+			box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
+			transition: transform 0.1s, box-shadow 0.1s;
+		}
+		.cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3); }
+		.cta-button:active { transform: translateY(0); }
+
+		.secondary-links { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; font-size: 0.9rem; }
+		.secondary-links a { color: var(--text-sub); text-decoration: none; border-bottom: 1px dotted #ccc; }
+
+		/* FEATURES GRID */
+		.features {
+			max-width: 1000px; margin: 3rem auto; padding: 0 1rem;
+			display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
+		}
+		.feature-card { padding: 1.5rem; border: 1px solid #e2e8f0; border-radius: 1rem; transition: border-color 0.2s; }
+		.feature-card:hover { border-color: var(--primary); }
+		.feature-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
+		.feature-card h3 { margin: 0 0 0.5rem; color: var(--text-main); }
+		.feature-card p { color: var(--text-sub); font-size: 0.95rem; margin: 0; }
+
+		/* TOOLS LIST */
+		.tools-section { background: #f8fafc; padding: 3rem 1rem; border-top: 1px solid #e2e8f0; }
+		.tools-container { max-width: 800px; margin: 0 auto; }
+		.tools-title { text-align: center; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-size: 0.9rem; font-weight: 700; }
+		
+		.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+		.tool-link { 
+			background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem; 
+			padding: 1rem; text-align: center; text-decoration: none; color: inherit;
+			transition: transform 0.2s;
+		}
+		.tool-link:hover { transform: translateY(-3px); border-color: var(--primary); }
+		.tool-link strong { display: block; color: var(--primary); margin-bottom: 0.2rem; }
+		.tool-link span { font-size: 0.8rem; color: #64748b; }
+
+		footer.landing-footer {
+			margin-top: 0; 
+			padding: 2rem 1rem; 
+			text-align: center; 
+			background: white; 
+			border-top: 1px solid #e2e8f0;
+			color: #94a3b8;
+			font-size: 0.8rem;
+		}
+		footer.landing-footer a { color: inherit; text-decoration: underline; }
+
+		@media (max-width: 600px) {
+			.hero { padding: 3rem 1rem; }
+			.hero h1 { font-size: 2rem; }
+			.tool-grid { grid-template-columns: 1fr; }
+		}
+	</style>
+</head>
+<body>
+
+<div class="hero">
+	<h1>PCB ReTrace</h1>
+	<p>Digitize, document, and reverse engineer printed circuit boards. Map components, trace nets, and inspect layers. Runs entirely in your browser.</p>
+	
+	<a href="studio.html" class="cta-button">Launch Studio</a>
+	
+	<div class="secondary-links">
+		<a href="guide.html">📖 User Guide & Documentation</a>
+		<a href="https://github.com/dev-lab/pcb-retrace">GitHub Repo</a>
+	</div>
+</div>
+
+<div class="features">
+	<div class="feature-card">
+		<span class="feature-icon">🔒</span>
+		<h3>Privacy First</h3>
+		<p>Zero cloud upload. All images and data are stored in your browser's local database. Works 100% offline.</p>
+	</div>
+	<div class="feature-card">
+		<span class="feature-icon">🕸️</span>
+		<h3>Netlist Tracing</h3>
+		<p>Click-to-trace connectivity across your board. Define nets, label nodes, and export directly to <strong>KiCad</strong>.</p>
+	</div>
+	<div class="feature-card">
+		<span class="feature-icon">👁️</span>
+		<h3>Auto-Stitch & Inspect</h3>
+		<p>Align close-up shots with wide-angle views using Computer Vision. Stitch Top vs. Bottom layers for X-Ray inspection.</p>
+	</div>
+</div>
+
+<div class="tools-section">
+	<div class="tools-container">
+		<div class="tools-title">Included Utilities</div>
+		<div class="tool-grid">
+			<a href="resistor.html" class="tool-link">
+				<strong>Resistor Decoder</strong>
+				<span>3-6 Bands & Reverse Lookup</span>
+			</a>
+			<a href="inductor.html" class="tool-link">
+				<strong>Inductor Decoder</strong>
+				<span>Standard & Military Codes</span>
+			</a>
+			<a href="coil.html" class="tool-link">
+				<strong>Coil Calculator</strong>
+				<span>Air-core Inductance</span>
+			</a>
+		</div>
+	</div>
+</div>
+
+<footer class="landing-footer">
+	<p>Dual Licensed: <strong>AGPL v3</strong> (Open Source) + <strong>Commercial</strong>.</p>
+	<p>Copyright © 2025 Taras Greben — <a href="https://pcb.etaras.com">pcb.eTaras.com</a></p>
+</footer>
+
+</body>
+</html>
diff --git a/docs/inductor.html b/docs/inductor.html
new file mode 100644
index 0000000..13c6af2
--- /dev/null
+++ b/docs/inductor.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("consent","default",{ad_storage:"granted",ad_user_data:"granted",ad_personalization:"granted",analytics_storage:"granted"});gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",region:"AT,BE,BG,HR,CY,CZ,DK,EE,FI,FR,DE,GR,HU,IE,IT,LV,LT,LU,MT,NL,PL,PT,RO,SK,SI,ES,SE,IS,LI,NO,GB,CH,UA".split(",")});</script>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1MKL6C4B0"></script>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-X1MKL6C4B0");</script>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Inductor Decoder</title>
+	<script src="tool-bridge.js"></script>
+	<script src="spyglass.js"></script>
+	<link rel="stylesheet" href="tool-style.css">
+	<style>
+		:root { --accent: #16a34a; --resistor-body: #86efac; --resistor-shadow: #4ade80; --bg: #f0fdf4; }
+		.controls-grid { grid-template-columns: 1fr 1fr 1fr; }
+	</style>
+</head>
+<body>
+
+<div class="container">
+	<h1 id="app-title">Inductor Decoder</h1>
+	<div class="top-section">
+		<div id="spyglass-col" class="col-spyglass">
+			<div class="spyglass-wrapper"><canvas id="tool-canvas" class="spyglass-canvas" width="600" height="600"></canvas><div id="tool-zoom" class="zoom-badge">2x</div></div>
+			<div id="view-selector"></div>
+		</div>
+		<div class="col-controls">
+			<div class="reverse-input-group"><div class="input-row"><input type="text" id="nominal-input" class="inp-nominal" placeholder="e.g. 100n, 4u7"><button class="btn-action" onclick="applyNominal()">Set</button></div></div>
+			<div class="controls-grid">
+				<button class="btn-mode active" onclick="setBands(3)">3 Band</button>
+				<button class="btn-mode" onclick="setBands(4)">4 Band</button>
+				<button class="btn-mode" onclick="setBands(5)">5 Band (Mil)</button>
+			</div>
+		</div>
+	</div>
+	<div class="resistor-wrapper-outer"><div class="resistor-dumbbell-shape"><div class="bands-container" id="picker-area"></div></div></div>
+	<div id="results" class="result-box"></div>
+    <div class="app-footer">Copyright © 2025 Taras Greben — <a href="https://pcb.etaras.com">pcb.eTaras.com</a></div>
+</div>
+<div id="global-dropdown"></div>
+
+<script>
+	const colors = [
+		{ name: 'Black',  val: 0, mult: 1, tol: 20, css: 'c-bk' },
+		{ name: 'Brown',  val: 1, mult: 10, tol: 1, css: 'c-bn' },
+		{ name: 'Red',	  val: 2, mult: 100, tol: 2, css: 'c-rd' },
+		{ name: 'Orange', val: 3, mult: 1000, tol: 3, css: 'c-og' },
+		{ name: 'Yellow', val: 4, mult: 10000, tol: 4, css: 'c-ye' },
+		{ name: 'Green',  val: 5, mult: null, tol: null, css: 'c-gn' },
+		{ name: 'Blue',	  val: 6, mult: null, tol: null, css: 'c-bu' },
+		{ name: 'Violet', val: 7, mult: null, tol: null, css: 'c-vt' },
+		{ name: 'Gray',	  val: 8, mult: null, tol: null, css: 'c-gy' },
+		{ name: 'White',  val: 9, mult: null, tol: null, css: 'c-wh' },
+		{ name: 'Gold',	  val: null, mult: 0.1, tol: 5, css: 'c-gd' },
+		{ name: 'Silver', val: null, mult: 0.01, tol: 10, css: 'c-sv' }
+	];
+	let currentBands=3; let bandState=[1,0,0]; let activeBandIndex=-1; let isEmbed=false; let bridge=null;
+	const globalDropdown = document.getElementById('global-dropdown');
+
+	function init() {
+		initGlobalDropdown();
+		const urlParams = new URLSearchParams(window.location.search);
+		if (urlParams.has('embed') || window.self !== window.top) { isEmbed = true; document.getElementById('app-title').style.display = 'none'; }
+		setBands(3);
+	}
+
+	function initGlobalDropdown(){ globalDropdown.innerHTML=''; colors.forEach((c,i)=>{ const d=document.createElement('div'); d.className=`custom-option ${c.css}`; d.innerText=c.name; d.onclick=e=>{e.stopPropagation();if(activeBandIndex>-1){bandState[activeBandIndex]=i;renderPickers();calculate();closeDropdown();}}; globalDropdown.appendChild(d); }); }
+
+	function openGlobalDropdown(triggerElement) {
+		globalDropdown.style.display = 'flex'; globalDropdown.style.top = '0px'; globalDropdown.style.left = '0px';
+		globalDropdown.classList.remove('condensed', 'super-condensed');
+		globalDropdown.style.height = 'auto'; globalDropdown.style.overflowY = 'hidden';
+		const triggerRect = triggerElement.getBoundingClientRect();
+		const menuRect = globalDropdown.getBoundingClientRect();
+		const viewportHeight = window.innerHeight;
+		let top = triggerRect.bottom + 5;
+		let left = triggerRect.left + (triggerRect.width / 2);
+		let projectedBottom = top + menuRect.height;
+		if (projectedBottom > viewportHeight - 10) { globalDropdown.classList.add('condensed'); projectedBottom = top + globalDropdown.getBoundingClientRect().height; }
+		if (projectedBottom > viewportHeight - 10) { globalDropdown.classList.add('super-condensed'); projectedBottom = top + globalDropdown.getBoundingClientRect().height; }
+		if (projectedBottom > viewportHeight - 10) { const height = globalDropdown.getBoundingClientRect().height; top = viewportHeight - height - 10; if (top < 10) { top = 10; globalDropdown.style.height = (viewportHeight - 20) + 'px'; globalDropdown.style.overflowY = 'auto'; } }
+		globalDropdown.style.top = top + 'px'; globalDropdown.style.left = left + 'px'; globalDropdown.style.transform = 'translateX(-50%)';
+	}
+
+	window.onclick=closeDropdown; function closeDropdown(){globalDropdown.style.display='none';activeBandIndex=-1;}
+	function setBands(n){ currentBands=n; document.querySelectorAll('.btn-mode').forEach((b,i)=>b.classList.toggle('active',(i+3)===n)); if(n===3)bandState=[1,0,0];else if(n===4)bandState=[1,0,0,11];else bandState=[11,1,0,0,10]; renderPickers(); calculate(); }
+	function renderPickers(){ const a=document.getElementById('picker-area'); a.innerHTML=''; for(let i=0;i<currentBands;i++){ const w=document.createElement('div'); w.className='custom-select-wrapper'; const t=document.createElement('div'); t.className=`custom-select__trigger ${colors[bandState[i]].css}`; t.innerHTML=`<span>${colors[bandState[i]].name}</span>`; t.onclick=e=>{e.stopPropagation(); if(activeBandIndex===i&&globalDropdown.style.display==='flex')closeDropdown(); else{activeBandIndex=i;openGlobalDropdown(t);}}; w.appendChild(t); a.appendChild(w); } }
+
+	function parseInputStr(str) { if(!str)return null; str=str.toLowerCase().trim(); let m=1; if(str.includes('m')){m=1e3;str=str.replace('m','.');}else if(str.includes('u')){m=1;str=str.replace('u','.');}else if(str.includes('n')){m=1e-3;str=str.replace('n','.');} const v=parseFloat(str); return isNaN(v)?null:v*m; }
+	function applyNominal() { const raw=document.getElementById('nominal-input').value; const uH=parseInputStr(raw); if(uH===null)return; let val=uH; let exp=0; if(val<10){let s=(Math.round(val*1000)/1000).toString(); if(s.includes('.')){const sh=s.split('.')[1].length;val=Math.round(val*Math.pow(10,sh));exp=-sh;}} let s=val.toString(); const d1=parseInt(s[0]); const d2=parseInt(s.length>1?s[1]:0); const te=s.length-2+exp; let mi=-1; if(te>=0&&te<=4)mi=te;else if(te===-1)mi=10;else if(te===-2)mi=11; if(mi!==-1){ if(currentBands===3)bandState=[d1,d2,mi];else if(currentBands===4)bandState=[d1,d2,mi,11];else bandState=[11,d1,d2,mi,10]; renderPickers(); calculate(); } }
+
+	function decode(idxs) {
+		if (currentBands !== 5 && colors[idxs[0]].name === 'Silver') return { valid: false };
+		let v=0, m=0, t=0;
+		if (currentBands === 3) {
+			v = colors[idxs[0]].val * 10 + colors[idxs[1]].val; m = colors[idxs[2]].mult; t = 20;
+		} else if (currentBands === 4) {
+			v = colors[idxs[0]].val * 10 + colors[idxs[1]].val; m = colors[idxs[2]].mult; t = colors[idxs[3]].tol;
+		} else {
+			if (colors[idxs[0]].name !== 'Silver') return { valid: false };
+			v = colors[idxs[1]].val * 10 + colors[idxs[2]].val; m = colors[idxs[3]].mult; t = colors[idxs[4]].tol;
+		}
+		if (isNaN(v) || m === null || t === null) return { valid: false };
+		return { uH: v * m, tol: t, valid: true };
+	}
+
+	function format(uH){ if(uH>=1000)return(uH/1000).toFixed(2)+'mH'; if(uH<1)return(uH*1000).toFixed(0)+'nH'; return uH.toFixed(2)+'uH'; }
+
+	function calculate(){
+		const f=decode(bandState.slice(0,currentBands)); const b=decode([...bandState.slice(0,currentBands)].reverse());
+
+		const arrowSvg = (isF) => isF ? `<svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg>` : `<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>`;
+
+		const h=(d,fwd)=>{
+			const btn = isEmbed ? `<button class="btn-select" onclick="bridge.sendResult('${format(d.uH)}')">Select</button>` : '';
+			const badge = fwd ? `<span class="badge-success" style="margin-left:0.5rem; padding:0.1rem 0.5rem; font-size:0.7rem; vertical-align:middle;">Likely</span>` : '';
+
+			return `<div class="result-row"><div class="${fwd?'direction-icon':'direction-icon reverse'}">${arrowSvg(fwd)}</div><div class="val-group"><span class="val-text">${format(d.uH)}</span><span class="meta-text">±${d.tol}%${badge}</span></div>${btn}</div>`;
+		};
+
+		let res=''; if(f.valid)res+=h(f,true); document.getElementById('results').innerHTML=res||'<div style="text-align:center;color:red;padding:1rem">Invalid</div>';
+	}
+
+	function parseInductorDescription(desc) {
+		let n=3, t=-1; if(desc.includes("4-Band"))n=4; else if(desc.includes("5-Band"))n=5;
+		const tm=desc.match(/±\s*([\d.]+)%/); if(tm){const v=parseFloat(tm[1]);const c=colors.findIndex(x=>x.tol===v);if(c!==-1)t=c;}
+		setBands(n); if(t!==-1){ if(n===4)bandState[3]=t; if(n===5)bandState[4]=t; }
+	}
+
+	init();
+	bridge = new ToolBridge({
+		onData: (d) => {
+			if(d.value) document.getElementById('nominal-input').value = d.value;
+			if(d.description) parseInductorDescription(d.description);
+			applyNominal();
+		}
+	});
+</script>
+</body>
+</html>
diff --git a/docs/inspector.js b/docs/inspector.js
new file mode 100644
index 0000000..7d200bd
--- /dev/null
+++ b/docs/inspector.js
@@ -0,0 +1,539 @@
+/* inspector.js - Visual Trace Tracking (v6) */
+
+class Inspector {
+	constructor(db, cv) {
+		this.db = db;
+		this.cv = cv;
+		this.grid = document.getElementById('inspect-grid');
+		this.sidebarList = document.getElementById('inspect-layers');
+		this.activeNetEl = document.getElementById('inspect-active-net');
+		
+		this.viewers = {};
+		this.visibleIds = new Set();
+		this.activeNet = null; 
+		this.masterId = null; 
+		this.netNodeCache = {}; // Cache for calculated node positions
+	}
+
+	async init() {
+		this.sidebarList.innerHTML = '';
+		
+        // Hide the "+ New Net" button for now
+        // We find it by the onclick attribute since it doesn't have an ID in the HTML
+        const newNetBtn = document.querySelector('button[onclick="inspector.startNewNet()"]');
+        if(newNetBtn) newNetBtn.style.display = 'none';
+
+		const imgs = [...bomImages].sort((a,b) => {
+			const nA = a.name.toLowerCase(), nB = b.name.toLowerCase();
+			if(nA.includes('top')) return -1;
+			if(nB.includes('top')) return 1;
+			return nA.localeCompare(nB);
+		});
+
+		// Checkbox Layout
+		imgs.forEach(img => {
+			const row = document.createElement('div');
+			// Force Grid layout for strict alignment of checkbox vs label
+			row.style.cssText = "display:grid; grid-template-columns: 20px 1fr; align-items:center; gap:5px; color:#334155; font-size:0.85rem; border-bottom:1px solid #f1f5f9; padding-bottom:4px;";
+			
+			const chk = document.createElement('input');
+			chk.type = 'checkbox';
+			chk.checked = this.visibleIds.has(img.id);
+			chk.onchange = () => this.toggleLayer(img.id, chk.checked);
+			
+			const label = document.createElement('span');
+			label.innerText = img.name;
+			label.style.cssText = "white-space:nowrap; overflow:hidden; text-overflow:ellipsis;";
+			label.title = img.name;
+			
+			row.appendChild(chk);
+			row.appendChild(label);
+			this.sidebarList.appendChild(row);
+		});
+
+		// Smart Default Selection
+		if(this.visibleIds.size === 0) {
+			const isDesktop = window.matchMedia("(min-width: 800px)").matches;
+			if (isDesktop) {
+				imgs.forEach(img => this.visibleIds.add(img.id));
+			} else {
+				if (imgs.length > 0) this.visibleIds.add(imgs[0].id);
+				if (imgs.length > 1) this.visibleIds.add(imgs[1].id);
+			}
+			// Sync UI
+			Array.from(this.sidebarList.querySelectorAll('input')).forEach((chk, i) => {
+				chk.checked = this.visibleIds.has(imgs[i].id);
+			});
+		}
+
+		this.updateNetUI();
+		this.renderGrid();
+	}
+
+	async renderGrid() {
+		this.grid.innerHTML = '';
+		this.viewers = {};
+
+		if(this.visibleIds.size === 0) {
+			this.grid.innerHTML = '<div style="display:flex; align-items:center; justify-content:center; color:#64748b; height:100%;">Select layers to inspect</div>';
+			return;
+		}
+
+		// [FIX] Force Grid Layout Styles via JS to ensure they apply
+		this.grid.style.display = 'grid';
+		this.grid.style.width = '100%';
+		this.grid.style.height = '100%';
+		this.grid.style.boxSizing = 'border-box';
+		this.grid.style.gap = '2px';
+		this.grid.style.background = '#000';
+
+		const count = this.visibleIds.size;
+		this.grid.style.gridTemplateColumns = (count > 1) ? '1fr 1fr' : '1fr';
+		this.grid.style.gridTemplateRows = (count > 2) ? '1fr 1fr' : '1fr';
+
+		if(!this.masterId || !this.visibleIds.has(this.masterId)) {
+			this.masterId = this.visibleIds.values().next().value;
+		}
+
+		for(const id of this.visibleIds) {
+			const imgRec = bomImages.find(i => i.id === id);
+			if(!imgRec) continue;
+
+			const cell = document.createElement('div');
+			cell.style.cssText = "position:relative; overflow:hidden; border:1px solid #334155; background:#000; width:100%; height:100%;";
+			
+			const cvs = document.createElement('canvas');
+			cvs.id = `inspect-cvs-${id}`;
+			cvs.style.display = 'block';
+			cell.appendChild(cvs);
+
+			const lbl = document.createElement('div');
+			lbl.innerText = imgRec.name;
+			lbl.style.cssText = "position:absolute; top:5px; left:5px; background:rgba(0,0,0,0.7); padding:2px 6px; font-size:0.7rem; pointer-events:none; border-radius:3px; color:white;";
+			cell.appendChild(lbl);
+
+			this.grid.appendChild(cell);
+
+			const viewer = new PanZoomCanvas(cvs.id,
+				(ctx, k) => this.drawOverlay(id, ctx, k),
+				(x, y) => this.handleNodeClick(id, x, y),
+				(dx, dy, mode) => {
+					// Hit Test: Return -1 to allow Panning
+					if(mode === 'check') return -1; 
+				}
+			);
+			
+			viewer.onMouseMove = (x, y) => {
+				if(this.masterId === id) this.syncCursors(id, x, y);
+			};
+
+            // Activation & Click Handling
+            let downX = 0, downY = 0;
+            let wasActiveBeforeDown = false; // Track state before click
+
+            cvs.addEventListener('mousedown', (e) => {
+                if (e.button === 0) { // Left Click
+                    downX = e.clientX;
+                    downY = e.clientY;
+                    
+                    // Check if we are clicking an already active window
+                    wasActiveBeforeDown = (this.masterId === id);
+
+                    // Activate immediately to allow dragging/tracking
+                    if(this.masterId !== id) {
+                        this.masterId = id;
+                    }
+                    
+                    const pt = viewer.getImgCoords(e.clientX, e.clientY);
+                    this.syncCursors(id, pt.x, pt.y);
+                }
+            });
+
+            // Right Click: Inactivate (Stop Tracking)
+            cvs.oncontextmenu = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                this.masterId = null;
+                this.cursorState = null;
+                
+                // Clear cursors on all views
+                Object.values(this.viewers).forEach(v => {
+                    v.cursorPos = null;
+                    v.setDimmed(false);
+                    v.draw();
+                });
+            };
+
+            cvs.addEventListener('mouseup', (e) => {
+                if (e.button !== 0) return; // Left click only
+
+                const dist = Math.hypot(e.clientX - downX, e.clientY - downY);
+                if (dist < 10) { // Click vs Drag
+                    // Only Add/Edit node if the window was ALREADY active.
+                    // If it wasn't, we just activated it in mousedown, so do nothing else.
+                    if (wasActiveBeforeDown) {
+                        const pt = viewer.getImgCoords(e.clientX, e.clientY);
+                        
+                        // 1. Try to edit an existing node
+                        const hit = this.handleNodeClick(id, pt.x, pt.y);
+                        
+                        // 2. If no node hit, try to add a new one
+                        if (!hit) {
+                            this.handleAddNode(id, pt.x, pt.y);
+                        }
+                    }
+                }
+            });
+
+			this.viewers[id] = viewer;
+
+			try {
+				const bmp = await createImageBitmap(imgRec.blob);
+				viewer.setImage(bmp);
+				// Force sync canvas resolution to container size before fitting
+				if (cell.clientWidth && cell.clientHeight) {
+					viewer.canvas.width = cell.clientWidth;
+					viewer.canvas.height = cell.clientHeight;
+				}
+				viewer.fit(); 
+
+				if(imgRec.name.toLowerCase().includes('bot') && !imgRec.name.toLowerCase().includes('top')) {
+					viewer.setMirror(true);
+				}
+			} catch(e) { console.error("Inspector img load error", e); }
+		}
+		this.updateNetNodeCache();
+	}
+
+    handleNodeClick(imgId, x, y) {
+        if (!this.activeNet || !this.netNodeCache[imgId]) return false;
+        const viewer = this.viewers[imgId];
+        if (!viewer) return false;
+
+        // Hit test in Screen Space
+        const HIT_RADIUS = 20;
+
+        const hit = this.netNodeCache[imgId].find(n => {
+            const dist = Math.hypot(n.x - x, n.y - y);
+            return (dist * viewer.t.k) < HIT_RADIUS;
+        });
+
+        if (hit) {
+            const oldLabel = hit.label;
+            const newLabel = prompt(`Edit Node "${oldLabel}"\n\nEnter new name to Rename.\nClear text and click OK to Delete.`, oldLabel);
+
+            if (newLabel !== null) {
+                const nodeIndex = this.activeNet.nodes.indexOf(hit.origNode);
+                if (nodeIndex === -1) return true;
+
+                if (newLabel.trim() === "") {
+                    this.activeNet.nodes.splice(nodeIndex, 1); // Delete
+                } else {
+                    this.activeNet.nodes[nodeIndex].label = newLabel.trim(); // Rename
+                }
+                this.updateNetUI();
+            }
+            return true; // Handled
+        }
+        return false; // Not handled
+    }
+
+	toggleLayer(id, isVisible) {
+		if(isVisible) this.visibleIds.add(id);
+		else this.visibleIds.delete(id);
+		this.renderGrid();
+	}
+
+    // Load an existing net for editing
+    loadNet(net) {
+        // Deep copy to ensure "Cancel" works (discarding changes)
+        this.activeNet = JSON.parse(JSON.stringify(net));
+        this.updateNetUI();
+        
+        // Ensure pins are visible immediately
+        // We might need to ensure grid is rendered if not already
+        if(Object.keys(this.viewers).length === 0) {
+            this.renderGrid().then(() => {
+                Object.values(this.viewers).forEach(v => v.draw());
+            });
+        } else {
+            Object.values(this.viewers).forEach(v => v.draw());
+        }
+    }
+
+	async updateNetNodeCache() {
+		this.netNodeCache = {};
+		if (!this.activeNet || !this.activeNet.nodes) return;
+
+		// Initialize cache arrays for visible viewers
+		for (const vid of this.visibleIds) this.netNodeCache[vid] = [];
+
+		// Process each node in the net
+		for (const node of this.activeNet.nodes) {
+			// 1. Add directly to the source image (Blue)
+			if (this.visibleIds.has(node.imgId)) {
+				this.netNodeCache[node.imgId].push({
+					x: node.x, y: node.y, label: node.label, 
+					color: '#2563eb', isSource: true, origNode: node 
+				});
+			}
+
+			// 2. Project to other visible images (Green)
+			// We need paths from the node's image to all other visible images
+			const paths = await ImageGraph.solvePaths(node.imgId, this.cv, this.db);
+			
+			for (const p of paths) {
+				if (this.visibleIds.has(p.id)) {
+					const proj = this.cv.projectPoint(node.x, node.y, p.H);
+					if (proj) {
+						this.netNodeCache[p.id].push({
+							x: proj.x, y: proj.y, label: node.label, 
+							color: '#4ade80', isSource: false, origNode: node
+						});
+					}
+				}
+			}
+		}
+		// Redraw all to show changes
+		Object.values(this.viewers).forEach(v => v.draw());
+	}
+
+	async syncCursors(masterId, mx, my) {
+		this.cursorState = { masterId, mx, my };
+		
+		for(const [id, viewer] of Object.entries(this.viewers)) {
+			if(id === masterId) {
+				viewer.setDimmed(false);
+				viewer.draw();
+				continue;
+			}
+
+			const path = await ImageGraph.solvePaths(masterId, this.cv, this.db);
+			const targetPath = path.find(p => p.id === id);
+
+			if(targetPath) {
+				const pt = this.cv.projectPoint(mx, my, targetPath.H);
+				if(pt) {
+					viewer.cursorPos = pt;
+					
+					const w = viewer.bmp ? viewer.bmp.width : 1000;
+					const h = viewer.bmp ? viewer.bmp.height : 1000;
+					const inside = (pt.x >= 0 && pt.y >= 0 && pt.x <= w && pt.y <= h);
+					
+					viewer.setDimmed(!inside);
+
+					if (inside && viewer.bmp) {
+						const k = viewer.t.k;
+						const tx = viewer.t.x;
+						const ty = viewer.t.y;
+						
+						const imgX = viewer.isMirrored ? (w - pt.x) : pt.x;
+						const screenX = imgX * k + tx;
+						const screenY = pt.y * k + ty;
+
+						const cvsW = viewer.canvas.width;
+						const cvsH = viewer.canvas.height;
+						const padX = cvsW * 0.25;
+						const padY = cvsH * 0.25;
+
+						let dx = 0; let dy = 0;
+
+						if (screenX > cvsW - padX) dx = (cvsW - padX) - screenX;
+						else if (screenX < padX) dx = padX - screenX;
+
+						if (screenY > cvsH - padY) dy = (cvsH - padY) - screenY;
+						else if (screenY < padY) dy = padY - screenY;
+
+						if (dx !== 0 || dy !== 0) {
+							viewer.t.x += dx;
+							viewer.t.y += dy;
+						}
+					}
+				} else {
+					viewer.cursorPos = null;
+					viewer.setDimmed(true);
+				}
+			} else {
+				viewer.cursorPos = null;
+				viewer.setDimmed(true);
+			}
+			viewer.draw();
+		}
+	}
+
+    drawOverlay(id, ctx, k) {
+        const viewer = this.viewers[id];
+        if (!viewer) return; 
+
+        const ik = 1/k; // Inverse zoom factor
+        
+        // 1. Draw Cached Nodes as Pins
+        if (this.netNodeCache[id]) {
+            this.netNodeCache[id].forEach(n => {
+                let drawX = n.x;
+                if (viewer.isMirrored && viewer.bmp) drawX = viewer.bmp.width - n.x;
+
+                ctx.save();
+                ctx.translate(drawX, n.y);
+                ctx.scale(ik, ik); // Keep pin constant size on screen
+
+                // ROTATION: -45 degrees (Counter-Clockwise)
+                // This aligns the "Bottom-Left" corner of our square to point straight down if the square is in the Top-Right quadrant.
+                ctx.rotate(-Math.PI / 4);
+
+                // DRAW PIN SHAPE
+                // We draw a square relative to the origin (0,0).
+                // The Origin (0,0) is the Sharp Tip.
+                // The square extends into x>0, y<0 (Visual Top-Right relative to rotation axis)
+                // so that when rotated -45deg, it stands "Up" above the point.
+                
+                const s = 20; // Size of the square side
+                const r = 10; // Radius (50% of size)
+
+                ctx.beginPath();
+                ctx.moveTo(0, 0); // Tip starts exactly on the node coordinate
+
+                // Left Edge (going 'Up' in local coords) -> Top-Left Corner
+                ctx.lineTo(0, -s + r);
+                ctx.arcTo(0, -s, s, -s, r);
+
+                // Top Edge -> Top-Right Corner
+                ctx.lineTo(s - r, -s);
+                ctx.arcTo(s, -s, s, 0, r);
+
+                // Right Edge -> Bottom-Right Corner
+                ctx.lineTo(s, -r);
+                ctx.arcTo(s, 0, 0, 0, r);
+
+                // Return to Tip
+                ctx.lineTo(0, 0);
+                ctx.closePath();
+                
+                ctx.fillStyle = n.color; // Blue (#2563eb) or Green (#4ade80)
+                ctx.fill();
+                
+                // White Border
+                ctx.lineWidth = 1.5;
+                ctx.strokeStyle = 'white';
+                ctx.stroke();
+
+                // LABEL
+                // We want the text in the center of the "bulb".
+                // The center of our square is at (s/2, -s/2).
+                ctx.translate(s/2, -s/2); 
+                
+                // Rotate text back +45deg so it appears horizontal
+                ctx.rotate(Math.PI / 4); 
+
+                ctx.fillStyle = 'white';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.font = 'bold 9px sans-serif';
+                ctx.fillText(n.label, 0, 0); 
+                
+                ctx.restore();
+            });
+        }
+
+		// 2. Cursor Crosshair (Unchanged)
+		let cx, cy, color = '#ff0000';
+		
+		if(this.cursorState && this.cursorState.masterId === id) {
+			cx = this.cursorState.mx; cy = this.cursorState.my;
+			if(viewer.isMirrored && viewer.bmp) cx = viewer.bmp.width - cx;
+		} else if (viewer.cursorPos) {
+			cx = viewer.cursorPos.x; cy = viewer.cursorPos.y;
+			if(viewer.isMirrored && viewer.bmp) cx = viewer.bmp.width - cx;
+			color = '#facc15'; 
+		}
+
+		if(cx !== undefined) {
+			const len = 100000;
+			ctx.lineWidth = 1 * ik;
+			ctx.strokeStyle = color;
+			ctx.beginPath();
+			ctx.moveTo(cx - len, cy); ctx.lineTo(cx + len, cy);
+			ctx.moveTo(cx, cy - len); ctx.lineTo(cx, cy + len);
+			ctx.stroke();
+		}
+	}
+
+	startNewNet() {
+		this.activeNet = { id: uuid(), name: "New Net", nodes: [], isNew: true };
+		this.updateNetUI();
+	}
+
+	handleAddNode(imgId, x, y) {
+		// Determine default label (start at P1 if no net exists)
+		const nextIdx = this.activeNet ? this.activeNet.nodes.length + 1 : 1;
+		const defaultLabel = `P${nextIdx}`;
+
+		const label = prompt("Pad/Pin Name:", defaultLabel);
+		
+		if(label) {
+			if(!this.activeNet) {
+				this.startNewNet();
+			}
+
+			this.activeNet.nodes.push({
+				id: uuid(),
+				imgId: imgId,
+				x: Math.round(x),
+				y: Math.round(y),
+				label: label
+			});
+			this.updateNetUI();
+			Object.values(this.viewers).forEach(v => v.draw());
+		}
+	}
+
+    async saveNet() {
+        if(!this.activeNet) return;
+        
+        // Only prompt for name if it's a new net
+        if (this.activeNet.isNew) {
+            const name = prompt("Net Name:", this.activeNet.name);
+            if(name) {
+                this.activeNet.name = name;
+                delete this.activeNet.isNew; // Remove flag before saving
+            } else {
+                return; // Cancelled by user in prompt
+            }
+        }
+
+        this.activeNet.projectId = currentBomId;
+        await this.db.addNet(this.activeNet);
+        
+        this.activeNet = null;
+        this.updateNetUI();
+        
+        if(window.netManager) window.netManager.render();
+
+        // Return to Nets list
+        history.back();
+    }
+
+    cancelNet() {
+        this.activeNet = null;
+        this.updateNetUI();
+        history.back();
+    }
+
+    updateNetUI() {
+        if(!this.activeNet) {
+            this.activeNetEl.style.display = 'none';
+        } else {
+            this.activeNetEl.style.cssText = "pointer-events:auto; background:rgba(15, 23, 42, 0.9); padding:4px 10px; border-radius:20px; border:1px solid #334155; display:flex; color:white; align-items:center; gap:8px; box-shadow:0 4px 6px rgba(0,0,0,0.2); backdrop-filter:blur(4px); font-size:0.85rem; height:auto;";
+            
+            this.activeNetEl.innerHTML = `
+                <span style="font-weight:600; color:#4ade80; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${this.activeNet.name}</span>
+                <span style="color:#94a3b8; border-left:1px solid #475569; padding-left:8px; font-size:0.8rem;">${this.activeNet.nodes.length}</span>
+                <button class="primary sm-btn" style="padding:1px 8px; font-size:0.75rem; height:24px; min-height:0; line-height:1;" onclick="inspector.saveNet()">Save</button>
+                <button class="danger sm-btn" style="padding:0; width:20px; height:20px; min-height:0; border-radius:50%; line-height:1; display:flex; align-items:center; justify-content:center;" onclick="inspector.cancelNet()">×</button>
+            `;
+        }
+        this.updateNetNodeCache();
+    }
+
+}
diff --git a/docs/nets.js b/docs/nets.js
new file mode 100644
index 0000000..57dadfa
--- /dev/null
+++ b/docs/nets.js
@@ -0,0 +1,192 @@
+/* nets.js - Netlist Management (v2) */
+
+class NetManager {
+	constructor(db) {
+		this.db = db;
+	}
+
+    async render() {
+        const tbody = document.getElementById('nets-body');
+        if(!tbody) return;
+
+        tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; color:#888;">Loading...</td></tr>';
+        
+        const nets = await this.db.getNets();
+        tbody.innerHTML = '';
+        
+        if(nets.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="3" style="text-align:center; padding:2rem; color:#94a3b8;">No nets defined. Go to "Inspect" to create one.</td></tr>';
+            return;
+        }
+
+        nets.forEach(net => {
+            const tr = document.createElement('tr');
+            
+            tr.style.height = 'auto';
+            tr.style.minHeight = '2.2rem';
+
+            // Target Icon for Editing
+            const targetIcon = `<span style="cursor:pointer; margin-right:0.5rem;" onclick="netManager.editNet('${net.id}')" title="Edit Net on Board">🎯</span>`;
+
+            let nodesHtml = '';
+            net.nodes.forEach((n, idx) => {
+                nodesHtml += `<span class="net-chip" onclick="netManager.editNode('${net.id}', ${idx})" title="Edit Node">${n.label}</span>`;
+            });
+            
+            tr.innerHTML = `
+                <td style="display:flex; align-items:center; vertical-align:top; height:auto;">
+                    ${targetIcon}
+                    <input type="text" value="${net.name}" onchange="netManager.rename('${net.id}', this.value)" style="border:none; background:transparent; font-weight:bold; flex:1; min-width:0;">
+                </td>
+                
+                <!-- [FIX] Allow cell to expand freely -->
+                <td style="white-space:normal; height:auto; overflow:visible;">
+                    <div style="display:flex; flex-wrap:wrap; gap:4px; padding:2px 0;">${nodesHtml}</div>
+                </td>
+                
+                <td style="text-align:right; vertical-align:top; height:auto;">
+                    <button class="danger sm-btn" onclick="netManager.delete('${net.id}')" title="Delete Net">🗑️</button>
+                </td>
+            `;
+            tbody.appendChild(tr);
+        });
+    }
+
+    // Edit Net in Inspector
+    async editNet(id) {
+        const net = await this.db._tx('nets', 'readonly', s => s.get(id));
+        if(net) {
+            switchView('inspect');
+            // We use the global inspector instance
+            if(window.inspector) window.inspector.loadNet(net);
+        }
+    }
+
+	// Edit individual node
+	async editNode(netId, nodeIdx) {
+		const net = await this.db._tx('nets', 'readonly', s => s.get(netId));
+		if(!net || !net.nodes[nodeIdx]) return;
+
+		const node = net.nodes[nodeIdx];
+		// Simple action menu via Prompt/Confirm
+		// 1. Ask for new name (Empty = Delete)
+		const newName = prompt(`Edit node "${node.label}"\n\nEnter new name to Rename.\nClear text and press OK to Delete.`, node.label);
+		
+		if(newName === null) return; // Cancelled
+
+		if(newName.trim() === '') {
+			if(confirm("Delete this node?")) {
+				net.nodes.splice(nodeIdx, 1);
+				await this.db.addNet(net);
+				this.render();
+			}
+		} else {
+			net.nodes[nodeIdx].label = newName.trim();
+			await this.db.addNet(net);
+			this.render();
+		}
+	}
+
+	async rename(id, newName) {
+		if(!newName.trim()) return;
+		const net = await this.db._tx('nets', 'readonly', s => s.get(id));
+		if(net) {
+			net.name = newName.trim();
+			await this.db.addNet(net);
+		}
+	}
+
+	async delete(id) {
+		if(await confirmAction("Delete this net?", "Delete")) {
+			await this.db.deleteNet(id);
+			this.render();
+		}
+	}
+
+	async exportKiCad() {
+		// 1. Determine Filename
+		let filename = "board_netlist";
+		if (typeof currentBomId !== 'undefined' && typeof bomList !== 'undefined') {
+			const meta = bomList.find(b => b.id === currentBomId);
+			if (meta && meta.name) {
+				filename = meta.name.replace(/[^a-z0-9_\-\.]/gi, '_');
+			}
+		}
+
+		const nets = await this.db.getNets();
+		const components = (typeof bomData !== 'undefined') ? bomData : [];
+
+		// --- CONFIGURATION: Component Type Mapping ---
+		// We only map types that are structurally unambiguous (2-pin passives, test points).
+		// Complex types (Q, U, J) are commented out to prevent incorrect symbol assignment.
+		const COMPONENT_LIBRARY_MAP = {
+			'R':  { lib: "Device", part: "R", desc: "Resistor" },
+			'C':  { lib: "Device", part: "C", desc: "Unpolarized capacitor" },
+			'L':  { lib: "Device", part: "L", desc: "Inductor" },
+			'D':  { lib: "Device", part: "D", desc: "Diode" },
+			'TP': { lib: "Connector", part: "TestPoint", desc: "Test Point" },
+			
+			// --- AMBIGUOUS TYPES (Disabled by default) ---
+			// 'Q':  { lib: "Device", part: "Q_NPN_BEC", desc: "Transistor NPN" }, // Risk: Could be PNP, MOSFET, IGBT
+			// 'J':  { lib: "Connector", part: "Conn_01x02_Male", desc: "Connector" }, // Risk: Pin count unknown
+			// 'CN': { lib: "Connector", part: "Conn_01x02_Male", desc: "Connector" }, // Risk: Pin count unknown
+		};
+
+		let out = "(export (version D)\n";
+
+		// 2. Export Components
+		out += "  (components\n";
+		components.forEach(c => {
+			const val = c.value ? c.value : "~";
+			const footprint = c.desc ? c.desc.replace(/"/g, '') : "";
+			const tstamp = c.id ? c.id.substring(0, 8) : Math.floor(Math.random()*10000000).toString(16);
+			
+			// Detect Type from Prefix
+			const prefix = (c.label.match(/^[A-Z]+/) || [""])[0].toUpperCase();
+			
+			// Lookup Library definition
+			// Future TODO: Add logic here to check c.desc for keywords like "NPN", "MOSFET", etc.
+			const def = COMPONENT_LIBRARY_MAP[prefix];
+
+			out += `    (comp (ref "${c.label}")\n`;
+			out += `      (value "${val}")\n`;
+			if(footprint) out += `      (footprint "${footprint}")\n`;
+			
+			// Inject Library Source if we have a safe definition
+			if(def) {
+				out += `      (libsource (lib "${def.lib}") (part "${def.part}") (description "${def.desc}"))\n`;
+				out += `      (property (name "Sheetname") (value "")) (property (name "Sheetfile") (value "${filename}.kicad_sch"))\n`;
+			}
+			
+			out += `      (tstamp "${tstamp}")\n`;
+			out += `    )\n`;
+		});
+		out += "  )\n";
+
+		// 3. Export Nets
+		out += "  (nets\n";
+		nets.forEach((net, i) => {
+			out += `    (net (code ${i+1}) (name "${net.name}")\n`;
+			net.nodes.forEach(node => {
+				const parts = node.label.split('.');
+				if(parts.length === 2) {
+					// Format: R1.2 (Ref R1, Pin 2)
+					out += `      (node (ref "${parts[0]}") (pin "${parts[1]}"))\n`;
+				} else {
+					// Fallback: TestPoints or direct names often use Pin 1
+					out += `      (node (ref "${node.label}") (pin "1"))\n`;
+				}
+			});
+			out += "    )\n";
+		});
+		out += "  )\n)\n";
+
+		// 4. Download
+		const blob = new Blob([out], { type: 'text/plain' });
+		const a = document.createElement('a');
+		a.href = URL.createObjectURL(blob);
+		a.download = `${filename}.net`;
+		document.body.appendChild(a); a.click(); document.body.removeChild(a);
+	}
+
+}
diff --git a/docs/resistor.html b/docs/resistor.html
new file mode 100644
index 0000000..9b6c8db
--- /dev/null
+++ b/docs/resistor.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("consent","default",{ad_storage:"granted",ad_user_data:"granted",ad_personalization:"granted",analytics_storage:"granted"});gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",region:"AT,BE,BG,HR,CY,CZ,DK,EE,FI,FR,DE,GR,HU,IE,IT,LV,LT,LU,MT,NL,PL,PT,RO,SK,SI,ES,SE,IS,LI,NO,GB,CH,UA".split(",")});</script>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1MKL6C4B0"></script>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-X1MKL6C4B0");</script>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Resistor Color Decoder</title>
+	<script src="tool-bridge.js"></script>
+	<script src="spyglass.js"></script>
+	<link rel="stylesheet" href="tool-style.css">
+	<style>
+		:root { --accent: #2563eb; --resistor-body: #82cae0; --resistor-shadow: #5ea8bd; }
+		.controls-grid { grid-template-columns: 1fr 1fr; }
+	</style>
+</head>
+<body>
+
+<div class="container">
+	<h1 id="app-title">Resistor Color Decoder</h1>
+
+	<div class="top-section">
+		<div id="spyglass-col" class="col-spyglass">
+			<div class="spyglass-wrapper">
+				<canvas id="tool-canvas" class="spyglass-canvas" width="600" height="600"></canvas>
+				<div id="tool-zoom" class="zoom-badge">2x</div>
+			</div>
+			<div id="view-selector"></div>
+		</div>
+
+		<div class="col-controls">
+			<div class="reverse-input-group">
+				<div class="input-row">
+					<input type="text" id="nominal-input" class="inp-nominal" placeholder="e.g. 4k7, 100">
+					<button class="btn-action" onclick="applyNominal()">Set</button>
+				</div>
+			</div>
+			<div class="controls-grid">
+				<button class="btn-mode" onclick="setBands(3)">3 Band</button>
+				<button class="btn-mode" onclick="setBands(4)">4 Band</button>
+				<button class="btn-mode" onclick="setBands(5)">5 Band</button>
+				<button class="btn-mode active" onclick="setBands(6)">6 Band</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="resistor-wrapper-outer">
+		<div class="resistor-dumbbell-shape">
+			<div class="bands-container" id="picker-area"></div>
+		</div>
+	</div>
+
+	<div id="results" class="result-box"></div>
+    <div class="app-footer">Copyright © 2025 Taras Greben — <a href="https://pcb.etaras.com">pcb.eTaras.com</a></div>
+</div>
+
+<div id="global-dropdown"></div>
+
+<script>
+	const colors = [
+		{ name: 'Black',  val: 0, mult: 1, tol: null, tcr: 250, css: 'c-bk' },
+		{ name: 'Brown',  val: 1, mult: 10, tol: 1, tcr: 100, css: 'c-bn' },
+		{ name: 'Red',	  val: 2, mult: 100, tol: 2, tcr: 50, css: 'c-rd' },
+		{ name: 'Orange', val: 3, mult: 1000, tol: null, tcr: 15, css: 'c-og' },
+		{ name: 'Yellow', val: 4, mult: 10000, tol: null, tcr: 25, css: 'c-ye' },
+		{ name: 'Green',  val: 5, mult: 100000, tol: 0.5, tcr: 20, css: 'c-gn' },
+		{ name: 'Blue',	  val: 6, mult: 1000000, tol: 0.25, tcr: 10, css: 'c-bu' },
+		{ name: 'Violet', val: 7, mult: 10000000, tol: 0.1, tcr: 5, css: 'c-vt' },
+		{ name: 'Gray',	  val: 8, mult: null, tol: 0.05, tcr: 1, css: 'c-gy' },
+		{ name: 'White',  val: 9, mult: null, tol: null, tcr: null, css: 'c-wh' },
+		{ name: 'Gold',	  val: null, mult: 0.1, tol: 5, tcr: null, css: 'c-gd' },
+		{ name: 'Silver', val: null, mult: 0.01, tol: 10, tcr: null, css: 'c-sv' }
+	];
+	const e12=[1.0,1.2,1.5,1.8,2.2,2.7,3.3,3.9,4.7,5.6,6.8,8.2];
+	const e24=[1.0,1.1,1.2,1.3,1.5,1.6,1.8,2.0,2.2,2.4,2.7,3.0,3.3,3.6,3.9,4.3,4.7,5.1,5.6,6.2,6.8,7.5,8.2,9.1];
+
+	let currentBands=4; let bandState=[1,2,2,10,1,2]; let activeBandIndex=-1; let isEmbed=false; let bridge=null;
+	const globalDropdown = document.getElementById('global-dropdown');
+
+	function init() {
+		initGlobalDropdown();
+		const urlParams = new URLSearchParams(window.location.search);
+		if (urlParams.has('embed') || window.self !== window.top) {
+			isEmbed = true;
+			document.getElementById('app-title').style.display = 'none';
+		}
+		setBands(4);
+	}
+
+	function initGlobalDropdown(){
+		globalDropdown.innerHTML='';
+		colors.forEach((c,i)=>{
+			const o=document.createElement('div');
+			o.className=`custom-option ${c.css}`;
+			o.innerText=c.name;
+			o.onclick=e=>{e.stopPropagation(); if(activeBandIndex>-1){bandState[activeBandIndex]=i;renderPickers();calculate();closeDropdown();}};
+			globalDropdown.appendChild(o);
+		});
+	}
+
+	function openGlobalDropdown(triggerElement) {
+		globalDropdown.style.display = 'flex'; globalDropdown.style.top = '0px'; globalDropdown.style.left = '0px';
+		globalDropdown.classList.remove('condensed', 'super-condensed');
+		globalDropdown.style.height = 'auto'; globalDropdown.style.overflowY = 'hidden';
+
+		const triggerRect = triggerElement.getBoundingClientRect();
+		const menuRect = globalDropdown.getBoundingClientRect();
+		const viewportHeight = window.innerHeight;
+
+		let top = triggerRect.bottom + 5;
+		let left = triggerRect.left + (triggerRect.width / 2);
+		let projectedBottom = top + menuRect.height;
+
+		if (projectedBottom > viewportHeight - 10) {
+			globalDropdown.classList.add('condensed');
+			projectedBottom = top + globalDropdown.getBoundingClientRect().height;
+		}
+		if (projectedBottom > viewportHeight - 10) {
+			globalDropdown.classList.add('super-condensed');
+			projectedBottom = top + globalDropdown.getBoundingClientRect().height;
+		}
+		if (projectedBottom > viewportHeight - 10) {
+			const height = globalDropdown.getBoundingClientRect().height;
+			top = viewportHeight - height - 10;
+			if (top < 10) {
+				top = 10;
+				globalDropdown.style.height = (viewportHeight - 20) + 'px';
+				globalDropdown.style.overflowY = 'auto';
+			}
+		}
+		globalDropdown.style.top = top + 'px';
+		globalDropdown.style.left = left + 'px';
+		globalDropdown.style.transform = 'translateX(-50%)';
+	}
+
+	function closeDropdown(){ globalDropdown.style.display='none'; activeBandIndex=-1; }
+	window.addEventListener('click', closeDropdown);
+	window.addEventListener('resize', closeDropdown);
+	window.addEventListener('scroll', closeDropdown, true);
+
+	function setBands(n){ currentBands=n; document.querySelectorAll('.btn-mode').forEach((b,i)=>b.classList.toggle('active',(i+3)===n)); while(bandState.length<n)bandState.push(0); renderPickers(); calculate(); }
+
+	function renderPickers(){
+		const a=document.getElementById('picker-area'); a.innerHTML='';
+		for(let i=0;i<currentBands;i++){
+			const w=document.createElement('div'); w.className='custom-select-wrapper';
+			const t=document.createElement('div'); t.className=`custom-select__trigger ${colors[bandState[i]].css}`;
+			t.innerHTML=`<span>${colors[bandState[i]].name}</span>`;
+			t.onclick=e=>{e.stopPropagation(); if(activeBandIndex===i&&globalDropdown.style.display==='flex')closeDropdown();else{activeBandIndex=i;openGlobalDropdown(t);}};
+			w.appendChild(t); a.appendChild(w);
+		}
+	}
+
+	function parseInputStr(str) { if(!str)return null; let m=1; if(str.includes('M')){m=1e6;str=str.replace('M','.');}else if(str.includes('m')){m=1e-3;str=str.replace('m','.');}else if(str.toLowerCase().includes('k')){m=1e3;str=str.replace(/k/i,'.');}else if(str.toLowerCase().includes('r')){m=1;str=str.replace(/r/i,'.');} const v=parseFloat(str); return isNaN(v)?null:v*m; }
+	function applyNominal(){ const raw=document.getElementById('nominal-input').value; const ohms=parseInputStr(raw); if(ohms===null)return; const nD=(currentBands>=5)?3:2; let val=ohms; const mag=Math.floor(Math.log10(val)); const shift=(nD-1)-mag; let norm=Math.round(val*Math.pow(10,shift)); let s=norm.toString(); if(s.length>nD){norm=Math.round(norm/10);s=norm.toString();} const d=[]; for(let i=0;i<nD;i++)d.push(parseInt(s[i])); const exp=Math.round(Math.log10(ohms/norm)); let mIdx=-1; if(exp>=0&&exp<=9)mIdx=exp;else if(exp===-1)mIdx=10;else if(exp===-2)mIdx=11; if(mIdx!==-1){ bandState[0]=d[0];bandState[1]=d[1]; if(nD===2){bandState[2]=mIdx;if(currentBands===4)bandState[3]=10;}else{bandState[2]=d[2];bandState[3]=mIdx;bandState[4]=1;if(currentBands===6)bandState[5]=1;} renderPickers(); calculate(); } }
+
+	function formatOhmsUI(v){ if(v>=1e6)return(v/1e6).toFixed(2)+' MΩ'; if(v>=1e3)return(v/1e3).toFixed(2)+' kΩ'; if(v<1)return(v*1000).toFixed(0)+' mΩ'; return v.toFixed(2)+' Ω'; }
+	function formatOhmsBOM(v){ if(v>=1e6)return(v/1e6).toFixed(2)+'M'; if(v>=1e3)return(v/1e3).toFixed(2)+'k'; if(v<1)return(v*1000).toFixed(0)+'m'; return v.toFixed(2)+'R'; }
+	function checkSeries(v){ let n=v; while(n>=10)n/=10; while(n<1&&n>0)n*=10; n=Math.round(n*100)/100; if(e12.includes(n))return "E12"; if(e24.includes(n))return "E24"; return ""; }
+
+	function decode(idx){ if(colors[idx[0]].name==='Black'||colors[idx[0]].name==='Gold'||colors[idx[0]].name==='Silver')return{valid:false}; let v=0,m=0,t=0,tcr=0; if(currentBands===3){v=colors[idx[0]].val*10+colors[idx[1]].val;m=colors[idx[2]].mult;t=20;}else if(currentBands===4){v=colors[idx[0]].val*10+colors[idx[1]].val;m=colors[idx[2]].mult;t=colors[idx[3]].tol;}else{v=colors[idx[0]].val*100+colors[idx[1]].val*10+colors[idx[2]].val;m=colors[idx[3]].mult;t=colors[idx[4]].tol;if(currentBands===6)tcr=colors[idx[5]].tcr;} if(m===null||(currentBands>3&&t===null))return{valid:false}; const o=v*m; return{ohms:o,tol:t,tcr,valid:true,seriesInfo:checkSeries(o)}; }
+
+	function calculate(){
+		const f=decode(bandState.slice(0,currentBands)); const b=decode([...bandState.slice(0,currentBands)].reverse());
+		let fb=true; if(f.valid&&!b.valid)fb=true;else if(!f.valid&&b.valid)fb=false;else if(f.valid&&b.valid){fb=!(b.seriesInfo!==""&&f.seriesInfo==="");}
+
+		let h='';
+		const row=(d,isF,best)=>{
+			if(!d.valid&&!best)return'';
+			const cls=best?'result-row best-match':'result-row';
+
+			const arrowSvg = isF ? `<svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg>` : `<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>`;
+			const ic = isF ? "direction-icon" : "direction-icon reverse";
+
+			const btn = isEmbed ? `<button class="btn-select" onclick="selectResult('${formatOhmsBOM(d.ohms)}')">Select</button>` : '';
+			const badge = best ? `<span class="badge-success" style="margin-left:0.5rem; padding:0.1rem 0.5rem; font-size:0.7rem; vertical-align:middle;">Likely</span>` : '';
+
+			const ser=d.seriesInfo?` <span class="match-badge">${d.seriesInfo}</span>`:'';
+
+			return `<div class="${cls}">
+				<div class="${ic}">${arrowSvg}</div>
+				<div class="val-group">
+					<span class="val-text">${formatOhmsUI(d.ohms)}${ser}</span>
+					<span class="meta-text">±${d.tol}%${d.tcr?` | ${d.tcr}ppm`:''}${badge}</span>
+				</div>
+				${btn}
+			</div>`;
+		};
+
+		if(!f.valid&&!b.valid) h='<div style="text-align:center;color:red;padding:1rem">Invalid</div>';
+		else{
+			if(fb){h+=row(f,true,true);h+=row(b,false,false);}
+			else{h+=row(b,false,true);h+=row(f,true,false);}
+		}
+		document.getElementById('results').innerHTML=h;
+	}
+
+	function selectResult(vStr){
+		let d=`Resistor: ${currentBands}-Band, ±${colors[bandState[currentBands===3?null:(currentBands>=5?4:3)]]?.tol||20}%`;
+		if(bridge) bridge.sendResult(vStr, d);
+	}
+
+	function parseResistorMeta(d){
+		let r={bands:4,tolIdx:-1,tcrIdx:-1}; if(d.includes("3-Band"))r.bands=3;else if(d.includes("5-Band"))r.bands=5;else if(d.includes("6-Band"))r.bands=6;
+		const tm=d.match(/±\s*([\d.]+)%/); if(tm){const t=parseFloat(tm[1]);const c=colors.findIndex(x=>x.tol===t);if(c!==-1)r.tolIdx=c;}
+		const tc=d.match(/(\d+)\s*ppm/i); if(tc){const p=parseInt(tc[1]);const c=colors.findIndex(x=>x.tcr===p);if(c!==-1)r.tcrIdx=c;}
+		return r;
+	}
+
+	init();
+	bridge = new ToolBridge({
+		onData: (d) => {
+			if(d.value) document.getElementById('nominal-input').value = d.value;
+			let meta = {bands:4,tolIdx:-1,tcrIdx:-1};
+			if(d.description) meta = parseResistorMeta(d.description);
+			setBands(meta.bands);
+			applyNominal();
+			if(meta.tolIdx!==-1){ if(meta.bands===4)bandState[3]=meta.tolIdx; else if(meta.bands>=5)bandState[4]=meta.tolIdx; }
+			if(meta.tcrIdx!==-1 && meta.bands===6) bandState[5]=meta.tcrIdx;
+			renderPickers(); calculate();
+		}
+	});
+</script>
+</body>
+</html>
diff --git a/docs/spyglass.js b/docs/spyglass.js
new file mode 100644
index 0000000..5f6ff7b
--- /dev/null
+++ b/docs/spyglass.js
@@ -0,0 +1,229 @@
+/**
+ * spyglass.js
+ * Handles zooming, panning, and coordinate adjustment for PCB previews.
+ * v2.1 - Added Pointer Events for Mobile Support (Pinch & Touch-Drag)
+ */
+class PcbSpyglass {
+	/**
+	 * @param {string} canvasId
+	 * @param {string} overlayId
+	 * @param {function} onUpdateCallback - Optional. Called with (x, y) when user drags.
+	 */
+	constructor(canvasId, overlayId, onUpdateCallback = null) {
+		this.canvas = document.getElementById(canvasId);
+		this.overlay = document.getElementById(overlayId);
+		this.container = this.canvas ? this.canvas.parentElement : null;
+		this.onUpdate = onUpdateCallback;
+
+		if (!this.canvas) {
+			console.error("Spyglass: Canvas element not found");
+			return;
+		}
+
+		this.ctx = this.canvas.getContext('2d');
+		this.zoom = 2;
+		this.img = null;
+		this.x = 0;
+		this.y = 0;
+		this.enabled = false;
+
+		// Pointer State
+		this.isDragging = false;
+		this.lastMouseX = 0;
+		this.lastMouseY = 0;
+		this.evCache = []; // Cache for multi-touch
+		this.prevDiff = -1; // For pinch zoom
+
+		// Bind Events
+		this.canvas.addEventListener('wheel', this.handleWheel.bind(this), { passive: false });
+
+		// Unified Pointer Events (Mouse + Touch)
+		this.canvas.addEventListener('pointerdown', this.handlePointerDown.bind(this));
+		this.canvas.addEventListener('pointermove', this.handlePointerMove.bind(this));
+		this.canvas.addEventListener('pointerup', this.handlePointerUp.bind(this));
+		this.canvas.addEventListener('pointercancel', this.handlePointerUp.bind(this));
+		this.canvas.addEventListener('pointerout', this.handlePointerUp.bind(this));
+		this.canvas.addEventListener('pointerleave', this.handlePointerUp.bind(this));
+	}
+
+	/**
+	 * Sets the image and coordinates.
+	 * @param {ImageBitmap|HTMLImageElement} imgSource
+	 * @param {number} x
+	 * @param {number} y
+	 * @param {boolean} autoCloseOld - If true, .close() is called on the old bitmap (Use false for galleries)
+	 */
+	setTarget(imgSource, x, y, autoCloseOld = true) {
+		if (!imgSource) return;
+
+		// MEMORY CLEANUP: Only if requested
+		if (autoCloseOld && this.img && this.img !== imgSource && typeof this.img.close === 'function') {
+			try { this.img.close(); } catch(e) {}
+		}
+
+		this.img = imgSource;
+		this.x = x;
+		this.y = y;
+		this.enabled = true;
+
+		if (this.container) {
+			this.container.classList.remove('empty');
+			this.container.classList.add('active');
+		}
+
+		this.render();
+		this.updateOverlay();
+	}
+
+	clear() {
+		this.enabled = false;
+		this.img = null;
+
+		if (this.container) {
+			this.container.classList.remove('active');
+			this.container.classList.add('empty');
+		}
+
+		this.ctx.fillStyle = '#ffffff';
+		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+		if (this.overlay) this.overlay.style.display = 'none';
+	}
+
+	handleWheel(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const d = e.deltaY > 0 ? -0.5 : 0.5;
+		this.zoom = Math.max(0.5, Math.min(10, this.zoom + d));
+		this.render();
+		this.updateOverlay();
+	}
+
+	// --- POINTER HANDLING (Desktop + Mobile) ---
+
+	handlePointerDown(e) {
+		if (!this.enabled) return;
+		this.canvas.setPointerCapture(e.pointerId);
+		this.evCache.push(e);
+
+		if (this.evCache.length === 1) {
+			this.isDragging = true;
+			this.lastMouseX = e.clientX;
+			this.lastMouseY = e.clientY;
+			this.canvas.style.cursor = 'grabbing';
+		}
+	}
+
+handlePointerMove(e) {
+		if (!this.enabled) return;
+
+		// Update cache
+		const index = this.evCache.findIndex(cached => cached.pointerId === e.pointerId);
+		if (index > -1) this.evCache[index] = e;
+
+		// 1. PINCH ZOOM (2 Fingers)
+		if (this.evCache.length === 2) {
+			e.preventDefault();
+			const dx = this.evCache[0].clientX - this.evCache[1].clientX;
+			const dy = this.evCache[0].clientY - this.evCache[1].clientY;
+			const curDiff = Math.hypot(dx, dy);
+
+			if (this.prevDiff > 0) {
+				const diff = curDiff - this.prevDiff;
+				// PATCH 1: Increased Zoom Speed (0.01 -> 0.1)
+				this.zoom = Math.max(0.5, Math.min(10, this.zoom + (diff * 0.1)));
+				this.render();
+				this.updateOverlay();
+			}
+			this.prevDiff = curDiff;
+			return;
+		}
+
+		// 2. PANNING (1 Finger / Mouse)
+		if (this.isDragging && this.evCache.length === 1) {
+			e.preventDefault();
+			const dx = e.clientX - this.lastMouseX;
+			const dy = e.clientY - this.lastMouseY;
+
+			this.lastMouseX = e.clientX;
+			this.lastMouseY = e.clientY;
+
+			// PATCH 2: Speed Multiplier for Touch
+			// Mouse stays 1:1 for precision, Touch gets 5x speed to traverse faster
+			const speed = (e.pointerType === 'touch') ? 5 : 1.0;
+
+			this.x -= (dx * speed) / this.zoom;
+			this.y -= (dy * speed) / this.zoom;
+
+			this.render();
+
+			if (this.onUpdate) {
+				this.onUpdate(Math.round(this.x), Math.round(this.y));
+			}
+		}
+	}
+
+	handlePointerUp(e) {
+		const index = this.evCache.findIndex(cached => cached.pointerId === e.pointerId);
+		if (index > -1) this.evCache.splice(index, 1);
+
+		if (this.evCache.length < 2) this.prevDiff = -1;
+
+		if (this.evCache.length === 0) {
+			this.isDragging = false;
+			if(this.canvas) this.canvas.style.cursor = 'crosshair';
+		} else if (this.evCache.length === 1) {
+			// Reset reference point when switching from pinch to pan
+			this.lastMouseX = this.evCache[0].clientX;
+			this.lastMouseY = this.evCache[0].clientY;
+		}
+	}
+
+	updateOverlay() {
+		if (this.overlay) {
+			this.overlay.innerText = this.zoom.toFixed(1) + 'x';
+			this.overlay.style.display = this.enabled ? 'block' : 'none';
+		}
+	}
+
+	render() {
+		if (!this.enabled || !this.img) return;
+
+		const w = this.canvas.width;
+		const h = this.canvas.height;
+
+		const srcW = w / this.zoom;
+		const srcH = h / this.zoom;
+
+		this.ctx.fillStyle = '#ffffff';
+		this.ctx.fillRect(0, 0, w, h);
+
+		try {
+			this.ctx.drawImage(
+				this.img,
+				this.x - srcW / 2,
+				this.y - srcH / 2,
+				srcW, srcH,
+				0, 0, w, h
+			);
+
+			// Crosshair (Red)
+			const cx = Math.floor(w / 2) + 0.5;
+			const cy = Math.floor(h / 2) + 0.5;
+
+			this.ctx.strokeStyle = '#ff0000';
+			this.ctx.lineWidth = 2;
+			this.ctx.lineCap = 'butt';
+
+			this.ctx.beginPath();
+			this.ctx.moveTo(0, cy); this.ctx.lineTo(w, cy);
+			this.ctx.moveTo(cx, 0); this.ctx.lineTo(cx, h);
+			this.ctx.stroke();
+
+		} catch (e) {
+			if (e.name !== 'InvalidStateError' && e.name !== 'DOMException') {
+				console.error("Spyglass Render Error:", e);
+			}
+		}
+	}
+}
diff --git a/docs/stitch-editor.js b/docs/stitch-editor.js
new file mode 100644
index 0000000..fa0d5b9
--- /dev/null
+++ b/docs/stitch-editor.js
@@ -0,0 +1,278 @@
+/* stitch-editor.js */
+
+// PanZoomCanvas class removed (moved to canvas-ui.js)
+
+class StitchEditor {
+	constructor(dbInstance, cvInstance) {
+        // ... (Constructor remains the same) ...
+        // It will now use the global PanZoomCanvas class
+		this.db = dbInstance;
+		this.cv = cvInstance;
+		this.modal = document.getElementById('stitch-modal');
+		this.srcId = null; this.dstId = null;
+		this.points = [];
+		this.colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff', '#ffffff', '#ff8800', '#88ff00'];
+
+		this.viewSrc = new PanZoomCanvas('stitch-canvas-src',
+			(c, k) => this.drawPts(c, k, 's'),
+			(x, y) => this.addPt(x, y, 's'),
+			(x, y, m, i) => this.hit(x, y, m, i, 's')
+		);
+		this.viewDst = new PanZoomCanvas('stitch-canvas-dst',
+			(c, k) => this.drawPts(c, k, 'd'),
+			(x, y) => this.addPt(x, y, 'd'),
+			(x, y, m, i) => this.hit(x, y, m, i, 'd')
+		);
+		this.injectFlipControls();
+	}
+    
+    injectFlipControls() {
+		const toolbar = document.querySelector('.stitch-toolbar');
+		if(toolbar && !document.getElementById('btn-stitch-flip')) {
+			const container = document.createElement('div');
+			container.style.display = 'flex';
+			container.style.gap = '5px';
+			container.style.marginRight = 'auto'; 
+			const btnFlip = document.createElement('button');
+			btnFlip.id = 'btn-stitch-flip';
+			btnFlip.className = 'secondary';
+			btnFlip.innerText = '↔ Flip Target';
+			btnFlip.onclick = () => this.toggleFlip(btnFlip);
+			container.appendChild(btnFlip);
+			if(toolbar.firstChild) toolbar.insertBefore(container, toolbar.firstChild);
+			else toolbar.appendChild(container);
+		}
+	}
+	
+	toggleFlip(btn) {
+		const newVal = !this.viewDst.isMirrored;
+		this.viewDst.setMirror(newVal);
+		btn.style.background = newVal ? '#e0f2fe' : '';
+		btn.style.borderColor = newVal ? '#2563eb' : '';
+		this.refresh();
+	}
+
+	getGridCoords(w, h, n) {
+		const coords = [];
+		const factors = (n === 2) ? [0.25, 0.75] : [0.15, 0.5, 0.85];
+		for(let fy of factors) {
+			for(let fx of factors) {
+				coords.push({ x: w * fx, y: h * fy });
+			}
+		}
+		return coords;
+	}
+
+	getOverlapRect(wSrc, hSrc, wDst, hDst, H) {
+		const corners = [
+			{x:0, y:0}, {x:wSrc, y:0}, {x:wSrc, y:hSrc}, {x:0, y:hSrc}
+		].map(p => this.cv.projectPoint(p.x, p.y, H)).filter(p => p !== null);
+
+		if(corners.length < 4) return null;
+
+		const minPx = Math.min(...corners.map(p => p.x));
+		const maxPx = Math.max(...corners.map(p => p.x));
+		const minPy = Math.min(...corners.map(p => p.y));
+		const maxPy = Math.max(...corners.map(p => p.y));
+
+		const iMinX = Math.max(0, minPx);
+		const iMaxX = Math.min(wDst, maxPx);
+		const iMinY = Math.max(0, minPy);
+		const iMaxY = Math.min(hDst, maxPy);
+
+		if (iMinX >= iMaxX || iMinY >= iMaxY) return null;
+		return { x: iMinX, y: iMinY, w: iMaxX - iMinX, h: iMaxY - iMinY };
+	}
+
+	setGrid(n, explicitH = null, explicitInvH = null) {
+		if(!this.viewSrc.bmp || !this.viewDst.bmp) return;
+		let H = explicitH;
+		let invH = explicitInvH;
+		if (!H && this.points.length >= 4) {
+			const res = this.cv.solveManual(this.points);
+			if(res) { H = res.hData; invH = res.invHData; }
+		}
+		this.points = [];
+		if (H && invH) {
+			const rect = this.getOverlapRect(
+				this.viewSrc.bmp.width, this.viewSrc.bmp.height,
+				this.viewDst.bmp.width, this.viewDst.bmp.height, 
+				H
+			);
+			if (rect) {
+				const dstGrid = this.getGridCoords(rect.w, rect.h, n).map(p => ({
+					x: rect.x + p.x,
+					y: rect.y + p.y
+				}));
+				dstGrid.forEach((dPt, i) => {
+					const sPt = this.cv.projectPoint(dPt.x, dPt.y, invH);
+					if (sPt && sPt.x >= 0 && sPt.y >= 0 && sPt.x <= this.viewSrc.bmp.width && sPt.y <= this.viewSrc.bmp.height) {
+						this.points.push({ s: sPt, d: dPt, color: this.colors[i % this.colors.length] });
+					}
+				});
+				if (this.points.length > 0) {
+					this.refresh();
+					return;
+				}
+			}
+		}
+		const sGrid = this.getGridCoords(this.viewSrc.bmp.width, this.viewSrc.bmp.height, n);
+		const dGrid = this.getGridCoords(this.viewDst.bmp.width, this.viewDst.bmp.height, n);
+		for(let i=0; i<sGrid.length; i++) {
+			this.points.push({ s: sGrid[i], d: dGrid[i], color: this.colors[i % this.colors.length] });
+		}
+		this.refresh();
+	}
+
+	clearPoints() {
+		this.points = [];
+		this.refresh();
+	}
+
+	isReflection(H) {
+		if (!H || H.length < 5) return false;
+		const det = (H[0] * H[4]) - (H[1] * H[3]);
+		return det < 0;
+	}
+
+	async open(srcImgId, dstImgId) {
+		this.srcId = srcImgId;
+		this.dstId = dstImgId;
+
+		const i1 = await this.db.getImage(srcImgId);
+		const i2 = await this.db.getImage(dstImgId);
+		if(!i1 || !i2) return alert("Images not found");
+
+		document.getElementById('stitch-title').innerText = `Stitch: ${i1.name} ↔ ${i2.name}`;
+
+		const bS = await createImageBitmap(i1.blob);
+		const bD = await createImageBitmap(i2.blob);
+
+		this.viewSrc.setImage(bS);
+		this.viewDst.setImage(bD);
+
+		this.points = [];
+		const existing = await this.db.getOverlapsForPair(srcImgId, dstImgId);
+		
+		let shouldFlip = false;
+
+		if (existing) {
+			if (existing.isManual && existing.manualPoints) {
+				existing.manualPoints.forEach((p, i) => {
+					let ptS, ptD;
+					if(existing.fromImageId === this.srcId) { ptS=p.s; ptD=p.d; }
+					else { ptS=p.d; ptD=p.s; }
+					this.points.push({ s: {x:ptS.x, y:ptS.y}, d: {x:ptD.x, y:ptD.y}, color: this.colors[i % this.colors.length] });
+				});
+				if (this.points.length >= 3) {
+					const tempRes = this.cv.solveManual(this.points);
+					if (tempRes && this.isReflection(tempRes.hData)) {
+						shouldFlip = true;
+					}
+				}
+			} else if (!existing.isManual && existing.homography) {
+				let hToUse = existing.homography;
+				let invHToUse = existing.inverseHomography;
+				if (existing.fromImageId !== this.srcId) {
+					hToUse = existing.inverseHomography;
+					invHToUse = existing.homography;
+				}
+				if (this.isReflection(hToUse)) {
+					shouldFlip = true;
+				}
+				this.setGrid(3, hToUse, invHToUse);
+			}
+		} else {
+			this.setGrid(3);
+		}
+
+		this.viewDst.setMirror(shouldFlip);
+		const flipBtn = document.getElementById('btn-stitch-flip');
+		if(flipBtn) {
+			flipBtn.style.background = shouldFlip ? '#e0f2fe' : '';
+			flipBtn.style.borderColor = shouldFlip ? '#2563eb' : '';
+		}
+
+		this.refresh();
+		this.modal.style.display = 'flex';
+	}
+
+	refresh() { this.viewSrc.draw(); this.viewDst.draw(); }
+
+	drawPts(ctx, k, side) {
+		const ik = 1/k;
+		const isMirrored = (side === 'd' && this.viewDst.isMirrored);
+		const width = (side === 'd' && this.viewDst.bmp) ? this.viewDst.bmp.width : 0;
+
+		this.points.forEach((p, idx) => {
+			const pt = (side==='s') ? p.s : p.d;
+			const label = (idx + 1).toString();
+			let drawX = pt.x;
+			if (isMirrored) drawX = width - pt.x;
+
+			const r=10*ik, len=20*ik, gap=2*ik;
+			const path = (c) => {
+				c.beginPath(); c.arc(drawX, pt.y, r, 0, Math.PI*2);
+				c.moveTo(drawX-len, pt.y); c.lineTo(drawX-gap, pt.y);
+				c.moveTo(drawX+gap, pt.y); c.lineTo(drawX+len, pt.y);
+				c.moveTo(drawX, pt.y-len); c.lineTo(drawX, pt.y-gap);
+				c.moveTo(drawX, pt.y+gap); c.lineTo(drawX, pt.y+len);
+			};
+
+			ctx.strokeStyle='black'; ctx.lineWidth=3*ik; path(ctx); ctx.stroke();
+			ctx.strokeStyle=p.color; ctx.lineWidth=1.5*ik; path(ctx); ctx.stroke();
+
+			ctx.font = `bold ${14*ik}px sans-serif`;
+			ctx.lineWidth = 3*ik; ctx.strokeStyle='black'; ctx.strokeText(label, drawX+8*ik, pt.y-8*ik);
+			ctx.fillStyle = 'white'; ctx.fillText(label, drawX+8*ik, pt.y-8*ik);
+		});
+	}
+
+	addPt(x, y, side) {
+		const p = { s:{x:0,y:0}, d:{x:0,y:0}, color: this.colors[this.points.length % this.colors.length] };
+		if(side==='s') { p.s={x,y}; p.d={x:this.viewDst.bmp.width/2, y:this.viewDst.bmp.height/2}; }
+		else { p.d={x,y}; p.s={x:this.viewSrc.bmp.width/2, y:this.viewSrc.bmp.height/2}; }
+		this.points.push(p);
+		this.refresh();
+	}
+
+	hit(x, y, mode, idx, side) {
+		if(mode==='check') {
+			 for(let i=this.points.length-1; i>=0; i--) {
+				 const pt = (side==='s')?this.points[i].s:this.points[i].d;
+				 if(Math.hypot(x-pt.x, y-pt.y) < 20) return i;
+			 }
+			 return -1;
+		} else if(mode==='move') {
+			const pt = (side==='s')?this.points[idx].s:this.points[idx].d;
+			pt.x+=x; pt.y+=y; this.refresh();
+		} else if(mode==='delete') {
+			const i=this.hit(x,y,'check',-1,side);
+			if(i!==-1) { this.points.splice(i,1); this.refresh(); }
+		}
+	}
+
+	async save() {
+		if(this.points.length < 4) return alert("Need at least 4 points to solve.");
+		const res = this.cv.solveManual(this.points);
+		if(!res) return alert("Solve failed. Points might be collinear or overlapping.");
+
+		await this.db.deleteOverlapsForPair(this.srcId, this.dstId);
+
+		await this.db.addOverlap({
+			id: uuid(),
+			fromImageId: this.srcId,
+			toImageId: this.dstId,
+			homography: res.hData,
+			inverseHomography: res.invHData,
+			matchCount: this.points.length,
+			isManual: true,
+			manualPoints: this.points.map(p => ({s:p.s, d:p.d}))
+		});
+
+		if(typeof renderList === 'function') renderList();
+		if(typeof renderConnectionsList === 'function') renderConnectionsList();
+		window.history.back();
+	}
+}
+
diff --git a/docs/studio.html b/docs/studio.html
new file mode 100644
index 0000000..8ab4410
--- /dev/null
+++ b/docs/studio.html
@@ -0,0 +1,1530 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("consent","default",{ad_storage:"granted",ad_user_data:"granted",ad_personalization:"granted",analytics_storage:"granted"});gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",analytics_storage:"denied",region:"AT,BE,BG,HR,CY,CZ,DK,EE,FI,FR,DE,GR,HU,IE,IT,LV,LT,LU,MT,NL,PL,PT,RO,SK,SI,ES,SE,IS,LI,NO,GB,CH,UA".split(",")});</script>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1MKL6C4B0"></script>
+<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-X1MKL6C4B0");</script>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>PCB ReTrace Studio</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+
+	<!-- LIBRARIES -->
+	<script async src="https://docs.opencv.org/4.x/opencv.js" type="text/javascript"></script>
+	<script src="spyglass.js"></script>
+
+	<!-- CORE LOGIC -->
+	<script src="cv-core.js"></script>
+	<script src="stitch-editor.js"></script>
+	<script src="studio.js" defer></script>
+    <script src="canvas-ui.js"></script>
+    <script src="nets.js"></script>
+    <script src="inspector.js"></script>
+
+	<link rel="stylesheet" href="common.css">
+	<style>
+		/* VARIABLES */
+		:root { --primary: #2563eb; --surface: #ffffff; --danger: #ef4444; --success: #059669; }
+
+		/* HEADER & NAV */
+		header { background: #fff; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); z-index: 50; flex-shrink: 0; }
+		.top-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; max-width: 1400px; margin: 0 auto; width: 100%; }
+		h1 { margin: 0; font-size: 1.1rem; color: #0f172a; white-space: nowrap; margin-right: 1rem;}
+
+		.project-controls { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; flex-wrap: wrap; }
+		.nav-group { display: flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; } /* min-width:0 allows shrinking */
+		.nav-label { font-size: 0.65rem; color: #64748b; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
+		.separator { color: #cbd5e1; font-size: 1.2rem; font-weight: 300; display: block; margin: 0 0.2rem; }
+		@media(min-width: 600px) { .separator { display: block; } }
+
+		.desktop-actions { display: flex; gap: 0.3rem; align-items: center; }
+		.mobile-menu-btn { display: none; background: transparent; border: none; font-size: 1.2rem; color: #64748b; padding: 0 0.2rem; cursor: pointer; line-height: 1; }
+
+		/* CONTROLS */
+		.custom-select-wrapper { position: relative; flex: 1; }
+		.custom-select { appearance: none; padding: 0 1.2rem 0 0.5rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 0.3rem; background: #fff; color: var(--primary); font-weight: 600; cursor: pointer; height: 1.6rem; width: 100%; }
+		.select-arrow { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.6rem; color: #64748b; }
+
+		button { border: none; border-radius: 0.3rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+		button.secondary { background: #fff; color: #475569; border: 1px solid var(--border); }
+		button.primary { background: var(--primary); color: white; border: 1px solid var(--primary); }
+		button.danger { background: #fee2e2; color: var(--danger); border: 1px solid #fecaca; }
+		button.icon-btn { padding: 0; width: 1.8rem; height: 1.8rem; font-size: 1rem; }
+
+		/* TABS */
+		.tabs { display: flex; gap: 1rem; margin-top: 0.2rem; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 0.5rem; }
+		.tab-btn { padding: 0.2rem 0; cursor: pointer; color: #64748b; font-weight: 600; border-bottom: 2px solid transparent; font-size: 0.9rem; }
+		.tab-btn:hover { color: var(--primary); }
+		.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
+
+		/* LAYOUT CONTAINERS */
+		.main-content { flex: 1; position: relative; width: 100%; background: var(--bg); overflow: hidden; }
+		.view-section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; flex-direction: column; }
+		.view-section.active { display: flex; z-index: 10; }
+
+		/* LIST VIEW */
+		.list-fixed-top {
+			flex-shrink: 0;
+			background: var(--bg);
+			border-bottom: 1px solid var(--border);
+			padding: 0.25rem;
+			z-index: 20;
+			width: 100%;
+			max-width: 1200px;
+			margin: 0 auto;
+			box-sizing: border-box; /* Fixes width calculation */
+		}
+
+		.actions-bar {
+			display: flex;
+			gap: 0.5rem;
+			margin-bottom: 0.25rem;
+			flex-wrap: nowrap;		/* Force single row */
+			align-items: center;
+			width: 100%;
+		}
+
+		/* Sort Dropdown: Don't let it grow infinitely */
+		.actions-bar .custom-select-wrapper {
+			flex: 0 0 auto;
+			min-width: 6rem;
+		}
+
+		/* Buttons: Don't shrink or wrap */
+		.actions-bar button, .actions-bar .dropdown button {
+			font-size: 0.75rem;
+			padding: 0 0.8rem;
+			height: 1.6rem;
+			white-space: nowrap;
+			flex-shrink: 0;
+		}
+
+		/* Select inside toolbar */
+		.actions-bar .custom-select {
+			padding: 0.3rem 1.4rem 0.3rem 0.5rem;
+		}
+
+		/* SCROLL AREA */
+		.list-scroll-area {
+			flex: 1;
+			overflow-y: auto;
+			width: 100%;
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 0 0.5rem 0.5rem 0.5rem;
+			box-sizing: border-box; /* Fixes width calculation */
+			-webkit-overflow-scrolling: touch;
+		}
+
+		/* FORM */
+	   .add-form-container {
+			display: flex;
+			gap: 0.4rem;
+			background: #fff;
+			padding: 0.25rem;
+			border-radius: 0.5rem;
+			border: 1px solid var(--border);
+			align-items: flex-start;
+		}
+		.editor-visuals {
+			display: flex;
+			flex-direction: row; /* Side-by-Side: Spyglass + Thumbs */
+			gap: 0.5rem;
+			flex-shrink: 0;
+		}
+		#inline-thumbs {
+			display: flex;
+			flex-direction: column; /* Vertical Stack */
+			gap: 4px;
+			overflow-y: auto;		/* Scroll Vertically */
+			overflow-x: hidden;
+			height: 200px;			/* Match Spyglass Height */
+			width: 72px;			/* 60px thumb + scrollbar space */
+			padding-right: 2px;
+			border-left: 1px solid #e2e8f0;
+			padding-left: 4px;
+			/* Reset old styles */
+			min-height: 0;
+			border-top: none;
+			padding-top: 0;
+		}
+		.form-preview {
+			width: 200px;
+			height: 200px;
+			flex-shrink: 0;
+			background: #e2e8f0;
+			border-radius: 0.3rem;
+			border: 1px solid var(--border);
+			position: relative;
+			overflow: hidden;
+			display: flex; justify-content: center; align-items: center;
+		}
+		.thumb-promote-btn {
+			position: absolute;
+			top: 0; right: 0;
+			background: #f59e0b; /* Amber/Gold */
+			color: white;
+			border: none;
+			width: 18px; height: 18px;
+			font-size: 12px; line-height: 1;
+			display: flex; align-items: center; justify-content: center;
+			cursor: pointer;
+			z-index: 10;
+			box-shadow: -1px 1px 2px rgba(0,0,0,0.2);
+		}
+		.thumb-promote-btn:hover { background: #d97706; }
+		.thumb-locate-btn {
+			position: absolute; top: 0; left: 0;
+			background: #3b82f6; /* Blue */
+			color: white; border: none;
+			width: 18px; height: 18px;
+			font-size: 10px; line-height: 1;
+			display: flex; align-items: center; justify-content: center;
+			cursor: pointer; z-index: 10;
+			box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+		}
+		.thumb-locate-btn:hover { background: #2563eb; }
+		canvas#preview-canvas { display: block; width: 100%; height: 100%; object-fit: contain; cursor: crosshair; }
+		.form-preview.empty::after { content: "Click Map"; color:#94a3b8; font-size:0.75rem; font-weight: 600; position: absolute; }
+		.preview-overlay { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.6); color: white; font-size: 0.6rem; padding: 1px 4px; pointer-events: none; border-top-left-radius: 3px; display: none; }
+		.form-preview.has-image .preview-overlay { display: block; }
+		.form-preview.empty canvas { display: none; }
+
+		/* GLOBAL INPUT STYLE */
+		input {
+			padding: 0.3rem 0.5rem;
+			border: 1px solid var(--border);
+			border-radius: 0.3rem;
+			width: 100%;
+			box-sizing: border-box;
+			font-size: 0.85rem;
+			height: 100%;
+		}
+
+		/* Tighter Table Rows */
+		td, th { padding: 0.25rem 0.4rem; }
+
+		/* COMPACT EDITOR LAYOUT (2-Line) */
+		.form-inputs {
+			display: flex;
+			flex-direction: column;
+			gap: 0.4rem;
+			flex: 1;
+			min-width: 0;
+			justify-content: center;
+		}
+
+		.form-row {
+			display: flex;
+			gap: 0.4rem;
+			width: 100%;
+		}
+
+		.input-group {
+			display: flex;
+			align-items: stretch;
+			border: 1px solid var(--border);
+			border-radius: 0.3rem;
+			background: #fff;
+			overflow: hidden;
+			min-width: 0;
+			height: 1.7rem; /* Fixed comfortable touch height */
+		}
+
+		.input-group:focus-within {
+			border-color: var(--primary);
+			box-shadow: 0 0 0 1px var(--primary);
+		}
+
+		.input-group-label {
+			background: #f8fafc;
+			color: #64748b;
+			font-size: 0.6rem;
+			font-weight: 700;
+			padding: 0 0.4rem;
+			display: flex;
+			align-items: center;
+			border-right: 1px solid var(--border);
+			text-transform: uppercase;
+			flex-shrink: 0;
+			user-select: none;
+		}
+
+		/* Override global input style when inside a group */
+		.input-group input {
+			border: none;
+			border-radius: 0;
+			height: 100%;
+		}
+		.input-group input:focus { outline: none; }
+
+		/* Tools inside input group */
+		#new-part-tool-container {
+			display: flex;
+			align-items: center;
+			padding-right: 4px;
+			background: #fff;
+		}
+		#new-part-tool-container .tool-btn {
+			height: 1.4rem; width: 1.4rem;
+			margin-left: 2px;
+		}
+
+		.btn-save-icon {
+			flex-shrink: 0;
+			width: 2.2rem;
+			font-size: 1.2rem;
+			padding: 0;
+			height: 1.7rem;
+			border-radius: 0.3rem;
+		}
+
+		/* TABLE */
+		table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); table-layout: fixed; }
+		th { background: #f8fafc; font-size: 0.7rem; text-transform: uppercase; color: #475569; padding: 0.4rem 0.5rem; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--border); }
+		td { padding: 0.4rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+		tbody tr:hover { background-color: #f8fafc; cursor: pointer; }
+		tbody tr.editing { background-color: #e0f2fe !important; border-left: 3px solid var(--primary); }
+		.val-cell { display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; width: 100%; overflow: hidden;}
+		.val-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+		.tool-group { display: flex; gap: 0.2rem; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
+		.tool-btn { background: #e0f2fe; color: var(--primary); width: 1.5rem; height: 1.5rem; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 0.3rem; cursor: pointer; border: 1px solid transparent; flex-shrink: 0; }
+		.tool-btn svg { width: 0.9rem; height: 0.9rem; }
+		.copy-btn { background: #fff; border: 1px solid #cbd5e1; color: #64748b; flex-shrink: 0; width: 1.5rem; height: 1.5rem;}
+
+		.dropdown { position: relative; display: inline-block; }
+		.dropdown button { width: 100%; }
+		.dropdown-content { display: none; position: absolute; left: 0; top: 100%; margin-top: 0.2rem; background-color: #fff; min-width: 140px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid var(--border); border-radius: 0.4rem; z-index: 999; }
+		.dropdown-content a { color: var(--text); padding: 0.5rem 0.8rem; text-decoration: none; display: block; font-size: 0.8rem; cursor: pointer; }
+		.dropdown-content a:hover { background-color: #f1f5f9; color: var(--primary); }
+
+		/* MAP VIEW */
+		#view-map { padding: 0; overflow: hidden; background-color: #334155 !important; }
+		.map-toolbar { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 100; display: flex; gap: 0.3rem; background: #ffffff; padding: 0.3rem; border-radius: 0.3rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
+
+		/* MAP VIEWPORT - ONLY PLACE WITH TOUCH RESTRICTIONS */
+		.map-viewport {
+			width: 100%; height: 100%;
+			cursor: grab;
+			touch-action: none; /* Disable browser handling here only */
+			position: relative; overflow: hidden;
+			display: flex; align-items: center; justify-content: center;
+		}
+		.map-content { position: absolute; top: 0; left: 0; transform-origin: 0 0; z-index: 1; }
+		.pcb-image { display: block; pointer-events: none; max-width: none; user-select: none; }
+		.map-pin { position: absolute; width: 0; height: 0; pointer-events: auto; z-index: 50; }
+		.pin-marker { position: absolute; bottom: 0; left: -10px; width: 20px; height: 20px; background: var(--primary); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: bold; transform-origin: 50% 50%; cursor: pointer; }
+		.pin-marker span { transform: rotate(45deg); display:block; }
+		.map-pin:hover .pin-marker { transform: rotate(-45deg) scale(1.3); background: #ef4444; z-index: 60; }
+		.empty-state { text-align: center; color: #94a3b8; margin-top: 3rem; pointer-events: none; width:100%; }
+
+		/* MODALS */
+		/* MODAL STACKING ORDER */
+		#image-settings-modal { z-index: 1000; } /* Base Level */
+		#connections-modal	  { z-index: 1050; } /* Level 2 */
+		#stitch-modal		  { z-index: 1060; } /* Level 3 */
+		#confirmation-modal	  { z-index: 1100; } /* Top Level (Alerts) */
+		.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
+		.modal-content { width: 95%; max-width: 900px; height: 90vh; background: #f4f4f9; border-radius: 0.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; }
+		.modal-header { padding: 0.5rem 1rem; background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
+		.close-btn { background: transparent; color: #64748b; font-size: 1.5rem; padding: 0; }
+		iframe { width: 100%; flex: 1; border: none; display: none; }
+
+		#tool-selector { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
+		.selector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; width: 100%; max-width: 600px; }
+		.tool-card { background: white; border: 1px solid var(--border); padding: 1.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; text-align: center; }
+		.tool-card:hover { border-color: var(--primary); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
+		.tool-card-icon { width: 4rem; height: 4rem; } .tool-card-icon svg { width: 100%; height: 100%; } .tool-card-title { font-weight: 700; color: #334155; }
+
+		#board-settings-form, #device-settings-form { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+		#board-settings-form label, #device-settings-form label { font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 0.2rem; display: block; }
+		#board-settings-form input, #board-settings-form select,
+		#device-settings-form input, #device-settings-form select { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 0.3rem; box-sizing: border-box; font-size: 1rem; }
+
+		/* STITCH MODAL */
+		#stitch-modal .modal-content { max-width: 95vw; height: 90vh; }
+		.stitch-split { display: flex; flex: 1; gap: 5px; overflow: hidden; background: #000; }
+		.stitch-pane { flex: 1; position: relative; overflow: hidden; border: 1px solid #444; }
+		.stitch-pane canvas { display: block; width: 100%; height: 100%; cursor: grab; }
+		.stitch-pane canvas:active { cursor: grabbing; }
+		.stitch-toolbar { padding: 10px; background: #fff; border-top: 1px solid #ccc; display: flex; justify-content: flex-end; gap: 10px; }
+
+		/* IMPORT MODAL */
+		#import-modal .modal-content { max-width: 95vw; height: 90vh; background: #0f172a; color: white; border: 1px solid #334155; }
+		#import-modal .modal-header { background: #1e293b; border-bottom: 1px solid #334155; color: white; }
+		#import-modal .modal-header h3 { color: white; }
+		#import-modal .close-btn { color: #94a3b8; }
+		#import-modal .actions-bar { background: #1e293b; border-top: 1px solid #334155; padding: 10px; color: white; }
+		.import-viewport { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(#334155 1px, transparent 1px) 0 0 / 20px 20px; }
+		#import-canvas { max-width: 100%; max-height: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); }
+		#import-video { width: 100%; height: 100%; object-fit: contain; }
+
+		/* Fix for Inspect Tab Layout */
+		#view-inspect {
+		    display: none;
+		    flex-direction: column;
+		    height: 100%;
+		    width: 100%;
+		    background: #0f172a;
+		    color: white;
+		    position: relative;
+		    overflow: hidden; /* Prevent body scroll bars */
+		}
+
+		/* When active, force flex display to enable the column layout */
+		#view-inspect.active {
+		    display: flex !important; 
+		}
+
+		/* Ensure the grid fills remaining space */
+		#inspect-grid {
+		    flex: 1;
+		    min-height: 0; /* Critical for nested flex scrolling/sizing */
+		}
+
+		/* Add to common.css or styles */
+		.net-chip {
+		    background: #e2e8f0;
+		    padding: 2px 6px;
+		    border-radius: 4px;
+		    font-size: 0.85rem;
+		    border: 1px solid #cbd5e1;
+		    cursor: pointer;
+		}
+		.net-chip:hover {
+		    background: #cbd5e1;
+		    border-color: #94a3b8;
+		}
+
+		/* DRAG & DROP OVERLAY */
+		body.drag-active::after {
+			content: '📂 Drop File to Import';
+			position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+			background: rgba(37, 99, 235, 0.85); /* Primary Color + Opacity */
+			color: white; font-size: 2rem; font-weight: 700;
+			display: flex; align-items: center; justify-content: center;
+			z-index: 99999; pointer-events: none;
+			backdrop-filter: blur(4px);
+		}
+
+		/* RESPONSIVE */
+		@media (max-width: 768px) {
+			/* STICKY EDITOR: Force Side-by-Side */
+			.add-form-container { flex-direction: column; }
+
+			.editor-visuals {
+				width: 100%;
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				gap: 5px;
+			}
+
+			.form-preview {
+				width: auto;
+				flex: 1;
+				height: 200px;
+				min-width: 0;
+			}
+
+			#inline-thumbs {
+				display: flex !important;
+				flex-direction: column;
+				width: 72px;
+				height: 200px;
+				border-left: 1px solid #e2e8f0;
+				flex-shrink: 0;
+			}
+
+			/* TABLE / LIST ITEMS */
+			thead { display: none; }
+
+			/* MOBILE SINGLE LINE ROW */
+			tbody tr {
+				display: flex;
+				align-items: center;
+				gap: 0.4rem;
+				padding: 0.3rem;
+				border: 1px solid var(--border);
+				margin-bottom: 0.25rem;
+				height: 2.2rem;
+				width: 100%;
+				box-sizing: border-box;
+			}
+
+			/* Reset Cell Styles */
+			td { display: block; border: none; padding: 0; }
+			td::before { display: none; }
+
+			/* 1. REF */
+			td:nth-child(1) {
+				flex: 0 0 4rem;
+				font-weight: 700;
+				font-size: 0.9rem;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			/* 2. VALUE + TOOLS */
+			td:nth-child(2) {
+				flex: 1 1 auto;
+				min-width: 0;
+				max-width: 40%;
+			}
+			.val-cell { justify-content: flex-start; gap: 0.25rem; }
+			.val-text { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
+
+			.tool-group { display: flex; align-items: center; }
+			.tool-btn { width: 1.3rem; height: 1.3rem; }
+
+			/* 3. DESC */
+			td:nth-child(3) {
+				flex: 1 1 auto;
+				min-width: 0;
+				font-size: 0.8rem;
+				color: #64748b;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				text-align: right;
+			}
+
+			td:nth-child(4) { display: none; }
+
+			/* MAP TOOLBAR SCROLLING */
+			.map-toolbar {
+				max-width: calc(100vw - 1rem);
+				flex-wrap: nowrap;
+				overflow-x: auto;
+				scrollbar-width: none;
+			}
+			.map-toolbar::-webkit-scrollbar { display: none; }
+			.map-toolbar .custom-select-wrapper { min-width: 120px; width: auto; flex: 0 0 auto; }
+		}
+
+		@media (max-width: 900px) {
+			header { padding: 4px 2px; }
+
+			/* Force Single Line */
+			.top-bar {
+				gap: 2px;
+				flex-wrap: nowrap; /* CRITICAL: Prevents the 3-row break */
+			}
+
+			h1 { display: none; } /* Hide Title */
+			.nav-label { display: none; } /* Hide Labels */
+
+			.nav-group { gap: 2px; }
+
+			/* Dropdowns take all space */
+			.custom-select-wrapper { flex: 1; min-width: 0; }
+			.custom-select {
+				height: 1.7rem;
+				line-height: 1.7rem;
+				padding: 0 1rem 0 0.3rem;
+				font-size: 0.9rem;
+				text-overflow: ellipsis;
+			}
+
+			/* Hide Desktop Buttons, Show '...' */
+			.desktop-actions { display: none; }
+			.mobile-menu-btn {
+				display: block;
+				background: #f8fafc;
+				border: 1px solid #cbd5e1;
+				border-radius: 0.3rem;
+				font-size: 1.2rem;
+				color: #334155;
+
+				/* Dimensions in REM */
+				width: 1.7rem;
+				height: 1.7rem;		 /* Matches the dropdown height */
+
+				padding: 0;
+				cursor: pointer;
+				line-height: 1.6rem; /* Vertical alignment fix */
+				flex-shrink: 0;
+				text-align: center;
+			}
+			.mobile-menu-btn:active {
+				background: #e2e8f0;
+				border-color: #94a3b8;
+			}
+
+			.separator { margin: 0 1px; font-size: 1rem; }
+
+			/* 1. COMPACT TABS */
+			.tabs {
+				margin-top: 0;		 /* Remove top margin */
+				gap: 0.8rem;		 /* Reduce gap between tabs */
+				margin-bottom: 2px;	 /* Tiny breathing room before content */
+			}
+			.tab-btn {
+				padding: 0.1rem 0;	 /* Minimal vertical padding */
+				font-size: 0.85rem;
+				border-width: 2px;	 /* Keep border visible */
+			}
+
+			/* 2. COMPACT ACTION BAR (Sort + Buttons) */
+			.actions-bar {
+				gap: 0.2rem;		 /* Tighter spacing between buttons/dropdown */
+				margin-bottom: 0.2rem;
+			}
+
+			/* 3. FIX SORT DROPDOWN (Alignment & Size) */
+			.actions-bar .custom-select-wrapper {
+				min-width: 5rem;	 /* Allow it to be smaller */
+			}
+
+			.actions-bar .custom-select {
+				height: 1.6rem;		 /* Fixed height */
+				line-height: 1.6rem; /* CRITICAL: Centers text vertically */
+				padding: 0 1rem 0 0.3rem; /* 0 vertical padding, tight horizontal */
+				font-size: 0.8rem;	 /* Readable but compact */
+			}
+
+			/* Adjust arrow position for tighter dropdown */
+			.actions-bar .select-arrow {
+				right: 0.2rem;
+				font-size: 0.5rem;	 /* Smaller arrow */
+			}
+
+			/* Ensure buttons match the tight spacing */
+			.actions-bar button, .actions-bar .dropdown button {
+				padding: 0 0.5rem;
+			}
+		}
+
+		@media (max-width: 600px) {
+			/* 1. Modal Card: Tall & Centered */
+			.modal-content {
+				width: 96% !important;
+				height: 96dvh !important;
+				max-height: 96dvh !important;
+
+				border-radius: 0.5rem !important;
+				margin: auto;
+
+				display: flex;
+				flex-direction: column;
+				box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+				position: relative;
+			}
+
+			/* 2. Header: Ultra Compact */
+			.modal-header {
+				/* Minimal vertical padding */
+				padding: 0.2rem 0.6rem !important;
+
+				/* Flex alignment handles centering, so we don't need thick padding */
+				display: flex !important;
+				align-items: center !important;
+				justify-content: space-between !important;
+
+				min-height: 0 !important;
+				flex-shrink: 0;
+				border-bottom: 1px solid #e2e8f0;
+			}
+
+			.modal-header h3 {
+				font-size: 0.95rem !important;
+				margin: 0 !important;
+				line-height: 1.1 !important; /* Tight line height */
+			}
+
+			.close-btn {
+				font-size: 1.5rem !important;
+				line-height: 1 !important; /* Prevents button from being taller than text */
+				padding: 0 !important;
+				height: auto !important;
+				display: flex;
+				align-items: center;
+			}
+
+			/* 3. Iframe: Fill rest of space */
+			iframe {
+				border-radius: 0 0 0.5rem 0.5rem;
+				flex: 1;
+				min-height: 0;
+				height: 100%;
+			}
+		}
+	</style>
+</head>
+<body>
+
+<header>
+	<div class="top-bar">
+		<h1>PCB ReTrace</h1>
+
+		<!-- DEVICE SELECTOR -->
+		<div class="nav-group">
+			<span class="nav-label">Device</span>
+			<div class="custom-select-wrapper">
+				<select id="device-select" class="custom-select" onchange="switchDevice()"></select>
+				<span class="select-arrow">▼</span>
+			</div>
+
+			<!-- Mobile Trigger -->
+			<button class="mobile-menu-btn" onclick="openMobileMenu('device-actions')">⋮</button>
+
+			<!-- Collapsible Buttons -->
+			<div id="device-actions" class="desktop-actions">
+				<button class="icon-btn secondary" onclick="createNewDevice()" title="New Device">＋</button>
+				<button class="icon-btn secondary" onclick="openDeviceSettings()" title="Edit Device">✎</button>
+				<input type="file" id="device-import-input" accept=".zip,.json" style="display:none" onchange="handleImport(this)">
+				<button class="icon-btn secondary" onclick="document.getElementById('device-import-input').click()" title="Import Device">📂</button>
+				<button class="icon-btn secondary" onclick="exportDeviceZIP()" title="Export Device">💾</button>
+			</div>
+		</div>
+
+		<div class="separator">/</div>
+
+		<!-- BOARD SELECTOR -->
+		<div class="nav-group">
+			<span class="nav-label">Board</span>
+			<div class="custom-select-wrapper">
+				<select id="bom-select" class="custom-select" onchange="switchBom()"></select>
+				<span class="select-arrow">▼</span>
+			</div>
+
+			<!-- Mobile Trigger -->
+			<button class="mobile-menu-btn" onclick="openMobileMenu('board-actions')">⋮</button>
+
+			<!-- Collapsible Buttons -->
+			<div id="board-actions" class="desktop-actions">
+				<button class="icon-btn secondary" onclick="createNewBom()" title="New Board">＋</button>
+				<button class="icon-btn secondary" onclick="openBoardSettings()" title="Board Settings">✎</button>
+			</div>
+		</div>
+    	<a href="guide.html" target="_blank" class="icon-btn secondary" style="text-decoration:none; margin-left:5px; display:flex; align-items:center; justify-content:center;" title="Help / Guide">?</a>
+	</div>
+
+	<div class="tabs">
+		<div id="tab-list" class="tab-btn active" onclick="switchView('list')">📋 BOM</div>
+		<div id="tab-map" class="tab-btn" onclick="switchView('map')">🖼️  Images</div>
+	    <div id="tab-nets" class="tab-btn" onclick="switchView('nets')">🕸️ Nets</div>
+    	<div id="tab-inspect" class="tab-btn" onclick="switchView('inspect')">🔍 Inspect</div>
+	</div>
+</header>
+
+<main class="main-content">
+	<!-- 1. BOM LIST VIEW (Existing) -->
+	<div id="view-list" class="view-section active">
+		<div class="list-fixed-top">
+			<div class="actions-bar">
+				<div class="custom-select-wrapper" style="flex:0 0 auto;">
+					<select id="sort-select" class="custom-select" onchange="changeSortMode()">
+						<option value="none">No Sorting</option>
+						<option value="std">Sort: Type</option>
+						<option value="num">Sort: Num</option>
+					</select>
+					<span class="select-arrow">▼</span>
+				</div>
+				<input type="file" id="import-input" accept=".csv,.json,.zip" style="display:none" onchange="handleImport(this)">
+				<button class="secondary" onclick="document.getElementById('import-input').click()" title="Import">📂</button>
+				<div class="dropdown">
+					<button class="secondary" onclick="toggleExport(event)" title="Export">💾▼</button>
+					<div id="export-dropdown" class="dropdown-content">
+						<a onclick="exportCSV()">CSV</a>
+						<a onclick="exportZIP()">ZIP (Board)</a>
+					</div>
+				</div>
+				<button class="secondary danger" onclick="clearCurrentBom()" title="Clear All">🗑️ </button>
+			</div>
+
+			<div class="add-form-container" id="add-form">
+				<div class="editor-visuals">
+					<div class="form-preview empty" id="form-preview">
+						<canvas id="preview-canvas" width="400" height="400"></canvas>
+						<div class="preview-overlay" id="zoom-level">2x</div>
+					</div>
+					<div id="inline-thumbs"></div>
+				</div>
+
+				<div class="form-inputs">
+					<div class="form-row">
+						<div class="input-group" style="flex: 0 0 35%;">
+							<div class="input-group-label">Ref</div>
+							<input type="text" id="inp-label" placeholder="R1" oninput="checkToolHint(this.value)">
+							<input type="hidden" id="inp-id">
+							<input type="hidden" id="inp-x"> <input type="hidden" id="inp-y"> <input type="hidden" id="inp-img-id">
+						</div>
+						<div class="input-group" style="flex: 1;">
+							<div class="input-group-label">Val</div>
+							<input type="text" id="inp-value" placeholder="10k">
+							<div id="new-part-tool-container"></div>
+						</div>
+					</div>
+					<div class="form-row">
+						<div class="input-group" style="flex: 1;">
+							<div class="input-group-label">Desc</div>
+							<input type="text" id="inp-desc" placeholder="0603, etc...">
+						</div>
+						<button class="danger btn-save-icon" onclick="deleteCurrentPart()" title="Delete">🗑️</button>
+						<button class="primary btn-save-icon" onclick="addPart()" title="Add / Update">💾</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="list-scroll-area">
+			<div class="table-container">
+				<table>
+					<thead><tr><th width="15%">Ref</th><th width="35%">Value</th><th width="50%">Desc</th></tr></thead>
+					<tbody id="bom-body"></tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+
+	<!-- 2. IMAGE MAP VIEW (Existing) -->
+	<div id="view-map" class="view-section">
+		<div class="map-toolbar">
+			<div class="custom-select-wrapper">
+				<select id="image-select" class="custom-select" onchange="switchImage()">
+					<option value="" disabled selected>No Images</option>
+				</select>
+				<span class="select-arrow">▼</span>
+			</div>
+			<input
+				type="file"
+				id="import-file-input"
+				accept="image/jpeg, image/png, image/webp, image/avif, image/heic, image/heif, image/bmp, .jpg, .jpeg, .png, .webp, .avif, .heic, .heif, .bmp"
+				style="display:none"
+				onchange="ImageImporter.handleFileSelect(this)"
+			>
+			<button class="icon-btn secondary" onclick="document.getElementById('import-file-input').click()" title="Upload Image">📁</button>
+			<button class="icon-btn secondary" onclick="ImageImporter.openCamera()" title="Camera">📷</button>
+			<button class="icon-btn secondary" onclick="openImageSettings()" title="Image Settings">✎</button>
+			<div style="width:1px; height:20px; background:#cbd5e1; margin:0 0.5rem;"></div>
+			<button class="secondary sm-btn" onclick="fitMap()">Fit</button>
+		</div>
+		<div class="map-viewport" id="map-viewport">
+			<div class="map-content" id="map-content">
+				<div id="map-placeholder" class="empty-state">
+					<h3>No Image Selected</h3>
+					<p>Add images to start positioning components.</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- 3. NETS LIST VIEW -->
+	<div id="view-nets" class="view-section">
+		<div class="list-fixed-top">
+			<div class="actions-bar">
+				 <button class="secondary" onclick="exportKiCad()" title="Export KiCad">💾 KiCad</button>
+			</div>
+		</div>
+		<div class="list-scroll-area">
+			<div class="table-container">
+				<table>
+					<thead><tr><th width="30%">Net Name</th><th width="60%">Nodes (Click to Edit)</th><th width="10%"></th></tr></thead>
+					<tbody id="nets-body"></tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+
+	<!-- 4. INSPECT VIEW (Fixed Layout & Toolbar) -->
+	<div id="view-inspect" class="view-section">
+		
+		<!-- Single Floating Toolbar Container -->
+		<div id="inspect-toolbar" style="position:absolute; top:0.5rem; left:0.5rem; right:0.5rem; z-index:100; display:flex; gap:0.5rem; align-items:center; pointer-events:none;">
+			
+			<!-- 1. Layers Dropdown -->
+			<div style="pointer-events:auto; padding:0 0.5rem; background:rgba(255,255,255,0.95); box-shadow:0 2px 10px rgba(0,0,0,0.3); border-radius:4px; height:2rem; display:flex; align-items:center;">
+				<details id="inspect-layers-details" style="position:relative;">
+					<summary style="cursor:pointer; color:#334155; font-weight:700; font-size:0.8rem; outline:none; white-space:nowrap; list-style:none;">☰ Layers ▾</summary>
+					<div id="inspect-layers" style="position:absolute; top:100%; left:-0.5rem; margin-top:0.5rem; background:white; padding:10px; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.2); display:flex; flex-direction:column; gap:5px; min-width:200px;"></div>
+				</details>
+			</div>
+
+			<!-- 2. Active Net Info (Hidden by default) -->
+			<div id="inspect-active-net" style="pointer-events:auto; background:rgba(30, 41, 59, 0.95); padding:0 0.8rem; border-radius:4px; border:1px solid #475569; display:none; color:white; height:2rem; align-items:center; box-shadow:0 2px 5px rgba(0,0,0,0.5);">
+				<!-- Injected by JS -->
+			</div>
+			
+			<!-- 3. New Net Button -->
+			<button class="primary sm-btn" style="pointer-events:auto; box-shadow:0 2px 5px rgba(0,0,0,0.5); height:2rem;" onclick="inspector.startNewNet()">+ New Net</button>
+		</div>
+		
+		<!-- Full Screen Grid -->
+		<div id="inspect-grid">
+			<div style="display:flex; align-items:center; justify-content:center; color:#64748b; height:100%;">Select layers to inspect</div>
+		</div>
+	</div>
+
+</main>
+
+<footer class="app-footer">Copyright © 2025 Taras Greben — <a href="https://pcb.etaras.com">pcb.eTaras.com</a></footer>
+
+<!-- COMPONENT TOOL MODAL -->
+<div style="display:none" id="tool-modal" class="modal-overlay"><div class="modal-content"><div class="modal-header"><h3 style="margin:0" id="tool-title">Component Tool</h3><button class="close-btn" onclick="closeTool()">×</button></div><div id="tool-selector"><h4 style="color:#64748b; margin-top:0">Choose:</h4><div class="selector-grid" id="selector-grid"></div></div><iframe id="tool-frame" src=""></iframe></div></div>
+
+<!-- BOARD SETTINGS MODAL -->
+<div style="display:none" id="board-settings-modal" class="modal-overlay">
+	<div class="modal-content" style="height:auto; max-width:400px; max-height:80vh; overflow-y:auto;">
+		<div class="modal-header">
+			<h3 style="margin:0">Board Settings</h3>
+			<button class="close-btn" onclick="document.getElementById('board-settings-modal').style.display='none'">×</button>
+		</div>
+		<div id="board-settings-form">
+			<div><label>Board Name</label><input type="text" id="edit-board-name"></div>
+			<div><label>Section (Group)</label><input type="text" id="edit-board-section" placeholder="e.g. Power Supply"></div>
+			<div><label>Parent Device</label><select id="edit-board-device" class="custom-select"></select></div>
+			<div style="margin-top:1rem; display:flex; justify-content:flex-end;">
+				<button class="danger" style="padding:0.6rem 1.2rem;" onclick="deleteBom()">Delete Board</button>
+				<button class="primary" style="padding:0.6rem 1.2rem;" onclick="saveBoardSettings()">Save Changes</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- DEVICE SETTINGS MODAL -->
+<div style="display:none" id="device-settings-modal" class="modal-overlay">
+	<div class="modal-content" style="height:auto; max-width:400px; max-height:80vh; overflow-y:auto;">
+		<div class="modal-header">
+			<h3 style="margin:0">Device Settings</h3>
+			<button class="close-btn" onclick="document.getElementById('device-settings-modal').style.display='none'">×</button>
+		</div>
+		<div id="device-settings-form">
+			<div><label>Device Name</label><input type="text" id="edit-device-name"></div>
+			<div style="margin-top:1rem; display:flex; justify-content:space-between; align-items:center;">
+				<button class="danger" style="padding:0.6rem 1.2rem;" onclick="deleteCurrentDevice()">Delete Device</button>
+				<button class="primary" style="padding:0.6rem 1.2rem;" onclick="saveDeviceSettings()">Save Changes</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- CONNECTIONS LIST MODAL -->
+<div style="display:none" id="connections-modal" class="modal-overlay">
+	<div class="modal-content" style="height:auto; max-width:500px; max-height:80vh;">
+		<div class="modal-header">
+			<h3 style="margin:0">Image Connections</h3>
+			<button class="close-btn" onclick="document.getElementById('connections-modal').style.display='none'">×</button>
+		</div>
+		<div style="padding:1rem;">
+			<p style="font-size:0.9rem; color:#666; margin-top:0;">Stitch <b><span id="conn-src-name"></span></b> with other images.</p>
+			<div id="conn-list" style="display:flex; flex-direction:column; gap:0.5rem; max-height:300px; overflow-y:auto;"></div>
+			<div style="margin-top:1rem; padding-top:1rem; border-top:1px solid #eee; text-align:right;">
+				<button class="primary" onclick="runAutoCVBatch()">⚡ Run Auto-CV on All</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- STITCH EDITOR MODAL -->
+<div style="display:none" id="stitch-modal" class="modal-overlay">
+	<div class="modal-content">
+		<div class="modal-header">
+			<h3 id="stitch-title" style="margin:0">Stitch Images</h3>
+			<button class="close-btn" onclick="document.getElementById('stitch-modal').style.display='none'">×</button>
+		</div>
+		<div class="stitch-split">
+			<div class="stitch-pane"><canvas id="stitch-canvas-src"></canvas></div>
+			<div class="stitch-pane"><canvas id="stitch-canvas-dst"></canvas></div>
+		</div>
+		<div class="stitch-toolbar" style="display:flex; align-items:center; gap:8px;">
+			<!-- JS Injects Flip Button on Left -->
+			
+			<div style="flex:1; text-align:center;">
+				<button class="secondary sm-btn" onclick="stitchEditor.setGrid(2)" title="Set 4 Points (Corners)">Grid 2x2</button>
+				<button class="secondary sm-btn" onclick="stitchEditor.setGrid(3)" title="Set 9 Points (Recommended)">Grid 3x3</button>
+				<button class="secondary sm-btn" onclick="stitchEditor.clearPoints()" title="Remove All Points">Clear</button>
+			</div>
+
+			<button onclick="stitchEditor.refresh()">Reset View</button>
+			<button class="primary" onclick="stitchEditor.save()">Save Match</button>
+		</div>
+	</div>
+</div>
+
+<!-- IMAGE IMPORT MODAL -->
+<div style="display:none" id="import-modal" class="modal-overlay">
+	<div class="modal-content">
+		<div class="modal-header">
+			<h3 style="margin:0">Import Image</h3>
+			<button class="close-btn" onclick="ImageImporter.close()" title="Close">×</button>
+		</div>
+
+		<!-- Editor / Camera Area -->
+		<div class="import-viewport">
+			<canvas id="import-canvas"></canvas>
+			<video id="import-video" style="display:none" playsinline autoplay></video>
+
+			<!-- Camera UI Overlay -->
+			<div id="camera-overlay" style="display:none; position:absolute; inset:0; pointer-events:none;">
+				<button id="btn-flash" style="display:none; pointer-events:auto; position:absolute; top:20px; right:20px; background:rgba(0,0,0,0.5); border:1px solid white; color:white; border-radius:50%; width:40px; height:40px; font-size:18px;" onclick="ImageImporter.toggleFlash()" title="Toggle Flash">⚡</button>
+				<div style="position:absolute; bottom:20px; left:0; right:0; text-align:center; pointer-events:auto;">
+					<button class="primary" style="border-radius:50%; width:60px; height:60px; font-size:24px; box-shadow:0 0 10px rgba(0,0,0,0.5); border:3px solid white;" onclick="ImageImporter.captureVideo()" title="Take Photo">◉</button>
+				</div>
+			</div>
+
+			<!-- Status Message -->
+			<div id="camera-msg" style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:white; text-align:center;">
+				<p>Starting Camera...</p>
+			</div>
+		</div>
+
+		<!-- Toolbar -->
+		<div class="actions-bar" style="display:flex; justify-content:center; gap:8px; flex-wrap:wrap; align-items:center;">
+			 <!-- Left Group: Edit Tools -->
+			 <button id="btn-retake" class="secondary" style="display:none; border-color:#94a3b8;" onclick="ImageImporter.openCamera()" title="Return to Camera">← Retake</button>
+
+			 <button id="btn-crop-toggle" class="secondary" onclick="ImageImporter.toggleCropMode()" title="Toggle Crop Mode">✂ Crop</button>
+			 <button class="secondary" onclick="ImageImporter.resetView()" title="Fit Image to Screen">Fit</button>
+			 <button id="btn-reset" class="secondary" onclick="ImageImporter.resetEdits()" title="Reset Rotation & Crop">Reset</button>
+
+			 <div style="width:1px; height:20px; background:#475569; margin:0 2px;"></div>
+
+			 <!-- Right Group: Rotation (Wrapped to prevent breaking) -->
+			 <div style="display:flex; gap:2px;">
+				<button class="secondary" onclick="ImageImporter.rotate(-90)" title="Rotate Counter-Clockwise">↺</button>
+				<button class="secondary" onclick="ImageImporter.rotate(180)" title="Rotate 180°">⇅</button>
+				<button class="secondary" onclick="ImageImporter.rotate(90)" title="Rotate Clockwise">↻</button>
+			 </div>
+
+			 <!-- Input & Save -->
+			 <div style="display:flex; gap:4px; align-items:center;">
+				<input type="text" id="import-name" placeholder="Image Name" title="Enter Image Name" style="width:100px; background:#334155; border:1px solid #475569; color:white; border-radius:4px; padding:0 5px; height:1.6rem;">
+				<button class="primary" onclick="ImageImporter.save()" title="Save Image to Board">Save</button>
+			 </div>
+		</div>
+	</div>
+</div>
+
+<!-- GENERIC CONFIRMATION MODAL -->
+<div style="display:none; z-index:1100;" id="confirmation-modal" class="modal-overlay">
+	<div class="modal-content" style="height:auto; max-width:400px; background:#fff; border:1px solid #cbd5e1;">
+		<div class="modal-header">
+			<h3 style="margin:0">Confirm Action</h3>
+			<button class="close-btn" onclick="document.getElementById('confirmation-modal').style.display='none'">×</button>
+		</div>
+		<div style="padding:1.5rem;">
+			<p id="confirm-msg" style="margin-top:0; color:#334155; white-space: pre-wrap;"></p>
+			<div style="margin-top:1.5rem; display:flex; justify-content:flex-end; gap:10px;">
+				<button id="confirm-btn-cancel" class="secondary" style="border-color:#94a3b8;">Cancel</button>
+				<button id="confirm-btn-ok" class="danger">Confirm Delete</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- IMAGE SETTINGS MODAL -->
+<div style="display:none" id="image-settings-modal" class="modal-overlay">
+	<div class="modal-content" style="height:auto; max-width:400px;">
+		<div class="modal-header">
+			<h3 style="margin:0">Image Settings</h3>
+			<button class="close-btn" onclick="document.getElementById('image-settings-modal').style.display='none'">×</button>
+		</div>
+		<div style="padding:1.5rem; display:flex; flex-direction:column; gap:1rem;">
+
+			<!-- Rename Section -->
+			<div>
+				<label style="font-size:0.8rem; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:0.2rem; display:block;">Image Name</label>
+				<input type="text" id="edit-image-name" style="width:100%; padding:0.6rem; border:1px solid #cbd5e1; border-radius:0.3rem; font-size:1rem;">
+			</div>
+
+			<!-- Actions Section -->
+			<button class="secondary" style="justify-content:space-between; padding:0.8rem;" onclick="openConnectionsModal()">
+				<span>🔗 Stitch / Connections</span>
+				<span>→</span>
+			</button>
+
+			<div style="margin-top:0.5rem; display:flex; justify-content:space-between; align-items:center;">
+				<button class="danger" style="padding:0.6rem 1.2rem;" onclick="deleteCurrentImage()">Delete Image</button>
+				<button class="primary" style="padding:0.6rem 1.2rem;" onclick="saveImageSettings()">Save</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- MOBILE ACTION SHEET -->
+<div style="display:none; align-items:flex-end;" id="mobile-menu-modal" class="modal-overlay" onclick="this.style.display='none'">
+	<div class="modal-content" style="width:100%; max-width:100%; border-radius:1rem 1rem 0 0; margin:0; animation: slideUp 0.2s ease-out;" onclick="event.stopPropagation()">
+		<div class="modal-header">
+			<h3 style="margin:0; font-size:1rem;">Actions</h3>
+			<button class="close-btn" onclick="document.getElementById('mobile-menu-modal').style.display='none'">×</button>
+		</div>
+
+		<!-- CHANGED: Switched from Grid to Flex-Wrap for better spacing on narrow screens -->
+		<div id="mobile-menu-content" style="padding:2rem 1rem; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center;">
+			<!-- Buttons injected here -->
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
+
+	/* MODIFIED: Column Layout for List View */
+	#mobile-menu-content {
+		padding: 1.5rem 1rem 3rem 1rem; /* Extra bottom padding for safe area */
+		display: flex;
+		flex-direction: column; /* Vertical List */
+		gap: 0.8rem;
+	}
+
+	/* NEW: Row Container */
+	.mobile-action-row {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		background: #fff;
+		border: 1px solid #e2e8f0;
+		padding: 0.8rem 1rem;
+		border-radius: 0.8rem;
+		cursor: pointer;
+		transition: background 0.1s;
+		box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+	}
+	.mobile-action-row:active {
+		background: #f1f5f9;
+		transform: scale(0.99);
+	}
+
+	/* Text Style */
+	.mobile-action-row span {
+		font-size: 1.1rem;
+		font-weight: 600;
+		color: #334155;
+	}
+
+	/* Reset/Style the Cloned Buttons inside the list */
+	.mobile-action-row button,
+	.mobile-action-row label {
+		width: 2.5rem !important;
+		height: 2.5rem !important;
+		font-size: 1.2rem !important;
+		border-radius: 0.5rem !important;
+		background: #f8fafc !important;
+		border: 1px solid #cbd5e1 !important;
+		display: flex !important;
+		align-items: center !important;
+		justify-content: center !important;
+		padding: 0 !important;
+		margin: 0 !important;
+		box-shadow: none !important;
+	}
+</style>
+
+<script>
+	function openMobileMenu(sourceId) {
+		const source = document.getElementById(sourceId);
+		const target = document.getElementById('mobile-menu-content');
+		target.innerHTML = '';
+
+		Array.from(source.children).forEach(child => {
+			// Filter: Only Buttons or Labels, and ignore hidden elements (like the file input itself)
+			if ((child.tagName === 'BUTTON' || child.tagName === 'LABEL') && child.style.display !== 'none') {
+
+				// 1. Create Row Container
+				const row = document.createElement('div');
+				row.className = 'mobile-action-row';
+				row.onclick = (e) => {
+					// Trigger the original action
+					child.click();
+					document.getElementById('mobile-menu-modal').style.display = 'none';
+				};
+
+				// 2. Clone the Icon Button
+				const clone = child.cloneNode(true);
+				// Remove ID to avoid duplicates
+				clone.removeAttribute('id');
+				// Prevent double-triggering since the row handles the click
+				clone.onclick = (e) => e.stopPropagation();
+				// Make the clone purely visual/clickable via the row
+				clone.style.pointerEvents = 'none';
+
+				// 3. Create Label from Title
+				const label = document.createElement('span');
+				label.innerText = child.title || "Action";
+
+				// 4. Assemble
+				row.appendChild(clone);
+				row.appendChild(label);
+				target.appendChild(row);
+			}
+		});
+
+		document.getElementById('mobile-menu-modal').style.display = 'flex';
+	}
+</script>
+
+<script>
+/**
+ * IMAGE IMPORTER & PROCESSOR
+ * Handles File/Camera Input -> Clean Canvas -> Crop -> JPEG Blob -> Database
+ */
+const ImageImporter = {
+	modal: document.getElementById('import-modal'),
+	canvas: document.getElementById('import-canvas'),
+	ctx: null,
+	video: document.getElementById('import-video'),
+	nameInput: document.getElementById('import-name'),
+	flashBtn: document.getElementById('btn-flash'),
+	retakeBtn: document.getElementById('btn-retake'),
+	cropBtn: document.getElementById('btn-crop-toggle'),
+
+	stream: null,
+	track: null,
+	sourceImage: null,
+	currentRotation: 0,
+	isCameraSession: false,
+	
+	// View State (Zoom/Pan)
+	view: { scale: 1, x: 0, y: 0 },
+	lastDist: 0, // For pinch zoom
+
+	// Crop/Drag State
+	isCropping: false,
+	isDragging: false,
+	isPanning: false,
+	cropRect: null,
+	dragStart: {x:0, y:0},
+	panStart: {x:0, y:0},
+
+	initListeners: function() {
+		if(this.listenersAdded) return;
+		const start = (e) => this.handleDragStart(e);
+		const move = (e) => this.handleDragMove(e);
+		const end = () => this.handleDragEnd();
+		
+		this.canvas.addEventListener('mousedown', start);
+		this.canvas.addEventListener('touchstart', start, {passive: false});
+		
+		window.addEventListener('mousemove', move);
+		window.addEventListener('touchmove', move, {passive: false});
+		
+		window.addEventListener('mouseup', end);
+		window.addEventListener('touchend', end);
+
+		// Zoom Wheel (Desktop)
+		this.canvas.addEventListener('wheel', e => {
+			e.preventDefault();
+			// Zoom towards mouse pointer could be added, but center zoom is safer for simple preview
+			const d = e.deltaY > 0 ? 0.9 : 1.1;
+			this.zoom(d);
+		}, {passive: false});
+
+		this.listenersAdded = true;
+	},
+
+	zoom: function(factor) {
+		const newScale = Math.max(0.1, Math.min(10, this.view.scale * factor));
+		this.view.scale = newScale;
+		this.applyView();
+	},
+
+	applyView: function() {
+		// Apply CSS Transform to visual canvas
+		this.canvas.style.transform = `translate(${this.view.x}px, ${this.view.y}px) scale(${this.view.scale})`;
+	},
+
+	// --- NEW: FIT BUTTON ACTION ---
+	resetView: function() {
+		this.view = { scale: 1, x: 0, y: 0 };
+		this.applyView();
+	},
+
+	handleFileSelect: function(input) {
+		if (input.files && input.files[0]) {
+			this.isCameraSession = false;
+			const file = input.files[0];
+			this.nameInput.value = file.name.replace(/\.[^/.]+$/, "");
+			const reader = new FileReader();
+			reader.onload = (e) => this.loadImage(e.target.result);
+			reader.readAsDataURL(file);
+			input.value = '';
+		}
+	},
+
+	openCamera: async function() {
+		this.isCameraSession = true;
+		this.openModal('camera');
+		const overlay = document.getElementById('camera-overlay');
+		const msg = document.getElementById('camera-msg');
+		msg.style.display = 'block'; msg.innerHTML = "Requesting Camera Access...";
+		overlay.style.display = 'none'; this.flashBtn.style.display = 'none';
+
+		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+			msg.innerHTML = "Camera API not supported.<br>(HTTPS required)"; return;
+		}
+
+		try {
+			this.stream = await navigator.mediaDevices.getUserMedia({
+				video: { facingMode: { ideal: 'environment' }, width: { ideal: 4096 }, height: { ideal: 2160 }, focusMode: { ideal: 'continuous' } },
+				audio: false
+			});
+			this.video.srcObject = this.stream;
+			this.video.onloadedmetadata = () => {
+				msg.style.display = 'none'; overlay.style.display = 'block';
+				this.track = this.stream.getVideoTracks()[0];
+				const caps = this.track.getCapabilities ? this.track.getCapabilities() : {};
+				const supConstraints = navigator.mediaDevices.getSupportedConstraints();
+				if (('torch' in caps) || supConstraints.torch) {
+					this.flashBtn.style.display = 'block';
+					this.flashBtn.style.background = 'rgba(0,0,0,0.5)';
+					this.flashBtn.dataset.on = "false";
+				}
+			};
+		} catch (err) { console.error(err); msg.innerHTML = "Error accessing camera:<br>" + err.message; }
+	},
+
+	toggleFlash: function() {
+		if (!this.track) return;
+		const newState = !(this.flashBtn.dataset.on === "true");
+		const promise = this.track.applyConstraints({ advanced: [{ torch: newState }] });
+		if(promise) {
+			promise.then(() => {
+				this.flashBtn.dataset.on = newState;
+				this.flashBtn.style.background = newState ? '#eab308' : 'rgba(0,0,0,0.5)';
+			}).catch(e => {
+				const oldBg = this.flashBtn.style.background;
+				this.flashBtn.style.background = '#ef4444';
+				setTimeout(() => this.flashBtn.style.background = oldBg, 500);
+			});
+		}
+	},
+
+	captureVideo: function() {
+		if (!this.video.videoWidth) return;
+		this.canvas.width = this.video.videoWidth;
+		this.canvas.height = this.video.videoHeight;
+		this.canvas.getContext('2d').drawImage(this.video, 0, 0);
+		this.stopStream();
+		
+		const now = new Date();
+		const ts = now.toISOString().replace(/[-:T]/g, '').slice(0, 14);
+		this.nameInput.value = `IMG_${ts}`;
+		this.loadImage(this.canvas.toDataURL('image/jpeg'));
+	},
+
+	openModal: function(mode = 'edit') {
+		this.modal.style.display = 'flex';
+		this.ctx = this.canvas.getContext('2d');
+		if(mode === 'edit') {
+			this.canvas.style.display = 'block';
+			this.video.style.display = 'none';
+			document.getElementById('camera-overlay').style.display = 'none';
+			document.getElementById('camera-msg').style.display = 'none';
+			this.retakeBtn.style.display = this.isCameraSession ? 'block' : 'none';
+			this.initListeners();
+		} else if (mode === 'camera') {
+			this.canvas.style.display = 'none';
+			this.video.style.display = 'block';
+			this.retakeBtn.style.display = 'none';
+		}
+	},
+
+	stopStream: function() {
+		if (this.stream) {
+			this.stream.getTracks().forEach(t => { try { t.applyConstraints({ advanced: [{ torch: false }] }); } catch(e){} t.stop(); });
+			this.stream = null; this.track = null;
+		}
+	},
+
+	close: function() {
+		this.modal.style.display = 'none';
+		this.stopStream();
+		this.sourceImage = null;
+		this.cropRect = null;
+		this.resetView(); // Reset zoom when closing
+	},
+
+	loadImage: function(dataUrl) {
+		this.openModal('edit');
+		const img = new Image();
+		img.onload = () => {
+			this.sourceImage = img;
+			this.resetEdits(); // Full Reset (View + Rotation + Crop)
+		};
+		img.onerror = () => { alert("Error: Image format not supported."); this.close(); };
+		img.src = dataUrl;
+	},
+
+	resetEdits: function() {
+		this.currentRotation = 0;
+		this.cropRect = null;
+		this.resetView();
+		this.render();
+	},
+
+	rotate: function(deg) {
+		this.currentRotation = (this.currentRotation + deg) % 360;
+		this.cropRect = null;
+		this.render();
+	},
+
+	toggleCropMode: function() {
+		this.isCropping = !this.isCropping;
+		this.cropBtn.style.background = this.isCropping ? '#2563eb' : '';
+		this.cropBtn.style.color = this.isCropping ? 'white' : '';
+		// Visual feedback: Crosshair for Cropping, Hand for Panning
+		this.canvas.style.cursor = this.isCropping ? 'crosshair' : 'grab';
+	},
+
+	getCanvasCoords: function(e) {
+		const rect = this.canvas.getBoundingClientRect();
+		const cx = e.touches ? e.touches[0].clientX : e.clientX;
+		const cy = e.touches ? e.touches[0].clientY : e.clientY;
+		const scaleX = this.canvas.width / rect.width;
+		const scaleY = this.canvas.height / rect.height;
+		return { x: (cx - rect.left) * scaleX, y: (cy - rect.top) * scaleY };
+	},
+
+	handleDragStart: function(e) {
+		// Pinch Start (Mobile Zoom)
+		if (e.type === 'touchstart' && e.touches.length > 1) {
+			this.isDragging = false; 
+			this.isPanning = false;
+			const dx = e.touches[0].clientX - e.touches[1].clientX;
+			const dy = e.touches[0].clientY - e.touches[1].clientY;
+			this.lastDist = Math.hypot(dx, dy);
+			return;
+		}
+
+		if (e.type === 'touchstart') e.preventDefault();
+
+		if (this.isCropping) {
+			this.isDragging = true;
+			this.dragStart = this.getCanvasCoords(e);
+			this.cropRect = { x: this.dragStart.x, y: this.dragStart.y, w: 0, h: 0 };
+			this.render();
+		} else {
+			// Pan Start
+			this.isPanning = true;
+			this.canvas.style.cursor = 'grabbing';
+			const cx = e.touches ? e.touches[0].clientX : e.clientX;
+			const cy = e.touches ? e.touches[0].clientY : e.clientY;
+			this.panStart = { x: cx - this.view.x, y: cy - this.view.y };
+		}
+	},
+
+	handleDragMove: function(e) {
+		// Pinch Move
+		if (e.touches && e.touches.length > 1) {
+			e.preventDefault();
+			const dx = e.touches[0].clientX - e.touches[1].clientX;
+			const dy = e.touches[0].clientY - e.touches[1].clientY;
+			const curDist = Math.hypot(dx, dy);
+			if (this.lastDist > 0) {
+				const diff = curDist / this.lastDist;
+				const factor = 1 + (diff - 1) * 0.5; // Soften zoom speed
+				this.zoom(factor);
+			}
+			this.lastDist = curDist;
+			return;
+		}
+
+		if (e.type === 'touchmove') e.preventDefault();
+
+		if (this.isCropping && this.isDragging) {
+			const cur = this.getCanvasCoords(e);
+			const w = cur.x - this.dragStart.x;
+			const h = cur.y - this.dragStart.y;
+			this.cropRect = {
+				x: w < 0 ? cur.x : this.dragStart.x,
+				y: h < 0 ? cur.y : this.dragStart.y,
+				w: Math.abs(w),
+				h: Math.abs(h)
+			};
+			this.render();
+		} else if (this.isPanning) {
+			const cx = e.touches ? e.touches[0].clientX : e.clientX;
+			const cy = e.touches ? e.touches[0].clientY : e.clientY;
+			this.view.x = cx - this.panStart.x;
+			this.view.y = cy - this.panStart.y;
+			this.applyView();
+		}
+	},
+
+	handleDragEnd: function() {
+		this.isDragging = false;
+		this.isPanning = false;
+		this.lastDist = 0;
+		if(!this.isCropping) this.canvas.style.cursor = 'grab';
+
+		if(this.cropRect && (this.cropRect.w < 10 || this.cropRect.h < 10)) {
+			this.cropRect = null;
+			this.render();
+		}
+	},
+
+	render: function() {
+		if (!this.sourceImage) return;
+		const width = this.sourceImage.width;
+		const height = this.sourceImage.height;
+		const angle = this.currentRotation * Math.PI / 180;
+		const sin = Math.abs(Math.sin(angle));
+		const cos = Math.abs(Math.cos(angle));
+		const newWidth = width * cos + height * sin;
+		const newHeight = width * sin + height * cos;
+
+		this.canvas.width = newWidth;
+		this.canvas.height = newHeight;
+
+		this.ctx.clearRect(0, 0, newWidth, newHeight);
+		this.ctx.save();
+		this.ctx.translate(newWidth / 2, newHeight / 2);
+		this.ctx.rotate(angle);
+		this.ctx.drawImage(this.sourceImage, -width / 2, -height / 2);
+		this.ctx.restore();
+
+		if (this.cropRect) {
+			this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+			this.ctx.fillRect(0, 0, newWidth, newHeight);
+			this.ctx.clearRect(this.cropRect.x, this.cropRect.y, this.cropRect.w, this.cropRect.h);
+			this.ctx.save();
+			this.ctx.beginPath();
+			this.ctx.rect(this.cropRect.x, this.cropRect.y, this.cropRect.w, this.cropRect.h);
+			this.ctx.clip();
+			this.ctx.translate(newWidth / 2, newHeight / 2);
+			this.ctx.rotate(angle);
+			this.ctx.drawImage(this.sourceImage, -width / 2, -height / 2);
+			this.ctx.restore();
+			this.ctx.strokeStyle = '#ef4444';
+			this.ctx.lineWidth = 3;
+			this.ctx.strokeRect(this.cropRect.x, this.cropRect.y, this.cropRect.w, this.cropRect.h);
+		}
+	},
+
+	save: function() {
+		if (!this.sourceImage) return;
+		let name = this.nameInput.value.trim() || "New Image";
+		name = name.replace(/\.(jpg|jpeg|png)$/i, "");
+		const rect = this.cropRect;
+		
+		// Clean up view before saving (so render is pure)
+		this.cropRect = null;
+		this.resetView(); 
+		this.render();
+
+		let finalCanvas = this.canvas;
+		if (rect) {
+			const tempCanvas = document.createElement('canvas');
+			tempCanvas.width = rect.w;
+			tempCanvas.height = rect.h;
+			const tCtx = tempCanvas.getContext('2d');
+			tCtx.drawImage(this.canvas, rect.x, rect.y, rect.w, rect.h, 0, 0, rect.w, rect.h);
+			finalCanvas = tempCanvas;
+			this.cropRect = rect;
+		}
+
+		finalCanvas.toBlob((blob) => {
+			if (typeof saveProcessedImageToDB === 'function') {
+				saveProcessedImageToDB(blob, name);
+				this.close();
+			} else { alert("Error: saveProcessedImageToDB missing"); }
+		}, 'image/jpeg', 0.85);
+	}
+};
+</script>
+
+</body>
+</html>
diff --git a/docs/studio.js b/docs/studio.js
new file mode 100644
index 0000000..f98314e
--- /dev/null
+++ b/docs/studio.js
@@ -0,0 +1,2349 @@
+/* studio.js - Main Application Logic */
+
+const DB_NAME = 'PcbReTrace'; const DB_VER = 1;
+
+const ICONS = { RESISTOR: `<svg viewBox="0 0 24 24" fill="none"><rect x="4" y="6" width="16" height="12" rx="3" fill="#bae6fd" stroke="#0ea5e9" stroke-width="1"/><rect x="7" y="6" width="2" height="12" fill="#ef4444"/><rect x="11" y="6" width="2" height="12" fill="#000000"/><rect x="15" y="6" width="2" height="12" fill="#ef4444"/><line x1="1" y1="12" x2="4" y2="12" stroke="#94a3b8" stroke-width="2"/><line x1="20" y1="12" x2="23" y2="12" stroke="#94a3b8" stroke-width="2"/></svg>`, INDUCTOR: `<svg viewBox="0 0 24 24" fill="none"><rect x="4" y="5" width="16" height="14" rx="4" fill="#bbf7d0" stroke="#22c55e" stroke-width="1"/><rect x="7" y="5" width="2" height="14" fill="#cbd5e1"/><rect x="11" y="5" width="2" height="14" fill="#ef4444"/><rect x="15" y="5" width="2" height="14" fill="#ef4444"/><line x1="1" y1="12" x2="4" y2="12" stroke="#94a3b8" stroke-width="2"/><line x1="20" y1="12" x2="23" y2="12" stroke="#94a3b8" stroke-width="2"/></svg>`, COIL: `<svg viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round"><line x1="1" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="23" y2="12"/><path d="M5 12 C5 4 9 4 9 12"/><path d="M9 12 C9 19 10 19 10 12" stroke-opacity="0.5"/><path d="M10 12 C10 4 14 4 14 12"/><path d="M14 12 C14 19 15 19 15 12" stroke-opacity="0.5"/><path d="M15 12 C15 4 19 4 19 12"/></svg>` };
+const TOOL_REGISTRY = { 'R': [{url:'resistor.html',icon:ICONS.RESISTOR,title:'Resistor'}], 'L': [{url:'inductor.html',icon:ICONS.INDUCTOR,title:'Inductor'},{url:'coil.html',icon:ICONS.COIL,title:'Coil'}] };
+const MAX_DIRECT_TOOLS = 3;
+
+// Global State
+let db=null, deviceList=[], currentDeviceId=null, bomList=[], currentBomId=null, bomData=[], bomImages=[], currentImgId=null, sortMode='none', editingIndex=-1, mapState={scale:1,x:0,y:0,isDragging:false,startX:0,startY:0};
+let skipNextFit = false;
+let returnToMap = false;
+let spyglass = null;
+let isMainViewActive = true; // Tracks if Spyglass is showing the actual source image
+
+// Phase 6 Extensions
+let cvManager = null;
+let stitchEditor = null;
+let currentOverlaps = [];
+let netManager = null;
+let inspector = null;
+
+// Utility: Global UUID generator (used by StitchEditor too)
+window.uuid = function(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c=>{var r=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);return v.toString(16);}); }
+
+class PcbDatabase {
+	constructor() { this.name=DB_NAME; this.ver=DB_VER; }
+	async init() { return new Promise((r,j)=>{
+		const q=indexedDB.open(this.name,this.ver);
+		q.onupgradeneeded=e=>{
+			const d=e.target.result;
+			if(d.objectStoreNames.contains('projects')) d.deleteObjectStore('projects');
+			if(!d.objectStoreNames.contains('devices')) d.createObjectStore('devices',{keyPath:'id'});
+			if(!d.objectStoreNames.contains('boards')) { const bs=d.createObjectStore('boards',{keyPath:'id'}); bs.createIndex('deviceId','deviceId',{unique:false}); }
+			if(!d.objectStoreNames.contains('components')) { const cs=d.createObjectStore('components',{keyPath:'id'}); cs.createIndex('boardId','boardId',{unique:false}); }
+			if(!d.objectStoreNames.contains('images')) { const is=d.createObjectStore('images',{keyPath:'id'}); is.createIndex('boardId','boardId',{unique:false}); }
+
+			// v6: POI Support
+			if(!d.objectStoreNames.contains('overlappedImages')) {
+				const os=d.createObjectStore('overlappedImages',{keyPath:'id'});
+				os.createIndex('fromImageId','fromImageId');
+			}
+			// v7: Nets Store
+			if(!d.objectStoreNames.contains('nets')) {
+				const ns=d.createObjectStore('nets',{keyPath:'id'});
+				// No index needed yet as we usually load all nets for a board via manual filter or ID list
+			}
+
+		};
+		q.onsuccess=e=>{this.db=e.target.result;r()};
+		q.onerror=e=>{ console.error("DB Open Error:", e); j(e); };
+	}); }
+
+	// Helpers
+	async _tx(s,m,cb){ return new Promise((r,j)=>{const t=this.db.transaction(s,m); const q=cb(t.objectStore(s)); q.onsuccess=()=>r(q.result); q.onerror=()=>j(q.error);}); }
+	async _ix(s,i,v){ return new Promise((r,j)=>{const q=this.db.transaction(s,'readonly').objectStore(s).index(i).getAll(v); q.onsuccess=()=>r(q.result); q.onerror=()=>j(q.error);}); }
+
+	// Core CRUD
+	async getDevices() { return this._tx('devices','readonly',s=>s.getAll()); }
+	async addDevice(d) { return this._tx('devices','readwrite',s=>s.put(d)); }
+	async getProjectsByDevice(devId) { return this._ix('boards', 'deviceId', devId); }
+	async getProject(id) { return this._tx('boards','readonly',s=>s.get(id)); }
+	async addProject(p) { return this._tx('boards','readwrite',s=>s.put(p)); }
+	async deleteProject(id) { const cs=await this.getComponents(id); const is=await this.getImages(id); const tx=this.db.transaction(['boards','components','images'],'readwrite'); cs.forEach(c=>tx.objectStore('components').delete(c.id)); is.forEach(i=>tx.objectStore('images').delete(i.id)); tx.objectStore('boards').delete(id); return new Promise(r=>tx.oncomplete=r); }
+	async getComponents(pid) { return this._ix('components','boardId',pid); }
+	async addComponent(c) { return this._tx('components','readwrite',s=>s.put(c)); }
+	async deleteComponent(id) { return this._tx('components','readwrite',s=>s.delete(id)); }
+	async clearComponents(pid) { const cs=await this.getComponents(pid); const tx=this.db.transaction('components','readwrite'); cs.forEach(c=>tx.objectStore('components').delete(c.id)); return new Promise(r=>tx.oncomplete=r); }
+	async clearProjectData(pid) { const cs=await this.getComponents(pid); const is=await this.getImages(pid); const tx=this.db.transaction(['components','images'],'readwrite'); cs.forEach(c=>tx.objectStore('components').delete(c.id)); is.forEach(i=>tx.objectStore('images').delete(i.id)); return new Promise(r=>tx.oncomplete=r); }
+	async getImages(pid) { return this._ix('images','boardId',pid); }
+	async addImage(i) { return this._tx('images','readwrite',s=>s.put(i)); }
+	async deleteImage(id) { return this._tx('images','readwrite',s=>s.delete(id)); }
+	async getImage(id) { return this._tx('images', 'readonly', s => s.get(id)); }
+	async getNets() { return this._tx('nets','readonly',s=>s.getAll()); }
+	async addNet(n) { return this._tx('nets','readwrite',s=>s.put(n)); }
+	async deleteNet(id) { return this._tx('nets','readwrite',s=>s.delete(id)); }
+
+	// POI Extensions
+	async addOverlap(ov) { return this._tx('overlappedImages','readwrite',s=>s.put(ov)); }
+	async getOverlapsForPair(id1, id2) {
+		 const all = await this._tx('overlappedImages','readonly',s=>s.getAll());
+		 return all.find(x => (x.fromImageId===id1 && x.toImageId===id2) || (x.fromImageId===id2 && x.toImageId===id1));
+	}
+	async getOverlapsForImage(id) {
+		 const all = await this._tx('overlappedImages','readonly',s=>s.getAll());
+		 return all.filter(x => x.fromImageId===id || x.toImageId===id);
+	}
+	async deleteOverlapsForPair(id1, id2) {
+		const tx = this.db.transaction('overlappedImages', 'readwrite');
+		const store = tx.objectStore('overlappedImages');
+		const req = store.getAll();
+		return new Promise(resolve => {
+			req.onsuccess = e => {
+				const all = e.target.result;
+				const toDel = all.filter(x => (x.fromImageId===id1 && x.toImageId===id2) || (x.fromImageId===id2 && x.toImageId===id1));
+				let c=0;
+				if(toDel.length===0) resolve();
+				toDel.forEach(item => { store.delete(item.id).onsuccess=()=>{ c++; if(c===toDel.length) resolve(); }});
+			}
+		});
+	}
+}
+
+// MAIN INIT
+async function init() {
+	db = new PcbDatabase();
+	await db.init();
+
+	cvManager = new CVManager();
+	cvManager.init(); // Lazy load (don't await)
+
+    // Init net managers
+    netManager = new NetManager(db);
+    inspector = new Inspector(db, cvManager);
+
+    // [CRITICAL] Expose to window so inline HTML onclicks (generated by Inspector) work
+    window.netManager = netManager;
+    window.inspector = inspector;
+
+	stitchEditor = new StitchEditor(db, cvManager);
+
+	deviceList = await db.getDevices();
+	if(deviceList.length === 0) {
+		const defDev = { id: uuid(), name: 'Default Device' };
+		await db.addDevice(defDev);
+		deviceList = [defDev];
+		const bid = uuid();
+		await db.addProject({ id: bid, deviceId: defDev.id, name: 'Main Board', sortMode:'none' });
+	}
+
+	currentDeviceId = localStorage.getItem('pcb_dev_id') || deviceList[0].id;
+	if (!deviceList.find(d => d.id === currentDeviceId)) currentDeviceId = deviceList[0].id;
+
+	updateDeviceDropdown();
+	await loadDeviceBoms();
+
+	document.getElementById('add-form').addEventListener('keydown', function(e) { if(e.key === 'Enter') addPart(); });
+	if (typeof PcbSpyglass !== 'undefined') {
+		spyglass = new PcbSpyglass('preview-canvas', 'zoom-level', (newX, newY) => {
+			// When user drags the spyglass, update the hidden inputs (only for the Main View)
+			if (isMainViewActive) {
+				document.getElementById('inp-x').value = newX;
+				document.getElementById('inp-y').value = newY;
+			}
+			// Optional: If we want real-time DB saving while dragging in the list view,
+			// we could enable it, but usually updating inputs + clicking "Add/Update" is safer.
+		});
+	}
+	setupDragDrop();
+	NavManager.init();
+}
+
+// Helper: Find all transitive connections for a given image
+// Returns Array of { sourceId, matrix (Source->Target) }
+async function getConnectedImages(targetImgId) {
+	if (!targetImgId || !cvManager) return [];
+
+	// Use Helper
+	const paths = await ImageGraph.solvePaths(targetImgId, cvManager, db);
+
+	// Map to expected format
+	return paths.map(p => ({
+		sourceId: p.id,
+		matrix: p.H
+	}));
+}
+
+function updateDeviceDropdown() {
+	const s = document.getElementById('device-select'); s.innerHTML='';
+	deviceList.forEach(d => {
+		const o = document.createElement('option'); o.value=d.id; o.innerText=d.name;
+		if(d.id===currentDeviceId) o.selected=true;
+		s.appendChild(o);
+	});
+}
+
+async function switchDevice() {
+	resetStickyEditor();
+	currentDeviceId = document.getElementById('device-select').value;
+	localStorage.setItem('pcb_dev_id', currentDeviceId);
+	await loadDeviceBoms();
+}
+
+async function loadDeviceBoms() {
+	bomList = await db.getProjectsByDevice(currentDeviceId);
+	const s = document.getElementById('bom-select'); s.innerHTML='';
+	if (bomList.length === 0) {
+		s.innerHTML = '<option disabled selected>No Boards</option>';
+		currentBomId = null;
+	} else {
+		const groups = {};
+		bomList.forEach(b => {
+			const sec = b.section || "General";
+			if(!groups[sec]) groups[sec] = [];
+			groups[sec].push(b);
+		});
+		for (const [secName, boms] of Object.entries(groups)) {
+			const grp = document.createElement('optgroup'); grp.label = secName;
+			boms.forEach(b => {
+				const o = document.createElement('option'); o.value=b.id; o.innerText=b.name;
+				grp.appendChild(o);
+			});
+			s.appendChild(grp);
+		}
+		const lastBom = localStorage.getItem('pcb_bom_id');
+		currentBomId = (lastBom && bomList.find(b=>b.id===lastBom)) ? lastBom : bomList[0].id;
+		s.value = currentBomId;
+	}
+	await loadProjectData();
+}
+
+async function switchBom() {
+	resetStickyEditor();
+	currentBomId = document.getElementById('bom-select').value;
+	localStorage.setItem('pcb_bom_id', currentBomId);
+	currentImgId = null;
+	await loadProjectData();
+}
+
+async function loadProjectData() {
+	if (!currentBomId) { bomData = []; bomImages = []; renderList(); return; }
+
+	const meta = bomList.find(p=>p.id===currentBomId);
+	if (meta) {
+		sortMode = (meta && meta.sortMode) ? meta.sortMode : 'none';
+		document.getElementById('sort-select').value = sortMode;
+	}
+
+	bomData = await db.getComponents(currentBomId);
+	bomImages = await db.getImages(currentBomId);
+
+	for (const img of bomImages) {
+		if (/\.(jpg|jpeg|png|webp)$/i.test(img.name)) {
+			img.name = img.name.replace(/\.[^/.]+$/, "");
+			db.addImage(img);
+		}
+	}
+
+	const imgSel = document.getElementById('image-select');
+	imgSel.innerHTML = '';
+	if(bomImages.length > 0) {
+	    bomImages.forEach(img => {
+	        const opt = document.createElement('option');
+	        opt.value = img.id; opt.innerText = img.name;
+	        imgSel.appendChild(opt);
+	    });
+	    if(!currentImgId || !bomImages.find(i=>i.id===currentImgId)) currentImgId = bomImages[0].id;
+	    imgSel.value = currentImgId;
+	    if(document.getElementById('view-map').classList.contains('active')) showImage(currentImgId);
+	} else {
+	    currentImgId = null;
+	    imgSel.innerHTML = '<option disabled selected>No Images</option>';
+	    clearMap();
+	}
+	renderList();
+}
+
+async function createNewDevice() {
+	const n = prompt("New Device Name:");
+	if (n) {
+		const id = uuid();
+		await db.addDevice({ id, name: n });
+		currentDeviceId = id;
+		const bid = uuid();
+		await db.addProject({ id: bid, deviceId: id, name: 'Main Board', sortMode: 'none' });
+		deviceList = await db.getDevices();
+		updateDeviceDropdown();
+		await loadDeviceBoms();
+	}
+}
+
+async function createNewBom() {
+	if (!currentDeviceId) return alert("Select a device first.");
+	const n=prompt("New Board Name:");
+	if(n) {
+		const sec = prompt("Section (Optional):") || "";
+		const id=uuid();
+		await db.addProject({id, deviceId: currentDeviceId, name:n, section: sec, lastModified:Date.now(), sortMode:'none'});
+		currentBomId=id;
+		await loadDeviceBoms();
+	}
+}
+
+// --- SETTINGS ---
+function openBoardSettings() {
+	if (!currentBomId) return;
+	const p = bomList.find(x => x.id === currentBomId);
+	if (!p) return;
+	document.getElementById('edit-board-name').value = p.name;
+	document.getElementById('edit-board-section').value = p.section || "";
+	const ds = document.getElementById('edit-board-device'); ds.innerHTML = '';
+	deviceList.forEach(d => {
+		const o = document.createElement('option'); o.value = d.id; o.innerText = d.name;
+		if (d.id === p.deviceId) o.selected = true;
+		ds.appendChild(o);
+	});
+	document.getElementById('board-settings-modal').style.display = 'flex';
+}
+async function saveBoardSettings() {
+	const p = bomList.find(x => x.id === currentBomId);
+	if (!p) return;
+	const newName = document.getElementById('edit-board-name').value;
+	const newSec = document.getElementById('edit-board-section').value;
+	const newDevId = document.getElementById('edit-board-device').value;
+	if (newName) {
+		p.name = newName; p.section = newSec; p.deviceId = newDevId;
+		await db.addProject(p);
+		document.getElementById('board-settings-modal').style.display = 'none';
+		if (newDevId !== currentDeviceId) {
+			currentDeviceId = newDevId;
+			updateDeviceDropdown();
+		}
+		await loadDeviceBoms();
+	}
+}
+function openDeviceSettings() {
+	if (!currentDeviceId) return;
+	const d = deviceList.find(x => x.id === currentDeviceId);
+	if (!d) return;
+	document.getElementById('edit-device-name').value = d.name;
+	document.getElementById('device-settings-modal').style.display = 'flex';
+}
+async function saveDeviceSettings() {
+	const d = deviceList.find(x => x.id === currentDeviceId);
+	if (!d) return;
+	const newName = document.getElementById('edit-device-name').value;
+	if (newName && newName !== d.name) {
+		d.name = newName;
+		await db.addDevice(d);
+		deviceList = await db.getDevices();
+		updateDeviceDropdown();
+	}
+	document.getElementById('device-settings-modal').style.display = 'none';
+}
+async function deleteCurrentDevice() {
+	if (!currentDeviceId) return;
+
+	// 1. Modal Check
+	if (!await confirmAction("Are you sure? This will PERMANENTLY DELETE the device and ALL its boards, components, and images.\n\nThis action cannot be undone.", "Delete Device")) {
+		return;
+	}
+
+	try {
+		const boards = await db.getProjectsByDevice(currentDeviceId);
+		for (const board of boards) {
+			const images = await db.getImages(board.id);
+			for (const img of images) {
+				const overlaps = await db.getOverlapsForImage(img.id);
+				const tx = db.db.transaction('overlappedImages', 'readwrite');
+				const store = tx.objectStore('overlappedImages');
+				overlaps.forEach(ov => store.delete(ov.id));
+				await new Promise(r => tx.oncomplete = r);
+			}
+			await db.deleteProject(board.id);
+		}
+
+		await db._tx('devices', 'readwrite', s => s.delete(currentDeviceId));
+		document.getElementById('device-settings-modal').style.display = 'none';
+
+		deviceList = await db.getDevices();
+		if (deviceList.length === 0) {
+			const defDev = { id: uuid(), name: 'Default Device' };
+			await db.addDevice(defDev);
+			deviceList = [defDev];
+			const bid = uuid();
+			await db.addProject({ id: bid, deviceId: defDev.id, name: 'Main Board', sortMode:'none' });
+		}
+
+		currentDeviceId = deviceList[0].id;
+		localStorage.setItem('pcb_dev_id', currentDeviceId);
+
+		updateDeviceDropdown();
+		await loadDeviceBoms();
+		resetStickyEditor();
+	} catch (e) {
+		console.error("Delete failed:", e);
+		alert("Error deleting device: " + e.message);
+	}
+}
+
+// --- COMPONENTS ---
+async function addPart() {
+	const id = document.getElementById('inp-id').value;
+	const label = document.getElementById('inp-label').value.toUpperCase().trim();
+	const value = document.getElementById('inp-value').value;
+	const desc = document.getElementById('inp-desc').value;
+	const x = document.getElementById('inp-x').value;
+	const y = document.getElementById('inp-y').value;
+	const imgId = document.getElementById('inp-img-id').value;
+
+	if(!label) return alert("Ref required");
+
+	// Check collision
+	const collision = bomData.find(c => c.label === label && c.id !== id);
+	if (collision) {
+		if(!await confirmAction("Reference exists. Overwrite?", "Overwrite")) return;
+		await db.deleteComponent(collision.id);
+	}
+
+	// Save
+	const c = { id: id || uuid(), boardId: currentBomId, label, value, desc };
+	if(x && y && imgId) { c.x = parseFloat(x); c.y = parseFloat(y); c.imgId = imgId; }
+
+	await db.addComponent(c);
+	document.getElementById('inp-id').value = c.id;
+	await loadProjectData();
+
+	if(returnToMap) { switchView('map'); returnToMap = false; }
+	else {
+		// Optional: blink the button or give feedback
+		const btn = document.querySelector('.btn-add');
+		const origText = btn.innerText;
+		btn.innerText = "Saved!";
+		setTimeout(() => btn.innerText = origText, 1000);
+	}
+}
+
+async function deleteCurrentPart() {
+	const id = document.getElementById('inp-id').value;
+
+	// Safety: Don't do anything if no component is selected (e.g. creating new)
+	if (!id) return;
+
+	if (await confirmAction("Delete this component?", "Delete")) {
+		await db.deleteComponent(id);
+		await loadProjectData();
+		resetStickyEditor(); // Clear the form/images after deletion
+	}
+}
+
+// --- IMPORT / EXPORT ---
+// Device Export
+async function exportDeviceZIP() {
+	if(!window.JSZip) return alert("JSZip required.");
+	if(!currentDeviceId) return;
+
+	const dev = deviceList.find(d => d.id === currentDeviceId);
+	const boms = await db.getProjectsByDevice(currentDeviceId);
+	const zip = new JSZip();
+    
+    // Fetch ALL nets once (since we don't have an index, we filter in JS)
+    const allNets = await db.getNets();
+
+	// 1. Generate README
+	const readmeContent = `PCB ReTrace Data Export
+Type: Full Device Backup (${dev.name})
+Generated by: pcb.etaras.com
+Date: ${new Date().toISOString()}
+
+HOW TO USE:
+1. Go to https://pcb.etaras.com/studio.html
+2. Click "Import Device" or drag and drop this ZIP file into the tool.
+`;
+	zip.file("README.txt", readmeContent);
+
+	// 2. Generate Manifest
+	const manifest = {
+		device: dev,
+		version: DB_VER,
+		source: "pcb.etaras.com",
+		boards: []
+	};
+
+	const imgFolder = zip.folder("images");
+
+	for (const bom of boms) {
+		const comps = await db.getComponents(bom.id);
+		const imgs = await db.getImages(bom.id);
+        
+        // Filter nets for this specific board
+        const boardNets = allNets.filter(n => n.projectId === bom.id);
+
+		const overlapsMap = new Map();
+		for(const img of imgs) {
+			const ovs = await db.getOverlapsForImage(img.id);
+			ovs.forEach(o => overlapsMap.set(o.id, o));
+		}
+
+		const cleanComps = comps.map(c => { const { boardId, ...rest } = c; return rest; });
+		const imgMeta = imgs.map(img => ({ id: img.id, name: img.name, type: 'image/jpeg' }));
+
+		manifest.boards.push({
+			meta: bom,
+			components: cleanComps,
+			images: imgMeta,
+			overlaps: Array.from(overlapsMap.values()),
+            nets: boardNets // Add Nets to manifest
+		});
+
+		// Image Loop
+		for (const img of imgs) {
+			let blobToSave = img.blob;
+			if (img.blob.type !== 'image/jpeg') {
+				const bmp = await createImageBitmap(img.blob);
+				const canvas = document.createElement('canvas');
+				canvas.width = bmp.width;
+				canvas.height = bmp.height;
+				canvas.getContext('2d').drawImage(bmp, 0, 0);
+				bmp.close();
+				blobToSave = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+			}
+			imgFolder.file(`${img.id}.jpg`, blobToSave);
+		}
+	}
+
+	zip.file("device.json", JSON.stringify(manifest, null, 2));
+	zip.generateAsync({type:"blob"}).then(c => dl(c, `${dev.name}_Backup.zip`, 'application/zip'));
+}
+
+function isValidBoardData(data) {
+	// 1. Root Object check
+	if (!data || typeof data !== 'object') return false;
+
+	// 2. Meta Object check
+	if (!data.meta || typeof data.meta !== 'object') return false;
+	// ID must be a string and not empty
+	if (typeof data.meta.id !== 'string' || !data.meta.id.trim()) return false;
+	// Name must be a string (can be empty, but must exist)
+	if (typeof data.meta.name !== 'string') return false;
+
+	// 3. Components Array check
+	if (!Array.isArray(data.components)) return false;
+
+	// 4. Images Array check (optional but must be array if present)
+	if (data.images && !Array.isArray(data.images)) return false;
+
+	return true;
+}
+
+function isValidDeviceManifest(data) {
+	if (!data || typeof data !== 'object') return false;
+
+	// 1. Device Object check
+	if (!data.device || typeof data.device !== 'object') return false;
+	if (typeof data.device.id !== 'string' || !data.device.id.trim()) return false;
+	if (typeof data.device.name !== 'string') return false;
+
+	// 2. Boards Array check
+	if (!Array.isArray(data.boards)) return false;
+
+	// 3. Version check (optional warning could be added here, but structural check is pass/fail)
+	return true;
+}
+
+function isValidLegacyData(data) {
+	// Case A: Top-level Array of objects
+	if (Array.isArray(data)) return true;
+
+	// Case B: Object with 'components' or 'data' array
+	if (data && typeof data === 'object') {
+		return Array.isArray(data.components) || Array.isArray(data.data);
+	}
+	return false;
+}
+
+async function importFile(f) {
+	if(!f) return;
+	const name = f.name.toLowerCase();
+
+	// 1. ZIP Import (Device Backup or Board Export)
+	if(name.endsWith('.zip')) {
+		await processZIP(f);
+		return;
+	}
+
+	// 2. JSON Import (Metadata only)
+	if(name.endsWith('.json')) {
+		const r = new FileReader();
+		r.onload = async e => {
+			try {
+				const json = JSON.parse(e.target.result);
+
+				if (isValidBoardData(json)) {
+					if (!currentDeviceId) return alert("Select a Device first.");
+					if(confirm(`Import Board "${json.meta.name}" from JSON?`)) {
+						json.meta.deviceId = currentDeviceId;
+						await processImportData(json, null);
+					}
+					return;
+				}
+
+				if (isValidDeviceManifest(json)) {
+					alert("Device Manifests should be imported via ZIP to include images.\nImporting metadata only.");
+					if(confirm("Proceed with metadata-only import?")) {
+						await restoreDevice(json, null);
+					}
+					return;
+				}
+
+				if (isValidLegacyData(json)) {
+					if(confirm("Detected Legacy BOM format. Import into current board?")) {
+						await processLegacyImport(json);
+					}
+					return;
+				}
+				throw new Error("JSON structure does not match known schemas.");
+			} catch(e) {
+				console.error(e);
+				alert("Invalid JSON: " + e.message);
+			}
+		};
+		r.readAsText(f);
+		return;
+	}
+
+	// 3. Image Import (Drag & Drop -> Open Editor)
+	if(/\.(jpg|jpeg|png|webp)$/i.test(name)) {
+		// SAFETY: Ensure a board is currently active
+		if(!currentBomId) {
+			alert("Cannot import image: No board selected.\nPlease select or create a board first.");
+			return;
+		}
+
+		// Read file as DataURL to pass to the Editor
+		const r = new FileReader();
+		r.onload = e => {
+			if (typeof ImageImporter !== 'undefined') {
+				// Pre-fill the name
+				if(ImageImporter.nameInput) {
+					ImageImporter.nameInput.value = f.name.replace(/\.[^/.]+$/, "");
+				}
+				// Open the Modal
+				ImageImporter.loadImage(e.target.result);
+			} else {
+				// Fallback if UI not loaded (unlikely)
+				if(confirm(`Import image "${f.name}"?`)) {
+					saveProcessedImageToDB(f, f.name);
+				}
+			}
+		};
+		r.readAsDataURL(f);
+		return;
+	}
+}
+
+// Button Handler (keeps input element logic)
+function handleImport(i) {
+	const f = i.files[0];
+	if(f) importFile(f);
+	i.value = ''; // Reset input so same file can be selected again
+}
+
+function setupDragDrop() {
+	const zone = document.body;
+	let dragCounter = 0; // Fixes flickering when dragging over child elements
+
+	// 1. Drag Enter
+	zone.addEventListener('dragenter', e => {
+		e.preventDefault();
+		dragCounter++;
+		zone.classList.add('drag-active');
+	});
+
+	// 2. Drag Leave
+	zone.addEventListener('dragleave', e => {
+		e.preventDefault();
+		dragCounter--;
+		if(dragCounter === 0) zone.classList.remove('drag-active');
+	});
+
+	// 3. Drag Over (Required to allow dropping)
+	zone.addEventListener('dragover', e => e.preventDefault());
+
+	// 4. Drop
+	zone.addEventListener('drop', async e => {
+		e.preventDefault();
+		dragCounter = 0;
+		zone.classList.remove('drag-active');
+
+		if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+			// Process only the first file
+			await importFile(e.dataTransfer.files[0]);
+		}
+	});
+}
+
+async function processZIP(file) {
+	if(!window.JSZip) return alert("JSZip library not loaded.");
+
+	try {
+		const zip = await JSZip.loadAsync(file);
+		let recognized = false;
+
+		// CASE A: Device Backup
+		if (zip.file("device.json")) {
+			const content = await zip.file("device.json").async("string");
+			let manifest;
+			try { manifest = JSON.parse(content); } catch(e) { throw new Error("device.json is corrupt"); }
+
+			// STRICT CHECK
+			if (isValidDeviceManifest(manifest)) {
+				recognized = true;
+				const vMsg = manifest.version ? `(v${manifest.version})` : '';
+				const sMsg = manifest.source ? `\nSource: ${manifest.source}` : '';
+
+				if(confirm(`Restore Device: "${manifest.device.name}" ${vMsg}?${sMsg}\n\nThis will merge boards and overwrite existing components.`)) {
+					await restoreDevice(manifest, zip);
+				}
+			} else {
+				throw new Error("ZIP contains device.json, but it is missing required fields (id, name, boards).");
+			}
+		}
+
+		// CASE B: Single Board Backup
+		else if (zip.file("bom.json")) {
+			const content = await zip.file("bom.json").async("string");
+			let data;
+			try { data = JSON.parse(content); } catch(e) { throw new Error("bom.json is corrupt"); }
+
+			// STRICT CHECK
+			if (isValidBoardData(data)) {
+				recognized = true;
+				if (!currentDeviceId) {
+					alert("Please select or create a Device first.");
+					return;
+				}
+				if(confirm(`Import Board: "${data.meta.name}" into current Device?`)) {
+					data.meta.deviceId = currentDeviceId;
+					await processImportData(data, zip);
+				}
+			} else {
+				throw new Error("ZIP contains bom.json, but it is missing required fields (id, meta, components).");
+			}
+		}
+
+		if (!recognized) {
+			alert("Unrecognized ZIP format.\n\nExpected 'device.json' or 'bom.json' with valid structure.");
+		}
+
+	} catch(e) {
+		console.error(e);
+		alert("Import Failed: " + e.message);
+	}
+}
+
+async function restoreDevice(manifest, zip) {
+	const devId = manifest.device.id;
+	const existingDev = deviceList.find(d => d.id === devId);
+	if (!existingDev) {
+		await db.addDevice(manifest.device);
+	}
+
+	// --- PRUNING PHASE 1: BOARDS ---
+	const localBoards = await db.getProjectsByDevice(devId);
+	const manifestBoardIds = new Set(manifest.boards.map(b => b.meta.id));
+	for (const lb of localBoards) {
+		if (!manifestBoardIds.has(lb.id)) {
+			await db.deleteProject(lb.id);
+            // Note: deleteProject doesn't currently delete Nets automatically in the DB class
+            // We should ideally clean them up, but for now we focus on the restore logic.
+			console.log(`Pruned Board: ${lb.name}`);
+		}
+	}
+
+	const imgFolder = zip.folder("images");
+	let updatedBoards = 0;
+	let mergedBoards = 0;
+
+	for (const boardData of manifest.boards) {
+		const boardId = boardData.meta.id;
+		const localBoard = await db.getProject(boardId);
+
+		// Timestamp Logic
+		const incomingTime = boardData.meta.lastModified || 0;
+		const localTime = localBoard ? (localBoard.lastModified || 0) : -1;
+		const isNewer = incomingTime > localTime;
+
+		if (isNewer) {
+			// Update Meta
+			boardData.meta.deviceId = devId;
+			await db.addProject(boardData.meta);
+			if(localBoard) updatedBoards++;
+
+			// --- PRUNING PHASE 2: CONTENT ---
+			// 1. Prune Components
+			const localComps = await db.getComponents(boardId);
+			const importCompIds = new Set(boardData.components.map(c => c.id));
+			for(const lc of localComps) {
+				if(!importCompIds.has(lc.id)) await db.deleteComponent(lc.id);
+			}
+
+			// 2. Prune Images
+			const localImages = await db.getImages(boardId);
+			const importImgIds = new Set(boardData.images.map(i => i.id));
+			for(const li of localImages) {
+				if(!importImgIds.has(li.id)) await db.deleteImage(li.id);
+			}
+
+			// 3. Prune Overlaps
+			if(localImages.length > 0) {
+				const boardOverlapIds = new Set();
+				for(const li of localImages) {
+					const ovs = await db.getOverlapsForImage(li.id);
+					ovs.forEach(o => boardOverlapIds.add(o.id));
+				}
+				const importOvIds = new Set((boardData.overlaps || []).map(o => o.id));
+				const tx = db.db.transaction('overlappedImages', 'readwrite');
+				const store = tx.objectStore('overlappedImages');
+				boardOverlapIds.forEach(ovid => {
+					if(!importOvIds.has(ovid)) store.delete(ovid);
+				});
+			}
+
+            // 4. Prune Nets [NEW]
+            const allNets = await db.getNets();
+            const localNets = allNets.filter(n => n.projectId === boardId);
+            const importNetIds = new Set((boardData.nets || []).map(n => n.id));
+            for(const ln of localNets) {
+                if(!importNetIds.has(ln.id)) await db.deleteNet(ln.id);
+            }
+
+		} else {
+			mergedBoards++;
+		}
+
+		// --- UPSERT PHASE ---
+
+		// Images (unchanged logic...)
+		if (imgFolder && boardData.images) {
+			for (const im of boardData.images) {
+				if (!isNewer) {
+					const existingImg = await db.getImage(im.id);
+					if (existingImg) continue;
+				}
+				const cleanStoredId = im.id.split('/').pop();
+				let filename = cleanStoredId + ".jpg";
+				let file = imgFolder.file(filename);
+				if (!file) file = zip.file("images/" + filename);
+				if (!file) {
+					const cleanExt = (im.type.split('/')[1] || 'png');
+					filename = cleanStoredId + "." + cleanExt;
+					file = imgFolder.file(filename);
+					if (!file) file = zip.file("images/" + filename);
+				}
+				if (file) {
+					const blob = await file.async("blob");
+					const cleanName = im.name.replace(/\.[^/.]+$/, "");
+					await db.addImage({ id: im.id, boardId: boardId, blob, name: cleanName });
+				}
+			}
+		}
+
+		// Components
+		for (const c of boardData.components) {
+			c.boardId = boardId;
+			if (isNewer) {
+				await db.addComponent(c);
+			} else {
+				const existingC = await db._tx('components', 'readonly', s => s.get(c.id));
+				if (!existingC) await db.addComponent(c);
+			}
+		}
+
+		// Overlaps
+		if (boardData.overlaps) {
+			for (const ov of boardData.overlaps) {
+				if (isNewer) {
+					await db.addOverlap(ov);
+				} else {
+					const existingOv = await db._tx('overlappedImages', 'readonly', s => s.get(ov.id));
+					if (!existingOv) await db.addOverlap(ov);
+				}
+			}
+		}
+
+        // Nets [NEW]
+        if (boardData.nets) {
+            for (const net of boardData.nets) {
+                // Ensure correct association
+                net.projectId = boardId; 
+                if (isNewer) {
+                    await db.addNet(net);
+                } else {
+                    const existingNet = await db._tx('nets', 'readonly', s => s.get(net.id));
+                    if (!existingNet) await db.addNet(net);
+                }
+            }
+        }
+	}
+
+	deviceList = await db.getDevices();
+	currentDeviceId = devId;
+	updateDeviceDropdown();
+	await loadDeviceBoms();
+}
+
+async function processImportData(data, zipObj) {
+	const boardId = data.meta.id;
+	const localBoard = await db.getProject(boardId);
+
+	const incomingTime = data.meta.lastModified || 0;
+	const localTime = localBoard ? (localBoard.lastModified || 0) : -1;
+	const isNewer = incomingTime > localTime;
+
+	if (isNewer) {
+		// Update Meta
+		data.meta.deviceId = localBoard ? localBoard.deviceId : currentDeviceId;
+		await db.addProject(data.meta);
+
+		// --- PRUNING PHASE ---
+
+		// 1. Components
+		const localComps = await db.getComponents(boardId);
+		const importCompIds = new Set(data.components.map(c => c.id));
+		for(const lc of localComps) {
+			if(!importCompIds.has(lc.id)) await db.deleteComponent(lc.id);
+		}
+
+		// 2. Images
+		const localImages = await db.getImages(boardId);
+		const importImgIds = new Set((data.images || []).map(i => i.id));
+		for(const li of localImages) {
+			if(!importImgIds.has(li.id)) await db.deleteImage(li.id);
+		}
+
+		// 3. Overlaps
+		if(localImages.length > 0) {
+			const boardOverlapIds = new Set();
+			for(const li of localImages) {
+				const ovs = await db.getOverlapsForImage(li.id);
+				ovs.forEach(o => boardOverlapIds.add(o.id));
+			}
+			const importOvIds = new Set((data.overlaps || []).map(o => o.id));
+			const tx = db.db.transaction('overlappedImages', 'readwrite');
+			const store = tx.objectStore('overlappedImages');
+			boardOverlapIds.forEach(ovid => {
+				if(!importOvIds.has(ovid)) store.delete(ovid);
+			});
+		}
+
+        // 4. Nets [NEW]
+        const allNets = await db.getNets();
+        const localNets = allNets.filter(n => n.projectId === boardId);
+        const importNetIds = new Set((data.nets || []).map(n => n.id));
+        for(const ln of localNets) {
+            if(!importNetIds.has(ln.id)) await db.deleteNet(ln.id);
+        }
+
+	} else {
+		console.log("Import is older/same. Merging missing items only.");
+	}
+
+	// --- UPSERT PHASE ---
+
+	// Images (unchanged logic...)
+	if (zipObj && data.images) {
+		const imgFolder = zipObj.folder("images");
+		if (imgFolder) {
+			const imgFiles = [];
+			imgFolder.forEach((path, file) => imgFiles.push(file));
+
+			for(const f of imgFiles) {
+				const fileName = f.name.split('/').pop();
+				const idFromName = fileName.split('.')[0];
+
+				const metaImg = data.images.find(x => x.id === idFromName || x.id.endsWith(idFromName));
+				const finalId = metaImg ? metaImg.id : idFromName;
+				const finalName = metaImg ? metaImg.name.replace(/\.[^/.]+$/, "") : fileName;
+				const mime = metaImg ? metaImg.type : 'image/jpeg';
+
+				if (!isNewer) {
+					const existing = await db.getImage(finalId);
+					if (existing) continue;
+				}
+
+				const rawBlob = await f.async("blob");
+				const blob = new Blob([rawBlob], { type: mime });
+
+				await db.addImage({ id: finalId, boardId: boardId, blob, name: finalName });
+			}
+		}
+	}
+
+	// Components
+	for(const c of data.components) {
+		c.boardId = boardId;
+		if (isNewer) {
+			await db.addComponent(c);
+		} else {
+			const existing = await db._tx('components', 'readonly', s => s.get(c.id));
+			if (!existing) await db.addComponent(c);
+		}
+	}
+
+	// Overlaps
+	if (data.overlaps) {
+		for (const ov of data.overlaps) {
+			if (isNewer) {
+				await db.addOverlap(ov);
+			} else {
+				const existing = await db._tx('overlappedImages', 'readonly', s => s.get(ov.id));
+				if (!existing) await db.addOverlap(ov);
+			}
+		}
+	}
+
+    // Nets [NEW]
+    if (data.nets) {
+        for (const net of data.nets) {
+            net.projectId = boardId;
+            if (isNewer) {
+                await db.addNet(net);
+            } else {
+                const existing = await db._tx('nets', 'readonly', s => s.get(net.id));
+                if (!existing) await db.addNet(net);
+            }
+        }
+    }
+
+	await loadDeviceBoms();
+}
+
+async function processLegacyImport(b) {
+	if (!currentBomId) return alert("Create/Select a board first.");
+	for(const c of (b.components || b.data)) { c.id = uuid(); c.boardId = currentBomId; await db.addComponent(c); }
+	await loadProjectData();
+}
+
+// Board Export
+async function exportZIP() {
+	if(!window.JSZip) return;
+	const zip = new JSZip();
+	const meta = bomList.find(x=>x.id===currentBomId);
+	const images = await db.getImages(currentBomId);
+
+    // Fetch and filter Nets
+    const allNets = await db.getNets();
+    const boardNets = allNets.filter(n => n.projectId === currentBomId);
+
+	const overlapsMap = new Map();
+	for(const img of images) {
+		const ovs = await db.getOverlapsForImage(img.id);
+		ovs.forEach(o => overlapsMap.set(o.id, o));
+	}
+	const overlaps = Array.from(overlapsMap.values());
+
+	const imgMeta = images.map(i => ({ id: i.id, name: i.name, type: 'image/jpeg' }));
+	const cleanComps = bomData.map(c => { const { boardId, ...rest } = c; return rest; });
+
+	// 1. Generate README
+	const readmeContent = `PCB ReTrace Data Export
+Type: Single Board (${meta.name})
+Generated by: pcb.etaras.com
+Date: ${new Date().toISOString()}
+
+HOW TO USE:
+1. Go to https://pcb.etaras.com/studio.html
+2. Select or Create a Device.
+3. Click "Import Board" or drag and drop this ZIP file into the component list.
+`;
+	zip.file("README.txt", readmeContent);
+
+	// 2. Generate JSON
+	const data = {
+		meta,
+		components: cleanComps,
+		images: imgMeta,
+		overlaps: overlaps,
+        nets: boardNets, // Add Nets
+		version: DB_VER,
+		source: "pcb.etaras.com"
+	};
+
+	zip.file("bom.json", JSON.stringify(data, null, 2));
+
+	const imgFolder = zip.folder("images");
+
+	// Image Loop
+	for (const img of images) {
+		let blobToSave = img.blob;
+		if (img.blob.type !== 'image/jpeg') {
+			const bmp = await createImageBitmap(img.blob);
+			const canvas = document.createElement('canvas');
+			canvas.width = bmp.width;
+			canvas.height = bmp.height;
+			canvas.getContext('2d').drawImage(bmp, 0, 0);
+			bmp.close();
+			blobToSave = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.85));
+		}
+		imgFolder.file(img.id + ".jpg", blobToSave);
+	}
+
+	zip.generateAsync({type:"blob"}).then(c => dl(c, meta.name + "_Board.zip", "application/zip"));
+}
+
+function exportCSV() {
+	const meta = bomList.find(p => p.id === currentBomId);
+	const view = getSortedView();
+	let csv = "Reference,Value,Description\n";
+	view.forEach(r => csv += `${r.label},${r.value},"${(r.desc||'').replace(/"/g,'""')}"\n`);
+	const blob = new Blob([csv], { type: 'text/csv' });
+	const url = window.URL.createObjectURL(blob);
+	const a = document.createElement('a'); a.href = url; a.download = `${meta.name}_BOM.csv`; document.body.appendChild(a); a.click(); document.body.removeChild(a);
+}
+function dl(c,n,t){ const b=(c instanceof Blob)?c:new Blob([c],{type:t}); const u=window.URL.createObjectURL(b); const a=document.createElement('a'); a.href=u; a.download=n; document.body.appendChild(a); a.click(); document.body.removeChild(a); }
+
+// --- UI HELPERS ---
+// Global Confirmation Helper (Promise-based)
+function confirmAction(message, btnText = "Confirm") {
+	return new Promise((resolve) => {
+		const modal = document.getElementById('confirmation-modal');
+		const msgEl = document.getElementById('confirm-msg');
+		const okBtn = document.getElementById('confirm-btn-ok');
+		const cancelBtn = document.getElementById('confirm-btn-cancel');
+
+		msgEl.innerText = message;
+		okBtn.innerText = btnText;
+
+		// Cleanup old handlers by reassigning
+		okBtn.onclick = () => {
+			modal.style.display = 'none';
+			resolve(true);
+		};
+
+		cancelBtn.onclick = () => {
+			modal.style.display = 'none';
+			resolve(false);
+		};
+
+		modal.style.display = 'flex';
+		cancelBtn.focus(); // Default focus on Cancel
+	});
+}
+
+function switchView(v) {
+	// UI Toggles
+	document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+	document.querySelectorAll('.view-section').forEach(s => s.classList.remove('active'));
+
+	// Button Active State
+	const btn = document.getElementById(`tab-${v}`);
+	if (btn) btn.classList.add('active');
+
+	// View Active State
+	const view = document.getElementById(`view-${v}`);
+	if (view) view.classList.add('active');
+
+	// View Specific Initialization
+	if (v === 'map') {
+		if(currentImgId) {
+			if(!document.getElementById('map-content').querySelector('.pcb-image')) showImage(currentImgId);
+			else { setTimeout(() => { if(mapState.scale === 1 && mapState.x === 0 && mapState.y === 0) fitMap(); renderPins(); }, 50); }
+		}
+	} 
+	else if (v === 'nets') {
+		if(window.netManager) window.netManager.render();
+	} 
+	else if (v === 'inspect') {
+		if(window.inspector) window.inspector.init();
+	}
+	// 'list' needs no specific init
+}
+
+function resetStickyEditor() {
+	document.getElementById('inp-id').value = '';
+	document.getElementById('inp-label').value = '';
+	document.getElementById('inp-value').value = '';
+	document.getElementById('inp-desc').value = '';
+	document.getElementById('inp-x').value = '';
+	document.getElementById('inp-y').value = '';
+	document.getElementById('inp-img-id').value = '';
+	document.getElementById('new-part-tool-container').innerHTML = '';
+	document.getElementById('inline-thumbs').innerHTML = '';
+	if(spyglass) spyglass.clear();
+}
+function parseLabel(l) { const m=l.toUpperCase().match(/^([A-Z]+)(\d+)(.*)$/); return m?{valid:true,prefix:m[1],num:parseInt(m[2])}:{valid:false}; }
+async function changeSortMode() { sortMode=document.getElementById('sort-select').value; const m=bomList.find(x=>x.id===currentBomId); if(m){ m.sortMode=sortMode; await db.addProject(m); renderList(); } }
+function getSortedView() {
+	let view = bomData.map((item, index) => ({ ...item, dataIndex: index }));
+	if (sortMode === 'none') return view;
+	view.sort((a, b) => {
+		const pa=parseLabel(a.label), pb=parseLabel(b.label);
+		if (!pa.valid || !pb.valid) return a.label.localeCompare(b.label);
+		if (sortMode === 'std') return pa.prefix!==pb.prefix ? pa.prefix.localeCompare(pb.prefix) : pa.num-pb.num;
+		return pa.num!==pb.num ? pa.num-pb.num : pa.prefix.localeCompare(pb.prefix);
+	});
+	return view;
+}
+function renderList() {
+	const tb = document.getElementById('bom-body'); tb.innerHTML='';
+	let view = getSortedView();
+	if(view.length===0) tb.innerHTML=`<tr><td colspan="4" class="empty-state" style="padding:2rem">Empty BOM</td></tr>`;
+	view.forEach(p => {
+		const pinIcon = (p.x !== undefined) ? `<span style="cursor:pointer" onclick="locateComponent('${p.imgId}', ${p.x}, ${p.y}); event.stopPropagation();">🎯</span>` : '';
+		const tr = document.createElement('tr');
+		
+		// [NEW] Assign ID for lookup
+		tr.dataset.id = p.id; 
+
+		tr.onclick = (e) => {
+			 if(e.target.tagName==='BUTTON' || e.target.closest('button')) return;
+			 fillFormFromData(p);
+			 document.querySelectorAll('tbody tr').forEach(x=>x.classList.remove('editing'));
+			 tr.classList.add('editing');
+		};
+		const tools = getToolButtonsHtml(p.label, p.dataIndex);
+		tr.innerHTML = `<td><strong>${pinIcon} ${p.label}</strong></td>
+			<td><div class="val-cell"><span class="val-text">${p.value||'-'}</span><div class="tool-group">${tools}<button class="tool-btn copy-btn" onclick="copyPartToForm(${p.dataIndex})" title="Copy">📄</button></div></div></td>
+			<td>${p.desc}</td>`;
+		tb.appendChild(tr);
+	});
+	// Check if new connections were made, update overlap cache if so (from modal)
+	if(currentImgId) updateOverlapCache().then(() => {});
+}
+function toggleExport(e) { e.stopPropagation(); const el = document.getElementById('export-dropdown'); const isShown = el.style.display === 'block'; document.querySelectorAll('.dropdown-content').forEach(d => d.style.display = 'none'); el.style.display = isShown ? 'none' : 'block'; }
+window.addEventListener('click', () => document.querySelectorAll('.dropdown-content').forEach(d => d.style.display = 'none'));
+async function removePart(idx) {
+	if(await confirmAction("Remove this component?", "Remove")) {
+		await db.deleteComponent(bomData[idx].id);
+		await loadProjectData();
+	}
+}
+async function clearCurrentBom() {
+	if(await confirmAction("Clear ALL components from this board?", "Clear All")) {
+		await db.clearComponents(currentBomId);
+		await loadProjectData();
+		resetStickyEditor();
+	}
+}
+async function deleteBom() {
+	if(bomList.length < 1) return;
+	if(await confirmAction("Delete this Board and all its content?", "Delete Board")){
+		await db.deleteProject(currentBomId);
+		document.getElementById('board-settings-modal').style.display = 'none';
+		await loadDeviceBoms();
+		resetStickyEditor();
+	}
+}
+function checkToolHint(v) { document.getElementById('new-part-tool-container').innerHTML=getToolButtonsHtml(v,'new'); }
+function getToolButtonsHtml(lbl, idx) {
+	if(!lbl)return ''; const p=lbl.charAt(0).toUpperCase(), ts=TOOL_REGISTRY[p]; if(!ts)return '';
+	const iStr = (idx==='new')?"'new'":idx; let h='';
+	const cnt = ts.length > MAX_DIRECT_TOOLS ? MAX_DIRECT_TOOLS-1 : ts.length;
+	for(let i=0;i<cnt;i++) h+=`<button class="tool-btn" onclick="openToolD(${iStr},'${ts[i].url}','${ts[i].title}')">${ts[i].icon}</button>`;
+	if(ts.length>MAX_DIRECT_TOOLS) h+=`<button class="tool-btn more-btn" onclick="openToolS(${iStr})">•••</button>`;
+	return `<div class="tool-group">${h}</div>`;
+}
+
+// --- TOOLS ---
+const modal=document.getElementById('tool-modal'), iframe=document.getElementById('tool-frame'), toolTitle=document.getElementById('tool-title');
+
+async function openToolD(idx, url, tit) {
+	editingIndex = idx;
+	toolTitle.innerText = tit;
+	document.getElementById('tool-selector').style.display = 'none';
+
+	iframe.style.display = 'none';
+	modal.style.display = 'flex';
+
+	let d = (idx === 'new')
+		? { v: document.getElementById('inp-value').value, d: document.getElementById('inp-desc').value, comp: null }
+		: { v: bomData[idx].value, d: bomData[idx].desc, comp: bomData[idx] };
+
+	let srcX = null, srcY = null, srcImgId = null;
+
+	if (idx !== 'new' && d.comp) {
+		srcImgId = d.comp.imgId; srcX = d.comp.x; srcY = d.comp.y;
+	} else if (idx === 'new') {
+		const iid = document.getElementById('inp-img-id').value;
+		if (iid) {
+			srcImgId = iid;
+			srcX = parseFloat(document.getElementById('inp-x').value);
+			srcY = parseFloat(document.getElementById('inp-y').value);
+		}
+	}
+
+	const views = [];
+	const transferables = [];
+
+	if (srcImgId && srcX !== null && srcY !== null) {
+		try {
+			const imgRec = await db.getImage(srcImgId);
+			if (imgRec && imgRec.blob) {
+				const bmp = await createImageBitmap(imgRec.blob);
+				views.push({ name: imgRec.name + " (Main)", bitmap: bmp, x: srcX, y: srcY, isMain: true });
+				transferables.push(bmp);
+
+				// USE HELPER for Inferred Views
+				const paths = await ImageGraph.solvePaths(srcImgId, cvManager, db);
+
+				for (const pData of paths) {
+					const pt = cvManager.projectPoint(srcX, srcY, pData.H);
+					if (pt) {
+						const targetRec = await db.getImage(pData.id);
+						if(targetRec) {
+							const tBmp = await createImageBitmap(targetRec.blob);
+							if (pt.x > 0 && pt.y > 0 && pt.x < tBmp.width && pt.y < tBmp.height) {
+								views.push({ name: targetRec.name, bitmap: tBmp, x: pt.x, y: pt.y, isMain: false, imgId: pData.id });
+								transferables.push(tBmp);
+							} else {
+								tBmp.close();
+							}
+						}
+					}
+				}
+			}
+		} catch (e) { console.error("Error generating views:", e); }
+	}
+
+	const loadHandler = () => {
+		iframe.style.display = 'block';
+		const msg = { type: 'INIT_TOOL', value: d.v, description: d.d, views: views };
+		iframe.contentWindow.postMessage(msg, '*', transferables);
+	};
+
+	iframe.removeEventListener('load', loadHandler);
+	iframe.addEventListener('load', loadHandler, { once: true });
+
+	const finalUrl = url + "?embed=true";
+
+	// --- Use location.replace to avoid history pollution ---
+	if (iframe.contentWindow && iframe.contentWindow.location) {
+		try {
+			iframe.contentWindow.location.replace(finalUrl);
+		} catch(e) {
+			// Fallback for first load or cross-origin issues (though local)
+			iframe.src = finalUrl;
+		}
+	} else {
+		iframe.src = finalUrl;
+	}
+}
+
+function openToolS(idx) {
+	editingIndex=idx; const lbl=(idx==='new')?document.getElementById('inp-label').value:bomData[idx].label; const ts=TOOL_REGISTRY[lbl.charAt(0).toUpperCase()];
+	toolTitle.innerText="Select Tool"; iframe.style.display='none'; document.getElementById('tool-selector').style.display='flex'; modal.style.display='flex';
+	const g=document.getElementById('selector-grid'); g.innerHTML='';
+	ts.forEach(t=>{ const c=document.createElement('div'); c.className='tool-card'; c.innerHTML=`<div class="tool-card-icon">${t.icon}</div><div class="tool-card-title">${t.title}</div>`; c.onclick=()=>openToolD(idx,t.url,t.title); g.appendChild(c); });
+}
+function closeTool(){ modal.style.display='none'; iframe.src=''; }
+window.addEventListener('message', async e=>{
+	if(e.data.type==='COMPONENT_UPDATE') {
+		if(editingIndex==='new') { document.getElementById('inp-value').value=e.data.value; if(e.data.description)document.getElementById('inp-desc').value=e.data.description; }
+		else { const c=bomData[editingIndex]; c.value=e.data.value; if(e.data.description)c.desc=e.data.description; await db.addComponent(c); await loadProjectData(); }
+		closeTool();
+	}
+	// 2. Handle Promotion (Swap Source Image)
+	else if (e.data.type === 'PROMOTE_VIEW') {
+		if (editingIndex !== -1 && editingIndex !== 'new') {
+			const c = bomData[editingIndex];
+			c.imgId = e.data.imgId; // Switch the source image ID
+			c.x = e.data.x;
+			c.y = e.data.y;
+			await db.addComponent(c);
+			await loadProjectData(); // Refresh Map/List
+			closeTool(); // Close tool to force refresh of state
+		}
+	}
+
+	// 3. Handle Position Adjustment (Drag in Spyglass)
+	else if (e.data.type === 'UPDATE_POS') {
+		if (editingIndex !== -1 && editingIndex !== 'new') {
+			const c = bomData[editingIndex];
+			c.x = e.data.x;
+			c.y = e.data.y;
+			await db.addComponent(c);
+			// Note: We don't reloadProjectData() here to keep the UI smooth while dragging
+		}
+	}
+});
+
+// --- SPYGLASS & MAP (ENHANCED) ---
+async function showImage(id) {
+	currentImgId = id;
+	const imgSel = document.getElementById('image-select');
+	if(imgSel && imgSel.value !== id) imgSel.value = id;
+	const imgObj = bomImages.find(i => i.id === id);
+	if(!imgObj) return;
+	const url = URL.createObjectURL(imgObj.blob);
+	const currentImg = document.getElementById('map-content').querySelector('.pcb-image');
+	if(!currentImg || currentImg.dataset.id !== id) {
+		 document.getElementById('map-content').innerHTML = `<img src="${url}" data-id="${id}" class="pcb-image">`;
+		 const newImg = document.getElementById('map-content').querySelector('.pcb-image');
+		 newImg.onload = () => fitMap();
+	}
+	await updateOverlapCache(); // LOAD OVERLAPS
+	renderPins();
+}
+function fitMap() {
+	if(skipNextFit) { skipNextFit = false; return; }
+	const img = document.getElementById('map-content').querySelector('.pcb-image');
+	if(!img) return;
+	if(img.naturalWidth === 0) { img.onload = () => fitMap(); return; }
+	const viewport = document.getElementById('map-viewport');
+	const vw = viewport.clientWidth; const vh = viewport.clientHeight;
+	if (vw === 0 || vh === 0) return;
+	const scale = Math.min(vw/img.naturalWidth, vh/img.naturalHeight);
+	mapState = { scale: scale, x: (vw - img.naturalWidth*scale)/2, y: (vh - img.naturalHeight*scale)/2, isDragging: false };
+	updateTransform();
+}
+function switchImage() { showImage(document.getElementById('image-select').value); setTimeout(fitMap, 50); }
+async function locateComponent(imgId, x, y) {
+	if (!imgId || x === undefined || y === undefined) return;
+
+	// 1. Switch to Map Tab
+	switchView('map');
+
+	// 2. Load Image (Prevent fitMap from resetting our zoom)
+	if (currentImgId !== imgId) {
+		skipNextFit = true;
+		await showImage(imgId);
+	}
+
+	// 3. Calculate Center & Zoom
+	const viewport = document.getElementById('map-viewport');
+	const vw = viewport.clientWidth || window.innerWidth;
+	const vh = viewport.clientHeight || window.innerHeight;
+	const targetScale = 4; // Max/High Zoom
+
+	mapState = {
+		scale: targetScale,
+		x: (vw / 2) - (x * targetScale),
+		y: (vh / 2) - (y * targetScale),
+		isDragging: false, startX:0, startY:0
+	};
+
+	updateTransform();
+	renderPins();
+}
+
+/**
+ * Saves a pre-processed image blob (from the Import Modal) to the database.
+ * This bypasses the file picker and allows for standardized names/types.
+ */
+async function saveProcessedImageToDB(blob, name) {
+	if (!currentBomId) { alert("Please select a Board first."); return; }
+
+	const id = uuid();
+	const newImage = { id: id, boardId: currentBomId, name: name, blob: blob, created: Date.now() };
+
+	try {
+		await db.addImage(newImage);
+		await loadProjectData();
+
+		const imgSelect = document.getElementById('image-select');
+		if(imgSelect) { imgSelect.value = id; switchImage(); }
+		switchView('map');
+
+		await autoStitchNewImage(id);
+
+	} catch (e) {
+		console.error("Failed to save image:", e);
+		alert("Error saving image to database.");
+	}
+}
+
+// EXPOSE TO GLOBAL SCOPE so the HTML modal can call it
+window.saveProcessedImageToDB = saveProcessedImageToDB;
+
+async function uploadImage(input) {
+	const file = input.files[0]; if(!file) return;
+	const name = prompt("Image Name:", file.name);
+	if(!name) return;
+
+	const id = uuid(); // Capture ID to use later
+	await db.addImage({ id: id, boardId: currentBomId, blob: file, name: name });
+
+	await loadProjectData();
+	switchView('map');
+
+	await autoStitchNewImage(id);
+}
+
+// Open the Image Settings Modal
+function openImageSettings() {
+	if(!currentImgId) return alert("No image selected");
+
+	const img = bomImages.find(i => i.id === currentImgId);
+	if(!img) return;
+
+	document.getElementById('edit-image-name').value = img.name;
+	document.getElementById('image-settings-modal').style.display = 'flex';
+}
+
+// Save Rename Changes
+async function saveImageSettings() {
+	if(!currentImgId) return;
+
+	const newName = document.getElementById('edit-image-name').value.trim();
+	if(!newName) return alert("Name cannot be empty");
+
+	const img = bomImages.find(i => i.id === currentImgId);
+
+	// Only update DB if changed
+	if(img.name !== newName) {
+		img.name = newName;
+		await db.addImage(img); // Upsert to DB
+
+		// Update UI Dropdown immediately without full reload
+		const sel = document.getElementById('image-select');
+		const opt = sel.querySelector(`option[value="${currentImgId}"]`);
+		if(opt) opt.innerText = newName;
+
+		// Update connections modal source name if it's open or cached
+		const connName = document.getElementById('conn-src-name');
+		if(connName) connName.innerText = newName;
+	}
+
+	document.getElementById('image-settings-modal').style.display = 'none';
+}
+
+// Delete Image (Close modal on success)
+async function deleteCurrentImage() {
+	if(!currentImgId) return;
+
+	const usageCount = bomData.filter(c => c.imgId === currentImgId).length;
+	if (usageCount > 0) {
+		alert(`Cannot delete this image.\n\nIt is currently defined as the Main View for ${usageCount} component(s).\nPlease reassign or delete these components first.`);
+		return;
+	}
+
+	// Note: confirmAction uses z-index 1100, so it appears over settings
+	if(await confirmAction("Delete current image?", "Delete Image")) {
+		await db.deleteImage(currentImgId);
+
+		// Remove from UI arrays
+		bomImages = bomImages.filter(i => i.id !== currentImgId);
+
+		// Close the settings modal if open
+		document.getElementById('image-settings-modal').style.display = 'none';
+
+		currentImgId = null;
+		await loadProjectData();
+		resetStickyEditor();
+	}
+}
+
+function clearMap() { document.getElementById('map-content').innerHTML = `<div id="map-placeholder" class="empty-state" style="color:white; padding-top:20vh;"><h3>No Image</h3></div>`; }
+
+async function updateOverlapCache() {
+	if (!currentImgId) { currentOverlaps = []; return; }
+
+	const connections = await getConnectedImages(currentImgId);
+
+	currentOverlaps = connections.map(conn => {
+		// Use the clean helper method within ImageGraph
+		const invMat = ImageGraph.invertH(conn.matrix);
+
+		return {
+			fromImageId: conn.sourceId,
+			toImageId: currentImgId,
+			homography: invMat,
+			inverseHomography: conn.matrix,
+			isValid: !!invMat
+		};
+	}).filter(o => o.isValid);
+}
+
+function renderPins() {
+	document.querySelectorAll('.map-pin').forEach(p => p.remove());
+	if (!currentImgId) return;
+
+	bomData.forEach(c => {
+		let x = null, y = null;
+		let isInferred = false;
+
+		// A: Defined on this image (Blue)
+		if (c.imgId === currentImgId && c.x !== undefined) {
+			x = c.x; y = c.y;
+		}
+		// B: Inferred from stitching (Green)
+		else if (c.imgId && c.imgId !== currentImgId && c.x !== undefined) {
+			const ov = currentOverlaps.find(o => o.fromImageId === c.imgId || o.toImageId === c.imgId);
+			if (ov) {
+				const isForward = (ov.fromImageId === c.imgId);
+				const H = isForward ? ov.homography : ov.inverseHomography;
+				const proj = cvManager.projectPoint(c.x, c.y, H);
+				if (proj && proj.x > 0 && proj.y > 0) {
+					 x = proj.x; y = proj.y; isInferred = true;
+				}
+			}
+		}
+
+		if (x !== null && y !== null) {
+			const pin = document.createElement('div');
+			pin.className = 'map-pin';
+			pin.style.left = x + 'px';
+			pin.style.top = y + 'px';
+
+			const color = isInferred ? '#16a34a' : 'var(--primary)';
+			const zIndex = isInferred ? 40 : 50;
+
+			// Both Green and Blue pins now open the Editor
+			const clickAction = `editCompFromMap('${c.id}', event)`;
+
+			pin.innerHTML = `<div class="pin-marker" style="background:${color}; z-index:${zIndex};" onclick="${clickAction}; event.stopPropagation();"><span>${c.label}</span></div>`;
+			document.getElementById('map-content').appendChild(pin);
+		}
+	});
+}
+function updateTransform() { document.getElementById('map-content').style.transform = `translate(${mapState.x}px, ${mapState.y}px) scale(${mapState.scale})`; }
+const viewport = document.getElementById('map-viewport');
+viewport.addEventListener('wheel', e => {
+	e.preventDefault();
+	const rect = viewport.getBoundingClientRect();
+	const mx = e.clientX - rect.left; const my = e.clientY - rect.top;
+	const ix = (mx - mapState.x) / mapState.scale; const iy = (my - mapState.y) / mapState.scale;
+	const delta = e.deltaY > 0 ? -0.1 : 0.1;
+	const newScale = Math.max(0.1, Math.min(10, mapState.scale + delta));
+	mapState.x = mx - (ix * newScale); mapState.y = my - (iy * newScale); mapState.scale = newScale;
+	updateTransform();
+});
+/* --- POINTER EVENTS (Mobile + Desktop) --- */
+
+let evCache = [];
+let prevDiff = -1;
+
+function pointerDownHandler(e) {
+	if(e.target.closest('.pin-marker')) return;
+
+	evCache.push(e);
+
+	// 1. Single Pointer (Mouse or One Finger) -> Start Drag
+	if (evCache.length === 1) {
+		mapState.isDragging = true;
+		mapState.startX = e.clientX - mapState.x;
+		mapState.startY = e.clientY - mapState.y;
+		mapState.rawStartX = e.clientX;
+		mapState.rawStartY = e.clientY;
+
+		// Listen globally while dragging (Fixes "fast drag" issue on Desktop)
+		window.addEventListener('pointermove', pointerMoveHandler);
+		window.addEventListener('pointerup', pointerUpHandler);
+	}
+
+	// 2. Two Pointers (Pinch) -> Switch to Zoom
+	else if (evCache.length === 2) {
+		mapState.isDragging = false; // Disable pan during pinch
+		const dx = evCache[0].clientX - evCache[1].clientX;
+		const dy = evCache[0].clientY - evCache[1].clientY;
+		prevDiff = Math.hypot(dx, dy);
+	}
+}
+
+function pointerMoveHandler(e) {
+	// Update event in cache (for Pinch calc)
+	const index = evCache.findIndex(cached => cached.pointerId === e.pointerId);
+	if(index > -1) evCache[index] = e;
+
+	// A. PINCH ZOOM (Mobile)
+	if (evCache.length === 2) {
+		const dx = evCache[0].clientX - evCache[1].clientX;
+		const dy = evCache[0].clientY - evCache[1].clientY;
+		const curDiff = Math.hypot(dx, dy);
+
+		if (prevDiff > 0) {
+			const diff = curDiff - prevDiff;
+			const newScale = Math.max(0.1, Math.min(10, mapState.scale + (diff * 0.01)));
+
+			// Zoom towards center
+			const rect = viewport.getBoundingClientRect();
+			const cx = rect.width / 2;
+			const cy = rect.height / 2;
+			const ratio = newScale / mapState.scale;
+
+			mapState.x = cx - (cx - mapState.x) * ratio;
+			mapState.y = cy - (cy - mapState.y) * ratio;
+			mapState.scale = newScale;
+
+			updateTransform();
+		}
+		prevDiff = curDiff;
+		return;
+	}
+
+	// B. PANNING (Desktop + Mobile)
+	if(!mapState.isDragging) return;
+
+	// e.preventDefault() helps stop scrolling on mobile,
+	// but we check pointerType to avoid selecting text issues on desktop
+	if(e.pointerType === 'touch') e.preventDefault();
+
+	mapState.x = e.clientX - mapState.startX;
+	mapState.y = e.clientY - mapState.startY;
+	updateTransform();
+}
+
+function pointerUpHandler(e) {
+	const index = evCache.findIndex(cached => cached.pointerId === e.pointerId);
+	if(index > -1) evCache.splice(index, 1);
+
+	if (evCache.length < 2) prevDiff = -1;
+
+	if (evCache.length === 0) {
+		mapState.isDragging = false;
+		// Clean up global listeners
+		window.removeEventListener('pointermove', pointerMoveHandler);
+		window.removeEventListener('pointerup', pointerUpHandler);
+	}
+}
+
+// Only 'pointerdown' needs to be on the viewport
+viewport.addEventListener('pointerdown', pointerDownHandler);
+
+// Click Logic (Distinguishes Drag vs Click)
+viewport.addEventListener('click', e => {
+	const dist = Math.hypot(e.clientX - mapState.rawStartX, e.clientY - mapState.rawStartY);
+	if(dist > 10) return; // Ignore if dragged
+
+	if(mapState.isDragging || !currentImgId || e.target.closest('.pin-marker')) return;
+
+	const r = document.getElementById('map-content').getBoundingClientRect();
+	const x = (e.clientX - r.left) / mapState.scale;
+	const y = (e.clientY - r.top) / mapState.scale;
+
+	switchView('list');
+
+	// 1. Deselect any active row in the table (Visual cleanup)
+	document.querySelectorAll('tbody tr').forEach(row => row.classList.remove('editing'));
+
+	// 2. Create a temporary "New Component" object
+	const tempComp = {
+		label: '',
+		value: '',
+		desc: '',
+		imgId: currentImgId,
+		x: Math.round(x),
+		y: Math.round(y)
+	};
+
+	// 3. Use the standard function to setup UI (Inputs + Spyglass + THUMBNAILS)
+	fillFormFromData(tempComp);
+
+	// 4. Focus for immediate typing
+	document.getElementById('inp-label').focus();
+	returnToMap = true;
+});
+async function editCompFromMap(id, e) {
+	e.stopPropagation();
+	const comp = bomData.find(c => c.id === id);
+	if(!comp) return;
+	fillFormFromData(comp);
+	returnToMap = true;
+	switchView('list');
+
+	// [NEW] Synchronize List Selection
+	setTimeout(() => {
+		const row = document.querySelector(`#bom-body tr[data-id="${id}"]`);
+		if(row) {
+			// Clear existing
+			document.querySelectorAll('tbody tr').forEach(x => x.classList.remove('editing'));
+			// Highlight new
+			row.classList.add('editing');
+			// Scroll into view
+			row.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	}, 50); // Small delay to ensure view transition allows scrolling
+}
+async function fillFormFromData(c) {
+	// Reset state: Default view is always Main
+	isMainViewActive = true;
+
+	// 1. Fill Text Fields
+	document.getElementById('inp-id').value = c.id || '';
+	document.getElementById('inp-label').value = c.label;
+	document.getElementById('inp-value').value = c.value;
+	document.getElementById('inp-desc').value = c.desc;
+	document.getElementById('inp-x').value = (c.x !== undefined) ? c.x : '';
+	document.getElementById('inp-y').value = (c.y !== undefined) ? c.y : '';
+	document.getElementById('inp-img-id').value = c.imgId || '';
+
+	checkToolHint(c.label);
+
+	// 2. Clear previous thumbnails
+	const thumbBox = document.getElementById('inline-thumbs');
+	if(thumbBox) thumbBox.innerHTML = '';
+
+	// --- HELPER: Set Spyglass Target ---
+	const setMainView = (imgRecOrSource, x, y) => {
+		if(!spyglass) return;
+		if(imgRecOrSource instanceof HTMLElement || imgRecOrSource instanceof ImageBitmap) {
+			spyglass.setTarget(imgRecOrSource, x, y, false);
+			return;
+		}
+		if(imgRecOrSource && imgRecOrSource.blob) {
+			createImageBitmap(imgRecOrSource.blob).then(bmp => {
+				spyglass.setTarget(bmp, x, y, true);
+			});
+		}
+	};
+
+	// --- HELPER: Create Thumbnail ---
+	const createThumb = (imgRec, tx, ty, isMain) => {
+		const thumb = document.createElement('div');
+		thumb.style.cssText = "width:60px; height:60px; border:1px solid #cbd5e1; flex-shrink:0; cursor:pointer; position:relative; background:#eee; display:flex; align-items:center; justify-content:center;";
+		if(isMain) thumb.style.borderColor = "#2563eb";
+
+		// Loader placeholder
+		thumb.innerHTML = '<span style="font-size:10px; color:#999;">...</span>';
+		thumbBox.appendChild(thumb);
+
+		(async () => {
+			try {
+				const bmp = await createImageBitmap(imgRec.blob);
+
+				// 1. Clear loader (and anything else)
+				thumb.innerHTML = '';
+
+				// 2. Add Canvas
+				const cvs = document.createElement('canvas');
+				cvs.width = 60; cvs.height = 60;
+				const ctx = cvs.getContext('2d');
+				ctx.drawImage(bmp, tx-50, ty-50, 100, 100, 0, 0, 60, 60);
+				thumb.appendChild(cvs);
+				thumb.title = isMain ? "Main View" : `View on ${imgRec.name}`;
+
+				bmp.close();
+
+				// 3. Add Locate Button 🎯 (Now safe from being cleared)
+				const locBtn = document.createElement('button');
+				locBtn.className = 'thumb-locate-btn';
+				locBtn.innerHTML = '🎯';
+				locBtn.title = "Locate on Map";
+				locBtn.onclick = (e) => { e.stopPropagation(); locateComponent(imgRec.id, tx, ty); };
+				thumb.appendChild(locBtn);
+
+				// 4. Add Promote Button ★
+				if (!isMain) {
+					const btn = document.createElement('button');
+					btn.className = 'thumb-promote-btn';
+					btn.innerHTML = '★';
+					btn.title = "Set as Main View";
+					btn.onclick = async (e) => {
+						e.stopPropagation();
+
+						// Capture form state
+						c.id = document.getElementById('inp-id').value;
+						c.label = document.getElementById('inp-label').value;
+						c.value = document.getElementById('inp-value').value;
+						c.desc = document.getElementById('inp-desc').value;
+
+						// Update component location
+						c.imgId = imgRec.id; c.x = tx; c.y = ty;
+
+						// Update DB if exists
+						if(c.id) { await db.addComponent(c); await loadProjectData(); }
+
+						// Refresh UI
+						fillFormFromData(c);
+					};
+					thumb.appendChild(btn);
+				}
+
+				// Thumb Click Action
+				thumb.onclick = () => {
+					Array.from(thumbBox.children).forEach(t => t.style.borderColor = '#cbd5e1');
+					thumb.style.borderColor = "#2563eb";
+					isMainViewActive = isMain;
+					setMainView(imgRec, tx, ty);
+				};
+
+			} catch(e) {
+				console.error("Thumb error", e);
+				thumb.innerHTML = '<span style="color:red">x</span>';
+			}
+		})();
+	};
+
+	// 3. Calculate Views
+	const viewsToRender = [];
+	let mainImgRec = null;
+	if((c.x !== undefined) && (c.y !== undefined) && c.imgId) {
+		mainImgRec = bomImages.find(i => i.id === c.imgId);
+		if(mainImgRec) {
+			viewsToRender.push({ rec: mainImgRec, x: c.x, y: c.y, isMain: true });
+
+			// Initial Load: Check if Map is already showing this
+			const mapImg = document.getElementById('map-content') ? document.getElementById('map-content').querySelector('.pcb-image') : null;
+			if(mapImg && mapImg.dataset.id === c.imgId && mapImg.complete && mapImg.naturalWidth > 0 && spyglass) {
+				spyglass.setTarget(mapImg, c.x, c.y, false);
+			} else {
+				setMainView(mainImgRec, c.x, c.y);
+			}
+		} else if (spyglass) { spyglass.clear(); }
+	}
+
+	if (cvManager && db && c.imgId) {
+		const paths = await ImageGraph.solvePaths(c.imgId, cvManager, db);
+
+		for (const pData of paths) {
+			const H_new = pData.H;
+			const pt = cvManager.projectPoint(c.x, c.y, H_new);
+
+			if (pt && pt.x > 0 && pt.y > 0) {
+				const targetRec = bomImages.find(i => i.id === pData.id);
+				if (targetRec) {
+					// Check bounds if bitmap is available, or trust projectPoint roughly
+					// Usually we need the bitmap dimensions to be 100% sure,
+					// but rendering it via createThumb handles out-of-bounds gracefully (crops/blank)
+					viewsToRender.push({ rec: targetRec, x: pt.x, y: pt.y, isMain: false });
+				}
+			}
+		}
+	}
+
+	// 4. Render All
+	viewsToRender.forEach(v => createThumb(v.rec, v.x, v.y, v.isMain));
+}
+function copyPartToForm(idx) { const c = bomData[idx]; document.getElementById('inp-value').value = c.value; document.getElementById('inp-desc').value = c.desc; }
+
+// --- CONNECTIONS UI ---
+//  Delete connection function
+async function deleteConnection(targetId) {
+	if(!currentImgId || !targetId) return;
+	
+	const targetImg = bomImages.find(i => i.id === targetId);
+	const name = targetImg ? targetImg.name : "this image";
+
+	if(await confirmAction(`Remove stitching connection with ${name}?`, "Remove Stitch")) {
+		await db.deleteOverlapsForPair(currentImgId, targetId);
+		await renderConnectionsList();
+		await updateOverlapCache();
+		renderPins();
+	}
+}
+
+// Note: Ensure this function is called by openConnectionsModal() in your existing code
+async function renderConnectionsList() {
+	if(!currentImgId) return;
+	const curImg = bomImages.find(i => i.id === currentImgId);
+	if(!curImg) return;
+	
+	const title = document.getElementById('conn-src-name');
+	if(title) title.innerText = curImg.name;
+	
+	const list = document.getElementById('conn-list');
+	if(!list) return;
+	
+	list.innerHTML = '<div style="text-align:center;color:#888">Loading...</div>';
+
+	const overlaps = await db.getOverlapsForImage(currentImgId);
+	const others = bomImages.filter(i => i.id !== currentImgId);
+	
+	list.innerHTML = '';
+	if(others.length === 0) { 
+		list.innerHTML = '<div style="padding:1rem; text-align:center; background:#eee; border-radius:4px;">No other images to stitch with.</div>'; 
+		return; 
+	}
+	
+	others.forEach(img => {
+		const ov = overlaps.find(o => o.fromImageId === img.id || o.toImageId === img.id);
+		const row = document.createElement('div');
+		row.style.cssText = "display:flex; justify-content:space-between; align-items:center; padding:0.5rem; border:1px solid #e2e8f0; border-radius:0.3rem; background:white;";
+		let statusBadge = `<span style="font-size:0.75rem; background:#f1f5f9; color:#94a3b8; padding:2px 6px; border-radius:4px;">Not Connected</span>`;
+		let actions = `<button class="secondary sm-btn" onclick="launchStitch('${img.id}')">Edit Stitch</button>`;
+
+		if(ov) {
+			if(ov.isManual) statusBadge = `<span style="font-size:0.75rem; background:#dcfce7; color:#166534; padding:2px 6px; border-radius:4px;">Manual (${ov.matchCount} pts)</span>`;
+			else statusBadge = `<span style="font-size:0.75rem; background:#e0f2fe; color:#0369a1; padding:2px 6px; border-radius:4px;">Auto-CV</span>`;
+			
+			// Show Delete + Edit buttons
+			actions = `<div style="display:flex; gap:5px;">
+				<button class="danger sm-btn" style="padding:0 8px;" onclick="deleteConnection('${img.id}')" title="Remove Connection">🗑️</button>
+				<button class="secondary sm-btn" onclick="launchStitch('${img.id}')">Edit Stitch</button>
+			</div>`;
+		}
+
+		row.innerHTML = `<div><div style="font-weight:600; font-size:0.9rem;">${img.name}</div>${statusBadge}</div>${actions}`;
+		list.appendChild(row);
+	});
+}
+
+// Uses the helper above
+async function openConnectionsModal() {
+	if(!currentImgId) return alert("Select an image first.");
+	document.getElementById('connections-modal').style.display = 'flex';
+	await renderConnectionsList();
+}
+
+function launchStitch(targetId) {
+	document.getElementById('connections-modal').style.display = 'none';
+	if(stitchEditor) stitchEditor.open(currentImgId, targetId);
+	else alert("Editor not initialized.");
+}
+
+async function runAutoCVBatch() {
+	if(!cvManager || !cvManager.ready) { cvManager.init(); return alert("CV initializing... wait."); }
+	if(!await confirmAction("Run Auto-CV on all unmatched images?", "Run Auto-CV")) return;
+
+	// Capture ID locally to prevent errors if user switches image during processing
+	const sourceId = currentImgId;
+	if(!sourceId) return;
+
+	document.getElementById('conn-list').innerHTML = '<div style="text-align:center; padding:2rem;">Processing...</div>';
+
+	// Only filter out self; bomImages is already scoped to project
+	const others = bomImages.filter(i => i.id !== sourceId);
+	const sourceBlob = bomImages.find(i => i.id === sourceId).blob;
+
+	for(const other of others) {
+		const existing = await db.getOverlapsForPair(sourceId, other.id);
+		if(existing && existing.isManual) continue;
+
+		const blob1 = sourceBlob;
+		const blob2 = other.blob;
+
+		const f1 = await cvManager.feats(blob1);
+		const f2 = await cvManager.feats(blob2);
+
+		if(f1 && f2) {
+			const res = cvManager.findH(f1, f2);
+			if(res) {
+				await db.deleteOverlapsForPair(sourceId, other.id);
+				await db.addOverlap({
+					id: uuid(),
+					fromImageId: sourceId,
+					toImageId: other.id,
+					homography: res.hData,
+					inverseHomography: res.invHData,
+					matchCount: res.matches,
+					isManual: false
+				});
+			}
+		}
+		if(f1) { f1.kp.delete(); f1.des.delete(); }
+		if(f2) { f2.kp.delete(); f2.des.delete(); }
+	}
+	await renderConnectionsList();
+	updateOverlapCache().then(renderPins);
+}
+
+// UI Helper: Shows a global blocking overlay with a message
+function showBusy(msg) {
+	let el = document.getElementById('busy-indicator');
+	if(!el) {
+		el = document.createElement('div');
+		el.id = 'busy-indicator';
+		el.style.cssText = "position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.8); color:white; padding:20px; border-radius:8px; z-index:9999; font-weight:bold; display:flex; align-items:center; gap:10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);";
+		document.body.appendChild(el);
+	}
+	el.innerHTML = `<span style="animation:spin 1s linear infinite; display:inline-block">⏳</span> ${msg}`;
+	el.style.display = 'flex';
+}
+
+function hideBusy() {
+	const el = document.getElementById('busy-indicator');
+	if(el) el.style.display = 'none';
+}
+
+// Logic: Auto-stitch specific image against all others on the board
+async function autoStitchNewImage(newId) {
+	if(!cvManager) cvManager = new CVManager();
+	if(!cvManager.ready) {
+		showBusy("Initializing Computer Vision...");
+		await cvManager.init();
+	}
+
+	// Find the newly added image object
+	const newImg = bomImages.find(i => i.id === newId);
+	if(!newImg) return;
+
+	// Filter existing images (exclude the new one)
+	const others = bomImages.filter(i => i.id !== newId);
+	if(others.length === 0) return;
+
+	try {
+		showBusy("Extracting features from new image...");
+
+		// 1. Compute features for the NEW image ONCE
+		const fNew = await cvManager.feats(newImg.blob);
+		if(!fNew) { hideBusy(); return; }
+
+		let matchesFound = 0;
+
+		// 2. Compare against all others
+		for(let i=0; i<others.length; i++) {
+			const other = others[i];
+			showBusy(`Stitching vs ${other.name}... (${i+1}/${others.length})`);
+
+			// Tiny pause to let UI render the text update
+			await new Promise(r => setTimeout(r, 10));
+
+			const fOther = await cvManager.feats(other.blob);
+			if(fOther) {
+				const res = cvManager.findH(fNew, fOther);
+				if(res) {
+					await db.addOverlap({
+						id: uuid(),
+						fromImageId: newId,
+						toImageId: other.id,
+						homography: res.hData,
+						inverseHomography: res.invHData,
+						matchCount: res.matches,
+						isManual: false
+					});
+					matchesFound++;
+				}
+				// Free memory for the 'other' image immediately
+				if(fOther.kp) fOther.kp.delete();
+				if(fOther.des) fOther.des.delete();
+			}
+		}
+
+		// Free memory for the 'new' image
+		if(fNew.kp) fNew.kp.delete();
+		if(fNew.des) fNew.des.delete();
+
+	} catch(e) {
+		console.error("Auto-stitch failed", e);
+	} finally {
+		hideBusy();
+		// Refresh overlaps if we successfully matched anything
+		if(await db.getOverlapsForImage(newId).length > 0) {
+			await updateOverlapCache();
+			renderPins();
+		}
+	}
+}
+
+const ImageGraph = {
+	// Helper: Invert 3x3 Matrix
+	invertH(m) {
+		if (!m || m.length !== 9) return null;
+		const det = m[0] * (m[4] * m[8] - m[7] * m[5]) -
+					m[1] * (m[3] * m[8] - m[5] * m[6]) +
+					m[2] * (m[3] * m[7] - m[4] * m[6]);
+		if (Math.abs(det) < 1e-10) return null;
+		const invDet = 1 / det;
+		return [
+			(m[4] * m[8] - m[5] * m[7]) * invDet,
+			(m[2] * m[7] - m[1] * m[8]) * invDet,
+			(m[1] * m[5] - m[2] * m[4]) * invDet,
+			(m[5] * m[6] - m[3] * m[8]) * invDet,
+			(m[0] * m[8] - m[2] * m[6]) * invDet,
+			(m[2] * m[3] - m[0] * m[5]) * invDet,
+			(m[3] * m[7] - m[4] * m[6]) * invDet,
+			(m[1] * m[6] - m[0] * m[7]) * invDet,
+			(m[0] * m[4] - m[1] * m[3]) * invDet
+		];
+	},
+
+	// Returns array of { id, H, totalCost } for all reachable nodes
+	async solvePaths(startImgId, cvMgr, db) {
+		const allOverlaps = await db._tx('overlappedImages', 'readonly', s => s.getAll());
+
+		// 1. Build Adjacency List
+		const graph = {};
+		allOverlaps.forEach(ov => {
+			if(!graph[ov.fromImageId]) graph[ov.fromImageId] = [];
+			// Forward: Source -> Target (Homography)
+			graph[ov.fromImageId].push({ id: ov.toImageId, H: ov.homography, cost: ov.isManual ? 1 : 1000 });
+
+			if(!graph[ov.toImageId]) graph[ov.toImageId] = [];
+			// Backward: Target -> Source (Inverse)
+			graph[ov.toImageId].push({ id: ov.fromImageId, H: ov.inverseHomography, cost: ov.isManual ? 1 : 1000 });
+		});
+
+		// 2. Dijkstra Search
+		const results = [];
+		const queue = [{ id: startImgId, H: [1,0,0, 0,1,0, 0,0,1], totalCost: 0 }];
+		const visited = new Set();
+
+		while(queue.length > 0) {
+			queue.sort((a, b) => a.totalCost - b.totalCost);
+			const curr = queue.shift();
+
+			if(visited.has(curr.id)) continue;
+			visited.add(curr.id);
+
+			// Add to results (excluding start node)
+			if (curr.id !== startImgId) {
+				results.push({ id: curr.id, H: curr.H, totalCost: curr.totalCost });
+			}
+
+			if(graph[curr.id]) {
+				for(const edge of graph[curr.id]) {
+					if(!visited.has(edge.id)) {
+						const H_next = cvMgr.multiplyH(edge.H, curr.H);
+						queue.push({
+							id: edge.id,
+							H: H_next,
+							totalCost: curr.totalCost + edge.cost
+						});
+					}
+				}
+			}
+		}
+		return results;
+	}
+};
+
+/* --- NAVIGATION & HISTORY MANAGER --- */
+const NavManager = {
+	init() {
+		window.addEventListener('popstate', (e) => this.handlePopState(e));
+
+		document.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				if (history.state && history.state.context) {
+					history.back();
+				} else {
+					this.handleEscDirectly();
+				}
+			}
+		});
+
+		window.addEventListener('message', (e) => {
+			if (e.data.type === 'ESC_PRESSED') {
+				const visible = Array.from(document.querySelectorAll('.modal-overlay')).some(m => m.style.display === 'flex');
+				if(visible) history.back();
+			}
+		});
+
+		document.querySelectorAll('.close-btn').forEach(btn => {
+			btn.onclick = (e) => {
+				e.preventDefault(); e.stopPropagation();
+				history.back();
+			};
+		});
+
+		const mm = document.getElementById('mobile-menu-modal');
+		if(mm) {
+			mm.onclick = (e) => { if(e.target === mm) history.back(); };
+		}
+
+		this.applyPatches();
+	},
+
+	pushState(context, data = {}) {
+		// Prevent duplicate pushes of the same context
+		if (history.state && history.state.context === context) return;
+		history.pushState({ context, ...data }, "", "");
+	},
+
+	handlePopState(e) {
+		const state = e.state || {};
+		const ctx = state.context;
+
+		// 1. Close Modals
+		document.querySelectorAll('.modal-overlay').forEach(el => el.style.display = 'none');
+		if(typeof ImageImporter !== 'undefined') ImageImporter.close(true);
+		if(typeof iframe !== 'undefined') { iframe.style.display = 'none'; iframe.src = 'about:blank'; }
+
+		// 2. Restore View
+		if (ctx === 'map') {
+			switchView('map', true); // Pass true to skip pushState
+		} else if (ctx === 'nets') {
+			switchView('nets', true);
+		} else if (ctx === 'inspect') {
+			switchView('inspect', true);
+		} else {
+			// Default to List
+			switchView('list', true);
+			
+			// Restore Tool if needed
+			if (ctx === 'tool') this.restoreTool();
+			
+			// Restore Modals
+			if (ctx && ctx.endsWith('-modal')) {
+				const el = document.getElementById(ctx);
+				if(el) el.style.display = 'flex';
+			}
+		}
+	},
+
+	handleEscDirectly() {
+		const visibleModal = Array.from(document.querySelectorAll('.modal-overlay')).reverse().find(m => m.style.display === 'flex');
+		if (visibleModal) {
+			visibleModal.style.display = 'none';
+		} else {
+			// If on any tab other than list, go back to list
+			const activeView = document.querySelector('.view-section.active');
+			if (activeView && activeView.id !== 'view-list') {
+				switchView('list');
+			}
+		}
+	},
+
+	restoreTool() {
+		if (iframe && iframe.src) modal.style.display = 'flex';
+	},
+
+	applyPatches() {
+		const originalSwitchView = switchView;
+		// Wrap switchView to handle history pushing automatically
+		switchView = function(v, fromHistory = false) {
+			originalSwitchView(v);
+			if (!fromHistory) {
+				NavManager.pushState(v);
+			}
+		};
+
+		const originalOpenToolD = openToolD;
+		openToolD = async function(idx, url, tit) {
+			await originalOpenToolD(idx, url, tit);
+			NavManager.pushState('tool');
+		};
+
+		const originalCloseTool = closeTool;
+		closeTool = function() {
+			if(history.state && history.state.context === 'tool') history.back();
+			else originalCloseTool();
+		};
+
+		const wrapModalOpener = (fnName, modalId) => {
+			if (typeof window[fnName] === 'function') {
+				const original = window[fnName];
+				window[fnName] = function(...args) {
+					original.apply(this, args);
+					NavManager.pushState(modalId);
+				};
+			}
+		};
+
+		wrapModalOpener('openBoardSettings', 'board-settings-modal');
+		wrapModalOpener('openDeviceSettings', 'device-settings-modal');
+		wrapModalOpener('openConnectionsModal', 'connections-modal');
+		wrapModalOpener('openImageSettings', 'image-settings-modal');
+		wrapModalOpener('openMobileMenu', 'mobile-menu-modal');
+
+		if(typeof stitchEditor !== 'undefined' && stitchEditor) {
+			const origStitchOpen = stitchEditor.open.bind(stitchEditor);
+			stitchEditor.open = async function(src, dst) {
+				await origStitchOpen(src, dst);
+				NavManager.pushState('stitch-modal');
+			};
+		}
+
+		if(typeof ImageImporter !== 'undefined') {
+			const origImgOpen = ImageImporter.openModal.bind(ImageImporter);
+			ImageImporter.openModal = function(mode) {
+				origImgOpen(mode);
+				if(!history.state || history.state.context !== 'import-modal') {
+					 NavManager.pushState('import-modal');
+				}
+			};
+			ImageImporter.close = function(silent = false) {
+				this.modal.style.display = 'none';
+				this.stopStream();
+				this.sourceImage = null;
+				this.cropRect = null;
+				if(!silent && history.state && history.state.context === 'import-modal') {
+					history.back();
+				}
+			};
+		}
+	}
+};
+
+// Start
+window.onload = init;
+
+window.exportKiCad = () => {
+    if (window.netManager) window.netManager.exportKiCad();
+};
+
+window.startNewNet = () => {
+    if (window.inspector) window.inspector.startNewNet();
+};
diff --git a/docs/tool-bridge.js b/docs/tool-bridge.js
new file mode 100644
index 0000000..9c41752
--- /dev/null
+++ b/docs/tool-bridge.js
@@ -0,0 +1,163 @@
+/**
+ * tool-bridge.js
+ * Common logic for connecting Component Tools (iframe) to the main Application (studio.js).
+ * Handles: PostMessage, Spyglass Views, Promotion, and Dragging.
+ */
+class ToolBridge {
+	constructor(config) {
+		this.cfg = config;
+		this.availableViews = [];
+		this.currentViewIdx = 0;
+		this.spyglass = null;
+		this.pendingViewInit = null; // Buffer for race condition fix
+
+		// Initialize Spyglass
+		const initSpyglass = () => {
+			const canvas = document.getElementById('tool-canvas');
+			if (typeof PcbSpyglass !== 'undefined' && canvas) {
+				this.spyglass = new PcbSpyglass('tool-canvas', 'tool-zoom', (x, y) => this.handleDrag(x, y));
+
+				// If we received data before spyglass was ready, apply it now
+				if (this.pendingViewInit !== null) {
+					this.selectView(this.pendingViewInit);
+					this.pendingViewInit = null;
+				}
+			}
+		};
+
+		if (document.readyState === 'loading') {
+			document.addEventListener('DOMContentLoaded', initSpyglass);
+		} else {
+			// If already loaded, init immediately (microtask)
+			setTimeout(initSpyglass, 0);
+		}
+
+		window.addEventListener('message', this.handleMessage.bind(this));
+		document.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') {
+				window.parent.postMessage({ type: 'ESC_PRESSED' }, '*');
+			}
+		});
+	}
+
+	handleMessage(event) {
+		if (!event.data || event.data.type !== 'INIT_TOOL') return;
+		const d = event.data;
+
+		// 1. Pass Data to Tool
+		if (this.cfg.onData) {
+			this.cfg.onData({ value: d.value, description: d.description });
+		}
+
+		// 2. Handle Views
+		if (d.views && d.views.length > 0) {
+			this.availableViews = d.views;
+			this.renderViewSelector();
+
+			const mainIdx = this.availableViews.findIndex(v => v.isMain);
+			const targetIdx = mainIdx !== -1 ? mainIdx : 0;
+
+			this.toggleSpyglass(true);
+
+			// Check if spyglass is ready
+			if (this.spyglass) {
+				this.selectView(targetIdx);
+			} else {
+				// Buffer it for later
+				this.pendingViewInit = targetIdx;
+			}
+		} else if (d.bitmap) {
+			// Legacy support
+			this.availableViews = [{ bitmap: d.bitmap, x: d.x, y: d.y, name: 'Main', isMain: true }];
+			this.renderViewSelector();
+			this.toggleSpyglass(true);
+
+			if (this.spyglass) this.selectView(0);
+			else this.pendingViewInit = 0;
+		} else {
+			this.toggleSpyglass(false);
+		}
+	}
+
+	toggleSpyglass(show) {
+		const el = document.getElementById('spyglass-col');
+		if (el) {
+			if (show) el.classList.add('active');
+			else {
+				el.classList.remove('active');
+				if (this.spyglass) this.spyglass.clear();
+			}
+		}
+	}
+
+	renderViewSelector() {
+		const container = document.getElementById('view-selector');
+		if (!container) return;
+		container.innerHTML = '';
+		if (this.availableViews.length <= 1) return;
+
+		this.availableViews.forEach((v, idx) => {
+			const thumb = document.createElement('div');
+			thumb.className = 'view-thumb';
+			if (v.isMain) thumb.style.borderColor = 'var(--accent, #2563eb)';
+
+			const cvs = document.createElement('canvas');
+			cvs.width = 100; cvs.height = 100;
+			const ctx = cvs.getContext('2d');
+			try {
+				const sSize = 200;
+				const sx = Math.max(0, v.x - sSize/2);
+				const sy = Math.max(0, v.y - sSize/2);
+				ctx.drawImage(v.bitmap, sx, sy, sSize, sSize, 0, 0, 100, 100);
+			} catch(e) {}
+
+			thumb.innerHTML = `<span>${v.name}</span>`;
+			thumb.appendChild(cvs);
+
+			if (!v.isMain) {
+				const btn = document.createElement('button');
+				btn.className = 'promote-btn';
+				btn.innerText = '★';
+				btn.onclick = (e) => { e.stopPropagation(); this.promoteView(idx); };
+				thumb.appendChild(btn);
+			}
+
+			thumb.onclick = () => {
+				const all = container.querySelectorAll('.view-thumb');
+				all.forEach(t => t.style.borderColor = '#ccc');
+				thumb.style.borderColor = 'var(--accent, #2563eb)';
+				this.selectView(idx);
+			};
+			container.appendChild(thumb);
+		});
+	}
+
+	selectView(idx) {
+		this.currentViewIdx = idx;
+		const v = this.availableViews[idx];
+		if (this.spyglass && v && v.bitmap) {
+			this.spyglass.setTarget(v.bitmap, v.x, v.y, false);
+		}
+	}
+
+	promoteView(idx) {
+		const v = this.availableViews[idx];
+		window.parent.postMessage({ type: 'PROMOTE_VIEW', x: v.x, y: v.y, imgId: v.imgId }, '*');
+	}
+
+	handleDrag(x, y) {
+		if (this.availableViews[this.currentViewIdx]) {
+			this.availableViews[this.currentViewIdx].x = x;
+			this.availableViews[this.currentViewIdx].y = y;
+		}
+		if (this.availableViews[this.currentViewIdx].isMain) {
+			window.parent.postMessage({ type: 'UPDATE_POS', x: x, y: y }, '*');
+		}
+	}
+
+	sendResult(valueOverride = null, descOverride = null) {
+		const val = valueOverride || (this.cfg.onNominal ? this.cfg.onNominal() : null);
+		const desc = descOverride || (this.cfg.onDescription ? this.cfg.onDescription() : "");
+		if (val) window.parent.postMessage({ type: 'COMPONENT_UPDATE', value: val, description: desc }, '*');
+	}
+}
diff --git a/docs/tool-style.css b/docs/tool-style.css
new file mode 100644
index 0000000..c1031cb
--- /dev/null
+++ b/docs/tool-style.css
@@ -0,0 +1,336 @@
+/* tool-style.css - Shared styles for Component Editors */
+@import url('common.css');
+
+:root {
+	--accent: #2563eb;
+	--text: #333;
+	--bg: #f4f4f9;
+	--card: #ffffff;
+	--border: #ccc;
+	--focus-ring: rgba(37, 99, 235, 0.2);
+	--resistor-body: #82cae0;
+	--resistor-shadow: #5ea8bd;
+}
+
+/* --- CORE LAYOUT --- */
+html { font-size: 16px; box-sizing: border-box; height: 100%; overflow: hidden; }
+*, *:before, *:after { box-sizing: inherit; }
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	background: var(--bg);
+	color: var(--text);
+	margin: 0; padding: 0;
+	height: 100%; width: 100%;
+	display: flex; justify-content: center; align-items: center;
+}
+
+.container {
+	background: var(--card); padding: 1.5rem; border-radius: 1rem;
+	box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.05);
+	width: 95%; max-width: 1000px; height: 95%; max-height: 95%;
+	margin: 1rem; display: flex; flex-direction: column;
+	overflow-y: auto; scrollbar-width: thin; gap: 0.5rem;
+	position: relative;
+}
+
+h1 { margin: 0; font-size: 1.5rem; text-align: center; flex-shrink: 0; }
+
+/* --- TOP SECTION --- */
+.top-section {
+	display: flex; gap: 1rem; width: 100%;
+	align-items: stretch; justify-content: center;
+	flex-shrink: 0;
+}
+
+/* Spyglass */
+.col-spyglass {
+	flex: 0 0 auto;
+	display: none;
+	flex-direction: row;
+	gap: 0.5rem;
+}
+.col-spyglass.active { display: flex; }
+
+.spyglass-wrapper {
+	width: 200px; height: 200px;
+	border-radius: 0.5rem; border: 1px solid var(--border);
+	padding: 0.5rem; position: relative; background: rgba(0,0,0,0.02);
+	flex-shrink: 0;
+}
+.spyglass-canvas {
+	width: 100%; height: 100%; object-fit: contain;
+	cursor: crosshair; display: block; background: #fff; border-radius: 0.25rem;
+}
+.spyglass-hint { display: none; }
+.zoom-badge {
+	position: absolute; bottom: 0.5rem; right: 0.5rem;
+	background: rgba(0,0,0,0.6); color: white;
+	font-size: 0.7rem; padding: 2px 6px;
+	border-radius: 4px; pointer-events: none;
+}
+
+/* Thumbnails */
+#view-selector {
+	display: flex; flex-direction: column; gap: 4px;
+	width: 72px; height: 200px;
+	overflow-y: auto; overflow-x: hidden;
+	padding-bottom: 0; margin-top: 0;
+	border-left: 1px solid var(--border); padding-left: 4px;
+}
+.view-thumb { width: 60px; height: 60px; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; overflow: hidden; position: relative; flex-shrink: 0; }
+.view-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
+.view-thumb canvas { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
+.view-thumb span { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; font-size: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.view-thumb .promote-btn {
+	display: flex; align-items: center; justify-content: center;
+	position: absolute; top: 0; right: 0;
+	background: #f59e0b; color: white; border: none;
+	width: 18px; height: 18px; font-size: 12px; line-height: 1;
+	cursor: pointer; z-index: 10;
+}
+
+/* Controls */
+.col-controls {
+	flex: 1; display: flex; flex-direction: column;
+	justify-content: center; gap: 1rem;
+	max-width: 600px; margin: 0 auto; width: 100%;
+}
+.top-section:has(.col-spyglass.active) .col-controls { margin: 0; }
+
+/* INPUTS */
+.reverse-input-group { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
+.input-row { display: flex; gap: 0.5rem; width: 100%; }
+.inp-nominal { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 1rem; flex: 1; min-width: 0; }
+.btn-action { padding: 0.6rem 1rem; background: var(--accent); color: white; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
+
+.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
+.form-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
+.input-wrapper { position: relative; width: 100%; }
+.input-wrapper input { padding-right: 2.5rem !important; }
+.unit { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.9rem; pointer-events: none; }
+
+label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; opacity: 0.8; }
+input {
+	width: 100%; padding: 0.8rem;
+	border: 1px solid var(--border);
+	border-radius: 0.5rem;
+	font-size: 1.1rem; font-weight: 600;
+	transition: all 0.2s;
+	background: #fff; color: inherit; box-sizing: border-box;
+}
+input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
+
+.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.5rem; width: 100%; }
+.btn-mode { padding: 0.6rem; border: 1px solid #e0e0e0; background: #fff; cursor: pointer; border-radius: 0.5rem; font-weight: 600; font-size: 0.9rem; color: #555; text-align: center; white-space: nowrap; }
+.btn-mode.active { background: var(--accent); color: white; border-color: var(--accent); }
+
+/* --- COMPONENT GRAPHIC --- */
+.resistor-wrapper-outer {
+	position: relative; width: 100%; height: 9rem; flex-shrink: 0;
+	display: flex; justify-content: center; align-items: center; z-index: 0; margin: 0;
+}
+.resistor-wrapper-outer::before {
+	content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 0.6rem;
+	transform: translateY(-50%); background: #9da5b4;
+	background-image: linear-gradient(to bottom, #d0d6e0, #8a92a0, #d0d6e0); z-index: -1;
+}
+.resistor-dumbbell-shape {
+	display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 10;
+	transform: scale(0.9); transform-origin: center;
+}
+.resistor-dumbbell-shape::before, .resistor-dumbbell-shape::after {
+	content: ''; display: block; width: 3.5rem; height: 8rem;
+	background-color: var(--resistor-body); border-radius: 1.5rem; flex-shrink: 0;
+	background-image: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 100%);
+	box-shadow: inset -2px 0 5px rgba(0,0,0,0.1), 0 0.8rem 1.2rem rgba(0,0,0,0.15); border: 1px solid var(--resistor-shadow);
+}
+.resistor-dumbbell-shape::before { border-top-right-radius: 0.6rem; border-bottom-right-radius: 0.6rem; margin-right: -0.4rem; }
+.resistor-dumbbell-shape::after { border-top-left-radius: 0.6rem; border-bottom-left-radius: 0.6rem; margin-left: -0.4rem; }
+
+.bands-container {
+	display: inline-flex; align-items: stretch; justify-content: center; height: 6rem;
+	background-color: var(--resistor-body);
+	box-shadow: inset 0 0.8rem 0.8rem -0.2rem rgba(0,0,0,0.15), inset 0 -0.8rem 0.8rem -0.2rem rgba(0,0,0,0.2);
+	padding: 0 0.5rem; gap: 0.5rem; z-index: 5;
+}
+
+/* --- COLOR CLASSES (Shared) --- */
+.c-bk { background-color: #000; color: #fff !important; }
+.c-bn { background-color: #5d4037; color: #fff !important; }
+.c-rd { background-color: #d32f2f; color: #fff !important; }
+.c-og { background-color: #f57c00; color: #000 !important; }
+.c-ye { background-color: #ffeb3b; color: #000 !important; }
+.c-gn { background-color: #2e7d32; color: #fff !important; }
+.c-bu { background-color: #1565c0; color: #fff !important; }
+.c-vt { background-color: #7b1fa2; color: #fff !important; }
+.c-gy { background-color: #9e9e9e; color: #000 !important; }
+.c-wh { background-color: #fff; border: 1px solid #ddd; color: #000 !important; }
+
+/* Metallic (Horizontal Gradient for Dropdowns) */
+.c-gd { background: linear-gradient(to right, #fbf0b5 0%, #c49a00 20%, #fbf0b5 40%, #b68f00 60%, #fbf0b5 80%); color: #000 !important; }
+.c-sv { background: linear-gradient(to right, #fff 0%, #9e9e9e 20%, #fff 40%, #808080 60%, #e8e8e8 80%); color: #000 !important; }
+
+/* Metallic Overrides (Vertical/Top Gradient for Component Bands) */
+.custom-select__trigger.c-gd { background-image: linear-gradient(to top, #fbf0b5 0%, #c49a00 20%, #fbf0b5 40%, #b68f00 60%, #fbf0b5 80%) !important; }
+.custom-select__trigger.c-sv { background-image: linear-gradient(to top, #ffffff 0%, #9e9e9e 20%, #ffffff 40%, #808080 60%, #e8e8e8 80%) !important; }
+
+/* Color Text Contrast Helper */
+.c-ye span, .c-wh span, .c-gd span, .c-sv span, .c-og span, .c-gy span { color: #222 !important; text-shadow: 0 1px 1px rgba(255,255,255,0.5); }
+
+/* --- DROPDOWN --- */
+.custom-select-wrapper { position: relative; width: 2.8rem; height: 100%; }
+.custom-select__trigger {
+	position: relative; display: flex; align-items: center; justify-content: center; height: 100%;
+	cursor: pointer; transition: transform 0.1s;
+	background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.2) 100%);
+	box-shadow: inset 1px 0 2px rgba(0,0,0,0.2), inset -1px 0 2px rgba(0,0,0,0.2);
+}
+.custom-select__trigger:active { transform: scale(0.95); }
+.custom-select__trigger span {
+	writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg); color: #fff;
+	font-weight: 700; font-size: 0.9rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; pointer-events: none;
+}
+
+#global-dropdown {
+	position: fixed; top: 0; left: 0; width: 12rem; background: #fff;
+	border: 1px solid #ccc; border-radius: 0.5rem;
+	box-shadow: 0 10px 40px rgba(0,0,0,0.4);
+	z-index: 99999; display: none; flex-direction: column;
+	max-height: 90vh; overflow-y: auto;
+}
+.custom-option { padding: 0.8rem 1rem; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
+.custom-option:hover { filter: brightness(0.95); }
+
+#global-dropdown.condensed .custom-option { padding: 0.5rem 0.5rem; font-size: 0.9rem; }
+#global-dropdown.super-condensed .custom-option { padding: 0.25rem 0.2rem; font-size: 0.85rem; }
+
+/* --- RESULTS --- */
+.result-box { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; padding-bottom: 0.5rem; }
+.result-row { display: flex; align-items: center; padding: 0.8rem; background: #fff; border: 1px solid #eee; border-radius: 0.8rem; box-shadow: 0 2px 5px rgba(0,0,0,0.03); gap: 1rem; }
+.best-match { background: #f8fbff; border: 1px solid #cce5ff; border-left: 0.4rem solid var(--accent); }
+.val-group { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
+.val-text { font-size: 1.4rem; font-weight: 800; color: #222; }
+.meta-text { color: #666; font-size: 0.9rem; font-weight: 500;}
+.match-badge { background: #e0f2fe; color: var(--accent); padding: 0.4rem 1rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 700; white-space: nowrap;}
+.badge-success { background: #dcfce7; color: #166534; padding: 0.4rem 1rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 700; white-space: nowrap;}
+
+.direction-icon { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #eee; color: #666; }
+.direction-icon svg { width: 1rem; height: 1rem; fill: currentColor; }
+.best-match .direction-icon { background: var(--accent); color: #fff; }
+.direction-icon.reverse { background: #f59e0b; color: #fff; }
+
+.btn-select { background: #059669; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.4rem; cursor: pointer; font-weight: 700; white-space: nowrap; margin-left: auto; }
+.btn-select:hover { background: #047857; }
+
+@media (max-width: 600px) {
+	/* 1. Global Setup */
+	html, body {
+		height: 100%;
+		overflow: hidden;
+		margin: 0; padding: 0;
+	}
+
+	/* 2. Container: Fill the parent iframe completely */
+	.container {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 0; /* Parent handles radius */
+		box-shadow: none; /* Parent handles shadow */
+		border: none;
+
+		padding: 0.25rem;
+		gap: 0.25rem;
+		overflow-y: auto;
+	}
+
+	/* 3. Header: Hidden inside tool */
+	h1 { display: none; }
+
+	/* 4. Top Section */
+	.top-section {
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		flex-shrink: 0;
+	}
+
+	.col-controls {
+		width: 100%;
+		gap: 0.25rem;
+	}
+
+	/* 5. Inputs & Buttons */
+	input {
+		padding: 0 0.4rem;
+		font-size: 0.9rem;
+		height: 2rem;
+	}
+	.unit { font-size: 0.7rem; right: 0.25rem; }
+
+	.btn-action, .btn-select {
+		padding: 0 0.5rem;
+		font-size: 0.8rem;
+		height: 2rem;
+		line-height: 1;
+		white-space: nowrap;
+	}
+
+	/* BAND BUTTONS: Single Line Forced */
+	.controls-grid {
+		display: flex !important;
+		flex-direction: row;
+		width: 100%;
+		gap: 0.2rem;
+	}
+	.btn-mode {
+		flex: 1;
+		padding: 0 !important;
+		font-size: 0.75rem;
+		height: 2rem;
+		line-height: 2rem;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.input-grid { gap: 0.25rem; }
+	.form-group { gap: 0; margin-bottom: 0; }
+	label { font-size: 0.7rem; margin: 0; line-height: 1.2; }
+
+	/* 6. Graphic */
+	.resistor-wrapper-outer {
+		height: 5rem;
+		min-height: 5rem;
+		margin: 0.125rem 0;
+		overflow: visible;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.resistor-dumbbell-shape {
+		transform: scale(0.65);
+		transform-origin: center center;
+		width: 100%;
+		display: inline-flex;
+	}
+	.bands-container { gap: 0.125rem; }
+
+	/* 7. Results */
+	.result-row {
+		padding: 0.25rem 0.5rem;
+		gap: 0.5rem;
+		min-height: 2.5rem;
+	}
+	.val-text { font-size: 1.1rem; }
+	.meta-text { font-size: 0.75rem; }
+
+	/* 8. Dropdown Fix */
+	.col-controls .custom-select-wrapper {
+		height: 2rem;
+	}
+	.bands-container .custom-select-wrapper {
+		height: 100%;
+	}
+	.custom-select__trigger span { font-size: 0.75rem; }
+}