@pascal-app/editor 1.0.4 → 1.0.6

package/src/components/ui/command-palette/ranked-groups.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'bun:test'
+import { rankedGroups } from '.'
+
+const action = (group: string, label: string, keywords?: string[]) => ({
+  id: label,
+  group,
+  label,
+  keywords,
+  execute: () => {},
+})
+
+// What a host's palette holds: weak fuzzy matches for "theme" registered before the strong one.
+const actions = [
+  action('Generate', 'Generate house from template: The Poppy', ['template', 'adu', 'poppy']),
+  action('Viewer Controls', 'Switch to Solid', ['solid', 'shading', 'render', 'mode']),
+  action('View', 'Use dark theme', ['theme', 'appearance', 'interface']),
+  action('Export & Share', 'Take Screenshot', ['screenshot', 'capture', 'image']),
+]
+
+const order = (search: string) => rankedGroups(actions, search).map(([group]) => group)
+
+describe('command palette groups', () => {
+  test('a search lists the group with the best match first', () => {
+    expect(order('theme')[0]).toBe('View')
+    expect(order('solid')[0]).toBe('Viewer Controls')
+  })
+
+  test('with no search the groups keep the order they were registered in', () => {
+    expect(order('')).toEqual(['Generate', 'Viewer Controls', 'View', 'Export & Share'])
+  })
+})

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

@@ -12,12 +12,15 @@ export function ActionButton({ icon, label, className, ...props }: ActionButtonP
     <button
       {...props}
       className={cn(
-        'flex h-9 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 font-medium text-foreground text-xs transition-colors hover:bg-[#3e3e3e] active:bg-[#3e3e3e]',
+        // The fill runs through custom properties so a caller's `bg-*` or
+        // `hover:bg-*` replaces it in both themes; tailwind-merge would keep a
+        // `dark:bg-*` fill alive under the caller's class.
+        'flex min-h-9 min-w-0 flex-1 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-border/50 bg-(--action-fill) px-3 py-2 font-medium text-foreground text-xs leading-4 transition-colors [&>svg]:shrink-0 [--action-fill-hover:rgb(0_0_0/0.08)] [--action-fill:rgb(0_0_0/0.04)] hover:bg-(--action-fill-hover) active:bg-(--action-fill-hover) dark:[--action-fill-hover:#3e3e3e] dark:[--action-fill:#2C2C2E]',
         className,
       )}
     >
       {icon}
-      <span>{label}</span>
+      <span className="min-w-0 whitespace-normal text-center">{label}</span>
     </button>
   )
 }

package/src/components/ui/controls/metric-control.tsx

@@ -310,7 +310,7 @@ export function MetricControl({
     <div
       className={cn(
         'group flex h-10 w-full items-center justify-between rounded-lg border border-border/50 px-3 text-sm transition-colors',
-        isDragging ? 'bg-[#3e3e3e]' : 'bg-[#2C2C2E] hover:bg-[#3e3e3e]',
+        isDragging ? 'bg-black/8 dark:bg-[#3e3e3e]' : 'bg-black/4 dark:bg-[#2C2C2E] hover:bg-black/8 dark:hover:bg-[#3e3e3e]',
         className,
       )}
       onMouseEnter={() => setIsHovered(true)}

package/src/components/ui/controls/segmented-control.tsx

@@ -5,7 +5,11 @@ import { cn } from '../../../lib/utils'
 interface SegmentedControlProps<T extends string> {
   value: T
   onChange: (value: T) => void
-  options: { label: React.ReactNode; value: T }[]
+  /**
+   * `disabled` greys one option and ignores its click; it stays hoverable, so a tooltip in its
+   * `label` can say why.
+   */
+  options: { label: React.ReactNode; value: T; disabled?: boolean }[]
   className?: string
   disabled?: boolean
   mixed?: boolean
@@ -22,28 +26,37 @@ export function SegmentedControl<T extends string>({
   return (
     <div
       className={cn(
-        'flex h-9 w-full items-center rounded-lg border border-border/50 bg-[#2C2C2E] p-[3px]',
+        'flex min-h-9 w-full items-stretch rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] p-[3px]',
         disabled && 'opacity-60',
         className,
       )}
     >
       {options.map((option) => {
         const isSelected = !mixed && value === option.value
+        const isDisabled = disabled || option.disabled === true
         return (
           <button
+            aria-disabled={option.disabled || undefined}
+            aria-pressed={isSelected}
             className={cn(
-              'relative flex h-full flex-1 items-center justify-center rounded-md font-medium text-xs transition-all duration-200',
+              'relative flex min-h-7 min-w-0 flex-1 items-center justify-center rounded-md px-1.5 py-1 font-medium text-xs leading-4 transition-colors duration-200',
               isSelected
-                ? 'bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
-                : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
-              disabled && 'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground',
+                ? 'bg-white dark:bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
+                : 'text-muted-foreground hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground',
+              isDisabled &&
+                'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground dark:hover:bg-transparent',
+              option.disabled && 'opacity-40',
             )}
             disabled={disabled}
             key={option.value}
-            onClick={() => onChange(option.value)}
+            onClick={() => {
+              if (!option.disabled) onChange(option.value)
+            }}
             type="button"
           >
-            <span className="relative z-10 flex items-center gap-1.5">{option.label}</span>
+            <span className="relative z-10 flex min-w-0 items-center justify-center gap-1.5 whitespace-normal text-center [&>svg]:shrink-0">
+              {option.label}
+            </span>
           </button>
         )
       })}

package/src/components/ui/controls/select-control.tsx

@@ -34,7 +34,7 @@ export function SelectControl<T extends string>({
         <button
           aria-label={label}
           className={cn(
-            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e] data-[state=open]:bg-[#3e3e3e]',
+            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] data-[state=open]:bg-black/8 dark:data-[state=open]:bg-[#3e3e3e]',
             className,
           )}
           type="button"

package/src/components/ui/controls/slider-control.tsx

@@ -329,7 +329,7 @@ export function SliderControl({
     <div
       className={cn(
         'group flex h-7 w-full select-none items-center rounded-lg px-2 transition-colors',
-        isDragging ? 'bg-white/5' : 'hover:bg-white/5',
+        isDragging ? 'bg-black/4 dark:bg-white/5' : 'hover:bg-black/4 dark:hover:bg-white/5',
         className,
       )}
       onMouseEnter={() => setIsHovered(true)}

package/src/components/ui/controls/toggle-control.tsx

@@ -21,7 +21,7 @@ export function ToggleControl({
   return (
     <div
       className={cn(
-        'group flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-[#3e3e3e]',
+        'group flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]',
         className,
       )}
       onClick={() => onChange(!checked)}
@@ -34,10 +34,10 @@ export function ToggleControl({
         className={cn(
           'flex h-5 w-5 items-center justify-center rounded-[4px] border transition-all duration-200',
           mixed
-            ? 'border-muted-foreground/70 bg-black/20 text-muted-foreground'
+            ? 'border-muted-foreground/70 bg-black/5 dark:bg-black/20 text-muted-foreground'
             : checked
               ? 'border-primary bg-primary text-primary-foreground'
-              : 'border-border bg-black/20 text-transparent group-hover:border-muted-foreground',
+              : 'border-border bg-black/5 dark:bg-black/20 text-transparent group-hover:border-muted-foreground',
         )}
       >
         {mixed ? (

package/src/components/ui/controls/tool-options-panel.tsx

@@ -50,7 +50,7 @@ function ToolOptionRow({
                 'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
                 selected
                   ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
-                  : 'bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',
+                  : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
               )}
               key={choice.value}
               onClick={() => {

package/src/components/ui/floating-level-selector.tsx

@@ -24,11 +24,13 @@ import {
   type BuildingNode,
   DEFAULT_LEVEL_HEIGHT,
   getStoredLevelHeight,
+  groundSeat,
   LevelNode,
   useScene,
 } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import {
+  ArrowDownToLine,
   ClipboardPaste,
   Copy,
   GripVertical,
@@ -40,6 +42,7 @@ import {
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
+  Fragment,
   useCallback,
   useEffect,
   useRef,
@@ -51,7 +54,13 @@ import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '@pascal-app/core/building'
-import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
+import {
+  getDefaultLevelName,
+  getLevelDisplayName,
+  roofLevelOrderBreach,
+  servesAsRoofLevel,
+} from '@pascal-app/core'
+import { addStoreyBelow, addStoreyOnTop, setGroundFloor } from '../../lib/add-storey'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
 import { unitMemberLevels, leaveUnitFocus } from '../../lib/units'
 import { useLinearDisplay } from '../../lib/use-linear-display'
@@ -141,6 +150,8 @@ function LevelRow({
   onDuplicate,
   onPaste,
   onRequestDelete,
+  onSetGround,
+  isGround,
   unitDotColor,
 }: {
   level: LevelNode
@@ -154,6 +165,10 @@ function LevelRow({
   onDuplicate: (preset?: LevelDuplicatePreset) => void
   onPaste?: () => void
   onRequestDelete: () => void
+  /** Makes this level the ground floor: the line moves under it. */
+  onSetGround: () => void
+  /** This level is the ground floor, seated at grade: nothing left to set. */
+  isGround: boolean
 }) {
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
@@ -196,17 +211,17 @@ function LevelRow({
         <div
           className={cn(
             'flex items-center rounded-lg transition-colors',
-            isDragging && 'bg-white/10 text-foreground shadow-lg',
+            isDragging && 'bg-black/6 dark:bg-white/10 text-foreground shadow-lg',
             isSelected
-              ? 'bg-white/10 text-foreground'
-              : 'text-muted-foreground/70 hover:bg-white/5 hover:text-muted-foreground',
+              ? 'bg-black/6 dark:bg-white/10 text-foreground'
+              : 'text-muted-foreground/70 hover:bg-black/4 dark:hover:bg-white/5 hover:text-muted-foreground',
           )}
         >
           <button
             {...dragHandleProps}
             aria-label={`Reorder ${getLevelDisplayName(level)}`}
             className={cn(
-              'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
+              'ml-0.5 flex h-6 w-4 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground/35 opacity-0 transition-colors hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 group-hover/level:opacity-100',
               isDragging && 'cursor-grabbing opacity-100',
             )}
             onClick={(e) => {
@@ -244,7 +259,7 @@ function LevelRow({
           <Popover>
             <PopoverTrigger asChild>
               <button
-                className="mr-0.5 shrink-0 whitespace-nowrap rounded px-1 py-0.5 font-mono text-[10px] text-muted-foreground/50 tabular-nums transition-colors hover:bg-white/5 hover:text-foreground"
+                className="mr-0.5 shrink-0 whitespace-nowrap rounded px-1 py-0.5 font-mono text-[10px] text-muted-foreground tabular-nums transition-colors hover:bg-black/4 hover:text-foreground dark:text-muted-foreground/50 dark:hover:bg-white/5 dark:hover:text-foreground"
                 onClick={(e) => e.stopPropagation()}
                 title="Level height"
                 type="button"
@@ -295,7 +310,7 @@ function LevelRow({
             </PopoverTrigger>
             <PopoverContent align="start" className="w-44 p-1" side="right" sideOffset={8}>
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
                 onClick={(e) => {
                   e.stopPropagation()
                   onDuplicate()
@@ -306,7 +321,7 @@ function LevelRow({
                 Duplicate level
               </button>
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
                 onClick={(e) => {
                   e.stopPropagation()
                   setDuplicateDialogOpen(true)
@@ -316,9 +331,26 @@ function LevelRow({
                 <Copy className="h-3 w-3" />
                 Duplicate with options...
               </button>
+              <button
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors enabled:hover:bg-black/6 dark:enabled:hover:bg-white/10 enabled:hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={isGround}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onSetGround()
+                }}
+                title={
+                  isGround
+                    ? 'This floor stands at grade'
+                    : 'Seat the building so this floor stands at grade; the floors under it are below grade'
+                }
+                type="button"
+              >
+                <ArrowDownToLine className="h-3 w-3" />
+                Set as ground floor
+              </button>
               {onPaste && (
                 <button
-                  className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-white/10 hover:text-foreground"
+                  className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
                   onClick={(e) => {
                     e.stopPropagation()
                     onPaste()
@@ -330,7 +362,7 @@ function LevelRow({
                 </button>
               )}
               <button
-                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors enabled:hover:bg-white/10 enabled:hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-muted-foreground text-xs transition-colors enabled:hover:bg-black/6 dark:enabled:hover:bg-white/10 enabled:hover:text-red-600 dark:enabled:hover:text-red-400 disabled:cursor-not-allowed disabled:opacity-50"
                 disabled={!canDeleteLevel}
                 onClick={(e) => {
                   e.stopPropagation()
@@ -366,6 +398,8 @@ function SortableLevelRow({
   onDuplicate,
   onPaste,
   onRequestDelete,
+  onSetGround,
+  isGround,
   unitDotColor,
 }: {
   level: LevelNode
@@ -375,6 +409,8 @@ function SortableLevelRow({
   onDuplicate: (preset?: LevelDuplicatePreset) => void
   onPaste?: () => void
   onRequestDelete: () => void
+  onSetGround: () => void
+  isGround: boolean
 }) {
   const {
     attributes,
@@ -404,14 +440,67 @@ function SortableLevelRow({
         level={level}
         onDuplicate={onDuplicate}
         onPaste={onPaste}
+        isGround={isGround}
         onRequestDelete={onRequestDelete}
         onSelect={onSelect}
+        onSetGround={onSetGround}
         unitDotColor={unitDotColor}
       />
     </div>
   )
 }
 
+// ── The ground line: between the level at grade and the ones under it ───────
+
+type GroundLineState = {
+  levelId: string
+  seated: boolean
+  atFoundationTop: boolean
+  offset: number
+}
+
+/**
+ * "Ground · +0.20": where the stack meets grade, read as the ground floor's datum over the ground
+ * (the top of the foundation, 8 in over it once seated). The levels under it are below grade. When
+ * the datum stands outside the seat (a stack that lifted it, or sank it) the line turns amber and
+ * a click seats the building.
+ */
+function GroundLine({ ground, onSeat }: { ground: GroundLineState; onSeat: () => void }) {
+  const { toDisplay, displayUnit, precision } = useLinearDisplay('m', 2)
+  const over = toDisplay(ground.offset)
+  const label = `Ground · ${over > 0 ? '+' : ''}${over.toFixed(precision)}`
+  return (
+    <div
+      className="relative flex items-center gap-1.5 px-2 py-0.5"
+      data-guide-target="level-ground-line"
+    >
+      {ground.seated ? (
+        <span
+          className="shrink-0 font-mono text-[10px] text-muted-foreground/70 tabular-nums"
+          title="Ground line: the levels under it are below grade"
+        >
+          {label}
+        </span>
+      ) : (
+        <button
+          className="shrink-0 rounded-full px-1.5 font-mono text-[10px] text-amber-400 tabular-nums transition-colors hover:bg-amber-400/10"
+          onClick={onSeat}
+          title={`The ground floor stands ${Math.abs(toDisplay(ground.offset)).toFixed(precision)} ${displayUnit} ${ground.offset > 0 ? 'over' : 'under'} grade. Seat the ground floor 8 in over grade`}
+          type="button"
+        >
+          {label}
+        </button>
+      )}
+      <span
+        className={cn(
+          'h-px flex-1',
+          ground.seated ? 'bg-foreground/25' : 'bg-amber-400/60',
+        )}
+      />
+    </div>
+  )
+}
+
 // ── Unit focus chip: name + × to end focus, only while a unit is focused ────
 
 function UnitFocusChip() {
@@ -435,7 +524,7 @@ function UnitFocusChip() {
       <span className="truncate">{focusedUnit.name || 'Unit'}</span>
       <button
         aria-label="Exit unit focus"
-        className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+        className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10 hover:text-foreground"
         onClick={() => leaveUnitFocus()}
         title="Exit unit focus"
         type="button"
@@ -500,31 +589,40 @@ export function FloatingLevelSelector() {
     }),
   )
 
+  const ground = useScene(
+    useShallow((state): GroundLineState | null => {
+      const seat = resolvedBuildingId ? groundSeat(state.nodes, resolvedBuildingId) : null
+      return seat
+        ? {
+            levelId: seat.levelId,
+            seated: seat.seated,
+            atFoundationTop: seat.atFoundationTop,
+            offset: seat.offset,
+          }
+        : null
+    }),
+  )
+
+  const handleSetGround = useCallback((levelId: string) => {
+    setGroundFloor(levelId as LevelNode['id'])
+  }, [])
+
+  const topIsRoofLevel = useScene((state) => {
+    const top = levels.at(-1)
+    return top ? servesAsRoofLevel(state.nodes, top) : false
+  })
+
   const handleAddAbove = useCallback(() => {
     if (!resolvedBuildingId) return
-    const maxLevel = levels.length > 0 ? Math.max(...levels.map((l) => l.level)) : -1
-    const newLevel = LevelNode.parse({
-      level: maxLevel + 1,
-      height: DEFAULT_LEVEL_HEIGHT,
-      children: [],
-      parentId: resolvedBuildingId,
-    })
-    createNode(newLevel, resolvedBuildingId)
+    const newLevel = addStoreyOnTop(resolvedBuildingId)
     setSelection({ buildingId: resolvedBuildingId, levelId: newLevel.id })
-  }, [resolvedBuildingId, levels, createNode, setSelection])
+  }, [resolvedBuildingId, setSelection])
 
   const handleAddBelow = useCallback(() => {
     if (!resolvedBuildingId) return
-    const minLevel = levels.length > 0 ? Math.min(...levels.map((l) => l.level)) : 1
-    const newLevel = LevelNode.parse({
-      level: minLevel - 1,
-      height: DEFAULT_LEVEL_HEIGHT,
-      children: [],
-      parentId: resolvedBuildingId,
-    })
-    createNode(newLevel, resolvedBuildingId)
+    const newLevel = addStoreyBelow(resolvedBuildingId)
     setSelection({ buildingId: resolvedBuildingId, levelId: newLevel.id })
-  }, [resolvedBuildingId, levels, createNode, setSelection])
+  }, [resolvedBuildingId, setSelection])
 
   const handleInsertBetween = useCallback(
     (lowerIndex: number) => {
@@ -533,26 +631,22 @@ export function FloatingLevelSelector() {
       if (!lower) return
 
       const newLevelNumber = lower.level + 1
-      const toShift = levels.filter((l) => l.level >= newLevelNumber)
-      if (toShift.length > 0) {
-        updateNodes(
-          toShift.map((l) => ({
-            id: l.id as AnyNodeId,
-            data: { level: l.level + 1 } as Partial<AnyNode>,
-          })),
-        )
-      }
-
       const newLevel = LevelNode.parse({
         level: newLevelNumber,
         height: DEFAULT_LEVEL_HEIGHT,
         children: [],
         parentId: resolvedBuildingId,
       })
-      createNode(newLevel, resolvedBuildingId)
+      // One undo step: undoing the floor also moves the levels above back down.
+      applyNodeChanges({
+        create: [{ node: newLevel, parentId: resolvedBuildingId }],
+        update: levels
+          .filter((l) => l.level >= newLevelNumber)
+          .map((l) => ({ id: l.id as AnyNodeId, data: { level: l.level + 1 } as Partial<AnyNode> })),
+      })
       setSelection({ buildingId: resolvedBuildingId, levelId: newLevel.id })
     },
-    [resolvedBuildingId, levels, createNode, updateNodes, setSelection],
+    [resolvedBuildingId, levels, applyNodeChanges, setSelection],
   )
 
   const handleConfirmDelete = useCallback(() => {
@@ -602,6 +696,11 @@ export function FloatingLevelSelector() {
 
       const reorderedVisualLevels = arrayMove(visualLevels, oldIndex, newIndex)
       const levelNumbersDescending = levels.map((level) => level.level).sort((a, b) => b - a)
+      // The roof level stays above every storey: a drop putting it under one it stood over is refused.
+      const floors = new Map(
+        reorderedVisualLevels.map((level, index) => [level.id, levelNumbersDescending[index]!]),
+      )
+      if (roofLevelOrderBreach(useScene.getState().nodes, floors)) return
 
       const updates = reorderedVisualLevels
         .map((level, index) => ({
@@ -632,13 +731,13 @@ export function FloatingLevelSelector() {
   const sortableLevelIds = reversedLevels.map((level) => level.id)
 
   const addButtonClass =
-    'absolute left-1/2 z-10 flex h-4 w-4 -translate-x-1/2 items-center justify-center rounded-full border border-border/80 bg-neutral-800 text-muted-foreground/60 shadow-md transition-colors hover:bg-neutral-700 hover:text-foreground'
+    'absolute left-1/2 z-10 flex h-4 w-4 -translate-x-1/2 items-center justify-center rounded-full border border-border/80 bg-white text-muted-foreground/60 shadow-md transition-colors hover:bg-neutral-100 hover:text-foreground dark:bg-neutral-800 dark:hover:bg-neutral-700'
 
   return (
     <>
       <div className={cn('pointer-events-auto absolute left-3 z-20', isMobile ? 'top-14' : 'top-3')}>
         <div className="relative">
-          {/* Floating + at top edge */}
+          {/* Floating + at top edge: a floor on top, under the roof level when one tops the stack */}
           {!draggingLevelId && (
             <button
               className={cn(addButtonClass, 'top-0 -translate-y-1/2')}
@@ -646,7 +745,7 @@ export function FloatingLevelSelector() {
               // read only from outside: nothing here depends on it.
               data-guide-target="level-add"
               onClick={handleAddAbove}
-              title="Add level above"
+              title={topIsRoofLevel ? 'Add a floor under the roof' : 'Add level above'}
               type="button"
             >
               <Plus className="h-2.5 w-2.5" />
@@ -681,6 +780,7 @@ export function FloatingLevelSelector() {
                   const showGapBelow = i < reversedLevels.length - 1
 
                   return (
+                    <Fragment key={level.id}>
                     <div
                       className="relative"
                       // A stable hook for host-app onboarding to point at, on
@@ -688,7 +788,6 @@ export function FloatingLevelSelector() {
                       // without knowing the building. Static, and read only
                       // from outside: nothing here depends on it.
                       data-guide-target={level.level === 0 ? 'level-ground' : undefined}
-                      key={level.id}
                     >
                       <SortableLevelRow
                         isSelected={isSelected}
@@ -700,7 +799,9 @@ export function FloatingLevelSelector() {
                         }
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
                         onPaste={() => handlePasteToLevel(level)}
+                        isGround={ground?.levelId === level.id && ground.atFoundationTop}
                         onRequestDelete={() => setDeletingLevel(level)}
+                        onSetGround={() => handleSetGround(level.id)}
                         onSelect={() => {
                           if (!isSelected) markPerfAction('level-switch', level.id)
                           setSelection(
@@ -722,6 +823,10 @@ export function FloatingLevelSelector() {
                         </button>
                       )}
                     </div>
+                    {ground?.levelId === level.id && !draggingLevelId && (
+                      <GroundLine ground={ground} onSeat={() => handleSetGround(level.id)} />
+                    )}
+                    </Fragment>
                   )
                 })}
               </div>

package/src/components/ui/helpers/contextual-helper-panel.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react'
 import type { ToolHint } from '@pascal-app/core'
-import { Fragment, useEffect, useSyncExternalStore } from 'react'
+import { Fragment, useEffect, useId, useState, useSyncExternalStore } from 'react'
 import {
   CONTINUATION_PROFILES,
   type ContinuationContext,
@@ -73,14 +73,16 @@ function ShortcutSequence({
                   <span className="text-[9px] text-muted-foreground/70">/</span>
                 ) : null}
                 <ShortcutToken
-                  className={cn(TOKEN_CLASS, active && 'border-white bg-white text-black shadow-sm')}
+                  className={cn(TOKEN_CLASS, active &&
+                      'border-foreground bg-foreground text-background shadow-sm dark:border-white dark:bg-white dark:text-black')}
                   value={alternative}
                 />
               </Fragment>
             ))
           ) : (
             <ShortcutToken
-              className={cn(TOKEN_CLASS, active && 'border-white bg-white text-black shadow-sm')}
+              className={cn(TOKEN_CLASS, active &&
+                      'border-foreground bg-foreground text-background shadow-sm dark:border-white dark:bg-white dark:text-black')}
               value={entry}
             />
           )}
@@ -423,6 +425,10 @@ function HudHeader({ title }: { title: HudTitle }) {
 const isEscHint = (hint: ContextualShortcutHint) =>
   hint.keys.length === 1 && hint.keys[0] === 'Esc'
 
+// A "!" row says why something won't happen here (a wall end a window can't wrap), not a key to
+// press, so it is never folded under More shortcuts.
+const isNoteHint = (hint: ContextualShortcutHint) => hint.keys.length === 1 && hint.keys[0] === '!'
+
 function HintRow({ hint }: { hint: ContextualShortcutHint }) {
   return (
     <div className={cn(ROW_CLASS, 'items-start')}>
@@ -431,7 +437,7 @@ function HintRow({ hint }: { hint: ContextualShortcutHint }) {
         <div
           className={cn(
             'text-xs leading-5',
-            hint.active ? 'font-medium text-white' : 'text-muted-foreground',
+            hint.active ? 'font-medium text-foreground dark:text-white' : 'text-muted-foreground',
           )}
         >
           {hint.label}
@@ -470,6 +476,8 @@ export function ContextualHelperPanel({
   notice?: string | null
 }) {
   const inStack = useInRightStack()
+  const [showAllHints, setShowAllHints] = useState(false)
+  const hintsId = useId()
   const modeChips = chipHints.filter((hint) => hint.chip)
   const hasChips = !!snapContext || !!continuationContext || modeChips.length > 0 || showPaintScope
   const fenceFeature = useEditor((state) =>
@@ -486,6 +494,10 @@ export function ContextualHelperPanel({
 
   const actionHints = hints.filter((hint) => !isEscHint(hint))
   const escHints = hints.filter(isEscHint)
+  const collapsedHints = actionHints.filter(
+    (hint, index) => index === 0 || hint.active || isNoteHint(hint),
+  )
+  const visibleHints = showAllHints ? actionHints : collapsedHints
 
   return (
     <div
@@ -493,9 +505,22 @@ export function ContextualHelperPanel({
       data-hud-card
     >
       {title ? <HudHeader title={title} /> : null}
-      {actionHints.map((hint) => (
-        <HintRow hint={hint} key={hintKey(hint)} />
-      ))}
+      <div id={hintsId} className="col-span-2 grid grid-cols-subgrid gap-y-1.5">
+        {visibleHints.map((hint) => (
+          <HintRow hint={hint} key={hintKey(hint)} />
+        ))}
+      </div>
+      {collapsedHints.length < actionHints.length ? (
+        <button
+          aria-controls={hintsId}
+          aria-expanded={showAllHints}
+          className="pointer-events-auto col-span-2 min-h-7 rounded-md px-1 text-left text-[11px] text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
+          onClick={() => setShowAllHints((value) => !value)}
+          type="button"
+        >
+          {showAllHints ? 'Fewer shortcuts' : 'More shortcuts'}
+        </button>
+      ) : null}
       {notice ? <HintRow hint={{ keys: ['!'], label: notice, active: true }} /> : null}
       {actionHints.length > 0 && (hasChips || escHints.length > 0) ? (
         <div className="col-span-2 my-0.5 h-px bg-border" />