@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/ui/item-catalog/item-catalog.tsx

@@ -3,7 +3,7 @@
 import type { AssetInput } from '@pascal-app/core'
 import { resolveCdnUrl } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import {
   Tooltip,
   TooltipContent,
@@ -13,207 +13,116 @@ import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
 import { CATALOG_ITEMS } from './catalog-items'
 
-const PLACEMENT_TAGS = new Set(['floor', 'wall', 'ceiling', 'countertop'])
-
-export function ItemCatalog({ category }: { category: CatalogCategory }) {
+export function ItemCatalog({
+  category,
+  items: itemsOverride,
+  activePlacementTag = null,
+  activeFunctionalTag = null,
+  search = '',
+  overrideItems,
+  leadingTile,
+  emptyState,
+}: {
+  category: CatalogCategory
+  items?: AssetInput[]
+  activePlacementTag?: string | null
+  activeFunctionalTag?: string | null
+  search?: string
+  /** When set, bypasses all filtering and displays these items directly (used for server search results) */
+  overrideItems?: AssetInput[]
+  /** Rendered as the first grid cell, always visible when there are items. */
+  leadingTile?: React.ReactNode
+  /** Rendered when there are no items to show. Replaces the empty grid. */
+  emptyState?: React.ReactNode
+}) {
   const selectedItem = useEditor((state) => state.selectedItem)
   const setSelectedItem = useEditor((state) => state.setSelectedItem)
-  const [activePlacementTag, setActivePlacementTag] = useState<string | null>(null)
-  const [activeFunctionalTag, setActiveFunctionalTag] = useState<string | null>(null)
-
-  const categoryItems = CATALOG_ITEMS.filter((item) => item.category === category)
-
-  // Collect tags available in this category
-  const allTags = Array.from(new Set(categoryItems.flatMap((item) => item.tags ?? [])))
-  const placementTags = allTags.filter((t) => PLACEMENT_TAGS.has(t))
-  const functionalTags = allTags.filter((t) => !PLACEMENT_TAGS.has(t))
-  const hasFilters = allTags.length > 1
-
-  // Count items for a placement tag given the current functional filter
-  const placementCount = (tag: string | null) =>
-    categoryItems.filter((item) => {
-      const tags = item.tags ?? []
-      if (tag !== null && !tags.includes(tag)) return false
-      if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
-      return true
-    }).length
+  const setMode = useEditor((state) => state.setMode)
+  const setTool = useEditor((state) => state.setTool)
 
-  // Count items for a functional tag given the current placement filter
-  const functionalCount = (tag: string) =>
-    categoryItems.filter((item) => {
-      const tags = item.tags ?? []
-      if (!tags.includes(tag)) return false
-      if (activePlacementTag && !tags.includes(activePlacementTag)) return false
-      return true
-    }).length
+  const sourceItems = itemsOverride ?? CATALOG_ITEMS
+  // Server-provided results bypass all local filtering; otherwise filter by category/search/tags
+  const filteredItems =
+    overrideItems ??
+    (() => {
+      const categoryItems = search
+        ? sourceItems
+        : sourceItems.filter((item) => item.category === category)
+      return categoryItems.filter((item) => {
+        const tags = item.tags ?? []
+        if (activePlacementTag && !tags.includes(activePlacementTag)) return false
+        if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
+        if (search && !item.name.toLowerCase().includes(search.toLowerCase())) return false
+        return true
+      })
+    })()
 
-  const filteredItems = categoryItems.filter((item) => {
-    const tags = item.tags ?? []
-    if (activePlacementTag && !tags.includes(activePlacementTag)) return false
-    if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
-    return true
-  })
+  const categoryItems = filteredItems
 
   // Auto-select first item if current selection is not in the filtered list
   useEffect(() => {
-    const isCurrentItemInCategory = filteredItems.some((item) => item.src === selectedItem?.src)
-    if (!isCurrentItemInCategory && filteredItems.length > 0) {
-      setSelectedItem(filteredItems[0] as AssetInput)
+    const isCurrentItemInCategory = categoryItems.some((item) => item.src === selectedItem?.src)
+    if (!isCurrentItemInCategory && categoryItems.length > 0) {
+      setSelectedItem(categoryItems[0] as AssetInput)
     }
-  }, [filteredItems, selectedItem?.src, setSelectedItem])
+  }, [categoryItems, selectedItem?.src, setSelectedItem])
 
-  // Get attachment icon based on attachTo type
   const getAttachmentIcon = (attachTo: AssetInput['attachTo']) => {
-    if (attachTo === 'wall' || attachTo === 'wall-side') {
-      return '/icons/wall.png'
-    }
-    if (attachTo === 'ceiling') {
-      return '/icons/ceiling.png'
-    }
+    if (attachTo === 'wall' || attachTo === 'wall-side') return '/icons/wall.png'
+    if (attachTo === 'ceiling') return '/icons/ceiling.png'
     return null
   }
 
-  return (
-    <div className="flex flex-col gap-2">
-      {/* Filter chips */}
-      {hasFilters && (
-        <div className="flex flex-col gap-1.5">
-          {/* Placement row */}
-          {placementTags.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              <button
-                className={cn(
-                  'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs transition-colors',
-                  activePlacementTag === null
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
-                )}
-                onClick={() => setActivePlacementTag(null)}
-                type="button"
-              >
-                All
-              </button>
-              {placementTags.map((tag) => {
-                const count = placementCount(tag)
-                const isActive = activePlacementTag === tag
-                const isEmpty = count === 0 && !isActive
-                return (
-                  <button
-                    className={cn(
-                      'inline-flex cursor-pointer items-center gap-1 rounded-md py-0.5 pr-1.5 pl-2 font-medium text-xs capitalize transition-colors',
-                      isActive
-                        ? 'bg-blue-500 text-white'
-                        : isEmpty
-                          ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
-                          : 'bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200',
-                    )}
-                    disabled={isEmpty}
-                    key={tag}
-                    onClick={() => setActivePlacementTag(isActive ? null : tag)}
-                    type="button"
-                  >
-                    {tag}
-                    <span
-                      className={cn(
-                        'text-[10px]',
-                        isActive ? 'text-blue-200' : isEmpty ? 'text-zinc-600' : 'text-blue-500/70',
-                      )}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
-
-          {/* Functional row */}
-          {functionalTags.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              {functionalTags.map((tag) => {
-                const count = functionalCount(tag)
-                const isActive = activeFunctionalTag === tag
-                const isEmpty = count === 0 && !isActive
-                return (
-                  <button
-                    className={cn(
-                      'inline-flex cursor-pointer items-center gap-1 rounded-md py-0.5 pr-1.5 pl-2 font-medium text-xs capitalize transition-colors',
-                      isActive
-                        ? 'bg-violet-500 text-white'
-                        : isEmpty
-                          ? 'cursor-not-allowed bg-zinc-800 text-zinc-500'
-                          : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
-                    )}
-                    disabled={isEmpty}
-                    key={tag}
-                    onClick={() => setActiveFunctionalTag(isActive ? null : tag)}
-                    type="button"
-                  >
-                    {tag}
-                    <span
-                      className={cn(
-                        'text-[10px]',
-                        isActive
-                          ? 'text-violet-200'
-                          : isEmpty
-                            ? 'text-zinc-600'
-                            : 'text-zinc-500/70',
-                      )}
-                    >
-                      {count}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      )}
+  if (filteredItems.length === 0 && emptyState) {
+    return <>{emptyState}</>
+  }
 
-      {/* Items */}
-      <div className="-mx-2 -my-2 flex max-w-xl gap-2 overflow-x-auto p-2">
-        {filteredItems.map((item, index) => {
-          const isSelected = selectedItem?.src === item?.src
-          const attachmentIcon = getAttachmentIcon(item?.attachTo)
-          return (
-            <Tooltip key={index}>
-              <TooltipTrigger asChild>
-                <button
-                  className={cn(
-                    'relative aspect-square h-14 min-h-14 w-14 min-w-14 shrink-0 flex-col gap-px rounded-lg transition-all duration-200 ease-out hover:scale-105 hover:cursor-pointer',
-                    isSelected && 'ring-2 ring-primary-foreground',
-                  )}
-                  onClick={() => setSelectedItem(item)}
-                  type="button"
-                >
-                  <Image
-                    alt={item.name}
-                    className="rounded-lg object-cover"
-                    fill
-                    loading="eager"
-                    sizes="56px"
-                    src={resolveCdnUrl(item.thumbnail) || ''}
+  return (
+    <div
+      className="grid gap-2"
+      style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(90px, 1fr))' }}
+    >
+      {leadingTile}
+      {filteredItems.map((item, index) => {
+        const isSelected = selectedItem?.src === item?.src
+        const attachmentIcon = getAttachmentIcon(item?.attachTo)
+        return (
+          <button
+            className={cn(
+              '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-2 ring-primary-foreground',
+            )}
+            key={index}
+            onClick={() => {
+              setSelectedItem(item)
+              setTool('item')
+              setMode('build')
+            }}
+            type="button"
+          >
+            <div className="relative aspect-square w-full overflow-hidden rounded-lg">
+              <img
+                alt={item.name}
+                className="h-full w-full object-cover"
+                loading="eager"
+                src={resolveCdnUrl(item.thumbnail) || ''}
+              />
+              {attachmentIcon && (
+                <div className="absolute right-1 bottom-1 flex h-4 w-4 items-center justify-center rounded bg-black/60">
+                  <img
+                    alt={item.attachTo === 'ceiling' ? 'Ceiling attachment' : 'Wall attachment'}
+                    className="h-4 w-4"
+                    src={attachmentIcon}
                   />
-                  {attachmentIcon && (
-                    <div className="absolute right-0.5 bottom-0.5 flex h-4 w-4 items-center justify-center rounded bg-black/60">
-                      <Image
-                        alt={item.attachTo === 'ceiling' ? 'Ceiling attachment' : 'Wall attachment'}
-                        className="h-4 w-4"
-                        height={16}
-                        src={attachmentIcon}
-                        width={16}
-                      />
-                    </div>
-                  )}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent className="text-xs" side="top">
-                {item.name}
-              </TooltipContent>
-            </Tooltip>
-          )
-        })}
-      </div>
+                </div>
+              )}
+            </div>
+            <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
+              {item.name}
+            </span>
+          </button>
+        )
+      })}
     </div>
   )
 }

package/src/components/ui/level-duplicate-dialog.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import type { LevelNode } from '@pascal-app/core'
+import { useEffect, useState } from 'react'
+import type { LevelDuplicatePreset } from '../../lib/level-duplication'
+import { cn } from '../../lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './primitives/dialog'
+
+const DUPLICATE_PRESETS: Array<{
+  id: LevelDuplicatePreset
+  label: string
+  description: string
+}> = [
+  {
+    id: 'everything',
+    label: 'Everything',
+    description: 'Structure, materials, furniture, and references.',
+  },
+  {
+    id: 'structure',
+    label: 'Structure only',
+    description: 'Walls, slabs, roofs, stairs, windows, and doors without finishes.',
+  },
+  {
+    id: 'structure-materials',
+    label: 'Structure + materials',
+    description: 'Structure with the current material and finish assignments.',
+  },
+  {
+    id: 'structure-furniture',
+    label: 'Structure + furniture',
+    description: 'Structure, finishes, and placed items, without guide references.',
+  },
+]
+
+function getLevelLabel(level: LevelNode | null) {
+  if (!level) return 'this level'
+  return level.name || `Level ${level.level}`
+}
+
+export function LevelDuplicateDialog({
+  open,
+  level,
+  onConfirm,
+  onOpenChange,
+}: {
+  open: boolean
+  level: LevelNode | null
+  onConfirm: (preset: LevelDuplicatePreset) => void
+  onOpenChange: (open: boolean) => void
+}) {
+  const [preset, setPreset] = useState<LevelDuplicatePreset>('everything')
+
+  useEffect(() => {
+    if (open) {
+      setPreset('everything')
+    }
+  }, [open])
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="sm:max-w-md" showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>Duplicate Level</DialogTitle>
+          <DialogDescription>Choose what to copy from {getLevelLabel(level)}.</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-2">
+          {DUPLICATE_PRESETS.map((option) => (
+            <button
+              className={cn(
+                'cursor-pointer rounded-xl border px-3 py-3 text-left transition-colors',
+                preset === option.id
+                  ? 'border-primary bg-primary/10 text-foreground'
+                  : 'border-border bg-background hover:bg-accent/40',
+              )}
+              key={option.id}
+              onClick={() => setPreset(option.id)}
+              type="button"
+            >
+              <div className="font-medium text-sm">{option.label}</div>
+              <div className="mt-1 text-muted-foreground text-xs">{option.description}</div>
+            </button>
+          ))}
+        </div>
+
+        <DialogFooter>
+          <button
+            className="cursor-pointer rounded-md px-4 py-2 text-muted-foreground text-sm transition-colors hover:bg-accent"
+            onClick={() => onOpenChange(false)}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="cursor-pointer rounded-md bg-primary px-4 py-2 text-primary-foreground text-sm transition-opacity hover:opacity-90"
+            onClick={() => onConfirm(preset)}
+            type="button"
+          >
+            Duplicate
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/ui/panels/ceiling-panel.tsx

@@ -1,13 +1,12 @@
 'use client'
 
-import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
+import { type AnyNode, type CeilingNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Edit, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
-import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
@@ -32,20 +31,6 @@ export function CeilingPanel() {
     [selectedId, updateNode],
   )
 
-  const handleMaterialChange = useCallback(
-    (material: MaterialSchema) => {
-      handleUpdate({ material, materialPreset: undefined })
-    },
-    [handleUpdate],
-  )
-
-  const handleMaterialPresetChange = useCallback(
-    (materialPreset: string) => {
-      handleUpdate({ materialPreset, material: undefined })
-    },
-    [handleUpdate],
-  )
-
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
     setEditingHole(null)
@@ -135,9 +120,8 @@ export function CeilingPanel() {
     const n = polygon.length
     for (let i = 0; i < n; i++) {
       const j = (i + 1) % n
-      const current = polygon[i]
-      const next = polygon[j]
-      if (!(current && next)) continue
+      const current = polygon[i]!
+      const next = polygon[j]!
       area += current[0] * next[1]
       area -= next[0] * current[1]
     }
@@ -257,15 +241,6 @@ export function CeilingPanel() {
         </div>
       </PanelSection>
 
-      <PanelSection title="Material">
-        <MaterialPicker
-          nodeType="ceiling"
-          onChange={handleMaterialChange}
-          onSelectMaterialPreset={handleMaterialPresetChange}
-          selectedMaterialPreset={node.materialPreset}
-          value={node.material}
-        />
-      </PanelSection>
       <ActionGroup>
         <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
       </ActionGroup>