floor-editor-ts 1.4.6 → 1.4.7

package/dist/floor-editor.es.js

@@ -64149,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=""><div role="separator" aria-orientation="vertical" aria-label="Resize properties panel" tabindex="0" style="cursor: col-resize;" title="Drag to resize"><div></div></div> <!> <!></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);
@@ -64739,14 +64739,15 @@ function PropertiesPanel($$anchor, $$props) {
 	let classes;
 	var div_1 = child(div);
 	set_attribute(div_1, "aria-valuemin", PANEL_MIN_W);
-	let classes_1;
 	var div_2 = child(div_1);
+	var div_3 = sibling(div_2, 2);
 	reset(div_1);
-	var node = sibling(div_1, 2);
+	var div_4 = sibling(div_1, 2);
+	var node = child(div_4);
 	var consequent_1 = ($$anchor) => {
 		var fragment = root_1$6();
-		var div_3 = sibling(first_child(fragment), 2);
-		var label = child(div_3);
+		var div_5 = sibling(first_child(fragment), 2);
+		var label = child(div_5);
 		var span = child(label);
 		var text = child(span);
 		reset(span);
@@ -64767,23 +64768,23 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_2 = sibling(span_2, 2);
 		remove_input_defaults(input_2);
 		reset(label_2);
-		var div_4 = sibling(label_2, 2);
-		var button = sibling(child(div_4), 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_4);
-		var div_5 = sibling(div_4, 2);
-		var div_6 = child(div_5);
-		var button_1 = child(div_6);
-		var button_2 = sibling(button_1, 2);
 		reset(div_6);
-		var node_1 = sibling(div_6, 2);
+		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_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_7 = root_2$7();
-			var div_8 = sibling(child(div_7), 2);
-			each(div_8, 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;
@@ -64796,13 +64797,13 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_3);
 			});
-			reset(div_8);
-			var label_3 = sibling(div_8, 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_9 = sibling(label_3, 4);
-			var button_4 = child(div_9);
+			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;
@@ -64833,8 +64834,8 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_5);
 			});
+			reset(div_11);
 			reset(div_9);
-			reset(div_7);
 			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"}`);
@@ -64845,14 +64846,14 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_4, () => {
 				if (get(selectedWall)) updateWall(get(selectedWall).id, { interiorTexture: "none" });
 			});
-			append($$anchor, div_7);
+			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_10 = root_5$3();
-			var div_11 = sibling(child(div_10), 2);
-			each(div_11, 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;
@@ -64865,13 +64866,13 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_6);
 			});
-			reset(div_11);
-			var label_4 = sibling(div_11, 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_12 = sibling(label_4, 4);
-			var button_7 = child(div_12);
+			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;
@@ -64902,8 +64903,8 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, button_8);
 			});
+			reset(div_14);
 			reset(div_12);
-			reset(div_10);
 			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"}`);
@@ -64914,14 +64915,14 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_7, () => {
 				if (get(selectedWall)) updateWall(get(selectedWall).id, { exteriorTexture: "none" });
 			});
-			append($$anchor, div_10);
+			append($$anchor, div_12);
 		};
 		if_block(node_1, ($$render) => {
 			if (get(wallSideTab) === "interior") $$render(consequent);
 			else $$render(alternate, -1);
 		});
+		reset(div_7);
 		reset(div_5);
-		reset(div_3);
 		template_effect(($0, $1, $2, $3, $4, $5) => {
 			set_text(text, `Length (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
 			set_value(input, $1);
@@ -64963,8 +64964,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_2 = ($$anchor) => {
 		var fragment_1 = root_8$1();
-		var div_13 = sibling(first_child(fragment_1), 2);
-		var label_5 = child(div_13);
+		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);
@@ -65011,18 +65012,18 @@ function PropertiesPanel($$anchor, $$props) {
 		init_select(select);
 		reset(label_9);
 		var label_10 = sibling(label_9, 2);
-		var div_14 = sibling(child(label_10), 2);
-		var button_9 = child(div_14);
+		var div_16 = sibling(child(label_10), 2);
+		var button_9 = child(div_16);
 		var button_10 = sibling(button_9, 2);
-		reset(div_14);
+		reset(div_16);
 		reset(label_10);
 		var label_11 = sibling(label_10, 2);
-		var div_15 = sibling(child(label_11), 2);
-		var button_11 = child(div_15);
+		var div_17 = sibling(child(label_11), 2);
+		var button_11 = child(div_17);
 		var button_12 = sibling(button_11, 2);
-		reset(div_15);
+		reset(div_17);
 		reset(label_11);
-		reset(div_13);
+		reset(div_15);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
 			var _$$get17, _$$get18, _$$get19, _$$get20;
 			set_text(text_6, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
@@ -65075,8 +65076,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_3 = ($$anchor) => {
 		var fragment_2 = root_9$1();
-		var div_16 = sibling(first_child(fragment_2), 2);
-		var label_12 = child(div_16);
+		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";
@@ -65127,7 +65128,7 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_13 = sibling(span_13, 2);
 		remove_input_defaults(input_13);
 		reset(label_17);
-		reset(div_16);
+		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")) {
@@ -65175,8 +65176,8 @@ function PropertiesPanel($$anchor, $$props) {
 		var text_17 = child(button_13, true);
 		reset(button_13);
 		reset(h3);
-		var div_17 = sibling(h3, 2);
-		var node_4 = child(div_17);
+		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);
@@ -65236,8 +65237,8 @@ function PropertiesPanel($$anchor, $$props) {
 			});
 			var node_9 = sibling(node_8, 2);
 			var consequent_6 = ($$anchor) => {
-				var div_18 = root_16();
-				var node_10 = sibling(child(div_18), 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;
@@ -65269,8 +65270,8 @@ function PropertiesPanel($$anchor, $$props) {
 						}
 					});
 				}
-				reset(div_18);
-				append($$anchor, div_18);
+				reset(div_20);
+				append($$anchor, div_20);
 			};
 			var consequent_7 = ($$anchor) => {
 				append($$anchor, root_17$1());
@@ -65288,9 +65289,9 @@ function PropertiesPanel($$anchor, $$props) {
 		if_block(node_4, ($$render) => {
 			if (get(selectedFurniture).catalogId === "camera") $$render(consequent_8);
 		});
-		var div_19 = sibling(node_4, 2);
-		var div_20 = sibling(child(div_19), 2);
-		each(div_20, 20, () => [
+		var div_21 = sibling(node_4, 2);
+		var div_22 = sibling(child(div_21), 2);
+		each(div_22, 20, () => [
 			"#ffffff",
 			"#f5f5dc",
 			"#d2b48c",
@@ -65314,13 +65315,13 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_14, () => onFurnitureColor(color));
 			append($$anchor, button_14);
 		});
-		reset(div_20);
-		var div_21 = sibling(div_20, 2);
-		var input_15 = sibling(child(div_21), 2);
+		reset(div_22);
+		var div_23 = sibling(div_22, 2);
+		var input_15 = sibling(child(div_23), 2);
 		remove_input_defaults(input_15);
+		reset(div_23);
 		reset(div_21);
-		reset(div_19);
-		var label_20 = sibling(div_19, 2);
+		var label_20 = sibling(div_21, 2);
 		var span_16 = child(label_20);
 		var text_20 = child(span_16);
 		reset(span_16);
@@ -65367,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_22 = sibling(label_24, 2);
-		var button_15 = child(div_22);
+		var div_24 = sibling(label_24, 2);
+		var button_15 = child(div_24);
 		var button_16 = sibling(button_15, 2);
-		reset(div_22);
-		var div_23 = sibling(div_22, 2);
-		var button_17 = child(div_23);
+		reset(div_24);
+		var div_25 = sibling(div_24, 2);
+		var button_17 = child(div_25);
 		var button_18 = sibling(button_17, 2);
-		reset(div_23);
-		var button_19 = sibling(div_23, 2);
-		reset(div_17);
+		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);
@@ -65466,8 +65467,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_11 = ($$anchor) => {
 		var fragment_5 = root_19$1();
-		var div_24 = sibling(first_child(fragment_5), 2);
-		var label_25 = child(div_24);
+		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();
@@ -65506,14 +65507,14 @@ function PropertiesPanel($$anchor, $$props) {
 		var select_5_value;
 		init_select(select_5);
 		reset(label_27);
-		var div_25 = sibling(label_27, 2);
-		var p_2 = sibling(child(div_25), 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_25);
-		var div_26 = sibling(div_25, 2);
-		var div_27 = sibling(child(div_26), 2);
-		each(div_27, 21, () => roomColorPresets, index$1, ($$anchor, preset) => {
+		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;
@@ -65524,21 +65525,21 @@ function PropertiesPanel($$anchor, $$props) {
 			delegated("click", button_20, () => onRoomColor(get(preset).color));
 			append($$anchor, button_20);
 		});
-		reset(div_27);
-		var div_28 = sibling(div_27, 2);
-		var input_21 = sibling(child(div_28), 2);
+		reset(div_29);
+		var div_30 = sibling(div_29, 2);
+		var input_21 = sibling(child(div_30), 2);
 		remove_input_defaults(input_21);
+		reset(div_30);
 		reset(div_28);
-		reset(div_26);
-		var div_29 = sibling(div_26, 2);
-		var div_30 = sibling(child(div_29), 2);
-		each(div_30, 21, () => textureGroups, index$1, ($$anchor, group) => {
-			var div_31 = root_22$1();
-			var span_19 = child(div_31);
+		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_32 = sibling(span_19, 2);
-			each(div_32, 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);
@@ -65548,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_33 = child(button_21);
-					var div_34 = sibling(div_33, 2);
-					var text_26 = child(div_34, true);
-					reset(div_34);
+					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_33, 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));
@@ -65567,14 +65568,14 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				append($$anchor, fragment_6);
 			});
-			reset(div_32);
-			reset(div_31);
+			reset(div_34);
+			reset(div_33);
 			template_effect(() => set_text(text_25, get(group).label));
-			append($$anchor, div_31);
+			append($$anchor, div_33);
 		});
-		reset(div_30);
-		reset(div_29);
-		reset(div_24);
+		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))) {
@@ -65603,8 +65604,8 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_12 = ($$anchor) => {
 		var fragment_7 = root_25();
-		var div_35 = sibling(first_child(fragment_7), 2);
-		var label_28 = child(div_35);
+		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";
@@ -65637,16 +65638,16 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_24);
 		reset(label_31);
 		var label_32 = sibling(label_31, 2);
-		var div_36 = sibling(child(label_32), 2);
-		var button_22 = child(div_36);
+		var div_38 = sibling(child(label_32), 2);
+		var button_22 = child(div_38);
 		var button_23 = sibling(button_22, 2);
-		reset(div_36);
+		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_35);
+		reset(div_37);
 		template_effect(($0, $1, $2, $3) => {
 			if (select_6_value !== (select_6_value = get(selectedStair).stairType || "straight")) {
 				var _select_6$__value;
@@ -65677,12 +65678,12 @@ function PropertiesPanel($$anchor, $$props) {
 	};
 	var consequent_14 = ($$anchor) => {
 		var fragment_8 = root_26();
-		var div_37 = sibling(first_child(fragment_8), 2);
-		var label_34 = child(div_37);
-		var div_38 = sibling(child(label_34), 2);
-		var button_24 = child(div_38);
+		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_38);
+		reset(div_40);
 		reset(label_34);
 		var label_35 = sibling(label_34, 2);
 		var span_22 = child(label_35);
@@ -65698,9 +65699,9 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_27 = sibling(span_23, 2);
 		remove_input_defaults(input_27);
 		reset(label_36);
-		var div_39 = sibling(label_36, 2);
-		var div_40 = sibling(child(div_39), 2);
-		each(div_40, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
+		var 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;
@@ -65711,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_40);
-		var div_41 = sibling(div_40, 2);
-		var input_28 = sibling(child(div_41), 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_43);
 		reset(div_41);
-		reset(div_39);
-		var node_12 = sibling(div_39, 2);
+		var node_12 = sibling(div_41, 2);
 		var consequent_13 = ($$anchor) => {
 			var label_37 = root_28();
 			var input_29 = sibling(child(label_37), 2);
@@ -65730,7 +65731,7 @@ function PropertiesPanel($$anchor, $$props) {
 		if_block(node_12, ($$render) => {
 			if (get(selectedColumn).shape === "square") $$render(consequent_13);
 		});
-		reset(div_37);
+		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"}`);
@@ -65753,8 +65754,8 @@ function PropertiesPanel($$anchor, $$props) {
 		append($$anchor, fragment_8);
 	};
 	var consequent_16 = ($$anchor) => {
-		var div_42 = root_29();
-		var h3_1 = child(div_42);
+		var div_44 = root_29();
+		var h3_1 = child(div_44);
 		var span_24 = child(h3_1);
 		next();
 		reset(h3_1);
@@ -65764,25 +65765,25 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_38);
 		var node_13 = sibling(label_38, 2);
 		var consequent_15 = ($$anchor) => {
-			var div_43 = root_30();
-			var span_25 = sibling(child(div_43));
+			var div_45 = root_30();
+			var span_25 = sibling(child(div_45));
 			var text_31 = child(span_25, true);
 			reset(span_25);
-			reset(div_43);
+			reset(div_45);
 			template_effect(() => set_text(text_31, get(selectedZone).cameraSerial));
-			append($$anchor, div_43);
+			append($$anchor, div_45);
 		};
 		if_block(node_13, ($$render) => {
 			if (get(selectedZone).cameraSerial) $$render(consequent_15);
 		});
-		var div_44 = sibling(node_13, 2);
-		var span_26 = sibling(child(div_44));
+		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_44);
-		var label_39 = sibling(div_44, 2);
-		var div_45 = sibling(child(label_39), 2);
-		var node_14 = child(div_45);
+		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(() => {
@@ -65795,13 +65796,13 @@ function PropertiesPanel($$anchor, $$props) {
 		});
 		var input_31 = sibling(node_14, 2);
 		remove_input_defaults(input_31);
-		reset(div_45);
+		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_42);
+		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 : ""}`);
@@ -65813,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_42);
+		append($$anchor, div_44);
 	};
 	var consequent_17 = ($$anchor) => {
-		var div_46 = root_32();
-		var label_41 = sibling(child(div_46), 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);
@@ -65826,13 +65827,13 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_34);
 		reset(label_42);
 		var label_43 = sibling(label_42, 2);
-		var div_47 = sibling(child(label_43), 2);
-		var input_35 = child(div_47);
+		var div_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_47);
+		reset(div_49);
 		reset(label_43);
 		var label_44 = sibling(label_43, 2);
 		var input_36 = sibling(child(label_44), 2);
@@ -65846,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_46);
+		reset(div_48);
 		template_effect(($0, $1) => {
 			set_value(input_33, get(selectedTextAnnotation).text);
 			set_value(input_34, get(selectedTextAnnotation).fontSize);
@@ -65862,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_46);
+		append($$anchor, div_48);
 	};
 	if_block(node, ($$render) => {
 		if (get(selectedWall)) $$render(consequent_1);
@@ -65877,9 +65878,9 @@ function PropertiesPanel($$anchor, $$props) {
 	});
 	var node_15 = sibling(node, 2);
 	var consequent_18 = ($$anchor) => {
-		var div_48 = root_33();
-		var div_49 = sibling(child(div_48), 2);
-		var label_47 = child(div_49);
+		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);
@@ -65891,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_50 = sibling(label_49, 2);
-		var button_28 = child(div_50);
+		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_52);
+		var button_30 = sibling(div_52, 2);
+		reset(div_51);
 		reset(div_50);
-		var button_30 = sibling(div_50, 2);
-		reset(div_49);
-		reset(div_48);
 		template_effect(() => {
 			set_value(input_39, get(floor).backgroundImage.opacity);
 			set_value(input_40, get(floor).backgroundImage.scale);
@@ -65916,21 +65917,22 @@ function PropertiesPanel($$anchor, $$props) {
 			calibrationMode.set(true);
 		});
 		delegated("click", button_30, () => setBackgroundImage(void 0));
-		append($$anchor, div_48);
+		append($$anchor, div_50);
 	};
 	if_block(node_15, ($$render) => {
 		var _$$get22;
 		if (get(hasBgImage) && ((_$$get22 = get(floor)) === null || _$$get22 === void 0 ? void 0 : _$$get22.backgroundImage)) $$render(consequent_18);
 	});
+	reset(div_4);
 	reset(div);
 	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 overflow-y-auto p-3 absolute right-0 z-40 shadow-lg", null, classes, { hidden: !get(hasSelection) });
+		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));
-		classes_1 = set_class(div_1, 1, "absolute left-0 top-0 bottom-0 w-1.5 -ml-0.5 z-50 group touch-none", null, classes_1, { "bg-blue-400": get(resizing) });
-		set_class(div_2, 1, `absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-transparent group-hover:bg-blue-400/70 transition-colors ${get(resizing) ? "bg-blue-500" : ""}`);
+		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);