@pascal-app/editor 1.0.4 → 1.0.5

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

@@ -26,6 +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'
 
 const measurementOptions = [
   { kind: 'distance', label: 'Distance', icon: Ruler },
@@ -62,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)
@@ -146,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}
@@ -166,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"
           >
@@ -182,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">
@@ -198,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={() => {
@@ -234,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}

package/src/components/ui/build-panel/build-panel.tsx

@@ -128,11 +128,12 @@ type BuildToolTileProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' |
   iconSrc: string
   label: string
   size?: 'lg' | 'sm'
+  tone?: 'primary' | 'neutral'
 }
 
 /**
  * One tool tile: the isometric icon over its name. Inactive icons stay grey and
- * take their colour on hover; the armed tool keeps it, on the primary tint.
+ * take their colour on hover. Neutral tiles keep that behavior when armed.
  */
 export function BuildToolTile({
   active,
@@ -141,6 +142,7 @@ export function BuildToolTile({
   iconSrc,
   label,
   size = 'sm',
+  tone = 'primary',
   ...buttonProps
 }: BuildToolTileProps) {
   return (
@@ -151,7 +153,11 @@ export function BuildToolTile({
         // Small tiles grow to two label lines ("Spawn point"); a grid row's
         // tiles stretch together, so a row keeps one height.
         size === 'lg' ? 'h-[104px] gap-1.5 px-1.5 pt-2 pb-2.5' : 'min-h-[74px] gap-1 px-1 pt-1.5 pb-2',
-        active ? 'bg-primary/10 ring-1 ring-primary/50' : 'bg-muted/40 hover:bg-muted',
+        active
+          ? tone === 'neutral'
+            ? 'bg-black/8 ring-1 ring-foreground/30 dark:bg-muted'
+            : 'bg-primary/10 ring-1 ring-primary/50'
+          : 'bg-black/4 hover:bg-black/8 dark:bg-muted/40 dark:hover:bg-muted',
         className,
       )}
       type="button"
@@ -162,7 +168,8 @@ export function BuildToolTile({
         className={cn(
           'min-h-0 object-contain transition duration-200 group-hover:scale-110',
           size === 'lg' ? 'size-14' : 'size-9',
-          !active && 'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0',
+          (!active || tone === 'neutral') &&
+            'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0',
         )}
         draggable={false}
         src={iconSrc}

package/src/components/ui/command-palette/editor-commands.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import type { AnyNodeId } from '@pascal-app/core'
-import { DEFAULT_LEVEL_HEIGHT, LevelNode, type UnitNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type LevelNode, type UnitNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
   AppWindow,
@@ -37,6 +36,7 @@ import {
   Video,
 } from 'lucide-react'
 import { useEffect } from 'react'
+import { addStoreyOnTop } from '../../../lib/add-storey'
 import { getHistoryCommandState, runRedo, runUndo } from '../../../lib/history'
 import { deleteLevelWithFallbackSelection } from '../../../lib/level-selection'
 import { getSavedSceneDocument } from '../../../lib/scene'
@@ -203,16 +203,7 @@ export function EditorCommands() {
             const { nodes } = useScene.getState()
             const building = Object.values(nodes).find((n) => n.type === 'building')
             if (!building) return
-            const levelCount = building.children.filter(
-              (childId) => nodes[childId as keyof typeof nodes]?.type === 'level',
-            ).length
-            const newLevel = LevelNode.parse({
-              level: levelCount,
-              height: DEFAULT_LEVEL_HEIGHT,
-              children: [],
-              parentId: building.id,
-            })
-            useScene.getState().createNode(newLevel, building.id)
+            const newLevel = addStoreyOnTop(building.id)
             useViewer.getState().setSelection({ levelId: newLevel.id })
           }),
       },

package/src/components/ui/command-palette/index.tsx

@@ -3,15 +3,15 @@
 import type { AnyNodeId, LevelNode } from '@pascal-app/core'
 import { useScene } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
-import { Command, useCommandState } from 'cmdk'
+import { Command, defaultFilter, useCommandState } from 'cmdk'
 import { ChevronRight, Search } from 'lucide-react'
-import type { ReactNode } from 'react'
-import { useEffect, useState } from 'react'
+import type { ReactNode, RefObject } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { Dialog, DialogContent, DialogTitle } from './../../../components/ui/primitives/dialog'
 import { getLevelDisplayName } from '@pascal-app/core'
-import { useCommandRegistry } from '../../../store/use-command-registry'
+import { type CommandAction, useCommandRegistry } from '../../../store/use-command-registry'
 import { usePaletteViewRegistry } from '../../../store/use-palette-view-registry'
 
 // ---------------------------------------------------------------------------
@@ -54,6 +54,28 @@ function resolve(value: string | (() => string)): string {
   return typeof value === 'function' ? value() : value
 }
 
+type ActionGroup = [group: string, actions: CommandAction[]]
+
+/**
+ * The registered actions by group, in the order they were registered. A search puts the group
+ * holding the best match first: cmdk ranks the items inside a group but leaves the groups where
+ * they are, so a strong match could sit below a screen of weak ones.
+ */
+export function rankedGroups(actions: CommandAction[], search: string): ActionGroup[] {
+  const groups = new Map<string, CommandAction[]>()
+  for (const action of actions) {
+    groups.set(action.group, [...(groups.get(action.group) ?? []), action])
+  }
+  const ordered: ActionGroup[] = [...groups]
+  if (!search) return ordered
+  const bestMatch = ([, list]: ActionGroup) =>
+    Math.max(...list.map((action) => defaultFilter(resolve(action.label), search, action.keywords)))
+  return ordered
+    .map((entry) => ({ entry, score: bestMatch(entry) }))
+    .sort((a, b) => b.score - a.score)
+    .map(({ entry }) => entry)
+}
+
 function Shortcut({ keys }: { keys: string[] }) {
   return (
     <span className="ml-auto flex shrink-0 items-center gap-0.5">
@@ -162,6 +184,20 @@ export interface CommandPaletteEmptyAction {
   onSelect: (query: string) => void
 }
 
+/**
+ * A search selects the first item; this scrolls the list back to the top to show it. cmdk scrolls
+ * before the list re-renders the selection, so once a search has moved the groups it scrolls to
+ * wherever the item selected before went. Rendered after the list, whose ref is set by then.
+ */
+function TopOnFirstItem({ list }: { list: RefObject<HTMLDivElement | null> }) {
+  const value = useCommandState((s) => s.value)
+  useLayoutEffect(() => {
+    const first = list.current?.querySelector('[cmdk-item]:not([aria-disabled="true"])')
+    if (value && first?.getAttribute('aria-selected') === 'true') list.current?.scrollTo({ top: 0 })
+  }, [list, value])
+  return null
+}
+
 function EmptyActionItem({ action }: { action: CommandPaletteEmptyAction }) {
   const count = useCommandState((s) => s.filtered.count)
   const search = useCommandState((s) => s.search)
@@ -193,6 +229,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
 
   const [meta, setMeta] = useState('⌘')
   const [isFullscreen, setIsFullscreen] = useState(false)
+  const listRef = useRef<HTMLDivElement>(null)
 
   const page = pages[pages.length - 1]
 
@@ -255,15 +292,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     })
   }
 
-  // ---------------------------------------------------------------------------
-  // Group registered actions by group (preserving insertion order)
-  // ---------------------------------------------------------------------------
-  const grouped = actions.reduce<Map<string, typeof actions>>((acc, action) => {
-    const list = acc.get(action.group) ?? []
-    list.push(action)
-    acc.set(action.group, list)
-    return acc
-  }, new Map())
+  const grouped = rankedGroups(actions, inputValue)
 
   const onClose = () => setOpen(false)
   const onBack = () => {
@@ -326,7 +355,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
               />
             </div>
 
-            <Command.List className="max-h-100 overflow-y-auto p-1.5">
+            <Command.List className="max-h-100 overflow-y-auto p-1.5" ref={listRef}>
               {(!emptyAction || page) && (
                 <Command.Empty className="py-8 text-center text-muted-foreground text-sm">
                   No commands found.
@@ -344,7 +373,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
 
               {/* ── Root view: render from registry ───────────────────────── */}
               {!page &&
-                Array.from(grouped.entries()).map(([group, groupActions]) => (
+                grouped.map(([group, groupActions]) => (
                   <Command.Group heading={group} key={group}>
                     {groupActions.map((action) => (
                       <Item
@@ -439,6 +468,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                 </Command.Group>
               )}
             </Command.List>
+            <TopOnFirstItem list={listRef} />
 
             {/* Footer hint */}
             <div className="flex items-center justify-between border-border/50 border-t px-3 py-2">