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

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

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNodeId } from '@pascal-app/core'
-import { LevelNode, useScene } from '@pascal-app/core'
+import { DEFAULT_LEVEL_HEIGHT, LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import {
   AppWindow,
@@ -22,6 +22,7 @@ import {
   Minimize2,
   Moon,
   MousePointer2,
+  Mountain,
   Package,
   PaintBucket,
   PencilLine,
@@ -168,6 +169,17 @@ export function EditorCommands() {
             setMode('material-paint')
           }),
       },
+      {
+        id: 'editor.mode.terrain-sculpt',
+        label: 'Sculpt Terrain',
+        group: 'Scene',
+        icon: <Mountain className="h-4 w-4" />,
+        keywords: ['terrain', 'ground', 'elevation', 'sculpt', 'hill', 'slope', 'grade', 'dig'],
+        shortcut: ['G'],
+        // No `setPhase`: `setMode` moves to the site phase itself, and doing it
+        // here would set the phase twice with a mode reset in between.
+        execute: () => run(() => setMode('terrain-sculpt')),
+      },
 
       // ── Levels ───────────────────────────────────────────────────────────
       {
@@ -196,6 +208,7 @@ export function EditorCommands() {
             ).length
             const newLevel = LevelNode.parse({
               level: levelCount,
+              height: DEFAULT_LEVEL_HEIGHT,
               children: [],
               parentId: building.id,
             })
@@ -245,10 +258,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}

package/src/components/ui/controls/material-paint-panel.tsx

@@ -1,32 +1,49 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  generateSceneMaterialId,
+  type SceneMaterialId,
+  toSceneMaterialRef,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Eraser, RotateCcw } from 'lucide-react'
-import { useEffect } from 'react'
+import { Eraser, Plus, RotateCcw } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   buildResetSurfaceMaterialUpdates,
   resolvePaintTargetFromSelection,
 } from './../../../lib/material-paint'
 import useEditor from './../../../store/use-editor'
 import { Button } from '../primitives/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPicker } from './material-picker'
+import { SceneMaterialList } from './scene-material-list'
 
 /**
  * Material picker for paint mode. Embedders render this wherever paint controls
  * belong (the community editor places it in the Build sidebar while paint mode
- * is active). It owns the paint-target/material wiring so the host only needs
- * to mount it; it fills its container's width.
+ * is active). It fills its container's height and lays out as three bands: a
+ * fixed control/category header, a single scrolling catalog grid, and a fixed
+ * scene-material footer (always visible, with a `+` to add a custom material).
  */
-export function MaterialPaintPanel() {
+export type MaterialPaintPanelProps = {
+  /** When provided, the catalog grid leads with a "New material" tile that invokes it. */
+  onCreateMaterialRequest?: () => void
+}
+
+export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
   const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
   const activePaintTarget = useEditor((state) => state.activePaintTarget)
   const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
   const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
   const paintEraser = useEditor((state) => state.paintEraser)
   const setPaintEraser = useEditor((state) => state.setPaintEraser)
+  // Id of a just-created scene material whose inline editor should open on mount.
+  const [autoEditMaterialId, setAutoEditMaterialId] = useState<SceneMaterialId | null>(null)
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const nodes = useScene((state) => state.nodes)
+  const materialCount = useScene((state) => Object.keys(state.materials).length)
   const selectedId = selectedIds.length === 1 ? (selectedIds[0] ?? null) : null
   const selectedNode = selectedId ? nodes[selectedId as AnyNodeId] : null
   const canResetSelection =
@@ -44,9 +61,34 @@ export function MaterialPaintPanel() {
     useScene.getState().updateNodes(buildResetSurfaceMaterialUpdates(nodes, selectedNode))
   }
 
+  // Create a blank custom scene material, select it as the brush (`scene:` ref so
+  // edits propagate), and open its inline editor. Available from any category.
+  const createCustomMaterial = () => {
+    const id = generateSceneMaterialId()
+    const count = Object.keys(useScene.getState().materials).length
+    useScene.getState().addSceneMaterial({
+      id,
+      name: `Material ${count + 1}`,
+      material: {
+        preset: 'custom',
+        properties: {
+          color: '#ffffff',
+          roughness: 0.5,
+          metalness: 0,
+          opacity: 1,
+          transparent: false,
+          side: 'front',
+        },
+      },
+    })
+    setActivePaintMaterial({ materialPreset: toSceneMaterialRef(id), sourceTarget: activePaintTarget })
+    setAutoEditMaterialId(id)
+  }
+
   return (
-    <div className="w-full space-y-2">
-      <div className="flex items-center gap-2">
+    <div className="flex h-full min-h-0 w-full flex-col">
+      {/* Fixed: eraser / reset. */}
+      <div className="flex shrink-0 items-center gap-2 pb-2">
         <Button
           aria-pressed={paintEraser}
           className="flex-1"
@@ -68,16 +110,49 @@ export function MaterialPaintPanel() {
           Reset all
         </Button>
       </div>
-      <MaterialPicker
-        onChange={(material) => {
-          setActivePaintMaterial({ material, sourceTarget: activePaintTarget })
-        }}
-        onSelectMaterialPreset={(materialPreset) => {
-          setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
-        }}
-        selectedMaterialPreset={activePaintMaterial?.materialPreset}
-        value={activePaintMaterial?.material}
-      />
+
+      {/* Scrolls: category tabs (fixed inside) + catalog grid (the scroll). */}
+      <div className="min-h-0 flex-1">
+        <MaterialPicker
+          onCreateMaterialRequest={onCreateMaterialRequest}
+          onSelectMaterialPreset={(materialPreset) => {
+            setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
+          }}
+          selectedMaterialPreset={activePaintMaterial?.materialPreset}
+        />
+      </div>
+
+      {/* Fixed footer: scene materials, always visible, with a `+` to add one. */}
+      <div className="mt-2 shrink-0 space-y-1.5 border-border/60 border-t pt-2">
+        <div className="flex items-center justify-between">
+          <span className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+            Scene materials
+          </span>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                aria-label="Add material"
+                onClick={createCustomMaterial}
+                size="icon-sm"
+                type="button"
+                variant="outline"
+              >
+                <Plus />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Add material</TooltipContent>
+          </Tooltip>
+        </div>
+        <div className="subtle-scrollbar max-h-56 overflow-y-auto">
+          {materialCount > 0 ? (
+            <SceneMaterialList autoEditId={autoEditMaterialId} />
+          ) : (
+            <p className="px-0.5 py-1 text-muted-foreground text-xs">
+              No custom materials yet — add one with +.
+            </p>
+          )}
+        </div>
+      </div>
     </div>
   )
 }