floor-editor-ts 1.4.5 → 1.4.7

package/dist/floor-editor.es.js

@@ -10706,7 +10706,7 @@ function drawWindowDistanceDimensions(cs, wall, window, dimSettings) {
 	}
 }
 function drawFurnitureItem(cs, item, selected, options) {
-	var _item$scale$x, _item$scale, _item$scale$y, _item$scale2, _item$width, _item$depth, _options$showCameraCo, _options$showCameraLa, _options$cameraHeatma, _item$color;
+	var _item$scale$x, _item$scale, _item$scale$y, _item$scale2, _item$width, _item$depth, _options$showCameraLa, _options$cameraHeatma, _item$color;
 	const { ctx, zoom } = cs;
 	const cat = getCatalogItem(item.catalogId);
 	if (!cat) return;
@@ -10717,13 +10717,13 @@ function drawFurnitureItem(cs, item, selected, options) {
 	const d = ((_item$depth = item.depth) !== null && _item$depth !== void 0 ? _item$depth : cat.depth) * Math.abs(sy) * zoom;
 	const angle = item.rotation * Math.PI / 180;
 	const highlighted = !!((options === null || options === void 0 ? void 0 : options.selectedCameraSerial) && item.serial && item.serial === options.selectedCameraSerial);
-	const showCameraCones = (_options$showCameraCo = options === null || options === void 0 ? void 0 : options.showCameraCones) !== null && _options$showCameraCo !== void 0 ? _options$showCameraCo : false;
+	options === null || options === void 0 || options.showCameraCones;
 	const showCameraLabels = (_options$showCameraLa = options === null || options === void 0 ? void 0 : options.showCameraLabels) !== null && _options$showCameraLa !== void 0 ? _options$showCameraLa : true;
 	const isCamera = item.catalogId === "camera";
 	const useConfigHeatmap = isCamera && highlighted && !!(options === null || options === void 0 || (_options$cameraHeatma = options.cameraHeatmapMatrix) === null || _options$cameraHeatma === void 0 ? void 0 : _options$cameraHeatma.length);
 	const drawHeatmapMatrix = useConfigHeatmap ? options.cameraHeatmapMatrix : item.heatmapMatrix;
 	const drawShowHeatmap = item.showHeatmap || useConfigHeatmap;
-	const drawCone = isCamera && (drawShowHeatmap || highlighted || showCameraCones && selected);
+	const drawCone = isCamera && selected;
 	ctx.save();
 	ctx.translate(s.x, s.y);
 	ctx.rotate(angle);
@@ -11325,20 +11325,19 @@ function drawZones(cs, floor, selectedZoneId) {
 function drawZoneDraft(cs, points, color, closed, cursor) {
 	if (!points.length && !cursor) return;
 	const { ctx, zoom } = cs;
-	const pts = [...points];
-	if (cursor) pts.push(cursor);
 	ctx.save();
 	ctx.strokeStyle = color;
 	ctx.fillStyle = hexToRgba(color, .12);
-	ctx.lineWidth = 2;
+	ctx.lineWidth = 2.5;
 	ctx.lineJoin = "round";
-	ctx.setLineDash([6 * Math.max(.6, zoom), 4 * Math.max(.6, zoom)]);
-	if (pts.length >= 2) {
+	ctx.lineCap = "round";
+	if (points.length >= 2) {
+		ctx.setLineDash([]);
 		ctx.beginPath();
-		const first = wts(cs, pts[0].x, pts[0].y);
+		const first = wts(cs, points[0].x, points[0].y);
 		ctx.moveTo(first.x, first.y);
-		for (let i = 1; i < pts.length; i++) {
-			const s = wts(cs, pts[i].x, pts[i].y);
+		for (let i = 1; i < points.length; i++) {
+			const s = wts(cs, points[i].x, points[i].y);
 			ctx.lineTo(s.x, s.y);
 		}
 		if (closed && points.length >= 3) {
@@ -11347,17 +11346,19 @@ function drawZoneDraft(cs, points, color, closed, cursor) {
 		}
 		ctx.stroke();
 	}
-	if (!closed && cursor && points.length >= 3) {
-		const a = wts(cs, cursor.x, cursor.y);
-		const b = wts(cs, points[0].x, points[0].y);
-		ctx.globalAlpha = .45;
+	if (!closed && cursor && points.length >= 1) {
+		const last = points[points.length - 1];
+		const a = wts(cs, last.x, last.y);
+		const b = wts(cs, cursor.x, cursor.y);
+		ctx.setLineDash([6 * Math.max(.6, zoom), 4 * Math.max(.6, zoom)]);
+		ctx.globalAlpha = .85;
 		ctx.beginPath();
 		ctx.moveTo(a.x, a.y);
 		ctx.lineTo(b.x, b.y);
 		ctx.stroke();
 		ctx.globalAlpha = 1;
+		ctx.setLineDash([]);
 	}
-	ctx.setLineDash([]);
 	for (let i = 0; i < points.length; i++) {
 		const s = wts(cs, points[i].x, points[i].y);
 		drawVertexIndexBadge(ctx, s.x, s.y, i, color, 9);
@@ -60152,9 +60153,9 @@ var themePreference = createThemeStore();
 init_client();
 var root_2$13 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
 var root_3$12 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
-var root_4$11 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
+var root_4$10 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
 var root_5$8 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
-var root_6$6 = /* @__PURE__ */ from_html(`<div class="space-y-4"><label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Project Name</span> <input type="text" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Untitled Project"/></label> <label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Description</span> <textarea rows="3" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none resize-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Add a description for this project..."></textarea></label></div>`);
+var root_6$5 = /* @__PURE__ */ from_html(`<div class="space-y-4"><label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Project Name</span> <input type="text" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Untitled Project"/></label> <label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Description</span> <textarea rows="3" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none resize-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Add a description for this project..."></textarea></label></div>`);
 var root_7$7 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between mb-5"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Metrics unit</span> <div class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden"><button>m, cm</button> <button>ft, inch</button></div></div> <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl divide-y divide-gray-200 dark:divide-gray-600"><label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">External Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Internal Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
@@ -60296,7 +60297,7 @@ function SettingsDialog($$anchor, $$props) {
 		var button_3 = sibling(button_2, 2);
 		var node_3 = sibling(child(button_3));
 		var consequent_2 = ($$anchor) => {
-			append($$anchor, root_4$11());
+			append($$anchor, root_4$10());
 		};
 		if_block(node_3, ($$render) => {
 			if (get(activeTab) === "appearance") $$render(consequent_2);
@@ -60315,7 +60316,7 @@ function SettingsDialog($$anchor, $$props) {
 		var div_8 = sibling(div_3, 2);
 		var node_5 = child(div_8);
 		var consequent_4 = ($$anchor) => {
-			var div_9 = root_6$6();
+			var div_9 = root_6$5();
 			var label_1 = child(div_9);
 			var input = sibling(child(label_1), 2);
 			remove_input_defaults(input);
@@ -60560,7 +60561,7 @@ delegate([
 init_client();
 var root_2$12 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between text-xs bg-gray-50 rounded px-2 py-1.5"><span class="text-gray-700"> <span class="text-gray-400"> </span></span> <span class="font-medium text-gray-800"> </span></div>`);
 var root_1$13 = /* @__PURE__ */ from_html(`<div><h4 class="text-xs font-semibold text-gray-500 uppercase mb-1.5">By Category</h4> <div class="space-y-1"></div></div>`);
-var root_4$10 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1.5 text-xs px-1 py-1"><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="text-gray-700 truncate"> </span> <span class="text-gray-500 ml-1 shrink-0"> </span></div> <div class="w-full bg-gray-200 rounded-full h-1 mt-0.5"><div class="bg-blue-400 h-1 rounded-full"></div></div></div> <span class="text-[10px] text-gray-400 w-8 text-right shrink-0"> </span></div>`);
+var root_4$9 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1.5 text-xs px-1 py-1"><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="text-gray-700 truncate"> </span> <span class="text-gray-500 ml-1 shrink-0"> </span></div> <div class="w-full bg-gray-200 rounded-full h-1 mt-0.5"><div class="bg-blue-400 h-1 rounded-full"></div></div></div> <span class="text-[10px] text-gray-400 w-8 text-right shrink-0"> </span></div>`);
 var root_3$11 = /* @__PURE__ */ from_html(`<div><h4 class="text-xs font-semibold text-gray-500 uppercase mb-1.5">Room Breakdown</h4> <div class="space-y-0.5"></div></div>`);
 var root_5$7 = /* @__PURE__ */ from_html(`<p class="text-xs text-gray-400 text-center py-4">No rooms detected yet.<br/>Draw walls to create rooms.</p>`);
 var root$6 = /* @__PURE__ */ from_html(`<div class="space-y-3"><div class="grid grid-cols-2 gap-2"><div class="bg-blue-50 rounded-lg p-2 text-center"><div class="text-lg font-bold text-blue-700"> </div> <div class="text-[10px] text-blue-500">Rooms</div></div> <div class="bg-green-50 rounded-lg p-2 text-center"><div class="text-lg font-bold text-green-700"> </div> <div class="text-[10px] text-green-500">Total Area</div></div> <div class="bg-amber-50 rounded-lg p-2 text-center"><div class="text-sm font-bold text-amber-700"> </div> <div class="text-[10px] text-amber-500">Doors / Windows</div></div> <div class="bg-purple-50 rounded-lg p-2 text-center"><div class="text-sm font-bold text-purple-700"> </div> <div class="text-[10px] text-purple-500">Wall Length</div></div></div> <!> <!></div>`);
@@ -60711,7 +60712,7 @@ function AreaSummaryPanel($$anchor, $$props) {
 		var div_14 = sibling(child(div_13), 2);
 		each(div_14, 21, () => get(allRooms), index$1, ($$anchor, room) => {
 			const pct = /* @__PURE__ */ user_derived(() => get(totalArea) > 0 ? get(room).area / get(totalArea) * 100 : 0);
-			var div_15 = root_4$10();
+			var div_15 = root_4$9();
 			var div_16 = child(div_15);
 			var div_17 = child(div_16);
 			var span_3 = child(div_17);
@@ -60915,7 +60916,7 @@ function markClean() {
 //#region src/lib/components/toolbar/VersionHistoryPanel.svelte
 init_client();
 var root_2$11 = /* @__PURE__ */ from_html(`<p class="text-sm text-gray-400 text-center py-8">No snapshots yet.<br/>Versions are saved automatically every 5 minutes.</p>`);
-var root_4$9 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between py-2 px-2 rounded-lg hover:bg-gray-50 group transition-colors"><div class="flex-1 min-w-0"><div class="text-sm font-medium text-gray-700 truncate"> </div> <div class="text-xs text-gray-400"> </div></div> <button class="text-xs px-2.5 py-1 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors opacity-0 group-hover:opacity-100 font-medium shrink-0 ml-2">Restore</button></div>`);
+var root_4$8 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between py-2 px-2 rounded-lg hover:bg-gray-50 group transition-colors"><div class="flex-1 min-w-0"><div class="text-sm font-medium text-gray-700 truncate"> </div> <div class="text-xs text-gray-400"> </div></div> <button class="text-xs px-2.5 py-1 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors opacity-0 group-hover:opacity-100 font-medium shrink-0 ml-2">Restore</button></div>`);
 var root_3$10 = /* @__PURE__ */ from_html(`<div class="space-y-1"></div>`);
 var root_5$6 = /* @__PURE__ */ from_html(`<div class="px-4 py-2 border-t border-gray-100"><button class="text-xs text-red-400 hover:text-red-600 transition-colors">Clear all versions</button></div>`);
 var root_1$12 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/40 z-50 flex items-center justify-center"><div class="bg-white rounded-xl shadow-2xl w-96 max-h-[70vh] flex flex-col"><div class="flex items-center justify-between px-4 py-3 border-b border-gray-100"><h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> Version History</h2> <button class="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div> <div class="flex-1 overflow-y-auto px-4 py-2"><!></div> <!></div></div>`);
@@ -60970,7 +60971,7 @@ function VersionHistoryPanel($$anchor, $$props) {
 			var div_4 = root_3$10();
 			each(div_4, 21, () => [...get(snapshots)].reverse(), index$1, ($$anchor, snap, i) => {
 				const realIndex = /* @__PURE__ */ user_derived(() => get(snapshots).length - 1 - i);
-				var div_5 = root_4$9();
+				var div_5 = root_4$8();
 				var div_6 = child(div_5);
 				var div_7 = child(div_6);
 				var text = child(div_7, true);
@@ -61031,9 +61032,9 @@ init_client();
 init_index_client();
 init_onboarding_svelte();
 var root_3$9 = /* @__PURE__ */ from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v3a2 2 0 0 1-2 2H3"></path><path d="M21 8h-3a2 2 0 0 1-2-2V3"></path><path d="M3 16h3a2 2 0 0 1 2 2v3"></path><path d="M16 21v-3a2 2 0 0 1 2-2h3"></path></svg>`);
-var root_4$8 = /* @__PURE__ */ from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3"></path><path d="M21 8V5a2 2 0 0 0-2-2h-3"></path><path d="M3 16v3a2 2 0 0 0 2 2h3"></path><path d="M16 21h3a2 2 0 0 0 2-2v-3"></path></svg>`);
+var root_4$7 = /* @__PURE__ */ from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3"></path><path d="M21 8V5a2 2 0 0 0-2-2h-3"></path><path d="M3 16v3a2 2 0 0 0 2 2h3"></path><path d="M16 21h3a2 2 0 0 0 2-2v-3"></path></svg>`);
 var root_5$5 = /* @__PURE__ */ from_html(`<input type="text" class="bg-white/20 text-white font-semibold px-2 py-0.5 rounded border border-white/30 outline-none text-sm w-40"/>`);
-var root_6$5 = /* @__PURE__ */ from_html(`<button class="font-semibold text-white text-sm hover:bg-white/10 px-2 py-0.5 rounded transition-colors" title="Click to rename"> </button>`);
+var root_6$4 = /* @__PURE__ */ from_html(`<button class="font-semibold text-white text-sm hover:bg-white/10 px-2 py-0.5 rounded transition-colors" title="Click to rename"> </button>`);
 var root_7$6 = /* @__PURE__ */ from_html(`<button> </button>`);
 var root_8$3 = /* @__PURE__ */ from_html(`<button aria-label="Snap to Grid"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></button>`);
 var root_9$3 = /* @__PURE__ */ from_html(`<div class="flex bg-white/15 rounded-full p-0.5 shrink-0"><button title="Select mode (V)" aria-label="Select mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></button> <button title="Pan mode (H)" aria-label="Pan mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v1"></path><path d="M14 10V4a2 2 0 0 0-4 0v2"></path><path d="M10 10.5V6a2 2 0 0 0-4 0v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"></path></svg></button></div>`);
@@ -61312,7 +61313,7 @@ function TopBar($$anchor, $$props) {
 			append($$anchor, root_3$9());
 		};
 		var alternate = ($$anchor) => {
-			append($$anchor, root_4$8());
+			append($$anchor, root_4$7());
 		};
 		if_block(node_1, ($$render) => {
 			if (get(isFullscreen)) $$render(consequent);
@@ -61329,7 +61330,7 @@ function TopBar($$anchor, $$props) {
 			append($$anchor, input_1);
 		};
 		var alternate_1 = ($$anchor) => {
-			var button_2 = root_6$5();
+			var button_2 = root_6$4();
 			var text_1 = child(button_2, true);
 			reset(button_2);
 			template_effect(() => set_text(text_1, get(projectName)));
@@ -62226,7 +62227,7 @@ function placeRoomTemplate(preset, origin, template, w = 400, h = 300) {
 //#region src/lib/components/editor/UndoHistoryPanel.svelte
 init_client();
 var root_2$9 = /* @__PURE__ */ from_html(`<div class="px-3 py-6 text-center text-xs text-gray-400">No history yet</div>`);
-var root_4$7 = /* @__PURE__ */ from_html(`<button><span class="w-5 text-[10px] text-gray-400 text-right shrink-0"></span> <span class="truncate flex-1"> </span> <span class="text-[10px] text-gray-300 shrink-0"> </span></button>`);
+var root_4$6 = /* @__PURE__ */ from_html(`<button><span class="w-5 text-[10px] text-gray-400 text-right shrink-0"></span> <span class="truncate flex-1"> </span> <span class="text-[10px] text-gray-300 shrink-0"> </span></button>`);
 var root_3$8 = /* @__PURE__ */ from_html(`<div class="py-1"><!> <div><span class="w-5 text-[10px] text-gray-400 text-right shrink-0">●</span> <span class="truncate flex-1 font-medium">Current state</span></div></div>`);
 var root_1$10 = /* @__PURE__ */ from_html(`<div class="fixed bottom-12 left-4 w-64 max-h-80 bg-white rounded-xl shadow-2xl border border-gray-200 z-50 flex flex-col overflow-hidden"><div class="flex items-center justify-between px-3 py-2 border-b border-gray-100 bg-gray-50"><div class="flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-500"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg> <span class="text-xs font-semibold text-slate-700">Undo History</span></div> <div class="flex items-center gap-2"><span class="text-[10px] text-slate-400"> </span> <button class="text-gray-400 hover:text-gray-600 text-sm leading-none" aria-label="Close history">✕</button></div></div> <div class="flex-1 overflow-y-auto"><!></div></div>`);
 function UndoHistoryPanel($$anchor, $$props) {
@@ -62270,7 +62271,7 @@ function UndoHistoryPanel($$anchor, $$props) {
 			var div_5 = root_3$8();
 			var node_2 = child(div_5);
 			each(node_2, 17, () => get(history).entries, index$1, ($$anchor, entry, i) => {
-				var button_1 = root_4$7();
+				var button_1 = root_4$6();
 				let classes;
 				var span_1 = child(button_1);
 				span_1.textContent = i + 1;
@@ -62328,12 +62329,10 @@ delegate(["click"]);
 //#region src/lib/components/sidebar/BuildPanel.svelte
 init_client();
 init_index_client();
-var root_4$6 = /* @__PURE__ */ from_html(`Click path · nhấn <strong>✓</strong> trên toolbar để đóng · 🗑 xoá`, 1);
 var root_7$5 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#92400e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path></path></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
 var root_8$2 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0e7490" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="1"></rect><line x1="12" y1="4" x2="12" y2="20"></line><line x1="3" y1="12" x2="21" y2="12"></line></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
-var root_6$4 = /* @__PURE__ */ from_html(`<div class="grid grid-cols-2 gap-2 mb-3"></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Windows</h3> <div class="grid grid-cols-2 gap-2"></div>`, 1);
-var root_1$9 = /* @__PURE__ */ from_html(`<div class="space-y-1"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Tools</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></div> <div class="text-left"><div class="font-medium">Select <span class="text-gray-400 text-xs ml-1">V</span></div> <div class="text-xs text-gray-400">Click to select elements</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="8" rx="1"></rect><line x1="7" y1="8" x2="7" y2="16"></line><line x1="12" y1="8" x2="12" y2="16"></line><line x1="17" y1="8" x2="17" y2="16"></line></svg></div> <div class="text-left"><div class="font-medium">Draw Wall <span class="text-gray-400 text-xs ml-1">W</span></div> <div class="text-xs text-gray-400">Click to draw, dbl-click to finish</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Camera FOV</h3> <button type="button"><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg></div> <div class="text-left"><div class="font-medium">Draw surveillance FOV</div> <div class="text-xs text-gray-400">Click path · ✓ toolbar to finish</div></div></button> <p class="text-[10px] text-gray-400 mb-3 px-0.5">Select a camera, draw on floor → <code class="font-mono">mapCoordinates</code>.
-          Nhấn ✓ đóng polygon · 🗑 xoá. Click polygon để hiện lại toolbar.</p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Zone</h3> <div class="grid grid-cols-3 gap-1.5 mb-1"><button type="button" title="Drag to create rectangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="4" y="6" width="16" height="12" rx="1"></rect></svg> Rect</button> <button type="button" title="Click to place triangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M12 4 L20 19 L4 19 Z"></path></svg> Triangle</button> <button type="button" title="Click vertices; double-click or Enter to finish"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg> Polygon</button></div> <p class="text-[10px] text-gray-400 mb-2 px-0.5"><!></p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Structure</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 5h-5V2h-3v6h-4V5H7v6H2v3h5v3h3v-3h4v3h3v-6h5z"></path></svg></div> <div class="text-left"><div class="font-medium">Add Stairs</div> <div class="text-xs text-gray-400">Click to place stairs</div></div></button> <div class="flex gap-2"><button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="6"></circle><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Round Column</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"></rect><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Square Column</div></div></button></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Annotate</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"></path><line x1="12" y1="4" x2="12" y2="20"></line><line x1="8" y1="20" x2="16" y2="20"></line></svg></div> <div class="text-left"><div class="font-medium">Text Label</div> <div class="text-xs text-gray-400">Add text annotations (T)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><line x1="16" y1="5" x2="22" y2="5"></line><line x1="19" y1="2" x2="19" y2="8"></line><line x1="3" y1="12" x2="12" y2="12"></line></svg></div> <div class="text-left"><div class="font-medium">Dimension</div> <div class="text-xs text-gray-400">Add dimension annotations (N)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h5l2-7 4 14 2-7h7"></path></svg></div> <div class="text-left"><div class="font-medium">Measure</div> <div class="text-xs text-gray-400">Measure distances (M)</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Import</h3> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="text-left"><div class="font-medium">Import Image</div> <div class="text-xs text-gray-400">Floor plan background</div></div></button> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div> <div class="text-left"><div class="font-medium">Import RoomPlan</div> <div class="text-xs text-gray-400">iOS LiDAR scan (.json/.zip)</div></div></button> <button class="w-full flex items-center justify-between px-1 py-2 mt-3"><h3 class="text-xs font-semibold text-gray-400 uppercase">Doors</h3> <span class="text-gray-400 text-xs"> </span></button> <!></div>`);
+var root_6$3 = /* @__PURE__ */ from_html(`<div class="grid grid-cols-2 gap-2 mb-3"></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Windows</h3> <div class="grid grid-cols-2 gap-2"></div>`, 1);
+var root_1$9 = /* @__PURE__ */ from_html(`<div class="space-y-1"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Tools</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></div> <div class="text-left"><div class="font-medium">Select <span class="text-gray-400 text-xs ml-1">V</span></div> <div class="text-xs text-gray-400">Click to select elements</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="8" rx="1"></rect><line x1="7" y1="8" x2="7" y2="16"></line><line x1="12" y1="8" x2="12" y2="16"></line><line x1="17" y1="8" x2="17" y2="16"></line></svg></div> <div class="text-left"><div class="font-medium">Draw Wall <span class="text-gray-400 text-xs ml-1">W</span></div> <div class="text-xs text-gray-400">Click to draw, dbl-click to finish</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Camera FOV</h3> <button type="button"><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg></div> <div class="text-left min-w-0"><div class="font-medium truncate whitespace-nowrap">Draw FOV · ✓ finish · 🗑 delete</div></div></button> <p class="text-[10px] text-gray-400 mb-3 px-0.5 whitespace-nowrap overflow-hidden text-ellipsis">Select camera, draw on floor → <code class="font-mono">mapCoordinates</code></p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Zone</h3> <div class="grid grid-cols-3 gap-1.5 mb-1"><button type="button" title="Drag to create rectangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="4" y="6" width="16" height="12" rx="1"></rect></svg> Rect</button> <button type="button" title="Click to place triangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M12 4 L20 19 L4 19 Z"></path></svg> Triangle</button> <button type="button" title="Click vertices; double-click or Enter to finish"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg> Polygon</button></div> <p class="text-[10px] text-gray-400 mb-2 px-0.5"><!></p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Structure</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 5h-5V2h-3v6h-4V5H7v6H2v3h5v3h3v-3h4v3h3v-6h5z"></path></svg></div> <div class="text-left"><div class="font-medium">Add Stairs</div> <div class="text-xs text-gray-400">Click to place stairs</div></div></button> <div class="flex gap-2"><button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="6"></circle><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Round Column</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"></rect><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Square Column</div></div></button></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Annotate</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"></path><line x1="12" y1="4" x2="12" y2="20"></line><line x1="8" y1="20" x2="16" y2="20"></line></svg></div> <div class="text-left"><div class="font-medium">Text Label</div> <div class="text-xs text-gray-400">Add text annotations (T)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><line x1="16" y1="5" x2="22" y2="5"></line><line x1="19" y1="2" x2="19" y2="8"></line><line x1="3" y1="12" x2="12" y2="12"></line></svg></div> <div class="text-left"><div class="font-medium">Dimension</div> <div class="text-xs text-gray-400">Add dimension annotations (N)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h5l2-7 4 14 2-7h7"></path></svg></div> <div class="text-left"><div class="font-medium">Measure</div> <div class="text-xs text-gray-400">Measure distances (M)</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Import</h3> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="text-left"><div class="font-medium">Import Image</div> <div class="text-xs text-gray-400">Floor plan background</div></div></button> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div> <div class="text-left"><div class="font-medium">Import RoomPlan</div> <div class="text-xs text-gray-400">iOS LiDAR scan (.json/.zip)</div></div></button> <button class="w-full flex items-center justify-between px-1 py-2 mt-3"><h3 class="text-xs font-semibold text-gray-400 uppercase">Doors</h3> <span class="text-gray-400 text-xs"> </span></button> <!></div>`);
 var root_10$3 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center text-2xl font-mono"> </div> <span class="text-xs font-medium text-gray-600"> </span></button>`);
 var root_11$3 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-green-300 hover:bg-green-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center text-lg"><!></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
 var root_9$2 = /* @__PURE__ */ from_html(`<div class="space-y-2"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Presets</h3> <p class="text-xs text-gray-400 mb-3">Click to add a room shape to the canvas</p> <div class="grid grid-cols-2 gap-2"></div> <hr class="my-3 border-gray-200"/> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Templates</h3> <p class="text-xs text-gray-400 mb-3">Pre-furnished rooms — walls + furniture in one click</p> <div class="grid grid-cols-2 gap-2"></div></div>`);
@@ -62706,9 +62705,7 @@ function BuildPanel($$anchor, $$props) {
 			append($$anchor, text$1("Click to place · then drag vertices"));
 		};
 		var consequent_2 = ($$anchor) => {
-			var fragment_1 = root_4$6();
-			next(2);
-			append($$anchor, fragment_1);
+			append($$anchor, text$1("Click path · ✓ to finish · 🗑 to delete"));
 		};
 		var alternate = ($$anchor) => {
 			append($$anchor, text$1("Select a camera first, then draw its Zone"));
@@ -62750,13 +62747,13 @@ function BuildPanel($$anchor, $$props) {
 		var button_16 = sibling(button_15, 2);
 		var button_17 = sibling(button_16, 2);
 		var span = sibling(child(button_17), 2);
-		var text_4 = child(span, true);
+		var text_5 = child(span, true);
 		reset(span);
 		reset(button_17);
 		var node_2 = sibling(button_17, 2);
 		var consequent_3 = ($$anchor) => {
-			var fragment_2 = root_6$4();
-			var div_15 = first_child(fragment_2);
+			var fragment_1 = root_6$3();
+			var div_15 = first_child(fragment_1);
 			each(div_15, 21, () => doorCatalog, index$1, ($$anchor, dc) => {
 				var button_18 = root_7$5();
 				var div_16 = child(button_18);
@@ -62765,17 +62762,17 @@ function BuildPanel($$anchor, $$props) {
 				reset(svg);
 				reset(div_16);
 				var span_1 = sibling(div_16, 2);
-				var text_5 = child(span_1, true);
+				var text_6 = child(span_1, true);
 				reset(span_1);
 				var span_2 = sibling(span_1, 2);
-				var text_6 = child(span_2, true);
+				var text_7 = child(span_2, true);
 				reset(span_2);
 				reset(button_18);
 				template_effect(() => {
 					set_class(button_18, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "door" && get(selectedDoorType) === get(dc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
 					set_attribute(path, "d", get(dc).icon);
-					set_text(text_5, get(dc).name);
-					set_text(text_6, get(dc).desc);
+					set_text(text_6, get(dc).name);
+					set_text(text_7, get(dc).desc);
 				});
 				delegated("click", button_18, () => setDoorType(get(dc).type));
 				event("dragstart", button_18, (e) => {
@@ -62790,16 +62787,16 @@ function BuildPanel($$anchor, $$props) {
 			each(div_17, 21, () => windowCatalog, index$1, ($$anchor, wc) => {
 				var button_19 = root_8$2();
 				var span_3 = sibling(child(button_19), 2);
-				var text_7 = child(span_3, true);
+				var text_8 = child(span_3, true);
 				reset(span_3);
 				var span_4 = sibling(span_3, 2);
-				var text_8 = child(span_4, true);
+				var text_9 = child(span_4, true);
 				reset(span_4);
 				reset(button_19);
 				template_effect(() => {
 					set_class(button_19, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "window" && get(selectedWindowType) === get(wc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
-					set_text(text_7, get(wc).name);
-					set_text(text_8, get(wc).desc);
+					set_text(text_8, get(wc).name);
+					set_text(text_9, get(wc).desc);
 				});
 				delegated("click", button_19, () => setWindowType(get(wc).type));
 				event("dragstart", button_19, (e) => {
@@ -62810,7 +62807,7 @@ function BuildPanel($$anchor, $$props) {
 				append($$anchor, button_19);
 			});
 			reset(div_17);
-			append($$anchor, fragment_2);
+			append($$anchor, fragment_1);
 		};
 		if_block(node_2, ($$render) => {
 			if (get(constructionOpen)) $$render(consequent_3);
@@ -62838,7 +62835,7 @@ function BuildPanel($$anchor, $$props) {
 			set_class(div_13, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "annotate" ? "bg-blue-100" : ""}`);
 			set_class(button_14, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "measure" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
 			set_class(div_14, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "measure" ? "bg-blue-100" : ""}`);
-			set_text(text_4, get(constructionOpen) ? "▼" : "▶");
+			set_text(text_5, get(constructionOpen) ? "▼" : "▶");
 		});
 		delegated("click", button_3, () => setTool("select"));
 		delegated("click", button_4, () => setTool("wall"));
@@ -62863,15 +62860,15 @@ function BuildPanel($$anchor, $$props) {
 		each(div_19, 21, () => roomPresets, index$1, ($$anchor, preset) => {
 			var button_20 = root_10$3();
 			var div_20 = child(button_20);
-			var text_9 = child(div_20, true);
+			var text_10 = child(div_20, true);
 			reset(div_20);
 			var span_5 = sibling(div_20, 2);
-			var text_10 = child(span_5, true);
+			var text_11 = child(span_5, true);
 			reset(span_5);
 			reset(button_20);
 			template_effect(() => {
-				set_text(text_9, get(preset).icon);
-				set_text(text_10, get(preset).name);
+				set_text(text_10, get(preset).icon);
+				set_text(text_11, get(preset).name);
 			});
 			delegated("click", button_20, () => onPresetClick(get(preset).id));
 			event("dragstart", button_20, (e) => {
@@ -62919,16 +62916,16 @@ function BuildPanel($$anchor, $$props) {
 			});
 			reset(div_22);
 			var span_6 = sibling(div_22, 2);
-			var text_18 = child(span_6, true);
+			var text_19 = child(span_6, true);
 			reset(span_6);
 			var span_7 = sibling(span_6, 2);
-			var text_19 = child(span_7);
+			var text_20 = child(span_7);
 			reset(span_7);
 			reset(button_21);
 			template_effect(() => {
 				var _$$get$furniture$leng;
-				set_text(text_18, get(tmpl).name);
-				set_text(text_19, `${(_$$get$furniture$leng = get(tmpl).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} items`);
+				set_text(text_19, get(tmpl).name);
+				set_text(text_20, `${(_$$get$furniture$leng = get(tmpl).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} items`);
 			});
 			delegated("click", button_21, () => onPresetClick(get(tmpl).presetId, get(tmpl).name));
 			event("dragstart", button_21, (e) => {
@@ -62960,11 +62957,11 @@ function BuildPanel($$anchor, $$props) {
 		var node_5 = sibling(div_24, 2);
 		var consequent_13 = ($$anchor) => {
 			var div_25 = root_21$2();
-			var text_20 = child(div_25);
+			var text_21 = child(div_25);
 			reset(div_25);
 			template_effect(() => {
 				var _$$get$length, _$$get;
-				return set_text(text_20, `${(_$$get$length = get(filtered).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} result${get(filtered).length !== 1 ? "s" : ""} for "${(_$$get = get(search)) !== null && _$$get !== void 0 ? _$$get : ""}"`);
+				return set_text(text_21, `${(_$$get$length = get(filtered).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} result${get(filtered).length !== 1 ? "s" : ""} for "${(_$$get = get(search)) !== null && _$$get !== void 0 ? _$$get : ""}"`);
 			});
 			append($$anchor, div_25);
 		};
@@ -62974,17 +62971,17 @@ function BuildPanel($$anchor, $$props) {
 		var div_26 = sibling(node_5, 2);
 		var button_23 = child(div_26);
 		var button_24 = sibling(button_23, 2);
-		var text_21 = child(button_24);
+		var text_22 = child(button_24);
 		reset(button_24);
 		each(sibling(button_24, 2), 17, () => furnitureCategories, index$1, ($$anchor, cat) => {
 			var button_25 = root_22$2();
-			var text_22 = child(button_25, true);
+			var text_23 = child(button_25, true);
 			reset(button_25);
 			template_effect(() => {
 				var _categoryColors$$$get;
 				set_class(button_25, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === get(cat) ? "text-white" : "text-gray-600 hover:bg-gray-200"}`);
 				set_style(button_25, get(selectedCategory) === get(cat) ? `background-color: ${(_categoryColors$$$get = categoryColors[get(cat)]) !== null && _categoryColors$$$get !== void 0 ? _categoryColors$$$get : "#6b7280"}` : "background-color: #f3f4f6");
-				set_text(text_22, get(cat));
+				set_text(text_23, get(cat));
 			});
 			delegated("click", button_25, () => set(selectedCategory, get(cat), true));
 			append($$anchor, button_25);
@@ -62992,19 +62989,19 @@ function BuildPanel($$anchor, $$props) {
 		reset(div_26);
 		var node_7 = sibling(div_26, 2);
 		var consequent_14 = ($$anchor) => {
-			var fragment_3 = root_23$1();
-			var div_27 = first_child(fragment_3);
+			var fragment_2 = root_23$1();
+			var div_27 = first_child(fragment_2);
 			var div_28 = sibling(child(div_27), 2);
 			each(div_28, 21, () => get(recentItems), index$1, ($$anchor, item) => {
 				var button_26 = root_24$2();
 				var span_8 = child(button_26);
-				var text_23 = child(span_8, true);
+				var text_24 = child(span_8, true);
 				reset(span_8);
 				var div_29 = sibling(span_8, 2);
 				var div_30 = child(div_29);
 				reset(div_29);
 				var span_9 = sibling(div_29, 2);
-				var text_24 = child(span_9, true);
+				var text_25 = child(span_9, true);
 				reset(span_9);
 				reset(button_26);
 				template_effect(($0, $1, $2) => {
@@ -63012,10 +63009,10 @@ function BuildPanel($$anchor, $$props) {
 					set_class(button_26, 1, `relative flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
 					set_class(span_8, 1, `absolute top-1 right-1 text-[12px] leading-none cursor-pointer ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 					set_attribute(span_8, "title", $1);
-					set_text(text_23, $2);
+					set_text(text_24, $2);
 					set_style(div_29, `background-color: ${(_$$get$color = get(item).color) !== null && _$$get$color !== void 0 ? _$$get$color : ""}20`);
 					set_style(div_30, `background-color: ${(_$$get$color2 = get(item).color) !== null && _$$get$color2 !== void 0 ? _$$get$color2 : ""}; opacity: 0.7`);
-					set_text(text_24, get(item).name);
+					set_text(text_25, get(item).name);
 				}, [
 					() => get(favoriteIds).includes(get(item).id) ? "text-pink-500" : "text-gray-300 hover:text-pink-400",
 					() => get(favoriteIds).includes(get(item).id) ? "Remove from favorites" : "Add to favorites",
@@ -63046,7 +63043,7 @@ function BuildPanel($$anchor, $$props) {
 			reset(div_28);
 			reset(div_27);
 			next(2);
-			append($$anchor, fragment_3);
+			append($$anchor, fragment_2);
 		};
 		if_block(node_7, ($$render) => {
 			if (!get(search) && get(selectedCategory) === "All" && get(recentItems).length > 0) $$render(consequent_14);
@@ -63056,7 +63053,7 @@ function BuildPanel($$anchor, $$props) {
 			const s = /* @__PURE__ */ user_derived(() => get(search).toLowerCase());
 			var button_27 = root_25$1();
 			var span_10 = child(button_27);
-			var text_25 = child(span_10, true);
+			var text_26 = child(span_10, true);
 			reset(span_10);
 			var div_32 = sibling(span_10, 2);
 			var div_33 = child(div_32);
@@ -63065,16 +63062,16 @@ function BuildPanel($$anchor, $$props) {
 			var consequent_15 = ($$anchor) => {
 				const idx = /* @__PURE__ */ user_derived(() => get(item).name.toLowerCase().indexOf(get(s)));
 				var span_11 = root_26$1();
-				var text_26 = child(span_11, true);
-				var mark = sibling(text_26);
-				var text_27 = child(mark, true);
+				var text_27 = child(span_11, true);
+				var mark = sibling(text_27);
+				var text_28 = child(mark, true);
 				reset(mark);
-				var text_28 = sibling(mark, 1, true);
+				var text_29 = sibling(mark, 1, true);
 				reset(span_11);
 				template_effect(($0, $1, $2) => {
-					set_text(text_26, $0);
-					set_text(text_27, $1);
-					set_text(text_28, $2);
+					set_text(text_27, $0);
+					set_text(text_28, $1);
+					set_text(text_29, $2);
 				}, [
 					() => get(item).name.slice(0, get(idx)),
 					() => get(item).name.slice(get(idx), get(idx) + get(s).length),
@@ -63085,9 +63082,9 @@ function BuildPanel($$anchor, $$props) {
 			var d = /* @__PURE__ */ user_derived(() => get(s) && get(item).name.toLowerCase().includes(get(s)));
 			var alternate_2 = ($$anchor) => {
 				var span_12 = root_27$1();
-				var text_29 = child(span_12, true);
+				var text_30 = child(span_12, true);
 				reset(span_12);
-				template_effect(() => set_text(text_29, get(item).name));
+				template_effect(() => set_text(text_30, get(item).name));
 				append($$anchor, span_12);
 			};
 			if_block(node_8, ($$render) => {
@@ -63095,7 +63092,7 @@ function BuildPanel($$anchor, $$props) {
 				else $$render(alternate_2, -1);
 			});
 			var span_13 = sibling(node_8, 2);
-			var text_30 = child(span_13);
+			var text_31 = child(span_13);
 			reset(span_13);
 			reset(button_27);
 			template_effect(($0, $1, $2) => {
@@ -63103,10 +63100,10 @@ function BuildPanel($$anchor, $$props) {
 				set_class(button_27, 1, `relative flex flex-col items-center gap-1 p-3 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
 				set_class(span_10, 1, `absolute top-1 right-1 text-[12px] leading-none cursor-pointer ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 				set_attribute(span_10, "title", $1);
-				set_text(text_25, $2);
+				set_text(text_26, $2);
 				set_style(div_32, `background-color: ${(_$$get$color3 = get(item).color) !== null && _$$get$color3 !== void 0 ? _$$get$color3 : ""}20`);
 				set_style(div_33, `background-color: ${(_$$get$color4 = get(item).color) !== null && _$$get$color4 !== void 0 ? _$$get$color4 : ""}; opacity: 0.7`);
-				set_text(text_30, `${(_$$get$width = get(item).width) !== null && _$$get$width !== void 0 ? _$$get$width : ""}×${(_$$get$depth = get(item).depth) !== null && _$$get$depth !== void 0 ? _$$get$depth : ""}cm`);
+				set_text(text_31, `${(_$$get$width = get(item).width) !== null && _$$get$width !== void 0 ? _$$get$width : ""}×${(_$$get$depth = get(item).depth) !== null && _$$get$depth !== void 0 ? _$$get$depth : ""}cm`);
 			}, [
 				() => get(favoriteIds).includes(get(item).id) ? "text-pink-500" : "text-gray-300 hover:text-pink-400",
 				() => get(favoriteIds).includes(get(item).id) ? "Remove from favorites" : "Add to favorites",
@@ -63139,7 +63136,7 @@ function BuildPanel($$anchor, $$props) {
 		template_effect(() => {
 			set_class(button_23, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "All" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
 			set_class(button_24, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "Favorites" ? "bg-pink-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
-			set_text(text_21, `♥ Favorites${get(favoriteIds).length ? ` (${get(favoriteIds).length})` : ""}`);
+			set_text(text_22, `♥ Favorites${get(favoriteIds).length ? ` (${get(favoriteIds).length})` : ""}`);
 		});
 		bind_value(input_1, () => get(search), ($$value) => set(search, $$value));
 		delegated("click", button_23, () => set(selectedCategory, "All"));
@@ -63171,14 +63168,14 @@ function BuildPanel($$anchor, $$props) {
 		var div_39 = sibling(div_36, 2);
 		var div_40 = child(div_39);
 		var span_14 = child(div_40);
-		var text_31 = child(span_14, true);
+		var text_32 = child(span_14, true);
 		reset(span_14);
 		var span_15 = sibling(span_14, 2);
-		var text_32 = child(span_15, true);
+		var text_33 = child(span_15, true);
 		reset(span_15);
 		reset(div_40);
 		var div_41 = sibling(div_40, 2);
-		var text_33 = child(div_41);
+		var text_34 = child(div_41);
 		reset(div_41);
 		reset(div_39);
 		reset(div_35);
@@ -63188,10 +63185,10 @@ function BuildPanel($$anchor, $$props) {
 			set_style(div_34, `left: ${(_$$get$x = get(hoverPos).x) !== null && _$$get$x !== void 0 ? _$$get$x : ""}px; top: ${(_$$get$y = get(hoverPos).y) !== null && _$$get$y !== void 0 ? _$$get$y : ""}px;`);
 			set_style(div_37, `background-color: ${(_$$get$color5 = get(item).color) !== null && _$$get$color5 !== void 0 ? _$$get$color5 : ""}20`);
 			set_style(div_38, `background-color: ${(_$$get$color6 = get(item).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : ""}; opacity: 0.7`);
-			set_text(text_31, get(item).name);
+			set_text(text_32, get(item).name);
 			set_style(span_15, `background-color: ${(_ref = (_categoryColors$$$get2 = categoryColors[get(item).category]) !== null && _categoryColors$$$get2 !== void 0 ? _categoryColors$$$get2 : "#6b7280") !== null && _ref !== void 0 ? _ref : ""}`);
-			set_text(text_32, get(item).category);
-			set_text(text_33, `${(_$$get$width2 = get(item).width) !== null && _$$get$width2 !== void 0 ? _$$get$width2 : ""} × ${(_$$get$depth2 = get(item).depth) !== null && _$$get$depth2 !== void 0 ? _$$get$depth2 : ""} × ${(_$$get$height = get(item).height) !== null && _$$get$height !== void 0 ? _$$get$height : ""} cm`);
+			set_text(text_33, get(item).category);
+			set_text(text_34, `${(_$$get$width2 = get(item).width) !== null && _$$get$width2 !== void 0 ? _$$get$width2 : ""} × ${(_$$get$depth2 = get(item).depth) !== null && _$$get$depth2 !== void 0 ? _$$get$depth2 : ""} × ${(_$$get$height = get(item).height) !== null && _$$get$height !== void 0 ? _$$get$height : ""} cm`);
 		});
 		append($$anchor, div_34);
 	};
@@ -63203,7 +63200,7 @@ function BuildPanel($$anchor, $$props) {
 		var div_42 = root_29$1();
 		var div_43 = child(div_42);
 		var p_2 = sibling(child(div_43), 2);
-		var text_34 = child(p_2, true);
+		var text_35 = child(p_2, true);
 		reset(p_2);
 		var div_44 = sibling(p_2, 2);
 		var label = child(div_44);
@@ -63217,7 +63214,7 @@ function BuildPanel($$anchor, $$props) {
 		var div_45 = sibling(input_3, 2);
 		var div_46 = child(div_45);
 		var span_16 = sibling(child(div_46));
-		var text_35 = child(span_16, true);
+		var text_36 = child(span_16, true);
 		reset(span_16);
 		reset(div_46);
 		next(2);
@@ -63235,8 +63232,8 @@ function BuildPanel($$anchor, $$props) {
 		reset(div_43);
 		reset(div_42);
 		template_effect(() => {
-			set_text(text_34, get(importFileName));
-			set_text(text_35, "v5");
+			set_text(text_35, get(importFileName));
+			set_text(text_36, "v5");
 		});
 		delegated("click", div_42, cancelImport);
 		delegated("click", div_43, (e) => e.stopPropagation());
@@ -63659,15 +63656,15 @@ init_client();
 init_index_client();
 var root_3$7 = /* @__PURE__ */ from_html(`<button type="button" class="text-[10px] px-1.5 py-0.5 rounded border border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100"> </button>`);
 var root_2$8 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-gray-600">Camera FOV (image)</span> <!></div>`);
-var root_6$3 = /* @__PURE__ */ from_html(`Click vertices · nhấn <strong>✓</strong> `, 1);
 var root_7$4 = /* @__PURE__ */ from_html(` <!>`, 1);
 var root_10$2 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-amber-700 bg-amber-50 border border-amber-200 rounded px-1.5 py-1"> </p>`);
 var root_5$4 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-500 leading-snug"><!></p> <!>`, 1);
-var root_1$7 = /* @__PURE__ */ from_html(`<div class="border border-gray-200 rounded-lg p-2 bg-gray-50 space-y-2"><!> <div class="relative inline-block max-w-full"><canvas></canvas> <!></div> <!></div>`);
+var root_1$7 = /* @__PURE__ */ from_html(`<div class="border border-gray-200 rounded-lg p-2 bg-gray-50 space-y-2"><!> <div class="relative w-full"><canvas style="height: auto;"></canvas> <!></div> <!></div>`);
 var root_11$2 = /* @__PURE__ */ from_html(`<p class="text-xs text-gray-400">No thumbnail URL from host.</p>`);
 function CameraFovEditor($$anchor, $$props) {
 	push($$props, true);
-	let coordinates = prop($$props, "coordinates", 3, ""), mapCoordinates = prop($$props, "mapCoordinates", 3, ""), readOnly = prop($$props, "readOnly", 3, false);
+	let coordinates = prop($$props, "coordinates", 3, ""), mapCoordinates = prop($$props, "mapCoordinates", 3, ""), readOnly = prop($$props, "readOnly", 3, false), strokeColor = prop($$props, "strokeColor", 3, "#22c55e");
+	/** Match floor FOV / zoneColor */
 	let canvasEl = /* @__PURE__ */ state(void 0);
 	let imgEl = /* @__PURE__ */ state(null);
 	let imgSize = /* @__PURE__ */ state(null);
@@ -63675,9 +63672,39 @@ function CameraFovEditor($$anchor, $$props) {
 	let cursor = /* @__PURE__ */ state(null);
 	let draggingIdx = /* @__PURE__ */ state(null);
 	let editing = /* @__PURE__ */ state(false);
-	/** Fits Properties panel ~420px minus padding. */
-	const displayW = 380;
-	const FOV_COLOR = "#3b82f6";
+	/** Track panel width so thumbnail scales when Properties is resized. */
+	let wrapEl = /* @__PURE__ */ state(void 0);
+	let displayW = /* @__PURE__ */ state(380);
+	user_effect(() => {
+		const el = get(wrapEl);
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver((entries) => {
+			var _entries$0$contentRec, _entries$;
+			const w = (_entries$0$contentRec = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentRect) === null || _entries$ === void 0 ? void 0 : _entries$.width) !== null && _entries$0$contentRec !== void 0 ? _entries$0$contentRec : 0;
+			const next = Math.max(160, Math.floor(w));
+			if (next !== get(displayW)) set(displayW, next, true);
+		});
+		ro.observe(el);
+		set(displayW, Math.max(160, Math.floor(el.clientWidth) || 380), true);
+		return () => ro.disconnect();
+	});
+	let FOV_COLOR = /* @__PURE__ */ user_derived(() => {
+		var _strokeColor;
+		return ((_strokeColor = strokeColor()) === null || _strokeColor === void 0 ? void 0 : _strokeColor.trim()) || "#22c55e";
+	});
+	function hexToRgba(hex, alpha) {
+		const c = hex.trim();
+		const short = c.match(/^#([0-9a-f]{3})$/i);
+		let h = c;
+		if (short) {
+			const s = short[1];
+			h = `#${s[0]}${s[0]}${s[1]}${s[1]}${s[2]}${s[2]}`;
+		}
+		const m = h.match(/^#([0-9a-f]{6})$/i);
+		if (!m) return `rgba(34,197,94,${alpha})`;
+		const n = parseInt(m[1], 16);
+		return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
+	}
 	let matchOk = /* @__PURE__ */ user_derived(() => fovPointCountsMatch(coordinates(), mapCoordinates()));
 	let mapN = /* @__PURE__ */ user_derived(() => countCoordinatePoints(mapCoordinates()));
 	let imgN = /* @__PURE__ */ user_derived(() => countCoordinatePoints(coordinates()));
@@ -63732,6 +63759,7 @@ function CameraFovEditor($$anchor, $$props) {
 		const size = get(imgSize);
 		const el = get(canvasEl);
 		const isEditing = get(editing);
+		get(FOV_COLOR);
 		if (!size || !el) return;
 		untrack(() => {
 			if (!isEditing) {
@@ -63743,7 +63771,7 @@ function CameraFovEditor($$anchor, $$props) {
 	});
 	function scale() {
 		if (!get(imgSize)) return 1;
-		return displayW / get(imgSize).w;
+		return get(displayW) / get(imgSize).w;
 	}
 	function canvasH() {
 		if (!get(imgSize)) return 135;
@@ -63761,7 +63789,7 @@ function CameraFovEditor($$anchor, $$props) {
 	function redraw() {
 		if (!get(canvasEl) || !get(imgEl) || !get(imgSize)) return;
 		const s = scale();
-		const w = displayW;
+		const w = get(displayW);
 		const h = canvasH();
 		if (get(canvasEl).width !== w || get(canvasEl).height !== h) {
 			get(canvasEl).width = w;
@@ -63772,36 +63800,37 @@ function CameraFovEditor($$anchor, $$props) {
 		ctx.clearRect(0, 0, w, h);
 		ctx.drawImage(get(imgEl), 0, 0, w, h);
 		const placed = get(draft);
-		const pts = [...placed];
-		if (get(editing) && get(cursor)) pts.push(get(cursor));
-		if (pts.length >= 1) {
+		const color = get(FOV_COLOR);
+		if (placed.length >= 1) {
 			ctx.save();
-			ctx.strokeStyle = FOV_COLOR;
-			ctx.fillStyle = "rgba(59,130,246,0.28)";
-			ctx.lineWidth = 2;
+			ctx.strokeStyle = color;
+			ctx.fillStyle = hexToRgba(color, .28);
+			ctx.lineWidth = 2.5;
 			ctx.lineJoin = "round";
-			if (pts.length >= 2) {
+			ctx.lineCap = "round";
+			if (placed.length >= 2) {
+				ctx.setLineDash([]);
 				ctx.beginPath();
-				ctx.moveTo(pts[0].x * s, pts[0].y * s);
-				for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * s, pts[i].y * s);
+				ctx.moveTo(placed[0].x * s, placed[0].y * s);
+				for (let i = 1; i < placed.length; i++) ctx.lineTo(placed[i].x * s, placed[i].y * s);
 				if (!get(editing) && placed.length >= 3) {
 					ctx.closePath();
 					ctx.fill();
-				} else if (get(editing)) ctx.setLineDash([6, 4]);
+				}
 				ctx.stroke();
-				ctx.setLineDash([]);
 			}
-			if (get(editing) && get(cursor) && placed.length >= 3) {
-				ctx.globalAlpha = .45;
-				ctx.setLineDash([4, 4]);
+			if (get(editing) && get(cursor) && placed.length >= 1) {
+				const last = placed[placed.length - 1];
+				ctx.setLineDash([6, 4]);
+				ctx.globalAlpha = .85;
 				ctx.beginPath();
-				ctx.moveTo(get(cursor).x * s, get(cursor).y * s);
-				ctx.lineTo(placed[0].x * s, placed[0].y * s);
+				ctx.moveTo(last.x * s, last.y * s);
+				ctx.lineTo(get(cursor).x * s, get(cursor).y * s);
 				ctx.stroke();
 				ctx.setLineDash([]);
 				ctx.globalAlpha = 1;
 			}
-			for (let i = 0; i < placed.length; i++) drawVertexIndexBadge(ctx, placed[i].x * s, placed[i].y * s, i, FOV_COLOR, 10);
+			for (let i = 0; i < placed.length; i++) drawVertexIndexBadge(ctx, placed[i].x * s, placed[i].y * s, i, color, 10);
 			ctx.restore();
 		}
 	}
@@ -63950,7 +63979,6 @@ function CameraFovEditor($$anchor, $$props) {
 		});
 		var div_2 = sibling(node_1, 2);
 		var canvas = child(div_2);
-		set_style(canvas, "max-width: 380px; height: auto;");
 		bind_this(canvas, ($$value) => set(canvasEl, $$value), () => get(canvasEl));
 		var node_3 = sibling(canvas, 2);
 		var consequent_2 = ($$anchor) => {
@@ -63978,16 +64006,16 @@ function CameraFovEditor($$anchor, $$props) {
 			if (get(showFloatTb) && get(floatTbPos)) $$render(consequent_2);
 		});
 		reset(div_2);
+		bind_this(div_2, ($$value) => set(wrapEl, $$value), () => get(wrapEl));
 		var node_4 = sibling(div_2, 2);
 		var consequent_7 = ($$anchor) => {
 			var fragment_2 = root_5$4();
 			var p_1 = first_child(fragment_2);
 			var node_5 = child(p_1);
 			var consequent_3 = ($$anchor) => {
-				var fragment_3 = root_6$3();
-				var text_1 = sibling(first_child(fragment_3), 2);
-				template_effect(() => set_text(text_1, ` trên toolbar để đóng polygon (≥3) · 🗑 xoá`));
-				append($$anchor, fragment_3);
+				var text_1 = text$1();
+				template_effect(() => set_text(text_1, `Click vertices · ✓ finish (≥3) · 🗑 delete`));
+				append($$anchor, text_1);
 			};
 			var consequent_5 = ($$anchor) => {
 				var fragment_4 = root_7$4();
@@ -64006,7 +64034,7 @@ function CameraFovEditor($$anchor, $$props) {
 				});
 				template_effect(() => {
 					var _$$get2;
-					return set_text(text_2, `${(_$$get2 = get(imgN)) !== null && _$$get2 !== void 0 ? _$$get2 : ""} points — click polygon để hiện toolbar `);
+					return set_text(text_2, `${(_$$get2 = get(imgN)) !== null && _$$get2 !== void 0 ? _$$get2 : ""} points — click polygon for toolbar `);
 				});
 				append($$anchor, fragment_4);
 			};
@@ -64041,7 +64069,7 @@ function CameraFovEditor($$anchor, $$props) {
 			if (!readOnly()) $$render(consequent_7);
 		});
 		reset(div);
-		template_effect(() => set_class(canvas, 1, `w-full rounded border border-gray-200 bg-black/5 touch-none ${readOnly() ? "cursor-default" : "cursor-crosshair"}`));
+		template_effect(() => set_class(canvas, 1, `w-full rounded border border-gray-200 bg-black/5 touch-none ${readOnly() || !get(editing) ? "cursor-default" : "cursor-crosshair"}`));
 		delegated("mousedown", canvas, function(...$$args) {
 			var _ref;
 			(_ref = readOnly() ? void 0 : onDown) === null || _ref === void 0 || _ref.apply(this, $$args);
@@ -64100,8 +64128,8 @@ var root_9$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-
 var root_13$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_12$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Camera</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-white"><option>Select camera...</option><!></select></label>`);
 var root_14$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500"> </span> <input type="text"/></label>`);
-var root_15$1 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-400 mt-2 leading-snug">FOV sàn: tool <strong>Camera FOV</strong> → <code class="font-mono">mapCoordinates</code>.
-            FOV ảnh: vẽ trên thumbnail · đỉnh đánh số 0…n · double-click / Enter / Done để kết thúc.</p>`);
+var root_15$1 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-gray-400 mt-2 leading-snug">Floor FOV: <strong>Camera FOV</strong> tool → <code class="font-mono">mapCoordinates</code>.
+            Image FOV: draw on thumbnail (vertices 0…n) · ✓ to finish.</p>`);
 var root_16 = /* @__PURE__ */ from_html(`<div class="pt-1 space-y-1.5"><div class="text-xs font-semibold text-gray-700">Camera thumbnail</div> <!></div>`);
 var root_17$1 = /* @__PURE__ */ from_html(`<p class="text-[10px] text-amber-700 bg-amber-50 border border-amber-100 rounded px-1.5 py-1">Host chưa gửi <code class="font-mono">cameraThumbnail</code> cho cam này.</p>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<!> <!> <!> <!>`, 1);
@@ -64121,7 +64149,7 @@ var root_31 = /* @__PURE__ */ from_html(`<button type="button"></button>`);
 var root_29 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 rounded flex items-center justify-center text-xs">⬡</span> Zone</h3> <label class="block"><span class="text-xs text-gray-500">Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm" title="From assignedCameras.zone when linked"/></label> <!> <div class="text-xs text-gray-500">Shape: <span class="text-gray-700 capitalize"> </span></div> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex flex-wrap gap-1.5 mt-1"><!> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></label> <label class="block"><span class="text-xs text-gray-500">Fill opacity</span> <input type="range" min="0" max="0.4" step="0.02" class="w-full"/></label></div>`);
 var root_32 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 rounded flex items-center justify-center text-xs">🏷️</span> Text Annotation</h3> <label class="block"><span class="text-xs text-gray-500">Text</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Font Size</span> <input type="number" min="8" max="72" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex items-center gap-2"><input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/> <span class="text-xs text-gray-400"> </span></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (°)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">X</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Y</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`);
 var root_33 = /* @__PURE__ */ from_html(`<div class="mt-4 pt-3 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-xs">🖼️</span> Background Image</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Opacity</span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Scale</span> <input type="range" min="0.1" max="5" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Rotation</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-2"><button> </button> <button class="flex-1 px-2 py-1.5 border rounded text-sm border-gray-200 hover:bg-gray-50">📏 Set Scale</button></div> <button class="w-full px-2 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50">Remove Image</button></div></div>`);
-var root$3 = /* @__PURE__ */ from_html(`<div data-properties-panel="" style="top: 0; bottom: 0;"><!> <!></div>`);
+var root$3 = /* @__PURE__ */ from_html(`<div data-properties-panel=""><div role="separator" aria-orientation="vertical" aria-label="Resize properties panel" tabindex="0" class="absolute top-0 bottom-0 z-[60] group touch-none flex items-center justify-center" style="left: -6px; width: 12px; cursor: col-resize;" title="Drag to resize"><div></div> <div aria-hidden="true"></div></div> <div class="flex-1 min-h-0 overflow-y-auto p-3"><!> <!></div></div>`);
 function PropertiesPanel($$anchor, $$props) {
 	push($$props, true);
 	const $projectSettings = () => store_get(projectSettings, "$projectSettings", $$stores);
@@ -64159,54 +64187,118 @@ function PropertiesPanel($$anchor, $$props) {
 		return get(settings).units === "imperial" ? "in" : "cm";
 	}
 	let is3D = prop($$props, "is3D", 3, false), siteCameras = prop($$props, "siteCameras", 19, () => []), cameraThumbnail = prop($$props, "cameraThumbnail", 3, "");
+	const PANEL_MIN_W = 420;
+	const PANEL_WIDTH_KEY = "floor-editor-properties-width";
+	let panelEl = /* @__PURE__ */ state(void 0);
+	let panelWidth = /* @__PURE__ */ state(PANEL_MIN_W);
+	let resizing = /* @__PURE__ */ state(false);
 	let wallSideTab = /* @__PURE__ */ state("interior");
+	function clampPanelWidth(w) {
+		var _$$get;
+		const parentW = ((_$$get = get(panelEl)) === null || _$$get === void 0 || (_$$get = _$$get.parentElement) === null || _$$get === void 0 ? void 0 : _$$get.clientWidth) || (typeof window !== "undefined" ? window.innerWidth : PANEL_MIN_W * 2);
+		const maxW = Math.max(PANEL_MIN_W, Math.floor(parentW * .5));
+		return Math.min(maxW, Math.max(PANEL_MIN_W, Math.round(w)));
+	}
+	function loadSavedWidth() {
+		try {
+			const raw = localStorage.getItem(PANEL_WIDTH_KEY);
+			const n = raw ? Number(raw) : NaN;
+			if (Number.isFinite(n)) set(panelWidth, clampPanelWidth(n), true);
+		} catch (_unused) {}
+	}
+	function persistWidth(w) {
+		try {
+			localStorage.setItem(PANEL_WIDTH_KEY, String(w));
+		} catch (_unused2) {}
+	}
+	user_effect(() => {
+		loadSavedWidth();
+	});
+	function onResizePointerDown(e) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const handle = e.currentTarget;
+		handle.setPointerCapture(e.pointerId);
+		set(resizing, true);
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+		let raf = 0;
+		let latestX = e.clientX;
+		const apply = () => {
+			raf = 0;
+			if (!get(panelEl)) return;
+			const right = get(panelEl).getBoundingClientRect().right;
+			set(panelWidth, clampPanelWidth(right - latestX), true);
+		};
+		const onMove = (ev) => {
+			latestX = ev.clientX;
+			if (raf) return;
+			raf = requestAnimationFrame(apply);
+		};
+		const onUp = (ev) => {
+			handle.releasePointerCapture(ev.pointerId);
+			handle.removeEventListener("pointermove", onMove);
+			handle.removeEventListener("pointerup", onUp);
+			handle.removeEventListener("pointercancel", onUp);
+			if (raf) cancelAnimationFrame(raf);
+			apply();
+			set(resizing, false);
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+			persistWidth(get(panelWidth));
+		};
+		handle.addEventListener("pointermove", onMove);
+		handle.addEventListener("pointerup", onUp);
+		handle.addEventListener("pointercancel", onUp);
+	}
 	let selectedWall = /* @__PURE__ */ user_derived(() => {
-		var _$$get$walls$find, _$$get;
-		return (_$$get$walls$find = (_$$get = get(floor)) === null || _$$get === void 0 || (_$$get = _$$get.walls) === null || _$$get === void 0 ? void 0 : _$$get.find((w) => w.id === get(selId))) !== null && _$$get$walls$find !== void 0 ? _$$get$walls$find : null;
+		var _$$get$walls$find, _$$get2;
+		return (_$$get$walls$find = (_$$get2 = get(floor)) === null || _$$get2 === void 0 || (_$$get2 = _$$get2.walls) === null || _$$get2 === void 0 ? void 0 : _$$get2.find((w) => w.id === get(selId))) !== null && _$$get$walls$find !== void 0 ? _$$get$walls$find : null;
 	});
 	let selectedDoor = /* @__PURE__ */ user_derived(() => {
-		var _$$get$doors$find, _$$get2;
-		return (_$$get$doors$find = (_$$get2 = get(floor)) === null || _$$get2 === void 0 || (_$$get2 = _$$get2.doors) === null || _$$get2 === void 0 ? void 0 : _$$get2.find((d) => d.id === get(selId))) !== null && _$$get$doors$find !== void 0 ? _$$get$doors$find : null;
+		var _$$get$doors$find, _$$get3;
+		return (_$$get$doors$find = (_$$get3 = get(floor)) === null || _$$get3 === void 0 || (_$$get3 = _$$get3.doors) === null || _$$get3 === void 0 ? void 0 : _$$get3.find((d) => d.id === get(selId))) !== null && _$$get$doors$find !== void 0 ? _$$get$doors$find : null;
 	});
 	let selectedWindow = /* @__PURE__ */ user_derived(() => {
-		var _$$get$windows$find, _$$get3;
-		return (_$$get$windows$find = (_$$get3 = get(floor)) === null || _$$get3 === void 0 || (_$$get3 = _$$get3.windows) === null || _$$get3 === void 0 ? void 0 : _$$get3.find((w) => w.id === get(selId))) !== null && _$$get$windows$find !== void 0 ? _$$get$windows$find : null;
+		var _$$get$windows$find, _$$get4;
+		return (_$$get$windows$find = (_$$get4 = get(floor)) === null || _$$get4 === void 0 || (_$$get4 = _$$get4.windows) === null || _$$get4 === void 0 ? void 0 : _$$get4.find((w) => w.id === get(selId))) !== null && _$$get$windows$find !== void 0 ? _$$get$windows$find : null;
 	});
 	let selectedFurniture = /* @__PURE__ */ user_derived(() => {
-		var _$$get$furniture$find, _$$get4;
-		return (_$$get$furniture$find = (_$$get4 = get(floor)) === null || _$$get4 === void 0 || (_$$get4 = _$$get4.furniture) === null || _$$get4 === void 0 ? void 0 : _$$get4.find((f) => f.id === get(selId))) !== null && _$$get$furniture$find !== void 0 ? _$$get$furniture$find : null;
+		var _$$get$furniture$find, _$$get5;
+		return (_$$get$furniture$find = (_$$get5 = get(floor)) === null || _$$get5 === void 0 || (_$$get5 = _$$get5.furniture) === null || _$$get5 === void 0 ? void 0 : _$$get5.find((f) => f.id === get(selId))) !== null && _$$get$furniture$find !== void 0 ? _$$get$furniture$find : null;
 	});
 	let selectedStair = /* @__PURE__ */ user_derived(() => {
-		var _$$get$stairs$find, _$$get5;
-		return (_$$get$stairs$find = (_$$get5 = get(floor)) === null || _$$get5 === void 0 || (_$$get5 = _$$get5.stairs) === null || _$$get5 === void 0 ? void 0 : _$$get5.find((s) => s.id === get(selId))) !== null && _$$get$stairs$find !== void 0 ? _$$get$stairs$find : null;
+		var _$$get$stairs$find, _$$get6;
+		return (_$$get$stairs$find = (_$$get6 = get(floor)) === null || _$$get6 === void 0 || (_$$get6 = _$$get6.stairs) === null || _$$get6 === void 0 ? void 0 : _$$get6.find((s) => s.id === get(selId))) !== null && _$$get$stairs$find !== void 0 ? _$$get$stairs$find : null;
 	});
 	let selectedColumn = /* @__PURE__ */ user_derived(() => {
-		var _$$get$columns$find, _$$get6;
-		return (_$$get$columns$find = (_$$get6 = get(floor)) === null || _$$get6 === void 0 || (_$$get6 = _$$get6.columns) === null || _$$get6 === void 0 ? void 0 : _$$get6.find((c) => c.id === get(selId))) !== null && _$$get$columns$find !== void 0 ? _$$get$columns$find : null;
+		var _$$get$columns$find, _$$get7;
+		return (_$$get$columns$find = (_$$get7 = get(floor)) === null || _$$get7 === void 0 || (_$$get7 = _$$get7.columns) === null || _$$get7 === void 0 ? void 0 : _$$get7.find((c) => c.id === get(selId))) !== null && _$$get$columns$find !== void 0 ? _$$get$columns$find : null;
 	});
 	let selectedTextAnnotation = /* @__PURE__ */ user_derived(() => {
-		var _$$get$textAnnotation, _$$get7;
-		return (_$$get$textAnnotation = (_$$get7 = get(floor)) === null || _$$get7 === void 0 || (_$$get7 = _$$get7.textAnnotations) === null || _$$get7 === void 0 ? void 0 : _$$get7.find((t) => t.id === get(selId))) !== null && _$$get$textAnnotation !== void 0 ? _$$get$textAnnotation : null;
+		var _$$get$textAnnotation, _$$get8;
+		return (_$$get$textAnnotation = (_$$get8 = get(floor)) === null || _$$get8 === void 0 || (_$$get8 = _$$get8.textAnnotations) === null || _$$get8 === void 0 ? void 0 : _$$get8.find((t) => t.id === get(selId))) !== null && _$$get$textAnnotation !== void 0 ? _$$get$textAnnotation : null;
 	});
 	let selectedZone = /* @__PURE__ */ user_derived(() => {
-		var _$$get$zones$find, _$$get8;
-		return (_$$get$zones$find = (_$$get8 = get(floor)) === null || _$$get8 === void 0 || (_$$get8 = _$$get8.zones) === null || _$$get8 === void 0 ? void 0 : _$$get8.find((z) => z.id === get(selId))) !== null && _$$get$zones$find !== void 0 ? _$$get$zones$find : null;
+		var _$$get$zones$find, _$$get9;
+		return (_$$get$zones$find = (_$$get9 = get(floor)) === null || _$$get9 === void 0 || (_$$get9 = _$$get9.zones) === null || _$$get9 === void 0 ? void 0 : _$$get9.find((z) => z.id === get(selId))) !== null && _$$get$zones$find !== void 0 ? _$$get$zones$find : null;
 	});
 	let hasBgImage = /* @__PURE__ */ user_derived(() => {
-		var _$$get9;
-		return !!((_$$get9 = get(floor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.backgroundImage);
+		var _$$get10;
+		return !!((_$$get10 = get(floor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.backgroundImage);
 	});
 	let selectedRoom = /* @__PURE__ */ user_derived(() => {
-		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;
+		var _ref, _$$get$rooms$find, _$$get11;
+		return (_ref = (_$$get$rooms$find = (_$$get11 = get(floor)) === null || _$$get11 === void 0 || (_$$get11 = _$$get11.rooms) === null || _$$get11 === void 0 ? void 0 : _$$get11.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, _$$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;
+		var _ref2, _$$get12;
+		return (_ref2 = get(selectedDoor) && ((_$$get12 = get(floor)) === null || _$$get12 === void 0 || (_$$get12 = _$$get12.walls) === null || _$$get12 === void 0 ? void 0 : _$$get12.find((w) => w.id === get(selectedDoor).wallId))) !== null && _ref2 !== void 0 ? _ref2 : null;
 	});
 	let selectedWindowWall = /* @__PURE__ */ user_derived(() => {
-		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;
+		var _ref3, _$$get13;
+		return (_ref3 = get(selectedWindow) && ((_$$get13 = get(floor)) === null || _$$get13 === void 0 || (_$$get13 = _$$get13.walls) === null || _$$get13 === void 0 ? void 0 : _$$get13.find((w) => w.id === get(selectedWindow).wallId))) !== null && _ref3 !== void 0 ? _ref3 : null;
 	});
 	function calcWallLength(wall) {
 		if (wall.curvePoint) {
@@ -64323,14 +64415,14 @@ function PropertiesPanel($$anchor, $$props) {
 	});
 	/** Host-assigned camera fields are read-only; package fields (color/size/…) stay editable. */
 	const cameraPropsLocked = /* @__PURE__ */ user_derived(() => {
-		var _$$get13;
-		return !!(((_$$get13 = get(selectedFurniture)) === null || _$$get13 === void 0 ? void 0 : _$$get13.catalogId) === "camera" && get(selectedFurniture).props && Object.keys(get(selectedFurniture).props).length > 0);
+		var _$$get14;
+		return !!(((_$$get14 = get(selectedFurniture)) === null || _$$get14 === void 0 ? void 0 : _$$get14.catalogId) === "camera" && get(selectedFurniture).props && Object.keys(get(selectedFurniture).props).length > 0);
 	});
 	const useSiteCameraSelect = /* @__PURE__ */ user_derived(() => siteCameras().length > 0);
 	const usedCameraSerials = /* @__PURE__ */ user_derived(() => {
-		var _$$get14;
+		var _$$get15;
 		const used = /* @__PURE__ */ new Set();
-		if (!((_$$get14 = get(floor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.furniture) || !get(selectedFurniture)) return used;
+		if (!((_$$get15 = get(floor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.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);
@@ -64640,16 +64732,22 @@ function PropertiesPanel($$anchor, $$props) {
 	];
 	let hasSelection = /* @__PURE__ */ user_derived(() => !!get(selectedWall) || !!get(selectedDoor) || !!get(selectedWindow) || !!get(selectedFurniture) || !!get(selectedRoom) || !!get(selectedStair) || !!get(selectedColumn) || !!get(selectedTextAnnotation) || !!get(selectedZone) || !is3D() && get(hasBgImage));
 	let showCameraThumbnail = /* @__PURE__ */ user_derived(() => {
-		var _$$get15, _cameraThumbnail;
-		return ((_$$get15 = get(selectedFurniture)) === null || _$$get15 === void 0 ? void 0 : _$$get15.catalogId) === "camera" && !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim());
+		var _$$get16, _cameraThumbnail;
+		return ((_$$get16 = get(selectedFurniture)) === null || _$$get16 === void 0 ? void 0 : _$$get16.catalogId) === "camera" && !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim());
 	});
 	var div = root$3();
 	let classes;
-	var node = child(div);
+	var div_1 = child(div);
+	set_attribute(div_1, "aria-valuemin", PANEL_MIN_W);
+	var div_2 = child(div_1);
+	var div_3 = sibling(div_2, 2);
+	reset(div_1);
+	var div_4 = sibling(div_1, 2);
+	var node = child(div_4);
 	var consequent_1 = ($$anchor) => {
 		var fragment = root_1$6();
-		var div_1 = sibling(first_child(fragment), 2);
-		var label = child(div_1);
+		var div_5 = sibling(first_child(fragment), 2);
+		var label = child(div_5);
 		var span = child(label);
 		var text = child(span);
 		reset(span);
@@ -64670,23 +64768,23 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_2 = sibling(span_2, 2);
 		remove_input_defaults(input_2);
 		reset(label_2);
-		var div_2 = sibling(label_2, 2);
-		var button = sibling(child(div_2), 2);
+		var div_6 = sibling(label_2, 2);
+		var button = sibling(child(div_6), 2);
 		var text_3 = child(button, true);
 		reset(button);
-		reset(div_2);
-		var div_3 = sibling(div_2, 2);
-		var div_4 = child(div_3);
-		var button_1 = child(div_4);
+		reset(div_6);
+		var div_7 = sibling(div_6, 2);
+		var div_8 = child(div_7);
+		var button_1 = child(div_8);
 		var button_2 = sibling(button_1, 2);
-		reset(div_4);
-		var node_1 = sibling(div_4, 2);
+		reset(div_8);
+		var node_1 = sibling(div_8, 2);
 		var consequent = ($$anchor) => {
 			const sideColor = /* @__PURE__ */ user_derived(() => get(selectedWall).interiorColor || get(selectedWall).color);
 			const sideTex = /* @__PURE__ */ user_derived(() => get(selectedWall).interiorTexture === "none" ? void 0 : get(selectedWall).interiorTexture || get(selectedWall).texture);
-			var div_5 = root_2$7();
-			var div_6 = sibling(child(div_5), 2);
-			each(div_6, 21, () => wallColors, index$1, ($$anchor, wc) => {
+			var div_9 = root_2$7();
+			var div_10 = sibling(child(div_9), 2);
+			each(div_10, 21, () => wallColors, index$1, ($$anchor, wc) => {
 				var button_3 = root_3$6();
 				template_effect(() => {
 					var _$$get$color;
@@ -64699,13 +64797,13 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_3);
 			});
-			reset(div_6);
-			var label_3 = sibling(div_6, 2);
+			reset(div_10);
+			var label_3 = sibling(div_10, 2);
 			var input_3 = sibling(child(label_3), 2);
 			remove_input_defaults(input_3);
 			reset(label_3);
-			var div_7 = sibling(label_3, 4);
-			var button_4 = child(div_7);
+			var div_11 = sibling(label_3, 4);
+			var button_4 = child(div_11);
 			each(sibling(button_4, 2), 17, () => wallColors.filter((wc) => wc.texture), index$1, ($$anchor, wc) => {
 				const texPath = /* @__PURE__ */ user_derived(() => {
 					var _redBrick$exposedBr;
@@ -64736,8 +64834,8 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_5);
 			});
-			reset(div_7);
-			reset(div_5);
+			reset(div_11);
+			reset(div_9);
 			template_effect(() => {
 				set_value(input_3, get(sideColor));
 				set_class(button_4, 1, `p-1.5 rounded-md border-2 text-[10px] text-center h-14 ${!get(sideTex) ? "border-blue-500 ring-1 ring-blue-200" : "border-gray-200 hover:border-gray-300"}`);
@@ -64748,14 +64846,14 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_4, () => {
 				if (get(selectedWall)) updateWall(get(selectedWall).id, { interiorTexture: "none" });
 			});
-			append($$anchor, div_5);
+			append($$anchor, div_9);
 		};
 		var alternate = ($$anchor) => {
 			const sideColor = /* @__PURE__ */ user_derived(() => get(selectedWall).exteriorColor || get(selectedWall).color);
 			const sideTex = /* @__PURE__ */ user_derived(() => get(selectedWall).exteriorTexture === "none" ? void 0 : get(selectedWall).exteriorTexture || get(selectedWall).texture);
-			var div_8 = root_5$3();
-			var div_9 = sibling(child(div_8), 2);
-			each(div_9, 21, () => wallColors, index$1, ($$anchor, wc) => {
+			var div_12 = root_5$3();
+			var div_13 = sibling(child(div_12), 2);
+			each(div_13, 21, () => wallColors, index$1, ($$anchor, wc) => {
 				var button_6 = root_6$2();
 				template_effect(() => {
 					var _$$get$color2;
@@ -64768,13 +64866,13 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_6);
 			});
-			reset(div_9);
-			var label_4 = sibling(div_9, 2);
+			reset(div_13);
+			var label_4 = sibling(div_13, 2);
 			var input_4 = sibling(child(label_4), 2);
 			remove_input_defaults(input_4);
 			reset(label_4);
-			var div_10 = sibling(label_4, 4);
-			var button_7 = child(div_10);
+			var div_14 = sibling(label_4, 4);
+			var button_7 = child(div_14);
 			each(sibling(button_7, 2), 17, () => wallColors.filter((wc) => wc.texture), index$1, ($$anchor, wc) => {
 				const texPath = /* @__PURE__ */ user_derived(() => {
 					var _redBrick$exposedBr2;
@@ -64805,8 +64903,8 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_8);
 			});
-			reset(div_10);
-			reset(div_8);
+			reset(div_14);
+			reset(div_12);
 			template_effect(() => {
 				set_value(input_4, get(sideColor));
 				set_class(button_7, 1, `p-1.5 rounded-md border-2 text-[10px] text-center h-14 ${!get(sideTex) ? "border-blue-500 ring-1 ring-blue-200" : "border-gray-200 hover:border-gray-300"}`);
@@ -64817,14 +64915,14 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_7, () => {
 				if (get(selectedWall)) updateWall(get(selectedWall).id, { exteriorTexture: "none" });
 			});
-			append($$anchor, div_8);
+			append($$anchor, div_12);
 		};
 		if_block(node_1, ($$render) => {
 			if (get(wallSideTab) === "interior") $$render(consequent);
 			else $$render(alternate, -1);
 		});
-		reset(div_3);
-		reset(div_1);
+		reset(div_7);
+		reset(div_5);
 		template_effect(($0, $1, $2, $3, $4, $5) => {
 			set_text(text, `Length (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
 			set_value(input, $1);
@@ -64866,8 +64964,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_2 = ($$anchor) => {
 		var fragment_1 = root_8$1();
-		var div_11 = sibling(first_child(fragment_1), 2);
-		var label_5 = child(div_11);
+		var div_15 = sibling(first_child(fragment_1), 2);
+		var label_5 = child(div_15);
 		var span_5 = child(label_5);
 		var text_6 = child(span_5);
 		reset(span_5);
@@ -64914,20 +65012,20 @@ function PropertiesPanel($$anchor, $$props) {
 		init_select(select);
 		reset(label_9);
 		var label_10 = sibling(label_9, 2);
-		var div_12 = sibling(child(label_10), 2);
-		var button_9 = child(div_12);
+		var div_16 = sibling(child(label_10), 2);
+		var button_9 = child(div_16);
 		var button_10 = sibling(button_9, 2);
-		reset(div_12);
+		reset(div_16);
 		reset(label_10);
 		var label_11 = sibling(label_10, 2);
-		var div_13 = sibling(child(label_11), 2);
-		var button_11 = child(div_13);
+		var div_17 = sibling(child(label_11), 2);
+		var button_11 = child(div_17);
 		var button_12 = sibling(button_11, 2);
-		reset(div_13);
+		reset(div_17);
 		reset(label_11);
-		reset(div_11);
+		reset(div_15);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
-			var _$$get16, _$$get17, _$$get18, _$$get19;
+			var _$$get17, _$$get18, _$$get19, _$$get20;
 			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 : ""})`);
@@ -64940,10 +65038,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 ${((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.swingDirection) === "left" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_10, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.swingDirection) === "right" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_11, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${!((_$$get18 = get(selectedDoor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get19 = get(selectedDoor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_9, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.swingDirection) === "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 ${((_$$get18 = get(selectedDoor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.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 ${!((_$$get19 = get(selectedDoor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get20 = get(selectedDoor)) === null || _$$get20 === void 0 ? void 0 : _$$get20.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedDoor).width),
@@ -64978,8 +65076,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_3 = ($$anchor) => {
 		var fragment_2 = root_9$1();
-		var div_14 = sibling(first_child(fragment_2), 2);
-		var label_12 = child(div_14);
+		var div_18 = sibling(first_child(fragment_2), 2);
+		var label_12 = child(div_18);
 		var select_1 = sibling(child(label_12), 2);
 		var option_6 = child(select_1);
 		option_6.value = option_6.__value = "standard";
@@ -65030,7 +65128,7 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_13 = sibling(span_13, 2);
 		remove_input_defaults(input_13);
 		reset(label_17);
-		reset(div_14);
+		reset(div_18);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8, $9) => {
 			var _$$get$type;
 			if (select_1_value !== (select_1_value = (_$$get$type = get(selectedWindow).type) !== null && _$$get$type !== void 0 ? _$$get$type : "standard")) {
@@ -65078,8 +65176,8 @@ function PropertiesPanel($$anchor, $$props) {
 		var text_17 = child(button_13, true);
 		reset(button_13);
 		reset(h3);
-		var div_15 = sibling(h3, 2);
-		var node_4 = child(div_15);
+		var div_19 = sibling(h3, 2);
+		var node_4 = child(div_19);
 		var consequent_8 = ($$anchor) => {
 			var fragment_4 = root_11$1();
 			var node_5 = first_child(fragment_4);
@@ -65139,8 +65237,8 @@ function PropertiesPanel($$anchor, $$props) {
 			});
 			var node_9 = sibling(node_8, 2);
 			var consequent_6 = ($$anchor) => {
-				var div_16 = root_16();
-				var node_10 = sibling(child(div_16), 2);
+				var div_20 = root_16();
+				var node_10 = sibling(child(div_20), 2);
 				{
 					let $0 = /* @__PURE__ */ user_derived(() => {
 						var _$$get$props$coordina, _$$get$props2;
@@ -65150,6 +65248,10 @@ function PropertiesPanel($$anchor, $$props) {
 						var _$$get$props$mapCoord, _$$get$props3;
 						return (_$$get$props$mapCoord = (_$$get$props3 = get(selectedFurniture).props) === null || _$$get$props3 === void 0 ? void 0 : _$$get$props3.mapCoordinates) !== null && _$$get$props$mapCoord !== void 0 ? _$$get$props$mapCoord : "";
 					});
+					let $2 = /* @__PURE__ */ user_derived(() => {
+						var _$$get$props4;
+						return ((_$$get$props4 = get(selectedFurniture).props) === null || _$$get$props4 === void 0 ? void 0 : _$$get$props4.zoneColor) || get(selectedFurniture).color || "#22c55e";
+					});
 					CameraFovEditor(node_10, {
 						get serial() {
 							return get(selectedFurniture).serial;
@@ -65162,11 +65264,14 @@ function PropertiesPanel($$anchor, $$props) {
 						},
 						get mapCoordinates() {
 							return get($1);
+						},
+						get strokeColor() {
+							return get($2);
 						}
 					});
 				}
-				reset(div_16);
-				append($$anchor, div_16);
+				reset(div_20);
+				append($$anchor, div_20);
 			};
 			var consequent_7 = ($$anchor) => {
 				append($$anchor, root_17$1());
@@ -65184,9 +65289,9 @@ function PropertiesPanel($$anchor, $$props) {
 		if_block(node_4, ($$render) => {
 			if (get(selectedFurniture).catalogId === "camera") $$render(consequent_8);
 		});
-		var div_17 = sibling(node_4, 2);
-		var div_18 = sibling(child(div_17), 2);
-		each(div_18, 20, () => [
+		var div_21 = sibling(node_4, 2);
+		var div_22 = sibling(child(div_21), 2);
+		each(div_22, 20, () => [
 			"#ffffff",
 			"#f5f5dc",
 			"#d2b48c",
@@ -65210,13 +65315,13 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_14, () => onFurnitureColor(color));
 			append($$anchor, button_14);
 		});
-		reset(div_18);
-		var div_19 = sibling(div_18, 2);
-		var input_15 = sibling(child(div_19), 2);
+		reset(div_22);
+		var div_23 = sibling(div_22, 2);
+		var input_15 = sibling(child(div_23), 2);
 		remove_input_defaults(input_15);
-		reset(div_19);
-		reset(div_17);
-		var label_20 = sibling(div_17, 2);
+		reset(div_23);
+		reset(div_21);
+		var label_20 = sibling(div_21, 2);
 		var span_16 = child(label_20);
 		var text_20 = child(span_16);
 		reset(span_16);
@@ -65263,16 +65368,16 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_19 = sibling(child(label_24), 2);
 		remove_input_defaults(input_19);
 		reset(label_24);
-		var div_20 = sibling(label_24, 2);
-		var button_15 = child(div_20);
+		var div_24 = sibling(label_24, 2);
+		var button_15 = child(div_24);
 		var button_16 = sibling(button_15, 2);
-		reset(div_20);
-		var div_21 = sibling(div_20, 2);
-		var button_17 = child(div_21);
+		reset(div_24);
+		var div_25 = sibling(div_24, 2);
+		var button_17 = child(div_25);
 		var button_18 = sibling(button_17, 2);
-		reset(div_21);
-		var button_19 = sibling(div_21, 2);
-		reset(div_15);
+		reset(div_25);
+		var button_19 = sibling(div_25, 2);
+		reset(div_19);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8, $9) => {
 			var _$$get$material;
 			set_text(text_15, $0);
@@ -65362,8 +65467,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_11 = ($$anchor) => {
 		var fragment_5 = root_19$1();
-		var div_22 = sibling(first_child(fragment_5), 2);
-		var label_25 = child(div_22);
+		var div_26 = sibling(first_child(fragment_5), 2);
+		var label_25 = child(div_26);
 		var select_4 = sibling(child(label_25), 2);
 		each(select_4, 21, () => roomTypes, index$1, ($$anchor, rt) => {
 			var option_21 = root_20$1();
@@ -65402,14 +65507,14 @@ function PropertiesPanel($$anchor, $$props) {
 		var select_5_value;
 		init_select(select_5);
 		reset(label_27);
-		var div_23 = sibling(label_27, 2);
-		var p_2 = sibling(child(div_23), 2);
+		var div_27 = sibling(label_27, 2);
+		var p_2 = sibling(child(div_27), 2);
 		var text_24 = child(p_2, true);
 		reset(p_2);
-		reset(div_23);
-		var div_24 = sibling(div_23, 2);
-		var div_25 = sibling(child(div_24), 2);
-		each(div_25, 21, () => roomColorPresets, index$1, ($$anchor, preset) => {
+		reset(div_27);
+		var div_28 = sibling(div_27, 2);
+		var div_29 = sibling(child(div_28), 2);
+		each(div_29, 21, () => roomColorPresets, index$1, ($$anchor, preset) => {
 			var button_20 = root_21$1();
 			template_effect(() => {
 				var _$$get$color5;
@@ -65420,21 +65525,21 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_20, () => onRoomColor(get(preset).color));
 			append($$anchor, button_20);
 		});
-		reset(div_25);
-		var div_26 = sibling(div_25, 2);
-		var input_21 = sibling(child(div_26), 2);
+		reset(div_29);
+		var div_30 = sibling(div_29, 2);
+		var input_21 = sibling(child(div_30), 2);
 		remove_input_defaults(input_21);
-		reset(div_26);
-		reset(div_24);
-		var div_27 = sibling(div_24, 2);
-		var div_28 = sibling(child(div_27), 2);
-		each(div_28, 21, () => textureGroups, index$1, ($$anchor, group) => {
-			var div_29 = root_22$1();
-			var span_19 = child(div_29);
+		reset(div_30);
+		reset(div_28);
+		var div_31 = sibling(div_28, 2);
+		var div_32 = sibling(child(div_31), 2);
+		each(div_32, 21, () => textureGroups, index$1, ($$anchor, group) => {
+			var div_33 = root_22$1();
+			var span_19 = child(div_33);
 			var text_25 = child(span_19, true);
 			reset(span_19);
-			var div_30 = sibling(span_19, 2);
-			each(div_30, 21, () => get(group).ids, index$1, ($$anchor, matId) => {
+			var div_34 = sibling(span_19, 2);
+			each(div_34, 21, () => get(group).ids, index$1, ($$anchor, matId) => {
 				const mat = /* @__PURE__ */ user_derived(() => floorMaterials.find((m) => m.id === get(matId)));
 				var fragment_6 = comment();
 				var node_11 = first_child(fragment_6);
@@ -65444,15 +65549,15 @@ function PropertiesPanel($$anchor, $$props) {
 						return (_floorTexPaths$$$get$ = floorTexPaths[get(mat).id]) !== null && _floorTexPaths$$$get$ !== void 0 ? _floorTexPaths$$$get$ : "";
 					});
 					var button_21 = root_24$1();
-					var div_31 = child(button_21);
-					var div_32 = sibling(div_31, 2);
-					var text_26 = child(div_32, true);
-					reset(div_32);
+					var div_35 = child(button_21);
+					var div_36 = sibling(div_35, 2);
+					var text_26 = child(div_36, true);
+					reset(div_36);
 					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_31, get(texPath) ? `background-image: url(${get(texPath)}); background-size: cover; background-position: center;` : `background-color: ${get(mat).color}`);
+						set_style(div_35, get(texPath) ? `background-image: url(${get(texPath)}); background-size: cover; background-position: center;` : `background-color: ${get(mat).color}`);
 						set_text(text_26, get(mat).name);
 					});
 					delegated("click", button_21, () => onRoomFloor(get(mat).id));
@@ -65463,14 +65568,14 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, fragment_6);
 			});
-			reset(div_30);
-			reset(div_29);
+			reset(div_34);
+			reset(div_33);
 			template_effect(() => set_text(text_25, get(group).label));
-			append($$anchor, div_29);
+			append($$anchor, div_33);
 		});
-		reset(div_28);
-		reset(div_27);
-		reset(div_22);
+		reset(div_32);
+		reset(div_31);
+		reset(div_26);
 		template_effect(($0) => {
 			var _$$get$roomType, _$$get$color6;
 			if (select_4_value !== (select_4_value = get(selectedRoomType))) {
@@ -65499,8 +65604,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_12 = ($$anchor) => {
 		var fragment_7 = root_25();
-		var div_33 = sibling(first_child(fragment_7), 2);
-		var label_28 = child(div_33);
+		var div_37 = sibling(first_child(fragment_7), 2);
+		var label_28 = child(div_37);
 		var select_6 = sibling(child(label_28), 2);
 		var option_26 = child(select_6);
 		option_26.value = option_26.__value = "straight";
@@ -65533,16 +65638,16 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_24);
 		reset(label_31);
 		var label_32 = sibling(label_31, 2);
-		var div_34 = sibling(child(label_32), 2);
-		var button_22 = child(div_34);
+		var div_38 = sibling(child(label_32), 2);
+		var button_22 = child(div_38);
 		var button_23 = sibling(button_22, 2);
-		reset(div_34);
+		reset(div_38);
 		reset(label_32);
 		var label_33 = sibling(label_32, 2);
 		var input_25 = sibling(child(label_33), 2);
 		remove_input_defaults(input_25);
 		reset(label_33);
-		reset(div_33);
+		reset(div_37);
 		template_effect(($0, $1, $2, $3) => {
 			if (select_6_value !== (select_6_value = get(selectedStair).stairType || "straight")) {
 				var _select_6$__value;
@@ -65573,12 +65678,12 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_14 = ($$anchor) => {
 		var fragment_8 = root_26();
-		var div_35 = sibling(first_child(fragment_8), 2);
-		var label_34 = child(div_35);
-		var div_36 = sibling(child(label_34), 2);
-		var button_24 = child(div_36);
+		var div_39 = sibling(first_child(fragment_8), 2);
+		var label_34 = child(div_39);
+		var div_40 = sibling(child(label_34), 2);
+		var button_24 = child(div_40);
 		var button_25 = sibling(button_24, 2);
-		reset(div_36);
+		reset(div_40);
 		reset(label_34);
 		var label_35 = sibling(label_34, 2);
 		var span_22 = child(label_35);
@@ -65594,9 +65699,9 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_27 = sibling(span_23, 2);
 		remove_input_defaults(input_27);
 		reset(label_36);
-		var div_37 = sibling(label_36, 2);
-		var div_38 = sibling(child(div_37), 2);
-		each(div_38, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
+		var div_41 = sibling(label_36, 2);
+		var div_42 = sibling(child(div_41), 2);
+		each(div_42, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
 			var button_26 = root_27();
 			template_effect(() => {
 				var _$$get$color7;
@@ -65607,13 +65712,13 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_26, () => updateColumn(get(selectedColumn).id, { color: get(preset).color }));
 			append($$anchor, button_26);
 		});
-		reset(div_38);
-		var div_39 = sibling(div_38, 2);
-		var input_28 = sibling(child(div_39), 2);
+		reset(div_42);
+		var div_43 = sibling(div_42, 2);
+		var input_28 = sibling(child(div_43), 2);
 		remove_input_defaults(input_28);
-		reset(div_39);
-		reset(div_37);
-		var node_12 = sibling(div_37, 2);
+		reset(div_43);
+		reset(div_41);
+		var node_12 = sibling(div_41, 2);
 		var consequent_13 = ($$anchor) => {
 			var label_37 = root_28();
 			var input_29 = sibling(child(label_37), 2);
@@ -65626,7 +65731,7 @@ function PropertiesPanel($$anchor, $$props) {
 		if_block(node_12, ($$render) => {
 			if (get(selectedColumn).shape === "square") $$render(consequent_13);
 		});
-		reset(div_35);
+		reset(div_39);
 		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"}`);
@@ -65649,8 +65754,8 @@ function PropertiesPanel($$anchor, $$props) {
 		append($$anchor, fragment_8);
 	};
 	var consequent_16 = ($$anchor) => {
-		var div_40 = root_29();
-		var h3_1 = child(div_40);
+		var div_44 = root_29();
+		var h3_1 = child(div_44);
 		var span_24 = child(h3_1);
 		next();
 		reset(h3_1);
@@ -65660,44 +65765,44 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_38);
 		var node_13 = sibling(label_38, 2);
 		var consequent_15 = ($$anchor) => {
-			var div_41 = root_30();
-			var span_25 = sibling(child(div_41));
+			var div_45 = root_30();
+			var span_25 = sibling(child(div_45));
 			var text_31 = child(span_25, true);
 			reset(span_25);
-			reset(div_41);
+			reset(div_45);
 			template_effect(() => set_text(text_31, get(selectedZone).cameraSerial));
-			append($$anchor, div_41);
+			append($$anchor, div_45);
 		};
 		if_block(node_13, ($$render) => {
 			if (get(selectedZone).cameraSerial) $$render(consequent_15);
 		});
-		var div_42 = sibling(node_13, 2);
-		var span_26 = sibling(child(div_42));
+		var div_46 = sibling(node_13, 2);
+		var span_26 = sibling(child(div_46));
 		var text_32 = child(span_26, true);
 		reset(span_26);
-		reset(div_42);
-		var label_39 = sibling(div_42, 2);
-		var div_43 = sibling(child(label_39), 2);
-		var node_14 = child(div_43);
+		reset(div_46);
+		var label_39 = sibling(div_46, 2);
+		var div_47 = sibling(child(label_39), 2);
+		var node_14 = child(div_47);
 		each(node_14, 17, () => ZONE_COLOR_PALETTE, index$1, ($$anchor, c) => {
 			var button_27 = root_31();
 			template_effect(() => {
-				var _$$get20;
+				var _$$get21;
 				set_class(button_27, 1, `w-6 h-6 rounded border-2 ${get(selectedZone).color === get(c) ? "border-slate-800" : "border-transparent"}`);
-				set_style(button_27, `background:${(_$$get20 = get(c)) !== null && _$$get20 !== void 0 ? _$$get20 : ""}`);
+				set_style(button_27, `background:${(_$$get21 = get(c)) !== null && _$$get21 !== void 0 ? _$$get21 : ""}`);
 			});
 			delegated("click", button_27, () => updateZone(get(selectedZone).id, { color: get(c) }));
 			append($$anchor, button_27);
 		});
 		var input_31 = sibling(node_14, 2);
 		remove_input_defaults(input_31);
-		reset(div_43);
+		reset(div_47);
 		reset(label_39);
 		var label_40 = sibling(label_39, 2);
 		var input_32 = sibling(child(label_40), 2);
 		remove_input_defaults(input_32);
 		reset(label_40);
-		reset(div_40);
+		reset(div_44);
 		template_effect(() => {
 			var _$$get$color8, _$$get$color9, _$$get$fillOpacity;
 			set_style(span_24, `background:${(_$$get$color8 = get(selectedZone).color) !== null && _$$get$color8 !== void 0 ? _$$get$color8 : ""}22;color:${(_$$get$color9 = get(selectedZone).color) !== null && _$$get$color9 !== void 0 ? _$$get$color9 : ""}`);
@@ -65709,11 +65814,11 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("input", input_30, (e) => updateZone(get(selectedZone).id, { name: e.target.value }));
 		delegated("input", input_31, (e) => updateZone(get(selectedZone).id, { color: e.target.value }));
 		delegated("input", input_32, (e) => updateZone(get(selectedZone).id, { fillOpacity: Number(e.target.value) }));
-		append($$anchor, div_40);
+		append($$anchor, div_44);
 	};
 	var consequent_17 = ($$anchor) => {
-		var div_44 = root_32();
-		var label_41 = sibling(child(div_44), 2);
+		var div_48 = root_32();
+		var label_41 = sibling(child(div_48), 2);
 		var input_33 = sibling(child(label_41), 2);
 		remove_input_defaults(input_33);
 		reset(label_41);
@@ -65722,13 +65827,13 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_34);
 		reset(label_42);
 		var label_43 = sibling(label_42, 2);
-		var div_45 = sibling(child(label_43), 2);
-		var input_35 = child(div_45);
+		var div_49 = sibling(child(label_43), 2);
+		var input_35 = child(div_49);
 		remove_input_defaults(input_35);
 		var span_27 = sibling(input_35, 2);
 		var text_33 = child(span_27, true);
 		reset(span_27);
-		reset(div_45);
+		reset(div_49);
 		reset(label_43);
 		var label_44 = sibling(label_43, 2);
 		var input_36 = sibling(child(label_44), 2);
@@ -65742,7 +65847,7 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_38 = sibling(child(label_46), 2);
 		remove_input_defaults(input_38);
 		reset(label_46);
-		reset(div_44);
+		reset(div_48);
 		template_effect(($0, $1) => {
 			set_value(input_33, get(selectedTextAnnotation).text);
 			set_value(input_34, get(selectedTextAnnotation).fontSize);
@@ -65758,7 +65863,7 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
 		delegated("input", input_37, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
 		delegated("input", input_38, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
-		append($$anchor, div_44);
+		append($$anchor, div_48);
 	};
 	if_block(node, ($$render) => {
 		if (get(selectedWall)) $$render(consequent_1);
@@ -65773,9 +65878,9 @@ function PropertiesPanel($$anchor, $$props) {
 	});
 	var node_15 = sibling(node, 2);
 	var consequent_18 = ($$anchor) => {
-		var div_46 = root_33();
-		var div_47 = sibling(child(div_46), 2);
-		var label_47 = child(div_47);
+		var div_50 = root_33();
+		var div_51 = sibling(child(div_50), 2);
+		var label_47 = child(div_51);
 		var input_39 = sibling(child(label_47), 2);
 		remove_input_defaults(input_39);
 		reset(label_47);
@@ -65787,15 +65892,15 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_41 = sibling(child(label_49), 2);
 		remove_input_defaults(input_41);
 		reset(label_49);
-		var div_48 = sibling(label_49, 2);
-		var button_28 = child(div_48);
+		var div_52 = sibling(label_49, 2);
+		var button_28 = child(div_52);
 		var text_34 = child(button_28, true);
 		reset(button_28);
 		var button_29 = sibling(button_28, 2);
-		reset(div_48);
-		var button_30 = sibling(div_48, 2);
-		reset(div_47);
-		reset(div_46);
+		reset(div_52);
+		var button_30 = sibling(div_52, 2);
+		reset(div_51);
+		reset(div_50);
 		template_effect(() => {
 			set_value(input_39, get(floor).backgroundImage.opacity);
 			set_value(input_40, get(floor).backgroundImage.scale);
@@ -65812,22 +65917,33 @@ function PropertiesPanel($$anchor, $$props) {
 			calibrationMode.set(true);
 		});
 		delegated("click", button_30, () => setBackgroundImage(void 0));
-		append($$anchor, div_46);
+		append($$anchor, div_50);
 	};
 	if_block(node_15, ($$render) => {
-		var _$$get21;
-		if (get(hasBgImage) && ((_$$get21 = get(floor)) === null || _$$get21 === void 0 ? void 0 : _$$get21.backgroundImage)) $$render(consequent_18);
+		var _$$get22;
+		if (get(hasBgImage) && ((_$$get22 = get(floor)) === null || _$$get22 === void 0 ? void 0 : _$$get22.backgroundImage)) $$render(consequent_18);
 	});
+	reset(div_4);
 	reset(div);
-	template_effect(() => classes = set_class(div, 1, "w-[420px] shrink-0 bg-white border-l border-gray-200 flex flex-col overflow-y-auto p-3 absolute right-0 z-40 shadow-lg", null, classes, { hidden: !get(hasSelection) }));
+	bind_this(div, ($$value) => set(panelEl, $$value), () => get(panelEl));
+	template_effect(() => {
+		var _$$get23;
+		classes = set_class(div, 1, "shrink-0 bg-white border-l border-gray-200 flex flex-col absolute right-0 z-40 shadow-lg overflow-visible", null, classes, { hidden: !get(hasSelection) });
+		set_style(div, `top: 0; bottom: 0; width: ${(_$$get23 = get(panelWidth)) !== null && _$$get23 !== void 0 ? _$$get23 : ""}px; ${get(resizing) ? "will-change: width;" : ""}`);
+		set_attribute(div_1, "aria-valuenow", get(panelWidth));
+		set_class(div_2, 1, `h-full w-0.5 rounded-full transition-colors ${get(resizing) ? "bg-blue-500" : "bg-transparent group-hover:bg-blue-400"}`);
+		set_class(div_3, 1, `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-8 rounded-full transition-opacity ${get(resizing) ? "bg-blue-500 opacity-100" : "bg-gray-300 opacity-0 group-hover:opacity-100"}`);
+	});
 	delegated("keydown", div, stopShortcutBubble);
 	event("keydown", div, stopShortcutBubble, true);
+	delegated("pointerdown", div_1, onResizePointerDown);
 	append($$anchor, div);
 	pop();
 	$$cleanup();
 }
 delegate([
 	"keydown",
+	"pointerdown",
 	"input",
 	"click",
 	"change"
@@ -66644,6 +66760,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let fovCursor = /* @__PURE__ */ state(null);
 	/** Selected committed floor FOV (by camera serial) — shows float toolbar */
 	let selectedFovSerial = /* @__PURE__ */ state(null);
+	/**
+	* true = camera selected via FOV polygon click (toolbar/properties OK,
+	* but no resize/rotate handles / yellow cone).
+	*/
+	let fovSelectionOnly = /* @__PURE__ */ state(false);
+	let draggingFovVertex = /* @__PURE__ */ state(null);
 	let editingTextAnnotationId = /* @__PURE__ */ state(null);
 	let editingTextAnnotationPos = /* @__PURE__ */ state(proxy({
 		x: 0,
@@ -67106,6 +67228,11 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 		if (tb.mode === "fov") clearSelectedFovMap();
 	}
+	function findFovVertexAt(wp, pts) {
+		const tol = 12 / get(zoom);
+		for (let i = 0; i < pts.length; i++) if (isNearPoint(wp, pts[i], tol)) return i;
+		return -1;
+	}
 	function drawCameraFovOverlays() {
 		if (!ctx || !get(currentFloor)) return;
 		const bounds = getInteriorFloorBounds(get(currentFloor));
@@ -67118,7 +67245,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			if (!mapStr) continue;
 			const pts = mapCoordinatesToWorldPoints(mapStr, bounds);
 			if (pts.length < 2) continue;
-			const isActive = (active === null || active === void 0 ? void 0 : active.id) === fi.id;
+			const isActive = get(selectedFovSerial) === fi.serial || (active === null || active === void 0 ? void 0 : active.id) === fi.id;
 			const color = ((_fi$props3 = fi.props) === null || _fi$props3 === void 0 ? void 0 : _fi$props3.zoneColor) || fi.color || "#22c55e";
 			ctx.save();
 			ctx.strokeStyle = color;
@@ -67146,36 +67273,36 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 		if (get(currentTool) === "cameraFov" && (get(fovPolyDraft).length || get(fovCursor))) {
 			var _active$props;
-			const pts = [...get(fovPolyDraft)];
-			if (get(fovCursor)) pts.push(get(fovCursor));
-			const color = (active === null || active === void 0 || (_active$props = active.props) === null || _active$props === void 0 ? void 0 : _active$props.zoneColor) || "#22c55e";
+			const color = (active === null || active === void 0 || (_active$props = active.props) === null || _active$props === void 0 ? void 0 : _active$props.zoneColor) || (active === null || active === void 0 ? void 0 : active.color) || "#22c55e";
 			ctx.save();
 			ctx.strokeStyle = color;
-			ctx.fillStyle = color;
-			ctx.globalAlpha = .15;
-			ctx.lineWidth = 2;
-			ctx.setLineDash([5, 4]);
-			if (pts.length >= 2) {
+			ctx.lineWidth = 2.5;
+			ctx.lineJoin = "round";
+			ctx.lineCap = "round";
+			if (get(fovPolyDraft).length >= 2) {
+				ctx.setLineDash([]);
 				ctx.beginPath();
-				const a = worldToScreen(pts[0].x, pts[0].y);
+				const a = worldToScreen(get(fovPolyDraft)[0].x, get(fovPolyDraft)[0].y);
 				ctx.moveTo(a.x, a.y);
-				for (let i = 1; i < pts.length; i++) {
-					const s = worldToScreen(pts[i].x, pts[i].y);
+				for (let i = 1; i < get(fovPolyDraft).length; i++) {
+					const s = worldToScreen(get(fovPolyDraft)[i].x, get(fovPolyDraft)[i].y);
 					ctx.lineTo(s.x, s.y);
 				}
 				ctx.stroke();
 			}
-			if (get(fovCursor) && get(fovPolyDraft).length >= 3) {
-				const a = worldToScreen(get(fovCursor).x, get(fovCursor).y);
-				const b = worldToScreen(get(fovPolyDraft)[0].x, get(fovPolyDraft)[0].y);
-				ctx.globalAlpha = .35;
+			if (get(fovCursor) && get(fovPolyDraft).length >= 1) {
+				const last = get(fovPolyDraft)[get(fovPolyDraft).length - 1];
+				const a = worldToScreen(last.x, last.y);
+				const b = worldToScreen(get(fovCursor).x, get(fovCursor).y);
+				ctx.setLineDash([6, 4]);
+				ctx.globalAlpha = .85;
 				ctx.beginPath();
 				ctx.moveTo(a.x, a.y);
 				ctx.lineTo(b.x, b.y);
 				ctx.stroke();
+				ctx.globalAlpha = 1;
+				ctx.setLineDash([]);
 			}
-			ctx.globalAlpha = 1;
-			ctx.setLineDash([]);
 			for (let i = 0; i < get(fovPolyDraft).length; i++) {
 				const s = worldToScreen(get(fovPolyDraft)[i].x, get(fovPolyDraft)[i].y);
 				drawVertexIndexBadge(ctx, s.x, s.y, i, color, 9);
@@ -67426,7 +67553,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		drawWindowOnWall(getCS(), wall, win);
 	}
 	function drawFurniture(item, selected) {
-		drawFurnitureItem(getCS(), item, selected, {
+		const showChrome = selected && !(item.catalogId === "camera" && get(fovSelectionOnly) && item.serial === get(selectedFovSerial));
+		drawFurnitureItem(getCS(), item, showChrome, {
 			selectedCameraSerial: selectedCameraSerial(),
 			showCameraCones: showCameraCones(),
 			showCameraLabels: showCameraLabels(),
@@ -67858,7 +67986,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			else zoomToFit();
 			needsFitToCanvas = false;
 		}
-		if (get(wallStart) || get(draggingFurnitureId) || get(draggingDoorId) || get(draggingWindowId) || get(draggingStairId) || get(draggingColumnId) || get(draggingWallEndpoint) || get(draggingWallParallel) || get(draggingCurveHandle) || get(draggingHandle) || get(draggingMultiSelect) || get(draggingRoomId) || get(draggingRoomLabelId) || get(draggingTextAnnotationId) || get(draggingGuideId) || get(draggingZoneId) || get(zoneRectDragStart) || get(zonePolyDraft).length > 0 || get(fovPolyDraft).length > 0 || get(measuring) || get(annotating) || get(currentPlacingId) || get(isPlacingStair) || get(isPlacingColumn) || get(marqueeStart) || get(isPanning)) canvasDirty = true;
+		if (get(wallStart) || get(draggingFurnitureId) || get(draggingDoorId) || get(draggingWindowId) || get(draggingStairId) || get(draggingColumnId) || get(draggingWallEndpoint) || get(draggingWallParallel) || get(draggingCurveHandle) || get(draggingHandle) || get(draggingMultiSelect) || get(draggingRoomId) || get(draggingRoomLabelId) || get(draggingTextAnnotationId) || get(draggingGuideId) || get(draggingZoneId) || get(draggingFovVertex) != null || get(zoneRectDragStart) || get(zonePolyDraft).length > 0 || get(fovPolyDraft).length > 0 || get(currentTool) === "cameraFov" || get(measuring) || get(annotating) || get(currentPlacingId) || get(isPlacingStair) || get(isPlacingColumn) || get(marqueeStart) || get(isPanning)) canvasDirty = true;
 		updateDetectedRooms();
 		const selId = get(currentSelectedId);
 		const multiIds = get(currentSelectedIds);
@@ -68958,11 +69086,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 				x: snap(wp.x),
 				y: snap(wp.y)
 			};
-			if (get(fovPolyDraft).length >= 3 && isNearPoint(snapped, get(fovPolyDraft)[0], 15 / get(zoom))) {
-				commitFovFloorPolygon(get(fovPolyDraft));
-				return;
-			}
 			set(fovPolyDraft, [...get(fovPolyDraft), snapped], true);
+			markDirty();
 			return;
 		}
 		if (tool === "select") {
@@ -68974,6 +69099,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 					if (zHit) {
 						set(selectedZoneId, zHit.id, true);
 						set(selectedFovSerial, null);
+						set(fovSelectionOnly, false);
 						selectedElementId.set(zHit.id);
 						set(selectedTextAnnotationId, null);
 						set(selectedAnnotationId, null);
@@ -68996,17 +69122,27 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 				const fovHit = findFovCameraAt(wp);
 				if (fovHit === null || fovHit === void 0 ? void 0 : fovHit.serial) {
+					var _fovHit$props;
+					const bounds = getInteriorFloorBounds(get(currentFloor));
+					const pts = bounds ? mapCoordinatesToWorldPoints((_fovHit$props = fovHit.props) === null || _fovHit$props === void 0 ? void 0 : _fovHit$props.mapCoordinates, bounds) : [];
+					const vIdx = pts.length ? findFovVertexAt(wp, pts) : -1;
 					set(selectedFovSerial, fovHit.serial, true);
+					set(fovSelectionOnly, true);
+					set(draggingFovVertex, vIdx >= 0 ? vIdx : null, true);
 					set(selectedZoneId, null);
 					selectedElementId.set(fovHit.id);
 					set(selectedTextAnnotationId, null);
 					set(selectedAnnotationId, null);
 					set(selectedMeasurementId, null);
+					if (vIdx >= 0) beginUndoGroup();
 					return;
 				}
 			}
 			set(selectedZoneId, null);
-			if (!objectAboveZone) set(selectedFovSerial, null);
+			if (!objectAboveZone) {
+				set(selectedFovSerial, null);
+				set(fovSelectionOnly, false);
+			}
 		}
 		if (tool === "select" && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.guides)) {
 			const GUIDE_HIT = 6 / get(zoom);
@@ -69228,20 +69364,22 @@ function FloorPlanCanvas($$anchor, $$props) {
 					}
 				}
 			}
-			const handle = findHandleAt$1(wp);
-			if (handle && get(currentSelectedId) && get(currentFloor)) {
-				const fi = get(currentFloor).furniture.find((f) => f.id === get(currentSelectedId));
-				if (fi) {
-					var _fi$scale$x, _fi$scale, _fi$scale$y, _fi$scale2;
-					set(draggingHandle, handle, true);
-					({ ...wp });
-					handleOrigScale = {
-						x: (_fi$scale$x = (_fi$scale = fi.scale) === null || _fi$scale === void 0 ? void 0 : _fi$scale.x) !== null && _fi$scale$x !== void 0 ? _fi$scale$x : 1,
-						y: (_fi$scale$y = (_fi$scale2 = fi.scale) === null || _fi$scale2 === void 0 ? void 0 : _fi$scale2.y) !== null && _fi$scale$y !== void 0 ? _fi$scale$y : 1
-					};
-					fi.rotation;
-					commitFurnitureMove();
-					return;
+			if (!get(fovSelectionOnly)) {
+				const handle = findHandleAt$1(wp);
+				if (handle && get(currentSelectedId) && get(currentFloor)) {
+					const fi = get(currentFloor).furniture.find((f) => f.id === get(currentSelectedId));
+					if (fi) {
+						var _fi$scale$x, _fi$scale, _fi$scale$y, _fi$scale2;
+						set(draggingHandle, handle, true);
+						({ ...wp });
+						handleOrigScale = {
+							x: (_fi$scale$x = (_fi$scale = fi.scale) === null || _fi$scale === void 0 ? void 0 : _fi$scale.x) !== null && _fi$scale$x !== void 0 ? _fi$scale$x : 1,
+							y: (_fi$scale$y = (_fi$scale2 = fi.scale) === null || _fi$scale2 === void 0 ? void 0 : _fi$scale2.y) !== null && _fi$scale$y !== void 0 ? _fi$scale$y : 1
+						};
+						fi.rotation;
+						commitFurnitureMove();
+						return;
+					}
 				}
 			}
 			function selectElement(id, isShift, isCtrl = false) {
@@ -69308,6 +69446,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			if (fi) {
 				var _fi$props4;
 				selectElement(fi.id, e.shiftKey, e.ctrlKey || e.metaKey);
+				set(fovSelectionOnly, false);
 				if (fi.catalogId === "camera" && fi.serial && ((_fi$props4 = fi.props) === null || _fi$props4 === void 0 ? void 0 : _fi$props4.mapCoordinates)) {
 					set(selectedFovSerial, fi.serial, true);
 					set(selectedZoneId, null);
@@ -69369,6 +69508,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 						selectedElementId.set(null);
 						selectedElementIds.set(/* @__PURE__ */ new Set());
 						set(selectedFovSerial, null);
+						set(fovSelectionOnly, false);
 						set(selectedZoneId, null);
 					}
 					selectedRoomId.set(null);
@@ -69489,6 +69629,22 @@ function FloorPlanCanvas($$anchor, $$props) {
 			x: snap(get(mousePos).x),
 			y: snap(get(mousePos).y)
 		}, true);
+		if (get(draggingFovVertex) != null && get(selectedFovSerial) && get(currentFloor)) {
+			const bounds = getInteriorFloorBounds(get(currentFloor));
+			const cam = get(currentFloor).furniture.find((f) => f.catalogId === "camera" && f.serial === get(selectedFovSerial));
+			if (cam && bounds) {
+				var _cam$props2;
+				const pts = mapCoordinatesToWorldPoints((_cam$props2 = cam.props) === null || _cam$props2 === void 0 ? void 0 : _cam$props2.mapCoordinates, bounds);
+				if (pts[get(draggingFovVertex)]) {
+					const next = pts.map((p) => ({ ...p }));
+					next[get(draggingFovVertex)] = {
+						x: snap(get(mousePos).x),
+						y: snap(get(mousePos).y)
+					};
+					setCameraMapCoordinatesFromWorld(get(selectedFovSerial), next);
+				}
+			}
+		}
 		if (get(draggingZoneId) && ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.zones)) {
 			const z = get(currentFloor).zones.find((z) => z.id === get(draggingZoneId));
 			if (z) {
@@ -69815,6 +69971,10 @@ function FloorPlanCanvas($$anchor, $$props) {
 			set(draggingZoneVertex, null);
 			set(zoneDragLast, null);
 		}
+		if (get(draggingFovVertex) != null) {
+			endUndoGroup();
+			set(draggingFovVertex, null);
+		}
 		if (get(draggingRoomLabelId)) {
 			const dx = get(mousePos).x - roomLabelDragStart.x;
 			const dy = get(mousePos).y - roomLabelDragStart.y;