@7365admin1/layer-common 4.49.0 → 4.51.0

package/components/Robot/MapEditor.vue

@@ -1,20 +1,23 @@
 <template>
   <!--
     Map editor (README §4 "Edit mode"): Wall · Zone · Door · Lift shaft · Move
-    · Delete | Undo · Redo | Save, one floor at a time on a flat 2D plan.
-    A drawing tool places its shape where you click (the new shape comes
-    selected with its handles). Move: click selects (Shift adds), drag moves
-    the selection, drag on empty space selects an area; handles resize a lift
-    shaft or zone, drag a wall's or door's ends and a zone's corners, and turn
-    a door or lift shaft. Snaps to the grid (Shift while dragging = free).
-    Keyboard: arrows move the cursor or nudge the selection, Enter places or
-    selects, Delete removes, Esc clears, Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z or
-    Ctrl+Y redo. Every drag is one undo step. Save checks in plain words
-    first, then writes the building map through the API (versioned).
-    Floor plan (per floor): upload / replace / remove an image kept privately
-    in the map, Set scale by measuring a known length, Fit. Building file:
-    import the HERO Fleet Core building, download the building file or a
-    route map.
+    · Delete | Undo · Redo | Save, one floor at a time on a flat 2D plan, and
+    the robot-route tools: Waypoint · Lane · Fiducial · Measure (HERO Fleet
+    Core building data, Open-RMF shaped). A drawing tool places its shape where
+    you click (the new shape comes selected with its handles). Move: click
+    selects (Shift adds), drag moves the selection, drag on empty space selects
+    an area; handles resize a lift shaft or zone, drag a wall's or door's ends
+    and a zone's corners, and turn a door or lift shaft (any angle). Lane:
+    click waypoints in turn (empty space makes one) on the chosen route graph.
+    Snaps to the grid (Shift while dragging = free). Wheel zooms, right- or
+    middle-drag pans. Keyboard: arrows move the cursor or nudge the selection,
+    Enter places or selects, Delete removes, Esc clears (and ends a lane
+    chain), Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z or Ctrl+Y redo. Save checks in
+    plain words first, then writes the building map through the API
+    (versioned). Floor plan (per floor): upload / replace / remove an image
+    kept privately in the map, scale by measuring a known length, fit, turn.
+    Building file: import the HERO Fleet Core building or a building / route
+    file, download the building file or a route map.
   -->
   <div ref="root" class="hero-editor" :class="{ 'hero-editor--fs': isFs }">
     <div class="hero-editor__bar">
@@ -24,6 +27,9 @@
         <button type="button" class="hero-seg__opt hero-seg__opt--redo" :disabled="!state.redo.length" @click="dispatch({ type: 'redo' })">Redo <span class="hero-seg__kbd">⌃⇧Z</span></button>
         <button type="button" class="hero-seg__opt hero-seg__opt--save" :disabled="saving" @click="save">{{ saving ? "Saving…" : "Save" }}</button>
       </div>
+      <div class="hero-seg" role="toolbar" aria-label="Robot route tools">
+        <button v-for="t in ROUTE_TOOLS" :key="t.id" type="button" class="hero-seg__opt" :aria-pressed="tool === t.id" @click="pickTool(t.id)">{{ t.label }}</button>
+      </div>
       <div class="hero-seg" role="group" aria-label="Grid">
         <button type="button" class="hero-seg__opt" :aria-pressed="snapOn" title="Snap to the grid while dragging (hold Shift to place freely)" @click="snapOn = !snapOn">Snap</button>
         <select v-model.number="gridM" class="hero-editor__grid" aria-label="Grid step">
@@ -31,8 +37,19 @@
         </select>
       </div>
       <select v-model.number="floor" class="hero-input hero-select hero-editor__floor" aria-label="Floor">
-        <option v-for="f in floors" :key="f" :value="f">{{ floorName(f) }}</option>
+        <option v-for="f in allFloors" :key="f" :value="f">{{ floorName(f) }}</option>
       </select>
+      <label class="hero-editor__graphpick">
+        <span>Route graph</span>
+        <select v-model.number="graph" class="hero-input hero-select hero-editor__floor" aria-label="Route graph">
+          <option v-for="g in graphOptions" :key="g.idx" :value="g.idx">{{ g.name }} ({{ g.idx }})</option>
+        </select>
+      </label>
+      <div class="hero-seg" role="group" aria-label="Zoom">
+        <button type="button" class="hero-seg__opt" title="Zoom out" aria-label="Zoom out" @click="zoomBy(1 / 1.25)">−</button>
+        <button type="button" class="hero-seg__opt hero-editor__zoomread" title="Fit the plan" aria-label="Fit the plan" @click="resetView">{{ Math.round(view.zoom * 100) }}%</button>
+        <button type="button" class="hero-seg__opt" title="Zoom in" aria-label="Zoom in" @click="zoomBy(1.25)">+</button>
+      </div>
       <input
         v-if="tool === 'zone' || selectedZone"
         v-model="zoneName"
@@ -41,7 +58,7 @@
         placeholder="Zone name (required to save)"
         @input="dispatch({ type: 'rename', name: zoneName })"
       />
-      <span class="hero-editor__hint">{{ TOOL_HINTS[tool] }}</span>
+      <span class="hero-editor__hint">{{ hint }}</span>
     </div>
 
     <div v-if="state.notice" class="hero-editor__notice" :class="{ 'hero-editor__notice--ok': state.notice.ok }" role="status" aria-live="polite">{{ state.notice.text }}</div>
@@ -50,8 +67,7 @@
       <div
         ref="plan"
         class="hero-editor__plan"
-        :class="`hero-editor__plan--${planCursor}`"
-        :style="gridStyle"
+        :class="[`hero-editor__plan--${planCursor}`]"
         tabindex="0"
         role="application"
         :aria-label="`Floor plan ${floorName(floor)}. Arrow keys move the cursor or nudge the selection, Enter places or selects, Delete removes, Escape clears.`"
@@ -60,87 +76,290 @@
         @pointerup="onPointerUp"
         @pointercancel="onPointerCancel"
         @dblclick="onDoubleClick"
+        @wheel.prevent="onWheel"
+        @contextmenu.prevent
         @keydown="onKey"
         @blur="keyboard = false"
       >
-        <img v-if="floorPlan && planUrl" class="hero-editor__planimg" :src="planUrl" :style="planImgStyle" alt="" aria-hidden="true" draggable="false" />
-        <template v-else-if="!floorPlan">
-          <span class="hero-editor__room" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
-          <span class="hero-editor__room" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
-          <span class="hero-editor__room" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
-        </template>
-        <svg class="hero-editor__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-          <template v-for="s in visible" :key="s.id">
-            <polygon v-if="s.kind === 'zone'" class="hero-editor__zone-shape" :class="{ 'hero-editor__sel': isSel(s.id) }" :points="pts(s.points)" vector-effect="non-scaling-stroke" />
-            <line v-else-if="s.kind === 'wall'" class="hero-editor__wall" :class="{ 'hero-editor__sel': isSel(s.id) }" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" />
-            <template v-else-if="s.kind === 'door'">
-              <polyline v-if="swings[s.id]" class="hero-editor__swing" :points="pts([...swings[s.id]!.leaf, ...swings[s.id]!.arc.slice().reverse()])" vector-effect="non-scaling-stroke" />
-              <line class="hero-editor__door" :class="{ 'hero-editor__sel': isSel(s.id) }" :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" />
+        <div ref="canvas" class="hero-editor__canvas" :style="canvasStyle">
+          <img v-if="floorPlan && planUrl" class="hero-editor__planimg" :src="planUrl" :style="planImgStyle" alt="" aria-hidden="true" draggable="false" />
+          <template v-else-if="!floorPlan && !hasRmf">
+            <span class="hero-editor__room" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
+            <span class="hero-editor__room" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
+            <span class="hero-editor__room" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
+          </template>
+          <svg class="hero-editor__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+            <template v-for="s in visible" :key="s.id">
+              <polygon v-if="s.kind === 'zone'" class="hero-editor__zone-shape" :class="{ 'hero-editor__sel': isSel(s.id) }" :points="pts(s.points)" vector-effect="non-scaling-stroke" />
+              <line v-else-if="s.kind === 'wall'" class="hero-editor__wall" :class="{ 'hero-editor__sel': isSel(s.id) }" :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 glyphs[s.id] ?? []" :key="gi" class="hero-editor__swing" :points="pts(g)" vector-effect="non-scaling-stroke" />
+                <line class="hero-editor__door" :class="{ 'hero-editor__sel': isSel(s.id) }" :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>
+              <line
+                v-else-if="s.kind === 'lane'"
+                class="hero-editor__lane"
+                :class="{ 'hero-editor__sel': isSel(s.id), 'hero-editor__lane--other': laneGraph(s) !== graph }"
+                :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 === 'measure'" class="hero-editor__measure" :class="{ 'hero-editor__sel': isSel(s.id) }" :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>
+            <line v-if="rotateLine" class="hero-editor__rotline" :x1="rotateLine.x1" :y1="rotateLine.y1" :x2="rotateLine.x2" :y2="rotateLine.y2" vector-effect="non-scaling-stroke" />
+            <line v-if="lanePreview" class="hero-editor__lane hero-editor__lane--preview" :x1="lanePreview.a.x" :y1="lanePreview.a.y" :x2="lanePreview.b.x" :y2="lanePreview.b.y" vector-effect="non-scaling-stroke" />
+            <line v-if="measurePreview" class="hero-editor__measure" :x1="measurePreview.a.x" :y1="measurePreview.a.y" :x2="measurePreview.b.x" :y2="measurePreview.b.y" vector-effect="non-scaling-stroke" />
+          </svg>
+          <span v-for="a in laneArrows" :key="`a-${a.id}`" class="hero-editor__arrow" :class="{ 'hero-editor__arrow--other': a.other }" :style="{ left: `${a.x}%`, top: `${a.y}%`, transform: `translate(-50%, -50%) rotate(${a.deg}deg)` }" aria-hidden="true" />
+          <template v-for="s in visible" :key="`l-${s.id}`">
+            <div v-if="s.kind === 'zone'" class="hero-editor__label" :style="boxStyle(s)" :title="shapeTitle(s)">{{ s.name || "Unnamed zone" }}</div>
+            <div v-else-if="s.kind === 'lift'" class="hero-editor__lift" :class="{ 'hero-editor__sel': isSel(s.id), 'hero-editor__lift--passes': !(s.floors ?? []).includes(floor) }" :style="liftStyle(s)" :title="shapeTitle(s)">{{ s.meta?.name || "Lift" }}</div>
+            <div v-else-if="s.kind === 'waypoint'" class="hero-editor__wp" :class="[`hero-editor__wp--${wpKind(s)}`, { 'hero-editor__sel': isSel(s.id), 'hero-editor__wp--from': state.laneFrom === s.id }]" :style="{ left: `${s.points[0]!.x}%`, top: `${s.points[0]!.y}%` }" :title="shapeTitle(s)">
+              <span v-if="s.name" class="hero-editor__wpname">{{ s.name }}</span>
+            </div>
+            <div v-else-if="s.kind === 'fiducial'" class="hero-editor__fid" :class="{ 'hero-editor__sel': isSel(s.id) }" :style="{ left: `${s.points[0]!.x}%`, top: `${s.points[0]!.y}%` }" :title="shapeTitle(s)">
+              <span class="hero-editor__wpname">{{ s.name }}</span>
+            </div>
+            <div v-else-if="s.kind === 'measure'" class="hero-editor__mlabel" :style="midStyle(s)">{{ Number(s.meta?.distanceM ?? 0).toFixed(2) }} m</div>
           </template>
-          <line v-if="rotateLine" class="hero-editor__rotline" :x1="rotateLine.x1" :y1="rotateLine.y1" :x2="rotateLine.x2" :y2="rotateLine.y2" vector-effect="non-scaling-stroke" />
-          <line v-if="measure.a && measure.b" class="hero-editor__measure" :x1="measure.a.x" :y1="measure.a.y" :x2="measure.b.x" :y2="measure.b.y" vector-effect="non-scaling-stroke" />
-        </svg>
-        <span v-for="(m, i) in [measure.a, measure.b].filter(Boolean)" :key="`m${i}`" class="hero-editor__mpoint" :style="{ left: `${m!.x}%`, top: `${m!.y}%` }" aria-hidden="true" />
-        <template v-for="s in visible" :key="`l-${s.id}`">
-          <div v-if="s.kind === 'zone'" class="hero-editor__label" :style="boxStyle(s)" :title="shapeTitle(s)">{{ s.name || "Unnamed zone" }}</div>
-          <div v-else-if="s.kind === 'lift'" class="hero-editor__lift" :class="{ 'hero-editor__sel': isSel(s.id) }" :style="boxStyle(s)" :title="shapeTitle(s)">Lift</div>
-        </template>
-        <div v-for="h in handles" :key="h.key" class="hero-editor__handle" :class="[`hero-editor__handle--${h.kind}`, { 'hero-editor__handle--on': h.kind === 'vertex' && state.vertex?.index === h.index }]" :style="{ left: `${h.x}%`, top: `${h.y}%`, cursor: h.kind === 'rotate' ? undefined : h.cursor }" aria-hidden="true" @pointerdown.stop="onHandleDown($event, h)" />
-        <span v-if="marquee" class="hero-editor__marquee" :style="rectStyle(marquee)" aria-hidden="true" />
-        <span v-if="keyboard" class="hero-editor__cursor" :style="{ left: `${cursor.x}%`, top: `${cursor.y}%` }" aria-hidden="true" />
+          <span v-for="d in cabinDoors" :key="d.key" class="hero-editor__cabindoor" :class="{ 'hero-editor__cabindoor--shut': !d.open }" :style="d.style" :title="d.title" aria-hidden="true" />
+          <span v-if="state.measureFrom" class="hero-editor__mpoint" :style="{ left: `${state.measureFrom.x}%`, top: `${state.measureFrom.y}%` }" aria-hidden="true" />
+          <div v-for="h in handles" :key="h.key" class="hero-editor__handle" :class="[`hero-editor__handle--${h.kind}`, { 'hero-editor__handle--on': h.kind === 'vertex' && state.vertex?.index === h.index }]" :style="{ left: `${h.x}%`, top: `${h.y}%`, cursor: h.kind === 'rotate' ? undefined : h.cursor }" aria-hidden="true" @pointerdown.stop="onHandleDown($event, h)" />
+          <span v-if="marquee" class="hero-editor__marquee" :style="rectStyle(marquee)" aria-hidden="true" />
+          <span v-if="keyboard" class="hero-editor__cursor" :style="{ left: `${cursor.x}%`, top: `${cursor.y}%` }" aria-hidden="true" />
+        </div>
+        <span class="hero-editor__scale" aria-hidden="true">{{ frameText }}</span>
       </div>
 
       <aside class="hero-editor__aside">
+        <!-- ---- the selection ---- -->
         <template v-if="selectedShapes.length">
-          <div class="hero-aside__title hero-editor__asidetitle">{{ selectedShapes.length === 1 ? shapeTitle(selectedShapes[0]!) : `${selectedShapes.length} selected` }}</div>
+          <div class="hero-aside__title hero-editor__asidetitle">{{ single ? shapeTitle(single) : `${selectedShapes.length} selected` }}</div>
+
+          <template v-if="single?.kind === 'door'">
+            <label class="hero-editor__field"><span>Name</span><input class="hero-input" maxlength="60" :value="single.meta?.name ?? ''" placeholder="Named on save" @input="setMeta('name', val($event), 'name')" /></label>
+            <label class="hero-editor__field">
+              <span>Door type</span>
+              <select class="hero-input hero-select" :value="single.meta?.type ?? 'hinged'" @change="setMeta('type', val($event))">
+                <option v-for="t in DOOR_TYPES" :key="t" :value="t">{{ DOOR_TYPE_LABEL[t] }}</option>
+              </select>
+            </label>
+            <template v-if="String(single.meta?.type ?? 'hinged').endsWith('hinged')">
+              <label v-if="(single.meta?.type ?? 'hinged') === 'hinged'" class="hero-editor__field">
+                <span>Hinge at</span>
+                <select class="hero-input hero-select" :value="single.meta?.motionAxis ?? 'start'" @change="setMeta('motionAxis', val($event))">
+                  <option value="start">First end</option>
+                  <option value="end">Second end</option>
+                </select>
+              </label>
+              <label class="hero-editor__field"><span>Opens up to (°)</span><input class="hero-input" type="number" min="1" max="180" step="5" :value="Math.abs(Number(single.meta?.motionDegrees ?? 90))" @change="setMeta('motionDegrees', clampNum(val($event), 1, 180, 90))" /></label>
+            </template>
+            <label v-if="String(single.meta?.type ?? '').startsWith('double')" class="hero-editor__field">
+              <span>Left / right leaf ratio</span>
+              <input class="hero-input" type="number" min="0.1" max="10" step="0.1" :value="Number(single.meta?.rightLeftRatio ?? 1)" @change="setMeta('rightLeftRatio', clampNum(val($event), 0.1, 10, 1))" />
+            </label>
+            <div class="hero-editor__actions">
+              <button type="button" class="hero-editor__act" @click="dispatch({ type: 'flip' })">Flip swing <span class="hero-seg__kbd">F</span></button>
+              <button type="button" class="hero-editor__act" @click="dispatch({ type: 'turn' })">Turn 90° <span class="hero-seg__kbd">R</span></button>
+            </div>
+          </template>
+
+          <template v-else-if="single?.kind === 'lift'">
+            <label class="hero-editor__field"><span>Name</span><input class="hero-input" maxlength="60" :value="single.meta?.name ?? ''" placeholder="Named on save" @input="setMeta('name', val($event), 'name')" /></label>
+            <div class="hero-editor__row3">
+              <label class="hero-editor__field"><span>Width (m)</span><input class="hero-input" type="number" :min="LIFT_MIN_M" :max="LIFT_MAX_M" step="0.1" :value="liftSize.w.toFixed(2)" @change="setLiftSize(Number(val($event)), null)" /></label>
+              <label class="hero-editor__field"><span>Depth (m)</span><input class="hero-input" type="number" :min="LIFT_MIN_M" :max="LIFT_MAX_M" step="0.1" :value="liftSize.d.toFixed(2)" @change="setLiftSize(null, Number(val($event)))" /></label>
+              <label class="hero-editor__field"><span>Angle (°)</span><input class="hero-input" type="number" min="-180" max="180" step="1" :value="liftAngle" @change="setLiftAngle(Number(val($event)))" /></label>
+            </div>
+            <div class="hero-editor__sub">Cabin doors</div>
+            <div v-for="(d, i) in liftDoors" :key="i" class="hero-editor__cabinrow">
+              <input class="hero-input" maxlength="60" :value="d.name" aria-label="Cabin door name" @change="renameCabinDoor(i, val($event))" />
+              <select class="hero-input hero-select" :value="cabinDoorSide(d, liftSize.w, liftSize.d)" aria-label="Side" @change="setCabinDoor(i, { side: val($event) })">
+                <option v-for="sd in LIFT_SIDES" :key="sd" :value="sd">{{ LIFT_SIDE_LABEL[sd] }}</option>
+              </select>
+              <button type="button" class="hero-editor__act hero-editor__act--del" :disabled="liftDoors.length <= 1" aria-label="Remove cabin door" @click="removeCabinDoor(i)">×</button>
+              <select class="hero-input hero-select" :value="d.type" aria-label="Door type" @change="setCabinDoor(i, { type: val($event) })">
+                <option v-for="t in LIFT_DOOR_TYPES" :key="t" :value="t">{{ LIFT_DOOR_TYPE_LABEL[t] }}</option>
+              </select>
+              <label class="hero-editor__cabinw"><input class="hero-input" type="number" min="0.3" max="10" step="0.1" :value="d.widthM" aria-label="Door width (m)" @change="setCabinDoor(i, { widthM: clampNum(val($event), 0.3, 10, 1.2) })" /> m</label>
+            </div>
+            <button type="button" class="hero-editor__act" :disabled="liftDoors.length >= 8" @click="addCabinDoor">Add cabin door</button>
+            <div class="hero-editor__sub">Floors · which door opens</div>
+            <table class="hero-editor__grid2">
+              <thead>
+                <tr><th>Floor</th><th>Stops</th><th v-for="d in liftDoors" :key="d.name">{{ d.name }}</th></tr>
+              </thead>
+              <tbody>
+                <tr v-for="fl in [...allFloors].reverse()" :key="fl">
+                  <td>{{ floorName(fl) }}</td>
+                  <td><input type="checkbox" :checked="(single.floors ?? []).includes(fl)" :aria-label="`Stops at ${floorName(fl)}`" @change="toggleLiftFloor(fl)" /></td>
+                  <td v-for="d in liftDoors" :key="d.name">
+                    <input type="checkbox" :disabled="!(single.floors ?? []).includes(fl)" :checked="doorOpensOn(fl, d.name)" :aria-label="`${d.name} opens on ${floorName(fl)}`" @change="toggleLevelDoor(fl, d.name)" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <label class="hero-editor__field">
+              <span>Reference floor</span>
+              <select class="hero-input hero-select" :value="single.meta?.referenceFloor ?? ''" @change="setMeta('referenceFloor', val($event) || undefined)">
+                <option value="">Lowest served floor</option>
+                <option v-for="fl in single.floors ?? []" :key="fl" :value="levelNameOf(fl)">{{ levelNameOf(fl) }}</option>
+              </select>
+            </label>
+            <div class="hero-editor__actions">
+              <button type="button" class="hero-editor__act" @click="dispatch({ type: 'turn' })">Turn 90° <span class="hero-seg__kbd">R</span></button>
+            </div>
+          </template>
+
+          <template v-else-if="single?.kind === 'waypoint'">
+            <label class="hero-editor__field"><span>Name</span><input class="hero-input" maxlength="60" :value="single.name ?? ''" placeholder="e.g. lobby, charger_1" @input="setName(val($event))" /></label>
+            <div class="hero-editor__checks">
+              <label v-for="c in WP_FLAGS" :key="c.key"><input type="checkbox" :checked="!!wpParams[c.key]" @change="setParam(c.key, ($event.target as HTMLInputElement).checked)" /> {{ c.label }}</label>
+            </div>
+            <label v-for="c in WP_TEXTS" :key="c.key" class="hero-editor__field">
+              <span>{{ c.label }}</span>
+              <input class="hero-input" maxlength="60" :value="String(wpParams[c.key] ?? '')" :placeholder="c.hint" @input="setParam(c.key, val($event), true)" />
+            </label>
+            <label class="hero-editor__field"><span>Merge radius (m)</span><input class="hero-input" type="number" min="0" max="100" step="0.1" :value="wpParams.merge_radius ?? ''" placeholder="none" @change="setParam('merge_radius', val($event) === '' ? undefined : clampNum(val($event), 0, 100, 0))" /></label>
+            <div class="hero-muted">{{ laneCountText }}</div>
+          </template>
+
+          <template v-else-if="single?.kind === 'lane'">
+            <label class="hero-editor__field">
+              <span>Route graph</span>
+              <select class="hero-input hero-select" :value="laneGraph(single)" @change="setMeta('graphIdx', Number(val($event)))">
+                <option v-for="g in graphOptions" :key="g.idx" :value="g.idx">{{ g.name }} ({{ g.idx }})</option>
+              </select>
+            </label>
+            <label class="hero-editor__field">
+              <span>Direction</span>
+              <select class="hero-input hero-select" :value="single.meta?.bidirectional === false ? 'one' : 'two'" @change="setMeta('bidirectional', val($event) !== 'one')">
+                <option value="two">Two-way</option>
+                <option value="one">One-way ({{ laneEnds }})</option>
+              </select>
+            </label>
+            <label class="hero-editor__field"><span>Speed limit (m/s)</span><input class="hero-input" type="number" min="0" max="20" step="0.1" :value="single.meta?.speedLimit ?? ''" placeholder="none" @change="setMeta('speedLimit', val($event) === '' ? undefined : clampNum(val($event), 0, 20, 0) || undefined)" /></label>
+            <label class="hero-editor__field">
+              <span>Robot must face</span>
+              <select class="hero-input hero-select" :value="single.meta?.orientation ?? ''" @change="setMeta('orientation', val($event) || undefined)">
+                <option value="">Any way</option>
+                <option value="forward">Forward along the lane</option>
+                <option value="backward">Backward along the lane</option>
+              </select>
+            </label>
+            <label class="hero-editor__field"><span>Shared-space group</span><input class="hero-input" maxlength="60" :value="single.meta?.mutex ?? ''" placeholder="one robot at a time" @input="setMeta('mutex', val($event) || undefined, 'mutex')" /></label>
+            <details class="hero-editor__details">
+              <summary>Simulation</summary>
+              <label class="hero-editor__field"><span>Mock floor name</span><input class="hero-input" maxlength="60" :value="single.meta?.demoMockFloorName ?? ''" @input="setMeta('demoMockFloorName', val($event) || undefined, 'mockfloor')" /></label>
+              <label class="hero-editor__field"><span>Mock lift name</span><input class="hero-input" maxlength="60" :value="single.meta?.demoMockLiftName ?? ''" @input="setMeta('demoMockLiftName', val($event) || undefined, 'mocklift')" /></label>
+            </details>
+            <div class="hero-editor__actions">
+              <button type="button" class="hero-editor__act" @click="reverseLane">Reverse direction</button>
+            </div>
+          </template>
+
+          <template v-else-if="single?.kind === 'fiducial'">
+            <label class="hero-editor__field"><span>Name</span><input class="hero-input" maxlength="60" :value="single.name ?? ''" @input="setName(val($event))" /></label>
+            <div class="hero-muted">Use the same name for the same mark on every floor; "Line up with" below then turns, scales and moves this floor onto the other.</div>
+          </template>
+
+          <template v-else-if="single?.kind === 'measure'">
+            <label class="hero-editor__field"><span>Real length (m)</span><input class="hero-input" type="number" min="0.01" step="0.01" :value="Number(single.meta?.distanceM ?? 0)" @change="setMeta('distanceM', clampNum(val($event), 0.01, 10000, 1))" /></label>
+            <div class="hero-muted">Drawn length now {{ measuredLength.toFixed(2) }} m.</div>
+            <div class="hero-editor__actions">
+              <button type="button" class="hero-editor__act" :disabled="!floorPlan" @click="applyScale(false)">Scale floor plan to match</button>
+              <button type="button" class="hero-editor__act" @click="applyScale(true)">{{ floorPlan ? "Scale plan and drawing" : "Scale drawing to match" }}</button>
+            </div>
+          </template>
+
           <div class="hero-editor__actions">
-            <button v-if="selectedShapes.some((s) => s.kind === 'door')" type="button" class="hero-editor__act" @click="dispatch({ type: 'flip' })">Flip swing <span class="hero-seg__kbd">F</span></button>
-            <button v-if="selectedShapes.some((s) => s.kind === 'door' || s.kind === 'lift')" type="button" class="hero-editor__act" @click="dispatch({ type: 'turn' })">Turn 90° <span class="hero-seg__kbd">R</span></button>
             <template v-if="selectedZone">
               <button type="button" class="hero-editor__act" @click="addCorner">Add corner</button>
               <button type="button" class="hero-editor__act" :disabled="state.vertex?.id !== selectedZone.id || selectedZone.points.length <= 3" @click="dispatch({ type: 'remove' })">Remove corner</button>
             </template>
+            <button v-if="!single" type="button" class="hero-editor__act" :disabled="!selectedShapes.some((s) => s.kind === 'door')" @click="dispatch({ type: 'flip' })">Flip swing <span class="hero-seg__kbd">F</span></button>
             <button type="button" class="hero-editor__act hero-editor__act--del" @click="removeSelection">Delete <span class="hero-seg__kbd">Del</span></button>
           </div>
           <div v-if="selectedZone" class="hero-muted">Double-click an edge to add a corner; double-click a corner to remove it.</div>
-          <div v-if="selectedShapes.some((s) => s.kind === 'lift')" class="hero-muted">A lift shaft turns a quarter at a time.</div>
         </template>
+
+        <!-- ---- checks ---- -->
+        <template v-if="checks.errors.length || checks.warnings.length">
+          <div class="hero-aside__title hero-editor__asidetitle">Checks</div>
+          <button v-for="(c, i) in checks.errors" :key="`e${i}`" type="button" class="hero-editor__check hero-editor__check--error" @click="showCheck(c)">{{ sentence(c.text) }}</button>
+          <button v-for="(c, i) in checks.warnings" :key="`w${i}`" type="button" class="hero-editor__check" @click="showCheck(c)">{{ sentence(c.text) }}</button>
+        </template>
+
         <div class="hero-aside__title hero-editor__asidetitle">On {{ floorName(floor) }}</div>
-        <button v-for="s in visible" :key="`r-${s.id}`" type="button" class="hero-editor__row" :class="{ 'hero-editor__row--sel': isSel(s.id) }" :aria-pressed="isSel(s.id)" @click="onRow($event, s)">
-          <span>{{ shapeTitle(s) }}</span><span class="hero-editor__pos">{{ shapeAnchor(s).x }}, {{ shapeAnchor(s).y }}</span>
-        </button>
+        <div class="hero-editor__list">
+          <button v-for="s in listed" :key="`r-${s.id}`" type="button" class="hero-editor__row" :class="{ 'hero-editor__row--sel': isSel(s.id) }" :aria-pressed="isSel(s.id)" @click="onRow($event, s)">
+            <span>{{ shapeTitle(s) }}</span><span class="hero-editor__pos">{{ shapeAnchor(s).x }}, {{ shapeAnchor(s).y }}</span>
+          </button>
+        </div>
         <div v-if="!visible.length" class="hero-muted">Nothing drawn yet. Pick a tool and click the plan.</div>
 
+        <!-- ---- route graphs ---- -->
+        <div class="hero-aside__title hero-editor__asidetitle">Route graphs</div>
+        <div v-for="g in graphOptions" :key="`g${g.idx}`" class="hero-editor__graphrow" :class="{ 'hero-editor__graphrow--on': g.idx === graph }">
+          <input class="hero-input" maxlength="60" :value="g.name" :aria-label="`Name of route graph ${g.idx}`" @change="renameGraph(g.idx, val($event))" />
+          <input class="hero-input" maxlength="200" :value="g.brands.join(', ')" placeholder="robot brands" :aria-label="`Robot brands on route graph ${g.idx}`" @change="setGraphBrands(g.idx, val($event))" />
+          <span class="hero-editor__pos">{{ laneCount(g.idx) }} lanes</span>
+          <button type="button" class="hero-editor__act hero-editor__act--del" :aria-label="`Remove route graph ${g.idx}`" @click="removeGraph(g.idx)">×</button>
+        </div>
+        <label class="hero-editor__check2"><input v-model="showOtherGraphs" type="checkbox" /> Show lanes of other graphs</label>
+        <button type="button" class="hero-editor__act" :disabled="graphOptions.length >= 9" @click="addGraph">Add route graph</button>
+
+        <!-- ---- this floor ---- -->
+        <div class="hero-aside__title hero-editor__asidetitle">Floor · {{ floorName(floor) }}</div>
+        <div class="hero-editor__row3">
+          <label class="hero-editor__field"><span>Floor name</span><input class="hero-input" maxlength="60" :value="levelNameOf(floor)" @change="setLevel('name', val($event))" /></label>
+          <label class="hero-editor__field"><span>Height (m)</span><input class="hero-input" type="number" min="-100" max="1000" step="0.1" :value="levelMeta(floor).elevationM" @change="setLevel('elevationM', clampNum(val($event), -100, 1000, 0))" /></label>
+        </div>
+        <div class="hero-editor__actions">
+          <select v-model.number="alignTo" class="hero-input hero-select hero-editor__floor" aria-label="Floor to line up with">
+            <option v-for="f in allFloors.filter((x) => x !== floor)" :key="f" :value="f">{{ floorName(f) }}</option>
+          </select>
+          <button type="button" class="hero-editor__act" :disabled="allFloors.length < 2" @click="alignNow">Line up with it</button>
+        </div>
+        <div class="hero-muted">Lines this floor up with the other using fiducials with the same names (two or more).</div>
+
+        <!-- ---- drawing area ---- -->
+        <div class="hero-aside__title hero-editor__asidetitle">Drawing area</div>
+        <div class="hero-editor__row3">
+          <label class="hero-editor__field"><span>Width (m)</span><input class="hero-input" type="number" min="10" max="5000" step="1" :value="state.frame.w" @change="resizeFrame(Number(val($event)), null)" /></label>
+          <label class="hero-editor__field"><span>Height (m)</span><input class="hero-input" type="number" min="10" max="5000" step="1" :value="state.frame.h" @change="resizeFrame(null, Number(val($event)))" /></label>
+        </div>
+        <button type="button" class="hero-editor__act" @click="fitFrameNow">Fit to the drawing and plans</button>
+
+        <!-- ---- floor plan ---- -->
         <div class="hero-aside__title hero-editor__asidetitle">Floor plan · {{ floorName(floor) }}</div>
         <div class="hero-editor__actions">
           <button type="button" class="hero-editor__act" :disabled="planLocked" :title="planLockText" @click="pickPlan">{{ planBusy ? "Saving…" : floorPlan ? "Replace plan" : "Upload plan" }}</button>
           <template v-if="floorPlan">
-            <button type="button" class="hero-editor__act" :disabled="planLocked" :title="planLockText" :aria-pressed="measuring" @click="startMeasure">Set scale</button>
-            <button type="button" class="hero-editor__act" :disabled="planLocked" :title="planLockText" @click="fitPlanNow">Fit</button>
+            <button type="button" class="hero-editor__act" :aria-pressed="tool === 'measure'" @click="pickTool('measure')">Set scale</button>
+            <button type="button" class="hero-editor__act" @click="fitPlanNow">Fit</button>
             <button type="button" class="hero-editor__act hero-editor__act--del" :disabled="planLocked" :title="planLockText" @click="removePlanNow">Remove plan</button>
           </template>
         </div>
+        <label v-if="floorPlan" class="hero-editor__field"><span>Plan turn (°)</span><input class="hero-input" type="number" min="-180" max="180" step="0.5" :value="planTurnDeg" @change="turnPlan(Number(val($event)))" /></label>
         <input ref="planInput" type="file" accept="image/png,image/jpeg,image/webp" hidden @change="onPlanFile" />
         <div v-if="planLockText && !planBusy" class="hero-muted">{{ planLockText }}</div>
-        <div v-if="floorPlan" class="hero-muted">{{ scaleText(floorPlan) }}</div>
-        <div v-if="measuring" class="hero-editor__measurebox" role="group" aria-label="Set scale">
-          <span>{{ measure.b ? "Real length between the two points, in metres:" : measure.a ? "Click the other end." : "Click one end of a length you know on the plan (a wall, a doorway)." }}</span>
-          <div class="hero-editor__actions">
-            <input v-if="measure.b" v-model.number="measureM" type="number" min="0.01" step="0.01" class="hero-input hero-editor__measurein" aria-label="Real length in metres" placeholder="e.g. 12.5" @keydown.enter.prevent="applyMeasure" />
-            <button v-if="measure.b" type="button" class="hero-editor__act" @click="applyMeasure">Apply</button>
-            <button type="button" class="hero-editor__act" @click="cancelMeasure">Cancel</button>
-          </div>
-        </div>
+        <div v-if="floorPlan" class="hero-muted">{{ scaleText(placedPlan) }}{{ state.plans[String(floor)] ? " · not saved yet" : "" }}</div>
 
+        <!-- ---- building file ---- -->
         <div class="hero-aside__title hero-editor__asidetitle">Building file · HERO Fleet Core</div>
         <div v-if="map?.rmf" class="hero-muted">{{ rmfLine(map.rmf) }}</div>
         <div class="hero-editor__actions">
           <button v-if="fleetSite" type="button" class="hero-editor__act" :disabled="planBusy || saving || state.dirty" :title="state.dirty ? 'Save your drawing first.' : ''" @click="importFleet">Import from HERO Fleet Core</button>
+          <button type="button" class="hero-editor__act" :disabled="planBusy || saving" @click="pickFile('building')">Import building file</button>
+          <button type="button" class="hero-editor__act" :disabled="planBusy || saving" @click="pickFile('nav')">Import route map into {{ graphName(graph) }}</button>
           <button type="button" class="hero-editor__act" :disabled="!map?._id" @click="download('building')">Download building file</button>
-          <button v-for="g in graphs" :key="`g${g}`" type="button" class="hero-editor__act" @click="download('nav', g)">Download route map{{ graphs.length > 1 ? ` ${g}` : "" }}</button>
+          <button v-for="g in savedGraphs" :key="`dl${g}`" type="button" class="hero-editor__act" @click="download('nav', g)">Download route map{{ savedGraphs.length > 1 ? ` ${g}` : "" }}</button>
         </div>
-        <div class="hero-editor__note">The plan image comes from the robot; everything here is drawn on top of it. Keyboard: Tab to the plan; arrow keys move the cursor (or nudge what is selected, Shift for 1 m); Enter places or selects; Delete removes; Esc clears the selection.</div>
+        <input ref="fileInput" type="file" accept=".yaml,.yml,.json,application/x-yaml,text/yaml,application/json" hidden @change="onBuildingFile" />
+        <div class="hero-editor__note">The plan image comes from the robot; everything here is drawn on top of it. Keyboard: Tab to the plan; arrow keys move the cursor (or nudge what is selected, Shift for 1 m); Enter places or selects; Delete removes; Esc clears the selection. Wheel zooms; right- or middle-drag pans.</div>
       </aside>
     </div>
   </div>
@@ -150,53 +369,69 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { floorName, MAP_TOOLS } from "../../utils/robot-display";
 import useFloorPlanImages from "../../composables/useFloorPlanImages";
+import { compressSize, exportFileName, fleetImportBody, floorPlanFileProblem, floorPlanFor, FLOOR_PLAN_MAX_BYTES, rmfGraphs, rmfLine, scaleText } from "../../utils/robot-floorplan";
 import {
-  compressSize,
-  exportFileName,
-  fitPlan,
-  fleetImportBody,
-  floorPlanFileProblem,
-  floorPlanFor,
-  FLOOR_PLAN_MAX_BYTES,
-  planBox,
-  replacePlacement,
-  rescaleByMeasure,
-  rmfGraphs,
-  rmfLine,
-  scaleText,
-  type TPlanPoint,
-} from "../../utils/robot-floorplan";
+  alignFloor,
+  cabinDoorOn,
+  cabinDoorSide,
+  DOOR_TYPE_LABEL,
+  DOOR_TYPES,
+  editorModelFromMap,
+  fitFrame,
+  fitPlanIn,
+  frameForMap,
+  growFrame,
+  LIFT_DOOR_TYPE_LABEL,
+  LIFT_DOOR_TYPES,
+  LIFT_SIDE_LABEL,
+  LIFT_SIDES,
+  measureScale,
+  planBoxIn,
+  placementInWorld,
+  rmfFromEditor,
+  worldPlans,
+  transformPlacement,
+  type TCabinDoor,
+  type TEditorModel,
+  type TLiftSide,
+} from "../../utils/rmf-editor";
 import {
   DEFAULT_GRID_M,
-  doorSwing,
+  doorGlyph,
   editorProblem,
   editorReduce,
   emptyEditor,
   GRID_STEPS_M,
-  gridShares,
   hitShape,
+  liftGeom,
+  LIFT_MAX_M,
+  LIFT_MIN_M,
   NUDGE_BIG_M,
   NUDGE_M,
-  PLAN_H_M,
-  PLAN_W_M,
+  ROUTE_TOOLS,
+  routeProblems,
   saveErrorText,
   savedNotice,
   shapeAnchor,
   shapeBox,
   shapeHandles,
-  shapesFromMap,
   shapesInRect,
   shapesOnFloor,
   shapeTitle,
+  shareToWorld,
   snapToGrid,
-  toMapBody,
   TOOL_HINTS,
   turnCentre,
+  worldToShare,
+  type TCheck,
   type TDragOp,
   type TEditorAction,
   type TEditorShape,
   type TEditorState,
   type TEditorTool,
+  type TFrame,
+  type TPlanPlacement,
+  type TRouteGraph,
   type TShapeHandle,
 } from "../../utils/robot-building";
 
@@ -218,15 +453,29 @@ const props = withDefaults(
   { map: null, siteName: "", ownerRobotId: "", startFloor: null, site: "", fleetSite: false },
 );
 const emit = defineEmits<{ saved: [] }>();
-const { createBuildingMap, updateBuildingMap, saveFloorPlan, removeFloorPlan, exportBuildingMap, getFleetCoreBuildingData } = useRobots();
+const { createBuildingMap, updateBuildingMap, saveFloorPlan, removeFloorPlan, exportBuildingMap, getFleetCoreBuildingData, importBuildingFile } = useRobots();
 
-const state = ref<TEditorState>(emptyEditor(shapesFromMap(props.map)));
+/* ---- the model: shapes + frame + graphs, and the floors' names / heights ---- */
+const storedPlans = () => worldPlans(props.map);
+const levels = ref<TEditorModel["levels"]>({});
+const meta = ref<{ referenceLevel?: string; source?: string }>({});
+function modelFrom(map: Record<string, any> | null | undefined) {
+  const m = editorModelFromMap(map, frameForMap(map, storedPlans()));
+  levels.value = m.levels;
+  meta.value = { referenceLevel: m.referenceLevel, source: m.source };
+  return m;
+}
+const first = modelFrom(props.map);
+const state = ref<TEditorState>(emptyEditor(first.shapes, { frame: first.frame, graphs: first.graphs }));
 const dispatch = (a: TEditorAction) => (state.value = editorReduce(state.value, a));
-/** A newer map (after our own save, or another tab's) replaces the shapes only while nothing is unsaved. */
+const hasRmf = computed(() => !!props.map?.rmf?.levels?.length || state.value.shapes.some((s) => s.kind === "lane" || s.kind === "waypoint"));
+/** A newer map (after our own save, or another tab's) replaces the drawing only while nothing is unsaved. */
 watch(
   () => props.map,
   (m) => {
-    if (!state.value.dirty && !state.value.drag) state.value = { ...emptyEditor(shapesFromMap(m)), notice: state.value.notice };
+    if (state.value.dirty || state.value.drag) return;
+    const next = modelFrom(m);
+    dispatch({ type: "loadAll", shapes: next.shapes, frame: next.frame, graphs: next.graphs, notice: state.value.notice });
   },
 );
 
@@ -234,16 +483,38 @@ const tool = ref<TEditorTool>("wall");
 const zoneName = ref("");
 const snapOn = ref(true);
 const gridM = ref(DEFAULT_GRID_M);
-const gridStyle = computed(() => {
-  const g = gridShares(gridM.value);
-  return { backgroundSize: `${g.x}% ${g.y}%` };
+const graph = ref<number>(first.graphs[0]?.idx ?? 0);
+const showOtherGraphs = ref(true);
+const graphOptions = computed<TRouteGraph[]>(() => {
+  const list = [...state.value.graphs];
+  if (!list.some((g) => g.idx === graph.value)) list.push({ idx: graph.value, name: `Graph ${graph.value}`, brands: [] });
+  return list.sort((a, b) => a.idx - b.idx);
+});
+const graphName = (idx: number) => graphOptions.value.find((g) => g.idx === idx)?.name ?? `Graph ${idx}`;
+
+const allFloors = computed(() => {
+  const set = new Set<number>(props.floors);
+  for (const k of Object.keys(levels.value)) set.add(Number(k));
+  for (const s of state.value.shapes) if (s.kind !== "lift") set.add(s.floorNo);
+  return [...set].filter(Number.isFinite).sort((a, b) => a - b);
 });
 const floor = ref<number>(props.startFloor !== null && props.floors.includes(props.startFloor) ? props.startFloor : props.floors[0] ?? 1);
-watch(() => props.floors, (f) => {
+watch(allFloors, (f) => {
   if (!f.includes(floor.value)) floor.value = f[0] ?? 1;
 });
-watch(floor, () => dispatch({ type: "select", ids: [] }));
-const visible = computed(() => shapesOnFloor(state.value.shapes, floor.value));
+watch(floor, () => {
+  // Changing floor clears the selection but keeps what the editor just said (an import's result).
+  const said = state.value.notice;
+  dispatch({ type: "select", ids: [] });
+  dispatch({ type: "laneEnd" });
+  if (said) state.value = { ...state.value, notice: said };
+  alignTo.value = allFloors.value.find((f) => f !== floor.value) ?? floor.value;
+});
+const alignTo = ref<number>(allFloors.value.find((f) => f !== floor.value) ?? floor.value);
+
+const laneGraph = (s: TEditorShape) => Number(s.meta?.graphIdx ?? 0);
+const visible = computed(() => shapesOnFloor(state.value.shapes, floor.value).filter((s) => s.kind !== "lane" || showOtherGraphs.value || laneGraph(s) === graph.value));
+const listed = computed(() => visible.value.slice(0, 400));
 const isSel = (id: string) => state.value.selected.includes(id);
 const selectedShapes = computed(() => visible.value.filter((s) => isSel(s.id)));
 const single = computed(() => (selectedShapes.value.length === 1 ? selectedShapes.value[0]! : null));
@@ -251,62 +522,120 @@ const selectedZone = computed(() => (single.value?.kind === "zone" ? single.valu
 watch(selectedZone, (z) => {
   if (z) zoneName.value = z.name ?? "";
 });
-const handles = computed<TShapeHandle[]>(() => (single.value ? shapeHandles(single.value) : []));
+const frameSize = computed(() => ({ w: state.value.frame.w, h: state.value.frame.h }));
+const handles = computed<TShapeHandle[]>(() => (single.value ? shapeHandles(single.value, frameSize.value) : []));
 const rotateLine = computed(() => {
   const r = handles.value.find((h) => h.kind === "rotate");
   if (!r || !single.value) return null;
   const c = turnCentre(single.value);
   return { x1: c.x, y1: c.y, x2: r.x, y2: r.y };
 });
-const swings = computed(() => Object.fromEntries(visible.value.filter((s) => s.kind === "door").map((s) => [s.id, doorSwing(s)])));
+const glyphs = computed(() => Object.fromEntries(visible.value.filter((s) => s.kind === "door").map((s) => [s.id, doorGlyph(s, frameSize.value)])));
+const checks = computed(() => routeProblems(state.value));
+const hint = computed(() => (tool.value === "lane" && state.value.laneFrom ? "Click the next waypoint (or empty space) to add a lane. Esc or click this waypoint again to stop." : tool.value === "measure" && state.value.measureFrom ? "Click the other end." : TOOL_HINTS[tool.value]));
+const frameText = computed(() => `${state.value.frame.w.toFixed(0)} × ${state.value.frame.h.toFixed(0)} m`);
 
 function pickTool(id: TEditorTool) {
   tool.value = id;
   dispatch({ type: "tool", tool: id });
 }
 
-/* ---- pointer: mouse, touch and pen alike ---- */
+/* ---- view: the canvas fits the viewport with the frame's real shape; wheel zooms, right/middle drag pans ---- */
 const plan = ref<HTMLElement | null>(null);
+const canvas = ref<HTMLElement | null>(null);
+const box = ref({ w: 800, h: 520 });
+const view = ref({ zoom: 1, panX: 0, panY: 0 });
+let ro: ResizeObserver | null = null;
+onMounted(() => {
+  if (!plan.value || typeof ResizeObserver === "undefined") return;
+  ro = new ResizeObserver(([e]) => {
+    if (e) box.value = { w: e.contentRect.width, h: e.contentRect.height };
+  });
+  ro.observe(plan.value);
+});
+onBeforeUnmount(() => ro?.disconnect());
+const canvasStyle = computed(() => {
+  const f = state.value.frame;
+  const s0 = Math.min(box.value.w / f.w, box.value.h / f.h) * 0.96;
+  const w = f.w * s0 * view.value.zoom;
+  const h = f.h * s0 * view.value.zoom;
+  const g = { x: (gridM.value / f.w) * 100, y: (gridM.value / f.h) * 100 };
+  return {
+    width: `${w}px`,
+    height: `${h}px`,
+    left: `${(box.value.w - w) / 2 + view.value.panX}px`,
+    top: `${(box.value.h - h) / 2 + view.value.panY}px`,
+    backgroundSize: `${g.x}% ${g.y}%`,
+  };
+});
+function zoomBy(k: number, at?: { x: number; y: number }) {
+  const z0 = view.value.zoom;
+  const z = Math.min(40, Math.max(0.5, +(z0 * k).toFixed(3)));
+  if (z === z0) return;
+  // Keep the point under the pointer still.
+  const p = at ?? { x: box.value.w / 2, y: box.value.h / 2 };
+  const cx = box.value.w / 2 + view.value.panX;
+  const cy = box.value.h / 2 + view.value.panY;
+  view.value = { zoom: z, panX: view.value.panX - (p.x - cx) * (z / z0 - 1), panY: view.value.panY - (p.y - cy) * (z / z0 - 1) };
+}
+const resetView = () => (view.value = { zoom: 1, panX: 0, panY: 0 });
+function onWheel(e: WheelEvent) {
+  const r = plan.value!.getBoundingClientRect();
+  zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15, { x: e.clientX - r.left, y: e.clientY - r.top });
+}
+
+/* ---- pointer: mouse, touch and pen alike ---- */
 const cursor = ref({ x: 50, y: 50 });
 const keyboard = ref(false);
 const marquee = ref<{ x: number; y: number; w: number; h: number } | null>(null);
 const hoverId = ref<string | null>(null);
-type TPress = { pointer: number; x: number; y: number; cx: number; cy: number; mode: "drag" | "marquee" | "click"; op?: TDragOp; shift: boolean; started: boolean };
+const pointerAt = ref<{ x: number; y: number } | null>(null);
+type TPress = { pointer: number; x: number; y: number; cx: number; cy: number; mode: "drag" | "marquee" | "click" | "pan"; op?: TDragOp; shift: boolean; started: boolean; pan0?: { x: number; y: number } };
 let press: TPress | null = null;
 /** The cursor a drag in progress shows: move, rotate or a resize direction. */
 const dragKind = ref("");
 
 function at(e: { clientX: number; clientY: number }) {
-  const r = plan.value!.getBoundingClientRect();
+  const r = (canvas.value ?? plan.value)!.getBoundingClientRect();
   const c = (v: number) => Math.max(0, Math.min(100, v));
   return { x: c(((e.clientX - r.left) / r.width) * 100), y: c(((e.clientY - r.top) / r.height) * 100) };
 }
 /** How near counts as "on" a line or corner: 10 screen pixels (16 for a finger), in metres. */
 function tolerance(pointerType = "mouse") {
-  const r = plan.value?.getBoundingClientRect();
+  const r = canvas.value?.getBoundingClientRect();
   if (!r?.width) return 0.4;
-  return Math.max(PLAN_W_M / r.width, PLAN_H_M / r.height) * (pointerType === "touch" ? 16 : 10);
+  return (state.value.frame.w / r.width) * (pointerType === "touch" ? 16 : 10);
 }
 
 function startPress(e: PointerEvent, mode: TPress["mode"], op?: TDragOp) {
   const p = at(e);
-  press = { pointer: e.pointerId, x: p.x, y: p.y, cx: e.clientX, cy: e.clientY, mode, op, shift: e.shiftKey, started: false };
+  press = { pointer: e.pointerId, x: p.x, y: p.y, cx: e.clientX, cy: e.clientY, mode, op, shift: e.shiftKey, started: false, pan0: { x: view.value.panX, y: view.value.panY } };
   plan.value?.setPointerCapture?.(e.pointerId);
 }
 
 function onPlanDown(e: PointerEvent) {
-  if (e.pointerType === "mouse" && e.button !== 0) return;
   plan.value?.focus({ preventScroll: true });
+  if (e.pointerType === "mouse" && (e.button === 1 || e.button === 2)) return startPress(e, "pan");
+  if (e.pointerType === "mouse" && e.button !== 0) return;
   keyboard.value = false;
   const p = at(e);
-  // Set scale: the two clicks are the measured length, not drawing.
-  if (measuring.value) return void measureClick(p);
-  const target = hitShape(visible.value, p, tolerance(e.pointerType));
+  const f = frameSize.value;
+  const target = hitShape(visible.value, p, tolerance(e.pointerType), f);
   const t = tool.value;
+  const snapped = snapOn.value && !e.shiftKey ? snapToGrid(p, gridM.value, f) : p;
   if (t === "delete") {
     if (target) dispatch({ type: "pick", id: target.id, tool: "delete" });
     return;
   }
+  if (t === "lane") {
+    e.preventDefault();
+    const hit = hitShape(visible.value.filter((s) => s.kind === "waypoint"), p, tolerance(e.pointerType), f);
+    return void dispatch({ type: "laneClick", floorNo: floor.value, x: snapped.x, y: snapped.y, graphIdx: graph.value, hitId: hit?.id ?? null });
+  }
+  if (t === "measure") {
+    e.preventDefault();
+    return void dispatch({ type: "measureClick", floorNo: floor.value, ...snapped });
+  }
   if (t === "zone" && target?.kind === "zone" && zoneName.value.trim() && !isSel(target.id)) {
     dispatch({ type: "pick", id: target.id, tool: "zone", zoneName: zoneName.value });
     return;
@@ -323,8 +652,7 @@ function onPlanDown(e: PointerEvent) {
   }
   // A drawing tool: place (on the grid while snapping), and select the new shape.
   e.preventDefault();
-  const q = snapOn.value && !e.shiftKey ? snapToGrid(p, gridM.value) : p;
-  dispatch({ type: "place", tool: t, floorNo: floor.value, x: Math.min(98, q.x), y: Math.min(98, q.y), zoneName: zoneName.value, floors: props.floors });
+  dispatch({ type: "place", tool: t, floorNo: floor.value, x: Math.min(98, snapped.x), y: Math.min(98, snapped.y), zoneName: zoneName.value, floors: props.floors });
 }
 
 function onHandleDown(e: PointerEvent, h: TShapeHandle) {
@@ -339,12 +667,17 @@ function onHandleDown(e: PointerEvent, h: TShapeHandle) {
 }
 
 function onPointerMove(e: PointerEvent) {
+  const p = at(e);
+  pointerAt.value = p;
   if (!press) {
-    if (e.pointerType === "mouse") hoverId.value = hitShape(visible.value, at(e), tolerance())?.id ?? null;
+    if (e.pointerType === "mouse") hoverId.value = hitShape(visible.value, p, tolerance(), frameSize.value)?.id ?? null;
     return;
   }
   if (e.pointerId !== press.pointer) return;
-  const p = at(e);
+  if (press.mode === "pan") {
+    view.value = { ...view.value, panX: press.pan0!.x + e.clientX - press.cx, panY: press.pan0!.y + e.clientY - press.cy };
+    return;
+  }
   if (!press.started) {
     if (Math.hypot(e.clientX - press.cx, e.clientY - press.cy) < 3) return;
     press.started = true;
@@ -385,14 +718,14 @@ function onPointerCancel() {
 
 /**
  * Double-click on a selected zone: on a corner removes it, on an edge adds a
- * corner there. (The plan holds the pointer during a press, so the double
- * click always arrives here, even over a handle.)
+ * corner there. With the lane tool a double-click ends the chain.
  */
 function onDoubleClick(e: MouseEvent) {
+  if (tool.value === "lane") return void dispatch({ type: "laneEnd" });
   const z = selectedZone.value;
   if (!z || tool.value === "delete") return;
   const p = at(e);
-  const r = plan.value!.getBoundingClientRect();
+  const r = canvas.value!.getBoundingClientRect();
   const reach = 14; // px
   const corner = z.points.findIndex((q) => Math.hypot(((q.x - p.x) / 100) * r.width, ((q.y - p.y) / 100) * r.height) <= reach);
   if (corner >= 0) dispatch({ type: "removeVertex", id: z.id, index: corner });
@@ -403,10 +736,11 @@ function onDoubleClick(e: MouseEvent) {
 function addCorner() {
   const z = selectedZone.value;
   if (!z) return;
+  const f = state.value.frame;
   let best = { len: -1, x: 0, y: 0 };
   z.points.forEach((a, i) => {
     const b = z.points[(i + 1) % z.points.length]!;
-    const len = Math.hypot((b.x - a.x) * PLAN_W_M, (b.y - a.y) * PLAN_H_M);
+    const len = Math.hypot((b.x - a.x) * f.w, (b.y - a.y) * f.h);
     if (len > best.len) best = { len, x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
   });
   dispatch({ type: "addVertex", id: z.id, x: best.x, y: best.y });
@@ -422,6 +756,15 @@ function onRow(e: MouseEvent, s: TEditorShape) {
   dispatch({ type: "select", ids: [s.id], mode: e.shiftKey ? "toggle" : "replace" });
 }
 
+function showCheck(c: TCheck) {
+  const s = state.value.shapes.find((x) => c.ids.includes(x.id));
+  if (!s) return;
+  if (s.kind !== "lift") floor.value = s.floorNo;
+  pickTool("move");
+  dispatch({ type: "select", ids: c.ids });
+}
+const sentence = (t: string) => t.charAt(0).toUpperCase() + t.slice(1);
+
 const handleCursor = (h: string) => (h === "n" || h === "s" ? "ns" : h === "e" || h === "w" ? "ew" : h === "nw" || h === "se" ? "nwse" : "nesw");
 /** The plan's cursor: what a drag is doing, else what a press would do here. */
 const planCursor = computed(() => {
@@ -434,9 +777,11 @@ const planCursor = computed(() => {
 
 /* ---- keyboard ---- */
 function act(x: number, y: number, shift = false) {
-  const target = hitShape(visible.value, { x, y }, tolerance());
+  const target = hitShape(visible.value, { x, y }, tolerance(), frameSize.value);
   const t = tool.value;
   if (t === "delete") return void (target && dispatch({ type: "pick", id: target.id, tool: "delete" }));
+  if (t === "lane") return void dispatch({ type: "laneClick", floorNo: floor.value, x, y, graphIdx: graph.value, hitId: target?.kind === "waypoint" ? target.id : null });
+  if (t === "measure") return void dispatch({ type: "measureClick", floorNo: floor.value, x, y });
   if (t === "zone" && target?.kind === "zone" && zoneName.value.trim() && !isSel(target.id)) {
     return void dispatch({ type: "pick", id: target.id, tool: "zone", zoneName: zoneName.value });
   }
@@ -451,6 +796,7 @@ function onKey(e: KeyboardEvent) {
   const k = e.key;
   if (k === "Escape") {
     if (state.value.drag) onPointerCancel();
+    else if (state.value.laneFrom || state.value.measureFrom) state.value = { ...state.value, laneFrom: null, measureFrom: null };
     else if (state.value.selected.length) dispatch({ type: "select", ids: [] });
     else keyboard.value = false;
     return;
@@ -465,6 +811,8 @@ function onKey(e: KeyboardEvent) {
   }
   if (!e.ctrlKey && !e.metaKey && !e.altKey && (k === "f" || k === "F")) return void dispatch({ type: "flip" });
   if (!e.ctrlKey && !e.metaKey && !e.altKey && (k === "r" || k === "R")) return void dispatch({ type: "turn" });
+  if (!e.ctrlKey && !e.metaKey && (k === "+" || k === "=")) return void zoomBy(1.25);
+  if (!e.ctrlKey && !e.metaKey && (k === "-" || k === "_")) return void zoomBy(1 / 1.25);
   const dir: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
   if (dir[k]) {
     e.preventDefault();
@@ -498,11 +846,248 @@ function onUndoKey(e: KeyboardEvent) {
 onMounted(() => window.addEventListener("keydown", onUndoKey));
 onBeforeUnmount(() => window.removeEventListener("keydown", onUndoKey));
 
+/* ---- side panel edits ---- */
+const val = (e: Event) => (e.target as HTMLInputElement | HTMLSelectElement).value;
+const clampNum = (v: unknown, lo: number, hi: number, fallback: number) => {
+  const n = Number(v);
+  return Number.isFinite(n) ? Math.min(hi, Math.max(lo, n)) : fallback;
+};
+function setMeta(key: string, value: unknown, field?: string) {
+  if (!single.value) return;
+  dispatch({ type: "setProps", id: single.value.id, meta: { [key]: value }, field });
+}
+function setName(name: string) {
+  if (single.value) dispatch({ type: "setProps", id: single.value.id, name, field: "name" });
+}
+
+const WP_FLAGS = [
+  { key: "is_charger", label: "Charger" },
+  { key: "is_parking_spot", label: "Parking spot" },
+  { key: "is_holding_point", label: "Holding point (robots may wait here)" },
+  { key: "is_passthrough_point", label: "Pass-through only (robots never stop)" },
+  { key: "is_cleaning_zone", label: "Cleaning zone" },
+] as const;
+const WP_TEXTS = [
+  { key: "dock_name", label: "Dock name", hint: "needed for a charger" },
+  { key: "spawn_robot_name", label: "Robot starts here - name", hint: "simulation" },
+  { key: "spawn_robot_type", label: "Robot starts here - model", hint: "simulation" },
+  { key: "pickup_dispenser", label: "Pick-up point (dispenser)", hint: "" },
+  { key: "dropoff_ingestor", label: "Drop-off point (ingestor)", hint: "" },
+  { key: "mutex", label: "Shared-space group", hint: "one robot at a time" },
+] as const;
+const wpParams = computed<Record<string, any>>(() => (single.value?.meta?.params ?? {}) as Record<string, any>);
+function setParam(key: string, value: unknown, typing = false) {
+  if (!single.value) return;
+  const params = { ...wpParams.value };
+  if (value === undefined || value === "" || value === false) delete params[key];
+  else params[key] = value;
+  dispatch({ type: "setProps", id: single.value.id, meta: { params }, field: typing ? `p:${key}` : undefined });
+}
+const wpKind = (s: TEditorShape) => {
+  const p = (s.meta?.params ?? {}) as Record<string, unknown>;
+  return p.is_charger ? "charger" : p.is_parking_spot ? "parking" : p.is_holding_point ? "holding" : "point";
+};
+const laneCountText = computed(() => {
+  const s = single.value;
+  if (!s) return "";
+  const n = state.value.shapes.filter((l) => l.kind === "lane" && (l.meta?.from === s.id || l.meta?.to === s.id)).length;
+  return n ? `On ${n} lane${n === 1 ? "" : "s"}.` : "Not on any lane yet - use the Lane tool to connect it.";
+});
+const laneEnds = computed(() => {
+  const s = single.value;
+  if (!s || s.kind !== "lane") return "";
+  const nm = (id: unknown) => state.value.shapes.find((x) => x.id === id)?.name || "waypoint";
+  return `${nm(s.meta?.from)} → ${nm(s.meta?.to)}`;
+});
+function reverseLane() {
+  const s = single.value;
+  if (s?.kind === "lane") {
+    const o = s.meta?.orientation;
+    dispatch({ type: "setProps", id: s.id, meta: { from: s.meta?.to, to: s.meta?.from, ...(o ? { orientation: o === "forward" ? "backward" : "forward" } : {}) } });
+  }
+}
+
+/* lift */
+const liftSize = computed(() => (single.value?.kind === "lift" ? liftGeom(single.value, frameSize.value) : { w: 0, d: 0, yaw: 0, c: { x: 0, y: 0 } }));
+const liftAngle = computed(() => Math.round(((Number(single.value?.meta?.yawRad ?? 0) * 180) / Math.PI) * 10) / 10);
+const liftDoors = computed<TCabinDoor[]>(() => (single.value?.meta?.doors ?? []) as TCabinDoor[]);
+function setLiftSize(w: number | null, d: number | null) {
+  const s = single.value;
+  if (s?.kind !== "lift") return;
+  const f = state.value.frame;
+  const g = liftGeom(s, f);
+  const nw = w === null ? g.w : clampNum(w, LIFT_MIN_M, LIFT_MAX_M, g.w);
+  const nd = d === null ? g.d : clampNum(d, LIFT_MIN_M, LIFT_MAX_M, g.d);
+  const b = shapeBox(s);
+  const cx = b.x + b.w / 2;
+  const cy = b.y + b.h / 2;
+  const hw = (nw / f.w) * 50;
+  const hd = (nd / f.h) * 50;
+  const points = [{ x: cx - hw, y: cy - hd }, { x: cx + hw, y: cy - hd }, { x: cx + hw, y: cy + hd }, { x: cx - hw, y: cy + hd }].map((p) => ({ x: Math.round(p.x * 100) / 100, y: Math.round(p.y * 100) / 100 }));
+  // Cabin doors stay on their side of the resized cabin.
+  const doors = liftDoors.value.map((dr) => cabinDoorOn(cabinDoorSide(dr, g.w, g.d), nw, nd, dr));
+  dispatch({ type: "setShapes", shapes: state.value.shapes.map((x) => (x.id === s.id ? { ...x, points, meta: { ...(x.meta ?? {}), doors } } : x)) });
+}
+function setLiftAngle(deg: number) {
+  if (!Number.isFinite(deg)) return;
+  setMeta("yawRad", Math.round((((((deg + 180) % 360) + 360) % 360) - 180) * (Math.PI / 180) * 10000) / 10000);
+}
+function setCabinDoor(i: number, change: { side?: string; type?: string; widthM?: number }) {
+  const doors = liftDoors.value.map((d, k) => {
+    if (k !== i) return d;
+    const side = (change.side ?? cabinDoorSide(d, liftSize.value.w, liftSize.value.d)) as TLiftSide;
+    return cabinDoorOn(side, liftSize.value.w, liftSize.value.d, { ...d, ...(change.type ? { type: change.type as TCabinDoor["type"] } : {}), ...(change.widthM ? { widthM: change.widthM } : {}) });
+  });
+  setMeta("doors", doors);
+}
+function renameCabinDoor(i: number, name: string) {
+  const n = name.trim().slice(0, 60);
+  const old = liftDoors.value[i]?.name;
+  if (!n || !old || liftDoors.value.some((d, k) => k !== i && d.name === n)) return;
+  const doors = liftDoors.value.map((d, k) => (k === i ? { ...d, name: n } : d));
+  const levelDoors = Object.fromEntries(Object.entries((single.value?.meta?.levelDoors ?? {}) as Record<string, string[]>).map(([fl, list]) => [fl, list.map((x) => (x === old ? n : x))]));
+  if (single.value) dispatch({ type: "setProps", id: single.value.id, meta: { doors, levelDoors } });
+}
+function addCabinDoor() {
+  const used = new Set(liftDoors.value.map((d) => cabinDoorSide(d, liftSize.value.w, liftSize.value.d)));
+  const side = LIFT_SIDES.find((s) => !used.has(s)) ?? "back";
+  let name: string = side;
+  for (let n = 2; liftDoors.value.some((d) => d.name === name); n++) name = `${side}${n}`;
+  setMeta("doors", [...liftDoors.value, cabinDoorOn(side, liftSize.value.w, liftSize.value.d, { name })]);
+}
+function removeCabinDoor(i: number) {
+  const gone = liftDoors.value[i]?.name;
+  const doors = liftDoors.value.filter((_, k) => k !== i);
+  const levelDoors = Object.fromEntries(Object.entries((single.value?.meta?.levelDoors ?? {}) as Record<string, string[]>).map(([fl, list]) => [fl, list.filter((x) => x !== gone)]));
+  if (single.value) dispatch({ type: "setProps", id: single.value.id, meta: { doors, levelDoors } });
+}
+const doorOpensOn = (fl: number, name: string) => {
+  const list = (single.value?.meta?.levelDoors ?? {})[String(fl)];
+  return (single.value?.floors ?? []).includes(fl) && (Array.isArray(list) ? list.includes(name) : true);
+};
+function toggleLiftFloor(fl: number) {
+  const s = single.value;
+  if (s?.kind !== "lift") return;
+  const has = (s.floors ?? []).includes(fl);
+  const floors = has ? (s.floors ?? []).filter((x) => x !== fl) : [...(s.floors ?? []), fl];
+  const levelDoors = { ...((s.meta?.levelDoors ?? {}) as Record<string, string[]>) };
+  if (has) delete levelDoors[String(fl)];
+  else levelDoors[String(fl)] = liftDoors.value.slice(0, 1).map((d) => d.name);
+  dispatch({ type: "setProps", id: s.id, floors, meta: { levelDoors } });
+}
+function toggleLevelDoor(fl: number, name: string) {
+  const s = single.value;
+  if (s?.kind !== "lift") return;
+  const all = liftDoors.value.map((d) => d.name);
+  const cur = ((s.meta?.levelDoors ?? {})[String(fl)] as string[] | undefined) ?? all;
+  const next = cur.includes(name) ? cur.filter((x) => x !== name) : [...cur, name];
+  setMeta("levelDoors", { ...((s.meta?.levelDoors ?? {}) as Record<string, string[]>), [String(fl)]: next });
+}
+/** The cabin doors drawn on the current floor: solid where they open here, faint where they stay shut. */
+const cabinDoors = computed(() => {
+  const f = state.value.frame;
+  const out: Array<{ key: string; open: boolean; style: Record<string, string>; title: string }> = [];
+  for (const s of visible.value.filter((x) => x.kind === "lift")) {
+    const g = liftGeom(s, f);
+    const served = (s.floors ?? []).includes(floor.value);
+    const list = (s.meta?.levelDoors ?? {})[String(floor.value)] as string[] | undefined;
+    for (const d of (s.meta?.doors ?? []) as TCabinDoor[]) {
+      // Cabin frame (y up) -> screen metres (y down) turned by the shaft's angle.
+      const lx = d.x;
+      const ly = -d.y;
+      const a = -g.yaw;
+      const p = { x: g.c.x + lx * Math.cos(a) - ly * Math.sin(a), y: g.c.y + lx * Math.sin(a) + ly * Math.cos(a) };
+      const open = served && (Array.isArray(list) ? list.includes(d.name) : true);
+      out.push({
+        key: `${s.id}-${d.name}`,
+        open,
+        title: `${s.meta?.name ?? "Lift"} · cabin door ${d.name}${open ? " opens here" : " stays shut here"}`,
+        style: {
+          left: `${(p.x / f.w) * 100}%`,
+          top: `${(p.y / f.h) * 100}%`,
+          width: `${(d.widthM / f.w) * 100}%`,
+          transform: `translate(-50%, -50%) rotate(${(-(g.yaw + d.axisYawRad) * 180) / Math.PI}deg)`,
+        },
+      });
+    }
+  }
+  return out;
+});
+
+/* graphs */
+const laneCount = (idx: number) => state.value.shapes.filter((s) => s.kind === "lane" && laneGraph(s) === idx).length;
+const setGraphs = (graphs: TRouteGraph[]) => dispatch({ type: "graphs", graphs });
+function renameGraph(idx: number, name: string) {
+  const n = name.trim().slice(0, 60) || `Graph ${idx}`;
+  setGraphs(graphOptions.value.map((g) => (g.idx === idx ? { ...g, name: n } : g)));
+}
+function setGraphBrands(idx: number, text: string) {
+  const brands = [...new Set(text.split(",").map((b) => b.trim().toLowerCase().slice(0, 60)).filter(Boolean))].slice(0, 20);
+  setGraphs(graphOptions.value.map((g) => (g.idx === idx ? { ...g, brands } : g)));
+}
+function addGraph() {
+  const idx = [...Array(9).keys()].find((i) => !graphOptions.value.some((g) => g.idx === i));
+  if (idx === undefined) return;
+  setGraphs([...graphOptions.value, { idx, name: `Graph ${idx}`, brands: [] }]);
+  graph.value = idx;
+}
+function removeGraph(idx: number) {
+  const n = laneCount(idx);
+  if (n && !window.confirm(`Remove ${graphName(idx)} and its ${n} lane${n === 1 ? "" : "s"}?`)) return;
+  setGraphs(graphOptions.value.filter((g) => g.idx !== idx));
+  if (graph.value === idx) graph.value = graphOptions.value.find((g) => g.idx !== idx)?.idx ?? 0;
+}
+
+/* this floor */
+const levelMeta = (fl: number) => levels.value[String(fl)] ?? { name: floorName(fl), elevationM: fl * 4, floorPolys: [], holePolys: [] };
+const levelNameOf = (fl: number) => levelMeta(fl).name || floorName(fl);
+function setLevel(key: "name" | "elevationM", value: string | number) {
+  const cur = levelMeta(floor.value);
+  if (key === "name") {
+    const n = String(value).trim().slice(0, 60);
+    if (!n || /^[.$]/.test(n)) return void dispatch({ type: "notice", text: "A floor name cannot be empty or start with . or $.", ok: false });
+    if (allFloors.value.some((f) => f !== floor.value && levelNameOf(f) === n)) return void dispatch({ type: "notice", text: `Another floor is already called "${n}".`, ok: false });
+  }
+  if (key === "name" && cur.name && cur.name !== value) {
+    // Lifts name their reference / first / lowest / highest floor: follow the rename.
+    const from = cur.name;
+    const shapes = state.value.shapes.map((s) => {
+      if (s.kind !== "lift" || !s.meta) return s;
+      const m = { ...s.meta };
+      for (const k of ["referenceFloor", "initialFloor", "lowestFloor", "highestFloor"]) if (m[k] === from) m[k] = value;
+      return { ...s, meta: m };
+    });
+    state.value = { ...state.value, shapes };
+  }
+  levels.value = { ...levels.value, [String(floor.value)]: { ...cur, [key]: value } };
+  state.value = { ...state.value, dirty: true };
+}
+function alignNow() {
+  const r = alignFloor(state.value.shapes, state.value.frame, floor.value, alignTo.value);
+  if ("error" in r) return void dispatch({ type: "notice", text: r.error!, ok: false });
+  const placement = placedPlan.value ? transformPlacement(placedPlan.value, r.t) : null;
+  dispatch({ type: "transformFloor", floorNo: floor.value, t: r.t, placement });
+  dispatch({ type: "notice", text: `${r.text} Save to keep it.`, ok: true });
+}
+
+/* drawing area */
+function resizeFrame(w: number | null, h: number | null) {
+  const f = state.value.frame;
+  const nw = w === null ? f.w : clampNum(w, 10, 5000, f.w);
+  const nh = h === null ? f.h : clampNum(h, 10, 5000, f.h);
+  // Grows / shrinks from the top-left corner; nothing drawn moves in the building.
+  dispatch({ type: "reframe", frame: { ...f, w: nw, h: nh } });
+}
+function fitFrameNow() {
+  dispatch({ type: "reframe", frame: fitFrame(state.value.shapes, state.value.frame, planRecords.value) });
+  resetView();
+}
+
 /* ---- save ---- */
 const saving = ref(false);
 async function save() {
   const problem = editorProblem(state.value);
-  if (problem) return void dispatch({ type: "notice", text: problem, ok: false });
+  if (problem && !(problem.startsWith("Nothing to save") && Object.keys(state.value.plans).length)) return void dispatch({ type: "notice", text: problem, ok: false });
   if (!props.map?._id && !props.ownerRobotId) {
     return void dispatch({
       type: "notice",
@@ -511,12 +1096,27 @@ async function save() {
     });
   }
   const name = String(props.map?.name || `${props.siteName || "Site"} building`).slice(0, 60);
-  const body = toMapBody(state.value.shapes, name, props.map);
+  const rmf = rmfFromEditor({ shapes: state.value.shapes, frame: state.value.frame, graphs: state.value.graphs, levels: levels.value, referenceLevel: meta.value.referenceLevel, source: meta.value.source });
+  const body = { name, levels: [], doors: [], lifts: [], rmf };
   saving.value = true;
   try {
-    if (props.map?._id) await updateBuildingMap(String(props.map._id), { ...body, version: Number(props.map.version) || 1 });
+    let version = Number(props.map?.version) || 1;
+    if (props.map?._id) version = Number((await updateBuildingMap(String(props.map._id), { ...body, version }))?.version) || version + 1;
     else await createBuildingMap({ ...body, robotId: props.ownerRobotId });
-    dispatch({ type: "saved", text: savedNotice(new Date(), state.value.shapes.length, props.siteName) });
+    // Floor plans re-placed here (scale, fit, turn, line-up) follow the map save, one version at a time.
+    const failed: string[] = [];
+    if (props.map?._id) {
+      for (const [fl, placement] of Object.entries(state.value.plans)) {
+        const stored = floorPlanFor(props.map, Number(fl));
+        if (!stored) continue;
+        try {
+          version = Number((await saveFloorPlan(String(props.map._id), Number(fl), { version, widthPx: stored.widthPx, heightPx: stored.heightPx, ...placement, yawRad: placement.yawRad ?? 0, space: "world" }))?.version) || version + 1;
+        } catch {
+          failed.push(floorName(Number(fl)));
+        }
+      }
+    }
+    dispatch({ type: "saved", text: savedNotice(new Date(), state.value.shapes.length, props.siteName) + (failed.length ? ` The floor plan position of ${failed.join(", ")} was not saved - set it again.` : "") });
     emit("saved");
   } catch (e) {
     dispatch({ type: "notice", text: saveErrorText(e), ok: false });
@@ -528,15 +1128,29 @@ async function save() {
 /* ---- floor plan: stored in the map (not the public file store), per floor ---- */
 const { urls: planUrls } = useFloorPlanImages(computed(() => props.map));
 const floorPlan = computed(() => floorPlanFor(props.map, floor.value));
-// (`plan` is the plan ELEMENT, for pointer maths; this floor's image record is `floorPlan`.)
+const levelFrame = (fl: number) => ((props.map?.rmf?.levels ?? []) as Array<Record<string, any>>).find((l) => Number(l.floorNo) === fl)?.planFrame ?? null;
+/** This floor's plan as placed now, in world metres (stored, or re-placed here and not saved yet). */
+const placedPlan = computed(() => {
+  const p = floorPlan.value;
+  if (!p) return null;
+  return { ...placementInWorld(p as typeof p & { space?: string }, levelFrame(floor.value)), ...(state.value.plans[String(floor.value)] ?? {}) } as typeof p & TPlanPlacement;
+});
+/** Every floor's plan as placed now, in world metres. */
+const planRecords = computed(() => worldPlans(props.map).map((p) => ({ ...p, ...(state.value.plans[String(p.floorNo)] ?? {}) })));
+// A plan bigger than the drawing area grows the area - it is never cut off.
+watch(planRecords, (plans) => {
+  const g = growFrame(state.value.frame, plans);
+  if (g !== state.value.frame) dispatch({ type: "reframe", frame: g, auto: true });
+}, { immediate: true });
 const planUrl = computed(() => planUrls.value[floor.value] ?? "");
 const planImgStyle = computed(() => {
-  const b = planBox(floorPlan.value!);
-  return { left: `${b.left}%`, top: `${b.top}%`, width: `${b.width}%`, height: `${b.height}%` };
+  const b = planBoxIn(state.value.frame, placedPlan.value as any);
+  return { left: `${b.left}%`, top: `${b.top}%`, width: `${b.width}%`, height: `${b.height}%`, transform: `rotate(${b.rotateDeg}deg)`, transformOrigin: "0 0" };
 });
+const planTurnDeg = computed(() => Math.round((((placedPlan.value?.yawRad ?? 0) * 180) / Math.PI) * 10) / 10);
 const planBusy = ref(false);
 const planLockText = computed(() =>
-  !props.map?._id ? "Save the map once, then add a floor plan." : state.value.dirty ? "Save your drawing first, then change the floor plan." : "",
+  !props.map?._id ? "Save the map once, then add a floor plan." : state.value.dirty ? "Save your drawing first, then change the floor plan image." : "",
 );
 const planLocked = computed(() => planBusy.value || saving.value || Boolean(planLockText.value));
 const planInput = ref<HTMLInputElement | null>(null);
@@ -559,18 +1173,18 @@ const blobToDataUrl = (b: Blob) =>
 async function compressPlan(file: File) {
   const bmp = await createImageBitmap(file);
   let { width, height } = compressSize(bmp.width, bmp.height);
-  const canvas = document.createElement("canvas");
+  const cv = document.createElement("canvas");
   try {
     for (let attempt = 0; attempt < 8; attempt++) {
-      canvas.width = width;
-      canvas.height = height;
-      const ctx = canvas.getContext("2d")!;
+      cv.width = width;
+      cv.height = height;
+      const ctx = cv.getContext("2d")!;
       ctx.fillStyle = "#fff";
       ctx.fillRect(0, 0, width, height);
       ctx.drawImage(bmp, 0, 0, width, height);
       for (const q of [0.85, 0.7, 0.55]) {
-        let out = await new Promise<Blob | null>((r) => canvas.toBlob(r, "image/webp", q));
-        if (out?.type !== "image/webp") out = await new Promise<Blob | null>((r) => canvas.toBlob(r, "image/jpeg", q));
+        let out = await new Promise<Blob | null>((r) => cv.toBlob(r, "image/webp", q));
+        if (out?.type !== "image/webp") out = await new Promise<Blob | null>((r) => cv.toBlob(r, "image/jpeg", q));
         if (out && out.size <= FLOOR_PLAN_MAX_BYTES) return { image: await blobToDataUrl(out), widthPx: width, heightPx: height };
       }
       width = Math.max(1, Math.round(width * 0.8));
@@ -592,11 +1206,10 @@ async function onPlanFile(e: Event) {
   planBusy.value = true;
   try {
     const img = await compressPlan(file);
-    await saveFloorPlan(String(props.map._id), floor.value, {
-      version: Number(props.map.version) || 1,
-      ...img,
-      ...replacePlacement(floorPlan.value, img.widthPx, img.heightPx),
-    });
+    const old = placedPlan.value;
+    // A replacement keeps the building's real size and place; a first plan fits the drawing area.
+    const placement = old ? { metersPerPixel: Math.round(((old.widthPx * old.metersPerPixel) / img.widthPx) * 1e6) / 1e6, tx: old.tx, ty: old.ty, yawRad: old.yawRad ?? 0 } : fitPlanIn(state.value.frame, img.widthPx, img.heightPx);
+    await saveFloorPlan(String(props.map._id), floor.value, { version: Number(props.map.version) || 1, ...img, ...placement, space: "world" });
     note(`Floor plan saved for ${floorName(floor.value)}. Use Set scale to measure a known length.`, true);
     emit("saved");
   } catch (err) {
@@ -606,22 +1219,18 @@ async function onPlanFile(e: Event) {
   }
 }
 
-async function placePlan(next: { metersPerPixel: number; tx: number; ty: number }, done: string) {
+function fitPlanNow() {
   const p = floorPlan.value;
-  if (!p || !props.map?._id) return;
-  planBusy.value = true;
-  try {
-    await saveFloorPlan(String(props.map._id), floor.value, { version: Number(props.map.version) || 1, widthPx: p.widthPx, heightPx: p.heightPx, ...next });
-    note(done, true);
-    emit("saved");
-  } catch (err) {
-    note(errText(err, "Could not save the floor plan scale."));
-  } finally {
-    planBusy.value = false;
+  if (p) {
+    dispatch({ type: "plan", floorNo: floor.value, placement: fitPlanIn(state.value.frame, p.widthPx, p.heightPx) });
+    note("Floor plan fitted to the drawing area. Save to keep it.", true);
   }
 }
-
-const fitPlanNow = () => floorPlan.value && placePlan(fitPlan(floorPlan.value.widthPx, floorPlan.value.heightPx), "Floor plan fitted to the drawing area.");
+function turnPlan(deg: number) {
+  const p = placedPlan.value;
+  if (!p || !Number.isFinite(deg)) return;
+  dispatch({ type: "plan", floorNo: floor.value, placement: { metersPerPixel: p.metersPerPixel, tx: p.tx, ty: p.ty, yawRad: Math.round(deg * (Math.PI / 180) * 10000) / 10000 } });
+}
 
 async function removePlanNow() {
   if (!props.map?._id || !floorPlan.value) return;
@@ -638,34 +1247,38 @@ async function removePlanNow() {
   }
 }
 
-/* ---- Set scale: two clicks on a known length, then its real length ---- */
-const measuring = ref(false);
-const measure = ref<{ a: TPlanPoint | null; b: TPlanPoint | null }>({ a: null, b: null });
-const measureM = ref<number | null>(null);
-function startMeasure() {
-  measuring.value = !measuring.value;
-  measure.value = { a: null, b: null };
-  measureM.value = null;
-}
-function measureClick(p: TPlanPoint) {
-  measure.value = !measure.value.a || measure.value.b ? { a: p, b: null } : { ...measure.value, b: p };
-}
-function cancelMeasure() {
-  measuring.value = false;
-  measure.value = { a: null, b: null };
-}
-async function applyMeasure() {
-  const { a, b } = measure.value;
-  if (!a || !b || !floorPlan.value) return;
-  const r = rescaleByMeasure(floorPlan.value, a, b, Number(measureM.value));
-  if ("error" in r) return void note(r.error);
-  cancelMeasure();
-  await placePlan(r.plan, `Scale set: ${scaleText(r.plan)}.`);
+/* ---- measure: the real length of a drawn line sets the scale ---- */
+const measuredLength = computed(() => {
+  const s = single.value;
+  if (s?.kind !== "measure") return 0;
+  const [a, b] = s.points.map((p) => shareToWorld(state.value.frame, p));
+  return Math.hypot(b!.x - a!.x, b!.y - a!.y);
+});
+function applyScale(withDrawing: boolean) {
+  const s = single.value;
+  if (s?.kind !== "measure") return;
+  const r = measureScale(state.value.frame, s, Number(s.meta?.distanceM), placedPlan.value);
+  if ("error" in r) return void note(r.error!);
+  if (withDrawing) dispatch({ type: "transformFloor", floorNo: floor.value, t: r.t, placement: r.placement });
+  else {
+    // The plan alone: the measured line is on the plan, so it scales with it; the rest of the drawing stays.
+    const moved = state.value.shapes.map((x) => {
+      if (x.id !== s.id) return x;
+      const points = x.points.map((p) => {
+        const w = shareToWorld(state.value.frame, p);
+        const q = worldToShare(state.value.frame, { x: w.x * r.t.scale + r.t.tx, y: w.y * r.t.scale + r.t.ty });
+        return { x: Math.round(q.x * 100) / 100, y: Math.round(q.y * 100) / 100 };
+      });
+      return { ...x, points };
+    });
+    dispatch({ type: "setShapes", shapes: moved });
+    if (r.placement) dispatch({ type: "plan", floorNo: floor.value, placement: r.placement });
+  }
+  note(`Scale set: ${r.k > 1 ? "grown" : "shrunk"} ${Math.abs((r.k - 1) * 100).toFixed(1)}%${r.placement ? ` · ${scaleText({ ...floorPlan.value!, ...r.placement })}` : ""}. Save to keep it.`, true);
 }
-watch(floor, cancelMeasure);
 
-/* ---- building file: HERO Fleet Core import, downloads ---- */
-const graphs = computed(() => rmfGraphs(props.map?.rmf));
+/* ---- building file: HERO Fleet Core import, file import, downloads ---- */
+const savedGraphs = computed(() => rmfGraphs(props.map?.rmf));
 
 async function importFleet() {
   if (!props.site) return;
@@ -686,14 +1299,92 @@ async function importFleet() {
   }
 }
 
-async function download(format: "building" | "nav", graph = 0) {
+const fileInput = ref<HTMLInputElement | null>(null);
+const fileKind = ref<"building" | "nav">("building");
+function pickFile(kind: "building" | "nav") {
+  fileKind.value = kind;
+  fileInput.value?.click();
+}
+async function onBuildingFile(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) return;
+  if (file.size > 1_900_000) return void note("That file is too large (1.9 MB at most).");
+  planBusy.value = true;
+  try {
+    const text = await file.text();
+    const kind = fileKind.value;
+    const res = await importBuildingFile(kind === "nav" ? { format: "nav", text, graph: graph.value } : { format: "building", text });
+    const warn = (res?.warnings ?? []).length ? ` Check: ${(res.warnings as string[]).join(" ")}` : "";
+    if (kind === "building") {
+      if (state.value.shapes.length && !window.confirm("Replace everything drawn on every floor with this building file? Nothing is saved until you press Save.")) return;
+      const m = editorModelFromMap({ rmf: res.rmf });
+      levels.value = m.levels;
+      meta.value = { referenceLevel: m.referenceLevel, source: "file" };
+      const frame = growFrame(m.frame, planRecords.value);
+      const shapes = frame === m.frame ? m.shapes : editorModelFromMap({ rmf: res.rmf }, frame).shapes;
+      dispatch({ type: "loadAll", shapes, frame, graphs: m.graphs, dirty: true, notice: { text: `Building file read: ${rmfLine(res.rmf)}. Press Save to keep it.${warn}`, ok: !warn } });
+      graph.value = m.graphs[0]?.idx ?? 0;
+      // Open on the building's own first floor (not a floor only the robots report).
+      const own = Object.keys(m.levels).map(Number).sort((a, b) => a - b);
+      floor.value = own.find((f) => f >= 1) ?? own[0] ?? floor.value;
+      resetView();
+    } else {
+      mergeRouteFile(res.rmf, warn);
+    }
+  } catch (err) {
+    note(errText(err, "Could not read that file."));
+  } finally {
+    planBusy.value = false;
+  }
+}
+/** A route file's lanes replace this graph's lanes on the floors it names; its waypoints join (or reuse) the drawing's. */
+function mergeRouteFile(rmf: Record<string, any>, warn: string) {
+  const f = state.value.frame;
+  const byName = new Map(allFloors.value.map((fl) => [levelNameOf(fl), fl]));
+  let shapes = [...state.value.shapes];
+  let added = 0;
+  let floorsHit = 0;
+  let made = 0;
+  const stamp = Date.now().toString(36);
+  for (const lv of (rmf.levels ?? []) as Array<Record<string, any>>) {
+    const fl = byName.get(String(lv.name)) ?? (allFloors.value.includes(Number(lv.floorNo)) ? Number(lv.floorNo) : null);
+    if (fl === null || fl === undefined) continue;
+    floorsHit++;
+    shapes = shapes.filter((s) => !(s.kind === "lane" && s.floorNo === fl && laneGraph(s) === graph.value));
+    const ids = new Map<string, string>();
+    for (const v of (lv.vertices ?? []) as Array<Record<string, any>>) {
+      const p = worldToShare(f, v);
+      const near = shapes.find((s) => s.kind === "waypoint" && s.floorNo === fl && Math.abs(shareToWorld(f, s.points[0]!).x - v.x) < 0.01 && Math.abs(shareToWorld(f, s.points[0]!).y - v.y) < 0.01);
+      if (near) ids.set(String(v.id), near.id);
+      else {
+        const id = `rf${stamp}w${made++}`;
+        ids.set(String(v.id), id);
+        shapes.push({ id, kind: "waypoint", floorNo: fl, points: [{ x: Math.round(p.x * 100) / 100, y: Math.round(p.y * 100) / 100 }], name: String(v.name ?? ""), meta: { params: { ...(v.params ?? {}) } } });
+      }
+    }
+    for (const l of (lv.lanes ?? []) as Array<Record<string, any>>) {
+      const from = ids.get(String(l.v1));
+      const to = ids.get(String(l.v2));
+      if (!from || !to) continue;
+      const { v1: _a, v2: _b, ...opts } = l;
+      shapes.push({ id: `rf${stamp}l${added++}`, kind: "lane", floorNo: fl, points: [{ x: 0, y: 0 }, { x: 0, y: 0 }], meta: { ...opts, graphIdx: graph.value, from, to } });
+    }
+  }
+  if (!floorsHit) return void note("None of the route map's floors match this building's floor names.");
+  const graphs = state.value.graphs.some((g) => g.idx === graph.value) ? state.value.graphs : [...state.value.graphs, { idx: graph.value, name: `Graph ${graph.value}`, brands: [] }];
+  dispatch({ type: "setShapes", shapes, graphs, notice: { text: `Route map read into ${graphName(graph.value)}: ${added} lanes on ${floorsHit} floor${floorsHit === 1 ? "" : "s"}. Press Save to keep it.${warn}`, ok: !warn } });
+}
+
+async function download(format: "building" | "nav", g = 0) {
   if (!props.map?._id) return;
   try {
-    const blob = await exportBuildingMap(String(props.map._id), format, format === "nav" ? graph : undefined);
+    const blob = await exportBuildingMap(String(props.map._id), format, format === "nav" ? g : undefined);
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = exportFileName(String(props.map.name ?? ""), format, graph);
+    a.download = exportFileName(String(props.map.name ?? ""), format, g);
     a.click();
     setTimeout(() => URL.revokeObjectURL(url), 1000);
   } catch (err) {
@@ -707,9 +1398,33 @@ function boxStyle(s: TEditorShape) {
   const b = shapeBox(s);
   return { left: `${b.x}%`, top: `${b.y}%`, width: `${b.w}%`, height: `${b.h}%` };
 }
+function liftStyle(s: TEditorShape) {
+  return { ...boxStyle(s), transform: `rotate(${(-Number(s.meta?.yawRad ?? 0) * 180) / Math.PI}deg)` };
+}
+function midStyle(s: TEditorShape) {
+  const [a, b] = s.points;
+  return { left: `${((a?.x ?? 0) + (b?.x ?? 0)) / 2}%`, top: `${((a?.y ?? 0) + (b?.y ?? 0)) / 2}%` };
+}
 function rectStyle(r: { x: number; y: number; w: number; h: number }) {
   return { left: `${Math.min(r.x, r.x + r.w)}%`, top: `${Math.min(r.y, r.y + r.h)}%`, width: `${Math.abs(r.w)}%`, height: `${Math.abs(r.h)}%` };
 }
+/** One-way lanes get an arrow at their middle, pointing the way robots may drive (angle in real metres). */
+const laneArrows = computed(() => {
+  const f = state.value.frame;
+  return visible.value
+    .filter((s) => s.kind === "lane" && s.meta?.bidirectional === false)
+    .map((s) => {
+      const [a, b] = s.points;
+      return { id: s.id, x: ((a!.x + b!.x) / 2), y: ((a!.y + b!.y) / 2), deg: (Math.atan2(((b!.y - a!.y) * f.h) / 100, ((b!.x - a!.x) * f.w) / 100) * 180) / Math.PI, other: laneGraph(s) !== graph.value };
+    });
+});
+const lanePreview = computed(() => {
+  const from = state.value.laneFrom ? state.value.shapes.find((s) => s.id === state.value.laneFrom) : null;
+  if (!from || tool.value !== "lane" || !pointerAt.value || from.floorNo !== floor.value) return null;
+  return { a: from.points[0]!, b: pointerAt.value };
+});
+const measurePreview = computed(() => (state.value.measureFrom && tool.value === "measure" && pointerAt.value ? { a: state.value.measureFrom, b: pointerAt.value } : null));
+
 const root = ref<HTMLElement | null>(null);
 const isFs = ref(false);
 const onFs = () => (isFs.value = document.fullscreenElement === root.value);