@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/ui/controls/finish-swatch.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import {
+  type AnyNode,
+  getCatalogMaterialById,
+  getLibraryMaterialIdFromRef,
+  getSceneMaterialIdFromRef,
+  nodeRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useState } from 'react'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { MaterialPicker } from './material-picker'
+
+type Swatch = { label: string; color: string | null; image: string | null }
+
+/** How a finish reference reads in a panel: its catalog tile, its colour, or its scene material. */
+function useFinishSwatch(ref: string | undefined, fallback: string): Swatch {
+  const materials = useScene((state) => state.materials)
+  if (!ref) return { ...describe(fallback, materials), label: 'Default' }
+  return describe(ref, materials)
+}
+
+function describe(ref: string, materials: ReturnType<typeof useScene.getState>['materials']) {
+  const library = getCatalogMaterialById(getLibraryMaterialIdFromRef(ref) ?? undefined)
+  if (library)
+    return {
+      label: library.label,
+      color: library.previewColor ?? null,
+      image: library.previewThumbnailUrl ?? null,
+    }
+  const sceneId = getSceneMaterialIdFromRef(ref)
+  const scene = sceneId ? materials[sceneId as keyof typeof materials] : undefined
+  if (scene) return { label: scene.name, color: scene.material.properties?.color ?? null, image: null }
+  if (ref.startsWith('#')) return { label: ref.toUpperCase(), color: ref, image: null }
+  return { label: 'Default', color: null, image: null }
+}
+
+/**
+ * Paints one surface of a node from its panel, exactly as the paint tool does:
+ * the kind's own paint commit for that role (same write, one undo step).
+ */
+export function paintSurface(node: AnyNode, role: string, materialPreset: string) {
+  const paint = nodeRegistry.get(node.type)?.capabilities?.paint
+  if (!paint) return
+  const args = { node, role, material: undefined, materialPreset }
+  if (paint.commit) paint.commit(args)
+  else useScene.getState().updateNode(node.id, paint.buildPatch(args) as Partial<AnyNode>)
+}
+
+/**
+ * A finish row: the swatch and its name. A click opens the paint tool's
+ * material picker; a pick paints the surface through the paint tool's path.
+ */
+export function FinishSwatch({
+  label,
+  node,
+  role,
+  value,
+  fallback,
+  hint,
+}: {
+  label: string
+  node: AnyNode
+  /** The paint role of the surface (`edge`, `foundation`, …). */
+  role: string
+  /** The authored finish reference; absent shows `fallback` as "Default". */
+  value: string | undefined
+  fallback: string
+  /** Tooltip on the row. */
+  hint?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const swatch = useFinishSwatch(value, fallback)
+  return (
+    <div className="flex min-h-8 items-center justify-between gap-3" title={hint}>
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <Popover onOpenChange={setOpen} open={open}>
+        <PopoverTrigger asChild>
+          <button
+            aria-label={`${label}: ${swatch.label}`}
+            className="flex min-w-0 items-center gap-2 rounded-full border border-border/50 py-0.5 pr-2.5 pl-1 text-xs transition-colors hover:bg-accent"
+            data-finish-swatch={label}
+            type="button"
+          >
+            <span
+              aria-hidden
+              className="size-4 shrink-0 overflow-hidden rounded-full border border-border/50"
+              style={{ backgroundColor: swatch.color ?? 'transparent' }}
+            >
+              {swatch.image && <img alt="" className="size-full object-cover" src={swatch.image} />}
+            </span>
+            <span className="truncate">{swatch.label}</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="flex h-96 w-80 flex-col p-2" side="left">
+          <MaterialPicker
+            onSelectMaterialPreset={(ref) => {
+              const live = useScene.getState().nodes[node.id as keyof ReturnType<typeof useScene.getState>['nodes']]
+              if (live) paintSurface(live, role, ref)
+              setOpen(false)
+            }}
+            selectOnCategoryChange={false}
+            selectedMaterialPreset={value}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

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

@@ -1,19 +1,22 @@
 'use client'
 
 import { type SceneMaterialId } from '@pascal-app/core'
-import { Eraser, Plus, RotateCcw } from 'lucide-react'
+import { Eraser, PaintBucket, Pentagon, Pipette, Plus, Square } from 'lucide-react'
 import { useState } from 'react'
 import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
+import { type PaintMode, usePaintRegionMode } from '../../../lib/paint-region-mode'
+import useEditor, { armMaterialPaint } 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'
+import { SegmentedControl } from './segmented-control'
 
 /**
  * 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 fills its container's height and lays out as three bands: a
- * fixed control/category header, a single scrolling catalog grid, and a fixed
+ * fixed mode header, a single scrolling catalog grid, and a fixed
  * scene-material footer (always visible, with a `+` to add a custom material).
  */
 export type MaterialPaintPanelProps = {
@@ -21,37 +24,103 @@ export type MaterialPaintPanelProps = {
   onCreateMaterialRequest?: () => void
 }
 
+const PAINT_MODE_OPTIONS: { value: PaintMode; label: string; icon: typeof PaintBucket }[] = [
+  { value: 'surface', label: 'Whole surface: a click paints the surface under it', icon: PaintBucket },
+  {
+    value: 'rectangle',
+    label: 'Rectangle: press anywhere on a wall, floor or ceiling, drag to the opposite corner',
+    icon: Square,
+  },
+  {
+    value: 'polygon',
+    label: 'Polygon: click the points of a shape on a floor or ceiling',
+    icon: Pentagon,
+  },
+  {
+    value: 'erase',
+    label: 'Erase: click a painted part to remove it, or a painted surface to reset it',
+    icon: Eraser,
+  },
+  {
+    value: 'pick',
+    label: 'Pick: click a surface to paint with its material (or hold Alt / Option)',
+    icon: Pipette,
+  },
+]
+
+/**
+ * Paint the whole surface, draw part of a wall, floor or ceiling first, erase, or
+ * pick a material off a surface. Erase
+ * is the eraser the paint path already knows (a click writes "no finish"), so a
+ * painted region goes and a whole-surface paint returns to its default. The row
+ * shows a choice only while paint mode is on; any pick (erase included) turns it
+ * on, so nothing here needs a colour first.
+ */
+function PaintModeControl() {
+  const painting = useEditor((s) => s.mode === 'material-paint')
+  const mode = usePaintRegionMode((s) => s.mode)
+  const select = (next: PaintMode) => {
+    if (painting) usePaintRegionMode.getState().setMode(next)
+    else armMaterialPaint(undefined, next)
+  }
+  return (
+    <div
+      className="shrink-0 space-y-1.5 pb-2"
+      data-paint-mode={painting ? mode : 'off'}
+      // A clicked option must not keep focus: the next shortcut (V) would light
+      // its focus ring and it would read as still chosen after paint mode ends.
+      onPointerUp={(event) => (event.target as HTMLElement).closest('button')?.blur()}
+    >
+      <div className="px-0.5 font-medium text-muted-foreground text-xs">
+        {painting && mode === 'erase' ? 'Erase' : painting && mode === 'pick' ? 'Pick material' : 'Paint'}
+      </div>
+      <SegmentedControl
+        mixed={!painting}
+        onChange={select}
+        options={PAINT_MODE_OPTIONS.map(({ value, label, icon: Icon }) => ({
+          value,
+          label: (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span aria-label={label} className="flex items-center justify-center">
+                  <Icon className="h-3.5 w-3.5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+          ),
+        }))}
+        value={mode}
+      />
+    </div>
+  )
+}
+
 export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
-  const { activePaintMaterial, paintEraser, setPaintEraser, canResetSelection, resetSelection, materialCount, selectMaterial, createCustomMaterial: createMaterial } = useMaterialPaintPanelModel()
+  const painting = useEditor((s) => s.mode === 'material-paint')
+  const erasing = usePaintRegionMode((s) => s.mode) === 'erase' && painting
+  const {
+    activePaintMaterial,
+    materialCount,
+    selectMaterial,
+    createCustomMaterial: createMaterial,
+  } = useMaterialPaintPanelModel()
   const [autoEditMaterialId, setAutoEditMaterialId] = useState<SceneMaterialId | null>(null)
   const createCustomMaterial = () => setAutoEditMaterialId(createMaterial())
 
   return (
     <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"
-          onClick={() => setPaintEraser(!paintEraser)}
-          size="sm"
-          variant={paintEraser ? 'default' : 'outline'}
-        >
-          <Eraser />
-          Erase
-        </Button>
-        <Button
-          className="flex-1"
-          disabled={!canResetSelection}
-          onClick={resetSelection}
-          size="sm"
-          variant="outline"
-        >
-          <RotateCcw />
-          Reset all
-        </Button>
-      </div>
+      {/* Fixed: whole surface, part of a surface, or erase. */}
+      <PaintModeControl />
 
+      {/* Erasing paints nothing: no swatches to pick from, just what a click does. */}
+      {erasing ? (
+        <p className="px-0.5 py-1 text-muted-foreground text-xs" data-paint-erase-note>
+          Click a painted part of a wall, floor or ceiling to remove it, or a painted surface to reset it to
+          its default.
+        </p>
+      ) : (
+        <>
       {/* Scrolls: category tabs (fixed inside) + catalog grid (the scroll). */}
       {/* A stable hook for host-app onboarding to point at. Static, and read
           only from outside: nothing here depends on it. */}
@@ -94,6 +163,8 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
           )}
         </div>
       </div>
+        </>
+      )}
     </div>
   )
 }

package/src/components/ui/controls/material-picker.tsx

@@ -14,6 +14,8 @@ export type MaterialPickerProps = {
   nodeType?: MaterialTarget
   hideSideControl?: boolean
   onCreateMaterialRequest?: () => void
+  /** Whether switching category tabs selects the tab's first material (paint mode does). */
+  selectOnCategoryChange?: boolean
 }
 
 function getCategoryLabel(category: string) {
@@ -31,8 +33,9 @@ export function MaterialPicker({
   onSelectMaterialPreset,
   disabled = false,
   onCreateMaterialRequest,
+  selectOnCategoryChange = true,
 }: MaterialPickerProps) {
-  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled)
+  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled, selectOnCategoryChange)
 
   return (
     <div

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

@@ -310,7 +310,7 @@ export function MetricControl({
     <div
       className={cn(
         'group flex h-10 w-full items-center justify-between rounded-lg border border-border/50 px-3 text-sm transition-colors',
-        isDragging ? 'bg-[#3e3e3e]' : 'bg-[#2C2C2E] hover:bg-[#3e3e3e]',
+        isDragging ? 'bg-black/8 dark:bg-[#3e3e3e]' : 'bg-black/4 dark:bg-[#2C2C2E] hover:bg-black/8 dark:hover:bg-[#3e3e3e]',
         className,
       )}
       onMouseEnter={() => setIsHovered(true)}

package/src/components/ui/controls/scene-material-list.tsx

@@ -10,21 +10,13 @@ import {
 } from '@pascal-app/core'
 import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
+import { sceneMaterialUsageCounts } from '../../../lib/scene-material-refs'
 import useEditor from '../../../store/use-editor'
 import { Button } from '../primitives/button'
 import { Input } from '../primitives/input'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPropertiesEditor } from './material-properties-editor'
 
-type SlotRecord = Record<string, string | undefined>
-
-function getSlotRecord(node: unknown): SlotRecord | null {
-  if (!node || typeof node !== 'object' || !('slots' in node)) return null
-  const slots = (node as { slots?: unknown }).slots
-  if (!slots || typeof slots !== 'object' || Array.isArray(slots)) return null
-  return slots as SlotRecord
-}
-
 export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId | null }) {
   const materials = useScene((state) => state.materials)
   const nodes = useScene((state) => state.nodes)
@@ -40,29 +32,9 @@ export function SceneMaterialList({ autoEditId }: { autoEditId?: SceneMaterialId
     [materials],
   )
 
-  const usageCounts = useMemo(() => {
-    const counts = new Map<SceneMaterialId, number>()
-    const refToId = new Map<string, SceneMaterialId>()
-
-    for (const [id] of materialEntries) {
-      counts.set(id, 0)
-      refToId.set(toSceneMaterialRef(id), id)
-    }
-
-    for (const node of Object.values(nodes)) {
-      const slots = getSlotRecord(node)
-      if (!slots) continue
-
-      for (const value of Object.values(slots)) {
-        if (typeof value !== 'string') continue
-        const materialId = refToId.get(value)
-        if (!materialId) continue
-        counts.set(materialId, (counts.get(materialId) ?? 0) + 1)
-      }
-    }
-
-    return counts
-  }, [materialEntries, nodes])
+  // Every place a scene material can be used — slots and the room, wall and
+  // footprint finishes — counted by the same walker saving and pasting use.
+  const usageCounts = useMemo(() => sceneMaterialUsageCounts(nodes), [nodes])
 
   return (
     <div className="space-y-2">

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

@@ -5,7 +5,11 @@ import { cn } from '../../../lib/utils'
 interface SegmentedControlProps<T extends string> {
   value: T
   onChange: (value: T) => void
-  options: { label: React.ReactNode; value: T }[]
+  /**
+   * `disabled` greys one option and ignores its click; it stays hoverable, so a tooltip in its
+   * `label` can say why.
+   */
+  options: { label: React.ReactNode; value: T; disabled?: boolean }[]
   className?: string
   disabled?: boolean
   mixed?: boolean
@@ -22,28 +26,37 @@ export function SegmentedControl<T extends string>({
   return (
     <div
       className={cn(
-        'flex h-9 w-full items-center rounded-lg border border-border/50 bg-[#2C2C2E] p-[3px]',
+        'flex min-h-9 w-full items-stretch rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] p-[3px]',
         disabled && 'opacity-60',
         className,
       )}
     >
       {options.map((option) => {
         const isSelected = !mixed && value === option.value
+        const isDisabled = disabled || option.disabled === true
         return (
           <button
+            aria-disabled={option.disabled || undefined}
+            aria-pressed={isSelected}
             className={cn(
-              'relative flex h-full flex-1 items-center justify-center rounded-md font-medium text-xs transition-all duration-200',
+              'relative flex min-h-7 min-w-0 flex-1 items-center justify-center rounded-md px-1.5 py-1 font-medium text-xs leading-4 transition-colors duration-200',
               isSelected
-                ? 'bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
-                : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
-              disabled && 'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground',
+                ? 'bg-white dark:bg-[#3e3e3e] text-foreground shadow-sm ring-1 ring-border/50'
+                : 'text-muted-foreground hover:bg-black/4 dark:hover:bg-white/5 hover:text-foreground',
+              isDisabled &&
+                'cursor-not-allowed hover:bg-transparent hover:text-muted-foreground dark:hover:bg-transparent',
+              option.disabled && 'opacity-40',
             )}
             disabled={disabled}
             key={option.value}
-            onClick={() => onChange(option.value)}
+            onClick={() => {
+              if (!option.disabled) onChange(option.value)
+            }}
             type="button"
           >
-            <span className="relative z-10 flex items-center gap-1.5">{option.label}</span>
+            <span className="relative z-10 flex min-w-0 items-center justify-center gap-1.5 whitespace-normal text-center [&>svg]:shrink-0">
+              {option.label}
+            </span>
           </button>
         )
       })}

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

@@ -0,0 +1,65 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+
+interface SelectControlProps<T extends string> {
+  label: string
+  value: T
+  onChange: (value: T) => void
+  options: { label: string; value: T }[]
+  className?: string
+  mixed?: boolean
+}
+
+export function SelectControl<T extends string>({
+  label,
+  value,
+  onChange,
+  options,
+  className,
+  mixed = false,
+}: SelectControlProps<T>) {
+  const current = mixed ? 'Mixed' : options.find((option) => option.value === value)?.label
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          aria-label={label}
+          className={cn(
+            'group flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e] data-[state=open]:bg-black/8 dark:data-[state=open]:bg-[#3e3e3e]',
+            className,
+          )}
+          type="button"
+        >
+          <span className="select-none text-muted-foreground transition-colors group-hover:text-foreground">
+            {label}
+          </span>
+          <span className="flex min-w-0 items-center gap-1.5 text-foreground">
+            <span className="truncate">{current}</span>
+            <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-(--radix-dropdown-menu-trigger-width)">
+        <DropdownMenuRadioGroup
+          onValueChange={(next) => onChange(next as T)}
+          value={mixed ? '' : value}
+        >
+          {options.map((option) => (
+            <DropdownMenuRadioItem key={option.value} value={option.value}>
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -329,7 +329,7 @@ export function SliderControl({
     <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',
+        isDragging ? 'bg-black/4 dark:bg-white/5' : 'hover:bg-black/4 dark:hover:bg-white/5',
         className,
       )}
       onMouseEnter={() => setIsHovered(true)}

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

@@ -21,7 +21,7 @@ export function ToggleControl({
   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]',
+        'group flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border border-border/50 bg-black/4 dark:bg-[#2C2C2E] px-3 text-sm transition-colors hover:bg-black/8 dark:hover:bg-[#3e3e3e]',
         className,
       )}
       onClick={() => onChange(!checked)}
@@ -34,10 +34,10 @@ export function ToggleControl({
         className={cn(
           'flex h-5 w-5 items-center justify-center rounded-[4px] border transition-all duration-200',
           mixed
-            ? 'border-muted-foreground/70 bg-black/20 text-muted-foreground'
+            ? 'border-muted-foreground/70 bg-black/5 dark:bg-black/20 text-muted-foreground'
             : checked
               ? 'border-primary bg-primary text-primary-foreground'
-              : 'border-border bg-black/20 text-transparent group-hover:border-muted-foreground',
+              : 'border-border bg-black/5 dark:bg-black/20 text-transparent group-hover:border-muted-foreground',
         )}
       >
         {mixed ? (

package/src/components/ui/controls/tool-options-panel.tsx

@@ -50,7 +50,7 @@ function ToolOptionRow({
                 'rounded-lg px-2 py-2 text-center font-medium text-xs transition-colors',
                 selected
                   ? 'bg-primary/10 text-primary ring-1 ring-primary/50'
-                  : 'bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',
+                  : 'bg-black/4 text-muted-foreground hover:bg-black/8 hover:text-foreground dark:bg-muted/40 dark:hover:bg-muted',
               )}
               key={choice.value}
               onClick={() => {