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

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

@@ -2,195 +2,205 @@
 
 import {
   getCatalogMaterialById,
+  getDynamicLibraryMaterials,
   getLibraryMaterialIdFromRef,
+  getLibraryMaterialsVersion,
   getMaterialsForCategory,
   MATERIAL_CATEGORIES,
-  type MaterialSchema,
+  type MaterialCatalogItem,
+  type MaterialSource,
   type MaterialTarget,
+  subscribeLibraryMaterials,
   toLibraryMaterialRef,
 } from '@pascal-app/core'
-import { useEffect, useRef, useState } from 'react'
-import useEditor from '../../../store/use-editor'
+import { Plus } from 'lucide-react'
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { triggerSFX } from '../../../lib/sfx-bus'
 
-type MaterialPickerProps = {
-  value?: MaterialSchema
+export type MaterialSourceFilter = 'all' | MaterialSource
+
+export type MaterialPickerProps = {
   selectedMaterialPreset?: string
-  onChange?: (material: MaterialSchema) => void
   onSelectMaterialPreset?: (materialPreset: string) => void
   disabled?: boolean
   nodeType?: MaterialTarget
   hideSideControl?: boolean
+  onCreateMaterialRequest?: () => void
 }
 
+const SOURCE_FILTERS: { id: MaterialSourceFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'pascal', label: 'Pascal' },
+  { id: 'mine', label: 'Mine' },
+  { id: 'workspace', label: 'Workspace' },
+  { id: 'community', label: 'Community' },
+]
+
 function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
-  if (category === 'roof') return 'Roofing'
   return category.charAt(0).toUpperCase() + category.slice(1)
 }
 
+function filterBySource(items: MaterialCatalogItem[], filter: MaterialSourceFilter) {
+  if (filter === 'all') return items
+  return items.filter((item) => (item.source ?? 'pascal') === filter)
+}
+
+/**
+ * Catalog material picker: a fixed row of category tabs and a source filter row
+ * over a scrollable grid of swatches. Scene-material creation lives in the
+ * scene-material section (the host's `+` action); `onCreateMaterialRequest` is
+ * the host's entry point for authoring a new *library* material.
+ */
 export function MaterialPicker({
-  value,
   selectedMaterialPreset,
-  onChange,
   onSelectMaterialPreset,
   disabled = false,
+  onCreateMaterialRequest,
 }: MaterialPickerProps) {
-  const setPaintPanelOpen = useEditor((state) => state.setPaintPanelOpen)
-  const [showCustom, setShowCustom] = useState<boolean>(!!value?.properties)
   const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
     MATERIAL_CATEGORIES[0],
   )
-  const categoryScrollRef = useRef<HTMLDivElement>(null)
-  const catalogItems =
-    selectedCategory === 'other'
-      ? getMaterialsForCategory('other')
-      : getMaterialsForCategory(selectedCategory)
-
-  useEffect(() => {
-    setShowCustom(!!value?.properties && !selectedMaterialPreset)
-  }, [selectedMaterialPreset, value?.properties])
+  const [sourceFilter, setSourceFilter] = useState<MaterialSourceFilter>('all')
+  // Version counter so host registrations/unregistrations re-render the picker.
+  const libraryVersion = useSyncExternalStore(
+    subscribeLibraryMaterials,
+    getLibraryMaterialsVersion,
+    getLibraryMaterialsVersion,
+  )
+  const hasWorkspaceMaterials = useMemo(
+    () => getDynamicLibraryMaterials().some((item) => item.source === 'workspace'),
+    [libraryVersion],
+  )
+  const visibleSourceFilters = SOURCE_FILTERS.filter(
+    (filter) => filter.id !== 'workspace' || hasWorkspaceMaterials,
+  )
+  const availableCategories = MATERIAL_CATEGORIES.filter(
+    (category) => getMaterialsForCategory(category).length > 0,
+  )
+  const catalogItems = filterBySource(getMaterialsForCategory(selectedCategory), sourceFilter)
 
+  // Keep the visible category in sync with the externally-selected catalog
+  // material (a `scene:` ref matches no catalog entry, so the tab stays put).
   useEffect(() => {
-    if (!selectedMaterialPreset && value?.properties) {
-      setSelectedCategory('other')
-      return
-    }
-
-    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
-    const selectedCatalogEntry = getCatalogMaterialById(catalogId)
-    if (selectedCatalogEntry?.category) {
-      setSelectedCategory(selectedCatalogEntry.category)
-    }
-  }, [selectedMaterialPreset, value?.id])
-
-  const selectedCatalogId =
-    selectedMaterialPreset ?? (value?.id ? toLibraryMaterialRef(value.id) : undefined)
+    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? undefined
+    const entry = getCatalogMaterialById(catalogId)
+    if (entry?.category) setSelectedCategory(entry.category)
+  }, [selectedMaterialPreset])
 
   const handleCatalogSelect = (materialId: string) => {
     if (disabled) return
-    setShowCustom(false)
-    setPaintPanelOpen(false)
     onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
   }
 
-  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)
-    setPaintPanelOpen(true)
-    onChange?.({
-      preset: 'custom',
-      properties: {
-        color: value?.properties?.color || '#ffffff',
-        roughness: value?.properties?.roughness ?? 0.5,
-        metalness: value?.properties?.metalness ?? 0,
-        opacity: value?.properties?.opacity ?? 1,
-        transparent: value?.properties?.transparent ?? false,
-        side: value?.properties?.side ?? 'front',
-      },
-    })
-  }
-
   return (
-    <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">
-          <div
-            className="w-full max-w-full overflow-x-auto overflow-y-hidden"
-            ref={categoryScrollRef}
-            style={{ msOverflowStyle: 'none', scrollbarWidth: 'none' }}
+    <div
+      className={`flex h-full min-h-0 flex-col gap-2 ${disabled ? 'pointer-events-none opacity-50' : ''}`}
+    >
+      {/* Fixed category tabs — outside the scroll region. */}
+      <div className="flex shrink-0 flex-wrap gap-1">
+        {availableCategories.map((category) => (
+          <button
+            className={`rounded-full px-3 py-1 font-medium text-xs transition-colors ${
+              selectedCategory === category
+                ? 'bg-foreground text-background'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+            key={category}
+            onClick={() => {
+              setSelectedCategory(category)
+              // Auto-select the first material in the category so the brush is
+              // immediately ready (and the swatch shows as selected).
+              const first = filterBySource(getMaterialsForCategory(category), sourceFilter)[0]
+              if (first) handleCatalogSelect(first.id)
+            }}
+            type="button"
           >
-            <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-transparent text-muted-foreground opacity-70 hover:text-foreground hover:opacity-100'
-                  }`}
-                  key={category}
-                  onClick={() => {
-                    setSelectedCategory(category)
-                    if (showCustom) {
-                      setShowCustom(false)
-                    }
-                    if (category !== 'other') {
-                      setPaintPanelOpen(false)
-                    }
-                  }}
-                  type="button"
-                >
-                  {getCategoryLabel(category)}
-                </button>
-              ))}
-            </div>
-          </div>
-          <div
-            className="grid gap-1.5 pb-1"
-            style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
+            {getCategoryLabel(category)}
+          </button>
+        ))}
+      </div>
+      {/* Fixed source filter tabs — underline style, matching the catalog
+          browse surfaces (Items / Rooms / Build / Search) rather than the
+          pill-button category row above. */}
+      <div className="flex shrink-0 items-center gap-4 px-1">
+        {visibleSourceFilters.map((filter) => (
+          <button
+            className={`-mb-px border-b-2 px-0.5 py-1.5 font-medium text-xs transition-colors ${
+              sourceFilter === filter.id
+                ? 'border-foreground text-foreground'
+                : 'border-transparent text-muted-foreground hover:text-foreground'
+            }`}
+            key={filter.id}
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              setSourceFilter(filter.id)
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+            type="button"
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
+      {/* The only scrolling region. */}
+      <div
+        className="subtle-scrollbar grid min-h-0 flex-1 auto-rows-min gap-2 overflow-y-auto pb-1"
+        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
+      >
+        {onCreateMaterialRequest ? (
+          <button
+            className="group relative flex flex-col gap-1.5 rounded-xl p-1.5 transition-colors hover:cursor-pointer hover:bg-sidebar-accent"
+            onClick={() => {
+              triggerSFX('sfx:menu-click')
+              onCreateMaterialRequest()
+            }}
+            onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+            type="button"
           >
-            {catalogItems.map((item) => (
-                <button
-                  className={`relative aspect-square w-full overflow-hidden rounded-lg border transition-all ${
-                    selectedCatalogId === toLibraryMaterialRef(item.id)
-                      ? 'border-blue-500 ring-2 ring-blue-500/30'
-                      : 'border-gray-300 hover:border-gray-400'
-                  }`}
-                  key={item.id}
-                  onClick={() => handleCatalogSelect(item.id)}
-                  title={item.label}
-                  type="button"
-                >
-                  <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-white/12 ring-inset" />
-                  {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 }} />
-                  ) : (
-                    <div className="h-full w-full bg-gray-100" />
-                  )}
-                </button>
-              ))}
-              {selectedCategory === 'other' && onChange ? (
-                <button
-                  className={`flex aspect-square w-full items-center justify-center rounded-lg border font-medium text-[10px] transition-all ${
-                    showCustom
-                      ? 'border-blue-500 ring-2 ring-blue-500/30'
-                      : 'border-gray-300 hover:border-gray-400'
-                  }`}
-                  onClick={handleCustomOpen}
-                  title="Custom"
-                  type="button"
-                >
-                  Custom
-                </button>
-              ) : null}
-          </div>
-        </div>
-      )}
+            <div className="flex aspect-square w-full items-center justify-center rounded-lg border border-border/45 border-dashed">
+              <Plus className="size-5 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">
+              New material
+            </span>
+          </button>
+        ) : null}
+        {catalogItems.map((item) => {
+          const isSelected = selectedMaterialPreset === toLibraryMaterialRef(item.id)
+          return (
+            <button
+              className={`group relative flex flex-col gap-1.5 rounded-xl p-1.5 transition-colors hover:cursor-pointer hover:bg-sidebar-accent ${
+                isSelected ? 'bg-sidebar-accent ring-1 ring-primary ring-inset' : ''
+              }`}
+              key={item.id}
+              onClick={() => {
+                triggerSFX('sfx:menu-click')
+                handleCatalogSelect(item.id)
+              }}
+              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+              type="button"
+            >
+              <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}
+                  />
+                ) : (
+                  <div
+                    className="h-full w-full"
+                    style={{ backgroundColor: item.previewColor ?? '#f3f4f6' }}
+                  />
+                )}
+              </div>
+              <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
+                {item.label}
+              </span>
+            </button>
+          )
+        })}
+      </div>
     </div>
   )
 }

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

@@ -0,0 +1,108 @@
+'use client'
+
+import type { MaterialProperties, MaterialSchema } from '@pascal-app/core'
+import { Input } from '../primitives/input'
+import { SliderControl } from './slider-control'
+
+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-9 w-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-0 [&::-moz-color-swatch]:rounded-[5px] [&::-moz-color-swatch]:border-none [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-[5px] [&::-webkit-color-swatch]:border-none"
+            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>
+
+      <SliderControl
+        label="Roughness"
+        max={1}
+        min={0}
+        onChange={(value) => updateMaterial({ roughness: value })}
+        precision={2}
+        step={0.01}
+        value={currentProps.roughness}
+      />
+
+      <SliderControl
+        label="Metalness"
+        max={1}
+        min={0}
+        onChange={(value) => updateMaterial({ metalness: value })}
+        precision={2}
+        step={0.01}
+        value={currentProps.metalness}
+      />
+
+      <SliderControl
+        label="Opacity"
+        max={1}
+        min={0}
+        onChange={(value) => updateMaterial({ opacity: value }, value < 1 || currentProps.transparent)}
+        precision={2}
+        step={0.01}
+        value={currentProps.opacity}
+      />
+
+      <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>
+  )
+}