feat(paint-slots): recurate material catalog into families + expand colors

- Replace location-based categories (wood/flooring/roof/other) with material
  families: colors, wood, stone, brick, tile, concrete, metal, fabric, leather,
  roofing, ground, glass
- Add MaterialSurface tags (floor/wall/ceiling/roof/furniture/outdoor); retag all
  65 existing finishes; ids unchanged so library refs keep resolving
- Expand curated colors 15 -> 45, ordered by hue; unify on catalog library items
  and retire CURATED_COLORS (picker reads the colors family)
- Paint picker: wrapping rounded category chips (was horizontal scroll), empty
  families auto-hide, preset-style swatch cards (name label, selection-only ring,
  hover bg + SFX)

Phase 4 (finish-library content) of editor-paint-slots.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/core/src/index.ts

@@ -102,9 +102,11 @@ export {
   LIBRARY_MATERIAL_REF_PREFIX,
   MATERIAL_CATALOG,
   MATERIAL_CATEGORIES,
+  MATERIAL_SURFACES,
   type MaterialCatalogItem,
   type MaterialCategory,
   type MaterialRef,
+  type MaterialSurface,
   type ParsedMaterialRef,
   parseMaterialRef,
   SCENE_MATERIAL_REF_PREFIX,

packages/editor/src/components/ui/controls/material-picker.tsx

@@ -9,8 +9,8 @@ import {
   type MaterialTarget,
   toLibraryMaterialRef,
 } from '@pascal-app/core'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
-import { CURATED_COLORS } from '../../../lib/colors'
+import { triggerSFX } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 
 type MaterialPickerProps = {
@@ -24,7 +24,6 @@ type MaterialPickerProps = {
 }
 
 function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
-  if (category === 'roof') return 'Roofing'
   return category.charAt(0).toUpperCase() + category.slice(1)
 }
 
@@ -40,11 +39,10 @@ export function MaterialPicker({
   const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
     MATERIAL_CATEGORIES[0],
   )
-  const categoryScrollRef = useRef<HTMLDivElement>(null)
+  const availableCategories = MATERIAL_CATEGORIES.filter(
-  const catalogItems =
+    (category) => getMaterialsForCategory(category).length > 0,
-    selectedCategory === 'other'
+  )
-      ? getMaterialsForCategory('other')
+  const catalogItems = getMaterialsForCategory(selectedCategory)
-      : getMaterialsForCategory(selectedCategory)
 
   useEffect(() => {
     setShowCustom(!!value?.properties && !selectedMaterialPreset)
@@ -52,7 +50,7 @@ export function MaterialPicker({
 
   useEffect(() => {
     if (!selectedMaterialPreset && value?.properties) {
-      setSelectedCategory('other')
+      setSelectedCategory('colors')
       return
     }
 
@@ -68,7 +66,6 @@ export function MaterialPicker({
     selectedMaterialPreset ?? (value?.id ? toLibraryMaterialRef(value.id) : undefined)
   const selectedCatalogMaterialId = getLibraryMaterialIdFromRef(selectedCatalogId) ?? undefined
   const selectedCatalogEntry = getCatalogMaterialById(selectedCatalogMaterialId)
-  const selectedColor = value?.properties?.color.toLowerCase()
 
   const handleCatalogSelect = (materialId: string) => {
     if (disabled) return
@@ -77,44 +74,6 @@ export function MaterialPicker({
     onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
   }
 
-  const handleColorSelect = (hex: string) => {
-    if (disabled) return
-    setShowCustom(false)
-    setPaintPanelOpen(false)
-    onChange?.({
-      preset: 'custom',
-      properties: {
-        color: hex,
-        roughness: 0.6,
-        metalness: 0,
-        opacity: 1,
-        transparent: false,
-        side: 'front',
-      },
-    })
-  }
-
-  useEffect(() => {
-    const container = categoryScrollRef.current
-    if (!container) return
-
-    const handleWheel = (event: WheelEvent) => {
-      const deltaX = event.deltaX
-      const deltaY = event.deltaY
-      const nextScrollLeft = container.scrollLeft + deltaX + deltaY
-
-      if (nextScrollLeft === container.scrollLeft) return
-
-      event.preventDefault()
-      container.scrollLeft = nextScrollLeft
-    }
-
-    container.addEventListener('wheel', handleWheel, { passive: false })
-    return () => {
-      container.removeEventListener('wheel', handleWheel)
-    }
-  }, [])
-
   const handleCustomOpen = () => {
     if (disabled) return
     setShowCustom(true)
@@ -139,45 +98,13 @@ export function MaterialPicker({
     <div className={`min-w-0 space-y-3 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
       {(catalogItems.length > 0 || onChange) && (
         <div className="min-w-0 space-y-1">
-          {onChange ? (
+          <div className="flex flex-wrap gap-1 pb-1">
-            <div className="space-y-1.5">
+            {availableCategories.map((category) => (
-              <div className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.12em]">
-                Colors
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {CURATED_COLORS.map((color) => {
-                  const isSelected = selectedColor === color.hex.toLowerCase()
-                  return (
               <button
-                      aria-label={color.name}
+                className={`rounded-full px-3 py-1 font-medium text-xs transition-colors ${
-                      className={`h-7 w-7 rounded-md border transition-all ${
-                        isSelected
-                          ? 'border-blue-500 ring-2 ring-blue-500/30'
-                          : 'border-gray-300 hover:border-gray-400'
-                      }`}
-                      key={color.hex}
-                      onClick={() => handleColorSelect(color.hex)}
-                      style={{ backgroundColor: color.hex }}
-                      title={color.name}
-                      type="button"
-                    />
-                  )
-                })}
-              </div>
-            </div>
-          ) : null}
-          <div
-            className="w-full max-w-full overflow-x-auto overflow-y-hidden"
-            ref={categoryScrollRef}
-            style={{ msOverflowStyle: 'none', scrollbarWidth: 'none' }}
-          >
-            <div className="flex min-w-max gap-1 pb-1">
-              {MATERIAL_CATEGORIES.map((category) => (
-                <button
-                  className={`shrink-0 px-2 font-medium text-[11px] uppercase tracking-[0.12em] transition-all ${
                   selectedCategory === category
-                      ? 'bg-transparent text-foreground'
+                    ? 'bg-foreground text-background'
-                      : 'bg-transparent text-muted-foreground opacity-70 hover:text-foreground hover:opacity-100'
+                    : 'text-muted-foreground hover:text-foreground'
                 }`}
                 key={category}
                 onClick={() => {
@@ -185,7 +112,7 @@ export function MaterialPicker({
                   if (showCustom) {
                     setShowCustom(false)
                   }
-                    if (category !== 'other') {
+                  if (category !== 'colors') {
                     setPaintPanelOpen(false)
                   }
                 }}
@@ -195,52 +122,63 @@ export function MaterialPicker({
               </button>
             ))}
           </div>
-          </div>
           <div
-            className="grid gap-1.5 pb-1"
+            className="grid gap-2 pb-1"
             style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
           >
-            {catalogItems.map((item) => (
+            {catalogItems.map((item) => {
+              const isSelected = selectedCatalogId === toLibraryMaterialRef(item.id)
+              return (
                 <button
-                className={`relative aspect-square w-full overflow-hidden rounded-lg border transition-all ${
+                  className={`group relative flex flex-col gap-1.5 rounded-xl p-1.5 transition-colors hover:cursor-pointer hover:bg-sidebar-accent ${
-                  selectedCatalogId === toLibraryMaterialRef(item.id)
+                    isSelected ? 'bg-sidebar-accent ring-2 ring-primary-foreground' : ''
-                    ? 'border-blue-500 ring-2 ring-blue-500/30'
-                    : 'border-gray-300 hover:border-gray-400'
                   }`}
                   key={item.id}
-                onClick={() => handleCatalogSelect(item.id)}
+                  onClick={() => {
-                title={item.label}
+                    triggerSFX('sfx:menu-click')
+                    handleCatalogSelect(item.id)
+                  }}
+                  onMouseEnter={() => triggerSFX('sfx:menu-hover')}
                   type="button"
                 >
-                <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-white/12 ring-inset" />
+                  <div className="relative aspect-square w-full overflow-hidden rounded-lg">
                     {item.previewThumbnailUrl ? (
                       <img
                         alt={item.label}
                         className="h-full w-full object-cover"
                         src={item.previewThumbnailUrl}
                       />
-                ) : item.previewColor ? (
+                    ) : (
                       <div
                         className="h-full w-full"
-                    style={{ backgroundColor: item.previewColor }}
+                        style={{ backgroundColor: item.previewColor ?? '#f3f4f6' }}
                       />
-                ) : (
-                  <div className="h-full w-full bg-gray-100" />
                     )}
+                  </div>
+                  <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
+                    {item.label}
+                  </span>
                 </button>
-            ))}
+              )
-            {selectedCategory === 'other' && onChange ? (
+            })}
+            {selectedCategory === 'colors' && onChange ? (
               <button
-                className={`flex aspect-square w-full items-center justify-center rounded-lg border font-medium text-[10px] transition-all ${
+                className={`group relative flex flex-col gap-1.5 rounded-xl p-1.5 transition-colors hover:cursor-pointer hover:bg-sidebar-accent ${
-                  showCustom
+                  showCustom ? 'bg-sidebar-accent ring-2 ring-primary-foreground' : ''
-                    ? 'border-blue-500 ring-2 ring-blue-500/30'
-                    : 'border-gray-300 hover:border-gray-400'
                 }`}
-                onClick={handleCustomOpen}
+                onClick={() => {
-                title="Custom"
+                  triggerSFX('sfx:menu-click')
+                  handleCustomOpen()
+                }}
+                onMouseEnter={() => triggerSFX('sfx:menu-hover')}
                 type="button"
               >
+                <div className="flex aspect-square w-full items-center justify-center rounded-lg bg-muted text-lg text-muted-foreground group-hover:text-foreground">
+                  +
+                </div>
+                <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
                   Custom
+                </span>
               </button>
             ) : null}
           </div>

packages/editor/src/lib/colors.ts

@@ -1,16 +0,0 @@
-export const CURATED_COLORS = [
-  { name: 'Warm white', hex: '#f5f1e8' },
-  { name: 'Soft linen', hex: '#e9ddcf' },
-  { name: 'Stone', hex: '#c8c2b8' },
-  { name: 'Clay beige', hex: '#b9a58f' },
-  { name: 'Greige', hex: '#9d9488' },
-  { name: 'Charcoal', hex: '#3c3c3a' },
-  { name: 'Mushroom', hex: '#a38f7b' },
-  { name: 'Terracotta', hex: '#b7654b' },
-  { name: 'Muted ochre', hex: '#c29b52' },
-  { name: 'Sage', hex: '#8d9b82' },
-  { name: 'Olive gray', hex: '#68715f' },
-  { name: 'Dusty blue', hex: '#7d91a3' },
-  { name: 'Slate teal', hex: '#4f7372' },
-  { name: 'Aubergine', hex: '#594354' },
-] as const