fix: focus selected map zone details

frontend/src/components/maps/LocationMapBottomSheet.jsx

@@ -81,6 +81,7 @@ export default function LocationMapBottomSheet({
   const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject);
   const showEditorControls = mode === "edit" && canManage;
   const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
+  const showUnmappedPanel = filters.showUnmapped && !selectedObject;
   const changedLayerCount = useMemo(
     () => MAP_DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length,
     [filters]
@@ -276,7 +277,7 @@ export default function LocationMapBottomSheet({
         </div>
       ) : null}
 
-      {filters.showUnmapped ? (
+      {showUnmappedPanel ? (
         <UnmappedItemsPanel
           visibleUnmappedItems={visibleUnmappedItems}
           hiddenUnmappedItemCount={hiddenUnmappedItemCount}

frontend/src/components/maps/LocationMapCanvas.jsx

@@ -288,6 +288,7 @@ export default function LocationMapCanvas({
         onPointerUp={endPan}
         onPointerCancel={endPan}
         onPointerLeave={endPan}
+        onClick={clearSelection}
       >
         <svg
           ref={svgRef}

frontend/tests/location-map-manager.spec.ts

@@ -390,6 +390,9 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
 
   await page.getByRole("button", { name: "Layers" }).click();
   await page.getByRole("button", { name: "Unmapped" }).click();
+  await expect(page.getByText("loose batteries")).toHaveCount(0);
+  await page.locator(".location-map-background").click({ position: { x: 8, y: 8 } });
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details");
   await expect(page.getByText("loose batteries")).toBeVisible();
 });
 
@@ -2127,6 +2130,54 @@ test("viewer shows a compact overflow cue for long unmapped lists", async ({ pag
   await expect(page.getByLabel("3 more unmapped items")).toHaveText("+3 more");
 });
 
+test("viewer hides unrelated unmapped items while a zone is selected", async ({ page }) => {
+  await mockMapShell(page);
+
+  const mapState = publishedMapState([
+    {
+      id: 1531,
+      location_map_id: 901,
+      zone_id: 501,
+      zone_name: "Bakery",
+      type: "zone",
+      label: "Bakery",
+      x: 40,
+      y: 40,
+      width: 260,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ], true);
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+  await page.getByRole("button", { name: "Layers" }).click();
+  await page.getByRole("button", { name: "Unmapped" }).click();
+  await expect(page.getByText("Unmapped Items")).toBeVisible();
+  await expect(page.getByText("loose batteries")).toBeVisible();
+
+  await page.locator('[data-object-key="1531"]').locator("rect").first().click();
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
+  await expect(page.getByText("french bread")).toBeVisible();
+  await expect(page.getByText("Unmapped Items")).toHaveCount(0);
+  await expect(page.getByText("loose batteries")).toHaveCount(0);
+
+  await page.locator(".location-map-background").click({ position: { x: 8, y: 8 } });
+  await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details");
+  await expect(page.getByText("Unmapped Items")).toBeVisible();
+  await expect(page.getByText("loose batteries")).toBeVisible();
+});
+
 test("viewer explains when unmapped items are hidden by filters", async ({ page }) => {
   await mockMapShell(page);