@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -0,0 +1,188 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import {
+  Box,
+  Check,
+  ChevronDown,
+  Eye,
+  EyeOff,
+  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 { 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
+
+export function MeasurementControl() {
+  const [isOpen, setIsOpen] = useState(false)
+  const mode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const selectedKind = useEditor((state) => state.lastMeasurementKind)
+  const activeToolKind = useEditor((state) => state.toolDefaults.measurement?.kind)
+  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 showMeasurements = useViewer((state) => state.showMeasurements)
+  const setShowMeasurements = useViewer((state) => state.setShowMeasurements)
+
+  const selectedOption =
+    measurementOptions.find((option) => option.kind === selectedKind) ?? measurementOptions[0]
+  const isActive = mode === 'build' && tool === 'measurement'
+  const isSmartActive = isActive && activeToolKind === 'smart'
+  const SelectedIcon = isSmartActive ? ScanSearch : selectedOption.icon
+  const selectedLabel = isSmartActive ? 'Smart' : selectedOption.label
+
+  const activateMeasurement = (kind: CreatableMeasurementKind) => {
+    setPhase('structure')
+    setStructureLayer('elements')
+    setLastMeasurementKind(kind)
+    setToolDefaults('measurement', { kind })
+    setMode('build')
+    setTool('measurement')
+  }
+
+  const handlePrimaryClick = () => {
+    if (isActive) {
+      setMode('select')
+      return
+    }
+    activateMeasurement(selectedKind)
+  }
+
+  const activateSmartMeasurement = () => {
+    setPhase('structure')
+    setStructureLayer('elements')
+    setToolDefaults('measurement', { kind: 'smart' })
+    setMode('build')
+    setTool('measurement')
+  }
+
+  return (
+    <Popover onOpenChange={setIsOpen} open={isOpen}>
+      <div className="flex items-center">
+        <ActionButton
+          aria-label={`Measure: ${selectedLabel}`}
+          aria-pressed={isActive}
+          className={cn(
+            'rounded-r-none p-0 text-muted-foreground',
+            isActive
+              ? '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="w-56 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
+              : !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>
+            )
+          })}
+
+          <div className="my-1.5 h-px bg-border/60" />
+
+          <button
+            aria-checked={showMeasurements}
+            className="flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-left text-muted-foreground text-sm transition-colors hover:bg-white/8 hover:text-foreground"
+            onClick={() => setShowMeasurements(!showMeasurements)}
+            role="menuitemcheckbox"
+            type="button"
+          >
+            {showMeasurements ? (
+              <Eye aria-hidden="true" className="h-4 w-4" />
+            ) : (
+              <EyeOff aria-hidden="true" className="h-4 w-4" />
+            )}
+            <span>Show measurements</span>
+            <span className="ml-auto text-xs">{showMeasurements ? 'On' : 'Off'}</span>
+          </button>
+        </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' },
 ]

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

@@ -1,6 +1,5 @@
 'use client'
 
-import { Icon } from '@iconify/react'
 import {
   type AnyNodeId,
   type BuildingNode,
@@ -10,26 +9,22 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Check, ChevronDown, Eye, EyeOff, Layers2, Plus, Trash2 } from 'lucide-react'
+import { Check, ChevronDown, Eye, EyeOff, Layers2, Plus, Trash2, Waypoints } from 'lucide-react'
 import { useCallback, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { getLevelDisplayName } from '../../../lib/level-name'
+import { getLevelDisplayName } from '@pascal-app/core'
 import { createLocalGuideImage } from '../../../lib/local-guide-image'
 import { cn } from '../../../lib/utils'
-import useEditor, { type GridSnapStep } from '../../../store/use-editor'
+import useEditor from '../../../store/use-editor'
 import { useUploadStore } from '../../../store/use-upload'
 import { SliderControl } from '../controls/slider-control'
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { ActionButton } from './action-button'
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024 // 200MB
 const ACCEPTED_FILE_TYPES = '.glb,.gltf,image/jpeg,image/png,image/webp,image/gif'
-const GRID_SNAP_STEPS: GridSnapStep[] = [0.5, 0.25, 0.1, 0.05]
-
-function formatGridSnapStep(step: GridSnapStep) {
-  return step.toFixed(2)
-}
+const REFERENCES_EMPTY_TEXT =
+  'Upload GLB meshes as scan references or blueprint images as guide references.'
 
 // ── Helper: get guide images for the current level ──────────────────────────
 
@@ -224,7 +219,7 @@ function GuidesControl() {
             <img
               alt="Guides"
               className="h-[28px] w-[28px] object-contain"
-              src="/icons/floorplan.png"
+              src="/icons/floorplan.webp"
             />
             <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
               {guides.length}
@@ -263,7 +258,7 @@ function GuidesControl() {
         <div className="space-y-3">
           <div className="flex items-center gap-2">
             <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-background/80">
-              <img alt="" className="h-4 w-4 object-contain" src="/icons/floorplan.png" />
+              <img alt="" className="h-4 w-4 object-contain" src="/icons/floorplan.webp" />
             </span>
             <div className="min-w-0 flex-1">
               <p className="font-medium text-foreground text-sm">Guide images</p>
@@ -303,7 +298,7 @@ function GuidesControl() {
                       <img
                         alt=""
                         className="h-3.5 w-3.5 shrink-0 object-contain opacity-70"
-                        src="/icons/floorplan.png"
+                        src="/icons/floorplan.webp"
                       />
                       <p className="truncate font-medium text-foreground text-sm">
                         {guide.name || `Guide image ${index + 1}`}
@@ -342,7 +337,7 @@ function GuidesControl() {
             </div>
           ) : (
             <div className="rounded-xl border border-border/45 border-dashed bg-background/60 px-3 py-4 text-muted-foreground text-sm">
-              No guide images on this level yet.
+              {REFERENCES_EMPTY_TEXT}
             </div>
           )}
         </div>
@@ -351,70 +346,6 @@ function GuidesControl() {
   )
 }
 
-// ── Grid snap toggle ────────────────────────────────────────────────────────
-
-function GridSnapControl() {
-  const [isOpen, setIsOpen] = useState(false)
-  const gridSnapStep = useEditor((state) => state.gridSnapStep)
-  const setGridSnapStep = useEditor((state) => state.setGridSnapStep)
-
-  return (
-    <Popover onOpenChange={setIsOpen} open={isOpen}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <button
-              aria-expanded={isOpen}
-              aria-label={`Grid snap: ${formatGridSnapStep(gridSnapStep)}`}
-              className={cn(
-                'flex h-11 w-11 flex-col items-center justify-center rounded-lg text-muted-foreground transition-all hover:bg-white/5 hover:text-foreground',
-                isOpen && 'bg-white/10 text-foreground',
-              )}
-              type="button"
-            >
-              <Icon height={16} icon="lucide:grid-2x2" width={16} />
-              <span className="mt-1 font-medium text-[9px] leading-none">
-                {formatGridSnapStep(gridSnapStep)}
-              </span>
-            </button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="top">Grid snap: {formatGridSnapStep(gridSnapStep)}</TooltipContent>
-      </Tooltip>
-
-      <PopoverContent
-        align="center"
-        className="w-36 rounded-xl border-border/45 bg-background/96 p-2 shadow-elevation-3 backdrop-blur-xl"
-        side="top"
-        sideOffset={14}
-      >
-        <div className="space-y-1">
-          {GRID_SNAP_STEPS.map((step) => {
-            const isActive = step === gridSnapStep
-            return (
-              <button
-                className={cn(
-                  'flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-left text-sm transition-colors hover:bg-white/8',
-                  isActive && 'bg-white/10 text-foreground',
-                )}
-                key={step}
-                onClick={() => {
-                  setGridSnapStep(step)
-                  setIsOpen(false)
-                }}
-                type="button"
-              >
-                <span>{formatGridSnapStep(step)}</span>
-                {isActive ? <Check className="h-3.5 w-3.5" /> : <span className="h-3.5 w-3.5" />}
-              </button>
-            )
-          })}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
 // ── Scans toggle + dropdown ─────────────────────────────────────────────────
 
 function ScansControl() {
@@ -464,7 +395,7 @@ function ScansControl() {
           variant="ghost"
         >
           <div className="relative">
-            <img alt="Scans" className="h-[28px] w-[28px] object-contain" src="/icons/mesh.png" />
+            <img alt="Scans" className="h-[28px] w-[28px] object-contain" src="/icons/mesh.webp" />
             <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
               {scans.length}
             </span>
@@ -502,7 +433,7 @@ function ScansControl() {
         <div className="space-y-3">
           <div className="flex items-center gap-2">
             <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-background/80">
-              <img alt="" className="h-4 w-4 object-contain" src="/icons/mesh.png" />
+              <img alt="" className="h-4 w-4 object-contain" src="/icons/mesh.webp" />
             </span>
             <div className="min-w-0 flex-1">
               <p className="font-medium text-foreground text-sm">Scans</p>
@@ -542,7 +473,7 @@ function ScansControl() {
                       <img
                         alt=""
                         className="h-3.5 w-3.5 shrink-0 object-contain opacity-70"
-                        src="/icons/mesh.png"
+                        src="/icons/mesh.webp"
                       />
                       <p className="truncate font-medium text-foreground text-sm">
                         {scan.name || `Scan ${index + 1}`}
@@ -581,7 +512,7 @@ function ScansControl() {
             </div>
           ) : (
             <div className="rounded-xl border border-border/45 border-dashed bg-background/60 px-3 py-4 text-muted-foreground text-sm">
-              No scans on this level yet.
+              {REFERENCES_EMPTY_TEXT}
             </div>
           )}
         </div>
@@ -763,7 +694,7 @@ function ReferencesControl() {
             <img
               alt="References"
               className="h-[28px] w-[28px] object-contain"
-              src="/icons/floorplan.png"
+              src="/icons/floorplan.webp"
             />
             <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
               {total}
@@ -805,8 +736,8 @@ function ReferencesControl() {
             </div>
           )}
           <ReferenceListSection
-            emptyText="No scans on this level yet."
-            iconSrc="/icons/mesh.png"
+            emptyText={REFERENCES_EMPTY_TEXT}
+            iconSrc="/icons/mesh.webp"
             nodes={scans}
             noun="scan"
             onError={setUploadError}
@@ -816,8 +747,8 @@ function ReferencesControl() {
           />
           <div className="h-px bg-border/45" />
           <ReferenceListSection
-            emptyText="No guide images on this level yet."
-            iconSrc="/icons/floorplan.png"
+            emptyText={REFERENCES_EMPTY_TEXT}
+            iconSrc="/icons/floorplan.webp"
             nodes={guides}
             noun="guide image"
             onError={setUploadError}
@@ -987,9 +918,30 @@ function ReferenceFloorControl() {
   )
 }
 
-// ── Exports ─────────────────────────────────────────────────────────────────
+// ── Riser diagram control ────────────────────────────────────────────────────
+
+function RiserControl() {
+  const isRiserOpen = useEditor((state) => state.isRiserOpen)
+  const toggleRiserOpen = useEditor((state) => state.toggleRiserOpen)
+
+  return (
+    <ActionButton
+      className={cn(
+        isRiserOpen
+          ? 'bg-white/15'
+          : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+      )}
+      label="Riser diagram"
+      onClick={toggleRiserOpen}
+      size="icon"
+      variant="ghost"
+    >
+      <Waypoints className="h-4 w-4" />
+    </ActionButton>
+  )
+}
 
-export { GridSnapControl }
+// ── Exports ─────────────────────────────────────────────────────────────────
 
 export function SecondaryToggles() {
   return (
@@ -1002,10 +954,10 @@ export function SecondaryToggles() {
 export function ViewToggles() {
   return (
     <div className="flex items-center gap-1">
-      <GridSnapControl />
       <ScansControl />
       <GuidesControl />
       <ReferenceFloorControl />
+      <RiserControl />
     </div>
   )
 }

package/src/components/ui/command-palette/editor-commands.tsx

@@ -245,10 +245,10 @@ export function EditorCommands() {
         label: 'Wall Mode',
         group: 'Viewer Controls',
         icon: <Layers className="h-4 w-4" />,
-        keywords: ['wall', 'cutaway', 'up', 'down', 'view'],
+        keywords: ['wall', 'cutaway', 'up', 'down', 'translucent', 'view'],
         badge: () => {
           const mode = useViewer.getState().wallMode
-          return { cutaway: 'Cutaway', up: 'Up', down: 'Down' }[mode]
+          return { cutaway: 'Cutaway', up: 'Up', down: 'Down', translucent: 'Translucent' }[mode]
         },
         navigate: true,
         execute: () => navigateTo('wall-mode'),

package/src/components/ui/command-palette/index.tsx

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { Dialog, DialogContent, DialogTitle } from './../../../components/ui/primitives/dialog'
-import { getLevelDisplayName } from '../../../lib/level-name'
+import { getLevelDisplayName } from '@pascal-app/core'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import { usePaletteViewRegistry } from '../../../store/use-palette-view-registry'
 
@@ -244,10 +244,11 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
     setOpen(false)
   }
 
-  const wallModeLabel: Record<'cutaway' | 'up' | 'down', string> = {
+  const wallModeLabel: Record<'cutaway' | 'up' | 'down' | 'translucent', string> = {
     cutaway: 'Cutaway',
     up: 'Up',
     down: 'Down',
+    translucent: 'Translucent',
   }
   const levelModeLabel: Record<'manual' | 'stacked' | 'exploded' | 'solo', string> = {
     manual: 'Manual',
@@ -373,7 +374,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
               {/* ── Wall Mode sub-page ────────────────────────────────────── */}
               {page === 'wall-mode' && (
                 <Command.Group heading="Wall Mode">
-                  {(['cutaway', 'up', 'down'] as const).map((mode) => (
+                  {(['cutaway', 'up', 'down', 'translucent'] as const).map((mode) => (
                     <OptionItem
                       isActive={wallMode === mode}
                       key={mode}