{(catalogItems.length > 0 || onChange) && (
+ {onChange ? (
+
+
+ Colors
+
+
+ {CURATED_COLORS.map((color) => {
+ const isSelected = selectedColor === color.hex.toLowerCase()
+ return (
+
+
+ ) : null}
{catalogItems.map((item) => (
-
- ))}
- {selectedCategory === 'other' && onChange ? (
-
- ) : null}
+
+ ))}
+ {selectedCategory === 'other' && onChange ? (
+
+ ) : null}
)}
diff --git a/packages/editor/src/components/ui/controls/material-properties-editor.tsx b/packages/editor/src/components/ui/controls/material-properties-editor.tsx
new file mode 100644
index 00000000..f4e54e76
--- /dev/null
+++ b/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
,
+ nextTransparent = currentProps.transparent,
+ ) => {
+ onChange({
+ ...value,
+ preset: value.preset ?? 'custom',
+ properties: {
+ ...currentProps,
+ ...updates,
+ transparent: nextTransparent,
+ },
+ })
+ }
+
+ return (
+
+
+
+
+
+
+
+ {currentProps.roughness.toFixed(2)}
+
+
+
updateMaterial({ roughness: Number.parseFloat(e.target.value) })}
+ step={0.01}
+ type="range"
+ value={currentProps.roughness}
+ />
+
+
+
+
+
+
+ {currentProps.metalness.toFixed(2)}
+
+
+
updateMaterial({ metalness: Number.parseFloat(e.target.value) })}
+ step={0.01}
+ type="range"
+ value={currentProps.metalness}
+ />
+
+
+
+
+
+
+ {currentProps.opacity.toFixed(2)}
+
+
+
{
+ const opacity = Number.parseFloat(e.target.value)
+ updateMaterial({ opacity }, opacity < 1 || currentProps.transparent)
+ }}
+ step={0.01}
+ type="range"
+ value={currentProps.opacity}
+ />
+
+
+
+
+
+
+
+ {materialEntries.map(([id, sceneMaterial]) => (
+
+ ))}
+
+ )
+}
+
+function SceneMaterialRow({
+ id,
+ sceneMaterial,
+ usageCount,
+ activePaintTarget,
+ addSceneMaterial,
+ updateSceneMaterial,
+ removeSceneMaterial,
+ setActivePaintMaterial,
+}: {
+ id: SceneMaterialId
+ sceneMaterial: SceneMaterial
+ usageCount: number
+ activePaintTarget: ReturnType['activePaintTarget']
+ addSceneMaterial: ReturnType['addSceneMaterial']
+ updateSceneMaterial: ReturnType['updateSceneMaterial']
+ removeSceneMaterial: ReturnType['removeSceneMaterial']
+ setActivePaintMaterial: ReturnType['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 (
+
+
+
+ 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}
+ />
+
+
+
+
+ Used by {usageCount} {usageCount === 1 ? 'part' : 'parts'}
+
+
+
+
+
+
+
+
+
+ {isEditingMaterial ? (
+
+ updateSceneMaterial(id, { material })}
+ value={sceneMaterial.material}
+ />
+
+ ) : null}
+
-
-
-
-
-
-
- {currentProps.roughness.toFixed(2)}
-
-
-
- updateCustomMaterial({ roughness: Number.parseFloat(e.target.value) })
- }
- step={0.01}
- type="range"
- value={currentProps.roughness}
- />
-
-
-
-
-
-
- {currentProps.metalness.toFixed(2)}
-
-
-
- updateCustomMaterial({ metalness: Number.parseFloat(e.target.value) })
- }
- step={0.01}
- type="range"
- value={currentProps.metalness}
- />
-
-
-
-
-
-
- {currentProps.opacity.toFixed(2)}
-
-
-
{
- const opacity = Number.parseFloat(e.target.value)
- updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
- }}
- step={0.01}
- type="range"
- value={currentProps.opacity}
- />
-
-
-
-
-
-
-