@pascal-app/editor 1.0.4 → 1.0.6

package/src/components/tools/tool-manager.tsx

@@ -5,17 +5,21 @@ import {
   type CeilingNode,
   createSceneApi,
   type FenceNode,
+  isStoreyContent,
+  type LevelNode,
   nodeRegistry,
   type SlabNode,
+  storeyOf,
   useScene,
   type WallNode,
   type ZoneNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { type ComponentType, lazy, Suspense, useMemo } from 'react'
+import { type ComponentType, lazy, Suspense, useEffect, useMemo } from 'react'
 import { useRegisteredToolEnabled } from '../../hooks/use-registered-tool-enabled'
 import { useCeilingEditCeilingId } from '../../lib/ceiling-edit-session'
 import type { ReshapeKind } from '../../lib/interaction/scope'
+import { selectPlacedNode } from '../../lib/level-selection'
 import { paintRegionTargets, usePaintRegionMode } from '../../lib/paint-region-mode'
 import { siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
 import useEditor, { type Tool } from '../../store/use-editor'
@@ -48,7 +52,6 @@ import {
 import { FacingPoseIndicator } from './shared/facing-pose-indicator'
 import { SiteBoundaryEditor } from './site/site-boundary-editor'
 import { TerrainSculptTool } from './site/terrain-sculpt-tool'
-import { StairTool } from './stair/stair-tool'
 import { ZoneBoundaryEditor } from './zone/zone-boundary-editor'
 import { ZoneTool } from './zone/zone-tool'
 
@@ -109,7 +112,6 @@ function getRegistryTool(tool: Tool | null): ComponentType | null {
 // item / shelf / spawn now go through the registry path above.
 const tools: Partial<Record<Tool, React.FC>> = {
   'property-line': SiteBoundaryEditor,
-  stair: StairTool,
   zone: ZoneTool,
 }
 
@@ -178,16 +180,23 @@ export const ToolManager: React.FC = () => {
   const unit = useViewer((state) => state.unit)
   const setSelection = useViewer((state) => state.setSelection)
   const nodes = useScene((state) => state.nodes)
+  // Placing a roof makes its level active (selectPlacedNode); a wall, room, slab, stair or item tool
+  // armed there, then or after a level change, draws on the storey the roof level covers.
+  useEffect(() => {
+    if (!(tool && activeLevelId && isStoreyContent(tool, undefined))) return
+    const storeyId = storeyOf(useScene.getState().nodes, activeLevelId)
+    if (storeyId !== activeLevelId) setSelection({ levelId: storeyId as LevelNode['id'] })
+  }, [tool, activeLevelId, setSelection])
   const registrySceneApi = useMemo(() => createSceneApi(useScene), [])
   const registryToolContext = useMemo(
     () => ({
       activeLevelId: activeLevelId ?? null,
       isCameraDragging: () => useViewer.getState().cameraDragging,
       sceneApi: registrySceneApi,
-      selectNode: (nodeId: AnyNodeId) => setSelection({ selectedIds: [nodeId] }),
+      selectNode: selectPlacedNode,
       unit,
     }),
-    [activeLevelId, registrySceneApi, setSelection, unit],
+    [activeLevelId, registrySceneApi, unit],
   )
 
   // Building transform for the local group — all building-relative tools live inside this group

package/src/components/tools/wall/wall-drafting.test.ts

@@ -4,6 +4,7 @@ import {
   type AnyNodeId,
   applyHeightPatch,
   BlockNode,
+  BuildingNode,
   CeilingNode,
   createTerrainField,
   DoorNode as DoorSchema,
@@ -12,6 +13,7 @@ import {
   GROUND_SUPPORT_ID,
   getFloorPlacedElevation,
   initSpaceDetectionSync,
+  LevelNode as LevelSchema,
   nodeRegistry,
   registerNode,
   resolveTerrainWallConstructionOptions,
@@ -180,6 +182,116 @@ describe('createWallOnCurrentLevel', () => {
     useScene.temporal.getState().resume()
   })
 
+  describe('on a level below grade', () => {
+    const seedBasement = (thickness?: number) => {
+      const basement = LevelSchema.parse({
+        id: 'level_cellar',
+        parentId: 'building_house',
+        level: -1,
+        baseElevation: -2.5,
+        height: 2.5,
+      })
+      const main = LevelSchema.parse({
+        id: 'level_main',
+        parentId: 'building_house',
+        level: 0,
+        height: 2.5,
+      })
+      const building = BuildingNode.parse({
+        id: 'building_house',
+        children: [basement.id, main.id],
+      })
+      useScene.setState({
+        nodes: Object.fromEntries(
+          [building, basement, main].map((node) => [node.id, node as AnyNode]),
+        ),
+        rootNodeIds: [building.id],
+        dirtyNodes: new Set(),
+        collections: {},
+      } as never)
+      useEditor.setState({
+        toolDefaults: {
+          ...useEditor.getState().toolDefaults,
+          wall: thickness === undefined ? {} : { thickness },
+        },
+      } as never)
+      useScene.temporal.getState().clear()
+      useScene.temporal.getState().resume()
+    }
+    const select = (levelId: string) =>
+      useViewer.setState({
+        selection: { buildingId: 'building_house', levelId, zoneId: null, selectedIds: [] },
+      } as never)
+    let previousDefaults: ReturnType<typeof useEditor.getState>['toolDefaults']
+    beforeEach(() => {
+      previousDefaults = useEditor.getState().toolDefaults
+    })
+    afterEach(() => {
+      useEditor.setState({ toolDefaults: previousDefaults } as never)
+    })
+
+    test('the wall tool draws an 8 in CMU foundation wall with 2x4 furring flat inside, 0.241 m thick', () => {
+      seedBasement()
+      select('level_cellar')
+      const created = createWallOnCurrentLevel([0, 0], [4, 0])
+      expect(created?.thickness).toBe(0.241)
+      expect(created?.assembly?.layers).toMatchObject([
+        { material: 'cmu', core: true, thickness: 0.203 },
+        { role: 'furring', thickness: 0.038 },
+      ])
+      const stored = useScene.getState().nodes[created!.id] as WallNode
+      expect(stored.assembly).toEqual(created?.assembly)
+    })
+
+    test('only the walls against the ground are foundation walls: the perimeter is, a partition and a wall inside are not', () => {
+      seedBasement()
+      select('level_cellar')
+      const sides: Array<[[number, number], [number, number]]> = [
+        [
+          [0, 0],
+          [8, 0],
+        ],
+        [
+          [8, 0],
+          [8, 6],
+        ],
+        [
+          [8, 6],
+          [0, 6],
+        ],
+        [
+          [0, 6],
+          [0, 0],
+        ],
+      ]
+      for (const [start, end] of sides) {
+        expect(createWallOnCurrentLevel(start, end)?.thickness).toBe(0.241)
+      }
+      const partition = createWallOnCurrentLevel([4, 0], [4, 6])
+      expect(partition?.assembly).toBeUndefined()
+      const dangling = createWallOnCurrentLevel([0, 3], [3, 3])
+      expect(dangling?.assembly).toBeUndefined()
+      // a bay on the outside of the east wall is on the outline again
+      const bay = createWallOnCurrentLevel([8, 1], [11, 1])
+      expect(bay?.thickness).toBe(0.241)
+    })
+
+    test('the ground floor over it keeps the plain wall', () => {
+      seedBasement()
+      select('level_main')
+      const created = createWallOnCurrentLevel([0, 0], [4, 0])
+      expect(created?.assembly).toBeUndefined()
+    })
+
+    test('a thickness set in the tool defaults is kept, with no stack', () => {
+      seedBasement(0.3)
+      select('level_cellar')
+      const created = createWallOnCurrentLevel([0, 0], [4, 0])
+      expect(created?.thickness).toBe(0.3)
+      expect(created?.assembly).toBeUndefined()
+    })
+  })
+
   test('endpoint near an existing corner attaches to the corner instead of splitting', () => {
     const created = createWallOnCurrentLevel([2, 2], [3.99, 0])
 
@@ -726,63 +838,64 @@ describe('createWallOnCurrentLevel', () => {
     expect(useScene.temporal.getState().pastStates.length - before).toBe(1)
   })
 
-  test.each([
-    0.05, 0.18,
-  ])('a room divider preserves the footprint floor at %s and splits ceilings', (elevation) => {
-    const walls = [
-      makeWall([0, 0], [8, 0], 'wall_bottom'),
-      makeWall([8, 0], [8, 6], 'wall_right'),
-      makeWall([8, 6], [0, 6], 'wall_top'),
-      makeWall([0, 6], [0, 0], 'wall_left'),
-    ]
-    const slab = SlabNode.parse({
-      id: 'slab_auto',
-      parentId: LEVEL_ID,
-      polygon: [
-        [0, 0],
-        [8, 0],
-        [8, 6],
-        [0, 6],
-      ],
-      elevation,
-      floorHeight: elevation,
-      thickness: 0.32,
-      autoFromWalls: true,
-    })
-    const ceiling = CeilingNode.parse({
-      id: 'ceiling_auto',
-      parentId: LEVEL_ID,
-      polygon: slab.polygon,
-      autoFromWalls: true,
-    })
-    seedLevel(walls, [slab, ceiling])
-    useScene.setState({
-      nodes: migrateFloorPlates(
-        migrateCeilingRoomLinks(migrateRoomZones(useScene.getState().nodes).nodes).nodes,
-      ).nodes as Record<AnyNodeId, AnyNode>,
-    })
-    const stopDetection = initSpaceDetectionSync(useScene, useEditor)
-
-    try {
-      expect(createWallOnCurrentLevel([4, 0], [4, 6])).not.toBeNull()
-
-      const nodes = Object.values(useScene.getState().nodes)
-      const slabs = nodes.filter((node) => node.type === 'slab')
-      const ceilings = nodes.filter((node) => node.type === 'ceiling')
-      expect(slabs).toHaveLength(1)
-      expect(slabs[0]).toMatchObject({ plateRole: 'base', floorHeight: elevation })
-      expect(slabs[0]!.zoneIds).toHaveLength(2)
-      expect(ceilings).toHaveLength(2)
-      expect(
-        slabs.every(
-          (node) => node.autoFromWalls && node.elevation === elevation && node.thickness === 0.32,
-        ),
-      ).toBe(true)
-      expect(ceilings.every((node) => node.autoFromWalls)).toBe(true)
-    } finally {
-      stopDetection()
-    }
-  })
+  test.each([0.05, 0.18])(
+    'a room divider preserves the footprint floor at %s and splits ceilings',
+    (elevation) => {
+      const walls = [
+        makeWall([0, 0], [8, 0], 'wall_bottom'),
+        makeWall([8, 0], [8, 6], 'wall_right'),
+        makeWall([8, 6], [0, 6], 'wall_top'),
+        makeWall([0, 6], [0, 0], 'wall_left'),
+      ]
+      const slab = SlabNode.parse({
+        id: 'slab_auto',
+        parentId: LEVEL_ID,
+        polygon: [
+          [0, 0],
+          [8, 0],
+          [8, 6],
+          [0, 6],
+        ],
+        elevation,
+        floorHeight: elevation,
+        thickness: 0.32,
+        autoFromWalls: true,
+      })
+      const ceiling = CeilingNode.parse({
+        id: 'ceiling_auto',
+        parentId: LEVEL_ID,
+        polygon: slab.polygon,
+        autoFromWalls: true,
+      })
+      seedLevel(walls, [slab, ceiling])
+      useScene.setState({
+        nodes: migrateFloorPlates(
+          migrateCeilingRoomLinks(migrateRoomZones(useScene.getState().nodes).nodes).nodes,
+        ).nodes as Record<AnyNodeId, AnyNode>,
+      })
+      const stopDetection = initSpaceDetectionSync(useScene, useEditor)
+
+      try {
+        expect(createWallOnCurrentLevel([4, 0], [4, 6])).not.toBeNull()
+
+        const nodes = Object.values(useScene.getState().nodes)
+        const slabs = nodes.filter((node) => node.type === 'slab')
+        const ceilings = nodes.filter((node) => node.type === 'ceiling')
+        expect(slabs).toHaveLength(1)
+        expect(slabs[0]).toMatchObject({ plateRole: 'base', floorHeight: elevation })
+        expect(slabs[0]!.zoneIds).toHaveLength(2)
+        expect(ceilings).toHaveLength(2)
+        expect(
+          slabs.every(
+            (node) => node.autoFromWalls && node.elevation === elevation && node.thickness === 0.32,
+          ),
+        ).toBe(true)
+        expect(ceilings.every((node) => node.autoFromWalls)).toBe(true)
+      } finally {
+        stopDetection()
+      }
+    },
+  )
 
   test('close crossings reject the whole insertion without mutating the scene', () => {
     seedLevel([

package/src/components/ui/action-menu/action-button.tsx

@@ -7,6 +7,7 @@ import {
 } from './../../../components/ui/primitives/tooltip'
 import { triggerSFX } from './../../../lib/sfx-bus'
 import { cn } from './../../../lib/utils'
+import { useActionMenuPopupSide } from './placement'
 
 interface ActionButtonProps extends React.ComponentProps<typeof Button> {
   label: string
@@ -14,6 +15,8 @@ interface ActionButtonProps extends React.ComponentProps<typeof Button> {
   isActive?: boolean
   tooltipContent?: React.ReactNode
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /** The tooltip portals to `<body>`, so a button in a themed scope passes the scope here. */
+  tooltipClassName?: string
 }
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
@@ -26,12 +29,14 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
       isActive,
       tooltipContent,
       tooltipSide,
+      tooltipClassName,
       onClick,
       onMouseEnter,
       ...props
     },
     ref,
   ) => {
+    const popupSide = useActionMenuPopupSide()
     return (
       <Tooltip>
         <TooltipTrigger asChild>
@@ -68,7 +73,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             )}
           </Button>
         </TooltipTrigger>
-        <TooltipContent side={tooltipSide}>
+        <TooltipContent className={tooltipClassName} side={tooltipSide ?? popupSide}>
           {tooltipContent || (
             <p>
               {label} {shortcut && `(${shortcut})`}

package/src/components/ui/action-menu/camera-actions.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image'
 import useEditor from '../../../store/use-editor'
 import { visibleScene } from '../../../store/view-layout'
 import { ActionButton } from './action-button'
+import { FollowPascalToggle } from './follow-pascal-toggle'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
   // Orbit stays useful in 2D-only (it spins the synced floorplan view), but
@@ -29,7 +30,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
         <>
           {/* Orbit CCW */}
           <ActionButton
-            className="group hover:bg-white/5"
+            className="group hover:bg-black/4"
             label="Orbit Left"
             onClick={orbitCCW}
             size="icon"
@@ -46,7 +47,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
 
           {/* Orbit CW */}
           <ActionButton
-            className="group hover:bg-white/5"
+            className="group hover:bg-black/4"
             label="Orbit Right"
             onClick={orbitCW}
             size="icon"
@@ -63,10 +64,13 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
         </>
       )}
 
+      {/* Follow Pascal */}
+      {!is2dOnly && <FollowPascalToggle />}
+
       {/* Top View */}
       {!is2dOnly && (
         <ActionButton
-          className="group hover:bg-white/5"
+          className="group hover:bg-black/4"
           label="Top View"
           onClick={goToTopView}
           size="icon"

package/src/components/ui/action-menu/control-modes.tsx

@@ -8,6 +8,7 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 import { MeasurementControl } from './measurement-control'
+import { PointAskButton } from './point-ask-button'
 
 type ControlId = 'select' | 'box-select' | 'delete'
 
@@ -29,16 +30,16 @@ const controls: ControlConfig[] = [
     imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
-    color: 'hover:bg-blue-500/20 hover:text-blue-400',
-    activeColor: 'bg-blue-500/20 text-blue-400',
+    color: 'hover:bg-blue-500/20 hover:text-blue-600 dark:hover:text-blue-400',
+    activeColor: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 dark:hover:text-accent-foreground',
   },
   {
     id: 'delete',
     icon: Trash2,
     label: 'Delete',
     shortcut: 'X',
-    color: 'hover:bg-red-500/20 hover:text-red-400',
-    activeColor: 'bg-red-500/20 text-red-400',
+    color: 'hover:bg-red-500/20 hover:text-red-600 dark:hover:text-red-400',
+    activeColor: 'bg-red-500/20 text-red-600 dark:text-red-400 dark:hover:text-accent-foreground',
   },
 ]
 
@@ -75,14 +76,19 @@ export function ControlModes() {
 
         return (
           <Fragment key={c.id}>
-            {c.id === 'delete' ? <MeasurementControl /> : null}
+            {c.id === 'delete' ? (
+              <>
+                <PointAskButton />
+                <MeasurementControl />
+              </>
+            ) : null}
             <ActionButton
               className={cn(
                 'group text-muted-foreground',
                 !(isImageMode || isActive) && c.color,
                 !isImageMode && isActive && c.activeColor,
-                isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
-                isImageMode && !isActive && 'hover:bg-white/5',
+                isImageMode && isActive && 'bg-black/6 hover:bg-black/6 dark:bg-white/10',
+                isImageMode && !isActive && 'hover:bg-black/4',
               )}
               // A static hook for a host app that wants to point a first-run
               // tour at this button. Nothing here reads it.

package/src/components/ui/action-menu/follow-pascal-pill.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { AnimatePresence, motion } from 'motion/react'
+import { useReducedMotion } from '../../../hooks/use-reduced-motion'
+import useFollowPascal from '../../../store/use-follow-pascal'
+
+/**
+ * Offered while a build plays and the person has the camera: one press and the camera goes back to
+ * following. It comes up from where the toolbar is (origin-aware) and goes the same way.
+ */
+export function FollowPascalPill() {
+  const shows = useFollowPascal((state) => state.on && state.paused && state.building)
+  const resume = useFollowPascal((state) => state.resume)
+  const reduced = useReducedMotion()
+  return (
+    <AnimatePresence>
+      {shows ? (
+        <motion.button
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          className="-translate-x-1/2 fixed bottom-24 left-1/2 z-50 rounded-full border border-violet-400/40 bg-background/90 px-4 py-2 font-medium text-sm text-violet-700 shadow-xl dark:text-violet-200 backdrop-blur-md active:scale-[0.97]"
+          exit={{ opacity: 0, y: reduced ? 0 : 8, scale: reduced ? 1 : 0.96 }}
+          initial={{ opacity: 0, y: reduced ? 0 : 8, scale: reduced ? 1 : 0.96 }}
+          onClick={resume}
+          transition={reduced ? { duration: 0.12 } : { type: 'spring', bounce: 0, duration: 0.3 }}
+          type="button"
+        >
+          Resume following
+        </motion.button>
+      ) : null}
+    </AnimatePresence>
+  )
+}

package/src/components/ui/action-menu/follow-pascal-toggle.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Video } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import useFollowPascal from '../../../store/use-follow-pascal'
+import { ActionButton } from './action-button'
+
+/** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
+export function FollowPascalToggle({
+  className,
+  tooltipClassName,
+}: {
+  className?: string
+  tooltipClassName?: string
+}) {
+  const on = useFollowPascal((state) => state.on)
+  const setOn = useFollowPascal((state) => state.setOn)
+  return (
+    <ActionButton
+      aria-pressed={on}
+      className={cn(
+        on
+          ? 'bg-violet-500/20 text-violet-600 dark:text-violet-300 dark:hover:text-accent-foreground'
+          : 'hover:bg-black/4 hover:text-violet-600 dark:hover:text-violet-300',
+        className,
+      )}
+      label={`Follow Pascal: ${on ? 'On' : 'Off'}`}
+      onClick={() => setOn(!on)}
+      size="icon"
+      tooltipClassName={tooltipClassName}
+      variant="ghost"
+    >
+      <Video className="h-6 w-6" />
+    </ActionButton>
+  )
+}

package/src/components/ui/action-menu/index.tsx

@@ -11,6 +11,8 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
+import { FollowPascalPill } from './follow-pascal-pill'
+import { type ActionMenuPlacement, ActionMenuPlacementProvider } from './placement'
 import { SecondaryToggles } from './view-toggles'
 
 // Mobile bottom offset matches the viewer's overlap behind the sheet's
@@ -18,7 +20,16 @@ import { SecondaryToggles } from './view-toggles'
 // just above that strip instead of inside it.
 const MOBILE_BOTTOM_OFFSET = 24
 
-export function ActionMenu({ className }: { className?: string }) {
+export function ActionMenu({
+  className,
+  inline = false,
+  placement = 'bottom',
+}: {
+  className?: string
+  // Rendered in the flow of a layout slot instead of floating over the viewer.
+  inline?: boolean
+  placement?: ActionMenuPlacement
+}) {
   const isMobile = useIsMobile()
   const readOnly = useScene((s) => s.readOnly)
   const hasSelectionOnMobile = useViewer((s) => isMobile && s.selection.selectedIds.length > 0)
@@ -47,41 +58,53 @@ export function ActionMenu({ className }: { className?: string }) {
     ? { duration: 0 }
     : { type: 'spring' as const, bounce: 0.2, duration: 0.4 }
 
+  // Mobile keeps the bottom rail: the sheet owns the rest of the screen.
+  const effectivePlacement = isMobile ? 'bottom' : placement
+
   return (
-    <TooltipProvider>
-      <motion.div
-        className={cn(
-          'left-1/2 z-50 -translate-x-1/2',
-          isMobile ? 'absolute origin-bottom scale-90' : 'fixed bottom-6',
-          'rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md',
-          'transition-colors duration-200 ease-out',
-          className,
-        )}
-        layout
-        style={isMobile ? { bottom: MOBILE_BOTTOM_OFFSET } : undefined}
-        transition={transition}
-      >
-        {isMobile ? (
-          <div className="flex flex-col items-stretch gap-0.5 px-2 py-1.5">
-            {/* Row 1: control modes only */}
-            <div className="flex items-center justify-center gap-1">
-              <ControlModes />
+    <ActionMenuPlacementProvider value={effectivePlacement}>
+      <TooltipProvider>
+        <FollowPascalPill />
+        <motion.div
+          className={cn(
+            'z-50',
+            isMobile
+              ? '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',
+            'rounded-2xl border border-border bg-background/90 shadow-2xl backdrop-blur-md',
+            'transition-colors duration-200 ease-out',
+            className,
+          )}
+          layout
+          style={isMobile ? { bottom: MOBILE_BOTTOM_OFFSET } : undefined}
+          transition={transition}
+        >
+          {isMobile ? (
+            <div className="flex flex-col items-stretch gap-0.5 px-2 py-1.5">
+              {/* Row 1: control modes only */}
+              <div className="flex items-center justify-center gap-1">
+                <ControlModes />
+              </div>
+              {/* Row 2: secondary toggles (orbit + top view hidden) */}
+              <div className="flex items-center justify-center gap-1 border-border/50 border-t pt-1">
+                <SecondaryToggles />
+              </div>
             </div>
-            {/* Row 2: secondary toggles (orbit + top view hidden) */}
-            <div className="flex items-center justify-center gap-1 border-border/50 border-t pt-1">
+          ) : (
+            <div className="flex items-center justify-center gap-1 px-2 py-1.5">
+              <ControlModes />
+              <div className="mx-1 h-5 w-px bg-border" />
               <SecondaryToggles />
+              <div className="mx-1 h-5 w-px bg-border" />
+              <CameraActions />
             </div>
-          </div>
-        ) : (
-          <div className="flex items-center justify-center gap-1 px-2 py-1.5">
-            <ControlModes />
-            <div className="mx-1 h-5 w-px bg-border" />
-            <SecondaryToggles />
-            <div className="mx-1 h-5 w-px bg-border" />
-            <CameraActions />
-          </div>
-        )}
-      </motion.div>
-    </TooltipProvider>
+          )}
+        </motion.div>
+      </TooltipProvider>
+    </ActionMenuPlacementProvider>
   )
 }