floor-editor-ts 1.4.4 → 1.4.5

package/dist/floor-editor.es.js

@@ -3988,6 +3988,52 @@ function from_html(content, flags) {
 	};
 }
 /**
+* @param {string} content
+* @param {number} flags
+* @param {'svg' | 'math'} ns
+* @returns {() => Node | Node[]}
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function from_namespace(content, flags, ns = "svg") {
+	/**
+	* Whether or not the first item is a text/element node. If not, we need to
+	* create an additional comment node to act as `effect.nodes.start`
+	*/
+	var has_start = !content.startsWith("<!>");
+	var is_fragment = (flags & 1) !== 0;
+	var wrapped = `<${ns}>${has_start ? content : "<!>" + content}</${ns}>`;
+	/** @type {Element | DocumentFragment} */
+	var node;
+	return () => {
+		if (hydrating) {
+			assign_nodes(hydrate_node, null);
+			return hydrate_node;
+		}
+		if (!node) {
+			var root = /* @__PURE__ */ get_first_child(create_fragment_from_html(wrapped));
+			if (is_fragment) {
+				node = document.createDocumentFragment();
+				while (/* @__PURE__ */ get_first_child(root)) node.appendChild(/* @__PURE__ */ get_first_child(root));
+			} else node = /* @__PURE__ */ get_first_child(root);
+		}
+		var clone = node.cloneNode(true);
+		if (is_fragment) {
+			var start = /* @__PURE__ */ get_first_child(clone);
+			var end = clone.lastChild;
+			assign_nodes(start, end);
+		} else assign_nodes(clone, clone);
+		return clone;
+	};
+}
+/**
+* @param {string} content
+* @param {number} flags
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function from_svg(content, flags) {
+	return /* @__PURE__ */ from_namespace(content, flags, "svg");
+}
+/**
 * Don't mark this as side-effect-free, hydration needs to walk all nodes
 * @param {any} value
 */
@@ -6065,6 +6111,15 @@ function resizeRectCorner(points, cornerIndex, to) {
 function isNearPoint(a, b, threshold) {
 	return Math.hypot(a.x - b.x, a.y - b.y) <= threshold;
 }
+/** Screen/world AABB top-right corner for floating toolbar anchor. */
+function polygonToolbarAnchor(points) {
+	const b = zoneBounds(points);
+	if (!b) return null;
+	return {
+		x: b.maxX,
+		y: b.minY
+	};
+}
 //#endregion
 //#region src/lib/utils/cameraCoordinates.ts
 var FOV_PROP_KEYS = ["coordinates", "mapCoordinates"];
@@ -11177,6 +11232,23 @@ function drawTextAnnotations(cs, floor, selectedTextAnnotationId, currentSelecte
 		ctx.restore();
 	}
 }
+/** Numbered vertex badge (0, 1, 2…) — FOV / zone polygons. */
+function drawVertexIndexBadge(ctx, x, y, index, color, radius = 9) {
+	ctx.save();
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, Math.PI * 2);
+	ctx.fillStyle = color;
+	ctx.fill();
+	ctx.lineWidth = 2;
+	ctx.strokeStyle = "#ffffff";
+	ctx.stroke();
+	ctx.fillStyle = "#ffffff";
+	ctx.font = `700 ${Math.max(9, Math.round(radius * 1.05))}px system-ui, sans-serif`;
+	ctx.textAlign = "center";
+	ctx.textBaseline = "middle";
+	ctx.fillText(String(index), x, y + .5);
+	ctx.restore();
+}
 function hexToRgba(hex, alpha) {
 	const c = hex.trim();
 	const short = c.match(/^#([0-9a-f]{3})$/i);
@@ -11237,15 +11309,10 @@ function drawZoneShape(cs, zone, selected) {
 		ctx.fillStyle = color;
 		ctx.fillText(zone.name, bx + 6, by + 4);
 	}
-	if (selected) for (const p of pts) {
-		const s = wts(cs, p.x, p.y);
-		ctx.fillStyle = "#ffffff";
-		ctx.strokeStyle = color;
-		ctx.lineWidth = 1.5;
-		ctx.beginPath();
-		ctx.arc(s.x, s.y, 5, 0, Math.PI * 2);
-		ctx.fill();
-		ctx.stroke();
+	const r = selected ? 9 : 7;
+	for (let i = 0; i < pts.length; i++) {
+		const s = wts(cs, pts[i].x, pts[i].y);
+		drawVertexIndexBadge(ctx, s.x, s.y, i, color, r);
 	}
 	ctx.restore();
 }
@@ -11262,8 +11329,9 @@ function drawZoneDraft(cs, points, color, closed, cursor) {
 	if (cursor) pts.push(cursor);
 	ctx.save();
 	ctx.strokeStyle = color;
-	ctx.fillStyle = hexToRgba(color, .08);
-	ctx.lineWidth = 1.5;
+	ctx.fillStyle = hexToRgba(color, .12);
+	ctx.lineWidth = 2;
+	ctx.lineJoin = "round";
 	ctx.setLineDash([6 * Math.max(.6, zoom), 4 * Math.max(.6, zoom)]);
 	if (pts.length >= 2) {
 		ctx.beginPath();
@@ -11273,21 +11341,26 @@ function drawZoneDraft(cs, points, color, closed, cursor) {
 			const s = wts(cs, pts[i].x, pts[i].y);
 			ctx.lineTo(s.x, s.y);
 		}
-		if (closed && pts.length >= 3) {
+		if (closed && points.length >= 3) {
 			ctx.closePath();
 			ctx.fill();
 		}
 		ctx.stroke();
 	}
-	for (const p of points) {
-		const s = wts(cs, p.x, p.y);
-		ctx.setLineDash([]);
-		ctx.fillStyle = "#fff";
-		ctx.strokeStyle = color;
+	if (!closed && cursor && points.length >= 3) {
+		const a = wts(cs, cursor.x, cursor.y);
+		const b = wts(cs, points[0].x, points[0].y);
+		ctx.globalAlpha = .45;
 		ctx.beginPath();
-		ctx.arc(s.x, s.y, 4, 0, Math.PI * 2);
-		ctx.fill();
+		ctx.moveTo(a.x, a.y);
+		ctx.lineTo(b.x, b.y);
 		ctx.stroke();
+		ctx.globalAlpha = 1;
+	}
+	ctx.setLineDash([]);
+	for (let i = 0; i < points.length; i++) {
+		const s = wts(cs, points[i].x, points[i].y);
+		drawVertexIndexBadge(ctx, s.x, s.y, i, color, 9);
 	}
 	ctx.restore();
 }
@@ -60082,17 +60155,17 @@ var root_3$12 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0
 var root_4$11 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
 var root_5$8 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
 var root_6$6 = /* @__PURE__ */ from_html(`<div class="space-y-4"><label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Project Name</span> <input type="text" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Untitled Project"/></label> <label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Description</span> <textarea rows="3" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none resize-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Add a description for this project..."></textarea></label></div>`);
-var root_7$6 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between mb-5"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Metrics unit</span> <div class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden"><button>m, cm</button> <button>ft, inch</button></div></div> <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl divide-y divide-gray-200 dark:divide-gray-600"><label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
+var root_7$7 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between mb-5"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Metrics unit</span> <div class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden"><button>m, cm</button> <button>ft, inch</button></div></div> <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl divide-y divide-gray-200 dark:divide-gray-600"><label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">External Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Internal Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Extension Lines</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Object Distance</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <div class="flex items-center justify-between px-4 py-3.5"><span class="text-sm text-gray-700">Line Color</span> <div class="flex items-center gap-2"><button style="background-color: #ffffff" aria-label="White line color"></button> <span class="text-gray-300">|</span> <button style="background-color: #1e293b" aria-label="Dark line color"></button></div></div></div>`, 1);
 var root_9$4 = /* @__PURE__ */ from_html(`<button><span class="text-2xl"> </span> <span class="text-xs font-medium text-gray-700 dark:text-gray-300"> </span></button>`);
-var root_8$5 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-3">Theme</span> <div class="flex gap-3"></div></div></div>`);
+var root_8$4 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-3">Theme</span> <div class="flex gap-3"></div></div></div>`);
 var root_11$5 = /* @__PURE__ */ from_html(`<button class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Remove</button>`);
-var root_12$4 = /* @__PURE__ */ from_html(`<button class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Remove</button>`);
-var root_10$4 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">Gemini API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Required for AI-powered photorealistic rendering. Your key is stored locally in your browser only - never sent to our servers.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="AIza..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get a Gemini key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" class="text-blue-500 hover:underline">Google AI Studio</a></li> <li>Click "Create API Key"</li> <li>Copy and paste it above</li></ol></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">OpenAI API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Optional — enables OpenAI image generation as an alternative to Gemini. Stored locally only.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="sk-..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div> <div class="mt-3"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get an OpenAI key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" class="text-blue-500 hover:underline">OpenAI Platform</a></li> <li>Click "Create new secret key"</li> <li>Copy and paste it above</li></ol></div></div></div>`);
+var root_12$3 = /* @__PURE__ */ from_html(`<button class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Remove</button>`);
+var root_10$5 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">Gemini API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Required for AI-powered photorealistic rendering. Your key is stored locally in your browser only - never sent to our servers.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="AIza..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get a Gemini key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" class="text-blue-500 hover:underline">Google AI Studio</a></li> <li>Click "Create API Key"</li> <li>Copy and paste it above</li></ol></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">OpenAI API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Optional — enables OpenAI image generation as an alternative to Gemini. Stored locally only.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="sk-..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div> <div class="mt-3"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get an OpenAI key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" class="text-blue-500 hover:underline">OpenAI Platform</a></li> <li>Click "Create new secret key"</li> <li>Copy and paste it above</li></ol></div></div></div>`);
 var root_1$14 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" role="dialog" tabindex="-1" aria-label="Settings"><div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-[420px] max-h-[80vh] flex flex-col" role="document"><div class="flex items-center justify-between px-5 pt-4 pb-2"><h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Settings</h2> <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none" aria-label="Close settings">✕</button></div> <div class="flex border-b border-gray-200 dark:border-gray-700 px-5"><button>Project <!></button> <button>Dimensions <!></button> <button>Appearance <!></button> <button>AI <!></button></div> <div class="p-5 overflow-y-auto"><!></div></div></div>`);
 function SettingsDialog($$anchor, $$props) {
 	push($$props, true);
@@ -60261,7 +60334,7 @@ function SettingsDialog($$anchor, $$props) {
 			append($$anchor, div_9);
 		};
 		var consequent_5 = ($$anchor) => {
-			var fragment_1 = root_7$6();
+			var fragment_1 = root_7$7();
 			var div_10 = first_child(fragment_1);
 			var div_11 = sibling(child(div_10), 2);
 			var button_5 = child(div_11);
@@ -60319,7 +60392,7 @@ function SettingsDialog($$anchor, $$props) {
 			append($$anchor, fragment_1);
 		};
 		var consequent_6 = ($$anchor) => {
-			var div_15 = root_8$5();
+			var div_15 = root_8$4();
 			var div_16 = child(div_15);
 			var div_17 = sibling(child(div_16), 2);
 			each(div_17, 20, () => [
@@ -60365,7 +60438,7 @@ function SettingsDialog($$anchor, $$props) {
 			append($$anchor, div_15);
 		};
 		var consequent_9 = ($$anchor) => {
-			var div_18 = root_10$4();
+			var div_18 = root_10$5();
 			var div_19 = child(div_18);
 			var div_20 = sibling(child(div_19), 4);
 			var div_21 = child(div_20);
@@ -60407,7 +60480,7 @@ function SettingsDialog($$anchor, $$props) {
 			reset(button_14);
 			var node_7 = sibling(button_14, 2);
 			var consequent_8 = ($$anchor) => {
-				var button_15 = root_12$4();
+				var button_15 = root_12$3();
 				delegated("click", button_15, clearOpenAIKey);
 				append($$anchor, button_15);
 			};
@@ -60957,23 +61030,25 @@ delegate(["click", "keydown"]);
 init_client();
 init_index_client();
 init_onboarding_svelte();
-var root_2$10 = /* @__PURE__ */ from_html(`<input type="text" class="bg-white/20 text-white font-semibold px-2 py-0.5 rounded border border-white/30 outline-none text-sm w-40"/>`);
-var root_3$9 = /* @__PURE__ */ from_html(`<button class="font-semibold text-white text-sm hover:bg-white/10 px-2 py-0.5 rounded transition-colors" title="Click to rename"> </button>`);
-var root_4$8 = /* @__PURE__ */ from_html(`<button> </button>`);
-var root_5$5 = /* @__PURE__ */ from_html(`<button aria-label="Snap to Grid"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></button>`);
-var root_6$5 = /* @__PURE__ */ from_html(`<div class="flex bg-white/15 rounded-full p-0.5 shrink-0"><button title="Select mode (V)" aria-label="Select mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></button> <button title="Pan mode (H)" aria-label="Pan mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v1"></path><path d="M14 10V4a2 2 0 0 0-4 0v2"></path><path d="M10 10.5V6a2 2 0 0 0-4 0v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"></path></svg></button></div>`);
-var root_7$5 = /* @__PURE__ */ from_html(`<button aria-label="Toggle Furniture"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="12" width="20" height="8" rx="1"></rect><path d="M4 12V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5"></path><line x1="12" y1="12" x2="12" y2="20"></line></svg></button>`);
-var root_8$4 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1 bg-white/15 rounded-full p-0.5 shrink-0"><button class="w-7 h-7 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors text-sm font-bold" title="Zoom Out (−)" aria-label="Zoom Out">−</button> <button class="px-2 py-1 text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors min-w-[3rem] text-center" title="Reset Zoom (100%)"> </button> <button class="w-7 h-7 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors text-sm font-bold" title="Zoom In (+)" aria-label="Zoom In">+</button></div>`);
-var root_10$3 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-56 z-50" role="menu"><button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Snap to grid</span> <span> </span></button> <button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Show furniture</span> <span> </span></button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Version history</button> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Area summary</button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Settings…</button></div>`);
-var root_9$3 = /* @__PURE__ */ from_html(`<div class="relative shrink-0"><button title="Settings &amp; tools" aria-label="Settings &amp; tools"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button> <!></div>`);
-var root_11$4 = /* @__PURE__ */ from_html(`<button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Version History" aria-label="Version History"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Area Summary" aria-label="Area Summary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M9 3v18"></path></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Settings" aria-label="Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button>`, 1);
-var root_13$2 = /* @__PURE__ */ from_html(`<button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Import JSON</button>`);
-var root_12$3 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-48 z-50"><button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print Layout</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg> Export 2D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> Export 3D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg> Export as SVG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M8 16h2"></path><path d="M14 16h2"></path></svg> Export as DXF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 16h6"></path></svg> Export as DWG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 11v6"></path><path d="M8 11v6"></path><path d="M12 11v6"></path></svg> Export as PDF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg> Download JSON</button> <div class="h-px bg-gray-100 my-1"></div> <!> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> New Project</button></div>`);
-var root_1$11 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center px-4 gap-3 shrink-0 shadow-sm overflow-hidden"><button type="button"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2.5"></rect><path d="M9 3v18"></path></svg></button> <!> <div class="h-5 w-px bg-white/20"></div> <div class="flex items-center gap-1"><!> <button class="text-white/80 hover:text-white text-xs hover:bg-white/10 px-1.5 py-0.5 rounded transition-colors" title="Add Floor" aria-label="Add Floor">+</button> <span class="text-white/40 text-[10px] ml-1"> </span></div> <div class="flex-1"></div> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Undo (Ctrl+Z)" aria-label="Undo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg></button> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Redo (Ctrl+Y)" aria-label="Redo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path></svg></button> <div class="h-5 w-px bg-white/20"></div> <!> <!> <!> <div class="h-5 w-px bg-white/20"></div> <!> <!> <div class="h-5 w-px bg-white/20 shrink-0"></div> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Export</button> <!></div> <span><!></span> <button class="px-3 py-1.5 text-sm bg-white text-slate-800 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-sm">Save</button></div>`);
-var root_18$2 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-48 z-50"><button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print Layout</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg> Export 2D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> Export 3D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg> Export as SVG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M8 16h2"></path><path d="M14 16h2"></path></svg> Export as DXF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 16h6"></path></svg> Export as DWG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 11v6"></path><path d="M8 11v6"></path><path d="M12 11v6"></path></svg> Export as PDF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg> Download JSON</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Import JSON</button></div>`);
-var root_17$2 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center justify-between px-4 gap-3 shrink-0 shadow-sm"><span class="font-semibold text-white text-sm px-2 py-0.5 rounded transition-colors"> </span> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Import</button> <!></div></div>`);
-var root_19$3 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"><div class="bg-white rounded-xl shadow-2xl w-[420px] max-h-[80vh] overflow-hidden"><div class="flex items-center justify-between px-5 py-3 border-b border-gray-200"><h2 class="text-base font-semibold text-gray-800">📐 Area Summary</h2> <button class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button></div> <div class="overflow-y-auto max-h-[calc(80vh-52px)] p-1"><!></div></div></div>`);
-var root$5 = /* @__PURE__ */ from_html(`<!> <!> <!> <!>`, 1);
+var root_3$9 = /* @__PURE__ */ from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v3a2 2 0 0 1-2 2H3"></path><path d="M21 8h-3a2 2 0 0 1-2-2V3"></path><path d="M3 16h3a2 2 0 0 1 2 2v3"></path><path d="M16 21v-3a2 2 0 0 1 2-2h3"></path></svg>`);
+var root_4$8 = /* @__PURE__ */ from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3"></path><path d="M21 8V5a2 2 0 0 0-2-2h-3"></path><path d="M3 16v3a2 2 0 0 0 2 2h3"></path><path d="M16 21h3a2 2 0 0 0 2-2v-3"></path></svg>`);
+var root_5$5 = /* @__PURE__ */ from_html(`<input type="text" class="bg-white/20 text-white font-semibold px-2 py-0.5 rounded border border-white/30 outline-none text-sm w-40"/>`);
+var root_6$5 = /* @__PURE__ */ from_html(`<button class="font-semibold text-white text-sm hover:bg-white/10 px-2 py-0.5 rounded transition-colors" title="Click to rename"> </button>`);
+var root_7$6 = /* @__PURE__ */ from_html(`<button> </button>`);
+var root_8$3 = /* @__PURE__ */ from_html(`<button aria-label="Snap to Grid"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></button>`);
+var root_9$3 = /* @__PURE__ */ from_html(`<div class="flex bg-white/15 rounded-full p-0.5 shrink-0"><button title="Select mode (V)" aria-label="Select mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></button> <button title="Pan mode (H)" aria-label="Pan mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v1"></path><path d="M14 10V4a2 2 0 0 0-4 0v2"></path><path d="M10 10.5V6a2 2 0 0 0-4 0v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"></path></svg></button></div>`);
+var root_10$4 = /* @__PURE__ */ from_html(`<button aria-label="Toggle Furniture"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="12" width="20" height="8" rx="1"></rect><path d="M4 12V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5"></path><line x1="12" y1="12" x2="12" y2="20"></line></svg></button>`);
+var root_11$4 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1 bg-white/15 rounded-full p-0.5 shrink-0"><button class="w-7 h-7 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors text-sm font-bold" title="Zoom Out (−)" aria-label="Zoom Out">−</button> <button class="px-2 py-1 text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors min-w-[3rem] text-center" title="Reset Zoom (100%)"> </button> <button class="w-7 h-7 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors text-sm font-bold" title="Zoom In (+)" aria-label="Zoom In">+</button></div>`);
+var root_13$2 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-56 z-50" role="menu"><button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Snap to grid</span> <span> </span></button> <button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Show furniture</span> <span> </span></button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Version history</button> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Area summary</button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Settings…</button></div>`);
+var root_12$2 = /* @__PURE__ */ from_html(`<div class="relative shrink-0"><button title="Settings &amp; tools" aria-label="Settings &amp; tools"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button> <!></div>`);
+var root_14$2 = /* @__PURE__ */ from_html(`<button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Version History" aria-label="Version History"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Area Summary" aria-label="Area Summary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M9 3v18"></path></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Settings" aria-label="Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button>`, 1);
+var root_16$1 = /* @__PURE__ */ from_html(`<button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Import JSON</button>`);
+var root_15$2 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-48 z-50"><button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print Layout</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg> Export 2D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> Export 3D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg> Export as SVG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M8 16h2"></path><path d="M14 16h2"></path></svg> Export as DXF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 16h6"></path></svg> Export as DWG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 11v6"></path><path d="M8 11v6"></path><path d="M12 11v6"></path></svg> Export as PDF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg> Download JSON</button> <div class="h-px bg-gray-100 my-1"></div> <!> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> New Project</button></div>`);
+var root_2$10 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center px-4 gap-3 shrink-0 shadow-sm overflow-hidden"><button type="button"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2.5"></rect><path d="M9 3v18"></path></svg></button> <button type="button"><!></button> <!> <div class="h-5 w-px bg-white/20"></div> <div class="flex items-center gap-1"><!> <button class="text-white/80 hover:text-white text-xs hover:bg-white/10 px-1.5 py-0.5 rounded transition-colors" title="Add Floor" aria-label="Add Floor">+</button> <span class="text-white/40 text-[10px] ml-1"> </span></div> <div class="flex-1"></div> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Undo (Ctrl+Z)" aria-label="Undo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg></button> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Redo (Ctrl+Y)" aria-label="Redo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path></svg></button> <div class="h-5 w-px bg-white/20"></div> <!> <!> <!> <div class="h-5 w-px bg-white/20"></div> <!> <!> <div class="h-5 w-px bg-white/20 shrink-0"></div> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Export</button> <!></div> <span><!></span> <button class="px-3 py-1.5 text-sm bg-white text-slate-800 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-sm">Save</button></div>`);
+var root_21$3 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-48 z-50"><button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print Layout</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg> Export 2D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> Export 3D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg> Export as SVG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M8 16h2"></path><path d="M14 16h2"></path></svg> Export as DXF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 16h6"></path></svg> Export as DWG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 11v6"></path><path d="M8 11v6"></path><path d="M12 11v6"></path></svg> Export as PDF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg> Download JSON</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Import JSON</button></div>`);
+var root_20$3 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center justify-between px-4 gap-3 shrink-0 shadow-sm"><span class="font-semibold text-white text-sm px-2 py-0.5 rounded transition-colors"> </span> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Import</button> <!></div></div>`);
+var root_22$3 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"><div class="bg-white rounded-xl shadow-2xl w-[420px] max-h-[80vh] overflow-hidden"><div class="flex items-center justify-between px-5 py-3 border-b border-gray-200"><h2 class="text-base font-semibold text-gray-800">📐 Area Summary</h2> <button class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button></div> <div class="overflow-y-auto max-h-[calc(80vh-52px)] p-1"><!></div></div></div>`);
+var root_1$11 = /* @__PURE__ */ from_html(`<!> <!> <!> <!>`, 1);
 function TopBar($$anchor, $$props) {
 	push($$props, true);
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
@@ -60991,6 +61066,7 @@ function TopBar($$anchor, $$props) {
 	let headerNarrow = /* @__PURE__ */ state(false);
 	let headerEl = /* @__PURE__ */ state(void 0);
 	let toolsMenuRef = /* @__PURE__ */ state(void 0);
+	let isFullscreen = /* @__PURE__ */ state(false);
 	const useCompactTools = /* @__PURE__ */ user_derived(() => headerToolsMode() === "compact" || headerToolsMode() === "auto" && get(headerNarrow));
 	let projectName = /* @__PURE__ */ state("");
 	let mode = /* @__PURE__ */ state("2d");
@@ -61024,6 +61100,29 @@ function TopBar($$anchor, $$props) {
 		if (get(floors).length <= 1) return;
 		removeFloor(id);
 	}
+	/** Fullscreen the web-component host (or documentElement in standalone). */
+	function fullscreenTarget() {
+		var _$$get;
+		const root = (_$$get = get(headerEl)) === null || _$$get === void 0 ? void 0 : _$$get.getRootNode();
+		if (root instanceof ShadowRoot && root.host instanceof HTMLElement) return root.host;
+		return document.documentElement;
+	}
+	function syncFullscreenState() {
+		const el = fullscreenTarget();
+		set(isFullscreen, document.fullscreenElement === el || !!document.fullscreenElement, true);
+	}
+	async function toggleFullscreen() {
+		try {
+			if (document.fullscreenElement) await document.exitFullscreen();
+			else await fullscreenTarget().requestFullscreen();
+		} catch (_unused) {}
+		syncFullscreenState();
+	}
+	user_effect(() => {
+		const onFs = () => syncFullscreenState();
+		document.addEventListener("fullscreenchange", onFs);
+		return () => document.removeEventListener("fullscreenchange", onFs);
+	});
 	async function save() {
 		const p = get$1(currentProject);
 		console.log("🚀 ~ save ~ p:", p);
@@ -61202,250 +61301,263 @@ function TopBar($$anchor, $$props) {
 		input.click();
 		set(exportOpen, false);
 	}
-	var fragment = root$5();
+	var fragment = root_1$11();
 	var node = first_child(fragment);
-	var consequent_11 = ($$anchor) => {
-		var div = root_1$11();
+	var consequent_12 = ($$anchor) => {
+		var div = root_2$10();
 		var button = child(div);
-		var node_1 = sibling(button, 2);
+		var button_1 = sibling(button, 2);
+		var node_1 = child(button_1);
 		var consequent = ($$anchor) => {
-			var input_1 = root_2$10();
+			append($$anchor, root_3$9());
+		};
+		var alternate = ($$anchor) => {
+			append($$anchor, root_4$8());
+		};
+		if_block(node_1, ($$render) => {
+			if (get(isFullscreen)) $$render(consequent);
+			else $$render(alternate, -1);
+		});
+		reset(button_1);
+		var node_2 = sibling(button_1, 2);
+		var consequent_1 = ($$anchor) => {
+			var input_1 = root_5$5();
 			remove_input_defaults(input_1);
 			event("blur", input_1, onNameBlur);
 			delegated("keydown", input_1, onNameKeydown);
 			bind_value(input_1, () => get(projectName), ($$value) => set(projectName, $$value));
 			append($$anchor, input_1);
 		};
-		var alternate = ($$anchor) => {
-			var button_1 = root_3$9();
-			var text_1 = child(button_1, true);
-			reset(button_1);
+		var alternate_1 = ($$anchor) => {
+			var button_2 = root_6$5();
+			var text_1 = child(button_2, true);
+			reset(button_2);
 			template_effect(() => set_text(text_1, get(projectName)));
-			delegated("click", button_1, () => set(editingName, true));
-			append($$anchor, button_1);
+			delegated("click", button_2, () => set(editingName, true));
+			append($$anchor, button_2);
 		};
-		if_block(node_1, ($$render) => {
-			if (get(editingName)) $$render(consequent);
-			else $$render(alternate, -1);
+		if_block(node_2, ($$render) => {
+			if (get(editingName)) $$render(consequent_1);
+			else $$render(alternate_1, -1);
 		});
-		var div_1 = sibling(node_1, 4);
-		var node_2 = child(div_1);
-		each(node_2, 17, () => get(floors), index$1, ($$anchor, fl) => {
-			var button_2 = root_4$8();
-			var text_2 = child(button_2, true);
-			reset(button_2);
+		var div_1 = sibling(node_2, 4);
+		var node_3 = child(div_1);
+		each(node_3, 17, () => get(floors), index$1, ($$anchor, fl) => {
+			var button_3 = root_7$6();
+			var text_2 = child(button_3, true);
+			reset(button_3);
 			template_effect(() => {
-				set_class(button_2, 1, `px-2 py-0.5 text-xs rounded transition-colors ${get(fl).id === get(activeFloorId) ? "bg-white text-slate-800 font-semibold" : "text-white/80 hover:bg-white/10"}`);
-				set_attribute(button_2, "title", get(fl).id === get(activeFloorId) ? "Active floor (dbl-click to remove)" : "Click to switch, dbl-click to remove");
+				set_class(button_3, 1, `px-2 py-0.5 text-xs rounded transition-colors ${get(fl).id === get(activeFloorId) ? "bg-white text-slate-800 font-semibold" : "text-white/80 hover:bg-white/10"}`);
+				set_attribute(button_3, "title", get(fl).id === get(activeFloorId) ? "Active floor (dbl-click to remove)" : "Click to switch, dbl-click to remove");
 				set_text(text_2, get(fl).name);
 			});
-			delegated("click", button_2, () => setActiveFloor(get(fl).id));
-			delegated("dblclick", button_2, () => onRemoveFloor(get(fl).id));
-			append($$anchor, button_2);
+			delegated("click", button_3, () => setActiveFloor(get(fl).id));
+			delegated("dblclick", button_3, () => onRemoveFloor(get(fl).id));
+			append($$anchor, button_3);
 		});
-		var button_3 = sibling(node_2, 2);
-		var span = sibling(button_3, 2);
+		var button_4 = sibling(node_3, 2);
+		var span = sibling(button_4, 2);
 		var text_3 = child(span);
 		reset(span);
 		reset(div_1);
-		var button_4 = sibling(div_1, 4);
-		var button_5 = sibling(button_4, 2);
-		var node_3 = sibling(button_5, 4);
-		var consequent_1 = ($$anchor) => {
-			var button_6 = root_5$5();
-			template_effect(() => {
-				set_class(button_6, 1, `p-1.5 rounded transition-colors ${get(snapOn) ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
-				set_attribute(button_6, "title", `Snap to Grid (${get(snapOn) ? "On" : "Off"})`);
-			});
-			delegated("click", button_6, toggleSnap);
-			append($$anchor, button_6);
-		};
-		if_block(node_3, ($$render) => {
-			if (!get(useCompactTools)) $$render(consequent_1);
-		});
-		var node_4 = sibling(node_3, 2);
+		var button_5 = sibling(div_1, 4);
+		var button_6 = sibling(button_5, 2);
+		var node_4 = sibling(button_6, 4);
 		var consequent_2 = ($$anchor) => {
-			var div_2 = root_6$5();
-			var button_7 = child(div_2);
-			var button_8 = sibling(button_7, 2);
-			reset(div_2);
+			var button_7 = root_8$3();
 			template_effect(() => {
-				set_class(button_7, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${!$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
-				set_class(button_8, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
+				set_class(button_7, 1, `p-1.5 rounded transition-colors ${get(snapOn) ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
+				set_attribute(button_7, "title", `Snap to Grid (${get(snapOn) ? "On" : "Off"})`);
 			});
-			delegated("click", button_7, () => panMode.set(false));
-			delegated("click", button_8, () => panMode.set(true));
-			append($$anchor, div_2);
+			delegated("click", button_7, toggleSnap);
+			append($$anchor, button_7);
 		};
 		if_block(node_4, ($$render) => {
-			if (get(mode) === "2d") $$render(consequent_2);
+			if (!get(useCompactTools)) $$render(consequent_2);
 		});
 		var node_5 = sibling(node_4, 2);
 		var consequent_3 = ($$anchor) => {
-			var button_9 = root_7$5();
+			var div_2 = root_9$3();
+			var button_8 = child(div_2);
+			var button_9 = sibling(button_8, 2);
+			reset(div_2);
 			template_effect(() => {
-				set_class(button_9, 1, `p-1.5 rounded transition-colors ${$showFurnitureStore() ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
-				set_attribute(button_9, "title", `Toggle Furniture (${$showFurnitureStore() ? "Visible" : "Hidden"})`);
+				set_class(button_8, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${!$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
+				set_class(button_9, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
 			});
-			delegated("click", button_9, toggleFurniture);
-			append($$anchor, button_9);
+			delegated("click", button_8, () => panMode.set(false));
+			delegated("click", button_9, () => panMode.set(true));
+			append($$anchor, div_2);
 		};
 		if_block(node_5, ($$render) => {
-			if (!get(useCompactTools)) $$render(consequent_3);
+			if (get(mode) === "2d") $$render(consequent_3);
 		});
-		var node_6 = sibling(node_5, 4);
+		var node_6 = sibling(node_5, 2);
 		var consequent_4 = ($$anchor) => {
-			var div_3 = root_8$4();
-			var button_10 = child(div_3);
-			var button_11 = sibling(button_10, 2);
-			var text_4 = child(button_11);
-			reset(button_11);
+			var button_10 = root_10$4();
+			template_effect(() => {
+				set_class(button_10, 1, `p-1.5 rounded transition-colors ${$showFurnitureStore() ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
+				set_attribute(button_10, "title", `Toggle Furniture (${$showFurnitureStore() ? "Visible" : "Hidden"})`);
+			});
+			delegated("click", button_10, toggleFurniture);
+			append($$anchor, button_10);
+		};
+		if_block(node_6, ($$render) => {
+			if (!get(useCompactTools)) $$render(consequent_4);
+		});
+		var node_7 = sibling(node_6, 4);
+		var consequent_5 = ($$anchor) => {
+			var div_3 = root_11$4();
+			var button_11 = child(div_3);
 			var button_12 = sibling(button_11, 2);
+			var text_4 = child(button_12);
+			reset(button_12);
+			var button_13 = sibling(button_12, 2);
 			reset(div_3);
 			template_effect(($0) => set_text(text_4, `${$0 !== null && $0 !== void 0 ? $0 : ""}%`), [() => Math.round($canvasZoom() * 100)]);
-			delegated("click", button_10, () => canvasZoom.update((z) => Math.max(.1, z / 1.25)));
-			delegated("click", button_11, () => canvasZoom.set(1));
-			delegated("click", button_12, () => canvasZoom.update((z) => Math.min(10, z * 1.25)));
+			delegated("click", button_11, () => canvasZoom.update((z) => Math.max(.1, z / 1.25)));
+			delegated("click", button_12, () => canvasZoom.set(1));
+			delegated("click", button_13, () => canvasZoom.update((z) => Math.min(10, z * 1.25)));
 			append($$anchor, div_3);
 		};
-		if_block(node_6, ($$render) => {
-			if (get(mode) === "2d") $$render(consequent_4);
+		if_block(node_7, ($$render) => {
+			if (get(mode) === "2d") $$render(consequent_5);
 		});
-		var node_7 = sibling(node_6, 2);
-		var consequent_6 = ($$anchor) => {
-			var div_4 = root_9$3();
-			var button_13 = child(div_4);
-			var node_8 = sibling(button_13, 2);
-			var consequent_5 = ($$anchor) => {
-				var div_5 = root_10$3();
-				var button_14 = child(div_5);
-				var span_1 = sibling(child(button_14), 2);
+		var node_8 = sibling(node_7, 2);
+		var consequent_7 = ($$anchor) => {
+			var div_4 = root_12$2();
+			var button_14 = child(div_4);
+			var node_9 = sibling(button_14, 2);
+			var consequent_6 = ($$anchor) => {
+				var div_5 = root_13$2();
+				var button_15 = child(div_5);
+				var span_1 = sibling(child(button_15), 2);
 				var text_5 = child(span_1, true);
 				reset(span_1);
-				reset(button_14);
-				var button_15 = sibling(button_14, 2);
-				var span_2 = sibling(child(button_15), 2);
+				reset(button_15);
+				var button_16 = sibling(button_15, 2);
+				var span_2 = sibling(child(button_16), 2);
 				var text_6 = child(span_2, true);
 				reset(span_2);
-				reset(button_15);
-				var button_16 = sibling(button_15, 4);
-				var button_17 = sibling(button_16, 2);
-				var button_18 = sibling(button_17, 4);
+				reset(button_16);
+				var button_17 = sibling(button_16, 4);
+				var button_18 = sibling(button_17, 2);
+				var button_19 = sibling(button_18, 4);
 				reset(div_5);
 				template_effect(() => {
-					set_attribute(button_14, "aria-checked", get(snapOn));
+					set_attribute(button_15, "aria-checked", get(snapOn));
 					set_class(span_1, 1, `text-xs font-medium ${get(snapOn) ? "text-emerald-600" : "text-gray-400"}`);
 					set_text(text_5, get(snapOn) ? "On" : "Off");
-					set_attribute(button_15, "aria-checked", $showFurnitureStore());
+					set_attribute(button_16, "aria-checked", $showFurnitureStore());
 					set_class(span_2, 1, `text-xs font-medium ${$showFurnitureStore() ? "text-emerald-600" : "text-gray-400"}`);
 					set_text(text_6, $showFurnitureStore() ? "On" : "Off");
 				});
-				delegated("click", button_14, toggleSnap);
-				delegated("click", button_15, toggleFurniture);
-				delegated("click", button_16, () => {
+				delegated("click", button_15, toggleSnap);
+				delegated("click", button_16, toggleFurniture);
+				delegated("click", button_17, () => {
 					set(toolsMenuOpen, false);
 					set(versionHistoryOpen, true);
 				});
-				delegated("click", button_17, () => {
+				delegated("click", button_18, () => {
 					set(toolsMenuOpen, false);
 					set(areaOpen, true);
 				});
-				delegated("click", button_18, () => {
+				delegated("click", button_19, () => {
 					set(toolsMenuOpen, false);
 					set(settingsOpen, true);
 				});
 				append($$anchor, div_5);
 			};
-			if_block(node_8, ($$render) => {
-				if (get(toolsMenuOpen)) $$render(consequent_5);
+			if_block(node_9, ($$render) => {
+				if (get(toolsMenuOpen)) $$render(consequent_6);
 			});
 			reset(div_4);
 			bind_this(div_4, ($$value) => set(toolsMenuRef, $$value), () => get(toolsMenuRef));
 			template_effect(() => {
-				set_class(button_13, 1, `px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors ${get(toolsMenuOpen) ? "bg-white/15 text-white" : ""}`);
-				set_attribute(button_13, "aria-expanded", get(toolsMenuOpen));
+				set_class(button_14, 1, `px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors ${get(toolsMenuOpen) ? "bg-white/15 text-white" : ""}`);
+				set_attribute(button_14, "aria-expanded", get(toolsMenuOpen));
 			});
-			delegated("click", button_13, () => set(toolsMenuOpen, !get(toolsMenuOpen)));
+			delegated("click", button_14, () => set(toolsMenuOpen, !get(toolsMenuOpen)));
 			append($$anchor, div_4);
 		};
-		var alternate_1 = ($$anchor) => {
-			var fragment_1 = root_11$4();
-			var button_19 = first_child(fragment_1);
-			var button_20 = sibling(button_19, 2);
+		var alternate_2 = ($$anchor) => {
+			var fragment_1 = root_14$2();
+			var button_20 = first_child(fragment_1);
 			var button_21 = sibling(button_20, 2);
-			delegated("click", button_19, () => set(versionHistoryOpen, true));
-			delegated("click", button_20, () => set(areaOpen, true));
-			delegated("click", button_21, () => set(settingsOpen, true));
+			var button_22 = sibling(button_21, 2);
+			delegated("click", button_20, () => set(versionHistoryOpen, true));
+			delegated("click", button_21, () => set(areaOpen, true));
+			delegated("click", button_22, () => set(settingsOpen, true));
 			append($$anchor, fragment_1);
 		};
-		if_block(node_7, ($$render) => {
-			if (get(useCompactTools)) $$render(consequent_6);
-			else $$render(alternate_1, -1);
+		if_block(node_8, ($$render) => {
+			if (get(useCompactTools)) $$render(consequent_7);
+			else $$render(alternate_2, -1);
 		});
-		var div_6 = sibling(node_7, 4);
-		var button_22 = child(div_6);
-		var node_9 = sibling(button_22, 2);
-		var consequent_8 = ($$anchor) => {
-			var div_7 = root_12$3();
-			var button_23 = child(div_7);
-			var button_24 = sibling(button_23, 4);
-			var button_25 = sibling(button_24, 2);
+		var div_6 = sibling(node_8, 4);
+		var button_23 = child(div_6);
+		var node_10 = sibling(button_23, 2);
+		var consequent_9 = ($$anchor) => {
+			var div_7 = root_15$2();
+			var button_24 = child(div_7);
+			var button_25 = sibling(button_24, 4);
 			var button_26 = sibling(button_25, 2);
 			var button_27 = sibling(button_26, 2);
 			var button_28 = sibling(button_27, 2);
 			var button_29 = sibling(button_28, 2);
 			var button_30 = sibling(button_29, 2);
-			var node_10 = sibling(button_30, 4);
-			var consequent_7 = ($$anchor) => {
-				var button_31 = root_13$2();
-				delegated("click", button_31, onImportJSON);
-				append($$anchor, button_31);
+			var button_31 = sibling(button_30, 2);
+			var node_11 = sibling(button_31, 4);
+			var consequent_8 = ($$anchor) => {
+				var button_32 = root_16$1();
+				delegated("click", button_32, onImportJSON);
+				append($$anchor, button_32);
 			};
-			if_block(node_10, ($$render) => {
-				if (!$$props.viewOnly) $$render(consequent_7);
+			if_block(node_11, ($$render) => {
+				if (!$$props.viewOnly) $$render(consequent_8);
 			});
-			var button_32 = sibling(node_10, 2);
+			var button_33 = sibling(node_11, 2);
 			reset(div_7);
-			delegated("click", button_23, () => {
+			delegated("click", button_24, () => {
 				set(exportOpen, false);
 				window.dispatchEvent(new KeyboardEvent("keydown", {
 					key: "p",
 					ctrlKey: true
 				}));
 			});
-			delegated("click", button_24, onExport2DPNG);
-			delegated("click", button_25, onExport3DPNG);
-			delegated("click", button_26, onExportSVG);
-			delegated("click", button_27, onExportDXF);
-			delegated("click", button_28, onExportDWG);
-			delegated("click", button_29, onExportPDF);
-			delegated("click", button_30, onExportJSON);
-			delegated("click", button_32, newProject);
+			delegated("click", button_25, onExport2DPNG);
+			delegated("click", button_26, onExport3DPNG);
+			delegated("click", button_27, onExportSVG);
+			delegated("click", button_28, onExportDXF);
+			delegated("click", button_29, onExportDWG);
+			delegated("click", button_30, onExportPDF);
+			delegated("click", button_31, onExportJSON);
+			delegated("click", button_33, newProject);
 			append($$anchor, div_7);
 		};
-		if_block(node_9, ($$render) => {
-			if (get(exportOpen)) $$render(consequent_8);
+		if_block(node_10, ($$render) => {
+			if (get(exportOpen)) $$render(consequent_9);
 		});
 		reset(div_6);
 		bind_this(div_6, ($$value) => exportRef = $$value, () => exportRef);
 		var span_3 = sibling(div_6, 2);
-		var node_11 = child(span_3);
-		var consequent_9 = ($$anchor) => {
+		var node_12 = child(span_3);
+		var consequent_10 = ($$anchor) => {
 			append($$anchor, text$1("Saving…"));
 		};
-		var consequent_10 = ($$anchor) => {
+		var consequent_11 = ($$anchor) => {
 			append($$anchor, text$1("Saved ✓"));
 		};
-		var alternate_2 = ($$anchor) => {
+		var alternate_3 = ($$anchor) => {
 			append($$anchor, text$1("Unsaved •"));
 		};
-		if_block(node_11, ($$render) => {
-			if ($saveState() === "saving") $$render(consequent_9);
-			else if ($saveState() === "saved") $$render(consequent_10, 1);
-			else $$render(alternate_2, -1);
+		if_block(node_12, ($$render) => {
+			if ($saveState() === "saving") $$render(consequent_10);
+			else if ($saveState() === "saved") $$render(consequent_11, 1);
+			else $$render(alternate_3, -1);
 		});
 		reset(span_3);
-		var button_33 = sibling(span_3, 2);
+		var button_34 = sibling(span_3, 2);
 		reset(div);
 		bind_this(div, ($$value) => set(headerEl, $$value), () => get(headerEl));
 		template_effect(() => {
@@ -61454,81 +61566,86 @@ function TopBar($$anchor, $$props) {
 			set_attribute(button, "title", showBuildSidebar() ? "Hide sidebar" : "Show sidebar");
 			set_attribute(button, "aria-label", showBuildSidebar() ? "Hide sidebar" : "Show sidebar");
 			set_attribute(button, "aria-pressed", showBuildSidebar());
+			set_class(button_1, 1, `shrink-0 w-8 h-8 rounded-md flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition-colors ${get(isFullscreen) ? "bg-white/15 text-white" : ""}`);
+			set_attribute(button_1, "title", get(isFullscreen) ? "Exit fullscreen (Esc)" : "Fullscreen editor");
+			set_attribute(button_1, "aria-label", get(isFullscreen) ? "Exit fullscreen" : "Enter fullscreen");
+			set_attribute(button_1, "aria-pressed", get(isFullscreen));
 			set_text(text_3, `${(_$$get$length = get(floors).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""}F`);
 			set_class(span_3, 1, `text-[11px] font-medium transition-all duration-300 ${$saveState() === "saved" ? "text-emerald-400" : $saveState() === "saving" ? "text-amber-300 animate-pulse" : "text-white/50"}`);
 			set_attribute(span_3, "title", get(lastSavedText) || "Not saved yet");
 		});
 		delegated("click", button, () => showBuildSidebar(!showBuildSidebar()));
-		delegated("click", button_3, onAddFloor);
-		delegated("click", button_4, function(...$$args) {
+		delegated("click", button_1, toggleFullscreen);
+		delegated("click", button_4, onAddFloor);
+		delegated("click", button_5, function(...$$args) {
 			undo === null || undo === void 0 || undo.apply(this, $$args);
 		});
-		delegated("click", button_5, function(...$$args) {
+		delegated("click", button_6, function(...$$args) {
 			redo === null || redo === void 0 || redo.apply(this, $$args);
 		});
-		delegated("click", button_22, () => {
+		delegated("click", button_23, () => {
 			set(exportOpen, !get(exportOpen));
 			if (get(exportOpen)) triggerTip("first-export", 300, 60);
 		});
-		delegated("click", button_33, save);
+		delegated("click", button_34, save);
 		append($$anchor, div);
 	};
-	var alternate_3 = ($$anchor) => {
-		var div_8 = root_17$2();
+	var alternate_4 = ($$anchor) => {
+		var div_8 = root_20$3();
 		var span_4 = child(div_8);
 		var text_10 = child(span_4, true);
 		reset(span_4);
 		var div_9 = sibling(span_4, 2);
-		var button_34 = child(div_9);
-		var node_12 = sibling(button_34, 2);
-		var consequent_12 = ($$anchor) => {
-			var div_10 = root_18$2();
-			var button_35 = child(div_10);
-			var button_36 = sibling(button_35, 4);
-			var button_37 = sibling(button_36, 2);
+		var button_35 = child(div_9);
+		var node_13 = sibling(button_35, 2);
+		var consequent_13 = ($$anchor) => {
+			var div_10 = root_21$3();
+			var button_36 = child(div_10);
+			var button_37 = sibling(button_36, 4);
 			var button_38 = sibling(button_37, 2);
 			var button_39 = sibling(button_38, 2);
 			var button_40 = sibling(button_39, 2);
 			var button_41 = sibling(button_40, 2);
 			var button_42 = sibling(button_41, 2);
-			var button_43 = sibling(button_42, 4);
+			var button_43 = sibling(button_42, 2);
+			var button_44 = sibling(button_43, 4);
 			reset(div_10);
-			delegated("click", button_35, () => {
+			delegated("click", button_36, () => {
 				set(exportOpen, false);
 				window.dispatchEvent(new KeyboardEvent("keydown", {
 					key: "p",
 					ctrlKey: true
 				}));
 			});
-			delegated("click", button_36, onExport2DPNG);
-			delegated("click", button_37, onExport3DPNG);
-			delegated("click", button_38, onExportSVG);
-			delegated("click", button_39, onExportDXF);
-			delegated("click", button_40, onExportDWG);
-			delegated("click", button_41, onExportPDF);
-			delegated("click", button_42, onExportJSON);
-			delegated("click", button_43, onImportJSON);
+			delegated("click", button_37, onExport2DPNG);
+			delegated("click", button_38, onExport3DPNG);
+			delegated("click", button_39, onExportSVG);
+			delegated("click", button_40, onExportDXF);
+			delegated("click", button_41, onExportDWG);
+			delegated("click", button_42, onExportPDF);
+			delegated("click", button_43, onExportJSON);
+			delegated("click", button_44, onImportJSON);
 			append($$anchor, div_10);
 		};
-		if_block(node_12, ($$render) => {
-			if (get(exportOpen)) $$render(consequent_12);
+		if_block(node_13, ($$render) => {
+			if (get(exportOpen)) $$render(consequent_13);
 		});
 		reset(div_9);
 		bind_this(div_9, ($$value) => exportRef = $$value, () => exportRef);
 		reset(div_8);
 		template_effect(() => set_text(text_10, get(projectName)));
-		delegated("click", button_34, () => {
+		delegated("click", button_35, () => {
 			set(exportOpen, !get(exportOpen));
 			if (get(exportOpen)) triggerTip("first-export", 300, 60);
 		});
 		append($$anchor, div_8);
 	};
 	if_block(node, ($$render) => {
-		if (!$$props.viewOnly) $$render(consequent_11);
-		else $$render(alternate_3, -1);
+		if (!$$props.viewOnly) $$render(consequent_12);
+		else $$render(alternate_4, -1);
 	});
-	var node_13 = sibling(node, 2);
-	SettingsDialog(node_13, {
+	var node_14 = sibling(node, 2);
+	SettingsDialog(node_14, {
 		get open() {
 			return get(settingsOpen);
 		},
@@ -61536,8 +61653,8 @@ function TopBar($$anchor, $$props) {
 			set(settingsOpen, $$value, true);
 		}
 	});
-	var node_14 = sibling(node_13, 2);
-	VersionHistoryPanel(node_14, {
+	var node_15 = sibling(node_14, 2);
+	VersionHistoryPanel(node_15, {
 		get open() {
 			return get(versionHistoryOpen);
 		},
@@ -61545,12 +61662,12 @@ function TopBar($$anchor, $$props) {
 			set(versionHistoryOpen, $$value, true);
 		}
 	});
-	var node_15 = sibling(node_14, 2);
-	var consequent_13 = ($$anchor) => {
-		var div_11 = root_19$3();
+	var node_16 = sibling(node_15, 2);
+	var consequent_14 = ($$anchor) => {
+		var div_11 = root_22$3();
 		var div_12 = child(div_11);
 		var div_13 = child(div_12);
-		var button_44 = sibling(child(div_13), 2);
+		var button_45 = sibling(child(div_13), 2);
 		reset(div_13);
 		var div_14 = sibling(div_13, 2);
 		AreaSummaryPanel(child(div_14), {});
@@ -61562,11 +61679,11 @@ function TopBar($$anchor, $$props) {
 			if (e.key === "Escape") set(areaOpen, false);
 		});
 		delegated("click", div_12, (e) => e.stopPropagation());
-		delegated("click", button_44, () => set(areaOpen, false));
+		delegated("click", button_45, () => set(areaOpen, false));
 		append($$anchor, div_11);
 	};
-	if_block(node_15, ($$render) => {
-		if (get(areaOpen)) $$render(consequent_13);
+	if_block(node_16, ($$render) => {
+		if (get(areaOpen)) $$render(consequent_14);
 	});
 	append($$anchor, fragment);
 	pop();
@@ -62211,25 +62328,27 @@ delegate(["click"]);
 //#region src/lib/components/sidebar/BuildPanel.svelte
 init_client();
 init_index_client();
-var root_7$4 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#92400e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path></path></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
-var root_8$3 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0e7490" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="1"></rect><line x1="12" y1="4" x2="12" y2="20"></line><line x1="3" y1="12" x2="21" y2="12"></line></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_4$6 = /* @__PURE__ */ from_html(`Click path · nhấn <strong>✓</strong> trên toolbar để đóng · 🗑 xoá`, 1);
+var root_7$5 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#92400e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path></path></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_8$2 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0e7490" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="1"></rect><line x1="12" y1="4" x2="12" y2="20"></line><line x1="3" y1="12" x2="21" y2="12"></line></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
 var root_6$4 = /* @__PURE__ */ from_html(`<div class="grid grid-cols-2 gap-2 mb-3"></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Windows</h3> <div class="grid grid-cols-2 gap-2"></div>`, 1);
-var root_1$9 = /* @__PURE__ */ from_html(`<div class="space-y-1"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Tools</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></div> <div class="text-left"><div class="font-medium">Select <span class="text-gray-400 text-xs ml-1">V</span></div> <div class="text-xs text-gray-400">Click to select elements</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="8" rx="1"></rect><line x1="7" y1="8" x2="7" y2="16"></line><line x1="12" y1="8" x2="12" y2="16"></line><line x1="17" y1="8" x2="17" y2="16"></line></svg></div> <div class="text-left"><div class="font-medium">Draw Wall <span class="text-gray-400 text-xs ml-1">W</span></div> <div class="text-xs text-gray-400">Click to draw, dbl-click to finish</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Camera FOV</h3> <button type="button"><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg></div> <div class="text-left"><div class="font-medium">Draw surveillance FOV</div> <div class="text-xs text-gray-400">Floor polygon → mapCoordinates</div></div></button> <p class="text-[10px] text-gray-400 mb-3 px-0.5">Select a camera, then draw on floor. Thumbnail opens beside for image FOV (coordinates). Separate from Zone tools below.</p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Zone</h3> <div class="grid grid-cols-3 gap-1.5 mb-1"><button type="button" title="Drag to create rectangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="4" y="6" width="16" height="12" rx="1"></rect></svg> Rect</button> <button type="button" title="Click to place triangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M12 4 L20 19 L4 19 Z"></path></svg> Triangle</button> <button type="button" title="Click points; click first point or Enter to close"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg> Polygon</button></div> <p class="text-[10px] text-gray-400 mb-2 px-0.5"><!></p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Structure</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 5h-5V2h-3v6h-4V5H7v6H2v3h5v3h3v-3h4v3h3v-6h5z"></path></svg></div> <div class="text-left"><div class="font-medium">Add Stairs</div> <div class="text-xs text-gray-400">Click to place stairs</div></div></button> <div class="flex gap-2"><button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="6"></circle><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Round Column</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"></rect><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Square Column</div></div></button></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Annotate</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"></path><line x1="12" y1="4" x2="12" y2="20"></line><line x1="8" y1="20" x2="16" y2="20"></line></svg></div> <div class="text-left"><div class="font-medium">Text Label</div> <div class="text-xs text-gray-400">Add text annotations (T)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><line x1="16" y1="5" x2="22" y2="5"></line><line x1="19" y1="2" x2="19" y2="8"></line><line x1="3" y1="12" x2="12" y2="12"></line></svg></div> <div class="text-left"><div class="font-medium">Dimension</div> <div class="text-xs text-gray-400">Add dimension annotations (N)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h5l2-7 4 14 2-7h7"></path></svg></div> <div class="text-left"><div class="font-medium">Measure</div> <div class="text-xs text-gray-400">Measure distances (M)</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Import</h3> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="text-left"><div class="font-medium">Import Image</div> <div class="text-xs text-gray-400">Floor plan background</div></div></button> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div> <div class="text-left"><div class="font-medium">Import RoomPlan</div> <div class="text-xs text-gray-400">iOS LiDAR scan (.json/.zip)</div></div></button> <button class="w-full flex items-center justify-between px-1 py-2 mt-3"><h3 class="text-xs font-semibold text-gray-400 uppercase">Doors</h3> <span class="text-gray-400 text-xs"> </span></button> <!></div>`);
-var root_10$2 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center text-2xl font-mono"> </div> <span class="text-xs font-medium text-gray-600"> </span></button>`);
+var root_1$9 = /* @__PURE__ */ from_html(`<div class="space-y-1"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Tools</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></div> <div class="text-left"><div class="font-medium">Select <span class="text-gray-400 text-xs ml-1">V</span></div> <div class="text-xs text-gray-400">Click to select elements</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="8" rx="1"></rect><line x1="7" y1="8" x2="7" y2="16"></line><line x1="12" y1="8" x2="12" y2="16"></line><line x1="17" y1="8" x2="17" y2="16"></line></svg></div> <div class="text-left"><div class="font-medium">Draw Wall <span class="text-gray-400 text-xs ml-1">W</span></div> <div class="text-xs text-gray-400">Click to draw, dbl-click to finish</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Camera FOV</h3> <button type="button"><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg></div> <div class="text-left"><div class="font-medium">Draw surveillance FOV</div> <div class="text-xs text-gray-400">Click path · ✓ toolbar to finish</div></div></button> <p class="text-[10px] text-gray-400 mb-3 px-0.5">Select a camera, draw on floor → <code class="font-mono">mapCoordinates</code>.
+          Nhấn ✓ đóng polygon · 🗑 xoá. Click polygon để hiện lại toolbar.</p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Zone</h3> <div class="grid grid-cols-3 gap-1.5 mb-1"><button type="button" title="Drag to create rectangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="4" y="6" width="16" height="12" rx="1"></rect></svg> Rect</button> <button type="button" title="Click to place triangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M12 4 L20 19 L4 19 Z"></path></svg> Triangle</button> <button type="button" title="Click vertices; double-click or Enter to finish"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg> Polygon</button></div> <p class="text-[10px] text-gray-400 mb-2 px-0.5"><!></p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Structure</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 5h-5V2h-3v6h-4V5H7v6H2v3h5v3h3v-3h4v3h3v-6h5z"></path></svg></div> <div class="text-left"><div class="font-medium">Add Stairs</div> <div class="text-xs text-gray-400">Click to place stairs</div></div></button> <div class="flex gap-2"><button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="6"></circle><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Round Column</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"></rect><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Square Column</div></div></button></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Annotate</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"></path><line x1="12" y1="4" x2="12" y2="20"></line><line x1="8" y1="20" x2="16" y2="20"></line></svg></div> <div class="text-left"><div class="font-medium">Text Label</div> <div class="text-xs text-gray-400">Add text annotations (T)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><line x1="16" y1="5" x2="22" y2="5"></line><line x1="19" y1="2" x2="19" y2="8"></line><line x1="3" y1="12" x2="12" y2="12"></line></svg></div> <div class="text-left"><div class="font-medium">Dimension</div> <div class="text-xs text-gray-400">Add dimension annotations (N)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h5l2-7 4 14 2-7h7"></path></svg></div> <div class="text-left"><div class="font-medium">Measure</div> <div class="text-xs text-gray-400">Measure distances (M)</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Import</h3> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="text-left"><div class="font-medium">Import Image</div> <div class="text-xs text-gray-400">Floor plan background</div></div></button> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div> <div class="text-left"><div class="font-medium">Import RoomPlan</div> <div class="text-xs text-gray-400">iOS LiDAR scan (.json/.zip)</div></div></button> <button class="w-full flex items-center justify-between px-1 py-2 mt-3"><h3 class="text-xs font-semibold text-gray-400 uppercase">Doors</h3> <span class="text-gray-400 text-xs"> </span></button> <!></div>`);
+var root_10$3 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center text-2xl font-mono"> </div> <span class="text-xs font-medium text-gray-600"> </span></button>`);
 var root_11$3 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-green-300 hover:bg-green-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center text-lg"><!></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
 var root_9$2 = /* @__PURE__ */ from_html(`<div class="space-y-2"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Presets</h3> <p class="text-xs text-gray-400 mb-3">Click to add a room shape to the canvas</p> <div class="grid grid-cols-2 gap-2"></div> <hr class="my-3 border-gray-200"/> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Templates</h3> <p class="text-xs text-gray-400 mb-3">Pre-furnished rooms — walls + furniture in one click</p> <div class="grid grid-cols-2 gap-2"></div></div>`);
 var root_20$2 = /* @__PURE__ */ from_html(`<button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 w-5 h-5 flex items-center justify-center rounded-full hover:bg-gray-100" title="Clear search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>`);
 var root_21$2 = /* @__PURE__ */ from_html(`<div class="text-[10px] text-gray-400 px-1"> </div>`);
 var root_22$2 = /* @__PURE__ */ from_html(`<button> </button>`);
-var root_24$1 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-8 h-8 rounded-lg flex items-center justify-center"><div class="w-4 h-4 rounded-sm"></div></div> <span class="text-[10px] font-medium text-gray-600 leading-tight text-center"> </span></button>`);
-var root_23$2 = /* @__PURE__ */ from_html(`<div class="mt-1"><h4 class="text-[10px] font-semibold text-gray-400 uppercase mb-1.5">Recent</h4> <div class="grid grid-cols-2 gap-2"></div></div> <hr class="border-gray-100"/>`, 1);
-var root_26$2 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> <mark class="bg-yellow-200 text-gray-800 rounded-sm px-0.5"> </mark> </span>`);
+var root_24$2 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-8 h-8 rounded-lg flex items-center justify-center"><div class="w-4 h-4 rounded-sm"></div></div> <span class="text-[10px] font-medium text-gray-600 leading-tight text-center"> </span></button>`);
+var root_23$1 = /* @__PURE__ */ from_html(`<div class="mt-1"><h4 class="text-[10px] font-semibold text-gray-400 uppercase mb-1.5">Recent</h4> <div class="grid grid-cols-2 gap-2"></div></div> <hr class="border-gray-100"/>`, 1);
+var root_26$1 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> <mark class="bg-yellow-200 text-gray-800 rounded-sm px-0.5"> </mark> </span>`);
 var root_27$1 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> </span>`);
-var root_25$2 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-10 h-10 rounded-lg flex items-center justify-center"><div class="w-5 h-5 rounded-sm"></div></div> <!> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_25$1 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-10 h-10 rounded-lg flex items-center justify-center"><div class="w-5 h-5 rounded-sm"></div></div> <!> <span class="text-[10px] text-gray-400"> </span></button>`);
 var root_19$2 = /* @__PURE__ */ from_html(`<div class="space-y-2"><div class="relative"><input type="text" placeholder="Search furniture..." class="w-full px-3 py-2 pr-8 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none"/> <!></div> <!> <div class="flex flex-wrap gap-1 max-h-24 overflow-y-auto"><button>All</button> <button> </button> <!></div> <!> <div class="grid grid-cols-2 gap-2 mt-2"></div></div>`);
 var root_28$1 = /* @__PURE__ */ from_html(`<div class="fixed z-50 pointer-events-none"><div class="bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden" style="width: 220px;"><div class="w-full h-[120px] bg-gray-50 flex items-center justify-center p-3"><div class="w-16 h-16 rounded-xl flex items-center justify-center"><div class="w-10 h-10 rounded-md"></div></div></div> <div class="p-3 space-y-1.5"><div class="flex items-center gap-2"><span class="text-sm font-semibold text-gray-800"> </span> <span class="px-1.5 py-0.5 rounded-full text-[9px] font-semibold text-white"> </span></div> <div class="text-xs text-gray-500"> </div></div></div></div>`);
 var root_29$1 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"><div class="bg-white rounded-xl shadow-2xl w-80 p-5"><h3 class="text-sm font-bold text-gray-800 mb-1">Import RoomPlan</h3> <p class="text-xs text-gray-400 mb-4"> </p> <div class="space-y-3"><label class="flex items-start gap-2.5 cursor-pointer"><input type="checkbox" class="accent-blue-500 mt-0.5"/> <div><div class="text-sm font-medium text-gray-700">Straighten walls</div> <div class="text-xs text-gray-400">Snap near-horizontal/vertical walls to axis</div></div></label> <label class="flex items-start gap-2.5 cursor-pointer"><input type="checkbox" class="accent-blue-500 mt-0.5"/> <div><div class="text-sm font-medium text-gray-700">Enforce orthogonal <span class="text-xs text-blue-400 font-mono"> </span></div> <div class="text-xs text-gray-400">Force all walls to 90°/180° angles</div></div></label> <label class="block"><div class="text-xs text-gray-500 mb-1">Corner merge distance (cm)</div> <input type="number" min="0" max="50" step="5" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div> <div class="flex gap-2 mt-5"><button class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors">Cancel</button> <button class="flex-1 px-3 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors">Import</button></div></div></div>`);
-var root$4 = /* @__PURE__ */ from_html(`<div class="relative w-64 bg-white border-r border-gray-200 flex flex-col h-full overflow-hidden"><div class="flex border-b border-gray-200"><button>Build</button> <button>Rooms</button> <button>Objects</button></div> <div class="flex-1 overflow-y-auto p-3"><!></div> <button title="Layers Panel (L)" aria-label="Toggle Layers Panel">🗂</button> <button title="Undo History" aria-label="Toggle Undo History">⟲</button> <button class="absolute bottom-4 left-4 w-8 h-8 rounded-full bg-slate-700 text-white text-sm font-bold shadow-lg hover:bg-slate-600 transition-colors z-50" title="Keyboard Shortcuts (?)" aria-label="Keyboard Shortcuts">?</button></div> <!> <!>`, 1);
+var root$5 = /* @__PURE__ */ from_html(`<div class="relative w-64 bg-white border-r border-gray-200 flex flex-col h-full overflow-hidden"><div class="flex border-b border-gray-200"><button>Build</button> <button>Rooms</button> <button>Objects</button></div> <div class="flex-1 overflow-y-auto p-3"><!></div> <button title="Layers Panel (L)" aria-label="Toggle Layers Panel">🗂</button> <button title="Undo History" aria-label="Toggle Undo History">⟲</button> <button class="absolute bottom-4 left-4 w-8 h-8 rounded-full bg-slate-700 text-white text-sm font-bold shadow-lg hover:bg-slate-600 transition-colors z-50" title="Keyboard Shortcuts (?)" aria-label="Keyboard Shortcuts">?</button></div> <!> <!>`, 1);
 function BuildPanel($$anchor, $$props) {
 	push($$props, true);
 	let showLayers = prop($$props, "showLayers", 15), showUndoHistory = prop($$props, "showUndoHistory", 15), showHelp = prop($$props, "showHelp", 15);
@@ -62550,7 +62669,7 @@ function BuildPanel($$anchor, $$props) {
 		"Electrical": "#2563eb",
 		"Plumbing": "#0ea5e9"
 	};
-	var fragment = root$4();
+	var fragment = root$5();
 	var div = first_child(fragment);
 	var div_1 = child(div);
 	var button = child(div_1);
@@ -62587,7 +62706,9 @@ function BuildPanel($$anchor, $$props) {
 			append($$anchor, text$1("Click to place · then drag vertices"));
 		};
 		var consequent_2 = ($$anchor) => {
-			append($$anchor, text$1("Click vertices · Enter / click first point to close"));
+			var fragment_1 = root_4$6();
+			next(2);
+			append($$anchor, fragment_1);
 		};
 		var alternate = ($$anchor) => {
 			append($$anchor, text$1("Select a camera first, then draw its Zone"));
@@ -62629,32 +62750,32 @@ function BuildPanel($$anchor, $$props) {
 		var button_16 = sibling(button_15, 2);
 		var button_17 = sibling(button_16, 2);
 		var span = sibling(child(button_17), 2);
-		var text_5 = child(span, true);
+		var text_4 = child(span, true);
 		reset(span);
 		reset(button_17);
 		var node_2 = sibling(button_17, 2);
 		var consequent_3 = ($$anchor) => {
-			var fragment_1 = root_6$4();
-			var div_15 = first_child(fragment_1);
+			var fragment_2 = root_6$4();
+			var div_15 = first_child(fragment_2);
 			each(div_15, 21, () => doorCatalog, index$1, ($$anchor, dc) => {
-				var button_18 = root_7$4();
+				var button_18 = root_7$5();
 				var div_16 = child(button_18);
 				var svg = child(div_16);
 				var path = child(svg);
 				reset(svg);
 				reset(div_16);
 				var span_1 = sibling(div_16, 2);
-				var text_6 = child(span_1, true);
+				var text_5 = child(span_1, true);
 				reset(span_1);
 				var span_2 = sibling(span_1, 2);
-				var text_7 = child(span_2, true);
+				var text_6 = child(span_2, true);
 				reset(span_2);
 				reset(button_18);
 				template_effect(() => {
 					set_class(button_18, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "door" && get(selectedDoorType) === get(dc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
 					set_attribute(path, "d", get(dc).icon);
-					set_text(text_6, get(dc).name);
-					set_text(text_7, get(dc).desc);
+					set_text(text_5, get(dc).name);
+					set_text(text_6, get(dc).desc);
 				});
 				delegated("click", button_18, () => setDoorType(get(dc).type));
 				event("dragstart", button_18, (e) => {
@@ -62667,18 +62788,18 @@ function BuildPanel($$anchor, $$props) {
 			reset(div_15);
 			var div_17 = sibling(div_15, 4);
 			each(div_17, 21, () => windowCatalog, index$1, ($$anchor, wc) => {
-				var button_19 = root_8$3();
+				var button_19 = root_8$2();
 				var span_3 = sibling(child(button_19), 2);
-				var text_8 = child(span_3, true);
+				var text_7 = child(span_3, true);
 				reset(span_3);
 				var span_4 = sibling(span_3, 2);
-				var text_9 = child(span_4, true);
+				var text_8 = child(span_4, true);
 				reset(span_4);
 				reset(button_19);
 				template_effect(() => {
 					set_class(button_19, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "window" && get(selectedWindowType) === get(wc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
-					set_text(text_8, get(wc).name);
-					set_text(text_9, get(wc).desc);
+					set_text(text_7, get(wc).name);
+					set_text(text_8, get(wc).desc);
 				});
 				delegated("click", button_19, () => setWindowType(get(wc).type));
 				event("dragstart", button_19, (e) => {
@@ -62689,7 +62810,7 @@ function BuildPanel($$anchor, $$props) {
 				append($$anchor, button_19);
 			});
 			reset(div_17);
-			append($$anchor, fragment_1);
+			append($$anchor, fragment_2);
 		};
 		if_block(node_2, ($$render) => {
 			if (get(constructionOpen)) $$render(consequent_3);
@@ -62717,7 +62838,7 @@ function BuildPanel($$anchor, $$props) {
 			set_class(div_13, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "annotate" ? "bg-blue-100" : ""}`);
 			set_class(button_14, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "measure" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
 			set_class(div_14, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "measure" ? "bg-blue-100" : ""}`);
-			set_text(text_5, get(constructionOpen) ? "▼" : "▶");
+			set_text(text_4, get(constructionOpen) ? "▼" : "▶");
 		});
 		delegated("click", button_3, () => setTool("select"));
 		delegated("click", button_4, () => setTool("wall"));
@@ -62740,17 +62861,17 @@ function BuildPanel($$anchor, $$props) {
 		var div_18 = root_9$2();
 		var div_19 = sibling(child(div_18), 4);
 		each(div_19, 21, () => roomPresets, index$1, ($$anchor, preset) => {
-			var button_20 = root_10$2();
+			var button_20 = root_10$3();
 			var div_20 = child(button_20);
-			var text_10 = child(div_20, true);
+			var text_9 = child(div_20, true);
 			reset(div_20);
 			var span_5 = sibling(div_20, 2);
-			var text_11 = child(span_5, true);
+			var text_10 = child(span_5, true);
 			reset(span_5);
 			reset(button_20);
 			template_effect(() => {
-				set_text(text_10, get(preset).icon);
-				set_text(text_11, get(preset).name);
+				set_text(text_9, get(preset).icon);
+				set_text(text_10, get(preset).name);
 			});
 			delegated("click", button_20, () => onPresetClick(get(preset).id));
 			event("dragstart", button_20, (e) => {
@@ -62798,16 +62919,16 @@ function BuildPanel($$anchor, $$props) {
 			});
 			reset(div_22);
 			var span_6 = sibling(div_22, 2);
-			var text_19 = child(span_6, true);
+			var text_18 = child(span_6, true);
 			reset(span_6);
 			var span_7 = sibling(span_6, 2);
-			var text_20 = child(span_7);
+			var text_19 = child(span_7);
 			reset(span_7);
 			reset(button_21);
 			template_effect(() => {
 				var _$$get$furniture$leng;
-				set_text(text_19, get(tmpl).name);
-				set_text(text_20, `${(_$$get$furniture$leng = get(tmpl).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} items`);
+				set_text(text_18, get(tmpl).name);
+				set_text(text_19, `${(_$$get$furniture$leng = get(tmpl).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} items`);
 			});
 			delegated("click", button_21, () => onPresetClick(get(tmpl).presetId, get(tmpl).name));
 			event("dragstart", button_21, (e) => {
@@ -62839,11 +62960,11 @@ function BuildPanel($$anchor, $$props) {
 		var node_5 = sibling(div_24, 2);
 		var consequent_13 = ($$anchor) => {
 			var div_25 = root_21$2();
-			var text_21 = child(div_25);
+			var text_20 = child(div_25);
 			reset(div_25);
 			template_effect(() => {
 				var _$$get$length, _$$get;
-				return set_text(text_21, `${(_$$get$length = get(filtered).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} result${get(filtered).length !== 1 ? "s" : ""} for "${(_$$get = get(search)) !== null && _$$get !== void 0 ? _$$get : ""}"`);
+				return set_text(text_20, `${(_$$get$length = get(filtered).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} result${get(filtered).length !== 1 ? "s" : ""} for "${(_$$get = get(search)) !== null && _$$get !== void 0 ? _$$get : ""}"`);
 			});
 			append($$anchor, div_25);
 		};
@@ -62853,17 +62974,17 @@ function BuildPanel($$anchor, $$props) {
 		var div_26 = sibling(node_5, 2);
 		var button_23 = child(div_26);
 		var button_24 = sibling(button_23, 2);
-		var text_22 = child(button_24);
+		var text_21 = child(button_24);
 		reset(button_24);
 		each(sibling(button_24, 2), 17, () => furnitureCategories, index$1, ($$anchor, cat) => {
 			var button_25 = root_22$2();
-			var text_23 = child(button_25, true);
+			var text_22 = child(button_25, true);
 			reset(button_25);
 			template_effect(() => {
 				var _categoryColors$$$get;
 				set_class(button_25, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === get(cat) ? "text-white" : "text-gray-600 hover:bg-gray-200"}`);
 				set_style(button_25, get(selectedCategory) === get(cat) ? `background-color: ${(_categoryColors$$$get = categoryColors[get(cat)]) !== null && _categoryColors$$$get !== void 0 ? _categoryColors$$$get : "#6b7280"}` : "background-color: #f3f4f6");
-				set_text(text_23, get(cat));
+				set_text(text_22, get(cat));
 			});
 			delegated("click", button_25, () => set(selectedCategory, get(cat), true));
 			append($$anchor, button_25);
@@ -62871,19 +62992,19 @@ function BuildPanel($$anchor, $$props) {
 		reset(div_26);
 		var node_7 = sibling(div_26, 2);
 		var consequent_14 = ($$anchor) => {
-			var fragment_2 = root_23$2();
-			var div_27 = first_child(fragment_2);
+			var fragment_3 = root_23$1();
+			var div_27 = first_child(fragment_3);
 			var div_28 = sibling(child(div_27), 2);
 			each(div_28, 21, () => get(recentItems), index$1, ($$anchor, item) => {
-				var button_26 = root_24$1();
+				var button_26 = root_24$2();
 				var span_8 = child(button_26);
-				var text_24 = child(span_8, true);
+				var text_23 = child(span_8, true);
 				reset(span_8);
 				var div_29 = sibling(span_8, 2);
 				var div_30 = child(div_29);
 				reset(div_29);
 				var span_9 = sibling(div_29, 2);
-				var text_25 = child(span_9, true);
+				var text_24 = child(span_9, true);
 				reset(span_9);
 				reset(button_26);
 				template_effect(($0, $1, $2) => {
@@ -62891,10 +63012,10 @@ function BuildPanel($$anchor, $$props) {
 					set_class(button_26, 1, `relative flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
 					set_class(span_8, 1, `absolute top-1 right-1 text-[12px] leading-none cursor-pointer ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 					set_attribute(span_8, "title", $1);
-					set_text(text_24, $2);
+					set_text(text_23, $2);
 					set_style(div_29, `background-color: ${(_$$get$color = get(item).color) !== null && _$$get$color !== void 0 ? _$$get$color : ""}20`);
 					set_style(div_30, `background-color: ${(_$$get$color2 = get(item).color) !== null && _$$get$color2 !== void 0 ? _$$get$color2 : ""}; opacity: 0.7`);
-					set_text(text_25, get(item).name);
+					set_text(text_24, get(item).name);
 				}, [
 					() => get(favoriteIds).includes(get(item).id) ? "text-pink-500" : "text-gray-300 hover:text-pink-400",
 					() => get(favoriteIds).includes(get(item).id) ? "Remove from favorites" : "Add to favorites",
@@ -62925,7 +63046,7 @@ function BuildPanel($$anchor, $$props) {
 			reset(div_28);
 			reset(div_27);
 			next(2);
-			append($$anchor, fragment_2);
+			append($$anchor, fragment_3);
 		};
 		if_block(node_7, ($$render) => {
 			if (!get(search) && get(selectedCategory) === "All" && get(recentItems).length > 0) $$render(consequent_14);
@@ -62933,9 +63054,9 @@ function BuildPanel($$anchor, $$props) {
 		var div_31 = sibling(node_7, 2);
 		each(div_31, 21, () => get(filtered), index$1, ($$anchor, item) => {
 			const s = /* @__PURE__ */ user_derived(() => get(search).toLowerCase());
-			var button_27 = root_25$2();
+			var button_27 = root_25$1();
 			var span_10 = child(button_27);
-			var text_26 = child(span_10, true);
+			var text_25 = child(span_10, true);
 			reset(span_10);
 			var div_32 = sibling(span_10, 2);
 			var div_33 = child(div_32);
@@ -62943,17 +63064,17 @@ function BuildPanel($$anchor, $$props) {
 			var node_8 = sibling(div_32, 2);
 			var consequent_15 = ($$anchor) => {
 				const idx = /* @__PURE__ */ user_derived(() => get(item).name.toLowerCase().indexOf(get(s)));
-				var span_11 = root_26$2();
-				var text_27 = child(span_11, true);
-				var mark = sibling(text_27);
-				var text_28 = child(mark, true);
+				var span_11 = root_26$1();
+				var text_26 = child(span_11, true);
+				var mark = sibling(text_26);
+				var text_27 = child(mark, true);
 				reset(mark);
-				var text_29 = sibling(mark, 1, true);
+				var text_28 = sibling(mark, 1, true);
 				reset(span_11);
 				template_effect(($0, $1, $2) => {
-					set_text(text_27, $0);
-					set_text(text_28, $1);
-					set_text(text_29, $2);
+					set_text(text_26, $0);
+					set_text(text_27, $1);
+					set_text(text_28, $2);
 				}, [
 					() => get(item).name.slice(0, get(idx)),
 					() => get(item).name.slice(get(idx), get(idx) + get(s).length),
@@ -62964,9 +63085,9 @@ function BuildPanel($$anchor, $$props) {
 			var d = /* @__PURE__ */ user_derived(() => get(s) && get(item).name.toLowerCase().includes(get(s)));
 			var alternate_2 = ($$anchor) => {
 				var span_12 = root_27$1();
-				var text_30 = child(span_12, true);
+				var text_29 = child(span_12, true);
 				reset(span_12);
-				template_effect(() => set_text(text_30, get(item).name));
+				template_effect(() => set_text(text_29, get(item).name));
 				append($$anchor, span_12);
 			};
 			if_block(node_8, ($$render) => {
@@ -62974,7 +63095,7 @@ function BuildPanel($$anchor, $$props) {
 				else $$render(alternate_2, -1);
 			});
 			var span_13 = sibling(node_8, 2);
-			var text_31 = child(span_13);
+			var text_30 = child(span_13);
 			reset(span_13);
 			reset(button_27);
 			template_effect(($0, $1, $2) => {
@@ -62982,10 +63103,10 @@ function BuildPanel($$anchor, $$props) {
 				set_class(button_27, 1, `relative flex flex-col items-center gap-1 p-3 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
 				set_class(span_10, 1, `absolute top-1 right-1 text-[12px] leading-none cursor-pointer ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 				set_attribute(span_10, "title", $1);
-				set_text(text_26, $2);
+				set_text(text_25, $2);
 				set_style(div_32, `background-color: ${(_$$get$color3 = get(item).color) !== null && _$$get$color3 !== void 0 ? _$$get$color3 : ""}20`);
 				set_style(div_33, `background-color: ${(_$$get$color4 = get(item).color) !== null && _$$get$color4 !== void 0 ? _$$get$color4 : ""}; opacity: 0.7`);
-				set_text(text_31, `${(_$$get$width = get(item).width) !== null && _$$get$width !== void 0 ? _$$get$width : ""}×${(_$$get$depth = get(item).depth) !== null && _$$get$depth !== void 0 ? _$$get$depth : ""}cm`);
+				set_text(text_30, `${(_$$get$width = get(item).width) !== null && _$$get$width !== void 0 ? _$$get$width : ""}×${(_$$get$depth = get(item).depth) !== null && _$$get$depth !== void 0 ? _$$get$depth : ""}cm`);
 			}, [
 				() => get(favoriteIds).includes(get(item).id) ? "text-pink-500" : "text-gray-300 hover:text-pink-400",
 				() => get(favoriteIds).includes(get(item).id) ? "Remove from favorites" : "Add to favorites",
@@ -63018,7 +63139,7 @@ function BuildPanel($$anchor, $$props) {
 		template_effect(() => {
 			set_class(button_23, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "All" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
 			set_class(button_24, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "Favorites" ? "bg-pink-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
-			set_text(text_22, `♥ Favorites${get(favoriteIds).length ? ` (${get(favoriteIds).length})` : ""}`);
+			set_text(text_21, `♥ Favorites${get(favoriteIds).length ? ` (${get(favoriteIds).length})` : ""}`);
 		});
 		bind_value(input_1, () => get(search), ($$value) => set(search, $$value));
 		delegated("click", button_23, () => set(selectedCategory, "All"));
@@ -63050,14 +63171,14 @@ function BuildPanel($$anchor, $$props) {
 		var div_39 = sibling(div_36, 2);
 		var div_40 = child(div_39);
 		var span_14 = child(div_40);
-		var text_32 = child(span_14, true);
+		var text_31 = child(span_14, true);
 		reset(span_14);
 		var span_15 = sibling(span_14, 2);
-		var text_33 = child(span_15, true);
+		var text_32 = child(span_15, true);
 		reset(span_15);
 		reset(div_40);
 		var div_41 = sibling(div_40, 2);
-		var text_34 = child(div_41);
+		var text_33 = child(div_41);
 		reset(div_41);
 		reset(div_39);
 		reset(div_35);
@@ -63067,10 +63188,10 @@ function BuildPanel($$anchor, $$props) {
 			set_style(div_34, `left: ${(_$$get$x = get(hoverPos).x) !== null && _$$get$x !== void 0 ? _$$get$x : ""}px; top: ${(_$$get$y = get(hoverPos).y) !== null && _$$get$y !== void 0 ? _$$get$y : ""}px;`);
 			set_style(div_37, `background-color: ${(_$$get$color5 = get(item).color) !== null && _$$get$color5 !== void 0 ? _$$get$color5 : ""}20`);
 			set_style(div_38, `background-color: ${(_$$get$color6 = get(item).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : ""}; opacity: 0.7`);
-			set_text(text_32, get(item).name);
+			set_text(text_31, get(item).name);
 			set_style(span_15, `background-color: ${(_ref = (_categoryColors$$$get2 = categoryColors[get(item).category]) !== null && _categoryColors$$$get2 !== void 0 ? _categoryColors$$$get2 : "#6b7280") !== null && _ref !== void 0 ? _ref : ""}`);
-			set_text(text_33, get(item).category);
-			set_text(text_34, `${(_$$get$width2 = get(item).width) !== null && _$$get$width2 !== void 0 ? _$$get$width2 : ""} × ${(_$$get$depth2 = get(item).depth) !== null && _$$get$depth2 !== void 0 ? _$$get$depth2 : ""} × ${(_$$get$height = get(item).height) !== null && _$$get$height !== void 0 ? _$$get$height : ""} cm`);
+			set_text(text_32, get(item).category);
+			set_text(text_33, `${(_$$get$width2 = get(item).width) !== null && _$$get$width2 !== void 0 ? _$$get$width2 : ""} × ${(_$$get$depth2 = get(item).depth) !== null && _$$get$depth2 !== void 0 ? _$$get$depth2 : ""} × ${(_$$get$height = get(item).height) !== null && _$$get$height !== void 0 ? _$$get$height : ""} cm`);
 		});
 		append($$anchor, div_34);
 	};
@@ -63082,7 +63203,7 @@ function BuildPanel($$anchor, $$props) {
 		var div_42 = root_29$1();
 		var div_43 = child(div_42);
 		var p_2 = sibling(child(div_43), 2);
-		var text_35 = child(p_2, true);
+		var text_34 = child(p_2, true);
 		reset(p_2);
 		var div_44 = sibling(p_2, 2);
 		var label = child(div_44);
@@ -63096,7 +63217,7 @@ function BuildPanel($$anchor, $$props) {
 		var div_45 = sibling(input_3, 2);
 		var div_46 = child(div_45);
 		var span_16 = sibling(child(div_46));
-		var text_36 = child(span_16, true);
+		var text_35 = child(span_16, true);
 		reset(span_16);
 		reset(div_46);
 		next(2);
@@ -63114,8 +63235,8 @@ function BuildPanel($$anchor, $$props) {
 		reset(div_43);
 		reset(div_42);
 		template_effect(() => {
-			set_text(text_35, get(importFileName));
-			set_text(text_36, "v5");
+			set_text(text_34, get(importFileName));
+			set_text(text_35, "v5");
 		});
 		delegated("click", div_42, cancelImport);
 		delegated("click", div_43, (e) => e.stopPropagation());
@@ -63485,42 +63606,521 @@ function handleGlobalShortcut(e, ctx = {}) {
 	return false;
 }
 //#endregion
+//#region src/lib/components/editor/PolygonFloatToolbar.svelte
+init_client();
+var root_1$8 = /* @__PURE__ */ from_html(`<button type="button" aria-label="Confirm polygon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></button>`);
+var root$4 = /* @__PURE__ */ from_html(`<div class="absolute z-40 flex items-center gap-1.5 px-1.5 py-1 rounded-full bg-white/95 shadow-lg border border-gray-200 pointer-events-auto" role="toolbar" aria-label="Polygon actions"><!> <button type="button" title="Delete polygon" aria-label="Delete polygon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"></path><path d="M8 6V4h8v2"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M10 11v6M14 11v6"></path></svg></button></div>`);
+function PolygonFloatToolbar($$anchor, $$props) {
+	push($$props, true);
+	/**
+	* Floating confirm / delete toolbar for polygon drafts & selection
+	* (zone, floor FOV, image FOV) — matches host reference UX.
+	*/
+	let canConfirm = prop($$props, "canConfirm", 3, false), showConfirm = prop($$props, "showConfirm", 3, true), canDelete = prop($$props, "canDelete", 3, true);
+	var div = root$4();
+	var node = child(div);
+	var consequent = ($$anchor) => {
+		var button = root_1$8();
+		template_effect(() => {
+			set_class(button, 1, `w-8 h-8 rounded-full flex items-center justify-center transition-colors ${canConfirm() ? "bg-emerald-100 text-emerald-700 hover:bg-emerald-200" : "bg-gray-100 text-gray-300 cursor-not-allowed"}`);
+			set_attribute(button, "title", canConfirm() ? "Finish polygon" : "Need at least 3 points");
+			button.disabled = !canConfirm();
+		});
+		delegated("click", button, () => {
+			var _$$props$onConfirm;
+			return canConfirm() && ((_$$props$onConfirm = $$props.onConfirm) === null || _$$props$onConfirm === void 0 ? void 0 : _$$props$onConfirm.call($$props));
+		});
+		append($$anchor, button);
+	};
+	if_block(node, ($$render) => {
+		if (showConfirm()) $$render(consequent);
+	});
+	var button_1 = sibling(node, 2);
+	reset(div);
+	template_effect(() => {
+		var _$$props$x, _$$props$y;
+		set_style(div, `left: ${(_$$props$x = $$props.x) !== null && _$$props$x !== void 0 ? _$$props$x : ""}px; top: ${(_$$props$y = $$props.y) !== null && _$$props$y !== void 0 ? _$$props$y : ""}px; transform: translate(-50%, -120%);`);
+		set_class(button_1, 1, `w-8 h-8 rounded-full flex items-center justify-center transition-colors ${canDelete() ? "bg-rose-100 text-rose-600 hover:bg-rose-200" : "bg-gray-100 text-gray-300 cursor-not-allowed"}`);
+		button_1.disabled = !canDelete();
+	});
+	delegated("mousedown", div, (e) => e.stopPropagation());
+	delegated("click", div, (e) => e.stopPropagation());
+	delegated("click", button_1, () => {
+		var _$$props$onDelete;
+		return canDelete() && ((_$$props$onDelete = $$props.onDelete) === null || _$$props$onDelete === void 0 ? void 0 : _$$props$onDelete.call($$props));
+	});
+	append($$anchor, div);
+	pop();
+}
+delegate(["mousedown", "click"]);
+//#endregion
+//#region src/lib/components/sidebar/CameraFovEditor.svelte
+init_client();
+init_index_client();
+var root_3$7 = /* @__PURE__ */ from_html(`<button type="button" class="text-[10px] px-1.5 py-0.5 rounded border border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100"> </button>`);
+var root_2$8 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-gray-600">Camera FOV (image)</span> <!></div>`);
+var root_6$3 = /* @__PURE__ */ from_html(`Click vertices · nhấn <strong>✓</strong> `, 1);
+var root_7$4 = /* @__PURE__ */ from_html(` <!>`, 1);
+var root_10$2 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-amber-700 bg-amber-50 border border-amber-200 rounded px-1.5 py-1"> </p>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-500 leading-snug"><!></p> <!>`, 1);
+var root_1$7 = /* @__PURE__ */ from_html(`<div class="border border-gray-200 rounded-lg p-2 bg-gray-50 space-y-2"><!> <div class="relative inline-block max-w-full"><canvas></canvas> <!></div> <!></div>`);
+var root_11$2 = /* @__PURE__ */ from_html(`<p class="text-xs text-gray-400">No thumbnail URL from host.</p>`);
+function CameraFovEditor($$anchor, $$props) {
+	push($$props, true);
+	let coordinates = prop($$props, "coordinates", 3, ""), mapCoordinates = prop($$props, "mapCoordinates", 3, ""), readOnly = prop($$props, "readOnly", 3, false);
+	let canvasEl = /* @__PURE__ */ state(void 0);
+	let imgEl = /* @__PURE__ */ state(null);
+	let imgSize = /* @__PURE__ */ state(null);
+	let draft = /* @__PURE__ */ state(proxy([]));
+	let cursor = /* @__PURE__ */ state(null);
+	let draggingIdx = /* @__PURE__ */ state(null);
+	let editing = /* @__PURE__ */ state(false);
+	/** Fits Properties panel ~420px minus padding. */
+	const displayW = 380;
+	const FOV_COLOR = "#3b82f6";
+	let matchOk = /* @__PURE__ */ user_derived(() => fovPointCountsMatch(coordinates(), mapCoordinates()));
+	let mapN = /* @__PURE__ */ user_derived(() => countCoordinatePoints(mapCoordinates()));
+	let imgN = /* @__PURE__ */ user_derived(() => countCoordinatePoints(coordinates()));
+	/** Click committed polygon → show toolbar (also while drawing). */
+	let polySelected = /* @__PURE__ */ state(false);
+	let showFloatTb = /* @__PURE__ */ user_derived(() => !readOnly() && (get(editing) && get(draft).length > 0 || get(polySelected) && get(draft).length >= 3));
+	let floatTbPos = /* @__PURE__ */ user_derived(() => {
+		if (!get(showFloatTb) || !get(draft).length) return null;
+		const anchor = polygonToolbarAnchor(get(draft));
+		if (!anchor) return null;
+		const s = scale();
+		return {
+			x: anchor.x * s,
+			y: anchor.y * s
+		};
+	});
+	function samePoints(a, b) {
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (a[i].x !== b[i].x || a[i].y !== b[i].y) return false;
+		return true;
+	}
+	user_effect(() => {
+		var _$$props$thumbnailUrl;
+		const url = (_$$props$thumbnailUrl = $$props.thumbnailUrl) === null || _$$props$thumbnailUrl === void 0 ? void 0 : _$$props$thumbnailUrl.trim();
+		if (!url) {
+			set(imgEl, null);
+			set(imgSize, null);
+			return;
+		}
+		let cancelled = false;
+		const img = new Image();
+		img.onload = () => {
+			if (cancelled) return;
+			set(imgEl, img, true);
+			set(imgSize, {
+				w: img.naturalWidth,
+				h: img.naturalHeight
+			}, true);
+		};
+		img.onerror = () => {
+			if (cancelled) return;
+			set(imgEl, null);
+			set(imgSize, null);
+		};
+		img.src = url;
+		return () => {
+			cancelled = true;
+		};
+	});
+	user_effect(() => {
+		const coords = coordinates();
+		const size = get(imgSize);
+		const el = get(canvasEl);
+		const isEditing = get(editing);
+		if (!size || !el) return;
+		untrack(() => {
+			if (!isEditing) {
+				const next = coordinatesToImagePoints(coords, size);
+				if (!samePoints(get(draft), next)) set(draft, next, true);
+			}
+			redraw();
+		});
+	});
+	function scale() {
+		if (!get(imgSize)) return 1;
+		return displayW / get(imgSize).w;
+	}
+	function canvasH() {
+		if (!get(imgSize)) return 135;
+		return Math.round(get(imgSize).h * scale());
+	}
+	function toImage(e) {
+		if (!get(canvasEl) || !get(imgSize)) return null;
+		const rect = get(canvasEl).getBoundingClientRect();
+		const s = scale();
+		return {
+			x: (e.clientX - rect.left) / s,
+			y: (e.clientY - rect.top) / s
+		};
+	}
+	function redraw() {
+		if (!get(canvasEl) || !get(imgEl) || !get(imgSize)) return;
+		const s = scale();
+		const w = displayW;
+		const h = canvasH();
+		if (get(canvasEl).width !== w || get(canvasEl).height !== h) {
+			get(canvasEl).width = w;
+			get(canvasEl).height = h;
+		}
+		const ctx = get(canvasEl).getContext("2d");
+		if (!ctx) return;
+		ctx.clearRect(0, 0, w, h);
+		ctx.drawImage(get(imgEl), 0, 0, w, h);
+		const placed = get(draft);
+		const pts = [...placed];
+		if (get(editing) && get(cursor)) pts.push(get(cursor));
+		if (pts.length >= 1) {
+			ctx.save();
+			ctx.strokeStyle = FOV_COLOR;
+			ctx.fillStyle = "rgba(59,130,246,0.28)";
+			ctx.lineWidth = 2;
+			ctx.lineJoin = "round";
+			if (pts.length >= 2) {
+				ctx.beginPath();
+				ctx.moveTo(pts[0].x * s, pts[0].y * s);
+				for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * s, pts[i].y * s);
+				if (!get(editing) && placed.length >= 3) {
+					ctx.closePath();
+					ctx.fill();
+				} else if (get(editing)) ctx.setLineDash([6, 4]);
+				ctx.stroke();
+				ctx.setLineDash([]);
+			}
+			if (get(editing) && get(cursor) && placed.length >= 3) {
+				ctx.globalAlpha = .45;
+				ctx.setLineDash([4, 4]);
+				ctx.beginPath();
+				ctx.moveTo(get(cursor).x * s, get(cursor).y * s);
+				ctx.lineTo(placed[0].x * s, placed[0].y * s);
+				ctx.stroke();
+				ctx.setLineDash([]);
+				ctx.globalAlpha = 1;
+			}
+			for (let i = 0; i < placed.length; i++) drawVertexIndexBadge(ctx, placed[i].x * s, placed[i].y * s, i, FOV_COLOR, 10);
+			ctx.restore();
+		}
+	}
+	function hitVertex(p) {
+		if (!get(imgSize)) return -1;
+		const tol = 8 / scale();
+		for (let i = 0; i < get(draft).length; i++) if (Math.hypot(get(draft)[i].x - p.x, get(draft)[i].y - p.y) <= tol) return i;
+		return -1;
+	}
+	function pointInImagePoly(p, poly) {
+		if (poly.length < 3) return false;
+		let inside = false;
+		for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+			const xi = poly[i].x, yi = poly[i].y;
+			const xj = poly[j].x, yj = poly[j].y;
+			if (yi > p.y !== yj > p.y && p.x < (xj - xi) * (p.y - yi) / (yj - yi || Number.EPSILON) + xi) inside = !inside;
+		}
+		return inside;
+	}
+	function onDown(e) {
+		const p = toImage(e);
+		if (!p || !get(imgSize)) return;
+		if (!get(editing)) {
+			const vi = hitVertex(p);
+			if (vi >= 0) {
+				set(polySelected, true);
+				set(draggingIdx, vi, true);
+				return;
+			}
+			if (get(draft).length >= 3 && pointInImagePoly(p, get(draft))) {
+				set(polySelected, true);
+				return;
+			}
+			set(polySelected, false);
+			return;
+		}
+		set(draft, [...get(draft), p], true);
+		set(polySelected, true);
+		redraw();
+	}
+	function onDblClick(e) {
+		if (readOnly() || !get(editing)) return;
+		e.preventDefault();
+		if (get(draft).length >= 3) commitDraft();
+	}
+	function onMove(e) {
+		const p = toImage(e);
+		if (!p) return;
+		if (get(draggingIdx) != null) {
+			const next = get(draft).map((pt) => ({ ...pt }));
+			next[get(draggingIdx)] = p;
+			set(draft, next, true);
+			redraw();
+			return;
+		}
+		if (get(editing)) {
+			set(cursor, p, true);
+			redraw();
+		}
+	}
+	function onUp() {
+		if (get(draggingIdx) != null) {
+			set(draggingIdx, null);
+			commitDraft();
+		}
+	}
+	function onKeyDown(e) {
+		if (readOnly() || !get(editing)) return;
+		if (e.key === "Enter" && get(draft).length >= 3) {
+			e.preventDefault();
+			e.stopPropagation();
+			commitDraft();
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			set(editing, false);
+			set(cursor, null);
+			set(draft, coordinatesToImagePoints(coordinates(), get(imgSize)), true);
+			redraw();
+		}
+	}
+	function commitDraft() {
+		if (!get(imgSize) || get(draft).length < 3) return;
+		const str = imagePointsToCoordinates(get(draft), get(imgSize));
+		if (!str) return;
+		setCameraImageCoordinates($$props.serial, str);
+		set(editing, false);
+		set(cursor, null);
+		set(polySelected, true);
+		redraw();
+	}
+	function startDraw() {
+		set(draft, [], true);
+		set(cursor, null);
+		set(editing, true);
+		set(polySelected, true);
+		redraw();
+	}
+	function clearFov() {
+		set(draft, [], true);
+		set(editing, false);
+		set(cursor, null);
+		set(polySelected, false);
+		setCameraImageCoordinates($$props.serial, null);
+		redraw();
+	}
+	function onFloatConfirm() {
+		if (get(editing) && get(draft).length >= 3) commitDraft();
+	}
+	function onFloatDelete() {
+		if (get(editing)) {
+			set(draft, [], true);
+			set(cursor, null);
+			set(editing, false);
+			set(polySelected, false);
+			redraw();
+			return;
+		}
+		clearFov();
+	}
+	var fragment = comment();
+	event("keydown", $window, onKeyDown);
+	var node = first_child(fragment);
+	var consequent_8 = ($$anchor) => {
+		var div = root_1$7();
+		var node_1 = child(div);
+		var consequent_1 = ($$anchor) => {
+			var div_1 = root_2$8();
+			var node_2 = sibling(child(div_1), 2);
+			var consequent = ($$anchor) => {
+				var button = root_3$7();
+				var text = child(button, true);
+				reset(button);
+				template_effect(() => set_text(text, get(imgN) >= 3 ? "Redraw" : "Draw"));
+				delegated("click", button, startDraw);
+				append($$anchor, button);
+			};
+			if_block(node_2, ($$render) => {
+				if (!get(editing)) $$render(consequent);
+			});
+			reset(div_1);
+			append($$anchor, div_1);
+		};
+		if_block(node_1, ($$render) => {
+			if (!readOnly()) $$render(consequent_1);
+		});
+		var div_2 = sibling(node_1, 2);
+		var canvas = child(div_2);
+		set_style(canvas, "max-width: 380px; height: auto;");
+		bind_this(canvas, ($$value) => set(canvasEl, $$value), () => get(canvasEl));
+		var node_3 = sibling(canvas, 2);
+		var consequent_2 = ($$anchor) => {
+			{
+				let $0 = /* @__PURE__ */ user_derived(() => get(editing) && get(draft).length >= 3);
+				PolygonFloatToolbar($$anchor, {
+					get x() {
+						return get(floatTbPos).x;
+					},
+					get y() {
+						return get(floatTbPos).y;
+					},
+					get showConfirm() {
+						return get(editing);
+					},
+					get canConfirm() {
+						return get($0);
+					},
+					onConfirm: onFloatConfirm,
+					onDelete: onFloatDelete
+				});
+			}
+		};
+		if_block(node_3, ($$render) => {
+			if (get(showFloatTb) && get(floatTbPos)) $$render(consequent_2);
+		});
+		reset(div_2);
+		var node_4 = sibling(div_2, 2);
+		var consequent_7 = ($$anchor) => {
+			var fragment_2 = root_5$4();
+			var p_1 = first_child(fragment_2);
+			var node_5 = child(p_1);
+			var consequent_3 = ($$anchor) => {
+				var fragment_3 = root_6$3();
+				var text_1 = sibling(first_child(fragment_3), 2);
+				template_effect(() => set_text(text_1, ` trên toolbar để đóng polygon (≥3) · 🗑 xoá`));
+				append($$anchor, fragment_3);
+			};
+			var consequent_5 = ($$anchor) => {
+				var fragment_4 = root_7$4();
+				var text_2 = first_child(fragment_4);
+				var node_6 = sibling(text_2);
+				var consequent_4 = ($$anchor) => {
+					var text_3 = text$1();
+					template_effect(() => {
+						var _$$get;
+						return set_text(text_3, `· floor ${(_$$get = get(mapN)) !== null && _$$get !== void 0 ? _$$get : ""} pts`);
+					});
+					append($$anchor, text_3);
+				};
+				if_block(node_6, ($$render) => {
+					if (get(mapN) > 0) $$render(consequent_4);
+				});
+				template_effect(() => {
+					var _$$get2;
+					return set_text(text_2, `${(_$$get2 = get(imgN)) !== null && _$$get2 !== void 0 ? _$$get2 : ""} points — click polygon để hiện toolbar `);
+				});
+				append($$anchor, fragment_4);
+			};
+			var alternate = ($$anchor) => {
+				var text_4 = text$1();
+				template_effect(() => set_text(text_4, `Draw FOV polygon on camera thumbnail (≥3 pts)`));
+				append($$anchor, text_4);
+			};
+			if_block(node_5, ($$render) => {
+				if (get(editing)) $$render(consequent_3);
+				else if (get(imgN) >= 3) $$render(consequent_5, 1);
+				else $$render(alternate, -1);
+			});
+			reset(p_1);
+			var node_7 = sibling(p_1, 2);
+			var consequent_6 = ($$anchor) => {
+				var p_2 = root_10$2();
+				var text_5 = child(p_2);
+				reset(p_2);
+				template_effect(() => {
+					var _$$get3, _$$get4;
+					return set_text(text_5, `Point count mismatch: image ${(_$$get3 = get(imgN)) !== null && _$$get3 !== void 0 ? _$$get3 : ""} ≠ floor ${(_$$get4 = get(mapN)) !== null && _$$get4 !== void 0 ? _$$get4 : ""}. Heatmap transform needs the same N and order.`);
+				});
+				append($$anchor, p_2);
+			};
+			if_block(node_7, ($$render) => {
+				if (!get(matchOk)) $$render(consequent_6);
+			});
+			append($$anchor, fragment_2);
+		};
+		if_block(node_4, ($$render) => {
+			if (!readOnly()) $$render(consequent_7);
+		});
+		reset(div);
+		template_effect(() => set_class(canvas, 1, `w-full rounded border border-gray-200 bg-black/5 touch-none ${readOnly() ? "cursor-default" : "cursor-crosshair"}`));
+		delegated("mousedown", canvas, function(...$$args) {
+			var _ref;
+			(_ref = readOnly() ? void 0 : onDown) === null || _ref === void 0 || _ref.apply(this, $$args);
+		});
+		delegated("mousemove", canvas, function(...$$args) {
+			var _ref2;
+			(_ref2 = readOnly() ? void 0 : onMove) === null || _ref2 === void 0 || _ref2.apply(this, $$args);
+		});
+		delegated("mouseup", canvas, function(...$$args) {
+			var _ref3;
+			(_ref3 = readOnly() ? void 0 : onUp) === null || _ref3 === void 0 || _ref3.apply(this, $$args);
+		});
+		event("mouseleave", canvas, function(...$$args) {
+			var _ref4;
+			(_ref4 = readOnly() ? void 0 : onUp) === null || _ref4 === void 0 || _ref4.apply(this, $$args);
+		});
+		delegated("dblclick", canvas, function(...$$args) {
+			var _ref5;
+			(_ref5 = readOnly() ? void 0 : onDblClick) === null || _ref5 === void 0 || _ref5.apply(this, $$args);
+		});
+		append($$anchor, div);
+	};
+	var d = /* @__PURE__ */ user_derived(() => {
+		var _$$props$thumbnailUrl2;
+		return (_$$props$thumbnailUrl2 = $$props.thumbnailUrl) === null || _$$props$thumbnailUrl2 === void 0 ? void 0 : _$$props$thumbnailUrl2.trim();
+	});
+	var alternate_1 = ($$anchor) => {
+		append($$anchor, root_11$2());
+	};
+	if_block(node, ($$render) => {
+		if (get(d)) $$render(consequent_8);
+		else $$render(alternate_1, -1);
+	});
+	append($$anchor, fragment);
+	pop();
+}
+delegate([
+	"click",
+	"mousedown",
+	"mousemove",
+	"mouseup",
+	"dblclick"
+]);
+//#endregion
 //#region src/lib/components/sidebar/PropertiesPanel.svelte
 init_client();
-var root_3$7 = /* @__PURE__ */ from_html(`<button></button>`);
-var root_4$6 = /* @__PURE__ */ from_html(`<button><span class="bg-white/80 backdrop-blur-sm rounded px-1 py-0.5 mb-0.5 text-gray-700"> </span></button>`);
-var root_2$8 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
-var root_6$3 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_4$5 = /* @__PURE__ */ from_html(`<button><span class="bg-white/80 backdrop-blur-sm rounded px-1 py-0.5 mb-0.5 text-gray-700"> </span></button>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
+var root_6$2 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_7$3 = /* @__PURE__ */ from_html(`<button><span class="bg-white/80 backdrop-blur-sm rounded px-1 py-0.5 mb-0.5 text-gray-700"> </span></button>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
-var root_1$8 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">▭</span> Wall Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" disabled="" class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-gray-50"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Curved</span> <button> </button></div> <div><div class="flex border-b border-gray-200 mb-3"><button>Interior</button> <button>Exterior</button></div> <!></div></div>`, 1);
-var root_8$2 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-amber-100 rounded flex items-center justify-center text-xs">🚪</span> Door Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Single</option><option>Double</option><option>Sliding</option><option>French</option><option>Pocket</option><option>Bifold</option></select></label> <label class="block"><span class="text-xs text-gray-500">Hinge Side</span> <div class="flex gap-2"><button>Left</button> <button>Right</button></div></label> <label class="block"><span class="text-xs text-gray-500">Opens</span> <div class="flex gap-2"><button>Inward</button> <button>Outward</button></div></label></div>`, 1);
+var root_5$3 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
+var root_1$6 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">▭</span> Wall Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" disabled="" class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-gray-50"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Curved</span> <button> </button></div> <div><div class="flex border-b border-gray-200 mb-3"><button>Interior</button> <button>Exterior</button></div> <!></div></div>`, 1);
+var root_8$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-amber-100 rounded flex items-center justify-center text-xs">🚪</span> Door Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Single</option><option>Double</option><option>Sliding</option><option>French</option><option>Pocket</option><option>Bifold</option></select></label> <label class="block"><span class="text-xs text-gray-500">Hinge Side</span> <div class="flex gap-2"><button>Left</button> <button>Right</button></div></label> <label class="block"><span class="text-xs text-gray-500">Opens</span> <div class="flex gap-2"><button>Inward</button> <button>Outward</button></div></label></div>`, 1);
 var root_9$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-cyan-100 rounded flex items-center justify-center text-xs">🪟</span> Window Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Standard</option><option>Fixed</option><option>Casement</option><option>Sliding</option><option>Bay</option></select></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`, 1);
 var root_13$1 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_12$2 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Camera</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-white"><option>Select camera...</option><!></select></label>`);
+var root_12$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Camera</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-white"><option>Select camera...</option><!></select></label>`);
 var root_14$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500"> </span> <input type="text"/></label>`);
-var root_17$1 = /* @__PURE__ */ from_html(`<div> </div>`);
-var root_18$1 = /* @__PURE__ */ from_html(`<div> </div>`);
-var root_16$1 = /* @__PURE__ */ from_html(`<div class="text-[10px] text-gray-500 space-y-0.5 font-mono break-all"><!> <!></div>`);
-var root_15 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-400 mt-2 leading-snug">FOV: use <strong>Draw surveillance FOV</strong> on the floor (<code class="font-mono">mapCoordinates</code>).
-            Select camera + host <code class="font-mono">cameraThumbnail</code> → panel beside canvas (<code class="font-mono">coordinates</code>).</p> <!>`, 1);
-var root_11$2 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
-var root_19$1 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_15$1 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-400 mt-2 leading-snug">FOV sàn: tool <strong>Camera FOV</strong> → <code class="font-mono">mapCoordinates</code>.
+            FOV ảnh: vẽ trên thumbnail · đỉnh đánh số 0…n · double-click / Enter / Done để kết thúc.</p>`);
+var root_16 = /* @__PURE__ */ from_html(`<div class="pt-1 space-y-1.5"><div class="text-xs font-semibold text-gray-700">Camera thumbnail</div> <!></div>`);
+var root_17$1 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-amber-700 bg-amber-50 border border-amber-100 rounded px-1.5 py-1">Host chưa gửi <code class="font-mono">cameraThumbnail</code> cho cam này.</p>`);
+var root_11$1 = /* @__PURE__ */ from_html(`<!> <!> <!> <!>`, 1);
+var root_18$1 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_10$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-purple-100 rounded flex items-center justify-center text-xs"> </span> <button> </button></h3> <div class="space-y-3"><!> <div><div class="flex items-center gap-1 mb-2"><span class="text-xs text-gray-500">Color</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Material</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Wood</option><option>Metal</option><option>Fabric</option><option>Leather</option><option>Glass</option><option>Plastic</option><option>Stone</option><option>Ceramic</option></select></label> <label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-1"><button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Rotate 90° left">↺ 90°</button> <button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Rotate 90° right">↻ 90°</button></div> <div class="flex gap-1"><button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Flip horizontally">↔ Flip H</button> <button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Flip vertically">↕ Flip V</button></div> <button class="w-full px-2 py-1.5 border border-gray-300 rounded text-sm text-gray-600 hover:bg-gray-50 transition-colors">Reset to defaults</button></div>`, 1);
-var root_21$1 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_22$1 = /* @__PURE__ */ from_html(`<button></button>`);
-var root_25$1 = /* @__PURE__ */ from_html(`<button><div class="w-full h-12 rounded-md mb-1 overflow-hidden"></div> <div class="text-center leading-3 text-[10px] text-gray-600 truncate"> </div></button>`);
-var root_23$1 = /* @__PURE__ */ from_html(`<div><span class="text-xs font-medium text-gray-600 mb-1.5 block"> </span> <div class="grid grid-cols-3 gap-1.5"></div></div>`);
-var root_20$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-green-100 rounded flex items-center justify-center text-xs">⬜</span> Room Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Room Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"></select></label> <label class="block"><span class="text-xs text-gray-500">Room Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Category</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>🏠 Indoor</option><option>🌳 Outdoor</option><option>🚗 Garage</option><option>🔧 Utility</option></select></label> <div><span class="text-xs text-gray-500">Area</span> <p class="text-sm text-gray-700"> </p></div> <div><span class="text-xs text-gray-500 mb-1.5 block">Room Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <div><div class="flex items-center gap-1 mb-2"><span class="text-xs text-gray-500">Floor Material</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><path d="M3 3h18v18H3z"></path><path d="M8 8h8v8H8z"></path></svg></div> <div class="space-y-3"></div></div></div>`, 1);
-var root_26$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🪜</span> Stair Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Straight</option><option>L-Shaped</option><option>U-Shaped</option><option>Spiral</option></select></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Risers</span> <input type="number" min="3" max="30" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Direction</span> <div class="flex gap-2"><button>Up ↑</button> <button>Down ↓</button></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`, 1);
-var root_28 = /* @__PURE__ */ from_html(`<button></button>`);
-var root_29 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label>`);
-var root_27 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🏛️</span> Column Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Shape</span> <div class="flex gap-2"><button>⭕ Round</button> <button>⬜ Square</button></div></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="10" max="200" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="50" max="1000" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div><span class="text-xs text-gray-500 mb-1.5 block">Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <!></div>`, 1);
-var root_31 = /* @__PURE__ */ from_html(`<div class="text-xs text-gray-500">Camera: <span class="text-gray-700 font-mono"> </span></div>`);
-var root_32 = /* @__PURE__ */ from_html(`<button type="button"></button>`);
-var root_30 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 rounded flex items-center justify-center text-xs">⬡</span> Zone</h3> <label class="block"><span class="text-xs text-gray-500">Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm" title="From assignedCameras.zone when linked"/></label> <!> <div class="text-xs text-gray-500">Shape: <span class="text-gray-700 capitalize"> </span></div> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex flex-wrap gap-1.5 mt-1"><!> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></label> <label class="block"><span class="text-xs text-gray-500">Fill opacity</span> <input type="range" min="0" max="0.4" step="0.02" class="w-full"/></label></div>`);
-var root_33 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 rounded flex items-center justify-center text-xs">🏷️</span> Text Annotation</h3> <label class="block"><span class="text-xs text-gray-500">Text</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Font Size</span> <input type="number" min="8" max="72" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex items-center gap-2"><input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/> <span class="text-xs text-gray-400"> </span></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (°)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">X</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Y</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`);
-var root_34 = /* @__PURE__ */ from_html(`<div class="mt-4 pt-3 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-xs">🖼️</span> Background Image</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Opacity</span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Scale</span> <input type="range" min="0.1" max="5" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Rotation</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-2"><button> </button> <button class="flex-1 px-2 py-1.5 border rounded text-sm border-gray-200 hover:bg-gray-50">📏 Set Scale</button></div> <button class="w-full px-2 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50">Remove Image</button></div></div>`);
+var root_20$1 = /* @__PURE__ */ from_html(`<option> </option>`);
+var root_21$1 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_24$1 = /* @__PURE__ */ from_html(`<button><div class="w-full h-12 rounded-md mb-1 overflow-hidden"></div> <div class="text-center leading-3 text-[10px] text-gray-600 truncate"> </div></button>`);
+var root_22$1 = /* @__PURE__ */ from_html(`<div><span class="text-xs font-medium text-gray-600 mb-1.5 block"> </span> <div class="grid grid-cols-3 gap-1.5"></div></div>`);
+var root_19$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-green-100 rounded flex items-center justify-center text-xs">⬜</span> Room Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Room Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"></select></label> <label class="block"><span class="text-xs text-gray-500">Room Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Category</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>🏠 Indoor</option><option>🌳 Outdoor</option><option>🚗 Garage</option><option>🔧 Utility</option></select></label> <div><span class="text-xs text-gray-500">Area</span> <p class="text-sm text-gray-700"> </p></div> <div><span class="text-xs text-gray-500 mb-1.5 block">Room Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <div><div class="flex items-center gap-1 mb-2"><span class="text-xs text-gray-500">Floor Material</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><path d="M3 3h18v18H3z"></path><path d="M8 8h8v8H8z"></path></svg></div> <div class="space-y-3"></div></div></div>`, 1);
+var root_25 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🪜</span> Stair Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Straight</option><option>L-Shaped</option><option>U-Shaped</option><option>Spiral</option></select></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Risers</span> <input type="number" min="3" max="30" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Direction</span> <div class="flex gap-2"><button>Up ↑</button> <button>Down ↓</button></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`, 1);
+var root_27 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_28 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label>`);
+var root_26 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🏛️</span> Column Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Shape</span> <div class="flex gap-2"><button>⭕ Round</button> <button>⬜ Square</button></div></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="10" max="200" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="50" max="1000" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div><span class="text-xs text-gray-500 mb-1.5 block">Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <!></div>`, 1);
+var root_30 = /* @__PURE__ */ from_html(`<div class="text-xs text-gray-500">Camera: <span class="text-gray-700 font-mono"> </span></div>`);
+var root_31 = /* @__PURE__ */ from_html(`<button type="button"></button>`);
+var root_29 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 rounded flex items-center justify-center text-xs">⬡</span> Zone</h3> <label class="block"><span class="text-xs text-gray-500">Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm" title="From assignedCameras.zone when linked"/></label> <!> <div class="text-xs text-gray-500">Shape: <span class="text-gray-700 capitalize"> </span></div> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex flex-wrap gap-1.5 mt-1"><!> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></label> <label class="block"><span class="text-xs text-gray-500">Fill opacity</span> <input type="range" min="0" max="0.4" step="0.02" class="w-full"/></label></div>`);
+var root_32 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 rounded flex items-center justify-center text-xs">🏷️</span> Text Annotation</h3> <label class="block"><span class="text-xs text-gray-500">Text</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Font Size</span> <input type="number" min="8" max="72" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex items-center gap-2"><input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/> <span class="text-xs text-gray-400"> </span></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (°)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">X</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Y</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`);
+var root_33 = /* @__PURE__ */ from_html(`<div class="mt-4 pt-3 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-xs">🖼️</span> Background Image</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Opacity</span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Scale</span> <input type="range" min="0.1" max="5" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Rotation</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-2"><button> </button> <button class="flex-1 px-2 py-1.5 border rounded text-sm border-gray-200 hover:bg-gray-50">📏 Set Scale</button></div> <button class="w-full px-2 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50">Remove Image</button></div></div>`);
 var root$3 = /* @__PURE__ */ from_html(`<div data-properties-panel="" style="top: 0; bottom: 0;"><!> <!></div>`);
 function PropertiesPanel($$anchor, $$props) {
 	push($$props, true);
@@ -63558,8 +64158,7 @@ function PropertiesPanel($$anchor, $$props) {
 	function unitLabel() {
 		return get(settings).units === "imperial" ? "in" : "cm";
 	}
-	let is3D = prop($$props, "is3D", 3, false), siteCameras = prop($$props, "siteCameras", 19, () => []);
-	prop($$props, "cameraThumbnail", 3, "");
+	let is3D = prop($$props, "is3D", 3, false), siteCameras = prop($$props, "siteCameras", 19, () => []), cameraThumbnail = prop($$props, "cameraThumbnail", 3, "");
 	let wallSideTab = /* @__PURE__ */ state("interior");
 	let selectedWall = /* @__PURE__ */ user_derived(() => {
 		var _$$get$walls$find, _$$get;
@@ -64040,11 +64639,15 @@ function PropertiesPanel($$anchor, $$props) {
 		}
 	];
 	let hasSelection = /* @__PURE__ */ user_derived(() => !!get(selectedWall) || !!get(selectedDoor) || !!get(selectedWindow) || !!get(selectedFurniture) || !!get(selectedRoom) || !!get(selectedStair) || !!get(selectedColumn) || !!get(selectedTextAnnotation) || !!get(selectedZone) || !is3D() && get(hasBgImage));
+	let showCameraThumbnail = /* @__PURE__ */ user_derived(() => {
+		var _$$get15, _cameraThumbnail;
+		return ((_$$get15 = get(selectedFurniture)) === null || _$$get15 === void 0 ? void 0 : _$$get15.catalogId) === "camera" && !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim());
+	});
 	var div = root$3();
 	let classes;
 	var node = child(div);
 	var consequent_1 = ($$anchor) => {
-		var fragment = root_1$8();
+		var fragment = root_1$6();
 		var div_1 = sibling(first_child(fragment), 2);
 		var label = child(div_1);
 		var span = child(label);
@@ -64081,10 +64684,10 @@ function PropertiesPanel($$anchor, $$props) {
 		var consequent = ($$anchor) => {
 			const sideColor = /* @__PURE__ */ user_derived(() => get(selectedWall).interiorColor || get(selectedWall).color);
 			const sideTex = /* @__PURE__ */ user_derived(() => get(selectedWall).interiorTexture === "none" ? void 0 : get(selectedWall).interiorTexture || get(selectedWall).texture);
-			var div_5 = root_2$8();
+			var div_5 = root_2$7();
 			var div_6 = sibling(child(div_5), 2);
 			each(div_6, 21, () => wallColors, index$1, ($$anchor, wc) => {
-				var button_3 = root_3$7();
+				var button_3 = root_3$6();
 				template_effect(() => {
 					var _$$get$color;
 					set_class(button_3, 1, `w-7 h-7 rounded-md border-2 hover:border-gray-300 transition-colors ${get(sideColor) === get(wc).color ? "border-blue-500 ring-1 ring-blue-200" : "border-gray-200"}`);
@@ -64115,7 +64718,7 @@ function PropertiesPanel($$anchor, $$props) {
 						"subway-tile": images.subwayTile
 					}[get(wc).id]) !== null && _redBrick$exposedBr !== void 0 ? _redBrick$exposedBr : "";
 				});
-				var button_5 = root_4$6();
+				var button_5 = root_4$5();
 				var span_3 = child(button_5);
 				var text_4 = child(span_3, true);
 				reset(span_3);
@@ -64150,10 +64753,10 @@ function PropertiesPanel($$anchor, $$props) {
 		var alternate = ($$anchor) => {
 			const sideColor = /* @__PURE__ */ user_derived(() => get(selectedWall).exteriorColor || get(selectedWall).color);
 			const sideTex = /* @__PURE__ */ user_derived(() => get(selectedWall).exteriorTexture === "none" ? void 0 : get(selectedWall).exteriorTexture || get(selectedWall).texture);
-			var div_8 = root_5$4();
+			var div_8 = root_5$3();
 			var div_9 = sibling(child(div_8), 2);
 			each(div_9, 21, () => wallColors, index$1, ($$anchor, wc) => {
-				var button_6 = root_6$3();
+				var button_6 = root_6$2();
 				template_effect(() => {
 					var _$$get$color2;
 					set_class(button_6, 1, `w-7 h-7 rounded-md border-2 hover:border-gray-300 transition-colors ${get(sideColor) === get(wc).color ? "border-blue-500 ring-1 ring-blue-200" : "border-gray-200"}`);
@@ -64262,7 +64865,7 @@ function PropertiesPanel($$anchor, $$props) {
 		append($$anchor, fragment);
 	};
 	var consequent_2 = ($$anchor) => {
-		var fragment_1 = root_8$2();
+		var fragment_1 = root_8$1();
 		var div_11 = sibling(first_child(fragment_1), 2);
 		var label_5 = child(div_11);
 		var span_5 = child(label_5);
@@ -64324,7 +64927,7 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_11);
 		reset(div_11);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
-			var _$$get15, _$$get16, _$$get17, _$$get18;
+			var _$$get16, _$$get17, _$$get18, _$$get19;
 			set_text(text_6, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
 			set_value(input_5, $1);
 			set_text(text_7, `Distance from A (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
@@ -64337,10 +64940,10 @@ function PropertiesPanel($$anchor, $$props) {
 				var _select$__value;
 				select.value = (_select$__value = select.__value = get(selectedDoor).type) !== null && _select$__value !== void 0 ? _select$__value : "", select_option(select, get(selectedDoor).type);
 			}
-			set_class(button_9, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get15 = get(selectedDoor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.swingDirection) === "left" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_10, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.swingDirection) === "right" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_11, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${!((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get18 = get(selectedDoor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_9, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.swingDirection) === "left" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_10, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.swingDirection) === "right" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_11, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${!((_$$get18 = get(selectedDoor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get19 = get(selectedDoor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedDoor).width),
@@ -64464,7 +65067,7 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("input", input_13, onWindowSill);
 		append($$anchor, fragment_2);
 	};
-	var consequent_10 = ($$anchor) => {
+	var consequent_9 = ($$anchor) => {
 		var fragment_3 = root_10$1();
 		var h3 = first_child(fragment_3);
 		var span_14 = child(h3);
@@ -64477,11 +65080,11 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(h3);
 		var div_15 = sibling(h3, 2);
 		var node_4 = child(div_15);
-		var consequent_9 = ($$anchor) => {
-			var fragment_4 = root_11$2();
+		var consequent_8 = ($$anchor) => {
+			var fragment_4 = root_11$1();
 			var node_5 = first_child(fragment_4);
 			var consequent_4 = ($$anchor) => {
-				var label_18 = root_12$2();
+				var label_18 = root_12$1();
 				var select_2 = sibling(child(label_18), 2);
 				var option_11 = child(select_2);
 				option_11.value = option_11.__value = "";
@@ -64528,61 +65131,62 @@ function PropertiesPanel($$anchor, $$props) {
 				append($$anchor, label_19);
 			});
 			var node_8 = sibling(node_7, 2);
-			var consequent_8 = ($$anchor) => {
-				var fragment_5 = root_15();
-				var node_9 = sibling(first_child(fragment_5), 2);
-				var consequent_7 = ($$anchor) => {
-					var div_16 = root_16$1();
-					var node_10 = child(div_16);
-					var consequent_5 = ($$anchor) => {
-						var div_17 = root_17$1();
-						var text_20 = child(div_17);
-						reset(div_17);
-						template_effect(() => {
-							var _$$get$props$mapCoord;
-							return set_text(text_20, `map: ${(_$$get$props$mapCoord = get(selectedFurniture).props.mapCoordinates) !== null && _$$get$props$mapCoord !== void 0 ? _$$get$props$mapCoord : ""}`);
-						});
-						append($$anchor, div_17);
-					};
-					if_block(node_10, ($$render) => {
-						var _$$get$props2;
-						if ((_$$get$props2 = get(selectedFurniture).props) === null || _$$get$props2 === void 0 ? void 0 : _$$get$props2.mapCoordinates) $$render(consequent_5);
+			var consequent_5 = ($$anchor) => {
+				append($$anchor, root_15$1());
+			};
+			if_block(node_8, ($$render) => {
+				if (get(selectedFurniture).serial) $$render(consequent_5);
+			});
+			var node_9 = sibling(node_8, 2);
+			var consequent_6 = ($$anchor) => {
+				var div_16 = root_16();
+				var node_10 = sibling(child(div_16), 2);
+				{
+					let $0 = /* @__PURE__ */ user_derived(() => {
+						var _$$get$props$coordina, _$$get$props2;
+						return (_$$get$props$coordina = (_$$get$props2 = get(selectedFurniture).props) === null || _$$get$props2 === void 0 ? void 0 : _$$get$props2.coordinates) !== null && _$$get$props$coordina !== void 0 ? _$$get$props$coordina : "";
 					});
-					var node_11 = sibling(node_10, 2);
-					var consequent_6 = ($$anchor) => {
-						var div_18 = root_18$1();
-						var text_21 = child(div_18);
-						reset(div_18);
-						template_effect(() => {
-							var _$$get$props$coordina;
-							return set_text(text_21, `img: ${(_$$get$props$coordina = get(selectedFurniture).props.coordinates) !== null && _$$get$props$coordina !== void 0 ? _$$get$props$coordina : ""}`);
-						});
-						append($$anchor, div_18);
-					};
-					if_block(node_11, ($$render) => {
-						var _$$get$props3;
-						if ((_$$get$props3 = get(selectedFurniture).props) === null || _$$get$props3 === void 0 ? void 0 : _$$get$props3.coordinates) $$render(consequent_6);
+					let $1 = /* @__PURE__ */ user_derived(() => {
+						var _$$get$props$mapCoord, _$$get$props3;
+						return (_$$get$props$mapCoord = (_$$get$props3 = get(selectedFurniture).props) === null || _$$get$props3 === void 0 ? void 0 : _$$get$props3.mapCoordinates) !== null && _$$get$props$mapCoord !== void 0 ? _$$get$props$mapCoord : "";
 					});
-					reset(div_16);
-					append($$anchor, div_16);
-				};
-				if_block(node_9, ($$render) => {
-					var _$$get$props4, _$$get$props5;
-					if (((_$$get$props4 = get(selectedFurniture).props) === null || _$$get$props4 === void 0 ? void 0 : _$$get$props4.mapCoordinates) || ((_$$get$props5 = get(selectedFurniture).props) === null || _$$get$props5 === void 0 ? void 0 : _$$get$props5.coordinates)) $$render(consequent_7);
-				});
-				append($$anchor, fragment_5);
+					CameraFovEditor(node_10, {
+						get serial() {
+							return get(selectedFurniture).serial;
+						},
+						get thumbnailUrl() {
+							return cameraThumbnail();
+						},
+						get coordinates() {
+							return get($0);
+						},
+						get mapCoordinates() {
+							return get($1);
+						}
+					});
+				}
+				reset(div_16);
+				append($$anchor, div_16);
 			};
-			if_block(node_8, ($$render) => {
-				if (get(selectedFurniture).serial) $$render(consequent_8);
+			var consequent_7 = ($$anchor) => {
+				append($$anchor, root_17$1());
+			};
+			var d_1 = /* @__PURE__ */ user_derived(() => {
+				var _cameraThumbnail2;
+				return get(selectedFurniture).serial && !((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim());
+			});
+			if_block(node_9, ($$render) => {
+				if (get(showCameraThumbnail) && get(selectedFurniture).serial) $$render(consequent_6);
+				else if (get(d_1)) $$render(consequent_7, 1);
 			});
 			append($$anchor, fragment_4);
 		};
 		if_block(node_4, ($$render) => {
-			if (get(selectedFurniture).catalogId === "camera") $$render(consequent_9);
+			if (get(selectedFurniture).catalogId === "camera") $$render(consequent_8);
 		});
-		var div_19 = sibling(node_4, 2);
-		var div_20 = sibling(child(div_19), 2);
-		each(div_20, 20, () => [
+		var div_17 = sibling(node_4, 2);
+		var div_18 = sibling(child(div_17), 2);
+		each(div_18, 20, () => [
 			"#ffffff",
 			"#f5f5dc",
 			"#d2b48c",
@@ -64594,7 +65198,7 @@ function PropertiesPanel($$anchor, $$props) {
 			"#dc143c",
 			"#228b22"
 		], index$1, ($$anchor, color) => {
-			var button_14 = root_19$1();
+			var button_14 = root_18$1();
 			template_effect(($0) => {
 				set_class(button_14, 1, `w-6 h-6 rounded border-2 hover:border-gray-300 transition-colors ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 				set_style(button_14, `background-color: ${color !== null && color !== void 0 ? color : ""}`);
@@ -64606,29 +65210,29 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_14, () => onFurnitureColor(color));
 			append($$anchor, button_14);
 		});
-		reset(div_20);
-		var div_21 = sibling(div_20, 2);
-		var input_15 = sibling(child(div_21), 2);
+		reset(div_18);
+		var div_19 = sibling(div_18, 2);
+		var input_15 = sibling(child(div_19), 2);
 		remove_input_defaults(input_15);
-		reset(div_21);
 		reset(div_19);
-		var label_20 = sibling(div_19, 2);
+		reset(div_17);
+		var label_20 = sibling(div_17, 2);
 		var span_16 = child(label_20);
-		var text_22 = child(span_16);
+		var text_20 = child(span_16);
 		reset(span_16);
 		var input_16 = sibling(span_16, 2);
 		remove_input_defaults(input_16);
 		reset(label_20);
 		var label_21 = sibling(label_20, 2);
 		var span_17 = child(label_21);
-		var text_23 = child(span_17);
+		var text_21 = child(span_17);
 		reset(span_17);
 		var input_17 = sibling(span_17, 2);
 		remove_input_defaults(input_17);
 		reset(label_21);
 		var label_22 = sibling(label_21, 2);
 		var span_18 = child(label_22);
-		var text_24 = child(span_18);
+		var text_22 = child(span_18);
 		reset(span_18);
 		var input_18 = sibling(span_18, 2);
 		remove_input_defaults(input_18);
@@ -64659,15 +65263,15 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_19 = sibling(child(label_24), 2);
 		remove_input_defaults(input_19);
 		reset(label_24);
-		var div_22 = sibling(label_24, 2);
-		var button_15 = child(div_22);
+		var div_20 = sibling(label_24, 2);
+		var button_15 = child(div_20);
 		var button_16 = sibling(button_15, 2);
-		reset(div_22);
-		var div_23 = sibling(div_22, 2);
-		var button_17 = child(div_23);
+		reset(div_20);
+		var div_21 = sibling(div_20, 2);
+		var button_17 = child(div_21);
 		var button_18 = sibling(button_17, 2);
-		reset(div_23);
-		var button_19 = sibling(div_23, 2);
+		reset(div_21);
+		var button_19 = sibling(div_21, 2);
 		reset(div_15);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8, $9) => {
 			var _$$get$material;
@@ -64677,11 +65281,11 @@ function PropertiesPanel($$anchor, $$props) {
 			set_attribute(button_13, "title", get(selectedFurniture).locked ? "Unlock (Ctrl+L)" : "Lock (Ctrl+L)");
 			set_text(text_17, get(selectedFurniture).locked ? "🔒 Locked" : "🔓");
 			set_value(input_15, $2);
-			set_text(text_22, `Width (${$3 !== null && $3 !== void 0 ? $3 : ""})`);
+			set_text(text_20, `Width (${$3 !== null && $3 !== void 0 ? $3 : ""})`);
 			set_value(input_16, $4);
-			set_text(text_23, `Depth (${$5 !== null && $5 !== void 0 ? $5 : ""})`);
+			set_text(text_21, `Depth (${$5 !== null && $5 !== void 0 ? $5 : ""})`);
 			set_value(input_17, $6);
-			set_text(text_24, `Height (${$7 !== null && $7 !== void 0 ? $7 : ""})`);
+			set_text(text_22, `Height (${$7 !== null && $7 !== void 0 ? $7 : ""})`);
 			set_value(input_18, $8);
 			if (select_3_value !== (select_3_value = (_$$get$material = get(selectedFurniture).material) !== null && _$$get$material !== void 0 ? _$$get$material : "Wood")) {
 				var _select_3$__value, _$$get$material2, _$$get$material3;
@@ -64756,19 +65360,19 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("click", button_19, resetFurnitureDefaults);
 		append($$anchor, fragment_3);
 	};
-	var consequent_12 = ($$anchor) => {
-		var fragment_6 = root_20$1();
-		var div_24 = sibling(first_child(fragment_6), 2);
-		var label_25 = child(div_24);
+	var consequent_11 = ($$anchor) => {
+		var fragment_5 = root_19$1();
+		var div_22 = sibling(first_child(fragment_5), 2);
+		var label_25 = child(div_22);
 		var select_4 = sibling(child(label_25), 2);
 		each(select_4, 21, () => roomTypes, index$1, ($$anchor, rt) => {
-			var option_21 = root_21$1();
-			var text_25 = child(option_21);
+			var option_21 = root_20$1();
+			var text_23 = child(option_21);
 			reset(option_21);
 			var option_21_value = {};
 			template_effect(() => {
 				var _$$get$icon, _$$get$label;
-				set_text(text_25, `${(_$$get$icon = get(rt).icon) !== null && _$$get$icon !== void 0 ? _$$get$icon : ""} ${(_$$get$label = get(rt).label) !== null && _$$get$label !== void 0 ? _$$get$label : ""}`);
+				set_text(text_23, `${(_$$get$icon = get(rt).icon) !== null && _$$get$icon !== void 0 ? _$$get$icon : ""} ${(_$$get$label = get(rt).label) !== null && _$$get$label !== void 0 ? _$$get$label : ""}`);
 				if (option_21_value !== (option_21_value = get(rt).id)) {
 					var _option_21$__value;
 					option_21.value = (_option_21$__value = option_21.__value = get(rt).id) !== null && _option_21$__value !== void 0 ? _option_21$__value : "";
@@ -64798,15 +65402,15 @@ function PropertiesPanel($$anchor, $$props) {
 		var select_5_value;
 		init_select(select_5);
 		reset(label_27);
-		var div_25 = sibling(label_27, 2);
-		var p = sibling(child(div_25), 2);
-		var text_26 = child(p, true);
-		reset(p);
-		reset(div_25);
-		var div_26 = sibling(div_25, 2);
-		var div_27 = sibling(child(div_26), 2);
-		each(div_27, 21, () => roomColorPresets, index$1, ($$anchor, preset) => {
-			var button_20 = root_22$1();
+		var div_23 = sibling(label_27, 2);
+		var p_2 = sibling(child(div_23), 2);
+		var text_24 = child(p_2, true);
+		reset(p_2);
+		reset(div_23);
+		var div_24 = sibling(div_23, 2);
+		var div_25 = sibling(child(div_24), 2);
+		each(div_25, 21, () => roomColorPresets, index$1, ($$anchor, preset) => {
+			var button_20 = root_21$1();
 			template_effect(() => {
 				var _$$get$color5;
 				set_class(button_20, 1, `w-7 h-7 rounded-md border-2 hover:border-gray-300 transition-colors ${get(selectedRoom).color === get(preset).color ? "border-blue-500 ring-1 ring-blue-200" : "border-gray-200"}`);
@@ -64816,57 +65420,57 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_20, () => onRoomColor(get(preset).color));
 			append($$anchor, button_20);
 		});
-		reset(div_27);
-		var div_28 = sibling(div_27, 2);
-		var input_21 = sibling(child(div_28), 2);
+		reset(div_25);
+		var div_26 = sibling(div_25, 2);
+		var input_21 = sibling(child(div_26), 2);
 		remove_input_defaults(input_21);
-		reset(div_28);
 		reset(div_26);
-		var div_29 = sibling(div_26, 2);
-		var div_30 = sibling(child(div_29), 2);
-		each(div_30, 21, () => textureGroups, index$1, ($$anchor, group) => {
-			var div_31 = root_23$1();
-			var span_19 = child(div_31);
-			var text_27 = child(span_19, true);
+		reset(div_24);
+		var div_27 = sibling(div_24, 2);
+		var div_28 = sibling(child(div_27), 2);
+		each(div_28, 21, () => textureGroups, index$1, ($$anchor, group) => {
+			var div_29 = root_22$1();
+			var span_19 = child(div_29);
+			var text_25 = child(span_19, true);
 			reset(span_19);
-			var div_32 = sibling(span_19, 2);
-			each(div_32, 21, () => get(group).ids, index$1, ($$anchor, matId) => {
+			var div_30 = sibling(span_19, 2);
+			each(div_30, 21, () => get(group).ids, index$1, ($$anchor, matId) => {
 				const mat = /* @__PURE__ */ user_derived(() => floorMaterials.find((m) => m.id === get(matId)));
-				var fragment_7 = comment();
-				var node_12 = first_child(fragment_7);
-				var consequent_11 = ($$anchor) => {
+				var fragment_6 = comment();
+				var node_11 = first_child(fragment_6);
+				var consequent_10 = ($$anchor) => {
 					const texPath = /* @__PURE__ */ user_derived(() => {
 						var _floorTexPaths$$$get$;
 						return (_floorTexPaths$$$get$ = floorTexPaths[get(mat).id]) !== null && _floorTexPaths$$$get$ !== void 0 ? _floorTexPaths$$$get$ : "";
 					});
-					var button_21 = root_25$1();
-					var div_33 = child(button_21);
-					var div_34 = sibling(div_33, 2);
-					var text_28 = child(div_34, true);
-					reset(div_34);
+					var button_21 = root_24$1();
+					var div_31 = child(button_21);
+					var div_32 = sibling(div_31, 2);
+					var text_26 = child(div_32, true);
+					reset(div_32);
 					reset(button_21);
 					template_effect(() => {
 						set_class(button_21, 1, `p-1 rounded-lg border-2 hover:border-gray-300 transition-all text-xs ${get(selectedRoom).floorTexture === get(mat).id ? "border-blue-500 ring-2 ring-blue-200 shadow-sm" : "border-gray-200"}`);
 						set_attribute(button_21, "title", get(mat).name);
-						set_style(div_33, get(texPath) ? `background-image: url(${get(texPath)}); background-size: cover; background-position: center;` : `background-color: ${get(mat).color}`);
-						set_text(text_28, get(mat).name);
+						set_style(div_31, get(texPath) ? `background-image: url(${get(texPath)}); background-size: cover; background-position: center;` : `background-color: ${get(mat).color}`);
+						set_text(text_26, get(mat).name);
 					});
 					delegated("click", button_21, () => onRoomFloor(get(mat).id));
 					append($$anchor, button_21);
 				};
-				if_block(node_12, ($$render) => {
-					if (get(mat)) $$render(consequent_11);
+				if_block(node_11, ($$render) => {
+					if (get(mat)) $$render(consequent_10);
 				});
-				append($$anchor, fragment_7);
+				append($$anchor, fragment_6);
 			});
-			reset(div_32);
-			reset(div_31);
-			template_effect(() => set_text(text_27, get(group).label));
-			append($$anchor, div_31);
+			reset(div_30);
+			reset(div_29);
+			template_effect(() => set_text(text_25, get(group).label));
+			append($$anchor, div_29);
 		});
-		reset(div_30);
-		reset(div_29);
-		reset(div_24);
+		reset(div_28);
+		reset(div_27);
+		reset(div_22);
 		template_effect(($0) => {
 			var _$$get$roomType, _$$get$color6;
 			if (select_4_value !== (select_4_value = get(selectedRoomType))) {
@@ -64878,7 +65482,7 @@ function PropertiesPanel($$anchor, $$props) {
 				var _select_5$__value, _$$get$roomType2, _$$get$roomType3;
 				select_5.value = (_select_5$__value = select_5.__value = (_$$get$roomType2 = get(selectedRoom).roomType) !== null && _$$get$roomType2 !== void 0 ? _$$get$roomType2 : "indoor") !== null && _select_5$__value !== void 0 ? _select_5$__value : "", select_option(select_5, (_$$get$roomType3 = get(selectedRoom).roomType) !== null && _$$get$roomType3 !== void 0 ? _$$get$roomType3 : "indoor");
 			}
-			set_text(text_26, $0);
+			set_text(text_24, $0);
 			set_value(input_21, (_$$get$color6 = get(selectedRoom).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : "#ffffff");
 		}, [() => formatArea(get(selectedRoom).area, get(settings).units)]);
 		delegated("change", select_4, onRoomType);
@@ -64891,12 +65495,12 @@ function PropertiesPanel($$anchor, $$props) {
 			}
 		});
 		delegated("input", input_21, (e) => onRoomColor(e.target.value));
-		append($$anchor, fragment_6);
+		append($$anchor, fragment_5);
 	};
-	var consequent_13 = ($$anchor) => {
-		var fragment_8 = root_26$1();
-		var div_35 = sibling(first_child(fragment_8), 2);
-		var label_28 = child(div_35);
+	var consequent_12 = ($$anchor) => {
+		var fragment_7 = root_25();
+		var div_33 = sibling(first_child(fragment_7), 2);
+		var label_28 = child(div_33);
 		var select_6 = sibling(child(label_28), 2);
 		var option_26 = child(select_6);
 		option_26.value = option_26.__value = "straight";
@@ -64912,14 +65516,14 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_28);
 		var label_29 = sibling(label_28, 2);
 		var span_20 = child(label_29);
-		var text_29 = child(span_20);
+		var text_27 = child(span_20);
 		reset(span_20);
 		var input_22 = sibling(span_20, 2);
 		remove_input_defaults(input_22);
 		reset(label_29);
 		var label_30 = sibling(label_29, 2);
 		var span_21 = child(label_30);
-		var text_30 = child(span_21);
+		var text_28 = child(span_21);
 		reset(span_21);
 		var input_23 = sibling(span_21, 2);
 		remove_input_defaults(input_23);
@@ -64929,24 +65533,24 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_24);
 		reset(label_31);
 		var label_32 = sibling(label_31, 2);
-		var div_36 = sibling(child(label_32), 2);
-		var button_22 = child(div_36);
+		var div_34 = sibling(child(label_32), 2);
+		var button_22 = child(div_34);
 		var button_23 = sibling(button_22, 2);
-		reset(div_36);
+		reset(div_34);
 		reset(label_32);
 		var label_33 = sibling(label_32, 2);
 		var input_25 = sibling(child(label_33), 2);
 		remove_input_defaults(input_25);
 		reset(label_33);
-		reset(div_35);
+		reset(div_33);
 		template_effect(($0, $1, $2, $3) => {
 			if (select_6_value !== (select_6_value = get(selectedStair).stairType || "straight")) {
 				var _select_6$__value;
 				select_6.value = (_select_6$__value = select_6.__value = get(selectedStair).stairType || "straight") !== null && _select_6$__value !== void 0 ? _select_6$__value : "", select_option(select_6, get(selectedStair).stairType || "straight");
 			}
-			set_text(text_29, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
+			set_text(text_27, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
 			set_value(input_22, $1);
-			set_text(text_30, `Depth (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
+			set_text(text_28, `Depth (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
 			set_value(input_23, $3);
 			set_value(input_24, get(selectedStair).riserCount);
 			set_class(button_22, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedStair).direction === "up" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
@@ -64965,35 +65569,35 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("click", button_22, () => updateStair(get(selectedStair).id, { direction: "up" }));
 		delegated("click", button_23, () => updateStair(get(selectedStair).id, { direction: "down" }));
 		delegated("input", input_25, (e) => updateStair(get(selectedStair).id, { rotation: Number(e.target.value) }));
-		append($$anchor, fragment_8);
+		append($$anchor, fragment_7);
 	};
-	var consequent_15 = ($$anchor) => {
-		var fragment_9 = root_27();
-		var div_37 = sibling(first_child(fragment_9), 2);
-		var label_34 = child(div_37);
-		var div_38 = sibling(child(label_34), 2);
-		var button_24 = child(div_38);
+	var consequent_14 = ($$anchor) => {
+		var fragment_8 = root_26();
+		var div_35 = sibling(first_child(fragment_8), 2);
+		var label_34 = child(div_35);
+		var div_36 = sibling(child(label_34), 2);
+		var button_24 = child(div_36);
 		var button_25 = sibling(button_24, 2);
-		reset(div_38);
+		reset(div_36);
 		reset(label_34);
 		var label_35 = sibling(label_34, 2);
 		var span_22 = child(label_35);
-		var text_31 = child(span_22);
+		var text_29 = child(span_22);
 		reset(span_22);
 		var input_26 = sibling(span_22, 2);
 		remove_input_defaults(input_26);
 		reset(label_35);
 		var label_36 = sibling(label_35, 2);
 		var span_23 = child(label_36);
-		var text_32 = child(span_23);
+		var text_30 = child(span_23);
 		reset(span_23);
 		var input_27 = sibling(span_23, 2);
 		remove_input_defaults(input_27);
 		reset(label_36);
-		var div_39 = sibling(label_36, 2);
-		var div_40 = sibling(child(div_39), 2);
-		each(div_40, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
-			var button_26 = root_28();
+		var div_37 = sibling(label_36, 2);
+		var div_38 = sibling(child(div_37), 2);
+		each(div_38, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
+			var button_26 = root_27();
 			template_effect(() => {
 				var _$$get$color7;
 				set_class(button_26, 1, `w-7 h-7 rounded-md border-2 hover:border-gray-300 transition-colors ${get(selectedColumn).color === get(preset).color ? "border-blue-500 ring-1 ring-blue-200" : "border-gray-200"}`);
@@ -65003,15 +65607,15 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_26, () => updateColumn(get(selectedColumn).id, { color: get(preset).color }));
 			append($$anchor, button_26);
 		});
-		reset(div_40);
-		var div_41 = sibling(div_40, 2);
-		var input_28 = sibling(child(div_41), 2);
+		reset(div_38);
+		var div_39 = sibling(div_38, 2);
+		var input_28 = sibling(child(div_39), 2);
 		remove_input_defaults(input_28);
-		reset(div_41);
 		reset(div_39);
-		var node_13 = sibling(div_39, 2);
-		var consequent_14 = ($$anchor) => {
-			var label_37 = root_29();
+		reset(div_37);
+		var node_12 = sibling(div_37, 2);
+		var consequent_13 = ($$anchor) => {
+			var label_37 = root_28();
 			var input_29 = sibling(child(label_37), 2);
 			remove_input_defaults(input_29);
 			reset(label_37);
@@ -65019,16 +65623,16 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("input", input_29, (e) => updateColumn(get(selectedColumn).id, { rotation: Number(e.target.value) }));
 			append($$anchor, label_37);
 		};
-		if_block(node_13, ($$render) => {
-			if (get(selectedColumn).shape === "square") $$render(consequent_14);
+		if_block(node_12, ($$render) => {
+			if (get(selectedColumn).shape === "square") $$render(consequent_13);
 		});
-		reset(div_37);
+		reset(div_35);
 		template_effect(($0, $1, $2, $3) => {
 			set_class(button_24, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedColumn).shape === "round" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 			set_class(button_25, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedColumn).shape === "square" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_text(text_31, `${get(selectedColumn).shape === "round" ? "Diameter" : "Side Length"} (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
+			set_text(text_29, `${get(selectedColumn).shape === "round" ? "Diameter" : "Side Length"} (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
 			set_value(input_26, $1);
-			set_text(text_32, `Height (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
+			set_text(text_30, `Height (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
 			set_value(input_27, $3);
 			set_value(input_28, get(selectedColumn).color);
 		}, [
@@ -65042,11 +65646,11 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("input", input_26, (e) => updateColumn(get(selectedColumn).id, { diameter: inputToCm(Number(e.target.value)) }));
 		delegated("input", input_27, (e) => updateColumn(get(selectedColumn).id, { height: inputToCm(Number(e.target.value)) }));
 		delegated("input", input_28, (e) => updateColumn(get(selectedColumn).id, { color: e.target.value }));
-		append($$anchor, fragment_9);
+		append($$anchor, fragment_8);
 	};
-	var consequent_17 = ($$anchor) => {
-		var div_42 = root_30();
-		var h3_1 = child(div_42);
+	var consequent_16 = ($$anchor) => {
+		var div_40 = root_29();
+		var h3_1 = child(div_40);
 		var span_24 = child(h3_1);
 		next();
 		reset(h3_1);
@@ -65054,62 +65658,62 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_30 = sibling(child(label_38), 2);
 		remove_input_defaults(input_30);
 		reset(label_38);
-		var node_14 = sibling(label_38, 2);
-		var consequent_16 = ($$anchor) => {
-			var div_43 = root_31();
-			var span_25 = sibling(child(div_43));
-			var text_33 = child(span_25, true);
+		var node_13 = sibling(label_38, 2);
+		var consequent_15 = ($$anchor) => {
+			var div_41 = root_30();
+			var span_25 = sibling(child(div_41));
+			var text_31 = child(span_25, true);
 			reset(span_25);
-			reset(div_43);
-			template_effect(() => set_text(text_33, get(selectedZone).cameraSerial));
-			append($$anchor, div_43);
+			reset(div_41);
+			template_effect(() => set_text(text_31, get(selectedZone).cameraSerial));
+			append($$anchor, div_41);
 		};
-		if_block(node_14, ($$render) => {
-			if (get(selectedZone).cameraSerial) $$render(consequent_16);
+		if_block(node_13, ($$render) => {
+			if (get(selectedZone).cameraSerial) $$render(consequent_15);
 		});
-		var div_44 = sibling(node_14, 2);
-		var span_26 = sibling(child(div_44));
-		var text_34 = child(span_26, true);
+		var div_42 = sibling(node_13, 2);
+		var span_26 = sibling(child(div_42));
+		var text_32 = child(span_26, true);
 		reset(span_26);
-		reset(div_44);
-		var label_39 = sibling(div_44, 2);
-		var div_45 = sibling(child(label_39), 2);
-		var node_15 = child(div_45);
-		each(node_15, 17, () => ZONE_COLOR_PALETTE, index$1, ($$anchor, c) => {
-			var button_27 = root_32();
+		reset(div_42);
+		var label_39 = sibling(div_42, 2);
+		var div_43 = sibling(child(label_39), 2);
+		var node_14 = child(div_43);
+		each(node_14, 17, () => ZONE_COLOR_PALETTE, index$1, ($$anchor, c) => {
+			var button_27 = root_31();
 			template_effect(() => {
-				var _$$get19;
+				var _$$get20;
 				set_class(button_27, 1, `w-6 h-6 rounded border-2 ${get(selectedZone).color === get(c) ? "border-slate-800" : "border-transparent"}`);
-				set_style(button_27, `background:${(_$$get19 = get(c)) !== null && _$$get19 !== void 0 ? _$$get19 : ""}`);
+				set_style(button_27, `background:${(_$$get20 = get(c)) !== null && _$$get20 !== void 0 ? _$$get20 : ""}`);
 			});
 			delegated("click", button_27, () => updateZone(get(selectedZone).id, { color: get(c) }));
 			append($$anchor, button_27);
 		});
-		var input_31 = sibling(node_15, 2);
+		var input_31 = sibling(node_14, 2);
 		remove_input_defaults(input_31);
-		reset(div_45);
+		reset(div_43);
 		reset(label_39);
 		var label_40 = sibling(label_39, 2);
 		var input_32 = sibling(child(label_40), 2);
 		remove_input_defaults(input_32);
 		reset(label_40);
-		reset(div_42);
+		reset(div_40);
 		template_effect(() => {
 			var _$$get$color8, _$$get$color9, _$$get$fillOpacity;
 			set_style(span_24, `background:${(_$$get$color8 = get(selectedZone).color) !== null && _$$get$color8 !== void 0 ? _$$get$color8 : ""}22;color:${(_$$get$color9 = get(selectedZone).color) !== null && _$$get$color9 !== void 0 ? _$$get$color9 : ""}`);
 			set_value(input_30, get(selectedZone).name);
-			set_text(text_34, get(selectedZone).shape);
+			set_text(text_32, get(selectedZone).shape);
 			set_value(input_31, get(selectedZone).color);
 			set_value(input_32, (_$$get$fillOpacity = get(selectedZone).fillOpacity) !== null && _$$get$fillOpacity !== void 0 ? _$$get$fillOpacity : .1);
 		});
 		delegated("input", input_30, (e) => updateZone(get(selectedZone).id, { name: e.target.value }));
 		delegated("input", input_31, (e) => updateZone(get(selectedZone).id, { color: e.target.value }));
 		delegated("input", input_32, (e) => updateZone(get(selectedZone).id, { fillOpacity: Number(e.target.value) }));
-		append($$anchor, div_42);
+		append($$anchor, div_40);
 	};
-	var consequent_18 = ($$anchor) => {
-		var div_46 = root_33();
-		var label_41 = sibling(child(div_46), 2);
+	var consequent_17 = ($$anchor) => {
+		var div_44 = root_32();
+		var label_41 = sibling(child(div_44), 2);
 		var input_33 = sibling(child(label_41), 2);
 		remove_input_defaults(input_33);
 		reset(label_41);
@@ -65118,13 +65722,13 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_34);
 		reset(label_42);
 		var label_43 = sibling(label_42, 2);
-		var div_47 = sibling(child(label_43), 2);
-		var input_35 = child(div_47);
+		var div_45 = sibling(child(label_43), 2);
+		var input_35 = child(div_45);
 		remove_input_defaults(input_35);
 		var span_27 = sibling(input_35, 2);
-		var text_35 = child(span_27, true);
+		var text_33 = child(span_27, true);
 		reset(span_27);
-		reset(div_47);
+		reset(div_45);
 		reset(label_43);
 		var label_44 = sibling(label_43, 2);
 		var input_36 = sibling(child(label_44), 2);
@@ -65138,12 +65742,12 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_38 = sibling(child(label_46), 2);
 		remove_input_defaults(input_38);
 		reset(label_46);
-		reset(div_46);
+		reset(div_44);
 		template_effect(($0, $1) => {
 			set_value(input_33, get(selectedTextAnnotation).text);
 			set_value(input_34, get(selectedTextAnnotation).fontSize);
 			set_value(input_35, get(selectedTextAnnotation).color);
-			set_text(text_35, get(selectedTextAnnotation).color);
+			set_text(text_33, get(selectedTextAnnotation).color);
 			set_value(input_36, get(selectedTextAnnotation).rotation);
 			set_value(input_37, $0);
 			set_value(input_38, $1);
@@ -65154,24 +65758,24 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
 		delegated("input", input_37, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
 		delegated("input", input_38, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
-		append($$anchor, div_46);
+		append($$anchor, div_44);
 	};
 	if_block(node, ($$render) => {
 		if (get(selectedWall)) $$render(consequent_1);
 		else if (get(selectedDoor)) $$render(consequent_2, 1);
 		else if (get(selectedWindow)) $$render(consequent_3, 2);
-		else if (get(selectedFurniture)) $$render(consequent_10, 3);
-		else if (get(selectedRoom)) $$render(consequent_12, 4);
-		else if (get(selectedStair)) $$render(consequent_13, 5);
-		else if (get(selectedColumn)) $$render(consequent_15, 6);
-		else if (get(selectedZone)) $$render(consequent_17, 7);
-		else if (get(selectedTextAnnotation)) $$render(consequent_18, 8);
+		else if (get(selectedFurniture)) $$render(consequent_9, 3);
+		else if (get(selectedRoom)) $$render(consequent_11, 4);
+		else if (get(selectedStair)) $$render(consequent_12, 5);
+		else if (get(selectedColumn)) $$render(consequent_14, 6);
+		else if (get(selectedZone)) $$render(consequent_16, 7);
+		else if (get(selectedTextAnnotation)) $$render(consequent_17, 8);
 	});
-	var node_16 = sibling(node, 2);
-	var consequent_19 = ($$anchor) => {
-		var div_48 = root_34();
-		var div_49 = sibling(child(div_48), 2);
-		var label_47 = child(div_49);
+	var node_15 = sibling(node, 2);
+	var consequent_18 = ($$anchor) => {
+		var div_46 = root_33();
+		var div_47 = sibling(child(div_46), 2);
+		var label_47 = child(div_47);
 		var input_39 = sibling(child(label_47), 2);
 		remove_input_defaults(input_39);
 		reset(label_47);
@@ -65183,21 +65787,21 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_41 = sibling(child(label_49), 2);
 		remove_input_defaults(input_41);
 		reset(label_49);
-		var div_50 = sibling(label_49, 2);
-		var button_28 = child(div_50);
-		var text_36 = child(button_28, true);
+		var div_48 = sibling(label_49, 2);
+		var button_28 = child(div_48);
+		var text_34 = child(button_28, true);
 		reset(button_28);
 		var button_29 = sibling(button_28, 2);
-		reset(div_50);
-		var button_30 = sibling(div_50, 2);
-		reset(div_49);
 		reset(div_48);
+		var button_30 = sibling(div_48, 2);
+		reset(div_47);
+		reset(div_46);
 		template_effect(() => {
 			set_value(input_39, get(floor).backgroundImage.opacity);
 			set_value(input_40, get(floor).backgroundImage.scale);
 			set_value(input_41, get(floor).backgroundImage.rotation);
 			set_class(button_28, 1, `flex-1 px-2 py-1.5 border rounded text-sm ${get(floor).backgroundImage.locked ? "bg-amber-100 border-amber-400 text-amber-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_text(text_36, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
+			set_text(text_34, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
 		});
 		delegated("input", input_39, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
 		delegated("input", input_40, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
@@ -65208,14 +65812,14 @@ function PropertiesPanel($$anchor, $$props) {
 			calibrationMode.set(true);
 		});
 		delegated("click", button_30, () => setBackgroundImage(void 0));
-		append($$anchor, div_48);
+		append($$anchor, div_46);
 	};
-	if_block(node_16, ($$render) => {
-		var _$$get20;
-		if (get(hasBgImage) && ((_$$get20 = get(floor)) === null || _$$get20 === void 0 ? void 0 : _$$get20.backgroundImage)) $$render(consequent_19);
+	if_block(node_15, ($$render) => {
+		var _$$get21;
+		if (get(hasBgImage) && ((_$$get21 = get(floor)) === null || _$$get21 === void 0 ? void 0 : _$$get21.backgroundImage)) $$render(consequent_18);
 	});
 	reset(div);
-	template_effect(() => classes = set_class(div, 1, `${is3D() ? "w-80" : "w-64"} shrink-0 bg-white border-l border-gray-200 flex flex-col overflow-y-auto p-3 absolute right-0 z-40 shadow-lg`, null, classes, { hidden: !get(hasSelection) }));
+	template_effect(() => classes = set_class(div, 1, "w-[420px] shrink-0 bg-white border-l border-gray-200 flex flex-col overflow-y-auto p-3 absolute right-0 z-40 shadow-lg", null, classes, { hidden: !get(hasSelection) }));
 	delegated("keydown", div, stopShortcutBubble);
 	event("keydown", div, stopShortcutBubble, true);
 	append($$anchor, div);
@@ -65231,11 +65835,11 @@ delegate([
 //#endregion
 //#region src/lib/components/sidebar/LayersPanel.svelte
 init_client();
-var root_3$6 = /* @__PURE__ */ from_html(`<button><span class="text-[10px]"> </span> <span class="truncate flex-1"> </span></button>`);
-var root_4$5 = /* @__PURE__ */ from_html(`<div class="pl-7 pr-2 py-1 text-gray-300 italic">Empty</div>`);
-var root_2$7 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_1$7 = /* @__PURE__ */ from_html(`<div class="border-b border-gray-50 relative"><button class="w-full flex items-center gap-1.5 px-2 py-1.5 hover:bg-gray-50 text-left"><span class="text-[10px] text-gray-400 w-3"> </span> <span> </span> <span class="font-medium text-gray-700 flex-1"> </span> <span class="text-gray-400 mr-1"> </span></button> <span role="button" tabindex="0">👁</span> <!></div>`);
-var root_5$3 = /* @__PURE__ */ from_html(`<div class="p-4 text-gray-400 text-center">No elements</div>`);
+var root_3$5 = /* @__PURE__ */ from_html(`<button><span class="text-[10px]"> </span> <span class="truncate flex-1"> </span></button>`);
+var root_4$4 = /* @__PURE__ */ from_html(`<div class="pl-7 pr-2 py-1 text-gray-300 italic">Empty</div>`);
+var root_2$6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_1$5 = /* @__PURE__ */ from_html(`<div class="border-b border-gray-50 relative"><button class="w-full flex items-center gap-1.5 px-2 py-1.5 hover:bg-gray-50 text-left"><span class="text-[10px] text-gray-400 w-3"> </span> <span> </span> <span class="font-medium text-gray-700 flex-1"> </span> <span class="text-gray-400 mr-1"> </span></button> <span role="button" tabindex="0">👁</span> <!></div>`);
+var root_5$2 = /* @__PURE__ */ from_html(`<div class="p-4 text-gray-400 text-center">No elements</div>`);
 var root$2 = /* @__PURE__ */ from_html(`<div class="w-56 bg-white border-l border-gray-200 flex flex-col overflow-hidden text-xs select-none"><div class="px-3 py-2 border-b border-gray-100 font-semibold text-gray-700 text-sm flex items-center gap-1.5">🗂 Layers</div> <div class="flex-1 overflow-y-auto"><!> <!></div></div>`);
 function LayersPanel($$anchor, $$props) {
 	push($$props, true);
@@ -65399,7 +66003,7 @@ function LayersPanel($$anchor, $$props) {
 	var div_1 = sibling(child(div), 2);
 	var node = child(div_1);
 	each(node, 17, () => get(categories), index$1, ($$anchor, cat) => {
-		var div_2 = root_1$7();
+		var div_2 = root_1$5();
 		var button = child(div_2);
 		var span = child(button);
 		var text = child(span, true);
@@ -65418,10 +66022,10 @@ function LayersPanel($$anchor, $$props) {
 		let classes;
 		var node_1 = sibling(span_4, 2);
 		var consequent_1 = ($$anchor) => {
-			var fragment = root_2$7();
+			var fragment = root_2$6();
 			var node_2 = first_child(fragment);
 			each(node_2, 17, () => get(cat).items, index$1, ($$anchor, item) => {
-				var button_1 = root_3$6();
+				var button_1 = root_3$5();
 				let classes_1;
 				var span_5 = child(button_1);
 				var text_4 = child(span_5, true);
@@ -65444,7 +66048,7 @@ function LayersPanel($$anchor, $$props) {
 			});
 			var node_3 = sibling(node_2, 2);
 			var consequent = ($$anchor) => {
-				append($$anchor, root_4$5());
+				append($$anchor, root_4$4());
 			};
 			if_block(node_3, ($$render) => {
 				if (get(cat).items.length === 0) $$render(consequent);
@@ -65478,7 +66082,7 @@ function LayersPanel($$anchor, $$props) {
 	});
 	var node_4 = sibling(node, 2);
 	var consequent_2 = ($$anchor) => {
-		append($$anchor, root_5$3());
+		append($$anchor, root_5$2());
 	};
 	if_block(node_4, ($$render) => {
 		if (get(categories).length === 0) $$render(consequent_2);
@@ -65490,367 +66094,6 @@ function LayersPanel($$anchor, $$props) {
 }
 delegate(["click", "keydown"]);
 //#endregion
-//#region src/lib/components/sidebar/CameraFovEditor.svelte
-init_client();
-init_index_client();
-var root_3$5 = /* @__PURE__ */ from_html(`<button type="button" class="text-[10px] px-1.5 py-0.5 rounded border border-gray-300 hover:bg-white">Done</button> <button type="button" class="text-[10px] px-1.5 py-0.5 rounded border border-gray-300 hover:bg-white">Cancel</button>`, 1);
-var root_5$2 = /* @__PURE__ */ from_html(`<button type="button" class="text-[10px] px-1.5 py-0.5 rounded border border-red-200 text-red-600 hover:bg-red-50">Clear</button>`);
-var root_4$4 = /* @__PURE__ */ from_html(`<button type="button" class="text-[10px] px-1.5 py-0.5 rounded border border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100"> </button> <!>`, 1);
-var root_2$6 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-gray-600">Camera FOV (image)</span> <div class="flex gap-1"><!></div></div>`);
-var root_8$1 = /* @__PURE__ */ from_html(` <!>`, 1);
-var root_11$1 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-amber-700 bg-amber-50 border border-amber-200 rounded px-1.5 py-1"> </p>`);
-var root_6$2 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-500 leading-snug"><!></p> <!>`, 1);
-var root_1$6 = /* @__PURE__ */ from_html(`<div class="border border-gray-200 rounded-lg p-2 bg-gray-50 space-y-2"><!> <canvas></canvas> <!></div>`);
-var root_12$1 = /* @__PURE__ */ from_html(`<p class="text-xs text-gray-400">No thumbnail URL from host.</p>`);
-function CameraFovEditor($$anchor, $$props) {
-	push($$props, true);
-	let coordinates = prop($$props, "coordinates", 3, ""), mapCoordinates = prop($$props, "mapCoordinates", 3, ""), readOnly = prop($$props, "readOnly", 3, false);
-	let canvasEl = /* @__PURE__ */ state(void 0);
-	let imgEl = /* @__PURE__ */ state(null);
-	let imgSize = /* @__PURE__ */ state(null);
-	let draft = /* @__PURE__ */ state(proxy([]));
-	let cursor = /* @__PURE__ */ state(null);
-	let draggingIdx = /* @__PURE__ */ state(null);
-	let editing = /* @__PURE__ */ state(false);
-	const displayW = 288;
-	let matchOk = /* @__PURE__ */ user_derived(() => fovPointCountsMatch(coordinates(), mapCoordinates()));
-	let mapN = /* @__PURE__ */ user_derived(() => countCoordinatePoints(mapCoordinates()));
-	let imgN = /* @__PURE__ */ user_derived(() => countCoordinatePoints(coordinates()));
-	function samePoints(a, b) {
-		if (a.length !== b.length) return false;
-		for (let i = 0; i < a.length; i++) if (a[i].x !== b[i].x || a[i].y !== b[i].y) return false;
-		return true;
-	}
-	user_effect(() => {
-		var _$$props$thumbnailUrl;
-		const url = (_$$props$thumbnailUrl = $$props.thumbnailUrl) === null || _$$props$thumbnailUrl === void 0 ? void 0 : _$$props$thumbnailUrl.trim();
-		if (!url) {
-			set(imgEl, null);
-			set(imgSize, null);
-			return;
-		}
-		let cancelled = false;
-		const img = new Image();
-		img.onload = () => {
-			if (cancelled) return;
-			set(imgEl, img, true);
-			set(imgSize, {
-				w: img.naturalWidth,
-				h: img.naturalHeight
-			}, true);
-		};
-		img.onerror = () => {
-			if (cancelled) return;
-			set(imgEl, null);
-			set(imgSize, null);
-		};
-		img.src = url;
-		return () => {
-			cancelled = true;
-		};
-	});
-	user_effect(() => {
-		const coords = coordinates();
-		const size = get(imgSize);
-		const el = get(canvasEl);
-		const isEditing = get(editing);
-		if (!size || !el) return;
-		untrack(() => {
-			if (!isEditing) {
-				const next = coordinatesToImagePoints(coords, size);
-				if (!samePoints(get(draft), next)) set(draft, next, true);
-			}
-			redraw();
-		});
-	});
-	function scale() {
-		if (!get(imgSize)) return 1;
-		return displayW / get(imgSize).w;
-	}
-	function canvasH() {
-		if (!get(imgSize)) return 135;
-		return Math.round(get(imgSize).h * scale());
-	}
-	function toImage(e) {
-		if (!get(canvasEl) || !get(imgSize)) return null;
-		const rect = get(canvasEl).getBoundingClientRect();
-		const s = scale();
-		return {
-			x: (e.clientX - rect.left) / s,
-			y: (e.clientY - rect.top) / s
-		};
-	}
-	function redraw() {
-		if (!get(canvasEl) || !get(imgEl) || !get(imgSize)) return;
-		const s = scale();
-		const w = displayW;
-		const h = canvasH();
-		if (get(canvasEl).width !== w || get(canvasEl).height !== h) {
-			get(canvasEl).width = w;
-			get(canvasEl).height = h;
-		}
-		const ctx = get(canvasEl).getContext("2d");
-		if (!ctx) return;
-		ctx.clearRect(0, 0, w, h);
-		ctx.drawImage(get(imgEl), 0, 0, w, h);
-		const pts = [...get(draft)];
-		if (get(editing) && get(cursor)) pts.push(get(cursor));
-		if (pts.length) {
-			ctx.save();
-			ctx.strokeStyle = "#22c55e";
-			ctx.fillStyle = "rgba(34,197,94,0.25)";
-			ctx.lineWidth = 2;
-			ctx.beginPath();
-			ctx.moveTo(pts[0].x * s, pts[0].y * s);
-			for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * s, pts[i].y * s);
-			if (!get(editing) && get(draft).length >= 3) {
-				ctx.closePath();
-				ctx.fill();
-			}
-			ctx.stroke();
-			for (const p of get(draft)) {
-				ctx.beginPath();
-				ctx.fillStyle = "#fff";
-				ctx.strokeStyle = "#22c55e";
-				ctx.arc(p.x * s, p.y * s, 4, 0, Math.PI * 2);
-				ctx.fill();
-				ctx.stroke();
-			}
-			ctx.restore();
-		}
-	}
-	function hitVertex(p) {
-		if (!get(imgSize)) return -1;
-		const tol = 8 / scale();
-		for (let i = 0; i < get(draft).length; i++) if (Math.hypot(get(draft)[i].x - p.x, get(draft)[i].y - p.y) <= tol) return i;
-		return -1;
-	}
-	function onDown(e) {
-		const p = toImage(e);
-		if (!p || !get(imgSize)) return;
-		if (!get(editing)) {
-			const vi = hitVertex(p);
-			if (vi >= 0) {
-				set(draggingIdx, vi, true);
-				return;
-			}
-			return;
-		}
-		if (get(draft).length >= 3 && Math.hypot(p.x - get(draft)[0].x, p.y - get(draft)[0].y) < 10 / scale()) {
-			commitDraft();
-			return;
-		}
-		set(draft, [...get(draft), p], true);
-		redraw();
-	}
-	function onMove(e) {
-		const p = toImage(e);
-		if (!p) return;
-		if (get(draggingIdx) != null) {
-			const next = get(draft).map((pt) => ({ ...pt }));
-			next[get(draggingIdx)] = p;
-			set(draft, next, true);
-			redraw();
-			return;
-		}
-		if (get(editing)) {
-			set(cursor, p, true);
-			redraw();
-		}
-	}
-	function onUp() {
-		if (get(draggingIdx) != null) {
-			set(draggingIdx, null);
-			commitDraft();
-		}
-	}
-	function commitDraft() {
-		if (!get(imgSize) || get(draft).length < 3) return;
-		const str = imagePointsToCoordinates(get(draft), get(imgSize));
-		if (!str) return;
-		setCameraImageCoordinates($$props.serial, str);
-		set(editing, false);
-		set(cursor, null);
-		redraw();
-	}
-	function startDraw() {
-		set(draft, [], true);
-		set(cursor, null);
-		set(editing, true);
-		redraw();
-	}
-	function clearFov() {
-		set(draft, [], true);
-		set(editing, false);
-		set(cursor, null);
-		setCameraImageCoordinates($$props.serial, null);
-		redraw();
-	}
-	function finishEdit() {
-		if (get(draft).length >= 3) commitDraft();
-		else {
-			set(editing, false);
-			set(cursor, null);
-			set(draft, coordinatesToImagePoints(coordinates(), get(imgSize)), true);
-			redraw();
-		}
-	}
-	var fragment = comment();
-	var node = first_child(fragment);
-	var consequent_8 = ($$anchor) => {
-		var div = root_1$6();
-		var node_1 = child(div);
-		var consequent_2 = ($$anchor) => {
-			var div_1 = root_2$6();
-			var div_2 = sibling(child(div_1), 2);
-			var node_2 = child(div_2);
-			var consequent = ($$anchor) => {
-				var fragment_1 = root_3$5();
-				var button = first_child(fragment_1);
-				var button_1 = sibling(button, 2);
-				delegated("click", button, finishEdit);
-				delegated("click", button_1, () => {
-					set(editing, false);
-					set(draft, coordinatesToImagePoints(coordinates(), get(imgSize)), true);
-					set(cursor, null);
-					redraw();
-				});
-				append($$anchor, fragment_1);
-			};
-			var alternate = ($$anchor) => {
-				var fragment_2 = root_4$4();
-				var button_2 = first_child(fragment_2);
-				var text = child(button_2, true);
-				reset(button_2);
-				var node_3 = sibling(button_2, 2);
-				var consequent_1 = ($$anchor) => {
-					var button_3 = root_5$2();
-					delegated("click", button_3, clearFov);
-					append($$anchor, button_3);
-				};
-				if_block(node_3, ($$render) => {
-					if (get(imgN) > 0) $$render(consequent_1);
-				});
-				template_effect(() => set_text(text, get(imgN) >= 3 ? "Redraw" : "Draw"));
-				delegated("click", button_2, startDraw);
-				append($$anchor, fragment_2);
-			};
-			if_block(node_2, ($$render) => {
-				if (get(editing)) $$render(consequent);
-				else $$render(alternate, -1);
-			});
-			reset(div_2);
-			reset(div_1);
-			append($$anchor, div_1);
-		};
-		if_block(node_1, ($$render) => {
-			if (!readOnly()) $$render(consequent_2);
-		});
-		var canvas = sibling(node_1, 2);
-		set_style(canvas, "max-width: 288px; height: auto;");
-		bind_this(canvas, ($$value) => set(canvasEl, $$value), () => get(canvasEl));
-		var node_4 = sibling(canvas, 2);
-		var consequent_7 = ($$anchor) => {
-			var fragment_3 = root_6$2();
-			var p_1 = first_child(fragment_3);
-			var node_5 = child(p_1);
-			var consequent_3 = ($$anchor) => {
-				var text_1 = text$1();
-				template_effect(() => set_text(text_1, `Click vertices · click first point to close (≥3)`));
-				append($$anchor, text_1);
-			};
-			var consequent_5 = ($$anchor) => {
-				var fragment_5 = root_8$1();
-				var text_2 = first_child(fragment_5);
-				var node_6 = sibling(text_2);
-				var consequent_4 = ($$anchor) => {
-					var text_3 = text$1();
-					template_effect(() => {
-						var _$$get;
-						return set_text(text_3, `· floor ${(_$$get = get(mapN)) !== null && _$$get !== void 0 ? _$$get : ""} pts`);
-					});
-					append($$anchor, text_3);
-				};
-				if_block(node_6, ($$render) => {
-					if (get(mapN) > 0) $$render(consequent_4);
-				});
-				template_effect(() => {
-					var _$$get2;
-					return set_text(text_2, `${(_$$get2 = get(imgN)) !== null && _$$get2 !== void 0 ? _$$get2 : ""} points on image `);
-				});
-				append($$anchor, fragment_5);
-			};
-			var alternate_1 = ($$anchor) => {
-				var text_4 = text$1();
-				template_effect(() => set_text(text_4, `Draw FOV polygon on camera thumbnail (≥3 pts)`));
-				append($$anchor, text_4);
-			};
-			if_block(node_5, ($$render) => {
-				if (get(editing)) $$render(consequent_3);
-				else if (get(imgN) >= 3) $$render(consequent_5, 1);
-				else $$render(alternate_1, -1);
-			});
-			reset(p_1);
-			var node_7 = sibling(p_1, 2);
-			var consequent_6 = ($$anchor) => {
-				var p_2 = root_11$1();
-				var text_5 = child(p_2);
-				reset(p_2);
-				template_effect(() => {
-					var _$$get3, _$$get4;
-					return set_text(text_5, `Point count mismatch: image ${(_$$get3 = get(imgN)) !== null && _$$get3 !== void 0 ? _$$get3 : ""} ≠ floor ${(_$$get4 = get(mapN)) !== null && _$$get4 !== void 0 ? _$$get4 : ""}. Heatmap transform needs the same N and order.`);
-				});
-				append($$anchor, p_2);
-			};
-			if_block(node_7, ($$render) => {
-				if (!get(matchOk)) $$render(consequent_6);
-			});
-			append($$anchor, fragment_3);
-		};
-		if_block(node_4, ($$render) => {
-			if (!readOnly()) $$render(consequent_7);
-		});
-		reset(div);
-		template_effect(() => set_class(canvas, 1, `w-full rounded border border-gray-200 bg-black/5 touch-none ${readOnly() ? "cursor-default" : "cursor-crosshair"}`));
-		delegated("mousedown", canvas, function(...$$args) {
-			var _ref;
-			(_ref = readOnly() ? void 0 : onDown) === null || _ref === void 0 || _ref.apply(this, $$args);
-		});
-		delegated("mousemove", canvas, function(...$$args) {
-			var _ref2;
-			(_ref2 = readOnly() ? void 0 : onMove) === null || _ref2 === void 0 || _ref2.apply(this, $$args);
-		});
-		delegated("mouseup", canvas, function(...$$args) {
-			var _ref3;
-			(_ref3 = readOnly() ? void 0 : onUp) === null || _ref3 === void 0 || _ref3.apply(this, $$args);
-		});
-		event("mouseleave", canvas, function(...$$args) {
-			var _ref4;
-			(_ref4 = readOnly() ? void 0 : onUp) === null || _ref4 === void 0 || _ref4.apply(this, $$args);
-		});
-		append($$anchor, div);
-	};
-	var d = /* @__PURE__ */ user_derived(() => {
-		var _$$props$thumbnailUrl2;
-		return (_$$props$thumbnailUrl2 = $$props.thumbnailUrl) === null || _$$props$thumbnailUrl2 === void 0 ? void 0 : _$$props$thumbnailUrl2.trim();
-	});
-	var alternate_2 = ($$anchor) => {
-		append($$anchor, root_12$1());
-	};
-	if_block(node, ($$render) => {
-		if (get(d)) $$render(consequent_8);
-		else $$render(alternate_2, -1);
-	});
-	append($$anchor, fragment);
-	pop();
-}
-delegate([
-	"click",
-	"mousedown",
-	"mousemove",
-	"mouseup"
-]);
-//#endregion
 //#region src/lib/components/editor/ContextMenu.svelte
 init_client();
 init_index_client();
@@ -65860,7 +66103,7 @@ var root_4$3 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu"
 var root_5$1 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">✏️</span> Rename Room</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🎨</span> Change Floor Texture</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item ctx-danger svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🗑️</span> Delete Room</button>`, 1);
 var root_7$2 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">📋</span> Paste</button> <div class="ctx-sep svelte-wxo1tu"></div>`, 1);
 var root_6$1 = /* @__PURE__ */ from_html(`<!> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⬜</span> Select All</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">📦</span> Group Selected (Ctrl+G)</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">📤</span> Ungroup (Ctrl+Shift+G)</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🧱</span> Add Wall</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🔍</span> Zoom to Fit</button>`, 1);
-var root_1$5 = /* @__PURE__ */ from_html(`<div class="fixed z-[9999] bg-white border border-gray-200 rounded-lg shadow-xl py-1 min-w-[180px] text-sm select-none" role="menu"><!></div>`);
+var root_1$4 = /* @__PURE__ */ from_html(`<div class="fixed z-[9999] bg-white border border-gray-200 rounded-lg shadow-xl py-1 min-w-[180px] text-sm select-none" role="menu"><!></div>`);
 function ContextMenu($$anchor, $$props) {
 	push($$props, true);
 	let menuEl;
@@ -65899,7 +66142,7 @@ function ContextMenu($$anchor, $$props) {
 	var fragment = comment();
 	var node = first_child(fragment);
 	var consequent_6 = ($$anchor) => {
-		var div = root_1$5();
+		var div = root_1$4();
 		var node_1 = child(div);
 		var consequent = ($$anchor) => {
 			var fragment_1 = root_2$5();
@@ -66284,34 +66527,30 @@ function findZoneAt(wp, zones, zoom) {
 //#region src/lib/components/editor/FloorPlanCanvas.svelte
 init_client();
 init_index_client();
-var root_2$4 = /* @__PURE__ */ from_html(`<input type="text" class="absolute bg-white border-2 border-blue-500 rounded px-2 py-1 text-sm text-center shadow-lg outline-none"/>`);
 var root_3$3 = /* @__PURE__ */ from_html(`<input type="text" class="absolute bg-white border-2 border-blue-500 rounded px-2 py-1 text-sm text-center shadow-lg outline-none"/>`);
-var root_4$2 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 flex items-center justify-center pointer-events-none"><div class="text-center opacity-60"><div class="text-5xl mb-3">🏠</div> <div class="text-sm font-medium text-gray-500">Start building your floor plan</div> <div class="text-xs text-gray-400 mt-1">Draw walls with <span class="font-mono bg-gray-100 px-1 rounded">W</span> or drag items from the sidebar</div></div></div>`);
-var root_5 = /* @__PURE__ */ from_html(`<canvas width="180" height="120" class="absolute bottom-10 right-2 rounded-lg shadow-lg border border-gray-300 cursor-crosshair bg-white" style="z-index: 15;"></canvas>`);
-var root_7$1 = /* @__PURE__ */ from_html(`<span> </span> <span> </span> <span class="text-gray-300">|</span>`, 1);
-var root_9 = /* @__PURE__ */ from_html(`<span> </span>`);
+var root_4$2 = /* @__PURE__ */ from_html(`<input type="text" class="absolute bg-white border-2 border-blue-500 rounded px-2 py-1 text-sm text-center shadow-lg outline-none"/>`);
+var root_5 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 flex items-center justify-center pointer-events-none"><div class="text-center opacity-60"><div class="text-5xl mb-3">🏠</div> <div class="text-sm font-medium text-gray-500">Start building your floor plan</div> <div class="text-xs text-gray-400 mt-1">Draw walls with <span class="font-mono bg-gray-100 px-1 rounded">W</span> or drag items from the sidebar</div></div></div>`);
+var root_6 = /* @__PURE__ */ from_html(`<canvas width="180" height="120" class="absolute bottom-10 right-2 rounded-lg shadow-lg border border-gray-300 cursor-crosshair bg-white" style="z-index: 15;"></canvas>`);
+var root_8 = /* @__PURE__ */ from_html(`<span> </span> <span> </span> <span class="text-gray-300">|</span>`, 1);
 var root_10 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_11 = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_8 = /* @__PURE__ */ from_html(`<span> </span> <!> <!> <!> <span class="text-gray-300">|</span>`, 1);
-var root_12 = /* @__PURE__ */ from_html(`<span class="text-blue-600 font-medium"> </span> <span class="text-gray-300">|</span>`, 1);
-var root_6 = /* @__PURE__ */ from_html(`<div class="absolute bottom-2 right-2 bg-white/80 rounded px-2 py-1 text-xs text-gray-500 flex gap-3"><!> <!> <!> <span> </span> <button class="hover:text-gray-700" title="Zoom to Fit (F)">⊞ Fit</button> <button class="hover:text-gray-700" title="Toggle Grid (G)"> </button> <button class="hover:text-gray-700" title="Toggle Snap to Grid (S)"> </button> <button class="hover:text-gray-700" title="Toggle Furniture"> </button> <button class="hover:text-gray-700" title="Layer Visibility">🗂 Layers</button> <button class="hover:text-gray-700" title="Toggle Rulers"> </button> <button class="hover:text-gray-700" title="Toggle Mini-map"> </button></div>`);
-var root_14 = /* @__PURE__ */ from_html(`<label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span> </span></label>`);
-var root_13 = /* @__PURE__ */ from_html(`<div class="absolute bottom-12 right-2 z-20 bg-white rounded-lg shadow-lg border border-gray-200 p-3 text-xs min-w-[160px]"><div class="font-semibold text-gray-700 mb-2">Layers</div> <!> <hr class="my-1 border-gray-100"/> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Room Labels</span></label> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Dimensions</span></label></div>`);
-var root_17 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Flip swing" aria-label="Flip swing"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"></path></svg></button>`);
-var root_18 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Split wall at midpoint" aria-label="Split wall at midpoint"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4 12h4M16 12h4"></path></svg></button>`);
-var root_16 = /* @__PURE__ */ from_html(`<div class="absolute z-40 flex items-center gap-0.5 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Duplicate" aria-label="Duplicate"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></button> <!> <!> <div class="w-px h-5 bg-gray-200 mx-0.5"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-red-50 text-gray-400 hover:text-red-600" title="Delete" aria-label="Delete"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"></path></svg></button></div>`);
-var root_19 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-blue-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to add wall segment · Double-click to finish · C to close loop ·
+var root_12 = /* @__PURE__ */ from_html(`<span> </span>`);
+var root_9 = /* @__PURE__ */ from_html(`<span> </span> <!> <!> <!> <span class="text-gray-300">|</span>`, 1);
+var root_13 = /* @__PURE__ */ from_html(`<span class="text-blue-600 font-medium"> </span> <span class="text-gray-300">|</span>`, 1);
+var root_7$1 = /* @__PURE__ */ from_html(`<div class="absolute bottom-2 right-2 bg-white/80 rounded px-2 py-1 text-xs text-gray-500 flex gap-3"><!> <!> <!> <span> </span> <button class="hover:text-gray-700" title="Zoom to Fit (F)">⊞ Fit</button> <button class="hover:text-gray-700" title="Toggle Grid (G)"> </button> <button class="hover:text-gray-700" title="Toggle Snap to Grid (S)"> </button> <button class="hover:text-gray-700" title="Toggle Furniture"> </button> <button class="hover:text-gray-700" title="Layer Visibility">🗂 Layers</button> <button class="hover:text-gray-700" title="Toggle Rulers"> </button> <button class="hover:text-gray-700" title="Toggle Mini-map"> </button></div>`);
+var root_15 = /* @__PURE__ */ from_html(`<label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span> </span></label>`);
+var root_14 = /* @__PURE__ */ from_html(`<div class="absolute bottom-12 right-2 z-20 bg-white rounded-lg shadow-lg border border-gray-200 p-3 text-xs min-w-[160px]"><div class="font-semibold text-gray-700 mb-2">Layers</div> <!> <hr class="my-1 border-gray-100"/> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Room Labels</span></label> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Dimensions</span></label></div>`);
+var root_18 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Flip swing" aria-label="Flip swing"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"></path></svg></button>`);
+var root_19 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Split wall at midpoint" aria-label="Split wall at midpoint"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4 12h4M16 12h4"></path></svg></button>`);
+var root_17 = /* @__PURE__ */ from_html(`<div class="absolute z-40 flex items-center gap-0.5 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Duplicate" aria-label="Duplicate"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></button> <!> <!> <div class="w-px h-5 bg-gray-200 mx-0.5"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-red-50 text-gray-400 hover:text-red-600" title="Delete" aria-label="Delete"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"></path></svg></button></div>`);
+var root_20 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-blue-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to add wall segment · Double-click to finish · C to close loop ·
         Esc to cancel</div>`);
-var root_20 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-purple-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
-var root_21 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-red-600 text-white px-3 py-1 rounded-full text-xs shadow">Right-click two points to measure · M to exit · Esc to cancel</div>`);
-var root_22 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-emerald-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to place text label · Esc to cancel</div>`);
-var root_23 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
-var root_1$4 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <div class="absolute bottom-3 left-3 z-20 flex items-center gap-1 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom Out (−)" aria-label="Zoom out">−</button> <button class="min-w-[3.5rem] h-7 flex items-center justify-center rounded hover:bg-gray-100 text-xs font-medium text-gray-600 hover:text-gray-800 tabular-nums" title="Reset to 100%" aria-label="Zoom to 100%"> </button> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom In (+)" aria-label="Zoom in">+</button> <div class="w-px h-5 bg-gray-200"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700 text-sm" title="Zoom to Fit (F)" aria-label="Zoom to fit">⊞</button></div> <!>`, 1);
-var root_25 = /* @__PURE__ */ from_html(`<span class="font-mono text-gray-400 font-normal text-xs ml-1"> </span>`);
-var root_26 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-400 leading-snug">Draw FOV on the image (<code class="font-mono">coordinates</code>).
-          Tool <strong>Camera FOV</strong> on the floor → <code class="font-mono">mapCoordinates</code>.</p>`);
-var root_24 = /* @__PURE__ */ from_html(`<aside class="w-80 shrink-0 h-full border-l border-gray-200 bg-white overflow-y-auto p-3 flex flex-col gap-2 shadow-sm z-10" aria-label="Camera thumbnail panel"><div class="text-sm font-semibold text-gray-800">Camera thumbnail <!></div> <!> <!></aside>`);
-var root$1 = /* @__PURE__ */ from_html(`<div class="w-full h-full relative overflow-hidden flex" role="application"><div class="flex-1 min-w-0 h-full relative overflow-hidden"><div class="w-full h-full"><canvas aria-label="Floor plan editor canvas"></canvas></div> <!></div> <!></div>`);
+var root_21 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-purple-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
+var root_22 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-red-600 text-white px-3 py-1 rounded-full text-xs shadow">Right-click two points to measure · M to exit · Esc to cancel</div>`);
+var root_23 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-emerald-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to place text label · Esc to cancel</div>`);
+var root_24 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
+var root_2$4 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <div class="absolute bottom-3 left-3 z-20 flex items-center gap-1 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom Out (−)" aria-label="Zoom out">−</button> <button class="min-w-[3.5rem] h-7 flex items-center justify-center rounded hover:bg-gray-100 text-xs font-medium text-gray-600 hover:text-gray-800 tabular-nums" title="Reset to 100%" aria-label="Zoom to 100%"> </button> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom In (+)" aria-label="Zoom in">+</button> <div class="w-px h-5 bg-gray-200"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700 text-sm" title="Zoom to Fit (F)" aria-label="Zoom to fit">⊞</button></div> <!>`, 1);
+var root$1 = /* @__PURE__ */ from_html(`<div class="w-full h-full relative overflow-hidden flex" role="application"><div class="flex-1 min-w-0 h-full relative overflow-hidden"><div class="w-full h-full relative"><canvas aria-label="Floor plan editor canvas"></canvas> <!></div> <!></div></div>`);
 function FloorPlanCanvas($$anchor, $$props) {
 	push($$props, true);
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
@@ -66403,16 +66642,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 	/** Camera surveillance FOV polygon draft (floor → mapCoordinates) — not floors[].zones */
 	let fovPolyDraft = /* @__PURE__ */ state(proxy([]));
 	let fovCursor = /* @__PURE__ */ state(null);
-	let fovSideCam = /* @__PURE__ */ user_derived(resolveFovCamera);
-	/** Host `cameraThumbnail` → side panel beside floor (never floor background). */
-	let showFovSidePanel = /* @__PURE__ */ user_derived(() => {
-		var _cameraThumbnail;
-		return !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim());
-	});
-	let fovPanelSerial = /* @__PURE__ */ user_derived(() => {
-		var _$$get, _selectedCameraSerial;
-		return ((_$$get = get(fovSideCam)) === null || _$$get === void 0 || (_$$get = _$$get.serial) === null || _$$get === void 0 ? void 0 : _$$get.trim()) || ((_selectedCameraSerial = selectedCameraSerial()) === null || _selectedCameraSerial === void 0 ? void 0 : _selectedCameraSerial.trim()) || "";
-	});
+	/** Selected committed floor FOV (by camera serial) — shows float toolbar */
+	let selectedFovSerial = /* @__PURE__ */ state(null);
 	let editingTextAnnotationId = /* @__PURE__ */ state(null);
 	let editingTextAnnotationPos = /* @__PURE__ */ state(proxy({
 		x: 0,
@@ -66524,8 +66755,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let calPoints = /* @__PURE__ */ state(proxy([]));
 	let bgImage = /* @__PURE__ */ state(null);
 	user_effect(() => {
-		var _$$get2;
-		const url = (_$$get2 = get(currentFloor)) === null || _$$get2 === void 0 || (_$$get2 = _$$get2.backgroundImage) === null || _$$get2 === void 0 ? void 0 : _$$get2.dataUrl;
+		var _$$get;
+		const url = (_$$get = get(currentFloor)) === null || _$$get === void 0 || (_$$get = _$$get.backgroundImage) === null || _$$get === void 0 ? void 0 : _$$get.dataUrl;
 		if (!url) {
 			set(bgImage, null);
 			return;
@@ -66716,9 +66947,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return (_ref = (_$$get$furniture$find = get(currentFloor).furniture.find((f) => f.catalogId === "camera" && !!f.serial && !used.has(f.serial))) !== null && _$$get$furniture$find !== void 0 ? _$$get$furniture$find : get(currentFloor).furniture.find((f) => f.catalogId === "camera" && !!f.serial)) !== null && _ref !== void 0 ? _ref : null;
 	}
 	function commitAreaShape(shape, points) {
-		var _$$get$zones$length, _$$get3;
+		var _$$get$zones$length, _$$get2;
 		const cam = resolveAreaCameraTarget();
-		const idx = (_$$get$zones$length = (_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 || (_$$get3 = _$$get3.zones) === null || _$$get3 === void 0 ? void 0 : _$$get3.length) !== null && _$$get$zones$length !== void 0 ? _$$get$zones$length : 0;
+		const idx = (_$$get$zones$length = (_$$get2 = get(currentFloor)) === null || _$$get2 === void 0 || (_$$get2 = _$$get2.zones) === null || _$$get2 === void 0 ? void 0 : _$$get2.length) !== null && _$$get$zones$length !== void 0 ? _$$get$zones$length : 0;
 		if (cam === null || cam === void 0 ? void 0 : cam.serial) {
 			const style = resolveCameraAreaStyle(cam, idx);
 			return upsertCameraZone(shape, points, {
@@ -66734,11 +66965,11 @@ function FloorPlanCanvas($$anchor, $$props) {
 	}
 	/** Camera for FOV tool: selected camera furniture, else host selectedCameraSerial. */
 	function resolveFovCamera() {
-		var _selectedCameraSerial2;
+		var _selectedCameraSerial;
 		if (!get(currentFloor)) return null;
 		const sel = get(currentFloor).furniture.find((f) => f.id === get(currentSelectedId) && f.catalogId === "camera" && f.serial);
 		if (sel) return sel;
-		const hostSerial = (_selectedCameraSerial2 = selectedCameraSerial()) === null || _selectedCameraSerial2 === void 0 ? void 0 : _selectedCameraSerial2.trim();
+		const hostSerial = (_selectedCameraSerial = selectedCameraSerial()) === null || _selectedCameraSerial === void 0 ? void 0 : _selectedCameraSerial.trim();
 		if (hostSerial) {
 			var _$$get$furniture$find2;
 			return (_$$get$furniture$find2 = get(currentFloor).furniture.find((f) => f.catalogId === "camera" && f.serial === hostSerial)) !== null && _$$get$furniture$find2 !== void 0 ? _$$get$furniture$find2 : null;
@@ -66751,23 +66982,144 @@ function FloorPlanCanvas($$anchor, $$props) {
 		setCameraMapCoordinatesFromWorld(cam.serial, points);
 		set(fovPolyDraft, [], true);
 		set(fovCursor, null);
+		set(selectedFovSerial, cam.serial, true);
 		selectedTool.set("select");
 		selectedElementId.set(cam.id);
 	}
+	function findFovCameraAt(wp) {
+		if (!get(currentFloor)) return null;
+		const bounds = getInteriorFloorBounds(get(currentFloor));
+		if (!bounds) return null;
+		const cams = [...get(currentFloor).furniture].filter((f) => f.catalogId === "camera" && f.serial).reverse();
+		for (const fi of cams) {
+			var _fi$props;
+			const pts = mapCoordinatesToWorldPoints((_fi$props = fi.props) === null || _fi$props === void 0 ? void 0 : _fi$props.mapCoordinates, bounds);
+			if (pts.length >= 3 && pointInPolygon(wp, pts)) return fi;
+		}
+		return null;
+	}
+	function clearSelectedFovMap() {
+		var _$$get3;
+		const serial = (_$$get3 = get(selectedFovSerial)) === null || _$$get3 === void 0 ? void 0 : _$$get3.trim();
+		if (!serial) return;
+		setCameraMapCoordinatesFromWorld(serial, null);
+		set(selectedFovSerial, null);
+	}
+	function floorPolyToolbar() {
+		var _$$get4;
+		if ($$props.viewOnly) return null;
+		if (get(currentTool) === "zone" && get(currentZoneShape) === "polygon" && get(zonePolyDraft).length) {
+			const a = polygonToolbarAnchor(get(zonePolyDraft));
+			if (!a) return null;
+			const s = worldToScreen(a.x, a.y);
+			return {
+				mode: "zone-draft",
+				x: s.x,
+				y: s.y,
+				canConfirm: get(zonePolyDraft).length >= 3,
+				showConfirm: true
+			};
+		}
+		if (get(currentTool) === "cameraFov" && get(fovPolyDraft).length) {
+			const a = polygonToolbarAnchor(get(fovPolyDraft));
+			if (!a) return null;
+			const s = worldToScreen(a.x, a.y);
+			return {
+				mode: "fov-draft",
+				x: s.x,
+				y: s.y,
+				canConfirm: get(fovPolyDraft).length >= 3,
+				showConfirm: true
+			};
+		}
+		if (get(selectedZoneId) && ((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.zones)) {
+			var _z$points;
+			const z = get(currentFloor).zones.find((zz) => zz.id === get(selectedZoneId));
+			if (z === null || z === void 0 || (_z$points = z.points) === null || _z$points === void 0 ? void 0 : _z$points.length) {
+				const a = polygonToolbarAnchor(z.points);
+				if (!a) return null;
+				const s = worldToScreen(a.x, a.y);
+				return {
+					mode: "zone",
+					x: s.x,
+					y: s.y,
+					canConfirm: false,
+					showConfirm: false
+				};
+			}
+		}
+		if (get(selectedFovSerial) && get(currentFloor)) {
+			const bounds = getInteriorFloorBounds(get(currentFloor));
+			const cam = get(currentFloor).furniture.find((f) => f.catalogId === "camera" && f.serial === get(selectedFovSerial));
+			if (cam && bounds) {
+				var _cam$props;
+				const pts = mapCoordinatesToWorldPoints((_cam$props = cam.props) === null || _cam$props === void 0 ? void 0 : _cam$props.mapCoordinates, bounds);
+				if (pts.length >= 3) {
+					const a = polygonToolbarAnchor(pts);
+					if (!a) return null;
+					const s = worldToScreen(a.x, a.y);
+					return {
+						mode: "fov",
+						x: s.x,
+						y: s.y,
+						canConfirm: false,
+						showConfirm: false
+					};
+				}
+			}
+		}
+		return null;
+	}
+	let polyTb = /* @__PURE__ */ user_derived(floorPolyToolbar);
+	function onPolyTbConfirm() {
+		const tb = floorPolyToolbar();
+		if (!(tb === null || tb === void 0 ? void 0 : tb.canConfirm)) return;
+		if (tb.mode === "zone-draft" && get(zonePolyDraft).length >= 3) {
+			const id = commitAreaShape("polygon", get(zonePolyDraft));
+			set(zonePolyDraft, [], true);
+			set(zoneCursor, null);
+			set(selectedZoneId, id, true);
+			selectedElementId.set(id);
+			selectedTool.set("select");
+			return;
+		}
+		if (tb.mode === "fov-draft" && get(fovPolyDraft).length >= 3) commitFovFloorPolygon(get(fovPolyDraft));
+	}
+	function onPolyTbDelete() {
+		const tb = floorPolyToolbar();
+		if (!tb) return;
+		if (tb.mode === "zone-draft") {
+			set(zonePolyDraft, [], true);
+			set(zoneCursor, null);
+			return;
+		}
+		if (tb.mode === "fov-draft") {
+			set(fovPolyDraft, [], true);
+			set(fovCursor, null);
+			return;
+		}
+		if (tb.mode === "zone" && get(selectedZoneId)) {
+			removeZone(get(selectedZoneId));
+			set(selectedZoneId, null);
+			selectedElementId.set(null);
+			return;
+		}
+		if (tb.mode === "fov") clearSelectedFovMap();
+	}
 	function drawCameraFovOverlays() {
 		if (!ctx || !get(currentFloor)) return;
 		const bounds = getInteriorFloorBounds(get(currentFloor));
 		if (!bounds) return;
 		const active = resolveFovCamera();
 		for (const fi of get(currentFloor).furniture) {
-			var _fi$props, _fi$props2;
+			var _fi$props2, _fi$props3;
 			if (fi.catalogId !== "camera" || !fi.serial) continue;
-			const mapStr = (_fi$props = fi.props) === null || _fi$props === void 0 ? void 0 : _fi$props.mapCoordinates;
+			const mapStr = (_fi$props2 = fi.props) === null || _fi$props2 === void 0 ? void 0 : _fi$props2.mapCoordinates;
 			if (!mapStr) continue;
 			const pts = mapCoordinatesToWorldPoints(mapStr, bounds);
 			if (pts.length < 2) continue;
 			const isActive = (active === null || active === void 0 ? void 0 : active.id) === fi.id;
-			const color = ((_fi$props2 = fi.props) === null || _fi$props2 === void 0 ? void 0 : _fi$props2.zoneColor) || fi.color || "#22c55e";
+			const color = ((_fi$props3 = fi.props) === null || _fi$props3 === void 0 ? void 0 : _fi$props3.zoneColor) || fi.color || "#22c55e";
 			ctx.save();
 			ctx.strokeStyle = color;
 			ctx.fillStyle = color;
@@ -66786,6 +67138,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			ctx.globalAlpha = 1;
 			ctx.stroke();
 			ctx.setLineDash([]);
+			for (let i = 0; i < pts.length; i++) {
+				const s = worldToScreen(pts[i].x, pts[i].y);
+				drawVertexIndexBadge(ctx, s.x, s.y, i, color, isActive ? 9 : 7);
+			}
 			ctx.restore();
 		}
 		if (get(currentTool) === "cameraFov" && (get(fovPolyDraft).length || get(fovCursor))) {
@@ -66809,17 +67165,21 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 				ctx.stroke();
 			}
-			ctx.globalAlpha = 1;
-			ctx.setLineDash([]);
-			for (const p of get(fovPolyDraft)) {
-				const s = worldToScreen(p.x, p.y);
+			if (get(fovCursor) && get(fovPolyDraft).length >= 3) {
+				const a = worldToScreen(get(fovCursor).x, get(fovCursor).y);
+				const b = worldToScreen(get(fovPolyDraft)[0].x, get(fovPolyDraft)[0].y);
+				ctx.globalAlpha = .35;
 				ctx.beginPath();
-				ctx.fillStyle = "#fff";
-				ctx.strokeStyle = color;
-				ctx.arc(s.x, s.y, 4, 0, Math.PI * 2);
-				ctx.fill();
+				ctx.moveTo(a.x, a.y);
+				ctx.lineTo(b.x, b.y);
 				ctx.stroke();
 			}
+			ctx.globalAlpha = 1;
+			ctx.setLineDash([]);
+			for (let i = 0; i < get(fovPolyDraft).length; i++) {
+				const s = worldToScreen(get(fovPolyDraft)[i].x, get(fovPolyDraft)[i].y);
+				drawVertexIndexBadge(ctx, s.x, s.y, i, color, 9);
+			}
 			ctx.restore();
 		}
 	}
@@ -67236,9 +67596,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function drawMeasurement() {
-		var _$$get4;
+		var _$$get5;
 		if (!get(measureStart)) return;
-		const end = (_$$get4 = get(measureEnd)) !== null && _$$get4 !== void 0 ? _$$get4 : get(mousePos);
+		const end = (_$$get5 = get(measureEnd)) !== null && _$$get5 !== void 0 ? _$$get5 : get(mousePos);
 		const s = worldToScreen(get(measureStart).x, get(measureStart).y);
 		const e = worldToScreen(end.x, end.y);
 		ctx.strokeStyle = "#ef4444";
@@ -67406,8 +67766,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		drawColumn(getCS(), col, selected);
 	}
 	function drawFloorPlateBackground() {
-		var _$$get5;
-		if (!((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 || (_$$get5 = _$$get5.walls) === null || _$$get5 === void 0 ? void 0 : _$$get5.length)) return;
+		var _$$get6;
+		if (!((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 || (_$$get6 = _$$get6.walls) === null || _$$get6 === void 0 ? void 0 : _$$get6.length)) return;
 		const bounds = getFloorBounds(get(currentFloor), { includeWallThickness: true });
 		if (!bounds) return;
 		const topLeft = worldToScreen(bounds.minX, bounds.minY);
@@ -67416,8 +67776,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		ctx.fillRect(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
 	}
 	function drawBackgroundImage() {
-		var _$$get6;
-		if (!get(bgImage) || !((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.backgroundImage)) return;
+		var _$$get7;
+		if (!get(bgImage) || !((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.backgroundImage)) return;
 		const bg = get(currentFloor).backgroundImage;
 		ctx.save();
 		ctx.globalAlpha = bg.opacity;
@@ -68131,8 +68491,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 		drawFloorHeatmapLayer();
 		if (get(layerVis).zones && (floor === null || floor === void 0 || (_floor$zones = floor.zones) === null || _floor$zones === void 0 ? void 0 : _floor$zones.length)) {
-			var _$$get7;
-			const zoneSel = (_$$get7 = get(selectedZoneId)) !== null && _$$get7 !== void 0 ? _$$get7 : floor.zones.some((z) => z.id === get(currentSelectedId)) ? get(currentSelectedId) : null;
+			var _$$get8;
+			const zoneSel = (_$$get8 = get(selectedZoneId)) !== null && _$$get8 !== void 0 ? _$$get8 : floor.zones.some((z) => z.id === get(currentSelectedId)) ? get(currentSelectedId) : null;
 			drawZones(getCS(), floor, zoneSel);
 		}
 		if (get(showFurniture)) for (const fi of floor.furniture) drawFurniture(fi, isSelected(fi.id));
@@ -68481,7 +68841,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return findRoomAt(p, get(detectedRooms), get(currentFloor).walls);
 	}
 	function onMouseDown(e) {
-		var _$$get8, _$$get9;
+		var _$$get10;
 		if ($$props.viewOnly) return;
 		markDirty();
 		if (e.button === 1 || e.button === 0 && (get(spaceDown) || $panMode() || e.shiftKey && get(currentTool) === "select")) {
@@ -68605,34 +68965,50 @@ function FloorPlanCanvas($$anchor, $$props) {
 			set(fovPolyDraft, [...get(fovPolyDraft), snapped], true);
 			return;
 		}
-		if (tool === "select" && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 || (_$$get8 = _$$get8.zones) === null || _$$get8 === void 0 ? void 0 : _$$get8.length) && get(layerVis).zones) {
-			if (!(get(showFurniture) && (!!findFurnitureAt$1(wp) || !!findHandleAt$1(wp)) || get(layerVis).columns && !!findColumnAt$1(wp) || get(showStairs) && !!findStairAt$1(wp))) {
-				const zHit = findZoneAt(wp, get(currentFloor).zones, get(zoom));
-				if (zHit) {
-					set(selectedZoneId, zHit.id, true);
-					selectedElementId.set(zHit.id);
+		if (tool === "select") {
+			const objectAboveZone = get(showFurniture) && (!!findFurnitureAt$1(wp) || !!findHandleAt$1(wp)) || get(layerVis).columns && !!findColumnAt$1(wp) || get(showStairs) && !!findStairAt$1(wp);
+			if (!objectAboveZone) {
+				var _$$get9;
+				if (((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 || (_$$get9 = _$$get9.zones) === null || _$$get9 === void 0 ? void 0 : _$$get9.length) && get(layerVis).zones) {
+					const zHit = findZoneAt(wp, get(currentFloor).zones, get(zoom));
+					if (zHit) {
+						set(selectedZoneId, zHit.id, true);
+						set(selectedFovSerial, null);
+						selectedElementId.set(zHit.id);
+						set(selectedTextAnnotationId, null);
+						set(selectedAnnotationId, null);
+						set(selectedMeasurementId, null);
+						const vIdx = findZoneVertexAt(wp, zHit, get(zoom));
+						beginUndoGroup();
+						if (vIdx >= 0) {
+							set(draggingZoneId, zHit.id, true);
+							set(draggingZoneVertex, vIdx, true);
+						} else {
+							set(draggingZoneId, zHit.id, true);
+							set(draggingZoneVertex, null);
+							set(zoneDragLast, {
+								x: wp.x,
+								y: wp.y
+							}, true);
+						}
+						return;
+					}
+				}
+				const fovHit = findFovCameraAt(wp);
+				if (fovHit === null || fovHit === void 0 ? void 0 : fovHit.serial) {
+					set(selectedFovSerial, fovHit.serial, true);
+					set(selectedZoneId, null);
+					selectedElementId.set(fovHit.id);
 					set(selectedTextAnnotationId, null);
 					set(selectedAnnotationId, null);
 					set(selectedMeasurementId, null);
-					const vIdx = findZoneVertexAt(wp, zHit, get(zoom));
-					beginUndoGroup();
-					if (vIdx >= 0) {
-						set(draggingZoneId, zHit.id, true);
-						set(draggingZoneVertex, vIdx, true);
-					} else {
-						set(draggingZoneId, zHit.id, true);
-						set(draggingZoneVertex, null);
-						set(zoneDragLast, {
-							x: wp.x,
-							y: wp.y
-						}, true);
-					}
 					return;
 				}
 			}
 			set(selectedZoneId, null);
+			if (!objectAboveZone) set(selectedFovSerial, null);
 		}
-		if (tool === "select" && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.guides)) {
+		if (tool === "select" && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.guides)) {
 			const GUIDE_HIT = 6 / get(zoom);
 			for (const g of get(currentFloor).guides) {
 				if (g.orientation === "horizontal" && Math.abs(wp.y - g.position) < GUIDE_HIT) {
@@ -68701,9 +69077,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 					const dist = Math.hypot(newPts[1].x - newPts[0].x, newPts[1].y - newPts[0].y);
 					const realDist = prompt("Enter the real-world distance between these two points (in cm):");
 					if (realDist && Number(realDist) > 0) {
-						var _$$get10;
+						var _$$get11;
 						const pixelsPerCm = dist / Number(realDist);
-						if ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
+						if ((_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
 					}
 					calibrationMode.set(false);
 					return [];
@@ -68930,7 +69306,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			}
 			const fi = findFurnitureAt$1(wp);
 			if (fi) {
+				var _fi$props4;
 				selectElement(fi.id, e.shiftKey, e.ctrlKey || e.metaKey);
+				if (fi.catalogId === "camera" && fi.serial && ((_fi$props4 = fi.props) === null || _fi$props4 === void 0 ? void 0 : _fi$props4.mapCoordinates)) {
+					set(selectedFovSerial, fi.serial, true);
+					set(selectedZoneId, null);
+				} else set(selectedFovSerial, null);
 				if (!e.shiftKey && !fi.locked) {
 					set(draggingFurnitureId, fi.id, true);
 					commitFurnitureMove();
@@ -68987,6 +69368,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 					if (!e.shiftKey) {
 						selectedElementId.set(null);
 						selectedElementIds.set(/* @__PURE__ */ new Set());
+						set(selectedFovSerial, null);
+						set(selectedZoneId, null);
 					}
 					selectedRoomId.set(null);
 				}
@@ -69086,7 +69469,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function onMouseMove(e) {
-		var _$$get11, _$$get12, _$$get13, _$$get14, _$$get15;
+		var _$$get12, _$$get13, _$$get14, _$$get15, _$$get16;
 		if ($$props.viewOnly) return;
 		markDirty();
 		const rect = canvas.getBoundingClientRect();
@@ -69106,7 +69489,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			x: snap(get(mousePos).x),
 			y: snap(get(mousePos).y)
 		}, true);
-		if (get(draggingZoneId) && ((_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.zones)) {
+		if (get(draggingZoneId) && ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.zones)) {
 			const z = get(currentFloor).zones.find((z) => z.id === get(draggingZoneId));
 			if (z) {
 				const snapped = {
@@ -69144,7 +69527,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			} : r));
 			return;
 		}
-		if (get(draggingGuideId) && ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.guides)) {
+		if (get(draggingGuideId) && ((_$$get13 = get(currentFloor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.guides)) {
 			const g = get(currentFloor).guides.find((g) => g.id === get(draggingGuideId));
 			if (g) {
 				const newPos = g.orientation === "horizontal" ? get(mousePos).y : get(mousePos).x;
@@ -69300,7 +69683,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 			}
 		}
-		if (get(draggingTextAnnotationId) && ((_$$get13 = get(currentFloor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.textAnnotations)) {
+		if (get(draggingTextAnnotationId) && ((_$$get14 = get(currentFloor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.textAnnotations)) {
 			const basePos = {
 				x: get(mousePos).x - textAnnotationDragOffset.x,
 				y: get(mousePos).y - textAnnotationDragOffset.y
@@ -69317,7 +69700,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}, true);
 			}
 		}
-		if (get(draggingColumnId) && ((_$$get14 = get(currentFloor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.columns)) {
+		if (get(draggingColumnId) && ((_$$get15 = get(currentFloor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.columns)) {
 			const basePos = {
 				x: get(mousePos).x - columnDragOffset.x,
 				y: get(mousePos).y - columnDragOffset.y
@@ -69327,7 +69710,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				y: snap(basePos.y)
 			});
 		}
-		if (get(draggingStairId) && ((_$$get15 = get(currentFloor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.stairs)) {
+		if (get(draggingStairId) && ((_$$get16 = get(currentFloor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.stairs)) {
 			const basePos = {
 				x: get(mousePos).x - stairDragOffset.x,
 				y: get(mousePos).y - stairDragOffset.y
@@ -69338,12 +69721,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 		}
 		if (get(draggingFurnitureId)) {
-			var _$$get16;
+			var _$$get17;
 			const basePos = {
 				x: get(mousePos).x - dragOffset.x,
 				y: get(mousePos).y - dragOffset.y
 			};
-			const fi = (_$$get16 = get(currentFloor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.furniture.find((f) => f.id === get(draggingFurnitureId));
+			const fi = (_$$get17 = get(currentFloor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.furniture.find((f) => f.id === get(draggingFurnitureId));
 			if (fi) {
 				const wallSnap = snapFurnitureToWall(basePos, fi.catalogId, fi.rotation);
 				if (wallSnap) {
@@ -69356,13 +69739,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 						wallAngle: wallSnap.wallAngle
 					}, true);
 				} else {
-					var _$$get17;
+					var _$$get18;
 					const snapped = {
 						x: snap(basePos.x),
 						y: snap(basePos.y)
 					};
 					const GUIDE_SNAP = 10;
-					if ((_$$get17 = get(currentFloor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.guides) for (const g of get(currentFloor).guides) {
+					if ((_$$get18 = get(currentFloor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.guides) for (const g of get(currentFloor).guides) {
 						if (g.orientation === "horizontal" && Math.abs(snapped.y - g.position) < GUIDE_SNAP) snapped.y = g.position;
 						if (g.orientation === "vertical" && Math.abs(snapped.x - g.position) < GUIDE_SNAP) snapped.x = g.position;
 					}
@@ -70099,8 +70482,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	let cursorStyle = /* @__PURE__ */ user_derived(() => {
-		var _$$get18;
-		return get(spaceDown) || get(isPanning) || $panMode() || get(shiftDown) && get(currentTool) === "select" ? "grab" : get(draggingFurnitureId) ? "move" : get(draggingRoomId) ? "move" : get(draggingMultiSelect) ? "move" : get(draggingDoorId) ? "move" : get(draggingWindowId) ? "move" : get(draggingStairId) ? "move" : get(draggingColumnId) ? "move" : get(draggingTextAnnotationId) ? "move" : get(draggingZoneId) ? "move" : get(draggingWallParallel) ? "move" : get(draggingCurveHandle) ? "crosshair" : get(draggingWallEndpoint) ? "crosshair" : get(draggingHandle) === "rotate" ? "grabbing" : get(draggingHandle) === "resize-t" || get(draggingHandle) === "resize-b" ? "ns-resize" : get(draggingHandle) === "resize-l" || get(draggingHandle) === "resize-r" ? "ew-resize" : ((_$$get18 = get(draggingHandle)) === null || _$$get18 === void 0 ? void 0 : _$$get18.startsWith("resize")) ? "nwse-resize" : get(currentTool) === "text" ? "text" : get(currentTool) === "select" ? "default" : get(currentTool) === "furniture" ? "copy" : get(currentTool) === "door" || get(currentTool) === "window" ? get(placementPreview) ? "crosshair" : "not-allowed" : "crosshair";
+		var _$$get19;
+		return get(spaceDown) || get(isPanning) || $panMode() || get(shiftDown) && get(currentTool) === "select" ? "grab" : get(draggingFurnitureId) ? "move" : get(draggingRoomId) ? "move" : get(draggingMultiSelect) ? "move" : get(draggingDoorId) ? "move" : get(draggingWindowId) ? "move" : get(draggingStairId) ? "move" : get(draggingColumnId) ? "move" : get(draggingTextAnnotationId) ? "move" : get(draggingZoneId) ? "move" : get(draggingWallParallel) ? "move" : get(draggingCurveHandle) ? "crosshair" : get(draggingWallEndpoint) ? "crosshair" : get(draggingHandle) === "rotate" ? "grabbing" : get(draggingHandle) === "resize-t" || get(draggingHandle) === "resize-b" ? "ns-resize" : get(draggingHandle) === "resize-l" || get(draggingHandle) === "resize-r" ? "ew-resize" : ((_$$get19 = get(draggingHandle)) === null || _$$get19 === void 0 ? void 0 : _$$get19.startsWith("resize")) ? "nwse-resize" : get(currentTool) === "text" ? "text" : get(currentTool) === "select" ? "default" : get(currentTool) === "furniture" ? "copy" : get(currentTool) === "door" || get(currentTool) === "window" ? get(placementPreview) ? "crosshair" : "not-allowed" : "crosshair";
 	});
 	var div = root$1();
 	event("keydown", $window, onKeyDown);
@@ -70110,14 +70493,36 @@ function FloorPlanCanvas($$anchor, $$props) {
 	var canvas_1 = child(div_2);
 	let classes;
 	bind_this(canvas_1, ($$value) => canvas = $$value, () => canvas);
+	var node = sibling(canvas_1, 2);
+	var consequent = ($$anchor) => {
+		PolygonFloatToolbar($$anchor, {
+			get x() {
+				return get(polyTb).x;
+			},
+			get y() {
+				return get(polyTb).y;
+			},
+			get showConfirm() {
+				return get(polyTb).showConfirm;
+			},
+			get canConfirm() {
+				return get(polyTb).canConfirm;
+			},
+			onConfirm: onPolyTbConfirm,
+			onDelete: onPolyTbDelete
+		});
+	};
+	if_block(node, ($$render) => {
+		if (get(polyTb)) $$render(consequent);
+	});
 	reset(div_2);
 	bind_this(div_2, ($$value) => canvasFrame = $$value, () => canvasFrame);
-	var node = sibling(div_2, 2);
-	var consequent_21 = ($$anchor) => {
-		var fragment = root_1$4();
-		var node_1 = first_child(fragment);
-		var consequent = ($$anchor) => {
-			var input = root_2$4();
+	var node_1 = sibling(div_2, 2);
+	var consequent_22 = ($$anchor) => {
+		var fragment_1 = root_2$4();
+		var node_2 = first_child(fragment_1);
+		var consequent_1 = ($$anchor) => {
+			var input = root_3$3();
 			remove_input_defaults(input);
 			autofocus(input, true);
 			template_effect(() => {
@@ -70150,12 +70555,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 			append($$anchor, input);
 		};
-		if_block(node_1, ($$render) => {
-			if (get(editingRoomId)) $$render(consequent);
+		if_block(node_2, ($$render) => {
+			if (get(editingRoomId)) $$render(consequent_1);
 		});
-		var node_2 = sibling(node_1, 2);
-		var consequent_1 = ($$anchor) => {
-			var input_1 = root_3$3();
+		var node_3 = sibling(node_2, 2);
+		var consequent_2 = ($$anchor) => {
+			var input_1 = root_4$2();
 			remove_input_defaults(input_1);
 			autofocus(input_1, true);
 			template_effect(() => {
@@ -70177,8 +70582,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 					}
 					set(editingTextAnnotationId, null);
 				} else if (e.key === "Escape") {
-					var _$$get19;
-					if ((_$$get19 = get(currentFloor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.textAnnotations) {
+					var _$$get20;
+					if ((_$$get20 = get(currentFloor)) === null || _$$get20 === void 0 ? void 0 : _$$get20.textAnnotations) {
 						const ta = get(currentFloor).textAnnotations.find((t) => t.id === get(editingTextAnnotationId));
 						if (ta && ta.text === "Text" && !get(editingTextAnnotationValue).trim()) {
 							removeTextAnnotation(get(editingTextAnnotationId));
@@ -70202,33 +70607,33 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 			append($$anchor, input_1);
 		};
-		if_block(node_2, ($$render) => {
-			if (get(editingTextAnnotationId)) $$render(consequent_1);
-		});
-		var node_3 = sibling(node_2, 2);
-		var consequent_2 = ($$anchor) => {
-			append($$anchor, root_4$2());
-		};
 		if_block(node_3, ($$render) => {
-			if (get(currentFloor) && get(currentFloor).walls.length === 0 && get(currentFloor).furniture.length === 0 && get(currentFloor).doors.length === 0 && !$$props.viewOnly) $$render(consequent_2);
+			if (get(editingTextAnnotationId)) $$render(consequent_2);
 		});
 		var node_4 = sibling(node_3, 2);
 		var consequent_3 = ($$anchor) => {
-			var canvas_2 = root_5();
+			append($$anchor, root_5());
+		};
+		if_block(node_4, ($$render) => {
+			if (get(currentFloor) && get(currentFloor).walls.length === 0 && get(currentFloor).furniture.length === 0 && get(currentFloor).doors.length === 0 && !$$props.viewOnly) $$render(consequent_3);
+		});
+		var node_5 = sibling(node_4, 2);
+		var consequent_4 = ($$anchor) => {
+			var canvas_2 = root_6();
 			bind_this(canvas_2, ($$value) => minimapCanvas = $$value, () => minimapCanvas);
 			delegated("click", canvas_2, onMinimapClick);
 			append($$anchor, canvas_2);
 		};
-		if_block(node_4, ($$render) => {
-			if (!$$props.viewOnly && get(showMinimap) && get(currentFloor) && get(currentFloor).walls.length > 0) $$render(consequent_3);
+		if_block(node_5, ($$render) => {
+			if (!$$props.viewOnly && get(showMinimap) && get(currentFloor) && get(currentFloor).walls.length > 0) $$render(consequent_4);
 		});
-		var node_5 = sibling(node_4, 2);
-		var consequent_10 = ($$anchor) => {
-			var div_4 = root_6();
-			var node_6 = child(div_4);
-			var consequent_4 = ($$anchor) => {
-				var fragment_1 = root_7$1();
-				var span = first_child(fragment_1);
+		var node_6 = sibling(node_5, 2);
+		var consequent_11 = ($$anchor) => {
+			var div_4 = root_7$1();
+			var node_7 = child(div_4);
+			var consequent_5 = ($$anchor) => {
+				var fragment_2 = root_8();
+				var span = first_child(fragment_2);
 				var text_1 = child(span);
 				reset(span);
 				var span_1 = sibling(span, 2);
@@ -70240,20 +70645,20 @@ function FloorPlanCanvas($$anchor, $$props) {
 					set_text(text_1, `${(_$$get$length = get(detectedRooms).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} room${get(detectedRooms).length !== 1 ? "s" : ""}`);
 					set_text(text_2, $0);
 				}, [() => formatArea(get(detectedRooms).reduce((s, r) => s + r.area, 0), $projectSettings().units)]);
-				append($$anchor, fragment_1);
+				append($$anchor, fragment_2);
 			};
-			if_block(node_6, ($$render) => {
-				if (get(detectedRooms).length > 0) $$render(consequent_4);
+			if_block(node_7, ($$render) => {
+				if (get(detectedRooms).length > 0) $$render(consequent_5);
 			});
-			var node_7 = sibling(node_6, 2);
-			var consequent_8 = ($$anchor) => {
-				var fragment_2 = root_8();
-				var span_2 = first_child(fragment_2);
+			var node_8 = sibling(node_7, 2);
+			var consequent_9 = ($$anchor) => {
+				var fragment_3 = root_9();
+				var span_2 = first_child(fragment_3);
 				var text_3 = child(span_2);
 				reset(span_2);
-				var node_8 = sibling(span_2, 2);
-				var consequent_5 = ($$anchor) => {
-					var span_3 = root_9();
+				var node_9 = sibling(span_2, 2);
+				var consequent_6 = ($$anchor) => {
+					var span_3 = root_10();
 					var text_4 = child(span_3);
 					reset(span_3);
 					template_effect(() => {
@@ -70262,12 +70667,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 					});
 					append($$anchor, span_3);
 				};
-				if_block(node_8, ($$render) => {
-					if (get(currentFloor).doors.length > 0) $$render(consequent_5);
+				if_block(node_9, ($$render) => {
+					if (get(currentFloor).doors.length > 0) $$render(consequent_6);
 				});
-				var node_9 = sibling(node_8, 2);
-				var consequent_6 = ($$anchor) => {
-					var span_4 = root_10();
+				var node_10 = sibling(node_9, 2);
+				var consequent_7 = ($$anchor) => {
+					var span_4 = root_11();
 					var text_5 = child(span_4);
 					reset(span_4);
 					template_effect(() => {
@@ -70276,12 +70681,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 					});
 					append($$anchor, span_4);
 				};
-				if_block(node_9, ($$render) => {
-					if (get(currentFloor).windows.length > 0) $$render(consequent_6);
+				if_block(node_10, ($$render) => {
+					if (get(currentFloor).windows.length > 0) $$render(consequent_7);
 				});
-				var node_10 = sibling(node_9, 2);
-				var consequent_7 = ($$anchor) => {
-					var span_5 = root_11();
+				var node_11 = sibling(node_10, 2);
+				var consequent_8 = ($$anchor) => {
+					var span_5 = root_12();
 					var text_6 = child(span_5);
 					reset(span_5);
 					template_effect(() => {
@@ -70290,23 +70695,23 @@ function FloorPlanCanvas($$anchor, $$props) {
 					});
 					append($$anchor, span_5);
 				};
-				if_block(node_10, ($$render) => {
-					if (get(currentFloor).furniture.length > 0) $$render(consequent_7);
+				if_block(node_11, ($$render) => {
+					if (get(currentFloor).furniture.length > 0) $$render(consequent_8);
 				});
 				next(2);
 				template_effect(() => {
 					var _$$get$walls$length;
 					return set_text(text_3, `${(_$$get$walls$length = get(currentFloor).walls.length) !== null && _$$get$walls$length !== void 0 ? _$$get$walls$length : ""} wall${get(currentFloor).walls.length !== 1 ? "s" : ""}`);
 				});
-				append($$anchor, fragment_2);
+				append($$anchor, fragment_3);
 			};
-			if_block(node_7, ($$render) => {
-				if (get(currentFloor)) $$render(consequent_8);
+			if_block(node_8, ($$render) => {
+				if (get(currentFloor)) $$render(consequent_9);
 			});
-			var node_11 = sibling(node_7, 2);
-			var consequent_9 = ($$anchor) => {
-				var fragment_3 = root_12();
-				var span_6 = first_child(fragment_3);
+			var node_12 = sibling(node_8, 2);
+			var consequent_10 = ($$anchor) => {
+				var fragment_4 = root_13();
+				var span_6 = first_child(fragment_4);
 				var text_7 = child(span_6);
 				reset(span_6);
 				next(2);
@@ -70314,12 +70719,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 					var _$$get$size;
 					return set_text(text_7, `${(_$$get$size = get(currentSelectedIds).size) !== null && _$$get$size !== void 0 ? _$$get$size : ""} selected`);
 				});
-				append($$anchor, fragment_3);
+				append($$anchor, fragment_4);
 			};
-			if_block(node_11, ($$render) => {
-				if (get(currentSelectedIds).size > 1) $$render(consequent_9);
+			if_block(node_12, ($$render) => {
+				if (get(currentSelectedIds).size > 1) $$render(consequent_10);
 			});
-			var span_7 = sibling(node_11, 2);
+			var span_7 = sibling(node_12, 2);
 			var text_8 = child(span_7);
 			reset(span_7);
 			var button = sibling(span_7, 2);
@@ -70363,14 +70768,14 @@ function FloorPlanCanvas($$anchor, $$props) {
 			delegated("click", button_6, () => set(showMinimap, !get(showMinimap)));
 			append($$anchor, div_4);
 		};
-		if_block(node_5, ($$render) => {
-			if (!$$props.viewOnly) $$render(consequent_10);
+		if_block(node_6, ($$render) => {
+			if (!$$props.viewOnly) $$render(consequent_11);
 		});
-		var node_12 = sibling(node_5, 2);
-		var consequent_11 = ($$anchor) => {
-			var div_5 = root_13();
-			var node_13 = sibling(child(div_5), 2);
-			each(node_13, 16, () => [
+		var node_13 = sibling(node_6, 2);
+		var consequent_12 = ($$anchor) => {
+			var div_5 = root_14();
+			var node_14 = sibling(child(div_5), 2);
+			each(node_14, 16, () => [
 				["walls", "Walls"],
 				["doors", "Doors"],
 				["windows", "Windows"],
@@ -70384,7 +70789,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				var $$array = /* @__PURE__ */ user_derived(() => to_array($$item, 2));
 				let key = () => get($$array)[0];
 				let label = () => get($$array)[1];
-				var label_1 = root_14();
+				var label_1 = root_15();
 				var input_2 = child(label_1);
 				remove_input_defaults(input_2);
 				var span_8 = sibling(input_2, 2);
@@ -70401,7 +70806,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				})));
 				append($$anchor, label_1);
 			});
-			var label_2 = sibling(node_13, 4);
+			var label_2 = sibling(node_14, 4);
 			var input_3 = child(label_2);
 			remove_input_defaults(input_3);
 			next(2);
@@ -70416,11 +70821,11 @@ function FloorPlanCanvas($$anchor, $$props) {
 			bind_checked(input_4, () => get(showDimensions), ($$value) => set(showDimensions, $$value));
 			append($$anchor, div_5);
 		};
-		if_block(node_12, ($$render) => {
-			if (get(showLayerPanel)) $$render(consequent_11);
+		if_block(node_13, ($$render) => {
+			if (get(showLayerPanel)) $$render(consequent_12);
 		});
-		var node_14 = sibling(node_12, 2);
-		var consequent_15 = ($$anchor) => {
+		var node_15 = sibling(node_13, 2);
+		var consequent_16 = ($$anchor) => {
 			const el = /* @__PURE__ */ user_derived(() => (() => {
 				const f = get(currentFloor);
 				const wall = f.walls.find((w) => w.id === get(currentSelectedId));
@@ -70452,25 +70857,25 @@ function FloorPlanCanvas($$anchor, $$props) {
 				};
 				return null;
 			})());
-			var fragment_4 = comment();
-			var node_15 = first_child(fragment_4);
-			var consequent_14 = ($$anchor) => {
-				var div_6 = root_16();
+			var fragment_5 = comment();
+			var node_16 = first_child(fragment_5);
+			var consequent_15 = ($$anchor) => {
+				var div_6 = root_17();
 				var button_7 = child(div_6);
-				var node_16 = sibling(button_7, 2);
-				var consequent_12 = ($$anchor) => {
-					var button_8 = root_17();
+				var node_17 = sibling(button_7, 2);
+				var consequent_13 = ($$anchor) => {
+					var button_8 = root_18();
 					delegated("click", button_8, () => {
 						if (get(el).door) updateDoor(get(el).door.id, { swingDirection: get(el).door.swingDirection === "left" ? "right" : "left" });
 					});
 					append($$anchor, button_8);
 				};
-				if_block(node_16, ($$render) => {
-					if (get(el).type === "door" && get(el).door) $$render(consequent_12);
+				if_block(node_17, ($$render) => {
+					if (get(el).type === "door" && get(el).door) $$render(consequent_13);
 				});
-				var node_17 = sibling(node_16, 2);
-				var consequent_13 = ($$anchor) => {
-					var button_9 = root_18();
+				var node_18 = sibling(node_17, 2);
+				var consequent_14 = ($$anchor) => {
+					var button_9 = root_19();
 					delegated("click", button_9, () => {
 						if (get(currentSelectedId)) {
 							if (splitWall(get(currentSelectedId), .5)) selectedElementId.set(null);
@@ -70478,10 +70883,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 					});
 					append($$anchor, button_9);
 				};
-				if_block(node_17, ($$render) => {
-					if (get(el).type === "wall" && get(currentSelectedId) && get(currentSelectedIds).size === 0) $$render(consequent_13);
+				if_block(node_18, ($$render) => {
+					if (get(el).type === "wall" && get(currentSelectedId) && get(currentSelectedIds).size === 0) $$render(consequent_14);
 				});
-				var button_10 = sibling(node_17, 4);
+				var button_10 = sibling(node_18, 4);
 				reset(div_6);
 				template_effect(() => {
 					var _$$get$pos$x;
@@ -70510,62 +70915,62 @@ function FloorPlanCanvas($$anchor, $$props) {
 				});
 				append($$anchor, div_6);
 			};
-			if_block(node_15, ($$render) => {
-				if (get(el)) $$render(consequent_14);
+			if_block(node_16, ($$render) => {
+				if (get(el)) $$render(consequent_15);
 			});
-			append($$anchor, fragment_4);
+			append($$anchor, fragment_5);
 		};
-		if_block(node_14, ($$render) => {
-			if ((get(currentSelectedId) || get(currentSelectedIds).size > 0) && get(currentFloor) && get(currentTool) === "select") $$render(consequent_15);
+		if_block(node_15, ($$render) => {
+			if ((get(currentSelectedId) || get(currentSelectedIds).size > 0) && get(currentFloor) && get(currentTool) === "select") $$render(consequent_16);
 		});
-		var node_18 = sibling(node_14, 2);
-		var consequent_16 = ($$anchor) => {
-			append($$anchor, root_19());
+		var node_19 = sibling(node_15, 2);
+		var consequent_17 = ($$anchor) => {
+			append($$anchor, root_20());
 		};
-		if_block(node_18, ($$render) => {
-			if (get(currentTool) === "wall" && get(wallStart)) $$render(consequent_16);
+		if_block(node_19, ($$render) => {
+			if (get(currentTool) === "wall" && get(wallStart)) $$render(consequent_17);
 		});
-		var node_19 = sibling(node_18, 2);
-		var consequent_17 = ($$anchor) => {
-			var div_8 = root_20();
+		var node_20 = sibling(node_19, 2);
+		var consequent_18 = ($$anchor) => {
+			var div_8 = root_21();
 			var text_15 = child(div_8);
 			reset(div_8);
 			template_effect(() => {
-				var _$$get20;
-				return set_text(text_15, `Click to place · Scroll or R to rotate (${(_$$get20 = get(currentPlacingRotation)) !== null && _$$get20 !== void 0 ? _$$get20 : ""}°) · Esc
+				var _$$get21;
+				return set_text(text_15, `Click to place · Scroll or R to rotate (${(_$$get21 = get(currentPlacingRotation)) !== null && _$$get21 !== void 0 ? _$$get21 : ""}°) · Esc
         to cancel`);
 			});
 			append($$anchor, div_8);
 		};
-		if_block(node_19, ($$render) => {
-			if (get(currentPlacingId) && get(currentTool) === "furniture") $$render(consequent_17);
-		});
-		var node_20 = sibling(node_19, 2);
-		var consequent_18 = ($$anchor) => {
-			append($$anchor, root_21());
-		};
 		if_block(node_20, ($$render) => {
-			if (get(measuring)) $$render(consequent_18);
+			if (get(currentPlacingId) && get(currentTool) === "furniture") $$render(consequent_18);
 		});
 		var node_21 = sibling(node_20, 2);
 		var consequent_19 = ($$anchor) => {
 			append($$anchor, root_22());
 		};
 		if_block(node_21, ($$render) => {
-			if (get(textAnnotationMode)) $$render(consequent_19);
+			if (get(measuring)) $$render(consequent_19);
 		});
 		var node_22 = sibling(node_21, 2);
 		var consequent_20 = ($$anchor) => {
-			var div_11 = root_23();
+			append($$anchor, root_23());
+		};
+		if_block(node_22, ($$render) => {
+			if (get(textAnnotationMode)) $$render(consequent_20);
+		});
+		var node_23 = sibling(node_22, 2);
+		var consequent_21 = ($$anchor) => {
+			var div_11 = root_24();
 			var text_16 = child(div_11);
 			reset(div_11);
 			template_effect(() => set_text(text_16, `${get(annotationStart) ? "Click second point to create annotation" : "Click first point"} · N to exit · Esc to cancel`));
 			append($$anchor, div_11);
 		};
-		if_block(node_22, ($$render) => {
-			if (get(annotating)) $$render(consequent_20);
+		if_block(node_23, ($$render) => {
+			if (get(annotating)) $$render(consequent_21);
 		});
-		var div_12 = sibling(node_22, 2);
+		var div_12 = sibling(node_23, 2);
 		var button_11 = child(div_12);
 		var button_12 = sibling(button_11, 2);
 		var text_17 = child(button_12);
@@ -70625,70 +71030,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			markDirty();
 		});
 		delegated("click", button_14, () => zoomToFit());
-		append($$anchor, fragment);
+		append($$anchor, fragment_1);
 	};
-	if_block(node, ($$render) => {
-		if (!$$props.viewOnly) $$render(consequent_21);
+	if_block(node_1, ($$render) => {
+		if (!$$props.viewOnly) $$render(consequent_22);
 	});
 	reset(div_1);
-	var node_24 = sibling(div_1, 2);
-	var consequent_24 = ($$anchor) => {
-		var aside = root_24();
-		var div_13 = child(aside);
-		var node_25 = sibling(child(div_13));
-		var consequent_22 = ($$anchor) => {
-			var span_9 = root_25();
-			var text_18 = child(span_9, true);
-			reset(span_9);
-			template_effect(() => set_text(text_18, get(fovPanelSerial)));
-			append($$anchor, span_9);
-		};
-		if_block(node_25, ($$render) => {
-			if (get(fovPanelSerial)) $$render(consequent_22);
-		});
-		reset(div_13);
-		var node_26 = sibling(div_13, 2);
-		var consequent_23 = ($$anchor) => {
-			append($$anchor, root_26());
-		};
-		if_block(node_26, ($$render) => {
-			if (!$$props.viewOnly && get(fovPanelSerial)) $$render(consequent_23);
-		});
-		var node_27 = sibling(node_26, 2);
-		{
-			let $0 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$props$coordina, _$$get21;
-				return (_$$get$props$coordina = (_$$get21 = get(fovSideCam)) === null || _$$get21 === void 0 || (_$$get21 = _$$get21.props) === null || _$$get21 === void 0 ? void 0 : _$$get21.coordinates) !== null && _$$get$props$coordina !== void 0 ? _$$get$props$coordina : "";
-			});
-			let $1 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$props$mapCoord, _$$get22;
-				return (_$$get$props$mapCoord = (_$$get22 = get(fovSideCam)) === null || _$$get22 === void 0 || (_$$get22 = _$$get22.props) === null || _$$get22 === void 0 ? void 0 : _$$get22.mapCoordinates) !== null && _$$get$props$mapCoord !== void 0 ? _$$get$props$mapCoord : "";
-			});
-			let $2 = /* @__PURE__ */ user_derived(() => $$props.viewOnly || !get(fovPanelSerial));
-			CameraFovEditor(node_27, {
-				get serial() {
-					return get(fovPanelSerial);
-				},
-				get thumbnailUrl() {
-					return cameraThumbnail();
-				},
-				get coordinates() {
-					return get($0);
-				},
-				get mapCoordinates() {
-					return get($1);
-				},
-				get readOnly() {
-					return get($2);
-				}
-			});
-		}
-		reset(aside);
-		append($$anchor, aside);
-	};
-	if_block(node_24, ($$render) => {
-		if (get(showFovSidePanel)) $$render(consequent_24);
-	});
 	reset(div);
 	template_effect(($0) => {
 		set_style(div_2, $0);
@@ -72425,6 +72772,12 @@ function _ensureShadowRoot() {
   width: 100%;
   height: 100%;
 }
+:host:fullscreen,
+:host:-webkit-full-screen {
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+}
 `;
 	shadow.appendChild(style);
 	_classPrivateFieldSet2(_wrapper, this, document.createElement("div"));