floor-editor-ts 1.2.9 → 1.3.1

package/dist/floor-editor.es.js

@@ -6392,6 +6392,11 @@ function updateBackgroundImage(updates) {
 		if (f.backgroundImage) Object.assign(f.backgroundImage, updates);
 	});
 }
+var cameraThumbnailOpacity = writable(.65);
+function updateCameraThumbnailOpacity(opacity) {
+	const clamped = Math.min(1, Math.max(.05, opacity));
+	cameraThumbnailOpacity.set(clamped);
+}
 function addColumn(position, shape = "round") {
 	const id = uid$1();
 	mutate((f) => {
@@ -6988,15 +6993,21 @@ var DEFAULT_CONFIG = {
 	showCameraCones: false,
 	showCameraLabels: true,
 	cameraHeatmapMatrix: [],
-	siteCameras: []
+	siteCameras: [],
+	cameraThumbnail: "",
+	cameraThumbnailOpacity: .65
 };
 function normalizeConfig(value) {
 	if (!value || typeof value !== "object") return { ...DEFAULT_CONFIG };
 	const siteCameras = Array.isArray(value.siteCameras) ? value.siteCameras.filter((c) => !!c && typeof c === "object" && typeof c.serial === "string" && typeof c.name === "string") : DEFAULT_CONFIG.siteCameras;
+	const image = typeof value.cameraThumbnail === "string" ? value.cameraThumbnail ? value.cameraThumbnail : DEFAULT_CONFIG.cameraThumbnail : DEFAULT_CONFIG.cameraThumbnail;
+	const opacity = typeof value.cameraThumbnailOpacity === "number" && value.cameraThumbnailOpacity >= 0 && value.cameraThumbnailOpacity <= 1 ? value.cameraThumbnailOpacity : DEFAULT_CONFIG.cameraThumbnailOpacity;
 	return {
 		...DEFAULT_CONFIG,
 		...value,
-		siteCameras
+		siteCameras,
+		cameraThumbnail: image,
+		cameraThumbnailOpacity: opacity
 	};
 }
 function normalizeFloorData(data) {
@@ -58098,9 +58109,9 @@ var root_17$2 = /* @__PURE__ */ from_html(`<div class="text-[10px] text-gray-400
 var root_18$2 = /* @__PURE__ */ from_html(`<button> </button>`);
 var root_20$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_19$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_22$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_22$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_23$2 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> </span>`);
-var root_21$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_21$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_15$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_24$2 = /* @__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_25$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>`);
@@ -58758,7 +58769,7 @@ function BuildPanel($$anchor, $$props) {
 		var div_29 = sibling(node_6, 2);
 		each(div_29, 21, () => get(filtered), index$1, ($$anchor, item) => {
 			const s = /* @__PURE__ */ user_derived(() => get(search).toLowerCase());
-			var button_23 = root_21$1();
+			var button_23 = root_21$2();
 			var span_10 = child(button_23);
 			var text_22 = child(span_10, true);
 			reset(span_10);
@@ -58768,7 +58779,7 @@ function BuildPanel($$anchor, $$props) {
 			var node_7 = sibling(div_30, 2);
 			var consequent_12 = ($$anchor) => {
 				const idx = /* @__PURE__ */ user_derived(() => get(item).name.toLowerCase().indexOf(get(s)));
-				var span_11 = root_22$2();
+				var span_11 = root_22$1();
 				var text_23 = child(span_11, true);
 				var mark = sibling(text_23);
 				var text_24 = child(mark, true);
@@ -59351,17 +59362,18 @@ var root_12$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="tex
 var root_15$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Camera Name</span> <input type="text" placeholder="Display name" 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">Camera Serial</span> <input type="text" placeholder="Device serial" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label>`, 1);
 var root_16 = /* @__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_18$1 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_19$1 = /* @__PURE__ */ from_html(`<button></button>`);
-var root_22$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_20$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_17$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_23$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_25 = /* @__PURE__ */ from_html(`<button></button>`);
-var root_26 = /* @__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_24$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> 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_27 = /* @__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_28 = /* @__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_18$1 = /* @__PURE__ */ from_html(`<label class="block pb-3 border-b border-gray-200"><span class="text-xs text-gray-500"> </span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label>`);
+var root_19$1 = /* @__PURE__ */ from_html(`<option> </option>`);
+var root_20$1 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_23$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_21$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_17$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_24$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_26 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_27 = /* @__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_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> 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_28 = /* @__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_29 = /* @__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: 48px; bottom: 36px;"><!> <!></div>`);
 function PropertiesPanel($$anchor, $$props) {
 	push($$props, true);
@@ -59399,7 +59411,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, () => []);
+	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;
@@ -59433,17 +59445,25 @@ function PropertiesPanel($$anchor, $$props) {
 		var _$$get8;
 		return !!((_$$get8 = get(floor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.backgroundImage);
 	});
+	let hasCameraThumbnailOverlay = /* @__PURE__ */ user_derived(() => {
+		var _cameraThumbnail, _$$get9;
+		return !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim()) && !((_$$get9 = get(floor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.backgroundImage);
+	});
+	let thumbOpacity = /* @__PURE__ */ state(.65);
+	cameraThumbnailOpacity.subscribe((v) => {
+		set(thumbOpacity, v, true);
+	});
 	let selectedRoom = /* @__PURE__ */ user_derived(() => {
-		var _ref, _$$get$rooms$find, _$$get9;
-		return (_ref = (_$$get$rooms$find = (_$$get9 = get(floor)) === null || _$$get9 === void 0 || (_$$get9 = _$$get9.rooms) === null || _$$get9 === void 0 ? void 0 : _$$get9.find((r) => r.id === get(selRoomId))) !== null && _$$get$rooms$find !== void 0 ? _$$get$rooms$find : get(detectedRooms).find((r) => r.id === get(selRoomId))) !== null && _ref !== void 0 ? _ref : null;
+		var _ref, _$$get$rooms$find, _$$get10;
+		return (_ref = (_$$get$rooms$find = (_$$get10 = get(floor)) === null || _$$get10 === void 0 || (_$$get10 = _$$get10.rooms) === null || _$$get10 === void 0 ? void 0 : _$$get10.find((r) => r.id === get(selRoomId))) !== null && _$$get$rooms$find !== void 0 ? _$$get$rooms$find : get(detectedRooms).find((r) => r.id === get(selRoomId))) !== null && _ref !== void 0 ? _ref : null;
 	});
 	let selectedDoorWall = /* @__PURE__ */ user_derived(() => {
-		var _ref2, _$$get10;
-		return (_ref2 = get(selectedDoor) && ((_$$get10 = get(floor)) === null || _$$get10 === void 0 || (_$$get10 = _$$get10.walls) === null || _$$get10 === void 0 ? void 0 : _$$get10.find((w) => w.id === get(selectedDoor).wallId))) !== null && _ref2 !== void 0 ? _ref2 : null;
+		var _ref2, _$$get11;
+		return (_ref2 = get(selectedDoor) && ((_$$get11 = get(floor)) === null || _$$get11 === void 0 || (_$$get11 = _$$get11.walls) === null || _$$get11 === void 0 ? void 0 : _$$get11.find((w) => w.id === get(selectedDoor).wallId))) !== null && _ref2 !== void 0 ? _ref2 : null;
 	});
 	let selectedWindowWall = /* @__PURE__ */ user_derived(() => {
-		var _ref3, _$$get11;
-		return (_ref3 = get(selectedWindow) && ((_$$get11 = get(floor)) === null || _$$get11 === void 0 || (_$$get11 = _$$get11.walls) === null || _$$get11 === void 0 ? void 0 : _$$get11.find((w) => w.id === get(selectedWindow).wallId))) !== null && _ref3 !== void 0 ? _ref3 : null;
+		var _ref3, _$$get12;
+		return (_ref3 = get(selectedWindow) && ((_$$get12 = get(floor)) === null || _$$get12 === void 0 || (_$$get12 = _$$get12.walls) === null || _$$get12 === void 0 ? void 0 : _$$get12.find((w) => w.id === get(selectedWindow).wallId))) !== null && _ref3 !== void 0 ? _ref3 : null;
 	});
 	function calcWallLength(wall) {
 		if (wall.curvePoint) {
@@ -59540,9 +59560,9 @@ function PropertiesPanel($$anchor, $$props) {
 	}
 	const useSiteCameraSelect = /* @__PURE__ */ user_derived(() => siteCameras().length > 0);
 	const usedCameraSerials = /* @__PURE__ */ user_derived(() => {
-		var _$$get12;
+		var _$$get13;
 		const used = /* @__PURE__ */ new Set();
-		if (!((_$$get12 = get(floor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.furniture) || !get(selectedFurniture)) return used;
+		if (!((_$$get13 = get(floor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.furniture) || !get(selectedFurniture)) return used;
 		for (const item of get(floor).furniture) {
 			if (item.catalogId !== "camera" || item.id === get(selectedFurniture).id) continue;
 			if (item.serial) used.add(item.serial);
@@ -60129,7 +60149,7 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_11);
 		reset(div_11);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
-			var _$$get13, _$$get14, _$$get15, _$$get16;
+			var _$$get14, _$$get15, _$$get16, _$$get17;
 			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 : ""})`);
@@ -60142,10 +60162,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 ${((_$$get13 = get(selectedDoor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.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 ${((_$$get14 = get(selectedDoor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.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 ${!((_$$get15 = get(selectedDoor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.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 ${((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.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 ${((_$$get14 = get(selectedDoor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.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 ${((_$$get15 = get(selectedDoor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.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 ${!((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.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 ${((_$$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"}`);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedDoor).width),
@@ -60537,19 +60557,38 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("click", button_19, resetFurnitureDefaults);
 		append($$anchor, fragment_3);
 	};
-	var consequent_9 = ($$anchor) => {
+	var consequent_10 = ($$anchor) => {
 		var fragment_7 = root_17$1();
 		var div_21 = sibling(first_child(fragment_7), 2);
-		var label_26 = child(div_21);
-		var select_4 = sibling(child(label_26), 2);
+		var node_8 = child(div_21);
+		var consequent_8 = ($$anchor) => {
+			var label_26 = root_18$1();
+			var span_19 = child(label_26);
+			var text_23 = child(span_19);
+			reset(span_19);
+			var input_21 = sibling(span_19, 2);
+			remove_input_defaults(input_21);
+			reset(label_26);
+			template_effect(($0) => {
+				set_text(text_23, `Camera Thumbnail Opacity (${$0 !== null && $0 !== void 0 ? $0 : ""}%)`);
+				set_value(input_21, get(thumbOpacity));
+			}, [() => Math.round(get(thumbOpacity) * 100)]);
+			delegated("input", input_21, (e) => updateCameraThumbnailOpacity(Number(e.target.value)));
+			append($$anchor, label_26);
+		};
+		if_block(node_8, ($$render) => {
+			if (get(hasCameraThumbnailOverlay)) $$render(consequent_8);
+		});
+		var label_27 = sibling(node_8, 2);
+		var select_4 = sibling(child(label_27), 2);
 		each(select_4, 21, () => roomTypes, index$1, ($$anchor, rt) => {
-			var option_21 = root_18$1();
-			var text_23 = child(option_21);
+			var option_21 = root_19$1();
+			var text_24 = child(option_21);
 			reset(option_21);
 			var option_21_value = {};
 			template_effect(() => {
 				var _$$get$icon, _$$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 : ""}`);
+				set_text(text_24, `${(_$$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 : "";
@@ -60560,13 +60599,13 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_4);
 		var select_4_value;
 		init_select(select_4);
-		reset(label_26);
-		var label_27 = sibling(label_26, 2);
-		var input_21 = sibling(child(label_27), 2);
-		remove_input_defaults(input_21);
 		reset(label_27);
 		var label_28 = sibling(label_27, 2);
-		var select_5 = sibling(child(label_28), 2);
+		var input_22 = sibling(child(label_28), 2);
+		remove_input_defaults(input_22);
+		reset(label_28);
+		var label_29 = sibling(label_28, 2);
+		var select_5 = sibling(child(label_29), 2);
 		var option_22 = child(select_5);
 		option_22.value = option_22.__value = "indoor";
 		var option_23 = sibling(option_22);
@@ -60578,16 +60617,16 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_5);
 		var select_5_value;
 		init_select(select_5);
-		reset(label_28);
-		var div_22 = sibling(label_28, 2);
+		reset(label_29);
+		var div_22 = sibling(label_29, 2);
 		var p_1 = sibling(child(div_22), 2);
-		var text_24 = child(p_1, true);
+		var text_25 = child(p_1, true);
 		reset(p_1);
 		reset(div_22);
 		var div_23 = sibling(div_22, 2);
 		var div_24 = sibling(child(div_23), 2);
 		each(div_24, 21, () => roomColorPresets, index$1, ($$anchor, preset) => {
-			var button_20 = root_19$1();
+			var button_20 = root_20$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"}`);
@@ -60599,50 +60638,50 @@ function PropertiesPanel($$anchor, $$props) {
 		});
 		reset(div_24);
 		var div_25 = sibling(div_24, 2);
-		var input_22 = sibling(child(div_25), 2);
-		remove_input_defaults(input_22);
+		var input_23 = sibling(child(div_25), 2);
+		remove_input_defaults(input_23);
 		reset(div_25);
 		reset(div_23);
 		var div_26 = sibling(div_23, 2);
 		var div_27 = sibling(child(div_26), 2);
 		each(div_27, 21, () => textureGroups, index$1, ($$anchor, group) => {
-			var div_28 = root_20$1();
-			var span_19 = child(div_28);
-			var text_25 = child(span_19, true);
-			reset(span_19);
-			var div_29 = sibling(span_19, 2);
+			var div_28 = root_21$1();
+			var span_20 = child(div_28);
+			var text_26 = child(span_20, true);
+			reset(span_20);
+			var div_29 = sibling(span_20, 2);
 			each(div_29, 21, () => get(group).ids, index$1, ($$anchor, matId) => {
 				const mat = /* @__PURE__ */ user_derived(() => floorMaterials.find((m) => m.id === get(matId)));
 				var fragment_8 = comment();
-				var node_8 = first_child(fragment_8);
-				var consequent_8 = ($$anchor) => {
+				var node_9 = first_child(fragment_8);
+				var consequent_9 = ($$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_22$1();
+					var button_21 = root_23$1();
 					var div_30 = child(button_21);
 					var div_31 = sibling(div_30, 2);
-					var text_26 = child(div_31, true);
+					var text_27 = child(div_31, true);
 					reset(div_31);
 					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_30, 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);
+						set_text(text_27, get(mat).name);
 					});
 					delegated("click", button_21, () => onRoomFloor(get(mat).id));
 					append($$anchor, button_21);
 				};
-				if_block(node_8, ($$render) => {
-					if (get(mat)) $$render(consequent_8);
+				if_block(node_9, ($$render) => {
+					if (get(mat)) $$render(consequent_9);
 				});
 				append($$anchor, fragment_8);
 			});
 			reset(div_29);
 			reset(div_28);
-			template_effect(() => set_text(text_25, get(group).label));
+			template_effect(() => set_text(text_26, get(group).label));
 			append($$anchor, div_28);
 		});
 		reset(div_27);
@@ -60654,16 +60693,16 @@ function PropertiesPanel($$anchor, $$props) {
 				var _select_4$__value;
 				select_4.value = (_select_4$__value = select_4.__value = get(selectedRoomType)) !== null && _select_4$__value !== void 0 ? _select_4$__value : "", select_option(select_4, get(selectedRoomType));
 			}
-			set_value(input_21, get(selectedRoom).name);
+			set_value(input_22, get(selectedRoom).name);
 			if (select_5_value !== (select_5_value = (_$$get$roomType = get(selectedRoom).roomType) !== null && _$$get$roomType !== void 0 ? _$$get$roomType : "indoor")) {
 				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_24, $0);
-			set_value(input_22, (_$$get$color6 = get(selectedRoom).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : "#ffffff");
+			set_text(text_25, $0);
+			set_value(input_23, (_$$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);
-		delegated("input", input_21, onRoomName);
+		delegated("input", input_22, onRoomName);
 		delegated("change", select_5, (e) => {
 			if (get(selectedRoom)) {
 				const v = e.target.value;
@@ -60671,14 +60710,14 @@ function PropertiesPanel($$anchor, $$props) {
 				updateDetectedRoom(get(selectedRoom).id, { roomType: v });
 			}
 		});
-		delegated("input", input_22, (e) => onRoomColor(e.target.value));
+		delegated("input", input_23, (e) => onRoomColor(e.target.value));
 		append($$anchor, fragment_7);
 	};
-	var consequent_10 = ($$anchor) => {
-		var fragment_9 = root_23$1();
+	var consequent_11 = ($$anchor) => {
+		var fragment_9 = root_24$1();
 		var div_32 = sibling(first_child(fragment_9), 2);
-		var label_29 = child(div_32);
-		var select_6 = sibling(child(label_29), 2);
+		var label_30 = child(div_32);
+		var select_6 = sibling(child(label_30), 2);
 		var option_26 = child(select_6);
 		option_26.value = option_26.__value = "straight";
 		var option_27 = sibling(option_26);
@@ -60690,13 +60729,6 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_6);
 		var select_6_value;
 		init_select(select_6);
-		reset(label_29);
-		var label_30 = sibling(label_29, 2);
-		var span_20 = child(label_30);
-		var text_27 = child(span_20);
-		reset(span_20);
-		var input_23 = sibling(span_20, 2);
-		remove_input_defaults(input_23);
 		reset(label_30);
 		var label_31 = sibling(label_30, 2);
 		var span_21 = child(label_31);
@@ -60706,33 +60738,40 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_24);
 		reset(label_31);
 		var label_32 = sibling(label_31, 2);
-		var input_25 = sibling(child(label_32), 2);
+		var span_22 = child(label_32);
+		var text_29 = child(span_22);
+		reset(span_22);
+		var input_25 = sibling(span_22, 2);
 		remove_input_defaults(input_25);
 		reset(label_32);
 		var label_33 = sibling(label_32, 2);
-		var div_33 = sibling(child(label_33), 2);
+		var input_26 = sibling(child(label_33), 2);
+		remove_input_defaults(input_26);
+		reset(label_33);
+		var label_34 = sibling(label_33, 2);
+		var div_33 = sibling(child(label_34), 2);
 		var button_22 = child(div_33);
 		var button_23 = sibling(button_22, 2);
 		reset(div_33);
-		reset(label_33);
-		var label_34 = sibling(label_33, 2);
-		var input_26 = sibling(child(label_34), 2);
-		remove_input_defaults(input_26);
 		reset(label_34);
+		var label_35 = sibling(label_34, 2);
+		var input_27 = sibling(child(label_35), 2);
+		remove_input_defaults(input_27);
+		reset(label_35);
 		reset(div_32);
 		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_27, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
-			set_value(input_23, $1);
-			set_text(text_28, `Depth (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
-			set_value(input_24, $3);
-			set_value(input_25, get(selectedStair).riserCount);
+			set_text(text_28, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
+			set_value(input_24, $1);
+			set_text(text_29, `Depth (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
+			set_value(input_25, $3);
+			set_value(input_26, 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"}`);
 			set_class(button_23, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedStair).direction === "down" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_value(input_26, get(selectedStair).rotation);
+			set_value(input_27, get(selectedStair).rotation);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedStair).width),
@@ -60740,29 +60779,22 @@ function PropertiesPanel($$anchor, $$props) {
 			() => displayValue(get(selectedStair).depth)
 		]);
 		delegated("change", select_6, (e) => updateStair(get(selectedStair).id, { stairType: e.target.value }));
-		delegated("input", input_23, (e) => updateStair(get(selectedStair).id, { width: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_24, (e) => updateStair(get(selectedStair).id, { depth: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_25, (e) => updateStair(get(selectedStair).id, { riserCount: Number(e.target.value) }));
+		delegated("input", input_24, (e) => updateStair(get(selectedStair).id, { width: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_25, (e) => updateStair(get(selectedStair).id, { depth: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_26, (e) => updateStair(get(selectedStair).id, { riserCount: Number(e.target.value) }));
 		delegated("click", button_22, () => updateStair(get(selectedStair).id, { direction: "up" }));
 		delegated("click", button_23, () => updateStair(get(selectedStair).id, { direction: "down" }));
-		delegated("input", input_26, (e) => updateStair(get(selectedStair).id, { rotation: Number(e.target.value) }));
+		delegated("input", input_27, (e) => updateStair(get(selectedStair).id, { rotation: Number(e.target.value) }));
 		append($$anchor, fragment_9);
 	};
-	var consequent_12 = ($$anchor) => {
-		var fragment_10 = root_24$1();
+	var consequent_13 = ($$anchor) => {
+		var fragment_10 = root_25();
 		var div_34 = sibling(first_child(fragment_10), 2);
-		var label_35 = child(div_34);
-		var div_35 = sibling(child(label_35), 2);
+		var label_36 = child(div_34);
+		var div_35 = sibling(child(label_36), 2);
 		var button_24 = child(div_35);
 		var button_25 = sibling(button_24, 2);
 		reset(div_35);
-		reset(label_35);
-		var label_36 = sibling(label_35, 2);
-		var span_22 = child(label_36);
-		var text_29 = child(span_22);
-		reset(span_22);
-		var input_27 = sibling(span_22, 2);
-		remove_input_defaults(input_27);
 		reset(label_36);
 		var label_37 = sibling(label_36, 2);
 		var span_23 = child(label_37);
@@ -60771,10 +60803,17 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_28 = sibling(span_23, 2);
 		remove_input_defaults(input_28);
 		reset(label_37);
-		var div_36 = sibling(label_37, 2);
+		var label_38 = sibling(label_37, 2);
+		var span_24 = child(label_38);
+		var text_31 = child(span_24);
+		reset(span_24);
+		var input_29 = sibling(span_24, 2);
+		remove_input_defaults(input_29);
+		reset(label_38);
+		var div_36 = sibling(label_38, 2);
 		var div_37 = sibling(child(div_36), 2);
 		each(div_37, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
-			var button_26 = root_25();
+			var button_26 = root_26();
 			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"}`);
@@ -60786,32 +60825,32 @@ function PropertiesPanel($$anchor, $$props) {
 		});
 		reset(div_37);
 		var div_38 = sibling(div_37, 2);
-		var input_29 = sibling(child(div_38), 2);
-		remove_input_defaults(input_29);
+		var input_30 = sibling(child(div_38), 2);
+		remove_input_defaults(input_30);
 		reset(div_38);
 		reset(div_36);
-		var node_9 = sibling(div_36, 2);
-		var consequent_11 = ($$anchor) => {
-			var label_38 = root_26();
-			var input_30 = sibling(child(label_38), 2);
-			remove_input_defaults(input_30);
-			reset(label_38);
-			template_effect(() => set_value(input_30, get(selectedColumn).rotation));
-			delegated("input", input_30, (e) => updateColumn(get(selectedColumn).id, { rotation: Number(e.target.value) }));
-			append($$anchor, label_38);
+		var node_10 = sibling(div_36, 2);
+		var consequent_12 = ($$anchor) => {
+			var label_39 = root_27();
+			var input_31 = sibling(child(label_39), 2);
+			remove_input_defaults(input_31);
+			reset(label_39);
+			template_effect(() => set_value(input_31, get(selectedColumn).rotation));
+			delegated("input", input_31, (e) => updateColumn(get(selectedColumn).id, { rotation: Number(e.target.value) }));
+			append($$anchor, label_39);
 		};
-		if_block(node_9, ($$render) => {
-			if (get(selectedColumn).shape === "square") $$render(consequent_11);
+		if_block(node_10, ($$render) => {
+			if (get(selectedColumn).shape === "square") $$render(consequent_12);
 		});
 		reset(div_34);
 		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_29, `${get(selectedColumn).shape === "round" ? "Diameter" : "Side Length"} (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
-			set_value(input_27, $1);
-			set_text(text_30, `Height (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
-			set_value(input_28, $3);
-			set_value(input_29, get(selectedColumn).color);
+			set_text(text_30, `${get(selectedColumn).shape === "round" ? "Diameter" : "Side Length"} (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
+			set_value(input_28, $1);
+			set_text(text_31, `Height (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
+			set_value(input_29, $3);
+			set_value(input_30, get(selectedColumn).color);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedColumn).diameter),
@@ -60820,33 +60859,29 @@ function PropertiesPanel($$anchor, $$props) {
 		]);
 		delegated("click", button_24, () => updateColumn(get(selectedColumn).id, { shape: "round" }));
 		delegated("click", button_25, () => updateColumn(get(selectedColumn).id, { shape: "square" }));
-		delegated("input", input_27, (e) => updateColumn(get(selectedColumn).id, { diameter: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_28, (e) => updateColumn(get(selectedColumn).id, { height: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_29, (e) => updateColumn(get(selectedColumn).id, { color: e.target.value }));
+		delegated("input", input_28, (e) => updateColumn(get(selectedColumn).id, { diameter: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_29, (e) => updateColumn(get(selectedColumn).id, { height: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_30, (e) => updateColumn(get(selectedColumn).id, { color: e.target.value }));
 		append($$anchor, fragment_10);
 	};
-	var consequent_13 = ($$anchor) => {
-		var div_39 = root_27();
-		var label_39 = sibling(child(div_39), 2);
-		var input_31 = sibling(child(label_39), 2);
-		remove_input_defaults(input_31);
-		reset(label_39);
-		var label_40 = sibling(label_39, 2);
+	var consequent_14 = ($$anchor) => {
+		var div_39 = root_28();
+		var label_40 = sibling(child(div_39), 2);
 		var input_32 = sibling(child(label_40), 2);
 		remove_input_defaults(input_32);
 		reset(label_40);
 		var label_41 = sibling(label_40, 2);
-		var div_40 = sibling(child(label_41), 2);
-		var input_33 = child(div_40);
+		var input_33 = sibling(child(label_41), 2);
 		remove_input_defaults(input_33);
-		var span_24 = sibling(input_33, 2);
-		var text_31 = child(span_24, true);
-		reset(span_24);
-		reset(div_40);
 		reset(label_41);
 		var label_42 = sibling(label_41, 2);
-		var input_34 = sibling(child(label_42), 2);
+		var div_40 = sibling(child(label_42), 2);
+		var input_34 = child(div_40);
 		remove_input_defaults(input_34);
+		var span_25 = sibling(input_34, 2);
+		var text_32 = child(span_25, true);
+		reset(span_25);
+		reset(div_40);
 		reset(label_42);
 		var label_43 = sibling(label_42, 2);
 		var input_35 = sibling(child(label_43), 2);
@@ -60856,22 +60891,26 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_36 = sibling(child(label_44), 2);
 		remove_input_defaults(input_36);
 		reset(label_44);
+		var label_45 = sibling(label_44, 2);
+		var input_37 = sibling(child(label_45), 2);
+		remove_input_defaults(input_37);
+		reset(label_45);
 		reset(div_39);
 		template_effect(($0, $1) => {
-			set_value(input_31, get(selectedTextAnnotation).text);
-			set_value(input_32, get(selectedTextAnnotation).fontSize);
-			set_value(input_33, get(selectedTextAnnotation).color);
-			set_text(text_31, get(selectedTextAnnotation).color);
-			set_value(input_34, get(selectedTextAnnotation).rotation);
-			set_value(input_35, $0);
-			set_value(input_36, $1);
+			set_value(input_32, get(selectedTextAnnotation).text);
+			set_value(input_33, get(selectedTextAnnotation).fontSize);
+			set_value(input_34, get(selectedTextAnnotation).color);
+			set_text(text_32, get(selectedTextAnnotation).color);
+			set_value(input_35, get(selectedTextAnnotation).rotation);
+			set_value(input_36, $0);
+			set_value(input_37, $1);
 		}, [() => Math.round(get(selectedTextAnnotation).x), () => Math.round(get(selectedTextAnnotation).y)]);
-		delegated("input", input_31, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { text: e.target.value }));
-		delegated("input", input_32, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { fontSize: Number(e.target.value) }));
-		delegated("input", input_33, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { color: e.target.value }));
-		delegated("input", input_34, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
-		delegated("input", input_35, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
-		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
+		delegated("input", input_32, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { text: e.target.value }));
+		delegated("input", input_33, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { fontSize: Number(e.target.value) }));
+		delegated("input", input_34, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { color: e.target.value }));
+		delegated("input", input_35, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
+		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
+		delegated("input", input_37, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
 		append($$anchor, div_39);
 	};
 	if_block(node, ($$render) => {
@@ -60879,20 +60918,16 @@ function PropertiesPanel($$anchor, $$props) {
 		else if (get(selectedDoor)) $$render(consequent_2, 1);
 		else if (get(selectedWindow)) $$render(consequent_3, 2);
 		else if (get(selectedFurniture)) $$render(consequent_7, 3);
-		else if (get(selectedRoom)) $$render(consequent_9, 4);
-		else if (get(selectedStair)) $$render(consequent_10, 5);
-		else if (get(selectedColumn)) $$render(consequent_12, 6);
-		else if (get(selectedTextAnnotation)) $$render(consequent_13, 7);
+		else if (get(selectedRoom)) $$render(consequent_10, 4);
+		else if (get(selectedStair)) $$render(consequent_11, 5);
+		else if (get(selectedColumn)) $$render(consequent_13, 6);
+		else if (get(selectedTextAnnotation)) $$render(consequent_14, 7);
 	});
-	var node_10 = sibling(node, 2);
-	var consequent_14 = ($$anchor) => {
-		var div_41 = root_28();
+	var node_11 = sibling(node, 2);
+	var consequent_15 = ($$anchor) => {
+		var div_41 = root_29();
 		var div_42 = sibling(child(div_41), 2);
-		var label_45 = child(div_42);
-		var input_37 = sibling(child(label_45), 2);
-		remove_input_defaults(input_37);
-		reset(label_45);
-		var label_46 = sibling(label_45, 2);
+		var label_46 = child(div_42);
 		var input_38 = sibling(child(label_46), 2);
 		remove_input_defaults(input_38);
 		reset(label_46);
@@ -60900,9 +60935,13 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_39 = sibling(child(label_47), 2);
 		remove_input_defaults(input_39);
 		reset(label_47);
-		var div_43 = sibling(label_47, 2);
+		var label_48 = sibling(label_47, 2);
+		var input_40 = sibling(child(label_48), 2);
+		remove_input_defaults(input_40);
+		reset(label_48);
+		var div_43 = sibling(label_48, 2);
 		var button_27 = child(div_43);
-		var text_32 = child(button_27, true);
+		var text_33 = child(button_27, true);
 		reset(button_27);
 		var button_28 = sibling(button_27, 2);
 		reset(div_43);
@@ -60910,15 +60949,15 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(div_42);
 		reset(div_41);
 		template_effect(() => {
-			set_value(input_37, get(floor).backgroundImage.opacity);
-			set_value(input_38, get(floor).backgroundImage.scale);
-			set_value(input_39, get(floor).backgroundImage.rotation);
+			set_value(input_38, get(floor).backgroundImage.opacity);
+			set_value(input_39, get(floor).backgroundImage.scale);
+			set_value(input_40, get(floor).backgroundImage.rotation);
 			set_class(button_27, 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_32, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
+			set_text(text_33, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
 		});
-		delegated("input", input_37, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
-		delegated("input", input_38, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
-		delegated("input", input_39, (e) => updateBackgroundImage({ rotation: Number(e.target.value) }));
+		delegated("input", input_38, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
+		delegated("input", input_39, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
+		delegated("input", input_40, (e) => updateBackgroundImage({ rotation: Number(e.target.value) }));
 		delegated("click", button_27, () => updateBackgroundImage({ locked: !get(floor).backgroundImage.locked }));
 		delegated("click", button_28, () => {
 			calibrationPoints.set([]);
@@ -60927,9 +60966,9 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("click", button_29, () => setBackgroundImage(void 0));
 		append($$anchor, div_41);
 	};
-	if_block(node_10, ($$render) => {
-		var _$$get17;
-		if (get(hasBgImage) && ((_$$get17 = get(floor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.backgroundImage)) $$render(consequent_14);
+	if_block(node_11, ($$render) => {
+		var _$$get18;
+		if (get(hasBgImage) && ((_$$get18 = get(floor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.backgroundImage)) $$render(consequent_15);
 	});
 	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 fixed right-0 z-40 shadow-lg`, null, classes, { hidden: !get(hasSelection) }));
@@ -64714,7 +64753,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
 	const $projectSettings = () => store_get(projectSettings, "$projectSettings", $$stores);
 	const [$$stores, $$cleanup] = setup_stores();
-	let selectedCameraSerial = prop($$props, "selectedCameraSerial", 3, null), showCameraCones = prop($$props, "showCameraCones", 3, false), showCameraLabels = prop($$props, "showCameraLabels", 3, true), cameraHeatmapMatrix = prop($$props, "cameraHeatmapMatrix", 19, () => []);
+	let selectedCameraSerial = prop($$props, "selectedCameraSerial", 3, null), showCameraCones = prop($$props, "showCameraCones", 3, false), showCameraLabels = prop($$props, "showCameraLabels", 3, true), cameraHeatmapMatrix = prop($$props, "cameraHeatmapMatrix", 19, () => []), cameraThumbnail = prop($$props, "cameraThumbnail", 3, "");
 	let canvas;
 	let ctx;
 	let width = /* @__PURE__ */ state(800);
@@ -64813,6 +64852,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		showCameraCones();
 		showCameraLabels();
 		cameraHeatmapMatrix();
+		cameraThumbnail();
 		$$props.projectName;
 		$$props.heatmapEnabled;
 		$$props.heatmapMatrix;
@@ -64890,6 +64930,33 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let isCalibrating = /* @__PURE__ */ state(false);
 	let calPoints = /* @__PURE__ */ state(proxy([]));
 	let bgImage = /* @__PURE__ */ state(null);
+	let thumbnailOpacity = /* @__PURE__ */ state(.65);
+	user_effect(() => {
+		var _$$get, _cameraThumbnail$trim, _cameraThumbnail;
+		const floorBgUrl = (_$$get = get(currentFloor)) === null || _$$get === void 0 || (_$$get = _$$get.backgroundImage) === null || _$$get === void 0 ? void 0 : _$$get.dataUrl;
+		const thumbnailUrl = (_cameraThumbnail$trim = (_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim()) !== null && _cameraThumbnail$trim !== void 0 ? _cameraThumbnail$trim : "";
+		const url = floorBgUrl || thumbnailUrl;
+		if (!url) {
+			set(bgImage, null);
+			return;
+		}
+		let cancelled = false;
+		const img = new Image();
+		img.onload = () => {
+			if (cancelled) return;
+			set(bgImage, img, true);
+			markDirty();
+		};
+		img.onerror = () => {
+			if (cancelled) return;
+			set(bgImage, null);
+			markDirty();
+		};
+		img.src = url;
+		return () => {
+			cancelled = true;
+		};
+	});
 	let draggingRoomLabelId = /* @__PURE__ */ state(null);
 	let roomLabelDragStart = {
 		x: 0,
@@ -65449,9 +65516,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function drawMeasurement() {
-		var _$$get;
+		var _$$get2;
 		if (!get(measureStart)) return;
-		const end = (_$$get = get(measureEnd)) !== null && _$$get !== void 0 ? _$$get : get(mousePos);
+		const end = (_$$get2 = get(measureEnd)) !== null && _$$get2 !== void 0 ? _$$get2 : get(mousePos);
 		const s = worldToScreen(get(measureStart).x, get(measureStart).y);
 		const e = worldToScreen(end.x, end.y);
 		ctx.strokeStyle = "#ef4444";
@@ -65618,13 +65685,21 @@ function FloorPlanCanvas($$anchor, $$props) {
 	function drawColumn$1(col, selected) {
 		drawColumn(getCS(), col, selected);
 	}
+	function getCameraThumbnailBounds(floor = get(currentFloor)) {
+		if (!floor) return null;
+		return getFloorBounds(floor, { includeWallThickness: true });
+	}
+	function isCameraThumbnailOverlayActive() {
+		var _cameraThumbnail2, _$$get3;
+		return !!(((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim()) && get(bgImage) && !((_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 ? void 0 : _$$get3.backgroundImage));
+	}
 	function drawBackgroundImage() {
-		var _$$get2;
-		if (!get(bgImage) || !((_$$get2 = get(currentFloor)) === null || _$$get2 === void 0 ? void 0 : _$$get2.backgroundImage)) return;
+		var _$$get4;
+		if (!get(bgImage) || !((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.backgroundImage)) return;
 		const bg = get(currentFloor).backgroundImage;
-		const s = worldToScreen(bg.position.x, bg.position.y);
 		ctx.save();
 		ctx.globalAlpha = bg.opacity;
+		const s = worldToScreen(bg.position.x, bg.position.y);
 		ctx.translate(s.x, s.y);
 		ctx.rotate(bg.rotation * Math.PI / 180);
 		const sw = get(bgImage).width * bg.scale * get(zoom);
@@ -65632,6 +65707,23 @@ function FloorPlanCanvas($$anchor, $$props) {
 		ctx.drawImage(get(bgImage), -sw / 2, -sh / 2, sw, sh);
 		ctx.restore();
 	}
+	function drawCameraThumbnail() {
+		if (!isCameraThumbnailOverlayActive() || !get(bgImage) || !get(currentFloor)) return;
+		const bounds = getCameraThumbnailBounds();
+		if (!bounds) return;
+		ctx.save();
+		ctx.globalAlpha = get(thumbnailOpacity);
+		const topLeft = worldToScreen(bounds.minX, bounds.minY);
+		const bottomRight = worldToScreen(bounds.maxX, bounds.maxY);
+		ctx.drawImage(get(bgImage), topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
+		ctx.restore();
+	}
+	function drawFloorHeatmapLayer() {
+		var _$$props$heatmapMatri, _$$props$heatmapMatri2;
+		const floor = get(currentFloor);
+		if (!floor || !$$props.heatmapEnabled || !((_$$props$heatmapMatri = $$props.heatmapMatrix) === null || _$$props$heatmapMatri === void 0 ? void 0 : _$$props$heatmapMatri.length)) return;
+		drawFloorHeatmap(getCS(), floor, (_$$props$heatmapMatri2 = $$props.heatmapMatrix) !== null && _$$props$heatmapMatri2 !== void 0 ? _$$props$heatmapMatri2 : [], get(detectedRooms));
+	}
 	function getFloorWallBounds(floor = get(currentFloor)) {
 		var _floor$walls;
 		if (!(floor === null || floor === void 0 || (_floor$walls = floor.walls) === null || _floor$walls === void 0 ? void 0 : _floor$walls.length)) return null;
@@ -65702,10 +65794,6 @@ function FloorPlanCanvas($$anchor, $$props) {
 			return id === selId || multiIds.has(id);
 		}
 		drawRooms$1();
-		if (floor && $$props.heatmapEnabled && $$props.heatmapMatrix && $$props.heatmapMatrix.length > 0) {
-			var _$$props$heatmapMatri;
-			drawFloorHeatmap(getCS(), floor, (_$$props$heatmapMatri = $$props.heatmapMatrix) !== null && _$$props$heatmapMatri !== void 0 ? _$$props$heatmapMatri : [], get(detectedRooms));
-		}
 		if (!$$props.viewOnly) drawSnapPoints$1();
 		if (get(layerVis).walls) {
 			for (const w of floor.walls) drawWall$1(w, isSelected(w.id));
@@ -66292,6 +66380,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		if (get(layerVis).annotations && floor) drawAnnotations$1(floor);
 		if (get(annotating) && get(annotationStart)) drawAnnotationPreview();
 		if (floor) drawTextAnnotations$1(floor);
+		drawCameraThumbnail();
 		if (get(draggingHandle) === "rotate" && get(currentSelectedId) && get(currentFloor)) {
 			const fi = get(currentFloor).furniture.find((f) => f.id === get(currentSelectedId));
 			if (fi) {
@@ -66328,6 +66417,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			ctx.setLineDash([]);
 			ctx.restore();
 		}
+		drawFloorHeatmapLayer();
 		drawMinimap$1();
 		requestAnimationFrame(draw);
 	}
@@ -66419,16 +66509,6 @@ function FloorPlanCanvas($$anchor, $$props) {
 			set(currentSelectedIds, ids, true);
 			markDirty();
 		});
-		const unsub14 = activeFloor.subscribe((f) => {
-			var _f$backgroundImage;
-			if ((f === null || f === void 0 || (_f$backgroundImage = f.backgroundImage) === null || _f$backgroundImage === void 0 ? void 0 : _f$backgroundImage.dataUrl) && (!get(bgImage) || get(bgImage).src !== f.backgroundImage.dataUrl)) {
-				const img = new Image();
-				img.onload = () => {
-					set(bgImage, img, true);
-				};
-				img.src = f.backgroundImage.dataUrl;
-			} else if (!(f === null || f === void 0 ? void 0 : f.backgroundImage)) set(bgImage, null);
-		});
 		const unsubZoom = canvasZoom.subscribe((v) => {
 			set(zoom, v, true);
 		});
@@ -66463,6 +66543,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			}
 		}
 		document.addEventListener("paste", handlePaste);
+		const unsubThumbOpacity = cameraThumbnailOpacity.subscribe((v) => {
+			set(thumbnailOpacity, v, true);
+			markDirty();
+		});
 		return () => {
 			resizeObs.disconnect();
 			unsub1();
@@ -66479,10 +66563,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			unsub12();
 			unsub13();
 			unsub_multi();
-			unsub14();
 			unsubZoom();
 			unsubCamX();
 			unsubCamY();
+			unsubThumbOpacity();
 			unsub_col();
 			unsub_cols();
 			unsub_layers();
@@ -66653,7 +66737,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return findRoomAt(p, get(detectedRooms), get(currentFloor).walls);
 	}
 	function onMouseDown(e) {
-		var _$$get3;
+		var _$$get5;
 		if ($$props.viewOnly) return;
 		markDirty();
 		if (e.button === 1 || e.button === 0 && (get(spaceDown) || $panMode() || e.shiftKey && get(currentTool) === "select")) {
@@ -66734,7 +66818,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			placingStair.set(false);
 			return;
 		}
-		if (tool === "select" && ((_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 ? void 0 : _$$get3.guides)) {
+		if (tool === "select" && ((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.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) {
@@ -66803,9 +66887,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 _$$get4;
+						var _$$get6;
 						const pixelsPerCm = dist / Number(realDist);
-						if ((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
+						if ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
 					}
 					calibrationMode.set(false);
 					return [];
@@ -67175,7 +67259,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function onMouseMove(e) {
-		var _$$get5, _$$get6, _$$get7, _$$get8;
+		var _$$get7, _$$get8, _$$get9, _$$get10;
 		if ($$props.viewOnly) return;
 		markDirty();
 		const rect = canvas.getBoundingClientRect();
@@ -67193,7 +67277,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			} : r));
 			return;
 		}
-		if (get(draggingGuideId) && ((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.guides)) {
+		if (get(draggingGuideId) && ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.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;
@@ -67349,7 +67433,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 			}
 		}
-		if (get(draggingTextAnnotationId) && ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.textAnnotations)) {
+		if (get(draggingTextAnnotationId) && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.textAnnotations)) {
 			const basePos = {
 				x: get(mousePos).x - textAnnotationDragOffset.x,
 				y: get(mousePos).y - textAnnotationDragOffset.y
@@ -67366,7 +67450,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}, true);
 			}
 		}
-		if (get(draggingColumnId) && ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.columns)) {
+		if (get(draggingColumnId) && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.columns)) {
 			const basePos = {
 				x: get(mousePos).x - columnDragOffset.x,
 				y: get(mousePos).y - columnDragOffset.y
@@ -67376,7 +67460,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				y: snap(basePos.y)
 			});
 		}
-		if (get(draggingStairId) && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.stairs)) {
+		if (get(draggingStairId) && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.stairs)) {
 			const basePos = {
 				x: get(mousePos).x - stairDragOffset.x,
 				y: get(mousePos).y - stairDragOffset.y
@@ -67387,12 +67471,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 		}
 		if (get(draggingFurnitureId)) {
-			var _$$get9;
+			var _$$get11;
 			const basePos = {
 				x: get(mousePos).x - dragOffset.x,
 				y: get(mousePos).y - dragOffset.y
 			};
-			const fi = (_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.furniture.find((f) => f.id === get(draggingFurnitureId));
+			const fi = (_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.furniture.find((f) => f.id === get(draggingFurnitureId));
 			if (fi) {
 				const wallSnap = snapFurnitureToWall(basePos, fi.catalogId, fi.rotation);
 				if (wallSnap) {
@@ -67405,13 +67489,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 						wallAngle: wallSnap.wallAngle
 					}, true);
 				} else {
-					var _$$get10;
+					var _$$get12;
 					const snapped = {
 						x: snap(basePos.x),
 						y: snap(basePos.y)
 					};
 					const GUIDE_SNAP = 10;
-					if ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.guides) for (const g of get(currentFloor).guides) {
+					if ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.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;
 					}
@@ -68107,8 +68191,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	let cursorStyle = /* @__PURE__ */ user_derived(() => {
-		var _$$get11;
-		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(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" : ((_$$get11 = get(draggingHandle)) === null || _$$get11 === void 0 ? void 0 : _$$get11.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 _$$get13;
+		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(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" : ((_$$get13 = get(draggingHandle)) === null || _$$get13 === void 0 ? void 0 : _$$get13.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);
@@ -68195,8 +68279,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 					}
 					set(editingTextAnnotationId, null);
 				} else if (e.key === "Escape") {
-					var _$$get12;
-					if ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.textAnnotations) {
+					var _$$get14;
+					if ((_$$get14 = get(currentFloor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.textAnnotations) {
 						const ta = get(currentFloor).textAnnotations.find((t) => t.id === get(editingTextAnnotationId));
 						if (ta && ta.text === "Text" && !get(editingTextAnnotationValue).trim()) {
 							removeTextAnnotation(get(editingTextAnnotationId));
@@ -68548,8 +68632,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 			var text_16 = child(div_8);
 			reset(div_8);
 			template_effect(() => {
-				var _$$get13;
-				return set_text(text_16, `Click to place · Scroll or R to rotate (${(_$$get13 = get(currentPlacingRotation)) !== null && _$$get13 !== void 0 ? _$$get13 : ""}°) · Esc
+				var _$$get15;
+				return set_text(text_16, `Click to place · Scroll or R to rotate (${(_$$get15 = get(currentPlacingRotation)) !== null && _$$get15 !== void 0 ? _$$get15 : ""}°) · Esc
         to cancel`);
 			});
 			append($$anchor, div_8);
@@ -69647,6 +69731,9 @@ function App($$anchor, $$props) {
 	let config = /* @__PURE__ */ state(proxy({ ...DEFAULT_CONFIG }));
 	(_$$props$stores = $$props.stores) === null || _$$props$stores === void 0 || _$$props$stores.floorData.subscribe((v) => set(floorData, v, true));
 	(_$$props$stores2 = $$props.stores) === null || _$$props$stores2 === void 0 || _$$props$stores2.config.subscribe((v) => set(config, normalizeConfig(v), true));
+	user_effect(() => {
+		if (get(config).cameraThumbnailOpacity != null) cameraThumbnailOpacity.set(get(config).cameraThumbnailOpacity);
+	});
 	let commandPaletteOpen = /* @__PURE__ */ state(false);
 	let printOpen = /* @__PURE__ */ state(false);
 	let mode = /* @__PURE__ */ state("2d");
@@ -69784,6 +69871,10 @@ function App($$anchor, $$props) {
 				var _$$get11;
 				return (_$$get11 = get(config)) === null || _$$get11 === void 0 ? void 0 : _$$get11.cameraHeatmapMatrix;
 			});
+			let $10 = /* @__PURE__ */ user_derived(() => {
+				var _$$get12;
+				return ((_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.cameraThumbnail) || "";
+			});
 			FloorPlanCanvas(node_3, {
 				get viewOnly() {
 					return get($0);
@@ -69814,6 +69905,9 @@ function App($$anchor, $$props) {
 				},
 				get cameraHeatmapMatrix() {
 					return get($9);
+				},
+				get cameraThumbnail() {
+					return get($10);
 				}
 			});
 		}
@@ -69842,8 +69936,12 @@ function App($$anchor, $$props) {
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => get(mode) === "3d");
 			let $1 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$siteCameras, _$$get12;
-				return (_$$get$siteCameras = (_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
+				var _$$get$siteCameras, _$$get13;
+				return (_$$get$siteCameras = (_$$get13 = get(config)) === null || _$$get13 === void 0 ? void 0 : _$$get13.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
+			});
+			let $2 = /* @__PURE__ */ user_derived(() => {
+				var _$$get$cameraThumbnai, _$$get14;
+				return (_$$get$cameraThumbnai = (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.cameraThumbnail) !== null && _$$get$cameraThumbnai !== void 0 ? _$$get$cameraThumbnai : "";
 			});
 			PropertiesPanel($$anchor, {
 				get is3D() {
@@ -69851,6 +69949,9 @@ function App($$anchor, $$props) {
 				},
 				get siteCameras() {
 					return get($1);
+				},
+				get cameraThumbnail() {
+					return get($2);
 				}
 			});
 		}
@@ -70016,18 +70117,11 @@ function _ensureShadowRoot() {
 	}
 	const shadow = this.attachShadow({ mode: "open" });
 	const style = document.createElement("style");
-	style.textContent = app_default + `
-
-:host {
-
+	style.textContent = app_default + `:host {
   display: block;
-
   width: 100%;
-
   height: 100%;
-
 }
-
 `;
 	shadow.appendChild(style);
 	_classPrivateFieldSet2(_wrapper, this, document.createElement("div"));