@pascal-app/editor 1.0.7 → 1.1.1

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

@@ -35,11 +35,11 @@ import {
   useWallsBelowSetting,
 } from '../../editor-2d/floorplan-adjacent-walls-layer'
 import { SliderControl } from '../controls/slider-control'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { Switch } from '../primitives/switch'
-import { ActionButton } from './action-button'
-import { useActionMenuPopupSide } from './placement'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
+import { Switch } from '@pascal-app/viewer/ui'
+import { ActionButton } from '@pascal-app/viewer/ui'
+import { useActionMenuPopupSide } from '@pascal-app/viewer/ui'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024 // 200MB
 const ACCEPTED_FILE_TYPES = '.glb,.gltf,image/jpeg,image/png,image/webp,image/gif'

package/src/components/ui/controls/finish-swatch.tsx

@@ -13,7 +13,7 @@ import {
 } from '@pascal-app/core'
 import { useState } from 'react'
 import { materialSwatchStyle } from '../../../lib/material-swatch-style'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
 import { MaterialPicker } from './material-picker'
 
 type Swatch = { label: string; color: string | null; image: string | null; tinted?: boolean }

package/src/components/ui/controls/material-paint-panel.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react'
 import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
 import { type PaintMode, usePaintRegionMode } from '../../../lib/paint-region-mode'
 import useEditor, { armMaterialPaint } from '../../../store/use-editor'
-import { Button } from '../primitives/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+import { Button } from '@pascal-app/viewer/ui'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { MaterialPicker } from './material-picker'
 import { SceneMaterialList } from './scene-material-list'
 import { SegmentedControl } from './segmented-control'

package/src/components/ui/controls/scene-material-list.tsx

@@ -12,9 +12,9 @@ import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { sceneMaterialUsageCounts } from '../../../lib/scene-material-refs'
 import useEditor from '../../../store/use-editor'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { Input } from '../primitives/input'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { MaterialPropertiesEditor } from './material-properties-editor'
 
 export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId | null }) {

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

@@ -8,7 +8,7 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '@pascal-app/viewer/ui'
 
 interface SelectControlProps<T extends string> {
   label: string

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { formatNumber, parseLocalizedNumber, useLocale, useScene } from '@pascal-app/core'
+import { formatNumber, parseLocalizedNumber, useLocale, useScene, usePascalI18n } from '@pascal-app/core'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { lingoUnitSpec, measurementHint, parseMeasurement } from '../../../lib/measurement-parser'
 import { useLinearDisplay } from '../../../lib/use-linear-display'
@@ -71,6 +71,7 @@ export function SliderControl({
   restoreOnCommit = true,
   mixed = false,
 }: SliderControlProps) {
+  const i18n = usePascalI18n()
   const locale = useLocale()
   // Values and bounds stay in meters; gestures and input use the displayed unit.
   const { isImperial, displayUnit, parseUnit, precision, step, toDisplay, toStored } =
@@ -260,6 +261,12 @@ export function SliderControl({
     [],
   )
 
+  useEffect(() => {
+    const cancelOnBlur = () => { if (dragRef.current || editingRef.current) cancelEdit() }
+    window.addEventListener('blur', cancelOnBlur)
+    return () => window.removeEventListener('blur', cancelOnBlur)
+  }, [cancelEdit])
+
   useEffect(() => {
     if (!isDragging) return
     const escape = (event: KeyboardEvent) => {
@@ -392,6 +399,7 @@ export function SliderControl({
               </span>
             )}
             <input
+              aria-label={typeof label === 'string' ? label : undefined}
               autoFocus
               className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
               onBlur={submitValue}
@@ -418,14 +426,18 @@ export function SliderControl({
             )}
           </>
         ) : mixed && !isDragging ? (
-          <div
+          <button
+            type="button"
+            aria-label={typeof label === 'string' ? i18n._({ id: 'editor.controls.sliderControl.editLabel', message: 'Edit {label}', values: { label } }) : undefined}
             className="flex cursor-text items-center text-muted-foreground transition-colors hover:text-foreground"
             onClick={handleValueClick}
           >
-            <span className="font-mono tracking-tight">Mixed</span>
-          </div>
+            <span className="font-mono tracking-tight">{i18n._({ id: 'editor.controls.sliderControl.mixed', message: 'Mixed' })}</span>
+          </button>
         ) : (
-          <div
+          <button
+            type="button"
+            aria-label={typeof label === 'string' ? i18n._({ id: 'editor.controls.sliderControl.editLabel', message: 'Edit {label}', values: { label } }) : undefined}
             className="flex cursor-text items-center text-foreground/60 transition-colors hover:text-foreground"
             onClick={handleValueClick}
           >
@@ -433,7 +445,7 @@ export function SliderControl({
               {formatDisplay(displayValue)}
             </span>
             {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
-          </div>
+          </button>
         )}
       </div>
     </div>

package/src/components/ui/controls/terrain-sculpt-panel.tsx

@@ -10,7 +10,7 @@ import {
 import { Mountain, Pipette } from 'lucide-react'
 import { brushRadiusRange, flattenSite, resetSiteTerrain } from '../../../lib/terrain-sculpt'
 import useEditor from '../../../store/use-editor'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { SegmentedControl } from './segmented-control'
 import { SliderControl } from './slider-control'
 

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

@@ -34,50 +34,80 @@ function ToolOptionRow({
   return (
     <div className="flex flex-col gap-2">
       <div className="px-0.5 font-medium text-muted-foreground text-xs">{option.label}</div>
-      <div
-        className="grid gap-1.5"
-        style={{
-          gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
-        }}
-      >
-        {option.choices.map((choice) => {
-          const selected = active && choice.value === value
-          const thumbnail = getChoiceThumbnail?.(option, choice.value)
-          return (
-            <button
-              aria-pressed={selected}
-              className={cn(
-                '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-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
-              )}
-              key={choice.value}
-              onClick={() => {
-                triggerSFX('sfx:menu-click')
-                option.set(choice.value)
-                onSelect?.(option, choice.value)
-              }}
-              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
-              type="button"
-            >
-              {thumbnail && (
-                <Image
-                  alt=""
-                  className={cn(
-                    'mx-auto mb-1 size-14 object-contain',
-                    !selected && 'opacity-70 grayscale',
-                  )}
-                  height={56}
-                  src={thumbnail}
-                  width={56}
-                />
-              )}
-              {choice.label}
-            </button>
-          )
-        })}
-      </div>
+      {option.input ? (
+        <label className="flex items-center gap-2 rounded-lg border border-border px-2 py-1.5">
+          <input
+            key={value}
+            aria-label={option.label}
+            className="min-w-0 flex-1 bg-transparent text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            type="number"
+            defaultValue={value}
+            min={option.input.min}
+            max={option.input.max}
+            step={option.input.step ?? 'any'}
+            onBlur={(event) => {
+              const next = event.target.valueAsNumber
+              if (
+                Number.isFinite(next) &&
+                !event.target.validity.rangeUnderflow &&
+                !event.target.validity.rangeOverflow
+              ) {
+                option.set(String(next))
+                onSelect?.(option, String(next))
+              } else event.target.value = value
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') event.currentTarget.blur()
+            }}
+          />
+          <span className="text-xs text-muted-foreground">{option.input.unit}</span>
+        </label>
+      ) : (
+        <div
+          className="grid gap-1.5"
+          style={{
+            gridTemplateColumns: `repeat(${Math.min(option.choices.length, 3)}, minmax(0, 1fr))`,
+          }}
+        >
+          {option.choices.map((choice) => {
+            const selected = active && choice.value === value
+            const thumbnail = getChoiceThumbnail?.(option, choice.value)
+            return (
+              <button
+                aria-pressed={selected}
+                className={cn(
+                  '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-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
+                )}
+                key={choice.value}
+                onClick={() => {
+                  triggerSFX('sfx:menu-click')
+                  option.set(choice.value)
+                  onSelect?.(option, choice.value)
+                }}
+                onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                type="button"
+              >
+                {thumbnail && (
+                  <Image
+                    alt=""
+                    className={cn(
+                      'mx-auto mb-1 size-14 object-contain',
+                      !selected && 'opacity-70 grayscale',
+                    )}
+                    height={56}
+                    src={thumbnail}
+                    width={56}
+                  />
+                )}
+                {choice.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
       {activeChoice && activeChoice.description ? (
         <p className="px-0.5 text-[11px] text-muted-foreground leading-relaxed">
           {activeChoice.description}

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

@@ -61,14 +61,14 @@ import {
   useLocale,
   usePascalI18n,
 } from '@pascal-app/core'
-import { authoredLevelName, localizedLevelName } from '../../i18n/level-name'
+import { authoredLevelName, localizedLevelName } from '@pascal-app/viewer/ui'
 import { messageWithSlot } from '../../i18n/message-slot'
 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'
 import { cn } from '../../lib/utils'
-import { useIsMobile } from '../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import { ActionButton } from './controls/action-button'
 import { SliderControl } from './controls/slider-control'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
@@ -81,7 +81,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from './primitives/dialog'
-import { Popover, PopoverContent, PopoverTrigger } from './primitives/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@pascal-app/viewer/ui'
 
 // ── Inline rename input for a level row ─────────────────────────────────────
 

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

@@ -23,7 +23,7 @@ import useEditor, { type GridSnapStep } from '../../../store/use-editor'
 import useFenceCurveDraft from '../../../store/use-fence-curve-draft'
 import { IconRefGlyph } from '../icon-ref'
 import { ShortcutToken } from '../primitives/shortcut-token'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@pascal-app/viewer/ui'
 import { useInRightStack } from '../right-stack'
 
 // One muted container holds every row — passive key hints and interactive chips

package/src/components/ui/helpers/helper-manager.test.tsx

@@ -1,11 +1,18 @@
 import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
+import {
+  AXIS_MOVE_DRAG_LABEL,
+  PATH_POINT_DRAG_LABEL,
+  ROTATE_HANDLE_DRAG_LABEL,
+} from '../../../lib/contextual-help'
 import { SELECT_HUD_TITLE, toolHudTitle } from '../../../lib/hud-title'
 import { snapContextOf } from '../../../lib/snapping-mode'
 import { cornerHintRows } from '../../../store/use-corner-snap-hint'
-import { TooltipProvider } from '../primitives/tooltip'
+import { TooltipProvider } from '@pascal-app/viewer/ui'
 import { ContextualHelperPanel } from './contextual-helper-panel'
 import {
+  mepHandleGesture,
+  mepHandleGestureHints,
   mezzanineHints,
   openingHints,
   ROOM_DIVIDE_HINTS,
@@ -128,6 +135,52 @@ describe('HUD header', () => {
   })
 })
 
+describe('MEP handle HUD', () => {
+  const english = (hints: ReturnType<typeof mepHandleGestureHints>) =>
+    hints.map((hint) => (typeof hint.label === 'string' ? hint.label : hint.label.message))
+  const drag = (label: string) => ({ nodeId: 'pipe_a', label })
+
+  test('names a run point drag and an axis slide, and leaves rotate and resize to their own HUDs', () => {
+    expect(mepHandleGesture(drag(PATH_POINT_DRAG_LABEL))).toBe('edit-path')
+    expect(mepHandleGesture(drag(AXIS_MOVE_DRAG_LABEL))).toBe('move')
+    expect(mepHandleGesture(drag(ROTATE_HANDLE_DRAG_LABEL))).toBeNull()
+    expect(mepHandleGesture(drag('resize-diameter'))).toBeNull()
+    expect(mepHandleGesture(null)).toBeNull()
+  })
+
+  test('keeps "Alt: Detach the joint" on screen for the whole run point drag', () => {
+    const idle = mepHandleGestureHints('edit-path', false)
+    expect(english(idle)).toEqual(['Detach the joint', 'Cancel'])
+    expect(idle.map((hint) => hint.keys)).toEqual([['Alt'], ['Esc']])
+    expect(idle[0]?.active).toBe(false)
+    expect(mepHandleGestureHints('edit-path', true)[0]?.active).toBe(true)
+    expect(english(mepHandleGestureHints('move', false))).toEqual(['Cancel'])
+
+    const html = renderToStaticMarkup(
+      <TooltipProvider>
+        <ContextualHelperPanel hints={idle} snapContext="polygon" />
+      </TooltipProvider>,
+    )
+    for (const label of ['Detach the joint', 'Cancel', 'Snapping: Grid']) expect(html).toContain(label)
+  })
+
+  test('a handle drag snaps in its kind context, and a rotate arc in angles', () => {
+    const contextOf = (handle: string, profile: 'item' | 'structural') =>
+      snapContextOf({
+        scope: { kind: 'handle-drag', nodeId: 'pipe_a', handle },
+        mode: 'select',
+        tool: null,
+        profileOf: () => undefined,
+        profileOfNode: () => profile,
+      })
+    expect(contextOf(PATH_POINT_DRAG_LABEL, 'structural')).toBe('polygon')
+    expect(contextOf(AXIS_MOVE_DRAG_LABEL, 'structural')).toBe('polygon')
+    expect(contextOf(AXIS_MOVE_DRAG_LABEL, 'item')).toBe('item')
+    expect(contextOf('resize-diameter', 'item')).toBe('item')
+    expect(contextOf(ROTATE_HANDLE_DRAG_LABEL, 'item')).toBe('rotation')
+  })
+})
+
 describe('Cut opening HUD', () => {
   test('names the drag gesture "Draw the opening", not the mezzanine', () => {
     // The drag row folds under "More shortcuts", so read the rows the HUD is given.

package/src/components/ui/helpers/helper-manager.tsx

@@ -11,11 +11,13 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { useIsMobile } from '../../../hooks/use-mobile'
+import { useIsMobile } from '@pascal-app/viewer/ui'
 import {
+  AXIS_MOVE_DRAG_LABEL,
   type ContextualShortcutHint,
   GROUP_MOVE_DRAG_LABEL,
   GROUP_ROTATE_DRAG_LABEL,
+  PATH_POINT_DRAG_LABEL,
   ROTATE_HANDLE_DRAG_LABEL,
   resolveRotateHandleHelpHints,
   resolveSelectModeHelpHints,
@@ -294,6 +296,40 @@ export const MEZZANINE_GESTURE_HINTS: Record<MezzanineGesture, ContextualShortcu
   ],
 }
 
+export type MepHandleGesture = 'edit-path' | 'move'
+
+/**
+ * A drag on an MEP handle — a run point, where Alt detaches the joint, or a
+ * fitting, run or run segment slid along an axis — or null. Its HUD names the
+ * kind and the gesture, not "Resize".
+ */
+export function mepHandleGesture(
+  drag: { nodeId: string; label: string } | null,
+): MepHandleGesture | null {
+  if (drag?.label === PATH_POINT_DRAG_LABEL) return 'edit-path'
+  if (drag?.label === AXIS_MOVE_DRAG_LABEL) return 'move'
+  return null
+}
+
+export function mepHandleGestureHints(
+  gesture: MepHandleGesture,
+  altPressed: boolean,
+): ContextualShortcutHint[] {
+  const cancel: ContextualShortcutHint = {
+    keys: ['Esc'],
+    label: /* i18n */ { id: 'editor.helpers.helperManager.cancel', message: 'Cancel' },
+  }
+  if (gesture === 'move') return [cancel]
+  return [
+    {
+      keys: ['Alt'],
+      label: /* i18n */ { id: 'editor.helpers.helperManager.detachTheJoint', message: 'Detach the joint' },
+      active: altPressed,
+    },
+    cancel,
+  ]
+}
+
 /**
  * Whether the armed tool's own hints (`toolHints`) win over the node in hand: a registry tool that
  * holds its draft in a placing scope (the roof's footprint, a fitting, a block) says what its clicks
@@ -340,6 +376,10 @@ export function HelperManager() {
   const reshapingNode = useReshapingNode()
   const activeHandleDrag = useActiveHandleDrag()
   const mezzanineHandle = useScene((s) => mezzanineGesture(activeHandleDrag, s.nodes))
+  const mepHandle = mepHandleGesture(activeHandleDrag)
+  const mepHandleKind = useScene((s) =>
+    mepHandle && activeHandleDrag ? s.nodes[activeHandleDrag.nodeId as AnyNodeId]?.type : undefined,
+  )
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const isMobile = useIsMobile()
   const modifiers = useActiveModifierKeys()
@@ -518,6 +558,20 @@ export function HelperManager() {
     )
   }
 
+  if (mepHandle) {
+    return (
+      <ContextualHelperPanel
+        hints={mepHandleGestureHints(mepHandle, modifiers.alt)}
+        snapContext={snapContext}
+        title={
+          mepHandleKind
+            ? nodeKindHudTitle(mepHandleKind, mepHandle === 'move' ? 'move' : 'edit')
+            : null
+        }
+      />
+    )
+  }
+
   // A single-node resize arrow is still an active snapping interaction. Roof
   // width/depth handles opt into grid snapping, so keep the mode and grid-step
   // controls visible for the whole drag instead of falling through to idle

package/src/components/ui/level-duplicate-dialog.tsx

@@ -4,7 +4,7 @@ import type { LevelNode, MessageDescriptor } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
 import type { LevelDuplicatePreset } from '@pascal-app/core/building'
 import { useLocale, usePascalI18n } from '@pascal-app/core'
-import { localizedLevelName } from '../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { cn } from '../../lib/utils'
 import {
   Dialog,

package/src/components/ui/panels/collections/collections-popover.tsx

@@ -21,12 +21,12 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '../../../../components/ui/primitives/dropdown-menu'
+} from '@pascal-app/viewer/ui'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '../../../../components/ui/primitives/popover'
+} from '@pascal-app/viewer/ui'
 import { cn } from '../../../../lib/utils'
 
 interface CollectionsPopoverProps {

package/src/components/ui/panels/floor-foundation-panel.tsx

@@ -19,7 +19,7 @@ import {
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { localizedFloorFootprintName } from '../../../i18n/floor-footprint-name'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { useRef, useState } from 'react'
 import {
   applyFloorFoundation,
@@ -36,11 +36,11 @@ import {
   THICK_FLOOR_HINT,
   thickFloorAdvice,
 } from '../../../lib/floor-footprints'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { FinishSwatch } from '../controls/finish-swatch'
 import { MetricControl } from '../controls/metric-control'
 import { SegmentedControl } from '../controls/segmented-control'
-import { Button } from '../primitives/button'
+import { Button } from '@pascal-app/viewer/ui'
 import { PanelWrapper } from './panel-wrapper'
 
 /** Unpainted finishes, as the plate renders them (nodes' slab slot defaults). */

package/src/components/ui/panels/floor-opening-panel.tsx

@@ -14,13 +14,13 @@ import {
   finishFloorOpening,
   openingRoom,
 } from '../../../lib/floor-edit-session'
-import { formatAreaLabel } from '../../../lib/measurements'
-import { Button } from '../primitives/button'
-import { Switch } from '../primitives/switch'
+import { formatAreaLabel } from '@pascal-app/core'
+import { Button } from '@pascal-app/viewer/ui'
+import { Switch } from '@pascal-app/viewer/ui'
 import { PanelWrapper } from './panel-wrapper'
-import { localizedLevelName } from '../../../i18n/level-name'
+import { localizedLevelName } from '@pascal-app/viewer/ui'
 import { nodeLabel } from '../../../i18n/node-messages'
-import { displayRoomName } from '../../../lib/room-name-messages'
+import { displayRoomName } from '@pascal-app/viewer/ui'
 
 /**
  * A floor (or ceiling) opening: where it is, what it cuts, and the switch for

package/src/components/ui/panels/mobile-selection-bar.tsx

@@ -12,8 +12,8 @@ interface MobileSelectionBarProps {
   node: AnyNode | null
   label?: string
   icon?: string
-  onMove: () => void
-  onDuplicate: () => void
+  onMove?: () => void
+  onDuplicate?: () => void
   onDelete: () => void
   onEdit: () => void
 }
@@ -58,28 +58,32 @@ export function MobileSelectionBar({
       </button>
 
       <div className="flex items-center gap-0.5 border-border/40 border-l pl-1">
-        <button
-          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.move', message: 'Move' })}
-          className={ACTION_BTN}
-          onClick={(e) => {
-            stop(e)
-            onMove()
-          }}
-          type="button"
-        >
-          <Move className="h-4 w-4" />
-        </button>
-        <button
-          aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.duplicate', message: 'Duplicate' })}
-          className={ACTION_BTN}
-          onClick={(e) => {
-            stop(e)
-            onDuplicate()
-          }}
-          type="button"
-        >
-          <Copy className="h-4 w-4" />
-        </button>
+        {onMove && (
+          <button
+            aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.move', message: 'Move' })}
+            className={ACTION_BTN}
+            onClick={(e) => {
+              stop(e)
+              onMove()
+            }}
+            type="button"
+          >
+            <Move className="h-4 w-4" />
+          </button>
+        )}
+        {onDuplicate && (
+          <button
+            aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.duplicate', message: 'Duplicate' })}
+            className={ACTION_BTN}
+            onClick={(e) => {
+              stop(e)
+              onDuplicate()
+            }}
+            type="button"
+          >
+            <Copy className="h-4 w-4" />
+          </button>
+        )}
         <button
           aria-label={i18n._({ id: 'editor.panels.mobileSelectionBar.delete', message: 'Delete' })}
           className={cn(

package/src/components/ui/panels/multi-height-mode.tsx

@@ -16,7 +16,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { SegmentedControl } from '../controls/segmented-control'
 import { SliderControl } from '../controls/slider-control'
 import {
@@ -42,7 +42,7 @@ function wallFollowsLevelPatch(wall: WallNode, nodes: Record<string, AnyNode>):
 }
 
 function effectiveHeight(node: AnyNode, nodes: Record<string, AnyNode>): number {
-  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes)
+  if (node.type === 'wall') return getWallEffectiveHeightForNodes(node, nodes, 0)
   if (node.type === 'ceiling') return resolveCeilingHeight(node, nodes)
   const height = (node as { height?: number }).height
   return typeof height === 'number' ? height : 0
@@ -72,7 +72,7 @@ export function applyMultiHeightMode(
         if (isCustom) return {}
         if (node.type === 'ceiling') return { height: ceilingCustomHeight(node, nodes) }
         if (node.type === 'wall') {
-          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes)) }
+          return { height: Math.max(0.1, getWallEffectiveHeightForNodes(node, nodes, 0)) }
         }
         return {}
       }

package/src/components/ui/panels/multi-selection-panel.tsx

@@ -14,7 +14,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Building2, Copy, Group, Merge, Split, Trash2, Ungroup } from 'lucide-react'
 import { useMemo } from 'react'
 import { deleteSelection, duplicateSelectionAndPickUp } from '../../editor/group-actions'
-import { formatLinearMeasurement } from '../../../lib/measurements'
+import { formatLinearMeasurement } from '@pascal-app/core'
 import { triggerSFX } from '../../../lib/sfx-bus'
 import { writeWindowChanges } from '../../../lib/window-changes'
 import { collectSelectableCandidateIds } from '../../tools/select/select-candidates'