@7365admin1/layer-common 4.49.0 → 4.51.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.51.0
+
+### Minor Changes
+
+- ac247e2: Members: a banner "N members here have a role from another site. Assign each one a role for this site." with a one-click filter to list them (server `roleState=other-site`); disappears at 0. `useMember().getAll` accepts `roleState`.
+
+## 4.50.0
+
+### Minor Changes
+
+- d7f1732: HERO map editor - Fleet Core (Open-RMF) parity: Waypoint, Lane, Fiducial and Measure tools; lanes on route graphs 0-8 (graph picker, names, robot brands), two-way / one-way, speed limit, facing, shared-space group; waypoint settings (charger, parking, holding, pass-through, cleaning zone, dock name, spawn, pick-up / drop-off, merge radius); waypoints drag their lanes, deleting one deletes its lanes; the four door types with hinge / swing / degrees / leaf ratio; lift shafts at any angle with cabin doors per floor (which door opens where) and size fields; fiducial level alignment and scale by measurement (plan and drawing); plain-language checks (duplicate names, lanes through walls, charger without a dock, lanes that lost a waypoint, lift floors with no door); zoom and pan; the drawing area is the building's real size (plans larger than 40 x 26 m are no longer cut off; turned plans); import a building file or a route map into a graph. The editor now saves the map's `rmf` part. The 3D view draws door types, cabin doors, turned lifts, the building's real shape and a Routes toggle; the mini-map shows robot lanes.
+
 ## 4.49.0
 
 ### Minor Changes
@@ -1533,11 +1545,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                          GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                          GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                          owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                          staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/assets/css/robot-hero.css

@@ -741,6 +741,13 @@
 .hero-mini__foot { font-size: 11px; opacity: 0.6; display: flex; gap: 12px; white-space: nowrap; }
 .hero-mini__foot > span:first-child { overflow: hidden; text-overflow: ellipsis; }
 .hero-mini__legend { display: inline-block; width: 12px; height: 0; border-top: 2px dashed var(--hero-accent); vertical-align: middle; margin-right: 5px; }
+.hero-mini__legend--lane { border-top-style: solid; border-top-color: rgb(var(--v-theme-info)); }
+.hero-mini__toggle { font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; min-height: 28px; color: var(--hero-text); background: transparent; border: 1px solid var(--hero-divider); cursor: pointer; }
+.hero-mini__toggle[aria-pressed="true"] { background: var(--hero-text); color: var(--hero-bg); }
+.hero-mini__lane { stroke: rgb(var(--v-theme-info)); stroke-width: 1.5; opacity: 0.8; }
+.hero-mini__lane--oneway { stroke-dasharray: 5 3; }
+.hero-mini__wp { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgb(var(--v-theme-info)); outline: 1.5px solid var(--hero-bg); pointer-events: none; }
+.hero-mini__wp--charger { background: rgb(var(--v-theme-success)); border-radius: 1px; }
 .hero-mini__count { margin-left: auto; font-variant-numeric: tabular-nums; }
 
 /* Robot detail. */
@@ -952,6 +959,14 @@
 .hero-bmap__zone { fill: color-mix(in srgb, var(--hero-text) 10%, transparent); stroke: var(--hero-text); stroke-width: 1; stroke-dasharray: 4 3; }
 .hero-bmap__doorline { stroke: var(--hero-accent); stroke-width: 3; }
 .hero-bmap__doorline--open { stroke: rgb(var(--v-theme-success)); stroke-dasharray: 2 2; }
+.hero-bmap__doorswing { fill: none; stroke: var(--hero-accent); stroke-width: 1; stroke-dasharray: 3 2; opacity: 0.75; }
+.hero-bmap__cabindoor { stroke: rgb(var(--v-theme-success)); stroke-width: 3; }
+.hero-bmap__lane { stroke: var(--hero-accent); stroke-width: 1.5; opacity: 0.85; }
+.hero-bmap__lane--oneway { stroke-dasharray: 5 3; }
+.hero-bmap__wp { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--hero-accent); outline: 1.5px solid var(--hero-bg); }
+.hero-bmap__wp--charger { background: rgb(var(--v-theme-success)); border-radius: 1px; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
+.hero-bmap__wp--parking { background: rgb(var(--v-theme-info)); }
+.hero-bmap__wpname { position: absolute; left: 6px; top: -6px; transform-origin: 0 0; white-space: nowrap; font-size: 9px; font-weight: 700; padding: 0 4px; background: var(--hero-bg); color: var(--hero-text); }
 .hero-bmap__anchor { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
 .hero-bmap__routetag { position: absolute; left: -6px; top: -30px; transform-origin: 0 0; white-space: nowrap; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; padding: 1px 6px; background: var(--hero-accent); color: #fff; }
 .hero-bmap__cp { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--hero-accent); background: var(--hero-bg); display: grid; place-items: center; font-size: 7px; font-weight: 800; color: var(--hero-accent); }
@@ -990,6 +1005,7 @@
 .hero-bmap__key--shaft { background: color-mix(in srgb, var(--hero-accent) 30%, transparent); border: 1px solid var(--hero-accent); box-sizing: border-box; }
 .hero-bmap__key--bot { background: var(--hero-text); }
 .hero-bmap__key--route { width: 12px; height: 0; border-top: 2px dashed var(--hero-accent); }
+.hero-bmap__key--lane { width: 12px; height: 0; border-top: 2px solid var(--hero-accent); }
 .hero-bmap__aside { display: flex; flex-direction: column; gap: 2px; font-size: 12px; flex: 1 1 260px; max-width: 360px; min-width: 0; }
 .hero-bmap__asidetitle { border-top: 2px solid var(--hero-divider); padding-top: 8px; margin-bottom: 6px; }
 .hero-bmap__legendrow { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hero-divider); }
@@ -1020,17 +1036,23 @@
   align-self: flex-start; /* a taller side list must not stretch the plan under the pointer */
   min-width: 0;
   position: relative;
-  min-height: max(480px, calc(100vh - 330px));
-  background-color: var(--hero-surface);
-  background-image: linear-gradient(var(--hero-divider) 1px, transparent 1px), linear-gradient(90deg, var(--hero-divider) 1px, transparent 1px);
-  background-size: 5% 8.9%;
-  background-repeat: repeat; /* Vuetify resets every element to no-repeat */
+  height: max(480px, calc(100vh - 330px));
+  background-color: color-mix(in srgb, var(--hero-surface) 60%, var(--hero-bg));
   border: 1px solid var(--hero-divider);
   overflow: hidden;
   cursor: crosshair;
   touch-action: none; /* a finger drags shapes, not the page */
   user-select: none;
 }
+/* The building's frame at its real shape, fitted into the viewport; zoom and pan resize / move it. */
+.hero-editor__canvas {
+  position: absolute;
+  background-color: var(--hero-surface);
+  background-image: linear-gradient(var(--hero-divider) 1px, transparent 1px), linear-gradient(90deg, var(--hero-divider) 1px, transparent 1px);
+  background-repeat: repeat; /* Vuetify resets every element to no-repeat */
+  outline: 1px solid var(--hero-divider);
+}
+.hero-editor__scale { position: absolute; right: 8px; bottom: 6px; font-size: 11px; opacity: 0.6; pointer-events: none; font-variant-numeric: tabular-nums; }
 .hero-editor__plan--default { cursor: default; }
 .hero-editor__plan--pointer { cursor: pointer; }
 .hero-editor__plan--move { cursor: move; }
@@ -1050,7 +1072,7 @@
 .hero-editor__measurebox { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--hero-accent); font-size: 12px; }
 .hero-editor__measurein { width: 110px; min-height: 32px; }
 .hero-editor__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
-.hero-editor__wall { stroke: var(--hero-text); stroke-width: 1.5; }
+.hero-editor__wall { stroke: var(--hero-text); stroke-width: 3; stroke-linecap: square; }
 .hero-editor__zone-shape { fill: color-mix(in srgb, var(--hero-text) 10%, transparent); stroke: var(--hero-text); stroke-width: 1; stroke-dasharray: 4 3; }
 line.hero-editor__sel { stroke: var(--hero-accent); }
 polygon.hero-editor__sel { stroke: var(--hero-accent); stroke-width: 2; stroke-dasharray: none; }
@@ -1080,6 +1102,49 @@ line.hero-editor__door.hero-editor__sel { stroke: var(--hero-text); }
 .hero-editor__act:hover { background: color-mix(in srgb, var(--hero-text) 7%, transparent); }
 .hero-editor__act:disabled { opacity: 0.45; cursor: not-allowed; }
 .hero-editor__act--del { color: var(--hero-accent); }
+/* Robot routes: lanes, waypoints, fiducials, measurements (HERO Fleet Core building data). */
+.hero-editor__lane { stroke: var(--hero-accent); stroke-width: 3; stroke-linecap: round; opacity: 0.9; }
+.hero-editor__lane--other { stroke: var(--hero-text); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.45; }
+.hero-editor__lane--preview { stroke-dasharray: 5 4; opacity: 0.7; }
+line.hero-editor__lane.hero-editor__sel { stroke: var(--hero-text); stroke-width: 4; opacity: 1; }
+.hero-editor__arrow { position: absolute; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 11px solid var(--hero-accent); pointer-events: none; }
+.hero-editor__arrow--other { border-left-color: color-mix(in srgb, var(--hero-text) 45%, transparent); }
+.hero-editor__wp { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; border-radius: 50%; background: var(--hero-surface); border: 2.5px solid var(--hero-accent); pointer-events: none; }
+.hero-editor__wp--charger { background: rgb(var(--v-theme-success)); border-color: var(--hero-text); border-radius: 2px; }
+.hero-editor__wp--parking { background: rgb(var(--v-theme-info)); border-color: var(--hero-text); }
+.hero-editor__wp--holding { background: var(--hero-accent); }
+.hero-editor__wp--from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-accent) 35%, transparent); }
+div.hero-editor__wp.hero-editor__sel, div.hero-editor__fid.hero-editor__sel { outline: 2px solid var(--hero-text); outline-offset: 2px; }
+.hero-editor__wpname { position: absolute; left: 12px; top: -9px; white-space: nowrap; font-size: 10.5px; font-weight: 700; line-height: 1.4; padding: 0 4px; background: var(--hero-surface); color: var(--hero-text); border: 1px solid var(--hero-divider); }
+.hero-editor__fid { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; box-sizing: border-box; border: 2px solid var(--hero-text); border-radius: 50%; pointer-events: none; background: linear-gradient(var(--hero-text), var(--hero-text)) center / 2px 100% no-repeat, linear-gradient(var(--hero-text), var(--hero-text)) center / 100% 2px no-repeat; }
+.hero-editor__mlabel { position: absolute; transform: translate(-50%, -130%); white-space: nowrap; font-size: 10.5px; font-weight: 700; padding: 0 4px; background: var(--hero-accent); color: #fff; pointer-events: none; }
+.hero-editor__cabindoor { position: absolute; height: 4px; background: rgb(var(--v-theme-success)); pointer-events: none; }
+.hero-editor__cabindoor--shut { background: color-mix(in srgb, var(--hero-text) 30%, transparent); }
+.hero-editor__lift { transform-origin: center; }
+.hero-editor__lift--passes { opacity: 0.45; border-style: dashed; }
+.hero-editor__graphpick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+.hero-editor__zoomread { min-width: 56px; font-variant-numeric: tabular-nums; }
+.hero-editor__field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
+.hero-editor__field > span { opacity: 0.75; }
+.hero .hero-editor__field .hero-input { min-height: 32px; width: 100%; }
+.hero-editor__row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
+.hero-editor__sub { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-top: 4px; }
+.hero-editor__cabinrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; align-items: center; padding-bottom: 6px; border-bottom: 1px dashed var(--hero-divider); }
+.hero-editor__cabinw { display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
+.hero .hero-editor__cabinrow .hero-input { min-height: 30px; padding: 3px 6px; width: 100%; min-width: 0; }
+.hero-editor__grid2 { border-collapse: collapse; font-size: 11.5px; }
+.hero-editor__grid2 th, .hero-editor__grid2 td { padding: 3px 6px; border-bottom: 1px solid var(--hero-divider); text-align: center; }
+.hero-editor__grid2 th:first-child, .hero-editor__grid2 td:first-child { text-align: left; font-weight: 700; }
+.hero-editor__checks { display: flex; flex-direction: column; gap: 4px; }
+.hero-editor__checks label, .hero-editor__check2 { display: flex; gap: 6px; align-items: center; cursor: pointer; }
+.hero-editor__check { font: inherit; font-size: 12px; text-align: left; padding: 6px 8px; color: inherit; background: color-mix(in srgb, rgb(var(--v-theme-warning)) 12%, transparent); border: 0; border-left: 3px solid rgb(var(--v-theme-warning)); cursor: pointer; }
+.hero-editor__check--error { background: color-mix(in srgb, rgb(var(--v-theme-error)) 12%, transparent); border-left-color: rgb(var(--v-theme-error)); }
+.hero-editor__graphrow { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 4px; align-items: center; padding-left: 4px; border-left: 3px solid transparent; }
+.hero-editor__graphrow--on { border-left-color: var(--hero-accent); }
+.hero .hero-editor__graphrow .hero-input { min-height: 30px; padding: 3px 6px; width: 100%; min-width: 0; }
+.hero-editor__details summary { cursor: pointer; font-size: 11.5px; opacity: 0.8; }
+.hero-editor__details[open] { display: flex; flex-direction: column; gap: 6px; }
+.hero-editor__list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
 .hero-editor__cursor { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--hero-accent); pointer-events: none; }
 .hero-editor__aside { font-size: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; max-width: 360px; min-width: 0; align-self: stretch; }
 .hero-editor__asidetitle { border-top: 2px solid var(--hero-divider); padding-top: 8px; }

package/components/MemberMain.vue

@@ -27,6 +27,28 @@
       </template>
     </PageHeader>
 
+    <!-- Owner decision 2026-09-25: members holding ANOTHER site's role keep
+         their access; the company assigns each one a role for this site.
+         Shown while any remain (server count), gone at 0. -->
+    <v-alert
+      v-if="props.assignRole && otherSiteBanner"
+      type="warning"
+      variant="tonal"
+      density="compact"
+      class="mb-3"
+      data-test="member-other-site-banner"
+    >
+      <div class="d-flex align-center flex-wrap ga-2">
+        <span class="flex-grow-1">{{ otherSiteBanner }}</span>
+        <AppButton
+          data-test="member-other-site-filter"
+          @click="toggleOtherSite()"
+        >
+          {{ onlyOtherSite ? "Show all members" : "Show them" }}
+        </AppButton>
+      </div>
+    </v-alert>
+
     <AppCard class="table-card">
       <CardToolbar :count="pageRange">
         <template #tabs>
@@ -278,7 +300,7 @@
 </template>
 
 <script setup lang="ts">
-import { memberRoleChip, withCurrentRole } from "../utils/role";
+import { memberRoleChip, otherSiteBannerText, withCurrentRole } from "../utils/role";
 
 const props = defineProps({
   /** The design's page title. Every app that mounts this screen calls it
@@ -372,6 +394,7 @@ const props = defineProps({
 });
 
 const items = ref<Array<Record<string, any>>>([]);
+const onlyOtherSite = ref(false);
 const page = ref(1);
 const pages = ref(10);
 const pageRange = ref("-- - -- of --");
@@ -444,12 +467,47 @@ const {
       page: page.value,
       type: props.type,
       siteId: props.siteId,
+      roleState: onlyOtherSite.value ? "other-site" : "",
     }),
   {
-    watch: [() => props.status, () => props.orgId, () => props.siteId, headerSearch],
+    watch: [() => props.status, () => props.orgId, () => props.siteId, headerSearch, onlyOtherSite],
   }
 );
 
+/*
+ * "N members here have a role from another site" — the count is the server's
+ * (`roleState=other-site`, `total`), for this org / site / app, so it is right
+ * however many pages the list has. Refreshed with the list (after an Assign
+ * Role the list refreshes, and so does this).
+ */
+const { data: otherSiteReq, refresh: refreshOtherSite } = useAsyncData(
+  `members-other-site-${props.type}-${props.orgId}-${props.siteId}-${props.status}`,
+  () =>
+    props.assignRole && props.orgId
+      ? _getAll({
+          status: props.status,
+          org: props.orgId,
+          page: 1,
+          limit: 1,
+          type: props.type,
+          siteId: props.siteId,
+          roleState: "other-site",
+        }).catch(() => null)
+      : Promise.resolve(null),
+  { watch: [() => props.status, () => props.orgId, () => props.siteId] }
+);
+const otherSiteBanner = computed(() =>
+  otherSiteBannerText(otherSiteReq.value?.total)
+);
+watch(otherSiteBanner, (text) => {
+  // the last one fixed: back to the full list
+  if (!text && onlyOtherSite.value) onlyOtherSite.value = false;
+});
+function toggleOtherSite() {
+  page.value = 1;
+  onlyOtherSite.value = !onlyOtherSite.value;
+}
+
 const loading = computed(() => getAllReqStatus.value === "pending");
 
 watch(headerSearch, () => {
@@ -567,7 +625,7 @@ async function updateMemberRole() {
       props.orgId
     );
     await setMember({ mode: "assign-role" });
-    await getAll();
+    await Promise.all([getAll(), refreshOtherSite()]);
   } catch (error: any) {
     // `message.value` alone sets the snackbar's TEXT and never opens it, so a
     // refused role change said nothing at all - the dialog just closed and the

package/components/Robot/BuildingMap.vue

@@ -78,6 +78,9 @@
         <div class="hero-bmap__seg" role="group" aria-label="View angle">
           <button v-for="(a, id) in MAP_ANGLES" :key="id" type="button" :aria-pressed="cam.angle === id" @click="cam = presetCamera(cam, id)">{{ a.label }}</button>
         </div>
+        <div class="hero-bmap__seg" role="group" aria-label="Show">
+          <button type="button" :aria-pressed="showRoutes" title="Show the robots' lanes and waypoints" @click="showRoutes = !showRoutes">Routes</button>
+        </div>
         <div class="hero-bmap__seg" role="group" aria-label="Floor">
           <button type="button" :aria-pressed="focus === null" @click="focus = null">All</button>
           <button v-for="f in floors" :key="f" type="button" :aria-pressed="focus === f" @click="focus = f">{{ floorName(f) }}</button>
@@ -98,6 +101,8 @@
         <div
           class="hero-bmap__stack"
           :style="{
+            width: `${plane.w}px`,
+            height: `${plane.h}px`,
             '--shift': `${stack.shift}px`,
             transform: `rotateX(${cam.tilt}deg) rotateZ(${cam.turn}deg) translateZ(${stack.shift}px)`,
             transition: drag ? 'none' : 'transform .6s ease',
@@ -120,13 +125,26 @@
               <span class="hero-bmap__door" style="left: 42%; top: 22%" aria-hidden="true" />
               <span class="hero-bmap__door" style="left: 58%; top: 30%" aria-hidden="true" />
             </template>
-            <svg v-if="f.shapes.length" class="hero-plan__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+            <svg v-if="f.shapes.length || f.cabin.length" class="hero-plan__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
               <template v-for="s in f.shapes" :key="s.id">
                 <polygon v-if="s.kind === 'zone'" class="hero-bmap__zone" :points="svgPoints(s)" vector-effect="non-scaling-stroke" />
                 <line v-else-if="s.kind === 'wall'" class="hero-bmap__wall" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" vector-effect="non-scaling-stroke" />
-                <line v-else-if="s.kind === 'door'" class="hero-bmap__doorline" :class="{ 'hero-bmap__doorline--open': openDoors.has(String(s.meta?.name)) }" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" vector-effect="non-scaling-stroke" />
+                <template v-else-if="s.kind === 'door'">
+                  <polyline v-for="(g, gi) in f.glyphs[s.id] ?? []" :key="gi" class="hero-bmap__doorswing" :points="svgPoints({ points: g })" vector-effect="non-scaling-stroke" />
+                  <line class="hero-bmap__doorline" :class="{ 'hero-bmap__doorline--open': openDoors.has(String(s.meta?.name)) }" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" vector-effect="non-scaling-stroke" />
+                </template>
               </template>
+              <line v-for="(c, ci) in f.cabin" :key="`c${ci}`" class="hero-bmap__cabindoor" :x1="c.a.x" :y1="c.a.y" :x2="c.b.x" :y2="c.b.y" vector-effect="non-scaling-stroke" />
             </svg>
+            <template v-if="showRoutes && (f.routes2.lanes.length || f.routes2.waypoints.length)">
+              <svg class="hero-plan__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+                <line v-for="(l, li) in f.routes2.lanes" :key="`ln${li}`" class="hero-bmap__lane" :class="{ 'hero-bmap__lane--oneway': l.oneWay }" :x1="l.a.x" :y1="l.a.y" :x2="l.b.x" :y2="l.b.y" vector-effect="non-scaling-stroke" />
+              </svg>
+              <span v-for="(w, wi) in f.routes2.waypoints" :key="`wp${wi}`" class="hero-bmap__wp" :class="`hero-bmap__wp--${w.kind}`" :style="{ left: `${w.x}%`, top: `${w.y}%` }" :title="w.name" aria-hidden="true" />
+              <div v-for="(w, wi) in f.routes2.waypoints.filter((x) => x.name && x.kind !== 'point')" :key="`wn${wi}`" class="hero-bmap__anchor" :style="{ left: `${w.x}%`, top: `${w.y}%` }">
+                <div class="hero-bmap__wpname" :style="{ transform: `translateZ(6px) ${unskew}` }">{{ w.name }}</div>
+              </div>
+            </template>
 
             <template v-if="type === 'security'">
               <svg class="hero-plan__svg" viewBox="0 0 400 300" preserveAspectRatio="none" aria-hidden="true">
@@ -163,7 +181,7 @@
             v-for="s in shafts"
             :key="s.id"
             class="hero-bmap__shaft"
-            :style="{ left: `${s.x}%`, top: `${s.y}%`, transform: `translateZ(${s.z}px)`, opacity: look.shaftOpacity }"
+            :style="{ left: `${s.x}px`, top: `${s.y}px`, transform: `translateZ(${s.z}px) rotateZ(${s.rot}deg)`, opacity: look.shaftOpacity }"
           >
             <span class="hero-bmap__shaftwall" :style="{ width: `${s.w}px`, height: `${s.h}px` }" />
             <span class="hero-bmap__shaftwall hero-bmap__shaftwall--y" :style="{ width: `${s.h}px`, height: `${s.d}px` }" />
@@ -177,6 +195,7 @@
         <span><i class="hero-bmap__key hero-bmap__key--shaft" />Lift shaft</span>
         <span><i class="hero-bmap__key hero-bmap__key--bot" />Robot (live)</span>
         <span v-if="type === 'security'"><i class="hero-bmap__key hero-bmap__key--route" />Patrol route · numbered checkpoints</span>
+        <span v-if="showRoutes && hasLanes"><i class="hero-bmap__key hero-bmap__key--lane" />Robot lanes · waypoints</span>
       </div>
     </div>
 
@@ -206,7 +225,8 @@ import RobotMapEditor from "./MapEditor.vue";
 import RobotReconnecting from "./Reconnecting.vue";
 import useRobotBuilding from "../../composables/useRobotBuilding";
 import useFloorPlanImages from "../../composables/useFloorPlanImages";
-import { floorPlanFor, planBox } from "../../utils/robot-floorplan";
+import { floorPlanFor } from "../../utils/robot-floorplan";
+import { floorAspect, floorDoors, placementInWorld, planBoxIn, routeOverlay, viewerLifts } from "../../utils/rmf-editor";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import { openDoorNames } from "../../utils/robot-fleet-core";
 import {
@@ -228,6 +248,7 @@ import {
 import {
   buildingFloors,
   cameraReadout,
+  doorGlyph,
   defaultCamera,
   dragCamera,
   dragMode,
@@ -237,7 +258,6 @@ import {
   planeLook,
   presetCamera,
   resetCamera,
-  shapeBox,
   shapesFromMap,
   stackMetrics,
   startDrag,
@@ -319,34 +339,66 @@ function floorImage(floorNo: number) {
   const p = floorPlanFor(saved.value, floorNo);
   const url = planUrls.value[floorNo];
   if (!p || !url) return null;
-  const b = planBox(p);
-  return { url, style: { left: `${b.left}%`, top: `${b.top}%`, width: `${b.width}%`, height: `${b.height}%` } };
+  // The plan sits in the floor's own frame (world metres); older maps use the 40 x 26 m frame.
+  const pf = saved.value?.rmf?.levels?.find((l: any) => l.floorNo === floorNo)?.planFrame;
+  const f = pf ? { minX: pf.minX, maxY: pf.maxY, w: pf.maxX - pf.minX, h: pf.maxY - pf.minY } : { minX: 0, maxY: 0, w: 40, h: 26 };
+  const b = planBoxIn(f, placementInWorld(p as typeof p & { space?: string }, pf));
+  return { url, style: { left: `${b.left}%`, top: `${b.top}%`, width: `${b.width}%`, height: `${b.height}%`, transform: `rotate(${b.rotateDeg}deg)`, transformOrigin: "0 0" } };
+}
+/** Each floor's doors with their real type (the saved map's rmf part), for the swing / slide drawing, and the lift cabin doors that open there. */
+function floorDoorParts(floorNo: number) {
+  const fd = fleet.value ? null : floorDoors(map.value, floorNo);
+  const own = shapes.value.filter((s) => s.kind !== "lift" && s.floorNo === floorNo);
+  if (!fd) return { shapes: own, glyphs: {} as Record<string, Array<Array<{ x: number; y: number }>>>, cabin: [] as Array<{ a: { x: number; y: number }; b: { x: number; y: number } }> };
+  const size = { w: fd.frame.w, h: fd.frame.h };
+  return { shapes: [...own.filter((s) => s.kind !== "door"), ...fd.doors], glyphs: Object.fromEntries(fd.doors.map((d) => [d.id, doorGlyph(d, size)])), cabin: fd.cabin };
 }
 const floors3d = computed(() =>
-  floors.value.map((floorNo) => ({
-    floorNo,
-    plan: floorImage(floorNo),
-    dim: floorOpacity(cam.value.tilt, focus.value, floorNo),
-    shapes: shapes.value.filter((s) => s.kind !== "lift" && s.floorNo === floorNo),
-    routes: props.type === "security" ? floorRoutes(floorNo) : [],
-    robots: mapRobots(rows.value, states.value, floorNo),
-  })),
+  floors.value.map((floorNo) => {
+    const parts = floorDoorParts(floorNo);
+    return {
+      floorNo,
+      plan: floorImage(floorNo),
+      dim: floorOpacity(cam.value.tilt, focus.value, floorNo),
+      shapes: parts.shapes,
+      glyphs: parts.glyphs,
+      cabin: parts.cabin,
+      routes: props.type === "security" ? floorRoutes(floorNo) : [],
+      routes2: routeOverlay(map.value, floorNo),
+      robots: mapRobots(rows.value, states.value, floorNo),
+    };
+  }),
 );
+/** Lanes and waypoints: shown by default once the building has any. */
+const hasLanes = computed(() => floors3d.value.some((f) => f.routes2.lanes.length || f.routes2.waypoints.length));
+const showRoutes = ref(true);
+/** The floor plane keeps the building's real shape (inside 400 x 300 px). */
+const plane = computed(() => {
+  const a = fleet.value ? 40 / 26 : floorAspect(map.value);
+  return a >= 4 / 3 ? { w: 400, h: Math.max(60, Math.round(400 / a)) } : { w: Math.max(60, Math.round(300 * a)), h: 300 };
+});
 const legend = computed(() => [...floors3d.value].reverse());
 /** The editor opens on the busiest floor (the handoff's "best floor"). */
 const startFloor = computed(() => pickFloor(floors.value, null, ids.value, states.value));
 
-/** Each saved lift shaft: two red walls from its lowest served floor to its highest. */
+/**
+ * Each saved lift shaft: two red walls from its lowest served floor to its
+ * highest, at its real size and angle - placed by its top-left corner turned
+ * round its centre, so the shaft turns on the spot.
+ */
 const shafts = computed(() =>
-  shapes.value
-    .filter((s) => s.kind === "lift")
-    .map((s) => {
-      const served = (s.floors ?? []).map((f) => floors.value.indexOf(f)).filter((i) => i >= 0);
-      const lo = served.length ? Math.min(...served) : 0;
-      const hi = served.length ? Math.max(...served) : floors.value.length - 1;
-      const b = shapeBox(s);
-      return { id: s.id, x: b.x, y: b.y, z: lo * FLOOR_GAP_PX, w: Math.max(12, (b.w / 100) * 400), d: Math.max(12, (b.h / 100) * 260), h: (hi - lo) * FLOOR_GAP_PX + 8 };
-    }),
+  viewerLifts(map.value).map((l, i) => {
+    const served = l.floors.map((f) => floors.value.indexOf(f)).filter((k) => k >= 0);
+    const lo = served.length ? Math.min(...served) : 0;
+    const hi = served.length ? Math.max(...served) : floors.value.length - 1;
+    const w = Math.max(12, (l.w / 100) * plane.value.w);
+    const d = Math.max(12, (l.d / 100) * plane.value.h);
+    const rot = -l.yawDeg;
+    const t = (rot * Math.PI) / 180;
+    const cx = (l.x / 100) * plane.value.w;
+    const cy = (l.y / 100) * plane.value.h;
+    return { id: `${l.name}-${i}`, x: cx + (-w / 2) * Math.cos(t) - (-d / 2) * Math.sin(t), y: cy + (-w / 2) * Math.sin(t) + (-d / 2) * Math.cos(t), rot, z: lo * FLOOR_GAP_PX, w, d, h: (hi - lo) * FLOOR_GAP_PX + 8 };
+  }),
 );
 
 const unplaced = computed(() => unplacedRobots(rows.value, states.value));
@@ -394,7 +446,7 @@ function onMove(e: MouseEvent) {
   if (d) cam.value = dragCamera(d.start, d.mode, e.clientX - d.x, e.clientY - d.y);
 }
 
-const svgPoints = (s: TEditorShape) => s.points.map((p) => `${p.x},${p.y}`).join(" ");
+const svgPoints = (s: { points: Array<{ x: number; y: number }> }) => s.points.map((p) => `${p.x},${p.y}`).join(" ");
 
 /* ---- full screen + edit ---- */
 const viewer = ref<HTMLElement | null>(null);