@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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

@@ -2,6 +2,12 @@
 
 import { useScene } 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'
 import { cn } from '../../../lib/utils'
 
 interface SliderControlProps {
@@ -59,10 +65,17 @@ export function SliderControl({
   unit = '',
   restoreOnCommit = true,
 }: SliderControlProps) {
+  // Display/storage conversion so the value honors the metric/imperial toggle.
+  // `value`, `onChange`, `onCommit`, `min`/`max`/`clamp` are always in the
+  // stored unit (meters for `unit === 'm'`); the step, drag deltas, text field
+  // and rendered number are in the DISPLAY unit (feet when imperial). For
+  // metric and non-length units these conversions are the identity.
+  const { isImperial, displayUnit, toDisplay, toStored } = useLinearDisplay(unit, precision)
+
   const [isEditing, setIsEditing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  const [inputValue, setInputValue] = useState(value.toFixed(precision))
+  const [inputValue, setInputValue] = useState(toDisplay(value).toFixed(precision))
 
   const dragRef = useRef<{
     // Original value at drag start — preserved across modifier re-anchors so
@@ -80,12 +93,23 @@ export function SliderControl({
   valueRef.current = value
 
   const clamp = useCallback((val: number) => Math.min(Math.max(val, min), max), [min, max])
+  // Apply a signed display-unit delta to a stored value, rounding in the
+  // display unit and clamping in the stored unit.
+  const applyDisplayDelta = useCallback(
+    (storedValue: number, displayDelta: number, displayStep: number) =>
+      clamp(
+        toStored(
+          Number.parseFloat((toDisplay(storedValue) + displayDelta).toFixed(stepPrecision(displayStep))),
+        ),
+      ),
+    [clamp, toDisplay, toStored],
+  )
 
   useEffect(() => {
     if (!isEditing) {
-      setInputValue(value.toFixed(precision))
+      setInputValue(toDisplay(value).toFixed(precision))
     }
-  }, [value, precision, isEditing])
+  }, [value, precision, isEditing, toDisplay])
 
   // Wheel support on the label
   useEffect(() => {
@@ -96,14 +120,13 @@ export function SliderControl({
       e.preventDefault()
       const direction = e.deltaY < 0 ? 1 : -1
       const s = getAdjustedStep(step, e)
-      const newValue = clamp(valueRef.current + direction * s)
-      const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
+      const final = applyDisplayDelta(valueRef.current, direction * s, s)
       if (final !== valueRef.current) onChange(final)
       onCommit?.(final)
     }
     el.addEventListener('wheel', handleWheel, { passive: false })
     return () => el.removeEventListener('wheel', handleWheel)
-  }, [isEditing, step, clamp, onChange, onCommit])
+  }, [isEditing, step, applyDisplayDelta, onChange, onCommit])
 
   // Arrow key support while hovered
   useEffect(() => {
@@ -115,15 +138,14 @@ export function SliderControl({
       if (direction !== 0) {
         e.preventDefault()
         const s = getAdjustedStep(step, e)
-        const newValue = clamp(valueRef.current + direction * s)
-        const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
+        const final = applyDisplayDelta(valueRef.current, direction * s, s)
         if (final !== valueRef.current) onChange(final)
         onCommit?.(final)
       }
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isHovered, isEditing, step, clamp, onChange, onCommit])
+  }, [isHovered, isEditing, step, applyDisplayDelta, onChange, onCommit])
 
   const handleLabelPointerDown = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
@@ -160,15 +182,13 @@ export function SliderControl({
       const dx = e.clientX - anchorX
       const s = step * multiplier
       // 4 px per step at default sensitivity
-      const newValue = clamp(
-        Number.parseFloat((anchorValue + (dx / 4) * s).toFixed(stepPrecision(s))),
-      )
+      const newValue = applyDisplayDelta(anchorValue, (dx / 4) * s, s)
       if (newValue !== valueRef.current) {
         valueRef.current = newValue
         onChange(newValue)
       }
     },
-    [step, clamp, onChange],
+    [step, applyDisplayDelta, onChange],
   )
 
   const handleLabelPointerUp = useCallback(
@@ -195,49 +215,65 @@ export function SliderControl({
 
   const handleValueClick = useCallback(() => {
     setIsEditing(true)
-    setInputValue(value.toFixed(precision))
-  }, [value, precision])
+    setInputValue(toDisplay(value).toFixed(precision))
+  }, [value, precision, toDisplay])
 
   const submitValue = useCallback(() => {
-    const numValue = Number.parseFloat(inputValue)
-    if (Number.isNaN(numValue)) {
-      setInputValue(value.toFixed(precision))
+    const spec = lingoUnitSpec(unit)
+    let stored = spec
+      ? parseMeasurement(inputValue, spec, {
+          bareUnit: isImperial ? 'ft' : spec.unitId,
+          system: isImperial ? 'us' : 'metric',
+        })
+      : null
+    if (stored === null) {
+      // Fallback: a bare number typed in the DISPLAY unit → convert to stored.
+      const numValue = Number.parseFloat(inputValue)
+      stored = Number.isFinite(numValue) ? toStored(numValue) : null
+    }
+    if (stored === null) {
+      setInputValue(toDisplay(value).toFixed(precision))
     } else {
-      const nextValue = clamp(Number.parseFloat(numValue.toFixed(precision)))
+      const nextValue = clamp(toStored(Number.parseFloat(toDisplay(stored).toFixed(precision))))
       onChange(nextValue)
       onCommit?.(nextValue)
     }
     setIsEditing(false)
-  }, [inputValue, onChange, onCommit, clamp, precision, value])
+  }, [inputValue, unit, isImperial, onChange, onCommit, clamp, precision, value, toDisplay, toStored])
+
+  const spec = lingoUnitSpec(unit)
+  const hint =
+    isEditing && spec
+      ? measurementHint(inputValue, spec, {
+          bareUnit: isImperial ? 'ft' : spec.unitId,
+          system: isImperial ? 'us' : 'metric',
+          displayUnit: isImperial ? 'ft' : spec.unitId,
+          precision,
+          clamp,
+        })
+      : null
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
         submitValue()
       } else if (e.key === 'Escape') {
-        setInputValue(value.toFixed(precision))
+        setInputValue(toDisplay(value).toFixed(precision))
         setIsEditing(false)
-      } else if (e.key === 'ArrowUp') {
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault()
+        const direction = e.key === 'ArrowUp' ? 1 : -1
         const adjustedStep = getAdjustedStep(step, e)
-        const newV = clamp(
-          Number.parseFloat((value + adjustedStep).toFixed(stepPrecision(adjustedStep))),
-        )
+        const newV = applyDisplayDelta(value, direction * adjustedStep, adjustedStep)
         onChange(newV)
-        setInputValue(newV.toFixed(precision))
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault()
-        const adjustedStep = getAdjustedStep(step, e)
-        const newV = clamp(
-          Number.parseFloat((value - adjustedStep).toFixed(stepPrecision(adjustedStep))),
-        )
-        onChange(newV)
-        setInputValue(newV.toFixed(precision))
+        setInputValue(toDisplay(newV).toFixed(precision))
       }
     },
-    [submitValue, value, precision, step, clamp, onChange],
+    [submitValue, value, precision, step, applyDisplayDelta, onChange, toDisplay],
   )
 
+  const displayValue = toDisplay(value)
+
   return (
     <div
       className={cn(
@@ -279,6 +315,11 @@ export function SliderControl({
       <div className="flex items-center text-xs">
         {isEditing ? (
           <>
+            {hint && (
+              <span className="mr-1 shrink-0 whitespace-nowrap text-[10px] text-muted-foreground/50 tabular-nums">
+                {hint}
+              </span>
+            )}
             <input
               autoFocus
               className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
@@ -288,7 +329,16 @@ export function SliderControl({
               type="text"
               value={inputValue}
             />
-            {unit && <span className="ml-[1px] text-muted-foreground">{unit}</span>}
+            {displayUnit && (
+              <span
+                className={cn(
+                  'ml-[1px] transition-opacity duration-150',
+                  hint ? 'opacity-0' : 'text-muted-foreground/40',
+                )}
+              >
+                {displayUnit}
+              </span>
+            )}
           </>
         ) : (
           <div
@@ -296,9 +346,9 @@ export function SliderControl({
             onClick={handleValueClick}
           >
             <span className="font-mono tabular-nums tracking-tight" suppressHydrationWarning>
-              {Number(value.toFixed(precision)).toFixed(precision)}
+              {Number(displayValue.toFixed(precision)).toFixed(precision)}
             </span>
-            {unit && <span className="ml-[1px] text-muted-foreground">{unit}</span>}
+            {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
           </div>
         )}
       </div>

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

@@ -0,0 +1,193 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  RAISE_METRES_PER_STROKE,
+  type SiteNode,
+  type TerrainVerb,
+  useScene,
+} from '@pascal-app/core'
+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 { SegmentedControl } from './segmented-control'
+import { SliderControl } from './slider-control'
+
+const VERB_OPTIONS: Array<{ value: TerrainVerb; iconSrc: string; hint: string }> = [
+  { value: 'raise', iconSrc: '/icons/terrain-raise.webp', hint: 'Raise' },
+  { value: 'lower', iconSrc: '/icons/terrain-lower.webp', hint: 'Lower' },
+  { value: 'flatten', iconSrc: '/icons/terrain-flatten.webp', hint: 'Flatten' },
+  { value: 'smooth', iconSrc: '/icons/terrain-smooth.webp', hint: 'Smooth' },
+]
+
+const VERB_HINTS: Record<TerrainVerb, string> = {
+  raise: `Drag to raise the ground. One pass moves it up to ${RAISE_METRES_PER_STROKE} m — release and drag again to go further.`,
+  lower: `Drag to lower the ground. One pass moves it down to ${RAISE_METRES_PER_STROKE} m.`,
+  flatten: 'Drag to level the ground toward the target height. It never overshoots.',
+  smooth: 'Drag to soften slopes and remove ridges. Flat ground stays flat.',
+}
+
+/**
+ * Sculpt controls for terrain mode — verb, brush, and the two lot-wide actions.
+ *
+ * A panel rather than a floating HUD because the brush settings are the sort of
+ * thing a user adjusts between strokes and then leaves alone, and because
+ * sculpting already owns the whole viewport pointer: putting controls over the
+ * canvas would put them over the surface being sculpted.
+ *
+ * Embedders mount this wherever their sculpt controls belong (the community
+ * editor puts it in the Build sidebar while sculpt mode is active), exactly like
+ * `MaterialPaintPanel`.
+ */
+export function TerrainSculptPanel() {
+  const verb = useEditor((state) => state.terrainVerb)
+  const setTerrainVerb = useEditor((state) => state.setTerrainVerb)
+  const brush = useEditor((state) => state.terrainBrush)
+  const setTerrainBrush = useEditor((state) => state.setTerrainBrush)
+  const flattenTarget = useEditor((state) => state.terrainFlattenTarget)
+  const setTerrainFlattenTarget = useEditor((state) => state.setTerrainFlattenTarget)
+  const sampling = useEditor((state) => state.terrainSampling)
+  const setTerrainSampling = useEditor((state) => state.setTerrainSampling)
+
+  const nodes = useScene((state) => state.nodes)
+  const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const siteId = rootNodeIds[0]
+  const siteNode = siteId ? nodes[siteId as AnyNodeId] : undefined
+  const site = siteNode?.type === 'site' ? (siteNode as SiteNode) : null
+  const [minRadius, maxRadius] = brushRadiusRange(site)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1.5">
+        <SegmentedControl
+          className="h-14"
+          onChange={(next) => setTerrainVerb(next)}
+          options={VERB_OPTIONS.map(({ value, iconSrc, hint }) => ({
+            value,
+            label: (
+              <span className="flex flex-col items-center gap-0.5">
+                <img
+                  alt=""
+                  aria-hidden
+                  className="size-7 object-contain"
+                  draggable={false}
+                  height={28}
+                  src={iconSrc}
+                  width={28}
+                />
+                <span className="text-[9px] leading-none">{hint}</span>
+              </span>
+            ),
+          }))}
+          value={verb}
+        />
+        <p className="px-0.5 text-muted-foreground text-xs">{VERB_HINTS[verb]}</p>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        {/*
+          Range from `brushRadiusRange`, shared with the `[`/`]` keys. The low end
+          is not a preference: it tracks the field's sample spacing, and a brush
+          under it lands between samples and paints nothing at all.
+        */}
+        <SliderControl
+          label="Size"
+          max={maxRadius}
+          min={minRadius}
+          onChange={(radius) => setTerrainBrush({ radius })}
+          precision={1}
+          step={0.5}
+          unit="m"
+          value={brush.radius}
+        />
+        <SliderControl
+          label="Strength"
+          max={1}
+          min={0.05}
+          onChange={(strength) => setTerrainBrush({ strength })}
+          precision={2}
+          step={0.05}
+          value={brush.strength}
+        />
+        <SliderControl
+          label="Softness"
+          max={1}
+          min={0}
+          onChange={(falloff) => setTerrainBrush({ falloff })}
+          precision={2}
+          step={0.05}
+          value={brush.falloff}
+        />
+        <SegmentedControl
+          onChange={(shape) => setTerrainBrush({ shape })}
+          options={[
+            { value: 'round', label: 'Round' },
+            { value: 'square', label: 'Square' },
+          ]}
+          value={brush.shape}
+        />
+      </div>
+
+      {verb === 'flatten' && (
+        <div className="flex flex-col gap-1.5 border-border/60 border-t pt-3">
+          <div className="flex items-center gap-2">
+            <div className="min-w-0 flex-1">
+              <SliderControl
+                label="Target"
+                max={50}
+                min={-50}
+                onChange={setTerrainFlattenTarget}
+                precision={2}
+                step={0.1}
+                unit="m"
+                value={flattenTarget ?? 0}
+              />
+            </div>
+            <Button
+              aria-label="Pick target height from the ground"
+              aria-pressed={sampling}
+              onClick={() => setTerrainSampling(!sampling)}
+              size="icon-sm"
+              type="button"
+              variant={sampling ? 'default' : 'outline'}
+            >
+              <Pipette />
+            </Button>
+          </div>
+          <p className="px-0.5 text-muted-foreground text-xs">
+            {sampling
+              ? 'Click the ground to pick its height as the target.'
+              : flattenTarget === null
+                ? 'No target yet — the first click samples the ground under it.'
+                : 'Every flatten stroke levels toward this height.'}
+          </p>
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 border-border/60 border-t pt-3">
+        <Button
+          className="flex-1"
+          disabled={!site}
+          onClick={() => site && flattenSite(site, flattenTarget ?? 0)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <Mountain />
+          Level lot
+        </Button>
+        <Button
+          className="flex-1"
+          disabled={!site?.terrain}
+          onClick={() => site && resetSiteTerrain(site)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          Clear terrain
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -22,6 +22,8 @@ import {
   type AnyNode,
   type AnyNodeId,
   type BuildingNode,
+  DEFAULT_LEVEL_HEIGHT,
+  getStoredLevelHeight,
   LevelNode,
   useScene,
 } from '@pascal-app/core'
@@ -34,22 +36,19 @@ import {
   useEffect,
   useRef,
   useState,
-  useSyncExternalStore,
 } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { pasteSelectionAndPickUp } from '../editor/group-actions'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '../../lib/level-duplication'
-import { getDefaultLevelName, getLevelDisplayName } from '../../lib/level-name'
+import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
-import {
-  getEditorClipboardSnapshot,
-  pasteEditorClipboardToLevel,
-  subscribeEditorClipboard,
-} from '../../lib/scene-clipboard'
-import { sfxEmitter } from '../../lib/sfx-bus'
+import { useLinearDisplay } from '../../lib/use-linear-display'
 import { cn } from '../../lib/utils'
+import { ActionButton } from './controls/action-button'
+import { SliderControl } from './controls/slider-control'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
 import {
   Dialog,
@@ -145,6 +144,26 @@ function LevelRow({
 }) {
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
+  const updateNode = useScene((s) => s.updateNode)
+  const { isImperial, toDisplay, displayUnit } = useLinearDisplay('m', 2)
+
+  const storeyHeight = getStoredLevelHeight(level)
+  // toFixed(2) + strip one trailing zero: "2.50" → "2.5", "2.75" stays.
+  const storeyHeightLabel = `${toDisplay(storeyHeight).toFixed(2).replace(/0$/, '')} ${displayUnit}`
+
+  // Clean preset values per display system; imperial stores exact meters
+  // for whole-foot storey heights.
+  const heightPresets = isImperial
+    ? [
+        { label: '8 ft', height: 2.4384 },
+        { label: '9 ft', height: 2.7432 },
+        { label: '10 ft', height: 3.048 },
+      ]
+    : [
+        { label: '2.5 m', height: 2.5 },
+        { label: '3.0 m', height: 3.0 },
+        { label: '3.5 m', height: 3.5 },
+      ]
 
   return (
     <div className="group/level">
@@ -195,6 +214,48 @@ function LevelRow({
             <span className="truncate">{getLevelDisplayName(level)}</span>
           </button>
 
+          {/* Storey height badge — opens the height popover */}
+          <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"
+                onClick={(e) => e.stopPropagation()}
+                title="Level height"
+                type="button"
+              >
+                {storeyHeightLabel}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              className="w-56 p-2"
+              onClick={(e) => e.stopPropagation()}
+              side="right"
+              sideOffset={8}
+            >
+              <SliderControl
+                label="Level height"
+                max={6}
+                min={1}
+                onChange={(v) => updateNode(level.id, { height: v })}
+                precision={3}
+                step={0.1}
+                unit="m"
+                value={Math.round(storeyHeight * 1000) / 1000}
+              />
+              <div className="mt-1.5 grid grid-cols-3 gap-1.5">
+                {heightPresets.map((preset) => (
+                  <ActionButton
+                    className="h-7 px-2"
+                    key={preset.label}
+                    label={preset.label}
+                    onClick={() => updateNode(level.id, { height: preset.height })}
+                  />
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+
           {/* Vertical three-dot menu — inside the pill */}
           <Popover>
             <PopoverTrigger asChild>
@@ -332,11 +393,6 @@ export function FloatingLevelSelector() {
 
   const [deletingLevel, setDeletingLevel] = useState<LevelNode | null>(null)
   const [draggingLevelId, setDraggingLevelId] = useState<string | null>(null)
-  const clipboardSnapshot = useSyncExternalStore(
-    subscribeEditorClipboard,
-    getEditorClipboardSnapshot,
-    getEditorClipboardSnapshot,
-  )
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 4 },
@@ -371,6 +427,7 @@ export function FloatingLevelSelector() {
     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,
     })
@@ -383,6 +440,7 @@ export function FloatingLevelSelector() {
     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,
     })
@@ -409,6 +467,7 @@ export function FloatingLevelSelector() {
 
       const newLevel = LevelNode.parse({
         level: newLevelNumber,
+        height: DEFAULT_LEVEL_HEIGHT,
         children: [],
         parentId: resolvedBuildingId,
       })
@@ -452,10 +511,7 @@ export function FloatingLevelSelector() {
   )
 
   const handlePasteToLevel = useCallback((level: LevelNode) => {
-    const result = pasteEditorClipboardToLevel(level.id)
-    if (result?.pastedIds.length) {
-      sfxEmitter.emit('sfx:item-place')
-    }
+    void pasteSelectionAndPickUp(level.id)
   }, [])
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
@@ -557,9 +613,7 @@ export function FloatingLevelSelector() {
                         isSelected={isSelected}
                         level={level}
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
-                        onPaste={
-                          clipboardSnapshot ? () => handlePasteToLevel(level) : undefined
-                        }
+                        onPaste={() => handlePasteToLevel(level)}
                         onRequestDelete={() => setDeletingLevel(level)}
                         onSelect={() =>
                           setSelection(

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

@@ -1,32 +1,19 @@
-import { ShortcutToken } from '../primitives/shortcut-token'
+import { ContextualHelperPanel } from './contextual-helper-panel'
 
 interface BuildingHelperProps {
   showRotate?: boolean
 }
 
+// Rotate is one hint with both keys (R / T) — never two separate
+// counterclockwise / clockwise rows — to match every other placement helper.
 export function BuildingHelper({ showRotate }: BuildingHelperProps) {
   return (
-    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Left click" />
-        <span className="text-muted-foreground">Place building</span>
-      </div>
-      {showRotate && (
-        <>
-          <div className="flex items-center gap-2 text-sm">
-            <ShortcutToken value="R" />
-            <span className="text-muted-foreground">Rotate counterclockwise</span>
-          </div>
-          <div className="flex items-center gap-2 text-sm">
-            <ShortcutToken value="T" />
-            <span className="text-muted-foreground">Rotate clockwise</span>
-          </div>
-        </>
-      )}
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Esc" />
-        <span className="text-muted-foreground">Cancel</span>
-      </div>
-    </div>
+    <ContextualHelperPanel
+      hints={[
+        { keys: ['Left click'], label: 'Place building' },
+        ...(showRotate ? [{ keys: ['R', 'T'], label: 'Rotate' }] : []),
+        { keys: ['Esc'], label: 'Cancel' },
+      ]}
+    />
   )
 }