From 6278f4c4066ff385ff4b772786d74b3dabc2fea5 Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Wed, 14 Oct 2026 23:05:04 +0300
Subject: [PATCH 1/7] Let users dock the action menu to any edge from the menu
 itself

Adds a dock picker at the end of the action menu with Bottom, Top, Left and
Right. The pick is saved per browser and wins over the host's
actionMenuPlacement, which stays the default until the user chooses. Left and
right dock the menu as a vertical rail, and the inspector column steps inwards
when the rail is on the right.
---
 .../editor/src/components/editor/index.tsx    | 18 +++--
 .../ui/action-menu/camera-actions.tsx         |  5 +-
 .../ui/action-menu/control-modes.tsx          |  4 +-
 .../src/components/ui/action-menu/index.tsx   | 25 ++++--
 .../ui/action-menu/measurement-control.tsx    | 23 ++++--
 .../ui/action-menu/placement-control.tsx      | 77 +++++++++++++++++++
 .../ui/action-menu/placement-preference.ts    | 19 +++++
 .../components/ui/action-menu/placement.ts    | 28 ++++++-
 .../ui/action-menu/view-toggles.tsx           | 26 +++++--
 .../editor/src/components/ui/right-stack.tsx  |  6 +-
 10 files changed, 201 insertions(+), 30 deletions(-)
 create mode 100644 packages/editor/src/components/ui/action-menu/placement-control.tsx
 create mode 100644 packages/editor/src/components/ui/action-menu/placement-preference.ts

diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 3fb99bbbed..fa8764708f 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -78,6 +78,7 @@ import { BoxSelectTool } from '../tools/select/box-select-tool'
 import { ToolManager } from '../tools/tool-manager'
 import { ActionMenu } from '../ui/action-menu'
 import { type ActionMenuPlacement, TOP_MENU_CLEARANCE } from '../ui/action-menu/placement'
+import { useActionMenuPlacementPreference } from '../ui/action-menu/placement-preference'
 import { CommandPalette, type CommandPaletteEmptyAction } from '../ui/command-palette'
 import { EditorCommands } from '../ui/command-palette/editor-commands'
 import { FloatingLevelSelector } from '../ui/floating-level-selector'
@@ -1445,8 +1446,13 @@ function EditorContent({
   commandPaletteEmptyAction,
 }: EditorProps) {
   const isMobile = useIsMobile()
+  // The user's own pick wins over the host's default placement.
+  const userMenuPlacement = useActionMenuPlacementPreference((state) => state.placement)
+  const menuPlacement = userMenuPlacement ?? actionMenuPlacement ?? 'bottom'
   // A top-docked menu sits at the top of the scene panes on desktop (layout v2).
-  const dockMenuOnTop = actionMenuPlacement === 'top' && !isMobile
+  const dockMenuOnTop = menuPlacement === 'top' && !isMobile
+  const dockMenuOnRight = menuPlacement === 'right' && !isMobile
+  const reserveBottomMenu = menuPlacement === 'bottom' || isMobile
   const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
   const isStudioMode = useEditor((s) => s.workspaceMode === 'studio')
   const presentationProjectId = projectId ?? null
@@ -1841,7 +1847,7 @@ function EditorContent({
                         </div>
                       ) : (
                         <div className="pointer-events-auto">
-                          <ActionMenu placement={actionMenuPlacement} />
+                          <ActionMenu placement={menuPlacement} />
                         </div>
                       ))}
                     {sceneOverlay}
@@ -1849,7 +1855,8 @@ function EditorContent({
                   {/* The inspector and the shortcuts card share one right column. */}
                   <RightStack
                     belowTopMenu={topMenuShown}
-                    reserveBottomMenu={!dockMenuOnTop}
+                    besideRightMenu={dockMenuOnRight}
+                    reserveBottomMenu={reserveBottomMenu}
                     helper={isCaptureMode ? null : <HelperManager />}
                     inspector={
                       isVersionPreviewMode || isCaptureMode || isStudioMode ? null : (
@@ -1928,12 +1935,13 @@ function EditorContent({
           {/* Fixed UI overlays scoped to the viewer area */}
           <ViewerOverlays left={overlayLeft}>
             <div className="pointer-events-auto">
-              <ActionMenu placement={actionMenuPlacement} />
+              <ActionMenu placement={menuPlacement} />
             </div>
             <RightStack
               helper={<HelperManager />}
               inspector={<PanelManager />}
-              reserveBottomMenu={actionMenuPlacement !== 'top' || isMobile}
+              besideRightMenu={dockMenuOnRight}
+              reserveBottomMenu={reserveBottomMenu}
             />
             <RiserDiagramPanel />
             {isFirstPersonMode && (
diff --git a/packages/editor/src/components/ui/action-menu/camera-actions.tsx b/packages/editor/src/components/ui/action-menu/camera-actions.tsx
index 3397c6d77f..ae0858bbd6 100644
--- a/packages/editor/src/components/ui/action-menu/camera-actions.tsx
+++ b/packages/editor/src/components/ui/action-menu/camera-actions.tsx
@@ -2,12 +2,15 @@
 
 import { emitter } from '@pascal-app/core'
 import Image from 'next/image'
+import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { visibleScene } from '../../../store/view-layout'
 import { ActionButton } from './action-button'
 import { FollowPascalToggle } from './follow-pascal-toggle'
+import { useActionMenuVertical } from './placement'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
+  const vertical = useActionMenuVertical()
   // Orbit stays useful in 2D-only (it spins the synced floorplan view), but
   // top view only tilts the hidden 3D camera — pointless without the canvas.
   const is2dOnly = useEditor((s) => visibleScene(s) === '2d')
@@ -25,7 +28,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
   }
 
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn('flex items-center gap-1', vertical && 'flex-col')}>
       {!hideOrbit && (
         <>
           {/* Orbit CCW */}
diff --git a/packages/editor/src/components/ui/action-menu/control-modes.tsx b/packages/editor/src/components/ui/action-menu/control-modes.tsx
index b95e1e27d8..459a28d36f 100644
--- a/packages/editor/src/components/ui/action-menu/control-modes.tsx
+++ b/packages/editor/src/components/ui/action-menu/control-modes.tsx
@@ -5,6 +5,7 @@ import { type LucideIcon, Trash2 } from 'lucide-react'
 import Image from 'next/image'
 import { Fragment } from 'react'
 import { cn } from './../../../lib/utils'
+import { useActionMenuVertical } from './placement'
 import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 import { MeasurementControl } from './measurement-control'
@@ -44,6 +45,7 @@ const controls: ControlConfig[] = [
 ]
 
 export function ControlModes() {
+  const vertical = useActionMenuVertical()
   const mode = useEditor((state) => state.mode)
   const selectionTool = useEditor((state) => state.floorplanSelectionTool)
   const armToolMode = useEditor((state) => state.armToolMode)
@@ -68,7 +70,7 @@ export function ControlModes() {
   }
 
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn('flex items-center gap-1', vertical && 'flex-col')}>
       {controls.map((c) => {
         const ModeIcon = c.icon
         const isImageMode = Boolean(c.imageSrc)
diff --git a/packages/editor/src/components/ui/action-menu/index.tsx b/packages/editor/src/components/ui/action-menu/index.tsx
index 5eb9312b89..66c260b134 100644
--- a/packages/editor/src/components/ui/action-menu/index.tsx
+++ b/packages/editor/src/components/ui/action-menu/index.tsx
@@ -13,6 +13,7 @@ import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
 import { FollowPascalPill } from './follow-pascal-pill'
 import { type ActionMenuPlacement, ActionMenuPlacementProvider } from './placement'
+import { PlacementControl } from './placement-control'
 import { SecondaryToggles } from './view-toggles'
 
 // Mobile bottom offset matches the viewer's overlap behind the sheet's
@@ -60,6 +61,7 @@ export function ActionMenu({
 
   // Mobile keeps the bottom rail: the sheet owns the rest of the screen.
   const effectivePlacement = isMobile ? 'bottom' : placement
+  const vertical = effectivePlacement === 'left' || effectivePlacement === 'right'
 
   return (
     <ActionMenuPlacementProvider value={effectivePlacement}>
@@ -72,9 +74,13 @@ export function ActionMenu({
               ? 'absolute left-1/2 origin-bottom -translate-x-1/2 scale-90'
               : inline
                 ? 'relative'
-                : effectivePlacement === 'top'
-                  ? 'fixed top-3 left-1/2 -translate-x-1/2'
-                  : 'fixed bottom-6 left-1/2 -translate-x-1/2',
+                : effectivePlacement === 'left'
+                  ? 'fixed top-1/2 left-4 -translate-y-1/2'
+                  : effectivePlacement === 'right'
+                    ? 'fixed top-1/2 right-4 -translate-y-1/2'
+                  : effectivePlacement === 'top'
+                    ? 'fixed top-3 left-1/2 -translate-x-1/2'
+                    : 'fixed bottom-6 left-1/2 -translate-x-1/2',
             'rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md',
             'transition-colors duration-200 ease-out',
             className,
@@ -95,12 +101,19 @@ export function ActionMenu({
               </div>
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-1 px-2 py-1.5">
+            <div
+              className={cn(
+                'flex items-center justify-center gap-1',
+                vertical ? 'flex-col px-1.5 py-2' : 'px-2 py-1.5',
+              )}
+            >
               <ControlModes />
-              <div className="mx-1 h-5 w-px bg-border" />
+              <div className={vertical ? 'my-1 h-px w-5 bg-border' : 'mx-1 h-5 w-px bg-border'} />
               <SecondaryToggles />
-              <div className="mx-1 h-5 w-px bg-border" />
+              <div className={vertical ? 'my-1 h-px w-5 bg-border' : 'mx-1 h-5 w-px bg-border'} />
               <CameraActions />
+              <div className={vertical ? 'my-1 h-px w-5 bg-border' : 'mx-1 h-5 w-px bg-border'} />
+              <PlacementControl />
             </div>
           )}
         </motion.div>
diff --git a/packages/editor/src/components/ui/action-menu/measurement-control.tsx b/packages/editor/src/components/ui/action-menu/measurement-control.tsx
index ffa064ccd0..c83fb476b9 100644
--- a/packages/editor/src/components/ui/action-menu/measurement-control.tsx
+++ b/packages/editor/src/components/ui/action-menu/measurement-control.tsx
@@ -26,7 +26,7 @@ import { VIEW_2D } from '../../../store/view-layout'
 import useFloorplanMode from '../../../store/use-floorplan-mode'
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
 import { ActionButton } from './action-button'
-import { useActionMenuPopupSide } from './placement'
+import { useActionMenuArrowCorner, useActionMenuArrowRotation, useActionMenuPopupSide, useActionMenuVertical } from './placement'
 
 const measurementOptions = [
   { kind: 'distance', label: 'Distance', icon: Ruler },
@@ -64,7 +64,10 @@ const constructionDimensionOptions = [
 
 export function MeasurementControl() {
   const popupSide = useActionMenuPopupSide()
+  const vertical = useActionMenuVertical()
+  const arrowCorner = useActionMenuArrowCorner()
   const [isOpen, setIsOpen] = useState(false)
+  const arrowRotation = useActionMenuArrowRotation(isOpen)
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
   const floorplanMode = useFloorplanMode((state) => state.mode)
@@ -141,12 +144,12 @@ export function MeasurementControl() {
 
   return (
     <Popover onOpenChange={setIsOpen} open={isOpen}>
-      <div className="flex items-center">
+      <div className={vertical ? 'relative' : 'flex items-center'}>
         <ActionButton
           aria-label={`Measure: ${selectedLabel}`}
           aria-pressed={isControlActive}
           className={cn(
-            'rounded-r-none p-0 text-muted-foreground',
+            vertical ? 'p-0 text-muted-foreground' : 'rounded-r-none p-0 text-muted-foreground',
             isControlActive
               ? 'bg-cyan-500/20 text-cyan-700 hover:bg-cyan-500/20 dark:text-cyan-400 dark:hover:text-accent-foreground'
               : 'hover:bg-cyan-500/15 hover:text-cyan-700 dark:hover:text-cyan-400',
@@ -166,7 +169,9 @@ export function MeasurementControl() {
             aria-haspopup="menu"
             aria-label="Measurement options"
             className={cn(
-              'flex h-11 w-6 items-center justify-center rounded-r-lg text-muted-foreground transition-colors',
+              vertical
+                ? `absolute top-0.5 ${arrowCorner} flex h-4 w-4 items-center justify-center rounded-sm transition-colors`
+                : 'flex h-11 w-6 items-center justify-center rounded-r-lg text-muted-foreground transition-colors',
               isOpen
                 ? 'bg-cyan-500/15 text-cyan-700 dark:text-cyan-400'
                 : 'hover:bg-cyan-500/10 hover:text-cyan-700 dark:hover:text-cyan-400',
@@ -175,7 +180,10 @@ export function MeasurementControl() {
           >
             <ChevronDown
               aria-hidden="true"
-              className={cn('h-3 w-3 transition-transform', isOpen && 'rotate-180')}
+              className={cn(
+                'h-3 w-3 transition-transform',
+                arrowRotation,
+              )}
             />
           </button>
         </PopoverTrigger>
@@ -183,7 +191,10 @@ export function MeasurementControl() {
 
       <PopoverContent
         align="center"
-        className="max-h-[70vh] w-64 overflow-y-auto rounded-lg border-border/45 bg-background/96 p-2 shadow-elevation-3 backdrop-blur-xl"
+        className={cn(
+          'max-h-[70vh] overflow-y-auto rounded-lg border-border/45 bg-background/96 p-2 shadow-elevation-3 backdrop-blur-xl',
+          vertical ? 'w-max min-w-40' : 'w-64',
+        )}
         side={popupSide}
         sideOffset={14}
       >
diff --git a/packages/editor/src/components/ui/action-menu/placement-control.tsx b/packages/editor/src/components/ui/action-menu/placement-control.tsx
new file mode 100644
index 0000000000..4aa13d34ac
--- /dev/null
+++ b/packages/editor/src/components/ui/action-menu/placement-control.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import { PanelBottom, PanelLeft, PanelRight, PanelTop } from 'lucide-react'
+import { useState } from 'react'
+import { cn } from '../../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { ActionButton } from './action-button'
+import { type ActionMenuPlacement, useActionMenuPlacement, useActionMenuPopupSide } from './placement'
+import { useActionMenuPlacementPreference } from './placement-preference'
+
+const PLACEMENT_OPTIONS: { value: ActionMenuPlacement; label: string; icon: typeof PanelBottom }[] =
+  [
+    { value: 'bottom', label: 'Bottom', icon: PanelBottom },
+    { value: 'top', label: 'Top', icon: PanelTop },
+    { value: 'left', label: 'Left', icon: PanelLeft },
+    { value: 'right', label: 'Right', icon: PanelRight },
+  ]
+
+/** Lets the user dock the action menu to another edge of the viewer. */
+export function PlacementControl() {
+  const placement = useActionMenuPlacement()
+  const popupSide = useActionMenuPopupSide()
+  const setPlacement = useActionMenuPlacementPreference((state) => state.setPlacement)
+  const [isOpen, setIsOpen] = useState(false)
+  const CurrentIcon =
+    PLACEMENT_OPTIONS.find((option) => option.value === placement)?.icon ?? PanelBottom
+
+  return (
+    <Popover onOpenChange={setIsOpen} open={isOpen}>
+      <PopoverTrigger asChild>
+        <ActionButton
+          className="group text-muted-foreground hover:bg-white/5"
+          isActive={isOpen}
+          label="Menu position"
+          size="icon"
+          variant="ghost"
+        >
+          <CurrentIcon aria-hidden="true" className="h-5 w-5" />
+        </ActionButton>
+      </PopoverTrigger>
+      <PopoverContent
+        align="center"
+        className="w-max min-w-36 rounded-lg border-border/45 bg-background/96 p-2 shadow-elevation-3 backdrop-blur-xl"
+        side={popupSide}
+        sideOffset={14}
+      >
+        <div aria-label="Menu position" className="space-y-1" role="menu">
+          {PLACEMENT_OPTIONS.map((option) => {
+            const OptionIcon = option.icon
+            const isSelected = option.value === placement
+            return (
+              <button
+                aria-checked={isSelected}
+                className={cn(
+                  'flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm transition-colors',
+                  isSelected
+                    ? 'bg-white/10 text-foreground'
+                    : 'text-muted-foreground hover:bg-white/8 hover:text-foreground',
+                )}
+                key={option.value}
+                onClick={() => {
+                  setPlacement(option.value)
+                  setIsOpen(false)
+                }}
+                role="menuitemradio"
+                type="button"
+              >
+                <OptionIcon aria-hidden="true" className="h-4 w-4" />
+                <span>{option.label}</span>
+              </button>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/packages/editor/src/components/ui/action-menu/placement-preference.ts b/packages/editor/src/components/ui/action-menu/placement-preference.ts
new file mode 100644
index 0000000000..de33756959
--- /dev/null
+++ b/packages/editor/src/components/ui/action-menu/placement-preference.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { ActionMenuPlacement } from './placement'
+
+type ActionMenuPlacementPreference = {
+  /** The user's own pick; null until they choose, so the host's default applies. */
+  placement: ActionMenuPlacement | null
+  setPlacement: (placement: ActionMenuPlacement) => void
+}
+
+export const useActionMenuPlacementPreference = create<ActionMenuPlacementPreference>()(
+  persist(
+    (set) => ({
+      placement: null,
+      setPlacement: (placement) => set({ placement }),
+    }),
+    { name: 'pascal-editor-action-menu-placement' },
+  ),
+)
diff --git a/packages/editor/src/components/ui/action-menu/placement.ts b/packages/editor/src/components/ui/action-menu/placement.ts
index 6e956122f6..354bd3b397 100644
--- a/packages/editor/src/components/ui/action-menu/placement.ts
+++ b/packages/editor/src/components/ui/action-menu/placement.ts
@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react'
 
 /** Viewport edge the action menu docks to. */
-export type ActionMenuPlacement = 'bottom' | 'top'
+export type ActionMenuPlacement = 'bottom' | 'top' | 'left' | 'right'
 
 /** Where chrome under a top-docked menu starts: below the host toolbar row and the menu itself. */
 export const TOP_MENU_CLEARANCE = '7.25rem'
@@ -15,6 +15,28 @@ export function useActionMenuPlacement(): ActionMenuPlacement {
 }
 
 /** Side tooltips and popovers open toward, away from the docked edge. */
-export function useActionMenuPopupSide(): 'top' | 'bottom' {
-  return useActionMenuPlacement() === 'top' ? 'bottom' : 'top'
+export function useActionMenuPopupSide(): 'top' | 'bottom' | 'left' | 'right' {
+  const placement = useActionMenuPlacement()
+  if (placement === 'left') return 'right'
+  if (placement === 'right') return 'left'
+  return placement === 'top' ? 'bottom' : 'top'
+}
+
+/** True when the menu is a vertical rail and its groups stack top to bottom. */
+export function useActionMenuVertical(): boolean {
+  const placement = useActionMenuPlacement()
+  return placement === 'left' || placement === 'right'
+}
+
+/** Corner of a rail button that holds its split-button arrow: the side facing the viewer. */
+export function useActionMenuArrowCorner(): 'left-0.5' | 'right-0.5' {
+  return useActionMenuPlacement() === 'right' ? 'left-0.5' : 'right-0.5'
+}
+
+/** Rotation that points a split-button arrow toward where its popover opens. */
+export function useActionMenuArrowRotation(isOpen: boolean): string | false {
+  const placement = useActionMenuPlacement()
+  if (placement === 'left') return '-rotate-90'
+  if (placement === 'right') return 'rotate-90'
+  return isOpen && 'rotate-180'
 }
diff --git a/packages/editor/src/components/ui/action-menu/view-toggles.tsx b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
index 5942884344..001b99bdc7 100644
--- a/packages/editor/src/components/ui/action-menu/view-toggles.tsx
+++ b/packages/editor/src/components/ui/action-menu/view-toggles.tsx
@@ -20,7 +20,7 @@ import { useUploadStore } from '../../../store/use-upload'
 import { SliderControl } from '../controls/slider-control'
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
 import { ActionButton } from './action-button'
-import { useActionMenuPopupSide } from './placement'
+import { useActionMenuArrowCorner, useActionMenuArrowRotation, useActionMenuPopupSide, useActionMenuVertical } from './placement'
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024 // 200MB
 const ACCEPTED_FILE_TYPES = '.glb,.gltf,image/jpeg,image/png,image/webp,image/gif'
@@ -661,11 +661,14 @@ function ReferenceListSection({
 
 function ReferencesControl() {
   const popupSide = useActionMenuPopupSide()
+  const vertical = useActionMenuVertical()
+  const arrowCorner = useActionMenuArrowCorner()
   const showScans = useViewer((state) => state.showScans)
   const setShowScans = useViewer((state) => state.setShowScans)
   const showGuides = useViewer((state) => state.showGuides)
   const setShowGuides = useViewer((state) => state.setShowGuides)
   const [isOpen, setIsOpen] = useState(false)
+  const arrowRotation = useActionMenuArrowRotation(isOpen)
   const [uploadError, setUploadError] = useState<string | null>(null)
 
   const scans = useLevelScans()
@@ -681,10 +684,10 @@ function ReferencesControl() {
 
   return (
     <Popover onOpenChange={setIsOpen} open={isOpen}>
-      <div className="flex items-center">
+      <div className={vertical ? 'relative' : 'flex items-center'}>
         <ActionButton
           className={cn(
-            'rounded-r-none p-0',
+            vertical ? 'p-0' : 'rounded-r-none p-0',
             anyVisible
               ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
               : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
@@ -711,7 +714,9 @@ function ReferencesControl() {
             aria-expanded={isOpen}
             aria-label="Reference settings"
             className={cn(
-              'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
+              vertical
+                ? `absolute top-0.5 ${arrowCorner} flex h-4 w-4 items-center justify-center rounded-sm transition-colors`
+                : 'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               anyVisible
                 ? isOpen
                   ? 'bg-black/6 dark:bg-white/10'
@@ -722,7 +727,12 @@ function ReferencesControl() {
             )}
             type="button"
           >
-            <ChevronDown className={cn('h-3 w-3 transition-transform', isOpen && 'rotate-180')} />
+            <ChevronDown
+              className={cn(
+                'h-3 w-3 transition-transform',
+                arrowRotation,
+              )}
+            />
           </button>
         </PopoverTrigger>
       </div>
@@ -949,16 +959,18 @@ function RiserControl() {
 // ── Exports ─────────────────────────────────────────────────────────────────
 
 export function SecondaryToggles() {
+  const vertical = useActionMenuVertical()
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn('flex items-center gap-1', vertical && 'flex-col')}>
       <ReferencesControl />
     </div>
   )
 }
 
 export function ViewToggles() {
+  const vertical = useActionMenuVertical()
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn('flex items-center gap-1', vertical && 'flex-col')}>
       <ScansControl />
       <GuidesControl />
       <ReferenceFloorControl />
diff --git a/packages/editor/src/components/ui/right-stack.tsx b/packages/editor/src/components/ui/right-stack.tsx
index ad359d30aa..0e5d81d6b6 100644
--- a/packages/editor/src/components/ui/right-stack.tsx
+++ b/packages/editor/src/components/ui/right-stack.tsx
@@ -63,6 +63,7 @@ export function RightStack({
   helper,
   reserveBottomMenu = true,
   belowTopMenu = false,
+  besideRightMenu = false,
 }: {
   inspector: ReactNode
   helper: ReactNode
@@ -70,6 +71,8 @@ export function RightStack({
   reserveBottomMenu?: boolean
   // Start below an action menu docked at the top of the stage.
   belowTopMenu?: boolean
+  // Step inwards from an action menu docked to the right edge.
+  besideRightMenu?: boolean
 }) {
   const isMobile = useIsMobile()
   const stackRef = useRef<HTMLDivElement>(null)
@@ -140,7 +143,8 @@ export function RightStack({
     <RightStackContext.Provider value={true}>
       <div
         className={cn(
-          'pointer-events-none fixed right-4 z-40 flex flex-col items-end gap-2',
+          'pointer-events-none fixed z-40 flex flex-col items-end gap-2',
+          besideRightMenu ? 'right-[5.5rem]' : 'right-4',
           reserveBottomMenu ? 'bottom-[74px]' : 'bottom-4',
           !belowTopMenu && 'top-20',
         )}

From 4dc30d6e56de976ae77f1828423bb6196a86bd62 Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Wed, 14 Oct 2026 23:20:47 +0300
Subject: [PATCH 2/7] Name the dock picker button for screen readers

---
 .../editor/src/components/ui/action-menu/placement-control.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/src/components/ui/action-menu/placement-control.tsx b/packages/editor/src/components/ui/action-menu/placement-control.tsx
index 4aa13d34ac..451e33b652 100644
--- a/packages/editor/src/components/ui/action-menu/placement-control.tsx
+++ b/packages/editor/src/components/ui/action-menu/placement-control.tsx
@@ -29,6 +29,7 @@ export function PlacementControl() {
     <Popover onOpenChange={setIsOpen} open={isOpen}>
       <PopoverTrigger asChild>
         <ActionButton
+          aria-label="Menu position"
           className="group text-muted-foreground hover:bg-white/5"
           isActive={isOpen}
           label="Menu position"

From 334d54daae95c24638306422fd0620ebc91f01d6 Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Thu, 15 Oct 2026 22:10:31 +0300
Subject: [PATCH 3/7] Document the left and right placements and the user's
 dock picker

---
 packages/editor/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/README.md b/packages/editor/README.md
index bfbc95ac07..885afd2ccd 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -39,7 +39,7 @@ export function ProjectPage({ projectId }: { projectId: string }) {
 | Prop | What it does |
 | --- | --- |
 | `loadingSlot` | Your loading surface, shown in the canvas panes of both layouts and in 2D and 3D while the scene loads. The editor still decides when loading is over and fires `onLoaderChange`; a failed load always shows the editor's error and retry screen. Omit it or pass `null` for the default loader. |
-| `actionMenuPlacement` | `'bottom'` (default) or `'top'`. With `'top'`, the v2 layout gives the tool menu its own row under the toolbar, centred on the scene panes and following them in split, so the bottom strip is free; v1 floats it at the top edge. Mobile keeps the bottom rail. |
+| `actionMenuPlacement` | `'bottom'` (default), `'top'`, `'left'` or `'right'`. With `'top'`, the v2 layout gives the tool menu its own row under the toolbar, centred on the scene panes and following them in split, so the bottom strip is free; v1 floats it at the top edge. `'left'` and `'right'` dock it as a vertical rail. This is only the default: users can move the menu from its own dock picker, and their pick is kept per browser. Mobile keeps the bottom rail. |
 | `viewBar` | Each pane's view bar (v2, default `true`). Turn it off for a host that shows one fixed view. |
 | `sceneOverlay` | Chrome over the 3D and 2D panes with the level selector and tool dock, hidden while no scene view is on screen. |
 | `stageOverlay` | A full-bleed surface over the whole stage; the scene stays mounted underneath. To show something beside the scene, register a view instead. |

From 192c8a28f6520e99a7bffc9c139b62332251749d Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Thu, 15 Oct 2026 22:23:40 +0300
Subject: [PATCH 4/7] Move the level selector clear of a left-docked menu

The left rail sits on the same edge as the level selector, so with a few
levels or a short window it covered the selector and blocked level clicks.
The selector now steps inwards past the rail, as the inspector does for the
right dock.
---
 packages/editor/src/components/editor/index.tsx       |  5 ++++-
 .../src/components/ui/floating-level-selector.tsx     | 11 +++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 6b08c26386..7dd89ecf66 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -1453,6 +1453,7 @@ function EditorContent({
   // A top-docked menu sits at the top of the scene panes on desktop (layout v2).
   const dockMenuOnTop = menuPlacement === 'top' && !isMobile
   const dockMenuOnRight = menuPlacement === 'right' && !isMobile
+  const dockMenuOnLeft = menuPlacement === 'left' && !isMobile
   const reserveBottomMenu = menuPlacement === 'bottom' || isMobile
   const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
   const isStudioMode = useEditor((s) => s.workspaceMode === 'studio')
@@ -1836,7 +1837,9 @@ function EditorContent({
               overlays={
                 <>
                   <SceneRegion>
-                    {!(isCaptureMode || stageOverlay) && <FloatingLevelSelector />}
+                    {!(isCaptureMode || stageOverlay) && (
+                      <FloatingLevelSelector besideLeftMenu={dockMenuOnLeft} />
+                    )}
                     {!(isVersionPreviewMode || isCaptureMode || isStudioMode) &&
                       (dockMenuOnTop ? (
                         // Own row under the toolbar, below the level selector's opening list (z-20).
diff --git a/packages/editor/src/components/ui/floating-level-selector.tsx b/packages/editor/src/components/ui/floating-level-selector.tsx
index 3570f1f3a0..f662bb5b84 100644
--- a/packages/editor/src/components/ui/floating-level-selector.tsx
+++ b/packages/editor/src/components/ui/floating-level-selector.tsx
@@ -454,7 +454,8 @@ function UnitFocusChip() {
 
 // ── Main component ──────────────────────────────────────────────────────────
 
-export function FloatingLevelSelector() {
+// Steps inwards from an action menu docked to the left edge.
+export function FloatingLevelSelector({ besideLeftMenu = false }: { besideLeftMenu?: boolean }) {
   // Desktop's view bar is a row above the stage; mobile's floats over it.
   const isMobile = useIsMobile()
   const selectedBuildingId = useViewer((s) => s.selection.buildingId)
@@ -641,7 +642,13 @@ export function FloatingLevelSelector() {
 
   return (
     <>
-      <div className={cn('pointer-events-auto absolute left-3 z-20', isMobile ? 'top-14' : 'top-3')}>
+      <div
+        className={cn(
+          'pointer-events-auto absolute z-20',
+          besideLeftMenu ? 'left-[5.5rem]' : 'left-3',
+          isMobile ? 'top-14' : 'top-3',
+        )}
+      >
         <div className="relative">
           {/* Floating + at top edge: a floor on top, under the roof level when one tops the stack */}
           {!draggingLevelId && (

From 00202904318ff617065301658d3c56f2da65a186 Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Thu, 15 Oct 2026 22:31:35 +0300
Subject: [PATCH 5/7] Only step the level selector and inspector aside while
 the menu shows

Version preview, capture, studio and read-only hide the action menu, so the
left and right insets now follow the menu being on screen, as the top inset
already did.
---
 packages/editor/src/components/editor/index.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 7dd89ecf66..a0a1d3db47 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -1511,10 +1511,12 @@ function EditorContent({
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
   const readOnly = useScene((s) => s.readOnly)
   // Chrome only steps down for the top menu while the menu is actually there.
-  const topMenuShown =
-    dockMenuOnTop &&
-    !(isVersionPreviewMode || isCaptureMode || isStudioMode) &&
-    shouldShowEditingControls(readOnly)
+  const editingControlsShown = shouldShowEditingControls(readOnly)
+  // Layout v2 also hides the menu in version preview, capture and studio.
+  const menuShown = editingControlsShown && !(isVersionPreviewMode || isCaptureMode || isStudioMode)
+  const topMenuShown = dockMenuOnTop && menuShown
+  const leftMenuShown = dockMenuOnLeft && menuShown
+  const rightMenuShown = dockMenuOnRight && menuShown
 
   const sidebarWidth = useSidebarStore((s) => s.width)
   const isSidebarCollapsed = useSidebarStore((s) => s.isCollapsed)
@@ -1838,7 +1840,7 @@ function EditorContent({
                 <>
                   <SceneRegion>
                     {!(isCaptureMode || stageOverlay) && (
-                      <FloatingLevelSelector besideLeftMenu={dockMenuOnLeft} />
+                      <FloatingLevelSelector besideLeftMenu={leftMenuShown} />
                     )}
                     {!(isVersionPreviewMode || isCaptureMode || isStudioMode) &&
                       (dockMenuOnTop ? (
@@ -1859,7 +1861,7 @@ function EditorContent({
                   {/* The inspector and the shortcuts card share one right column. */}
                   <RightStack
                     belowTopMenu={topMenuShown}
-                    besideRightMenu={dockMenuOnRight}
+                    besideRightMenu={rightMenuShown}
                     reserveBottomMenu={reserveBottomMenu}
                     helper={isCaptureMode ? null : <HelperManager />}
                     inspector={
@@ -1944,7 +1946,7 @@ function EditorContent({
             <RightStack
               helper={<HelperManager />}
               inspector={<PanelManager />}
-              besideRightMenu={dockMenuOnRight}
+              besideRightMenu={dockMenuOnRight && editingControlsShown}
               reserveBottomMenu={reserveBottomMenu}
             />
             <RiserDiagramPanel />

From 61066ae13f82f082ccfda651df8512f220a437fb Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Thu, 15 Oct 2026 22:41:25 +0300
Subject: [PATCH 6/7] Keep the side rails on the right edge and clear of the
 corner chrome

The right rail now renders on the stage edge next to the inspector column it
pushes aside, so a host pane on the right no longer splits the two apart. Both
rails centre in a band below the pane toolbars and above the corner chrome,
and scroll on their own when the window is too short for them.
---
 packages/editor/src/components/editor/index.tsx         | 7 +++++++
 packages/editor/src/components/ui/action-menu/index.tsx | 7 ++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index a0a1d3db47..2a62451b33 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -1843,6 +1843,7 @@ function EditorContent({
                       <FloatingLevelSelector besideLeftMenu={leftMenuShown} />
                     )}
                     {!(isVersionPreviewMode || isCaptureMode || isStudioMode) &&
+                      !dockMenuOnRight &&
                       (dockMenuOnTop ? (
                         // Own row under the toolbar, below the level selector's opening list (z-20).
                         // No transform: the menu's fixed pill must anchor to the scene region.
@@ -1858,6 +1859,12 @@ function EditorContent({
                       ))}
                     {sceneOverlay}
                   </SceneRegion>
+                  {/* A right rail sits on the stage edge with the column it pushes aside. */}
+                  {rightMenuShown && (
+                    <div className="pointer-events-auto">
+                      <ActionMenu placement="right" />
+                    </div>
+                  )}
                   {/* The inspector and the shortcuts card share one right column. */}
                   <RightStack
                     belowTopMenu={topMenuShown}
diff --git a/packages/editor/src/components/ui/action-menu/index.tsx b/packages/editor/src/components/ui/action-menu/index.tsx
index 66c260b134..0c06df3d49 100644
--- a/packages/editor/src/components/ui/action-menu/index.tsx
+++ b/packages/editor/src/components/ui/action-menu/index.tsx
@@ -74,10 +74,11 @@ export function ActionMenu({
               ? 'absolute left-1/2 origin-bottom -translate-x-1/2 scale-90'
               : inline
                 ? 'relative'
-                : effectivePlacement === 'left'
-                  ? 'fixed top-1/2 left-4 -translate-y-1/2'
+                : // Rails centre in a band that keeps the corner chrome clear, scrolling when it is short.
+                  effectivePlacement === 'left'
+                  ? 'no-scrollbar fixed top-24 bottom-16 left-4 my-auto h-fit max-h-[calc(100%-10rem)] overflow-y-auto'
                   : effectivePlacement === 'right'
-                    ? 'fixed top-1/2 right-4 -translate-y-1/2'
+                    ? 'no-scrollbar fixed top-24 bottom-16 right-4 my-auto h-fit max-h-[calc(100%-10rem)] overflow-y-auto'
                   : effectivePlacement === 'top'
                     ? 'fixed top-3 left-1/2 -translate-x-1/2'
                     : 'fixed bottom-6 left-1/2 -translate-x-1/2',

From b78a726a3e076cd87ec24970b94adcc9a51c9f62 Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Thu, 15 Oct 2026 22:53:56 +0300
Subject: [PATCH 7/7] Keep the user's dock with the editor's other preferences

The pick now lives in the editor's persisted UI preferences instead of its own
store, so it is restored on mount together with the layout and panels, through
the same hydration-gated storage. The right rail also leaves with the last
scene pane, as the other docks already did.
---
 .../editor/src/components/editor/index.tsx    |  9 +++++----
 .../ui/action-menu/placement-control.tsx      |  4 ++--
 .../ui/action-menu/placement-preference.ts    | 19 -------------------
 .../components/ui/action-menu/placement.ts    |  4 ++--
 packages/editor/src/store/use-editor.tsx      | 16 ++++++++++++++++
 5 files changed, 25 insertions(+), 27 deletions(-)
 delete mode 100644 packages/editor/src/components/ui/action-menu/placement-preference.ts

diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx
index 2a62451b33..8006731182 100644
--- a/packages/editor/src/components/editor/index.tsx
+++ b/packages/editor/src/components/editor/index.tsx
@@ -78,7 +78,6 @@ import { BoxSelectTool } from '../tools/select/box-select-tool'
 import { ToolManager } from '../tools/tool-manager'
 import { ActionMenu } from '../ui/action-menu'
 import { type ActionMenuPlacement, TOP_MENU_CLEARANCE } from '../ui/action-menu/placement'
-import { useActionMenuPlacementPreference } from '../ui/action-menu/placement-preference'
 import { CommandPalette, type CommandPaletteEmptyAction } from '../ui/command-palette'
 import { EditorCommands } from '../ui/command-palette/editor-commands'
 import { FloatingLevelSelector } from '../ui/floating-level-selector'
@@ -129,7 +128,7 @@ import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
 import { VectorEdgeExtractor } from './vector-edge-extractor'
 import { HostView } from './views/host-view'
-import { SceneRegion } from './views/scene-region'
+import { SceneRegion, useSceneSpan } from './views/scene-region'
 import { useActiveViewLayout, useEditorViews } from './views/use-editor-views'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
@@ -1448,7 +1447,7 @@ function EditorContent({
 }: EditorProps) {
   const isMobile = useIsMobile()
   // The user's own pick wins over the host's default placement.
-  const userMenuPlacement = useActionMenuPlacementPreference((state) => state.placement)
+  const userMenuPlacement = useEditor((state) => state.actionMenuPlacement)
   const menuPlacement = userMenuPlacement ?? actionMenuPlacement ?? 'bottom'
   // A top-docked menu sits at the top of the scene panes on desktop (layout v2).
   const dockMenuOnTop = menuPlacement === 'top' && !isMobile
@@ -1516,7 +1515,9 @@ function EditorContent({
   const menuShown = editingControlsShown && !(isVersionPreviewMode || isCaptureMode || isStudioMode)
   const topMenuShown = dockMenuOnTop && menuShown
   const leftMenuShown = dockMenuOnLeft && menuShown
-  const rightMenuShown = dockMenuOnRight && menuShown
+  const hasSceneView = useSceneSpan() !== null
+  // Every dock is scene chrome: it leaves with the last 3D or 2D pane.
+  const rightMenuShown = dockMenuOnRight && menuShown && hasSceneView
 
   const sidebarWidth = useSidebarStore((s) => s.width)
   const isSidebarCollapsed = useSidebarStore((s) => s.isCollapsed)
diff --git a/packages/editor/src/components/ui/action-menu/placement-control.tsx b/packages/editor/src/components/ui/action-menu/placement-control.tsx
index 451e33b652..c5fb9c9e96 100644
--- a/packages/editor/src/components/ui/action-menu/placement-control.tsx
+++ b/packages/editor/src/components/ui/action-menu/placement-control.tsx
@@ -3,10 +3,10 @@
 import { PanelBottom, PanelLeft, PanelRight, PanelTop } from 'lucide-react'
 import { useState } from 'react'
 import { cn } from '../../../lib/utils'
+import useEditor from '../../../store/use-editor'
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
 import { ActionButton } from './action-button'
 import { type ActionMenuPlacement, useActionMenuPlacement, useActionMenuPopupSide } from './placement'
-import { useActionMenuPlacementPreference } from './placement-preference'
 
 const PLACEMENT_OPTIONS: { value: ActionMenuPlacement; label: string; icon: typeof PanelBottom }[] =
   [
@@ -20,7 +20,7 @@ const PLACEMENT_OPTIONS: { value: ActionMenuPlacement; label: string; icon: type
 export function PlacementControl() {
   const placement = useActionMenuPlacement()
   const popupSide = useActionMenuPopupSide()
-  const setPlacement = useActionMenuPlacementPreference((state) => state.setPlacement)
+  const setPlacement = useEditor((state) => state.setActionMenuPlacement)
   const [isOpen, setIsOpen] = useState(false)
   const CurrentIcon =
     PLACEMENT_OPTIONS.find((option) => option.value === placement)?.icon ?? PanelBottom
diff --git a/packages/editor/src/components/ui/action-menu/placement-preference.ts b/packages/editor/src/components/ui/action-menu/placement-preference.ts
deleted file mode 100644
index de33756959..0000000000
--- a/packages/editor/src/components/ui/action-menu/placement-preference.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { create } from 'zustand'
-import { persist } from 'zustand/middleware'
-import type { ActionMenuPlacement } from './placement'
-
-type ActionMenuPlacementPreference = {
-  /** The user's own pick; null until they choose, so the host's default applies. */
-  placement: ActionMenuPlacement | null
-  setPlacement: (placement: ActionMenuPlacement) => void
-}
-
-export const useActionMenuPlacementPreference = create<ActionMenuPlacementPreference>()(
-  persist(
-    (set) => ({
-      placement: null,
-      setPlacement: (placement) => set({ placement }),
-    }),
-    { name: 'pascal-editor-action-menu-placement' },
-  ),
-)
diff --git a/packages/editor/src/components/ui/action-menu/placement.ts b/packages/editor/src/components/ui/action-menu/placement.ts
index 354bd3b397..bc4203b976 100644
--- a/packages/editor/src/components/ui/action-menu/placement.ts
+++ b/packages/editor/src/components/ui/action-menu/placement.ts
@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react'
+import type { ActionMenuPlacement } from '../../../store/use-editor'
 
-/** Viewport edge the action menu docks to. */
-export type ActionMenuPlacement = 'bottom' | 'top' | 'left' | 'right'
+export type { ActionMenuPlacement }
 
 /** Where chrome under a top-docked menu starts: below the host toolbar row and the menu itself. */
 export const TOP_MENU_CLEARANCE = '7.25rem'
diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx
index f64c2c5d56..9855f80b5d 100644
--- a/packages/editor/src/store/use-editor.tsx
+++ b/packages/editor/src/store/use-editor.tsx
@@ -230,6 +230,9 @@ export type CatalogCategory =
   | 'door'
 
 export type FloorplanSelectionTool = 'click' | 'marquee'
+/** Viewport edge the action menu docks to. */
+export type ActionMenuPlacement = 'bottom' | 'top' | 'left' | 'right'
+const ACTION_MENU_PLACEMENTS: readonly ActionMenuPlacement[] = ['bottom', 'top', 'left', 'right']
 export type GridSnapStep = 0.5 | 0.25 | 0.1 | 0.05
 
 export type NavigationSyncSource = '2d' | '3d'
@@ -497,6 +500,9 @@ type EditorState = {
   publishNavigationSyncPose: (pose: NavigationSyncPoseInput) => void
   floorplanSelectionTool: FloorplanSelectionTool
   setFloorplanSelectionTool: (tool: FloorplanSelectionTool) => void
+  /** The user's own dock for the action menu; null until they pick, so the host's default applies. */
+  actionMenuPlacement: ActionMenuPlacement | null
+  setActionMenuPlacement: (placement: ActionMenuPlacement) => void
   gridSnapStep: GridSnapStep
   setGridSnapStep: (step: GridSnapStep) => void
   // Cycles the grid step through GRID_SNAP_STEPS (0.5 → 0.25 → 0.1 → 0.05 →
@@ -597,6 +603,7 @@ type PersistedEditorLayoutState = Pick<
   | 'sidebarPanels'
   | 'pinnedViews'
   | 'floorplanSelectionTool'
+  | 'actionMenuPlacement'
   | 'gridSnapStep'
   | 'magneticSnap'
   | 'lastMeasurementKind'
@@ -621,6 +628,7 @@ export const DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE: PersistedEditorLayoutState =
   sidebarPanels: {},
   pinnedViews: {},
   floorplanSelectionTool: 'click',
+  actionMenuPlacement: null,
   gridSnapStep: 0.5,
   magneticSnap: true,
   lastMeasurementKind: DEFAULT_CREATABLE_MEASUREMENT_KIND,
@@ -876,6 +884,11 @@ export function normalizePersistedEditorLayoutState(
     sidebarPanels: normalizeSidebarPanels(state?.sidebarPanels),
     pinnedViews: normalizePinnedViews(state?.pinnedViews),
     floorplanSelectionTool: state?.floorplanSelectionTool === 'marquee' ? 'marquee' : 'click',
+    actionMenuPlacement: ACTION_MENU_PLACEMENTS.includes(
+      state?.actionMenuPlacement as ActionMenuPlacement,
+    )
+      ? (state?.actionMenuPlacement as ActionMenuPlacement)
+      : null,
     gridSnapStep: GRID_SNAP_STEPS.includes(state?.gridSnapStep as GridSnapStep)
       ? (state?.gridSnapStep as GridSnapStep)
       : DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
@@ -1513,6 +1526,8 @@ const useEditor = create<EditorState>()(
         set({ navigationSyncPose })
       },
       floorplanSelectionTool: 'click' as FloorplanSelectionTool,
+      actionMenuPlacement: null,
+      setActionMenuPlacement: (placement) => set({ actionMenuPlacement: placement }),
       setFloorplanSelectionTool: (tool) => set({ floorplanSelectionTool: tool }),
       gridSnapStep: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
       setGridSnapStep: (step) => set({ gridSnapStep: step }),
@@ -1664,6 +1679,7 @@ const useEditor = create<EditorState>()(
         sidebarPanels: state.sidebarPanels,
         pinnedViews: state.pinnedViews,
         floorplanSelectionTool: state.floorplanSelectionTool,
+        actionMenuPlacement: state.actionMenuPlacement,
         gridSnapStep: state.gridSnapStep,
         magneticSnap: state.magneticSnap,
         lastMeasurementKind: state.lastMeasurementKind,