feat(paint-slots): scene-material library panel + Colors swatches

Phase 3 paint UI.

- Extract reusable MaterialPropertiesEditor (shared by the custom active-
  paint editor and the scene-material editor).
- Curated Colors swatch row in the picker; catalog presets fork-on-tweak
  by seeding a custom material from the entry's previewColor.
- Scene materials section in MaterialPaintPanel (shown once any exist):
  list with swatch, inline rename, 'used by N parts', paint-with,
  edit (live-propagates to every referencing part via the renderer's
  sceneMaterials dep), duplicate, delete.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/editor/src/components/ui/controls/material-paint-panel.tsx

@@ -11,6 +11,8 @@ import {
 import useEditor from './../../../store/use-editor'
 import { Button } from '../primitives/button'
 import { MaterialPicker } from './material-picker'
+import { PanelSection } from './panel-section'
+import { SceneMaterialList } from './scene-material-list'
 
 /**
  * Material picker for paint mode. Embedders render this wherever paint controls
@@ -27,6 +29,7 @@ export function MaterialPaintPanel() {
   const setPaintEraser = useEditor((state) => state.setPaintEraser)
   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 =
@@ -78,6 +81,11 @@ export function MaterialPaintPanel() {
         selectedMaterialPreset={activePaintMaterial?.materialPreset}
         value={activePaintMaterial?.material}
       />
+      {materialCount > 0 ? (
+        <PanelSection title="Scene materials">
+          <SceneMaterialList />
+        </PanelSection>
+      ) : null}
     </div>
   )
 }

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

@@ -10,6 +10,7 @@ import {
   toLibraryMaterialRef,
 } from '@pascal-app/core'
 import { useEffect, useRef, useState } from 'react'
+import { CURATED_COLORS } from '../../../lib/colors'
 import useEditor from '../../../store/use-editor'
 
 type MaterialPickerProps = {
@@ -55,7 +56,8 @@ export function MaterialPicker({
       return
     }
 
-    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
+    const catalogId =
+      getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
     const selectedCatalogEntry = getCatalogMaterialById(catalogId)
     if (selectedCatalogEntry?.category) {
       setSelectedCategory(selectedCatalogEntry.category)
@@ -64,6 +66,9 @@ export function MaterialPicker({
 
   const selectedCatalogId =
     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
@@ -72,6 +77,23 @@ 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
@@ -97,10 +119,13 @@ export function MaterialPicker({
     if (disabled) return
     setShowCustom(true)
     setPaintPanelOpen(true)
+    const forkColor = selectedMaterialPreset
+      ? (selectedCatalogEntry?.previewColor ?? '#ffffff')
+      : '#ffffff'
     onChange?.({
       preset: 'custom',
       properties: {
-        color: value?.properties?.color || '#ffffff',
+        color: value?.properties?.color || forkColor,
         roughness: value?.properties?.roughness ?? 0.5,
         metalness: value?.properties?.metalness ?? 0,
         opacity: value?.properties?.opacity ?? 1,
@@ -114,6 +139,33 @@ 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="space-y-1.5">
+              <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={`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}
@@ -149,45 +201,48 @@ export function MaterialPicker({
             style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
           >
             {catalogItems.map((item) => (
-                <button
+              <button
-                  className={`relative aspect-square w-full overflow-hidden rounded-lg border transition-all ${
+                className={`relative aspect-square w-full overflow-hidden rounded-lg border transition-all ${
-                    selectedCatalogId === toLibraryMaterialRef(item.id)
+                  selectedCatalogId === toLibraryMaterialRef(item.id)
-                      ? 'border-blue-500 ring-2 ring-blue-500/30'
+                    ? 'border-blue-500 ring-2 ring-blue-500/30'
-                      : 'border-gray-300 hover:border-gray-400'
+                    : 'border-gray-300 hover:border-gray-400'
-                  }`}
+                }`}
-                  key={item.id}
+                key={item.id}
-                  onClick={() => handleCatalogSelect(item.id)}
+                onClick={() => handleCatalogSelect(item.id)}
-                  title={item.label}
+                title={item.label}
-                  type="button"
+                type="button"
-                >
+              >
-                  <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-white/12 ring-inset" />
+                <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-white/12 ring-inset" />
-                  {item.previewThumbnailUrl ? (
+                {item.previewThumbnailUrl ? (
-                    <img
+                  <img
-                      alt={item.label}
+                    alt={item.label}
-                      className="h-full w-full object-cover"
+                    className="h-full w-full object-cover"
-                      src={item.previewThumbnailUrl}
+                    src={item.previewThumbnailUrl}
-                    />
+                  />
-                  ) : item.previewColor ? (
+                ) : item.previewColor ? (
-                    <div className="h-full w-full" style={{ backgroundColor: item.previewColor }} />
+                  <div
-                  ) : (
+                    className="h-full w-full"
-                    <div className="h-full w-full bg-gray-100" />
+                    style={{ backgroundColor: item.previewColor }}
-                  )}
+                  />
-                </button>
+                ) : (
-              ))}
+                  <div className="h-full w-full bg-gray-100" />
-              {selectedCategory === 'other' && onChange ? (
+                )}
-                <button
+              </button>
-                  className={`flex aspect-square w-full items-center justify-center rounded-lg border font-medium text-[10px] transition-all ${
+            ))}
-                    showCustom
+            {selectedCategory === 'other' && onChange ? (
-                      ? 'border-blue-500 ring-2 ring-blue-500/30'
+              <button
-                      : 'border-gray-300 hover:border-gray-400'
+                className={`flex aspect-square w-full items-center justify-center rounded-lg border font-medium text-[10px] transition-all ${
-                  }`}
+                  showCustom
-                  onClick={handleCustomOpen}
+                    ? 'border-blue-500 ring-2 ring-blue-500/30'
-                  title="Custom"
+                    : 'border-gray-300 hover:border-gray-400'
-                  type="button"
+                }`}
-                >
+                onClick={handleCustomOpen}
-                  Custom
+                title="Custom"
-                </button>
+                type="button"
-              ) : null}
+              >
+                Custom
+              </button>
+            ) : null}
           </div>
         </div>
       )}

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

@@ -0,0 +1,140 @@
+'use client'
+
+import type { MaterialProperties, MaterialSchema } from '@pascal-app/core'
+import { Input } from '../primitives/input'
+
+const DEFAULT_MATERIAL_PROPERTIES: MaterialProperties = {
+  color: '#ffffff',
+  roughness: 0.5,
+  metalness: 0,
+  opacity: 1,
+  transparent: false,
+  side: 'front',
+}
+
+export function MaterialPropertiesEditor({
+  value,
+  onChange,
+}: {
+  value: MaterialSchema
+  onChange: (next: MaterialSchema) => void
+}) {
+  const currentProps = value.properties ?? DEFAULT_MATERIAL_PROPERTIES
+
+  const updateMaterial = (
+    updates: Partial<MaterialProperties>,
+    nextTransparent = currentProps.transparent,
+  ) => {
+    onChange({
+      ...value,
+      preset: value.preset ?? 'custom',
+      properties: {
+        ...currentProps,
+        ...updates,
+        transparent: nextTransparent,
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+          Color
+        </label>
+        <div className="flex items-center gap-2">
+          <input
+            className="h-10 w-14 cursor-pointer rounded-md border border-input bg-transparent"
+            onChange={(e) => updateMaterial({ color: e.target.value })}
+            type="color"
+            value={currentProps.color}
+          />
+          <Input
+            onChange={(e) => updateMaterial({ color: e.target.value })}
+            value={currentProps.color}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+            Roughness
+          </label>
+          <span className="font-mono text-muted-foreground text-xs">
+            {currentProps.roughness.toFixed(2)}
+          </span>
+        </div>
+        <input
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+          max={1}
+          min={0}
+          onChange={(e) => updateMaterial({ roughness: Number.parseFloat(e.target.value) })}
+          step={0.01}
+          type="range"
+          value={currentProps.roughness}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+            Metalness
+          </label>
+          <span className="font-mono text-muted-foreground text-xs">
+            {currentProps.metalness.toFixed(2)}
+          </span>
+        </div>
+        <input
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+          max={1}
+          min={0}
+          onChange={(e) => updateMaterial({ metalness: Number.parseFloat(e.target.value) })}
+          step={0.01}
+          type="range"
+          value={currentProps.metalness}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+            Opacity
+          </label>
+          <span className="font-mono text-muted-foreground text-xs">
+            {currentProps.opacity.toFixed(2)}
+          </span>
+        </div>
+        <input
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
+          max={1}
+          min={0}
+          onChange={(e) => {
+            const opacity = Number.parseFloat(e.target.value)
+            updateMaterial({ opacity }, opacity < 1 || currentProps.transparent)
+          }}
+          step={0.01}
+          type="range"
+          value={currentProps.opacity}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+          Side
+        </label>
+        <select
+          className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30"
+          onChange={(e) =>
+            updateMaterial({ side: e.target.value as 'front' | 'back' | 'double' })
+          }
+          value={currentProps.side}
+        >
+          <option value="front">Front</option>
+          <option value="back">Back</option>
+          <option value="double">Double</option>
+        </select>
+      </div>
+    </div>
+  )
+}

packages/editor/src/components/ui/controls/scene-material-list.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import {
+  generateSceneMaterialId,
+  type MaterialSchema,
+  type SceneMaterial,
+  type SceneMaterialId,
+  toSceneMaterialRef,
+  useScene,
+} from '@pascal-app/core'
+import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import useEditor from '../../../store/use-editor'
+import { Button } from '../primitives/button'
+import { Input } from '../primitives/input'
+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() {
+  const materials = useScene((state) => state.materials)
+  const nodes = useScene((state) => state.nodes)
+  const addSceneMaterial = useScene((state) => state.addSceneMaterial)
+  const updateSceneMaterial = useScene((state) => state.updateSceneMaterial)
+  const removeSceneMaterial = useScene((state) => state.removeSceneMaterial)
+  const activePaintTarget = useEditor((state) => state.activePaintTarget)
+  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+
+  const materialEntries = useMemo(
+    () => Object.entries(materials) as [SceneMaterialId, SceneMaterial][],
+    [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])
+
+  return (
+    <div className="space-y-2">
+      {materialEntries.map(([id, sceneMaterial]) => (
+        <SceneMaterialRow
+          addSceneMaterial={addSceneMaterial}
+          activePaintTarget={activePaintTarget}
+          id={id}
+          key={id}
+          removeSceneMaterial={removeSceneMaterial}
+          sceneMaterial={sceneMaterial}
+          setActivePaintMaterial={setActivePaintMaterial}
+          updateSceneMaterial={updateSceneMaterial}
+          usageCount={usageCounts.get(id) ?? 0}
+        />
+      ))}
+    </div>
+  )
+}
+
+function SceneMaterialRow({
+  id,
+  sceneMaterial,
+  usageCount,
+  activePaintTarget,
+  addSceneMaterial,
+  updateSceneMaterial,
+  removeSceneMaterial,
+  setActivePaintMaterial,
+}: {
+  id: SceneMaterialId
+  sceneMaterial: SceneMaterial
+  usageCount: number
+  activePaintTarget: ReturnType<typeof useEditor.getState>['activePaintTarget']
+  addSceneMaterial: ReturnType<typeof useScene.getState>['addSceneMaterial']
+  updateSceneMaterial: ReturnType<typeof useScene.getState>['updateSceneMaterial']
+  removeSceneMaterial: ReturnType<typeof useScene.getState>['removeSceneMaterial']
+  setActivePaintMaterial: ReturnType<typeof useEditor.getState>['setActivePaintMaterial']
+}) {
+  const [isEditingMaterial, setIsEditingMaterial] = useState(false)
+  const [draftName, setDraftName] = useState(sceneMaterial.name)
+  const swatchColor = sceneMaterial.material.properties?.color ?? '#ffffff'
+
+  useEffect(() => {
+    setDraftName(sceneMaterial.name)
+  }, [sceneMaterial.name])
+
+  const commitName = () => {
+    const nextName = draftName.trim()
+    if (!nextName) {
+      setDraftName(sceneMaterial.name)
+      return
+    }
+    if (nextName !== sceneMaterial.name) {
+      updateSceneMaterial(id, { name: nextName })
+    }
+  }
+
+  const duplicateMaterial = () => {
+    addSceneMaterial({
+      id: generateSceneMaterialId(),
+      name: `${sceneMaterial.name} copy`,
+      material: structuredClone(sceneMaterial.material) as MaterialSchema,
+    })
+  }
+
+  return (
+    <div className="rounded-md border border-border/60 bg-background/40 p-2">
+      <div className="flex items-center gap-2">
+        <span
+          className="h-8 w-8 shrink-0 rounded-md border border-border/70"
+          style={{ backgroundColor: swatchColor }}
+        />
+        <Input
+          className="h-8 px-2 text-sm"
+          onBlur={commitName}
+          onChange={(e) => setDraftName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.currentTarget.blur()
+            }
+            if (e.key === 'Escape') {
+              setDraftName(sceneMaterial.name)
+              e.currentTarget.blur()
+            }
+          }}
+          value={draftName}
+        />
+      </div>
+
+      <div className="mt-2 flex items-center justify-between gap-2">
+        <span className="text-muted-foreground text-xs">
+          Used by {usageCount} {usageCount === 1 ? 'part' : 'parts'}
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            aria-label="Paint with"
+            onClick={() =>
+              setActivePaintMaterial({
+                material: sceneMaterial.material,
+                sourceTarget: activePaintTarget,
+              })
+            }
+            size="icon-sm"
+            title="Paint with"
+            type="button"
+            variant="outline"
+          >
+            <Paintbrush />
+          </Button>
+          <Button
+            aria-label="Edit"
+            aria-pressed={isEditingMaterial}
+            onClick={() => setIsEditingMaterial((value) => !value)}
+            size="icon-sm"
+            title="Edit"
+            type="button"
+            variant={isEditingMaterial ? 'default' : 'outline'}
+          >
+            <Pencil />
+          </Button>
+          <Button
+            aria-label="Duplicate"
+            onClick={duplicateMaterial}
+            size="icon-sm"
+            title="Duplicate"
+            type="button"
+            variant="outline"
+          >
+            <Copy />
+          </Button>
+          <Button
+            aria-label="Delete"
+            onClick={() => removeSceneMaterial(id)}
+            size="icon-sm"
+            title="Delete"
+            type="button"
+            variant="outline"
+          >
+            <Trash2 />
+          </Button>
+        </div>
+      </div>
+
+      {isEditingMaterial ? (
+        <div className="mt-3 border-border/60 border-t pt-3">
+          <MaterialPropertiesEditor
+            onChange={(material) => updateSceneMaterial(id, { material })}
+            value={sceneMaterial.material}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}

packages/editor/src/components/ui/panels/paint-panel.tsx

@@ -1,24 +1,10 @@
 'use client'
 
 import useEditor from '../../../store/use-editor'
+import { MaterialPropertiesEditor } from '../controls/material-properties-editor'
 import { PanelSection } from '../controls/panel-section'
-import { Input } from '../primitives/input'
 import { PanelWrapper } from './panel-wrapper'
 
-function buildDefaultCustomMaterial() {
-  return {
-    preset: 'custom' as const,
-    properties: {
-      color: '#ffffff',
-      roughness: 0.5,
-      metalness: 0,
-      opacity: 1,
-      transparent: false,
-      side: 'front' as const,
-    },
-  }
-}
-
 export function PaintPanel() {
   const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
   const activePaintTarget = useEditor((state) => state.activePaintTarget)
@@ -32,131 +18,18 @@ export function PaintPanel() {
 
   if (!customMaterial) return null
 
-  const currentProps = customMaterial.properties ?? buildDefaultCustomMaterial().properties
-
-  const updateCustomMaterial = (
-    updates: Partial<typeof currentProps>,
-    nextTransparent = currentProps.transparent,
-  ) => {
-    setActivePaintMaterial({
-      material: {
-        preset: 'custom',
-        properties: {
-          ...currentProps,
-          ...updates,
-          transparent: nextTransparent,
-        },
-      },
-      sourceTarget: activePaintMaterial?.sourceTarget ?? activePaintTarget,
-    })
-  }
-
   return (
     <PanelWrapper onClose={() => setPaintPanelOpen(false)} title="Material" width={320}>
-      <PanelSection title="Custom Material">
+      <PanelSection title="Custom material">
-        <div className="space-y-3">
+        <MaterialPropertiesEditor
-          <div className="space-y-2">
+          onChange={(material) =>
-            <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
+            setActivePaintMaterial({
-              Color
+              material,
-            </label>
+              sourceTarget: activePaintMaterial?.sourceTarget ?? activePaintTarget,
-            <div className="flex items-center gap-2">
+            })
-              <input
+          }
-                className="h-10 w-14 cursor-pointer rounded-md border border-input bg-transparent"
+          value={customMaterial}
-                onChange={(e) => updateCustomMaterial({ color: e.target.value })}
+        />
-                type="color"
-                value={currentProps.color}
-              />
-              <Input
-                onChange={(e) => updateCustomMaterial({ color: e.target.value })}
-                value={currentProps.color}
-              />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
-                Roughness
-              </label>
-              <span className="font-mono text-muted-foreground text-xs">
-                {currentProps.roughness.toFixed(2)}
-              </span>
-            </div>
-            <input
-              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
-              max={1}
-              min={0}
-              onChange={(e) =>
-                updateCustomMaterial({ roughness: Number.parseFloat(e.target.value) })
-              }
-              step={0.01}
-              type="range"
-              value={currentProps.roughness}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
-                Metalness
-              </label>
-              <span className="font-mono text-muted-foreground text-xs">
-                {currentProps.metalness.toFixed(2)}
-              </span>
-            </div>
-            <input
-              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
-              max={1}
-              min={0}
-              onChange={(e) =>
-                updateCustomMaterial({ metalness: Number.parseFloat(e.target.value) })
-              }
-              step={0.01}
-              type="range"
-              value={currentProps.metalness}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
-                Opacity
-              </label>
-              <span className="font-mono text-muted-foreground text-xs">
-                {currentProps.opacity.toFixed(2)}
-              </span>
-            </div>
-            <input
-              className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
-              max={1}
-              min={0}
-              onChange={(e) => {
-                const opacity = Number.parseFloat(e.target.value)
-                updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
-              }}
-              step={0.01}
-              type="range"
-              value={currentProps.opacity}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
-              Side
-            </label>
-            <select
-              className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30"
-              onChange={(e) =>
-                updateCustomMaterial({ side: e.target.value as 'front' | 'back' | 'double' })
-              }
-              value={currentProps.side}
-            >
-              <option value="front">Front</option>
-              <option value="back">Back</option>
-              <option value="double">Double</option>
-            </select>
-          </div>
-        </div>
       </PanelSection>
     </PanelWrapper>
   )

packages/editor/src/lib/colors.ts

@@ -0,0 +1,16 @@
+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