@collabdt/core 0.0.57 → 0.2.1

package/dist/core/components/viewers/map/src/tools/AddTools/AddSite/AssociateBuildingsDialog.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { toast } from "sonner";
+import { useTranslations } from "next-intl";
+import { Building2 } from "lucide-react";
+import { AddItemDialog } from "../../../../../../ui/AddItemDialog";
+import { Button } from "../../../../../../ui/Button";
+import { Checkbox } from "../../../../../../ui/Checkbox";
+import { LoadingSpinner } from "../../../../../../ui/LoadingSpinner";
+import { useSite } from "../../../../../../../hooks/sites/sites";
+const AssociateBuildingsDialog = ({
+  siteId,
+  siteName,
+  buildings,
+  onClose,
+  onAssociated
+}) => {
+  const t = useTranslations("AssociateBuildings");
+  const tf = (key, fallback, values) => t.has(key) ? t(key, values) : fallback;
+  const { updateSite } = useSite(String(siteId));
+  const [selected, setSelected] = React.useState(
+    () => new Set(buildings.map((b) => b.id))
+  );
+  const [isSaving, setIsSaving] = React.useState(false);
+  const toggle = (id) => setSelected((prev) => {
+    const next = new Set(prev);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
+  const allSelected = selected.size === buildings.length;
+  const toggleAll = () => setSelected(allSelected ? /* @__PURE__ */ new Set() : new Set(buildings.map((b) => b.id)));
+  const handleAssociate = async () => {
+    if (selected.size === 0) {
+      onClose();
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await updateSite({ siteBuildings: { connect: [...selected].map((id) => ({ id })) } });
+      toast.success(tf("associated", `${selected.size} building(s) associated with "${siteName}".`, {
+        count: selected.size,
+        name: siteName
+      }));
+      onAssociated == null ? void 0 : onAssociated(buildings.filter((b) => selected.has(b.id)));
+      onClose();
+    } catch (e) {
+      toast.error(tf("associateFailed", "Failed to associate the buildings. Please try again."));
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AddItemDialog,
+    {
+      open: true,
+      onOpenChange: (open) => !open && !isSaving && onClose(),
+      title: tf("title", "Buildings found inside this site"),
+      description: tf("subtitle", `These buildings fall within "${siteName}". Choose which to associate with it.`, { name: siteName }),
+      icon: Building2,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 pointer-events-auto min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggleAll,
+            className: "self-start text-xs text-primary hover:underline",
+            children: allSelected ? tf("deselectAll", "Deselect all") : tf("selectAll", "Select all")
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto flex flex-col gap-1 rounded-md border p-1", children: buildings.map((b) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent cursor-pointer min-w-0",
+            children: [
+              /* @__PURE__ */ jsx(Checkbox, { className: "shrink-0", checked: selected.has(b.id), onCheckedChange: () => toggle(b.id) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm truncate", children: b.buildingName || tf("unnamed", "Unnamed building") }),
+                b.buildingAddress && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: b.buildingAddress })
+              ] })
+            ]
+          },
+          b.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, disabled: isSaving, children: tf("skip", "Skip") }),
+          /* @__PURE__ */ jsxs(Button, { onClick: handleAssociate, disabled: isSaving || selected.size === 0, children: [
+            isSaving && /* @__PURE__ */ jsx(LoadingSpinner, {}),
+            tf("associate", "Associate"),
+            " (",
+            selected.size,
+            ")"
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  AssociateBuildingsDialog
+};
+//# sourceMappingURL=AssociateBuildingsDialog.js.map

package/dist/core/components/viewers/map/src/tools/AddTools/AddSite/AssociateBuildingsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/core/components/viewers/map/src/tools/AddTools/AddSite/AssociateBuildingsDialog.tsx"],"sourcesContent":["'use client'\r\n\r\n// SPDX-License-Identifier: AGPL-3.0-or-later\r\n// Copyright (C) 2025 Collab Digital Twins\r\n\r\nimport * as React from 'react'\r\nimport { toast } from 'sonner'\r\nimport { useTranslations } from 'next-intl'\r\nimport { Building2 } from 'lucide-react'\r\nimport { AddItemDialog } from '../../../../../../ui/AddItemDialog'\r\nimport { Button } from '../../../../../../ui/Button'\r\nimport { Checkbox } from '../../../../../../ui/Checkbox'\r\nimport { LoadingSpinner } from '../../../../../../ui/LoadingSpinner'\r\nimport { useSite } from '../../../../../../../hooks/sites/sites'\r\nimport type { Building } from '../../../../../../../types/dbTypes'\r\n\r\ninterface AssociateBuildingsDialogProps {\r\n  siteId: number\r\n  siteName: string\r\n  buildings: Building[]\r\n  onClose: () => void\r\n  /** Called with the associated buildings after a successful connect. */\r\n  onAssociated?: (buildings: Building[]) => void\r\n}\r\n\r\n/**\r\n * Shown after a site polygon is drawn when database buildings are detected\r\n * inside it. The user picks (multi-select) which buildings to associate with\r\n * the new site; selected buildings are connected via `updateSite`.\r\n */\r\nexport const AssociateBuildingsDialog = ({\r\n  siteId, siteName, buildings, onClose, onAssociated,\r\n}: AssociateBuildingsDialogProps) => {\r\n  const t = useTranslations('AssociateBuildings')\r\n  const tf = (key: string, fallback: string, values?: Record<string, string | number>) =>\r\n    (t.has(key) ? t(key, values) : fallback)\r\n\r\n  const { updateSite } = useSite(String(siteId))\r\n  const [selected, setSelected] = React.useState<Set<number>>(\r\n    () => new Set(buildings.map(b => b.id)),\r\n  )\r\n  const [isSaving, setIsSaving] = React.useState(false)\r\n\r\n  const toggle = (id: number) => setSelected((prev) => {\r\n    const next = new Set(prev)\r\n    if (next.has(id)) next.delete(id)\r\n    else next.add(id)\r\n    return next\r\n  })\r\n\r\n  const allSelected = selected.size === buildings.length\r\n  const toggleAll = () =>\r\n    setSelected(allSelected ? new Set() : new Set(buildings.map(b => b.id)))\r\n\r\n  const handleAssociate = async () => {\r\n    if (selected.size === 0) { onClose(); return }\r\n    setIsSaving(true)\r\n    try {\r\n      await updateSite({ siteBuildings: { connect: [...selected].map(id => ({ id })) } })\r\n      toast.success(tf('associated', `${selected.size} building(s) associated with \"${siteName}\".`, {\r\n        count: selected.size,\r\n        name: siteName,\r\n      }))\r\n      onAssociated?.(buildings.filter(b => selected.has(b.id)))\r\n      onClose()\r\n    }\r\n    catch {\r\n      toast.error(tf('associateFailed', 'Failed to associate the buildings. Please try again.'))\r\n      setIsSaving(false)\r\n    }\r\n  }\r\n\r\n  return (\r\n    <AddItemDialog\r\n      open\r\n      onOpenChange={open => !open && !isSaving && onClose()}\r\n      title={tf('title', 'Buildings found inside this site')}\r\n      description={tf('subtitle', `These buildings fall within \"${siteName}\". Choose which to associate with it.`, { name: siteName })}\r\n      icon={Building2}\r\n    >\r\n      <div className=\"flex flex-col gap-3 pointer-events-auto min-w-0\">\r\n        <button\r\n          type=\"button\"\r\n          onClick={toggleAll}\r\n          className=\"self-start text-xs text-primary hover:underline\"\r\n        >\r\n          {allSelected ? tf('deselectAll', 'Deselect all') : tf('selectAll', 'Select all')}\r\n        </button>\r\n\r\n        <div className=\"max-h-64 overflow-y-auto flex flex-col gap-1 rounded-md border p-1\">\r\n          {buildings.map(b => (\r\n            <label\r\n              key={b.id}\r\n              className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent cursor-pointer min-w-0\"\r\n            >\r\n              <Checkbox className=\"shrink-0\" checked={selected.has(b.id)} onCheckedChange={() => toggle(b.id)} />\r\n              <div className=\"flex flex-col min-w-0\">\r\n                <span className=\"text-sm truncate\">{b.buildingName || tf('unnamed', 'Unnamed building')}</span>\r\n                {b.buildingAddress && (\r\n                  <span className=\"text-xs text-muted-foreground truncate\">{b.buildingAddress}</span>\r\n                )}\r\n              </div>\r\n            </label>\r\n          ))}\r\n        </div>\r\n\r\n        <div className=\"flex justify-end gap-2\">\r\n          <Button variant=\"outline\" onClick={onClose} disabled={isSaving}>\r\n            {tf('skip', 'Skip')}\r\n          </Button>\r\n          <Button onClick={handleAssociate} disabled={isSaving || selected.size === 0}>\r\n            {isSaving && <LoadingSpinner />}\r\n            {tf('associate', 'Associate')} ({selected.size})\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </AddItemDialog>\r\n  )\r\n}\r\n"],"mappings":";AAiFQ,cAeM,YAfN;AA5ER,YAAY,WAAW;AACvB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAiBjB,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAW;AAAA,EAAS;AACxC,MAAqC;AACnC,QAAM,IAAI,gBAAgB,oBAAoB;AAC9C,QAAM,KAAK,CAAC,KAAa,UAAkB,WACxC,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,MAAM,IAAI;AAEjC,QAAM,EAAE,WAAW,IAAI,QAAQ,OAAO,MAAM,CAAC;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACpC,MAAM,IAAI,IAAI,UAAU,IAAI,OAAK,EAAE,EAAE,CAAC;AAAA,EACxC;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,SAAS,CAAC,OAAe,YAAY,CAAC,SAAS;AACnD,UAAM,OAAO,IAAI,IAAI,IAAI;AACzB,QAAI,KAAK,IAAI,EAAE,EAAG,MAAK,OAAO,EAAE;AAAA,QAC3B,MAAK,IAAI,EAAE;AAChB,WAAO;AAAA,EACT,CAAC;AAED,QAAM,cAAc,SAAS,SAAS,UAAU;AAChD,QAAM,YAAY,MAChB,YAAY,cAAc,oBAAI,IAAI,IAAI,IAAI,IAAI,UAAU,IAAI,OAAK,EAAE,EAAE,CAAC,CAAC;AAEzE,QAAM,kBAAkB,YAAY;AAClC,QAAI,SAAS,SAAS,GAAG;AAAE,cAAQ;AAAG;AAAA,IAAO;AAC7C,gBAAY,IAAI;AAChB,QAAI;AACF,YAAM,WAAW,EAAE,eAAe,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAE,IAAI,SAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;AAClF,YAAM,QAAQ,GAAG,cAAc,GAAG,SAAS,IAAI,iCAAiC,QAAQ,MAAM;AAAA,QAC5F,OAAO,SAAS;AAAA,QAChB,MAAM;AAAA,MACR,CAAC,CAAC;AACF,mDAAe,UAAU,OAAO,OAAK,SAAS,IAAI,EAAE,EAAE,CAAC;AACvD,cAAQ;AAAA,IACV,SACM;AACJ,YAAM,MAAM,GAAG,mBAAmB,sDAAsD,CAAC;AACzF,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAI;AAAA,MACJ,cAAc,UAAQ,CAAC,QAAQ,CAAC,YAAY,QAAQ;AAAA,MACpD,OAAO,GAAG,SAAS,kCAAkC;AAAA,MACrD,aAAa,GAAG,YAAY,gCAAgC,QAAQ,yCAAyC,EAAE,MAAM,SAAS,CAAC;AAAA,MAC/H,MAAM;AAAA,MAEN,+BAAC,SAAI,WAAU,mDACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YAET,wBAAc,GAAG,eAAe,cAAc,IAAI,GAAG,aAAa,YAAY;AAAA;AAAA,QACjF;AAAA,QAEA,oBAAC,SAAI,WAAU,sEACZ,oBAAU,IAAI,OACb;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAS,WAAU,YAAW,SAAS,SAAS,IAAI,EAAE,EAAE,GAAG,iBAAiB,MAAM,OAAO,EAAE,EAAE,GAAG;AAAA,cACjG,qBAAC,SAAI,WAAU,yBACb;AAAA,oCAAC,UAAK,WAAU,oBAAoB,YAAE,gBAAgB,GAAG,WAAW,kBAAkB,GAAE;AAAA,gBACvF,EAAE,mBACD,oBAAC,UAAK,WAAU,0CAA0C,YAAE,iBAAgB;AAAA,iBAEhF;AAAA;AAAA;AAAA,UATK,EAAE;AAAA,QAUT,CACD,GACH;AAAA,QAEA,qBAAC,SAAI,WAAU,0BACb;AAAA,8BAAC,UAAO,SAAQ,WAAU,SAAS,SAAS,UAAU,UACnD,aAAG,QAAQ,MAAM,GACpB;AAAA,UACA,qBAAC,UAAO,SAAS,iBAAiB,UAAU,YAAY,SAAS,SAAS,GACvE;AAAA,wBAAY,oBAAC,kBAAe;AAAA,YAC5B,GAAG,aAAa,WAAW;AAAA,YAAE;AAAA,YAAG,SAAS;AAAA,YAAK;AAAA,aACjD;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/core/components/viewers/map/src/tools/AddTools/AddSite/SiteAdder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteAdder.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/core/components/viewers/map/src/tools/AddTools/AddSite/SiteAdder.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,sBAA8B,cAAc,sBAmVrE,CAAA"}
+{"version":3,"file":"SiteAdder.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/core/components/viewers/map/src/tools/AddTools/AddSite/SiteAdder.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAKD,eAAO,MAAM,SAAS,GAAI,sBAA8B,cAAc,sBA0crE,CAAA"}

package/dist/core/components/viewers/map/src/tools/AddTools/AddSite/SiteAdder.js

@@ -1,123 +1,154 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Input, Label } from "../../../../../../ui/";
 import * as React from "react";
-import { MapContext } from "../../../../../../../store";
+import { MapContext, useMapSitesContext } from "../../../../../../../store";
 import { Button } from "../../../../../../ui/Button";
 import { AddItemDialog } from "../../../../../../ui/AddItemDialog";
 import { BoxSelect } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { useCreateSite } from "../../../../../../../hooks/sites/sites";
+import { useBuildings } from "../../../../../../../hooks/buildings/buildings";
+import { persistDrawnSite } from "./persistSite";
+import { polygonCentroid, filterPointsInRing } from "../../../MapLayers/src/SiteLayer/siteGeometry";
+import { AssociateBuildingsDialog } from "./AssociateBuildingsDialog";
+const DRAW_TOAST_ID = "site-adder-draw";
 const SiteAdder = ({ isOpen = false, onCancel }) => {
   const t = useTranslations("SiteAdder");
+  const tf = React.useCallback(
+    (key, fallback, values) => t.has(key) ? t(key, values) : fallback,
+    [t]
+  );
   const [siteName, setSiteName] = React.useState("");
   const [isDrawing, setIsDrawing] = React.useState(false);
   const [drawingPoints, setDrawingPoints] = React.useState([]);
-  const { dispatch: mapDispatch, state: mapState } = React.useContext(MapContext);
+  const { state: mapState } = React.useContext(MapContext);
   const { map } = mapState.map;
   const inputRef = React.useRef(null);
+  const { createSite } = useCreateSite();
+  const { dispatch: mapSitesDispatch } = useMapSitesContext();
+  const { buildings, isLoading: buildingsLoading } = useBuildings();
+  const [pendingDetection, setPendingDetection] = React.useState(null);
+  const [associateState, setAssociateState] = React.useState(null);
+  const isPersistingRef = React.useRef(false);
+  const drawingPointsRef = React.useRef([]);
   const hasMapApi = (mapInstance) => Boolean(mapInstance) && typeof mapInstance.getSource === "function" && typeof mapInstance.getLayer === "function" && typeof mapInstance.addSource === "function" && typeof mapInstance.addLayer === "function" && typeof mapInstance.on === "function" && typeof mapInstance.off === "function";
   const setCursor = (cursor) => {
     if (!map) return;
     if (map.getCanvas().style.cursor === cursor) return;
     map.getCanvas().style.cursor = cursor;
   };
+  const getSource = () => map == null ? void 0 : map.getSource("add-geojson");
   const updateDrawingFeatures = (points) => {
-    if (!map) return;
-    const source = map.getSource("add-geojson");
+    const source = getSource();
     if (!source) return;
+    const closable = points.length >= 3;
     const features = [];
-    for (const [index, point] of points.entries()) {
+    points.forEach((point, index) => {
       features.push({
         type: "Feature",
-        geometry: {
-          type: "Point",
-          coordinates: point
-        },
+        geometry: { type: "Point", coordinates: point },
         properties: {
           isDrawPoint: true,
-          pointIndex: index
+          pointIndex: index,
+          isFirstPoint: index === 0,
+          // The first point turns green once a click on it would close the site.
+          closable: closable && index === 0
         }
       });
-    }
+    });
     if (points.length > 1) {
       features.push({
         type: "Feature",
         geometry: {
           type: "LineString",
-          coordinates: points
+          // Close the loop visually so the user sees the final shape.
+          coordinates: closable ? [...points, points[0]] : points
         },
-        properties: {
-          isDrawing: true
-        }
+        properties: { isDrawing: true }
       });
     }
-    source.setData({
-      type: "FeatureCollection",
-      features
-    });
+    if (closable) {
+      features.push({
+        type: "Feature",
+        geometry: { type: "Polygon", coordinates: [[...points, points[0]]] },
+        properties: { isDrawPreview: true }
+      });
+    }
+    source.setData({ type: "FeatureCollection", features });
+  };
+  const commitPoints = (points) => {
+    drawingPointsRef.current = points;
+    setDrawingPoints(points);
+    updateDrawingFeatures(points);
+  };
+  const isNearFirstPoint = (clickPoint, points, pixelThreshold = 14) => {
+    if (!map || points.length < 3) return false;
+    const first = map.project(points[0]);
+    const click = map.project(clickPoint);
+    return Math.hypot(first.x - click.x, first.y - click.y) <= pixelThreshold;
   };
-  const addSite = (points) => {
-    if (!map || points.length < 3) return;
-    const source = map.getSource("add-geojson");
+  const clearDrawingFeatures = () => {
+    const source = getSource();
     if (!source) return;
-    const closedPoints = [...points, points[0]];
-    const siteFeature = {
-      type: "Feature",
-      geometry: {
-        type: "Polygon",
-        coordinates: [closedPoints]
-      },
-      properties: {
-        type: "site",
-        name: siteName || "Unnamed Site",
-        id: Date.now().toString()
-      }
-    };
-    const existingData = source._data;
-    const existingSites = existingData.features.filter(
-      (f) => {
-        var _a;
-        return ((_a = f.properties) == null ? void 0 : _a.type) === "site";
-      }
-    );
-    source.setData({
-      type: "FeatureCollection",
-      features: [...existingSites, siteFeature]
-    });
+    source.setData({ type: "FeatureCollection", features: [] });
   };
-  const isPointNearExisting = (clickPoint, existingPoints, threshold = 1e-4) => {
-    for (const [i, existingPoint] of existingPoints.entries()) {
-      const distance = Math.sqrt(
-        Math.pow(clickPoint[0] - existingPoint[0], 2) + Math.pow(clickPoint[1] - existingPoint[1], 2)
-      );
-      if (distance < threshold) {
-        return i;
-      }
-    }
-    return -1;
+  const resetDrawingState = () => {
+    drawingPointsRef.current = [];
+    setDrawingPoints([]);
+    setIsDrawing(false);
+    setCursor("");
+    toast.dismiss(DRAW_TOAST_ID);
   };
   const startDrawing = () => {
-    setIsDrawing(true);
+    if (!hasMapApi(map) || !map.getSource("add-geojson")) {
+      toast.error(tf("mapNotReady", "The map is still loading. Please try again in a moment."));
+      return;
+    }
+    drawingPointsRef.current = [];
     setDrawingPoints([]);
+    setIsDrawing(true);
     setCursor("crosshair");
   };
-  const stopDrawing = () => {
-    setIsDrawing(false);
-    setDrawingPoints([]);
-    setCursor(null);
-    const source = map == null ? void 0 : map.getSource("add-geojson");
-    if (source) {
-      const existingData = source._data;
-      const existingSites = existingData.features.filter(
-        (f) => {
-          var _a;
-          return ((_a = f.properties) == null ? void 0 : _a.type) === "site";
-        }
-      );
-      source.setData({
-        type: "FeatureCollection",
-        features: existingSites
+  const undoLastPoint = () => {
+    const points = drawingPointsRef.current;
+    if (points.length === 0) return;
+    commitPoints(points.slice(0, -1));
+  };
+  const cancelDrawing = () => {
+    clearDrawingFeatures();
+    resetDrawingState();
+    toast.info(tf("drawCancelled", "Site drawing cancelled."));
+  };
+  const finishDrawing = async () => {
+    if (isPersistingRef.current) return;
+    const points = drawingPointsRef.current;
+    if (points.length < 3) {
+      toast.warning(tf("needThreePoints", "Add at least 3 points before closing the site."));
+      return;
+    }
+    const name = siteName.trim() || tf("unnamedSite", "Unnamed Site");
+    const ring = [...points];
+    const centroid = polygonCentroid(ring);
+    isPersistingRef.current = true;
+    const toastId = toast.loading(tf("savingSite", "Saving site\u2026"));
+    try {
+      const { siteId, assetId, fileId } = await persistDrawnSite({ name, ring, centroid, createSite });
+      mapSitesDispatch({
+        type: "SHOW_SITE",
+        payload: { site: { id: siteId, name, ring, assetId, fileId } }
       });
+      toast.success(tf("siteCreated", `Site "${name}" created.`, { name }), { id: toastId });
+      clearDrawingFeatures();
+      resetDrawingState();
+      setSiteName("");
+      isPersistingRef.current = false;
+      setPendingDetection({ siteId, siteName: name, ring });
+      onCancel == null ? void 0 : onCancel();
+    } catch (e) {
+      toast.error(tf("siteCreateFailed", "Failed to create the site. Please try again."), { id: toastId });
+      isPersistingRef.current = false;
     }
   };
   React.useEffect(() => {
@@ -132,16 +163,34 @@ const SiteAdder = ({ isOpen = false, onCancel }) => {
         data: geojson
       });
     }
+    if (!map.getLayer("add-draw-fill")) {
+      map.addLayer({
+        id: "add-draw-fill",
+        type: "fill",
+        source: "add-geojson",
+        paint: {
+          "fill-color": "#3b82f6",
+          "fill-opacity": 0.2
+        },
+        filter: [
+          "all",
+          ["in", "$type", "Polygon"],
+          ["==", "isDrawPreview", true]
+        ]
+      });
+    }
     if (!map.getLayer("add-draw-points")) {
       map.addLayer({
         id: "add-draw-points",
         type: "circle",
         source: "add-geojson",
         paint: {
-          "circle-radius": 5,
-          "circle-color": "#fff",
-          "circle-stroke-width": 1,
-          "circle-stroke-color": "#000"
+          // The first point is emphasised (and turns green once closing is
+          // possible) so it reads as "click here to close".
+          "circle-radius": ["case", ["==", ["get", "closable"], true], 8, 5],
+          "circle-color": ["case", ["==", ["get", "closable"], true], "#22c55e", "#ffffff"],
+          "circle-stroke-width": 2,
+          "circle-stroke-color": ["case", ["==", ["get", "closable"], true], "#15803d", "#000000"]
         },
         filter: [
           "all",
@@ -171,117 +220,135 @@ const SiteAdder = ({ isOpen = false, onCancel }) => {
         ]
       });
     }
-    if (!map.getLayer("add-sites")) {
-      map.addLayer({
-        id: "add-sites",
-        type: "fill",
-        source: "add-geojson",
-        paint: {
-          "fill-color": "#3b82f6",
-          "fill-opacity": 0.5
-        },
-        filter: [
-          "all",
-          ["in", "$type", "Polygon"],
-          ["==", "type", "site"]
-        ]
-      });
-    }
-    if (!map.getLayer("add-site-outline")) {
-      map.addLayer({
-        id: "add-site-outline",
-        type: "line",
-        source: "add-geojson",
-        layout: {
-          "line-cap": "round",
-          "line-join": "round"
-        },
-        paint: {
-          "line-color": "#1c4587",
-          "line-width": 2
-        },
-        filter: [
-          "all",
-          ["in", "$type", "Polygon"],
-          ["==", "type", "site"]
-        ]
-      });
-    }
-    if (!map.getLayer("add-labels")) {
-      map.addLayer({
-        id: "add-labels",
-        type: "symbol",
-        source: "add-geojson",
-        layout: {
-          "text-field": ["get", "name"],
-          "text-font": ["Inter"],
-          "text-size": 12,
-          "text-offset": [0, -1.5],
-          "text-anchor": "center"
-        },
-        paint: {
-          "text-color": "#fff",
-          "text-halo-color": "#000",
-          "text-halo-width": 1
-        }
-      });
-    }
   }, [map]);
   React.useEffect(() => {
-    if (!hasMapApi(map)) return;
+    if (!hasMapApi(map) || !isDrawing) return;
     const clickHandler = (e) => {
-      if (!isDrawing) return;
       const clickPoint = [e.lngLat.lng, e.lngLat.lat];
-      const nearPointIndex = isPointNearExisting(clickPoint, drawingPoints);
-      if (nearPointIndex !== -1 && drawingPoints.length >= 3) {
-        addSite(drawingPoints);
-        stopDrawing();
-        setSiteName("");
-      } else {
-        const newPoints = [...drawingPoints, clickPoint];
-        setDrawingPoints(newPoints);
-        updateDrawingFeatures(newPoints);
+      if (isNearFirstPoint(clickPoint, drawingPointsRef.current)) {
+        finishDrawing();
+        return;
       }
+      commitPoints([...drawingPointsRef.current, clickPoint]);
     };
-    const mouseMoveHandler = (e) => {
-      if (isDrawing) setCursor("crosshair");
-      else setCursor(null);
-    };
+    const mouseMoveHandler = () => setCursor("crosshair");
     map.on("click", clickHandler);
     map.on("mousemove", mouseMoveHandler);
     return () => {
       map.off("click", clickHandler);
       map.off("mousemove", mouseMoveHandler);
     };
-  }, [map, isDrawing, drawingPoints, siteName]);
-  if (isDrawing) return null;
-  return /* @__PURE__ */ jsx(
-    AddItemDialog,
-    {
-      open: isOpen,
-      onOpenChange: (open) => !open && (onCancel == null ? void 0 : onCancel()),
-      title: t("title"),
-      icon: BoxSelect,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pointer-events-auto", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "site-name", children: t("nameLabel") }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "site-name",
-              ref: inputRef,
-              type: "text",
-              placeholder: t("namePlaceholder"),
-              value: siteName,
-              onChange: (e) => setSiteName(e.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx(Button, { onClick: startDrawing, children: t("startDrawing") }) }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("startDrawingClick") })
-      ] })
+  }, [map, isDrawing]);
+  React.useEffect(() => {
+    if (!isDrawing) return;
+    const onKey = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        finishDrawing();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancelDrawing();
+      } else if (e.key === "Backspace") {
+        e.preventDefault();
+        undoLastPoint();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isDrawing]);
+  React.useEffect(() => {
+    if (!isDrawing) {
+      toast.dismiss(DRAW_TOAST_ID);
+      return;
     }
-  );
+    const count = drawingPoints.length;
+    const canFinish = count >= 3;
+    const title = canFinish ? tf("drawReadyTitle", "Ready to finish your site") : tf("drawTitle", "Draw your site");
+    const description = canFinish ? tf(
+      "drawReadyHint",
+      `${count} points placed. Click the first point, press Enter, or tap Finish to close it. Backspace removes the last point, Esc cancels.`,
+      { count }
+    ) : tf(
+      "drawHint",
+      `Click on the map to add each corner (${count} so far). Add at least 3 to form a site. Esc cancels.`,
+      { count }
+    );
+    toast.info(title, {
+      id: DRAW_TOAST_ID,
+      description,
+      duration: Infinity,
+      action: canFinish ? { label: tf("finish", "Finish"), onClick: () => finishDrawing() } : void 0,
+      cancel: { label: tf("cancel", "Cancel"), onClick: () => cancelDrawing() }
+    });
+  }, [isDrawing, drawingPoints.length]);
+  React.useEffect(() => {
+    if (!isOpen && isDrawing) {
+      clearDrawingFeatures();
+      resetDrawingState();
+    }
+  }, [isOpen, isDrawing]);
+  React.useEffect(() => () => {
+    toast.dismiss(DRAW_TOAST_ID);
+  }, []);
+  React.useEffect(() => {
+    if (!pendingDetection) return;
+    if (buildingsLoading && buildings.length === 0) return;
+    const inside = filterPointsInRing(pendingDetection.ring, buildings, (b) => typeof b.buildingLongitude === "number" && typeof b.buildingLatitude === "number" ? [b.buildingLongitude, b.buildingLatitude] : null);
+    if (inside.length > 0) {
+      setAssociateState({
+        siteId: pendingDetection.siteId,
+        siteName: pendingDetection.siteName,
+        buildings: inside
+      });
+    }
+    setPendingDetection(null);
+  }, [pendingDetection, buildings, buildingsLoading]);
+  if (isDrawing) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    associateState && /* @__PURE__ */ jsx(
+      AssociateBuildingsDialog,
+      {
+        siteId: associateState.siteId,
+        siteName: associateState.siteName,
+        buildings: associateState.buildings,
+        onClose: () => setAssociateState(null)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AddItemDialog,
+      {
+        open: isOpen,
+        onOpenChange: (open) => !open && (onCancel == null ? void 0 : onCancel()),
+        title: t("title"),
+        icon: BoxSelect,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 pointer-events-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "site-name", children: t("nameLabel") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "site-name",
+                ref: inputRef,
+                type: "text",
+                placeholder: t("namePlaceholder"),
+                value: siteName,
+                onChange: (e) => setSiteName(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("ol", { className: "list-decimal pl-4 text-xs text-muted-foreground space-y-1", children: [
+            /* @__PURE__ */ jsx("li", { children: tf("step1", "Name your site (optional), then start drawing.") }),
+            /* @__PURE__ */ jsx("li", { children: tf("step2", "Click on the map to drop each corner.") }),
+            /* @__PURE__ */ jsx("li", { children: tf("step3", "Click the first corner (or press Enter) to close it.") })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { onClick: startDrawing, children: [
+            /* @__PURE__ */ jsx(BoxSelect, { className: "size-4" }),
+            t("startDrawing")
+          ] }) })
+        ] })
+      }
+    )
+  ] });
 };
 export {
   SiteAdder