@pascal-app/editor 0.4.0

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

@@ -0,0 +1,245 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { cn } from '../../../lib/utils'
+
+interface SliderControlProps {
+  label: React.ReactNode
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  precision?: number
+  step?: number
+  className?: string
+  unit?: string
+}
+
+function stepPrecision(s: number): number {
+  if (s <= 0) return 0
+  return Math.max(0, Math.ceil(-Math.log10(s)))
+}
+
+export function SliderControl({
+  label,
+  value,
+  onChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  precision = 0,
+  step = 1,
+  className,
+  unit = '',
+}: SliderControlProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [inputValue, setInputValue] = useState(value.toFixed(precision))
+
+  const dragRef = useRef<{ startX: number; startValue: number } | null>(null)
+  const labelRef = useRef<HTMLDivElement>(null)
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  const clamp = useCallback((val: number) => Math.min(Math.max(val, min), max), [min, max])
+
+  useEffect(() => {
+    if (!isEditing) {
+      setInputValue(value.toFixed(precision))
+    }
+  }, [value, precision, isEditing])
+
+  // Wheel support on the label
+  useEffect(() => {
+    const el = labelRef.current
+    if (!el) return
+    const handleWheel = (e: WheelEvent) => {
+      if (isEditing) return
+      e.preventDefault()
+      const direction = e.deltaY < 0 ? 1 : -1
+      let s = step
+      if (e.shiftKey) s = step * 10
+      else if (e.altKey) s = step * 0.1
+      const newValue = clamp(valueRef.current + direction * s)
+      const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
+      if (final !== valueRef.current) onChange(final)
+    }
+    el.addEventListener('wheel', handleWheel, { passive: false })
+    return () => el.removeEventListener('wheel', handleWheel)
+  }, [isEditing, step, clamp, onChange, precision])
+
+  // Arrow key support while hovered
+  useEffect(() => {
+    if (!isHovered || isEditing) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      let direction = 0
+      if (e.key === 'ArrowUp' || e.key === 'ArrowRight') direction = 1
+      else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') direction = -1
+      if (direction !== 0) {
+        e.preventDefault()
+        let s = step
+        if (e.shiftKey) s = step * 10
+        else if (e.metaKey || e.ctrlKey) s = step * 0.1
+        const newValue = clamp(valueRef.current + direction * s)
+        const final = Number.parseFloat(newValue.toFixed(stepPrecision(s)))
+        if (final !== valueRef.current) onChange(final)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isHovered, isEditing, step, clamp, onChange, precision])
+
+  const handleLabelPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (isEditing) return
+      e.preventDefault()
+      e.currentTarget.setPointerCapture(e.pointerId)
+      dragRef.current = { startX: e.clientX, startValue: valueRef.current }
+      setIsDragging(true)
+      useScene.temporal.getState().pause()
+    },
+    [isEditing],
+  )
+
+  const handleLabelPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!dragRef.current) return
+      const { startX, startValue } = dragRef.current
+      const dx = e.clientX - startX
+      let s = step
+      if (e.shiftKey) s = step * 10
+      else if (e.metaKey || e.ctrlKey) s = step * 0.1
+      // 4 px per step at default sensitivity
+      const newValue = clamp(
+        Number.parseFloat((startValue + (dx / 4) * s).toFixed(stepPrecision(s))),
+      )
+      onChange(newValue)
+    },
+    [step, precision, clamp, onChange],
+  )
+
+  const handleLabelPointerUp = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!dragRef.current) return
+      const { startValue } = dragRef.current
+      const finalVal = valueRef.current
+      dragRef.current = null
+      setIsDragging(false)
+      e.currentTarget.releasePointerCapture(e.pointerId)
+
+      if (startValue !== finalVal) {
+        onChange(startValue)
+        useScene.temporal.getState().resume()
+        onChange(finalVal)
+      } else {
+        useScene.temporal.getState().resume()
+      }
+    },
+    [onChange],
+  )
+
+  const handleValueClick = useCallback(() => {
+    setIsEditing(true)
+    setInputValue(value.toFixed(precision))
+  }, [value, precision])
+
+  const submitValue = useCallback(() => {
+    const numValue = Number.parseFloat(inputValue)
+    if (Number.isNaN(numValue)) {
+      setInputValue(value.toFixed(precision))
+    } else {
+      onChange(clamp(Number.parseFloat(numValue.toFixed(precision))))
+    }
+    setIsEditing(false)
+  }, [inputValue, onChange, clamp, precision, value])
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        submitValue()
+      } else if (e.key === 'Escape') {
+        setInputValue(value.toFixed(precision))
+        setIsEditing(false)
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        const newV = clamp(value + step)
+        onChange(newV)
+        setInputValue(newV.toFixed(precision))
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        const newV = clamp(value - step)
+        onChange(newV)
+        setInputValue(newV.toFixed(precision))
+      }
+    },
+    [submitValue, value, precision, step, clamp, onChange],
+  )
+
+  return (
+    <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',
+        className,
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Label — drag handle */}
+      <div
+        className={cn(
+          'flex shrink-0 cursor-ew-resize items-center gap-1.5 text-xs transition-colors',
+          isDragging ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/80',
+        )}
+        onPointerDown={handleLabelPointerDown}
+        onPointerMove={handleLabelPointerMove}
+        onPointerUp={handleLabelPointerUp}
+        ref={labelRef}
+      >
+        {/* Grip dots — 2×3 grid */}
+        <div
+          className={cn(
+            'grid grid-cols-2 gap-[2.5px] transition-opacity',
+            isDragging ? 'opacity-70' : 'opacity-25 group-hover:opacity-50',
+          )}
+        >
+          {[...Array(6)].map((_, i) => (
+            <div className="h-[2px] w-[2px] rounded-full bg-current" key={i} />
+          ))}
+        </div>
+        <span className="font-medium">{label}</span>
+      </div>
+
+      <div className="flex-1" />
+
+      {/* Value — click to edit */}
+      <div className="flex items-center text-xs">
+        {isEditing ? (
+          <>
+            <input
+              autoFocus
+              className="w-14 bg-transparent p-0 text-right font-mono text-foreground outline-none selection:bg-primary/30"
+              onBlur={submitValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+              type="text"
+              value={inputValue}
+            />
+            {unit && <span className="ml-[1px] text-muted-foreground">{unit}</span>}
+          </>
+        ) : (
+          <div
+            className="flex cursor-text items-center text-foreground/60 transition-colors hover:text-foreground"
+            onClick={handleValueClick}
+          >
+            <span className="font-mono tabular-nums tracking-tight" suppressHydrationWarning>
+              {Number(value.toFixed(precision)).toFixed(precision)}
+            </span>
+            {unit && <span className="ml-[1px] text-muted-foreground">{unit}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+'use client'
+
+import { Check } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+interface ToggleControlProps {
+  label: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  className?: string
+}
+
+export function ToggleControl({ label, checked, onChange, className }: ToggleControlProps) {
+  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]',
+        className,
+      )}
+      onClick={() => onChange(!checked)}
+    >
+      <div className="select-none text-muted-foreground transition-colors group-hover:text-foreground">
+        {label}
+      </div>
+
+      <div
+        className={cn(
+          'flex h-5 w-5 items-center justify-center rounded-[4px] border transition-all duration-200',
+          checked
+            ? 'border-primary bg-primary text-primary-foreground'
+            : 'border-border bg-black/20 text-transparent group-hover:border-muted-foreground',
+        )}
+      >
+        <Check className="h-3.5 w-3.5" strokeWidth={3} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,355 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type BuildingNode,
+  LevelNode,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { MoreVertical, Plus, Trash2 } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { deleteLevelWithFallbackSelection } from '../../lib/level-selection'
+import { cn } from '../../lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} 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({
+  level,
+  isEditing,
+  onStopEditing,
+}: {
+  level: LevelNode
+  isEditing: boolean
+  onStopEditing: () => void
+}) {
+  const updateNode = useScene((s) => s.updateNode)
+  const defaultName = `Level ${level.level}`
+  const [value, setValue] = useState(level.name || '')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditing) {
+      setValue(level.name || '')
+      setTimeout(() => {
+        inputRef.current?.focus()
+        inputRef.current?.select()
+      }, 0)
+    }
+  }, [isEditing, level.name])
+
+  const handleSave = useCallback(() => {
+    const trimmed = value.trim()
+    if (trimmed !== level.name) {
+      updateNode(level.id, { name: trimmed || undefined })
+    }
+    onStopEditing()
+  }, [value, level.id, level.name, updateNode, onStopEditing])
+
+  if (!isEditing) return null
+
+  return (
+    <input
+      className="m-0 h-full w-full min-w-0 rounded-lg bg-transparent px-2.5 py-1.5 font-medium text-foreground text-xs outline-none ring-1 ring-primary/50"
+      onBlur={handleSave}
+      onChange={(e) => setValue(e.target.value)}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          handleSave()
+        } else if (e.key === 'Escape') {
+          e.preventDefault()
+          onStopEditing()
+        }
+      }}
+      placeholder={defaultName}
+      ref={inputRef}
+      type="text"
+      value={value}
+    />
+  )
+}
+
+// ── Level row with three-dot menu ───────────────────────────────────────────
+
+function LevelRow({
+  level,
+  isSelected,
+  onSelect,
+  onRequestDelete,
+}: {
+  level: LevelNode
+  isSelected: boolean
+  onSelect: () => void
+  onRequestDelete: () => void
+}) {
+  const [isEditing, setIsEditing] = useState(false)
+
+  return (
+    <div className="group/level">
+      {isEditing ? (
+        <LevelInlineRename
+          isEditing={isEditing}
+          level={level}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      ) : (
+        <div
+          className={cn(
+            'flex items-center rounded-lg transition-colors',
+            isSelected
+              ? 'bg-white/10 text-foreground'
+              : 'text-muted-foreground/70 hover:bg-white/5 hover:text-muted-foreground',
+          )}
+        >
+          <button
+            className="flex min-w-0 flex-1 items-center justify-start px-2.5 py-1.5 font-medium text-xs"
+            onClick={onSelect}
+            onDoubleClick={(e) => {
+              e.stopPropagation()
+              setIsEditing(true)
+            }}
+            title={getLevelDisplayLabel(level)}
+            type="button"
+          >
+            <span className="truncate">{getLevelDisplayLabel(level)}</span>
+          </button>
+
+          {/* Vertical three-dot menu — inside the pill */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <button
+                className="flex h-5 w-4 shrink-0 items-center justify-center text-muted-foreground/40 opacity-0 transition-all hover:text-foreground group-hover/level:opacity-100"
+                onClick={(e) => e.stopPropagation()}
+                type="button"
+              >
+                <MoreVertical className="h-3 w-3" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-36 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-red-400"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onRequestDelete()
+                }}
+                type="button"
+              >
+                <Trash2 className="h-3 w-3" />
+                Delete level
+              </button>
+            </PopoverContent>
+          </Popover>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Main component ──────────────────────────────────────────────────────────
+
+export function FloatingLevelSelector() {
+  const selectedBuildingId = useViewer((s) => s.selection.buildingId)
+  const levelId = useViewer((s) => s.selection.levelId)
+  const setSelection = useViewer((s) => s.setSelection)
+  const createNode = useScene((s) => s.createNode)
+  const updateNodes = useScene((s) => s.updateNodes)
+
+  const [deletingLevel, setDeletingLevel] = useState<LevelNode | null>(null)
+
+  const resolvedBuildingId = useScene((state) => {
+    if (selectedBuildingId) return selectedBuildingId
+    const first = Object.values(state.nodes).find((n) => n?.type === 'building') as
+      | BuildingNode
+      | undefined
+    return first?.id ?? null
+  })
+
+  const levels = useScene(
+    useShallow((state) => {
+      if (!resolvedBuildingId) return [] as LevelNode[]
+      const building = state.nodes[resolvedBuildingId]
+      if (!building || building.type !== 'building') return [] as LevelNode[]
+      return (building as BuildingNode).children
+        .map((id) => state.nodes[id])
+        .filter((node): node is LevelNode => node?.type === 'level')
+        .sort((a, b) => a.level - b.level)
+    }),
+  )
+
+  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,
+      children: [],
+      parentId: resolvedBuildingId,
+    })
+    createNode(newLevel, resolvedBuildingId)
+    setSelection({ buildingId: resolvedBuildingId, levelId: newLevel.id })
+  }, [resolvedBuildingId, levels, createNode, 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,
+      children: [],
+      parentId: resolvedBuildingId,
+    })
+    createNode(newLevel, resolvedBuildingId)
+    setSelection({ buildingId: resolvedBuildingId, levelId: newLevel.id })
+  }, [resolvedBuildingId, levels, createNode, setSelection])
+
+  const handleInsertBetween = useCallback(
+    (lowerIndex: number) => {
+      if (!resolvedBuildingId) return
+      const lower = levels[lowerIndex]
+      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,
+        children: [],
+        parentId: resolvedBuildingId,
+      })
+      createNode(newLevel, resolvedBuildingId)
+      setSelection({ buildingId: resolvedBuildingId, levelId: newLevel.id })
+    },
+    [resolvedBuildingId, levels, createNode, updateNodes, setSelection],
+  )
+
+  const handleConfirmDelete = useCallback(() => {
+    if (!deletingLevel) return
+    deleteLevelWithFallbackSelection(deletingLevel.id)
+    setDeletingLevel(null)
+  }, [deletingLevel])
+
+  if (levels.length === 0) return null
+
+  const reversedLevels = [...levels].reverse()
+
+  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'
+
+  return (
+    <>
+      <div className="pointer-events-auto absolute top-14 left-3 z-20">
+        <div className="relative">
+          {/* Floating + at top edge */}
+          <button
+            className={cn(addButtonClass, 'top-0 -translate-y-1/2')}
+            onClick={handleAddAbove}
+            title="Add level above"
+            type="button"
+          >
+            <Plus className="h-2.5 w-2.5" />
+          </button>
+
+          {/* Floating + at bottom edge */}
+          <button
+            className={cn(addButtonClass, 'bottom-0 translate-y-1/2')}
+            onClick={handleAddBelow}
+            title="Add level below"
+            type="button"
+          >
+            <Plus className="h-2.5 w-2.5" />
+          </button>
+
+          {/* Level list */}
+          <div className="flex flex-col gap-0.5 rounded-xl border border-border bg-background/90 p-1 shadow-2xl backdrop-blur-md">
+            {reversedLevels.map((level, i) => {
+              const isSelected = level.id === levelId
+              const sortedIndex = levels.indexOf(level)
+              const showGapBelow = i < reversedLevels.length - 1
+
+              return (
+                <div className="relative" key={level.id}>
+                  <LevelRow
+                    isSelected={isSelected}
+                    level={level}
+                    onRequestDelete={() => setDeletingLevel(level)}
+                    onSelect={() =>
+                      setSelection(
+                        resolvedBuildingId
+                          ? { buildingId: resolvedBuildingId, levelId: level.id }
+                          : { levelId: level.id },
+                      )
+                    }
+                  />
+
+                  {showGapBelow && (
+                    <button
+                      className={cn(addButtonClass, 'bottom-0 translate-y-1/2')}
+                      onClick={() => handleInsertBetween(sortedIndex - 1)}
+                      title="Insert level here"
+                      type="button"
+                    >
+                      <Plus className="h-2.5 w-2.5" />
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Delete confirmation dialog */}
+      <Dialog onOpenChange={(open) => !open && setDeletingLevel(null)} open={!!deletingLevel}>
+        <DialogContent showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>Delete level</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete{' '}
+              <strong>{deletingLevel ? getLevelDisplayLabel(deletingLevel) : ''}</strong>? All
+              walls, floors, and objects on this level will be permanently removed.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <button
+              className="rounded-full border border-border px-4 py-2 text-sm transition-colors hover:bg-accent"
+              onClick={() => setDeletingLevel(null)}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="rounded-full bg-red-600 px-4 py-2 text-sm text-white transition-colors hover:bg-red-700"
+              onClick={handleConfirmDelete}
+              type="button"
+            >
+              Delete
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { ShortcutToken } from '../primitives/shortcut-token'
+
+export function CeilingHelper() {
+  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">Add point</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Shift" />
+        <span className="text-muted-foreground">Allow non-45° angles</span>
+      </div>
+      <div className="flex items-center gap-2 text-sm">
+        <ShortcutToken value="Esc" />
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+'use client'
+
+import useEditor from '../../../store/use-editor'
+import { CeilingHelper } from './ceiling-helper'
+import { ItemHelper } from './item-helper'
+import { RoofHelper } from './roof-helper'
+import { SlabHelper } from './slab-helper'
+import { WallHelper } from './wall-helper'
+
+export function HelperManager() {
+  const tool = useEditor((s) => s.tool)
+  const movingNode = useEditor((state) => state.movingNode)
+
+  if (movingNode) {
+    return <ItemHelper showEsc />
+  }
+
+  // Show appropriate helper based on current tool
+  switch (tool) {
+    case 'wall':
+      return <WallHelper />
+    case 'item':
+      return <ItemHelper />
+    case 'slab':
+      return <SlabHelper />
+    case 'ceiling':
+      return <CeilingHelper />
+    case 'roof':
+      return <RoofHelper />
+    default:
+      return null
+  }
+}