@pascal-app/editor 0.8.0 → 0.9.2

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/floating-level-selector.tsx

@@ -26,7 +26,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Copy, GripVertical, MoreVertical, Plus, Trash2 } from 'lucide-react'
+import { ClipboardPaste, Copy, GripVertical, MoreVertical, Plus, Trash2 } from 'lucide-react'
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
@@ -34,13 +34,21 @@ import {
   useEffect,
   useRef,
   useState,
+  useSyncExternalStore,
 } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from '../../lib/level-duplication'
+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 { cn } from '../../lib/utils'
 import { LevelDuplicateDialog } from './level-duplicate-dialog'
 import {
@@ -53,10 +61,6 @@ import {
 } from './primitives/dialog'
 import { Popover, PopoverContent, PopoverTrigger } from './primitives/popover'
 
-function getLevelDisplayLabel(level: LevelNode) {
-  return level.name || `Level ${level.level}`
-}
-
 // ── Inline rename input for a level row ─────────────────────────────────────
 
 function LevelInlineRename({
@@ -69,7 +73,7 @@ function LevelInlineRename({
   onStopEditing: () => void
 }) {
   const updateNode = useScene((s) => s.updateNode)
-  const defaultName = `Level ${level.level}`
+  const defaultName = getDefaultLevelName(level.level)
   const [value, setValue] = useState(level.name || '')
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -126,6 +130,7 @@ function LevelRow({
   dragHandleRef,
   onSelect,
   onDuplicate,
+  onPaste,
   onRequestDelete,
 }: {
   level: LevelNode
@@ -135,6 +140,7 @@ function LevelRow({
   dragHandleRef?: (element: HTMLButtonElement | null) => void
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
+  onPaste?: () => void
   onRequestDelete: () => void
 }) {
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
@@ -160,7 +166,7 @@ function LevelRow({
         >
           <button
             {...dragHandleProps}
-            aria-label={`Reorder ${getLevelDisplayLabel(level)}`}
+            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',
               isDragging && 'cursor-grabbing opacity-100',
@@ -183,10 +189,10 @@ function LevelRow({
               e.stopPropagation()
               setIsEditing(true)
             }}
-            title={getLevelDisplayLabel(level)}
+            title={getLevelDisplayName(level)}
             type="button"
           >
-            <span className="truncate">{getLevelDisplayLabel(level)}</span>
+            <span className="truncate">{getLevelDisplayName(level)}</span>
           </button>
 
           {/* Vertical three-dot menu — inside the pill */}
@@ -223,6 +229,19 @@ function LevelRow({
                 <Copy className="h-3 w-3" />
                 Duplicate with options...
               </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"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onPaste()
+                  }}
+                  type="button"
+                >
+                  <ClipboardPaste className="h-3 w-3" />
+                  Paste copied selection
+                </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-red-400"
                 onClick={(e) => {
@@ -256,12 +275,14 @@ function SortableLevelRow({
   isSelected,
   onSelect,
   onDuplicate,
+  onPaste,
   onRequestDelete,
 }: {
   level: LevelNode
   isSelected: boolean
   onSelect: () => void
   onDuplicate: (preset?: LevelDuplicatePreset) => void
+  onPaste?: () => void
   onRequestDelete: () => void
 }) {
   const {
@@ -291,6 +312,7 @@ function SortableLevelRow({
         isSelected={isSelected}
         level={level}
         onDuplicate={onDuplicate}
+        onPaste={onPaste}
         onRequestDelete={onRequestDelete}
         onSelect={onSelect}
       />
@@ -310,6 +332,11 @@ 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 },
@@ -424,6 +451,13 @@ export function FloatingLevelSelector() {
     [createNodes, levels, resolvedBuildingId, setSelection, updateNodes],
   )
 
+  const handlePasteToLevel = useCallback((level: LevelNode) => {
+    const result = pasteEditorClipboardToLevel(level.id)
+    if (result?.pastedIds.length) {
+      sfxEmitter.emit('sfx:item-place')
+    }
+  }, [])
+
   const handleDragStart = useCallback((event: DragStartEvent) => {
     setDraggingLevelId(String(event.active.id))
   }, [])
@@ -523,6 +557,9 @@ export function FloatingLevelSelector() {
                         isSelected={isSelected}
                         level={level}
                         onDuplicate={(preset) => handleDuplicateLevel(level, preset)}
+                        onPaste={
+                          clipboardSnapshot ? () => handlePasteToLevel(level) : undefined
+                        }
                         onRequestDelete={() => setDeletingLevel(level)}
                         onSelect={() =>
                           setSelection(
@@ -559,7 +596,7 @@ export function FloatingLevelSelector() {
             <DialogTitle>Delete level</DialogTitle>
             <DialogDescription>
               Are you sure you want to delete{' '}
-              <strong>{deletingLevel ? getLevelDisplayLabel(deletingLevel) : ''}</strong>? All
+              <strong>{deletingLevel ? getLevelDisplayName(deletingLevel) : ''}</strong>? All
               walls, floors, and objects on this level will be permanently removed.
             </DialogDescription>
           </DialogHeader>

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' },
+      ]}
+    />
   )
 }