floor-editor-ts 1.3.0 → 1.3.2

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) => {
@@ -6989,19 +6994,34 @@ var DEFAULT_CONFIG = {
 	showCameraLabels: true,
 	cameraHeatmapMatrix: [],
 	siteCameras: [],
-	cameraThumbnail: ""
+	cameraThumbnail: "",
+	cameraThumbnailOpacity: .65,
+	canvasBackground: "#f8f9fa",
+	floorPlateBackground: "#f8f9fa"
 };
 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;
+	const canvasBackground = normalizeColor$1(value.canvasBackground, DEFAULT_CONFIG.canvasBackground);
+	const floorPlateBackground = normalizeColor$1(value.floorPlateBackground, DEFAULT_CONFIG.floorPlateBackground);
 	return {
 		...DEFAULT_CONFIG,
 		...value,
 		siteCameras,
-		cameraThumbnail: image
+		cameraThumbnail: image,
+		cameraThumbnailOpacity: opacity,
+		canvasBackground,
+		floorPlateBackground
 	};
 }
+function normalizeColor$1(value, fallback) {
+	if (typeof value !== "string") return fallback;
+	const trimmed = value.trim();
+	if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(trimmed)) return trimmed;
+	return fallback;
+}
 function normalizeFloorData(data) {
 	if (!data || typeof data !== "object") return createDefaultProject();
 	if (!Array.isArray(data.floors) || data.floors.length === 0) return createDefaultProject();
@@ -58101,9 +58121,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>`);
@@ -58761,7 +58781,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);
@@ -58771,7 +58791,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);
@@ -59354,17 +59374,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);
@@ -59402,7 +59423,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;
@@ -59436,17 +59457,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) {
@@ -59543,9 +59572,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);
@@ -60132,7 +60161,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 : ""})`);
@@ -60145,10 +60174,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),
@@ -60540,19 +60569,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 : "";
@@ -60563,13 +60611,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);
@@ -60581,16 +60629,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"}`);
@@ -60602,50 +60650,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);
@@ -60657,16 +60705,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;
@@ -60674,14 +60722,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);
@@ -60693,13 +60741,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);
@@ -60709,33 +60750,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),
@@ -60743,29 +60791,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);
@@ -60774,10 +60815,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"}`);
@@ -60789,32 +60837,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),
@@ -60823,33 +60871,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);
@@ -60859,22 +60903,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) => {
@@ -60882,20 +60930,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);
@@ -60903,9 +60947,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);
@@ -60913,15 +60961,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([]);
@@ -60930,9 +60978,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) }));
@@ -64717,7 +64765,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, () => []), cameraThumbnail = prop($$props, "cameraThumbnail", 3, "");
+	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, ""), canvasBackground = prop($$props, "canvasBackground", 3, "#2E353F"), floorPlateBackground = prop($$props, "floorPlateBackground", 3, "#ffffff");
 	let canvas;
 	let ctx;
 	let width = /* @__PURE__ */ state(800);
@@ -64817,6 +64865,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		showCameraLabels();
 		cameraHeatmapMatrix();
 		cameraThumbnail();
+		canvasBackground();
+		floorPlateBackground();
 		$$props.projectName;
 		$$props.heatmapEnabled;
 		$$props.heatmapMatrix;
@@ -64894,6 +64944,7 @@ 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;
@@ -65648,31 +65699,55 @@ 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 drawFloorPlateBackground() {
+		var _$$get3;
+		if (!((_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 || (_$$get3 = _$$get3.walls) === null || _$$get3 === void 0 ? void 0 : _$$get3.length)) return;
+		const bounds = getCameraThumbnailBounds(get(currentFloor));
+		if (!bounds) return;
+		const topLeft = worldToScreen(bounds.minX, bounds.minY);
+		const bottomRight = worldToScreen(bounds.maxX, bounds.maxY);
+		ctx.fillStyle = floorPlateBackground();
+		ctx.fillRect(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
+	}
+	function isCameraThumbnailOverlayActive() {
+		var _cameraThumbnail2, _$$get4;
+		return !!(((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim()) && get(bgImage) && !((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.backgroundImage));
+	}
 	function drawBackgroundImage() {
-		if (!get(bgImage) || !get(currentFloor)) return;
+		var _$$get5;
+		if (!get(bgImage) || !((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.backgroundImage)) return;
 		const bg = get(currentFloor).backgroundImage;
 		ctx.save();
-		if (bg) {
-			const s = worldToScreen(bg.position.x, bg.position.y);
-			ctx.globalAlpha = bg.opacity;
-			ctx.translate(s.x, s.y);
-			ctx.rotate(bg.rotation * Math.PI / 180);
-			const sw = get(bgImage).width * bg.scale * get(zoom);
-			const sh = get(bgImage).height * bg.scale * get(zoom);
-			ctx.drawImage(get(bgImage), -sw / 2, -sh / 2, sw, sh);
-		} else if (cameraThumbnail()) {
-			const bounds = getFloorBounds(get(currentFloor), { includeWallThickness: true });
-			if (!bounds) {
-				ctx.restore();
-				return;
-			}
-			ctx.globalAlpha = .85;
-			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.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);
+		const sh = get(bgImage).height * bg.scale * get(zoom);
+		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;
@@ -65720,7 +65795,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 		canvasDirty = false;
 		ctx.clearRect(0, 0, get(width), get(height));
-		ctx.fillStyle = "#f8f9fa";
+		ctx.fillStyle = canvasBackground();
 		ctx.fillRect(0, 0, get(width), get(height));
 		if (!$$props.viewOnly) drawGrid();
 		if (!$$props.viewOnly && get(layerVis).guides) drawGuides$1();
@@ -65742,11 +65817,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		function isSelected(id) {
 			return id === selId || multiIds.has(id);
 		}
+		drawFloorPlateBackground();
 		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));
@@ -66333,6 +66405,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) {
@@ -66369,6 +66442,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			ctx.setLineDash([]);
 			ctx.restore();
 		}
+		drawFloorHeatmapLayer();
 		drawMinimap$1();
 		requestAnimationFrame(draw);
 	}
@@ -66494,6 +66568,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			}
 		}
 		document.addEventListener("paste", handlePaste);
+		const unsubThumbOpacity = cameraThumbnailOpacity.subscribe((v) => {
+			set(thumbnailOpacity, v, true);
+			markDirty();
+		});
 		return () => {
 			resizeObs.disconnect();
 			unsub1();
@@ -66513,6 +66591,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			unsubZoom();
 			unsubCamX();
 			unsubCamY();
+			unsubThumbOpacity();
 			unsub_col();
 			unsub_cols();
 			unsub_layers();
@@ -66683,7 +66762,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return findRoomAt(p, get(detectedRooms), get(currentFloor).walls);
 	}
 	function onMouseDown(e) {
-		var _$$get3;
+		var _$$get6;
 		if ($$props.viewOnly) return;
 		markDirty();
 		if (e.button === 1 || e.button === 0 && (get(spaceDown) || $panMode() || e.shiftKey && get(currentTool) === "select")) {
@@ -66764,7 +66843,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" && ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.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) {
@@ -66833,9 +66912,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 _$$get7;
 						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 ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
 					}
 					calibrationMode.set(false);
 					return [];
@@ -67205,7 +67284,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function onMouseMove(e) {
-		var _$$get5, _$$get6, _$$get7, _$$get8;
+		var _$$get8, _$$get9, _$$get10, _$$get11;
 		if ($$props.viewOnly) return;
 		markDirty();
 		const rect = canvas.getBoundingClientRect();
@@ -67223,7 +67302,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			} : r));
 			return;
 		}
-		if (get(draggingGuideId) && ((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.guides)) {
+		if (get(draggingGuideId) && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.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;
@@ -67379,7 +67458,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 			}
 		}
-		if (get(draggingTextAnnotationId) && ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.textAnnotations)) {
+		if (get(draggingTextAnnotationId) && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.textAnnotations)) {
 			const basePos = {
 				x: get(mousePos).x - textAnnotationDragOffset.x,
 				y: get(mousePos).y - textAnnotationDragOffset.y
@@ -67396,7 +67475,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}, true);
 			}
 		}
-		if (get(draggingColumnId) && ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.columns)) {
+		if (get(draggingColumnId) && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.columns)) {
 			const basePos = {
 				x: get(mousePos).x - columnDragOffset.x,
 				y: get(mousePos).y - columnDragOffset.y
@@ -67406,7 +67485,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) && ((_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.stairs)) {
 			const basePos = {
 				x: get(mousePos).x - stairDragOffset.x,
 				y: get(mousePos).y - stairDragOffset.y
@@ -67417,12 +67496,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 		}
 		if (get(draggingFurnitureId)) {
-			var _$$get9;
+			var _$$get12;
 			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 = (_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.furniture.find((f) => f.id === get(draggingFurnitureId));
 			if (fi) {
 				const wallSnap = snapFurnitureToWall(basePos, fi.catalogId, fi.rotation);
 				if (wallSnap) {
@@ -67435,13 +67514,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 						wallAngle: wallSnap.wallAngle
 					}, true);
 				} else {
-					var _$$get10;
+					var _$$get13;
 					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 ((_$$get13 = get(currentFloor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.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;
 					}
@@ -68137,8 +68216,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 _$$get14;
+		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" : ((_$$get14 = get(draggingHandle)) === null || _$$get14 === void 0 ? void 0 : _$$get14.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);
@@ -68225,8 +68304,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 _$$get15;
+					if ((_$$get15 = get(currentFloor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.textAnnotations) {
 						const ta = get(currentFloor).textAnnotations.find((t) => t.id === get(editingTextAnnotationId));
 						if (ta && ta.text === "Text" && !get(editingTextAnnotationValue).trim()) {
 							removeTextAnnotation(get(editingTextAnnotationId));
@@ -68578,8 +68657,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 _$$get16;
+				return set_text(text_16, `Click to place · Scroll or R to rotate (${(_$$get16 = get(currentPlacingRotation)) !== null && _$$get16 !== void 0 ? _$$get16 : ""}°) · Esc
         to cancel`);
 			});
 			append($$anchor, div_8);
@@ -69677,6 +69756,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");
@@ -69818,6 +69900,14 @@ function App($$anchor, $$props) {
 				var _$$get12;
 				return ((_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.cameraThumbnail) || "";
 			});
+			let $11 = /* @__PURE__ */ user_derived(() => {
+				var _$$get13;
+				return (_$$get13 = get(config)) === null || _$$get13 === void 0 ? void 0 : _$$get13.canvasBackground;
+			});
+			let $12 = /* @__PURE__ */ user_derived(() => {
+				var _$$get14;
+				return (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.floorPlateBackground;
+			});
 			FloorPlanCanvas(node_3, {
 				get viewOnly() {
 					return get($0);
@@ -69851,6 +69941,12 @@ function App($$anchor, $$props) {
 				},
 				get cameraThumbnail() {
 					return get($10);
+				},
+				get canvasBackground() {
+					return get($11);
+				},
+				get floorPlateBackground() {
+					return get($12);
 				}
 			});
 		}
@@ -69879,8 +69975,12 @@ function App($$anchor, $$props) {
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => get(mode) === "3d");
 			let $1 = /* @__PURE__ */ user_derived(() => {
-				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 : [];
+				var _$$get$siteCameras, _$$get15;
+				return (_$$get$siteCameras = (_$$get15 = get(config)) === null || _$$get15 === void 0 ? void 0 : _$$get15.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
+			});
+			let $2 = /* @__PURE__ */ user_derived(() => {
+				var _$$get$cameraThumbnai, _$$get16;
+				return (_$$get$cameraThumbnai = (_$$get16 = get(config)) === null || _$$get16 === void 0 ? void 0 : _$$get16.cameraThumbnail) !== null && _$$get$cameraThumbnai !== void 0 ? _$$get$cameraThumbnai : "";
 			});
 			PropertiesPanel($$anchor, {
 				get is3D() {
@@ -69888,6 +69988,9 @@ function App($$anchor, $$props) {
 				},
 				get siteCameras() {
 					return get($1);
+				},
+				get cameraThumbnail() {
+					return get($2);
 				}
 			});
 		}