@pascal-app/editor 0.8.0 → 0.9.1

package/src/components/ui/action-menu/structure-tools.tsx

@@ -1,15 +1,4 @@
-'use client'
-
-import NextImage from 'next/image'
-import { useContextualTools } from '../../../hooks/use-contextual-tools'
-
-import { cn } from '../../../lib/utils'
-import useEditor, {
-  type CatalogCategory,
-  type StructureTool,
-  type Tool,
-} from '../../../store/use-editor'
-import { ActionButton } from './action-button'
+import type { CatalogCategory, StructureTool } from '../../../store/use-editor'
 
 export type ToolConfig = {
   id: StructureTool
@@ -18,86 +7,22 @@ export type ToolConfig = {
   catalogCategory?: CatalogCategory
 }
 
+// Shared structure-tool metadata (icons + labels). The build palette now lives
+// in the community Build sidebar; this list survives only as the lookup table
+// for cursor/floorplan indicators. Roof-mounted accessories are intentionally
+// absent — they're placed from the roof inspector's "Add element" section.
 export const tools: ToolConfig[] = [
   { id: 'wall', iconSrc: '/icons/wall.png', label: 'Wall' },
-  // { id: 'room', iconSrc: '/icons/room.png', label: 'Room' },
-  // { id: 'custom-room', iconSrc: '/icons/custom-room.png', label: 'Custom Room' },
-  { id: 'slab', iconSrc: '/icons/floor.png', label: 'Slab' },
-  { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
-  { id: 'column', iconSrc: '/icons/column.png', label: 'Column' },
-  { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
-  { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
   { id: 'door', iconSrc: '/icons/door.png', label: 'Door' },
   { id: 'window', iconSrc: '/icons/window.png', label: 'Window' },
+  { id: 'stair', iconSrc: '/icons/stairs.png', label: 'Stairs' },
+  { id: 'roof', iconSrc: '/icons/roof.png', label: 'Gable Roof' },
   { id: 'fence', iconSrc: '/icons/fence.png', label: 'Fence' },
+  { id: 'column', iconSrc: '/icons/column.png', label: 'Column' },
+  { id: 'elevator', iconSrc: '/icons/elevator.png', label: 'Elevator' },
+  { id: 'slab', iconSrc: '/icons/floor.png', label: 'Slab' },
+  { id: 'ceiling', iconSrc: '/icons/ceiling.png', label: 'Ceiling' },
   { id: 'zone', iconSrc: '/icons/zone.png', label: 'Zone' },
-  { id: 'spawn', iconSrc: '/icons/site.png', label: 'Spawn Point' },
+  { id: 'spawn', iconSrc: '/icons/spawn-point.png', label: 'Spawn Point' },
+  { id: 'shelf', iconSrc: '/icons/shelf.png', label: 'Shelf' },
 ]
-
-export function StructureTools() {
-  const activeTool = useEditor((state) => state.tool)
-  const catalogCategory = useEditor((state) => state.catalogCategory)
-  const structureLayer = useEditor((state) => state.structureLayer)
-  const setTool = useEditor((state) => state.setTool)
-  const setCatalogCategory = useEditor((state) => state.setCatalogCategory)
-
-  const contextualTools = useContextualTools()
-
-  // Filter tools based on structureLayer
-  const visibleTools =
-    structureLayer === 'zones'
-      ? tools.filter((t) => t.id === 'zone')
-      : tools.filter((t) => t.id !== 'zone')
-
-  const hasActiveTool = visibleTools.some(
-    (t) =>
-      activeTool === t.id && (t.catalogCategory ? catalogCategory === t.catalogCategory : true),
-  )
-
-  return (
-    <div className="flex items-center gap-1.5 px-1">
-      {visibleTools.map((tool, index) => {
-        // For item tools with catalog category, check both tool and category match
-        const isActive =
-          activeTool === tool.id &&
-          (tool.catalogCategory ? catalogCategory === tool.catalogCategory : true)
-
-        const isContextual = contextualTools.includes(tool.id)
-
-        return (
-          <ActionButton
-            className={cn(
-              'rounded-lg duration-300',
-              isActive
-                ? 'z-10 scale-110 bg-black/40 hover:bg-black/40'
-                : 'scale-95 bg-transparent opacity-60 grayscale hover:bg-black/20 hover:opacity-100 hover:grayscale-0',
-            )}
-            key={`${tool.id}-${tool.catalogCategory ?? index}`}
-            label={tool.label}
-            onClick={() => {
-              if (!isActive) {
-                setTool(tool.id)
-                setCatalogCategory(tool.catalogCategory ?? null)
-
-                // Automatically switch to build mode if we select a tool
-                if (useEditor.getState().mode !== 'build') {
-                  useEditor.getState().setMode('build')
-                }
-              }
-            }}
-            size="icon"
-            variant="ghost"
-          >
-            <NextImage
-              alt={tool.label}
-              className="size-full object-contain"
-              height={28}
-              src={tool.iconSrc}
-              width={28}
-            />
-          </ActionButton>
-        )
-      })}
-    </div>
-  )
-}

package/src/components/ui/action-menu/view-toggles.tsx

@@ -13,6 +13,7 @@ import { useViewer } from '@pascal-app/viewer'
 import { Check, ChevronDown, Eye, EyeOff, Layers2, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { getLevelDisplayName } from '../../../lib/level-name'
 import { createLocalGuideImage } from '../../../lib/local-guide-image'
 import { cn } from '../../../lib/utils'
 import useEditor, { type GridSnapStep } from '../../../store/use-editor'
@@ -84,10 +85,6 @@ function useLowerReferenceLevels(): LevelNode[] {
   )
 }
 
-function getLevelDisplayName(level: LevelNode) {
-  return level.name || `Level ${level.level}`
-}
-
 // ── Shared upload button for dropdowns ──────────────────────────────────────
 
 function UploadButton({ onError }: { onError: (message: string | null) => void }) {
@@ -593,6 +590,247 @@ function ScansControl() {
   )
 }
 
+// ── References (merged scans + guides) ──────────────────────────────────────
+// Bottom-bar control that folds the separate Scans and Guides toggles into one
+// "References" split button + a popover holding both, each with its own
+// visibility toggle, upload, and per-item opacity/delete.
+
+function ReferenceListSection({
+  title,
+  iconSrc,
+  noun,
+  emptyText,
+  nodes,
+  show,
+  setShow,
+  onError,
+}: {
+  title: string
+  iconSrc: string
+  noun: string
+  emptyText: string
+  nodes: (GuideNode | ScanNode)[]
+  show: boolean
+  setShow: (show: boolean) => void
+  onError: (message: string | null) => void
+}) {
+  const setSelection = useViewer((state) => state.setSelection)
+  const updateNode = useScene((state) => state.updateNode)
+  const deleteNode = useScene((state) => state.deleteNode)
+  const selectedReferenceId = useEditor((state) => state.selectedReferenceId)
+  const setSelectedReferenceId = useEditor((state) => state.setSelectedReferenceId)
+  const hasItems = nodes.length > 0
+
+  const handleSelect = useCallback(
+    (id: AnyNodeId) => {
+      setShow(true)
+      setSelectedReferenceId(id)
+      setSelection({ selectedIds: [], zoneId: null })
+    },
+    [setShow, setSelectedReferenceId, setSelection],
+  )
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-background/80">
+          <img alt="" className="h-4 w-4 object-contain" src={iconSrc} />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="font-medium text-foreground text-sm">{title}</p>
+          {hasItems && (
+            <p className="text-muted-foreground text-xs">
+              {nodes.length} {noun}
+              {nodes.length !== 1 ? 's' : ''} on this level
+            </p>
+          )}
+        </div>
+        <button
+          aria-label={show ? `Hide ${title.toLowerCase()}` : `Show ${title.toLowerCase()}`}
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border/40 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
+          onClick={() => setShow(!show)}
+          type="button"
+        >
+          {show ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+        </button>
+        <UploadButton onError={onError} />
+      </div>
+
+      {hasItems ? (
+        <div className="max-h-40 space-y-2 overflow-y-auto pr-1">
+          {nodes.map((node, index) => (
+            <div
+              className={cn(
+                'group/item space-y-2 rounded-xl border bg-background/75 p-2.5 transition-colors',
+                selectedReferenceId === node.id
+                  ? 'border-foreground/35 bg-white/10'
+                  : 'border-border/45',
+              )}
+              key={node.id}
+            >
+              <div className="flex min-w-0 items-center gap-2">
+                <button
+                  className="flex min-w-0 flex-1 items-center gap-2 text-left"
+                  onClick={() => handleSelect(node.id)}
+                  type="button"
+                >
+                  <img
+                    alt=""
+                    className="h-3.5 w-3.5 shrink-0 object-contain opacity-70"
+                    src={iconSrc}
+                  />
+                  <p className="truncate font-medium text-foreground text-sm">
+                    {node.name || `${noun.charAt(0).toUpperCase()}${noun.slice(1)} ${index + 1}`}
+                  </p>
+                  {selectedReferenceId === node.id && (
+                    <Check className="ml-auto h-3.5 w-3.5 shrink-0 text-foreground/80" />
+                  )}
+                </button>
+                <button
+                  aria-label={`Delete ${noun}`}
+                  className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-muted-foreground/50 opacity-0 transition-all hover:bg-destructive/10 hover:text-destructive group-hover/item:opacity-100"
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    deleteNode(node.id)
+                    if (selectedReferenceId === node.id) {
+                      setSelectedReferenceId(null)
+                    }
+                  }}
+                  type="button"
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+              <SliderControl
+                label="Opacity"
+                max={100}
+                min={0}
+                onChange={(value) =>
+                  updateNode(node.id, { opacity: Math.round(Math.min(100, Math.max(0, value))) })
+                }
+                precision={0}
+                step={1}
+                unit="%"
+                value={node.opacity}
+              />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-xl border border-border/45 border-dashed bg-background/60 px-3 py-3 text-muted-foreground text-sm">
+          {emptyText}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ReferencesControl() {
+  const showScans = useViewer((state) => state.showScans)
+  const setShowScans = useViewer((state) => state.setShowScans)
+  const showGuides = useViewer((state) => state.showGuides)
+  const setShowGuides = useViewer((state) => state.setShowGuides)
+  const [isOpen, setIsOpen] = useState(false)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+
+  const scans = useLevelScans()
+  const guides = useLevelGuides()
+  const total = scans.length + guides.length
+  const anyVisible = showScans || showGuides
+
+  const toggleAll = useCallback(() => {
+    const next = !anyVisible
+    setShowScans(next)
+    setShowGuides(next)
+  }, [anyVisible, setShowScans, setShowGuides])
+
+  return (
+    <Popover onOpenChange={setIsOpen} open={isOpen}>
+      <div className="flex items-center">
+        <ActionButton
+          className={cn(
+            'rounded-r-none p-0',
+            anyVisible
+              ? 'bg-white/15'
+              : 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0',
+          )}
+          label={`References: ${anyVisible ? 'Visible' : 'Hidden'}`}
+          onClick={toggleAll}
+          size="icon"
+          variant="ghost"
+        >
+          <div className="relative">
+            <img
+              alt="References"
+              className="h-[28px] w-[28px] object-contain"
+              src="/icons/floorplan.png"
+            />
+            <span className="absolute -right-1.5 -bottom-1 min-w-[14px] rounded-full bg-white/20 px-[3px] text-center font-medium text-[9px] text-white/70 leading-[14px]">
+              {total}
+            </span>
+          </div>
+        </ActionButton>
+
+        <PopoverTrigger asChild>
+          <button
+            aria-expanded={isOpen}
+            aria-label="Reference settings"
+            className={cn(
+              'flex h-11 w-6 items-center justify-center rounded-r-lg transition-colors',
+              anyVisible
+                ? isOpen
+                  ? 'bg-white/10'
+                  : 'bg-white/5 hover:bg-white/8'
+                : isOpen
+                  ? 'bg-white/8'
+                  : 'opacity-60 hover:bg-white/5 hover:opacity-100',
+            )}
+            type="button"
+          >
+            <ChevronDown className={cn('h-3 w-3 transition-transform', isOpen && 'rotate-180')} />
+          </button>
+        </PopoverTrigger>
+      </div>
+
+      <PopoverContent
+        align="center"
+        className="w-72 rounded-xl border-border/45 bg-background/96 p-3 shadow-elevation-3 backdrop-blur-xl"
+        side="top"
+        sideOffset={14}
+      >
+        <div className="space-y-3">
+          {uploadError && (
+            <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-2.5 py-2 text-destructive text-xs">
+              {uploadError}
+            </div>
+          )}
+          <ReferenceListSection
+            emptyText="No scans on this level yet."
+            iconSrc="/icons/mesh.png"
+            nodes={scans}
+            noun="scan"
+            onError={setUploadError}
+            setShow={setShowScans}
+            show={showScans}
+            title="Scans"
+          />
+          <div className="h-px bg-border/45" />
+          <ReferenceListSection
+            emptyText="No guide images on this level yet."
+            iconSrc="/icons/floorplan.png"
+            nodes={guides}
+            noun="guide image"
+            onError={setUploadError}
+            setShow={setShowGuides}
+            show={showGuides}
+            title="Guide images"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
 // ── Reference floor control ────────────────────────────────────────────────────────────────────
 
 function ReferenceFloorControl() {
@@ -756,8 +994,7 @@ export { GridSnapControl }
 export function SecondaryToggles() {
   return (
     <div className="flex items-center gap-1">
-      <ScansControl />
-      <GuidesControl />
+      <ReferencesControl />
     </div>
   )
 }

package/src/components/ui/command-palette/editor-commands.tsx

@@ -27,6 +27,7 @@ import {
   PencilLine,
   Plus,
   Redo2,
+  Sparkles,
   Square,
   SquareStack,
   Sun,
@@ -190,8 +191,11 @@ export function EditorCommands() {
             const { nodes } = useScene.getState()
             const building = Object.values(nodes).find((n) => n.type === 'building')
             if (!building) return
+            const levelCount = building.children.filter(
+              (childId) => nodes[childId as keyof typeof nodes]?.type === 'level',
+            ).length
             const newLevel = LevelNode.parse({
-              level: building.children.length,
+              level: levelCount,
               children: [],
               parentId: building.id,
             })
@@ -278,19 +282,20 @@ export function EditorCommands() {
           }),
       },
       {
-        id: 'editor.viewer.theme',
-        label: () => {
-          const theme = useViewer.getState().theme
-          return theme === 'dark' ? 'Switch to Light Theme' : 'Switch to Dark Theme'
-        },
+        id: 'editor.viewer.shading-solid',
+        label: 'Switch to Solid',
         group: 'Viewer Controls',
-        icon: <Sun className="h-4 w-4" />, // icon is static; label conveys the action
-        keywords: ['theme', 'dark', 'light', 'appearance', 'color'],
-        execute: () =>
-          run(() => {
-            const { theme, setTheme } = useViewer.getState()
-            setTheme(theme === 'dark' ? 'light' : 'dark')
-          }),
+        icon: <Box className="h-4 w-4" />,
+        keywords: ['solid', 'shading', 'render', 'mode', 'performance'],
+        execute: () => run(() => useViewer.getState().setShading('solid')),
+      },
+      {
+        id: 'editor.viewer.shading-rendered',
+        label: 'Switch to Rendered',
+        group: 'Viewer Controls',
+        icon: <Sparkles className="h-4 w-4" />,
+        keywords: ['rendered', 'shading', 'render', 'mode', 'quality'],
+        execute: () => run(() => useViewer.getState().setShading('rendered')),
       },
       {
         id: 'editor.viewer.camera-snapshot',

package/src/components/ui/command-palette/index.tsx

@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import { Dialog, DialogContent, DialogTitle } from './../../../components/ui/primitives/dialog'
+import { getLevelDisplayName } from '../../../lib/level-name'
 import { useCommandRegistry } from '../../../store/use-command-registry'
 import { usePaletteViewRegistry } from '../../../store/use-palette-view-registry'
 
@@ -404,7 +405,7 @@ export function CommandPalette({ emptyAction }: { emptyAction?: CommandPaletteEm
                     <OptionItem
                       isActive={level.id === activeLevelId}
                       key={level.id}
-                      label={level.name ?? `Level ${level.level}`}
+                      label={getLevelDisplayName(level)}
                       onSelect={() =>
                         run(() => useViewer.getState().setSelection({ levelId: level.id }))
                       }

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

@@ -0,0 +1,83 @@
+'use client'
+
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Eraser, RotateCcw } from 'lucide-react'
+import { useEffect } from 'react'
+import {
+  buildResetSurfaceMaterialUpdates,
+  resolvePaintTargetFromSelection,
+} from './../../../lib/material-paint'
+import useEditor from './../../../store/use-editor'
+import { Button } from '../primitives/button'
+import { MaterialPicker } from './material-picker'
+
+/**
+ * Material picker for paint mode. Embedders render this wherever paint controls
+ * belong (the community editor places it in the Build sidebar while paint mode
+ * is active). It owns the paint-target/material wiring so the host only needs
+ * to mount it; it fills its container's width.
+ */
+export function MaterialPaintPanel() {
+  const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
+  const activePaintTarget = useEditor((state) => state.activePaintTarget)
+  const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
+  const setActivePaintTarget = useEditor((state) => state.setActivePaintTarget)
+  const paintEraser = useEditor((state) => state.paintEraser)
+  const setPaintEraser = useEditor((state) => state.setPaintEraser)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const nodes = useScene((state) => state.nodes)
+  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))
+  }
+
+  return (
+    <div className="w-full space-y-2">
+      <div className="flex items-center gap-2">
+        <Button
+          aria-pressed={paintEraser}
+          className="flex-1"
+          onClick={() => setPaintEraser(!paintEraser)}
+          size="sm"
+          variant={paintEraser ? 'default' : 'outline'}
+        >
+          <Eraser />
+          Erase
+        </Button>
+        <Button
+          className="flex-1"
+          disabled={!canResetSelection}
+          onClick={resetSelection}
+          size="sm"
+          variant="outline"
+        >
+          <RotateCcw />
+          Reset all
+        </Button>
+      </div>
+      <MaterialPicker
+        onChange={(material) => {
+          setActivePaintMaterial({ material, sourceTarget: activePaintTarget })
+        }}
+        onSelectMaterialPreset={(materialPreset) => {
+          setActivePaintMaterial({ materialPreset, sourceTarget: activePaintTarget })
+        }}
+        selectedMaterialPreset={activePaintMaterial?.materialPreset}
+        value={activePaintMaterial?.material}
+      />
+    </div>
+  )
+}

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

@@ -4,7 +4,6 @@ import {
   getCatalogMaterialById,
   getLibraryMaterialIdFromRef,
   getMaterialsForCategory,
-  getMaterialsForTarget,
   MATERIAL_CATEGORIES,
   type MaterialSchema,
   type MaterialTarget,
@@ -23,6 +22,11 @@ type MaterialPickerProps = {
   hideSideControl?: boolean
 }
 
+function getCategoryLabel(category: (typeof MATERIAL_CATEGORIES)[number]) {
+  if (category === 'roof') return 'Roofing'
+  return category.charAt(0).toUpperCase() + category.slice(1)
+}
+
 export function MaterialPicker({
   value,
   selectedMaterialPreset,
@@ -35,7 +39,6 @@ export function MaterialPicker({
   const [selectedCategory, setSelectedCategory] = useState<(typeof MATERIAL_CATEGORIES)[number]>(
     MATERIAL_CATEGORIES[0],
   )
-  const catalogScrollRef = useRef<HTMLDivElement>(null)
   const categoryScrollRef = useRef<HTMLDivElement>(null)
   const catalogItems =
     selectedCategory === 'other'
@@ -69,27 +72,6 @@ export function MaterialPicker({
     onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
   }
 
-  useEffect(() => {
-    const container = catalogScrollRef.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)
-    }
-  }, [catalogItems.length, onChange, showCustom])
-
   useEffect(() => {
     const container = categoryScrollRef.current
     if (!container) return
@@ -157,20 +139,18 @@ export function MaterialPicker({
                   }}
                   type="button"
                 >
-                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                  {getCategoryLabel(category)}
                 </button>
               ))}
             </div>
           </div>
           <div
-            className="w-full max-w-full overflow-x-auto overflow-y-hidden"
-            ref={catalogScrollRef}
-            style={{ msOverflowStyle: 'none', scrollbarWidth: 'none' }}
+            className="grid gap-1.5 pb-1"
+            style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))' }}
           >
-            <div className="flex min-w-max gap-1.5 pb-1">
-              {catalogItems.map((item) => (
+            {catalogItems.map((item) => (
                 <button
-                  className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-lg border transition-all ${
+                  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'
@@ -196,7 +176,7 @@ export function MaterialPicker({
               ))}
               {selectedCategory === 'other' && onChange ? (
                 <button
-                  className={`flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border font-medium text-[10px] transition-all ${
+                  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'
@@ -208,7 +188,6 @@ export function MaterialPicker({
                   Custom
                 </button>
               ) : null}
-            </div>
           </div>
         </div>
       )}