@kerros/viewer 0.0.0-stage → 0.1.0-rc.1

package/dist/map/MapCanvas.js

@@ -0,0 +1,2161 @@
+import { jsxs as S, jsx as m, Fragment as wt } from "react/jsx-runtime";
+import { draggedDoorSwing as ho, doorSymbol as mo } from "../model/doors.js";
+import { lazy as ko, useRef as L, useState as ae, useEffect as A, useMemo as le, Fragment as wo, Suspense as vo } from "react";
+import * as et from "maplibre-gl";
+import { PersonStanding as vt, Mountain as Sr, Plus as bo, Minus as po, RotateCcw as Io, RotateCw as jo, LocateFixed as xo, Compass as Lo } from "lucide-react";
+import Po from "polygon-clipping";
+import { isSpace as Do } from "../model/types.js";
+import { barrierEnds as we, toLngLat as ce, drawingCorners as Mo, toLocal as se, rectangle as So, objectPosition as Be, pointInRing as Er, objectArea as bt, openRing as pt, add as Fr, rotate as Rr, ringArea as Cr, distance as It, closeRing as Nr, segmentProjection as Eo } from "../model/geometry.js";
+import { statusLabel as jt, statusTone as tt } from "../adapters/status.js";
+import { useKerrosTheme as Fo, useStrings as Ro } from "../theme/index.js";
+import { neutralBasemap as $r } from "../adapters/basemap.js";
+import { ambient as xt, sunlight as Co, mixColor as Tr } from "./lighting.js";
+import { EntityIcon as No } from "../components/Icons.js";
+import { draftFeatures as $o, navGraphFeatures as To, onFloor as Ao, visibleOnFloor as zo, makeFeatures as Ar } from "./features.js";
+import { boundaryEdges as Oe } from "../model/boundaries.js";
+import { routeFeatures as Bo, routeArrowImage as Oo, ROUTE_EDGE as rt, ROUTE_COLOR as Lt, ROUTE_SOFT as ot, routeFlowGradient as zr } from "./route.js";
+import { cameraToCenterDistance as Wo, aimCenter as Pt, floorAim as qo, cameraPosition as Ko } from "./cameraAim.js";
+import { LIFT as Dt, SLAB as Mt } from "./levels.js";
+import { floorSupport as Yo, walkingWallRings as Uo, floorArrival as _o } from "./walkSurfaces.js";
+import { stairSurfaces as Ho } from "./stairSurfaces.js";
+import { MAX_MAP_ZOOM as Xo, walkFieldOfView as Br, DEFAULT_WALK_FOV as Or, WalkController as Vo, unstick as St, MAX_WALK_FOV as Zo, MIN_WALK_FOV as Jo } from "./walk.js";
+import { AmbienceEngine as Go, ambienceAt as Wr } from "./ambience.js";
+import { spaceAt as qr, spacePoint as Qo, inSpace as Kr } from "../model/spaces.js";
+import { servedFloors as Yr } from "../model/vertical.js";
+import { undergroundView as Me, floorIndex as Ur } from "./underground.js";
+import { loadBasemap as en } from "./loadBasemap.js";
+import { elevatorWalls as tn } from "./elevators.js";
+import { EYE as Et } from "./walkDimensions.js";
+const rn = ko(() => import("../components/ElevatorPanel.js").then((r) => ({ default: r.ElevatorPanel }))), Rt = { type: "FeatureCollection", features: [] }, on = {
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [-180, -85],
+            [180, -85],
+            [180, 85],
+            [-180, 85],
+            [-180, -85]
+          ]
+        ]
+      }
+    }
+  ]
+};
+function nn(r, Z) {
+  if (r.threeD) return Rt;
+  const P = Ar(r.project, r.floorId, r.selected, r.coverage, r.statuses, Z), E = r.project.floors.find((h) => h.id === r.floorId);
+  if (E != null && E.mezzanine && !r.threeD) {
+    const h = r.project.floors.filter((O) => O.buildingId === E.buildingId && O.id !== E.id), de = h.filter((O) => O.elevation < E.elevation).sort((O, J) => J.elevation - O.elevation)[0], Y = h.filter((O) => O.elevation > E.elevation).sort((O, J) => O.elevation - J.elevation)[0], We = (O, J, Se) => O ? Ar(r.project, O.id, null, !1).features.filter(
+      (W) => {
+        var qe;
+        return ((qe = W.properties) == null ? void 0 : qe.floorId) === O.id && !W.properties.decoration && (Se || W.properties.kind !== "wall") && W.geometry.type === "Polygon";
+      }
+    ).map((W) => ({ ...W, properties: { kind: W.properties.kind, color: W.properties.color, context: J } })) : [];
+    P.features = [...We(de, "lower", !0), ...P.features, ...We(Y, "upper", !1)];
+  }
+  return P;
+}
+const Ft = (r) => r.origin[2] ?? 0, nt = { looking: !1, sound: !0, up: null, down: null, where: "", next: "" }, _r = "kerros:walk-muted", Hr = "kerros:walk-fov";
+function Cn(r) {
+  var hr, mr, kr, wr, vr, br, pr, Ir, jr, xr, Lr, Pr, Dr;
+  const Z = L(null), P = L(null), E = L(null), h = L(r), de = L(/* @__PURE__ */ new Map());
+  h.current = r;
+  const [Y, We] = ae(!1), [O, J] = ae(0), [Se, W] = ae(""), [qe, Ct] = ae(0);
+  A(() => {
+    const e = (t) => {
+      var d;
+      const o = h.current;
+      if (o.threeD || o.walk || t.ctrlKey || t.metaKey || t.altKey || t.shiftKey || t.isComposing || (d = t.target) != null && d.closest('input, textarea, select, dialog, [contenteditable], [role="textbox"]') || o.canEdit && o.tool !== "select" && o.tool !== "pan") return;
+      const i = { w: [0, -140], a: [-140, 0], s: [0, 140], d: [140, 0] }[t.key.toLowerCase()];
+      !i || !P.current || (t.preventDefault(), t.stopImmediatePropagation(), P.current.panBy(i, { duration: 250 }));
+    };
+    return window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0);
+  }, []);
+  const Nt = L(null), Ee = L(null), Xr = () => (Ee.current ?? (Ee.current = import("./SceneLayer.js").then((e) => {
+    Nt.current = e.SceneLayer;
+  })), Ee.current);
+  A(() => {
+    if (!r.threeD || !r.showPlan) return;
+    let e = !0;
+    return Xr().then(() => {
+      e && (Re(), J((t) => t + 1));
+    }).catch((t) => {
+      Ee.current = null, e && W(`The 3D view could not load: ${String(t)}`);
+    }), () => {
+      e = !1;
+    };
+  }, [r.threeD, r.showPlan]);
+  const Ke = L(!1), $t = L(null), Tt = L(null), Ye = L(!1), Ue = Fo().mapStyle, pe = L(Ue);
+  pe.current = Ue;
+  const At = Ro().map, Fe = L(At);
+  Fe.current = At;
+  const zt = le(
+    () => nn(r, Ue),
+    [
+      r.project,
+      r.floorId,
+      r.selected,
+      r.coverage,
+      r.threeD,
+      r.threeD ? null : r.statuses,
+      Ue
+    ]
+  ), Bt = le(
+    () => $o(r.project, r.draft, r.hover, r.tool),
+    [r.project, r.draft, r.hover, r.tool]
+  ), it = le(
+    () => ({
+      type: "FeatureCollection",
+      features: [
+        ...r.guides ?? [],
+        ...r.canEdit && !r.threeD ? (r.project.virtualBoundaries ?? []).filter((e) => e.floorId === r.floorId).map((e) => ({ id: e.id, role: "boundary", line: we(r.project, e) })) : []
+      ].map((e) => ({
+        type: "Feature",
+        properties: { role: e.role, ..."id" in e ? { id: e.id, kind: "boundary" } : {} },
+        geometry: { type: "LineString", coordinates: e.line.map((t) => ce(t, r.project.origin)) }
+      }))
+    }),
+    [r.guides, r.project, r.floorId, r.canEdit, r.threeD]
+  ), _e = r.tool === "route", Ot = !!r.selected && (!!((hr = r.project.navNodes) != null && hr.some((e) => e.id === r.selected)) || !!((mr = r.project.navEdges) != null && mr.some((e) => e.id === r.selected))), Wt = le(
+    () => r.route && !r.threeD ? Bo(
+      r.project,
+      r.route,
+      r.floorId,
+      r.activeStep ?? null
+    ) : Rt,
+    [r.project, r.route, r.floorId, r.activeStep, r.threeD]
+  ), qt = le(
+    () => !r.threeD && r.canEdit && (_e || Ot) ? To(r.project, r.floorId, r.selected) : Rt,
+    [r.project, r.floorId, r.selected, r.threeD, r.canEdit, _e, Ot]
+  ), Kt = L(zt), at = L(Bt), Yt = L(Wt), lt = L(it), Ut = L(qt);
+  Kt.current = zt, at.current = Bt, lt.current = it, Yt.current = Wt, Ut.current = qt;
+  const re = L(null), ct = L(/* @__PURE__ */ new Map()), _t = le(() => new Map(r.project.objects.map((e) => [e.id, e])), [r.project]), Ht = L(_t);
+  Ht.current = _t;
+  const Xt = (e) => {
+    const t = e.currentTarget.querySelector(".marker-tooltip"), o = Z.current;
+    if (!t || !o) return;
+    const n = o.getBoundingClientRect(), i = e.currentTarget.getBoundingClientRect(), d = t.offsetWidth / 2 + 10;
+    t.classList.toggle("flip-y", i.top - n.top < t.offsetHeight + 24), t.classList.toggle("nudge-left", i.left + d > n.right), t.classList.toggle("nudge-right", i.left - d < n.left);
+  }, Ie = L(/* @__PURE__ */ new Map()), Vt = () => {
+    const e = P.current;
+    if (!e || !e.getStyle()) return;
+    const t = h.current;
+    if (!!t.walk && t.floorId !== null)
+      for (const n of e.getStyle().layers ?? [])
+        n.id.startsWith("kerros-") || n.type === "background" || Ie.current.has(n.id) || (Ie.current.set(
+          n.id,
+          e.getLayoutProperty(n.id, "visibility") ?? "visible"
+        ), e.setLayoutProperty(n.id, "visibility", "none"));
+    else if (Ie.current.size) {
+      for (const [n, i] of Ie.current) e.getLayer(n) && e.setLayoutProperty(n, "visibility", i);
+      Ie.current.clear();
+    }
+  };
+  A(() => {
+    Y && Vt();
+  }, [r.walk, r.floorId, Y]);
+  const He = () => {
+    var i, d;
+    const e = P.current, t = $t.current, o = h.current;
+    if (!e || !t) return;
+    const n = Ht.current;
+    for (const l of Array.from(t.children)) {
+      const { wx: s, wy: a, oid: u, floor: f, bearing: k } = l.dataset;
+      if (!(s === void 0 || a === void 0))
+        if (k !== void 0 && l.style.setProperty("--turn", `${Number(k) - e.getBearing()}deg`), o.threeD && f !== void 0) {
+          const g = (i = E.current) == null ? void 0 : i.projectPoint([Number(s), Number(a)], f || null);
+          g && (l.style.left = `${g.x}px`, l.style.top = `${g.y}px`, l.style.visibility = g.visible ? "" : "hidden");
+        } else if (o.threeD && u) {
+          const g = n.get(u), b = g && ((d = E.current) == null ? void 0 : d.projectObject(g));
+          b && (l.style.left = `${b.x}px`, l.style.top = `${b.y}px`, l.style.visibility = b.visible ? "" : "hidden");
+        } else {
+          const g = e.project(ce([Number(s), Number(a)], o.project.origin));
+          l.style.left = `${g.x + Number(l.dataset.screenDx ?? 0)}px`, l.style.top = `${g.y + Number(l.dataset.screenDy ?? 0)}px`, l.style.visibility = "";
+        }
+    }
+  }, Xe = L(""), Zt = L(/* @__PURE__ */ new Set()), je = L(/* @__PURE__ */ new Map()), Jt = () => {
+    var a, u, f;
+    const e = P.current, t = h.current, o = (u = (a = t.basemap) == null ? void 0 : a.vectorSchema) == null ? void 0 : u.footprints;
+    if (!e || !o || !e.getLayer("kerros-city-3d")) return;
+    if (!t.threeD || Me(t.project, t.floorId, t.stack).buried) {
+      for (const [k, g] of je.current)
+        e.getLayer(k) && e.setFilter(k, g ?? void 0);
+      je.current.clear(), Xe.current = "";
+      return;
+    }
+    const n = e.getLayer("kerros-city-3d").source, i = t.project.objects.filter((k) => k.kind === "parcel" && k.rings), d = Zt.current;
+    for (const k of t.project.buildings) k.sourceId !== void 0 && d.add(k.sourceId);
+    for (const k of e.querySourceFeatures(n, { sourceLayer: o.sourceLayer })) {
+      const g = (f = k.properties) == null ? void 0 : f[o.idField];
+      if (g === void 0 || d.has(g)) continue;
+      const b = k.geometry, c = b.type === "Polygon" ? b.coordinates[0] : b.type === "MultiPolygon" ? b.coordinates[0][0] : null;
+      if (!c) continue;
+      const v = c.reduce((F, p) => [F[0] + p[0] / c.length, F[1] + p[1] / c.length], [0, 0]), R = se(v, t.project.origin);
+      i.some((F) => Er(R, F.rings[0])) && d.add(g);
+    }
+    const l = JSON.stringify([...d].sort());
+    if (l === Xe.current) return;
+    Xe.current = l;
+    const s = ["!", ["in", ["get", o.idField], ["literal", [...d]]]];
+    e.setFilter("kerros-city-3d", s);
+    for (const k of e.getStyle().layers) {
+      if (k.id === "kerros-city-3d" || !("source-layer" in k) || k["source-layer"] !== o.sourceLayer)
+        continue;
+      je.current.has(k.id) || je.current.set(k.id, e.getFilter(k.id) ?? null);
+      const g = je.current.get(k.id);
+      e.setFilter(k.id, g ? ["all", g, s] : s);
+    }
+  }, Vr = (e) => {
+    var a, u, f, k, g;
+    const t = P.current, o = h.current, n = (u = (a = o.basemap) == null ? void 0 : a.vectorSchema) == null ? void 0 : u.footprints;
+    if (!t || !n) return;
+    const i = t.getStyle().layers.filter((b) => "source-layer" in b && b["source-layer"] === n.sourceLayer && b.id !== "kerros-city-3d").map((b) => b.id), d = i.length ? t.queryRenderedFeatures(
+      [
+        [e.x - 3, e.y - 3],
+        [e.x + 3, e.y + 3]
+      ],
+      { layers: i }
+    ).find((b) => {
+      var c;
+      return ((c = b.properties) == null ? void 0 : c[n.idField]) !== void 0;
+    }) : void 0;
+    if (!d) {
+      o.onError(Fe.current.adoptMiss);
+      return;
+    }
+    const l = d.properties[n.idField], s = [];
+    for (const b of t.queryRenderedFeatures(void 0, {
+      layers: i,
+      filter: ["==", ["get", n.idField], l]
+    })) {
+      const c = b.geometry;
+      if (c.type === "Polygon") s.push(c.coordinates.map((v) => v.map((R) => se(R, o.project.origin))));
+      else if (c.type === "MultiPolygon")
+        for (const v of c.coordinates)
+          s.push(v.map((R) => R.map((F) => se(F, o.project.origin))));
+    }
+    try {
+      const c = [...Po.union(...s.map((F) => [F]))].sort((F, p) => Cr(p[0]) - Cr(F[0]))[0], v = (F) => {
+        const p = [];
+        for (const C of pt(F))
+          (!p.length || Math.hypot(C[0] - p[p.length - 1][0], C[1] - p[p.length - 1][1]) > 0.2) && p.push(C);
+        for (; p.length > 2 && Math.hypot(p[0][0] - p[p.length - 1][0], p[0][1] - p[p.length - 1][1]) < 0.2; )
+          p.pop();
+        return p;
+      }, R = c.map(v).filter((F) => F.length >= 3);
+      if (!R.length) throw new Error("degenerate footprint");
+      (g = o.onAdopt) == null || g.call(o, {
+        rings: R,
+        sourceId: l,
+        storeys: ((f = n.storeys) == null ? void 0 : f.call(n, d.properties)) ?? 1,
+        name: ((k = n.name) == null ? void 0 : k.call(n, d.properties)) ?? "City building"
+      });
+    } catch {
+      o.onError(Fe.current.adoptFail);
+    }
+  }, Gt = () => {
+    const e = P.current;
+    if (!(!Ye.current || !(e != null && e.getSource("kerros-draft"))))
+      for (const [t, o] of [
+        ["kerros-draft", at.current],
+        ["kerros-guide", lt.current]
+      ])
+        e.getSource(t).setData(o), ct.current.set(t, o);
+  }, Re = () => {
+    const e = P.current, t = h.current;
+    if (!(!e || !Ye.current))
+      try {
+        Zr(e, t);
+      } catch {
+        e.once("idle", Re);
+      }
+  }, Zr = (e, t) => {
+    var c, v, R, F, p, C, T, ne, he, M, Q, N;
+    e.hasImage("kerros-route-arrow") || e.addImage("kerros-route-arrow", Oo());
+    const o = {
+      dim: on,
+      entities: Kt.current,
+      draft: at.current,
+      guide: lt.current,
+      route: Yt.current,
+      navgraph: Ut.current
+    };
+    for (const [y, j] of Object.entries(o)) {
+      const $ = `kerros-${y}`;
+      e.getSource($) ? ct.current.get($) !== j && e.getSource($).setData(j) : e.addSource($, { type: "geojson", data: j, lineMetrics: y === "route" }), ct.current.set($, j);
+    }
+    if (!e.getLayer("kerros-areas")) {
+      const y = pe.current, j = (y == null ? void 0 : y.selection) ?? "#5a52d5", $ = (y == null ? void 0 : y.selectionFill) ?? "#c8c4f5", ge = (y == null ? void 0 : y.hover) ?? j, me = (y == null ? void 0 : y.draft) ?? j, Ae = (ke) => [
+        "case",
+        ["==", ["get", "kind"], "coverage"],
+        0.13,
+        ["==", ["get", "kind"], "status-halo"],
+        0.22,
+        ["==", ["get", "context"], "lower"],
+        0.35,
+        ["==", ["get", "context"], "upper"],
+        0,
+        ["==", ["get", "selected"], !0],
+        1,
+        ["==", ["get", "small"], !0],
+        ke,
+        1
+      ];
+      e.addLayer({
+        id: "kerros-dim",
+        type: "fill",
+        source: "kerros-dim",
+        paint: { "fill-color": "#0d0f16", "fill-opacity": 0.55 }
+      }), e.addLayer({
+        id: "kerros-underground",
+        type: "fill",
+        source: "kerros-dim",
+        paint: { "fill-color": "#262320", "fill-opacity": 0.985 }
+      }), e.addLayer({
+        id: "kerros-premises",
+        type: "fill",
+        source: "kerros-entities",
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", ["get", "kind"], "parcel"]],
+        paint: { "fill-color": "#f3f4f0", "fill-opacity": 0.97 }
+      }), e.addLayer({
+        id: "kerros-premises-line",
+        type: "line",
+        source: "kerros-entities",
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", ["get", "kind"], "parcel"]],
+        paint: { "line-color": "#9aa0ac", "line-width": 1.5, "line-dasharray": [4, 2] }
+      }), e.addLayer({
+        id: "kerros-areas",
+        type: "fill",
+        source: "kerros-entities",
+        filter: [
+          "all",
+          ["==", ["geometry-type"], "Polygon"],
+          ["!=", ["get", "kind"], "wall"],
+          ["!=", ["get", "kind"], "parcel"]
+        ],
+        paint: {
+          "fill-color": ["case", ["==", ["get", "selected"], !0], $, ["get", "color"]],
+          // Zoom expressions must be the OUTERMOST expression in a paint property — MapLibre throws
+          // (and silently drops the whole layer) if one is nested inside a `case`. So the data-driven
+          // chain is evaluated at each zoom stop, differing only in what a `small` feature gets.
+          "fill-opacity": ["interpolate", ["linear"], ["zoom"], 18.6, Ae(0), 19.6, Ae(1)]
+        }
+      }), e.addLayer({
+        id: "kerros-outline",
+        type: "line",
+        source: "kerros-entities",
+        filter: [
+          "all",
+          ["==", ["geometry-type"], "Polygon"],
+          ["!=", ["get", "kind"], "furniture"],
+          ["!=", ["get", "kind"], "parcel"],
+          ["!=", ["get", "context"], "upper"]
+        ],
+        paint: {
+          "line-color": ["case", ["==", ["get", "selected"], !0], j, "#a7adbb"],
+          "line-width": ["case", ["==", ["get", "selected"], !0], 2, 0.8],
+          // A narrow area is only a few pixels wide at building zoom; outlining hundreds of them
+          // (a garage of bays, a warehouse of racks) reads as a hatch rather than a plan. Fade them
+          // in once they are big enough to tell apart — a selected one always draws.
+          "line-opacity": [
+            "interpolate",
+            ["linear"],
+            ["zoom"],
+            18.6,
+            ["case", ["==", ["get", "selected"], !0], 1, ["==", ["get", "small"], !0], 0, 1],
+            19.6,
+            1
+          ]
+        }
+      }), e.addLayer({
+        id: "kerros-detail",
+        type: "line",
+        source: "kerros-entities",
+        filter: ["==", ["geometry-type"], "LineString"],
+        paint: { "line-color": ["get", "color"], "line-width": 1 }
+      }), e.addLayer({
+        id: "kerros-walls",
+        type: "fill",
+        source: "kerros-entities",
+        filter: ["==", ["get", "kind"], "wall"],
+        paint: {
+          "fill-color": ["case", ["==", ["get", "selected"], !0], j, ["get", "color"]],
+          "fill-opacity": ["case", ["==", ["get", "context"], "lower"], 0.3, 1]
+        }
+      }), e.addLayer({
+        id: "kerros-context-upper",
+        type: "line",
+        source: "kerros-entities",
+        filter: ["==", ["get", "context"], "upper"],
+        paint: { "line-color": "#8b90a0", "line-width": 1.2, "line-dasharray": [2, 2] }
+      }), e.addLayer({
+        id: "kerros-plan-dim",
+        type: "fill",
+        source: "kerros-entities",
+        filter: ["all", ["==", ["geometry-type"], "Polygon"], ["==", ["get", "kind"], "parcel"]],
+        paint: { "fill-color": "#0d0f16", "fill-opacity": 0.58 }
+      }), e.addLayer({
+        id: "kerros-hover",
+        type: "line",
+        source: "kerros-entities",
+        filter: ["==", ["get", "id"], ""],
+        paint: { "line-color": ge, "line-width": 2.5 }
+      }), e.addLayer({
+        id: "kerros-guide-line",
+        type: "line",
+        source: "kerros-guide",
+        paint: {
+          "line-color": me,
+          "line-width": ["case", ["==", ["get", "role"], "proposal"], 3, 1.2],
+          "line-opacity": ["case", ["==", ["get", "role"], "proposal"], 0.9, 0.45],
+          "line-dasharray": [2, 2]
+        }
+      }), e.addLayer({
+        id: "kerros-draft-fill",
+        type: "fill",
+        source: "kerros-draft",
+        filter: ["==", ["geometry-type"], "Polygon"],
+        paint: { "fill-color": me, "fill-opacity": 0.13 }
+      }), e.addLayer({
+        id: "kerros-draft-line",
+        type: "line",
+        source: "kerros-draft",
+        paint: { "line-color": me, "line-width": 2, "line-dasharray": [3, 2] }
+      }), e.addLayer({
+        id: "kerros-navgraph-edge",
+        type: "line",
+        source: "kerros-navgraph",
+        filter: ["==", ["geometry-type"], "LineString"],
+        paint: {
+          "line-color": [
+            "case",
+            ["==", ["get", "selected"], !0],
+            "#5a52d5",
+            ["==", ["get", "kind"], "door"],
+            "#6a63d8",
+            "#8d85dc"
+          ],
+          "line-width": 1.4,
+          // A derived graph is drawn fainter and in longer dashes: it is what the plan implies, not
+          // what anyone drew, and the difference matters the moment you start editing it.
+          "line-dasharray": ["case", ["==", ["get", "derived"], !0], ["literal", [4, 3]], ["literal", [2, 2]]],
+          "line-opacity": ["case", ["==", ["get", "derived"], !0], 0.5, 0.85]
+        }
+      }), e.addLayer({
+        id: "kerros-navgraph-node",
+        type: "circle",
+        source: "kerros-navgraph",
+        filter: ["==", ["geometry-type"], "Point"],
+        paint: {
+          "circle-radius": ["case", ["==", ["get", "vertical"], !0], 5, ["==", ["get", "bound"], !0], 4.5, 3.5],
+          "circle-color": [
+            "case",
+            ["==", ["get", "selected"], !0],
+            "#5a52d5",
+            ["==", ["get", "vertical"], !0],
+            "#567c9a",
+            ["==", ["get", "bound"], !0],
+            "#6a63d8",
+            "#8d85dc"
+          ],
+          "circle-stroke-width": 1.2,
+          "circle-stroke-color": "#ffffff",
+          "circle-opacity": ["case", ["==", ["get", "derived"], !0], 0.55, 1]
+        }
+      });
+      const De = (ke) => ["interpolate", ["linear"], ["zoom"], 15, ke * 0.5, 18, ke * 0.82, 21, ke];
+      e.addLayer({
+        id: "kerros-route-casing",
+        type: "line",
+        source: "kerros-route",
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", ["get", "flow"], !0]],
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: { "line-color": rt, "line-width": De(31), "line-opacity": 0.96 }
+      }), e.addLayer({
+        id: "kerros-route",
+        type: "line",
+        source: "kerros-route",
+        // Not the flow tracing: it covers the same ground, carries no `active`, and so painted itself
+        // over the whole path in the not-your-step tone — a route drawn twice, the second time wrong.
+        filter: [
+          "all",
+          ["==", ["geometry-type"], "LineString"],
+          ["==", ["get", "onFloor"], !0],
+          ["!=", ["get", "flow"], !0]
+        ],
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": ["case", ["==", ["get", "active"], !0], Lt, ot],
+          "line-width": De(20),
+          "line-opacity": ["case", ["==", ["get", "active"], !0], 1, 0.9]
+        }
+      }), e.addLayer({
+        id: "kerros-route-flow",
+        type: "line",
+        source: "kerros-route",
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", ["get", "flow"], !0]],
+        layout: { "line-cap": "butt", "line-join": "round" },
+        // Repainted on a timer while a route is shown; the static value is the band at rest.
+        paint: { "line-width": De(20), "line-gradient": zr(0) }
+      }), e.addLayer({
+        id: "kerros-route-off",
+        type: "line",
+        source: "kerros-route",
+        filter: [
+          "all",
+          ["==", ["geometry-type"], "LineString"],
+          ["!=", ["get", "onFloor"], !0],
+          ["!=", ["get", "flow"], !0]
+        ],
+        paint: { "line-color": ot, "line-width": 2.4, "line-dasharray": [2, 2], "line-opacity": 0.45 }
+      }), e.addLayer({
+        id: "kerros-route-arrows",
+        type: "symbol",
+        source: "kerros-route",
+        filter: ["all", ["==", ["geometry-type"], "LineString"], ["==", ["get", "flow"], !0]],
+        layout: {
+          "symbol-placement": "line",
+          "symbol-spacing": 52,
+          "icon-image": "kerros-route-arrow",
+          "icon-size": ["interpolate", ["linear"], ["zoom"], 15, 0.5, 18, 0.8, 21, 1],
+          "icon-rotation-alignment": "map",
+          "icon-allow-overlap": !0,
+          "icon-ignore-placement": !0
+        }
+      }), e.addLayer({
+        id: "kerros-route-vertical",
+        type: "circle",
+        source: "kerros-route",
+        filter: ["==", ["get", "vertical"], !0],
+        paint: {
+          "circle-radius": ["case", ["==", ["get", "active"], !0], 11, 8],
+          "circle-color": ["case", ["==", ["get", "active"], !0], Lt, ot],
+          "circle-stroke-width": 3,
+          "circle-stroke-color": rt,
+          "circle-opacity": ["case", ["==", ["get", "onFloor"], !0], 0.95, 0.4]
+        }
+      });
+    }
+    const n = t.showPlan && Me(t.project, t.floorId, t.threeD && t.stack).buried;
+    for (const y of [
+      "kerros-premises",
+      "kerros-premises-line",
+      "kerros-areas",
+      "kerros-outline",
+      "kerros-detail",
+      "kerros-walls",
+      "kerros-context-upper",
+      "kerros-hover"
+    ])
+      e.setLayoutProperty(y, "visibility", t.threeD || !t.showPlan ? "none" : "visible");
+    e.getLayer("kerros-underground") && (e.setLayoutProperty("kerros-underground", "visibility", n && !t.threeD ? "visible" : "none"), e.setPaintProperty("kerros-underground", "fill-color", "#15130f"));
+    const i = (1 - xt(t.sun).day) * (t.dark || n ? 0 : 1), d = Co(t.sun);
+    e.setLight({
+      anchor: "map",
+      position: d.mapPosition,
+      color: d.color,
+      intensity: 0.28 + 0.14 * xt(t.sun).day
+    });
+    const l = xt(t.sun).day;
+    e.setSky({
+      "sky-color": t.dark ? "#172435" : Tr("#5d6488", "#92b9d2", l),
+      "horizon-color": t.dark ? "#343b4c" : Tr("#d9ac92", "#e8e4d9", l),
+      "sky-horizon-blend": 0.65,
+      "atmosphere-blend": t.threeD && !n ? 0.65 : 0
+    }), e.setLayoutProperty("kerros-dim", "visibility", t.dark || n || i > 0.02 ? "visible" : "none"), e.setPaintProperty("kerros-dim", "fill-color", i > 0 ? "#141a2b" : "#0d0f16"), e.setPaintProperty("kerros-dim", "fill-opacity", i > 0 ? 0.42 * i : 0.55), e.setPaintProperty("kerros-premises", "fill-color", t.dark ? "#232734" : "#f3f4f0"), e.setPaintProperty("kerros-premises-line", "line-color", t.dark ? "#565d73" : "#9aa0ac"), e.setLayoutProperty("kerros-plan-dim", "visibility", t.dark && !t.threeD && t.showPlan ? "visible" : "none");
+    const s = !t.threeD && !!t.route;
+    for (const y of [
+      "kerros-route-casing",
+      "kerros-route",
+      "kerros-route-flow",
+      "kerros-route-off",
+      "kerros-route-arrows",
+      "kerros-route-vertical"
+    ])
+      e.setLayoutProperty(y, "visibility", s ? "visible" : "none");
+    const a = !t.threeD && t.canEdit && (t.tool === "route" || !!((c = t.project.navNodes) != null && c.some((y) => y.id === t.selected)) || !!((v = t.project.navEdges) != null && v.some((y) => y.id === t.selected)));
+    for (const y of ["kerros-navgraph-edge", "kerros-navgraph-node"])
+      e.setLayoutProperty(y, "visibility", a ? "visible" : "none");
+    e.setPaintProperty("kerros-route-casing", "line-color", rt);
+    {
+      const y = pe.current;
+      if (y != null && y.route || y != null && y.routeActive) {
+        const j = y.routeActive ?? Lt, $ = y.route ?? ot;
+        e.setPaintProperty("kerros-route", "line-color", [
+          "case",
+          ["==", ["get", "active"], !0],
+          j,
+          $
+        ]), e.setPaintProperty("kerros-route-vertical", "circle-color", [
+          "case",
+          ["==", ["get", "active"], !0],
+          j,
+          $
+        ]), e.setPaintProperty("kerros-route-off", "line-color", $);
+      }
+    }
+    e.setPaintProperty("kerros-route-vertical", "circle-stroke-color", rt), e.setPaintProperty("kerros-navgraph-node", "circle-stroke-color", t.dark ? "#14161f" : "#ffffff"), e.getLayer("background") && e.setPaintProperty("background", "background-color", t.dark ? "#14161f" : "#e6e8e4");
+    const u = (F = (R = t.basemap) == null ? void 0 : R.vectorSchema) == null ? void 0 : F.footprints, f = (C = (p = t.basemap) == null ? void 0 : p.vectorSchema) == null ? void 0 : C.context, k = u || f ? (T = Object.entries(e.getStyle().sources).find(([, y]) => y.type === "vector")) == null ? void 0 : T[0] : void 0;
+    if (k && u && (e.getLayer("kerros-city-3d") || e.addLayer(
+      {
+        id: "kerros-city-3d",
+        type: "fill-extrusion",
+        source: k,
+        "source-layer": u.sourceLayer,
+        paint: {
+          "fill-extrusion-opacity": 1,
+          "fill-extrusion-vertical-gradient": !0,
+          "fill-extrusion-height": u.heightExpression ?? 6.5
+        }
+      },
+      e.getLayer("kerros-3d") ? "kerros-3d" : void 0
+    ), e.setLayoutProperty(
+      "kerros-city-3d",
+      "visibility",
+      t.threeD && t.cityBuildings && !n ? "visible" : "none"
+    ), e.setPaintProperty(
+      "kerros-city-3d",
+      "fill-extrusion-color",
+      t.dark ? "#343a49" : [
+        "interpolate",
+        ["linear"],
+        ["to-number", u.heightExpression ?? 6.5],
+        0,
+        "#c5beaf",
+        12,
+        "#bcb7aa",
+        30,
+        "#b0b4af",
+        70,
+        "#a3adb0"
+      ]
+    ), Jt()), k && f) {
+      f.waterLayer && !e.getLayer("kerros-ug-water") && e.addLayer(
+        {
+          id: "kerros-ug-water",
+          type: "fill",
+          source: k,
+          "source-layer": f.waterLayer,
+          paint: { "fill-color": "#10151b", "fill-opacity": 0.55 }
+        },
+        "kerros-premises"
+      ), f.roadLayer && !e.getLayer("kerros-ug-roads") && e.addLayer(
+        {
+          id: "kerros-ug-roads",
+          type: "line",
+          source: k,
+          "source-layer": f.roadLayer,
+          paint: {
+            "line-color": "#7d766a",
+            "line-opacity": 0.33,
+            "line-width": ["interpolate", ["linear"], ["zoom"], 13, 0.5, 16, 2.5, 19, 8],
+            "line-dasharray": [4, 3]
+          }
+        },
+        "kerros-premises"
+      ), f.buildingLayer && !e.getLayer("kerros-ug-buildings") && e.addLayer(
+        {
+          id: "kerros-ug-buildings",
+          type: "line",
+          source: k,
+          "source-layer": f.buildingLayer,
+          paint: { "line-color": "#8a8375", "line-opacity": 0.4, "line-width": 1 }
+        },
+        "kerros-premises"
+      );
+      for (const y of ["kerros-ug-water", "kerros-ug-roads", "kerros-ug-buildings"])
+        e.getLayer(y) && e.setLayoutProperty(y, "visibility", n && !t.threeD ? "visible" : "none");
+    }
+    const g = (he = (ne = t.basemap) == null ? void 0 : ne.vectorSchema) == null ? void 0 : he.cadastre;
+    if (g) {
+      e.getSource("kerros-cadastre") || (e.addSource("kerros-cadastre", { type: "vector", url: g.tilejson, attribution: g.attribution }), e.addLayer(
+        {
+          id: "kerros-cadastre-fill",
+          type: "fill",
+          source: "kerros-cadastre",
+          "source-layer": g.parcelLayer,
+          paint: { "fill-color": "rgba(255,255,255,0.02)" }
+        },
+        "kerros-premises"
+      ), e.addLayer(
+        {
+          id: "kerros-cadastre-line",
+          type: "line",
+          source: "kerros-cadastre",
+          "source-layer": g.boundaryLayer,
+          paint: { "line-width": 1, "line-dasharray": [5, 2, 1, 2] }
+        },
+        "kerros-premises"
+      ), e.addLayer(
+        {
+          id: "kerros-cadastre-mark",
+          type: "circle",
+          source: "kerros-cadastre",
+          "source-layer": g.markLayer,
+          minzoom: 17,
+          paint: { "circle-radius": 2.4, "circle-stroke-width": 1 }
+        },
+        "kerros-premises"
+      ), e.addLayer(
+        {
+          id: "kerros-cadastre-label",
+          type: "symbol",
+          source: "kerros-cadastre",
+          "source-layer": g.labelLayer,
+          minzoom: 15.5,
+          layout: {
+            "text-field": ["get", g.labelField],
+            "text-font": [g.font],
+            "text-size": 10.5,
+            "text-padding": 12
+          },
+          paint: {}
+        },
+        "kerros-premises"
+      ));
+      for (const y of [
+        "kerros-cadastre-fill",
+        "kerros-cadastre-line",
+        "kerros-cadastre-mark",
+        "kerros-cadastre-label"
+      ])
+        e.setLayoutProperty(y, "visibility", t.cadastre && !n ? "visible" : "none");
+      e.setPaintProperty("kerros-cadastre-line", "line-color", t.dark ? "#8d80c9" : "#a5674f"), e.setPaintProperty("kerros-cadastre-line", "line-opacity", t.dark ? 0.75 : 0.8), e.setPaintProperty("kerros-cadastre-mark", "circle-color", t.dark ? "#8d80c9" : "#a5674f"), e.setPaintProperty("kerros-cadastre-mark", "circle-stroke-color", t.dark ? "#14161f" : "#ffffff"), e.setPaintProperty("kerros-cadastre-label", "text-color", t.dark ? "#a89ddb" : "#96604c"), e.setPaintProperty("kerros-cadastre-label", "text-halo-color", t.dark ? "#14161f" : "#f4f2ee"), e.setPaintProperty("kerros-cadastre-label", "text-halo-width", 1.1);
+    }
+    if (t.threeD && t.showPlan) {
+      if (!e.getLayer("kerros-3d")) {
+        const y = Nt.current;
+        if (!y) return;
+        E.current = new y(), e.addLayer(E.current), E.current.animateIn();
+      }
+      for (const y of ["kerros-dim", "kerros-underground"]) e.getLayer(y) && e.moveLayer(y, "kerros-3d");
+      (M = E.current) == null || M.setMapStyle(pe.current), (Q = E.current) == null || Q.update(
+        t.project,
+        t.floorId,
+        t.stack,
+        t.selected,
+        t.sun,
+        Ve.current ? new Map(
+          [...t.statuses].map(([y, j]) => {
+            const $ = t.project.objects.find((ge) => ge.id === Ve.current);
+            return [
+              y,
+              y === ($ == null ? void 0 : $.feedId) ? {
+                ...j,
+                carFloorId: t.floorId ?? void 0,
+                targetFloorId: void 0,
+                open: j.carFloorId === t.floorId && !j.targetFloorId && j.open
+              } : j
+            ];
+          })
+        ) : t.statuses,
+        t.excavation ?? !1,
+        t.walk ?? !1
+      ), (N = E.current) == null || N.setRoute(t.route ?? null, t.activeStep ?? null);
+    } else {
+      e.getLayer("kerros-3d") && (e.removeLayer("kerros-3d"), E.current = null);
+      for (const y of ["kerros-dim", "kerros-underground"])
+        e.getLayer(y) && e.moveLayer(y, "kerros-premises");
+    }
+    const b = new Set(t.project.drawings.map((y) => `drawing-${y.id}`));
+    for (const y of Object.keys(e.getStyle().sources).filter((j) => j.startsWith("drawing-") && !b.has(j)))
+      e.getLayer(y) && e.removeLayer(y), e.removeSource(y);
+    for (const y of t.project.drawings) {
+      const j = `drawing-${y.id}`, $ = de.current.get(y.assetId);
+      if (!$) continue;
+      const ge = Mo(y).map((me) => ce(me, t.project.origin));
+      e.getSource(j) ? (e.getSource(j).setCoordinates(ge), e.setPaintProperty(j, "raster-opacity", y.opacity)) : (e.addSource(j, { type: "image", url: $, coordinates: ge }), e.addLayer(
+        { id: j, source: j, type: "raster", paint: { "raster-opacity": y.opacity, "raster-fade-duration": 0 } },
+        "kerros-outline"
+      )), e.setLayoutProperty(j, "visibility", y.visible && y.floorId === t.floorId && !t.threeD ? "visible" : "none");
+    }
+  };
+  A(() => {
+    var g, b;
+    if (!Z.current) return;
+    let e;
+    const t = r.initialCamera;
+    try {
+      e = new et.Map({
+        container: Z.current,
+        style: $r.style,
+        transformRequest: (g = r.basemap) == null ? void 0 : g.transformRequest,
+        center: (t == null ? void 0 : t.center) ?? ce([0, -1], r.project.origin),
+        zoom: (t == null ? void 0 : t.zoom) ?? 18.5,
+        bearing: (t == null ? void 0 : t.bearing) ?? Ft(r.project),
+        pitch: (t == null ? void 0 : t.pitch) ?? 0,
+        // The plan camera's ceiling. Walk mode needs more — its eye is 2 m off the floor — and
+        // raises it to its own while it has the map, rather than letting the plan scroll in that far.
+        maxZoom: Xo,
+        minZoom: 5,
+        // Walk mode looks along the floor, a degree short of level. The default ceiling of 60° keeps
+        // the horizon off screen; 85 is as far as the plan camera's own drag will tilt, and the walk
+        // raises it to its own limit while it has the map.
+        maxPitch: 85,
+        attributionControl: !1,
+        canvasContextAttributes: { antialias: !0 },
+        dragRotate: !1,
+        pitchWithRotate: !1
+      });
+    } catch (c) {
+      W(`The map could not start: ${String(c)}`);
+      return;
+    }
+    P.current = e, e.addControl(new et.AttributionControl({ compact: !0 }), "bottom-right"), e.doubleClickZoom.disable();
+    let o = 0;
+    e.on("pitch", () => {
+      const c = performance.now();
+      c - o > 100 && (o = c, Ct(e.getPitch()));
+    }), e.on("pitchend", () => Ct(e.getPitch()));
+    let n;
+    const i = () => to(e), d = () => {
+      clearTimeout(n), n = setTimeout(() => ro(e), 220);
+    };
+    e.on("pitchstart", i), e.on("rotatestart", i), e.on("pitchend", d), e.on("rotateend", d), e.on("style.load", () => {
+      Ye.current = !0, Xe.current = "", Zt.current = /* @__PURE__ */ new Set(), je.current = /* @__PURE__ */ new Map(), Ie.current.clear(), e.getLayer("kerros-3d") || (E.current = null), Re(), Vt(), We(!0), J((c) => c + 1), W("");
+    }), e.on("load", () => {
+      var c;
+      (c = r.onReady) == null || c.call(r, e), !r.initialCamera && !h.current.playing && !h.current.walk && st();
+    });
+    let l = 0;
+    const s = () => J((c) => c + 1);
+    e.on("move", () => {
+      const c = performance.now();
+      c - l > 150 && (l = c, s());
+    });
+    const a = () => {
+      var c;
+      (c = re.current) != null && c.playing || s();
+    };
+    e.on("moveend", a), e.on("zoomend", a), e.on("idle", a), e.on("error", (c) => {
+      const v = c.sourceId;
+      /source layer/i.test(c.error.message) || v === "kerros-cadastre" || /tile/i.test(c.error.message) || W(Fe.current.basemapUnavailable);
+    }), e.on("mousemove", (c) => {
+      var T, ne, he, M, Q;
+      const v = h.current, R = se([c.lngLat.lng, c.lngLat.lat], v.project.origin), F = e.unproject([c.point.x + 10, c.point.y]), p = se([F.lng, F.lat], v.project.origin);
+      v.onHover(R, Math.hypot(p[0] - R[0], p[1] - R[1]));
+      let C = null;
+      v.threeD ? (C = ((T = E.current) == null ? void 0 : T.pick(c.point)) ?? null, (ne = E.current) == null || ne.setHover(C)) : v.tool === "select" && !e.isMoving() && e.getLayer("kerros-areas") && (C = ((he = e.queryRenderedFeatures(
+        [
+          [c.point.x - 3, c.point.y - 3],
+          [c.point.x + 3, c.point.y + 3]
+        ],
+        { layers: ["kerros-guide-line", "kerros-walls", "kerros-areas"].filter((y) => e.getLayer(y)) }
+      ).find(
+        (y) => y.properties.id && !["parcel", "building", "coverage", "status-halo", "furniture"].includes(y.properties.kind)
+      )) == null ? void 0 : he.properties.id) ?? null), C !== Tt.current && (Tt.current = C, (Q = (M = h.current).onHoverObject) == null || Q.call(M, C), e.getLayer("kerros-hover") && e.setFilter("kerros-hover", [
+        "all",
+        ["==", ["geometry-type"], "Polygon"],
+        ["==", ["get", "id"], C ?? ""]
+      ])), (v.tool === "select" || v.threeD) && (e.getCanvas().style.cursor = C ? "pointer" : "");
+    }), e.on("move", He), e.on("render", () => {
+      h.current.threeD && He();
+    });
+    const u = new ResizeObserver(() => {
+      e.resize(), He();
+    });
+    u.observe(Z.current);
+    const f = (c) => {
+      c.target.closest(".map-overlay") && (c.preventDefault(), c.stopPropagation(), e.getCanvasContainer().dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: c.deltaX,
+          deltaY: c.deltaY,
+          deltaMode: c.deltaMode,
+          clientX: c.clientX,
+          clientY: c.clientY,
+          ctrlKey: c.ctrlKey,
+          bubbles: !0,
+          cancelable: !0
+        })
+      ));
+    }, k = (b = Z.current) == null ? void 0 : b.parentElement;
+    return k == null || k.addEventListener("wheel", f, { capture: !0, passive: !1 }), e.on("idle", () => Jt()), e.on("click", (c) => {
+      var C;
+      if (Ke.current) {
+        Ke.current = !1;
+        return;
+      }
+      const v = h.current;
+      if (v.tool === "adopt" && v.canEdit && !v.threeD) {
+        Vr(c.point);
+        return;
+      }
+      const R = ["kerros-guide-line", "kerros-walls", "kerros-areas"].filter((T) => e.getLayer(T)), p = (v.threeD ? [] : e.queryRenderedFeatures(
+        [
+          [c.point.x - 3, c.point.y - 3],
+          [c.point.x + 3, c.point.y + 3]
+        ],
+        { layers: R }
+      )).find(
+        (T) => T.properties.id && T.properties.kind !== "parcel" && T.properties.kind !== "building" && T.properties.kind !== "coverage" && T.properties.kind !== "status-halo"
+      );
+      v.walk || v.onClick(
+        se([c.lngLat.lng, c.lngLat.lat], v.project.origin),
+        v.threeD ? ((C = E.current) == null ? void 0 : C.pick(c.point)) ?? null : (p == null ? void 0 : p.properties.id) ?? null
+      );
+    }), () => {
+      var c;
+      clearTimeout(n), (c = re.current) == null || c.stop(), re.current = null, u.disconnect(), k == null || k.removeEventListener("wheel", f, { capture: !0 }), de.current.forEach(URL.revokeObjectURL), de.current.clear(), e.getLayer("kerros-3d") && e.removeLayer("kerros-3d"), E.current = null, e.remove(), P.current = null;
+    };
+  }, []);
+  function st(e) {
+    const t = P.current;
+    if (!t) return;
+    const o = h.current;
+    if (o.walk) return;
+    const n = e !== void 0 ? [
+      ...o.project.junctions.filter((g) => g.floorId === e).map((g) => g.position),
+      ...o.project.objects.filter((g) => g.floorId === e).flatMap((g) => {
+        var b;
+        return ((b = g.rings) == null ? void 0 : b[0]) ?? [g.position];
+      })
+    ] : [], i = n.length ? n : [
+      ...o.project.junctions.filter((g) => g.floorId).map((g) => g.position),
+      ...o.project.objects.filter((g) => g.floorId).flatMap((g) => {
+        var b;
+        return ((b = g.rings) == null ? void 0 : b[0]) ?? [g.position];
+      })
+    ], d = i.length ? i : [...o.project.junctions.map((g) => g.position), ...o.project.objects.flatMap((g) => {
+      var b;
+      return ((b = g.rings) == null ? void 0 : b[0]) ?? [g.position];
+    })], l = d.length ? d : [
+      [-40, -30],
+      [40, 30]
+    ], s = new et.LngLatBounds();
+    for (const g of l) s.extend(ce(g, o.project.origin));
+    const a = t.cameraForBounds(s, {
+      padding: { top: 64, bottom: o.canEdit && !o.threeD ? 150 : 72, left: 42, right: 42 },
+      bearing: t.getBearing(),
+      maxZoom: 20.5
+    });
+    if (!a) return;
+    let u = a.zoom ?? t.getZoom();
+    const f = e === void 0 ? o.floorId : e, k = Me(o.project, f, o.stack).focusElevation;
+    if (o.threeD && k) {
+      const g = 78271.5169 * Math.cos(t.getCenter().lat * Math.PI / 180) / Math.pow(2, u), c = Wo(t) * g * Math.cos(t.getPitch() * Math.PI / 180), v = c + k;
+      v > 25 && (u += Math.log2(c / v));
+      const R = et.LngLat.convert(a.center);
+      a.center = Pt([R.lng, R.lat], k, t.getPitch(), t.getBearing());
+    }
+    ht(t, { center: a.center, zoom: u, bearing: t.getBearing(), duration: 650 });
+  }
+  A(() => {
+    Y && !r.playing && !r.walk && st(r.floorId);
+  }, [r.floorId, r.stack]), A(() => {
+    const e = P.current;
+    if (!e || !Y || !r.route || r.threeD) return;
+    let t = 0;
+    const o = window.setInterval(() => {
+      t = (t + 0.011) % 1, e.getLayer("kerros-route-flow") && e.setPaintProperty("kerros-route-flow", "line-gradient", zr(t));
+    }, 40);
+    return () => window.clearInterval(o);
+  }, [Y, r.route, r.threeD]);
+  const z = L(null), Ve = L(null), Ze = L(null), [Qt, Jr] = ae(null), [Gr, Qr] = ae(0), [er, tr] = ae(""), dt = (e) => {
+    var t, o;
+    Ve.current = e, Jr(e), (o = Ze.current) == null || o.set(
+      e ? { preset: "elevator", level: 0.5 } : Wr(h.current.project, h.current.floorId, ((t = z.current) == null ? void 0 : t.position) ?? [0, 0])
+    );
+  }, ut = L(null), [G, ft] = ae(nt), rr = () => {
+    const e = Ze.current;
+    if (e) {
+      e.setMuted(!e.isMuted), e.resume();
+      try {
+        localStorage.setItem(_r, e.isMuted ? "1" : "0");
+      } catch {
+      }
+      H.current = { ...H.current, sound: !e.isMuted }, ft(H.current);
+    }
+  }, [xe, eo] = ae(() => {
+    try {
+      return Br(Number(localStorage.getItem(Hr) ?? Or));
+    } catch {
+      return Or;
+    }
+  }), H = L(nt), or = L(0), nr = L(0), [Ce, Je] = ae(null), Le = (e = h.current.threeD && !h.current.walk) => {
+    const t = h.current;
+    return e ? Me(t.project, t.floorId, t.stack).focusElevation + Dt + Mt : 0;
+  }, Ne = (e, t, o, n = Le()) => {
+    const i = h.current, d = e.unproject([t, o]), l = n ? Pt([d.lng, d.lat], -n, e.getPitch(), e.getBearing()) : [d.lng, d.lat];
+    return se(l, i.project.origin);
+  }, gt = (e, t, o, n) => {
+    const i = ce(e, h.current.project.origin);
+    return Pt([i[0], i[1]], t, o, n);
+  }, $e = L(null), yt = L(!1), ht = (e, t) => {
+    yt.current = !0, $e.current = null;
+    const o = () => {
+      clearTimeout(n), e.off("moveend", o), yt.current = !1;
+    }, n = setTimeout(o, (t.duration ?? 300) + 400);
+    e.on("moveend", o), e.easeTo(t);
+  }, to = (e) => {
+    var i;
+    const t = h.current;
+    if ($e.current || yt.current || !t.threeD || t.walk || (i = re.current) != null && i.playing) return;
+    const { clientWidth: o, clientHeight: n } = e.getCanvas();
+    $e.current = Ne(e, o / 2, n / 2);
+  }, ro = (e) => {
+    var i;
+    const t = $e.current;
+    $e.current = null;
+    const o = h.current;
+    if (!t || !o.threeD || o.walk || (i = re.current) != null && i.playing) return;
+    const n = Le();
+    n && e.easeTo({ center: gt(t, n, e.getPitch(), e.getBearing()), duration: 300 });
+  }, oo = (e) => {
+    var s, a;
+    const t = P.current, o = Z.current;
+    if (e.currentTarget.releasePointerCapture(e.pointerId), Je(null), !t || !o) return;
+    const n = o.getBoundingClientRect(), i = e.clientX - n.left, d = e.clientY - n.top;
+    if (i < 0 || d < 0 || i > n.width || d > n.height || (s = document.elementFromPoint(e.clientX, e.clientY)) != null && s.closest(".map-navigator, .canvas-top-left")) return;
+    const l = h.current;
+    (a = l.onWalkAt) == null || a.call(l, {
+      floorId: l.floorId,
+      position: Ne(t, i, d),
+      // Facing up the screen: the way the map is turned is the way the person dropped on it faces.
+      heading: t.getBearing() - (l.project.origin[2] ?? 0)
+    });
+  }, ve = le(() => r.walk ? Yo(r.project) : null, [r.walk, r.project]), ir = le(
+    () => r.walk ? Uo(r.project, r.floorId) : [],
+    [r.walk, r.project, r.floorId]
+  ), Te = le(
+    () => r.walk ? [
+      ...r.project.objects.filter(
+        (e) => e.kind === "elevator" && Ur(r.project).primary.has(e.id) && Yr(r.project, e).some((t) => t.id === r.floorId)
+      ).flatMap((e) => {
+        const t = r.statuses.get(e.feedId ?? "");
+        return tn(
+          e,
+          !!(t != null && t.open) && !t.moving && !t.targetFloorId && t.carFloorId === r.floorId
+        );
+      }),
+      ...ir,
+      // What stands on the floor is as solid as what encloses it: a parked car, a column,
+      // a desk. Anything lower than a step is walked over; a rug is a fixture too.
+      ...r.project.objects.filter(
+        (e) => e.floorId === r.floorId && e.kind === "fixture" && e.height >= 0.3 && (e.baseHeight ?? 0) < Et && !e.slide && e.model !== "vent"
+      ).map((e) => So(e.position, e.width, e.depth, e.rotation))
+    ] : [],
+    [r.walk, r.project, r.floorId, r.statuses, ir]
+  ), no = (e) => {
+    var b;
+    const t = h.current, o = e.getBearing() - (t.project.origin[2] ?? 0), n = (b = t.route) == null ? void 0 : b.nodes.find((c) => c.floorId === t.floorId);
+    if (n) return { position: n.position, heading: o };
+    const i = t.avatar, { clientWidth: d, clientHeight: l } = e.getCanvas();
+    if (i && i.floorId === t.floorId) {
+      const c = e.project(ce(i.position, t.project.origin));
+      if (c.x >= 0 && c.y >= 0 && c.x <= d && c.y <= l) return i;
+    }
+    const s = Ko(e), a = s.altitude < 2 * (Et + Dt + Mt), u = s.lngLat, f = a ? se([u.lng, u.lat], t.project.origin) : Ne(e, d / 2, l / 2, Le(t.threeD)), k = (c) => ({ position: c, heading: o, pitch: a ? e.getPitch() : void 0 });
+    if (!t.floorId || qr(t.project, t.floorId, f)) return k(f);
+    const g = t.project.objects.filter((c) => {
+      var v;
+      return c.floorId === t.floorId && Do(c.kind) && ((v = c.rings) == null ? void 0 : v.length);
+    }).sort((c, v) => bt(v) - bt(c));
+    for (const c of g) {
+      const v = Qo(t.project, c);
+      if (Kr(c, v)) return k(v);
+    }
+    return k(f);
+  }, io = (e) => {
+    const t = h.current, o = t.route;
+    if (!(o != null && o.nodes.length)) return "";
+    let n = -1, i = Number.POSITIVE_INFINITY;
+    if (o.nodes.forEach((a, u) => {
+      if (a.floorId !== t.floorId) return;
+      const f = It(a.position, e);
+      f < i && (i = f, n = u);
+    }), n < 0) return "";
+    const d = o.nodes[n + 1] ?? o.nodes[n], l = o.steps.find((a) => a.nodeIds.includes(d.id)), s = Math.round(It(d.position, e));
+    return l ? `${s} m · ${l.text}` : `${s} m along the route`;
+  }, ar = (e) => {
+    const t = h.current, o = Ur(t.project), i = [...o.objects.get(t.floorId) ?? [], ...o.reaching.get(t.floorId ?? "") ?? []].find(
+      (f) => f.kind === "elevator" ? It(f.position, e) < Math.max(f.width, f.depth) / 2 + 2 : f.kind === "stairs" && Kr(f, e)
+    ), d = t.project.floors.find((f) => f.id === t.floorId);
+    if (!i || !d) return { shaft: null, up: null, down: null };
+    const l = Yr(t.project, i), s = i.stairModel === "escalator" ? i.travel ?? "up" : null, a = l.filter((f) => f.elevation > d.elevation)[0] ?? null, u = l.filter((f) => f.elevation < d.elevation).slice(-1)[0] ?? null;
+    return { shaft: i, up: s === "down" ? null : a, down: s === "up" ? null : u };
+  };
+  A(() => {
+    const e = P.current;
+    if (!e || !r.walk) return;
+    const t = h.current, o = new Go();
+    Ze.current = o;
+    let n = !1;
+    try {
+      n = localStorage.getItem(_r) === "1";
+    } catch {
+    }
+    o.setMuted(n);
+    const i = () => o.resume();
+    window.addEventListener("pointerdown", i, !0), window.addEventListener("keydown", i, !0);
+    const d = new Vo({
+      onPose: (a) => {
+        var R, F, p;
+        const u = performance.now();
+        u - nr.current >= 400 && (nr.current = u, (F = (R = h.current).onAvatar) == null || F.call(R, {
+          floorId: h.current.floorId,
+          position: a.position,
+          heading: a.heading,
+          pitch: a.pitch
+        }));
+        const f = u - or.current >= 150;
+        if (!f && a.looking === H.current.looking) return;
+        const k = f ? ar(a.position) : null, { up: g, down: b } = ((p = k == null ? void 0 : k.shaft) == null ? void 0 : p.kind) === "stairs" ? k : { up: null, down: null }, c = f ? qr(h.current.project, h.current.floorId, a.position) : null;
+        f && (or.current = u, o.set(
+          Ve.current ? { preset: "elevator", level: 0.5 } : Wr(h.current.project, h.current.floorId, a.position)
+        ));
+        const v = f ? {
+          looking: a.looking,
+          sound: !o.isMuted,
+          up: (g == null ? void 0 : g.name) ?? null,
+          down: (b == null ? void 0 : b.name) ?? null,
+          where: (c == null ? void 0 : c.name) ?? "",
+          next: io(a.position)
+        } : { ...H.current, looking: a.looking };
+        (v.looking !== H.current.looking || v.up !== H.current.up || v.down !== H.current.down || v.where !== H.current.where || v.next !== H.current.next) && (H.current = v, ft(v));
+      },
+      onUse: (a) => {
+        var k, g, b, c;
+        const u = ar(((k = z.current) == null ? void 0 : k.position) ?? [0, 0]);
+        if (((g = u.shaft) == null ? void 0 : g.kind) === "elevator") {
+          h.current.elevators && Qr((v) => v + 1);
+          return;
+        }
+        const f = a ? u.down : u.up;
+        f && ((c = (b = h.current).onRequestFloor) == null || c.call(b, f.id));
+      },
+      onDrop: (a) => {
+        var u, f;
+        return (f = (u = h.current).onRequestFloor) == null ? void 0 : f.call(u, a);
+      },
+      onFloor: (a) => {
+        var u, f;
+        return (f = (u = h.current).onRequestFloor) == null ? void 0 : f.call(u, a);
+      },
+      onExit: () => {
+        var a, u;
+        return (u = (a = h.current).onWalkExit) == null ? void 0 : u.call(a);
+      },
+      onSound: rr
+    });
+    z.current = d;
+    const l = no(e), s = St(St(l.position, Te, 1), Te);
+    return d.setFieldOfView(xe), d.attach(e, t.project.origin, { ...l, position: s }), () => {
+      var f, k;
+      const a = d.pose;
+      d.detach(), o.dispose(), Ze.current = null, window.removeEventListener("pointerdown", i, !0), window.removeEventListener("keydown", i, !0);
+      const u = {
+        floorId: h.current.floorId,
+        position: a.position,
+        heading: a.heading,
+        pitch: a.pitch
+      };
+      ut.current = u, (k = (f = h.current).onAvatar) == null || k.call(f, u), z.current = null, dt(null), H.current = nt, ft(nt);
+    };
+  }, [r.walk]), A(() => {
+    var e;
+    (e = z.current) == null || e.setFieldOfView(xe);
+  }, [xe]);
+  const lr = L(r.floorId), cr = le(
+    () => r.walk ? Ho(r.project, r.statuses) : [],
+    [r.walk, r.project, r.statuses]
+  );
+  A(() => {
+    var e, t;
+    if ((t = z.current) == null || t.setTerrain({
+      walls: Te,
+      eye: Et + Dt + Mt,
+      floorId: r.floorId,
+      elevation: ((e = r.project.floors.find((o) => o.id === r.floorId)) == null ? void 0 : e.elevation) ?? 0,
+      stairs: cr,
+      supports: ve == null ? void 0 : ve.supports,
+      dropAt: (o) => ve == null ? void 0 : ve.dropAt(o, r.floorId)
+    }), lr.current !== r.floorId && z.current && !z.current.onStairs) {
+      const o = z.current.position, n = _o(r.project, r.floorId, o);
+      n !== o && z.current.place(St(n, Te));
+    }
+    lr.current = r.floorId;
+  }, [Te, cr, ve]);
+  const sr = (e) => new Promise((t) => {
+    var a;
+    const o = P.current;
+    if (!o) return t();
+    const n = ((a = E.current) == null ? void 0 : a.diagnostics.revision) ?? -1;
+    let i = 0;
+    const d = () => {
+      clearTimeout(l), o.off("render", s), t();
+    }, l = setTimeout(d, 5e3), s = () => {
+      var f;
+      const u = h.current;
+      if (u.floorId !== e) {
+        i = 0;
+        return;
+      }
+      (u.threeD ? (((f = E.current) == null ? void 0 : f.diagnostics.revision) ?? n + 1) > n : ++i >= 2) && d();
+    };
+    o.on("render", s), o.triggerRepaint();
+  });
+  A(() => {
+    var n, i, d;
+    const e = P.current;
+    if (!r.playing || r.walk) {
+      (n = re.current) == null || n.stop();
+      return;
+    }
+    if (!e || !Y || re.current) return;
+    const t = h.current.route;
+    if (!t) {
+      (d = (i = h.current).onJourneyEnd) == null || d.call(i);
+      return;
+    }
+    let o = !1;
+    return import("./journey.js").then(({ JourneyPlayer: l }) => {
+      if (o) return;
+      const s = new l(e, {
+        requestFloor: (a) => {
+          var u, f;
+          return (f = (u = h.current).onRequestFloor) == null ? void 0 : f.call(u, a);
+        },
+        waitForFloor: sr,
+        focusElevation: (a) => h.current.threeD ? Me(h.current.project, a, h.current.stack).focusElevation : 0,
+        onStep: (a) => {
+          var u, f;
+          return (f = (u = h.current).onJourneyStep) == null ? void 0 : f.call(u, a);
+        },
+        onEnd: () => {
+          var a, u;
+          re.current = null, J((f) => f + 1), (u = (a = h.current).onJourneyEnd) == null || u.call(a);
+        }
+      });
+      re.current = s, s.play(t, { origin: h.current.project.origin, startFloorId: h.current.floorId });
+    }).catch((l) => {
+      var s, a;
+      o || (W(`Route playback could not load: ${String(l)}`), (a = (s = h.current).onJourneyEnd) == null || a.call(s));
+    }), () => {
+      var l;
+      o = !0, (l = re.current) == null || l.stop();
+    };
+  }, [r.playing, r.walk, Y]), A(() => {
+    var d, l;
+    if (!r.playing || !r.walk || !z.current) return;
+    const e = h.current.route;
+    if (!e) {
+      (l = (d = h.current).onJourneyEnd) == null || l.call(d);
+      return;
+    }
+    let t = !1, o;
+    const n = {
+      project: h.current.project,
+      floor: () => h.current.floorId,
+      changeFloor: async (s) => {
+        var a, u;
+        if (h.current.floorId !== s && ((u = (a = h.current).onRequestFloor) == null || u.call(a, s), await sr(s), h.current.floorId !== s))
+          throw new Error("The requested floor is not available.");
+      },
+      position: () => {
+        var s;
+        return ((s = z.current) == null ? void 0 : s.position) ?? [0, 0];
+      },
+      walk: (s, a) => new Promise((u, f) => {
+        if (t || !z.current) {
+          f(new Error("Route playback stopped."));
+          return;
+        }
+        z.current.follow(s, u, {
+          ...a,
+          onCancel: () => f(new Error("Route playback stopped at an obstruction or by movement."))
+        });
+      }),
+      controls: () => h.current.elevators,
+      status: (s) => {
+        var a;
+        return ((a = h.current.elevators) == null ? void 0 : a.statuses.find((u) => u.feedId === s)) ?? h.current.statuses.get(s);
+      },
+      ride: dt,
+      message: (s) => {
+        t || tr(s);
+      },
+      step: (s) => {
+        var a, u;
+        return (u = (a = h.current).onJourneyStep) == null ? void 0 : u.call(a, s);
+      }
+    }, i = (s) => {
+      var a, u;
+      [
+        "KeyW",
+        "KeyA",
+        "KeyS",
+        "KeyD",
+        "KeyQ",
+        "KeyE",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Escape"
+      ].includes(s.code) && ((u = (a = h.current).onJourneyEnd) == null || u.call(a));
+    };
+    return window.addEventListener("keydown", i, !0), import("./walkJourney.js").then(({ WalkJourney: s }) => {
+      if (!t)
+        return o = new s(n), o.play(e);
+    }).catch((s) => {
+      t || tr(s instanceof Error ? s.message : "Route playback stopped.");
+    }).finally(() => {
+      var s, a;
+      t || (a = (s = h.current).onJourneyEnd) == null || a.call(s);
+    }), () => {
+      var s;
+      t = !0, o == null || o.stop(), (s = z.current) == null || s.cancelFollow(), window.removeEventListener("keydown", i, !0);
+    };
+  }, [r.playing, r.walk]);
+  const dr = L(!0);
+  A(() => {
+    const e = P.current;
+    if (!e) return;
+    const t = new AbortController(), o = r.basemap ?? $r;
+    return en(o, t.signal).then((n) => {
+      t.signal.aborted || (e.setTransformRequest(o.transformRequest ?? ((i) => ({ url: i }))), Ye.current = !1, e.getLayer("kerros-3d") && e.removeLayer("kerros-3d"), E.current = null, e.setStyle(n, { diff: !1 }));
+    }).catch((n) => {
+      n.name !== "AbortError" && W(Fe.current.basemapUnavailablePlan);
+    }), () => t.abort();
+  }, [r.basemap]), A(() => {
+    Re();
+  }, [
+    r.project,
+    r.floorId,
+    r.selected,
+    r.threeD,
+    r.stack,
+    r.coverage,
+    r.showPlan,
+    r.sun,
+    r.dark,
+    r.cityBuildings,
+    r.cadastre,
+    r.statuses,
+    Qt,
+    r.route,
+    r.activeStep,
+    r.tool,
+    r.canEdit,
+    // The walk builds a different scene — the floor on the ground plane, a ceiling on it, the
+    // batches cut for culling — and leaving it has to build the plan's scene back. Without this the
+    // 3D view kept the walk's, and a garage came back as its deck lifted to street level, lidded,
+    // inside the cage of the levels above it.
+    r.walk,
+    r.excavation,
+    Y
+  ]), A(() => {
+    Gt();
+  }, [it, r.draft, r.hover, r.guides, r.tool, Y]), A(() => {
+    He();
+  }), A(() => {
+    let e = !1;
+    const t = new Set(r.project.drawings.map((n) => n.assetId));
+    for (const [n, i] of de.current)
+      t.has(n) || (URL.revokeObjectURL(i), de.current.delete(n));
+    let o = null;
+    return Promise.all(
+      r.project.drawings.map(async (n) => {
+        if (de.current.has(n.assetId)) return;
+        const i = await r.assets.get(n.assetId).catch(() => {
+        });
+        i ? e || de.current.set(n.assetId, URL.createObjectURL(i)) : o = n.name;
+      })
+    ).then(() => {
+      e || (Re(), o && r.onError(`Reference image “${o}” is missing.`));
+    }), () => {
+      e = !0;
+    };
+  }, [r.project.drawings, r.assets]);
+  const ur = L({ threeD: r.threeD, walk: r.walk });
+  A(() => {
+    var a;
+    const e = P.current;
+    if (!e) return;
+    const t = ur.current;
+    ur.current = { threeD: r.threeD, walk: r.walk };
+    const o = dr.current && !!r.initialCamera || r.walk || r.playing;
+    dr.current = !1;
+    const n = r.threeD ? 35 : 0, i = Ft(r.project) + (r.threeD ? -12 : 0), { clientWidth: d, clientHeight: l } = e.getCanvas(), s = t.walk && !r.walk ? ut.current ?? r.avatar : null;
+    if (ut.current = null, s) {
+      const u = s.heading + (r.project.origin[2] ?? 0);
+      ht(e, {
+        center: gt(s.position, Le(r.threeD), n, u),
+        zoom: 20,
+        // room scale: the floor the walk happened on, not the whole storey
+        pitch: n,
+        bearing: u,
+        duration: 700
+      });
+    } else if (!o) {
+      const u = Ne(e, d / 2, l / 2, Le(t.threeD && !t.walk)), f = t.threeD !== r.threeD ? gt(u, Le(r.threeD), n, i) : null;
+      ht(e, { ...f ? { center: f } : {}, pitch: n, bearing: i, duration: 600 });
+    }
+    if (r.walk)
+      for (const u of ["dragPan", "dragRotate", "scrollZoom", "keyboard", "touchZoomRotate"]) (a = e[u]) == null || a.disable();
+    else r.threeD ? (e.dragRotate.enable(), e.touchZoomRotate.enableRotation()) : (e.dragRotate.disable(), e.touchZoomRotate.disableRotation());
+  }, [r.threeD, r.walk]), A(() => {
+    const e = P.current;
+    !e || r.walk || (e.getCanvas().style.cursor = r.tool === "pan" ? "grab" : r.tool === "select" ? "" : "crosshair");
+  }, [r.tool, r.walk]), A(() => {
+    var o;
+    const e = P.current;
+    if (r.playing) return;
+    const t = r.project.objects.find((n) => n.id === r.focusId);
+    if (r.walk) {
+      t && ((o = z.current) == null || o.lookAt(Be(r.project, t)));
+      return;
+    }
+    e && t && e.easeTo({
+      center: qo(e, r.project, Be(r.project, t), t.floorId, r),
+      duration: 500
+    });
+  }, [r.focusId]);
+  const q = (e) => {
+    var t;
+    return (t = P.current) == null ? void 0 : t.project(ce(e, r.project.origin));
+  };
+  function ue(e, t, o, n, i) {
+    e.stopPropagation(), e.preventDefault();
+    const d = P.current;
+    if (!d || !r.canEdit || (t === "node" ? !_e : r.tool !== "select")) return;
+    d.dragPan.disable();
+    const l = e.currentTarget, s = l.getBoundingClientRect(), a = Number(l.dataset.screenDx ?? 0) + e.clientX - s.left - s.width / 2, u = Number(l.dataset.screenDy ?? 0) + e.clientY - s.top - s.height / 2, f = [l.dataset.wx, l.dataset.wy], k = { x: e.clientX, y: e.clientY };
+    let g = !1;
+    const b = (p, C, T = !1) => {
+      var $, ge, me, Ae, De, ke;
+      const ne = d.getContainer().getBoundingClientRect(), he = d.unproject([p - ne.left - a, C - ne.top - u]), M = h.current, Q = se([he.lng, he.lat], M.project.origin), N = t === "junction" || t === "barrier" || t === "ring" ? (($ = M.onVertexPreview) == null ? void 0 : $.call(M, t, o, Q, n, i, T)) ?? Q : M.snapping && !T && (t === "object" || t === "node") ? [Math.round(Q[0] * 2) / 2, Math.round(Q[1] * 2) / 2] : Q, y = d.project(ce(N, M.project.origin));
+      l.dataset.wx = String(N[0]), l.dataset.wy = String(N[1]), l.style.left = `${y.x + Number(l.dataset.screenDx ?? 0)}px`, l.style.top = `${y.y + Number(l.dataset.screenDy ?? 0)}px`;
+      const j = [];
+      if (t === "object") {
+        const w = M.project.objects.find((I) => I.id === o);
+        if (w != null && w.rings) {
+          const I = N[0] - w.position[0], x = N[1] - w.position[1];
+          j.push(Nr(w.rings[0].map((B) => [B[0] + I, B[1] + x])));
+        }
+      } else if (t === "ring") {
+        const w = M.project.objects.find((x) => x.id === o), I = (ge = w == null ? void 0 : w.rings) == null ? void 0 : ge[n ?? 0];
+        if (I) {
+          const x = pt(I);
+          j.push([
+            x[((i ?? 0) + x.length - 1) % x.length],
+            N,
+            x[((i ?? 0) + 1) % x.length]
+          ]);
+        }
+      } else if (t === "barrier") {
+        const w = Oe(M.project).find((I) => I.id === o);
+        if (w) {
+          const [I, x] = we(M.project, w), B = [(I[0] + x[0]) / 2, (I[1] + x[1]) / 2], _ = Math.hypot(x[0] - I[0], x[1] - I[1]), U = -(x[1] - I[1]) / _, ee = (x[0] - I[0]) / _, V = (N[0] - B[0]) * U + (N[1] - B[1]) * ee, te = U * V, K = ee * V, ie = [I[0] + te, I[1] + K], Qe = [x[0] + te, x[1] + K];
+          j.push([ie, Qe]);
+          for (const ze of Oe(M.project).filter(
+            (be) => be.id !== o && (be.startId === w.startId || be.endId === w.startId || be.startId === w.endId || be.endId === w.endId)
+          )) {
+            const [be, fo] = we(M.project, ze), Mr = ze.startId === w.startId || ze.startId === w.endId, go = Mr ? fo : be, yo = (Mr ? ze.startId : ze.endId) === w.startId ? ie : Qe;
+            j.push([go, yo]);
+          }
+        }
+      } else if (t === "opening") {
+        const w = M.project.objects.find((x) => x.id === o), I = M.project.barriers.find((x) => x.id === (w == null ? void 0 : w.barrierId));
+        if (w && I) {
+          const [x, B] = we(M.project, I), _ = Eo(N, x, B), U = w.width / 2;
+          if (_.length >= w.width) {
+            const ee = Math.max(U, Math.min(_.length - U, _.t * _.length)), V = (B[0] - x[0]) / _.length, te = (B[1] - x[1]) / _.length, K = [x[0] + V * ee, x[1] + te * ee];
+            if (j.push([
+              [K[0] - V * U, K[1] - te * U],
+              [K[0] + V * U, K[1] + te * U]
+            ]), w.kind === "door") {
+              const Qe = { ...w, offset: ee, position: K, doorSwing: ho(M.project, w, N) };
+              j.push(...mo(M.project, Qe));
+            }
+            const ie = I.thickness;
+            j.push([
+              [K[0] + te * ie, K[1] - V * ie],
+              [K[0] - te * ie, K[1] + V * ie]
+            ]);
+          }
+        }
+      } else if (t === "rotate") {
+        const w = M.project.objects.find((I) => I.id === o);
+        if (w) {
+          const I = Math.atan2(N[1] - w.position[1], N[0] - w.position[0]);
+          if (j.push([w.position, N]), (me = w.rings) != null && me[0]) {
+            const x = Math.cos(I - (w.rotation ?? 0) * Math.PI / 180), B = Math.sin(I - (w.rotation ?? 0) * Math.PI / 180);
+            j.push(
+              Nr(
+                w.rings[0].map((_) => {
+                  const U = _[0] - w.position[0], ee = _[1] - w.position[1];
+                  return [w.position[0] + U * x - ee * B, w.position[1] + U * B + ee * x];
+                })
+              )
+            );
+          }
+        }
+      } else if (t === "coverage") {
+        const w = M.project.objects.find((I) => I.id === o);
+        if (w) {
+          const I = N[0] - w.position[0], x = N[1] - w.position[1], B = Math.max(1, Math.min(120, Math.hypot(I, x))), _ = Math.atan2(x, I) * 180 / Math.PI, U = Math.min(
+            175,
+            Math.max(5, Math.abs(((_ - (w.rotation ?? 0)) % 360 + 540) % 360 - 180))
+          ), ee = (w.rotation ?? 0) * Math.PI / 180, V = [w.position], te = 24;
+          for (let K = 0; K <= te; K++) {
+            const ie = ee + (-U + 2 * U * K / te) * Math.PI / 180;
+            V.push([w.position[0] + Math.cos(ie) * B, w.position[1] + Math.sin(ie) * B]);
+          }
+          V.push(w.position), j.push(V);
+        }
+      } else if (t === "node") {
+        const w = (Ae = M.project.navNodes) == null ? void 0 : Ae.find((I) => I.id === o);
+        for (const I of (M.project.navEdges ?? []).filter((x) => x.aId === o || x.bId === o)) {
+          const x = (De = M.project.navNodes) == null ? void 0 : De.find((B) => B.id === (I.aId === o ? I.bId : I.aId));
+          x && w && x.floorId === w.floorId && j.push([x.position, N]);
+        }
+      } else
+        for (const w of Oe(M.project).filter((I) => I.startId === o || I.endId === o)) {
+          const I = M.project.junctions.find((x) => x.id === (w.startId === o ? w.endId : w.startId));
+          I && j.push([I.position, N]);
+        }
+      (ke = d.getSource("kerros-draft")) == null || ke.setData({
+        type: "FeatureCollection",
+        features: j.map((w) => ({
+          type: "Feature",
+          properties: {},
+          geometry: { type: "LineString", coordinates: w.map((I) => ce(I, M.project.origin)) }
+        }))
+      });
+    };
+    let c = 0, v;
+    const R = (p) => {
+      g || (g = Math.hypot(p.clientX - k.x, p.clientY - k.y) > 3), g && (v = { x: p.clientX, y: p.clientY, free: p.shiftKey }, c || (c = requestAnimationFrame(() => {
+        c = 0, v && b(v.x, v.y, v.free);
+      })));
+    }, F = (p) => {
+      if (cancelAnimationFrame(c), window.removeEventListener("pointermove", R), window.removeEventListener("pointerup", F), d.dragPan.enable(), l.dataset.wx = f[0] ?? "", l.dataset.wy = f[1] ?? "", Gt(), g) {
+        Ke.current = !0;
+        const C = d.getContainer().getBoundingClientRect(), T = d.unproject([p.clientX - C.left - a, p.clientY - C.top - u]);
+        h.current.onVertexMove(
+          t,
+          o,
+          se([T.lng, T.lat], r.project.origin),
+          n,
+          i,
+          p.shiftKey
+        ), J((ne) => ne + 1), setTimeout(() => {
+          Ke.current = !1;
+        }, 100);
+      }
+    };
+    window.addEventListener("pointermove", R), window.addEventListener("pointerup", F, { once: !0 });
+  }
+  const D = r.project.objects.find((e) => e.id === r.selected), ye = Oe(r.project).find((e) => e.id === r.selected), oe = r.project.floors.find((e) => e.id === r.floorId), mt = Me(r.project, r.floorId, r.threeD && r.stack), fr = P.current;
+  let Ge = 70;
+  if (fr && Y && r.walk) Ge = 80;
+  else if (fr && Y) {
+    const e = q([0, 0]), t = q([10, 0]);
+    e && t && (Ge = Math.hypot(t.x - e.x, t.y - e.y));
+  }
+  const fe = Ge / 10, Pe = (e) => e.id === r.selected || !!(e.feedId && tt(r.statuses.get(e.feedId)) === "critical"), ao = (e) => r.walk && (e.kind === "room" || e.kind === "zone" || e.kind === "light") || e.kind === "light" && !Pe(e) ? null : Pe(e) ? "full" : e.kind === "room" || e.kind === "zone" ? fe >= 3.5 && e.name.length * 6.5 <= e.width * fe * 1.2 ? "full" : fe >= 1.8 && e.width * fe >= 26 ? "mini" : null : e.kind === "poi" || e.kind === "gate" ? fe >= 1.2 ? "full" : fe >= 0.5 ? "mini" : null : (["door", "reader", "turnstile"].includes(e.kind) ? fe >= 6 : fe >= 5) ? "full" : fe >= 2.4 ? "mini" : null, lo = r.floorId === null || (((kr = r.project.floors.find((e) => e.id === r.floorId)) == null ? void 0 : kr.elevation) ?? 0) === 0, gr = {
+    poi: 1,
+    gate: 2,
+    zone: 3,
+    room: 4,
+    camera: 5,
+    elevator: 6,
+    stairs: 7,
+    turnstile: 8,
+    reader: 9,
+    door: 10
+  }, kt = [];
+  if (Y && r.showPlan)
+    for (const e of r.project.objects) {
+      if (!Ao(r.project, e, r.floorId) || !(lo || e.floorId !== null || Pe(e)) || ["window", "building", "parcel", "office", "container", "storage", "fixture", "landscape"].includes(e.kind))
+        continue;
+      const t = ao(e);
+      if (!t) continue;
+      const o = e.kind === "room" || e.kind === "zone";
+      if (o && (!r.showLabels || r.threeD && r.stack && e.floorId !== r.floorId)) continue;
+      const n = Be(r.project, e), i = r.threeD ? (wr = E.current) == null ? void 0 : wr.projectObject(e) : q(n);
+      if (!i || "visible" in i && !i.visible) continue;
+      const d = o && !!((vr = e.rings) != null && vr.slice(1).some((l) => Er(n, l)));
+      kt.push({ o: e, s: i, world: n, isLabel: o && t === "full", mini: t === "mini", voidLabel: d });
+    }
+  kt.sort((e, t) => (Pe(e.o) ? 0 : gr[e.o.kind] ?? 9) - (Pe(t.o) ? 0 : gr[t.o.kind] ?? 9));
+  const yr = [], co = kt.filter(({ o: e, s: t, isLabel: o, mini: n, voidLabel: i }) => {
+    const d = n ? 8 : o ? i ? 90 : Math.max(36, e.name.length * 3.6) : 19, l = n ? 8 : o ? i ? 36 : 16 : 19;
+    return !Pe(e) && yr.some((s) => Math.abs(s.x - t.x) < s.w + d && Math.abs(s.y - t.y) < s.h + l) ? !1 : (yr.push({ x: t.x, y: t.y, w: d, h: l }), !0);
+  }), X = (br = pe.current) == null ? void 0 : br.statusTones, so = {
+    normal: (X == null ? void 0 : X.normal) ?? "#2e9e6b",
+    warning: (X == null ? void 0 : X.warning) ?? "#e39d3b",
+    critical: (X == null ? void 0 : X.critical) ?? "#e0524e",
+    unknown: (X == null ? void 0 : X.unknown) ?? "#9a9daf"
+  }, uo = {
+    room: "#a9b3c2",
+    zone: "#96a58b",
+    poi: "#1d2038",
+    gate: "#5d6390",
+    door: "#6a63d8",
+    camera: "#7b74dd",
+    elevator: "#567c9a",
+    stairs: "#6d7a90",
+    reader: "#4a7fb5",
+    turnstile: "#4a7fb5",
+    sensor: "#5b9bd0",
+    alarm: "#e0524e",
+    equipment: "#9a8f74"
+  };
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: `map-wrap ${r.threeD ? "perspective" : ""}`,
+      "data-frame": O > 0 ? "ready" : "loading",
+      "data-scene": r.threeD && r.showPlan ? (pr = E.current) != null && pr.diagnostics.drawCalls ? "ready" : "loading" : "off",
+      children: [
+        /* @__PURE__ */ m("div", { className: "map-surface", ref: Z, "data-testid": "map-canvas" }),
+        /* @__PURE__ */ S("div", { className: "map-overlay", ref: $t, children: [
+          co.map(({ o: e, s: t, world: o, isLabel: n, mini: i, voidLabel: d }) => {
+            var s, a;
+            const l = e.feedId ? r.statuses.get(e.feedId) : void 0;
+            return i ? /* @__PURE__ */ m(
+              "button",
+              {
+                onMouseEnter: Xt,
+                className: `mini-marker ${e.category ? "cat-" + e.category : ""}`,
+                "data-wx": o[0],
+                "data-wy": o[1],
+                "data-oid": e.id,
+                "data-kind": e.kind,
+                "data-category": e.category,
+                style: {
+                  left: t.x,
+                  top: t.y,
+                  background: ((a = (s = pe.current) == null ? void 0 : s.objectColor) == null ? void 0 : a.call(s, e)) ?? (e.feedId ? so[tt(l)] : uo[e.kind] ?? e.color ?? "#9a9daf")
+                },
+                title: `${e.name}${e.feedId ? ` · ${jt(l)}` : ""}`,
+                "aria-label": e.name,
+                onClick: (u) => {
+                  u.stopPropagation(), r.tool === "select" || r.threeD ? r.onSelect(e.id) : r.onClick(Be(r.project, e), e.id);
+                },
+                children: /* @__PURE__ */ S("span", { className: "marker-tooltip", children: [
+                  e.name,
+                  e.feedId ? ` · ${jt(l)}` : ""
+                ] })
+              },
+              e.id
+            ) : n ? /* @__PURE__ */ S(
+              "div",
+              {
+                className: `space-label ${e.floorId === null ? "outdoor" : ""} ${d ? "void-label" : ""}`,
+                "data-wx": o[0],
+                "data-wy": o[1],
+                "data-oid": e.id,
+                style: { left: t.x, top: t.y },
+                children: [
+                  /* @__PURE__ */ m("span", { children: e.name }),
+                  e.kind === "room" && /* @__PURE__ */ S("small", { children: [
+                    Math.round(bt(e)),
+                    " m²"
+                  ] }),
+                  d && e.kind === "zone" && oe && /* @__PURE__ */ S("small", { children: [
+                    oe.code ? `${oe.code} · ` : "",
+                    oe.elevation.toFixed(0),
+                    " m"
+                  ] })
+                ]
+              },
+              e.id
+            ) : /* @__PURE__ */ S(
+              "button",
+              {
+                onMouseEnter: Xt,
+                className: `entity-marker ${e.kind === "poi" ? "poi" : ""} ${e.category ? "cat-" + e.category : ""} ${tt(l)} ${r.selected === e.id ? "selected" : ""}`,
+                "data-wx": o[0],
+                "data-wy": o[1],
+                "data-oid": e.id,
+                "data-kind": e.kind,
+                "data-category": e.category,
+                style: { left: t.x, top: t.y },
+                title: `${e.name}${e.feedId ? ` · ${jt(l)}` : ""}`,
+                "aria-label": e.name,
+                onClick: (u) => {
+                  u.stopPropagation(), r.tool === "select" || r.threeD ? r.onSelect(e.id) : r.onClick(Be(r.project, e), e.id);
+                },
+                children: [
+                  /* @__PURE__ */ m(
+                    No,
+                    {
+                      kind: e.kind,
+                      size: e.kind === "door" ? 14 : 17,
+                      symbol: e.symbol,
+                      travel: (l == null ? void 0 : l.travel) ?? e.travel
+                    }
+                  ),
+                  e.feedId && /* @__PURE__ */ m("i", { className: `status-dot ${tt(l)}` }),
+                  /* @__PURE__ */ m("span", { className: "marker-tooltip", children: e.name })
+                ]
+              },
+              e.id
+            );
+          }),
+          r.canEdit && r.tool === "select" && !r.threeD && ((Ir = D == null ? void 0 : D.geometry) == null ? void 0 : Ir.mode) === "boundaries" && (() => {
+            const e = new Set(D.geometry.loops.flat().map((n) => n.edgeId)), t = Oe(r.project).filter((n) => e.has(n.id)), o = new Set(t.flatMap((n) => [n.startId, n.endId]));
+            return /* @__PURE__ */ S(wt, { children: [
+              r.project.junctions.filter((n) => o.has(n.id)).map((n, i) => {
+                const d = q(n.position);
+                return d && /* @__PURE__ */ m(
+                  "button",
+                  {
+                    "aria-label": `Move space boundary corner ${i + 1}`,
+                    className: "vertex-handle",
+                    "data-wx": n.position[0],
+                    "data-wy": n.position[1],
+                    style: { left: d.x, top: d.y },
+                    onPointerDown: (l) => ue(l, "junction", n.id)
+                  },
+                  n.id
+                );
+              }),
+              t.map((n, i) => {
+                const [d, l] = we(r.project, n), s = [(d[0] + l[0]) / 2, (d[1] + l[1]) / 2], a = q(s);
+                return a && /* @__PURE__ */ m(
+                  "button",
+                  {
+                    "aria-label": `Move space boundary ${i + 1}`,
+                    title: "Drag this boundary; connected spaces follow",
+                    className: "move-handle",
+                    "data-wx": s[0],
+                    "data-wy": s[1],
+                    style: { left: a.x, top: a.y },
+                    onPointerDown: (u) => ue(u, "barrier", n.id),
+                    children: "✥"
+                  },
+                  n.id
+                );
+              })
+            ] });
+          })(),
+          r.canEdit && r.tool === "select" && !r.threeD && ((jr = D == null ? void 0 : D.geometry) == null ? void 0 : jr.mode) !== "boundaries" && ((xr = D == null ? void 0 : D.rings) == null ? void 0 : xr.flatMap(
+            (e, t) => pt(e).map((o, n) => {
+              const i = q(o);
+              return i ? /* @__PURE__ */ m(
+                "button",
+                {
+                  "aria-label": `Move vertex ${n + 1}`,
+                  className: "vertex-handle",
+                  "data-wx": o[0],
+                  "data-wy": o[1],
+                  style: { left: i.x, top: i.y },
+                  onPointerDown: (d) => ue(d, "ring", D.id, t, n)
+                },
+                `${t}-${n}`
+              ) : null;
+            })
+          )),
+          r.canEdit && r.tool === "select" && // Ground-plane handles, like the vertex and junction ones: in 3D the object is drawn at its
+          // storey's elevation and the handle would hang metres away from it, in open air over a
+          // basement or inside the slab over a tower.
+          !r.threeD && D && ((Lr = D.geometry) == null ? void 0 : Lr.mode) !== "boundaries" && (() => {
+            const e = q(D.position), t = !!D.barrierId;
+            return e ? /* @__PURE__ */ m(
+              "button",
+              {
+                className: "move-handle",
+                "aria-label": t ? "Slide along the wall" : "Move selected object",
+                title: D.kind === "door" ? "Drag along the wall to slide; across it to flip the opening side" : void 0,
+                "data-wx": D.position[0],
+                "data-wy": D.position[1],
+                style: { left: e.x, top: e.y },
+                onPointerDown: (o) => ue(o, t ? "opening" : "object", D.id),
+                children: "✥"
+              }
+            ) : null;
+          })(),
+          r.canEdit && r.tool === "select" && !r.threeD && D && ((Pr = D.geometry) == null ? void 0 : Pr.mode) !== "boundaries" && !D.barrierId && D.rotation !== void 0 && (() => {
+            const e = Math.max(1.6, (Math.abs(D.width) + Math.abs(D.depth)) / 2 + 0.8), t = Fr(D.position, Rr([e, 0], D.rotation)), o = q(t);
+            return o ? /* @__PURE__ */ m(
+              "button",
+              {
+                className: "rotate-handle",
+                "aria-label": "Turn selected object",
+                "data-wx": t[0],
+                "data-wy": t[1],
+                style: { left: o.x, top: o.y },
+                onPointerDown: (n) => ue(n, "rotate", D.id)
+              }
+            ) : null;
+          })(),
+          r.canEdit && r.tool === "select" && !r.threeD && (D == null ? void 0 : D.kind) === "camera" && (() => {
+            const e = D.coverageRange ?? 12, t = (D.coverageAngle ?? 70) / 2, o = Fr(D.position, Rr([e, 0], D.rotation + t)), n = q(o);
+            return n ? /* @__PURE__ */ m(
+              "button",
+              {
+                className: "coverage-handle",
+                "aria-label": "Camera reach and field of view",
+                "data-wx": o[0],
+                "data-wy": o[1],
+                style: { left: n.x, top: n.y },
+                onPointerDown: (i) => ue(i, "coverage", D.id)
+              }
+            ) : null;
+          })(),
+          r.canEdit && r.tool === "select" && !r.threeD && ye && we(r.project, ye).map((e, t) => {
+            const o = q(e), n = q(we(r.project, ye)[1 - t]);
+            if (!o || !n) return null;
+            const i = o.x - n.x, d = o.y - n.y, l = Math.hypot(i, d), s = Math.max(0, 32 - l / 2), a = l ? i / l : t ? 1 : -1, u = l ? d / l : 0;
+            return /* @__PURE__ */ S(wo, { children: [
+              s > 0 && /* @__PURE__ */ m(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-wx": e[0],
+                  "data-wy": e[1],
+                  style: {
+                    position: "absolute",
+                    pointerEvents: "none",
+                    left: o.x,
+                    top: o.y,
+                    width: s,
+                    height: 1,
+                    background: "var(--accent)",
+                    transformOrigin: "0 0",
+                    transform: `rotate(${Math.atan2(u, a)}rad)`
+                  }
+                }
+              ),
+              /* @__PURE__ */ m(
+                "button",
+                {
+                  className: "vertex-handle",
+                  "aria-label": `Move wall endpoint ${t + 1}`,
+                  "data-wx": e[0],
+                  "data-wy": e[1],
+                  "data-screen-dx": a * s,
+                  "data-screen-dy": u * s,
+                  style: { left: o.x + a * s, top: o.y + u * s },
+                  onPointerDown: (f) => ue(f, "junction", t ? ye.endId : ye.startId)
+                }
+              )
+            ] }, t);
+          }),
+          r.canEdit && r.tool === "select" && !r.threeD && ye && (() => {
+            const [e, t] = we(r.project, ye), o = [(e[0] + t[0]) / 2, (e[1] + t[1]) / 2], n = q(o);
+            return n ? /* @__PURE__ */ m(
+              "button",
+              {
+                className: "move-handle",
+                "aria-label": "Move whole wall",
+                title: "Drag to move the wall; connected walls follow",
+                "data-wx": o[0],
+                "data-wy": o[1],
+                style: { left: n.x, top: n.y },
+                onPointerDown: (i) => ue(i, "barrier", ye.id),
+                children: "✥"
+              }
+            ) : null;
+          })(),
+          r.canEdit && _e && !r.threeD && (r.project.navNodes ?? []).filter((e) => zo(e, r.floorId)).map((e) => {
+            const t = q(e.position);
+            return t ? /* @__PURE__ */ m(
+              "button",
+              {
+                className: "vertex-handle nav-node-handle",
+                "aria-label": "Move route node",
+                title: "Drag to move this route node",
+                "data-wx": e.position[0],
+                "data-wy": e.position[1],
+                style: { left: t.x, top: t.y },
+                onPointerDown: (o) => ue(o, "node", e.id)
+              },
+              e.id
+            ) : null;
+          }),
+          r.draft.map((e, t) => {
+            const o = q(e);
+            return o ? /* @__PURE__ */ m("i", { className: "draft-node", "data-wx": e[0], "data-wy": e[1], style: { left: o.x, top: o.y } }, t) : null;
+          }),
+          (Dr = r.alignment) == null ? void 0 : Dr.map.map((e, t) => {
+            const o = q(e);
+            return o ? /* @__PURE__ */ m("b", { className: "alignment-pin", "data-wx": e[0], "data-wy": e[1], style: { left: o.x, top: o.y }, children: t + 1 }, t) : null;
+          }),
+          (() => {
+            var n, i;
+            const e = r.avatar;
+            if (!e || r.walk || e.floorId !== r.floorId) return null;
+            const t = (r.threeD ? (n = E.current) == null ? void 0 : n.projectPoint(e.position, e.floorId) : null) ?? q(e.position);
+            if (!t) return null;
+            const o = e.heading + (r.project.origin[2] ?? 0);
+            return /* @__PURE__ */ S(
+              "button",
+              {
+                className: "avatar-marker",
+                "data-wx": e.position[0],
+                "data-wy": e.position[1],
+                "data-floor": e.floorId ?? "",
+                "data-bearing": o,
+                style: {
+                  left: t.x,
+                  top: t.y,
+                  "--turn": `${o - (((i = P.current) == null ? void 0 : i.getBearing()) ?? 0)}deg`
+                },
+                title: "Resume walking from here",
+                "aria-label": "Resume walking from here",
+                onClick: (d) => {
+                  var l;
+                  d.stopPropagation(), (l = r.onWalkAt) == null || l.call(r, e);
+                },
+                children: [
+                  /* @__PURE__ */ m("i", {}),
+                  /* @__PURE__ */ m(vt, { size: 13 })
+                ]
+              }
+            );
+          })()
+        ] }),
+        r.threeD && !r.walk && /* @__PURE__ */ S("label", { className: "pitch-control", title: "Camera inclination (⇧W / ⇧S)", children: [
+          /* @__PURE__ */ m(Sr, { size: 14 }),
+          /* @__PURE__ */ m(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 75,
+              step: 1,
+              value: Math.round(qe),
+              "aria-label": "Camera inclination",
+              onChange: (e) => {
+                var t;
+                return (t = P.current) == null ? void 0 : t.easeTo({ pitch: Number(e.target.value), duration: 0 });
+              }
+            }
+          )
+        ] }),
+        !r.walk && /* @__PURE__ */ S("div", { className: "map-navigator", children: [
+          !r.walk && /* @__PURE__ */ S(wt, { children: [
+            /* @__PURE__ */ m(
+              "button",
+              {
+                className: `pegman ${Ce ? "lifted" : ""}`,
+                title: "Drag onto the map to walk from there",
+                "aria-label": "Drag onto the map to walk from there",
+                onPointerDown: (e) => {
+                  var o;
+                  if (e.button !== 0) return;
+                  e.currentTarget.setPointerCapture(e.pointerId);
+                  const t = (o = Z.current) == null ? void 0 : o.getBoundingClientRect();
+                  t && Je({ x: e.clientX - t.left, y: e.clientY - t.top });
+                },
+                onPointerMove: (e) => {
+                  var o;
+                  if (!Ce) return;
+                  const t = (o = Z.current) == null ? void 0 : o.getBoundingClientRect();
+                  t && Je({ x: e.clientX - t.left, y: e.clientY - t.top });
+                },
+                onPointerUp: oo,
+                onPointerCancel: (e) => {
+                  e.currentTarget.releasePointerCapture(e.pointerId), Je(null);
+                },
+                onClick: () => {
+                  var n;
+                  const e = P.current, t = h.current;
+                  if (!e) return;
+                  const o = t.avatar && t.avatar.floorId === t.floorId ? t.avatar : null;
+                  (n = t.onWalkAt) == null || n.call(
+                    t,
+                    o ?? {
+                      floorId: t.floorId,
+                      position: Ne(e, e.getCanvas().clientWidth / 2, e.getCanvas().clientHeight / 2),
+                      heading: e.getBearing() - (t.project.origin[2] ?? 0)
+                    }
+                  );
+                },
+                children: /* @__PURE__ */ m(vt, { size: 19 })
+              }
+            ),
+            /* @__PURE__ */ m("div", {})
+          ] }),
+          /* @__PURE__ */ m("button", { title: "Zoom in", "aria-label": "Zoom in", onClick: () => {
+            var e;
+            return (e = P.current) == null ? void 0 : e.zoomIn();
+          }, children: /* @__PURE__ */ m(bo, { size: 18 }) }),
+          /* @__PURE__ */ m("button", { title: "Zoom out", "aria-label": "Zoom out", onClick: () => {
+            var e;
+            return (e = P.current) == null ? void 0 : e.zoomOut();
+          }, children: /* @__PURE__ */ m(po, { size: 18 }) }),
+          /* @__PURE__ */ m("div", {}),
+          r.threeD && /* @__PURE__ */ S(wt, { children: [
+            /* @__PURE__ */ m(
+              "button",
+              {
+                title: "Tilt view",
+                "aria-label": "Tilt view",
+                onClick: () => {
+                  const e = P.current;
+                  e && e.easeTo({ pitch: e.getPitch() >= 50 ? 20 : e.getPitch() + 15, duration: 400 });
+                },
+                children: /* @__PURE__ */ m(Sr, { size: 17 })
+              }
+            ),
+            /* @__PURE__ */ m(
+              "button",
+              {
+                title: "Rotate left",
+                "aria-label": "Rotate left",
+                onClick: () => {
+                  const e = P.current;
+                  e && e.easeTo({ bearing: e.getBearing() - 45, duration: 450 });
+                },
+                children: /* @__PURE__ */ m(Io, { size: 17 })
+              }
+            ),
+            /* @__PURE__ */ m(
+              "button",
+              {
+                title: "Rotate right",
+                "aria-label": "Rotate right",
+                onClick: () => {
+                  const e = P.current;
+                  e && e.easeTo({ bearing: e.getBearing() + 45, duration: 450 });
+                },
+                children: /* @__PURE__ */ m(jo, { size: 17 })
+              }
+            ),
+            /* @__PURE__ */ m("div", {})
+          ] }),
+          /* @__PURE__ */ m("button", { title: "Fit floor", "aria-label": "Fit floor", onClick: () => st(r.floorId), children: /* @__PURE__ */ m(xo, { size: 18 }) }),
+          /* @__PURE__ */ m(
+            "button",
+            {
+              title: "Reset north",
+              "aria-label": "Reset north",
+              onClick: () => {
+                var e;
+                return (e = P.current) == null ? void 0 : e.easeTo({ bearing: Ft(r.project), pitch: r.threeD ? 35 : 0 });
+              },
+              children: /* @__PURE__ */ m(Lo, { size: 18 })
+            }
+          )
+        ] }),
+        r.walk && r.elevators && /* @__PURE__ */ m(vo, { fallback: null, children: /* @__PURE__ */ m(
+          rn,
+          {
+            project: r.project,
+            floorId: r.floorId,
+            controls: r.elevators,
+            walker: z,
+            riding: Qt,
+            onRide: dt,
+            onFloor: r.onRequestFloor,
+            requested: Gr,
+            onWave: () => {
+              var e;
+              return (e = E.current) == null ? void 0 : e.wave();
+            },
+            soundOn: G.sound,
+            onSound: rr
+          }
+        ) }),
+        r.walk && /* @__PURE__ */ S("label", { className: "walk-fov", title: "Horizontal field of view", children: [
+          /* @__PURE__ */ S("span", { children: [
+            "Field of view ",
+            /* @__PURE__ */ S("output", { children: [
+              xe,
+              "°"
+            ] })
+          ] }),
+          /* @__PURE__ */ m(
+            "input",
+            {
+              type: "range",
+              min: Jo,
+              max: Zo,
+              step: 1,
+              value: xe,
+              "aria-label": "POV field of view",
+              "aria-valuetext": `${xe} degrees horizontally`,
+              onChange: (e) => {
+                const t = Br(Number(e.target.value));
+                eo(t);
+                try {
+                  localStorage.setItem(Hr, String(t));
+                } catch {
+                }
+              }
+            }
+          )
+        ] }),
+        r.walk && /* @__PURE__ */ S("div", { className: "walk-hud", children: [
+          /* @__PURE__ */ S("div", { className: "walk-status", children: [
+            (er || G.next) && /* @__PURE__ */ m("em", { role: "status", children: er || G.next }),
+            G.where && /* @__PURE__ */ m("b", { children: G.where }),
+            G.up && /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "F" }),
+              " up to ",
+              G.up
+            ] }),
+            G.down && /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "⇧F" }),
+              " down to ",
+              G.down
+            ] })
+          ] }),
+          /* @__PURE__ */ S("div", { className: `walk-keys ${G.looking ? "busy" : ""}`, children: [
+            /* @__PURE__ */ m("span", { children: "Drag to look around" }),
+            /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "W" }),
+              /* @__PURE__ */ m("kbd", { children: "S" }),
+              " walk"
+            ] }),
+            /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "A" }),
+              /* @__PURE__ */ m("kbd", { children: "D" }),
+              " turn"
+            ] }),
+            /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "Q" }),
+              /* @__PURE__ */ m("kbd", { children: "E" }),
+              " sidestep"
+            ] }),
+            /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "Shift" }),
+              " run"
+            ] }),
+            /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "M" }),
+              " ",
+              G.sound ? "mute" : "sound"
+            ] }),
+            /* @__PURE__ */ S("span", { children: [
+              /* @__PURE__ */ m("kbd", { children: "Esc" }),
+              " leave"
+            ] })
+          ] })
+        ] }),
+        Ce && /* @__PURE__ */ m("div", { className: "pegman-ghost", style: { left: Ce.x, top: Ce.y }, children: /* @__PURE__ */ m(vt, { size: 22 }) }),
+        /* @__PURE__ */ S("div", { className: "map-scale", hidden: r.walk, children: [
+          /* @__PURE__ */ m("span", { style: { width: Ge } }),
+          "10 m ",
+          /* @__PURE__ */ m("i", {}),
+          " ",
+          r.threeD ? `${r.stack ? "Building stack" : (oe == null ? void 0 : oe.name) ?? "Outdoor site"} · ${mt.buried ? `${oe ? `${Math.abs(oe.elevation).toFixed(1)} m below ground` : "Below-ground structure"}${mt.compressed ? oe ? ` · shown at ${Math.abs(mt.focusElevation).toFixed(1)} m` : " · depth compressed" : ""}` : "cutaway"}` : "metres"
+        ] }),
+        Se && /* @__PURE__ */ S("button", { className: "map-error", onClick: () => W(""), children: [
+          Se,
+          " ×"
+        ] }),
+        !Y && !Se && /* @__PURE__ */ S("div", { className: "map-loading", children: [
+          /* @__PURE__ */ m("span", { className: "loading-orbit" }),
+          "Preparing your space…"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Cn as MapCanvas
+};
+//# sourceMappingURL=MapCanvas.js.map