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

package/src/components/ui/action-menu/control-modes.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { type LevelNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
 import { type LucideIcon, Trash2 } from 'lucide-react'
 import Image from 'next/image'
+import { Fragment } from 'react'
 import { cn } from './../../../lib/utils'
-import useEditor, { selectSiteFloorplanContext } from './../../../store/use-editor'
+import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
+import { MeasurementControl } from './measurement-control'
 
-type ControlId = 'select' | 'box-select' | 'site-edit' | 'zone' | 'delete'
+type ControlId = 'select' | 'box-select' | 'zone' | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -26,22 +26,15 @@ type ControlConfig = {
 const controls: ControlConfig[] = [
   {
     id: 'select',
-    imageSrc: '/icons/select.png',
+    imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
     color: 'hover:bg-blue-500/20 hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-400',
   },
-  {
-    id: 'site-edit',
-    imageSrc: '/icons/site-flag.png',
-    label: 'Edit site',
-    color: 'hover:bg-white/5',
-    activeColor: 'bg-white/10 hover:bg-white/10',
-  },
   {
     id: 'zone',
-    imageSrc: '/icons/zone.png',
+    imageSrc: '/icons/zone.webp',
     label: 'Zone',
     shortcut: 'Z',
     color: 'hover:bg-green-500/20 hover:text-green-400',
@@ -65,48 +58,24 @@ export function ControlModes() {
   const setPhase = useEditor((state) => state.setPhase)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
-  const levelId = useViewer((s) => s.selection.levelId)
-
-  // Only subscribe to the primitive `level` number — when walls are added to
-  // this level the object ref changes but this number doesn't, so Object.is
-  // dedupes and we avoid a re-render.
-  const levelIndex = useScene((state) => {
-    if (!levelId) return null
-    const node = state.nodes[levelId]
-    return node?.type === 'level' ? (node as LevelNode).level : null
-  })
 
   const isSiteEditing = phase === 'site'
-  const isGroundFloor = levelIndex === 0
-  const canEnterSiteEdit = isGroundFloor || isSiteEditing
 
   const structureLayer = useEditor((state) => state.structureLayer)
 
   const getIsActive = (id: ControlId): boolean => {
-    if (isSiteEditing) return id === 'site-edit'
     if (id === 'select') return mode === 'select' && selectionTool === 'click'
     if (id === 'box-select') return mode === 'select' && selectionTool === 'marquee'
-    if (id === 'site-edit') return false
     if (id === 'zone')
       return mode === 'build' && phase === 'structure' && structureLayer === 'zones'
     return mode === id
   }
 
   const handleClick = (id: ControlId) => {
-    if (id === 'site-edit') {
-      if (isSiteEditing) {
-        // Toggle off → back to structure/select
-        setPhase('structure')
-        setMode('select')
-        setStructureLayer('elements')
-      } else if (isGroundFloor) {
-        useEditor.setState({ phase: 'site', mode: 'select', tool: null, catalogCategory: null })
-        selectSiteFloorplanContext()
-      }
-      return
-    }
-
-    // Exit site editing first if needed
+    // Exit site editing first if needed. Sculpting is a site-phase mode, so
+    // leaving the phase is exactly the right way to leave the brush — but the
+    // order matters: `setPhase` resets the mode, and setting the mode first
+    // would have it overwritten below.
     if (isSiteEditing) {
       setPhase('structure')
       setStructureLayer('elements')
@@ -136,64 +105,45 @@ export function ControlModes() {
       {controls.map((c) => {
         const ModeIcon = c.icon
         const isImageMode = Boolean(c.imageSrc)
-        const isSiteButton = c.id === 'site-edit'
         const isActive = getIsActive(c.id)
-        const isDisabled = isSiteButton && !canEnterSiteEdit
 
         return (
-          <ActionButton
-            className={cn(
-              'group text-muted-foreground',
-              isSiteButton
-                ? isActive
-                  ? c.activeColor
-                  : canEnterSiteEdit
-                    ? 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0'
-                    : 'cursor-not-allowed opacity-35 grayscale'
-                : !(isImageMode || isActive) && c.color,
-              !(isSiteButton || isImageMode) && isActive && c.activeColor,
-              !isSiteButton && isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
-              !isSiteButton && isImageMode && !isActive && 'hover:bg-white/5',
-            )}
-            disabled={isDisabled}
-            key={c.id}
-            label={
-              isSiteButton
-                ? isActive
-                  ? 'Exit site editing'
-                  : canEnterSiteEdit
-                    ? 'Edit site'
-                    : 'Site editing (ground level only)'
-                : c.label
-            }
-            onClick={() => handleClick(c.id)}
-            shortcut={c.shortcut}
-            size="icon"
-            variant="ghost"
-          >
-            {c.imageSrc ? (
-              <Image
-                alt={c.label}
-                className={cn(
-                  'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
-                  isSiteButton
-                    ? isActive
-                      ? 'opacity-100 grayscale-0'
-                      : ''
-                    : isActive
+          <Fragment key={c.id}>
+            {c.id === 'delete' ? <MeasurementControl /> : null}
+            <ActionButton
+              className={cn(
+                'group text-muted-foreground',
+                !(isImageMode || isActive) && c.color,
+                !isImageMode && isActive && c.activeColor,
+                isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
+                isImageMode && !isActive && 'hover:bg-white/5',
+              )}
+              label={c.label}
+              onClick={() => handleClick(c.id)}
+              shortcut={c.shortcut}
+              size="icon"
+              variant="ghost"
+            >
+              {c.imageSrc ? (
+                <Image
+                  alt={c.label}
+                  className={cn(
+                    'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
+                    isActive
                       ? 'opacity-100 grayscale-0'
                       : 'opacity-60 grayscale group-hover:opacity-100 group-hover:grayscale-0',
-                )}
-                height={28}
-                src={c.imageSrc}
-                width={28}
-              />
-            ) : c.iconifyIcon ? (
-              <Icon color="currentColor" height={18} icon={c.iconifyIcon} width={18} />
-            ) : (
-              ModeIcon && <ModeIcon className="h-5 w-5" />
-            )}
-          </ActionButton>
+                  )}
+                  height={28}
+                  src={c.imageSrc}
+                  width={28}
+                />
+              ) : c.iconifyIcon ? (
+                <Icon color="currentColor" height={18} icon={c.iconifyIcon} width={18} />
+              ) : (
+                ModeIcon && <ModeIcon className="h-5 w-5" />
+              )}
+            </ActionButton>
+          </Fragment>
         )
       })}
     </div>

package/src/components/ui/action-menu/furnish-tools.tsx

@@ -8,9 +8,9 @@ export type FurnishToolConfig = {
 }
 
 export const furnishTools: FurnishToolConfig[] = [
-  { id: 'item', iconSrc: '/icons/couch.png', label: 'Furniture', catalogCategory: 'furniture' },
-  { id: 'item', iconSrc: '/icons/appliance.png', label: 'Appliance', catalogCategory: 'appliance' },
-  { id: 'item', iconSrc: '/icons/kitchen.png', label: 'Kitchen', catalogCategory: 'kitchen' },
-  { id: 'item', iconSrc: '/icons/bathroom.png', label: 'Bathroom', catalogCategory: 'bathroom' },
-  { id: 'item', iconSrc: '/icons/tree.png', label: 'Outdoor', catalogCategory: 'outdoor' },
+  { id: 'item', iconSrc: '/icons/couch.webp', label: 'Furniture', catalogCategory: 'furniture' },
+  { id: 'item', iconSrc: '/icons/appliance.webp', label: 'Appliance', catalogCategory: 'appliance' },
+  { id: 'item', iconSrc: '/icons/kitchen.webp', label: 'Kitchen', catalogCategory: 'kitchen' },
+  { id: 'item', iconSrc: '/icons/bathroom.webp', label: 'Bathroom', catalogCategory: 'bathroom' },
+  { id: 'item', iconSrc: '/icons/tree.webp', label: 'Outdoor', catalogCategory: 'outdoor' },
 ]

package/src/components/ui/action-menu/index.tsx

@@ -9,7 +9,7 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
-import { GridSnapControl, SecondaryToggles } from './view-toggles'
+import { SecondaryToggles } from './view-toggles'
 
 // Mobile bottom offset matches the viewer's overlap behind the sheet's
 // rounded corners (SHEET_OVERLAP_PX in editor-layout-mobile) so the menu sits
@@ -57,9 +57,8 @@ export function ActionMenu({ className }: { className?: string }) {
             <div className="flex items-center justify-center gap-1">
               <ControlModes />
             </div>
-            {/* Row 2: grid snap + secondary toggles (orbit + top view hidden) */}
+            {/* Row 2: secondary toggles (orbit + top view hidden) */}
             <div className="flex items-center justify-center gap-1 border-border/50 border-t pt-1">
-              <GridSnapControl />
               <SecondaryToggles />
             </div>
           </div>
@@ -67,7 +66,6 @@ export function ActionMenu({ className }: { className?: string }) {
           <div className="flex items-center justify-center gap-1 px-2 py-1.5">
             <ControlModes />
             <div className="mx-1 h-5 w-px bg-border" />
-            <GridSnapControl />
             <SecondaryToggles />
             <div className="mx-1 h-5 w-px bg-border" />
             <CameraActions />

package/src/components/ui/action-menu/measurement-control.tsx

@@ -0,0 +1,267 @@
+'use client'
+
+import type {
+  ConstructionDimensionChainMode,
+  ConstructionDimensionMode,
+} from '@pascal-app/core'
+import {
+  Box,
+  Check,
+  ChevronDown,
+  CircleIcon,
+  Crosshair,
+  Grid2X2,
+  Minus,
+  Ruler,
+  ScanSearch,
+  Square,
+  Triangle,
+  Waypoints,
+} from 'lucide-react'
+import { useState } from 'react'
+import type { CreatableMeasurementKind } from '../../../lib/measurement-kind'
+import { cn } from '../../../lib/utils'
+import useEditor from '../../../store/use-editor'
+import useFloorplanMode from '../../../store/use-floorplan-mode'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { ActionButton } from './action-button'
+
+const measurementOptions = [
+  { kind: 'distance', label: 'Distance', icon: Ruler },
+  { kind: 'angle', label: 'Angle', icon: Triangle },
+  { kind: 'area', label: 'Area', icon: Square },
+  { kind: 'perimeter', label: 'Perimeter', icon: Waypoints },
+  { kind: 'volume', label: 'Volume', icon: Box },
+] as const satisfies readonly {
+  kind: CreatableMeasurementKind
+  label: string
+  icon: typeof Ruler
+}[]
+
+const measurementMenuOptions = [
+  { kind: 'smart', label: 'Smart', icon: ScanSearch },
+  ...measurementOptions,
+] as const
+
+const constructionDimensionOptions = [
+  { mode: 'linear', chainMode: 'point-to-point', label: 'Linear dimension', icon: Ruler },
+  { mode: 'linear', chainMode: 'continuous', label: 'Continuous dimension', icon: Waypoints },
+  { mode: 'radius', chainMode: 'point-to-point', label: 'Radius dimension', icon: CircleIcon },
+  { mode: 'diameter', chainMode: 'point-to-point', label: 'Diameter dimension', icon: CircleIcon },
+  { mode: 'center-mark', chainMode: 'point-to-point', label: 'Center mark', icon: Crosshair },
+  { mode: 'chord', chainMode: 'point-to-point', label: 'Chord dimension', icon: Minus },
+  { mode: 'arc-length', chainMode: 'point-to-point', label: 'Arc length', icon: CircleIcon },
+  { mode: 'angular', chainMode: 'point-to-point', label: 'Angular dimension', icon: Triangle },
+  { mode: 'coordinate', chainMode: 'continuous', label: 'Coordinate dimensions', icon: Grid2X2 },
+] as const satisfies readonly {
+  mode: ConstructionDimensionMode
+  chainMode: ConstructionDimensionChainMode
+  label: string
+  icon: typeof Ruler
+}[]
+
+export function MeasurementControl() {
+  const [isOpen, setIsOpen] = useState(false)
+  const mode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const floorplanMode = useFloorplanMode((state) => state.mode)
+  const selectedKind = useEditor((state) => state.lastMeasurementKind)
+  const activeToolKind = useEditor((state) => state.toolDefaults.measurement?.kind)
+  const constructionDimensionChainMode = useEditor(
+    (state) => state.toolDefaults['construction-dimension']?.chainMode,
+  )
+  const constructionDimensionMode = useEditor(
+    (state) => state.toolDefaults['construction-dimension']?.mode,
+  )
+  const setMode = useEditor((state) => state.setMode)
+  const setPhase = useEditor((state) => state.setPhase)
+  const setLastMeasurementKind = useEditor((state) => state.setLastMeasurementKind)
+  const setStructureLayer = useEditor((state) => state.setStructureLayer)
+  const setTool = useEditor((state) => state.setTool)
+  const setToolDefaults = useEditor((state) => state.setToolDefaults)
+  const setViewMode = useEditor((state) => state.setViewMode)
+
+  const selectedOption =
+    measurementOptions.find((option) => option.kind === selectedKind) ?? measurementOptions[0]
+  const isActive = mode === 'build' && tool === 'measurement'
+  const isConstructionDimensionActive = mode === 'build' && tool === 'construction-dimension'
+  const activeConstructionDimensionOption = constructionDimensionOptions.find(
+    (option) =>
+      option.mode === (constructionDimensionMode ?? 'linear') &&
+      option.chainMode === (constructionDimensionChainMode ?? 'point-to-point'),
+  )
+  const isControlActive = isActive || isConstructionDimensionActive
+  const isSmartActive = isActive && activeToolKind === 'smart'
+  const SelectedIcon = isConstructionDimensionActive
+    ? (activeConstructionDimensionOption?.icon ?? Ruler)
+    : isSmartActive
+      ? ScanSearch
+      : selectedOption.icon
+  const selectedLabel = isConstructionDimensionActive
+    ? (activeConstructionDimensionOption?.label ?? 'Linear dimension')
+    : isSmartActive
+      ? 'Smart'
+      : selectedOption.label
+
+  const activateMeasurement = (kind: CreatableMeasurementKind) => {
+    setPhase('structure')
+    setStructureLayer('elements')
+    setLastMeasurementKind(kind)
+    setToolDefaults('measurement', { kind })
+    setMode('build')
+    setTool('measurement')
+  }
+
+  const handlePrimaryClick = () => {
+    if (isControlActive) {
+      setMode('select')
+      return
+    }
+    activateMeasurement(selectedKind)
+  }
+
+  const activateSmartMeasurement = () => {
+    setPhase('structure')
+    setStructureLayer('elements')
+    setToolDefaults('measurement', { kind: 'smart' })
+    setMode('build')
+    setTool('measurement')
+  }
+
+  const activateConstructionDimension = (
+    dimensionMode: ConstructionDimensionMode,
+    chainMode: ConstructionDimensionChainMode,
+  ) => {
+    if (useFloorplanMode.getState().mode !== 'expert') {
+      useFloorplanMode.getState().showExpertModeNotice('Construction Dimension')
+      return
+    }
+    setPhase('structure')
+    setStructureLayer('elements')
+    setViewMode('2d')
+    setToolDefaults('construction-dimension', { chainMode, mode: dimensionMode })
+    setMode('build')
+    setTool('construction-dimension')
+  }
+
+  return (
+    <Popover onOpenChange={setIsOpen} open={isOpen}>
+      <div className="flex items-center">
+        <ActionButton
+          aria-label={`Measure: ${selectedLabel}`}
+          aria-pressed={isControlActive}
+          className={cn(
+            'rounded-r-none p-0 text-muted-foreground',
+            isControlActive
+              ? 'bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/20'
+              : 'hover:bg-cyan-500/15 hover:text-cyan-400',
+          )}
+          label={`Measure: ${selectedLabel}`}
+          onClick={handlePrimaryClick}
+          shortcut="M"
+          size="icon"
+          variant="ghost"
+        >
+          <SelectedIcon aria-hidden="true" className="h-5 w-5" />
+        </ActionButton>
+
+        <PopoverTrigger asChild>
+          <button
+            aria-expanded={isOpen}
+            aria-haspopup="menu"
+            aria-label="Measurement options"
+            className={cn(
+              'flex h-11 w-6 items-center justify-center rounded-r-lg text-muted-foreground transition-colors',
+              isOpen
+                ? 'bg-cyan-500/15 text-cyan-400'
+                : 'hover:bg-cyan-500/10 hover:text-cyan-400',
+            )}
+            type="button"
+          >
+            <ChevronDown
+              aria-hidden="true"
+              className={cn('h-3 w-3 transition-transform', isOpen && 'rotate-180')}
+            />
+          </button>
+        </PopoverTrigger>
+      </div>
+
+      <PopoverContent
+        align="center"
+        className="max-h-[70vh] w-64 overflow-y-auto rounded-lg border-border/45 bg-background/96 p-2 shadow-elevation-3 backdrop-blur-xl"
+        side="top"
+        sideOffset={14}
+      >
+        <div aria-label="Measurement type" className="space-y-1" role="menu">
+          {measurementMenuOptions.map((option) => {
+            const OptionIcon = option.icon
+            const isSmart = option.kind === 'smart'
+            const isSelected = isSmart
+              ? isSmartActive
+              : !isConstructionDimensionActive && !isSmartActive && option.kind === selectedKind
+            return (
+              <button
+                aria-checked={isSelected}
+                className={cn(
+                  'flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm transition-colors',
+                  isSelected
+                    ? 'bg-white/10 text-foreground'
+                    : 'text-muted-foreground hover:bg-white/8 hover:text-foreground',
+                )}
+                key={option.kind}
+                onClick={() => {
+                  if (isSmart) activateSmartMeasurement()
+                  else activateMeasurement(option.kind)
+                  setIsOpen(false)
+                }}
+                role="menuitemradio"
+                type="button"
+              >
+                <OptionIcon aria-hidden="true" className="h-4 w-4" />
+                <span>{option.label}</span>
+                {isSelected ? <Check aria-hidden="true" className="ml-auto h-4 w-4" /> : null}
+              </button>
+            )
+          })}
+
+          {floorplanMode === 'expert' ? (
+            <>
+              <div className="my-1.5 h-px bg-border/60" />
+              <div className="px-2.5 pt-1 pb-0.5 font-semibold text-[10px] text-muted-foreground uppercase tracking-wider">
+                Floor plan
+              </div>
+
+              {constructionDimensionOptions.map((option) => {
+                const OptionIcon = option.icon
+                const isSelected =
+                  isConstructionDimensionActive && activeConstructionDimensionOption === option
+                return (
+                  <button
+                    aria-checked={isSelected}
+                    className={cn(
+                      'flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-sm transition-colors',
+                      isSelected
+                        ? 'bg-white/10 text-foreground'
+                        : 'text-muted-foreground hover:bg-white/8 hover:text-foreground',
+                    )}
+                    key={`${option.mode}-${option.chainMode}`}
+                    onClick={() => {
+                      activateConstructionDimension(option.mode, option.chainMode)
+                      setIsOpen(false)
+                    }}
+                    role="menuitemradio"
+                    type="button"
+                  >
+                    <OptionIcon aria-hidden="true" className="h-4 w-4" />
+                    <span>{option.label}</span>
+                    {isSelected ? <Check aria-hidden="true" className="ml-auto h-4 w-4" /> : null}
+                  </button>
+                )
+              })}
+            </>
+          ) : null}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/ui/action-menu/structure-tools.tsx

@@ -12,17 +12,26 @@ export type ToolConfig = {
 // for cursor/floorplan indicators. Roof-mounted accessories are intentionally
 // absent — they're placed from the roof inspector's "Add element" section.
 export const tools: ToolConfig[] = [
-  { id: 'wall', iconSrc: '/icons/wall.png', label: 'Wall' },
-  { id: 'door', iconSrc: '/icons/door.png', label: 'Door' },
-  { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
-  { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
-  { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
-  { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
-  { id: 'column', iconSrc: '/icons/column.png', label: 'Column' },
-  { id: 'elevator', iconSrc: '/icons/elevator.png', label: 'Elevator' },
-  { id: 'slab', iconSrc: '/icons/floor.png', label: 'Slab' },
-  { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
-  { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
-  { id: 'spawn', iconSrc: '/icons/spawn-point.png', label: 'Spawn Point' },
-  { id: 'shelf', iconSrc: '/icons/shelf.png', label: 'Shelf' },
+  { id: 'wall', iconSrc: '/icons/wall.webp', label: 'Wall' },
+  { id: 'door', iconSrc: '/icons/door.webp', label: 'Door' },
+  { id: 'window', iconSrc: '/icons/window.webp', label: 'Window' },
+  { id: 'stair', iconSrc: '/icons/stairs.webp', label: 'Stairs' },
+  { id: 'roof', iconSrc: '/icons/roof.webp', label: 'Gable Roof' },
+  { id: 'fence', iconSrc: '/icons/fence.webp', label: 'Fence' },
+  { id: 'column', iconSrc: '/icons/column.webp', label: 'Column' },
+  { id: 'elevator', iconSrc: '/icons/elevator.webp', label: 'Elevator' },
+  { id: 'slab', iconSrc: '/icons/floor.webp', label: 'Slab' },
+  { id: 'ceiling', iconSrc: '/icons/ceiling.webp', label: 'Ceiling' },
+  { id: 'zone', iconSrc: '/icons/zone.webp', label: 'Zone' },
+  { id: 'spawn', iconSrc: '/icons/spawn-point.webp', label: 'Spawn Point' },
+  { id: 'shelf', iconSrc: '/icons/shelf.webp', label: 'Shelf' },
+  { id: 'duct-segment', iconSrc: '/icons/duct.webp', label: 'Duct' },
+  { id: 'duct-fitting', iconSrc: '/icons/duct-fitting.webp', label: 'Duct Fitting' },
+  { id: 'duct-terminal', iconSrc: '/icons/registers.webp', label: 'Register' },
+  { id: 'hvac-equipment', iconSrc: '/icons/HVAC.webp', label: 'HVAC Unit' },
+  { id: 'pipe-segment', iconSrc: '/icons/dwv-pipes.webp', label: 'DWV Pipe' },
+  { id: 'pipe-trap', iconSrc: '/icons/dwv-pipes.webp', label: 'Trap' },
+  { id: 'pipe-fitting', iconSrc: '/icons/duct-fitting.webp', label: 'Pipe Fitting' },
+  { id: 'lineset', iconSrc: '/icons/lineset.webp', label: 'Lineset' },
+  { id: 'liquid-line', iconSrc: '/icons/lineset.webp', label: 'Liquid Line' },
 ]