floor-editor-ts 1.3.8 → 1.3.10

package/dist/floor-editor.es.js

@@ -5963,6 +5963,108 @@ if (typeof window !== "undefined") {
 	var _window$__svelte, _window$__svelte$v, _window, _window$__svelte2;
 	((_window$__svelte$v = (_window$__svelte = (_window$__svelte2 = (_window = window).__svelte) !== null && _window$__svelte2 !== void 0 ? _window$__svelte2 : _window.__svelte = {}).v) !== null && _window$__svelte$v !== void 0 ? _window$__svelte$v : _window$__svelte.v = /* @__PURE__ */ new Set()).add("5");
 }
+//#endregion
+//#region src/lib/utils/zoneGeometry.ts
+var ZONE_COLOR_PALETTE = [
+	"#F97316",
+	"#22C55E",
+	"#3B82F6",
+	"#EF4444",
+	"#A855F7",
+	"#EAB308"
+];
+var DEFAULT_ZONE_FILL_OPACITY = .1;
+function nextZoneColor(existingCount) {
+	return ZONE_COLOR_PALETTE[existingCount % ZONE_COLOR_PALETTE.length];
+}
+/** Resolve area label + color from host assigned camera fields. */
+function resolveCameraAreaStyle(source, fallbackIndex = 0) {
+	var _source$props$area, _source$props, _source$props$areaCol, _source$props2;
+	const areaRaw = (_source$props$area = source === null || source === void 0 || (_source$props = source.props) === null || _source$props === void 0 ? void 0 : _source$props.area) !== null && _source$props$area !== void 0 ? _source$props$area : source && "area" in source ? source.area : void 0;
+	const colorRaw = (_source$props$areaCol = source === null || source === void 0 || (_source$props2 = source.props) === null || _source$props2 === void 0 ? void 0 : _source$props2.areaColor) !== null && _source$props$areaCol !== void 0 ? _source$props$areaCol : source && "areaColor" in source ? source.areaColor : void 0;
+	return {
+		name: String(areaRaw !== null && areaRaw !== void 0 ? areaRaw : "").trim() || "Area",
+		color: String(colorRaw !== null && colorRaw !== void 0 ? colorRaw : "").trim() || nextZoneColor(fallbackIndex)
+	};
+}
+function rectPoints(x1, y1, x2, y2) {
+	const minX = Math.min(x1, x2);
+	const maxX = Math.max(x1, x2);
+	const minY = Math.min(y1, y2);
+	const maxY = Math.max(y1, y2);
+	return [
+		{
+			x: minX,
+			y: minY
+		},
+		{
+			x: maxX,
+			y: minY
+		},
+		{
+			x: maxX,
+			y: maxY
+		},
+		{
+			x: minX,
+			y: maxY
+		}
+	];
+}
+/** Isosceles triangle pointing up, centered at `c`. */
+function trianglePoints(c, size = 200) {
+	const h = size * .866;
+	return [
+		{
+			x: c.x,
+			y: c.y - h / 2
+		},
+		{
+			x: c.x + size / 2,
+			y: c.y + h / 2
+		},
+		{
+			x: c.x - size / 2,
+			y: c.y + h / 2
+		}
+	];
+}
+function zoneBounds(points) {
+	if (!points.length) return null;
+	let minX = points[0].x, minY = points[0].y, maxX = points[0].x, maxY = points[0].y;
+	for (let i = 1; i < points.length; i++) {
+		const p = points[i];
+		if (p.x < minX) minX = p.x;
+		if (p.y < minY) minY = p.y;
+		if (p.x > maxX) maxX = p.x;
+		if (p.y > maxY) maxY = p.y;
+	}
+	return {
+		minX,
+		minY,
+		maxX,
+		maxY
+	};
+}
+function translatePoints(points, dx, dy) {
+	return points.map((p) => ({
+		x: p.x + dx,
+		y: p.y + dy
+	}));
+}
+/** Axis-aligned resize: keep opposite corner fixed when dragging corner index. */
+function resizeRectCorner(points, cornerIndex, to) {
+	if (points.length !== 4) {
+		const next = points.map((p) => ({ ...p }));
+		if (next[cornerIndex]) next[cornerIndex] = { ...to };
+		return next;
+	}
+	const fixed = points[(cornerIndex + 2) % 4];
+	return rectPoints(fixed.x, fixed.y, to.x, to.y);
+}
+function isNearPoint(a, b, threshold) {
+	return Math.hypot(a.x - b.x, a.y - b.y) <= threshold;
+}
 /** True while host → package assignedCameras sync is mutating furniture. */
 var assignedCamerasSyncing = false;
 function setAssignedCamerasSyncing(value) {
@@ -6076,6 +6178,7 @@ function createDefaultFloor(level = 0) {
 		measurements: [],
 		annotations: [],
 		textAnnotations: [],
+		zones: [],
 		groups: []
 	};
 }
@@ -6097,6 +6200,8 @@ var activeFloor = derived$1(currentProject, ($p) => {
 	return (_ref = (_$p$floors$find = $p.floors.find((f) => f.id === $p.activeFloorId)) !== null && _$p$floors$find !== void 0 ? _$p$floors$find : $p.floors[0]) !== null && _ref !== void 0 ? _ref : null;
 });
 var selectedTool = writable("select");
+/** Subtype when selectedTool === 'zone' */
+var placingZoneShape = writable("rectangle");
 var snapEnabled = writable(true);
 /** When true, left-click drag pans the canvas instead of selecting */
 var panMode = writable(false);
@@ -6537,6 +6642,7 @@ function removeElement(id) {
 		if (f.stairs) f.stairs = f.stairs.filter((s) => s.id !== 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);
+		if (f.zones) f.zones = f.zones.filter((z) => z.id !== id);
 	}, "Deleted element");
 	if ((removedCamera === null || removedCamera === void 0 ? void 0 : removedCamera.serial) && !isAssignedCamerasSyncing()) {
 		const props = cameraItemToCallbackProps(removedCamera);
@@ -6639,6 +6745,7 @@ function addFloor(name, copyCurrentLayout = false) {
 		measurements: [],
 		annotations: [],
 		textAnnotations: [],
+		zones: [],
 		groups: []
 	};
 	if (copyCurrentLayout) {
@@ -6947,6 +7054,99 @@ function moveTextAnnotation(id, position) {
 	p.updatedAt = /* @__PURE__ */ new Date();
 	currentProject.set({ ...p });
 }
+function addZone(shape, points, nameOrOpts, colorArg) {
+	const opts = typeof nameOrOpts === "object" && nameOrOpts ? nameOrOpts : {
+		name: nameOrOpts,
+		color: colorArg
+	};
+	const id = uid$1();
+	mutate((f) => {
+		var _opts$cameraSerial, _opts$name, _opts$fillOpacity;
+		if (!f.zones) f.zones = [];
+		const count = f.zones.length;
+		const serial = ((_opts$cameraSerial = opts.cameraSerial) === null || _opts$cameraSerial === void 0 ? void 0 : _opts$cameraSerial.trim()) || void 0;
+		f.zones.push({
+			id,
+			name: ((_opts$name = opts.name) === null || _opts$name === void 0 ? void 0 : _opts$name.trim()) || `Area ${count + 1}`,
+			shape,
+			points: points.map((p) => ({
+				x: p.x,
+				y: p.y
+			})),
+			color: opts.color || nextZoneColor(count),
+			fillOpacity: (_opts$fillOpacity = opts.fillOpacity) !== null && _opts$fillOpacity !== void 0 ? _opts$fillOpacity : .1,
+			...serial ? { cameraSerial: serial } : {}
+		});
+	}, "Added area");
+	return id;
+}
+/**
+* Create area for a camera, or replace geometry if that camera already has an area.
+*/
+function upsertCameraZone(shape, points, opts) {
+	var _floor$zones;
+	const serial = opts.cameraSerial.trim();
+	const p = get$1(currentProject);
+	const floor = p === null || p === void 0 ? void 0 : p.floors.find((f) => f.id === p.activeFloorId);
+	const existing = floor === null || floor === void 0 || (_floor$zones = floor.zones) === null || _floor$zones === void 0 ? void 0 : _floor$zones.find((z) => z.cameraSerial === serial);
+	if (existing) {
+		var _opts$name2, _opts$fillOpacity2;
+		updateZone(existing.id, {
+			shape,
+			points,
+			name: ((_opts$name2 = opts.name) === null || _opts$name2 === void 0 ? void 0 : _opts$name2.trim()) || existing.name,
+			color: opts.color || existing.color,
+			cameraSerial: serial,
+			fillOpacity: (_opts$fillOpacity2 = opts.fillOpacity) !== null && _opts$fillOpacity2 !== void 0 ? _opts$fillOpacity2 : existing.fillOpacity
+		});
+		return existing.id;
+	}
+	return addZone(shape, points, {
+		...opts,
+		cameraSerial: serial
+	});
+}
+function updateZone(id, updates) {
+	mutate((f) => {
+		if (!f.zones) return;
+		const z = f.zones.find((z) => z.id === id);
+		if (!z) return;
+		if (updates.name != null) z.name = updates.name;
+		if (updates.color != null) z.color = updates.color;
+		if (updates.fillOpacity != null) z.fillOpacity = updates.fillOpacity;
+		if (updates.shape != null) z.shape = updates.shape;
+		if (updates.cameraSerial != null) {
+			const s = String(updates.cameraSerial).trim();
+			if (s) z.cameraSerial = s;
+			else delete z.cameraSerial;
+		}
+		if (updates.points) z.points = updates.points.map((p) => ({
+			x: p.x,
+			y: p.y
+		}));
+	}, "Updated area");
+}
+/** Live drag without undo snapshot (commit with updateZone / endUndoGroup). */
+function moveZonePoints(id, points) {
+	const p = get$1(currentProject);
+	if (!p) return;
+	const floor = p.floors.find((f) => f.id === p.activeFloorId);
+	if (!(floor === null || floor === void 0 ? void 0 : floor.zones)) return;
+	const z = floor.zones.find((z) => z.id === id);
+	if (!z) return;
+	z.points = points.map((pt) => ({
+		x: pt.x,
+		y: pt.y
+	}));
+	p.updatedAt = /* @__PURE__ */ new Date();
+	currentProject.set({ ...p });
+}
+function removeZone(id) {
+	mutate((f) => {
+		if (!f.zones) return;
+		f.zones = f.zones.filter((z) => z.id !== id);
+	}, "Deleted area");
+}
 var layerVisibility = writable({
 	walls: true,
 	doors: true,
@@ -6956,7 +7156,8 @@ var layerVisibility = writable({
 	columns: true,
 	guides: true,
 	measurements: true,
-	annotations: true
+	annotations: true,
+	zones: true
 });
 function toggleFurnitureLock(id) {
 	mutate((f) => {
@@ -7204,6 +7405,8 @@ function assignedCameraToProps(cam) {
 	return props;
 }
 function formatCameraPropLabel(key) {
+	if (key === "area") return "Area";
+	if (key === "areaColor") return "Area Color";
 	return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()).trim();
 }
 var DEFAULT_CONFIG = {
@@ -56376,10 +56579,10 @@ var themePreference = createThemeStore();
 //#endregion
 //#region src/lib/components/toolbar/SettingsDialog.svelte
 init_client();
-var root_2$13 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
-var root_3$12 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
-var root_4$11 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
-var root_5$8 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
+var root_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_3$11 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
+var root_4$10 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
+var root_5$7 = /* @__PURE__ */ from_html(`<div class="absolute bottom-0 left-0 right-0 h-0.5 bg-slate-700 dark:bg-slate-300 rounded-t"></div>`);
 var root_6$5 = /* @__PURE__ */ from_html(`<div class="space-y-4"><label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Project Name</span> <input type="text" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Untitled Project"/></label> <label class="block"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Description</span> <textarea rows="3" class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none resize-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="Add a description for this project..."></textarea></label></div>`);
 var root_7$6 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between mb-5"><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Metrics unit</span> <div class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden"><button>m, cm</button> <button>ft, inch</button></div></div> <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl divide-y divide-gray-200 dark:divide-gray-600"><label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">External Dimensions</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
@@ -56387,11 +56590,11 @@ var root_7$6 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Extension Lines</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <label class="flex items-center justify-between px-4 py-3.5 cursor-pointer"><span class="text-sm text-gray-700">Object Distance</span> <input type="checkbox" class="w-10 h-5 rounded-full appearance-none cursor-pointer bg-gray-300 checked:bg-slate-700 relative transition-colors
                   before:content-[''] before:absolute before:w-4 before:h-4 before:rounded-full before:bg-white before:top-0.5 before:left-0.5 before:transition-transform checked:before:translate-x-5"/></label> <div class="flex items-center justify-between px-4 py-3.5"><span class="text-sm text-gray-700">Line Color</span> <div class="flex items-center gap-2"><button style="background-color: #ffffff" aria-label="White line color"></button> <span class="text-gray-300">|</span> <button style="background-color: #1e293b" aria-label="Dark line color"></button></div></div></div>`, 1);
-var root_9$3 = /* @__PURE__ */ from_html(`<button><span class="text-2xl"> </span> <span class="text-xs font-medium text-gray-700 dark:text-gray-300"> </span></button>`);
-var root_8$3 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-3">Theme</span> <div class="flex gap-3"></div></div></div>`);
-var root_11$3 = /* @__PURE__ */ from_html(`<button class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Remove</button>`);
+var root_9$4 = /* @__PURE__ */ from_html(`<button><span class="text-2xl"> </span> <span class="text-xs font-medium text-gray-700 dark:text-gray-300"> </span></button>`);
+var root_8$4 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-3">Theme</span> <div class="flex gap-3"></div></div></div>`);
+var root_11$4 = /* @__PURE__ */ from_html(`<button class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Remove</button>`);
 var root_12$3 = /* @__PURE__ */ from_html(`<button class="px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">Remove</button>`);
-var root_10$3 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">Gemini API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Required for AI-powered photorealistic rendering. Your key is stored locally in your browser only - never sent to our servers.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="AIza..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get a Gemini key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" class="text-blue-500 hover:underline">Google AI Studio</a></li> <li>Click "Create API Key"</li> <li>Copy and paste it above</li></ol></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">OpenAI API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Optional — enables OpenAI image generation as an alternative to Gemini. Stored locally only.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="sk-..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div> <div class="mt-3"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get an OpenAI key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" class="text-blue-500 hover:underline">OpenAI Platform</a></li> <li>Click "Create new secret key"</li> <li>Copy and paste it above</li></ol></div></div></div>`);
+var root_10$4 = /* @__PURE__ */ from_html(`<div class="space-y-4"><div><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">Gemini API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Required for AI-powered photorealistic rendering. Your key is stored locally in your browser only - never sent to our servers.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="AIza..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get a Gemini key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" class="text-blue-500 hover:underline">Google AI Studio</a></li> <li>Click "Create API Key"</li> <li>Copy and paste it above</li></ol></div> <div class="border-t border-gray-200 dark:border-gray-700 pt-4"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">OpenAI API Key</span> <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Optional — enables OpenAI image generation as an alternative to Gemini. Stored locally only.</p> <div class="flex gap-2"><div class="relative flex-1"><input class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-500 focus:border-slate-500 outline-none bg-white dark:bg-gray-700 dark:text-gray-100" placeholder="sk-..."/> <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-sm"> </button></div></div> <div class="flex gap-2 mt-3"><button class="px-4 py-2 text-sm font-medium bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition-colors"> </button> <!></div> <div class="mt-3"><span class="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">How to get an OpenAI key</span> <ol class="text-xs text-gray-500 dark:text-gray-400 space-y-1 list-decimal list-inside"><li>Go to <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" class="text-blue-500 hover:underline">OpenAI Platform</a></li> <li>Click "Create new secret key"</li> <li>Copy and paste it above</li></ol></div></div></div>`);
 var root_1$13 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" role="dialog" tabindex="-1" aria-label="Settings"><div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-[420px] max-h-[80vh] flex flex-col" role="document"><div class="flex items-center justify-between px-5 pt-4 pb-2"><h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Settings</h2> <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none" aria-label="Close settings">✕</button></div> <div class="flex border-b border-gray-200 dark:border-gray-700 px-5"><button>Project <!></button> <button>Dimensions <!></button> <button>Appearance <!></button> <button>AI <!></button></div> <div class="p-5 overflow-y-auto"><!></div></div></div>`);
 function SettingsDialog($$anchor, $$props) {
 	push($$props, true);
@@ -56504,7 +56707,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$13());
+			append($$anchor, root_2$12());
 		};
 		if_block(node_1, ($$render) => {
 			if (get(activeTab) === "project") $$render(consequent);
@@ -56513,7 +56716,7 @@ function SettingsDialog($$anchor, $$props) {
 		var button_2 = sibling(button_1, 2);
 		var node_2 = sibling(child(button_2));
 		var consequent_1 = ($$anchor) => {
-			append($$anchor, root_3$12());
+			append($$anchor, root_3$11());
 		};
 		if_block(node_2, ($$render) => {
 			if (get(activeTab) === "dimensions") $$render(consequent_1);
@@ -56522,7 +56725,7 @@ function SettingsDialog($$anchor, $$props) {
 		var button_3 = sibling(button_2, 2);
 		var node_3 = sibling(child(button_3));
 		var consequent_2 = ($$anchor) => {
-			append($$anchor, root_4$11());
+			append($$anchor, root_4$10());
 		};
 		if_block(node_3, ($$render) => {
 			if (get(activeTab) === "appearance") $$render(consequent_2);
@@ -56531,7 +56734,7 @@ function SettingsDialog($$anchor, $$props) {
 		var button_4 = sibling(button_3, 2);
 		var node_4 = sibling(child(button_4));
 		var consequent_3 = ($$anchor) => {
-			append($$anchor, root_5$8());
+			append($$anchor, root_5$7());
 		};
 		if_block(node_4, ($$render) => {
 			if (get(activeTab) === "ai") $$render(consequent_3);
@@ -56618,7 +56821,7 @@ function SettingsDialog($$anchor, $$props) {
 			append($$anchor, fragment_1);
 		};
 		var consequent_6 = ($$anchor) => {
-			var div_15 = root_8$3();
+			var div_15 = root_8$4();
 			var div_16 = child(div_15);
 			var div_17 = sibling(child(div_16), 2);
 			each(div_17, 20, () => [
@@ -56642,7 +56845,7 @@ function SettingsDialog($$anchor, $$props) {
 				let value = () => get($$array)[0];
 				let icon = () => get($$array)[1];
 				let label = () => get($$array)[2];
-				var button_9 = root_9$3();
+				var button_9 = root_9$4();
 				var span = child(button_9);
 				var text = child(span, true);
 				reset(span);
@@ -56664,7 +56867,7 @@ function SettingsDialog($$anchor, $$props) {
 			append($$anchor, div_15);
 		};
 		var consequent_9 = ($$anchor) => {
-			var div_18 = root_10$3();
+			var div_18 = root_10$4();
 			var div_19 = child(div_18);
 			var div_20 = sibling(child(div_19), 4);
 			var div_21 = child(div_20);
@@ -56681,7 +56884,7 @@ function SettingsDialog($$anchor, $$props) {
 			reset(button_11);
 			var node_6 = sibling(button_11, 2);
 			var consequent_7 = ($$anchor) => {
-				var button_12 = root_11$3();
+				var button_12 = root_11$4();
 				delegated("click", button_12, clearGeminiKey);
 				append($$anchor, button_12);
 			};
@@ -56784,11 +56987,11 @@ delegate([
 //#endregion
 //#region src/lib/components/sidebar/AreaSummaryPanel.svelte
 init_client();
-var root_2$12 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between text-xs bg-gray-50 rounded px-2 py-1.5"><span class="text-gray-700"> <span class="text-gray-400"> </span></span> <span class="font-medium text-gray-800"> </span></div>`);
+var root_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_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>`);
-var root_5$7 = /* @__PURE__ */ from_html(`<p class="text-xs text-gray-400 text-center py-4">No rooms detected yet.<br/>Draw walls to create rooms.</p>`);
+var root_4$9 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1.5 text-xs px-1 py-1"><div class="flex-1 min-w-0"><div class="flex items-center justify-between"><span class="text-gray-700 truncate"> </span> <span class="text-gray-500 ml-1 shrink-0"> </span></div> <div class="w-full bg-gray-200 rounded-full h-1 mt-0.5"><div class="bg-blue-400 h-1 rounded-full"></div></div></div> <span class="text-[10px] text-gray-400 w-8 text-right shrink-0"> </span></div>`);
+var root_3$10 = /* @__PURE__ */ from_html(`<div><h4 class="text-xs font-semibold text-gray-500 uppercase mb-1.5">Room Breakdown</h4> <div class="space-y-0.5"></div></div>`);
+var root_5$6 = /* @__PURE__ */ from_html(`<p class="text-xs text-gray-400 text-center py-4">No rooms detected yet.<br/>Draw walls to create rooms.</p>`);
 var root$6 = /* @__PURE__ */ from_html(`<div class="space-y-3"><div class="grid grid-cols-2 gap-2"><div class="bg-blue-50 rounded-lg p-2 text-center"><div class="text-lg font-bold text-blue-700"> </div> <div class="text-[10px] text-blue-500">Rooms</div></div> <div class="bg-green-50 rounded-lg p-2 text-center"><div class="text-lg font-bold text-green-700"> </div> <div class="text-[10px] text-green-500">Total Area</div></div> <div class="bg-amber-50 rounded-lg p-2 text-center"><div class="text-sm font-bold text-amber-700"> </div> <div class="text-[10px] text-amber-500">Doors / Windows</div></div> <div class="bg-purple-50 rounded-lg p-2 text-center"><div class="text-sm font-bold text-purple-700"> </div> <div class="text-[10px] text-purple-500">Wall Length</div></div></div> <!> <!></div>`);
 function AreaSummaryPanel($$anchor, $$props) {
 	push($$props, true);
@@ -56905,7 +57108,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$12();
+			var div_12 = root_2$11();
 			var span = child(div_12);
 			var text_4 = child(span);
 			var span_1 = sibling(text_4);
@@ -56933,11 +57136,11 @@ function AreaSummaryPanel($$anchor, $$props) {
 	});
 	var node_1 = sibling(node, 2);
 	var consequent_1 = ($$anchor) => {
-		var div_13 = root_3$11();
+		var div_13 = root_3$10();
 		var div_14 = sibling(child(div_13), 2);
 		each(div_14, 21, () => get(allRooms), index$1, ($$anchor, room) => {
 			const pct = /* @__PURE__ */ user_derived(() => get(totalArea) > 0 ? get(room).area / get(totalArea) * 100 : 0);
-			var div_15 = root_4$10();
+			var div_15 = root_4$9();
 			var div_16 = child(div_15);
 			var div_17 = child(div_16);
 			var span_3 = child(div_17);
@@ -56972,7 +57175,7 @@ function AreaSummaryPanel($$anchor, $$props) {
 		append($$anchor, div_13);
 	};
 	var alternate = ($$anchor) => {
-		append($$anchor, root_5$7());
+		append($$anchor, root_5$6());
 	};
 	if_block(node_1, ($$render) => {
 		if (get(allRooms).length > 0) $$render(consequent_1);
@@ -57133,10 +57336,10 @@ async function autoSave(onDispatch) {
 //#endregion
 //#region src/lib/components/toolbar/VersionHistoryPanel.svelte
 init_client();
-var root_2$11 = /* @__PURE__ */ from_html(`<p class="text-sm text-gray-400 text-center py-8">No snapshots yet.<br/>Versions are saved automatically every 5 minutes.</p>`);
-var root_4$9 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between py-2 px-2 rounded-lg hover:bg-gray-50 group transition-colors"><div class="flex-1 min-w-0"><div class="text-sm font-medium text-gray-700 truncate"> </div> <div class="text-xs text-gray-400"> </div></div> <button class="text-xs px-2.5 py-1 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors opacity-0 group-hover:opacity-100 font-medium shrink-0 ml-2">Restore</button></div>`);
-var root_3$10 = /* @__PURE__ */ from_html(`<div class="space-y-1"></div>`);
-var root_5$6 = /* @__PURE__ */ from_html(`<div class="px-4 py-2 border-t border-gray-100"><button class="text-xs text-red-400 hover:text-red-600 transition-colors">Clear all versions</button></div>`);
+var root_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_4$8 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-between py-2 px-2 rounded-lg hover:bg-gray-50 group transition-colors"><div class="flex-1 min-w-0"><div class="text-sm font-medium text-gray-700 truncate"> </div> <div class="text-xs text-gray-400"> </div></div> <button class="text-xs px-2.5 py-1 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors opacity-0 group-hover:opacity-100 font-medium shrink-0 ml-2">Restore</button></div>`);
+var root_3$9 = /* @__PURE__ */ from_html(`<div class="space-y-1"></div>`);
+var root_5$5 = /* @__PURE__ */ from_html(`<div class="px-4 py-2 border-t border-gray-100"><button class="text-xs text-red-400 hover:text-red-600 transition-colors">Clear all versions</button></div>`);
 var root_1$11 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/40 z-50 flex items-center justify-center"><div class="bg-white rounded-xl shadow-2xl w-96 max-h-[70vh] flex flex-col"><div class="flex items-center justify-between px-4 py-3 border-b border-gray-100"><h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> Version History</h2> <button class="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div> <div class="flex-1 overflow-y-auto px-4 py-2"><!></div> <!></div></div>`);
 function VersionHistoryPanel($$anchor, $$props) {
 	push($$props, true);
@@ -57183,13 +57386,13 @@ function VersionHistoryPanel($$anchor, $$props) {
 		var div_3 = sibling(div_2, 2);
 		var node_1 = child(div_3);
 		var consequent = ($$anchor) => {
-			append($$anchor, root_2$11());
+			append($$anchor, root_2$10());
 		};
 		var alternate = ($$anchor) => {
-			var div_4 = root_3$10();
+			var div_4 = root_3$9();
 			each(div_4, 21, () => [...get(snapshots)].reverse(), index$1, ($$anchor, snap, i) => {
 				const realIndex = /* @__PURE__ */ user_derived(() => get(snapshots).length - 1 - i);
-				var div_5 = root_4$9();
+				var div_5 = root_4$8();
 				var div_6 = child(div_5);
 				var div_7 = child(div_6);
 				var text = child(div_7, true);
@@ -57217,7 +57420,7 @@ function VersionHistoryPanel($$anchor, $$props) {
 		reset(div_3);
 		var node_2 = sibling(div_3, 2);
 		var consequent_1 = ($$anchor) => {
-			var div_9 = root_5$6();
+			var div_9 = root_5$5();
 			var button_2 = child(div_9);
 			reset(div_9);
 			delegated("click", button_2, onClearAll);
@@ -57249,21 +57452,21 @@ delegate(["click", "keydown"]);
 init_client();
 init_index_client();
 init_onboarding_svelte();
-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(`<button aria-label="Snap to Grid"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></button>`);
+var root_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_3$8 = /* @__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$7 = /* @__PURE__ */ from_html(`<button> </button>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<button aria-label="Snap to Grid"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg></button>`);
 var root_6$4 = /* @__PURE__ */ from_html(`<div class="flex bg-white/15 rounded-full p-0.5 shrink-0"><button title="Select mode (V)" aria-label="Select mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg></button> <button title="Pan mode (H)" aria-label="Pan mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v1"></path><path d="M14 10V4a2 2 0 0 0-4 0v2"></path><path d="M10 10.5V6a2 2 0 0 0-4 0v8"></path><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"></path></svg></button></div>`);
 var root_7$5 = /* @__PURE__ */ from_html(`<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>`);
-var root_8$2 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1 bg-white/15 rounded-full p-0.5 shrink-0"><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_10$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-56 z-50" role="menu"><button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Snap to grid</span> <span> </span></button> <button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Show furniture</span> <span> </span></button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Version history</button> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Area summary</button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Settings…</button></div>`);
-var root_9$2 = /* @__PURE__ */ from_html(`<div class="relative shrink-0"><button title="Settings &amp; tools" aria-label="Settings &amp; tools"><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>`);
-var root_11$2 = /* @__PURE__ */ from_html(`<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>`, 1);
+var root_8$3 = /* @__PURE__ */ from_html(`<div class="flex items-center gap-1 bg-white/15 rounded-full p-0.5 shrink-0"><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_10$3 = /* @__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-56 z-50" role="menu"><button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Snap to grid</span> <span> </span></button> <button type="button" role="menuitemcheckbox" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left flex items-center justify-between gap-2"><span>Show furniture</span> <span> </span></button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Version history</button> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Area summary</button> <div class="h-px bg-gray-100 my-1"></div> <button type="button" role="menuitem" class="w-full px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left">Settings…</button></div>`);
+var root_9$3 = /* @__PURE__ */ from_html(`<div class="relative shrink-0"><button title="Settings &amp; tools" aria-label="Settings &amp; tools"><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>`);
+var root_11$3 = /* @__PURE__ */ from_html(`<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>`, 1);
 var root_13$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_12$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"><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 overflow-hidden"><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> <!> <!> <!> <div class="h-5 w-px bg-white/20"></div> <!> <!> <div class="h-5 w-px bg-white/20 shrink-0"></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_18$3 = /* @__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_17$3 = /* @__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_18$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_17$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_19$3 = /* @__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>`);
 var root$5 = /* @__PURE__ */ from_html(`<!> <!> <!> <!>`, 1);
 function TopBar($$anchor, $$props) {
@@ -57318,6 +57521,7 @@ function TopBar($$anchor, $$props) {
 	}
 	async function save() {
 		const p = get$1(currentProject);
+		console.log("🚀 ~ save ~ p:", p);
 		if (!p) return;
 		const thumbnail = captureThumbnail(p.id);
 		$$props.onDispatch("floor:callbackEvent", {
@@ -57500,7 +57704,7 @@ function TopBar($$anchor, $$props) {
 		var button = child(div);
 		var node_1 = sibling(button, 2);
 		var consequent = ($$anchor) => {
-			var input_1 = root_2$10();
+			var input_1 = root_2$9();
 			remove_input_defaults(input_1);
 			event("blur", input_1, onNameBlur);
 			delegated("keydown", input_1, onNameKeydown);
@@ -57508,7 +57712,7 @@ function TopBar($$anchor, $$props) {
 			append($$anchor, input_1);
 		};
 		var alternate = ($$anchor) => {
-			var button_1 = root_3$9();
+			var button_1 = root_3$8();
 			var text_1 = child(button_1, true);
 			reset(button_1);
 			template_effect(() => set_text(text_1, get(projectName)));
@@ -57522,7 +57726,7 @@ 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_2 = root_4$8();
+			var button_2 = root_4$7();
 			var text_2 = child(button_2, true);
 			reset(button_2);
 			template_effect(() => {
@@ -57543,7 +57747,7 @@ function TopBar($$anchor, $$props) {
 		var button_5 = sibling(button_4, 2);
 		var node_3 = sibling(button_5, 4);
 		var consequent_1 = ($$anchor) => {
-			var button_6 = root_5$5();
+			var button_6 = root_5$4();
 			template_effect(() => {
 				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"})`);
@@ -57586,7 +57790,7 @@ function TopBar($$anchor, $$props) {
 		});
 		var node_6 = sibling(node_5, 4);
 		var consequent_4 = ($$anchor) => {
-			var div_3 = root_8$2();
+			var div_3 = root_8$3();
 			var button_10 = child(div_3);
 			var button_11 = sibling(button_10, 2);
 			var text_4 = child(button_11);
@@ -57604,11 +57808,11 @@ function TopBar($$anchor, $$props) {
 		});
 		var node_7 = sibling(node_6, 2);
 		var consequent_6 = ($$anchor) => {
-			var div_4 = root_9$2();
+			var div_4 = root_9$3();
 			var button_13 = child(div_4);
 			var node_8 = sibling(button_13, 2);
 			var consequent_5 = ($$anchor) => {
-				var div_5 = root_10$2();
+				var div_5 = root_10$3();
 				var button_14 = child(div_5);
 				var span_1 = sibling(child(button_14), 2);
 				var text_5 = child(span_1, true);
@@ -57660,7 +57864,7 @@ function TopBar($$anchor, $$props) {
 			append($$anchor, div_4);
 		};
 		var alternate_1 = ($$anchor) => {
-			var fragment_1 = root_11$2();
+			var fragment_1 = root_11$3();
 			var button_19 = first_child(fragment_1);
 			var button_20 = sibling(button_19, 2);
 			var button_21 = sibling(button_20, 2);
@@ -57765,7 +57969,7 @@ function TopBar($$anchor, $$props) {
 		append($$anchor, div);
 	};
 	var alternate_3 = ($$anchor) => {
-		var div_8 = root_17$3();
+		var div_8 = root_17$2();
 		var span_4 = child(div_8);
 		var text_10 = child(span_4, true);
 		reset(span_4);
@@ -57773,7 +57977,7 @@ function TopBar($$anchor, $$props) {
 		var button_34 = child(div_9);
 		var node_12 = sibling(button_34, 2);
 		var consequent_12 = ($$anchor) => {
-			var div_10 = root_18$3();
+			var div_10 = root_18$2();
 			var button_35 = child(div_10);
 			var button_36 = sibling(button_35, 4);
 			var button_37 = sibling(button_36, 2);
@@ -58399,9 +58603,9 @@ function placeRoomTemplate(preset, origin, template, w = 400, h = 300) {
 //#endregion
 //#region src/lib/components/editor/UndoHistoryPanel.svelte
 init_client();
-var root_2$9 = /* @__PURE__ */ from_html(`<div class="px-3 py-6 text-center text-xs text-gray-400">No history yet</div>`);
-var root_4$7 = /* @__PURE__ */ from_html(`<button><span class="w-5 text-[10px] text-gray-400 text-right shrink-0"></span> <span class="truncate flex-1"> </span> <span class="text-[10px] text-gray-300 shrink-0"> </span></button>`);
-var root_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_2$8 = /* @__PURE__ */ from_html(`<div class="px-3 py-6 text-center text-xs text-gray-400">No history yet</div>`);
+var root_4$6 = /* @__PURE__ */ from_html(`<button><span class="w-5 text-[10px] text-gray-400 text-right shrink-0"></span> <span class="truncate flex-1"> </span> <span class="text-[10px] text-gray-300 shrink-0"> </span></button>`);
+var root_3$7 = /* @__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>`);
 function UndoHistoryPanel($$anchor, $$props) {
 	push($$props, true);
@@ -58438,13 +58642,13 @@ function UndoHistoryPanel($$anchor, $$props) {
 		var div_3 = sibling(div_1, 2);
 		var node_1 = child(div_3);
 		var consequent = ($$anchor) => {
-			append($$anchor, root_2$9());
+			append($$anchor, root_2$8());
 		};
 		var alternate = ($$anchor) => {
-			var div_5 = root_3$8();
+			var div_5 = root_3$7();
 			var node_2 = child(div_5);
 			each(node_2, 17, () => get(history).entries, index$1, ($$anchor, entry, i) => {
-				var button_1 = root_4$7();
+				var button_1 = root_4$6();
 				let classes;
 				var span_1 = child(button_1);
 				span_1.textContent = i + 1;
@@ -58502,24 +58706,24 @@ delegate(["click"]);
 //#region src/lib/components/sidebar/BuildPanel.svelte
 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$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>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<div class="space-y-2"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Presets</h3> <p class="text-xs text-gray-400 mb-3">Click to add a room shape to the canvas</p> <div class="grid grid-cols-2 gap-2"></div> <hr class="my-3 border-gray-200"/> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Templates</h3> <p class="text-xs text-gray-400 mb-3">Pre-furnished rooms — walls + furniture in one click</p> <div class="grid grid-cols-2 gap-2"></div></div>`);
-var root_16$1 = /* @__PURE__ */ from_html(`<button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 w-5 h-5 flex items-center justify-center rounded-full hover:bg-gray-100" title="Clear search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>`);
-var root_17$2 = /* @__PURE__ */ from_html(`<div class="text-[10px] text-gray-400 px-1"> </div>`);
-var root_18$2 = /* @__PURE__ */ from_html(`<button> </button>`);
-var root_20$2 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-8 h-8 rounded-lg flex items-center justify-center"><div class="w-4 h-4 rounded-sm"></div></div> <span class="text-[10px] font-medium text-gray-600 leading-tight text-center"> </span></button>`);
-var root_19$2 = /* @__PURE__ */ from_html(`<div class="mt-1"><h4 class="text-[10px] font-semibold text-gray-400 uppercase mb-1.5">Recent</h4> <div class="grid grid-cols-2 gap-2"></div></div> <hr class="border-gray-100"/>`, 1);
-var root_22$2 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> <mark class="bg-yellow-200 text-gray-800 rounded-sm px-0.5"> </mark> </span>`);
-var root_23$2 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> </span>`);
-var root_21$1 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-10 h-10 rounded-lg flex items-center justify-center"><div class="w-5 h-5 rounded-sm"></div></div> <!> <span class="text-[10px] text-gray-400"> </span></button>`);
-var root_15$2 = /* @__PURE__ */ from_html(`<div class="space-y-2"><div class="relative"><input type="text" placeholder="Search furniture..." class="w-full px-3 py-2 pr-8 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none"/> <!></div> <!> <div class="flex flex-wrap gap-1 max-h-24 overflow-y-auto"><button>All</button> <button> </button> <!></div> <!> <div class="grid grid-cols-2 gap-2 mt-2"></div></div>`);
-var root_24$2 = /* @__PURE__ */ from_html(`<div class="fixed z-50 pointer-events-none"><div class="bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden" style="width: 220px;"><div class="w-full h-[120px] bg-gray-50 flex items-center justify-center p-3"><div class="w-16 h-16 rounded-xl flex items-center justify-center"><div class="w-10 h-10 rounded-md"></div></div></div> <div class="p-3 space-y-1.5"><div class="flex items-center gap-2"><span class="text-sm font-semibold text-gray-800"> </span> <span class="px-1.5 py-0.5 rounded-full text-[9px] font-semibold text-white"> </span></div> <div class="text-xs text-gray-500"> </div></div></div></div>`);
-var root_25$1 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"><div class="bg-white rounded-xl shadow-2xl w-80 p-5"><h3 class="text-sm font-bold text-gray-800 mb-1">Import RoomPlan</h3> <p class="text-xs text-gray-400 mb-4"> </p> <div class="space-y-3"><label class="flex items-start gap-2.5 cursor-pointer"><input type="checkbox" class="accent-blue-500 mt-0.5"/> <div><div class="text-sm font-medium text-gray-700">Straighten walls</div> <div class="text-xs text-gray-400">Snap near-horizontal/vertical walls to axis</div></div></label> <label class="flex items-start gap-2.5 cursor-pointer"><input type="checkbox" class="accent-blue-500 mt-0.5"/> <div><div class="text-sm font-medium text-gray-700">Enforce orthogonal <span class="text-xs text-blue-400 font-mono"> </span></div> <div class="text-xs text-gray-400">Force all walls to 90°/180° angles</div></div></label> <label class="block"><div class="text-xs text-gray-500 mb-1">Corner merge distance (cm)</div> <input type="number" min="0" max="50" step="5" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div> <div class="flex gap-2 mt-5"><button class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors">Cancel</button> <button class="flex-1 px-3 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors">Import</button></div></div></div>`);
+var root_7$4 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-amber-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#92400e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path></path></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_8$2 = /* @__PURE__ */ from_html(`<button draggable="true"><div class="w-9 h-9 rounded-lg bg-cyan-50 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0e7490" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="1"></rect><line x1="12" y1="4" x2="12" y2="20"></line><line x1="3" y1="12" x2="21" y2="12"></line></svg></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_6$3 = /* @__PURE__ */ from_html(`<div class="grid grid-cols-2 gap-2 mb-3"></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Windows</h3> <div class="grid grid-cols-2 gap-2"></div>`, 1);
+var root_1$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">Area</h3> <div class="grid grid-cols-3 gap-1.5 mb-1"><button type="button" title="Drag to create rectangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="4" y="6" width="16" height="12" rx="1"></rect></svg> Rect</button> <button type="button" title="Click to place triangle area"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M12 4 L20 19 L4 19 Z"></path></svg> Triangle</button> <button type="button" title="Click points; click first point or Enter to close"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><path d="M7 4 L17 6 L20 14 L12 20 L4 12 Z"></path></svg> Polygon</button></div> <p class="text-[10px] text-gray-400 mb-2 px-0.5"><!></p> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Structure</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 5h-5V2h-3v6h-4V5H7v6H2v3h5v3h3v-3h4v3h3v-6h5z"></path></svg></div> <div class="text-left"><div class="font-medium">Add Stairs</div> <div class="text-xs text-gray-400">Click to place stairs</div></div></button> <div class="flex gap-2"><button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="6"></circle><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Round Column</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"></rect><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg></div> <div class="text-left"><div class="font-medium text-xs">Square Column</div></div></button></div> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Annotate</h3> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"></path><line x1="12" y1="4" x2="12" y2="20"></line><line x1="8" y1="20" x2="16" y2="20"></line></svg></div> <div class="text-left"><div class="font-medium">Text Label</div> <div class="text-xs text-gray-400">Add text annotations (T)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><line x1="16" y1="5" x2="22" y2="5"></line><line x1="19" y1="2" x2="19" y2="8"></line><line x1="3" y1="12" x2="12" y2="12"></line></svg></div> <div class="text-left"><div class="font-medium">Dimension</div> <div class="text-xs text-gray-400">Add dimension annotations (N)</div></div></button> <button><div><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h5l2-7 4 14 2-7h7"></path></svg></div> <div class="text-left"><div class="font-medium">Measure</div> <div class="text-xs text-gray-400">Measure distances (M)</div></div></button> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2 mt-3">Import</h3> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div> <div class="text-left"><div class="font-medium">Import Image</div> <div class="text-xs text-gray-400">Floor plan background</div></div></button> <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors hover:bg-gray-50 text-gray-700"><div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div> <div class="text-left"><div class="font-medium">Import RoomPlan</div> <div class="text-xs text-gray-400">iOS LiDAR scan (.json/.zip)</div></div></button> <button class="w-full flex items-center justify-between px-1 py-2 mt-3"><h3 class="text-xs font-semibold text-gray-400 uppercase">Doors</h3> <span class="text-gray-400 text-xs"> </span></button> <!></div>`);
+var root_10$2 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-blue-300 hover:bg-blue-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center text-2xl font-mono"> </div> <span class="text-xs font-medium text-gray-600"> </span></button>`);
+var root_11$2 = /* @__PURE__ */ from_html(`<button class="flex flex-col items-center gap-1.5 p-3 rounded-lg border-2 border-gray-100 hover:border-green-300 hover:bg-green-50 transition-colors cursor-grab active:cursor-grabbing" draggable="true"><div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center text-lg"><!></div> <span class="text-xs font-medium text-gray-600"> </span> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_9$2 = /* @__PURE__ */ from_html(`<div class="space-y-2"><h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Presets</h3> <p class="text-xs text-gray-400 mb-3">Click to add a room shape to the canvas</p> <div class="grid grid-cols-2 gap-2"></div> <hr class="my-3 border-gray-200"/> <h3 class="text-xs font-semibold text-gray-400 uppercase mb-2">Room Templates</h3> <p class="text-xs text-gray-400 mb-3">Pre-furnished rooms — walls + furniture in one click</p> <div class="grid grid-cols-2 gap-2"></div></div>`);
+var root_20$2 = /* @__PURE__ */ from_html(`<button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 w-5 h-5 flex items-center justify-center rounded-full hover:bg-gray-100" title="Clear search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>`);
+var root_21$1 = /* @__PURE__ */ from_html(`<div class="text-[10px] text-gray-400 px-1"> </div>`);
+var root_22$2 = /* @__PURE__ */ from_html(`<button> </button>`);
+var root_24$1 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-8 h-8 rounded-lg flex items-center justify-center"><div class="w-4 h-4 rounded-sm"></div></div> <span class="text-[10px] font-medium text-gray-600 leading-tight text-center"> </span></button>`);
+var root_23$2 = /* @__PURE__ */ from_html(`<div class="mt-1"><h4 class="text-[10px] font-semibold text-gray-400 uppercase mb-1.5">Recent</h4> <div class="grid grid-cols-2 gap-2"></div></div> <hr class="border-gray-100"/>`, 1);
+var root_26$1 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> <mark class="bg-yellow-200 text-gray-800 rounded-sm px-0.5"> </mark> </span>`);
+var root_27$1 = /* @__PURE__ */ from_html(`<span class="text-xs font-medium text-gray-600"> </span>`);
+var root_25$1 = /* @__PURE__ */ from_html(`<button draggable="true"><span role="button" tabindex="0"> </span>    <div class="w-10 h-10 rounded-lg flex items-center justify-center"><div class="w-5 h-5 rounded-sm"></div></div> <!> <span class="text-[10px] text-gray-400"> </span></button>`);
+var root_19$2 = /* @__PURE__ */ from_html(`<div class="space-y-2"><div class="relative"><input type="text" placeholder="Search furniture..." class="w-full px-3 py-2 pr-8 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none"/> <!></div> <!> <div class="flex flex-wrap gap-1 max-h-24 overflow-y-auto"><button>All</button> <button> </button> <!></div> <!> <div class="grid grid-cols-2 gap-2 mt-2"></div></div>`);
+var root_28$1 = /* @__PURE__ */ from_html(`<div class="fixed z-50 pointer-events-none"><div class="bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden" style="width: 220px;"><div class="w-full h-[120px] bg-gray-50 flex items-center justify-center p-3"><div class="w-16 h-16 rounded-xl flex items-center justify-center"><div class="w-10 h-10 rounded-md"></div></div></div> <div class="p-3 space-y-1.5"><div class="flex items-center gap-2"><span class="text-sm font-semibold text-gray-800"> </span> <span class="px-1.5 py-0.5 rounded-full text-[9px] font-semibold text-white"> </span></div> <div class="text-xs text-gray-500"> </div></div></div></div>`);
+var root_29$1 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"><div class="bg-white rounded-xl shadow-2xl w-80 p-5"><h3 class="text-sm font-bold text-gray-800 mb-1">Import RoomPlan</h3> <p class="text-xs text-gray-400 mb-4"> </p> <div class="space-y-3"><label class="flex items-start gap-2.5 cursor-pointer"><input type="checkbox" class="accent-blue-500 mt-0.5"/> <div><div class="text-sm font-medium text-gray-700">Straighten walls</div> <div class="text-xs text-gray-400">Snap near-horizontal/vertical walls to axis</div></div></label> <label class="flex items-start gap-2.5 cursor-pointer"><input type="checkbox" class="accent-blue-500 mt-0.5"/> <div><div class="text-sm font-medium text-gray-700">Enforce orthogonal <span class="text-xs text-blue-400 font-mono"> </span></div> <div class="text-xs text-gray-400">Force all walls to 90°/180° angles</div></div></label> <label class="block"><div class="text-xs text-gray-500 mb-1">Corner merge distance (cm)</div> <input type="number" min="0" max="50" step="5" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div> <div class="flex gap-2 mt-5"><button class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors">Cancel</button> <button class="flex-1 px-3 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors">Import</button></div></div></div>`);
 var root$4 = /* @__PURE__ */ from_html(`<div class="relative w-64 bg-white border-r border-gray-200 flex flex-col h-full overflow-hidden"><div class="flex border-b border-gray-200"><button>Build</button> <button>Rooms</button> <button>Objects</button></div> <div class="flex-1 overflow-y-auto p-3"><!></div> <button title="Layers Panel (L)" aria-label="Toggle Layers Panel">🗂</button> <button title="Undo History" aria-label="Toggle Undo History">⟲</button> <button class="absolute bottom-4 left-4 w-8 h-8 rounded-full bg-slate-700 text-white text-sm font-bold shadow-lg hover:bg-slate-600 transition-colors z-50" title="Keyboard Shortcuts (?)" aria-label="Keyboard Shortcuts">?</button></div> <!> <!>`, 1);
 function BuildPanel($$anchor, $$props) {
 	push($$props, true);
@@ -58538,10 +58742,21 @@ function BuildPanel($$anchor, $$props) {
 		selectedTool.set(tool);
 		placingFurnitureId.set(null);
 	}
+	function setZoneTool(shape) {
+		placingZoneShape.set(shape);
+		placingFurnitureId.set(null);
+		placingStair.set(false);
+		placingColumn.set(false);
+		selectedTool.set("zone");
+	}
 	let currentTool = /* @__PURE__ */ state("select");
 	selectedTool.subscribe((t) => {
 		set(currentTool, t, true);
 	});
+	let currentZoneShape = /* @__PURE__ */ state("rectangle");
+	placingZoneShape.subscribe((s) => {
+		set(currentZoneShape, s, true);
+	});
 	let currentPlacing = /* @__PURE__ */ state(null);
 	placingFurnitureId.subscribe((id) => {
 		set(currentPlacing, id, true);
@@ -58839,7 +59054,7 @@ function BuildPanel($$anchor, $$props) {
 	reset(div_1);
 	var div_2 = sibling(div_1, 2);
 	var node = child(div_2);
-	var consequent_1 = ($$anchor) => {
+	var consequent_4 = ($$anchor) => {
 		var div_3 = root_1$8();
 		var button_3 = sibling(child(div_3), 2);
 		var div_4 = child(button_3);
@@ -58849,100 +59064,126 @@ function BuildPanel($$anchor, $$props) {
 		var div_5 = child(button_4);
 		next(2);
 		reset(button_4);
-		var button_5 = sibling(button_4, 4);
-		var div_6 = child(button_5);
-		next(2);
-		reset(button_5);
-		var div_7 = sibling(button_5, 2);
-		var button_6 = child(div_7);
-		var div_8 = child(button_6);
-		next(2);
-		reset(button_6);
+		var div_6 = sibling(button_4, 4);
+		var button_5 = child(div_6);
+		var button_6 = sibling(button_5, 2);
 		var button_7 = sibling(button_6, 2);
-		var div_9 = child(button_7);
-		next(2);
-		reset(button_7);
-		reset(div_7);
-		var button_8 = sibling(div_7, 4);
-		var div_10 = child(button_8);
+		reset(div_6);
+		var p_1 = sibling(div_6, 2);
+		var node_1 = child(p_1);
+		var consequent = ($$anchor) => {
+			append($$anchor, text$1("Drag to draw · name/color from camera Area / Area Color"));
+		};
+		var consequent_1 = ($$anchor) => {
+			append($$anchor, text$1("Click to place · then drag vertices"));
+		};
+		var consequent_2 = ($$anchor) => {
+			append($$anchor, text$1("Click vertices · Enter / click first point to close"));
+		};
+		var alternate = ($$anchor) => {
+			append($$anchor, text$1("Select a camera first, then draw its Area"));
+		};
+		if_block(node_1, ($$render) => {
+			if (get(currentTool) === "zone" && get(currentZoneShape) === "rectangle") $$render(consequent);
+			else if (get(currentTool) === "zone" && get(currentZoneShape) === "triangle") $$render(consequent_1, 1);
+			else if (get(currentTool) === "zone" && get(currentZoneShape) === "polygon") $$render(consequent_2, 2);
+			else $$render(alternate, -1);
+		});
+		reset(p_1);
+		var button_8 = sibling(p_1, 4);
+		var div_7 = child(button_8);
 		next(2);
 		reset(button_8);
-		var button_9 = sibling(button_8, 2);
-		var div_11 = child(button_9);
+		var div_8 = sibling(button_8, 2);
+		var button_9 = child(div_8);
+		var div_9 = child(button_9);
 		next(2);
 		reset(button_9);
 		var button_10 = sibling(button_9, 2);
-		var div_12 = child(button_10);
+		var div_10 = child(button_10);
 		next(2);
 		reset(button_10);
-		var button_11 = sibling(button_10, 4);
+		reset(div_8);
+		var button_11 = sibling(div_8, 4);
+		var div_11 = child(button_11);
+		next(2);
+		reset(button_11);
 		var button_12 = sibling(button_11, 2);
+		var div_12 = child(button_12);
+		next(2);
+		reset(button_12);
 		var button_13 = sibling(button_12, 2);
-		var span = sibling(child(button_13), 2);
-		var text_1 = child(span, true);
-		reset(span);
+		var div_13 = child(button_13);
+		next(2);
 		reset(button_13);
-		var node_1 = sibling(button_13, 2);
-		var consequent = ($$anchor) => {
-			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();
-				var div_14 = child(button_14);
-				var svg = child(div_14);
+		var button_14 = sibling(button_13, 4);
+		var button_15 = sibling(button_14, 2);
+		var button_16 = sibling(button_15, 2);
+		var span = sibling(child(button_16), 2);
+		var text_5 = child(span, true);
+		reset(span);
+		reset(button_16);
+		var node_2 = sibling(button_16, 2);
+		var consequent_3 = ($$anchor) => {
+			var fragment_1 = root_6$3();
+			var div_14 = first_child(fragment_1);
+			each(div_14, 21, () => doorCatalog, index$1, ($$anchor, dc) => {
+				var button_17 = root_7$4();
+				var div_15 = child(button_17);
+				var svg = child(div_15);
 				var path = child(svg);
 				reset(svg);
-				reset(div_14);
-				var span_1 = sibling(div_14, 2);
-				var text_2 = child(span_1, true);
+				reset(div_15);
+				var span_1 = sibling(div_15, 2);
+				var text_6 = child(span_1, true);
 				reset(span_1);
 				var span_2 = sibling(span_1, 2);
-				var text_3 = child(span_2, true);
+				var text_7 = child(span_2, true);
 				reset(span_2);
-				reset(button_14);
+				reset(button_17);
 				template_effect(() => {
-					set_class(button_14, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "door" && get(selectedDoorType) === get(dc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
+					set_class(button_17, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "door" && get(selectedDoorType) === get(dc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
 					set_attribute(path, "d", get(dc).icon);
-					set_text(text_2, get(dc).name);
-					set_text(text_3, get(dc).desc);
+					set_text(text_6, get(dc).name);
+					set_text(text_7, get(dc).desc);
 				});
-				delegated("click", button_14, () => setDoorType(get(dc).type));
-				event("dragstart", button_14, (e) => {
+				delegated("click", button_17, () => setDoorType(get(dc).type));
+				event("dragstart", button_17, (e) => {
 					var _e$dataTransfer, _e$dataTransfer2;
 					(_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 || _e$dataTransfer.setData("application/o3d-type", "door");
 					(_e$dataTransfer2 = e.dataTransfer) === null || _e$dataTransfer2 === void 0 || _e$dataTransfer2.setData("application/o3d-id", get(dc).type);
 				});
-				append($$anchor, button_14);
+				append($$anchor, button_17);
 			});
-			reset(div_13);
-			var div_15 = sibling(div_13, 4);
-			each(div_15, 21, () => windowCatalog, index$1, ($$anchor, wc) => {
-				var button_15 = root_4$6();
-				var span_3 = sibling(child(button_15), 2);
-				var text_4 = child(span_3, true);
+			reset(div_14);
+			var div_16 = sibling(div_14, 4);
+			each(div_16, 21, () => windowCatalog, index$1, ($$anchor, wc) => {
+				var button_18 = root_8$2();
+				var span_3 = sibling(child(button_18), 2);
+				var text_8 = child(span_3, true);
 				reset(span_3);
 				var span_4 = sibling(span_3, 2);
-				var text_5 = child(span_4, true);
+				var text_9 = child(span_4, true);
 				reset(span_4);
-				reset(button_15);
+				reset(button_18);
 				template_effect(() => {
-					set_class(button_15, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "window" && get(selectedWindowType) === get(wc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
-					set_text(text_4, get(wc).name);
-					set_text(text_5, get(wc).desc);
+					set_class(button_18, 1, `flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentTool) === "window" && get(selectedWindowType) === get(wc).type ? "border-blue-400 bg-blue-50" : "border-gray-100 hover:border-gray-200"}`);
+					set_text(text_8, get(wc).name);
+					set_text(text_9, get(wc).desc);
 				});
-				delegated("click", button_15, () => setWindowType(get(wc).type));
-				event("dragstart", button_15, (e) => {
+				delegated("click", button_18, () => setWindowType(get(wc).type));
+				event("dragstart", button_18, (e) => {
 					var _e$dataTransfer3, _e$dataTransfer4;
 					(_e$dataTransfer3 = e.dataTransfer) === null || _e$dataTransfer3 === void 0 || _e$dataTransfer3.setData("application/o3d-type", "window");
 					(_e$dataTransfer4 = e.dataTransfer) === null || _e$dataTransfer4 === void 0 || _e$dataTransfer4.setData("application/o3d-id", get(wc).type);
 				});
-				append($$anchor, button_15);
+				append($$anchor, button_18);
 			});
-			reset(div_15);
+			reset(div_16);
 			append($$anchor, fragment_1);
 		};
-		if_block(node_1, ($$render) => {
-			if (get(constructionOpen)) $$render(consequent);
+		if_block(node_2, ($$render) => {
+			if (get(constructionOpen)) $$render(consequent_3);
 		});
 		reset(div_3);
 		template_effect(() => {
@@ -58950,206 +59191,212 @@ function BuildPanel($$anchor, $$props) {
 			set_class(div_4, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "select" ? "bg-blue-100" : ""}`);
 			set_class(button_4, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "wall" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
 			set_class(div_5, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "wall" ? "bg-blue-100" : ""}`);
-			set_class(button_5, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(isPlacingStair) ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
-			set_class(div_6, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(isPlacingStair) ? "bg-blue-100" : ""}`);
-			set_class(button_6, 1, `flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(isPlacingColumn) ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
-			set_class(div_8, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(isPlacingColumn) ? "bg-blue-100" : ""}`);
-			set_class(button_7, 1, `flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(isPlacingColumn) ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
+			set_class(button_5, 1, `flex flex-col items-center gap-1 p-2 rounded-lg border-2 text-xs transition-colors ${get(currentTool) === "zone" && get(currentZoneShape) === "rectangle" ? "border-orange-400 bg-orange-50" : "border-gray-100 hover:border-gray-200"}`);
+			set_class(button_6, 1, `flex flex-col items-center gap-1 p-2 rounded-lg border-2 text-xs transition-colors ${get(currentTool) === "zone" && get(currentZoneShape) === "triangle" ? "border-orange-400 bg-orange-50" : "border-gray-100 hover:border-gray-200"}`);
+			set_class(button_7, 1, `flex flex-col items-center gap-1 p-2 rounded-lg border-2 text-xs transition-colors ${get(currentTool) === "zone" && get(currentZoneShape) === "polygon" ? "border-orange-400 bg-orange-50" : "border-gray-100 hover:border-gray-200"}`);
+			set_class(button_8, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(isPlacingStair) ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
+			set_class(div_7, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(isPlacingStair) ? "bg-blue-100" : ""}`);
+			set_class(button_9, 1, `flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(isPlacingColumn) ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
 			set_class(div_9, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(isPlacingColumn) ? "bg-blue-100" : ""}`);
-			set_class(button_8, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "text" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
-			set_class(div_10, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "text" ? "bg-blue-100" : ""}`);
-			set_class(button_9, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "annotate" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
-			set_class(div_11, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "annotate" ? "bg-blue-100" : ""}`);
-			set_class(button_10, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "measure" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
-			set_class(div_12, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "measure" ? "bg-blue-100" : ""}`);
-			set_text(text_1, get(constructionOpen) ? "▼" : "▶");
+			set_class(button_10, 1, `flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(isPlacingColumn) ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
+			set_class(div_10, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(isPlacingColumn) ? "bg-blue-100" : ""}`);
+			set_class(button_11, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "text" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
+			set_class(div_11, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "text" ? "bg-blue-100" : ""}`);
+			set_class(button_12, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "annotate" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
+			set_class(div_12, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "annotate" ? "bg-blue-100" : ""}`);
+			set_class(button_13, 1, `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${get(currentTool) === "measure" ? "bg-blue-50 text-slate-800 ring-1 ring-blue-200" : "hover:bg-gray-50 text-gray-700"}`);
+			set_class(div_13, 1, `w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center ${get(currentTool) === "measure" ? "bg-blue-100" : ""}`);
+			set_text(text_5, get(constructionOpen) ? "▼" : "▶");
 		});
 		delegated("click", button_3, () => setTool("select"));
 		delegated("click", button_4, () => setTool("wall"));
-		delegated("click", button_5, onPlaceStair);
-		delegated("click", button_6, () => onPlaceColumn("round"));
-		delegated("click", button_7, () => onPlaceColumn("square"));
-		delegated("click", button_8, () => setTool("text"));
-		delegated("click", button_9, () => setTool("annotate"));
-		delegated("click", button_10, () => setTool("measure"));
-		delegated("click", button_11, onImportImage);
-		delegated("click", button_12, onImportRoomPlan);
-		delegated("click", button_13, () => set(constructionOpen, !get(constructionOpen)));
+		delegated("click", button_5, () => setZoneTool("rectangle"));
+		delegated("click", button_6, () => setZoneTool("triangle"));
+		delegated("click", button_7, () => setZoneTool("polygon"));
+		delegated("click", button_8, onPlaceStair);
+		delegated("click", button_9, () => onPlaceColumn("round"));
+		delegated("click", button_10, () => onPlaceColumn("square"));
+		delegated("click", button_11, () => setTool("text"));
+		delegated("click", button_12, () => setTool("annotate"));
+		delegated("click", button_13, () => setTool("measure"));
+		delegated("click", button_14, onImportImage);
+		delegated("click", button_15, onImportRoomPlan);
+		delegated("click", button_16, () => set(constructionOpen, !get(constructionOpen)));
 		append($$anchor, div_3);
 	};
-	var consequent_8 = ($$anchor) => {
-		var div_16 = root_5$4();
-		var div_17 = sibling(child(div_16), 4);
-		each(div_17, 21, () => roomPresets, index$1, ($$anchor, preset) => {
-			var button_16 = root_6$3();
-			var div_18 = child(button_16);
-			var text_6 = child(div_18, true);
-			reset(div_18);
-			var span_5 = sibling(div_18, 2);
-			var text_7 = child(span_5, true);
+	var consequent_11 = ($$anchor) => {
+		var div_17 = root_9$2();
+		var div_18 = sibling(child(div_17), 4);
+		each(div_18, 21, () => roomPresets, index$1, ($$anchor, preset) => {
+			var button_19 = root_10$2();
+			var div_19 = child(button_19);
+			var text_10 = child(div_19, true);
+			reset(div_19);
+			var span_5 = sibling(div_19, 2);
+			var text_11 = child(span_5, true);
 			reset(span_5);
-			reset(button_16);
+			reset(button_19);
 			template_effect(() => {
-				set_text(text_6, get(preset).icon);
-				set_text(text_7, get(preset).name);
+				set_text(text_10, get(preset).icon);
+				set_text(text_11, get(preset).name);
 			});
-			delegated("click", button_16, () => onPresetClick(get(preset).id));
-			event("dragstart", button_16, (e) => {
+			delegated("click", button_19, () => onPresetClick(get(preset).id));
+			event("dragstart", button_19, (e) => {
 				var _e$dataTransfer5, _e$dataTransfer6;
 				(_e$dataTransfer5 = e.dataTransfer) === null || _e$dataTransfer5 === void 0 || _e$dataTransfer5.setData("application/o3d-type", "room");
 				(_e$dataTransfer6 = e.dataTransfer) === null || _e$dataTransfer6 === void 0 || _e$dataTransfer6.setData("application/o3d-id", get(preset).id);
 			});
-			append($$anchor, button_16);
+			append($$anchor, button_19);
 		});
-		reset(div_17);
-		var div_19 = sibling(div_17, 8);
-		each(div_19, 21, () => roomTemplates, index$1, ($$anchor, tmpl) => {
-			var button_17 = root_7$4();
-			var div_20 = child(button_17);
-			var node_2 = child(div_20);
-			var consequent_2 = ($$anchor) => {
+		reset(div_18);
+		var div_20 = sibling(div_18, 8);
+		each(div_20, 21, () => roomTemplates, index$1, ($$anchor, tmpl) => {
+			var button_20 = root_11$2();
+			var div_21 = child(button_20);
+			var node_3 = child(div_21);
+			var consequent_5 = ($$anchor) => {
 				append($$anchor, text$1("🛋️"));
 			};
-			var consequent_3 = ($$anchor) => {
+			var consequent_6 = ($$anchor) => {
 				append($$anchor, text$1("🛏️"));
 			};
-			var consequent_4 = ($$anchor) => {
+			var consequent_7 = ($$anchor) => {
 				append($$anchor, text$1("🍳"));
 			};
-			var consequent_5 = ($$anchor) => {
+			var consequent_8 = ($$anchor) => {
 				append($$anchor, text$1("🛁"));
 			};
-			var consequent_6 = ($$anchor) => {
+			var consequent_9 = ($$anchor) => {
 				append($$anchor, text$1("🖥️"));
 			};
-			var consequent_7 = ($$anchor) => {
+			var consequent_10 = ($$anchor) => {
 				append($$anchor, text$1("🍽️"));
 			};
-			var alternate = ($$anchor) => {
+			var alternate_1 = ($$anchor) => {
 				append($$anchor, text$1("🏠"));
 			};
-			if_block(node_2, ($$render) => {
-				if (get(tmpl).name === "Living Room") $$render(consequent_2);
-				else if (get(tmpl).name === "Bedroom") $$render(consequent_3, 1);
-				else if (get(tmpl).name === "Kitchen") $$render(consequent_4, 2);
-				else if (get(tmpl).name === "Bathroom") $$render(consequent_5, 3);
-				else if (get(tmpl).name === "Office") $$render(consequent_6, 4);
-				else if (get(tmpl).name === "Dining Room") $$render(consequent_7, 5);
-				else $$render(alternate, -1);
+			if_block(node_3, ($$render) => {
+				if (get(tmpl).name === "Living Room") $$render(consequent_5);
+				else if (get(tmpl).name === "Bedroom") $$render(consequent_6, 1);
+				else if (get(tmpl).name === "Kitchen") $$render(consequent_7, 2);
+				else if (get(tmpl).name === "Bathroom") $$render(consequent_8, 3);
+				else if (get(tmpl).name === "Office") $$render(consequent_9, 4);
+				else if (get(tmpl).name === "Dining Room") $$render(consequent_10, 5);
+				else $$render(alternate_1, -1);
 			});
-			reset(div_20);
-			var span_6 = sibling(div_20, 2);
-			var text_15 = child(span_6, true);
+			reset(div_21);
+			var span_6 = sibling(div_21, 2);
+			var text_19 = child(span_6, true);
 			reset(span_6);
 			var span_7 = sibling(span_6, 2);
-			var text_16 = child(span_7);
+			var text_20 = child(span_7);
 			reset(span_7);
-			reset(button_17);
+			reset(button_20);
 			template_effect(() => {
 				var _$$get$furniture$leng;
-				set_text(text_15, get(tmpl).name);
-				set_text(text_16, `${(_$$get$furniture$leng = get(tmpl).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} items`);
+				set_text(text_19, get(tmpl).name);
+				set_text(text_20, `${(_$$get$furniture$leng = get(tmpl).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} items`);
 			});
-			delegated("click", button_17, () => onPresetClick(get(tmpl).presetId, get(tmpl).name));
-			event("dragstart", button_17, (e) => {
+			delegated("click", button_20, () => onPresetClick(get(tmpl).presetId, get(tmpl).name));
+			event("dragstart", button_20, (e) => {
 				var _e$dataTransfer7, _e$dataTransfer8;
 				(_e$dataTransfer7 = e.dataTransfer) === null || _e$dataTransfer7 === void 0 || _e$dataTransfer7.setData("application/o3d-type", "room-template");
 				(_e$dataTransfer8 = e.dataTransfer) === null || _e$dataTransfer8 === void 0 || _e$dataTransfer8.setData("application/o3d-id", get(tmpl).name);
 			});
-			append($$anchor, button_17);
+			append($$anchor, button_20);
 		});
-		reset(div_19);
-		reset(div_16);
-		append($$anchor, div_16);
+		reset(div_20);
+		reset(div_17);
+		append($$anchor, div_17);
 	};
-	var consequent_13 = ($$anchor) => {
-		var div_21 = root_15$2();
-		var div_22 = child(div_21);
-		var input_1 = child(div_22);
+	var consequent_16 = ($$anchor) => {
+		var div_22 = root_19$2();
+		var div_23 = child(div_22);
+		var input_1 = child(div_23);
 		remove_input_defaults(input_1);
-		var node_3 = sibling(input_1, 2);
-		var consequent_9 = ($$anchor) => {
-			var button_18 = root_16$1();
-			delegated("click", button_18, () => set(search, ""));
-			append($$anchor, button_18);
+		var node_4 = sibling(input_1, 2);
+		var consequent_12 = ($$anchor) => {
+			var button_21 = root_20$2();
+			delegated("click", button_21, () => set(search, ""));
+			append($$anchor, button_21);
 		};
-		if_block(node_3, ($$render) => {
-			if (get(search)) $$render(consequent_9);
+		if_block(node_4, ($$render) => {
+			if (get(search)) $$render(consequent_12);
 		});
-		reset(div_22);
-		var node_4 = sibling(div_22, 2);
-		var consequent_10 = ($$anchor) => {
-			var div_23 = root_17$2();
-			var text_17 = child(div_23);
-			reset(div_23);
+		reset(div_23);
+		var node_5 = sibling(div_23, 2);
+		var consequent_13 = ($$anchor) => {
+			var div_24 = root_21$1();
+			var text_21 = child(div_24);
+			reset(div_24);
 			template_effect(() => {
 				var _$$get$length, _$$get;
-				return set_text(text_17, `${(_$$get$length = get(filtered).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} result${get(filtered).length !== 1 ? "s" : ""} for "${(_$$get = get(search)) !== null && _$$get !== void 0 ? _$$get : ""}"`);
+				return set_text(text_21, `${(_$$get$length = get(filtered).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} result${get(filtered).length !== 1 ? "s" : ""} for "${(_$$get = get(search)) !== null && _$$get !== void 0 ? _$$get : ""}"`);
 			});
-			append($$anchor, div_23);
+			append($$anchor, div_24);
 		};
-		if_block(node_4, ($$render) => {
-			if (get(search)) $$render(consequent_10);
+		if_block(node_5, ($$render) => {
+			if (get(search)) $$render(consequent_13);
 		});
-		var div_24 = sibling(node_4, 2);
-		var button_19 = child(div_24);
-		var button_20 = sibling(button_19, 2);
-		var text_18 = child(button_20);
-		reset(button_20);
-		each(sibling(button_20, 2), 17, () => furnitureCategories, index$1, ($$anchor, cat) => {
-			var button_21 = root_18$2();
-			var text_19 = child(button_21, true);
-			reset(button_21);
+		var div_25 = sibling(node_5, 2);
+		var button_22 = child(div_25);
+		var button_23 = sibling(button_22, 2);
+		var text_22 = child(button_23);
+		reset(button_23);
+		each(sibling(button_23, 2), 17, () => furnitureCategories, index$1, ($$anchor, cat) => {
+			var button_24 = root_22$2();
+			var text_23 = child(button_24, true);
+			reset(button_24);
 			template_effect(() => {
 				var _categoryColors$$$get;
-				set_class(button_21, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === get(cat) ? "text-white" : "text-gray-600 hover:bg-gray-200"}`);
-				set_style(button_21, get(selectedCategory) === get(cat) ? `background-color: ${(_categoryColors$$$get = categoryColors[get(cat)]) !== null && _categoryColors$$$get !== void 0 ? _categoryColors$$$get : "#6b7280"}` : "background-color: #f3f4f6");
-				set_text(text_19, get(cat));
+				set_class(button_24, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === get(cat) ? "text-white" : "text-gray-600 hover:bg-gray-200"}`);
+				set_style(button_24, get(selectedCategory) === get(cat) ? `background-color: ${(_categoryColors$$$get = categoryColors[get(cat)]) !== null && _categoryColors$$$get !== void 0 ? _categoryColors$$$get : "#6b7280"}` : "background-color: #f3f4f6");
+				set_text(text_23, get(cat));
 			});
-			delegated("click", button_21, () => set(selectedCategory, get(cat), true));
-			append($$anchor, button_21);
+			delegated("click", button_24, () => set(selectedCategory, get(cat), true));
+			append($$anchor, button_24);
 		});
-		reset(div_24);
-		var node_6 = sibling(div_24, 2);
-		var consequent_11 = ($$anchor) => {
-			var fragment_2 = root_19$2();
-			var div_25 = first_child(fragment_2);
-			var div_26 = sibling(child(div_25), 2);
-			each(div_26, 21, () => get(recentItems), index$1, ($$anchor, item) => {
-				var button_22 = root_20$2();
-				var span_8 = child(button_22);
-				var text_20 = child(span_8, true);
+		reset(div_25);
+		var node_7 = sibling(div_25, 2);
+		var consequent_14 = ($$anchor) => {
+			var fragment_2 = root_23$2();
+			var div_26 = first_child(fragment_2);
+			var div_27 = sibling(child(div_26), 2);
+			each(div_27, 21, () => get(recentItems), index$1, ($$anchor, item) => {
+				var button_25 = root_24$1();
+				var span_8 = child(button_25);
+				var text_24 = child(span_8, true);
 				reset(span_8);
-				var div_27 = sibling(span_8, 2);
-				var div_28 = child(div_27);
-				reset(div_27);
-				var span_9 = sibling(div_27, 2);
-				var text_21 = child(span_9, true);
+				var div_28 = sibling(span_8, 2);
+				var div_29 = child(div_28);
+				reset(div_28);
+				var span_9 = sibling(div_28, 2);
+				var text_25 = child(span_9, true);
 				reset(span_9);
-				reset(button_22);
+				reset(button_25);
 				template_effect(($0, $1, $2) => {
 					var _$$get$color, _$$get$color2;
-					set_class(button_22, 1, `relative flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
+					set_class(button_25, 1, `relative flex flex-col items-center gap-1 p-2.5 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
 					set_class(span_8, 1, `absolute top-1 right-1 text-[12px] leading-none cursor-pointer ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 					set_attribute(span_8, "title", $1);
-					set_text(text_20, $2);
-					set_style(div_27, `background-color: ${(_$$get$color = get(item).color) !== null && _$$get$color !== void 0 ? _$$get$color : ""}20`);
-					set_style(div_28, `background-color: ${(_$$get$color2 = get(item).color) !== null && _$$get$color2 !== void 0 ? _$$get$color2 : ""}; opacity: 0.7`);
-					set_text(text_21, get(item).name);
+					set_text(text_24, $2);
+					set_style(div_28, `background-color: ${(_$$get$color = get(item).color) !== null && _$$get$color !== void 0 ? _$$get$color : ""}20`);
+					set_style(div_29, `background-color: ${(_$$get$color2 = get(item).color) !== null && _$$get$color2 !== void 0 ? _$$get$color2 : ""}; opacity: 0.7`);
+					set_text(text_25, get(item).name);
 				}, [
 					() => get(favoriteIds).includes(get(item).id) ? "text-pink-500" : "text-gray-300 hover:text-pink-400",
 					() => get(favoriteIds).includes(get(item).id) ? "Remove from favorites" : "Add to favorites",
 					() => get(favoriteIds).includes(get(item).id) ? "♥" : "♡"
 				]);
-				delegated("click", button_22, () => onFurnitureClick(get(item)));
-				event("dragstart", button_22, (e) => {
+				delegated("click", button_25, () => onFurnitureClick(get(item)));
+				event("dragstart", button_25, (e) => {
 					var _e$dataTransfer9, _e$dataTransfer10;
 					(_e$dataTransfer9 = e.dataTransfer) === null || _e$dataTransfer9 === void 0 || _e$dataTransfer9.setData("application/o3d-type", "furniture");
 					(_e$dataTransfer10 = e.dataTransfer) === null || _e$dataTransfer10 === void 0 || _e$dataTransfer10.setData("application/o3d-id", get(item).id);
 				});
-				event("mouseenter", button_22, (e) => onItemMouseEnter(e, get(item)));
-				delegated("mousemove", button_22, onItemMouseMove);
-				event("mouseleave", button_22, onItemMouseLeave);
+				event("mouseenter", button_25, (e) => onItemMouseEnter(e, get(item)));
+				delegated("mousemove", button_25, onItemMouseMove);
+				event("mouseleave", button_25, onItemMouseLeave);
 				delegated("click", span_8, (e) => {
 					e.stopPropagation();
 					e.preventDefault();
@@ -59161,40 +59408,40 @@ function BuildPanel($$anchor, $$props) {
 						toggleFavorite(get(item).id);
 					}
 				});
-				append($$anchor, button_22);
+				append($$anchor, button_25);
 			});
+			reset(div_27);
 			reset(div_26);
-			reset(div_25);
 			next(2);
 			append($$anchor, fragment_2);
 		};
-		if_block(node_6, ($$render) => {
-			if (!get(search) && get(selectedCategory) === "All" && get(recentItems).length > 0) $$render(consequent_11);
+		if_block(node_7, ($$render) => {
+			if (!get(search) && get(selectedCategory) === "All" && get(recentItems).length > 0) $$render(consequent_14);
 		});
-		var div_29 = sibling(node_6, 2);
-		each(div_29, 21, () => get(filtered), index$1, ($$anchor, item) => {
+		var div_30 = sibling(node_7, 2);
+		each(div_30, 21, () => get(filtered), index$1, ($$anchor, item) => {
 			const s = /* @__PURE__ */ user_derived(() => get(search).toLowerCase());
-			var button_23 = root_21$1();
-			var span_10 = child(button_23);
-			var text_22 = child(span_10, true);
+			var button_26 = root_25$1();
+			var span_10 = child(button_26);
+			var text_26 = child(span_10, true);
 			reset(span_10);
-			var div_30 = sibling(span_10, 2);
-			var div_31 = child(div_30);
-			reset(div_30);
-			var node_7 = sibling(div_30, 2);
-			var consequent_12 = ($$anchor) => {
+			var div_31 = sibling(span_10, 2);
+			var div_32 = child(div_31);
+			reset(div_31);
+			var node_8 = sibling(div_31, 2);
+			var consequent_15 = ($$anchor) => {
 				const idx = /* @__PURE__ */ user_derived(() => get(item).name.toLowerCase().indexOf(get(s)));
-				var span_11 = root_22$2();
-				var text_23 = child(span_11, true);
-				var mark = sibling(text_23);
-				var text_24 = child(mark, true);
+				var span_11 = root_26$1();
+				var text_27 = child(span_11, true);
+				var mark = sibling(text_27);
+				var text_28 = child(mark, true);
 				reset(mark);
-				var text_25 = sibling(mark, 1, true);
+				var text_29 = sibling(mark, 1, true);
 				reset(span_11);
 				template_effect(($0, $1, $2) => {
-					set_text(text_23, $0);
-					set_text(text_24, $1);
-					set_text(text_25, $2);
+					set_text(text_27, $0);
+					set_text(text_28, $1);
+					set_text(text_29, $2);
 				}, [
 					() => get(item).name.slice(0, get(idx)),
 					() => get(item).name.slice(get(idx), get(idx) + get(s).length),
@@ -59203,44 +59450,44 @@ function BuildPanel($$anchor, $$props) {
 				append($$anchor, span_11);
 			};
 			var d = /* @__PURE__ */ user_derived(() => get(s) && get(item).name.toLowerCase().includes(get(s)));
-			var alternate_1 = ($$anchor) => {
-				var span_12 = root_23$2();
-				var text_26 = child(span_12, true);
+			var alternate_2 = ($$anchor) => {
+				var span_12 = root_27$1();
+				var text_30 = child(span_12, true);
 				reset(span_12);
-				template_effect(() => set_text(text_26, get(item).name));
+				template_effect(() => set_text(text_30, get(item).name));
 				append($$anchor, span_12);
 			};
-			if_block(node_7, ($$render) => {
-				if (get(d)) $$render(consequent_12);
-				else $$render(alternate_1, -1);
+			if_block(node_8, ($$render) => {
+				if (get(d)) $$render(consequent_15);
+				else $$render(alternate_2, -1);
 			});
-			var span_13 = sibling(node_7, 2);
-			var text_27 = child(span_13);
+			var span_13 = sibling(node_8, 2);
+			var text_31 = child(span_13);
 			reset(span_13);
-			reset(button_23);
+			reset(button_26);
 			template_effect(($0, $1, $2) => {
 				var _$$get$color3, _$$get$color4, _$$get$width, _$$get$depth;
-				set_class(button_23, 1, `relative flex flex-col items-center gap-1 p-3 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
+				set_class(button_26, 1, `relative flex flex-col items-center gap-1 p-3 rounded-lg border-2 transition-colors cursor-grab active:cursor-grabbing ${get(currentPlacing) === get(item).id ? "border-blue-400 bg-blue-50 ring-1 ring-blue-300" : "border-gray-100 hover:border-blue-300 hover:bg-blue-50"}`);
 				set_class(span_10, 1, `absolute top-1 right-1 text-[12px] leading-none cursor-pointer ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 				set_attribute(span_10, "title", $1);
-				set_text(text_22, $2);
-				set_style(div_30, `background-color: ${(_$$get$color3 = get(item).color) !== null && _$$get$color3 !== void 0 ? _$$get$color3 : ""}20`);
-				set_style(div_31, `background-color: ${(_$$get$color4 = get(item).color) !== null && _$$get$color4 !== void 0 ? _$$get$color4 : ""}; opacity: 0.7`);
-				set_text(text_27, `${(_$$get$width = get(item).width) !== null && _$$get$width !== void 0 ? _$$get$width : ""}×${(_$$get$depth = get(item).depth) !== null && _$$get$depth !== void 0 ? _$$get$depth : ""}cm`);
+				set_text(text_26, $2);
+				set_style(div_31, `background-color: ${(_$$get$color3 = get(item).color) !== null && _$$get$color3 !== void 0 ? _$$get$color3 : ""}20`);
+				set_style(div_32, `background-color: ${(_$$get$color4 = get(item).color) !== null && _$$get$color4 !== void 0 ? _$$get$color4 : ""}; opacity: 0.7`);
+				set_text(text_31, `${(_$$get$width = get(item).width) !== null && _$$get$width !== void 0 ? _$$get$width : ""}×${(_$$get$depth = get(item).depth) !== null && _$$get$depth !== void 0 ? _$$get$depth : ""}cm`);
 			}, [
 				() => get(favoriteIds).includes(get(item).id) ? "text-pink-500" : "text-gray-300 hover:text-pink-400",
 				() => get(favoriteIds).includes(get(item).id) ? "Remove from favorites" : "Add to favorites",
 				() => get(favoriteIds).includes(get(item).id) ? "♥" : "♡"
 			]);
-			delegated("click", button_23, () => onFurnitureClick(get(item)));
-			event("dragstart", button_23, (e) => {
+			delegated("click", button_26, () => onFurnitureClick(get(item)));
+			event("dragstart", button_26, (e) => {
 				var _e$dataTransfer11, _e$dataTransfer12;
 				(_e$dataTransfer11 = e.dataTransfer) === null || _e$dataTransfer11 === void 0 || _e$dataTransfer11.setData("application/o3d-type", "furniture");
 				(_e$dataTransfer12 = e.dataTransfer) === null || _e$dataTransfer12 === void 0 || _e$dataTransfer12.setData("application/o3d-id", get(item).id);
 			});
-			event("mouseenter", button_23, (e) => onItemMouseEnter(e, get(item)));
-			delegated("mousemove", button_23, onItemMouseMove);
-			event("mouseleave", button_23, onItemMouseLeave);
+			event("mouseenter", button_26, (e) => onItemMouseEnter(e, get(item)));
+			delegated("mousemove", button_26, onItemMouseMove);
+			event("mouseleave", button_26, onItemMouseLeave);
 			delegated("click", span_10, (e) => {
 				e.stopPropagation();
 				e.preventDefault();
@@ -59252,81 +59499,81 @@ function BuildPanel($$anchor, $$props) {
 					toggleFavorite(get(item).id);
 				}
 			});
-			append($$anchor, button_23);
+			append($$anchor, button_26);
 		});
-		reset(div_29);
-		reset(div_21);
+		reset(div_30);
+		reset(div_22);
 		template_effect(() => {
-			set_class(button_19, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "All" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
-			set_class(button_20, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "Favorites" ? "bg-pink-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
-			set_text(text_18, `♥ Favorites${get(favoriteIds).length ? ` (${get(favoriteIds).length})` : ""}`);
+			set_class(button_22, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "All" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
+			set_class(button_23, 1, `px-2 py-0.5 rounded-full text-[10px] font-medium ${get(selectedCategory) === "Favorites" ? "bg-pink-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`);
+			set_text(text_22, `♥ Favorites${get(favoriteIds).length ? ` (${get(favoriteIds).length})` : ""}`);
 		});
 		bind_value(input_1, () => get(search), ($$value) => set(search, $$value));
-		delegated("click", button_19, () => set(selectedCategory, "All"));
-		delegated("click", button_20, () => set(selectedCategory, "Favorites"));
-		append($$anchor, div_21);
+		delegated("click", button_22, () => set(selectedCategory, "All"));
+		delegated("click", button_23, () => set(selectedCategory, "Favorites"));
+		append($$anchor, div_22);
 	};
 	if_block(node, ($$render) => {
-		if (get(activeTab) === "draw") $$render(consequent_1);
-		else if (get(activeTab) === "rooms") $$render(consequent_8, 1);
-		else if (get(activeTab) === "objects") $$render(consequent_13, 2);
+		if (get(activeTab) === "draw") $$render(consequent_4);
+		else if (get(activeTab) === "rooms") $$render(consequent_11, 1);
+		else if (get(activeTab) === "objects") $$render(consequent_16, 2);
 	});
 	reset(div_2);
-	var button_24 = sibling(div_2, 2);
+	var button_27 = sibling(div_2, 2);
 	let classes;
-	var button_25 = sibling(button_24, 2);
+	var button_28 = sibling(button_27, 2);
 	let classes_1;
-	var button_26 = sibling(button_25, 2);
+	var button_29 = sibling(button_28, 2);
 	reset(div);
-	var node_8 = sibling(div, 2);
-	var consequent_14 = ($$anchor) => {
+	var node_9 = sibling(div, 2);
+	var consequent_17 = ($$anchor) => {
 		const item = /* @__PURE__ */ user_derived(() => get(hoveredItem));
-		var div_32 = root_24$2();
-		var div_33 = child(div_32);
+		var div_33 = root_28$1();
 		var div_34 = child(div_33);
 		var div_35 = child(div_34);
 		var div_36 = child(div_35);
+		var div_37 = child(div_36);
+		reset(div_36);
 		reset(div_35);
-		reset(div_34);
-		var div_37 = sibling(div_34, 2);
-		var div_38 = child(div_37);
-		var span_14 = child(div_38);
-		var text_28 = child(span_14, true);
+		var div_38 = sibling(div_35, 2);
+		var div_39 = child(div_38);
+		var span_14 = child(div_39);
+		var text_32 = child(span_14, true);
 		reset(span_14);
 		var span_15 = sibling(span_14, 2);
-		var text_29 = child(span_15, true);
+		var text_33 = child(span_15, true);
 		reset(span_15);
-		reset(div_38);
-		var div_39 = sibling(div_38, 2);
-		var text_30 = child(div_39);
 		reset(div_39);
-		reset(div_37);
+		var div_40 = sibling(div_39, 2);
+		var text_34 = child(div_40);
+		reset(div_40);
+		reset(div_38);
+		reset(div_34);
 		reset(div_33);
-		reset(div_32);
 		template_effect(() => {
 			var _$$get$x, _$$get$y, _$$get$color5, _$$get$color6, _ref, _categoryColors$$$get2, _$$get$width2, _$$get$depth2, _$$get$height;
-			set_style(div_32, `left: ${(_$$get$x = get(hoverPos).x) !== null && _$$get$x !== void 0 ? _$$get$x : ""}px; top: ${(_$$get$y = get(hoverPos).y) !== null && _$$get$y !== void 0 ? _$$get$y : ""}px;`);
-			set_style(div_35, `background-color: ${(_$$get$color5 = get(item).color) !== null && _$$get$color5 !== void 0 ? _$$get$color5 : ""}20`);
-			set_style(div_36, `background-color: ${(_$$get$color6 = get(item).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : ""}; opacity: 0.7`);
-			set_text(text_28, get(item).name);
+			set_style(div_33, `left: ${(_$$get$x = get(hoverPos).x) !== null && _$$get$x !== void 0 ? _$$get$x : ""}px; top: ${(_$$get$y = get(hoverPos).y) !== null && _$$get$y !== void 0 ? _$$get$y : ""}px;`);
+			set_style(div_36, `background-color: ${(_$$get$color5 = get(item).color) !== null && _$$get$color5 !== void 0 ? _$$get$color5 : ""}20`);
+			set_style(div_37, `background-color: ${(_$$get$color6 = get(item).color) !== null && _$$get$color6 !== void 0 ? _$$get$color6 : ""}; opacity: 0.7`);
+			set_text(text_32, get(item).name);
 			set_style(span_15, `background-color: ${(_ref = (_categoryColors$$$get2 = categoryColors[get(item).category]) !== null && _categoryColors$$$get2 !== void 0 ? _categoryColors$$$get2 : "#6b7280") !== null && _ref !== void 0 ? _ref : ""}`);
-			set_text(text_29, get(item).category);
-			set_text(text_30, `${(_$$get$width2 = get(item).width) !== null && _$$get$width2 !== void 0 ? _$$get$width2 : ""} × ${(_$$get$depth2 = get(item).depth) !== null && _$$get$depth2 !== void 0 ? _$$get$depth2 : ""} × ${(_$$get$height = get(item).height) !== null && _$$get$height !== void 0 ? _$$get$height : ""} cm`);
+			set_text(text_33, get(item).category);
+			set_text(text_34, `${(_$$get$width2 = get(item).width) !== null && _$$get$width2 !== void 0 ? _$$get$width2 : ""} × ${(_$$get$depth2 = get(item).depth) !== null && _$$get$depth2 !== void 0 ? _$$get$depth2 : ""} × ${(_$$get$height = get(item).height) !== null && _$$get$height !== void 0 ? _$$get$height : ""} cm`);
 		});
-		append($$anchor, div_32);
+		append($$anchor, div_33);
 	};
-	if_block(node_8, ($$render) => {
-		if (get(showPreview) && get(hoveredItem)) $$render(consequent_14);
+	if_block(node_9, ($$render) => {
+		if (get(showPreview) && get(hoveredItem)) $$render(consequent_17);
 	});
-	var node_9 = sibling(node_8, 2);
-	var consequent_15 = ($$anchor) => {
-		var div_40 = root_25$1();
-		var div_41 = child(div_40);
-		var p_1 = sibling(child(div_41), 2);
-		var text_31 = child(p_1, true);
-		reset(p_1);
-		var div_42 = sibling(p_1, 2);
-		var label = child(div_42);
+	var node_10 = sibling(node_9, 2);
+	var consequent_18 = ($$anchor) => {
+		var div_41 = root_29$1();
+		var div_42 = child(div_41);
+		var p_2 = sibling(child(div_42), 2);
+		var text_35 = child(p_2, true);
+		reset(p_2);
+		var div_43 = sibling(p_2, 2);
+		var label = child(div_43);
 		var input_2 = child(label);
 		remove_input_defaults(input_2);
 		next(2);
@@ -59334,53 +59581,53 @@ function BuildPanel($$anchor, $$props) {
 		var label_1 = sibling(label, 2);
 		var input_3 = child(label_1);
 		remove_input_defaults(input_3);
-		var div_43 = sibling(input_3, 2);
-		var div_44 = child(div_43);
-		var span_16 = sibling(child(div_44));
-		var text_32 = child(span_16, true);
+		var div_44 = sibling(input_3, 2);
+		var div_45 = child(div_44);
+		var span_16 = sibling(child(div_45));
+		var text_36 = child(span_16, true);
 		reset(span_16);
-		reset(div_44);
+		reset(div_45);
 		next(2);
-		reset(div_43);
+		reset(div_44);
 		reset(label_1);
 		var label_2 = sibling(label_1, 2);
 		var input_4 = sibling(child(label_2), 2);
 		remove_input_defaults(input_4);
 		reset(label_2);
+		reset(div_43);
+		var div_46 = sibling(div_43, 2);
+		var button_30 = child(div_46);
+		var button_31 = sibling(button_30, 2);
+		reset(div_46);
 		reset(div_42);
-		var div_45 = sibling(div_42, 2);
-		var button_27 = child(div_45);
-		var button_28 = sibling(button_27, 2);
-		reset(div_45);
 		reset(div_41);
-		reset(div_40);
 		template_effect(() => {
-			set_text(text_31, get(importFileName));
-			set_text(text_32, "v5");
+			set_text(text_35, get(importFileName));
+			set_text(text_36, "v5");
 		});
-		delegated("click", div_40, cancelImport);
-		delegated("click", div_41, (e) => e.stopPropagation());
+		delegated("click", div_41, cancelImport);
+		delegated("click", div_42, (e) => e.stopPropagation());
 		bind_checked(input_2, () => get(optStraighten), ($$value) => set(optStraighten, $$value));
 		bind_checked(input_3, () => get(optOrthogonal), ($$value) => set(optOrthogonal, $$value));
 		bind_value(input_4, () => get(optMergeDistance), ($$value) => set(optMergeDistance, $$value));
-		delegated("click", button_27, cancelImport);
-		delegated("click", button_28, confirmImport);
-		append($$anchor, div_40);
+		delegated("click", button_30, cancelImport);
+		delegated("click", button_31, confirmImport);
+		append($$anchor, div_41);
 	};
-	if_block(node_9, ($$render) => {
-		if (get(showImportDialog)) $$render(consequent_15);
+	if_block(node_10, ($$render) => {
+		if (get(showImportDialog)) $$render(consequent_18);
 	});
 	template_effect(() => {
 		set_class(button, 1, `flex-1 py-2.5 text-xs font-semibold uppercase tracking-wide ${get(activeTab) === "draw" ? "text-slate-800 border-b-2 border-blue-500 bg-blue-50" : "text-gray-500 hover:text-gray-700"}`);
 		set_class(button_1, 1, `flex-1 py-2.5 text-xs font-semibold uppercase tracking-wide ${get(activeTab) === "rooms" ? "text-slate-800 border-b-2 border-blue-500 bg-blue-50" : "text-gray-500 hover:text-gray-700"}`);
 		set_class(button_2, 1, `flex-1 py-2.5 text-xs font-semibold uppercase tracking-wide ${get(activeTab) === "objects" ? "text-slate-800 border-b-2 border-blue-500 bg-blue-50" : "text-gray-500 hover:text-gray-700"}`);
-		classes = set_class(button_24, 1, "absolute bottom-4 left-14 w-8 h-8 rounded-full shadow-lg hover:bg-slate-600 transition-colors z-50 text-sm", null, classes, {
+		classes = set_class(button_27, 1, "absolute bottom-4 left-14 w-8 h-8 rounded-full shadow-lg hover:bg-slate-600 transition-colors z-50 text-sm", null, classes, {
 			"bg-blue-600": showLayers(),
 			"text-white": showLayers(),
 			"bg-slate-700": !showLayers(),
 			"text-gray-300": !showLayers()
 		});
-		classes_1 = set_class(button_25, 1, "absolute bottom-4 left-24 w-8 h-8 rounded-full shadow-lg hover:bg-slate-600 transition-colors z-50 text-sm", null, classes_1, {
+		classes_1 = set_class(button_28, 1, "absolute bottom-4 left-24 w-8 h-8 rounded-full shadow-lg hover:bg-slate-600 transition-colors z-50 text-sm", null, classes_1, {
 			"bg-blue-600": showUndoHistory(),
 			"text-white": showUndoHistory(),
 			"bg-slate-700": !showUndoHistory(),
@@ -59390,9 +59637,9 @@ function BuildPanel($$anchor, $$props) {
 	delegated("click", button, () => set(activeTab, "draw"));
 	delegated("click", button_1, () => set(activeTab, "rooms"));
 	delegated("click", button_2, () => set(activeTab, "objects"));
-	delegated("click", button_24, () => showLayers(!showLayers()));
-	delegated("click", button_25, () => showUndoHistory(!showUndoHistory()));
-	delegated("click", button_26, () => showHelp(!showHelp()));
+	delegated("click", button_27, () => showLayers(!showLayers()));
+	delegated("click", button_28, () => showUndoHistory(!showUndoHistory()));
+	delegated("click", button_29, () => showHelp(!showHelp()));
 	append($$anchor, fragment);
 	pop();
 }
@@ -59765,20 +60012,23 @@ var root_13$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_12$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Camera</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm bg-white"><option>Select camera...</option><!></select></label>`);
 var root_14$1 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500"> </span> <input type="text"/></label>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_15$1 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_15 = /* @__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>`);
 var root_18$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_19$1 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_22$1 = /* @__PURE__ */ from_html(`<button><div class="w-full h-12 rounded-md mb-1 overflow-hidden"></div> <div class="text-center leading-3 text-[10px] text-gray-600 truncate"> </div></button>`);
 var root_20$1 = /* @__PURE__ */ from_html(`<div><span class="text-xs font-medium text-gray-600 mb-1.5 block"> </span> <div class="grid grid-cols-3 gap-1.5"></div></div>`);
-var root_16 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-green-100 rounded flex items-center justify-center text-xs">⬜</span> Room Properties</h3> <div class="space-y-3"><!> <label class="block"><span class="text-xs text-gray-500">Room Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"></select></label> <label class="block"><span class="text-xs text-gray-500">Room Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Category</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>🏠 Indoor</option><option>🌳 Outdoor</option><option>🚗 Garage</option><option>🔧 Utility</option></select></label> <div><span class="text-xs text-gray-500">Area</span> <p class="text-sm text-gray-700"> </p></div> <div><span class="text-xs text-gray-500 mb-1.5 block">Room Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <div><div class="flex items-center gap-1 mb-2"><span class="text-xs text-gray-500">Floor Material</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><path d="M3 3h18v18H3z"></path><path d="M8 8h8v8H8z"></path></svg></div> <div class="space-y-3"></div></div></div>`, 1);
+var root_16$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-green-100 rounded flex items-center justify-center text-xs">⬜</span> Room Properties</h3> <div class="space-y-3"><!> <label class="block"><span class="text-xs text-gray-500">Room Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"></select></label> <label class="block"><span class="text-xs text-gray-500">Room Name</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Category</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>🏠 Indoor</option><option>🌳 Outdoor</option><option>🚗 Garage</option><option>🔧 Utility</option></select></label> <div><span class="text-xs text-gray-500">Area</span> <p class="text-sm text-gray-700"> </p></div> <div><span class="text-xs text-gray-500 mb-1.5 block">Room Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <div><div class="flex items-center gap-1 mb-2"><span class="text-xs text-gray-500">Floor Material</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gray-400"><path d="M3 3h18v18H3z"></path><path d="M8 8h8v8H8z"></path></svg></div> <div class="space-y-3"></div></div></div>`, 1);
 var root_23$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🪜</span> Stair Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Type</span> <select class="w-full px-2 py-1 border border-gray-200 rounded text-sm"><option>Straight</option><option>L-Shaped</option><option>U-Shaped</option><option>Spiral</option></select></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Risers</span> <input type="number" min="3" max="30" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Direction</span> <div class="flex gap-2"><button>Up ↑</button> <button>Down ↓</button></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`, 1);
 var root_25 = /* @__PURE__ */ from_html(`<button></button>`);
 var root_26 = /* @__PURE__ */ from_html(`<label class="block"><span class="text-xs text-gray-500">Rotation (degrees)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label>`);
-var root_24$1 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🏛️</span> Column Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Shape</span> <div class="flex gap-2"><button>⭕ Round</button> <button>⬜ Square</button></div></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="10" max="200" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="50" max="1000" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div><span class="text-xs text-gray-500 mb-1.5 block">Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <!></div>`, 1);
-var root_27 = /* @__PURE__ */ from_html(`<div class="space-y-3"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-emerald-100 rounded flex items-center justify-center text-xs">🏷️</span> Text Annotation</h3> <label class="block"><span class="text-xs text-gray-500">Text</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Font Size</span> <input type="number" min="8" max="72" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Color</span> <div class="flex items-center gap-2"><input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/> <span class="text-xs text-gray-400"> </span></div></label> <label class="block"><span class="text-xs text-gray-500">Rotation (°)</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">X</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500">Y</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label></div>`);
-var root_28 = /* @__PURE__ */ from_html(`<div class="mt-4 pt-3 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-xs">🖼️</span> Background Image</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Opacity</span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Scale</span> <input type="range" min="0.1" max="5" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Rotation</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-2"><button> </button> <button class="flex-1 px-2 py-1.5 border rounded text-sm border-gray-200 hover:bg-gray-50">📏 Set Scale</button></div> <button class="w-full px-2 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50">Remove Image</button></div></div>`);
+var root_24 = /* @__PURE__ */ from_html(`<h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center text-xs">🏛️</span> Column Properties</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Shape</span> <div class="flex gap-2"><button>⭕ Round</button> <button>⬜ Square</button></div></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="10" max="200" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <label class="block"><span class="text-xs text-gray-500"> </span> <input type="number" min="50" max="1000" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div><span class="text-xs text-gray-500 mb-1.5 block">Color</span> <div class="grid grid-cols-5 gap-1.5 mb-2"></div> <div class="flex items-center gap-2"><span class="text-xs text-gray-500">Custom:</span> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></div> <!></div>`, 1);
+var root_28 = /* @__PURE__ */ from_html(`<div class="text-xs text-gray-500">Camera: <span class="text-gray-700 font-mono"> </span></div>`);
+var root_29 = /* @__PURE__ */ from_html(`<button type="button"></button>`);
+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 rounded flex items-center justify-center text-xs">⬡</span> Area</h3> <label class="block"><span class="text-xs text-gray-500">Area</span> <input type="text" class="w-full px-2 py-1 border border-gray-200 rounded text-sm" title="From assignedCameras.area when linked"/></label> <!> <div class="text-xs text-gray-500">Shape: <span class="text-gray-700 capitalize"> </span></div> <label class="block"><span class="text-xs text-gray-500">Area Color</span> <div class="flex flex-wrap gap-1.5 mt-1"><!> <input type="color" class="w-8 h-6 rounded border border-gray-200 cursor-pointer"/></div></label> <label class="block"><span class="text-xs text-gray-500">Fill opacity</span> <input type="range" min="0" max="0.4" step="0.02" class="w-full"/></label></div>`);
+var root_30 = /* @__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_31 = /* @__PURE__ */ from_html(`<div class="mt-4 pt-3 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center text-xs">🖼️</span> Background Image</h3> <div class="space-y-3"><label class="block"><span class="text-xs text-gray-500">Opacity</span> <input type="range" min="0.05" max="1" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Scale</span> <input type="range" min="0.1" max="5" step="0.05" class="w-full"/></label> <label class="block"><span class="text-xs text-gray-500">Rotation</span> <input type="number" class="w-full px-2 py-1 border border-gray-200 rounded text-sm"/></label> <div class="flex gap-2"><button> </button> <button class="flex-1 px-2 py-1.5 border rounded text-sm border-gray-200 hover:bg-gray-50">📏 Set Scale</button></div> <button class="w-full px-2 py-1.5 border border-red-300 rounded text-sm text-red-600 hover:bg-red-50">Remove Image</button></div></div>`);
 var root$3 = /* @__PURE__ */ from_html(`<div data-properties-panel="" style="top: 0; bottom: 0;"><!> <!></div>`);
 function PropertiesPanel($$anchor, $$props) {
 	push($$props, true);
@@ -59846,29 +60096,33 @@ function PropertiesPanel($$anchor, $$props) {
 		var _$$get$textAnnotation, _$$get7;
 		return (_$$get$textAnnotation = (_$$get7 = get(floor)) === null || _$$get7 === void 0 || (_$$get7 = _$$get7.textAnnotations) === null || _$$get7 === void 0 ? void 0 : _$$get7.find((t) => t.id === get(selId))) !== null && _$$get$textAnnotation !== void 0 ? _$$get$textAnnotation : null;
 	});
+	let selectedZone = /* @__PURE__ */ user_derived(() => {
+		var _$$get$zones$find, _$$get8;
+		return (_$$get$zones$find = (_$$get8 = get(floor)) === null || _$$get8 === void 0 || (_$$get8 = _$$get8.zones) === null || _$$get8 === void 0 ? void 0 : _$$get8.find((z) => z.id === get(selId))) !== null && _$$get$zones$find !== void 0 ? _$$get$zones$find : null;
+	});
 	let hasBgImage = /* @__PURE__ */ user_derived(() => {
-		var _$$get8;
-		return !!((_$$get8 = get(floor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.backgroundImage);
+		var _$$get9;
+		return !!((_$$get9 = get(floor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.backgroundImage);
 	});
 	let hasCameraThumbnailOverlay = /* @__PURE__ */ user_derived(() => {
-		var _cameraThumbnail, _$$get9;
-		return !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim()) && !((_$$get9 = get(floor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.backgroundImage);
+		var _cameraThumbnail, _$$get10;
+		return !!((_cameraThumbnail = cameraThumbnail()) === null || _cameraThumbnail === void 0 ? void 0 : _cameraThumbnail.trim()) && !((_$$get10 = get(floor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.backgroundImage);
 	});
 	let thumbOpacity = /* @__PURE__ */ state(.65);
 	cameraThumbnailOpacity.subscribe((v) => {
 		set(thumbOpacity, v, true);
 	});
 	let selectedRoom = /* @__PURE__ */ user_derived(() => {
-		var _ref, _$$get$rooms$find, _$$get10;
-		return (_ref = (_$$get$rooms$find = (_$$get10 = get(floor)) === null || _$$get10 === void 0 || (_$$get10 = _$$get10.rooms) === null || _$$get10 === void 0 ? void 0 : _$$get10.find((r) => r.id === get(selRoomId))) !== null && _$$get$rooms$find !== void 0 ? _$$get$rooms$find : get(detectedRooms).find((r) => r.id === get(selRoomId))) !== null && _ref !== void 0 ? _ref : null;
+		var _ref, _$$get$rooms$find, _$$get11;
+		return (_ref = (_$$get$rooms$find = (_$$get11 = get(floor)) === null || _$$get11 === void 0 || (_$$get11 = _$$get11.rooms) === null || _$$get11 === void 0 ? void 0 : _$$get11.find((r) => r.id === get(selRoomId))) !== null && _$$get$rooms$find !== void 0 ? _$$get$rooms$find : get(detectedRooms).find((r) => r.id === get(selRoomId))) !== null && _ref !== void 0 ? _ref : null;
 	});
 	let selectedDoorWall = /* @__PURE__ */ user_derived(() => {
-		var _ref2, _$$get11;
-		return (_ref2 = get(selectedDoor) && ((_$$get11 = get(floor)) === null || _$$get11 === void 0 || (_$$get11 = _$$get11.walls) === null || _$$get11 === void 0 ? void 0 : _$$get11.find((w) => w.id === get(selectedDoor).wallId))) !== null && _ref2 !== void 0 ? _ref2 : null;
+		var _ref2, _$$get12;
+		return (_ref2 = get(selectedDoor) && ((_$$get12 = get(floor)) === null || _$$get12 === void 0 || (_$$get12 = _$$get12.walls) === null || _$$get12 === void 0 ? void 0 : _$$get12.find((w) => w.id === get(selectedDoor).wallId))) !== null && _ref2 !== void 0 ? _ref2 : null;
 	});
 	let selectedWindowWall = /* @__PURE__ */ user_derived(() => {
-		var _ref3, _$$get12;
-		return (_ref3 = get(selectedWindow) && ((_$$get12 = get(floor)) === null || _$$get12 === void 0 || (_$$get12 = _$$get12.walls) === null || _$$get12 === void 0 ? void 0 : _$$get12.find((w) => w.id === get(selectedWindow).wallId))) !== null && _ref3 !== void 0 ? _ref3 : null;
+		var _ref3, _$$get13;
+		return (_ref3 = get(selectedWindow) && ((_$$get13 = get(floor)) === null || _$$get13 === void 0 || (_$$get13 = _$$get13.walls) === null || _$$get13 === void 0 ? void 0 : _$$get13.find((w) => w.id === get(selectedWindow).wallId))) !== null && _ref3 !== void 0 ? _ref3 : null;
 	});
 	function calcWallLength(wall) {
 		if (wall.curvePoint) {
@@ -59961,12 +60215,10 @@ function PropertiesPanel($$anchor, $$props) {
 		const props = get(selectedFurniture).props;
 		if (props && Object.keys(props).length > 0) {
 			const keys = Object.keys(props);
+			const rank = (k) => k === "serial" ? 0 : k === "name" ? 1 : k === "area" ? 2 : k === "areaColor" ? 3 : 10;
 			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);
+				const d = rank(a) - rank(b);
+				return d !== 0 ? d : a.localeCompare(b);
 			});
 			return keys.map((key) => {
 				var _props$key;
@@ -59986,14 +60238,14 @@ function PropertiesPanel($$anchor, $$props) {
 	});
 	/** Host-assigned camera fields are read-only; package fields (color/size/…) stay editable. */
 	const cameraPropsLocked = /* @__PURE__ */ user_derived(() => {
-		var _$$get13;
-		return !!(((_$$get13 = get(selectedFurniture)) === null || _$$get13 === void 0 ? void 0 : _$$get13.catalogId) === "camera" && get(selectedFurniture).props && Object.keys(get(selectedFurniture).props).length > 0);
+		var _$$get14;
+		return !!(((_$$get14 = get(selectedFurniture)) === null || _$$get14 === void 0 ? void 0 : _$$get14.catalogId) === "camera" && get(selectedFurniture).props && Object.keys(get(selectedFurniture).props).length > 0);
 	});
 	const useSiteCameraSelect = /* @__PURE__ */ user_derived(() => siteCameras().length > 0);
 	const usedCameraSerials = /* @__PURE__ */ user_derived(() => {
-		var _$$get14;
+		var _$$get15;
 		const used = /* @__PURE__ */ new Set();
-		if (!((_$$get14 = get(floor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.furniture) || !get(selectedFurniture)) return used;
+		if (!((_$$get15 = get(floor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.furniture) || !get(selectedFurniture)) return used;
 		for (const item of get(floor).furniture) {
 			if (item.catalogId !== "camera" || item.id === get(selectedFurniture).id) continue;
 			if (item.serial) used.add(item.serial);
@@ -60301,7 +60553,7 @@ function PropertiesPanel($$anchor, $$props) {
 			ids: ["carpet-beige", "carpet-gray"]
 		}
 	];
-	let hasSelection = /* @__PURE__ */ user_derived(() => !!get(selectedWall) || !!get(selectedDoor) || !!get(selectedWindow) || !!get(selectedFurniture) || !!get(selectedRoom) || !!get(selectedStair) || !!get(selectedColumn) || !!get(selectedTextAnnotation) || !is3D() && get(hasBgImage));
+	let hasSelection = /* @__PURE__ */ user_derived(() => !!get(selectedWall) || !!get(selectedDoor) || !!get(selectedWindow) || !!get(selectedFurniture) || !!get(selectedRoom) || !!get(selectedStair) || !!get(selectedColumn) || !!get(selectedTextAnnotation) || !!get(selectedZone) || !is3D() && get(hasBgImage));
 	var div = root$3();
 	let classes;
 	var node = child(div);
@@ -60586,7 +60838,7 @@ function PropertiesPanel($$anchor, $$props) {
 		reset(label_11);
 		reset(div_11);
 		template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
-			var _$$get15, _$$get16, _$$get17, _$$get18;
+			var _$$get16, _$$get17, _$$get18, _$$get19;
 			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 : ""})`);
@@ -60599,10 +60851,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 ${((_$$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"}`);
+			set_class(button_9, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get16 = get(selectedDoor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.swingDirection) === "left" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_10, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get17 = get(selectedDoor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.swingDirection) === "right" ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_11, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${!((_$$get18 = get(selectedDoor)) === null || _$$get18 === void 0 ? void 0 : _$$get18.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
+			set_class(button_12, 1, `flex-1 px-2 py-1.5 border rounded text-sm transition-colors ${((_$$get19 = get(selectedDoor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.flipSide) ? "bg-blue-100 border-blue-400 text-blue-700" : "border-gray-200 hover:bg-gray-50"}`);
 		}, [
 			() => unitLabel(),
 			() => displayValue(get(selectedDoor).width),
@@ -60807,7 +61059,7 @@ function PropertiesPanel($$anchor, $$props) {
 			"#dc143c",
 			"#228b22"
 		], index$1, ($$anchor, color) => {
-			var button_14 = root_15$1();
+			var button_14 = root_15();
 			template_effect(($0) => {
 				set_class(button_14, 1, `w-6 h-6 rounded border-2 hover:border-gray-300 transition-colors ${$0 !== null && $0 !== void 0 ? $0 : ""}`);
 				set_style(button_14, `background-color: ${color !== null && color !== void 0 ? color : ""}`);
@@ -60970,7 +61222,7 @@ function PropertiesPanel($$anchor, $$props) {
 		append($$anchor, fragment_3);
 	};
 	var consequent_9 = ($$anchor) => {
-		var fragment_5 = root_16();
+		var fragment_5 = root_16$1();
 		var div_21 = sibling(first_child(fragment_5), 2);
 		var node_8 = child(div_21);
 		var consequent_7 = ($$anchor) => {
@@ -61200,7 +61452,7 @@ function PropertiesPanel($$anchor, $$props) {
 		append($$anchor, fragment_7);
 	};
 	var consequent_12 = ($$anchor) => {
-		var fragment_8 = root_24$1();
+		var fragment_8 = root_24();
 		var div_34 = sibling(first_child(fragment_8), 2);
 		var label_35 = child(div_34);
 		var div_35 = sibling(child(label_35), 2);
@@ -61276,26 +61528,72 @@ function PropertiesPanel($$anchor, $$props) {
 		delegated("input", input_29, (e) => updateColumn(get(selectedColumn).id, { color: e.target.value }));
 		append($$anchor, fragment_8);
 	};
-	var consequent_13 = ($$anchor) => {
+	var consequent_14 = ($$anchor) => {
 		var div_39 = root_27();
-		var label_39 = sibling(child(div_39), 2);
+		var h3_1 = child(div_39);
+		var span_25 = child(h3_1);
+		next();
+		reset(h3_1);
+		var label_39 = sibling(h3_1, 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);
+		var node_11 = sibling(label_39, 2);
+		var consequent_13 = ($$anchor) => {
+			var div_40 = root_28();
+			var span_26 = sibling(child(div_40));
+			var text_32 = child(span_26, true);
+			reset(span_26);
+			reset(div_40);
+			template_effect(() => set_text(text_32, get(selectedZone).cameraSerial));
+			append($$anchor, div_40);
+		};
+		if_block(node_11, ($$render) => {
+			if (get(selectedZone).cameraSerial) $$render(consequent_13);
+		});
+		var div_41 = sibling(node_11, 2);
+		var span_27 = sibling(child(div_41));
+		var text_33 = child(span_27, true);
+		reset(span_27);
+		reset(div_41);
+		var label_40 = sibling(div_41, 2);
+		var div_42 = sibling(child(label_40), 2);
+		var node_12 = child(div_42);
+		each(node_12, 17, () => ZONE_COLOR_PALETTE, index$1, ($$anchor, c) => {
+			var button_27 = root_29();
+			template_effect(() => {
+				var _$$get20;
+				set_class(button_27, 1, `w-6 h-6 rounded border-2 ${get(selectedZone).color === get(c) ? "border-slate-800" : "border-transparent"}`);
+				set_style(button_27, `background:${(_$$get20 = get(c)) !== null && _$$get20 !== void 0 ? _$$get20 : ""}`);
+			});
+			delegated("click", button_27, () => updateZone(get(selectedZone).id, { color: get(c) }));
+			append($$anchor, button_27);
+		});
+		var input_32 = sibling(node_12, 2);
 		remove_input_defaults(input_32);
+		reset(div_42);
 		reset(label_40);
 		var label_41 = sibling(label_40, 2);
-		var div_40 = sibling(child(label_41), 2);
-		var input_33 = child(div_40);
+		var input_33 = sibling(child(label_41), 2);
 		remove_input_defaults(input_33);
-		var span_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);
+		reset(div_39);
+		template_effect(() => {
+			var _$$get$color8, _$$get$color9, _$$get$fillOpacity;
+			set_style(span_25, `background:${(_$$get$color8 = get(selectedZone).color) !== null && _$$get$color8 !== void 0 ? _$$get$color8 : ""}22;color:${(_$$get$color9 = get(selectedZone).color) !== null && _$$get$color9 !== void 0 ? _$$get$color9 : ""}`);
+			set_value(input_31, get(selectedZone).name);
+			set_text(text_33, get(selectedZone).shape);
+			set_value(input_32, get(selectedZone).color);
+			set_value(input_33, (_$$get$fillOpacity = get(selectedZone).fillOpacity) !== null && _$$get$fillOpacity !== void 0 ? _$$get$fillOpacity : .1);
+		});
+		delegated("input", input_31, (e) => updateZone(get(selectedZone).id, { name: e.target.value }));
+		delegated("input", input_32, (e) => updateZone(get(selectedZone).id, { color: e.target.value }));
+		delegated("input", input_33, (e) => updateZone(get(selectedZone).id, { fillOpacity: Number(e.target.value) }));
+		append($$anchor, div_39);
+	};
+	var consequent_15 = ($$anchor) => {
+		var div_43 = root_30();
+		var label_42 = sibling(child(div_43), 2);
 		var input_34 = sibling(child(label_42), 2);
 		remove_input_defaults(input_34);
 		reset(label_42);
@@ -61304,42 +61602,15 @@ function PropertiesPanel($$anchor, $$props) {
 		remove_input_defaults(input_35);
 		reset(label_43);
 		var label_44 = sibling(label_43, 2);
-		var input_36 = sibling(child(label_44), 2);
+		var div_44 = sibling(child(label_44), 2);
+		var input_36 = child(div_44);
 		remove_input_defaults(input_36);
+		var span_28 = sibling(input_36, 2);
+		var text_34 = child(span_28, true);
+		reset(span_28);
+		reset(div_44);
 		reset(label_44);
-		reset(div_39);
-		template_effect(($0, $1) => {
-			set_value(input_31, get(selectedTextAnnotation).text);
-			set_value(input_32, get(selectedTextAnnotation).fontSize);
-			set_value(input_33, get(selectedTextAnnotation).color);
-			set_text(text_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_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) => {
-		if (get(selectedWall)) $$render(consequent_1);
-		else if (get(selectedDoor)) $$render(consequent_2, 1);
-		else if (get(selectedWindow)) $$render(consequent_3, 2);
-		else if (get(selectedFurniture)) $$render(consequent_6, 3);
-		else if (get(selectedRoom)) $$render(consequent_9, 4);
-		else if (get(selectedStair)) $$render(consequent_10, 5);
-		else if (get(selectedColumn)) $$render(consequent_12, 6);
-		else if (get(selectedTextAnnotation)) $$render(consequent_13, 7);
-	});
-	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_45 = child(div_42);
+		var label_45 = sibling(label_44, 2);
 		var input_37 = sibling(child(label_45), 2);
 		remove_input_defaults(input_37);
 		reset(label_45);
@@ -61351,36 +61622,81 @@ function PropertiesPanel($$anchor, $$props) {
 		var input_39 = sibling(child(label_47), 2);
 		remove_input_defaults(input_39);
 		reset(label_47);
-		var div_43 = sibling(label_47, 2);
-		var button_27 = child(div_43);
-		var text_33 = child(button_27, true);
-		reset(button_27);
-		var button_28 = sibling(button_27, 2);
 		reset(div_43);
-		var button_29 = sibling(div_43, 2);
-		reset(div_42);
-		reset(div_41);
+		template_effect(($0, $1) => {
+			set_value(input_34, get(selectedTextAnnotation).text);
+			set_value(input_35, get(selectedTextAnnotation).fontSize);
+			set_value(input_36, get(selectedTextAnnotation).color);
+			set_text(text_34, get(selectedTextAnnotation).color);
+			set_value(input_37, get(selectedTextAnnotation).rotation);
+			set_value(input_38, $0);
+			set_value(input_39, $1);
+		}, [() => Math.round(get(selectedTextAnnotation).x), () => Math.round(get(selectedTextAnnotation).y)]);
+		delegated("input", input_34, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { text: e.target.value }));
+		delegated("input", input_35, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { fontSize: Number(e.target.value) }));
+		delegated("input", input_36, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { color: e.target.value }));
+		delegated("input", input_37, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { rotation: Number(e.target.value) }));
+		delegated("input", input_38, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { x: Number(e.target.value) }));
+		delegated("input", input_39, (e) => updateTextAnnotation(get(selectedTextAnnotation).id, { y: Number(e.target.value) }));
+		append($$anchor, div_43);
+	};
+	if_block(node, ($$render) => {
+		if (get(selectedWall)) $$render(consequent_1);
+		else if (get(selectedDoor)) $$render(consequent_2, 1);
+		else if (get(selectedWindow)) $$render(consequent_3, 2);
+		else if (get(selectedFurniture)) $$render(consequent_6, 3);
+		else if (get(selectedRoom)) $$render(consequent_9, 4);
+		else if (get(selectedStair)) $$render(consequent_10, 5);
+		else if (get(selectedColumn)) $$render(consequent_12, 6);
+		else if (get(selectedZone)) $$render(consequent_14, 7);
+		else if (get(selectedTextAnnotation)) $$render(consequent_15, 8);
+	});
+	var node_13 = sibling(node, 2);
+	var consequent_16 = ($$anchor) => {
+		var div_45 = root_31();
+		var div_46 = sibling(child(div_45), 2);
+		var label_48 = child(div_46);
+		var input_40 = sibling(child(label_48), 2);
+		remove_input_defaults(input_40);
+		reset(label_48);
+		var label_49 = sibling(label_48, 2);
+		var input_41 = sibling(child(label_49), 2);
+		remove_input_defaults(input_41);
+		reset(label_49);
+		var label_50 = sibling(label_49, 2);
+		var input_42 = sibling(child(label_50), 2);
+		remove_input_defaults(input_42);
+		reset(label_50);
+		var div_47 = sibling(label_50, 2);
+		var button_28 = child(div_47);
+		var text_35 = child(button_28, true);
+		reset(button_28);
+		var button_29 = sibling(button_28, 2);
+		reset(div_47);
+		var button_30 = sibling(div_47, 2);
+		reset(div_46);
+		reset(div_45);
 		template_effect(() => {
-			set_value(input_37, get(floor).backgroundImage.opacity);
-			set_value(input_38, get(floor).backgroundImage.scale);
-			set_value(input_39, get(floor).backgroundImage.rotation);
-			set_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_33, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
+			set_value(input_40, get(floor).backgroundImage.opacity);
+			set_value(input_41, get(floor).backgroundImage.scale);
+			set_value(input_42, get(floor).backgroundImage.rotation);
+			set_class(button_28, 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_35, get(floor).backgroundImage.locked ? "🔒 Locked" : "🔓 Unlocked");
 		});
-		delegated("input", input_37, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
-		delegated("input", input_38, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
-		delegated("input", input_39, (e) => updateBackgroundImage({ rotation: Number(e.target.value) }));
-		delegated("click", button_27, () => updateBackgroundImage({ locked: !get(floor).backgroundImage.locked }));
-		delegated("click", button_28, () => {
+		delegated("input", input_40, (e) => updateBackgroundImage({ opacity: Number(e.target.value) }));
+		delegated("input", input_41, (e) => updateBackgroundImage({ scale: Number(e.target.value) }));
+		delegated("input", input_42, (e) => updateBackgroundImage({ rotation: Number(e.target.value) }));
+		delegated("click", button_28, () => updateBackgroundImage({ locked: !get(floor).backgroundImage.locked }));
+		delegated("click", button_29, () => {
 			calibrationPoints.set([]);
 			calibrationMode.set(true);
 		});
-		delegated("click", button_29, () => setBackgroundImage(void 0));
-		append($$anchor, div_41);
+		delegated("click", button_30, () => setBackgroundImage(void 0));
+		append($$anchor, div_45);
 	};
-	if_block(node_11, ($$render) => {
-		var _$$get19;
-		if (get(hasBgImage) && ((_$$get19 = get(floor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.backgroundImage)) $$render(consequent_14);
+	if_block(node_13, ($$render) => {
+		var _$$get21;
+		if (get(hasBgImage) && ((_$$get21 = get(floor)) === null || _$$get21 === void 0 ? void 0 : _$$get21.backgroundImage)) $$render(consequent_16);
 	});
 	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 absolute right-0 z-40 shadow-lg`, null, classes, { hidden: !get(hasSelection) }));
@@ -61424,10 +61740,14 @@ function LayersPanel($$anchor, $$props) {
 		columns: true,
 		guides: true,
 		measurements: true,
-		annotations: true
+		annotations: true,
+		zones: true
 	}));
 	layerVisibility.subscribe((v) => {
-		set(vis, v, true);
+		set(vis, {
+			zones: true,
+			...v
+		}, true);
 	});
 	let collapsed = proxy({});
 	function toggle(cat) {
@@ -61443,7 +61763,7 @@ function LayersPanel($$anchor, $$props) {
 		selectedElementId.set(id);
 	}
 	let categories = /* @__PURE__ */ user_derived(() => {
-		var _$$get$stairs, _$$get$columns, _$$get$guides, _$$get$measurements, _$$get$annotations;
+		var _$$get$stairs, _$$get$columns, _$$get$zones, _$$get$guides, _$$get$measurements, _$$get$annotations;
 		if (!get(floor)) return [];
 		const cats = [];
 		cats.push({
@@ -61510,6 +61830,16 @@ function LayersPanel($$anchor, $$props) {
 				icon: "🏛️"
 			}))
 		});
+		if ((_$$get$zones = get(floor).zones) === null || _$$get$zones === void 0 ? void 0 : _$$get$zones.length) cats.push({
+			key: "zones",
+			label: "Areas",
+			icon: "⬡",
+			items: get(floor).zones.map((z) => ({
+				id: z.id,
+				label: z.name || z.shape,
+				icon: "⬡"
+			}))
+		});
 		if ((_$$get$guides = get(floor).guides) === null || _$$get$guides === void 0 ? void 0 : _$$get$guides.length) cats.push({
 			key: "guides",
 			label: "Guides",
@@ -64456,6 +64786,120 @@ function drawTextAnnotations(cs, floor, selectedTextAnnotationId, currentSelecte
 		ctx.restore();
 	}
 }
+function hexToRgba(hex, alpha) {
+	const c = hex.trim();
+	const short = c.match(/^#([0-9a-f]{3})$/i);
+	let h = c;
+	if (short) {
+		const s = short[1];
+		h = `#${s[0]}${s[0]}${s[1]}${s[1]}${s[2]}${s[2]}`;
+	}
+	const m = h.match(/^#([0-9a-f]{6})$/i);
+	if (!m) return `rgba(249, 115, 22, ${alpha})`;
+	const n = parseInt(m[1], 16);
+	return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+}
+function pathZonePolygon(ctx, cs, points) {
+	if (points.length < 2) return;
+	const first = wts(cs, points[0].x, points[0].y);
+	ctx.moveTo(first.x, first.y);
+	for (let i = 1; i < points.length; i++) {
+		const s = wts(cs, points[i].x, points[i].y);
+		ctx.lineTo(s.x, s.y);
+	}
+	ctx.closePath();
+}
+function drawZoneShape(cs, zone, selected) {
+	const pts = zone.points;
+	if (!pts || pts.length < 2) return;
+	const { ctx, zoom } = cs;
+	const color = zone.color || "#F97316";
+	const fillA = typeof zone.fillOpacity === "number" ? zone.fillOpacity : DEFAULT_ZONE_FILL_OPACITY;
+	ctx.save();
+	ctx.beginPath();
+	pathZonePolygon(ctx, cs, pts);
+	ctx.fillStyle = hexToRgba(color, fillA);
+	ctx.fill();
+	ctx.setLineDash([8 * Math.max(.6, zoom), 6 * Math.max(.6, zoom)]);
+	ctx.strokeStyle = color;
+	ctx.lineWidth = selected ? 2.5 : 1.75;
+	ctx.lineJoin = "round";
+	ctx.stroke();
+	ctx.setLineDash([]);
+	const b = zoneBounds(pts);
+	if (b && zone.name) {
+		const pad = 6;
+		const labelPos = wts(cs, b.minX, b.minY);
+		const fontSize = Math.max(11, 12 * Math.min(1.2, Math.max(.75, zoom)));
+		ctx.font = `600 ${fontSize}px system-ui, sans-serif`;
+		ctx.textAlign = "left";
+		ctx.textBaseline = "top";
+		const tw = ctx.measureText(zone.name).width;
+		const bx = labelPos.x + pad;
+		const by = labelPos.y + pad;
+		const bw = tw + 12;
+		const bh = fontSize + 8;
+		ctx.fillStyle = hexToRgba(color, .22);
+		ctx.beginPath();
+		ctx.roundRect(bx, by, bw, bh, 4);
+		ctx.fill();
+		ctx.fillStyle = color;
+		ctx.fillText(zone.name, bx + 6, by + 4);
+	}
+	if (selected) for (const p of pts) {
+		const s = wts(cs, p.x, p.y);
+		ctx.fillStyle = "#ffffff";
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1.5;
+		ctx.beginPath();
+		ctx.arc(s.x, s.y, 5, 0, Math.PI * 2);
+		ctx.fill();
+		ctx.stroke();
+	}
+	ctx.restore();
+}
+function drawZones(cs, floor, selectedZoneId) {
+	var _floor$zones;
+	if (!((_floor$zones = floor.zones) === null || _floor$zones === void 0 ? void 0 : _floor$zones.length)) return;
+	for (const z of floor.zones) drawZoneShape(cs, z, z.id === selectedZoneId);
+}
+/** Preview while drawing polygon / dragging rect. */
+function drawZoneDraft(cs, points, color, closed, cursor) {
+	if (!points.length && !cursor) return;
+	const { ctx, zoom } = cs;
+	const pts = [...points];
+	if (cursor) pts.push(cursor);
+	ctx.save();
+	ctx.strokeStyle = color;
+	ctx.fillStyle = hexToRgba(color, .08);
+	ctx.lineWidth = 1.5;
+	ctx.setLineDash([6 * Math.max(.6, zoom), 4 * Math.max(.6, zoom)]);
+	if (pts.length >= 2) {
+		ctx.beginPath();
+		const first = wts(cs, pts[0].x, pts[0].y);
+		ctx.moveTo(first.x, first.y);
+		for (let i = 1; i < pts.length; i++) {
+			const s = wts(cs, pts[i].x, pts[i].y);
+			ctx.lineTo(s.x, s.y);
+		}
+		if (closed && pts.length >= 3) {
+			ctx.closePath();
+			ctx.fill();
+		}
+		ctx.stroke();
+	}
+	for (const p of points) {
+		const s = wts(cs, p.x, p.y);
+		ctx.setLineDash([]);
+		ctx.fillStyle = "#fff";
+		ctx.strokeStyle = color;
+		ctx.beginPath();
+		ctx.arc(s.x, s.y, 4, 0, Math.PI * 2);
+		ctx.fill();
+		ctx.stroke();
+	}
+	ctx.restore();
+}
 function drawAnnotation(cs, a, selected, dimSettings) {
 	const { ctx, zoom } = cs;
 	const offset = a.offset || 40;
@@ -65215,35 +65659,59 @@ function hitTestTextAnnotation(wp, floor, ctx, zoom) {
 	}
 	return null;
 }
+/** Hit zone vertex; returns index or -1. */
+function findZoneVertexAt(wp, zone, zoom) {
+	const threshold = 10 / zoom;
+	for (let i = 0; i < zone.points.length; i++) {
+		const p = zone.points[i];
+		if (Math.hypot(wp.x - p.x, wp.y - p.y) <= threshold) return i;
+	}
+	return -1;
+}
+/** Top-most zone under point (fill or near edge). */
+function findZoneAt(wp, zones, zoom) {
+	if (!(zones === null || zones === void 0 ? void 0 : zones.length)) return null;
+	const edgeTol = 8 / zoom;
+	for (let i = zones.length - 1; i >= 0; i--) {
+		const z = zones[i];
+		if (!z.points || z.points.length < 2) continue;
+		if (pointInPolygon(wp, z.points)) return z;
+		for (let j = 0; j < z.points.length; j++) {
+			const a = z.points[j];
+			const b = z.points[(j + 1) % z.points.length];
+			if (pointToSegmentDist(wp, a, b) <= edgeTol) return z;
+		}
+	}
+	return null;
+}
 //#endregion
 //#region src/lib/components/editor/FloorPlanCanvas.svelte
 init_client();
 init_index_client();
-var root_1$4 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-2 z-10 px-2 py-1 bg-white/85 rounded text-sm font-semibold text-gray-700 shadow pointer-events-none"> </div>`);
+var root_2$4 = /* @__PURE__ */ from_html(`<input type="text" class="absolute bg-white border-2 border-blue-500 rounded px-2 py-1 text-sm text-center shadow-lg outline-none"/>`);
 var root_3$3 = /* @__PURE__ */ from_html(`<input type="text" class="absolute bg-white border-2 border-blue-500 rounded px-2 py-1 text-sm text-center shadow-lg outline-none"/>`);
-var root_4$2 = /* @__PURE__ */ from_html(`<input type="text" class="absolute bg-white border-2 border-blue-500 rounded px-2 py-1 text-sm text-center shadow-lg outline-none"/>`);
-var root_5 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 flex items-center justify-center pointer-events-none"><div class="text-center opacity-60"><div class="text-5xl mb-3">🏠</div> <div class="text-sm font-medium text-gray-500">Start building your floor plan</div> <div class="text-xs text-gray-400 mt-1">Draw walls with <span class="font-mono bg-gray-100 px-1 rounded">W</span> or drag items from the sidebar</div></div></div>`);
-var root_6 = /* @__PURE__ */ from_html(`<canvas width="180" height="120" class="absolute bottom-10 right-2 rounded-lg shadow-lg border border-gray-300 cursor-crosshair bg-white" style="z-index: 15;"></canvas>`);
-var root_8 = /* @__PURE__ */ from_html(`<span> </span> <span> </span> <span class="text-gray-300">|</span>`, 1);
+var root_4$2 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 flex items-center justify-center pointer-events-none"><div class="text-center opacity-60"><div class="text-5xl mb-3">🏠</div> <div class="text-sm font-medium text-gray-500">Start building your floor plan</div> <div class="text-xs text-gray-400 mt-1">Draw walls with <span class="font-mono bg-gray-100 px-1 rounded">W</span> or drag items from the sidebar</div></div></div>`);
+var root_5 = /* @__PURE__ */ from_html(`<canvas width="180" height="120" class="absolute bottom-10 right-2 rounded-lg shadow-lg border border-gray-300 cursor-crosshair bg-white" style="z-index: 15;"></canvas>`);
+var root_7$1 = /* @__PURE__ */ from_html(`<span> </span> <span> </span> <span class="text-gray-300">|</span>`, 1);
+var root_9 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_10 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_11 = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_12 = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_9 = /* @__PURE__ */ from_html(`<span> </span> <!> <!> <!> <span class="text-gray-300">|</span>`, 1);
-var root_13 = /* @__PURE__ */ from_html(`<span class="text-blue-600 font-medium"> </span> <span class="text-gray-300">|</span>`, 1);
-var root_7$1 = /* @__PURE__ */ from_html(`<div class="absolute bottom-2 right-2 bg-white/80 rounded px-2 py-1 text-xs text-gray-500 flex gap-3"><!> <!> <!> <span> </span> <button class="hover:text-gray-700" title="Zoom to Fit (F)">⊞ Fit</button> <button class="hover:text-gray-700" title="Toggle Grid (G)"> </button> <button class="hover:text-gray-700" title="Toggle Snap to Grid (S)"> </button> <button class="hover:text-gray-700" title="Toggle Furniture"> </button> <button class="hover:text-gray-700" title="Layer Visibility">🗂 Layers</button> <button class="hover:text-gray-700" title="Toggle Rulers"> </button> <button class="hover:text-gray-700" title="Toggle Mini-map"> </button></div>`);
-var root_15 = /* @__PURE__ */ from_html(`<label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span> </span></label>`);
-var root_14 = /* @__PURE__ */ from_html(`<div class="absolute bottom-12 right-2 z-20 bg-white rounded-lg shadow-lg border border-gray-200 p-3 text-xs min-w-[160px]"><div class="font-semibold text-gray-700 mb-2">Layers</div> <!> <hr class="my-1 border-gray-100"/> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Room Labels</span></label> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Dimensions</span></label></div>`);
-var root_18 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Flip swing" aria-label="Flip swing"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"></path></svg></button>`);
-var root_19 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Split wall at midpoint" aria-label="Split wall at midpoint"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4 12h4M16 12h4"></path></svg></button>`);
-var root_17 = /* @__PURE__ */ from_html(`<div class="absolute z-40 flex items-center gap-0.5 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-500 hover:text-gray-700" title="Duplicate" aria-label="Duplicate"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></button> <!> <!> <div class="w-px h-5 bg-gray-200 mx-0.5"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-red-50 text-gray-400 hover:text-red-600" title="Delete" aria-label="Delete"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"></path></svg></button></div>`);
-var root_20 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-blue-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to add wall segment · Double-click to finish · C to close loop ·
+var root_8 = /* @__PURE__ */ from_html(`<span> </span> <!> <!> <!> <span class="text-gray-300">|</span>`, 1);
+var root_12 = /* @__PURE__ */ from_html(`<span class="text-blue-600 font-medium"> </span> <span class="text-gray-300">|</span>`, 1);
+var root_6 = /* @__PURE__ */ from_html(`<div class="absolute bottom-2 right-2 bg-white/80 rounded px-2 py-1 text-xs text-gray-500 flex gap-3"><!> <!> <!> <span> </span> <button class="hover:text-gray-700" title="Zoom to Fit (F)">⊞ Fit</button> <button class="hover:text-gray-700" title="Toggle Grid (G)"> </button> <button class="hover:text-gray-700" title="Toggle Snap to Grid (S)"> </button> <button class="hover:text-gray-700" title="Toggle Furniture"> </button> <button class="hover:text-gray-700" title="Layer Visibility">🗂 Layers</button> <button class="hover:text-gray-700" title="Toggle Rulers"> </button> <button class="hover:text-gray-700" title="Toggle Mini-map"> </button></div>`);
+var root_14 = /* @__PURE__ */ from_html(`<label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span> </span></label>`);
+var root_13 = /* @__PURE__ */ from_html(`<div class="absolute bottom-12 right-2 z-20 bg-white rounded-lg shadow-lg border border-gray-200 p-3 text-xs min-w-[160px]"><div class="font-semibold text-gray-700 mb-2">Layers</div> <!> <hr class="my-1 border-gray-100"/> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Room Labels</span></label> <label class="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 rounded px-1"><input type="checkbox" class="accent-blue-500"/> <span>Dimensions</span></label></div>`);
+var root_17 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Flip swing" aria-label="Flip swing"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"></path></svg></button>`);
+var root_18 = /* @__PURE__ */ from_html(`<button class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" title="Split wall at midpoint" aria-label="Split wall at midpoint"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M4 12h4M16 12h4"></path></svg></button>`);
+var root_16 = /* @__PURE__ */ from_html(`<div class="absolute z-40 flex items-center gap-0.5 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-500 hover:text-gray-700" title="Duplicate" aria-label="Duplicate"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></button> <!> <!> <div class="w-px h-5 bg-gray-200 mx-0.5"></div> <button class="w-7 h-7 flex items-center justify-center rounded hover:bg-red-50 text-gray-400 hover:text-red-600" title="Delete" aria-label="Delete"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"></path></svg></button></div>`);
+var root_19 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-blue-600 text-white px-3 py-1 rounded-full text-xs shadow">Click to add wall segment · Double-click to finish · C to close loop ·
         Esc to cancel</div>`);
-var root_21 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-purple-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
-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$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>`);
+var root_20 = /* @__PURE__ */ from_html(`<div class="absolute top-2 left-1/2 -translate-x-1/2 bg-purple-600 text-white px-3 py-1 rounded-full text-xs shadow"> </div>`);
+var root_21 = /* @__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_22 = /* @__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_23 = /* @__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_1$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);
 	const $panMode = () => store_get(panMode, "$panMode", $$stores);
@@ -65320,6 +65788,15 @@ function FloorPlanCanvas($$anchor, $$props) {
 	let annotationStart = /* @__PURE__ */ state(null);
 	let selectedAnnotationId = /* @__PURE__ */ state(null);
 	let textAnnotationMode = /* @__PURE__ */ state(false);
+	let currentZoneShape = /* @__PURE__ */ state("rectangle");
+	let selectedZoneId = /* @__PURE__ */ state(null);
+	let zonePolyDraft = /* @__PURE__ */ state(proxy([]));
+	let zoneRectDragStart = /* @__PURE__ */ state(null);
+	let zoneRectDragCurrent = /* @__PURE__ */ state(null);
+	let draggingZoneId = /* @__PURE__ */ state(null);
+	let draggingZoneVertex = /* @__PURE__ */ state(null);
+	let zoneDragLast = /* @__PURE__ */ state(null);
+	let zoneCursor = /* @__PURE__ */ state(null);
 	let editingTextAnnotationId = /* @__PURE__ */ state(null);
 	let editingTextAnnotationPos = /* @__PURE__ */ state(proxy({
 		x: 0,
@@ -65351,7 +65828,6 @@ function FloorPlanCanvas($$anchor, $$props) {
 		cameraThumbnail();
 		canvasBackground();
 		floorPlateBackground();
-		$$props.projectName;
 		$$props.heatmapEnabled;
 		$$props.heatmapMatrix;
 		heatmapColorScale();
@@ -65366,7 +65842,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		columns: true,
 		guides: true,
 		measurements: true,
-		annotations: true
+		annotations: true,
+		zones: true
 	}));
 	let showFurniture = /* @__PURE__ */ user_derived(() => get(layerVis).furniture);
 	user_effect(() => {
@@ -65612,6 +66089,35 @@ function FloorPlanCanvas($$anchor, $$props) {
 		const step = get(currentSnapToGrid) ? get(currentGridSize) : SNAP;
 		return Math.round(v / step) * step;
 	}
+	/** Pick camera for new Area: selected camera, else first camera without an area. */
+	function resolveAreaCameraTarget() {
+		var _$$get$zones, _ref, _$$get$furniture$find;
+		if (!get(currentFloor)) return null;
+		const zones = (_$$get$zones = get(currentFloor).zones) !== null && _$$get$zones !== void 0 ? _$$get$zones : [];
+		const used = new Set(zones.map((z) => z.cameraSerial).filter((s) => !!s));
+		if (get(currentSelectedId)) {
+			const sel = get(currentFloor).furniture.find((f) => f.id === get(currentSelectedId) && f.catalogId === "camera");
+			if (sel === null || sel === void 0 ? void 0 : sel.serial) return sel;
+		}
+		return (_ref = (_$$get$furniture$find = get(currentFloor).furniture.find((f) => f.catalogId === "camera" && !!f.serial && !used.has(f.serial))) !== null && _$$get$furniture$find !== void 0 ? _$$get$furniture$find : get(currentFloor).furniture.find((f) => f.catalogId === "camera" && !!f.serial)) !== null && _ref !== void 0 ? _ref : null;
+	}
+	function commitAreaShape(shape, points) {
+		var _$$get$zones$length, _$$get2;
+		const cam = resolveAreaCameraTarget();
+		const idx = (_$$get$zones$length = (_$$get2 = get(currentFloor)) === null || _$$get2 === void 0 || (_$$get2 = _$$get2.zones) === null || _$$get2 === void 0 ? void 0 : _$$get2.length) !== null && _$$get$zones$length !== void 0 ? _$$get$zones$length : 0;
+		if (cam === null || cam === void 0 ? void 0 : cam.serial) {
+			const style = resolveCameraAreaStyle(cam, idx);
+			return upsertCameraZone(shape, points, {
+				cameraSerial: cam.serial,
+				name: style.name,
+				color: style.color
+			});
+		}
+		return addZone(shape, points, {
+			name: `Area ${idx + 1}`,
+			color: nextZoneColor(idx)
+		});
+	}
 	function screenToWorld(sx, sy) {
 		return {
 			x: (sx - get(width) / 2) / get(zoom) + get(camX),
@@ -66025,9 +66531,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function drawMeasurement() {
-		var _$$get2;
+		var _$$get3;
 		if (!get(measureStart)) return;
-		const end = (_$$get2 = get(measureEnd)) !== null && _$$get2 !== void 0 ? _$$get2 : get(mousePos);
+		const end = (_$$get3 = get(measureEnd)) !== null && _$$get3 !== void 0 ? _$$get3 : get(mousePos);
 		const s = worldToScreen(get(measureStart).x, get(measureStart).y);
 		const e = worldToScreen(end.x, end.y);
 		ctx.strokeStyle = "#ef4444";
@@ -66199,8 +66705,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return getFloorBounds(floor, { includeWallThickness: true });
 	}
 	function drawFloorPlateBackground() {
-		var _$$get3;
-		if (!((_$$get3 = get(currentFloor)) === null || _$$get3 === void 0 || (_$$get3 = _$$get3.walls) === null || _$$get3 === void 0 ? void 0 : _$$get3.length)) return;
+		var _$$get4;
+		if (!((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 || (_$$get4 = _$$get4.walls) === null || _$$get4 === void 0 ? void 0 : _$$get4.length)) return;
 		const bounds = getCameraThumbnailBounds(get(currentFloor));
 		if (!bounds) return;
 		const topLeft = worldToScreen(bounds.minX, bounds.minY);
@@ -66209,12 +66715,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 		ctx.fillRect(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
 	}
 	function isCameraThumbnailOverlayActive() {
-		var _cameraThumbnail2, _$$get4;
-		return !!(((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim()) && get(bgImage) && !((_$$get4 = get(currentFloor)) === null || _$$get4 === void 0 ? void 0 : _$$get4.backgroundImage));
+		var _cameraThumbnail2, _$$get5;
+		return !!(((_cameraThumbnail2 = cameraThumbnail()) === null || _cameraThumbnail2 === void 0 ? void 0 : _cameraThumbnail2.trim()) && get(bgImage) && !((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.backgroundImage));
 	}
 	function drawBackgroundImage() {
-		var _$$get5;
-		if (!get(bgImage) || !((_$$get5 = get(currentFloor)) === null || _$$get5 === void 0 ? void 0 : _$$get5.backgroundImage)) return;
+		var _$$get6;
+		if (!get(bgImage) || !((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.backgroundImage)) return;
 		const bg = get(currentFloor).backgroundImage;
 		ctx.save();
 		ctx.globalAlpha = bg.opacity;
@@ -66283,6 +66789,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return "width: 100%; height: 100%";
 	}
 	function draw() {
+		var _floor$zones;
 		if (!ctx) return;
 		if (!canvasDirty) {
 			requestAnimationFrame(draw);
@@ -66305,7 +66812,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			else zoomToFit();
 			needsFitToCanvas = false;
 		}
-		if (get(wallStart) || get(draggingFurnitureId) || get(draggingDoorId) || get(draggingWindowId) || get(draggingStairId) || get(draggingColumnId) || get(draggingWallEndpoint) || get(draggingWallParallel) || get(draggingCurveHandle) || get(draggingHandle) || get(draggingMultiSelect) || get(draggingRoomId) || get(draggingRoomLabelId) || get(draggingTextAnnotationId) || get(draggingGuideId) || get(measuring) || get(annotating) || get(currentPlacingId) || get(isPlacingStair) || get(isPlacingColumn) || get(marqueeStart) || get(isPanning)) canvasDirty = true;
+		if (get(wallStart) || get(draggingFurnitureId) || get(draggingDoorId) || get(draggingWindowId) || get(draggingStairId) || get(draggingColumnId) || get(draggingWallEndpoint) || get(draggingWallParallel) || get(draggingCurveHandle) || get(draggingHandle) || get(draggingMultiSelect) || get(draggingRoomId) || get(draggingRoomLabelId) || get(draggingTextAnnotationId) || get(draggingGuideId) || get(draggingZoneId) || get(zoneRectDragStart) || get(zonePolyDraft).length > 0 || get(measuring) || get(annotating) || get(currentPlacingId) || get(isPlacingStair) || get(isPlacingColumn) || get(marqueeStart) || get(isPanning)) canvasDirty = true;
 		updateDetectedRooms();
 		const selId = get(currentSelectedId);
 		const multiIds = get(currentSelectedIds);
@@ -66938,6 +67445,18 @@ function FloorPlanCanvas($$anchor, $$props) {
 			ctx.restore();
 		}
 		drawFloorHeatmapLayer();
+		if (get(layerVis).zones && (floor === null || floor === void 0 || (_floor$zones = floor.zones) === null || _floor$zones === void 0 ? void 0 : _floor$zones.length)) {
+			var _$$get7;
+			const zoneSel = (_$$get7 = get(selectedZoneId)) !== null && _$$get7 !== void 0 ? _$$get7 : floor.zones.some((z) => z.id === get(currentSelectedId)) ? get(currentSelectedId) : null;
+			drawZones(getCS(), floor, zoneSel);
+		}
+		if (get(currentTool) === "zone") {
+			var _floor$zones$length, _floor$zones2, _floor$zones$length2, _floor$zones3;
+			const draftCam = resolveAreaCameraTarget();
+			const draftColor = draftCam ? resolveCameraAreaStyle(draftCam, (_floor$zones$length = floor === null || floor === void 0 || (_floor$zones2 = floor.zones) === null || _floor$zones2 === void 0 ? void 0 : _floor$zones2.length) !== null && _floor$zones$length !== void 0 ? _floor$zones$length : 0).color : nextZoneColor((_floor$zones$length2 = floor === null || floor === void 0 || (_floor$zones3 = floor.zones) === null || _floor$zones3 === void 0 ? void 0 : _floor$zones3.length) !== null && _floor$zones$length2 !== void 0 ? _floor$zones$length2 : 0);
+			if (get(zoneRectDragStart) && get(zoneRectDragCurrent)) drawZoneDraft(getCS(), rectPoints(get(zoneRectDragStart).x, get(zoneRectDragStart).y, get(zoneRectDragCurrent).x, get(zoneRectDragCurrent).y), draftColor, true);
+			else if (get(zonePolyDraft).length || get(zoneCursor)) drawZoneDraft(getCS(), get(zonePolyDraft), draftColor, false, get(zoneCursor));
+		}
 		drawMinimap$1();
 		requestAnimationFrame(draw);
 	}
@@ -66978,6 +67497,18 @@ function FloorPlanCanvas($$anchor, $$props) {
 			set(currentTool, t, true);
 			set(textAnnotationMode, t === "text");
 			if (t !== "text") set(editingTextAnnotationId, null);
+			if (t !== "zone") {
+				set(zonePolyDraft, [], true);
+				set(zoneRectDragStart, null);
+				set(zoneRectDragCurrent, null);
+			}
+			markDirty();
+		});
+		const unsubZoneShape = placingZoneShape.subscribe((s) => {
+			set(currentZoneShape, s, true);
+			set(zonePolyDraft, [], true);
+			set(zoneRectDragStart, null);
+			set(zoneRectDragCurrent, null);
 			markDirty();
 		});
 		const unsub7 = detectedRoomsStore.subscribe((rooms) => {
@@ -67081,6 +67612,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			unsub4();
 			unsub5();
 			unsub6();
+			unsubZoneShape();
 			unsub7();
 			unsub8();
 			unsub9();
@@ -67263,7 +67795,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 		return findRoomAt(p, get(detectedRooms), get(currentFloor).walls);
 	}
 	function onMouseDown(e) {
-		var _$$get6;
+		var _$$get8, _$$get9;
 		if ($$props.viewOnly) return;
 		markDirty();
 		if (e.button === 1 || e.button === 0 && (get(spaceDown) || $panMode() || e.shiftKey && get(currentTool) === "select")) {
@@ -67344,7 +67876,61 @@ function FloorPlanCanvas($$anchor, $$props) {
 			placingStair.set(false);
 			return;
 		}
-		if (tool === "select" && ((_$$get6 = get(currentFloor)) === null || _$$get6 === void 0 ? void 0 : _$$get6.guides)) {
+		if (tool === "zone") {
+			const snapped = {
+				x: snap(wp.x),
+				y: snap(wp.y)
+			};
+			if (get(currentZoneShape) === "rectangle") {
+				set(zoneRectDragStart, snapped, true);
+				set(zoneRectDragCurrent, snapped, true);
+				return;
+			}
+			if (get(currentZoneShape) === "triangle") {
+				const id = commitAreaShape("triangle", trianglePoints(snapped));
+				set(selectedZoneId, id, true);
+				selectedElementId.set(id);
+				selectedTool.set("select");
+				return;
+			}
+			if (get(zonePolyDraft).length >= 3 && isNearPoint(snapped, get(zonePolyDraft)[0], 15 / get(zoom))) {
+				const id = commitAreaShape("polygon", get(zonePolyDraft));
+				set(zonePolyDraft, [], true);
+				set(zoneCursor, null);
+				set(selectedZoneId, id, true);
+				selectedElementId.set(id);
+				selectedTool.set("select");
+				return;
+			}
+			set(zonePolyDraft, [...get(zonePolyDraft), snapped], true);
+			return;
+		}
+		if (tool === "select" && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 || (_$$get8 = _$$get8.zones) === null || _$$get8 === void 0 ? void 0 : _$$get8.length) && get(layerVis).zones) {
+			const zHit = findZoneAt(wp, get(currentFloor).zones, get(zoom));
+			if (zHit) {
+				set(selectedZoneId, zHit.id, true);
+				selectedElementId.set(zHit.id);
+				set(selectedTextAnnotationId, null);
+				set(selectedAnnotationId, null);
+				set(selectedMeasurementId, null);
+				const vIdx = findZoneVertexAt(wp, zHit, get(zoom));
+				beginUndoGroup();
+				if (vIdx >= 0) {
+					set(draggingZoneId, zHit.id, true);
+					set(draggingZoneVertex, vIdx, true);
+				} else {
+					set(draggingZoneId, zHit.id, true);
+					set(draggingZoneVertex, null);
+					set(zoneDragLast, {
+						x: wp.x,
+						y: wp.y
+					}, true);
+				}
+				return;
+			}
+			set(selectedZoneId, null);
+		}
+		if (tool === "select" && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.guides)) {
 			const GUIDE_HIT = 6 / get(zoom);
 			for (const g of get(currentFloor).guides) {
 				if (g.orientation === "horizontal" && Math.abs(wp.y - g.position) < GUIDE_HIT) {
@@ -67413,9 +67999,9 @@ function FloorPlanCanvas($$anchor, $$props) {
 					const dist = Math.hypot(newPts[1].x - newPts[0].x, newPts[1].y - newPts[0].y);
 					const realDist = prompt("Enter the real-world distance between these two points (in cm):");
 					if (realDist && Number(realDist) > 0) {
-						var _$$get7;
+						var _$$get10;
 						const pixelsPerCm = dist / Number(realDist);
-						if ((_$$get7 = get(currentFloor)) === null || _$$get7 === void 0 ? void 0 : _$$get7.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
+						if ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.backgroundImage) updateBackgroundImage({ scale: get(currentFloor).backgroundImage.scale * (1 / pixelsPerCm) });
 					}
 					calibrationMode.set(false);
 					return [];
@@ -67765,6 +68351,15 @@ function FloorPlanCanvas($$anchor, $$props) {
 				return;
 			}
 		}
+		if (get(currentTool) === "zone" && get(currentZoneShape) === "polygon" && get(zonePolyDraft).length >= 3) {
+			const id = commitAreaShape("polygon", get(zonePolyDraft));
+			set(zonePolyDraft, [], true);
+			set(zoneCursor, null);
+			set(selectedZoneId, id, true);
+			selectedElementId.set(id);
+			selectedTool.set("select");
+			return;
+		}
 		if (get(currentTool) === "select") {
 			const wp = screenToWorld(sx, sy);
 			const wall = findWallAt$1(wp);
@@ -67785,11 +68380,47 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	function onMouseMove(e) {
-		var _$$get8, _$$get9, _$$get10, _$$get11;
+		var _$$get11, _$$get12, _$$get13, _$$get14, _$$get15;
 		if ($$props.viewOnly) return;
 		markDirty();
 		const rect = canvas.getBoundingClientRect();
 		set(mousePos, screenToWorld(e.clientX - rect.left, e.clientY - rect.top), true);
+		if (get(zoneRectDragStart) && get(currentTool) === "zone") {
+			set(zoneRectDragCurrent, {
+				x: snap(get(mousePos).x),
+				y: snap(get(mousePos).y)
+			}, true);
+			return;
+		}
+		if (get(currentTool) === "zone" && get(currentZoneShape) === "polygon") set(zoneCursor, {
+			x: snap(get(mousePos).x),
+			y: snap(get(mousePos).y)
+		}, true);
+		if (get(draggingZoneId) && ((_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.zones)) {
+			const z = get(currentFloor).zones.find((z) => z.id === get(draggingZoneId));
+			if (z) {
+				const snapped = {
+					x: snap(get(mousePos).x),
+					y: snap(get(mousePos).y)
+				};
+				if (get(draggingZoneVertex) != null) if (z.shape === "rectangle" && z.points.length === 4) moveZonePoints(z.id, resizeRectCorner(z.points, get(draggingZoneVertex), snapped));
+				else {
+					const next = z.points.map((p) => ({ ...p }));
+					next[get(draggingZoneVertex)] = snapped;
+					moveZonePoints(z.id, next);
+				}
+				else if (get(zoneDragLast)) {
+					const dx = get(mousePos).x - get(zoneDragLast).x;
+					const dy = get(mousePos).y - get(zoneDragLast).y;
+					set(zoneDragLast, {
+						x: get(mousePos).x,
+						y: get(mousePos).y
+					}, true);
+					moveZonePoints(z.id, translatePoints(z.points, dx, dy));
+				}
+			}
+			return;
+		}
 		if (get(draggingRoomLabelId)) {
 			const dx = get(mousePos).x - roomLabelDragStart.x;
 			const dy = get(mousePos).y - roomLabelDragStart.y;
@@ -67803,7 +68434,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			} : r));
 			return;
 		}
-		if (get(draggingGuideId) && ((_$$get8 = get(currentFloor)) === null || _$$get8 === void 0 ? void 0 : _$$get8.guides)) {
+		if (get(draggingGuideId) && ((_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.guides)) {
 			const g = get(currentFloor).guides.find((g) => g.id === get(draggingGuideId));
 			if (g) {
 				const newPos = g.orientation === "horizontal" ? get(mousePos).y : get(mousePos).x;
@@ -67959,7 +68590,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}
 			}
 		}
-		if (get(draggingTextAnnotationId) && ((_$$get9 = get(currentFloor)) === null || _$$get9 === void 0 ? void 0 : _$$get9.textAnnotations)) {
+		if (get(draggingTextAnnotationId) && ((_$$get13 = get(currentFloor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.textAnnotations)) {
 			const basePos = {
 				x: get(mousePos).x - textAnnotationDragOffset.x,
 				y: get(mousePos).y - textAnnotationDragOffset.y
@@ -67976,7 +68607,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				}, true);
 			}
 		}
-		if (get(draggingColumnId) && ((_$$get10 = get(currentFloor)) === null || _$$get10 === void 0 ? void 0 : _$$get10.columns)) {
+		if (get(draggingColumnId) && ((_$$get14 = get(currentFloor)) === null || _$$get14 === void 0 ? void 0 : _$$get14.columns)) {
 			const basePos = {
 				x: get(mousePos).x - columnDragOffset.x,
 				y: get(mousePos).y - columnDragOffset.y
@@ -67986,7 +68617,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				y: snap(basePos.y)
 			});
 		}
-		if (get(draggingStairId) && ((_$$get11 = get(currentFloor)) === null || _$$get11 === void 0 ? void 0 : _$$get11.stairs)) {
+		if (get(draggingStairId) && ((_$$get15 = get(currentFloor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.stairs)) {
 			const basePos = {
 				x: get(mousePos).x - stairDragOffset.x,
 				y: get(mousePos).y - stairDragOffset.y
@@ -67997,12 +68628,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 		}
 		if (get(draggingFurnitureId)) {
-			var _$$get12;
+			var _$$get16;
 			const basePos = {
 				x: get(mousePos).x - dragOffset.x,
 				y: get(mousePos).y - dragOffset.y
 			};
-			const fi = (_$$get12 = get(currentFloor)) === null || _$$get12 === void 0 ? void 0 : _$$get12.furniture.find((f) => f.id === get(draggingFurnitureId));
+			const fi = (_$$get16 = get(currentFloor)) === null || _$$get16 === void 0 ? void 0 : _$$get16.furniture.find((f) => f.id === get(draggingFurnitureId));
 			if (fi) {
 				const wallSnap = snapFurnitureToWall(basePos, fi.catalogId, fi.rotation);
 				if (wallSnap) {
@@ -68015,13 +68646,13 @@ function FloorPlanCanvas($$anchor, $$props) {
 						wallAngle: wallSnap.wallAngle
 					}, true);
 				} else {
-					var _$$get13;
+					var _$$get17;
 					const snapped = {
 						x: snap(basePos.x),
 						y: snap(basePos.y)
 					};
 					const GUIDE_SNAP = 10;
-					if ((_$$get13 = get(currentFloor)) === null || _$$get13 === void 0 ? void 0 : _$$get13.guides) for (const g of get(currentFloor).guides) {
+					if ((_$$get17 = get(currentFloor)) === null || _$$get17 === void 0 ? void 0 : _$$get17.guides) for (const g of get(currentFloor).guides) {
 						if (g.orientation === "horizontal" && Math.abs(snapped.y - g.position) < GUIDE_SNAP) snapped.y = g.position;
 						if (g.orientation === "vertical" && Math.abs(snapped.x - g.position) < GUIDE_SNAP) snapped.x = g.position;
 					}
@@ -68071,6 +68702,26 @@ function FloorPlanCanvas($$anchor, $$props) {
 		markDirty();
 		set(isPanning, false);
 		set(draggingGuideId, null);
+		if (get(zoneRectDragStart) && get(zoneRectDragCurrent) && get(currentTool) === "zone") {
+			const pts = rectPoints(get(zoneRectDragStart).x, get(zoneRectDragStart).y, get(zoneRectDragCurrent).x, get(zoneRectDragCurrent).y);
+			const w = Math.abs(get(zoneRectDragCurrent).x - get(zoneRectDragStart).x);
+			const h = Math.abs(get(zoneRectDragCurrent).y - get(zoneRectDragStart).y);
+			set(zoneRectDragStart, null);
+			set(zoneRectDragCurrent, null);
+			if (w > 5 && h > 5) {
+				const id = commitAreaShape("rectangle", pts);
+				set(selectedZoneId, id, true);
+				selectedElementId.set(id);
+				selectedTool.set("select");
+			}
+			return;
+		}
+		if (get(draggingZoneId)) {
+			endUndoGroup();
+			set(draggingZoneId, null);
+			set(draggingZoneVertex, null);
+			set(zoneDragLast, null);
+		}
 		if (get(draggingRoomLabelId)) {
 			const dx = get(mousePos).x - roomLabelDragStart.x;
 			const dy = get(mousePos).y - roomLabelDragStart.y;
@@ -68239,6 +68890,20 @@ function FloorPlanCanvas($$anchor, $$props) {
 			set(annotationStart, null);
 			set(marqueeStart, null);
 			set(marqueeEnd, null);
+			set(zonePolyDraft, [], true);
+			set(zoneCursor, null);
+			set(zoneRectDragStart, null);
+			set(zoneRectDragCurrent, null);
+		}
+		if (e.key === "Enter" && get(currentTool) === "zone" && get(currentZoneShape) === "polygon" && get(zonePolyDraft).length >= 3) {
+			const id = commitAreaShape("polygon", get(zonePolyDraft));
+			set(zonePolyDraft, [], true);
+			set(zoneCursor, null);
+			set(selectedZoneId, id, true);
+			selectedElementId.set(id);
+			selectedTool.set("select");
+			e.preventDefault();
+			return;
 		}
 		if ((e.ctrlKey || e.metaKey) && e.key === "a" && !e.shiftKey) {
 			e.preventDefault();
@@ -68717,8 +69382,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		}
 	}
 	let cursorStyle = /* @__PURE__ */ user_derived(() => {
-		var _$$get14;
-		return get(spaceDown) || get(isPanning) || $panMode() || get(shiftDown) && get(currentTool) === "select" ? "grab" : get(draggingFurnitureId) ? "move" : get(draggingRoomId) ? "move" : get(draggingMultiSelect) ? "move" : get(draggingDoorId) ? "move" : get(draggingWindowId) ? "move" : get(draggingStairId) ? "move" : get(draggingColumnId) ? "move" : get(draggingTextAnnotationId) ? "move" : get(draggingWallParallel) ? "move" : get(draggingCurveHandle) ? "crosshair" : get(draggingWallEndpoint) ? "crosshair" : get(draggingHandle) === "rotate" ? "grabbing" : get(draggingHandle) === "resize-t" || get(draggingHandle) === "resize-b" ? "ns-resize" : get(draggingHandle) === "resize-l" || get(draggingHandle) === "resize-r" ? "ew-resize" : ((_$$get14 = get(draggingHandle)) === null || _$$get14 === void 0 ? void 0 : _$$get14.startsWith("resize")) ? "nwse-resize" : get(currentTool) === "text" ? "text" : get(currentTool) === "select" ? "default" : get(currentTool) === "furniture" ? "copy" : get(currentTool) === "door" || get(currentTool) === "window" ? get(placementPreview) ? "crosshair" : "not-allowed" : "crosshair";
+		var _$$get18;
+		return get(spaceDown) || get(isPanning) || $panMode() || get(shiftDown) && get(currentTool) === "select" ? "grab" : get(draggingFurnitureId) ? "move" : get(draggingRoomId) ? "move" : get(draggingMultiSelect) ? "move" : get(draggingDoorId) ? "move" : get(draggingWindowId) ? "move" : get(draggingStairId) ? "move" : get(draggingColumnId) ? "move" : get(draggingTextAnnotationId) ? "move" : get(draggingZoneId) ? "move" : get(draggingWallParallel) ? "move" : get(draggingCurveHandle) ? "crosshair" : get(draggingWallEndpoint) ? "crosshair" : get(draggingHandle) === "rotate" ? "grabbing" : get(draggingHandle) === "resize-t" || get(draggingHandle) === "resize-b" ? "ns-resize" : get(draggingHandle) === "resize-l" || get(draggingHandle) === "resize-r" ? "ew-resize" : ((_$$get18 = get(draggingHandle)) === null || _$$get18 === void 0 ? void 0 : _$$get18.startsWith("resize")) ? "nwse-resize" : get(currentTool) === "text" ? "text" : get(currentTool) === "select" ? "default" : get(currentTool) === "furniture" ? "copy" : get(currentTool) === "door" || get(currentTool) === "window" ? get(placementPreview) ? "crosshair" : "not-allowed" : "crosshair";
 	});
 	var div = root$1();
 	event("keydown", $window, onKeyDown);
@@ -68730,22 +69395,11 @@ function FloorPlanCanvas($$anchor, $$props) {
 	reset(div_1);
 	bind_this(div_1, ($$value) => canvasFrame = $$value, () => canvasFrame);
 	var node = sibling(div_1, 2);
-	var consequent = ($$anchor) => {
-		var div_2 = root_1$4();
-		var text_1 = child(div_2, true);
-		reset(div_2);
-		template_effect(() => set_text(text_1, $$props.projectName));
-		append($$anchor, div_2);
-	};
-	if_block(node, ($$render) => {
-		if ($$props.viewOnly && $$props.projectName) $$render(consequent);
-	});
-	var node_1 = sibling(node, 2);
-	var consequent_22 = ($$anchor) => {
-		var fragment = root_2$4();
-		var node_2 = first_child(fragment);
-		var consequent_1 = ($$anchor) => {
-			var input = root_3$3();
+	var consequent_21 = ($$anchor) => {
+		var fragment = root_1$4();
+		var node_1 = first_child(fragment);
+		var consequent = ($$anchor) => {
+			var input = root_2$4();
 			remove_input_defaults(input);
 			autofocus(input, true);
 			template_effect(() => {
@@ -68778,12 +69432,12 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 			append($$anchor, input);
 		};
-		if_block(node_2, ($$render) => {
-			if (get(editingRoomId)) $$render(consequent_1);
+		if_block(node_1, ($$render) => {
+			if (get(editingRoomId)) $$render(consequent);
 		});
-		var node_3 = sibling(node_2, 2);
-		var consequent_2 = ($$anchor) => {
-			var input_1 = root_4$2();
+		var node_2 = sibling(node_1, 2);
+		var consequent_1 = ($$anchor) => {
+			var input_1 = root_3$3();
 			remove_input_defaults(input_1);
 			autofocus(input_1, true);
 			template_effect(() => {
@@ -68805,8 +69459,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 					}
 					set(editingTextAnnotationId, null);
 				} else if (e.key === "Escape") {
-					var _$$get15;
-					if ((_$$get15 = get(currentFloor)) === null || _$$get15 === void 0 ? void 0 : _$$get15.textAnnotations) {
+					var _$$get19;
+					if ((_$$get19 = get(currentFloor)) === null || _$$get19 === void 0 ? void 0 : _$$get19.textAnnotations) {
 						const ta = get(currentFloor).textAnnotations.find((t) => t.id === get(editingTextAnnotationId));
 						if (ta && ta.text === "Text" && !get(editingTextAnnotationValue).trim()) {
 							removeTextAnnotation(get(editingTextAnnotationId));
@@ -68830,151 +69484,151 @@ function FloorPlanCanvas($$anchor, $$props) {
 			});
 			append($$anchor, input_1);
 		};
+		if_block(node_2, ($$render) => {
+			if (get(editingTextAnnotationId)) $$render(consequent_1);
+		});
+		var node_3 = sibling(node_2, 2);
+		var consequent_2 = ($$anchor) => {
+			append($$anchor, root_4$2());
+		};
 		if_block(node_3, ($$render) => {
-			if (get(editingTextAnnotationId)) $$render(consequent_2);
+			if (get(currentFloor) && get(currentFloor).walls.length === 0 && get(currentFloor).furniture.length === 0 && get(currentFloor).doors.length === 0 && !$$props.viewOnly) $$render(consequent_2);
 		});
 		var node_4 = sibling(node_3, 2);
 		var consequent_3 = ($$anchor) => {
-			append($$anchor, root_5());
-		};
-		if_block(node_4, ($$render) => {
-			if (get(currentFloor) && get(currentFloor).walls.length === 0 && get(currentFloor).furniture.length === 0 && get(currentFloor).doors.length === 0 && !$$props.viewOnly) $$render(consequent_3);
-		});
-		var node_5 = sibling(node_4, 2);
-		var consequent_4 = ($$anchor) => {
-			var canvas_2 = root_6();
+			var canvas_2 = root_5();
 			bind_this(canvas_2, ($$value) => minimapCanvas = $$value, () => minimapCanvas);
 			delegated("click", canvas_2, onMinimapClick);
 			append($$anchor, canvas_2);
 		};
-		if_block(node_5, ($$render) => {
-			if (!$$props.viewOnly && get(showMinimap) && get(currentFloor) && get(currentFloor).walls.length > 0) $$render(consequent_4);
+		if_block(node_4, ($$render) => {
+			if (!$$props.viewOnly && get(showMinimap) && get(currentFloor) && get(currentFloor).walls.length > 0) $$render(consequent_3);
 		});
-		var node_6 = sibling(node_5, 2);
-		var consequent_11 = ($$anchor) => {
-			var div_4 = root_7$1();
-			var node_7 = child(div_4);
-			var consequent_5 = ($$anchor) => {
-				var fragment_1 = root_8();
+		var node_5 = sibling(node_4, 2);
+		var consequent_10 = ($$anchor) => {
+			var div_3 = root_6();
+			var node_6 = child(div_3);
+			var consequent_4 = ($$anchor) => {
+				var fragment_1 = root_7$1();
 				var span = first_child(fragment_1);
-				var text_2 = child(span);
+				var text_1 = child(span);
 				reset(span);
 				var span_1 = sibling(span, 2);
-				var text_3 = child(span_1, true);
+				var text_2 = child(span_1, true);
 				reset(span_1);
 				next(2);
 				template_effect(($0) => {
 					var _$$get$length;
-					set_text(text_2, `${(_$$get$length = get(detectedRooms).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} room${get(detectedRooms).length !== 1 ? "s" : ""}`);
-					set_text(text_3, $0);
+					set_text(text_1, `${(_$$get$length = get(detectedRooms).length) !== null && _$$get$length !== void 0 ? _$$get$length : ""} room${get(detectedRooms).length !== 1 ? "s" : ""}`);
+					set_text(text_2, $0);
 				}, [() => formatArea(get(detectedRooms).reduce((s, r) => s + r.area, 0), $projectSettings().units)]);
 				append($$anchor, fragment_1);
 			};
-			if_block(node_7, ($$render) => {
-				if (get(detectedRooms).length > 0) $$render(consequent_5);
+			if_block(node_6, ($$render) => {
+				if (get(detectedRooms).length > 0) $$render(consequent_4);
 			});
-			var node_8 = sibling(node_7, 2);
-			var consequent_9 = ($$anchor) => {
-				var fragment_2 = root_9();
+			var node_7 = sibling(node_6, 2);
+			var consequent_8 = ($$anchor) => {
+				var fragment_2 = root_8();
 				var span_2 = first_child(fragment_2);
-				var text_4 = child(span_2);
+				var text_3 = child(span_2);
 				reset(span_2);
-				var node_9 = sibling(span_2, 2);
-				var consequent_6 = ($$anchor) => {
-					var span_3 = root_10();
-					var text_5 = child(span_3);
+				var node_8 = sibling(span_2, 2);
+				var consequent_5 = ($$anchor) => {
+					var span_3 = root_9();
+					var text_4 = child(span_3);
 					reset(span_3);
 					template_effect(() => {
 						var _$$get$doors$length;
-						return set_text(text_5, `${(_$$get$doors$length = get(currentFloor).doors.length) !== null && _$$get$doors$length !== void 0 ? _$$get$doors$length : ""} door${get(currentFloor).doors.length !== 1 ? "s" : ""}`);
+						return set_text(text_4, `${(_$$get$doors$length = get(currentFloor).doors.length) !== null && _$$get$doors$length !== void 0 ? _$$get$doors$length : ""} door${get(currentFloor).doors.length !== 1 ? "s" : ""}`);
 					});
 					append($$anchor, span_3);
 				};
-				if_block(node_9, ($$render) => {
-					if (get(currentFloor).doors.length > 0) $$render(consequent_6);
+				if_block(node_8, ($$render) => {
+					if (get(currentFloor).doors.length > 0) $$render(consequent_5);
 				});
-				var node_10 = sibling(node_9, 2);
-				var consequent_7 = ($$anchor) => {
-					var span_4 = root_11();
-					var text_6 = child(span_4);
+				var node_9 = sibling(node_8, 2);
+				var consequent_6 = ($$anchor) => {
+					var span_4 = root_10();
+					var text_5 = child(span_4);
 					reset(span_4);
 					template_effect(() => {
 						var _$$get$windows$length;
-						return set_text(text_6, `${(_$$get$windows$length = get(currentFloor).windows.length) !== null && _$$get$windows$length !== void 0 ? _$$get$windows$length : ""} window${get(currentFloor).windows.length !== 1 ? "s" : ""}`);
+						return set_text(text_5, `${(_$$get$windows$length = get(currentFloor).windows.length) !== null && _$$get$windows$length !== void 0 ? _$$get$windows$length : ""} window${get(currentFloor).windows.length !== 1 ? "s" : ""}`);
 					});
 					append($$anchor, span_4);
 				};
-				if_block(node_10, ($$render) => {
-					if (get(currentFloor).windows.length > 0) $$render(consequent_7);
+				if_block(node_9, ($$render) => {
+					if (get(currentFloor).windows.length > 0) $$render(consequent_6);
 				});
-				var node_11 = sibling(node_10, 2);
-				var consequent_8 = ($$anchor) => {
-					var span_5 = root_12();
-					var text_7 = child(span_5);
+				var node_10 = sibling(node_9, 2);
+				var consequent_7 = ($$anchor) => {
+					var span_5 = root_11();
+					var text_6 = child(span_5);
 					reset(span_5);
 					template_effect(() => {
 						var _$$get$furniture$leng;
-						return set_text(text_7, `${(_$$get$furniture$leng = get(currentFloor).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} object${get(currentFloor).furniture.length !== 1 ? "s" : ""}`);
+						return set_text(text_6, `${(_$$get$furniture$leng = get(currentFloor).furniture.length) !== null && _$$get$furniture$leng !== void 0 ? _$$get$furniture$leng : ""} object${get(currentFloor).furniture.length !== 1 ? "s" : ""}`);
 					});
 					append($$anchor, span_5);
 				};
-				if_block(node_11, ($$render) => {
-					if (get(currentFloor).furniture.length > 0) $$render(consequent_8);
+				if_block(node_10, ($$render) => {
+					if (get(currentFloor).furniture.length > 0) $$render(consequent_7);
 				});
 				next(2);
 				template_effect(() => {
 					var _$$get$walls$length;
-					return set_text(text_4, `${(_$$get$walls$length = get(currentFloor).walls.length) !== null && _$$get$walls$length !== void 0 ? _$$get$walls$length : ""} wall${get(currentFloor).walls.length !== 1 ? "s" : ""}`);
+					return set_text(text_3, `${(_$$get$walls$length = get(currentFloor).walls.length) !== null && _$$get$walls$length !== void 0 ? _$$get$walls$length : ""} wall${get(currentFloor).walls.length !== 1 ? "s" : ""}`);
 				});
 				append($$anchor, fragment_2);
 			};
-			if_block(node_8, ($$render) => {
-				if (get(currentFloor)) $$render(consequent_9);
+			if_block(node_7, ($$render) => {
+				if (get(currentFloor)) $$render(consequent_8);
 			});
-			var node_12 = sibling(node_8, 2);
-			var consequent_10 = ($$anchor) => {
-				var fragment_3 = root_13();
+			var node_11 = sibling(node_7, 2);
+			var consequent_9 = ($$anchor) => {
+				var fragment_3 = root_12();
 				var span_6 = first_child(fragment_3);
-				var text_8 = child(span_6);
+				var text_7 = child(span_6);
 				reset(span_6);
 				next(2);
 				template_effect(() => {
 					var _$$get$size;
-					return set_text(text_8, `${(_$$get$size = get(currentSelectedIds).size) !== null && _$$get$size !== void 0 ? _$$get$size : ""} selected`);
+					return set_text(text_7, `${(_$$get$size = get(currentSelectedIds).size) !== null && _$$get$size !== void 0 ? _$$get$size : ""} selected`);
 				});
 				append($$anchor, fragment_3);
 			};
-			if_block(node_12, ($$render) => {
-				if (get(currentSelectedIds).size > 1) $$render(consequent_10);
+			if_block(node_11, ($$render) => {
+				if (get(currentSelectedIds).size > 1) $$render(consequent_9);
 			});
-			var span_7 = sibling(node_12, 2);
-			var text_9 = child(span_7);
+			var span_7 = sibling(node_11, 2);
+			var text_8 = child(span_7);
 			reset(span_7);
 			var button = sibling(span_7, 2);
 			var button_1 = sibling(button, 2);
-			var text_10 = child(button_1);
+			var text_9 = child(button_1);
 			reset(button_1);
 			var button_2 = sibling(button_1, 2);
-			var text_11 = child(button_2);
+			var text_10 = child(button_2);
 			reset(button_2);
 			var button_3 = sibling(button_2, 2);
-			var text_12 = child(button_3);
+			var text_11 = child(button_3);
 			reset(button_3);
 			var button_4 = sibling(button_3, 2);
 			var button_5 = sibling(button_4, 2);
-			var text_13 = child(button_5);
+			var text_12 = child(button_5);
 			reset(button_5);
 			var button_6 = sibling(button_5, 2);
-			var text_14 = child(button_6);
-			text_14.nodeValue = "🗺 Map";
+			var text_13 = child(button_6);
+			text_13.nodeValue = "🗺 Map";
 			reset(button_6);
-			reset(div_4);
+			reset(div_3);
 			template_effect(($0) => {
-				set_text(text_9, `Zoom: ${$0 !== null && $0 !== void 0 ? $0 : ""}%`);
-				set_text(text_10, `${get(showGrid) ? "▦" : "▢"} Grid`);
-				set_text(text_11, `${get(currentSnapToGrid) ? "🧲" : "↔"} Snap`);
-				set_text(text_12, `${get(showFurniture) ? "🪑" : "👻"} Furniture`);
-				set_text(text_13, `${get(showRulers) ? "📏" : "📐"} Rulers`);
+				set_text(text_8, `Zoom: ${$0 !== null && $0 !== void 0 ? $0 : ""}%`);
+				set_text(text_9, `${get(showGrid) ? "▦" : "▢"} Grid`);
+				set_text(text_10, `${get(currentSnapToGrid) ? "🧲" : "↔"} Snap`);
+				set_text(text_11, `${get(showFurniture) ? "🪑" : "👻"} Furniture`);
+				set_text(text_12, `${get(showRulers) ? "📏" : "📐"} Rulers`);
 			}, [() => Math.round(get(zoom) * 100)]);
 			delegated("click", button, () => zoomToFit());
 			delegated("click", button_1, () => set(showGrid, !get(showGrid)));
@@ -68989,38 +69643,39 @@ function FloorPlanCanvas($$anchor, $$props) {
 			delegated("click", button_4, () => set(showLayerPanel, !get(showLayerPanel)));
 			delegated("click", button_5, () => set(showRulers, !get(showRulers)));
 			delegated("click", button_6, () => set(showMinimap, !get(showMinimap)));
-			append($$anchor, div_4);
+			append($$anchor, div_3);
 		};
-		if_block(node_6, ($$render) => {
-			if (!$$props.viewOnly) $$render(consequent_11);
+		if_block(node_5, ($$render) => {
+			if (!$$props.viewOnly) $$render(consequent_10);
 		});
-		var node_13 = sibling(node_6, 2);
-		var consequent_12 = ($$anchor) => {
-			var div_5 = root_14();
-			var node_14 = sibling(child(div_5), 2);
-			each(node_14, 16, () => [
+		var node_12 = sibling(node_5, 2);
+		var consequent_11 = ($$anchor) => {
+			var div_4 = root_13();
+			var node_13 = sibling(child(div_4), 2);
+			each(node_13, 16, () => [
 				["walls", "Walls"],
 				["doors", "Doors"],
 				["windows", "Windows"],
 				["furniture", "Furniture"],
 				["stairs", "Stairs"],
 				["columns", "Columns"],
+				["zones", "Areas"],
 				["guides", "Guides"],
 				["measurements", "Measurements"]
 			], index$1, ($$anchor, $$item) => {
 				var $$array = /* @__PURE__ */ user_derived(() => to_array($$item, 2));
 				let key = () => get($$array)[0];
 				let label = () => get($$array)[1];
-				var label_1 = root_15();
+				var label_1 = root_14();
 				var input_2 = child(label_1);
 				remove_input_defaults(input_2);
 				var span_8 = sibling(input_2, 2);
-				var text_15 = child(span_8, true);
+				var text_14 = child(span_8, true);
 				reset(span_8);
 				reset(label_1);
 				template_effect(() => {
 					set_checked(input_2, get(layerVis)[key()]);
-					set_text(text_15, label());
+					set_text(text_14, label());
 				});
 				delegated("change", input_2, () => layerVisibility.update((v) => ({
 					...v,
@@ -69028,7 +69683,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 				})));
 				append($$anchor, label_1);
 			});
-			var label_2 = sibling(node_14, 4);
+			var label_2 = sibling(node_13, 4);
 			var input_3 = child(label_2);
 			remove_input_defaults(input_3);
 			next(2);
@@ -69038,16 +69693,16 @@ function FloorPlanCanvas($$anchor, $$props) {
 			remove_input_defaults(input_4);
 			next(2);
 			reset(label_3);
-			reset(div_5);
+			reset(div_4);
 			bind_checked(input_3, () => get(showRoomLabels), ($$value) => set(showRoomLabels, $$value));
 			bind_checked(input_4, () => get(showDimensions), ($$value) => set(showDimensions, $$value));
-			append($$anchor, div_5);
+			append($$anchor, div_4);
 		};
-		if_block(node_13, ($$render) => {
-			if (get(showLayerPanel)) $$render(consequent_12);
+		if_block(node_12, ($$render) => {
+			if (get(showLayerPanel)) $$render(consequent_11);
 		});
-		var node_15 = sibling(node_13, 2);
-		var consequent_16 = ($$anchor) => {
+		var node_14 = sibling(node_12, 2);
+		var consequent_15 = ($$anchor) => {
 			const el = /* @__PURE__ */ user_derived(() => (() => {
 				const f = get(currentFloor);
 				const wall = f.walls.find((w) => w.id === get(currentSelectedId));
@@ -69080,24 +69735,24 @@ function FloorPlanCanvas($$anchor, $$props) {
 				return null;
 			})());
 			var fragment_4 = comment();
-			var node_16 = first_child(fragment_4);
-			var consequent_15 = ($$anchor) => {
-				var div_6 = root_17();
-				var button_7 = child(div_6);
-				var node_17 = sibling(button_7, 2);
-				var consequent_13 = ($$anchor) => {
-					var button_8 = root_18();
+			var node_15 = first_child(fragment_4);
+			var consequent_14 = ($$anchor) => {
+				var div_5 = root_16();
+				var button_7 = child(div_5);
+				var node_16 = sibling(button_7, 2);
+				var consequent_12 = ($$anchor) => {
+					var button_8 = root_17();
 					delegated("click", button_8, () => {
 						if (get(el).door) updateDoor(get(el).door.id, { swingDirection: get(el).door.swingDirection === "left" ? "right" : "left" });
 					});
 					append($$anchor, button_8);
 				};
-				if_block(node_17, ($$render) => {
-					if (get(el).type === "door" && get(el).door) $$render(consequent_13);
+				if_block(node_16, ($$render) => {
+					if (get(el).type === "door" && get(el).door) $$render(consequent_12);
 				});
-				var node_18 = sibling(node_17, 2);
-				var consequent_14 = ($$anchor) => {
-					var button_9 = root_19();
+				var node_17 = sibling(node_16, 2);
+				var consequent_13 = ($$anchor) => {
+					var button_9 = root_18();
 					delegated("click", button_9, () => {
 						if (get(currentSelectedId)) {
 							if (splitWall(get(currentSelectedId), .5)) selectedElementId.set(null);
@@ -69105,14 +69760,14 @@ function FloorPlanCanvas($$anchor, $$props) {
 					});
 					append($$anchor, button_9);
 				};
-				if_block(node_18, ($$render) => {
-					if (get(el).type === "wall" && get(currentSelectedId) && get(currentSelectedIds).size === 0) $$render(consequent_14);
+				if_block(node_17, ($$render) => {
+					if (get(el).type === "wall" && get(currentSelectedId) && get(currentSelectedIds).size === 0) $$render(consequent_13);
 				});
-				var button_10 = sibling(node_18, 4);
-				reset(div_6);
+				var button_10 = sibling(node_17, 4);
+				reset(div_5);
 				template_effect(() => {
 					var _$$get$pos$x;
-					return set_style(div_6, `left: ${(_$$get$pos$x = get(el).pos.x) !== null && _$$get$pos$x !== void 0 ? _$$get$pos$x : ""}px; top: ${get(el).pos.y - 44}px; transform: translateX(-50%);`);
+					return set_style(div_5, `left: ${(_$$get$pos$x = get(el).pos.x) !== null && _$$get$pos$x !== void 0 ? _$$get$pos$x : ""}px; top: ${get(el).pos.y - 44}px; transform: translateX(-50%);`);
 				});
 				delegated("click", button_7, () => {
 					if (!get(currentSelectedId) || !get(currentFloor)) return;
@@ -69135,72 +69790,72 @@ function FloorPlanCanvas($$anchor, $$props) {
 						selectedElementId.set(null);
 					}
 				});
-				append($$anchor, div_6);
+				append($$anchor, div_5);
 			};
-			if_block(node_16, ($$render) => {
-				if (get(el)) $$render(consequent_15);
+			if_block(node_15, ($$render) => {
+				if (get(el)) $$render(consequent_14);
 			});
 			append($$anchor, fragment_4);
 		};
-		if_block(node_15, ($$render) => {
-			if ((get(currentSelectedId) || get(currentSelectedIds).size > 0) && get(currentFloor) && get(currentTool) === "select") $$render(consequent_16);
+		if_block(node_14, ($$render) => {
+			if ((get(currentSelectedId) || get(currentSelectedIds).size > 0) && get(currentFloor) && get(currentTool) === "select") $$render(consequent_15);
 		});
-		var node_19 = sibling(node_15, 2);
+		var node_18 = sibling(node_14, 2);
+		var consequent_16 = ($$anchor) => {
+			append($$anchor, root_19());
+		};
+		if_block(node_18, ($$render) => {
+			if (get(currentTool) === "wall" && get(wallStart)) $$render(consequent_16);
+		});
+		var node_19 = sibling(node_18, 2);
 		var consequent_17 = ($$anchor) => {
-			append($$anchor, root_20());
+			var div_7 = root_20();
+			var text_15 = child(div_7);
+			reset(div_7);
+			template_effect(() => {
+				var _$$get20;
+				return set_text(text_15, `Click to place · Scroll or R to rotate (${(_$$get20 = get(currentPlacingRotation)) !== null && _$$get20 !== void 0 ? _$$get20 : ""}°) · Esc
+        to cancel`);
+			});
+			append($$anchor, div_7);
 		};
 		if_block(node_19, ($$render) => {
-			if (get(currentTool) === "wall" && get(wallStart)) $$render(consequent_17);
+			if (get(currentPlacingId) && get(currentTool) === "furniture") $$render(consequent_17);
 		});
 		var node_20 = sibling(node_19, 2);
 		var consequent_18 = ($$anchor) => {
-			var div_8 = root_21();
-			var text_16 = child(div_8);
-			reset(div_8);
-			template_effect(() => {
-				var _$$get16;
-				return set_text(text_16, `Click to place · Scroll or R to rotate (${(_$$get16 = get(currentPlacingRotation)) !== null && _$$get16 !== void 0 ? _$$get16 : ""}°) · Esc
-        to cancel`);
-			});
-			append($$anchor, div_8);
+			append($$anchor, root_21());
 		};
 		if_block(node_20, ($$render) => {
-			if (get(currentPlacingId) && get(currentTool) === "furniture") $$render(consequent_18);
+			if (get(measuring)) $$render(consequent_18);
 		});
 		var node_21 = sibling(node_20, 2);
 		var consequent_19 = ($$anchor) => {
 			append($$anchor, root_22());
 		};
 		if_block(node_21, ($$render) => {
-			if (get(measuring)) $$render(consequent_19);
+			if (get(textAnnotationMode)) $$render(consequent_19);
 		});
 		var node_22 = sibling(node_21, 2);
 		var consequent_20 = ($$anchor) => {
-			append($$anchor, root_23());
+			var div_10 = root_23();
+			var text_16 = child(div_10);
+			reset(div_10);
+			template_effect(() => set_text(text_16, `${get(annotationStart) ? "Click second point to create annotation" : "Click first point"} · N to exit · Esc to cancel`));
+			append($$anchor, div_10);
 		};
 		if_block(node_22, ($$render) => {
-			if (get(textAnnotationMode)) $$render(consequent_20);
+			if (get(annotating)) $$render(consequent_20);
 		});
-		var node_23 = sibling(node_22, 2);
-		var consequent_21 = ($$anchor) => {
-			var div_11 = root_24();
-			var text_17 = child(div_11);
-			reset(div_11);
-			template_effect(() => set_text(text_17, `${get(annotationStart) ? "Click second point to create annotation" : "Click first point"} · N to exit · Esc to cancel`));
-			append($$anchor, div_11);
-		};
-		if_block(node_23, ($$render) => {
-			if (get(annotating)) $$render(consequent_21);
-		});
-		var div_12 = sibling(node_23, 2);
-		var button_11 = child(div_12);
+		var div_11 = sibling(node_22, 2);
+		var button_11 = child(div_11);
 		var button_12 = sibling(button_11, 2);
-		var text_18 = child(button_12);
+		var text_17 = child(button_12);
 		reset(button_12);
 		var button_13 = sibling(button_12, 2);
 		var button_14 = sibling(button_13, 4);
-		reset(div_12);
-		ContextMenu(sibling(div_12, 2), {
+		reset(div_11);
+		ContextMenu(sibling(div_11, 2), {
 			get x() {
 				return get(ctxMenuX);
 			},
@@ -69233,7 +69888,7 @@ function FloorPlanCanvas($$anchor, $$props) {
 			},
 			onaction: handleContextMenuAction
 		});
-		template_effect(($0) => set_text(text_18, `${$0 !== null && $0 !== void 0 ? $0 : ""}%`), [() => Math.round(get(zoom) * 100)]);
+		template_effect(($0) => set_text(text_17, `${$0 !== null && $0 !== void 0 ? $0 : ""}%`), [() => Math.round(get(zoom) * 100)]);
 		delegated("click", button_11, () => {
 			const newZoom = Math.max(.1, get(zoom) * .8);
 			const worldCX = (get(width) / 2 - get(width) / 2) / get(zoom) + get(camX);
@@ -69254,8 +69909,8 @@ function FloorPlanCanvas($$anchor, $$props) {
 		delegated("click", button_14, () => zoomToFit());
 		append($$anchor, fragment);
 	};
-	if_block(node_1, ($$render) => {
-		if (!$$props.viewOnly) $$render(consequent_22);
+	if_block(node, ($$render) => {
+		if (!$$props.viewOnly) $$render(consequent_21);
 	});
 	reset(div);
 	template_effect(($0) => {
@@ -70366,12 +71021,14 @@ function syncAssignedCameras(assigned) {
 			if (!propsEqual(item.props, nextProps) || item.name !== nextProps.name) applyCameraProps(item.id, assignedCam);
 		}
 		if (!hasFloorLayout) {
+			syncZonesFromAssigned(assignedBySerial, hostDrivesAssignment);
 			if (hostDrivesAssignment || newSerials.size > 0) lastSyncedSerials = newSerials;
 			return;
 		}
 		const center = getFloorCenter(floorAfterRemove);
 		if (!center) {
 			rejectNoFloor(toAdd);
+			syncZonesFromAssigned(assignedBySerial, hostDrivesAssignment);
 			if (hostDrivesAssignment || newSerials.size > 0) lastSyncedSerials = newSerials;
 			return;
 		}
@@ -70383,11 +71040,35 @@ function syncAssignedCameras(assigned) {
 			applyCameraProps(addFurniture("camera", findOpenCameraPosition(workingFloor, center)), cam);
 			workingFloor = get$1(activeFloor);
 		}
+		syncZonesFromAssigned(assignedBySerial, hostDrivesAssignment);
 		lastSyncedSerials = newSerials;
 	} finally {
 		setAssignedCamerasSyncing(false);
 	}
 }
+/** Push area / areaColor onto linked zones; remove areas whose camera was unassigned. */
+function syncZonesFromAssigned(assignedBySerial, hostDrivesAssignment) {
+	var _floor$zones, _floor2$zones;
+	const floor = get$1(activeFloor);
+	if (!floor) return;
+	if (hostDrivesAssignment && ((_floor$zones = floor.zones) === null || _floor$zones === void 0 ? void 0 : _floor$zones.length)) for (const z of [...floor.zones]) {
+		if (!z.cameraSerial) continue;
+		if (!assignedBySerial.has(z.cameraSerial)) removeZone(z.id);
+	}
+	const floor2 = get$1(activeFloor);
+	if (!(floor2 === null || floor2 === void 0 || (_floor2$zones = floor2.zones) === null || _floor2$zones === void 0 ? void 0 : _floor2$zones.length)) return;
+	let i = 0;
+	for (const z of floor2.zones) {
+		if (!z.cameraSerial) continue;
+		const cam = assignedBySerial.get(z.cameraSerial);
+		if (!cam) continue;
+		const style = resolveCameraAreaStyle(cam, i++);
+		if (z.name !== style.name || z.color !== style.color) updateZone(z.id, {
+			name: style.name,
+			color: style.color
+		});
+	}
+}
 //#endregion
 //#region src/App.svelte
 init_client();
@@ -70575,35 +71256,31 @@ function App($$anchor, $$props) {
 			});
 			let $6 = /* @__PURE__ */ user_derived(() => {
 				var _$$get8;
-				return (_$$get8 = get(config)) === null || _$$get8 === void 0 ? void 0 : _$$get8.projectName;
+				return (_$$get8 = get(config)) === null || _$$get8 === void 0 ? void 0 : _$$get8.selectedCameraSerial;
 			});
 			let $7 = /* @__PURE__ */ user_derived(() => {
 				var _$$get9;
-				return (_$$get9 = get(config)) === null || _$$get9 === void 0 ? void 0 : _$$get9.selectedCameraSerial;
+				return (_$$get9 = get(config)) === null || _$$get9 === void 0 ? void 0 : _$$get9.showCameraCones;
 			});
 			let $8 = /* @__PURE__ */ user_derived(() => {
 				var _$$get10;
-				return (_$$get10 = get(config)) === null || _$$get10 === void 0 ? void 0 : _$$get10.showCameraCones;
+				return (_$$get10 = get(config)) === null || _$$get10 === void 0 ? void 0 : _$$get10.showCameraLabels;
 			});
 			let $9 = /* @__PURE__ */ user_derived(() => {
 				var _$$get11;
-				return (_$$get11 = get(config)) === null || _$$get11 === void 0 ? void 0 : _$$get11.showCameraLabels;
+				return (_$$get11 = get(config)) === null || _$$get11 === void 0 ? void 0 : _$$get11.cameraHeatmapMatrix;
 			});
 			let $10 = /* @__PURE__ */ user_derived(() => {
 				var _$$get12;
-				return (_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.cameraHeatmapMatrix;
+				return ((_$$get12 = get(config)) === null || _$$get12 === void 0 ? void 0 : _$$get12.cameraThumbnail) || "";
 			});
 			let $11 = /* @__PURE__ */ user_derived(() => {
 				var _$$get13;
-				return ((_$$get13 = get(config)) === null || _$$get13 === void 0 ? void 0 : _$$get13.cameraThumbnail) || "";
+				return (_$$get13 = get(config)) === null || _$$get13 === void 0 ? void 0 : _$$get13.canvasBackground;
 			});
 			let $12 = /* @__PURE__ */ user_derived(() => {
 				var _$$get14;
-				return (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.canvasBackground;
-			});
-			let $13 = /* @__PURE__ */ user_derived(() => {
-				var _$$get15;
-				return (_$$get15 = get(config)) === null || _$$get15 === void 0 ? void 0 : _$$get15.floorPlateBackground;
+				return (_$$get14 = get(config)) === null || _$$get14 === void 0 ? void 0 : _$$get14.floorPlateBackground;
 			});
 			FloorPlanCanvas(node_4, {
 				get viewOnly() {
@@ -70624,29 +71301,26 @@ function App($$anchor, $$props) {
 				get heatmapColorScale() {
 					return get($5);
 				},
-				get projectName() {
-					return get($6);
-				},
 				get selectedCameraSerial() {
-					return get($7);
+					return get($6);
 				},
 				get showCameraCones() {
-					return get($8);
+					return get($7);
 				},
 				get showCameraLabels() {
-					return get($9);
+					return get($8);
 				},
 				get cameraHeatmapMatrix() {
-					return get($10);
+					return get($9);
 				},
 				get cameraThumbnail() {
-					return get($11);
+					return get($10);
 				},
 				get canvasBackground() {
-					return get($12);
+					return get($11);
 				},
 				get floorPlateBackground() {
-					return get($13);
+					return get($12);
 				}
 			});
 		}
@@ -70675,12 +71349,12 @@ function App($$anchor, $$props) {
 		{
 			let $0 = /* @__PURE__ */ user_derived(() => get(mode) === "3d");
 			let $1 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$siteCameras, _$$get16;
-				return (_$$get$siteCameras = (_$$get16 = get(config)) === null || _$$get16 === void 0 ? void 0 : _$$get16.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
+				var _$$get$siteCameras, _$$get15;
+				return (_$$get$siteCameras = (_$$get15 = get(config)) === null || _$$get15 === void 0 ? void 0 : _$$get15.siteCameras) !== null && _$$get$siteCameras !== void 0 ? _$$get$siteCameras : [];
 			});
 			let $2 = /* @__PURE__ */ user_derived(() => {
-				var _$$get$cameraThumbnai, _$$get17;
-				return (_$$get$cameraThumbnai = (_$$get17 = get(config)) === null || _$$get17 === void 0 ? void 0 : _$$get17.cameraThumbnail) !== null && _$$get$cameraThumbnai !== void 0 ? _$$get$cameraThumbnai : "";
+				var _$$get$cameraThumbnai, _$$get16;
+				return (_$$get$cameraThumbnai = (_$$get16 = get(config)) === null || _$$get16 === void 0 ? void 0 : _$$get16.cameraThumbnail) !== null && _$$get$cameraThumbnai !== void 0 ? _$$get$cameraThumbnai : "";
 			});
 			PropertiesPanel($$anchor, {
 				get is3D() {