@pascal-app/editor 1.0.1 → 1.0.3

package/src/components/tools/registry/move-registry-node-tool.tsx

@@ -42,7 +42,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { type Group, Vector3 } from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { commitFreshPlacementSubtree } from '../../../lib/fresh-planar-placement'
-import { stripPlacementMetadataFlags } from '../../../lib/placement-metadata'
+import {
+  isFreshPlacementMetadata,
+  stripPlacementMetadataFlags,
+} from '../../../lib/placement-metadata'
 import {
   offsetPlanPositionByLocalCenter,
   resolvePrioritizedPlanarCursorPosition,
@@ -64,6 +67,7 @@ import useEditor, {
   isMagneticSnapActive,
 } from '../../../store/use-editor'
 import useFacingPose from '../../../store/use-facing-pose'
+import useInteractionScope from '../../../store/use-interaction-scope'
 import { swallowNextClick } from '../../editor/node-arrow-handles'
 import { CursorSphere } from '../shared/cursor-sphere'
 import { DragBoundingBox } from '../shared/drag-bounding-box'
@@ -218,7 +222,14 @@ const ALIGNMENT_THRESHOLD_M = 0.08
  */
 type ClickTriggerEvent = GridEvent | NodeEvent<AnyNode>
 
-export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
+export function MoveRegistryNodeTool({ node: source }: { node: AnyNode }) {
+  const node = useMemo(
+    () =>
+      isFreshPlacementMetadata(source.metadata)
+        ? (useScene.getState().nodes[source.id] ?? source)
+        : source,
+    [source],
+  )
   const itemSurfaceMove = useMemo(() => createRegistryItemSurfaceMove(node), [node])
   const suppressRaycastsRef = useRef<(() => void) | null>(null)
   const previewGroupRef = useRef<Group>(null)
@@ -432,6 +443,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
   }, [])
 
   useEffect(() => {
+    const ownsSubtree = useInteractionScope.getState().adoptSubtree(node.id)
     useScene.temporal.getState().pause()
     const movementSfx = createMovementSfxTick()
     dragAnchorRef.current = null
@@ -1114,11 +1126,13 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
         } as Partial<AnyNode>
 
         if (isNew) {
-          const finalId = commitFreshPlacementSubtree(node.id as AnyNodeId, data)
-          if (finalId) {
-            committed = true
-            committedId = finalId
-          }
+          const finalId = commitFreshPlacementSubtree(node.id as AnyNodeId, data, (reason) => {
+            setSurfaceRejection(reason)
+            setValid(false)
+          })
+          if (!finalId) return
+          committed = true
+          committedId = finalId
         } else {
           // Fold the connected-ductwork follow-updates into the SAME
           // batch as the moved node so the whole thing is one undo step.
@@ -1339,7 +1353,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
       clearParentFramePreview()
       if (isNew) {
         updateSurfaceNode(node.id, {}, null)
-        useScene.getState().deleteNode(node.id as AnyNodeId)
+        if (!ownsSubtree) useScene.getState().deleteNode(node.id)
       } else {
         itemSurfaceMove?.restore()
         applyMeshPose(originalPosition, originalRotationY)
@@ -1376,7 +1390,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
       // unmount / commit paths uniformly.
       useAlignmentGuides.getState().clear()
       const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
-      if (!committed && !finalisedBy2D && (!isNew || itemSurfaceMove)) {
+      if (!committed && !finalisedBy2D && (!isNew || (!ownsSubtree && itemSurfaceMove))) {
         useLiveTransforms.getState().clear(node.id)
         clearConnectivityOverrides()
         clearParentFramePreview()

package/src/components/tools/shared/affordance-dispatch.test.ts

@@ -0,0 +1,24 @@
+import { afterAll, afterEach, expect, spyOn, test } from 'bun:test'
+import { type AnyNodeDefinition, nodeRegistry } from '@pascal-app/core'
+import { getRegistryAffordanceTool, preloadRegistryAffordanceTools } from './affordance-dispatch'
+
+const get = spyOn(nodeRegistry, 'get')
+afterEach(() => get.mockReset())
+afterAll(() => get.mockRestore())
+
+test('a preloaded drag tool mounts directly without first-gesture suspense', async () => {
+  const Tool = () => null
+  const loader = async () => ({ default: Tool })
+  get.mockReturnValue({ affordanceTools: { move: loader } } as unknown as AnyNodeDefinition)
+  await preloadRegistryAffordanceTools('wall')
+  expect(getRegistryAffordanceTool('wall', 'move')).toBe(Tool)
+  expect(getRegistryAffordanceTool('wall', 'move')).toBe(Tool)
+})
+
+test('preloading does not change an already mounted lazy component identity', async () => {
+  const loader = async () => ({ default: () => null })
+  get.mockReturnValue({ affordanceTools: { move: loader } } as unknown as AnyNodeDefinition)
+  const mounted = getRegistryAffordanceTool('wall', 'move')
+  await preloadRegistryAffordanceTools('wall')
+  expect(getRegistryAffordanceTool('wall', 'move')).toBe(mounted)
+})

package/src/components/tools/shared/affordance-dispatch.ts

@@ -15,6 +15,19 @@ import { type ComponentType, lazy } from 'react'
  */
 const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
 
+export async function preloadRegistryAffordanceTools(kind: string): Promise<void> {
+  const tools = nodeRegistry.get(kind)?.affordanceTools
+  await Promise.allSettled(
+    Object.values(tools ?? {}).map(async (loader) => {
+      if (!loader || lazyToolCache.has(loader)) return
+      const module = (await loader()) as { default: ComponentType<any> }
+      // Keep an already-mounted lazy component stable. Otherwise use the resolved
+      // component directly so grabbing a preloaded handle never suspends its tool.
+      if (!lazyToolCache.has(loader)) lazyToolCache.set(loader, module.default)
+    }),
+  )
+}
+
 export function getRegistryAffordanceTool(
   kind: string,
   affordance: string,

package/src/components/tools/shared/draft-measurement-label.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Html } from '@react-three/drei'
+
+/** Lift of a draft's readout above the top of what it measures, in metres. */
+export const DRAFT_LABEL_Y_OFFSET = 0.22
+
+/** Screen-space readout for a draft in 3D (lengths, angles, split segments). */
+export function DraftMeasurementLabel({
+  color,
+  label,
+  position,
+  shadowColor,
+}: {
+  color: string
+  label: string
+  position: [number, number, number]
+  shadowColor: string
+}) {
+  return (
+    <Html
+      center
+      position={position}
+      style={{ pointerEvents: 'none', userSelect: 'none' }}
+      zIndexRange={[100, 0]}
+    >
+      <div
+        className="whitespace-nowrap font-bold font-mono text-[15px]"
+        style={{
+          color,
+          textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
+        }}
+      >
+        {label}
+      </div>
+    </Html>
+  )
+}

package/src/components/tools/shared/pointer-support-cap.test.ts

@@ -19,6 +19,7 @@ import {
   MeshBasicMaterial,
   OrthographicCamera,
   PerspectiveCamera,
+  Ray,
   Vector3,
 } from 'three'
 import { z } from 'zod'
@@ -161,6 +162,32 @@ describe('resolvePointerSupportSurface node tops', () => {
     expect(support?.worldPoint).toEqual([0, 2, 0])
   })
 
+  test('XR floor drawing uses the controller ray even when the camera sees a raised surface', () => {
+    addPluginPlatform(2, [4, 2, 2])
+    const camera = new PerspectiveCamera()
+    camera.position.set(0, 5, 5)
+    camera.updateMatrixWorld(true)
+    const controllerRay = new Ray(new Vector3(0, 1.5, 0), new Vector3(0, -1, 0))
+    const desktop = resolvePointerSupportSurface(camera, [0, 0, 0], {
+      includeNodeTopSurfaces: true,
+    })
+    expect(desktop?.sourceNodeId).toBe(PLATFORM_ID)
+    const xr = resolvePointerSupportSurface(camera, [0, 0, 0], {
+      includeNodeTopSurfaces: true,
+      pointerRay: controllerRay,
+    })
+    expect(xr?.sourceNodeId).toBeNull()
+    expect(xr?.worldPoint).toEqual([0, 0, 0])
+    camera.position.set(12, 8, -10)
+    camera.updateMatrixWorld(true)
+    expect(
+      resolvePointerSupportSurface(camera, [0, 0, 0], {
+        includeNodeTopSurfaces: true,
+        pointerRay: controllerRay,
+      })?.worldPoint,
+    ).toEqual([0, 0, 0])
+  })
+
   test('keeps an unhovered item top above a batched slab across batch transitions', () => {
     const restoreRegistry = nodeRegistry._snapshot()
     const item = ItemNode.parse({

package/src/components/tools/shared/pointer-support-cap.ts

@@ -11,7 +11,7 @@ import {
   useScene,
 } from '@pascal-app/core'
 import { setSurfaceRaycastLayers, useViewer } from '@pascal-app/viewer'
-import { type Camera, type Object3D, Raycaster, Vector3 } from 'three'
+import { type Camera, type Object3D, type Ray, Raycaster, Vector3 } from 'three'
 import { resolveTerrainGroundHit } from '../../../lib/ground-surface'
 import { scopeNodeId } from '../../../lib/interaction/scope'
 import useInteractionScope from '../../../store/use-interaction-scope'
@@ -79,16 +79,22 @@ export type PointerSupportSurface = {
 export function resolvePointerSupportSurface(
   camera: Camera,
   worldHit: readonly [number, number, number],
-  options?: { includeNodeTopSurfaces?: boolean },
+  options?: { includeNodeTopSurfaces?: boolean; pointerRay?: Ray },
 ): PointerSupportSurface | null {
   const levelId = useViewer.getState().selection.levelId
   if (!levelId) return null
 
   // The world ray, kept before the level conversion below: the terrain field is
   // world-space (site geometry, not level-local), so the march needs this frame.
-  camera.getWorldPosition(worldRayOrigin)
+  if (options?.pointerRay) worldRayOrigin.copy(options.pointerRay.origin)
+  else camera.getWorldPosition(worldRayOrigin)
+  const isOrthographic =
+    !options?.pointerRay &&
+    (camera as Camera & { isOrthographicCamera?: boolean }).isOrthographicCamera === true
   const cameraToHit = hitScratch.set(worldHit[0], worldHit[1], worldHit[2]).sub(worldRayOrigin)
-  if ((camera as Camera & { isOrthographicCamera?: boolean }).isOrthographicCamera) {
+  if (options?.pointerRay) {
+    worldRayDirection.copy(options.pointerRay.direction).normalize()
+  } else if (isOrthographic) {
     // For an orthographic camera every screen pixel has the same direction. The
     // hit point is offset from the camera along the view plane, so using
     // `camera.position -> hit` tilts the ray toward the screen centre and makes
@@ -102,7 +108,13 @@ export function resolvePointerSupportSurface(
   }
 
   originScratch.copy(worldRayOrigin)
-  hitScratch.set(worldHit[0], worldHit[1], worldHit[2])
+  // Second world point defining the ray fed to the surface solve. In the plain
+  // perspective case `worldHit` already lies on the true pointer ray, so using
+  // it keeps `t === 1` (and the returned plan point exact) whenever the pointed
+  // surface IS the event plane — the pointer-ray and orthographic branches have
+  // no such hit, so they step one unit along the resolved direction.
+  if (options?.pointerRay || isOrthographic) hitScratch.copy(worldRayOrigin).add(worldRayDirection)
+  else hitScratch.set(worldHit[0], worldHit[1], worldHit[2])
   // Slab polygons/elevations live in the level frame; the level mesh
   // carries the storey Y offset and any building rotation.
   const levelMesh = sceneRegistry.nodes.get(levelId as AnyNodeId)

package/src/components/tools/shared/surface-rejection.test.tsx

@@ -3,12 +3,12 @@ import {
   type AnyNode,
   ItemNode,
   nodeRegistry,
-  registerNode,
   resolveSurfacePlacement,
   type SceneApi,
   type SurfaceProvider,
   type SurfaceRejectReason,
 } from '@pascal-app/core'
+import { registerHostingTestNode } from '../__fixtures__/hosting'
 import { createSurfaceRejectionFeedback } from './surface-rejection'
 
 let restore: () => void
@@ -27,7 +27,7 @@ for (const reason of [
   'no-surface',
   'invalid-hit',
 ] as const) {
-  test(`${reason} remains available from onReject without user-facing text`, () => {
+  test(`${reason}: eligible-host diagnostics remain available; ineligible hosts defer silently`, () => {
     const provider: SurfaceProvider = {
       childFrame: 'host-local',
       resolveHit: () =>
@@ -56,7 +56,7 @@ for (const reason of [
             },
       accepts: () => reason !== 'child-not-accepted',
     }
-    registerNode({
+    registerHostingTestNode({
       kind: 'test-host',
       schemaVersion: 1,
       schema: ItemNode,
@@ -75,6 +75,7 @@ for (const reason of [
           type: reason === 'host-not-eligible' ? 'guide' : 'test-host',
         } as unknown as AnyNode,
         childKind: 'item',
+        childId: 'item_existing',
         childFootprint: {
           size: reason === 'footprint-outside-surface' ? [3, 1, 3] : [0.3, 0.3, 0.3],
           rotationY: 0,
@@ -87,7 +88,7 @@ for (const reason of [
         onReject: (r) => feedback.reject(r),
       }),
     ).toBeNull()
-    expect(feedback.reason).toBe(reason)
+    expect(feedback.reason).toBe(reason === 'host-not-eligible' ? null : reason)
   })
 }
 

package/src/components/tools/shared/surface-rejection.tsx

@@ -27,3 +27,17 @@ export function createSurfaceRejectionFeedback(
     },
   }
 }
+
+// R3F reuses one native event across enter/move dispatch and bubbled ancestor hits.
+export function createSurfaceEventOwnership() {
+  const owners = new WeakMap<object, string>()
+  return {
+    allows(hostId: string, event: object) {
+      const owner = owners.get(event)
+      return owner === undefined || owner === hostId
+    },
+    claim(hostId: string, event: object) {
+      if (!owners.has(event)) owners.set(event, hostId)
+    },
+  }
+}

package/src/components/tools/tool-manager.tsx

@@ -13,6 +13,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { type ComponentType, lazy, Suspense, useMemo } from 'react'
 import { useRegisteredToolEnabled } from '../../hooks/use-registered-tool-enabled'
+import type { ReshapeKind } from '../../lib/interaction/scope'
 import { siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
 import useEditor, { type Phase, type Tool } from '../../store/use-editor'
 import useInteractionScope, {
@@ -33,7 +34,10 @@ import { WallSnapBeaconLayer } from '../editor/wall-snap-beacon-layer'
 import { ElevatorTool } from './elevator/elevator-tool'
 import { MoveTool } from './item/move-tool'
 import { RegistryToolProvider } from './registry-tool-context'
-import { getRegistryAffordanceTool } from './shared/affordance-dispatch'
+import {
+  getRegistryAffordanceTool,
+  preloadRegistryAffordanceTools,
+} from './shared/affordance-dispatch'
 import { FacingPoseIndicator } from './shared/facing-pose-indicator'
 import { SiteBoundaryEditor } from './site/site-boundary-editor'
 import { TerrainSculptTool } from './site/terrain-sculpt-tool'
@@ -44,6 +48,15 @@ import { ZoneTool } from './zone/zone-tool'
 // Cache lazy tool components keyed by their loader so React.lazy isn't
 // re-invoked across renders.
 const lazyToolCache = new WeakMap<() => Promise<unknown>, ComponentType>()
+// Reshapes with their own arm below; anything else resolves by name.
+const DEDICATED_RESHAPES = new Set<ReshapeKind>([
+  'curve',
+  'hole',
+  'endpoint',
+  'boundary',
+  'control-point',
+  'tangent',
+])
 const registryToolPreloadCache = new WeakMap<AnyNodeDefinition, Promise<void>>()
 
 export function preloadRegistryToolModules(tool: string | null): Promise<void> {
@@ -60,8 +73,7 @@ export function preloadRegistryToolModules(tool: string | null): Promise<void> {
   if (def.system) loaders.push(def.system.module)
   if (def.parametrics?.customPanel) loaders.push(def.parametrics.customPanel)
   if (def.parametrics?.trailingSection) loaders.push(def.parametrics.trailingSection)
-  const moveTool = def.affordanceTools?.move
-  if (moveTool) loaders.push(moveTool)
+  loaders.push(() => preloadRegistryAffordanceTools(tool))
 
   const preload = Promise.allSettled(loaders.map((loader) => loader())).then(() => undefined)
   registryToolPreloadCache.set(def, preload)
@@ -114,6 +126,11 @@ export const ToolManager: React.FC = () => {
   const tangentReshape = useTangentReshape()
   const isCurveReshape = useIsCurveReshape()
   const isToolDrivenReshape = useIsToolDrivenReshape()
+  const registryReshape = useInteractionScope((state) =>
+    state.scope.kind === 'reshaping' && !DEDICATED_RESHAPES.has(state.scope.reshape)
+      ? state.scope.reshape
+      : null,
+  )
   const isFloorplanDrivenReshape = useIsFloorplanDrivenReshape()
   const reshapingNode = useReshapingNode()
   // The endpoint affordance tool's `target` is kind-specific
@@ -384,6 +401,22 @@ export const ToolManager: React.FC = () => {
               </Suspense>
             ) : null
           })()}
+        {/* Reshape kinds without an arm above mount the kind's own affordance tool
+            under the reshape's name (`def.affordanceTools[reshape]`, e.g. wall 'split'). */}
+        {isToolDrivenReshape &&
+          reshapingNode &&
+          registryReshape &&
+          (() => {
+            const RegistryAffordance = getRegistryAffordanceTool(
+              reshapingNode.type,
+              registryReshape,
+            )
+            return RegistryAffordance ? (
+              <Suspense fallback={null}>
+                <RegistryAffordance node={reshapingNode} />
+              </Suspense>
+            ) : null
+          })()}
         {showMover && movingNode.type !== 'building' && (
           <MoveTool
             onNodeMoved={handlePlacedNodeSelected}

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

@@ -1,20 +1,9 @@
 'use client'
 
-import {
-  type AnyNodeId,
-  generateSceneMaterialId,
-  type SceneMaterialId,
-  toSceneMaterialRef,
-  useScene,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { type SceneMaterialId } from '@pascal-app/core'
 import { Eraser, Plus, RotateCcw } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import {
-  buildResetSurfaceMaterialUpdates,
-  resolvePaintTargetFromSelection,
-} from './../../../lib/material-paint'
-import useEditor from './../../../store/use-editor'
+import { useState } from 'react'
+import { useMaterialPaintPanelModel } from '../../../lib/material-paint-panel-model'
 import { Button } from '../primitives/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip'
 import { MaterialPicker } from './material-picker'
@@ -33,57 +22,9 @@ export type MaterialPaintPanelProps = {
 }
 
 export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPanelProps) {
-  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
-  const activePaintTarget = useEditor((state) => state.activePaintTarget)
-  const armMaterialPaint = useEditor((state) => state.armMaterialPaint)
-  const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
-  const paintEraser = useEditor((state) => state.paintEraser)
-  const setPaintEraser = useEditor((state) => state.setPaintEraser)
-  // Id of a just-created scene material whose inline editor should open on mount.
+  const { activePaintMaterial, paintEraser, setPaintEraser, canResetSelection, resetSelection, materialCount, selectMaterial, createCustomMaterial: createMaterial } = useMaterialPaintPanelModel()
   const [autoEditMaterialId, setAutoEditMaterialId] = useState<SceneMaterialId | null>(null)
-  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 =
-    selectedNode != null && resolvePaintTargetFromSelection({ nodes, selectedId }) != null
-
-  useEffect(() => {
-    const selectedPaintTarget = resolvePaintTargetFromSelection({ nodes, selectedId })
-    if (selectedPaintTarget) {
-      setActivePaintTarget(selectedPaintTarget)
-    }
-  }, [nodes, selectedId, setActivePaintTarget])
-
-  const resetSelection = () => {
-    if (!selectedNode) return
-    useScene.getState().updateNodes(buildResetSurfaceMaterialUpdates(nodes, selectedNode))
-  }
-
-  // Create a blank custom scene material, select it as the brush (`scene:` ref so
-  // edits propagate), and open its inline editor. Available from any category.
-  const createCustomMaterial = () => {
-    const id = generateSceneMaterialId()
-    const count = Object.keys(useScene.getState().materials).length
-    useScene.getState().addSceneMaterial({
-      id,
-      name: `Material ${count + 1}`,
-      material: {
-        preset: 'custom',
-        properties: {
-          color: '#ffffff',
-          roughness: 0.5,
-          metalness: 0,
-          opacity: 1,
-          transparent: false,
-          side: 'front',
-        },
-      },
-    })
-    armMaterialPaint({ materialPreset: toSceneMaterialRef(id), sourceTarget: activePaintTarget })
-    setAutoEditMaterialId(id)
-  }
+  const createCustomMaterial = () => setAutoEditMaterialId(createMaterial())
 
   return (
     <div className="flex h-full min-h-0 w-full flex-col">
@@ -117,9 +58,7 @@ export function MaterialPaintPanel({ onCreateMaterialRequest }: MaterialPaintPan
       <div className="min-h-0 flex-1" data-guide-target="paint-material">
         <MaterialPicker
           onCreateMaterialRequest={onCreateMaterialRequest}
-          onSelectMaterialPreset={(materialPreset) => {
-            armMaterialPaint({ materialPreset, sourceTarget: activePaintTarget })
-          }}
+          onSelectMaterialPreset={selectMaterial}
           selectedMaterialPreset={activePaintMaterial?.materialPreset}
         />
       </div>

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

@@ -1,23 +1,11 @@
 'use client'
 
-import {
-  getCatalogMaterialById,
-  getDynamicLibraryMaterials,
-  getLibraryMaterialIdFromRef,
-  getLibraryMaterialsVersion,
-  getMaterialsForCategory,
-  MATERIAL_CATEGORIES,
-  type MaterialCatalogItem,
-  type MaterialSource,
-  type MaterialTarget,
-  subscribeLibraryMaterials,
-  toLibraryMaterialRef,
-} from '@pascal-app/core'
+import { type MaterialTarget, toLibraryMaterialRef } from '@pascal-app/core'
 import { Plus } from 'lucide-react'
-import { useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { useMaterialCatalogModel, type MaterialSourceFilter } from '../../../lib/material-catalog-model'
 import { triggerSFX } from '../../../lib/sfx-bus'
 
-export type MaterialSourceFilter = MaterialSource
+export type { MaterialSourceFilter } from '../../../lib/material-catalog-model'
 
 export type MaterialPickerProps = {
   selectedMaterialPreset?: string
@@ -28,23 +16,10 @@ export type MaterialPickerProps = {
   onCreateMaterialRequest?: () => void
 }
 
-// No 'All': the browse surfaces (Items / Rooms / Build) dropped it and default
-// to the Pascal library — the combined list buried the curated set.
-const SOURCE_FILTERS: { id: MaterialSourceFilter; label: string }[] = [
-  { id: 'pascal', label: 'Pascal' },
-  { id: 'mine', label: 'Mine' },
-  { id: 'workspace', label: 'Workspace' },
-  { id: 'community', label: 'Community' },
-]
-
-function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
+function getCategoryLabel(category: string) {
   return category.charAt(0).toUpperCase() + category.slice(1)
 }
 
-function filterBySource(items: MaterialCatalogItem[], filter: MaterialSourceFilter) {
-  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
@@ -57,40 +32,7 @@ export function MaterialPicker({
   disabled = false,
   onCreateMaterialRequest,
 }: MaterialPickerProps) {
-  const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
-    MATERIAL_CATEGORIES[0],
-  )
-  const [sourceFilter, setSourceFilter] = useState<MaterialSourceFilter>('pascal')
-  // 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(() => {
-    const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? undefined
-    const entry = getCatalogMaterialById(catalogId)
-    if (entry?.category) setSelectedCategory(entry.category)
-  }, [selectedMaterialPreset])
-
-  const handleCatalogSelect = (materialId: string) => {
-    if (disabled) return
-    onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
-  }
+  const { selectedCategory, setSelectedCategory, sourceFilter, setSourceFilter, visibleSourceFilters, availableCategories, catalogItems, select: handleCatalogSelect } = useMaterialCatalogModel(selectedMaterialPreset, onSelectMaterialPreset, disabled)
 
   return (
     <div
@@ -108,10 +50,6 @@ export function MaterialPicker({
             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"
           >