@pascal-app/editor 1.0.3 → 1.0.5

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>
   )
 }

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

@@ -22,9 +22,11 @@ import { useState } from 'react'
 import type { CreatableMeasurementKind } from '../../../lib/measurement-kind'
 import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
+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'
 
 const measurementOptions = [
   { kind: 'distance', label: 'Distance', icon: Ruler },
@@ -61,6 +63,7 @@ const constructionDimensionOptions = [
 }[]
 
 export function MeasurementControl() {
+  const popupSide = useActionMenuPopupSide()
   const [isOpen, setIsOpen] = useState(false)
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
@@ -74,12 +77,10 @@ export function MeasurementControl() {
     (state) => state.toolDefaults['construction-dimension']?.mode,
   )
   const setMode = useEditor((state) => state.setMode)
-  const setPhase = useEditor((state) => state.setPhase)
   const setLastMeasurementKind = useEditor((state) => state.setLastMeasurementKind)
-  const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setTool = useEditor((state) => state.setTool)
   const setToolDefaults = useEditor((state) => state.setToolDefaults)
-  const setViewMode = useEditor((state) => state.setViewMode)
+  const showView = useEditor((state) => state.showView)
 
   const selectedOption =
     measurementOptions.find((option) => option.kind === selectedKind) ?? measurementOptions[0]
@@ -104,8 +105,6 @@ export function MeasurementControl() {
       : selectedOption.label
 
   const activateMeasurement = (kind: CreatableMeasurementKind) => {
-    setPhase('structure')
-    setStructureLayer('elements')
     setLastMeasurementKind(kind)
     setToolDefaults('measurement', { kind })
     setMode('build')
@@ -121,8 +120,6 @@ export function MeasurementControl() {
   }
 
   const activateSmartMeasurement = () => {
-    setPhase('structure')
-    setStructureLayer('elements')
     setToolDefaults('measurement', { kind: 'smart' })
     setMode('build')
     setTool('measurement')
@@ -136,9 +133,7 @@ export function MeasurementControl() {
       useFloorplanMode.getState().showExpertModeNotice('Construction Dimension')
       return
     }
-    setPhase('structure')
-    setStructureLayer('elements')
-    setViewMode('2d')
+    showView(VIEW_2D)
     setToolDefaults('construction-dimension', { chainMode, mode: dimensionMode })
     setMode('build')
     setTool('construction-dimension')
@@ -153,8 +148,8 @@ export function MeasurementControl() {
           className={cn(
             'rounded-r-none p-0 text-muted-foreground',
             isControlActive
-              ? 'bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20'
-              : 'hover:bg-cyan-500/15 hover:text-cyan-400',
+              ? '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',
           )}
           label={`Measure: ${selectedLabel}`}
           onClick={handlePrimaryClick}
@@ -173,8 +168,8 @@ export function MeasurementControl() {
             className={cn(
               'flex h-11 w-6 items-center justify-center rounded-r-lg text-muted-foreground transition-colors',
               isOpen
-                ? 'bg-cyan-500/15 text-cyan-400'
-                : 'hover:bg-cyan-500/10 hover:text-cyan-400',
+                ? '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',
             )}
             type="button"
           >
@@ -189,7 +184,7 @@ 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"
-        side="top"
+        side={popupSide}
         sideOffset={14}
       >
         <div aria-label="Measurement type" className="space-y-1" role="menu">
@@ -205,8 +200,8 @@ export function MeasurementControl() {
                 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',
+                    ? 'bg-black/6 dark:bg-white/10 text-foreground'
+                    : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground',
                 )}
                 key={option.kind}
                 onClick={() => {
@@ -241,8 +236,8 @@ export function MeasurementControl() {
                     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',
+                        ? 'bg-black/6 dark:bg-white/10 text-foreground'
+                        : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground',
                     )}
                     key={`${option.mode}-${option.chainMode}`}
                     onClick={() => {

package/src/components/ui/action-menu/placement.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+
+/** Viewport edge the action menu docks to. */
+export type ActionMenuPlacement = 'bottom' | 'top'
+
+/** Where chrome under a top-docked menu starts: below the host toolbar row and the menu itself. */
+export const TOP_MENU_CLEARANCE = '7.25rem'
+
+const ActionMenuPlacementContext = createContext<ActionMenuPlacement>('bottom')
+
+export const ActionMenuPlacementProvider = ActionMenuPlacementContext.Provider
+
+export function useActionMenuPlacement(): ActionMenuPlacement {
+  return useContext(ActionMenuPlacementContext)
+}
+
+/** Side tooltips and popovers open toward, away from the docked edge. */
+export function useActionMenuPopupSide(): 'top' | 'bottom' {
+  return useActionMenuPlacement() === 'top' ? 'bottom' : 'top'
+}

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

@@ -0,0 +1,52 @@
+'use client'
+
+import { useHasPointAskHandler } from '@pascal-app/core'
+import { canPoint, enterPointMode, leavePointMode } from '../../../lib/point-ask/session'
+import { cn } from '../../../lib/utils'
+import useEditor from '../../../store/use-editor'
+import { usePointAsk } from '../../../store/use-point-ask'
+import { isViewVisible, VIEW_3D } from '../../../store/view-layout'
+import { ActionButton } from './action-button'
+
+/**
+ * Point and ask (key C): the toolbar's way into the mode where hovering names what Pascal would
+ * be told about and a click opens a bubble to ask. Offered only where a host answers asks. In
+ * the 2D plan and the walkthrough it is disabled and says so (v1 works in the 3D view).
+ */
+export function PointAskButton() {
+  const available = useHasPointAskHandler()
+  const active = usePointAsk((s) => s.active)
+  const sceneVisible = useEditor((s) => isViewVisible(s, VIEW_3D))
+  const firstPerson = useEditor((s) => s.isFirstPersonMode)
+  if (!(available || active)) return null
+  const unavailable = !active && (!sceneVisible || firstPerson)
+  return (
+    <ActionButton
+      className={cn(
+        'group text-muted-foreground',
+        active
+          ? 'bg-[#a99bff]/20 text-[#5d49df] dark:text-[#c9c1ff] dark:hover:text-accent-foreground'
+          : 'hover:bg-[#a99bff]/15 hover:text-[#5d49df] dark:hover:text-[#c9c1ff]',
+      )}
+      data-guide-target="mode-point-ask"
+      disabled={unavailable}
+      isActive={active}
+      label="Point and ask"
+      onClick={() => {
+        if (active) leavePointMode()
+        else if (canPoint()) enterPointMode(true)
+      }}
+      shortcut="C"
+      size="icon"
+      tooltipContent={
+        unavailable ? <p>Point and ask works in the 3D view</p> : <p>Point and ask (C)</p>
+      }
+      variant="ghost"
+    >
+      <svg aria-hidden className="h-5 w-5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" viewBox="0 0 24 24">
+        <path d="M4.5 3.5l8.2 3.7-3.4 1.3-1.3 3.4z" fill="currentColor" fillOpacity="0.25" />
+        <path d="M12.5 12.5h6.5a2 2 0 012 2v3a2 2 0 01-2 2h-2.2l-2.3 2v-2h-2a2 2 0 01-2-2v-3a2 2 0 012-2z" />
+      </svg>
+    </ActionButton>
+  )
+}

package/src/components/ui/action-menu/view-toggles.tsx

@@ -20,6 +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'
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024 // 200MB
 const ACCEPTED_FILE_TYPES = '.glb,.gltf,image/jpeg,image/png,image/webp,image/gif'
@@ -149,7 +150,7 @@ function UploadButton({ onError }: { onError: (message: string | null) => void }
     <>
       <button
         aria-label="Upload scan or guide image"
-        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
         disabled={isAddingGuide}
         onClick={() => fileInputRef.current?.click()}
         type="button"
@@ -170,6 +171,7 @@ function UploadButton({ onError }: { onError: (message: string | null) => void }
 // ── Guides toggle + dropdown ────────────────────────────────────────────────
 
 function GuidesControl() {
+  const popupSide = useActionMenuPopupSide()
   const showGuides = useViewer((state) => state.showGuides)
   const setShowGuides = useViewer((state) => state.setShowGuides)
   const setSelection = useViewer((state) => state.setSelection)
@@ -207,8 +209,8 @@ function GuidesControl() {
           className={cn(
             'rounded-r-none p-0',
             showGuides
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           label={`Guides: ${showGuides ? 'Visible' : 'Hidden'}`}
           onClick={() => setShowGuides(!showGuides)}
@@ -221,7 +223,7 @@ function GuidesControl() {
               className="h-[28px] w-[28px] object-contain"
               src="/icons/floorplan.webp"
             />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {guides.length}
             </span>
           </div>
@@ -236,11 +238,11 @@ function GuidesControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               showGuides
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             type="button"
           >
@@ -252,7 +254,7 @@ function GuidesControl() {
       <PopoverContent
         align="center"
         className="w-72 rounded-xl border-border/45 bg-background/96 p-3 shadow-elevation-3 backdrop-blur-xl"
-        side="top"
+        side={popupSide}
         sideOffset={14}
       >
         <div className="space-y-3">
@@ -284,7 +286,7 @@ function GuidesControl() {
                   className={cn(
                     'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
                     selectedReferenceId === guide.id
-                      ? 'border-foreground/35 bg-white/10'
+                      ? 'border-foreground/35 bg-black/6 dark:bg-white/10'
                       : 'border-border/45',
                   )}
                   key={guide.id}
@@ -349,6 +351,7 @@ function GuidesControl() {
 // ── Scans toggle + dropdown ─────────────────────────────────────────────────
 
 function ScansControl() {
+  const popupSide = useActionMenuPopupSide()
   const showScans = useViewer((state) => state.showScans)
   const setShowScans = useViewer((state) => state.setShowScans)
   const setSelection = useViewer((state) => state.setSelection)
@@ -386,8 +389,8 @@ function ScansControl() {
           className={cn(
             'rounded-r-none p-0',
             showScans
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           label={`Scans: ${showScans ? 'Visible' : 'Hidden'}`}
           onClick={() => setShowScans(!showScans)}
@@ -396,7 +399,7 @@ function ScansControl() {
         >
           <div className="relative">
             <img alt="Scans" className="h-[28px] w-[28px] object-contain" src="/icons/mesh.webp" />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {scans.length}
             </span>
           </div>
@@ -411,11 +414,11 @@ function ScansControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               showScans
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             type="button"
           >
@@ -427,7 +430,7 @@ function ScansControl() {
       <PopoverContent
         align="center"
         className="w-72 rounded-xl border-border/45 bg-background/96 p-3 shadow-elevation-3 backdrop-blur-xl"
-        side="top"
+        side={popupSide}
         sideOffset={14}
       >
         <div className="space-y-3">
@@ -459,7 +462,7 @@ function ScansControl() {
                   className={cn(
                     'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
                     selectedReferenceId === scan.id
-                      ? 'border-foreground/35 bg-white/10'
+                      ? 'border-foreground/35 bg-black/6 dark:bg-white/10'
                       : 'border-border/45',
                   )}
                   key={scan.id}
@@ -578,7 +581,7 @@ function ReferenceListSection({
         </div>
         <button
           aria-label={show ? `Hide ${title.toLowerCase()}` : `Show ${title.toLowerCase()}`}
-          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
           onClick={() => setShow(!show)}
           type="button"
         >
@@ -594,7 +597,7 @@ function ReferenceListSection({
               className={cn(
                 'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
                 selectedReferenceId === node.id
-                  ? 'border-foreground/35 bg-white/10'
+                  ? 'border-foreground/35 bg-black/6 dark:bg-white/10'
                   : 'border-border/45',
               )}
               key={node.id}
@@ -657,6 +660,7 @@ function ReferenceListSection({
 }
 
 function ReferencesControl() {
+  const popupSide = useActionMenuPopupSide()
   const showScans = useViewer((state) => state.showScans)
   const setShowScans = useViewer((state) => state.setShowScans)
   const showGuides = useViewer((state) => state.showGuides)
@@ -682,8 +686,8 @@ function ReferencesControl() {
           className={cn(
             'rounded-r-none p-0',
             anyVisible
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           label={`References: ${anyVisible ? 'Visible' : 'Hidden'}`}
           onClick={toggleAll}
@@ -696,7 +700,7 @@ function ReferencesControl() {
               className="h-[28px] w-[28px] object-contain"
               src="/icons/floorplan.webp"
             />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {total}
             </span>
           </div>
@@ -710,11 +714,11 @@ function ReferencesControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               anyVisible
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             type="button"
           >
@@ -726,7 +730,7 @@ function ReferencesControl() {
       <PopoverContent
         align="center"
         className="w-72 rounded-xl border-border/45 bg-background/96 p-3 shadow-elevation-3 backdrop-blur-xl"
-        side="top"
+        side={popupSide}
         sideOffset={14}
       >
         <div className="space-y-3">
@@ -765,6 +769,7 @@ function ReferencesControl() {
 // ── Reference floor control ────────────────────────────────────────────────────────────────────
 
 function ReferenceFloorControl() {
+  const popupSide = useActionMenuPopupSide()
   const showReferenceFloor = useEditor((state) => state.showReferenceFloor)
   const toggleReferenceFloor = useEditor((state) => state.toggleReferenceFloor)
   const referenceFloorOffset = useEditor((state) => state.referenceFloorOffset)
@@ -784,8 +789,8 @@ function ReferenceFloorControl() {
           className={cn(
             'rounded-r-none p-0',
             showReferenceFloor && selectedLevel
-              ? 'bg-white/15'
-              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+              ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+              : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
           )}
           disabled={!hasLowerLevels}
           label={
@@ -801,7 +806,7 @@ function ReferenceFloorControl() {
         >
           <div className="relative">
             <Layers2 className="h-4 w-4" />
-            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-black/12 dark:bg-white/20 px-[3px] text-center font-medium text-[9px] text-foreground/70 dark:text-white/70 leading-[14px]">
               {lowerLevels.length}
             </span>
           </div>
@@ -815,11 +820,11 @@ function ReferenceFloorControl() {
               'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
               showReferenceFloor && selectedLevel
                 ? isOpen
-                  ? 'bg-white/10'
-                  : 'bg-white/5 hover:bg-white/8'
+                  ? 'bg-black/6 dark:bg-white/10'
+                  : 'bg-black/4 dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/8'
                 : isOpen
-                  ? 'bg-white/8'
-                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+                  ? 'bg-black/5 dark:bg-white/8'
+                  : 'opacity-60 hover:bg-black/4 dark:hover:bg-white/5 hover:opacity-100',
             )}
             disabled={!hasLowerLevels}
             type="button"
@@ -832,7 +837,7 @@ function ReferenceFloorControl() {
       <PopoverContent
         align="center"
         className="w-72 rounded-xl border-border/45 bg-background/96 p-3 shadow-[0_14px_28px_-18px_rgba(15,23,42,0.55),0_6px_16px_-10px_rgba(15,23,42,0.2)] backdrop-blur-xl"
-        side="top"
+        side={popupSide}
         sideOffset={14}
       >
         <div className="space-y-3">
@@ -848,7 +853,7 @@ function ReferenceFloorControl() {
             </div>
             <button
               aria-label={showReferenceFloor ? 'Hide reference floor' : 'Show reference floor'}
-              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
               disabled={!hasLowerLevels}
               onClick={toggleReferenceFloor}
               type="button"
@@ -870,8 +875,8 @@ function ReferenceFloorControl() {
                   return (
                     <button
                       className={cn(
-                        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-white/8',
-                        isSelected && showReferenceFloor && 'bg-white/10 text-foreground',
+                        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-black/5 dark:hover:bg-white/8',
+                        isSelected && showReferenceFloor && 'bg-black/6 dark:bg-white/10 text-foreground',
                       )}
                       key={level.id}
                       onClick={() => {
@@ -928,8 +933,8 @@ function RiserControl() {
     <ActionButton
       className={cn(
         isRiserOpen
-          ? 'bg-white/15'
-          : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+          ? 'bg-black/9 hover:bg-black/9 dark:bg-white/15'
+          : 'opacity-60 grayscale hover:bg-black/4 hover:opacity-100 hover:grayscale-0',
       )}
       label="Riser diagram"
       onClick={toggleRiserOpen}