From 653f7d3ac709635f18cbd3f6c7bc12bd2a0f730a Mon Sep 17 00:00:00 2001
From: SuprexDE <46200229+SuprexDE@users.noreply.github.com>
Date: Sun, 2 Aug 2026 20:34:03 +0200
Subject: [PATCH 1/4] =?UTF-8?q?feat(editor):=20improve=20UX=20=E2=80=94=20?=
 =?UTF-8?q?feedback,=20data-loss=20protection,=20marquee,=20camera=20picke?=
 =?UTF-8?q?r,=20editability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/constants.ts                       |   7 +
 src/core/interaction/usePanZoom.ts          |   8 +
 src/core/render/FloorLayer.vue              |   3 +
 src/core/render/RoutePath.vue               |  25 ++-
 src/editor/EditorCanvas.vue                 |  42 ++++-
 src/editor/EditorShell.vue                  | 166 ++++++++++++++---
 src/editor/EditorStatusBar.vue              |  42 ++++-
 src/editor/EditorToolbar.vue                |  11 +-
 src/editor/ToolOverlayLayer.vue             |  14 +-
 src/editor/ZoomControls.vue                 |  52 ++++++
 src/editor/innerLineStyles.ts               |   8 +
 src/editor/panels/FiltersEditor.vue         |  10 +-
 src/editor/panels/FloorsEditor.vue          |  20 +-
 src/editor/panels/ImportDialog.vue          |  22 ++-
 src/editor/panels/PalettePanel.vue          |  67 ++++++-
 src/editor/panels/PlacementMarkerEditor.vue |  31 ++--
 src/editor/panels/PlacementProperties.vue   |  54 +++++-
 src/editor/panels/PropertiesPanel.vue       |  22 ++-
 src/editor/panels/RoomImagesEditor.vue      |  91 +++++++---
 src/editor/panels/RoomInnerLinesEditor.vue  | 120 ++++++++++++
 src/editor/panels/RoomProperties.vue        |  59 ++++--
 src/editor/panels/RoomWallGapsEditor.vue    |  37 ++--
 src/editor/panels/ShortcutHelpDialog.vue    | 146 +++++++++++++++
 src/editor/panels/StartDialog.vue           |  12 +-
 src/editor/panels/ZonesManager.vue          |  15 +-
 src/editor/store/editorStore.ts             |  87 ++++++++-
 src/editor/tools/toolTypes.ts               |  10 +-
 src/editor/tools/useCameraPickMode.ts       |  81 +++++++++
 src/editor/tools/useCanvasEvents.ts         |  45 ++++-
 src/editor/tools/useRouteEditMode.ts        | 191 ++++++++++++++++++++
 src/editor/tools/useSelectTool.ts           | 157 +++++++++++++++-
 31 files changed, 1478 insertions(+), 177 deletions(-)
 create mode 100644 src/editor/ZoomControls.vue
 create mode 100644 src/editor/innerLineStyles.ts
 create mode 100644 src/editor/panels/RoomInnerLinesEditor.vue
 create mode 100644 src/editor/panels/ShortcutHelpDialog.vue
 create mode 100644 src/editor/tools/useCameraPickMode.ts
 create mode 100644 src/editor/tools/useRouteEditMode.ts

diff --git a/src/core/constants.ts b/src/core/constants.ts
index a4b72aa..18c9c71 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -21,6 +21,8 @@ export const GRID_SNAP_DEFAULT = 5
 /** Zoom factor, not percent. */
 export const ZOOM_MIN = 0.25
 export const ZOOM_MAX = 8
+/** Scale step of the +/− zoom buttons. */
+export const ZOOM_BUTTON_FACTOR = 1.5
 
 /** Fallback for elements without their own `size`, in map units. */
 export const ICON_DEFAULT_SIZE = 10
@@ -44,6 +46,8 @@ export const EDITOR_AUTOSAVE_VERSION = 4
 export const CURSOR_STORAGE_KEY = 'outlasttrials-maps:custom-cursor'
 export const AUTOSAVE_DEBOUNCE_MS = 1000
 export const UNDO_STACK_LIMIT = 100
+/** Commits with the same coalesce key within this window share one undo snapshot. */
+export const UNDO_COALESCE_MS = 800
 
 export const VALIDATION_DEBOUNCE_MS = 500
 
@@ -72,6 +76,9 @@ export const DUPLICATE_OFFSET = 5
 /** Hit radius for vertex handles and for switching the active drawing end, in map units. */
 export const VERTEX_HIT_RADIUS = 4
 
+/** Below this pointer travel (screen px) an empty-canvas drag counts as a click, not a marquee. */
+export const MARQUEE_MIN_DRAG_PX = 4
+
 /** Smallest width/height a room can be resized to, in map units (one grid cell). */
 export const ROOM_RESIZE_MIN_SIZE = 5
 
diff --git a/src/core/interaction/usePanZoom.ts b/src/core/interaction/usePanZoom.ts
index 4e7990e..e1c74ac 100644
--- a/src/core/interaction/usePanZoom.ts
+++ b/src/core/interaction/usePanZoom.ts
@@ -82,6 +82,13 @@ export function usePanZoom(svgRef: Readonly<Ref<SVGSVGElement | null>>, options?
     window.removeEventListener('keyup', onKeyUp)
   })
 
+  /** Scales around the viewport center; d3 clamps against the scale extent. */
+  function zoomBy(factor: number): void {
+    if (behavior && selection) {
+      behavior.scaleBy(selection, factor)
+    }
+  }
+
   /** Fits the view to the given world bounds (without bounds: identity). */
   function resetView(bounds?: WorldBounds): void {
     const svg = svgRef.value
@@ -119,5 +126,6 @@ export function usePanZoom(svgRef: Readonly<Ref<SVGSVGElement | null>>, options?
     transform: readonly(transform),
     isSpacePanning: readonly(isSpacePanning),
     resetView,
+    zoomBy,
   }
 }
diff --git a/src/core/render/FloorLayer.vue b/src/core/render/FloorLayer.vue
index 84be378..949edad 100644
--- a/src/core/render/FloorLayer.vue
+++ b/src/core/render/FloorLayer.vue
@@ -14,6 +14,8 @@ const props = defineProps<{
   zones: ReadonlyMap<string, Zone>
   selectedIds?: ReadonlySet<string>
   hiddenCategories?: ReadonlySet<string>
+  /** Editor: routes get an invisible wide hit stroke for clicking/double-clicking. */
+  interactiveRoutes?: boolean
 }>()
 
 function visible<T extends { floor: number }>(items: T[]): T[] {
@@ -46,6 +48,7 @@ const markedPlacements = computed(() => placements.value.filter((placement) => p
       :key="route.id"
       :route="route"
       :selected="selectedIds?.has(route.id)"
+      :hit-area="interactiveRoutes"
     />
     <PlacementMarker
       v-for="placement in placements"
diff --git a/src/core/render/RoutePath.vue b/src/core/render/RoutePath.vue
index 0aadbf6..d638fdd 100644
--- a/src/core/render/RoutePath.vue
+++ b/src/core/render/RoutePath.vue
@@ -5,17 +5,20 @@ import type { RouteLine } from '../model/types'
 defineProps<{
   route: RouteLine
   selected?: boolean
+  /** Adds an invisible wide stroke so the thin dashed line is clickable (editor). */
+  hitArea?: boolean
 }>()
 </script>
 
 <template>
-  <path
-    :d="route.path"
-    class="route"
-    :style="selected ? { stroke: SELECTION_COLOR } : undefined"
-    data-entity-kind="route"
-    :data-entity-id="route.id"
-  />
+  <g data-entity-kind="route" :data-entity-id="route.id">
+    <path v-if="hitArea" :d="route.path" class="route-hit" />
+    <path
+      :d="route.path"
+      class="route"
+      :style="selected ? { stroke: SELECTION_COLOR } : undefined"
+    />
+  </g>
 </template>
 
 <style scoped>
@@ -27,4 +30,12 @@ defineProps<{
   stroke-linejoin: round;
   stroke-dasharray: 8 5;
 }
+
+.route-hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
 </style>
diff --git a/src/editor/EditorCanvas.vue b/src/editor/EditorCanvas.vue
index ffcda0a..f833c5f 100644
--- a/src/editor/EditorCanvas.vue
+++ b/src/editor/EditorCanvas.vue
@@ -3,7 +3,8 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useElementSize } from '../core/interaction/useElementSize'
 import { usePanZoom } from '../core/interaction/usePanZoom'
 import { roomsBounds } from '../core/model/roomPath'
-import type { Vec2 } from '../core/model/types'
+import type { CameraInfo, Vec2 } from '../core/model/types'
+import CameraMarker from '../core/render/CameraMarker.vue'
 import FloorLayer from '../core/render/FloorLayer.vue'
 import GridLayer from '../core/render/GridLayer.vue'
 import MapCanvas from '../core/render/MapCanvas.vue'
@@ -20,6 +21,7 @@ import { useSelectTool } from './tools/useSelectTool'
 const emit = defineEmits<{
   cursorMove: [pos: Vec2 | null]
   zoomChange: [k: number]
+  fineGridChange: [fine: boolean]
 }>()
 
 const editor = useEditorStore()
@@ -28,7 +30,7 @@ const zonesStore = useZonesStore()
 
 const canvas = ref<InstanceType<typeof MapCanvas> | null>(null)
 const svgEl = computed(() => canvas.value?.svgEl ?? null)
-const { transform, isSpacePanning, resetView } = usePanZoom(svgEl)
+const { transform, isSpacePanning, resetView, zoomBy } = usePanZoom(svgEl)
 const viewport = useElementSize(svgEl)
 
 const tools = {
@@ -40,6 +42,7 @@ const tools = {
 
 const {
   cursorWorld,
+  isFineGrid,
   overlay,
   onPointerDown,
   onPointerMove,
@@ -47,7 +50,13 @@ const {
   onPointerLeave,
   onDblClick,
   onContextMenu,
-} = useCanvasEvents({ svgRef: svgEl, transform, isSpacePanning, tools })
+} = useCanvasEvents({
+  svgRef: svgEl,
+  transform,
+  isSpacePanning,
+  tools,
+  fitView: () => fitToDocument(),
+})
 
 watch(cursorWorld, (pos) => emit('cursorMove', pos))
 watch(
@@ -55,6 +64,19 @@ watch(
   (k) => emit('zoomChange', k),
   { immediate: true },
 )
+watch(isFineGrid, (fine) => emit('fineGridChange', fine))
+
+const isDrawTool = computed(() => editor.activeTool !== 'select')
+
+const selectedRoomCameras = computed<CameraInfo[]>(() => {
+  const room = editor.selectedRoom
+  if (!room || room.floor !== editor.activeFloor) {
+    return []
+  }
+  return (room.info?.images ?? [])
+    .map((image) => image.camera)
+    .filter((camera): camera is CameraInfo => Boolean(camera))
+})
 
 onMounted(() => fitToDocument())
 watch(
@@ -70,13 +92,15 @@ function fitToDocument(): void {
   }
   resetView(roomsBounds(doc.rooms) ?? undefined)
 }
+
+defineExpose({ fitToDocument, zoomBy })
 </script>
 
 <template>
   <MapCanvas
     ref="canvas"
     :transform="transform"
-    :class="{ panning: isSpacePanning }"
+    :class="{ panning: isSpacePanning, 'draw-cursor': isDrawTool && !isSpacePanning }"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"
     @pointerup="onPointerUp"
@@ -92,6 +116,12 @@ function fitToDocument(): void {
       :element-index="libraryStore.elementIndex"
       :zones="zonesStore.zonesById"
       :selected-ids="editor.selectedIds"
+      interactive-routes
+    />
+    <CameraMarker
+      v-for="(camera, index) in selectedRoomCameras"
+      :key="`cam-${index}`"
+      :camera="camera"
     />
     <ToolOverlayLayer :overlay="overlay" :element-index="libraryStore.elementIndex" />
   </MapCanvas>
@@ -101,4 +131,8 @@ function fitToDocument(): void {
 .panning {
   cursor: grab;
 }
+
+.draw-cursor {
+  cursor: crosshair;
+}
 </style>
diff --git a/src/editor/EditorShell.vue b/src/editor/EditorShell.vue
index 1e8e44b..9820c8d 100644
--- a/src/editor/EditorShell.vue
+++ b/src/editor/EditorShell.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
 import Toast from 'primevue/toast'
-import { onMounted, ref, watch } from 'vue'
-import { VALIDATION_DEBOUNCE_MS } from '../core/constants'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { VALIDATION_DEBOUNCE_MS, ZOOM_BUTTON_FACTOR } from '../core/constants'
+import { isUiOwnedTarget } from '../core/interaction/eventTargets'
 import type { Vec2 } from '../core/model/types'
-import { collectTrialLogicIssues, type ValidationIssue } from '../core/model/validation'
+import {
+  collectManifestIssues,
+  collectTrialLogicIssues,
+  type ValidationIssue,
+} from '../core/model/validation'
 import ControlsLegend from '../core/ui/ControlsLegend.vue'
 import EditorCanvas from './EditorCanvas.vue'
 import EditorStatusBar from './EditorStatusBar.vue'
@@ -15,8 +21,10 @@ import LibraryDialog from './panels/LibraryDialog.vue'
 import MapSettingsDialog from './panels/MapSettingsDialog.vue'
 import PalettePanel from './panels/PalettePanel.vue'
 import PropertiesPanel from './panels/PropertiesPanel.vue'
+import ShortcutHelpDialog from './panels/ShortcutHelpDialog.vue'
 import StartDialog from './panels/StartDialog.vue'
 import ToolbarSeparator from './ToolbarSeparator.vue'
+import ZoomControls from './ZoomControls.vue'
 import { useEditorStore } from './store/editorStore'
 import { useLibraryStore } from './store/libraryStore'
 import { useZonesStore } from './store/zonesStore'
@@ -27,10 +35,18 @@ const zonesStore = useZonesStore()
 
 const cursor = ref<Vec2 | null>(null)
 const zoom = ref(1)
+const fineGrid = ref(false)
+const canvasRef = ref<InstanceType<typeof EditorCanvas> | null>(null)
 const showImportDialog = ref(false)
 const showExportDialog = ref(false)
 const showMapSettings = ref(false)
 const showLibraryDialog = ref(false)
+const showShortcutHelp = ref(false)
+
+const needsDocumentHint = computed(() => ({
+  value: 'Load or create a map first',
+  disabled: Boolean(editor.document),
+}))
 
 const validationIssues = ref<ValidationIssue[]>([])
 let validationTimer: number | undefined
@@ -45,15 +61,51 @@ watch(
       return
     }
     validationTimer = window.setTimeout(() => {
-      validationIssues.value = collectTrialLogicIssues(doc, libraryStore.library, zonesStore.zoneLibrary)
+      validationIssues.value = [
+        ...(editor.manifest ? collectManifestIssues(editor.manifest) : []),
+        ...collectTrialLogicIssues(doc, libraryStore.library, zonesStore.zoneLibrary),
+      ]
     }, VALIDATION_DEBOUNCE_MS)
   },
   { immediate: true },
 )
 
+function onHelpHotkey(event: KeyboardEvent): void {
+  if (event.key === '?' && !isUiOwnedTarget(event.target)) {
+    showShortcutHelp.value = !showShortcutHelp.value
+  }
+}
+
+const showOpenConfirm = ref(false)
+
+function requestOpenOther(): void {
+  if (editor.dirty) {
+    showOpenConfirm.value = true
+  } else {
+    editor.closeWorkspace()
+  }
+}
+
+function confirmOpenOther(): void {
+  showOpenConfirm.value = false
+  editor.closeWorkspace()
+}
+
+function onBeforeUnload(event: BeforeUnloadEvent): void {
+  if (editor.dirty) {
+    event.preventDefault()
+  }
+}
+
 onMounted(() => {
   libraryStore.load()
   zonesStore.load()
+  window.addEventListener('keydown', onHelpHotkey)
+  window.addEventListener('beforeunload', onBeforeUnload)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onHelpHotkey)
+  window.removeEventListener('beforeunload', onBeforeUnload)
 })
 </script>
 
@@ -62,20 +114,33 @@ onMounted(() => {
     <EditorToolbar>
       <template #io>
         <ToolbarSeparator />
-        <Button
-          label="Map settings"
-          size="small"
-          severity="secondary"
-          :disabled="!editor.document"
-          @click="showMapSettings = true"
-        />
-        <Button
-          label="Library"
-          size="small"
-          severity="secondary"
-          :disabled="!editor.document"
-          @click="showLibraryDialog = true"
-        />
+        <span v-tooltip.bottom="needsDocumentHint">
+          <Button
+            label="Open…"
+            size="small"
+            severity="secondary"
+            :disabled="!editor.document"
+            @click="requestOpenOther"
+          />
+        </span>
+        <span v-tooltip.bottom="needsDocumentHint">
+          <Button
+            label="Map settings"
+            size="small"
+            severity="secondary"
+            :disabled="!editor.document"
+            @click="showMapSettings = true"
+          />
+        </span>
+        <span v-tooltip.bottom="needsDocumentHint">
+          <Button
+            label="Library"
+            size="small"
+            severity="secondary"
+            :disabled="!editor.document"
+            @click="showLibraryDialog = true"
+          />
+        </span>
         <ToolbarSeparator />
         <Button
           label="Import"
@@ -83,11 +148,23 @@ onMounted(() => {
           severity="secondary"
           @click="showImportDialog = true"
         />
+        <span v-tooltip.bottom="needsDocumentHint">
+          <Button
+            label="Export"
+            size="small"
+            :disabled="!editor.document"
+            @click="showExportDialog = true"
+          />
+        </span>
+        <ToolbarSeparator />
         <Button
-          label="Export"
+          v-tooltip.bottom="'Keyboard shortcuts (?)'"
+          icon="pi pi-question-circle"
+          aria-label="Keyboard shortcuts"
           size="small"
-          :disabled="!editor.document"
-          @click="showExportDialog = true"
+          text
+          severity="secondary"
+          @click="showShortcutHelp = true"
         />
       </template>
     </EditorToolbar>
@@ -98,7 +175,12 @@ onMounted(() => {
         <PalettePanel />
       </aside>
       <div class="canvas-wrap">
-        <EditorCanvas @cursor-move="cursor = $event" @zoom-change="zoom = $event" />
+        <EditorCanvas
+          ref="canvasRef"
+          @cursor-move="cursor = $event"
+          @zoom-change="zoom = $event"
+          @fine-grid-change="fineGrid = $event"
+        />
         <ControlsLegend
           v-if="editor.document"
           class="canvas-legend"
@@ -108,6 +190,13 @@ onMounted(() => {
             { icon: 'wheel', label: 'Hold to pan' },
           ]"
         />
+        <ZoomControls
+          v-if="editor.document"
+          class="canvas-zoom"
+          @zoom-in="canvasRef?.zoomBy(ZOOM_BUTTON_FACTOR)"
+          @zoom-out="canvasRef?.zoomBy(1 / ZOOM_BUTTON_FACTOR)"
+          @fit="canvasRef?.fitToDocument()"
+        />
       </div>
       <aside class="side-panel properties">
         <PropertiesPanel />
@@ -116,9 +205,21 @@ onMounted(() => {
     <EditorStatusBar
       :cursor="cursor"
       :zoom="zoom"
-      :issue-count="editor.document ? validationIssues.length : null"
+      :fine-grid="fineGrid"
+      :issues="editor.document ? validationIssues : null"
     />
     <StartDialog @import="showImportDialog = true" />
+    <ShortcutHelpDialog v-model:visible="showShortcutHelp" />
+    <Dialog v-model:visible="showOpenConfirm" modal header="Unsaved changes">
+      <p class="confirm-text">
+        The current trial has unsaved changes. It stays in the browser autosave and can be
+        continued from the start dialog — export it first to keep a file.
+      </p>
+      <div class="confirm-actions">
+        <Button label="Cancel" severity="secondary" text @click="showOpenConfirm = false" />
+        <Button label="Switch map" @click="confirmOpenOther" />
+      </div>
+    </Dialog>
     <ImportDialog v-model:visible="showImportDialog" />
     <ExportDialog v-model:visible="showExportDialog" />
     <MapSettingsDialog v-model:visible="showMapSettings" />
@@ -169,8 +270,27 @@ onMounted(() => {
   left: 12px;
 }
 
+.canvas-zoom {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+}
+
 .error {
   margin: 8px 16px;
   color: var(--danger);
 }
+
+.confirm-text {
+  margin: 0 0 16px;
+  max-width: 420px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 </style>
diff --git a/src/editor/EditorStatusBar.vue b/src/editor/EditorStatusBar.vue
index ab37225..25116ff 100644
--- a/src/editor/EditorStatusBar.vue
+++ b/src/editor/EditorStatusBar.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+import { GRID_SNAP_DEFAULT, GRID_SNAP_FINE } from '../core/constants'
 import type { Vec2 } from '../core/model/types'
+import type { ValidationIssue } from '../core/model/validation'
+import IssueList from './panels/IssueList.vue'
 import { useEditorStore } from './store/editorStore'
 
 const props = defineProps<{
   cursor: Vec2 | null
   zoom: number
+  fineGrid: boolean
   /** null = no document loaded (hide the status). */
-  issueCount: number | null
+  issues: ValidationIssue[] | null
 }>()
 
 const store = useEditorStore()
+const issuePopover = ref<InstanceType<typeof Popover> | null>(null)
 
 const cursorText = computed(() =>
   props.cursor ? `${props.cursor[0].toFixed(1)}, ${props.cursor[1].toFixed(1)}` : '—',
 )
 const zoomText = computed(() => `${Math.round(props.zoom * 100)}%`)
+const gridText = computed(() =>
+  props.fineGrid ? `${GRID_SNAP_FINE} (fine)` : `${GRID_SNAP_DEFAULT}`,
+)
 const saveText = computed(() => {
   if (store.autosaveError) {
     return store.autosaveError
@@ -25,21 +34,29 @@ const saveText = computed(() => {
   }
   return store.dirty ? 'Unsaved changes' : ''
 })
+const issueCount = computed(() => props.issues?.length ?? 0)
 </script>
 
 <template>
   <div class="statusbar">
     <span class="cell data">Cursor: {{ cursorText }}</span>
     <span class="cell data">Zoom: {{ zoomText }}</span>
+    <span class="cell data">Grid: {{ gridText }}</span>
     <span v-if="store.toolHint" class="cell hint">{{ store.toolHint }}</span>
     <span class="cell push-right" :class="{ error: store.autosaveError }">{{ saveText }}</span>
-    <span
-      v-if="props.issueCount !== null"
-      class="cell"
-      :class="props.issueCount === 0 ? 'valid' : 'error'"
+    <span v-if="props.issues !== null && issueCount === 0" class="cell valid">✓ Valid</span>
+    <button
+      v-else-if="props.issues !== null"
+      v-tooltip.top="'Show issues'"
+      class="cell issue-button error"
+      type="button"
+      @click="issuePopover?.toggle($event)"
     >
-      {{ props.issueCount === 0 ? '✓ Valid' : `${props.issueCount} issue(s)` }}
-    </span>
+      {{ issueCount }} issue(s)
+    </button>
+    <Popover ref="issuePopover" class="issue-popover">
+      <IssueList :issues="props.issues ?? []" />
+    </Popover>
   </div>
 </template>
 
@@ -75,4 +92,13 @@ const saveText = computed(() => {
 .valid {
   color: var(--success);
 }
+
+.issue-button {
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline dotted;
+}
 </style>
diff --git a/src/editor/EditorToolbar.vue b/src/editor/EditorToolbar.vue
index 2b569aa..a3e7b83 100644
--- a/src/editor/EditorToolbar.vue
+++ b/src/editor/EditorToolbar.vue
@@ -2,7 +2,7 @@
 import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { computed } from 'vue'
-import type { InnerLineStyle } from '../core/model/types'
+import { INNER_LINE_STYLE_OPTIONS } from './innerLineStyles'
 import { useEditorStore } from './store/editorStore'
 import type { RoomToolMode, ToolId } from './tools/toolTypes'
 
@@ -37,13 +37,6 @@ const roomModes: Array<{ id: RoomToolMode; label: string; icon: string; hint: st
   },
 ]
 
-const innerLineStyles: Array<{ label: string; value: InnerLineStyle }> = [
-  { label: 'Wall', value: 'wall' },
-  { label: 'Object', value: 'object' },
-  { label: 'Object (dark)', value: 'objectDark' },
-  { label: 'Dashed', value: 'dashed' },
-]
-
 const floorOptions = computed(() =>
   store.floors.map((floor) => ({ label: floor.name, value: floor.index })),
 )
@@ -86,7 +79,7 @@ const floorOptions = computed(() =>
       <Select
         v-if="store.roomToolMode === 'innerline'"
         v-model="store.innerLineStyle"
-        :options="innerLineStyles"
+        :options="INNER_LINE_STYLE_OPTIONS"
         option-label="label"
         option-value="value"
         size="small"
diff --git a/src/editor/ToolOverlayLayer.vue b/src/editor/ToolOverlayLayer.vue
index 63ef9d8..b270810 100644
--- a/src/editor/ToolOverlayLayer.vue
+++ b/src/editor/ToolOverlayLayer.vue
@@ -4,6 +4,7 @@ import { VERTEX_HIT_RADIUS } from '../core/constants'
 import type { ElementIndex } from '../core/model/elementIndex'
 import { pointsToOpenPath } from '../core/model/roomPath'
 import type { Placement, Vec2 } from '../core/model/types'
+import CameraMarker from '../core/render/CameraMarker.vue'
 import PlacementMarker from '../core/render/PlacementMarker.vue'
 import type { ToolOverlay } from './tools/toolTypes'
 
@@ -20,6 +21,7 @@ const vertices = computed(() => (props.overlay?.kind === 'vertices' ? props.over
 const wallGaps = computed(() => (props.overlay?.kind === 'wallgaps' ? props.overlay : null))
 const ghost = computed(() => (props.overlay?.kind === 'ghost' ? props.overlay : null))
 const resize = computed(() => (props.overlay?.kind === 'resize' ? props.overlay : null))
+const camera = computed(() => (props.overlay?.kind === 'camera' ? props.overlay : null))
 
 const previewPathD = computed(() => {
   if (!polyline.value?.preview || polyline.value.points.length === 0) {
@@ -55,7 +57,8 @@ const midpoints = computed<Vec2[]>(() => {
   if (!points) {
     return []
   }
-  return points.map((point, index): Vec2 => {
+  const edgeCount = vertices.value?.closed === false ? points.length - 1 : points.length
+  return points.slice(0, edgeCount).map((point, index): Vec2 => {
     const next = points[(index + 1) % points.length]
     return [(point[0] + next[0]) / 2, (point[1] + next[1]) / 2]
   })
@@ -103,6 +106,12 @@ const ghostElement = computed(() =>
     <template v-else-if="vertices">
       <g :transform="`translate(${vertices.origin[0]},${vertices.origin[1]})`">
         <polygon
+          v-if="vertices.closed !== false"
+          :points="vertices.points.map((p) => p.join(',')).join(' ')"
+          class="vertex-outline"
+        />
+        <polyline
+          v-else
           :points="vertices.points.map((p) => p.join(',')).join(' ')"
           class="vertex-outline"
         />
@@ -149,6 +158,9 @@ const ghostElement = computed(() =>
     <g v-else-if="ghostPlacement" class="ghost">
       <PlacementMarker :placement="ghostPlacement" :element="ghostElement" />
     </g>
+    <g v-else-if="camera" class="ghost">
+      <CameraMarker :camera="{ pos: camera.pos, rotation: camera.rotation }" />
+    </g>
     <template v-else-if="resize">
       <rect
         :x="resize.min[0]"
diff --git a/src/editor/ZoomControls.vue b/src/editor/ZoomControls.vue
new file mode 100644
index 0000000..1a0b0f4
--- /dev/null
+++ b/src/editor/ZoomControls.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+defineEmits<{
+  zoomIn: []
+  zoomOut: []
+  fit: []
+}>()
+</script>
+
+<template>
+  <div class="zoom-controls">
+    <Button
+      v-tooltip.left="'Zoom in'"
+      icon="pi pi-plus"
+      aria-label="Zoom in"
+      size="small"
+      text
+      severity="secondary"
+      @click="$emit('zoomIn')"
+    />
+    <Button
+      v-tooltip.left="'Zoom out'"
+      icon="pi pi-minus"
+      aria-label="Zoom out"
+      size="small"
+      text
+      severity="secondary"
+      @click="$emit('zoomOut')"
+    />
+    <Button
+      v-tooltip.left="'Fit view (F)'"
+      icon="pi pi-expand"
+      aria-label="Fit view"
+      size="small"
+      text
+      severity="secondary"
+      @click="$emit('fit')"
+    />
+  </div>
+</template>
+
+<style scoped>
+.zoom-controls {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--glass-bg);
+  backdrop-filter: blur(18px);
+}
+</style>
diff --git a/src/editor/innerLineStyles.ts b/src/editor/innerLineStyles.ts
new file mode 100644
index 0000000..4db1e5b
--- /dev/null
+++ b/src/editor/innerLineStyles.ts
@@ -0,0 +1,8 @@
+import type { InnerLineStyle } from '../core/model/types'
+
+export const INNER_LINE_STYLE_OPTIONS: Array<{ label: string; value: InnerLineStyle }> = [
+  { label: 'Wall', value: 'wall' },
+  { label: 'Object', value: 'object' },
+  { label: 'Object (dark)', value: 'objectDark' },
+  { label: 'Dashed', value: 'dashed' },
+]
diff --git a/src/editor/panels/FiltersEditor.vue b/src/editor/panels/FiltersEditor.vue
index 28f48ca..bc72a41 100644
--- a/src/editor/panels/FiltersEditor.vue
+++ b/src/editor/panels/FiltersEditor.vue
@@ -90,7 +90,15 @@ function add(): void {
         class="name-input"
         @change="rename(filter.id, ($event.target as HTMLInputElement).value)"
       />
-      <Button label="✕" size="small" severity="danger" text @click="remove(filter.id)" />
+      <Button
+        v-tooltip.left="'Remove filter'"
+        icon="pi pi-trash"
+        aria-label="Remove filter"
+        size="small"
+        severity="danger"
+        text
+        @click="remove(filter.id)"
+      />
       <MultiSelect
         :model-value="filter.categories"
         :options="categoryOptions"
diff --git a/src/editor/panels/FloorsEditor.vue b/src/editor/panels/FloorsEditor.vue
index c2ad8f7..60155e4 100644
--- a/src/editor/panels/FloorsEditor.vue
+++ b/src/editor/panels/FloorsEditor.vue
@@ -82,15 +82,17 @@ function add(): void {
         class="name-input"
         @change="rename(floor.index, ($event.target as HTMLInputElement).value)"
       />
-      <Button
-        v-tooltip.left="canRemove(floor.index) ? 'Remove' : 'In use or last floor'"
-        label="✕"
-        size="small"
-        severity="danger"
-        text
-        :disabled="!canRemove(floor.index)"
-        @click="remove(floor.index)"
-      />
+      <span v-tooltip.left="canRemove(floor.index) ? 'Remove floor' : 'In use or last floor'">
+        <Button
+          icon="pi pi-trash"
+          aria-label="Remove floor"
+          size="small"
+          severity="danger"
+          text
+          :disabled="!canRemove(floor.index)"
+          @click="remove(floor.index)"
+        />
+      </span>
     </div>
     <div class="add-row">
       <InputNumber
diff --git a/src/editor/panels/ImportDialog.vue b/src/editor/panels/ImportDialog.vue
index 1b27b8a..ff840b5 100644
--- a/src/editor/panels/ImportDialog.vue
+++ b/src/editor/panels/ImportDialog.vue
@@ -3,7 +3,7 @@ import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Textarea from 'primevue/textarea'
 import { useToast } from 'primevue/usetoast'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { ValidationIssue } from '../../core/model/validation'
 import { importDocument } from '../store/documentIO'
 import { useEditorStore } from '../store/editorStore'
@@ -22,6 +22,8 @@ const text = ref('')
 const issues = ref<ValidationIssue[]>([])
 const importing = ref(false)
 
+const replacesUnsaved = computed(() => Boolean(store.document) && store.dirty)
+
 watch(visible, (open) => {
   if (open) {
     text.value = ''
@@ -70,9 +72,19 @@ async function runImport(): Promise<void> {
         placeholder="…or paste trials/<trial-id>.json content here"
       />
       <IssueList v-if="issues.length > 0" :issues="issues" />
+      <p v-if="replacesUnsaved" class="replace-warning" role="alert">
+        The open trial has unsaved changes — importing replaces it. The current state stays in
+        the browser autosave.
+      </p>
       <div class="actions">
         <Button label="Cancel" severity="secondary" text @click="visible = false" />
-        <Button label="Import" :disabled="!text.trim()" :loading="importing" @click="runImport" />
+        <Button
+          :label="replacesUnsaved ? 'Replace & import' : 'Import'"
+          :severity="replacesUnsaved ? 'warn' : undefined"
+          :disabled="!text.trim()"
+          :loading="importing"
+          @click="runImport"
+        />
       </div>
     </div>
   </Dialog>
@@ -96,4 +108,10 @@ async function runImport(): Promise<void> {
   justify-content: flex-end;
   gap: 8px;
 }
+
+.replace-warning {
+  margin: 0;
+  font-size: 12px;
+  color: var(--warning);
+}
 </style>
diff --git a/src/editor/panels/PalettePanel.vue b/src/editor/panels/PalettePanel.vue
index feaa17c..88e5d21 100644
--- a/src/editor/panels/PalettePanel.vue
+++ b/src/editor/panels/PalettePanel.vue
@@ -43,7 +43,20 @@ function pick(elementId: string): void {
 
 <template>
   <div class="palette">
-    <InputText v-model.trim="search" size="small" placeholder="Search elements…" />
+    <div class="search-wrap">
+      <InputText v-model.trim="search" size="small" class="search-input" placeholder="Search elements…" />
+      <Button
+        v-if="search"
+        class="search-clear"
+        icon="pi pi-times"
+        aria-label="Clear search"
+        size="small"
+        text
+        severity="secondary"
+        @click="search = ''"
+      />
+    </div>
+    <p v-if="search && groups.length === 0" class="empty-hint">No elements match "{{ search }}".</p>
     <div v-for="group in groups" :key="group.id" class="group">
       <p class="group-name">{{ group.name }}</p>
       <PaletteElementButton
@@ -56,13 +69,19 @@ function pick(elementId: string): void {
         @remove="openDelete(element)"
       />
     </div>
-    <Button
-      label="New element"
-      size="small"
-      severity="secondary"
-      :disabled="!store.document"
-      @click="openCreate()"
-    />
+    <span
+      v-tooltip.top="{ value: 'Load or create a map first', disabled: Boolean(store.document) }"
+      class="new-element-wrap"
+    >
+      <Button
+        label="New element"
+        size="small"
+        severity="secondary"
+        class="new-element"
+        :disabled="!store.document"
+        @click="openCreate()"
+      />
+    </span>
     <ElementDialog v-model:visible="showElementDialog" :element-id="editElementId" @saved="pick" />
     <UsageDeleteDialog
       v-model:visible="showDeleteDialog"
@@ -96,4 +115,36 @@ function pick(elementId: string): void {
   letter-spacing: 0.5px;
   color: var(--text-faint);
 }
+
+.search-wrap {
+  position: relative;
+  display: flex;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 0;
+  padding-right: 32px;
+}
+
+.search-clear {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.empty-hint {
+  margin: 4px 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.new-element-wrap {
+  display: flex;
+}
+
+.new-element {
+  flex: 1;
+}
 </style>
diff --git a/src/editor/panels/PlacementMarkerEditor.vue b/src/editor/panels/PlacementMarkerEditor.vue
index 80be646..6717aed 100644
--- a/src/editor/panels/PlacementMarkerEditor.vue
+++ b/src/editor/panels/PlacementMarkerEditor.vue
@@ -36,21 +36,24 @@ const iconPreview = computed(() =>
 const markerColor = computed(() => marker.value?.color ?? MARKER_COLOR)
 const lineColor = computed(() => marker.value?.lineColor ?? markerColor.value)
 
-function mutatePlacement(mutate: (placement: Placement) => void): void {
-  store.commit((doc) => {
-    const placement = doc.placements.find((entry) => entry.id === props.placementId)
-    if (placement) {
-      mutate(placement)
-    }
-  })
+function mutatePlacement(mutate: (placement: Placement) => void, coalesce?: string): void {
+  store.commit(
+    (doc) => {
+      const placement = doc.placements.find((entry) => entry.id === props.placementId)
+      if (placement) {
+        mutate(placement)
+      }
+    },
+    coalesce ? { coalesce: `${props.placementId}:${coalesce}` } : undefined,
+  )
 }
 
-function mutateMarker(mutate: (marker: CalloutMarker) => void): void {
+function mutateMarker(mutate: (marker: CalloutMarker) => void, coalesce?: string): void {
   mutatePlacement((placement) => {
     if (placement.marker) {
       mutate(placement.marker)
     }
-  })
+  }, coalesce)
 }
 
 /** Next free number on this floor, so numbering does not restart at 1 every time. */
@@ -111,7 +114,7 @@ function setLabel(value: number | null): void {
     if ('label' in entry) {
       entry.label = Math.round(value ?? 0)
     }
-  })
+  }, 'marker-label')
 }
 
 function setIcon(value: string | undefined): void {
@@ -120,7 +123,7 @@ function setIcon(value: string | undefined): void {
     if ('icon' in entry) {
       entry.icon = name
     }
-  })
+  }, 'marker-icon')
 }
 
 function setOffset(axis: 0 | 1, value: number | null): void {
@@ -128,7 +131,7 @@ function setOffset(axis: 0 | 1, value: number | null): void {
     const offset: Vec2 = [...entry.offset]
     offset[axis] = value ?? 0
     entry.offset = offset
-  })
+  }, `marker-offset${axis}`)
 }
 
 /** The PrimeVue ColorPicker returns hex without "#". */
@@ -143,7 +146,7 @@ function setColor(value: unknown): void {
     } else {
       entry.color = color
     }
-  })
+  }, 'marker-color')
 }
 
 function setLineColor(value: unknown): void {
@@ -157,7 +160,7 @@ function setLineColor(value: unknown): void {
     } else {
       entry.lineColor = color
     }
-  })
+  }, 'marker-line-color')
 }
 
 function setDashed(dashed: boolean): void {
diff --git a/src/editor/panels/PlacementProperties.vue b/src/editor/panels/PlacementProperties.vue
index d3ee17f..058c5e2 100644
--- a/src/editor/panels/PlacementProperties.vue
+++ b/src/editor/panels/PlacementProperties.vue
@@ -30,14 +30,24 @@ const roomOptions = computed(() => [
     .map((room) => ({ label: room.info?.title ?? room.id, value: room.id as string | null })),
 ])
 
+const floorOptions = computed(() =>
+  store.floors.map((floor) => ({ label: floor.name, value: floor.index })),
+)
+
 /** All changes go through the document object from the store (never through the prop). */
-function mutatePlacement(mutate: (placement: Placement, doc: TrialDocument) => void): void {
-  store.commit((doc) => {
-    const placement = doc.placements.find((entry) => entry.id === props.placement.id)
-    if (placement) {
-      mutate(placement, doc)
-    }
-  })
+function mutatePlacement(
+  mutate: (placement: Placement, doc: TrialDocument) => void,
+  coalesce?: string,
+): void {
+  store.commit(
+    (doc) => {
+      const placement = doc.placements.find((entry) => entry.id === props.placement.id)
+      if (placement) {
+        mutate(placement, doc)
+      }
+    },
+    coalesce ? { coalesce: `${props.placement.id}:${coalesce}` } : undefined,
+  )
 }
 
 function setPos(axis: 0 | 1, value: number | null): void {
@@ -45,7 +55,7 @@ function setPos(axis: 0 | 1, value: number | null): void {
     const pos: [number, number] = [...placement.pos]
     pos[axis] = value ?? 0
     placement.pos = pos
-  })
+  }, `pos${axis}`)
 }
 
 function setRotation(value: number | null): void {
@@ -75,7 +85,24 @@ function setSize(axis: 0 | 1, value: number | null): void {
     } else {
       placement.size = size
     }
+  }, `size${axis}`)
+}
+
+/** A room assignment on the old floor is dropped — the panel only offers same-floor rooms. */
+function setFloor(floor: number): void {
+  if (floor === props.placement.floor) {
+    return
+  }
+  mutatePlacement((placement, doc) => {
+    placement.floor = floor
+    if (placement.roomId) {
+      const room = doc.rooms.find((entry) => entry.id === placement.roomId)
+      if (room && room.floor !== floor) {
+        delete placement.roomId
+      }
+    }
   })
+  store.activeFloor = floor
 }
 
 function setRoomId(roomId: string | null): void {
@@ -165,6 +192,17 @@ function setProps(value: Placement['props']): void {
         />
       </label>
     </div>
+    <label class="field">
+      <span class="field-label">Floor</span>
+      <Select
+        :model-value="placement.floor"
+        :options="floorOptions"
+        option-label="label"
+        option-value="value"
+        size="small"
+        @update:model-value="setFloor($event)"
+      />
+    </label>
     <label class="field">
       <span class="field-label">Room</span>
       <Select
diff --git a/src/editor/panels/PropertiesPanel.vue b/src/editor/panels/PropertiesPanel.vue
index da03245..b2cb811 100644
--- a/src/editor/panels/PropertiesPanel.vue
+++ b/src/editor/panels/PropertiesPanel.vue
@@ -36,13 +36,21 @@ function paste(): void {
       />
       <Button
         v-tooltip.bottom="'Cut (Ctrl+X)'"
-        label="Cut"
+        aria-label="Cut"
         size="small"
         text
         severity="secondary"
         :disabled="!hasSelection"
         @click="cutToSystemClipboard()"
-      />
+      >
+        <template #icon>
+          <svg class="cut-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="6" cy="6" r="3" />
+            <circle cx="6" cy="18" r="3" />
+            <path d="M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12" />
+          </svg>
+        </template>
+      </Button>
       <Button
         v-tooltip.bottom="'Paste (Ctrl+V)'"
         icon="pi pi-clipboard"
@@ -107,4 +115,14 @@ function paste(): void {
   font-size: 12px;
   color: var(--text-muted);
 }
+
+/* primeicons has no scissors glyph, hence the inline SVG. */
+.cut-icon {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
 </style>
diff --git a/src/editor/panels/RoomImagesEditor.vue b/src/editor/panels/RoomImagesEditor.vue
index a95e14b..28e84dd 100644
--- a/src/editor/panels/RoomImagesEditor.vue
+++ b/src/editor/panels/RoomImagesEditor.vue
@@ -15,26 +15,29 @@ const images = computed(
   () => store.document?.rooms.find((room) => room.id === props.roomId)?.info?.images ?? [],
 )
 
-function mutateImages(mutate: (list: RoomImage[]) => void): void {
-  store.commit((doc) => {
-    const room = doc.rooms.find((entry) => entry.id === props.roomId)
-    if (!room) {
-      return
-    }
-    const info = room.info ?? {}
-    const list = info.images ?? []
-    mutate(list)
-    if (list.length === 0) {
-      delete info.images
-    } else {
-      info.images = list
-    }
-    if (Object.keys(info).length === 0) {
-      delete room.info
-    } else {
-      room.info = info
-    }
-  })
+function mutateImages(mutate: (list: RoomImage[]) => void, coalesce?: string): void {
+  store.commit(
+    (doc) => {
+      const room = doc.rooms.find((entry) => entry.id === props.roomId)
+      if (!room) {
+        return
+      }
+      const info = room.info ?? {}
+      const list = info.images ?? []
+      mutate(list)
+      if (list.length === 0) {
+        delete info.images
+      } else {
+        info.images = list
+      }
+      if (Object.keys(info).length === 0) {
+        delete room.info
+      } else {
+        room.info = info
+      }
+    },
+    coalesce ? { coalesce: `${props.roomId}:${coalesce}` } : undefined,
+  )
 }
 
 function addImage(): void {
@@ -67,6 +70,7 @@ function toggleCamera(index: number, enabled: boolean): void {
 }
 
 function setCamera(index: number, patch: { x?: number; y?: number; rotation?: number }): void {
+  const field = patch.x !== undefined ? 'x' : patch.y !== undefined ? 'y' : 'rotation'
   mutateImages((list) => {
     const camera = list[index].camera
     if (!camera) {
@@ -74,12 +78,16 @@ function setCamera(index: number, patch: { x?: number; y?: number; rotation?: nu
     }
     camera.pos = [patch.x ?? camera.pos[0], patch.y ?? camera.pos[1]]
     camera.rotation = patch.rotation ?? camera.rotation
-  })
+  }, `img${index}-camera-${field}`)
 }
 
 function removeImage(index: number): void {
   mutateImages((list) => list.splice(index, 1))
 }
+
+function isPicking(index: number): boolean {
+  return store.cameraPick?.roomId === props.roomId && store.cameraPick.imageIndex === index
+}
 </script>
 
 <template>
@@ -93,16 +101,35 @@ function removeImage(index: number): void {
           class="src-input"
           @change="setSrc(index, ($event.target as HTMLInputElement).value)"
         />
-        <Button label="✕" size="small" severity="danger" text @click="removeImage(index)" />
+        <Button
+          v-tooltip.left="'Remove screenshot'"
+          icon="pi pi-trash"
+          aria-label="Remove screenshot"
+          size="small"
+          severity="danger"
+          text
+          @click="removeImage(index)"
+        />
       </div>
-      <label class="camera-toggle">
-        <Checkbox
-          :model-value="Boolean(image.camera)"
-          binary
-          @update:model-value="toggleCamera(index, $event as boolean)"
+      <div class="camera-row">
+        <label class="camera-toggle">
+          <Checkbox
+            :model-value="Boolean(image.camera)"
+            binary
+            @update:model-value="toggleCamera(index, $event as boolean)"
+          />
+          <span>Camera marker</span>
+        </label>
+        <Button
+          v-tooltip.left="'Place camera — click the map for the position, drag for the direction'"
+          icon="pi pi-camera"
+          aria-label="Place camera on map"
+          size="small"
+          text
+          :severity="isPicking(index) ? 'primary' : 'secondary'"
+          @click="store.armCameraPick(props.roomId, index)"
         />
-        <span>Camera marker</span>
-      </label>
+      </div>
       <div v-if="image.camera" class="camera-fields">
         <InputNumber
           :model-value="image.camera.pos[0]"
@@ -180,6 +207,12 @@ function removeImage(index: number): void {
   min-width: 0;
 }
 
+.camera-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .camera-toggle {
   display: flex;
   align-items: center;
diff --git a/src/editor/panels/RoomInnerLinesEditor.vue b/src/editor/panels/RoomInnerLinesEditor.vue
new file mode 100644
index 0000000..b97f89e
--- /dev/null
+++ b/src/editor/panels/RoomInnerLinesEditor.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed } from 'vue'
+import { parseOpenPath } from '../../core/model/roomPath'
+import type { InnerLine, InnerLineStyle } from '../../core/model/types'
+import { INNER_LINE_STYLE_OPTIONS } from '../innerLineStyles'
+import { useEditorStore } from '../store/editorStore'
+
+const props = defineProps<{ roomId: string }>()
+const store = useEditorStore()
+
+const lines = computed(
+  () => store.document?.rooms.find((room) => room.id === props.roomId)?.innerLines ?? [],
+)
+
+function pointCount(line: InnerLine): string {
+  const points = parseOpenPath(line.path)
+  return points ? `${points.length} points` : 'not parsable'
+}
+
+function mutateLines(mutate: (list: InnerLine[]) => void): void {
+  store.commit((doc) => {
+    const room = doc.rooms.find((entry) => entry.id === props.roomId)
+    if (!room) {
+      return
+    }
+    const list = room.innerLines ?? []
+    mutate(list)
+    if (list.length === 0) {
+      delete room.innerLines
+    } else {
+      room.innerLines = list
+    }
+  })
+}
+
+function setStyle(index: number, style: InnerLineStyle): void {
+  mutateLines((list) => {
+    list[index].style = style
+  })
+}
+
+function removeLine(index: number): void {
+  mutateLines((list) => list.splice(index, 1))
+}
+</script>
+
+<template>
+  <div class="inner-lines">
+    <span class="field-label">Inner lines</span>
+    <p v-if="lines.length === 0" class="hint">
+      None — pick the room tool's “Inner lines” mode and draw inside the room.
+    </p>
+    <div v-for="(line, index) in lines" :key="index" class="line-row">
+      <span class="line-name">#{{ index + 1 }}</span>
+      <Select
+        :model-value="line.style"
+        :options="INNER_LINE_STYLE_OPTIONS"
+        option-label="label"
+        option-value="value"
+        size="small"
+        class="style-select"
+        @update:model-value="setStyle(index, $event)"
+      />
+      <span class="line-meta">{{ pointCount(line) }}</span>
+      <Button
+        v-tooltip.left="'Remove inner line'"
+        icon="pi pi-trash"
+        aria-label="Remove inner line"
+        size="small"
+        text
+        severity="danger"
+        @click="removeLine(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.inner-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.line-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.line-name {
+  min-width: 24px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.style-select {
+  flex: 1;
+  min-width: 0;
+}
+
+.line-meta {
+  font-size: 11px;
+  color: var(--text-faint);
+  white-space: nowrap;
+}
+</style>
diff --git a/src/editor/panels/RoomProperties.vue b/src/editor/panels/RoomProperties.vue
index 661d2f5..fbdd0a7 100644
--- a/src/editor/panels/RoomProperties.vue
+++ b/src/editor/panels/RoomProperties.vue
@@ -11,6 +11,7 @@ import type { Room, RoomFlag, RoomInfo, TrialDocument, Vec2 } from '../../core/m
 import { useEditorStore } from '../store/editorStore'
 import { useZonesStore } from '../store/zonesStore'
 import RoomImagesEditor from './RoomImagesEditor.vue'
+import RoomInnerLinesEditor from './RoomInnerLinesEditor.vue'
 import RoomWallGapsEditor from './RoomWallGapsEditor.vue'
 
 const props = defineProps<{ room: Room }>()
@@ -28,16 +29,22 @@ const flagOptions: Array<{ id: RoomFlag; label: string }> = [
 const zoneOptions = computed(() =>
   zonesStore.zones.map((zone) => ({ label: zone.name, value: zone.id })),
 )
+const floorOptions = computed(() =>
+  store.floors.map((floor) => ({ label: floor.name, value: floor.index })),
+)
 const flags = computed(() => new Set(props.room.flags ?? []))
 
 /** All changes go through the document object from the store (never through the prop). */
-function mutateRoom(mutate: (room: Room, doc: TrialDocument) => void): void {
-  store.commit((doc) => {
-    const room = doc.rooms.find((entry) => entry.id === props.room.id)
-    if (room) {
-      mutate(room, doc)
-    }
-  })
+function mutateRoom(mutate: (room: Room, doc: TrialDocument) => void, coalesce?: string): void {
+  store.commit(
+    (doc) => {
+      const room = doc.rooms.find((entry) => entry.id === props.room.id)
+      if (room) {
+        mutate(room, doc)
+      }
+    },
+    coalesce ? { coalesce: `${props.room.id}:${coalesce}` } : undefined,
+  )
 }
 
 function renameId(raw: string): void {
@@ -87,6 +94,22 @@ function setZone(zone: string): void {
   })
 }
 
+/** Placements assigned to the room move along — the floor mismatch would be a validation error. */
+function setFloor(floor: number): void {
+  if (floor === props.room.floor) {
+    return
+  }
+  mutateRoom((room, doc) => {
+    room.floor = floor
+    for (const placement of doc.placements) {
+      if (placement.roomId === room.id) {
+        placement.floor = floor
+      }
+    }
+  })
+  store.activeFloor = floor
+}
+
 function toggleFlag(flag: RoomFlag, checked: boolean): void {
   mutateRoom((room) => {
     const next = new Set(room.flags ?? [])
@@ -124,7 +147,7 @@ function setLabelText(raw: string): void {
   })
 }
 
-function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }): void {
+function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }, coalesce: string): void {
   mutateRoom((room) => {
     if (!room.label) {
       return
@@ -139,7 +162,7 @@ function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }): void {
         room.label.fontSize = patch.fontSize
       }
     }
-  })
+  }, coalesce)
 }
 </script>
 
@@ -182,6 +205,17 @@ function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }): void {
         @update:model-value="setZone($event)"
       />
     </label>
+    <label class="field">
+      <span class="field-label">Floor (assigned placements move along)</span>
+      <Select
+        :model-value="room.floor"
+        :options="floorOptions"
+        option-label="label"
+        option-value="value"
+        size="small"
+        @update:model-value="setFloor($event)"
+      />
+    </label>
     <fieldset class="flags">
       <legend>Flags</legend>
       <label v-for="option in flagOptions" :key="option.id" class="flag-row">
@@ -209,7 +243,7 @@ function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }): void {
           size="small"
           :use-grouping="false"
           :max-fraction-digits="1"
-          @update:model-value="setLabelValue({ pos: [$event ?? 0, room.label.pos[1]] })"
+          @update:model-value="setLabelValue({ pos: [$event ?? 0, room.label.pos[1]] }, 'label-x')"
         />
       </label>
       <label class="field">
@@ -219,7 +253,7 @@ function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }): void {
           size="small"
           :use-grouping="false"
           :max-fraction-digits="1"
-          @update:model-value="setLabelValue({ pos: [room.label.pos[0], $event ?? 0] })"
+          @update:model-value="setLabelValue({ pos: [room.label.pos[0], $event ?? 0] }, 'label-y')"
         />
       </label>
       <label class="field">
@@ -229,11 +263,12 @@ function setLabelValue(patch: { pos?: Vec2; fontSize?: number | null }): void {
           size="small"
           :use-grouping="false"
           :max-fraction-digits="1"
-          @update:model-value="setLabelValue({ fontSize: $event })"
+          @update:model-value="setLabelValue({ fontSize: $event }, 'label-size')"
         />
       </label>
     </div>
     <RoomWallGapsEditor :room-id="room.id" />
+    <RoomInnerLinesEditor :room-id="room.id" />
     <RoomImagesEditor :room-id="room.id" />
   </div>
 </template>
diff --git a/src/editor/panels/RoomWallGapsEditor.vue b/src/editor/panels/RoomWallGapsEditor.vue
index 2dcfd79..4904fa9 100644
--- a/src/editor/panels/RoomWallGapsEditor.vue
+++ b/src/editor/panels/RoomWallGapsEditor.vue
@@ -20,20 +20,23 @@ const edgeLengths = computed(() => {
   return points ? edgeSegments(points).map(edgeLength) : []
 })
 
-function mutateGaps(mutate: (list: WallGap[]) => void): void {
-  store.commit((doc) => {
-    const target = doc.rooms.find((entry) => entry.id === props.roomId)
-    if (!target) {
-      return
-    }
-    const list = target.wallGaps ?? []
-    mutate(list)
-    if (list.length === 0) {
-      delete target.wallGaps
-    } else {
-      target.wallGaps = list
-    }
-  })
+function mutateGaps(mutate: (list: WallGap[]) => void, coalesce?: string): void {
+  store.commit(
+    (doc) => {
+      const target = doc.rooms.find((entry) => entry.id === props.roomId)
+      if (!target) {
+        return
+      }
+      const list = target.wallGaps ?? []
+      mutate(list)
+      if (list.length === 0) {
+        delete target.wallGaps
+      } else {
+        target.wallGaps = list
+      }
+    },
+    coalesce ? { coalesce: `${props.roomId}:${coalesce}` } : undefined,
+  )
 }
 
 function maxLength(gap: WallGap): number {
@@ -46,7 +49,7 @@ function setEdge(index: number, value: number | null): void {
   const edge = Math.min(Math.max(value ?? 0, 0), edges > 0 ? edges - 1 : 0)
   mutateGaps((list) => {
     list[index].edge = edge
-  })
+  }, `gap${index}-edge`)
 }
 
 function setStart(index: number, value: number | null): void {
@@ -55,14 +58,14 @@ function setStart(index: number, value: number | null): void {
     const available = edgeLengths.value[gap.edge] ?? gap.start + gap.length
     gap.start = Math.min(Math.max(value ?? 0, 0), Math.max(0, available - WALL_GAP_MIN_LENGTH))
     gap.length = Math.min(gap.length, Math.max(WALL_GAP_MIN_LENGTH, available - gap.start))
-  })
+  }, `gap${index}-start`)
 }
 
 function setLength(index: number, value: number | null): void {
   mutateGaps((list) => {
     const gap = list[index]
     gap.length = Math.min(Math.max(value ?? 0, WALL_GAP_MIN_LENGTH), maxLength(gap))
-  })
+  }, `gap${index}-length`)
 }
 
 function removeGap(index: number): void {
diff --git a/src/editor/panels/ShortcutHelpDialog.vue b/src/editor/panels/ShortcutHelpDialog.vue
new file mode 100644
index 0000000..5dd5cd7
--- /dev/null
+++ b/src/editor/panels/ShortcutHelpDialog.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import Dialog from 'primevue/dialog'
+
+const visible = defineModel<boolean>('visible', { required: true })
+
+const groups: Array<{ title: string; entries: Array<{ keys: string[]; action: string }> }> = [
+  {
+    title: 'Tools',
+    entries: [
+      { keys: ['1'], action: 'Select tool' },
+      { keys: ['2'], action: 'Room tool' },
+      { keys: ['3'], action: 'Element tool' },
+      { keys: ['4'], action: 'Route tool' },
+    ],
+  },
+  {
+    title: 'View',
+    entries: [
+      { keys: ['Space', 'Drag'], action: 'Pan (also middle mouse button)' },
+      { keys: ['Wheel'], action: 'Zoom at cursor' },
+      { keys: ['F'], action: 'Fit view to map' },
+      { keys: ['Ctrl'], action: 'Fine grid (2.5 instead of 5 units)' },
+    ],
+  },
+  {
+    title: 'Selection',
+    entries: [
+      { keys: ['Shift', 'Click'], action: 'Add to / remove from selection' },
+      { keys: ['←↑→↓'], action: 'Nudge by 1 unit (Shift: 5)' },
+      { keys: ['Ctrl', 'D'], action: 'Duplicate' },
+      { keys: ['Del'], action: 'Delete selection' },
+      { keys: ['Esc'], action: 'Deselect / cancel drawing' },
+      { keys: ['Double-click'], action: 'Edit room corner points' },
+    ],
+  },
+  {
+    title: 'Drawing (room / route)',
+    entries: [
+      { keys: ['Enter'], action: 'Finish drawing (also double-click)' },
+      { keys: ['Tab'], action: 'Switch active drawing end' },
+      { keys: ['Backspace'], action: 'Remove last point' },
+      { keys: ['Alt'], action: 'Invert 90° snapping temporarily' },
+      { keys: ['Alt', 'Click'], action: 'Delete corner point / wall gap' },
+    ],
+  },
+  {
+    title: 'Element tool',
+    entries: [
+      { keys: ['R'], action: 'Rotate by 45° (also right-click)' },
+      { keys: ['Shift', 'Click'], action: 'Place and keep placing' },
+    ],
+  },
+  {
+    title: 'Clipboard & history',
+    entries: [
+      { keys: ['Ctrl', 'C'], action: 'Copy' },
+      { keys: ['Ctrl', 'X'], action: 'Cut' },
+      { keys: ['Ctrl', 'V'], action: 'Paste at cursor' },
+      { keys: ['Ctrl', 'Z'], action: 'Undo' },
+      { keys: ['Ctrl', 'Y'], action: 'Redo (also Ctrl+Shift+Z)' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <Dialog v-model:visible="visible" header="Keyboard shortcuts" modal :style="{ width: '640px' }">
+    <div class="columns">
+      <section v-for="group in groups" :key="group.title" class="group">
+        <h3>{{ group.title }}</h3>
+        <ul>
+          <li v-for="entry in group.entries" :key="entry.action">
+            <span class="keys">
+              <template v-for="(key, index) in entry.keys" :key="key">
+                <span v-if="index > 0" class="plus">+</span>
+                <kbd>{{ key }}</kbd>
+              </template>
+            </span>
+            <span class="action">{{ entry.action }}</span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </Dialog>
+</template>
+
+<style scoped>
+.columns {
+  columns: 2;
+  column-gap: 24px;
+}
+
+.group {
+  break-inside: avoid;
+  margin-bottom: 16px;
+}
+
+h3 {
+  margin: 0 0 6px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+li {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-size: 13px;
+}
+
+.keys {
+  flex-shrink: 0;
+  min-width: 96px;
+  white-space: nowrap;
+}
+
+kbd {
+  padding: 1px 5px;
+  border: 1px solid var(--border-default);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--surface-panel);
+  font-family: var(--font-data);
+  font-size: 11px;
+}
+
+.plus {
+  margin: 0 2px;
+  color: var(--text-faint);
+}
+
+.action {
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/editor/panels/StartDialog.vue b/src/editor/panels/StartDialog.vue
index eefd4d7..b408529 100644
--- a/src/editor/panels/StartDialog.vue
+++ b/src/editor/panels/StartDialog.vue
@@ -3,7 +3,7 @@ import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { KEBAB_ID_PATTERN } from '../../core/constants'
 import { loadMapManifest, loadMapsIndex, loadTrialDocument } from '../../core/model/dataSource'
 import type { MapManifest, MapRegistryEntry } from '../../core/model/types'
@@ -65,6 +65,16 @@ onMounted(async () => {
   }
 })
 
+// The dialog stays mounted; on reopen ("Open…" in the toolbar) reset the stale state.
+watch(visible, (open) => {
+  if (open) {
+    mode.value = 'menu'
+    loadError.value = ''
+    selectedManifest.value = null
+    autosave.value = loadAutosave()
+  }
+})
+
 function continueAutosave(): void {
   if (autosave.value) {
     editor.restoreAutosave(autosave.value)
diff --git a/src/editor/panels/ZonesManager.vue b/src/editor/panels/ZonesManager.vue
index 66d2f22..1e81977 100644
--- a/src/editor/panels/ZonesManager.vue
+++ b/src/editor/panels/ZonesManager.vue
@@ -42,12 +42,15 @@ function setColor(zoneId: string, key: 'fill' | 'walls', value: unknown): void {
   if (typeof value !== 'string' || !value) {
     return
   }
-  store.commitZones((zones) => {
-    const zone = zones.zones.find((entry) => entry.id === zoneId)
-    if (zone) {
-      zone[key] = `#${value.toLowerCase()}`
-    }
-  })
+  store.commitZones(
+    (zones) => {
+      const zone = zones.zones.find((entry) => entry.id === zoneId)
+      if (zone) {
+        zone[key] = `#${value.toLowerCase()}`
+      }
+    },
+    { coalesce: `${zoneId}:${key}` },
+  )
 }
 
 function add(): void {
diff --git a/src/editor/store/editorStore.ts b/src/editor/store/editorStore.ts
index e9a2389..12bdaca 100644
--- a/src/editor/store/editorStore.ts
+++ b/src/editor/store/editorStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
-import { AUTOSAVE_DEBOUNCE_MS, UNDO_STACK_LIMIT } from '../../core/constants'
+import { AUTOSAVE_DEBOUNCE_MS, UNDO_COALESCE_MS, UNDO_STACK_LIMIT } from '../../core/constants'
 import type { HitTarget } from '../../core/interaction/hitTest'
 import type {
   ElementLibrary,
@@ -49,6 +49,8 @@ export const useEditorStore = defineStore('editor', () => {
   const toolHint = ref('')
   const activeFloor = ref(0)
   const activeElementId = ref<string | null>(null)
+  /** Transient "place camera" mode, armed from the room screenshots panel. */
+  const cameraPick = ref<{ roomId: string; imageIndex: number } | null>(null)
   const selection = ref<HitTarget[]>([])
   const undoStack = ref<WorkspaceSnapshot[]>([])
   const redoStack = ref<WorkspaceSnapshot[]>([])
@@ -59,6 +61,12 @@ export const useEditorStore = defineStore('editor', () => {
   const revision = ref(0)
 
   let autosaveTimer: number | undefined
+  /**
+   * Per-keystroke emitters (InputNumber, ColorPicker) pass a coalesce key so a
+   * burst of commits shares one undo snapshot. Any other history operation must
+   * clear this, otherwise a follow-up coalesced commit would skip its snapshot.
+   */
+  let lastCoalesce: { key: string; at: number } | null = null
 
   const canUndo = computed(() => drawingHistory.value?.canUndo() ?? undoStack.value.length > 0)
   const canRedo = computed(() => drawingHistory.value?.canRedo() ?? redoStack.value.length > 0)
@@ -124,12 +132,23 @@ export const useEditorStore = defineStore('editor', () => {
     scheduleAutosave()
   }
 
+  /** Pushes a snapshot unless the previous commit used the same fresh coalesce key. */
+  function pushUndoCoalesced(key: string | undefined): void {
+    const now = Date.now()
+    if (key && lastCoalesce?.key === key && now - lastCoalesce.at < UNDO_COALESCE_MS) {
+      lastCoalesce.at = now
+      return
+    }
+    pushUndo()
+    lastCoalesce = key ? { key, at: now } : null
+  }
+
   /** Default path for all document changes: snapshot → mutation → autosave. */
-  function commit(mutate: (doc: TrialDocument) => void): void {
+  function commit(mutate: (doc: TrialDocument) => void, options?: { coalesce?: string }): void {
     if (!document.value) {
       return
     }
-    pushUndo()
+    pushUndoCoalesced(options?.coalesce)
     mutate(document.value)
     markChanged()
   }
@@ -139,7 +158,7 @@ export const useEditorStore = defineStore('editor', () => {
     if (!document.value || !manifest.value) {
       return
     }
-    pushUndo()
+    pushUndoCoalesced(undefined)
     mutate(manifest.value)
     markChanged()
   }
@@ -149,16 +168,19 @@ export const useEditorStore = defineStore('editor', () => {
     if (!document.value || !libraryStore.library) {
       return
     }
-    pushUndo()
+    pushUndoCoalesced(undefined)
     mutate(libraryStore.library)
     markChanged()
   }
 
-  function commitZones(mutate: (zones: ZoneLibrary) => void): void {
+  function commitZones(
+    mutate: (zones: ZoneLibrary) => void,
+    options?: { coalesce?: string },
+  ): void {
     if (!document.value || !zonesStore.zoneLibrary) {
       return
     }
-    pushUndo()
+    pushUndoCoalesced(options?.coalesce)
     mutate(zonesStore.zoneLibrary)
     markChanged()
   }
@@ -170,19 +192,21 @@ export const useEditorStore = defineStore('editor', () => {
     if (!document.value || !libraryStore.library) {
       return
     }
-    pushUndo()
+    pushUndoCoalesced(undefined)
     mutate({ doc: document.value, library: libraryStore.library })
     markChanged()
   }
 
   /** For drags: one snapshot at the start, direct mutations until endDrag/cancelDrag. */
   function beginDrag(): void {
+    lastCoalesce = null
     pushUndo()
   }
   function endDrag(): void {
     markChanged()
   }
   function cancelDrag(): void {
+    lastCoalesce = null
     const previous = undoStack.value.pop()
     if (previous) {
       restoreSnapshot(previous)
@@ -190,6 +214,7 @@ export const useEditorStore = defineStore('editor', () => {
   }
 
   function undo(): void {
+    lastCoalesce = null
     if (drawingHistory.value) {
       drawingHistory.value.undo()
       return
@@ -205,6 +230,7 @@ export const useEditorStore = defineStore('editor', () => {
   }
 
   function redo(): void {
+    lastCoalesce = null
     if (drawingHistory.value) {
       drawingHistory.value.redo()
       return
@@ -250,6 +276,7 @@ export const useEditorStore = defineStore('editor', () => {
     undoStack.value = []
     redoStack.value = []
     drawingHistory.value = null
+    lastCoalesce = null
     selection.value = []
     activeTool.value = 'select'
     activeFloor.value = initialFloorIndex(doc.floors)
@@ -260,6 +287,34 @@ export const useEditorStore = defineStore('editor', () => {
     }
   }
 
+  /**
+   * Closes the workspace and reopens the start dialog. The LocalStorage autosave
+   * is kept (and flushed first) — it is the user's recovery path.
+   */
+  function closeWorkspace(): void {
+    window.clearTimeout(autosaveTimer)
+    if (dirty.value && document.value && manifest.value) {
+      saveAutosave({
+        manifest: manifest.value,
+        document: document.value,
+        library: libraryStore.library,
+        zones: zonesStore.zoneLibrary,
+      })
+    }
+    manifest.value = null
+    document.value = null
+    undoStack.value = []
+    redoStack.value = []
+    drawingHistory.value = null
+    lastCoalesce = null
+    selection.value = []
+    activeTool.value = 'select'
+    activeElementId.value = null
+    toolHint.value = ''
+    dirty.value = false
+    autosaveError.value = ''
+  }
+
   /** "Continue autosave": restores existing working copies and the workspace. */
   function restoreAutosave(payload: AutosavePayload): void {
     // Null would mean: at autosave time the library was not loaded yet —
@@ -273,6 +328,18 @@ export const useEditorStore = defineStore('editor', () => {
     setWorkspace(payload.manifest, payload.document, { markDirty: true })
   }
 
+  function armCameraPick(roomId: string, imageIndex: number): void {
+    cameraPick.value = { roomId, imageIndex }
+    toolHint.value = 'Click sets the camera position, drag the view direction — Esc cancels'
+  }
+
+  function cancelCameraPick(): void {
+    if (cameraPick.value) {
+      cameraPick.value = null
+      toolHint.value = ''
+    }
+  }
+
   function setSelection(targets: HitTarget[]): void {
     selection.value = targets
   }
@@ -354,6 +421,7 @@ export const useEditorStore = defineStore('editor', () => {
     toolHint,
     activeFloor,
     activeElementId,
+    cameraPick,
     selection,
     dirty,
     autosaveError,
@@ -380,7 +448,10 @@ export const useEditorStore = defineStore('editor', () => {
     undo,
     redo,
     setWorkspace,
+    closeWorkspace,
     restoreAutosave,
+    armCameraPick,
+    cancelCameraPick,
     setSelection,
     clearSelection,
     deleteSelection,
diff --git a/src/editor/tools/toolTypes.ts b/src/editor/tools/toolTypes.ts
index d549355..e931c78 100644
--- a/src/editor/tools/toolTypes.ts
+++ b/src/editor/tools/toolTypes.ts
@@ -19,7 +19,14 @@ export interface CanvasPointerEvent {
 export type ToolOverlay =
   | { kind: 'polyline'; points: Vec2[]; preview: Vec2 | null; activeEnd?: DrawEnd }
   | { kind: 'rect'; from: Vec2; to: Vec2 }
-  | { kind: 'vertices'; origin: Vec2; points: Vec2[]; activeIndex: number | null }
+  | {
+      kind: 'vertices'
+      origin: Vec2
+      points: Vec2[]
+      activeIndex: number | null
+      /** false renders an open polyline without the closing edge (routes). */
+      closed?: boolean
+    }
   | {
       kind: 'wallgaps'
       origin: Vec2
@@ -29,6 +36,7 @@ export type ToolOverlay =
       activeIndex: number | null
     }
   | { kind: 'ghost'; pos: Vec2; rotation: number; elementId: string }
+  | { kind: 'camera'; pos: Vec2; rotation: number }
   | {
       kind: 'resize'
       min: Vec2
diff --git a/src/editor/tools/useCameraPickMode.ts b/src/editor/tools/useCameraPickMode.ts
new file mode 100644
index 0000000..76b8a0d
--- /dev/null
+++ b/src/editor/tools/useCameraPickMode.ts
@@ -0,0 +1,81 @@
+import { computed, ref } from 'vue'
+import type { Vec2 } from '../../core/model/types'
+import { useEditorStore } from '../store/editorStore'
+import type { CanvasPointerEvent, ToolOverlay } from './toolTypes'
+
+/**
+ * While `store.cameraPick` is armed this mode swallows all pointer events:
+ * pointer-down sets the camera position, dragging turns the view direction,
+ * pointer-up writes `image.camera` in a single commit.
+ */
+export function useCameraPickMode() {
+  const store = useEditorStore()
+  const hover = ref<Vec2 | null>(null)
+  const drag = ref<{ pos: Vec2; rotation: number } | null>(null)
+
+  function reset(): void {
+    hover.value = null
+    drag.value = null
+  }
+
+  function onPointerDown(event: CanvasPointerEvent): boolean {
+    if (!store.cameraPick) {
+      return false
+    }
+    drag.value = { pos: event.snapped, rotation: 0 }
+    return true
+  }
+
+  function onPointerMove(event: CanvasPointerEvent): boolean {
+    if (!store.cameraPick) {
+      return false
+    }
+    if (drag.value) {
+      const dx = event.world[0] - drag.value.pos[0]
+      const dy = event.world[1] - drag.value.pos[1]
+      if (dx !== 0 || dy !== 0) {
+        const degrees = (Math.atan2(dy, dx) * 180) / Math.PI
+        drag.value = { pos: drag.value.pos, rotation: Math.round((degrees + 360) % 360) }
+      }
+    } else {
+      hover.value = event.snapped
+    }
+    return true
+  }
+
+  function onPointerUp(): boolean {
+    const pick = store.cameraPick
+    if (!pick) {
+      return false
+    }
+    const state = drag.value
+    if (state) {
+      store.commit((doc) => {
+        const image = doc.rooms.find((room) => room.id === pick.roomId)?.info?.images?.[
+          pick.imageIndex
+        ]
+        if (image) {
+          image.camera = { pos: state.pos, rotation: state.rotation }
+        }
+      })
+    }
+    reset()
+    store.cancelCameraPick()
+    return true
+  }
+
+  function cancel(): void {
+    reset()
+    store.cancelCameraPick()
+  }
+
+  const overlay = computed<ToolOverlay | null>(() => {
+    if (!store.cameraPick) {
+      return null
+    }
+    const preview = drag.value ?? (hover.value ? { pos: hover.value, rotation: 0 } : null)
+    return preview ? { kind: 'camera', pos: preview.pos, rotation: preview.rotation } : null
+  })
+
+  return { onPointerDown, onPointerMove, onPointerUp, cancel, overlay }
+}
diff --git a/src/editor/tools/useCanvasEvents.ts b/src/editor/tools/useCanvasEvents.ts
index b30cd91..6a8b64b 100644
--- a/src/editor/tools/useCanvasEvents.ts
+++ b/src/editor/tools/useCanvasEvents.ts
@@ -7,6 +7,7 @@ import { screenToWorld, type ViewTransform } from '../../core/interaction/viewTr
 import type { Vec2 } from '../../core/model/types'
 import { useEditorStore } from '../store/editorStore'
 import type { CanvasPointerEvent, EditorTool, ToolId, ToolOverlay } from './toolTypes'
+import { useCameraPickMode } from './useCameraPickMode'
 import { useClipboard } from './useClipboard'
 
 const TOOL_HOTKEYS: Record<string, ToolId> = {
@@ -26,17 +27,23 @@ export function useCanvasEvents(options: {
   transform: Readonly<Ref<ViewTransform>>
   isSpacePanning: Readonly<Ref<boolean>>
   tools: Partial<Record<ToolId, EditorTool>>
+  fitView?: () => void
 }) {
   const store = useEditorStore()
   const clipboard = useClipboard()
+  const cameraPick = useCameraPickMode()
   const cursorWorld = ref<Vec2 | null>(null)
+  const isFineGrid = ref(false)
 
   const activeTool = computed(() => options.tools[store.activeTool])
-  const overlay = computed<ToolOverlay | null>(() => activeTool.value?.overlay.value ?? null)
+  const overlay = computed<ToolOverlay | null>(
+    () => cameraPick.overlay.value ?? activeTool.value?.overlay.value ?? null,
+  )
 
   watch(
     () => store.activeTool,
     (next, previous) => {
+      cameraPick.cancel()
       options.tools[previous]?.deactivate?.()
       options.tools[next]?.activate?.()
     },
@@ -65,6 +72,9 @@ export function useCanvasEvents(options: {
       return
     }
     options.svgRef.value?.setPointerCapture(event.pointerId)
+    if (cameraPick.onPointerDown(canvasEvent)) {
+      return
+    }
     activeTool.value?.onPointerDown?.(canvasEvent)
   }
 
@@ -74,6 +84,9 @@ export function useCanvasEvents(options: {
       return
     }
     cursorWorld.value = canvasEvent.world
+    if (cameraPick.onPointerMove(canvasEvent)) {
+      return
+    }
     activeTool.value?.onPointerMove?.(canvasEvent)
   }
 
@@ -85,6 +98,9 @@ export function useCanvasEvents(options: {
     if (!canvasEvent) {
       return
     }
+    if (cameraPick.onPointerUp()) {
+      return
+    }
     activeTool.value?.onPointerUp?.(canvasEvent)
   }
 
@@ -107,9 +123,17 @@ export function useCanvasEvents(options: {
   }
 
   function onWindowKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Control') {
+      isFineGrid.value = true
+    }
     if (isUiOwnedTarget(event.target)) {
       return
     }
+    if (event.key === 'Escape' && store.cameraPick) {
+      cameraPick.cancel()
+      event.preventDefault()
+      return
+    }
     if (activeTool.value?.onKeydown?.(event)) {
       event.preventDefault()
       return
@@ -136,11 +160,25 @@ export function useCanvasEvents(options: {
       event.preventDefault()
       return
     }
+    if (key === 'f' && !ctrl && !event.altKey) {
+      options.fitView?.()
+      return
+    }
     if (event.key === 'Escape') {
       store.clearSelection()
     }
   }
 
+  function onWindowKeyup(event: KeyboardEvent): void {
+    if (event.key === 'Control') {
+      isFineGrid.value = false
+    }
+  }
+
+  function onWindowBlur(): void {
+    isFineGrid.value = false
+  }
+
   /**
    * Native clipboard events instead of keydown: they carry `clipboardData` in
    * every browser, while reading the clipboard through `navigator.clipboard`
@@ -180,12 +218,16 @@ export function useCanvasEvents(options: {
 
   onMounted(() => {
     window.addEventListener('keydown', onWindowKeydown)
+    window.addEventListener('keyup', onWindowKeyup)
+    window.addEventListener('blur', onWindowBlur)
     window.addEventListener('copy', onCopy)
     window.addEventListener('cut', onCut)
     window.addEventListener('paste', onPaste)
   })
   onBeforeUnmount(() => {
     window.removeEventListener('keydown', onWindowKeydown)
+    window.removeEventListener('keyup', onWindowKeyup)
+    window.removeEventListener('blur', onWindowBlur)
     window.removeEventListener('copy', onCopy)
     window.removeEventListener('cut', onCut)
     window.removeEventListener('paste', onPaste)
@@ -193,6 +235,7 @@ export function useCanvasEvents(options: {
 
   return {
     cursorWorld,
+    isFineGrid,
     overlay,
     onPointerDown,
     onPointerMove,
diff --git a/src/editor/tools/useRouteEditMode.ts b/src/editor/tools/useRouteEditMode.ts
new file mode 100644
index 0000000..6083958
--- /dev/null
+++ b/src/editor/tools/useRouteEditMode.ts
@@ -0,0 +1,191 @@
+import { computed, ref } from 'vue'
+import { VERTEX_HIT_RADIUS } from '../../core/constants'
+import { parseOpenPath, pointsToOpenPath } from '../../core/model/roomPath'
+import type { RouteLine, Vec2 } from '../../core/model/types'
+import { useEditorStore } from '../store/editorStore'
+import type { CanvasPointerEvent, ToolOverlay } from './toolTypes'
+
+const MIN_ROUTE_POINTS = 2
+
+/**
+ * Vertex editing for routes, entered by double-clicking a route with the select
+ * tool: drag points, click a midpoint to insert, Alt+click to delete, Escape or
+ * a click elsewhere exits. The select tool delegates its pointer events here
+ * first — mirrors the `useRoomResize` pattern.
+ */
+export function useRouteEditMode() {
+  const store = useEditorStore()
+  const editRouteId = ref<string | null>(null)
+  const activeIndex = ref<number | null>(null)
+  let drag: { index: number; moved: boolean } | null = null
+
+  function currentRoute(): RouteLine | null {
+    return store.document?.routes.find((route) => route.id === editRouteId.value) ?? null
+  }
+
+  function currentPoints(): Vec2[] | null {
+    const route = currentRoute()
+    return route ? parseOpenPath(route.path) : null
+  }
+
+  function writePoints(route: RouteLine, points: Vec2[]): void {
+    route.path = pointsToOpenPath(points)
+  }
+
+  function enter(routeId: string): void {
+    const route = store.document?.routes.find((entry) => entry.id === routeId)
+    if (!route) {
+      return
+    }
+    if (!parseOpenPath(route.path)) {
+      store.toolHint = 'This route path uses unsupported commands — vertex editing is disabled.'
+      return
+    }
+    editRouteId.value = routeId
+    activeIndex.value = null
+    store.toolHint = 'Drag points; click a midpoint to insert, Alt+click a point to delete.'
+  }
+
+  function exit(): void {
+    if (drag?.moved) {
+      store.cancelDrag()
+    }
+    drag = null
+    if (editRouteId.value) {
+      editRouteId.value = null
+      activeIndex.value = null
+      store.toolHint = ''
+    }
+  }
+
+  function hitIndex(points: Vec2[], world: Vec2): number {
+    return points.findIndex(
+      (point) => Math.hypot(world[0] - point[0], world[1] - point[1]) <= VERTEX_HIT_RADIUS,
+    )
+  }
+
+  function midpointIndex(points: Vec2[], world: Vec2): number {
+    for (let index = 0; index < points.length - 1; index += 1) {
+      const mid: Vec2 = [
+        (points[index][0] + points[index + 1][0]) / 2,
+        (points[index][1] + points[index + 1][1]) / 2,
+      ]
+      if (Math.hypot(world[0] - mid[0], world[1] - mid[1]) <= VERTEX_HIT_RADIUS) {
+        return index
+      }
+    }
+    return -1
+  }
+
+  function onPointerDown(event: CanvasPointerEvent): boolean {
+    if (!editRouteId.value) {
+      return false
+    }
+    const points = currentPoints()
+    if (!points) {
+      exit()
+      return false
+    }
+    const vertex = hitIndex(points, event.world)
+    if (vertex >= 0) {
+      if (event.event.altKey) {
+        if (points.length > MIN_ROUTE_POINTS) {
+          store.commit((doc) => {
+            const route = doc.routes.find((entry) => entry.id === editRouteId.value)
+            if (route) {
+              writePoints(route, points.filter((_, index) => index !== vertex))
+            }
+          })
+        }
+        activeIndex.value = null
+        return true
+      }
+      drag = { index: vertex, moved: false }
+      activeIndex.value = vertex
+      return true
+    }
+    const midpoint = midpointIndex(points, event.world)
+    if (midpoint >= 0) {
+      const inserted: Vec2 = [
+        (points[midpoint][0] + points[midpoint + 1][0]) / 2,
+        (points[midpoint][1] + points[midpoint + 1][1]) / 2,
+      ]
+      store.commit((doc) => {
+        const route = doc.routes.find((entry) => entry.id === editRouteId.value)
+        if (route) {
+          writePoints(route, [
+            ...points.slice(0, midpoint + 1),
+            inserted,
+            ...points.slice(midpoint + 1),
+          ])
+        }
+      })
+      activeIndex.value = midpoint + 1
+      return true
+    }
+    exit()
+    return true
+  }
+
+  function onPointerMove(event: CanvasPointerEvent): boolean {
+    if (!editRouteId.value) {
+      return false
+    }
+    if (drag) {
+      if (!drag.moved) {
+        store.beginDrag()
+        drag.moved = true
+      }
+      const route = currentRoute()
+      const points = currentPoints()
+      if (route && points) {
+        points[drag.index] = event.snapped
+        writePoints(route, points)
+      }
+    }
+    return true
+  }
+
+  function onPointerUp(): boolean {
+    if (!editRouteId.value) {
+      return false
+    }
+    if (drag) {
+      if (drag.moved) {
+        store.endDrag()
+      }
+      drag = null
+    }
+    return true
+  }
+
+  function onKeydown(event: KeyboardEvent): boolean {
+    if (!editRouteId.value) {
+      return false
+    }
+    if (event.key === 'Escape') {
+      exit()
+      return true
+    }
+    return false
+  }
+
+  const overlay = computed<ToolOverlay | null>(() => {
+    if (!editRouteId.value) {
+      return null
+    }
+    const points = currentPoints()
+    if (!points) {
+      return null
+    }
+    return {
+      kind: 'vertices',
+      origin: [0, 0],
+      points,
+      activeIndex: activeIndex.value,
+      closed: false,
+    }
+  })
+
+  return { enter, exit, onPointerDown, onPointerMove, onPointerUp, onKeydown, overlay }
+}
diff --git a/src/editor/tools/useSelectTool.ts b/src/editor/tools/useSelectTool.ts
index 3ab514d..289ddd9 100644
--- a/src/editor/tools/useSelectTool.ts
+++ b/src/editor/tools/useSelectTool.ts
@@ -1,10 +1,24 @@
-import { MARKER_BADGE_RADIUS, NUDGE_STEP, NUDGE_STEP_LARGE } from '../../core/constants'
-import { translateAbsolutePathStart } from '../../core/model/roomPath'
+import { computed, ref } from 'vue'
+import {
+  MARKER_BADGE_RADIUS,
+  MARQUEE_MIN_DRAG_PX,
+  NUDGE_STEP,
+  NUDGE_STEP_LARGE,
+} from '../../core/constants'
+import type { HitTarget } from '../../core/interaction/hitTest'
+import {
+  absolutePathStart,
+  parseOpenPath,
+  pointsBounds,
+  roomWorldPoints,
+  translateAbsolutePathStart,
+} from '../../core/model/roomPath'
 import type { TrialDocument, Vec2 } from '../../core/model/types'
 import { useEditorStore } from '../store/editorStore'
-import type { CanvasPointerEvent, EditorTool } from './toolTypes'
+import type { CanvasPointerEvent, EditorTool, ToolOverlay } from './toolTypes'
 import { useClipboard } from './useClipboard'
 import { useRoomResize } from './useRoomResize'
+import { useRouteEditMode } from './useRouteEditMode'
 
 const ARROW_DELTAS: Record<string, Vec2> = {
   ArrowLeft: [-1, 0],
@@ -13,11 +27,102 @@ const ARROW_DELTAS: Record<string, Vec2> = {
   ArrowDown: [0, 1],
 }
 
+interface WorldRect {
+  min: Vec2
+  max: Vec2
+}
+
+function inRect(rect: WorldRect, point: Vec2): boolean {
+  return (
+    point[0] >= rect.min[0] &&
+    point[0] <= rect.max[0] &&
+    point[1] >= rect.min[1] &&
+    point[1] <= rect.max[1]
+  )
+}
+
+function boundsOverlap(rect: WorldRect, bounds: WorldRect): boolean {
+  return (
+    bounds.min[0] <= rect.max[0] &&
+    bounds.max[0] >= rect.min[0] &&
+    bounds.min[1] <= rect.max[1] &&
+    bounds.max[1] >= rect.min[1]
+  )
+}
+
 export function useSelectTool(): EditorTool {
   const store = useEditorStore()
   const clipboard = useClipboard()
   const resize = useRoomResize()
+  const routeEdit = useRouteEditMode()
   let dragState: { last: Vec2; moved: boolean; markerId: string | null } | null = null
+  const marquee = ref<{ from: Vec2; to: Vec2; screenFrom: Vec2; additive: boolean } | null>(null)
+
+  function targetsInRect(rect: WorldRect): HitTarget[] {
+    const doc = store.document
+    if (!doc) {
+      return []
+    }
+    const targets: HitTarget[] = []
+    for (const room of doc.rooms) {
+      if (room.floor !== store.activeFloor) {
+        continue
+      }
+      const points = roomWorldPoints(room)
+      if (points.length > 0 && boundsOverlap(rect, pointsBounds(points))) {
+        targets.push({ kind: 'room', id: room.id })
+      }
+    }
+    for (const placement of doc.placements) {
+      if (placement.floor === store.activeFloor && inRect(rect, placement.pos)) {
+        targets.push({ kind: 'placement', id: placement.id })
+      }
+    }
+    for (const route of doc.routes) {
+      if (route.floor !== store.activeFloor) {
+        continue
+      }
+      const points = parseOpenPath(route.path) ?? [absolutePathStart(route.path)].filter(
+        (point): point is Vec2 => point !== null,
+      )
+      if (points.some((point) => inRect(rect, point))) {
+        targets.push({ kind: 'route', id: route.id })
+      }
+    }
+    return targets
+  }
+
+  function finishMarquee(event: CanvasPointerEvent): void {
+    const state = marquee.value
+    if (!state) {
+      return
+    }
+    marquee.value = null
+    const screenDistance = Math.hypot(
+      event.event.clientX - state.screenFrom[0],
+      event.event.clientY - state.screenFrom[1],
+    )
+    if (screenDistance < MARQUEE_MIN_DRAG_PX) {
+      if (!state.additive) {
+        store.clearSelection()
+      }
+      return
+    }
+    const rect: WorldRect = {
+      min: [Math.min(state.from[0], state.to[0]), Math.min(state.from[1], state.to[1])],
+      max: [Math.max(state.from[0], state.to[0]), Math.max(state.from[1], state.to[1])],
+    }
+    const found = targetsInRect(rect)
+    if (state.additive) {
+      const existing = new Set(store.selection.map((target) => target.id))
+      store.setSelection([
+        ...store.selection,
+        ...found.filter((target) => !existing.has(target.id)),
+      ])
+    } else {
+      store.setSelection(found)
+    }
+  }
 
   /** Hit-tested geometrically — `CalloutMarker.vue` is pointer-transparent. */
   function markerUnderPointer(world: Vec2): string | null {
@@ -59,6 +164,9 @@ export function useSelectTool(): EditorTool {
 
   return {
     onPointerDown(event: CanvasPointerEvent): void {
+      if (routeEdit.onPointerDown(event)) {
+        return
+      }
       if (resize.onPointerDown(event)) {
         return
       }
@@ -70,7 +178,13 @@ export function useSelectTool(): EditorTool {
       }
       const hit = event.hit
       if (!hit) {
-        store.clearSelection()
+        // Selection is only cleared on pointer-up: a drag from empty canvas is a marquee.
+        marquee.value = {
+          from: event.world,
+          to: event.world,
+          screenFrom: [event.event.clientX, event.event.clientY],
+          additive: event.event.shiftKey,
+        }
         return
       }
       const alreadySelected = store.selection.some((target) => target.id === hit.id)
@@ -89,6 +203,13 @@ export function useSelectTool(): EditorTool {
     },
 
     onPointerMove(event: CanvasPointerEvent): void {
+      if (routeEdit.onPointerMove(event)) {
+        return
+      }
+      if (marquee.value) {
+        marquee.value = { ...marquee.value, to: event.world }
+        return
+      }
       if (resize.onPointerMove(event)) {
         return
       }
@@ -116,7 +237,14 @@ export function useSelectTool(): EditorTool {
       dragState.last = event.snapped
     },
 
-    onPointerUp(): void {
+    onPointerUp(event: CanvasPointerEvent): void {
+      if (routeEdit.onPointerUp()) {
+        return
+      }
+      if (marquee.value) {
+        finishMarquee(event)
+        return
+      }
       if (resize.onPointerUp()) {
         return
       }
@@ -126,7 +254,17 @@ export function useSelectTool(): EditorTool {
       dragState = null
     },
 
+    onDblClick(event: CanvasPointerEvent): void {
+      if (event.hit?.kind === 'route') {
+        store.setSelection([event.hit])
+        routeEdit.enter(event.hit.id)
+      }
+    },
+
     onKeydown(event: KeyboardEvent): boolean {
+      if (routeEdit.onKeydown(event)) {
+        return true
+      }
       if (store.selection.length === 0) {
         return false
       }
@@ -144,10 +282,17 @@ export function useSelectTool(): EditorTool {
     },
 
     deactivate(): void {
+      routeEdit.exit()
       resize.cancel()
       dragState = null
+      marquee.value = null
     },
 
-    overlay: resize.overlay,
+    overlay: computed<ToolOverlay | null>(() => {
+      if (marquee.value) {
+        return { kind: 'rect', from: marquee.value.from, to: marquee.value.to }
+      }
+      return routeEdit.overlay.value ?? resize.overlay.value
+    }),
   }
 }

From a8fe547807d3373518077a6e6957fa956886b801 Mon Sep 17 00:00:00 2001
From: SuprexDE <46200229+SuprexDE@users.noreply.github.com>
Date: Sun, 2 Aug 2026 20:35:37 +0200
Subject: [PATCH 2/4] build(vite): use import attribute for package.json in
 vite.config

---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 12a8ac0..76e974d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import pkg from './package.json'
+import pkg from './package.json' with { type: 'json' }
 
 export default defineConfig({
   plugins: [

From 3ab0baf1d4081eabceb0ccc3f2cb2a6af39481ed Mon Sep 17 00:00:00 2001
From: SuprexDE <46200229+SuprexDE@users.noreply.github.com>
Date: Sun, 2 Aug 2026 22:31:50 +0200
Subject: [PATCH 3/4] fix(editor): scale handle hit radius with the zoom level

---
 src/core/constants.ts                    |  22 ++++-
 src/core/interaction/usePanZoom.ts       | 101 ++++++++++++++++++++++-
 src/core/render/RoutePath.vue            |   3 +-
 src/editor/EditorCanvas.vue              |  21 ++++-
 src/editor/EditorShell.vue               |   1 +
 src/editor/ToolOverlayLayer.vue          |  30 +++----
 src/editor/panels/ShortcutHelpDialog.vue |   8 +-
 src/editor/store/editorStore.ts          |  11 +++
 src/editor/tools/toolTypes.ts            |   2 +
 src/editor/tools/useCanvasEvents.ts      |  31 ++++++-
 src/editor/tools/useRoomResize.ts        |   9 +-
 src/editor/tools/useRoomTool.ts          |   8 +-
 src/editor/tools/useRouteEditMode.ts     |  13 ++-
 src/editor/tools/useSelectTool.ts        |  17 ++--
 src/editor/tools/useWallGapMode.ts       |  28 +++----
 15 files changed, 235 insertions(+), 70 deletions(-)

diff --git a/src/core/constants.ts b/src/core/constants.ts
index 18c9c71..233bea0 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -24,6 +24,12 @@ export const ZOOM_MAX = 8
 /** Scale step of the +/− zoom buttons. */
 export const ZOOM_BUTTON_FACTOR = 1.5
 
+/** Wheel deltas in line mode (Firefox) are converted to px before panning. */
+export const WHEEL_LINE_HEIGHT_PX = 16
+
+/** Below this pointer travel (screen px) a right-drag stays a plain right-click. */
+export const RIGHT_DRAG_PAN_THRESHOLD_PX = 4
+
 /** Fallback for elements without their own `size`, in map units. */
 export const ICON_DEFAULT_SIZE = 10
 
@@ -60,6 +66,18 @@ export const GRID_MIN_SPACING_PX = 8
 export const NUDGE_STEP = 1
 export const NUDGE_STEP_LARGE = 5
 
+/** Direction per arrow key; y grows downwards (screen and world alike). */
+export const ARROW_DIRECTIONS: Record<string, [number, number]> = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+}
+
+/** Arrow-key view panning (empty selection), in screen px; Shift uses the large step. */
+export const VIEW_PAN_STEP_PX = 40
+export const VIEW_PAN_STEP_LARGE_PX = 200
+
 /**
  * Rotations are limited to fixed steps (R key and properties select);
  * in sync with the `multipleOf` of the `rotation` field in the map schema.
@@ -73,8 +91,8 @@ export const ROTATION_VALUES = Array.from(
 /** Offset of duplicated objects (Ctrl+D) and of a paste without cursor position, in map units. */
 export const DUPLICATE_OFFSET = 5
 
-/** Hit radius for vertex handles and for switching the active drawing end, in map units. */
-export const VERTEX_HIT_RADIUS = 4
+/** Hit radius of vertex/resize handles in screen px; divided by the zoom for world-space hit tests. */
+export const VERTEX_HIT_RADIUS_PX = 8
 
 /** Below this pointer travel (screen px) an empty-canvas drag counts as a click, not a marquee. */
 export const MARQUEE_MIN_DRAG_PX = 4
diff --git a/src/core/interaction/usePanZoom.ts b/src/core/interaction/usePanZoom.ts
index e1c74ac..d7c19d2 100644
--- a/src/core/interaction/usePanZoom.ts
+++ b/src/core/interaction/usePanZoom.ts
@@ -1,7 +1,13 @@
 import { onBeforeUnmount, onMounted, readonly, ref, type Ref } from 'vue'
 import { select, type Selection } from 'd3-selection'
 import { zoom, zoomIdentity, type D3ZoomEvent, type ZoomBehavior } from 'd3-zoom'
-import { FIT_VIEW_PADDING_RATIO, ZOOM_MAX, ZOOM_MIN } from '../constants'
+import {
+  FIT_VIEW_PADDING_RATIO,
+  RIGHT_DRAG_PAN_THRESHOLD_PX,
+  WHEEL_LINE_HEIGHT_PX,
+  ZOOM_MAX,
+  ZOOM_MIN,
+} from '../constants'
 import type { Vec2 } from '../model/types'
 import { isEditableTarget } from './eventTargets'
 import type { ViewTransform } from './viewTransform'
@@ -14,18 +20,24 @@ export interface WorldBounds {
 export interface PanZoomOptions {
   /** Pan with the left mouse button as well — in the editor it stays reserved for the tools. */
   dragPan?: boolean
+  /** Pan with the right mouse button; a right-click without movement keeps its own action. */
+  rightDragPan?: boolean
 }
 
 /**
  * Wraps d3-zoom: mouse wheel zoom at the cursor position and pinch are always
- * active, panning via the middle mouse button, a held space bar or (with
- * `dragPan`) directly via the left mouse button.
+ * active, Shift/Alt + wheel pans instead, and dragging pans via the middle
+ * mouse button, a held space bar, the right button (`rightDragPan`) or the
+ * left button (`dragPan`).
  */
 export function usePanZoom(svgRef: Readonly<Ref<SVGSVGElement | null>>, options?: PanZoomOptions) {
   const transform = ref<ViewTransform>({ x: 0, y: 0, k: 1 })
   const isSpacePanning = ref(false)
+  const isPanning = ref(false)
   let behavior: ZoomBehavior<SVGSVGElement, unknown> | null = null
   let selection: Selection<SVGSVGElement, unknown, null, undefined> | null = null
+  let rightDragStart: Vec2 | null = null
+  let rightDragMoved = false
 
   const onKeyDown = (event: KeyboardEvent) => {
     if (
@@ -42,12 +54,56 @@ export function usePanZoom(svgRef: Readonly<Ref<SVGSVGElement | null>>, options?
       isSpacePanning.value = false
     }
   }
+  const onWindowBlur = () => {
+    isSpacePanning.value = false
+  }
   const preventMiddleClickScroll = (event: PointerEvent) => {
     if (event.button === 1) {
       event.preventDefault()
     }
   }
 
+  const onWheelPan = (event: WheelEvent) => {
+    if (!event.shiftKey && !event.altKey) {
+      return
+    }
+    // A shifted wheel arrives as deltaX on some platforms.
+    const raw = event.deltaX !== 0 ? event.deltaX : event.deltaY
+    const pixels = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? raw * WHEEL_LINE_HEIGHT_PX : raw
+    panBy(event.shiftKey ? pixels : 0, event.shiftKey ? 0 : pixels)
+    event.preventDefault()
+  }
+
+  const beginRightDrag = (event: PointerEvent) => {
+    if (event.button === 2) {
+      rightDragStart = [event.clientX, event.clientY]
+      rightDragMoved = false
+    }
+  }
+  const trackRightDrag = (event: PointerEvent) => {
+    if (!rightDragStart || rightDragMoved) {
+      return
+    }
+    const travel = Math.hypot(event.clientX - rightDragStart[0], event.clientY - rightDragStart[1])
+    rightDragMoved = travel > RIGHT_DRAG_PAN_THRESHOLD_PX
+  }
+  /** `rightDragMoved` has to survive this: `contextmenu` only fires after the pointer-up. */
+  const endRightDrag = () => {
+    rightDragStart = null
+  }
+  /**
+   * Capture on window so it runs before the listeners on the canvas itself:
+   * a right-drag must neither open the menu nor trigger the tool's own action.
+   */
+  const suppressContextMenuAfterDrag = (event: MouseEvent) => {
+    if (!rightDragMoved) {
+      return
+    }
+    rightDragMoved = false
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
   onMounted(() => {
     const svg = svgRef.value
     if (!svg) {
@@ -56,32 +112,67 @@ export function usePanZoom(svgRef: Readonly<Ref<SVGSVGElement | null>>, options?
     behavior = zoom<SVGSVGElement, unknown>()
       .scaleExtent([ZOOM_MIN, ZOOM_MAX])
       .filter((event: Event) => {
-        if (event.type === 'wheel' || event.type.startsWith('touch')) {
+        if (event.type === 'wheel') {
+          const wheel = event as WheelEvent
+          return !wheel.shiftKey && !wheel.altKey
+        }
+        if (event.type.startsWith('touch')) {
           return true
         }
         const mouse = event as MouseEvent
         return (
           mouse.button === 1 ||
+          (mouse.button === 2 && options?.rightDragPan === true) ||
           (mouse.button === 0 && (options?.dragPan === true || isSpacePanning.value))
         )
       })
+      .on('start', (event: D3ZoomEvent<SVGSVGElement, unknown>) => {
+        // Only a real drag grabs — wheel zoom and programmatic transforms must not.
+        isPanning.value = (event.sourceEvent as Event | null)?.type === 'mousedown'
+      })
       .on('zoom', (event: D3ZoomEvent<SVGSVGElement, unknown>) => {
         transform.value = { x: event.transform.x, y: event.transform.y, k: event.transform.k }
       })
+      .on('end', () => {
+        isPanning.value = false
+      })
     selection = select(svg)
     selection.call(behavior)
     svg.addEventListener('pointerdown', preventMiddleClickScroll)
+    svg.addEventListener('wheel', onWheelPan, { passive: false })
+    if (options?.rightDragPan === true) {
+      svg.addEventListener('pointerdown', beginRightDrag)
+      window.addEventListener('pointermove', trackRightDrag)
+      window.addEventListener('pointerup', endRightDrag)
+      window.addEventListener('pointercancel', endRightDrag)
+      window.addEventListener('contextmenu', suppressContextMenuAfterDrag, true)
+    }
     window.addEventListener('keydown', onKeyDown)
     window.addEventListener('keyup', onKeyUp)
+    window.addEventListener('blur', onWindowBlur)
   })
 
   onBeforeUnmount(() => {
     selection?.on('.zoom', null)
     svgRef.value?.removeEventListener('pointerdown', preventMiddleClickScroll)
+    svgRef.value?.removeEventListener('wheel', onWheelPan)
+    svgRef.value?.removeEventListener('pointerdown', beginRightDrag)
+    window.removeEventListener('pointermove', trackRightDrag)
+    window.removeEventListener('pointerup', endRightDrag)
+    window.removeEventListener('pointercancel', endRightDrag)
+    window.removeEventListener('contextmenu', suppressContextMenuAfterDrag, true)
     window.removeEventListener('keydown', onKeyDown)
     window.removeEventListener('keyup', onKeyUp)
+    window.removeEventListener('blur', onWindowBlur)
   })
 
+  /** Moves the viewport by screen pixels; d3 translates in world units, hence the division by k. */
+  function panBy(dx: number, dy: number): void {
+    if (behavior && selection) {
+      behavior.translateBy(selection, -dx / transform.value.k, -dy / transform.value.k)
+    }
+  }
+
   /** Scales around the viewport center; d3 clamps against the scale extent. */
   function zoomBy(factor: number): void {
     if (behavior && selection) {
@@ -125,7 +216,9 @@ export function usePanZoom(svgRef: Readonly<Ref<SVGSVGElement | null>>, options?
   return {
     transform: readonly(transform),
     isSpacePanning: readonly(isSpacePanning),
+    isPanning: readonly(isPanning),
     resetView,
     zoomBy,
+    panBy,
   }
 }
diff --git a/src/core/render/RoutePath.vue b/src/core/render/RoutePath.vue
index d638fdd..a3ade0d 100644
--- a/src/core/render/RoutePath.vue
+++ b/src/core/render/RoutePath.vue
@@ -34,8 +34,9 @@ defineProps<{
 .route-hit {
   fill: none;
   stroke: transparent;
-  stroke-width: 8;
+  stroke-width: 12;
   stroke-linecap: round;
   stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
 }
 </style>
diff --git a/src/editor/EditorCanvas.vue b/src/editor/EditorCanvas.vue
index f833c5f..5076c6a 100644
--- a/src/editor/EditorCanvas.vue
+++ b/src/editor/EditorCanvas.vue
@@ -30,7 +30,9 @@ const zonesStore = useZonesStore()
 
 const canvas = ref<InstanceType<typeof MapCanvas> | null>(null)
 const svgEl = computed(() => canvas.value?.svgEl ?? null)
-const { transform, isSpacePanning, resetView, zoomBy } = usePanZoom(svgEl)
+const { transform, isSpacePanning, isPanning, resetView, zoomBy, panBy } = usePanZoom(svgEl, {
+  rightDragPan: true,
+})
 const viewport = useElementSize(svgEl)
 
 const tools = {
@@ -56,6 +58,7 @@ const {
   isSpacePanning,
   tools,
   fitView: () => fitToDocument(),
+  panBy,
 })
 
 watch(cursorWorld, (pos) => emit('cursorMove', pos))
@@ -100,7 +103,11 @@ defineExpose({ fitToDocument, zoomBy })
   <MapCanvas
     ref="canvas"
     :transform="transform"
-    :class="{ panning: isSpacePanning, 'draw-cursor': isDrawTool && !isSpacePanning }"
+    :class="{
+      panning: isSpacePanning,
+      grabbing: isPanning,
+      'draw-cursor': isDrawTool && !isSpacePanning && !isPanning,
+    }"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"
     @pointerup="onPointerUp"
@@ -123,7 +130,11 @@ defineExpose({ fitToDocument, zoomBy })
       :key="`cam-${index}`"
       :camera="camera"
     />
-    <ToolOverlayLayer :overlay="overlay" :element-index="libraryStore.elementIndex" />
+    <ToolOverlayLayer
+      :overlay="overlay"
+      :element-index="libraryStore.elementIndex"
+      :scale="transform.k"
+    />
   </MapCanvas>
 </template>
 
@@ -135,4 +146,8 @@ defineExpose({ fitToDocument, zoomBy })
 .draw-cursor {
   cursor: crosshair;
 }
+
+.grabbing {
+  cursor: grabbing;
+}
 </style>
diff --git a/src/editor/EditorShell.vue b/src/editor/EditorShell.vue
index 9820c8d..9dc3866 100644
--- a/src/editor/EditorShell.vue
+++ b/src/editor/EditorShell.vue
@@ -186,6 +186,7 @@ onBeforeUnmount(() => {
           class="canvas-legend"
           :hints="[
             { icon: 'left', label: 'Use tool' },
+            { icon: 'right', label: 'Drag to pan' },
             { icon: 'wheel', label: 'Scroll to zoom' },
             { icon: 'wheel', label: 'Hold to pan' },
           ]"
diff --git a/src/editor/ToolOverlayLayer.vue b/src/editor/ToolOverlayLayer.vue
index b270810..7918b7c 100644
--- a/src/editor/ToolOverlayLayer.vue
+++ b/src/editor/ToolOverlayLayer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { VERTEX_HIT_RADIUS } from '../core/constants'
+import { VERTEX_HIT_RADIUS_PX } from '../core/constants'
 import type { ElementIndex } from '../core/model/elementIndex'
 import { pointsToOpenPath } from '../core/model/roomPath'
 import type { Placement, Vec2 } from '../core/model/types'
@@ -11,9 +11,11 @@ import type { ToolOverlay } from './tools/toolTypes'
 const props = defineProps<{
   overlay: ToolOverlay | null
   elementIndex: ElementIndex
+  /** Current zoom factor — handles keep a constant screen size. */
+  scale: number
 }>()
 
-const HANDLE_RADIUS = VERTEX_HIT_RADIUS / 2
+const handleRadius = computed(() => VERTEX_HIT_RADIUS_PX / 2 / props.scale)
 
 const polyline = computed(() => (props.overlay?.kind === 'polyline' ? props.overlay : null))
 const rect = computed(() => (props.overlay?.kind === 'rect' ? props.overlay : null))
@@ -90,7 +92,7 @@ const ghostElement = computed(() =>
         :key="index"
         :cx="point[0]"
         :cy="point[1]"
-        :r="HANDLE_RADIUS"
+        :r="handleRadius"
         class="handle"
         :class="{ first: index === 0, 'active-end': index === activeEndIndex }"
       />
@@ -118,10 +120,10 @@ const ghostElement = computed(() =>
         <rect
           v-for="(mid, index) in midpoints"
           :key="`m${index}`"
-          :x="mid[0] - HANDLE_RADIUS / 2"
-          :y="mid[1] - HANDLE_RADIUS / 2"
-          :width="HANDLE_RADIUS"
-          :height="HANDLE_RADIUS"
+          :x="mid[0] - handleRadius / 2"
+          :y="mid[1] - handleRadius / 2"
+          :width="handleRadius"
+          :height="handleRadius"
           class="midpoint"
         />
         <circle
@@ -129,7 +131,7 @@ const ghostElement = computed(() =>
           :key="`v${index}`"
           :cx="point[0]"
           :cy="point[1]"
-          :r="HANDLE_RADIUS"
+          :r="handleRadius"
           class="handle"
           :class="{ active: index === vertices.activeIndex }"
         />
@@ -150,8 +152,8 @@ const ghostElement = computed(() =>
             class="gap-segment"
             :class="{ active: index === wallGaps.activeIndex }"
           />
-          <circle :cx="gap[0][0]" :cy="gap[0][1]" :r="HANDLE_RADIUS" class="handle" />
-          <circle :cx="gap[1][0]" :cy="gap[1][1]" :r="HANDLE_RADIUS" class="handle" />
+          <circle :cx="gap[0][0]" :cy="gap[0][1]" :r="handleRadius" class="handle" />
+          <circle :cx="gap[1][0]" :cy="gap[1][1]" :r="handleRadius" class="handle" />
         </template>
       </g>
     </template>
@@ -172,10 +174,10 @@ const ghostElement = computed(() =>
       <rect
         v-for="(handle, index) in resize.handles"
         :key="`r${index}`"
-        :x="handle[0] - HANDLE_RADIUS"
-        :y="handle[1] - HANDLE_RADIUS"
-        :width="HANDLE_RADIUS * 2"
-        :height="HANDLE_RADIUS * 2"
+        :x="handle[0] - handleRadius"
+        :y="handle[1] - handleRadius"
+        :width="handleRadius * 2"
+        :height="handleRadius * 2"
         class="resize-handle"
         :class="{ active: index === resize.activeIndex }"
       />
diff --git a/src/editor/panels/ShortcutHelpDialog.vue b/src/editor/panels/ShortcutHelpDialog.vue
index 5dd5cd7..95da990 100644
--- a/src/editor/panels/ShortcutHelpDialog.vue
+++ b/src/editor/panels/ShortcutHelpDialog.vue
@@ -16,8 +16,12 @@ const groups: Array<{ title: string; entries: Array<{ keys: string[]; action: st
   {
     title: 'View',
     entries: [
-      { keys: ['Space', 'Drag'], action: 'Pan (also middle mouse button)' },
+      { keys: ['Space', 'Drag'], action: 'Pan (also middle or right mouse button)' },
       { keys: ['Wheel'], action: 'Zoom at cursor' },
+      { keys: ['Shift', 'Wheel'], action: 'Pan left / right' },
+      { keys: ['Alt', 'Wheel'], action: 'Pan up / down' },
+      { keys: ['←↑→↓'], action: 'Pan view (empty selection; Shift: faster)' },
+      { keys: ['PgUp', 'PgDn'], action: 'Floor up / down' },
       { keys: ['F'], action: 'Fit view to map' },
       { keys: ['Ctrl'], action: 'Fine grid (2.5 instead of 5 units)' },
     ],
@@ -26,7 +30,7 @@ const groups: Array<{ title: string; entries: Array<{ keys: string[]; action: st
     title: 'Selection',
     entries: [
       { keys: ['Shift', 'Click'], action: 'Add to / remove from selection' },
-      { keys: ['←↑→↓'], action: 'Nudge by 1 unit (Shift: 5)' },
+      { keys: ['←↑→↓'], action: 'Nudge selection by 1 unit (Shift: 5)' },
       { keys: ['Ctrl', 'D'], action: 'Duplicate' },
       { keys: ['Del'], action: 'Delete selection' },
       { keys: ['Esc'], action: 'Deselect / cancel drawing' },
diff --git a/src/editor/store/editorStore.ts b/src/editor/store/editorStore.ts
index 12bdaca..a1c4af9 100644
--- a/src/editor/store/editorStore.ts
+++ b/src/editor/store/editorStore.ts
@@ -348,6 +348,16 @@ export const useEditorStore = defineStore('editor', () => {
     selection.value = []
   }
 
+  /** Steps to the next existing floor; indices may have gaps and imported documents may be unsorted. */
+  function stepFloor(step: 1 | -1): void {
+    const ascending = [...floors.value].sort((a, b) => a.index - b.index)
+    const position = ascending.findIndex((floor) => floor.index === activeFloor.value)
+    const next = ascending[position + step]
+    if (next) {
+      activeFloor.value = next.index
+    }
+  }
+
   /** Removes all selected rooms/placements/routes from the document (undoable). */
   function deleteSelection(): void {
     if (selection.value.length === 0) {
@@ -454,6 +464,7 @@ export const useEditorStore = defineStore('editor', () => {
     cancelCameraPick,
     setSelection,
     clearSelection,
+    stepFloor,
     deleteSelection,
     generateId,
   }
diff --git a/src/editor/tools/toolTypes.ts b/src/editor/tools/toolTypes.ts
index e931c78..f2510f1 100644
--- a/src/editor/tools/toolTypes.ts
+++ b/src/editor/tools/toolTypes.ts
@@ -11,6 +11,8 @@ export type DrawEnd = 'head' | 'tail'
 export interface CanvasPointerEvent {
   world: Vec2
   snapped: Vec2
+  /** Handle hit radius in world units — `VERTEX_HIT_RADIUS_PX` at the current zoom. */
+  hitRadius: number
   hit: HitTarget | null
   event: MouseEvent
 }
diff --git a/src/editor/tools/useCanvasEvents.ts b/src/editor/tools/useCanvasEvents.ts
index 6a8b64b..77ef67a 100644
--- a/src/editor/tools/useCanvasEvents.ts
+++ b/src/editor/tools/useCanvasEvents.ts
@@ -1,5 +1,12 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
-import { GRID_SNAP_DEFAULT, GRID_SNAP_FINE } from '../../core/constants'
+import {
+  ARROW_DIRECTIONS,
+  GRID_SNAP_DEFAULT,
+  GRID_SNAP_FINE,
+  VERTEX_HIT_RADIUS_PX,
+  VIEW_PAN_STEP_LARGE_PX,
+  VIEW_PAN_STEP_PX,
+} from '../../core/constants'
 import { isUiOwnedTarget } from '../../core/interaction/eventTargets'
 import { hitFromEventTarget } from '../../core/interaction/hitTest'
 import { snapToGrid } from '../../core/interaction/snapping'
@@ -28,6 +35,7 @@ export function useCanvasEvents(options: {
   isSpacePanning: Readonly<Ref<boolean>>
   tools: Partial<Record<ToolId, EditorTool>>
   fitView?: () => void
+  panBy?: (dx: number, dy: number) => void
 }) {
   const store = useEditorStore()
   const clipboard = useClipboard()
@@ -60,7 +68,13 @@ export function useCanvasEvents(options: {
       options.transform.value,
     )
     const snapped = snapToGrid(world, event.ctrlKey ? GRID_SNAP_FINE : GRID_SNAP_DEFAULT)
-    return { world, snapped, hit: hitFromEventTarget(event.target), event }
+    return {
+      world,
+      snapped,
+      hitRadius: VERTEX_HIT_RADIUS_PX / options.transform.value.k,
+      hit: hitFromEventTarget(event.target),
+      event,
+    }
   }
 
   function onPointerDown(event: PointerEvent): void {
@@ -160,6 +174,19 @@ export function useCanvasEvents(options: {
       event.preventDefault()
       return
     }
+    const panDirection = ARROW_DIRECTIONS[event.key]
+    if (panDirection && !ctrl) {
+      const step = event.shiftKey ? VIEW_PAN_STEP_LARGE_PX : VIEW_PAN_STEP_PX
+      options.panBy?.(panDirection[0] * step, panDirection[1] * step)
+      event.preventDefault()
+      return
+    }
+    // Without the guard Ctrl+PageUp/PageDown would switch floor while the browser switches tab.
+    if ((event.key === 'PageUp' || event.key === 'PageDown') && !ctrl) {
+      store.stepFloor(event.key === 'PageUp' ? 1 : -1)
+      event.preventDefault()
+      return
+    }
     if (key === 'f' && !ctrl && !event.altKey) {
       options.fitView?.()
       return
diff --git a/src/editor/tools/useRoomResize.ts b/src/editor/tools/useRoomResize.ts
index 1d331f1..5ea79c2 100644
--- a/src/editor/tools/useRoomResize.ts
+++ b/src/editor/tools/useRoomResize.ts
@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue'
-import { ROOM_RESIZE_MIN_SIZE, VERTEX_HIT_RADIUS } from '../../core/constants'
+import { ROOM_RESIZE_MIN_SIZE } from '../../core/constants'
 import { pointsBounds, roomWorldPoints } from '../../core/model/roomPath'
 import { isRoomScalable, scaleRoomGeometry } from '../../core/model/roomScale'
 import type { Room, Vec2 } from '../../core/model/types'
@@ -9,6 +9,8 @@ import type { CanvasPointerEvent, ToolOverlay } from './toolTypes'
 
 /** Clockwise from top-left: even indexes are corners, odd ones edge midpoints. */
 const HANDLE_COUNT = 8
+/** Cap of the handle hit radius relative to the box: the center stays free for dragging. */
+const HANDLE_HIT_BOX_RATIO = 0.25
 const MOVES_X = [true, false, true, true, true, false, true, true]
 const MOVES_Y = [true, true, true, false, true, true, true, false]
 
@@ -101,9 +103,10 @@ export function useRoomResize() {
       return false
     }
     const handles = handlePositions(bounds.min, bounds.max)
+    const shortestEdge = Math.min(bounds.max[0] - bounds.min[0], bounds.max[1] - bounds.min[1])
+    const hitRadius = Math.min(event.hitRadius, shortestEdge * HANDLE_HIT_BOX_RATIO)
     const index = handles.findIndex(
-      (handle) =>
-        Math.hypot(event.world[0] - handle[0], event.world[1] - handle[1]) <= VERTEX_HIT_RADIUS,
+      (handle) => Math.hypot(event.world[0] - handle[0], event.world[1] - handle[1]) <= hitRadius,
     )
     if (index < 0) {
       return false
diff --git a/src/editor/tools/useRoomTool.ts b/src/editor/tools/useRoomTool.ts
index 6b999b8..e93461f 100644
--- a/src/editor/tools/useRoomTool.ts
+++ b/src/editor/tools/useRoomTool.ts
@@ -1,5 +1,5 @@
 import { computed, ref, watch } from 'vue'
-import { VERTEX_HIT_RADIUS, WALL_GAP_MIN_LENGTH } from '../../core/constants'
+import { WALL_GAP_MIN_LENGTH } from '../../core/constants'
 import { snapOrtho } from '../../core/interaction/snapping'
 import { pointsToOpenPath, pointsToRelativePath, shapeToPoints } from '../../core/model/roomPath'
 import type { Room, Vec2, WallGap } from '../../core/model/types'
@@ -126,7 +126,7 @@ export function useRoomTool(): EditorTool {
   function isEndpointClick(current: DrawingPoints, event: CanvasPointerEvent): boolean {
     return (
       current.points.length >= MIN_ENDPOINT_HIT_POINTS &&
-      distance(event.world, oppositeEndpoint(current)) <= VERTEX_HIT_RADIUS
+      distance(event.world, oppositeEndpoint(current)) <= event.hitRadius
     )
   }
 
@@ -241,7 +241,7 @@ export function useRoomTool(): EditorTool {
   ): void {
     const local: Vec2 = [event.world[0] - current.origin[0], event.world[1] - current.origin[1]]
     const vertexIndex = current.points.findIndex(
-      (point) => distance(point, local) <= VERTEX_HIT_RADIUS,
+      (point) => distance(point, local) <= event.hitRadius,
     )
     if (vertexIndex >= 0) {
       if (event.event.altKey) {
@@ -259,7 +259,7 @@ export function useRoomTool(): EditorTool {
     }
     const midIndex = current.points.findIndex((point, index) => {
       const next = current.points[(index + 1) % current.points.length]
-      return distance(midpoint(point, next), local) <= VERTEX_HIT_RADIUS
+      return distance(midpoint(point, next), local) <= event.hitRadius
     })
     if (midIndex >= 0) {
       const next = current.points[(midIndex + 1) % current.points.length]
diff --git a/src/editor/tools/useRouteEditMode.ts b/src/editor/tools/useRouteEditMode.ts
index 6083958..ebabda1 100644
--- a/src/editor/tools/useRouteEditMode.ts
+++ b/src/editor/tools/useRouteEditMode.ts
@@ -1,5 +1,4 @@
 import { computed, ref } from 'vue'
-import { VERTEX_HIT_RADIUS } from '../../core/constants'
 import { parseOpenPath, pointsToOpenPath } from '../../core/model/roomPath'
 import type { RouteLine, Vec2 } from '../../core/model/types'
 import { useEditorStore } from '../store/editorStore'
@@ -58,19 +57,19 @@ export function useRouteEditMode() {
     }
   }
 
-  function hitIndex(points: Vec2[], world: Vec2): number {
+  function hitIndex(points: Vec2[], world: Vec2, hitRadius: number): number {
     return points.findIndex(
-      (point) => Math.hypot(world[0] - point[0], world[1] - point[1]) <= VERTEX_HIT_RADIUS,
+      (point) => Math.hypot(world[0] - point[0], world[1] - point[1]) <= hitRadius,
     )
   }
 
-  function midpointIndex(points: Vec2[], world: Vec2): number {
+  function midpointIndex(points: Vec2[], world: Vec2, hitRadius: number): number {
     for (let index = 0; index < points.length - 1; index += 1) {
       const mid: Vec2 = [
         (points[index][0] + points[index + 1][0]) / 2,
         (points[index][1] + points[index + 1][1]) / 2,
       ]
-      if (Math.hypot(world[0] - mid[0], world[1] - mid[1]) <= VERTEX_HIT_RADIUS) {
+      if (Math.hypot(world[0] - mid[0], world[1] - mid[1]) <= hitRadius) {
         return index
       }
     }
@@ -86,7 +85,7 @@ export function useRouteEditMode() {
       exit()
       return false
     }
-    const vertex = hitIndex(points, event.world)
+    const vertex = hitIndex(points, event.world, event.hitRadius)
     if (vertex >= 0) {
       if (event.event.altKey) {
         if (points.length > MIN_ROUTE_POINTS) {
@@ -104,7 +103,7 @@ export function useRouteEditMode() {
       activeIndex.value = vertex
       return true
     }
-    const midpoint = midpointIndex(points, event.world)
+    const midpoint = midpointIndex(points, event.world, event.hitRadius)
     if (midpoint >= 0) {
       const inserted: Vec2 = [
         (points[midpoint][0] + points[midpoint + 1][0]) / 2,
diff --git a/src/editor/tools/useSelectTool.ts b/src/editor/tools/useSelectTool.ts
index 289ddd9..55f3969 100644
--- a/src/editor/tools/useSelectTool.ts
+++ b/src/editor/tools/useSelectTool.ts
@@ -1,5 +1,6 @@
 import { computed, ref } from 'vue'
 import {
+  ARROW_DIRECTIONS,
   MARKER_BADGE_RADIUS,
   MARQUEE_MIN_DRAG_PX,
   NUDGE_STEP,
@@ -20,13 +21,6 @@ import { useClipboard } from './useClipboard'
 import { useRoomResize } from './useRoomResize'
 import { useRouteEditMode } from './useRouteEditMode'
 
-const ARROW_DELTAS: Record<string, Vec2> = {
-  ArrowLeft: [-1, 0],
-  ArrowRight: [1, 0],
-  ArrowUp: [0, -1],
-  ArrowDown: [0, 1],
-}
-
 interface WorldRect {
   min: Vec2
   max: Vec2
@@ -125,13 +119,14 @@ export function useSelectTool(): EditorTool {
   }
 
   /** Hit-tested geometrically — `CalloutMarker.vue` is pointer-transparent. */
-  function markerUnderPointer(world: Vec2): string | null {
+  function markerUnderPointer(world: Vec2, hitRadius: number): string | null {
+    const radius = Math.max(MARKER_BADGE_RADIUS, hitRadius)
     const placement = (store.document?.placements ?? []).find((entry) => {
       if (!entry.marker || entry.floor !== store.activeFloor) {
         return false
       }
       const badge = [entry.pos[0] + entry.marker.offset[0], entry.pos[1] + entry.marker.offset[1]]
-      return Math.hypot(world[0] - badge[0], world[1] - badge[1]) <= MARKER_BADGE_RADIUS
+      return Math.hypot(world[0] - badge[0], world[1] - badge[1]) <= radius
     })
     return placement?.id ?? null
   }
@@ -170,7 +165,7 @@ export function useSelectTool(): EditorTool {
       if (resize.onPointerDown(event)) {
         return
       }
-      const markerId = markerUnderPointer(event.world)
+      const markerId = markerUnderPointer(event.world, event.hitRadius)
       if (markerId) {
         store.setSelection([{ kind: 'placement', id: markerId }])
         dragState = { last: event.snapped, moved: false, markerId }
@@ -272,7 +267,7 @@ export function useSelectTool(): EditorTool {
         clipboard.duplicateSelection()
         return true
       }
-      const arrow = ARROW_DELTAS[event.key]
+      const arrow = ARROW_DIRECTIONS[event.key]
       if (arrow) {
         const step = event.shiftKey ? NUDGE_STEP_LARGE : NUDGE_STEP
         store.commit((doc) => moveSelection(doc, [arrow[0] * step, arrow[1] * step]))
diff --git a/src/editor/tools/useWallGapMode.ts b/src/editor/tools/useWallGapMode.ts
index 7d7761e..b838980 100644
--- a/src/editor/tools/useWallGapMode.ts
+++ b/src/editor/tools/useWallGapMode.ts
@@ -1,9 +1,5 @@
 import { computed, ref, type ComputedRef } from 'vue'
-import {
-  VERTEX_HIT_RADIUS,
-  WALL_GAP_DEFAULT_LENGTH,
-  WALL_GAP_MIN_LENGTH,
-} from '../../core/constants'
+import { WALL_GAP_DEFAULT_LENGTH, WALL_GAP_MIN_LENGTH } from '../../core/constants'
 import { shapeToPoints } from '../../core/model/roomPath'
 import type { Room, Vec2, WallGap } from '../../core/model/types'
 import {
@@ -32,8 +28,6 @@ interface DragState {
   moved: boolean
 }
 
-const EDGE_HIT_DISTANCE = VERTEX_HIT_RADIUS
-
 /** Room-tool mode that cuts openings into the outer wall (`Room.wallGaps`). */
 export interface WallGapMode {
   onPointerDown(event: CanvasPointerEvent): void
@@ -101,7 +95,7 @@ export function useWallGapMode(): WallGapMode {
     return [point[0] - current.origin[0], point[1] - current.origin[1]]
   }
 
-  function findHandle(current: ActiveRoom, local: Vec2): DragState | null {
+  function findHandle(current: ActiveRoom, local: Vec2, hitRadius: number): DragState | null {
     const gaps = gapsOf()
     for (let index = 0; index < gaps.length; index += 1) {
       const endpoints = gapEndpoints(current.points, gaps[index])
@@ -109,24 +103,24 @@ export function useWallGapMode(): WallGapMode {
         continue
       }
       const [from, to] = endpoints
-      if (Math.hypot(local[0] - from[0], local[1] - from[1]) <= VERTEX_HIT_RADIUS) {
+      if (Math.hypot(local[0] - from[0], local[1] - from[1]) <= hitRadius) {
         return { gapIndex: index, end: 'start', moved: false }
       }
-      if (Math.hypot(local[0] - to[0], local[1] - to[1]) <= VERTEX_HIT_RADIUS) {
+      if (Math.hypot(local[0] - to[0], local[1] - to[1]) <= hitRadius) {
         return { gapIndex: index, end: 'end', moved: false }
       }
     }
     return null
   }
 
-  function findGap(current: ActiveRoom, local: Vec2): number {
+  function findGap(current: ActiveRoom, local: Vec2, hitRadius: number): number {
     const edges = edgeSegments(current.points)
     return gapsOf().findIndex((gap) => {
       if (gap.edge >= edges.length) {
         return false
       }
       const edge = edges[gap.edge]
-      if (distanceToEdge(edge, local) > EDGE_HIT_DISTANCE) {
+      if (distanceToEdge(edge, local) > hitRadius) {
         return false
       }
       const distance = projectOnEdge(edge, local)
@@ -134,11 +128,11 @@ export function useWallGapMode(): WallGapMode {
     })
   }
 
-  function createGap(current: ActiveRoom, world: Vec2, snapped: Vec2): boolean {
+  function createGap(current: ActiveRoom, world: Vec2, snapped: Vec2, hitRadius: number): boolean {
     const edges = edgeSegments(current.points)
     const worldLocal = toLocal(current, world)
     let bestIndex = -1
-    let bestDistance = EDGE_HIT_DISTANCE
+    let bestDistance = hitRadius
     edges.forEach((edge, index) => {
       const distance = distanceToEdge(edge, worldLocal)
       if (distance <= bestDistance) {
@@ -185,19 +179,19 @@ export function useWallGapMode(): WallGapMode {
       const current = active.value
       if (current) {
         const local = toLocal(current, event.world)
-        const handle = findHandle(current, local)
+        const handle = findHandle(current, local, event.hitRadius)
         if (handle) {
           drag.value = handle
           return
         }
         if (event.event.altKey) {
-          const gapIndex = findGap(current, local)
+          const gapIndex = findGap(current, local, event.hitRadius)
           if (gapIndex >= 0) {
             mutateGaps((gaps) => gaps.filter((_, index) => index !== gapIndex))
             return
           }
         }
-        if (createGap(current, event.world, event.snapped)) {
+        if (createGap(current, event.world, event.snapped, event.hitRadius)) {
           return
         }
       }

From 36a999a25ca82cd12a1fa5dabfc1b9fbeb2313c1 Mon Sep 17 00:00:00 2001
From: SuprexDE <46200229+SuprexDE@users.noreply.github.com>
Date: Tue, 4 Aug 2026 18:07:38 +0200
Subject: [PATCH 4/4] ci: add preview workflow and refactor deployment logic
 for GitHub Pages

---
 .github/workflows/preview.yml | 104 ++++++++++++++++++++++++++++++++++
 .github/workflows/release.yml |  25 ++++----
 public/CNAME                  |   1 +
 src/App.vue                   |   2 +-
 src/core/constants.ts         |   6 +-
 src/router.ts                 |   2 +-
 6 files changed, 120 insertions(+), 20 deletions(-)
 create mode 100644 .github/workflows/preview.yml
 create mode 100644 public/CNAME

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
new file mode 100644
index 0000000..a125c9e
--- /dev/null
+++ b/.github/workflows/preview.yml
@@ -0,0 +1,104 @@
+name: Preview
+
+on:
+  pull_request_target:
+    types: [labeled, unlabeled, synchronize, reopened, closed]
+
+concurrency:
+  group: preview-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+permissions: {}
+
+jobs:
+  build:
+    if: >-
+      (github.event.action == 'labeled' && github.event.label.name == 'preview') ||
+      (contains(fromJSON('["synchronize", "reopened"]'), github.event.action) &&
+       contains(github.event.pull_request.labels.*.name, 'preview'))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      sha: ${{ steps.head.outputs.sha }}
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          ref: refs/pull/${{ github.event.pull_request.number }}/head
+      - id: head
+        run: echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build --base=/pr-preview/pr-${{ github.event.pull_request.number }}/
+      - name: Remove root-only CNAME
+        run: rm -f dist/CNAME
+      - uses: actions/upload-artifact@v4
+        with:
+          name: preview-dist
+          path: dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    concurrency:
+      group: gh-pages-push
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/download-artifact@v4
+        with:
+          name: preview-dist
+          path: dist
+      - name: Deploy preview to gh-pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          branch: gh-pages
+          target-folder: pr-preview/pr-${{ github.event.pull_request.number }}
+          clean: true
+          force: false
+          commit-message: "Deploy preview for PR #${{ github.event.pull_request.number }}"
+      - uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: preview
+          number: ${{ github.event.pull_request.number }}
+          message: |
+            :mag: Preview: https://maps.outlasttrialsstats.com/pr-preview/pr-${{ github.event.pull_request.number }}/
+
+            Built from ${{ needs.build.outputs.sha }}. Updates on every push while the `preview` label is set.
+            Note: page reloads and deep links inside the preview are not supported.
+
+  cleanup:
+    if: >-
+      github.event.action == 'closed' ||
+      (github.event.action == 'unlabeled' && github.event.label.name == 'preview')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    concurrency:
+      group: gh-pages-push
+    steps:
+      - uses: actions/checkout@v7
+      - name: Remove preview folder from gh-pages
+        env:
+          PR: ${{ github.event.pull_request.number }}
+        run: |
+          git fetch origin gh-pages:gh-pages --depth=1 || exit 0
+          git switch gh-pages
+          [ -d "pr-preview/pr-$PR" ] || exit 0
+          git config user.name 'github-actions[bot]'
+          git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
+          git rm -r -q "pr-preview/pr-$PR"
+          git commit -m "Remove preview for PR #$PR"
+          git push origin gh-pages
+      - uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: preview
+          number: ${{ github.event.pull_request.number }}
+          delete: true
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 91468d1..c82abe4 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -22,11 +22,8 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: write
-      pages: write
-      id-token: write
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+    concurrency:
+      group: gh-pages-push
     steps:
       - name: Ensure release runs from main
         if: github.ref_name != 'main'
@@ -78,15 +75,14 @@ jobs:
       - name: Add SPA fallback
         run: cp dist/index.html dist/404.html
 
-      - uses: actions/configure-pages@v6
-
-      - uses: actions/upload-pages-artifact@v5
+      - name: Deploy to gh-pages
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
-          path: dist
-
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v5
+          folder: dist
+          branch: gh-pages
+          clean: true
+          clean-exclude: pr-preview/
+          force: false
 
       - name: Commit, tag and push
         env:
@@ -108,10 +104,9 @@ jobs:
       - name: Summary
         env:
           VERSION: ${{ steps.bump.outputs.version }}
-          PAGE_URL: ${{ steps.deployment.outputs.page_url }}
         run: |
           {
             echo "### Released v$VERSION"
             echo
-            echo "Deployed to $PAGE_URL"
+            echo "Deployed to https://maps.outlasttrialsstats.com"
           } >> "$GITHUB_STEP_SUMMARY"
diff --git a/public/CNAME b/public/CNAME
new file mode 100644
index 0000000..1791f7d
--- /dev/null
+++ b/public/CNAME
@@ -0,0 +1 @@
+maps.outlasttrialsstats.com
diff --git a/src/App.vue b/src/App.vue
index 0358ff4..d478211 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,7 +43,7 @@ function releasePressed() {
 
 onMounted(() => {
   // Preload the pressed variant so the first click does not flicker
-  new Image().src = '/images/cursor/cursor_pressed.webp'
+  new Image().src = `${import.meta.env.BASE_URL}images/cursor/cursor_pressed.webp`
 
   window.addEventListener('pointermove', onPointerMove, { passive: true })
   window.addEventListener('pointerdown', onPointerDown)
diff --git a/src/core/constants.ts b/src/core/constants.ts
index 233bea0..f895ce1 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -1,10 +1,10 @@
-/** Base URL of all content fetched at runtime (public/data). */
-export const DATA_BASE_URL = '/data'
+/** Base URL of all content fetched at runtime (public/data); BASE_URL always ends with '/'. */
+export const DATA_BASE_URL = `${import.meta.env.BASE_URL}data`
 export const MAPS_INDEX_URL = `${DATA_BASE_URL}/maps/index.json`
 export const ELEMENT_LIBRARY_URL = `${DATA_BASE_URL}/elements.json`
 export const ZONE_LIBRARY_URL = `${DATA_BASE_URL}/zones.json`
 export const CONTRIBUTORS_URL = `${DATA_BASE_URL}/contributors.json`
-export const SCHEMA_BASE_URL = '/schemas'
+export const SCHEMA_BASE_URL = `${import.meta.env.BASE_URL}schemas`
 
 /** Repo behind the join link of the contributors section. */
 export const GITHUB_REPO_URL = 'https://github.com/OutlastTrialsStats/maps'
diff --git a/src/router.ts b/src/router.ts
index c4facae..20a2152 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import MapOverview from './viewer/MapOverview.vue'
 
 export const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     { path: '/', name: 'overview', component: MapOverview },
     { path: '/maps/:mapId', name: 'viewer', component: () => import('./viewer/MapViewer.vue') },