floor-editor-ts 1.3.4 → 1.3.6

package/dist/floor-editor.es.js

@@ -5982,6 +5982,19 @@ function emitFloorCallback(type, data) {
 		data
 	});
 }
+function emitCamerasChanged(data) {
+	if (data.added.length === 0 && data.removed.length === 0) return;
+	emitFloorCallback("camerasChanged", data);
+}
+function cameraItemToCallbackProps(item) {
+	var _item$props, _ref, _item$name, _item$props2;
+	if (!item.serial) return null;
+	return {
+		...(_item$props = item.props) !== null && _item$props !== void 0 ? _item$props : {},
+		serial: item.serial,
+		name: (_ref = (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.name) !== null && _ref !== void 0 ? _ref : ""
+	};
+}
 //#endregion
 //#region src/lib/stores/onboarding.svelte.ts
 var onboarding_svelte_exports = /* @__PURE__ */ __exportAll({
@@ -6156,6 +6169,33 @@ function reviveDates(p) {
 	if (p.updatedAt && !(p.updatedAt instanceof Date)) p.updatedAt = new Date(p.updatedAt);
 	return p;
 }
+function collectCamerasBySerial(project) {
+	const map = /* @__PURE__ */ new Map();
+	if (!(project === null || project === void 0 ? void 0 : project.floors)) return map;
+	for (const floor of project.floors) {
+		var _floor$furniture;
+		for (const item of (_floor$furniture = floor.furniture) !== null && _floor$furniture !== void 0 ? _floor$furniture : []) {
+			if (item.catalogId !== "camera" || !item.serial) continue;
+			const props = cameraItemToCallbackProps(item);
+			if (props) map.set(props.serial, props);
+		}
+	}
+	return map;
+}
+/** Diff assigned cameras between two project snapshots and notify host. */
+function emitCameraDiff(before, after) {
+	if (isAssignedCamerasSyncing()) return;
+	const beforeMap = collectCamerasBySerial(before);
+	const afterMap = collectCamerasBySerial(after);
+	const removed = [];
+	const added = [];
+	for (const [serial, props] of beforeMap) if (!afterMap.has(serial)) removed.push(props);
+	for (const [serial, props] of afterMap) if (!beforeMap.has(serial)) added.push(props);
+	emitCamerasChanged({
+		added,
+		removed
+	});
+}
 function undo() {
 	const prev = undoStack.pop();
 	if (!prev) return;
@@ -6165,19 +6205,23 @@ function undo() {
 		description: prev.description,
 		timestamp: prev.timestamp
 	});
-	currentProject.set(reviveDates(JSON.parse(prev.state)));
+	const next = reviveDates(JSON.parse(prev.state));
+	currentProject.set(next);
+	emitCameraDiff(cur, next);
 	syncHistoryStore();
 }
 function redo() {
-	const next = redoStack.pop();
-	if (!next) return;
+	const nextEntry = redoStack.pop();
+	if (!nextEntry) return;
 	const cur = get$1(currentProject);
 	if (cur) undoStack.push({
 		state: JSON.stringify(cur),
-		description: next.description,
-		timestamp: next.timestamp
+		description: nextEntry.description,
+		timestamp: nextEntry.timestamp
 	});
-	currentProject.set(reviveDates(JSON.parse(next.state)));
+	const next = reviveDates(JSON.parse(nextEntry.state));
+	currentProject.set(next);
+	emitCameraDiff(cur, next);
 	syncHistoryStore();
 }
 /** Jump to a specific undo history step by index (0 = oldest) */
@@ -6198,7 +6242,9 @@ function jumpToUndoStep(targetIndex) {
 		redoStack.push(entry);
 	}
 	const target = undoStack.pop();
-	currentProject.set(reviveDates(JSON.parse(target.state)));
+	const next = reviveDates(JSON.parse(target.state));
+	currentProject.set(next);
+	emitCameraDiff(cur, next);
 	syncHistoryStore();
 }
 function mutate(fn, description) {
@@ -6372,10 +6418,13 @@ function removeFurniture(id) {
 	mutate((f) => {
 		f.furniture = f.furniture.filter((fi) => fi.id !== id);
 	}, "Deleted furniture");
-	if ((removedCamera === null || removedCamera === void 0 ? void 0 : removedCamera.serial) && !isAssignedCamerasSyncing()) emitFloorCallback("cameraRemoved", {
-		serial: removedCamera.serial,
-		name: removedCamera.name
-	});
+	if ((removedCamera === null || removedCamera === void 0 ? void 0 : removedCamera.serial) && !isAssignedCamerasSyncing()) {
+		const props = cameraItemToCallbackProps(removedCamera);
+		if (props) emitCamerasChanged({
+			added: [],
+			removed: [props]
+		});
+	}
 }
 function addStair(position) {
 	const id = uid$1();
@@ -6489,10 +6538,13 @@ function removeElement(id) {
 		if (f.columns) f.columns = f.columns.filter((c) => c.id !== id);
 		if (f.textAnnotations) f.textAnnotations = f.textAnnotations.filter((t) => t.id !== id);
 	}, "Deleted element");
-	if ((removedCamera === null || removedCamera === void 0 ? void 0 : removedCamera.serial) && !isAssignedCamerasSyncing()) emitFloorCallback("cameraRemoved", {
-		serial: removedCamera.serial,
-		name: removedCamera.name
-	});
+	if ((removedCamera === null || removedCamera === void 0 ? void 0 : removedCamera.serial) && !isAssignedCamerasSyncing()) {
+		const props = cameraItemToCallbackProps(removedCamera);
+		if (props) emitCamerasChanged({
+			added: [],
+			removed: [props]
+		});
+	}
 }
 /** Move a wall endpoint without creating an undo snapshot (for dragging) */
 function moveWallEndpoint(id, endpoint, position) {
@@ -6526,10 +6578,30 @@ function updateWindow(id, updates) {
 	});
 }
 function updateFurniture(id, updates) {
+	const p = get$1(currentProject);
+	const floor = p === null || p === void 0 ? void 0 : p.floors.find((f) => f.id === p.activeFloorId);
+	const before = floor === null || floor === void 0 ? void 0 : floor.furniture.find((fi) => fi.id === id);
+	const beforeSerial = (before === null || before === void 0 ? void 0 : before.catalogId) === "camera" ? before.serial || void 0 : void 0;
+	const beforeProps = (before === null || before === void 0 ? void 0 : before.catalogId) === "camera" ? cameraItemToCallbackProps(before) : null;
 	mutate((f) => {
 		const fi = f.furniture.find((fi) => fi.id === id);
 		if (fi) Object.assign(fi, updates);
 	});
+	if ((before === null || before === void 0 ? void 0 : before.catalogId) !== "camera" || isAssignedCamerasSyncing()) return;
+	const afterProject = get$1(currentProject);
+	const afterFloor = afterProject === null || afterProject === void 0 ? void 0 : afterProject.floors.find((f) => f.id === afterProject.activeFloorId);
+	const after = afterFloor === null || afterFloor === void 0 ? void 0 : afterFloor.furniture.find((fi) => fi.id === id);
+	const afterSerial = (after === null || after === void 0 ? void 0 : after.serial) || void 0;
+	if (beforeSerial === afterSerial) return;
+	const added = [];
+	const removed = [];
+	if (beforeSerial && beforeProps) removed.push(beforeProps);
+	const afterProps = after ? cameraItemToCallbackProps(after) : null;
+	if (afterSerial && afterProps) added.push(afterProps);
+	emitCamerasChanged({
+		added,
+		removed
+	});
 }
 function updateRoom(id, updates) {
 	mutate((f) => {
@@ -7020,6 +7092,18 @@ var localStore = {
 };
 //#endregion
 //#region src/lib/packageDefaults.ts
+/** Flatten host camera object into string props for furniture + UI. */
+function assignedCameraToProps(cam) {
+	const props = {};
+	for (const [key, value] of Object.entries(cam)) {
+		if (value == null) continue;
+		props[key] = String(value);
+	}
+	return props;
+}
+function formatCameraPropLabel(key) {
+	return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()).trim();
+}
 var DEFAULT_CONFIG = {
 	viewOnly: false,
 	floorMaxWidth: 600,
@@ -7041,7 +7125,15 @@ var DEFAULT_CONFIG = {
 function normalizeConfig(value) {
 	if (!value || typeof value !== "object") return { ...DEFAULT_CONFIG };
 	const siteCameras = Array.isArray(value.siteCameras) ? value.siteCameras.filter((c) => !!c && typeof c === "object" && typeof c.serial === "string" && typeof c.name === "string") : DEFAULT_CONFIG.siteCameras;
-	const assignedCameras = Array.isArray(value.assignedCameras) ? value.assignedCameras.filter((c) => !!c && typeof c === "object" && typeof c.serial === "string" && c.serial.trim().length > 0 && typeof c.name === "string") : DEFAULT_CONFIG.assignedCameras;
+	const assignedCameras = Array.isArray(value.assignedCameras) ? value.assignedCameras.filter((c) => !!c && typeof c === "object" && typeof c.serial === "string" && String(c.serial).trim().length > 0).map((c) => {
+		const next = { serial: String(c.serial).trim() };
+		for (const [key, val] of Object.entries(c)) {
+			if (key === "serial") continue;
+			if (val == null) continue;
+			if (typeof val === "string" || typeof val === "number" || typeof val === "boolean") next[key] = val;
+		}
+		return next;
+	}) : DEFAULT_CONFIG.assignedCameras;
 	const image = typeof value.cameraThumbnail === "string" ? value.cameraThumbnail ? value.cameraThumbnail : DEFAULT_CONFIG.cameraThumbnail : DEFAULT_CONFIG.cameraThumbnail;
 	const opacity = typeof value.cameraThumbnailOpacity === "number" && value.cameraThumbnailOpacity >= 0 && value.cameraThumbnailOpacity <= 1 ? value.cameraThumbnailOpacity : DEFAULT_CONFIG.cameraThumbnailOpacity;
 	const canvasBackground = normalizeColor$1(value.canvasBackground, DEFAULT_CONFIG.canvasBackground);
@@ -56161,7 +56253,7 @@ var themePreference = createThemeStore();
 //#endregion
 //#region src/lib/components/toolbar/SettingsDialog.svelte
 init_client();
-var root_2$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_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_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>`);
@@ -56289,7 +56381,7 @@ function SettingsDialog($$anchor, $$props) {
 		var button_1 = child(div_3);
 		var node_1 = sibling(child(button_1));
 		var consequent = ($$anchor) => {
-			append($$anchor, root_2$12());
+			append($$anchor, root_2$13());
 		};
 		if_block(node_1, ($$render) => {
 			if (get(activeTab) === "project") $$render(consequent);
@@ -56569,7 +56661,7 @@ delegate([
 //#endregion
 //#region src/lib/components/sidebar/AreaSummaryPanel.svelte
 init_client();
-var root_2$11 = /* @__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_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$12 = /* @__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_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>`);
@@ -56690,7 +56782,7 @@ function AreaSummaryPanel($$anchor, $$props) {
 		var div_10 = root_1$12();
 		var div_11 = sibling(child(div_10), 2);
 		each(div_11, 21, () => get(categoryTotals), index$1, ($$anchor, cat) => {
-			var div_12 = root_2$11();
+			var div_12 = root_2$12();
 			var span = child(div_12);
 			var text_4 = child(span);
 			var span_1 = sibling(text_4);
@@ -56918,7 +57010,7 @@ async function autoSave(onDispatch) {
 //#endregion
 //#region src/lib/components/toolbar/VersionHistoryPanel.svelte
 init_client();
-var root_2$10 = /* @__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_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_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>`);
@@ -56968,7 +57060,7 @@ function VersionHistoryPanel($$anchor, $$props) {
 		var div_3 = sibling(div_2, 2);
 		var node_1 = child(div_3);
 		var consequent = ($$anchor) => {
-			append($$anchor, root_2$10());
+			append($$anchor, root_2$11());
 		};
 		var alternate = ($$anchor) => {
 			var div_4 = root_3$10();
@@ -57034,14 +57126,14 @@ delegate(["click", "keydown"]);
 init_client();
 init_index_client();
 init_onboarding_svelte();
-var root_2$9 = /* @__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_2$10 = /* @__PURE__ */ from_html(`<input type="text" class="bg-white/20 text-white font-semibold px-2 py-0.5 rounded border border-white/30 outline-none text-sm w-40"/>`);
 var root_3$9 = /* @__PURE__ */ from_html(`<button class="font-semibold text-white text-sm hover:bg-white/10 px-2 py-0.5 rounded transition-colors" title="Click to rename"> </button>`);
 var root_4$8 = /* @__PURE__ */ from_html(`<button> </button>`);
 var root_5$5 = /* @__PURE__ */ from_html(`<div class="flex bg-white/15 rounded-full p-0.5"><button title="Select mode (V)" aria-label="Select mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></button> <button title="Pan mode (H)" aria-label="Pan mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v1"></path><path d="M14 10V4a2 2 0 0 0-4 0v2"></path><path d="M10 10.5V6a2 2 0 0 0-4 0v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"></path></svg></button></div>`);
 var root_6$4 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1 bg-white/15 rounded-full p-0.5"><button class="w-7 h-7 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors text-sm font-bold" title="Zoom Out (−)" aria-label="Zoom Out">−</button> <button class="px-2 py-1 text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors min-w-[3rem] text-center" title="Reset Zoom (100%)"> </button> <button class="w-7 h-7 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-colors text-sm font-bold" title="Zoom In (+)" aria-label="Zoom In">+</button></div>`);
 var root_8$2 = /* @__PURE__ */ from_html(`<button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Import JSON</button>`);
 var root_7$5 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-48 z-50"><button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print Layout</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg> Export 2D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> Export 3D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg> Export as SVG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M8 16h2"></path><path d="M14 16h2"></path></svg> Export as DXF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 16h6"></path></svg> Export as DWG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 11v6"></path><path d="M8 11v6"></path><path d="M12 11v6"></path></svg> Export as PDF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg> Download JSON</button> <div class="h-px bg-gray-100 my-1"></div> <!> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> New Project</button></div>`);
-var root_1$10 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center px-4 gap-3 shrink-0 shadow-sm"><!> <div class="h-5 w-px bg-white/20"></div> <div class="flex items-center gap-1"><!> <button class="text-white/80 hover:text-white text-xs hover:bg-white/10 px-1.5 py-0.5 rounded transition-colors" title="Add Floor" aria-label="Add Floor">+</button> <span class="text-white/40 text-[10px] ml-1"> </span></div> <div class="flex-1"></div> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Undo (Ctrl+Z)" aria-label="Undo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg></button> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Redo (Ctrl+Y)" aria-label="Redo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path></svg></button> <div class="h-5 w-px bg-white/20"></div> <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> <!> <button aria-label="Toggle Furniture"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="12" width="20" height="8" rx="1"></rect><path d="M4 12V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5"></path><line x1="12" y1="12" x2="12" y2="20"></line></svg></button> <div class="h-5 w-px bg-white/20"></div> <!> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Version History" aria-label="Version History"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Area Summary" aria-label="Area Summary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M9 3v18"></path></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Settings" aria-label="Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button> <div class="h-5 w-px bg-white/20"></div> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Export</button> <!></div> <span><!></span> <button class="px-3 py-1.5 text-sm bg-white text-slate-800 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-sm">Save</button></div>`);
+var root_1$10 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center px-4 gap-3 shrink-0 shadow-sm"><button type="button"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2.5"></rect><path d="M9 3v18"></path></svg></button> <!> <div class="h-5 w-px bg-white/20"></div> <div class="flex items-center gap-1"><!> <button class="text-white/80 hover:text-white text-xs hover:bg-white/10 px-1.5 py-0.5 rounded transition-colors" title="Add Floor" aria-label="Add Floor">+</button> <span class="text-white/40 text-[10px] ml-1"> </span></div> <div class="flex-1"></div> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Undo (Ctrl+Z)" aria-label="Undo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg></button> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Redo (Ctrl+Y)" aria-label="Redo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"></path></svg></button> <div class="h-5 w-px bg-white/20"></div> <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> <!> <button aria-label="Toggle Furniture"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="12" width="20" height="8" rx="1"></rect><path d="M4 12V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5"></path><line x1="12" y1="12" x2="12" y2="20"></line></svg></button> <div class="h-5 w-px bg-white/20"></div> <!> <button class="p-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Version History" aria-label="Version History"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Area Summary" aria-label="Area Summary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M9 3v18"></path></svg></button> <button class="px-2 py-1.5 text-white/80 hover:text-white hover:bg-white/10 rounded transition-colors" title="Settings" aria-label="Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button> <div class="h-5 w-px bg-white/20"></div> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Export</button> <!></div> <span><!></span> <button class="px-3 py-1.5 text-sm bg-white text-slate-800 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-sm">Save</button></div>`);
 var root_13$2 = /* @__PURE__ */ from_html(`<div class="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-48 z-50"><button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print Layout</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg> Export 2D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> Export 3D as PNG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg> Export as SVG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M8 16h2"></path><path d="M14 16h2"></path></svg> Export as DXF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M9 16h6"></path></svg> Export as DWG</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path><path d="M16 11v6"></path><path d="M8 11v6"></path><path d="M12 11v6"></path></svg> Export as PDF</button> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg> Download JSON</button> <div class="h-px bg-gray-100 my-1"></div> <button class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Import JSON</button></div>`);
 var root_12$2 = /* @__PURE__ */ from_html(`<div class="h-12 bg-gradient-to-r from-slate-800 to-slate-700 flex items-center justify-between px-4 gap-3 shrink-0 shadow-sm"><span class="font-semibold text-white text-sm px-2 py-0.5 rounded transition-colors"> </span> <div class="relative"><button class="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded transition-colors flex items-center gap-1.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Import</button> <!></div></div>`);
 var root_14$2 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"><div class="bg-white rounded-xl shadow-2xl w-[420px] max-h-[80vh] overflow-hidden"><div class="flex items-center justify-between px-5 py-3 border-b border-gray-200"><h2 class="text-base font-semibold text-gray-800">📐 Area Summary</h2> <button class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button></div> <div class="overflow-y-auto max-h-[calc(80vh-52px)] p-1"><!></div></div></div>`);
@@ -57053,6 +57145,7 @@ function TopBar($$anchor, $$props) {
 	const $canvasZoom = () => store_get(canvasZoom, "$canvasZoom", $$stores);
 	const $saveState = () => store_get(saveState, "$saveState", $$stores);
 	const [$$stores, $$cleanup] = setup_stores();
+	let showBuildSidebar = prop($$props, "showBuildSidebar", 15, true);
 	let settingsOpen = /* @__PURE__ */ state(false);
 	let areaOpen = /* @__PURE__ */ state(false);
 	let versionHistoryOpen = /* @__PURE__ */ state(false);
@@ -57235,9 +57328,10 @@ function TopBar($$anchor, $$props) {
 	var node = first_child(fragment);
 	var consequent_7 = ($$anchor) => {
 		var div = root_1$10();
-		var node_1 = child(div);
+		var button = child(div);
+		var node_1 = sibling(button, 2);
 		var consequent = ($$anchor) => {
-			var input_1 = root_2$9();
+			var input_1 = root_2$10();
 			remove_input_defaults(input_1);
 			event("blur", input_1, onNameBlur);
 			delegated("keydown", input_1, onNameKeydown);
@@ -57245,12 +57339,12 @@ function TopBar($$anchor, $$props) {
 			append($$anchor, input_1);
 		};
 		var alternate = ($$anchor) => {
-			var button = root_3$9();
-			var text_1 = child(button, true);
-			reset(button);
+			var button_1 = root_3$9();
+			var text_1 = child(button_1, true);
+			reset(button_1);
 			template_effect(() => set_text(text_1, get(projectName)));
-			delegated("click", button, () => set(editingName, true));
-			append($$anchor, button);
+			delegated("click", button_1, () => set(editingName, true));
+			append($$anchor, button_1);
 		};
 		if_block(node_1, ($$render) => {
 			if (get(editingName)) $$render(consequent);
@@ -57259,104 +57353,104 @@ function TopBar($$anchor, $$props) {
 		var div_1 = sibling(node_1, 4);
 		var node_2 = child(div_1);
 		each(node_2, 17, () => get(floors), index$1, ($$anchor, fl) => {
-			var button_1 = root_4$8();
-			var text_2 = child(button_1, true);
-			reset(button_1);
+			var button_2 = root_4$8();
+			var text_2 = child(button_2, true);
+			reset(button_2);
 			template_effect(() => {
-				set_class(button_1, 1, `px-2 py-0.5 text-xs rounded transition-colors ${get(fl).id === get(activeFloorId) ? "bg-white text-slate-800 font-semibold" : "text-white/80 hover:bg-white/10"}`);
-				set_attribute(button_1, "title", get(fl).id === get(activeFloorId) ? "Active floor (dbl-click to remove)" : "Click to switch, dbl-click to remove");
+				set_class(button_2, 1, `px-2 py-0.5 text-xs rounded transition-colors ${get(fl).id === get(activeFloorId) ? "bg-white text-slate-800 font-semibold" : "text-white/80 hover:bg-white/10"}`);
+				set_attribute(button_2, "title", get(fl).id === get(activeFloorId) ? "Active floor (dbl-click to remove)" : "Click to switch, dbl-click to remove");
 				set_text(text_2, get(fl).name);
 			});
-			delegated("click", button_1, () => setActiveFloor(get(fl).id));
-			delegated("dblclick", button_1, () => onRemoveFloor(get(fl).id));
-			append($$anchor, button_1);
+			delegated("click", button_2, () => setActiveFloor(get(fl).id));
+			delegated("dblclick", button_2, () => onRemoveFloor(get(fl).id));
+			append($$anchor, button_2);
 		});
-		var button_2 = sibling(node_2, 2);
-		var span = sibling(button_2, 2);
+		var button_3 = sibling(node_2, 2);
+		var span = sibling(button_3, 2);
 		var text_3 = child(span);
 		reset(span);
 		reset(div_1);
-		var button_3 = sibling(div_1, 4);
-		var button_4 = sibling(button_3, 2);
-		var button_5 = sibling(button_4, 4);
-		var node_3 = sibling(button_5, 2);
+		var button_4 = sibling(div_1, 4);
+		var button_5 = sibling(button_4, 2);
+		var button_6 = sibling(button_5, 4);
+		var node_3 = sibling(button_6, 2);
 		var consequent_1 = ($$anchor) => {
 			var div_2 = root_5$5();
-			var button_6 = child(div_2);
-			var button_7 = sibling(button_6, 2);
+			var button_7 = child(div_2);
+			var button_8 = sibling(button_7, 2);
 			reset(div_2);
 			template_effect(() => {
-				set_class(button_6, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${!$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
-				set_class(button_7, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
+				set_class(button_7, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${!$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
+				set_class(button_8, 1, `px-2 py-1 text-xs font-semibold rounded-full transition-colors ${$panMode() ? "bg-white text-slate-800" : "text-white/80 hover:text-white"}`);
 			});
-			delegated("click", button_6, () => panMode.set(false));
-			delegated("click", button_7, () => panMode.set(true));
+			delegated("click", button_7, () => panMode.set(false));
+			delegated("click", button_8, () => panMode.set(true));
 			append($$anchor, div_2);
 		};
 		if_block(node_3, ($$render) => {
 			if (get(mode) === "2d") $$render(consequent_1);
 		});
-		var button_8 = sibling(node_3, 2);
-		var node_4 = sibling(button_8, 4);
+		var button_9 = sibling(node_3, 2);
+		var node_4 = sibling(button_9, 4);
 		var consequent_2 = ($$anchor) => {
 			var div_3 = root_6$4();
-			var button_9 = child(div_3);
-			var button_10 = sibling(button_9, 2);
-			var text_4 = child(button_10);
-			reset(button_10);
+			var button_10 = child(div_3);
 			var button_11 = sibling(button_10, 2);
+			var text_4 = child(button_11);
+			reset(button_11);
+			var button_12 = sibling(button_11, 2);
 			reset(div_3);
 			template_effect(($0) => set_text(text_4, `${$0 !== null && $0 !== void 0 ? $0 : ""}%`), [() => Math.round($canvasZoom() * 100)]);
-			delegated("click", button_9, () => canvasZoom.update((z) => Math.max(.1, z / 1.25)));
-			delegated("click", button_10, () => canvasZoom.set(1));
-			delegated("click", button_11, () => canvasZoom.update((z) => Math.min(10, z * 1.25)));
+			delegated("click", button_10, () => canvasZoom.update((z) => Math.max(.1, z / 1.25)));
+			delegated("click", button_11, () => canvasZoom.set(1));
+			delegated("click", button_12, () => canvasZoom.update((z) => Math.min(10, z * 1.25)));
 			append($$anchor, div_3);
 		};
 		if_block(node_4, ($$render) => {
 			if (get(mode) === "2d") $$render(consequent_2);
 		});
-		var button_12 = sibling(node_4, 2);
-		var button_13 = sibling(button_12, 2);
+		var button_13 = sibling(node_4, 2);
 		var button_14 = sibling(button_13, 2);
-		var div_4 = sibling(button_14, 4);
-		var button_15 = child(div_4);
-		var node_5 = sibling(button_15, 2);
+		var button_15 = sibling(button_14, 2);
+		var div_4 = sibling(button_15, 4);
+		var button_16 = child(div_4);
+		var node_5 = sibling(button_16, 2);
 		var consequent_4 = ($$anchor) => {
 			var div_5 = root_7$5();
-			var button_16 = child(div_5);
-			var button_17 = sibling(button_16, 4);
-			var button_18 = sibling(button_17, 2);
+			var button_17 = child(div_5);
+			var button_18 = sibling(button_17, 4);
 			var button_19 = sibling(button_18, 2);
 			var button_20 = sibling(button_19, 2);
 			var button_21 = sibling(button_20, 2);
 			var button_22 = sibling(button_21, 2);
 			var button_23 = sibling(button_22, 2);
-			var node_6 = sibling(button_23, 4);
+			var button_24 = sibling(button_23, 2);
+			var node_6 = sibling(button_24, 4);
 			var consequent_3 = ($$anchor) => {
-				var button_24 = root_8$2();
-				delegated("click", button_24, onImportJSON);
-				append($$anchor, button_24);
+				var button_25 = root_8$2();
+				delegated("click", button_25, onImportJSON);
+				append($$anchor, button_25);
 			};
 			if_block(node_6, ($$render) => {
 				if (!$$props.viewOnly) $$render(consequent_3);
 			});
-			var button_25 = sibling(node_6, 2);
+			var button_26 = sibling(node_6, 2);
 			reset(div_5);
-			delegated("click", button_16, () => {
+			delegated("click", button_17, () => {
 				set(exportOpen, false);
 				window.dispatchEvent(new KeyboardEvent("keydown", {
 					key: "p",
 					ctrlKey: true
 				}));
 			});
-			delegated("click", button_17, onExport2DPNG);
-			delegated("click", button_18, onExport3DPNG);
-			delegated("click", button_19, onExportSVG);
-			delegated("click", button_20, onExportDXF);
-			delegated("click", button_21, onExportDWG);
-			delegated("click", button_22, onExportPDF);
-			delegated("click", button_23, onExportJSON);
-			delegated("click", button_25, newProject);
+			delegated("click", button_18, onExport2DPNG);
+			delegated("click", button_19, onExport3DPNG);
+			delegated("click", button_20, onExportSVG);
+			delegated("click", button_21, onExportDXF);
+			delegated("click", button_22, onExportDWG);
+			delegated("click", button_23, onExportPDF);
+			delegated("click", button_24, onExportJSON);
+			delegated("click", button_26, newProject);
 			append($$anchor, div_5);
 		};
 		if_block(node_5, ($$render) => {
@@ -57381,41 +57475,46 @@ function TopBar($$anchor, $$props) {
 			else $$render(alternate_1, -1);
 		});
 		reset(span_1);
-		var button_26 = sibling(span_1, 2);
+		var button_27 = sibling(span_1, 2);
 		reset(div);
 		template_effect(() => {
 			var _$$get$length;
+			set_class(button, 1, `shrink-0 w-8 h-8 rounded-md flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition-colors ${showBuildSidebar() ? "bg-white/15 text-white" : ""}`);
+			set_attribute(button, "title", showBuildSidebar() ? "Hide sidebar" : "Show sidebar");
+			set_attribute(button, "aria-label", showBuildSidebar() ? "Hide sidebar" : "Show sidebar");
+			set_attribute(button, "aria-pressed", showBuildSidebar());
 			set_text(text_3, `${(_$$get$length = get(floors).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""}F`);
-			set_class(button_5, 1, `p-1.5 rounded transition-colors ${get(snapOn) ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
-			set_attribute(button_5, "title", `Snap to Grid (${get(snapOn) ? "On" : "Off"})`);
-			set_class(button_8, 1, `p-1.5 rounded transition-colors ${$showFurnitureStore() ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
-			set_attribute(button_8, "title", `Toggle Furniture (${$showFurnitureStore() ? "Visible" : "Hidden"})`);
+			set_class(button_6, 1, `p-1.5 rounded transition-colors ${get(snapOn) ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
+			set_attribute(button_6, "title", `Snap to Grid (${get(snapOn) ? "On" : "Off"})`);
+			set_class(button_9, 1, `p-1.5 rounded transition-colors ${$showFurnitureStore() ? "text-white bg-white/20" : "text-white/40 hover:text-white/70 hover:bg-white/10"}`);
+			set_attribute(button_9, "title", `Toggle Furniture (${$showFurnitureStore() ? "Visible" : "Hidden"})`);
 			set_class(span_1, 1, `text-[11px] font-medium transition-all duration-300 ${$saveState() === "saved" ? "text-emerald-400" : $saveState() === "saving" ? "text-amber-300 animate-pulse" : "text-white/50"}`);
 			set_attribute(span_1, "title", get(lastSavedText) || "Not saved yet");
 		});
-		delegated("click", button_2, onAddFloor);
-		delegated("click", button_3, function(...$$args) {
+		delegated("click", button, () => showBuildSidebar(!showBuildSidebar()));
+		delegated("click", button_3, onAddFloor);
+		delegated("click", button_4, function(...$$args) {
 			undo === null || undo === void 0 || undo.apply(this, $$args);
 		});
-		delegated("click", button_4, function(...$$args) {
+		delegated("click", button_5, function(...$$args) {
 			redo === null || redo === void 0 || redo.apply(this, $$args);
 		});
-		delegated("click", button_5, () => {
+		delegated("click", button_6, () => {
 			snapEnabled.update((v) => !v);
 			set(snapOn, !get(snapOn));
 		});
-		delegated("click", button_8, () => layerVisibility.update((v) => ({
+		delegated("click", button_9, () => layerVisibility.update((v) => ({
 			...v,
 			furniture: !v.furniture
 		})));
-		delegated("click", button_12, () => set(versionHistoryOpen, true));
-		delegated("click", button_13, () => set(areaOpen, true));
-		delegated("click", button_14, () => set(settingsOpen, true));
-		delegated("click", button_15, () => {
+		delegated("click", button_13, () => set(versionHistoryOpen, true));
+		delegated("click", button_14, () => set(areaOpen, true));
+		delegated("click", button_15, () => set(settingsOpen, true));
+		delegated("click", button_16, () => {
 			set(exportOpen, !get(exportOpen));
 			if (get(exportOpen)) triggerTip("first-export", 300, 60);
 		});
-		delegated("click", button_26, save);
+		delegated("click", button_27, save);
 		append($$anchor, div);
 	};
 	var alternate_2 = ($$anchor) => {
@@ -57424,35 +57523,35 @@ function TopBar($$anchor, $$props) {
 		var text_8 = child(span_2, true);
 		reset(span_2);
 		var div_7 = sibling(span_2, 2);
-		var button_27 = child(div_7);
-		var node_8 = sibling(button_27, 2);
+		var button_28 = child(div_7);
+		var node_8 = sibling(button_28, 2);
 		var consequent_8 = ($$anchor) => {
 			var div_8 = root_13$2();
-			var button_28 = child(div_8);
-			var button_29 = sibling(button_28, 4);
-			var button_30 = sibling(button_29, 2);
+			var button_29 = child(div_8);
+			var button_30 = sibling(button_29, 4);
 			var button_31 = sibling(button_30, 2);
 			var button_32 = sibling(button_31, 2);
 			var button_33 = sibling(button_32, 2);
 			var button_34 = sibling(button_33, 2);
 			var button_35 = sibling(button_34, 2);
-			var button_36 = sibling(button_35, 4);
+			var button_36 = sibling(button_35, 2);
+			var button_37 = sibling(button_36, 4);
 			reset(div_8);
-			delegated("click", button_28, () => {
+			delegated("click", button_29, () => {
 				set(exportOpen, false);
 				window.dispatchEvent(new KeyboardEvent("keydown", {
 					key: "p",
 					ctrlKey: true
 				}));
 			});
-			delegated("click", button_29, onExport2DPNG);
-			delegated("click", button_30, onExport3DPNG);
-			delegated("click", button_31, onExportSVG);
-			delegated("click", button_32, onExportDXF);
-			delegated("click", button_33, onExportDWG);
-			delegated("click", button_34, onExportPDF);
-			delegated("click", button_35, onExportJSON);
-			delegated("click", button_36, onImportJSON);
+			delegated("click", button_30, onExport2DPNG);
+			delegated("click", button_31, onExport3DPNG);
+			delegated("click", button_32, onExportSVG);
+			delegated("click", button_33, onExportDXF);
+			delegated("click", button_34, onExportDWG);
+			delegated("click", button_35, onExportPDF);
+			delegated("click", button_36, onExportJSON);
+			delegated("click", button_37, onImportJSON);
 			append($$anchor, div_8);
 		};
 		if_block(node_8, ($$render) => {
@@ -57462,7 +57561,7 @@ function TopBar($$anchor, $$props) {
 		bind_this(div_7, ($$value) => exportRef = $$value, () => exportRef);
 		reset(div_6);
 		template_effect(() => set_text(text_8, get(projectName)));
-		delegated("click", button_27, () => {
+		delegated("click", button_28, () => {
 			set(exportOpen, !get(exportOpen));
 			if (get(exportOpen)) triggerTip("first-export", 300, 60);
 		});
@@ -57495,7 +57594,7 @@ function TopBar($$anchor, $$props) {
 		var div_9 = root_14$2();
 		var div_10 = child(div_9);
 		var div_11 = child(div_10);
-		var button_37 = sibling(child(div_11), 2);
+		var button_38 = sibling(child(div_11), 2);
 		reset(div_11);
 		var div_12 = sibling(div_11, 2);
 		AreaSummaryPanel(child(div_12), {});
@@ -57507,7 +57606,7 @@ function TopBar($$anchor, $$props) {
 			if (e.key === "Escape") set(areaOpen, false);
 		});
 		delegated("click", div_10, (e) => e.stopPropagation());
-		delegated("click", button_37, () => set(areaOpen, false));
+		delegated("click", button_38, () => set(areaOpen, false));
 		append($$anchor, div_9);
 	};
 	if_block(node_11, ($$render) => {
@@ -57518,8 +57617,8 @@ function TopBar($$anchor, $$props) {
 	$$cleanup();
 }
 delegate([
-	"keydown",
 	"click",
+	"keydown",
 	"dblclick"
 ]);
 //#endregion
@@ -58053,7 +58152,7 @@ function placeRoomTemplate(preset, origin, template, w = 400, h = 300) {
 //#endregion
 //#region src/lib/components/editor/UndoHistoryPanel.svelte
 init_client();
-var root_2$8 = /* @__PURE__ */ from_html(`<div class="px-3 py-6 text-center text-xs text-gray-400">No history yet</div>`);
+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_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$9 = /* @__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>`);
@@ -58092,7 +58191,7 @@ function UndoHistoryPanel($$anchor, $$props) {
 		var div_3 = sibling(div_1, 2);
 		var node_1 = child(div_3);
 		var consequent = ($$anchor) => {
-			append($$anchor, root_2$8());
+			append($$anchor, root_2$9());
 		};
 		var alternate = ($$anchor) => {
 			var div_5 = root_3$8();
@@ -58158,7 +58257,7 @@ init_client();
 init_index_client();
 var root_3$7 = /* @__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_4$6 = /* @__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_2$7 = /* @__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_2$8 = /* @__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$8 = /* @__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">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(`<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_7$4 = /* @__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>`);
@@ -58538,7 +58637,7 @@ function BuildPanel($$anchor, $$props) {
 		reset(button_13);
 		var node_1 = sibling(button_13, 2);
 		var consequent = ($$anchor) => {
-			var fragment_1 = root_2$7();
+			var fragment_1 = root_2$8();
 			var div_13 = first_child(fragment_1);
 			each(div_13, 21, () => doorCatalog, index$1, ($$anchor, dc) => {
 				var button_14 = root_3$7();
@@ -59408,7 +59507,7 @@ function handleGlobalShortcut(e, ctx = {}) {
 init_client();
 var root_3$6 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_4$5 = /* @__PURE__ */ from_html(`<button><span class="bg-white/80 backdrop-blur-sm rounded px-1 py-0.5 mb-0.5 text-gray-700"> </span></button>`);
-var root_2$6 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
 var root_6$2 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_7$3 = /* @__PURE__ */ from_html(`<button><span class="bg-white/80 backdrop-blur-sm rounded px-1 py-0.5 mb-0.5 text-gray-700"> </span></button>`);
 var root_5$3 = /* @__PURE__ */ from_html(`<div class="space-y-2"><span class="text-xs text-gray-500">Color</span> <div class="grid grid-cols-6 gap-1.5"></div> <label class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></label> <span class="text-xs text-gray-500">Texture</span> <div class="grid grid-cols-3 gap-1.5"><button>None</button> <!></div></div>`);
@@ -59417,8 +59516,8 @@ var root_8$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-
 var root_9$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-cyan-100 rounded flex items-center justify-center text-xs">🪟</span> Window Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Standard</option><option>Fixed</option><option>Casement</option><option>Sliding</option><option>Bay</option></select></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`, 1);
 var root_13$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_12$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">Camera Serial</span> <input type="text" disabled="" readonly="" placeholder="Assigned by host" class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-gray-50 text-gray-600 font-mono"/></label>`);
-var root_11$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Camera Name</span> <input type="text" placeholder="Display name" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <!>`, 1);
+var root_14$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500"> </span> <input type="text"/></label>`);
+var root_11$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_15$1 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_10$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-purple-100 rounded flex items-center justify-center text-xs"> </span> <button> </button></h3> <div class="space-y-3"><!> <div><div class="flex items-center gap-1 mb-2"><span class="text-xs text-gray-500">Color</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="1" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Material</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Wood</option><option>Metal</option><option>Fabric</option><option>Leather</option><option>Glass</option><option>Plastic</option><option>Stone</option><option>Ceramic</option></select></label> <label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-1"><button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Rotate 90° left">↺ 90°</button> <button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Rotate 90° right">↻ 90°</button></div> <div class="flex gap-1"><button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Flip horizontally">↔ Flip H</button> <button class="flex-1 px-2 py-1.5 border border-gray-200 rounded text-sm hover:bg-gray-50 transition-colors" title="Flip vertically">↕ Flip V</button></div> <button class="w-full px-2 py-1.5 border border-gray-300 rounded text-sm text-gray-600 hover:bg-gray-50 transition-colors">Reset to defaults</button></div>`, 1);
 var root_17$1 = /* @__PURE__ */ from_html(`<label class="block pb-3 border-b border-gray-200"><span class="text-xs text-gray-500"> </span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label>`);
@@ -59433,7 +59532,7 @@ var root_26 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-
 var root_24$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🏛️</span> Column Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Shape</span> <div class="flex gap-2"><button>⭕ Round</button> <button>⬜ Square</button></div></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="10" max="200" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="50" max="1000" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div><span class="text-xs text-gray-500 mb-1.5 block">Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <!></div>`, 1);
 var root_27 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 rounded flex items-center justify-center text-xs">🏷️</span> Text Annotation</h3> <label class="block"><span class="text-xs text-gray-500">Text</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Font Size</span> <input type="number" min="8" max="72" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex items-center gap-2"><input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/> <span class="text-xs text-gray-400"> </span></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (°)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">X</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Y</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`);
 var root_28 = /* @__PURE__ */ from_html(`<div class="mt-4 pt-3 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-xs">🖼️</span> Background Image</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Opacity</span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Scale</span> <input type="range" min="0.1" max="5" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Rotation</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-2"><button> </button> <button class="flex-1 px-2 py-1.5 border rounded text-sm border-gray-200 hover:bg-gray-50">📏 Set Scale</button></div> <button class="w-full px-2 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50">Remove Image</button></div></div>`);
-var root$3 = /* @__PURE__ */ from_html(`<div data-properties-panel="" style="top: 48px; bottom: 36px;"><!> <!></div>`);
+var root$3 = /* @__PURE__ */ from_html(`<div data-properties-panel="" style="top: 0; bottom: 0;"><!> <!></div>`);
 function PropertiesPanel($$anchor, $$props) {
 	push($$props, true);
 	const $projectSettings = () => store_get(projectSettings, "$projectSettings", $$stores);
@@ -59609,15 +59708,45 @@ function PropertiesPanel($$anchor, $$props) {
 		if (!get(selectedFurniture)) return;
 		updateFurniture(get(selectedFurniture).id, { rotation: Number(e.target.value) });
 	}
-	function onFurnitureName(e) {
-		if (!get(selectedFurniture)) return;
-		updateFurniture(get(selectedFurniture).id, { name: e.target.value });
-	}
+	const cameraPropEntries = /* @__PURE__ */ user_derived(() => {
+		var _$$get$name, _$$get$serial;
+		if (!get(selectedFurniture) || get(selectedFurniture).catalogId !== "camera") return [];
+		const props = get(selectedFurniture).props;
+		if (props && Object.keys(props).length > 0) {
+			const keys = Object.keys(props);
+			keys.sort((a, b) => {
+				if (a === "serial") return -1;
+				if (b === "serial") return 1;
+				if (a === "name") return -1;
+				if (b === "name") return 1;
+				return a.localeCompare(b);
+			});
+			return keys.map((key) => {
+				var _props$key;
+				return {
+					key,
+					value: (_props$key = props[key]) !== null && _props$key !== void 0 ? _props$key : ""
+				};
+			});
+		}
+		return [{
+			key: "name",
+			value: (_$$get$name = get(selectedFurniture).name) !== null && _$$get$name !== void 0 ? _$$get$name : ""
+		}, {
+			key: "serial",
+			value: (_$$get$serial = get(selectedFurniture).serial) !== null && _$$get$serial !== void 0 ? _$$get$serial : ""
+		}];
+	});
+	/** 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);
+	});
 	const useSiteCameraSelect = /* @__PURE__ */ user_derived(() => siteCameras().length > 0);
 	const usedCameraSerials = /* @__PURE__ */ user_derived(() => {
-		var _$$get13;
+		var _$$get14;
 		const used = /* @__PURE__ */ new Set();
-		if (!((_$$get13 = get(floor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.furniture) || !get(selectedFurniture)) return used;
+		if (!((_$$get14 = get(floor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.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);
@@ -59625,20 +59754,21 @@ function PropertiesPanel($$anchor, $$props) {
 		return used;
 	});
 	const selectableSiteCameras = /* @__PURE__ */ user_derived(() => {
-		var _$$get$serial;
+		var _$$get$serial2;
 		if (!get(selectedFurniture) || !get(useSiteCameraSelect)) return [];
-		const currentSerial = (_$$get$serial = get(selectedFurniture).serial) !== null && _$$get$serial !== void 0 ? _$$get$serial : "";
+		const currentSerial = (_$$get$serial2 = get(selectedFurniture).serial) !== null && _$$get$serial2 !== void 0 ? _$$get$serial2 : "";
 		const fromSite = siteCameras().filter((c) => !get(usedCameraSerials).has(c.serial) || c.serial === currentSerial);
 		if (currentSerial && !fromSite.some((c) => c.serial === currentSerial)) {
-			var _$$get$name;
+			var _$$get$name2;
 			return [{
 				serial: currentSerial,
-				name: (_$$get$name = get(selectedFurniture).name) !== null && _$$get$name !== void 0 ? _$$get$name : currentSerial
+				name: (_$$get$name2 = get(selectedFurniture).name) !== null && _$$get$name2 !== void 0 ? _$$get$name2 : currentSerial
 			}, ...fromSite];
 		}
 		return fromSite;
 	});
 	function onSiteCameraSelect(e) {
+		var _$$get$props;
 		if (!get(selectedFurniture)) return;
 		const serial = e.target.value;
 		if (!serial) {
@@ -59652,7 +59782,12 @@ function PropertiesPanel($$anchor, $$props) {
 		if (!camera) return;
 		updateFurniture(get(selectedFurniture).id, {
 			serial: camera.serial,
-			name: camera.name
+			name: camera.name,
+			props: {
+				...(_$$get$props = get(selectedFurniture).props) !== null && _$$get$props !== void 0 ? _$$get$props : {},
+				serial: camera.serial,
+				name: camera.name
+			}
 		});
 	}
 	function resetFurnitureDefaults() {
@@ -59961,7 +60096,7 @@ function PropertiesPanel($$anchor, $$props) {
 		var consequent = ($$anchor) => {
 			const sideColor = /* @__PURE__ */ user_derived(() => get(selectedWall).interiorColor || get(selectedWall).color);
 			const sideTex = /* @__PURE__ */ user_derived(() => get(selectedWall).interiorTexture === "none" ? void 0 : get(selectedWall).interiorTexture || get(selectedWall).texture);
-			var div_5 = root_2$6();
+			var div_5 = root_2$7();
 			var div_6 = sibling(child(div_5), 2);
 			each(div_6, 21, () => wallColors, index$1, ($$anchor, wc) => {
 				var button_3 = root_3$6();
@@ -60204,7 +60339,7 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_11);
 		reset(div_11);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
-			var _$$get14, _$$get15, _$$get16, _$$get17;
+			var _$$get15, _$$get16, _$$get17, _$$get18;
 			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 : ""})`);
@@ -60217,10 +60352,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 ${((_$$get14 = get(selectedDoor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.swingDirection) === "left" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_10, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get15 = get(selectedDoor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.swingDirection) === "right" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_11, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${!((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_9, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get15 = get(selectedDoor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.swingDirection) === "left" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_10, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.swingDirection) === "right" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_11, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${!((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get18 = get(selectedDoor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedDoor).width),
@@ -60359,14 +60494,10 @@ function PropertiesPanel($$anchor, $$props) {
 		var node_4 = child(div_15);
 		var consequent_5 = ($$anchor) => {
 			var fragment_4 = root_11$1();
-			var label_18 = first_child(fragment_4);
-			var input_14 = sibling(child(label_18), 2);
-			remove_input_defaults(input_14);
-			reset(label_18);
-			var node_5 = sibling(label_18, 2);
+			var node_5 = first_child(fragment_4);
 			var consequent_4 = ($$anchor) => {
-				var label_19 = root_12$1();
-				var select_2 = sibling(child(label_19), 2);
+				var label_18 = root_12$1();
+				var select_2 = sibling(child(label_18), 2);
 				var option_11 = child(select_2);
 				option_11.value = option_11.__value = "";
 				each(sibling(option_11), 17, () => get(selectableSiteCameras), (cam) => cam.serial, ($$anchor, cam) => {
@@ -60375,8 +60506,8 @@ function PropertiesPanel($$anchor, $$props) {
 					reset(option_12);
 					var option_12_value = {};
 					template_effect(() => {
-						var _$$get$name2, _$$get$serial2;
-						set_text(text_18, `${(_$$get$name2 = get(cam).name) !== null && _$$get$name2 !== void 0 ? _$$get$name2 : ""} (${(_$$get$serial2 = get(cam).serial) !== null && _$$get$serial2 !== void 0 ? _$$get$serial2 : ""})`);
+						var _$$get$name3, _$$get$serial3;
+						set_text(text_18, `${(_$$get$name3 = get(cam).name) !== null && _$$get$name3 !== void 0 ? _$$get$name3 : ""} (${(_$$get$serial3 = get(cam).serial) !== null && _$$get$serial3 !== void 0 ? _$$get$serial3 : ""})`);
 						if (option_12_value !== (option_12_value = get(cam).serial)) {
 							var _option_12$__value;
 							option_12.value = (_option_12$__value = option_12.__value = get(cam).serial) !== null && _option_12$__value !== void 0 ? _option_12$__value : "";
@@ -60386,30 +60517,30 @@ function PropertiesPanel($$anchor, $$props) {
 				});
 				reset(select_2);
 				select_2.value = select_2.__value = "";
-				reset(label_19);
+				reset(label_18);
 				delegated("change", select_2, onSiteCameraSelect);
-				append($$anchor, label_19);
-			};
-			var alternate_1 = ($$anchor) => {
-				var label_20 = root_14$1();
-				var input_15 = sibling(child(label_20), 2);
-				remove_input_defaults(input_15);
-				reset(label_20);
-				template_effect(() => {
-					var _$$get$serial3;
-					return set_value(input_15, (_$$get$serial3 = get(selectedFurniture).serial) !== null && _$$get$serial3 !== void 0 ? _$$get$serial3 : "");
-				});
-				append($$anchor, label_20);
+				append($$anchor, label_18);
 			};
 			if_block(node_5, ($$render) => {
 				if (get(useSiteCameraSelect) && !get(selectedFurniture).serial) $$render(consequent_4);
-				else $$render(alternate_1, -1);
 			});
-			template_effect(() => {
-				var _$$get$name3;
-				return set_value(input_14, (_$$get$name3 = get(selectedFurniture).name) !== null && _$$get$name3 !== void 0 ? _$$get$name3 : "");
+			each(sibling(node_5, 2), 17, () => get(cameraPropEntries), (field) => field.key, ($$anchor, field) => {
+				var label_19 = root_14$1();
+				var span_15 = child(label_19);
+				var text_19 = child(span_15, true);
+				reset(span_15);
+				var input_14 = sibling(span_15, 2);
+				remove_input_defaults(input_14);
+				reset(label_19);
+				template_effect(($0) => {
+					set_text(text_19, $0);
+					set_value(input_14, get(field).value);
+					input_14.disabled = get(cameraPropsLocked) || get(field).key === "serial";
+					input_14.readOnly = get(cameraPropsLocked) || get(field).key === "serial";
+					set_class(input_14, 1, `w-full px-2 py-1 border border-gray-200 rounded text-sm bg-gray-50 text-gray-600 ${get(field).key === "serial" ? "font-mono" : ""}`);
+				}, [() => formatCameraPropLabel(get(field).key)]);
+				append($$anchor, label_19);
 			});
-			delegated("input", input_14, onFurnitureName);
 			append($$anchor, fragment_4);
 		};
 		if_block(node_4, ($$render) => {
@@ -60443,33 +60574,33 @@ function PropertiesPanel($$anchor, $$props) {
 		});
 		reset(div_17);
 		var div_18 = sibling(div_17, 2);
-		var input_16 = sibling(child(div_18), 2);
-		remove_input_defaults(input_16);
+		var input_15 = sibling(child(div_18), 2);
+		remove_input_defaults(input_15);
 		reset(div_18);
 		reset(div_16);
-		var label_21 = sibling(div_16, 2);
-		var span_15 = child(label_21);
-		var text_19 = child(span_15);
-		reset(span_15);
-		var input_17 = sibling(span_15, 2);
+		var label_20 = sibling(div_16, 2);
+		var span_16 = child(label_20);
+		var text_20 = child(span_16);
+		reset(span_16);
+		var input_16 = sibling(span_16, 2);
+		remove_input_defaults(input_16);
+		reset(label_20);
+		var label_21 = sibling(label_20, 2);
+		var span_17 = child(label_21);
+		var text_21 = child(span_17);
+		reset(span_17);
+		var input_17 = sibling(span_17, 2);
 		remove_input_defaults(input_17);
 		reset(label_21);
 		var label_22 = sibling(label_21, 2);
-		var span_16 = child(label_22);
-		var text_20 = child(span_16);
-		reset(span_16);
-		var input_18 = sibling(span_16, 2);
+		var span_18 = child(label_22);
+		var text_22 = child(span_18);
+		reset(span_18);
+		var input_18 = sibling(span_18, 2);
 		remove_input_defaults(input_18);
 		reset(label_22);
 		var label_23 = sibling(label_22, 2);
-		var span_17 = child(label_23);
-		var text_21 = child(span_17);
-		reset(span_17);
-		var input_19 = sibling(span_17, 2);
-		remove_input_defaults(input_19);
-		reset(label_23);
-		var label_24 = sibling(label_23, 2);
-		var select_3 = sibling(child(label_24), 2);
+		var select_3 = sibling(child(label_23), 2);
 		var option_13 = child(select_3);
 		option_13.value = option_13.__value = "Wood";
 		var option_14 = sibling(option_13);
@@ -60489,12 +60620,12 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_3);
 		var select_3_value;
 		init_select(select_3);
+		reset(label_23);
+		var label_24 = sibling(label_23, 2);
+		var input_19 = sibling(child(label_24), 2);
+		remove_input_defaults(input_19);
 		reset(label_24);
-		var label_25 = sibling(label_24, 2);
-		var input_20 = sibling(child(label_25), 2);
-		remove_input_defaults(input_20);
-		reset(label_25);
-		var div_19 = sibling(label_25, 2);
+		var div_19 = sibling(label_24, 2);
 		var button_15 = child(div_19);
 		var button_16 = sibling(button_15, 2);
 		reset(div_19);
@@ -60511,18 +60642,18 @@ function PropertiesPanel($$anchor, $$props) {
 			set_class(button_13, 1, `ml-auto px-1.5 py-0.5 rounded text-xs border transition-colors ${get(selectedFurniture).locked ? "bg-amber-100 border-amber-400 text-amber-700" : "border-gray-200 hover:bg-gray-50 text-gray-500"}`);
 			set_attribute(button_13, "title", get(selectedFurniture).locked ? "Unlock (Ctrl+L)" : "Lock (Ctrl+L)");
 			set_text(text_17, get(selectedFurniture).locked ? "🔒 Locked" : "🔓");
-			set_value(input_16, $2);
-			set_text(text_19, `Width (${$3 !== null && $3 !== void 0 ? $3 : ""})`);
-			set_value(input_17, $4);
-			set_text(text_20, `Depth (${$5 !== null && $5 !== void 0 ? $5 : ""})`);
-			set_value(input_18, $6);
-			set_text(text_21, `Height (${$7 !== null && $7 !== void 0 ? $7 : ""})`);
-			set_value(input_19, $8);
+			set_value(input_15, $2);
+			set_text(text_20, `Width (${$3 !== null && $3 !== void 0 ? $3 : ""})`);
+			set_value(input_16, $4);
+			set_text(text_21, `Depth (${$5 !== null && $5 !== void 0 ? $5 : ""})`);
+			set_value(input_17, $6);
+			set_text(text_22, `Height (${$7 !== null && $7 !== void 0 ? $7 : ""})`);
+			set_value(input_18, $8);
 			if (select_3_value !== (select_3_value = (_$$get$material = get(selectedFurniture).material) !== null && _$$get$material !== void 0 ? _$$get$material : "Wood")) {
 				var _select_3$__value, _$$get$material2, _$$get$material3;
 				select_3.value = (_select_3$__value = select_3.__value = (_$$get$material2 = get(selectedFurniture).material) !== null && _$$get$material2 !== void 0 ? _$$get$material2 : "Wood") !== null && _select_3$__value !== void 0 ? _select_3$__value : "", select_option(select_3, (_$$get$material3 = get(selectedFurniture).material) !== null && _$$get$material3 !== void 0 ? _$$get$material3 : "Wood");
 			}
-			set_value(input_20, $9);
+			set_value(input_19, $9);
 		}, [
 			() => {
 				var _getCatalogItem$icon, _getCatalogItem2;
@@ -60556,12 +60687,12 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("click", button_13, () => {
 			if (get(selectedFurniture)) toggleFurnitureLock(get(selectedFurniture).id);
 		});
-		delegated("input", input_16, (e) => onFurnitureColor(e.target.value));
-		delegated("input", input_17, onFurnitureWidth);
-		delegated("input", input_18, onFurnitureDepth);
-		delegated("input", input_19, onFurnitureHeight);
+		delegated("input", input_15, (e) => onFurnitureColor(e.target.value));
+		delegated("input", input_16, onFurnitureWidth);
+		delegated("input", input_17, onFurnitureDepth);
+		delegated("input", input_18, onFurnitureHeight);
 		delegated("change", select_3, onFurnitureMaterial);
-		delegated("input", input_20, onFurnitureRotation);
+		delegated("input", input_19, onFurnitureRotation);
 		delegated("click", button_15, () => {
 			if (get(selectedFurniture)) updateFurniture(get(selectedFurniture).id, { rotation: get(selectedFurniture).rotation - 90 });
 		});
@@ -60594,35 +60725,35 @@ function PropertiesPanel($$anchor, $$props) {
 	var consequent_9 = ($$anchor) => {
 		var fragment_5 = root_16();
 		var div_21 = sibling(first_child(fragment_5), 2);
-		var node_7 = child(div_21);
+		var node_8 = child(div_21);
 		var consequent_7 = ($$anchor) => {
-			var label_26 = root_17$1();
-			var span_18 = child(label_26);
-			var text_22 = child(span_18);
-			reset(span_18);
-			var input_21 = sibling(span_18, 2);
-			remove_input_defaults(input_21);
-			reset(label_26);
+			var label_25 = root_17$1();
+			var span_19 = child(label_25);
+			var text_23 = child(span_19);
+			reset(span_19);
+			var input_20 = sibling(span_19, 2);
+			remove_input_defaults(input_20);
+			reset(label_25);
 			template_effect(($0) => {
-				set_text(text_22, `Camera Thumbnail Opacity (${$0 !== null && $0 !== void 0 ? $0 : ""}%)`);
-				set_value(input_21, get(thumbOpacity));
+				set_text(text_23, `Camera Thumbnail Opacity (${$0 !== null && $0 !== void 0 ? $0 : ""}%)`);
+				set_value(input_20, get(thumbOpacity));
 			}, [() => Math.round(get(thumbOpacity) * 100)]);
-			delegated("input", input_21, (e) => updateCameraThumbnailOpacity(Number(e.target.value)));
-			append($$anchor, label_26);
+			delegated("input", input_20, (e) => updateCameraThumbnailOpacity(Number(e.target.value)));
+			append($$anchor, label_25);
 		};
-		if_block(node_7, ($$render) => {
+		if_block(node_8, ($$render) => {
 			if (get(hasCameraThumbnailOverlay)) $$render(consequent_7);
 		});
-		var label_27 = sibling(node_7, 2);
-		var select_4 = sibling(child(label_27), 2);
+		var label_26 = sibling(node_8, 2);
+		var select_4 = sibling(child(label_26), 2);
 		each(select_4, 21, () => roomTypes, index$1, ($$anchor, rt) => {
 			var option_21 = root_18$1();
-			var text_23 = child(option_21);
+			var text_24 = child(option_21);
 			reset(option_21);
 			var option_21_value = {};
 			template_effect(() => {
 				var _$$get$icon, _$$get$label;
-				set_text(text_23, `${(_$$get$icon = get(rt).icon) !== null && _$$get$icon !== void 0 ? _$$get$icon : ""} ${(_$$get$label = get(rt).label) !== null && _$$get$label !== void 0 ? _$$get$label : ""}`);
+				set_text(text_24, `${(_$$get$icon = get(rt).icon) !== null && _$$get$icon !== void 0 ? _$$get$icon : ""} ${(_$$get$label = get(rt).label) !== null && _$$get$label !== void 0 ? _$$get$label : ""}`);
 				if (option_21_value !== (option_21_value = get(rt).id)) {
 					var _option_21$__value;
 					option_21.value = (_option_21$__value = option_21.__value = get(rt).id) !== null && _option_21$__value !== void 0 ? _option_21$__value : "";
@@ -60633,13 +60764,13 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_4);
 		var select_4_value;
 		init_select(select_4);
+		reset(label_26);
+		var label_27 = sibling(label_26, 2);
+		var input_21 = sibling(child(label_27), 2);
+		remove_input_defaults(input_21);
 		reset(label_27);
 		var label_28 = sibling(label_27, 2);
-		var input_22 = sibling(child(label_28), 2);
-		remove_input_defaults(input_22);
-		reset(label_28);
-		var label_29 = sibling(label_28, 2);
-		var select_5 = sibling(child(label_29), 2);
+		var select_5 = sibling(child(label_28), 2);
 		var option_22 = child(select_5);
 		option_22.value = option_22.__value = "indoor";
 		var option_23 = sibling(option_22);
@@ -60651,10 +60782,10 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_5);
 		var select_5_value;
 		init_select(select_5);
-		reset(label_29);
-		var div_22 = sibling(label_29, 2);
+		reset(label_28);
+		var div_22 = sibling(label_28, 2);
 		var p = sibling(child(div_22), 2);
-		var text_24 = child(p, true);
+		var text_25 = child(p, true);
 		reset(p);
 		reset(div_22);
 		var div_23 = sibling(div_22, 2);
@@ -60672,22 +60803,22 @@ function PropertiesPanel($$anchor, $$props) {
 		});
 		reset(div_24);
 		var div_25 = sibling(div_24, 2);
-		var input_23 = sibling(child(div_25), 2);
-		remove_input_defaults(input_23);
+		var input_22 = sibling(child(div_25), 2);
+		remove_input_defaults(input_22);
 		reset(div_25);
 		reset(div_23);
 		var div_26 = sibling(div_23, 2);
 		var div_27 = sibling(child(div_26), 2);
 		each(div_27, 21, () => textureGroups, index$1, ($$anchor, group) => {
 			var div_28 = root_20$1();
-			var span_19 = child(div_28);
-			var text_25 = child(span_19, true);
-			reset(span_19);
-			var div_29 = sibling(span_19, 2);
+			var span_20 = child(div_28);
+			var text_26 = child(span_20, true);
+			reset(span_20);
+			var div_29 = sibling(span_20, 2);
 			each(div_29, 21, () => get(group).ids, index$1, ($$anchor, matId) => {
 				const mat = /* @__PURE__ */ user_derived(() => floorMaterials.find((m) => m.id === get(matId)));
 				var fragment_6 = comment();
-				var node_8 = first_child(fragment_6);
+				var node_9 = first_child(fragment_6);
 				var consequent_8 = ($$anchor) => {
 					const texPath = /* @__PURE__ */ user_derived(() => {
 						var _floorTexPaths$$$get$;
@@ -60696,26 +60827,26 @@ function PropertiesPanel($$anchor, $$props) {
 					var button_21 = root_22$1();
 					var div_30 = child(button_21);
 					var div_31 = sibling(div_30, 2);
-					var text_26 = child(div_31, true);
+					var text_27 = child(div_31, true);
 					reset(div_31);
 					reset(button_21);
 					template_effect(() => {
 						set_class(button_21, 1, `p-1 rounded-lg border-2 hover:border-gray-300 transition-all text-xs ${get(selectedRoom).floorTexture === get(mat).id ? "border-blue-500 ring-2 ring-blue-200 shadow-sm" : "border-gray-200"}`);
 						set_attribute(button_21, "title", get(mat).name);
 						set_style(div_30, get(texPath) ? `background-image: url(${get(texPath)}); background-size: cover; background-position: center;` : `background-color: ${get(mat).color}`);
-						set_text(text_26, get(mat).name);
+						set_text(text_27, get(mat).name);
 					});
 					delegated("click", button_21, () => onRoomFloor(get(mat).id));
 					append($$anchor, button_21);
 				};
-				if_block(node_8, ($$render) => {
+				if_block(node_9, ($$render) => {
 					if (get(mat)) $$render(consequent_8);
 				});
 				append($$anchor, fragment_6);
 			});
 			reset(div_29);
 			reset(div_28);
-			template_effect(() => set_text(text_25, get(group).label));
+			template_effect(() => set_text(text_26, get(group).label));
 			append($$anchor, div_28);
 		});
 		reset(div_27);
@@ -60727,16 +60858,16 @@ function PropertiesPanel($$anchor, $$props) {
 				var _select_4$__value;
 				select_4.value = (_select_4$__value = select_4.__value = get(selectedRoomType)) !== null && _select_4$__value !== void 0 ? _select_4$__value : "", select_option(select_4, get(selectedRoomType));
 			}
-			set_value(input_22, get(selectedRoom).name);
+			set_value(input_21, get(selectedRoom).name);
 			if (select_5_value !== (select_5_value = (_$$get$roomType = get(selectedRoom).roomType) !== null && _$$get$roomType !== void 0 ? _$$get$roomType : "indoor")) {
 				var _select_5$__value, _$$get$roomType2, _$$get$roomType3;
 				select_5.value = (_select_5$__value = select_5.__value = (_$$get$roomType2 = get(selectedRoom).roomType) !== null && _$$get$roomType2 !== void 0 ? _$$get$roomType2 : "indoor") !== null && _select_5$__value !== void 0 ? _select_5$__value : "", select_option(select_5, (_$$get$roomType3 = get(selectedRoom).roomType) !== null && _$$get$roomType3 !== void 0 ? _$$get$roomType3 : "indoor");
 			}
-			set_text(text_24, $0);
-			set_value(input_23, (_$$get$color6 = get(selectedRoom).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : "#ffffff");
+			set_text(text_25, $0);
+			set_value(input_22, (_$$get$color6 = get(selectedRoom).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : "#ffffff");
 		}, [() => formatArea(get(selectedRoom).area, get(settings).units)]);
 		delegated("change", select_4, onRoomType);
-		delegated("input", input_22, onRoomName);
+		delegated("input", input_21, onRoomName);
 		delegated("change", select_5, (e) => {
 			if (get(selectedRoom)) {
 				const v = e.target.value;
@@ -60744,14 +60875,14 @@ function PropertiesPanel($$anchor, $$props) {
 				updateDetectedRoom(get(selectedRoom).id, { roomType: v });
 			}
 		});
-		delegated("input", input_23, (e) => onRoomColor(e.target.value));
+		delegated("input", input_22, (e) => onRoomColor(e.target.value));
 		append($$anchor, fragment_5);
 	};
 	var consequent_10 = ($$anchor) => {
 		var fragment_7 = root_23$1();
 		var div_32 = sibling(first_child(fragment_7), 2);
-		var label_30 = child(div_32);
-		var select_6 = sibling(child(label_30), 2);
+		var label_29 = child(div_32);
+		var select_6 = sibling(child(label_29), 2);
 		var option_26 = child(select_6);
 		option_26.value = option_26.__value = "straight";
 		var option_27 = sibling(option_26);
@@ -60763,49 +60894,49 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(select_6);
 		var select_6_value;
 		init_select(select_6);
+		reset(label_29);
+		var label_30 = sibling(label_29, 2);
+		var span_21 = child(label_30);
+		var text_28 = child(span_21);
+		reset(span_21);
+		var input_23 = sibling(span_21, 2);
+		remove_input_defaults(input_23);
 		reset(label_30);
 		var label_31 = sibling(label_30, 2);
-		var span_20 = child(label_31);
-		var text_27 = child(span_20);
-		reset(span_20);
-		var input_24 = sibling(span_20, 2);
+		var span_22 = child(label_31);
+		var text_29 = child(span_22);
+		reset(span_22);
+		var input_24 = sibling(span_22, 2);
 		remove_input_defaults(input_24);
 		reset(label_31);
 		var label_32 = sibling(label_31, 2);
-		var span_21 = child(label_32);
-		var text_28 = child(span_21);
-		reset(span_21);
-		var input_25 = sibling(span_21, 2);
+		var input_25 = sibling(child(label_32), 2);
 		remove_input_defaults(input_25);
 		reset(label_32);
 		var label_33 = sibling(label_32, 2);
-		var input_26 = sibling(child(label_33), 2);
-		remove_input_defaults(input_26);
-		reset(label_33);
-		var label_34 = sibling(label_33, 2);
-		var div_33 = sibling(child(label_34), 2);
+		var div_33 = sibling(child(label_33), 2);
 		var button_22 = child(div_33);
 		var button_23 = sibling(button_22, 2);
 		reset(div_33);
+		reset(label_33);
+		var label_34 = sibling(label_33, 2);
+		var input_26 = sibling(child(label_34), 2);
+		remove_input_defaults(input_26);
 		reset(label_34);
-		var label_35 = sibling(label_34, 2);
-		var input_27 = sibling(child(label_35), 2);
-		remove_input_defaults(input_27);
-		reset(label_35);
 		reset(div_32);
 		template_effect(($0, $1, $2, $3) => {
 			if (select_6_value !== (select_6_value = get(selectedStair).stairType || "straight")) {
 				var _select_6$__value;
 				select_6.value = (_select_6$__value = select_6.__value = get(selectedStair).stairType || "straight") !== null && _select_6$__value !== void 0 ? _select_6$__value : "", select_option(select_6, get(selectedStair).stairType || "straight");
 			}
-			set_text(text_27, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
-			set_value(input_24, $1);
-			set_text(text_28, `Depth (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
-			set_value(input_25, $3);
-			set_value(input_26, get(selectedStair).riserCount);
+			set_text(text_28, `Width (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
+			set_value(input_23, $1);
+			set_text(text_29, `Depth (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
+			set_value(input_24, $3);
+			set_value(input_25, get(selectedStair).riserCount);
 			set_class(button_22, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedStair).direction === "up" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 			set_class(button_23, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedStair).direction === "down" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_value(input_27, get(selectedStair).rotation);
+			set_value(input_26, get(selectedStair).rotation);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedStair).width),
@@ -60813,38 +60944,38 @@ function PropertiesPanel($$anchor, $$props) {
 			() => displayValue(get(selectedStair).depth)
 		]);
 		delegated("change", select_6, (e) => updateStair(get(selectedStair).id, { stairType: e.target.value }));
-		delegated("input", input_24, (e) => updateStair(get(selectedStair).id, { width: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_25, (e) => updateStair(get(selectedStair).id, { depth: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_26, (e) => updateStair(get(selectedStair).id, { riserCount: Number(e.target.value) }));
+		delegated("input", input_23, (e) => updateStair(get(selectedStair).id, { width: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_24, (e) => updateStair(get(selectedStair).id, { depth: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_25, (e) => updateStair(get(selectedStair).id, { riserCount: Number(e.target.value) }));
 		delegated("click", button_22, () => updateStair(get(selectedStair).id, { direction: "up" }));
 		delegated("click", button_23, () => updateStair(get(selectedStair).id, { direction: "down" }));
-		delegated("input", input_27, (e) => updateStair(get(selectedStair).id, { rotation: Number(e.target.value) }));
+		delegated("input", input_26, (e) => updateStair(get(selectedStair).id, { rotation: Number(e.target.value) }));
 		append($$anchor, fragment_7);
 	};
 	var consequent_12 = ($$anchor) => {
 		var fragment_8 = root_24$1();
 		var div_34 = sibling(first_child(fragment_8), 2);
-		var label_36 = child(div_34);
-		var div_35 = sibling(child(label_36), 2);
+		var label_35 = child(div_34);
+		var div_35 = sibling(child(label_35), 2);
 		var button_24 = child(div_35);
 		var button_25 = sibling(button_24, 2);
 		reset(div_35);
+		reset(label_35);
+		var label_36 = sibling(label_35, 2);
+		var span_23 = child(label_36);
+		var text_30 = child(span_23);
+		reset(span_23);
+		var input_27 = sibling(span_23, 2);
+		remove_input_defaults(input_27);
 		reset(label_36);
 		var label_37 = sibling(label_36, 2);
-		var span_22 = child(label_37);
-		var text_29 = child(span_22);
-		reset(span_22);
-		var input_28 = sibling(span_22, 2);
+		var span_24 = child(label_37);
+		var text_31 = child(span_24);
+		reset(span_24);
+		var input_28 = sibling(span_24, 2);
 		remove_input_defaults(input_28);
 		reset(label_37);
-		var label_38 = sibling(label_37, 2);
-		var span_23 = child(label_38);
-		var text_30 = child(span_23);
-		reset(span_23);
-		var input_29 = sibling(span_23, 2);
-		remove_input_defaults(input_29);
-		reset(label_38);
-		var div_36 = sibling(label_38, 2);
+		var div_36 = sibling(label_37, 2);
 		var div_37 = sibling(child(div_36), 2);
 		each(div_37, 21, () => columnColorPresets, index$1, ($$anchor, preset) => {
 			var button_26 = root_25();
@@ -60859,32 +60990,32 @@ function PropertiesPanel($$anchor, $$props) {
 		});
 		reset(div_37);
 		var div_38 = sibling(div_37, 2);
-		var input_30 = sibling(child(div_38), 2);
-		remove_input_defaults(input_30);
+		var input_29 = sibling(child(div_38), 2);
+		remove_input_defaults(input_29);
 		reset(div_38);
 		reset(div_36);
-		var node_9 = sibling(div_36, 2);
+		var node_10 = sibling(div_36, 2);
 		var consequent_11 = ($$anchor) => {
-			var label_39 = root_26();
-			var input_31 = sibling(child(label_39), 2);
-			remove_input_defaults(input_31);
-			reset(label_39);
-			template_effect(() => set_value(input_31, get(selectedColumn).rotation));
-			delegated("input", input_31, (e) => updateColumn(get(selectedColumn).id, { rotation: Number(e.target.value) }));
-			append($$anchor, label_39);
+			var label_38 = root_26();
+			var input_30 = sibling(child(label_38), 2);
+			remove_input_defaults(input_30);
+			reset(label_38);
+			template_effect(() => set_value(input_30, get(selectedColumn).rotation));
+			delegated("input", input_30, (e) => updateColumn(get(selectedColumn).id, { rotation: Number(e.target.value) }));
+			append($$anchor, label_38);
 		};
-		if_block(node_9, ($$render) => {
+		if_block(node_10, ($$render) => {
 			if (get(selectedColumn).shape === "square") $$render(consequent_11);
 		});
 		reset(div_34);
 		template_effect(($0, $1, $2, $3) => {
 			set_class(button_24, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedColumn).shape === "round" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 			set_class(button_25, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${get(selectedColumn).shape === "square" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_text(text_29, `${get(selectedColumn).shape === "round" ? "Diameter" : "Side Length"} (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
-			set_value(input_28, $1);
-			set_text(text_30, `Height (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
-			set_value(input_29, $3);
-			set_value(input_30, get(selectedColumn).color);
+			set_text(text_30, `${get(selectedColumn).shape === "round" ? "Diameter" : "Side Length"} (${$0 !== null && $0 !== void 0 ? $0 : ""})`);
+			set_value(input_27, $1);
+			set_text(text_31, `Height (${$2 !== null && $2 !== void 0 ? $2 : ""})`);
+			set_value(input_28, $3);
+			set_value(input_29, get(selectedColumn).color);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedColumn).diameter),
@@ -60893,29 +61024,33 @@ function PropertiesPanel($$anchor, $$props) {
 		]);
 		delegated("click", button_24, () => updateColumn(get(selectedColumn).id, { shape: "round" }));
 		delegated("click", button_25, () => updateColumn(get(selectedColumn).id, { shape: "square" }));
-		delegated("input", input_28, (e) => updateColumn(get(selectedColumn).id, { diameter: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_29, (e) => updateColumn(get(selectedColumn).id, { height: inputToCm(Number(e.target.value)) }));
-		delegated("input", input_30, (e) => updateColumn(get(selectedColumn).id, { color: e.target.value }));
+		delegated("input", input_27, (e) => updateColumn(get(selectedColumn).id, { diameter: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_28, (e) => updateColumn(get(selectedColumn).id, { height: inputToCm(Number(e.target.value)) }));
+		delegated("input", input_29, (e) => updateColumn(get(selectedColumn).id, { color: e.target.value }));
 		append($$anchor, fragment_8);
 	};
 	var consequent_13 = ($$anchor) => {
 		var div_39 = root_27();
-		var label_40 = sibling(child(div_39), 2);
+		var label_39 = sibling(child(div_39), 2);
+		var input_31 = sibling(child(label_39), 2);
+		remove_input_defaults(input_31);
+		reset(label_39);
+		var label_40 = sibling(label_39, 2);
 		var input_32 = sibling(child(label_40), 2);
 		remove_input_defaults(input_32);
 		reset(label_40);
 		var label_41 = sibling(label_40, 2);
-		var input_33 = sibling(child(label_41), 2);
+		var div_40 = sibling(child(label_41), 2);
+		var input_33 = child(div_40);
 		remove_input_defaults(input_33);
+		var span_25 = sibling(input_33, 2);
+		var text_32 = child(span_25, true);
+		reset(span_25);
+		reset(div_40);
 		reset(label_41);
 		var label_42 = sibling(label_41, 2);
-		var div_40 = sibling(child(label_42), 2);
-		var input_34 = child(div_40);
+		var input_34 = sibling(child(label_42), 2);
 		remove_input_defaults(input_34);
-		var span_24 = sibling(input_34, 2);
-		var text_31 = child(span_24, true);
-		reset(span_24);
-		reset(div_40);
 		reset(label_42);
 		var label_43 = sibling(label_42, 2);
 		var input_35 = sibling(child(label_43), 2);
@@ -60925,26 +61060,22 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_36 = sibling(child(label_44), 2);
 		remove_input_defaults(input_36);
 		reset(label_44);
-		var label_45 = sibling(label_44, 2);
-		var input_37 = sibling(child(label_45), 2);
-		remove_input_defaults(input_37);
-		reset(label_45);
 		reset(div_39);
 		template_effect(($0, $1) => {
-			set_value(input_32, get(selectedTextAnnotation).text);
-			set_value(input_33, get(selectedTextAnnotation).fontSize);
-			set_value(input_34, get(selectedTextAnnotation).color);
-			set_text(text_31, get(selectedTextAnnotation).color);
-			set_value(input_35, get(selectedTextAnnotation).rotation);
-			set_value(input_36, $0);
-			set_value(input_37, $1);
+			set_value(input_31, get(selectedTextAnnotation).text);
+			set_value(input_32, get(selectedTextAnnotation).fontSize);
+			set_value(input_33, get(selectedTextAnnotation).color);
+			set_text(text_32, get(selectedTextAnnotation).color);
+			set_value(input_34, get(selectedTextAnnotation).rotation);
+			set_value(input_35, $0);
+			set_value(input_36, $1);
 		}, [() => Math.round(get(selectedTextAnnotation).x), () => Math.round(get(selectedTextAnnotation).y)]);
-		delegated("input", input_32, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { text: e.target.value }));
-		delegated("input", input_33, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { fontSize: Number(e.target.value) }));
-		delegated("input", input_34, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { color: e.target.value }));
-		delegated("input", input_35, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
-		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
-		delegated("input", input_37, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
+		delegated("input", input_31, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { text: e.target.value }));
+		delegated("input", input_32, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { fontSize: Number(e.target.value) }));
+		delegated("input", input_33, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { color: e.target.value }));
+		delegated("input", input_34, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
+		delegated("input", input_35, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
+		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
 		append($$anchor, div_39);
 	};
 	if_block(node, ($$render) => {
@@ -60957,11 +61088,15 @@ function PropertiesPanel($$anchor, $$props) {
 		else if (get(selectedColumn)) $$render(consequent_12, 6);
 		else if (get(selectedTextAnnotation)) $$render(consequent_13, 7);
 	});
-	var node_10 = sibling(node, 2);
+	var node_11 = sibling(node, 2);
 	var consequent_14 = ($$anchor) => {
 		var div_41 = root_28();
 		var div_42 = sibling(child(div_41), 2);
-		var label_46 = child(div_42);
+		var label_45 = child(div_42);
+		var input_37 = sibling(child(label_45), 2);
+		remove_input_defaults(input_37);
+		reset(label_45);
+		var label_46 = sibling(label_45, 2);
 		var input_38 = sibling(child(label_46), 2);
 		remove_input_defaults(input_38);
 		reset(label_46);
@@ -60969,13 +61104,9 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_39 = sibling(child(label_47), 2);
 		remove_input_defaults(input_39);
 		reset(label_47);
-		var label_48 = sibling(label_47, 2);
-		var input_40 = sibling(child(label_48), 2);
-		remove_input_defaults(input_40);
-		reset(label_48);
-		var div_43 = sibling(label_48, 2);
+		var div_43 = sibling(label_47, 2);
 		var button_27 = child(div_43);
-		var text_32 = child(button_27, true);
+		var text_33 = child(button_27, true);
 		reset(button_27);
 		var button_28 = sibling(button_27, 2);
 		reset(div_43);
@@ -60983,15 +61114,15 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(div_42);
 		reset(div_41);
 		template_effect(() => {
-			set_value(input_38, get(floor).backgroundImage.opacity);
-			set_value(input_39, get(floor).backgroundImage.scale);
-			set_value(input_40, get(floor).backgroundImage.rotation);
+			set_value(input_37, get(floor).backgroundImage.opacity);
+			set_value(input_38, get(floor).backgroundImage.scale);
+			set_value(input_39, get(floor).backgroundImage.rotation);
 			set_class(button_27, 1, `flex-1 px-2 py-1.5 border rounded text-sm ${get(floor).backgroundImage.locked ? "bg-amber-100 border-amber-400 text-amber-700" : "border-gray-200 hover:bg-gray-50"}`);
-			set_text(text_32, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
+			set_text(text_33, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
 		});
-		delegated("input", input_38, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
-		delegated("input", input_39, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
-		delegated("input", input_40, (e) => updateBackgroundImage({ rotation: Number(e.target.value) }));
+		delegated("input", input_37, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
+		delegated("input", input_38, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
+		delegated("input", input_39, (e) => updateBackgroundImage({ rotation: Number(e.target.value) }));
 		delegated("click", button_27, () => updateBackgroundImage({ locked: !get(floor).backgroundImage.locked }));
 		delegated("click", button_28, () => {
 			calibrationPoints.set([]);
@@ -61000,12 +61131,12 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("click", button_29, () => setBackgroundImage(void 0));
 		append($$anchor, div_41);
 	};
-	if_block(node_10, ($$render) => {
-		var _$$get18;
-		if (get(hasBgImage) && ((_$$get18 = get(floor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.backgroundImage)) $$render(consequent_14);
+	if_block(node_11, ($$render) => {
+		var _$$get19;
+		if (get(hasBgImage) && ((_$$get19 = get(floor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.backgroundImage)) $$render(consequent_14);
 	});
 	reset(div);
-	template_effect(() => classes = set_class(div, 1, `${is3D() ? "w-80" : "w-64"} shrink-0 bg-white border-l border-gray-200 flex flex-col overflow-y-auto p-3 fixed right-0 z-40 shadow-lg`, null, classes, { hidden: !get(hasSelection) }));
+	template_effect(() => classes = set_class(div, 1, `${is3D() ? "w-80" : "w-64"} shrink-0 bg-white border-l border-gray-200 flex flex-col overflow-y-auto p-3 absolute right-0 z-40 shadow-lg`, null, classes, { hidden: !get(hasSelection) }));
 	delegated("keydown", div, stopShortcutBubble);
 	event("keydown", div, stopShortcutBubble, true);
 	append($$anchor, div);
@@ -61023,7 +61154,7 @@ delegate([
 init_client();
 var root_3$5 = /* @__PURE__ */ from_html(`<button><span class="text-[10px]"> </span> <span class="truncate flex-1"> </span></button>`);
 var root_4$4 = /* @__PURE__ */ from_html(`<div class="pl-7 pr-2 py-1 text-gray-300 italic">Empty</div>`);
-var root_2$5 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_2$6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$6 = /* @__PURE__ */ from_html(`<div class="border-b border-gray-50 relative"><button class="w-full flex items-center gap-1.5 px-2 py-1.5 hover:bg-gray-50 text-left"><span class="text-[10px] text-gray-400 w-3"> </span> <span> </span> <span class="font-medium text-gray-700 flex-1"> </span> <span class="text-gray-400 mr-1"> </span></button> <span role="button" tabindex="0">👁</span> <!></div>`);
 var root_5$2 = /* @__PURE__ */ from_html(`<div class="p-4 text-gray-400 text-center">No elements</div>`);
 var root$2 = /* @__PURE__ */ from_html(`<div class="w-56 bg-white border-l border-gray-200 flex flex-col overflow-hidden text-xs select-none"><div class="px-3 py-2 border-b border-gray-100 font-semibold text-gray-700 text-sm flex items-center gap-1.5">🗂 Layers</div> <div class="flex-1 overflow-y-auto"><!> <!></div></div>`);
@@ -61194,7 +61325,7 @@ function LayersPanel($$anchor, $$props) {
 		let classes;
 		var node_1 = sibling(span_4, 2);
 		var consequent_1 = ($$anchor) => {
-			var fragment = root_2$5();
+			var fragment = root_2$6();
 			var node_2 = first_child(fragment);
 			each(node_2, 17, () => get(cat).items, index$1, ($$anchor, item) => {
 				var button_1 = root_3$5();
@@ -62232,7 +62363,7 @@ function drawFurnitureIcon(ctx, catalogId, w, d, color, strokeColor, heatmapMatr
 //#region src/lib/components/editor/ContextMenu.svelte
 init_client();
 init_index_client();
-var root_2$4 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">📋</span> Duplicate</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🔄</span> Rotate 90°</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">↔️</span> Flip Horizontal</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⬆️</span> Bring to Front</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⬇️</span> Send to Back</button> <div class="ctx-sep svelte-wxo1tu"></div> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu"> </span> </button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⚙️</span> Properties</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item ctx-danger svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🗑️</span> Delete</button>`, 1);
+var root_2$5 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">📋</span> Duplicate</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🔄</span> Rotate 90°</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">↔️</span> Flip Horizontal</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⬆️</span> Bring to Front</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⬇️</span> Send to Back</button> <div class="ctx-sep svelte-wxo1tu"></div> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu"> </span> </button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⚙️</span> Properties</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item ctx-danger svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🗑️</span> Delete</button>`, 1);
 var root_3$4 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">✂️</span> Split Wall</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">〰️</span> </button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⚙️</span> Properties</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item ctx-danger svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🗑️</span> Delete Wall</button>`, 1);
 var root_4$3 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">⚙️</span> Properties</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item ctx-danger svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🗑️</span> Delete</button>`, 1);
 var root_5$1 = /* @__PURE__ */ from_html(`<button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">✏️</span> Rename Room</button> <button class="ctx-item svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🎨</span> Change Floor Texture</button> <div class="ctx-sep svelte-wxo1tu"></div> <button class="ctx-item ctx-danger svelte-wxo1tu" role="menuitem"><span class="ctx-icon svelte-wxo1tu">🗑️</span> Delete Room</button>`, 1);
@@ -62280,7 +62411,7 @@ function ContextMenu($$anchor, $$props) {
 		var div = root_1$5();
 		var node_1 = child(div);
 		var consequent = ($$anchor) => {
-			var fragment_1 = root_2$4();
+			var fragment_1 = root_2$5();
 			var button = first_child(fragment_1);
 			var button_1 = sibling(button, 2);
 			var button_2 = sibling(button_1, 2);
@@ -63618,30 +63749,65 @@ function drawFurnitureItem(cs, item, selected, options) {
 			ctx.fillRect(hx - ehs, hy - ehs, ehs * 2, ehs * 2);
 			ctx.strokeRect(hx - ehs, hy - ehs, ehs * 2, ehs * 2);
 		}
-		const rotY = -d / 2 - 18;
-		ctx.strokeStyle = "#3b82f6";
-		ctx.lineWidth = 1;
-		ctx.beginPath();
-		ctx.moveTo(0, -d / 2 - 2);
-		ctx.lineTo(0, rotY + 5);
-		ctx.stroke();
-		ctx.fillStyle = "#3b82f6";
-		ctx.beginPath();
-		ctx.arc(0, rotY, 5, 0, Math.PI * 2);
-		ctx.fill();
-		ctx.strokeStyle = "#ffffff";
-		ctx.lineWidth = 1.2;
-		ctx.beginPath();
-		ctx.arc(0, rotY, 3, -Math.PI * .8, Math.PI * .4);
-		ctx.stroke();
-		const arrowAngle2 = Math.PI * .4;
-		const ax = Math.cos(arrowAngle2) * 3;
-		const ay = Math.sin(arrowAngle2) * 3;
-		ctx.beginPath();
-		ctx.moveTo(ax + 1.5, rotY + ay - 1);
-		ctx.lineTo(ax, rotY + ay);
-		ctx.lineTo(ax - 1, rotY + ay - 2);
-		ctx.stroke();
+		const rotOffset = isCamera ? 26 : 18;
+		const rotRadius = isCamera ? 8 : 5;
+		const rotIconR = isCamera ? 4.5 : 3;
+		const rotHandles = isCamera ? [
+			{
+				edgeX: 0,
+				edgeY: -d / 2,
+				hx: 0,
+				hy: -d / 2 - rotOffset
+			},
+			{
+				edgeX: 0,
+				edgeY: d / 2,
+				hx: 0,
+				hy: d / 2 + rotOffset
+			},
+			{
+				edgeX: -w / 2,
+				edgeY: 0,
+				hx: -w / 2 - rotOffset,
+				hy: 0
+			},
+			{
+				edgeX: w / 2,
+				edgeY: 0,
+				hx: w / 2 + rotOffset,
+				hy: 0
+			}
+		] : [{
+			edgeX: 0,
+			edgeY: -d / 2,
+			hx: 0,
+			hy: -d / 2 - rotOffset
+		}];
+		for (const h of rotHandles) {
+			ctx.strokeStyle = "#3b82f6";
+			ctx.lineWidth = 1;
+			ctx.beginPath();
+			ctx.moveTo(h.edgeX, h.edgeY);
+			ctx.lineTo(h.hx, h.hy);
+			ctx.stroke();
+			ctx.fillStyle = "#3b82f6";
+			ctx.beginPath();
+			ctx.arc(h.hx, h.hy, rotRadius, 0, Math.PI * 2);
+			ctx.fill();
+			ctx.strokeStyle = "#ffffff";
+			ctx.lineWidth = isCamera ? 1.6 : 1.2;
+			ctx.beginPath();
+			ctx.arc(h.hx, h.hy, rotIconR, -Math.PI * .8, Math.PI * .4);
+			ctx.stroke();
+			const arrowAngle2 = Math.PI * .4;
+			const ax = Math.cos(arrowAngle2) * rotIconR;
+			const ay = Math.sin(arrowAngle2) * rotIconR;
+			ctx.beginPath();
+			ctx.moveTo(h.hx + ax + 1.5, h.hy + ay - 1);
+			ctx.lineTo(h.hx + ax, h.hy + ay);
+			ctx.lineTo(h.hx + ax - 1, h.hy + ay - 2);
+			ctx.stroke();
+		}
 	}
 	ctx.restore();
 }
@@ -64579,7 +64745,7 @@ function findWallAt(p, walls, zoom) {
 	return null;
 }
 function findHandleAt(p, selectedId, furniture, zoom) {
-	var _fi$scale$x, _fi$scale, _fi$scale$y, _fi$scale2;
+	var _fi$width, _fi$scale$x, _fi$scale, _fi$depth, _fi$scale$y, _fi$scale2;
 	if (!selectedId) return null;
 	const fi = furniture.find((f) => f.id === selectedId);
 	if (!fi) return null;
@@ -64590,11 +64756,34 @@ function findHandleAt(p, selectedId, furniture, zoom) {
 	const angle = -(fi.rotation * Math.PI) / 180;
 	const rx = dx * Math.cos(angle) - dy * Math.sin(angle);
 	const ry = dx * Math.sin(angle) + dy * Math.cos(angle);
-	const hw = cat.width * Math.abs((_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) / 2;
-	const hd = cat.depth * Math.abs((_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) / 2;
+	const hw = ((_fi$width = fi.width) !== null && _fi$width !== void 0 ? _fi$width : cat.width) * Math.abs((_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) / 2;
+	const hd = ((_fi$depth = fi.depth) !== null && _fi$depth !== void 0 ? _fi$depth : cat.depth) * Math.abs((_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) / 2;
 	const ht = 8 / zoom;
-	const rotHandleDist = 18 / zoom;
-	if (Math.abs(rx) < ht && Math.abs(ry - (-hd - rotHandleDist)) < ht) return "rotate";
+	const isCamera = fi.catalogId === "camera";
+	const rotHandleDist = (isCamera ? 26 : 18) / zoom;
+	const rotHt = (isCamera ? 12 : 8) / zoom;
+	const rotateHits = isCamera ? [
+		{
+			x: 0,
+			y: -hd - rotHandleDist
+		},
+		{
+			x: 0,
+			y: hd + rotHandleDist
+		},
+		{
+			x: -hw - rotHandleDist,
+			y: 0
+		},
+		{
+			x: hw + rotHandleDist,
+			y: 0
+		}
+	] : [{
+		x: 0,
+		y: -hd - rotHandleDist
+	}];
+	for (const h of rotateHits) if (Math.abs(rx - h.x) < rotHt && Math.abs(ry - h.y) < rotHt) return "rotate";
 	if (Math.abs(rx - -hw) < ht && Math.abs(ry - -hd) < ht) return "resize-tl";
 	if (Math.abs(rx - hw) < ht && Math.abs(ry - -hd) < ht) return "resize-tr";
 	if (Math.abs(rx - -hw) < ht && Math.abs(ry - hd) < ht) return "resize-bl";
@@ -64780,7 +64969,7 @@ var root_21 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -tr
 var root_22 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-red-600 text-white px-3 py-1 rounded-full text-xs shadow">Right-click two points to measure · M to exit · Esc to cancel</div>`);
 var root_23 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-emerald-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to place text label · Esc to cancel</div>`);
 var root_24 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
-var root_2$3 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <div class="absolute bottom-3 left-3 z-20 flex items-center gap-1 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom Out (−)" aria-label="Zoom out">−</button> <button class="min-w-[3.5rem] h-7 flex items-center justify-center rounded hover:bg-gray-100 text-xs font-medium text-gray-600 hover:text-gray-800 tabular-nums" title="Reset to 100%" aria-label="Zoom to 100%"> </button> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom In (+)" aria-label="Zoom in">+</button> <div class="w-px h-5 bg-gray-200"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700 text-sm" title="Zoom to Fit (F)" aria-label="Zoom to fit">⊞</button></div> <!>`, 1);
+var root_2$4 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <div class="absolute bottom-3 left-3 z-20 flex items-center gap-1 bg-white rounded-lg shadow-lg border border-gray-200 px-1 py-0.5"><button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom Out (−)" aria-label="Zoom out">−</button> <button class="min-w-[3.5rem] h-7 flex items-center justify-center rounded hover:bg-gray-100 text-xs font-medium text-gray-600 hover:text-gray-800 tabular-nums" title="Reset to 100%" aria-label="Zoom to 100%"> </button> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 hover:text-gray-800 font-bold text-lg" title="Zoom In (+)" aria-label="Zoom in">+</button> <div class="w-px h-5 bg-gray-200"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700 text-sm" title="Zoom to Fit (F)" aria-label="Zoom to fit">⊞</button></div> <!>`, 1);
 var root$1 = /* @__PURE__ */ from_html(`<div class="w-full h-full relative overflow-hidden" role="application"><div class="w-full h-full"><canvas aria-label="Floor plan editor canvas"></canvas></div> <!> <!></div>`);
 function FloorPlanCanvas($$anchor, $$props) {
 	push($$props, true);
@@ -65254,21 +65443,31 @@ function FloorPlanCanvas($$anchor, $$props) {
 		};
 		return end;
 	}
+	let resizeRaf = 0;
 	function resize() {
+		if (resizeRaf) return;
+		resizeRaf = requestAnimationFrame(() => {
+			resizeRaf = 0;
+			applyCanvasResize();
+		});
+	}
+	function applyCanvasResize() {
 		if ($$props.viewOnly) {
 			layoutViewOnlyViewport();
 			return;
 		}
 		const parent = canvas === null || canvas === void 0 ? void 0 : canvas.parentElement;
-		if (!parent) return;
-		set(width, parent.clientWidth, true);
-		set(height, parent.clientHeight, true);
-		if (canvas) {
-			canvas.width = get(width);
-			canvas.height = get(height);
-		}
-		markDirty();
-		needsFitToCanvas = true;
+		if (!parent || !canvas) return;
+		const nextW = parent.clientWidth;
+		const nextH = parent.clientHeight;
+		if (nextW <= 0 || nextH <= 0) return;
+		if (nextW === get(width) && nextH === get(height) && canvas.width === nextW) return;
+		set(width, nextW, true);
+		set(height, nextH, true);
+		canvas.width = get(width);
+		canvas.height = get(height);
+		canvasDirty = true;
+		draw();
 	}
 	/** viewOnly: canvas fills parent 100%, floor zoomed to fit edge-to-edge */
 	function layoutViewOnlyViewport() {
@@ -68263,7 +68462,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 	});
 	var node_1 = sibling(node, 2);
 	var consequent_22 = ($$anchor) => {
-		var fragment = root_2$3();
+		var fragment = root_2$4();
 		var node_2 = first_child(fragment);
 		var consequent_1 = ($$anchor) => {
 			var input = root_3$3();
@@ -68780,7 +68979,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		set_style(div_1, $0);
 		classes = set_class(canvas_1, 1, "block w-full h-full", null, classes, { "pointer-events-none": $$props.viewOnly });
 		set_attribute(canvas_1, "tabindex", $$props.viewOnly ? -1 : 0);
-		set_style(canvas_1, `cursor: ${get(cursorStyle)};`);
+		set_style(canvas_1, `cursor: ${get(cursorStyle)}; background-color: ${canvasBackground()};`);
 	}, [() => getCanvasFrameStyle()]);
 	delegated("mousedown", canvas_1, onMouseDown);
 	delegated("mousemove", canvas_1, onMouseMove);
@@ -68929,7 +69128,7 @@ function alignElements(ids, op) {
 //#region src/lib/components/editor/AlignmentToolbar.svelte
 init_client();
 var root_3$2 = /* @__PURE__ */ from_html(`<div class="w-px h-5 bg-gray-200 mx-0.5"></div>`);
-var root_2$2 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-blue-50 text-gray-500 hover:text-blue-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path></path></svg></button> <!>`, 1);
+var root_2$3 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-blue-50 text-gray-500 hover:text-blue-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path></path></svg></button> <!>`, 1);
 var root_1$3 = /* @__PURE__ */ from_html(`<div class="fixed top-16 left-1/2 -translate-x-1/2 z-50 flex items-center gap-0.5 bg-white rounded-lg shadow-lg border border-gray-200 px-1.5 py-1"><span class="text-xs text-gray-400 px-1 select-none"> </span> <div class="w-px h-5 bg-gray-200 mx-0.5"></div> <!></div>`);
 function AlignmentToolbar($$anchor, $$props) {
 	push($$props, true);
@@ -68994,7 +69193,7 @@ function AlignmentToolbar($$anchor, $$props) {
 		var text = child(span);
 		reset(span);
 		each(sibling(span, 4), 17, () => buttons, index$1, ($$anchor, btn) => {
-			var fragment_1 = root_2$2();
+			var fragment_1 = root_2$3();
 			var button = first_child(fragment_1);
 			var svg = child(button);
 			var path = child(svg);
@@ -69032,7 +69231,7 @@ delegate(["click"]);
 //#endregion
 //#region src/lib/components/editor/CommandPalette.svelte
 init_client();
-var root_2$1 = /* @__PURE__ */ from_html(`<div class="px-4 py-6 text-center text-sm text-gray-400">No results found</div>`);
+var root_2$2 = /* @__PURE__ */ from_html(`<div class="px-4 py-6 text-center text-sm text-gray-400">No results found</div>`);
 var root_4$1 = /* @__PURE__ */ from_html(`<div role="option"><span class="text-base w-6 text-center flex-shrink-0"> </span> <span class="flex-1 truncate"> </span> <span class="text-xs text-gray-400 flex-shrink-0"> </span></div>`);
 var root_1$2 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/40 z-[100] flex justify-center" role="dialog" aria-label="Command Palette"><div class="mt-[15vh] w-full max-w-lg h-fit bg-white rounded-xl shadow-2xl overflow-hidden" role="listbox"><div class="flex items-center gap-2 px-4 py-3 border-b border-gray-200"><span class="text-gray-400 text-lg">🔍</span> <input class="flex-1 bg-transparent outline-none text-sm text-gray-800 placeholder-gray-400" placeholder="Search furniture, tools, actions…" type="text" spellcheck="false"/> <kbd class="text-[10px] px-1.5 py-0.5 bg-gray-100 rounded border border-gray-200 text-gray-400">ESC</kbd></div> <div class="max-h-[50vh] overflow-y-auto"><!></div> <div class="px-4 py-2 border-t border-gray-100 flex items-center gap-3 text-[10px] text-gray-400"><span><kbd class="px-1 py-0.5 bg-gray-100 rounded border border-gray-200">↑↓</kbd> navigate</span> <span><kbd class="px-1 py-0.5 bg-gray-100 rounded border border-gray-200">↵</kbd> select</span> <span><kbd class="px-1 py-0.5 bg-gray-100 rounded border border-gray-200">esc</kbd> close</span></div></div></div>`);
 function CommandPalette($$anchor, $$props) {
@@ -69289,7 +69488,7 @@ function CommandPalette($$anchor, $$props) {
 		var div_3 = sibling(div_2, 2);
 		var node_1 = child(div_3);
 		var consequent = ($$anchor) => {
-			append($$anchor, root_2$1());
+			append($$anchor, root_2$2());
 		};
 		var alternate = ($$anchor) => {
 			var fragment_1 = comment();
@@ -69353,7 +69552,7 @@ delegate(["click", "keydown"]);
 //#region src/lib/components/editor/PrintLayout.svelte
 init_client();
 init_index_client();
-var root_2 = /* @__PURE__ */ from_html(`<option> </option>`);
+var root_2$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_4 = /* @__PURE__ */ from_html(`<div class="flex justify-between"><span class="text-slate-600"> </span> <span class="text-slate-800 font-medium ml-2"> </span></div>`);
 var root_3$1 = /* @__PURE__ */ from_html(`<div class="border-t border-slate-300 pt-3 mt-2 print-legend"><h3 class="text-xs font-bold text-slate-700 uppercase tracking-wide mb-2">Room Schedule</h3> <div class="grid grid-cols-3 gap-x-6 gap-y-1 text-xs"></div></div>`);
 var root_1$1 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/60 z-[100] flex items-start justify-center overflow-auto print-overlay-backdrop"><div class="fixed top-0 left-0 right-0 bg-slate-800 text-white px-6 py-3 flex items-center gap-4 z-[101] print-hide"><h3 class="font-semibold text-sm">Print Preview</h3> <div class="h-4 w-px bg-white/20"></div> <label class="text-xs text-white/70">Page: <select class="ml-1 bg-slate-700 text-white text-xs rounded px-2 py-1 border border-slate-600"><option>Letter</option><option>A4</option></select></label> <label class="text-xs text-white/70">Orientation: <select class="ml-1 bg-slate-700 text-white text-xs rounded px-2 py-1 border border-slate-600"><option>Landscape</option><option>Portrait</option></select></label> <label class="text-xs text-white/70">Scale: <select class="ml-1 bg-slate-700 text-white text-xs rounded px-2 py-1 border border-slate-600"></select></label> <div class="flex-1"></div> <button class="px-4 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold rounded-lg transition-colors flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> Print</button> <button class="px-3 py-1.5 text-white/70 hover:text-white text-sm transition-colors">✕ Close</button></div>  <div><div class="border-b-2 border-slate-800 pb-3 mb-4 flex items-end justify-between print-title-block"><div><h1 class="text-xl font-bold text-slate-800"> </h1> <p class="text-sm text-slate-500"> </p></div> <div class="text-right text-xs text-slate-500"><p class="font-semibold text-slate-700"> </p> <p> </p></div></div> <div class="flex-1 relative print-canvas-container svelte-67xe6d"><canvas class="w-full svelte-67xe6d" style="height: calc(100% - 20px);"></canvas> <div class="absolute top-2 right-2 print-north-arrow"><svg width="40" height="40" viewBox="0 0 40 40"><polygon points="20,2 24,16 20,12 16,16" fill="#1e293b"></polygon><polygon points="20,38 24,24 20,28 16,24" fill="#94a3b8"></polygon><text x="20" y="10" text-anchor="middle" fill="#1e293b" font-size="8" font-weight="bold">N</text></svg></div> <div class="absolute bottom-1 left-2 flex items-center gap-2 text-[10px] text-slate-600 print-scale-bar"><div class="flex items-end gap-0"><div class="w-12 h-1 bg-slate-800"></div> <div class="w-12 h-1 bg-slate-400"></div></div> <span> </span></div></div> <!> <div class="border-t border-slate-200 pt-2 mt-3 flex justify-between text-[9px] text-slate-400 print-footer"><span>Generated by Open3D Floorplan</span> <span>Page 1 of 1</span></div></div></div>`);
@@ -69580,7 +69779,7 @@ function PrintLayout($$anchor, $$props) {
 		var label_2 = sibling(label_1, 2);
 		var select_2 = sibling(child(label_2));
 		each(select_2, 21, () => scaleOptions, index$1, ($$anchor, s) => {
-			var option_4 = root_2();
+			var option_4 = root_2$1();
 			var text = child(option_4, true);
 			reset(option_4);
 			var option_4_value = {};
@@ -69802,10 +70001,32 @@ function findOpenCameraPosition(floor, preferred) {
 		y: preferred.y
 	};
 }
+function propsEqual(a, b) {
+	const left = a !== null && a !== void 0 ? a : {};
+	const keys = new Set([...Object.keys(left), ...Object.keys(b)]);
+	for (const key of keys) {
+		var _left$key, _b$key;
+		if (((_left$key = left[key]) !== null && _left$key !== void 0 ? _left$key : "") !== ((_b$key = b[key]) !== null && _b$key !== void 0 ? _b$key : "")) return false;
+	}
+	return true;
+}
+function applyCameraProps(id, cam) {
+	var _props$serial, _ref, _props$name;
+	const props = assignedCameraToProps(cam);
+	const serial = ((_props$serial = props.serial) === null || _props$serial === void 0 ? void 0 : _props$serial.trim()) || String(cam.serial).trim();
+	updateFurniture(id, {
+		serial,
+		name: (_ref = (_props$name = props.name) !== null && _props$name !== void 0 ? _props$name : props.serial) !== null && _ref !== void 0 ? _ref : serial,
+		props: {
+			...props,
+			serial
+		}
+	});
+}
 /**
 * Sync host `assignedCameras` onto the active floor.
 * - Adds missing serials at floor center (non-overlapping)
-* - Updates names for existing serials
+* - Updates dynamic props for existing serials
 * - Removes cameras whose serial is no longer assigned
 * - If floor has no walls, rejects adds and emits camerasRejected
 */
@@ -69814,24 +70035,21 @@ function syncAssignedCameras(assigned) {
 	const floor = get$1(activeFloor);
 	const project = get$1(currentProject);
 	if (!floor || !project) return;
-	const normalized = assigned.filter((c) => c && typeof c.serial === "string" && c.serial.trim());
-	const assignedBySerial = new Map(normalized.map((c) => [c.serial.trim(), c]));
+	const normalized = assigned.filter((c) => c && typeof c.serial === "string" && String(c.serial).trim());
+	const assignedBySerial = new Map(normalized.map((c) => [String(c.serial).trim(), c]));
 	const existing = getCameraFurniture(floor);
 	const existingBySerial = /* @__PURE__ */ new Map();
 	for (const item of existing) if (item.serial) existingBySerial.set(item.serial, item);
-	const toAdd = normalized.filter((c) => !existingBySerial.has(c.serial.trim()));
+	const toAdd = normalized.filter((c) => !existingBySerial.has(String(c.serial).trim()));
 	const hasFloorLayout = ((_floor$walls$length = (_floor$walls = floor.walls) === null || _floor$walls === void 0 ? void 0 : _floor$walls.length) !== null && _floor$walls$length !== void 0 ? _floor$walls$length : 0) > 0;
 	function rejectNoFloor(cameras) {
 		if (cameras.length === 0) return;
-		const key = cameras.map((c) => c.serial.trim()).sort().join(",");
+		const key = cameras.map((c) => String(c.serial).trim()).sort().join(",");
 		if (key === lastRejectedKey) return;
 		lastRejectedKey = key;
 		emitFloorCallback("camerasRejected", {
 			reason: "no-floor",
-			cameras: cameras.map((c) => ({
-				serial: c.serial,
-				name: c.name
-			}))
+			cameras: cameras.map((c) => assignedCameraToProps(c))
 		});
 	}
 	if (toAdd.length > 0 && !hasFloorLayout) rejectNoFloor(toAdd);
@@ -69846,7 +70064,10 @@ function syncAssignedCameras(assigned) {
 		for (const item of getCameraFurniture(floorAfterRemove)) {
 			if (!item.serial) continue;
 			const assignedCam = assignedBySerial.get(item.serial);
-			if (assignedCam && assignedCam.name !== item.name) updateFurniture(item.id, { name: assignedCam.name });
+			if (!assignedCam) continue;
+			const nextProps = assignedCameraToProps(assignedCam);
+			nextProps.serial = item.serial;
+			if (!propsEqual(item.props, nextProps) || item.name !== nextProps.name) applyCameraProps(item.id, assignedCam);
 		}
 		if (!hasFloorLayout) return;
 		const center = getFloorCenter(floorAfterRemove);
@@ -69857,12 +70078,9 @@ function syncAssignedCameras(assigned) {
 		lastRejectedKey = "";
 		let workingFloor = get$1(activeFloor);
 		for (const cam of toAdd) {
-			const serial = cam.serial.trim();
+			const serial = String(cam.serial).trim();
 			if (getCameraFurniture(workingFloor).some((f) => f.serial === serial)) continue;
-			updateFurniture(addFurniture("camera", findOpenCameraPosition(workingFloor, center)), {
-				serial,
-				name: cam.name
-			});
+			applyCameraProps(addFurniture("camera", findOpenCameraPosition(workingFloor, center)), cam);
 			workingFloor = get$1(activeFloor);
 		}
 	} finally {
@@ -69873,13 +70091,15 @@ function syncAssignedCameras(assigned) {
 //#region src/App.svelte
 init_client();
 init_index_client();
+var root_2 = /* @__PURE__ */ from_html(`<div class="shrink-0 h-full overflow-hidden transition-[width] duration-300 ease-in-out"><div><!></div></div>`);
 var root_3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_7 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" role="dialog" tabindex="-1" aria-label="Keyboard Shortcuts"><div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full mx-4 max-h-[85vh] flex flex-col" role="document"><div class="flex items-center justify-between px-6 pt-5 pb-3 border-b border-gray-100"><div class="flex items-center gap-2"><svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"></path></svg> <h2 class="text-lg font-bold text-slate-800">Keyboard Shortcuts</h2></div> <div class="flex items-center gap-2"><button class="text-xs px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-800 transition-colors flex items-center gap-1.5" aria-label="Copy all shortcuts"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg> Copy All</button> <button class="text-gray-400 hover:text-gray-600 text-xl leading-none" aria-label="Close shortcuts">✕</button></div></div> <div class="overflow-y-auto px-6 py-4"><div class="grid grid-cols-2 gap-x-8 gap-y-0 text-sm"><div><div class="flex items-center gap-2 mb-2"><span class="text-xs font-bold uppercase tracking-wider text-indigo-500">Tools</span> <div class="flex-1 h-px bg-indigo-100"></div></div> <div class="space-y-1.5 mb-5"><div class="flex justify-between"><span class="text-gray-600">Select tool</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">V</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Wall tool</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">W</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Door tool</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">D</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Pan mode</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">H</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Measure tool</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">M</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Annotate tool</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">N</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Text tool</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">T</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Toggle snap</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">S</kbd></div></div> <div class="flex items-center gap-2 mb-2"><span class="text-xs font-bold uppercase tracking-wider text-amber-500">Edit</span> <div class="flex-1 h-px bg-amber-100"></div></div> <div class="space-y-1.5 mb-5"><div class="flex justify-between"><span class="text-gray-600">Undo</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+Z</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Redo</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+Y</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Copy</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+C</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Paste</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+V</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Select all</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+A</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Deselect all</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+D</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Save project</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+S</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Cancel / Deselect</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Esc</kbd></div></div></div> <div><div class="flex items-center gap-2 mb-2"><span class="text-xs font-bold uppercase tracking-wider text-emerald-500">Elements</span> <div class="flex-1 h-px bg-emerald-100"></div></div> <div class="space-y-1.5 mb-5"><div class="flex justify-between"><span class="text-gray-600">Rotate element</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">R</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Delete selected</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Del</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Lock / Unlock</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+L</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Group selection</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+G</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Ungroup</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Ctrl+⇧+G</kbd></div></div> <div class="flex items-center gap-2 mb-2"><span class="text-xs font-bold uppercase tracking-wider text-blue-500">View</span> <div class="flex-1 h-px bg-blue-100"></div></div> <div class="space-y-1.5 mb-5"><div class="flex justify-between"><span class="text-gray-600">Toggle 2D / 3D</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Tab</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Zoom to fit</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">F</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Toggle grid</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">G</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Toggle layers</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">L</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Show shortcuts</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">?</kbd></div></div> <div class="flex items-center gap-2 mb-2"><span class="text-xs font-bold uppercase tracking-wider text-purple-500">Canvas</span> <div class="flex-1 h-px bg-purple-100"></div></div> <div class="space-y-1.5 mb-5"><div class="flex justify-between"><span class="text-gray-600">Zoom in / out</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Scroll</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Zoom in / out</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">+ / −</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Pan canvas</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Space+Drag</kbd></div></div> <div class="flex items-center gap-2 mb-2"><span class="text-xs font-bold uppercase tracking-wider text-rose-500">Walls</span> <div class="flex-1 h-px bg-rose-100"></div></div> <div class="space-y-1.5"><div class="flex justify-between"><span class="text-gray-600">Finish wall chain</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">Dbl-click</kbd></div> <div class="flex justify-between"><span class="text-gray-600">Close wall loop</span><kbd class="px-1.5 py-0.5 bg-gray-100 rounded text-xs font-mono text-slate-700 border border-gray-200">C</kbd></div></div></div></div></div> <div class="px-6 py-3 border-t border-gray-100 text-center"><p class="text-xs text-gray-400">Press <kbd class="px-1 py-0.5 bg-gray-100 rounded text-xs font-mono border border-gray-200">?</kbd> or <kbd class="px-1 py-0.5 bg-gray-100 rounded text-xs font-mono border border-gray-200">Esc</kbd> to close</p></div></div></div>`);
-var root = /* @__PURE__ */ from_html(`<div class="h-full flex flex-col overflow-hidden"><!> <div class="flex flex-1 overflow-hidden"><!> <div class="flex-1 min-w-0 relative"><!></div> <!> <!></div></div> <!> <!> <!> <!> <!>`, 1);
+var root = /* @__PURE__ */ from_html(`<div class="h-full flex flex-col overflow-hidden"><!> <div class="flex flex-1 overflow-hidden relative"><!> <div class="flex-1 min-w-0 relative"><!></div> <!> <!></div></div> <!> <!> <!> <!> <!>`, 1);
 function App($$anchor, $$props) {
 	var _$$props$stores, _$$props$stores2;
 	push($$props, true);
 	let showLayers = /* @__PURE__ */ state(false);
+	let showBuildSidebar = /* @__PURE__ */ state(true);
 	let floorData = /* @__PURE__ */ state(null);
 	let config = /* @__PURE__ */ state(proxy({ ...DEFAULT_CONFIG }));
 	let activeFloorId = /* @__PURE__ */ state(null);
@@ -69962,6 +70182,12 @@ function App($$anchor, $$props) {
 			},
 			get onDispatch() {
 				return $$props.onDispatch;
+			},
+			get showBuildSidebar() {
+				return get(showBuildSidebar);
+			},
+			set showBuildSidebar($$value) {
+				set(showBuildSidebar, $$value, true);
 			}
 		});
 	};
@@ -69971,7 +70197,9 @@ function App($$anchor, $$props) {
 	var div_1 = sibling(node, 2);
 	var node_1 = child(div_1);
 	var consequent_1 = ($$anchor) => {
-		BuildPanel($$anchor, {
+		var div_2 = root_2();
+		var div_3 = child(div_2);
+		BuildPanel(child(div_3), {
 			get showHelp() {
 				return get(showHelp);
 			},
@@ -69991,16 +70219,24 @@ function App($$anchor, $$props) {
 				set(showUndoHistory, $$value, true);
 			}
 		});
+		reset(div_3);
+		reset(div_2);
+		template_effect(() => {
+			set_style(div_2, `width: ${get(showBuildSidebar) ? "16rem" : "0"};`);
+			set_attribute(div_2, "aria-hidden", !get(showBuildSidebar));
+			set_class(div_3, 1, `w-64 h-full ${get(showBuildSidebar) ? "" : "pointer-events-none"}`);
+		});
+		append($$anchor, div_2);
 	};
 	if_block(node_1, ($$render) => {
 		var _$$get;
 		if (get(mode) === "2d" && !((_$$get = get(config)) === null || _$$get === void 0 ? void 0 : _$$get.viewOnly)) $$render(consequent_1);
 	});
-	var div_2 = sibling(node_1, 2);
-	var node_2 = child(div_2);
+	var div_4 = sibling(node_1, 2);
+	var node_3 = child(div_4);
 	var consequent_3 = ($$anchor) => {
-		var fragment_3 = root_3();
-		var node_3 = first_child(fragment_3);
+		var fragment_2 = root_3();
+		var node_4 = first_child(fragment_2);
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => {
 				var _$$get2;
@@ -70054,7 +70290,7 @@ function App($$anchor, $$props) {
 				var _$$get14;
 				return (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.floorPlateBackground;
 			});
-			FloorPlanCanvas(node_3, {
+			FloorPlanCanvas(node_4, {
 				get viewOnly() {
 					return get($0);
 				},
@@ -70096,27 +70332,27 @@ function App($$anchor, $$props) {
 				}
 			});
 		}
-		var node_4 = sibling(node_3, 2);
+		var node_5 = sibling(node_4, 2);
 		var consequent_2 = ($$anchor) => {
 			AlignmentToolbar($$anchor, {});
 		};
-		if_block(node_4, ($$render) => {
+		if_block(node_5, ($$render) => {
 			if (!get(config).viewOnly) $$render(consequent_2);
 		});
-		append($$anchor, fragment_3);
+		append($$anchor, fragment_2);
 	};
-	if_block(node_2, ($$render) => {
+	if_block(node_3, ($$render) => {
 		if (get(mode) === "2d") $$render(consequent_3);
 	});
-	reset(div_2);
-	var node_5 = sibling(div_2, 2);
+	reset(div_4);
+	var node_6 = sibling(div_4, 2);
 	var consequent_4 = ($$anchor) => {
 		LayersPanel($$anchor, {});
 	};
-	if_block(node_5, ($$render) => {
+	if_block(node_6, ($$render) => {
 		if (get(showLayers) && get(mode) === "2d" && !get(config).viewOnly) $$render(consequent_4);
 	});
-	var node_6 = sibling(node_5, 2);
+	var node_7 = sibling(node_6, 2);
 	var consequent_5 = ($$anchor) => {
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => get(mode) === "3d");
@@ -70141,13 +70377,13 @@ function App($$anchor, $$props) {
 			});
 		}
 	};
-	if_block(node_6, ($$render) => {
+	if_block(node_7, ($$render) => {
 		if (!get(config).viewOnly) $$render(consequent_5);
 	});
 	reset(div_1);
 	reset(div);
-	var node_7 = sibling(div, 2);
-	UndoHistoryPanel(node_7, {
+	var node_8 = sibling(div, 2);
+	UndoHistoryPanel(node_8, {
 		get visible() {
 			return get(showUndoHistory);
 		},
@@ -70155,25 +70391,25 @@ function App($$anchor, $$props) {
 			set(showUndoHistory, $$value, true);
 		}
 	});
-	var node_8 = sibling(node_7, 2);
+	var node_9 = sibling(node_8, 2);
 	var consequent_6 = ($$anchor) => {
-		var div_3 = root_7();
-		var div_4 = child(div_3);
-		var div_5 = child(div_4);
-		var div_6 = sibling(child(div_5), 2);
-		var button = child(div_6);
+		var div_5 = root_7();
+		var div_6 = child(div_5);
+		var div_7 = child(div_6);
+		var div_8 = sibling(child(div_7), 2);
+		var button = child(div_8);
 		var button_1 = sibling(button, 2);
+		reset(div_8);
+		reset(div_7);
+		next(4);
 		reset(div_6);
 		reset(div_5);
-		next(4);
-		reset(div_4);
-		reset(div_3);
-		delegated("click", div_3, () => set(showHelp, false));
-		delegated("keydown", div_3, (e) => {
+		delegated("click", div_5, () => set(showHelp, false));
+		delegated("keydown", div_5, (e) => {
 			if (e.key === "Escape") set(showHelp, false);
 		});
-		delegated("click", div_4, (e) => e.stopPropagation());
-		delegated("keydown", div_4, (e) => e.stopPropagation());
+		delegated("click", div_6, (e) => e.stopPropagation());
+		delegated("keydown", div_6, (e) => e.stopPropagation());
 		delegated("click", button, () => {
 			const text = [
 				"KEYBOARD SHORTCUTS — Open3D Floorplan",
@@ -70224,13 +70460,13 @@ function App($$anchor, $$props) {
 			navigator.clipboard.writeText(text);
 		});
 		delegated("click", button_1, () => set(showHelp, false));
-		append($$anchor, div_3);
+		append($$anchor, div_5);
 	};
-	if_block(node_8, ($$render) => {
+	if_block(node_9, ($$render) => {
 		if (get(showHelp)) $$render(consequent_6);
 	});
-	var node_9 = sibling(node_8, 2);
-	CommandPalette(node_9, {
+	var node_10 = sibling(node_9, 2);
+	CommandPalette(node_10, {
 		get open() {
 			return get(commandPaletteOpen);
 		},
@@ -70238,8 +70474,8 @@ function App($$anchor, $$props) {
 			set(commandPaletteOpen, $$value, true);
 		}
 	});
-	var node_10 = sibling(node_9, 2);
-	PrintLayout(node_10, {
+	var node_11 = sibling(node_10, 2);
+	PrintLayout(node_11, {
 		get open() {
 			return get(printOpen);
 		},
@@ -70247,7 +70483,7 @@ function App($$anchor, $$props) {
 			set(printOpen, $$value, true);
 		}
 	});
-	OnboardingTooltip(sibling(node_10, 2), {});
+	OnboardingTooltip(sibling(node_11, 2), {});
 	append($$anchor, fragment);
 	pop();
 }