@pascal-app/editor 0.7.0 → 0.8.0

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

@@ -13,13 +13,53 @@ import { cn } from './../../../lib/utils'
 import useEditor, { type CatalogCategory } from './../../../store/use-editor'
 import { CATALOG_ITEMS } from './catalog-items'
 
-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 setMode = useEditor((state) => state.setMode)
+  const setTool = useEditor((state) => state.setTool)
 
-  const categoryItems = CATALOG_ITEMS.filter((item) => item.category === category)
+  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
+      })
+    })()
 
-  // Auto-select first item if current selection is not in this category
+  const categoryItems = filteredItems
+
+  // Auto-select first item if current selection is not in the filtered list
   useEffect(() => {
     const isCurrentItemInCategory = categoryItems.some((item) => item.src === selectedItem?.src)
     if (!isCurrentItemInCategory && categoryItems.length > 0) {
@@ -27,58 +67,60 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
     }
   }, [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
   }
 
+  if (filteredItems.length === 0 && emptyState) {
+    return <>{emptyState}</>
+  }
+
   return (
-    <div className="-mx-2 -my-2 flex max-w-xl gap-2 overflow-x-auto p-2">
-      {categoryItems.map((item, index) => {
+    <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 (
-          <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) || ''}
-                />
-                {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">
+          <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}
+                  />
+                </div>
+              )}
+            </div>
+            <span className="truncate px-0.5 text-left font-medium text-[11px] text-muted-foreground group-hover:text-foreground">
               {item.name}
-            </TooltipContent>
-          </Tooltip>
+            </span>
+          </button>
         )
       })}
     </div>

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

@@ -2,8 +2,8 @@
 
 import type { LevelNode } from '@pascal-app/core'
 import { useEffect, useState } from 'react'
-import { cn } from '../../lib/utils'
 import type { LevelDuplicatePreset } from '../../lib/level-duplication'
+import { cn } from '../../lib/utils'
 import {
   Dialog,
   DialogContent,
@@ -69,9 +69,7 @@ export function LevelDuplicateDialog({
       <DialogContent className="sm:max-w-md" showCloseButton={false}>
         <DialogHeader>
           <DialogTitle>Duplicate Level</DialogTitle>
-          <DialogDescription>
-            Choose what to copy from {getLevelLabel(level)}.
-          </DialogDescription>
+          <DialogDescription>Choose what to copy from {getLevelLabel(level)}.</DialogDescription>
         </DialogHeader>
 
         <div className="grid gap-2">
@@ -95,7 +93,7 @@ export function LevelDuplicateDialog({
 
         <DialogFooter>
           <button
-            className="cursor-pointer rounded-md px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent"
+            className="cursor-pointer rounded-md px-4 py-2 text-muted-foreground text-sm transition-colors hover:bg-accent"
             onClick={() => onOpenChange(false)}
             type="button"
           >

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

@@ -120,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]
     }

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

@@ -70,10 +70,12 @@ const COLUMN_PROPORTION_PRESETS = {
 
 type ColumnProportionPresetId = keyof typeof COLUMN_PROPORTION_PRESETS
 
-const COLUMN_PROPORTION_OPTIONS = Object.entries(COLUMN_PROPORTION_PRESETS).map(([value, preset]) => ({
-  value: value as ColumnProportionPresetId,
-  label: preset.label,
-}))
+const COLUMN_PROPORTION_OPTIONS = Object.entries(COLUMN_PROPORTION_PRESETS).map(
+  ([value, preset]) => ({
+    value: value as ColumnProportionPresetId,
+    label: preset.label,
+  }),
+)
 
 function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value))
@@ -201,7 +203,12 @@ export function ColumnPanel() {
   const shaftProfile = node.shaftProfile ?? 'straight'
 
   return (
-    <PanelWrapper icon="/icons/column.png" onClose={handleClose} title={node.name || 'Column'} width={300}>
+    <PanelWrapper
+      icon="/icons/column.png"
+      onClose={handleClose}
+      title={node.name || 'Column'}
+      width={300}
+    >
       <PanelSection title="Preset">
         <select
           className={SELECT_CLASS}
@@ -223,7 +230,9 @@ export function ColumnPanel() {
       <PanelSection title="Shape">
         <select
           className={SELECT_CLASS}
-          onChange={(event) => handleUpdate({ crossSection: event.target.value as ColumnNode['crossSection'] })}
+          onChange={(event) =>
+            handleUpdate({ crossSection: event.target.value as ColumnNode['crossSection'] })
+          }
           value={node.crossSection}
         >
           <option value="round">Round</option>
@@ -313,7 +322,9 @@ export function ColumnPanel() {
       <PanelSection title="Shaft">
         <select
           className={SELECT_CLASS}
-          onChange={(event) => handleUpdate(shaftProfileUpdates(event.target.value as ColumnNode['shaftProfile']))}
+          onChange={(event) =>
+            handleUpdate(shaftProfileUpdates(event.target.value as ColumnNode['shaftProfile']))
+          }
           value={shaftProfile}
         >
           <option value="straight">Straight</option>
@@ -487,10 +498,22 @@ export function ColumnPanel() {
                 ? {}
                 : {
                     capitalHeight: Math.max(node.capitalHeight, 0.12),
-                    capitalTierCount: capitalStyle === 'stepped' ? Math.max(node.capitalTierCount ?? 3, 3) : node.capitalTierCount,
-                    capitalWidthScale: Math.max(node.capitalWidthScale ?? 1.3, capitalStyle === 'stepped' ? 1.42 : 1.28),
-                    capitalDepthScale: Math.max(node.capitalDepthScale ?? 1.3, capitalStyle === 'stepped' ? 1.42 : 1.28),
-                    capitalStepSpread: capitalStyle === 'stepped' ? Math.max(node.capitalStepSpread ?? 0.34, 0.34) : node.capitalStepSpread,
+                    capitalTierCount:
+                      capitalStyle === 'stepped'
+                        ? Math.max(node.capitalTierCount ?? 3, 3)
+                        : node.capitalTierCount,
+                    capitalWidthScale: Math.max(
+                      node.capitalWidthScale ?? 1.3,
+                      capitalStyle === 'stepped' ? 1.42 : 1.28,
+                    ),
+                    capitalDepthScale: Math.max(
+                      node.capitalDepthScale ?? 1.3,
+                      capitalStyle === 'stepped' ? 1.42 : 1.28,
+                    ),
+                    capitalStepSpread:
+                      capitalStyle === 'stepped'
+                        ? Math.max(node.capitalStepSpread ?? 0.34, 0.34)
+                        : node.capitalStepSpread,
                   }),
             })
           }}
@@ -572,13 +595,34 @@ export function ColumnPanel() {
                 ? {}
                 : {
                     baseHeight: Math.max(node.baseHeight, 0.12),
-                    baseTierCount: baseStyle === 'stepped-square' ? Math.max(node.baseTierCount ?? 3, 3) : node.baseTierCount,
-                    baseWidthScale: Math.max(node.baseWidthScale ?? 1.24, baseStyle === 'stepped-square' ? 1.42 : 1.24),
-                    baseDepthScale: Math.max(node.baseDepthScale ?? 1.24, baseStyle === 'stepped-square' ? 1.42 : 1.24),
-                    baseStepSpread: baseStyle === 'stepped-square' ? Math.max(node.baseStepSpread ?? 0.34, 0.34) : node.baseStepSpread,
-                    basePlinthHeightRatio: baseStyle === 'round-rings' ? (node.basePlinthHeightRatio ?? 0.44) : node.basePlinthHeightRatio,
-                    baseRoundBandScale: baseStyle === 'round-rings' ? (node.baseRoundBandScale ?? 0.92) : node.baseRoundBandScale,
-                    baseNeckScale: baseStyle === 'round-rings' ? (node.baseNeckScale ?? 0.72) : node.baseNeckScale,
+                    baseTierCount:
+                      baseStyle === 'stepped-square'
+                        ? Math.max(node.baseTierCount ?? 3, 3)
+                        : node.baseTierCount,
+                    baseWidthScale: Math.max(
+                      node.baseWidthScale ?? 1.24,
+                      baseStyle === 'stepped-square' ? 1.42 : 1.24,
+                    ),
+                    baseDepthScale: Math.max(
+                      node.baseDepthScale ?? 1.24,
+                      baseStyle === 'stepped-square' ? 1.42 : 1.24,
+                    ),
+                    baseStepSpread:
+                      baseStyle === 'stepped-square'
+                        ? Math.max(node.baseStepSpread ?? 0.34, 0.34)
+                        : node.baseStepSpread,
+                    basePlinthHeightRatio:
+                      baseStyle === 'round-rings'
+                        ? (node.basePlinthHeightRatio ?? 0.44)
+                        : node.basePlinthHeightRatio,
+                    baseRoundBandScale:
+                      baseStyle === 'round-rings'
+                        ? (node.baseRoundBandScale ?? 0.92)
+                        : node.baseRoundBandScale,
+                    baseNeckScale:
+                      baseStyle === 'round-rings'
+                        ? (node.baseNeckScale ?? 0.72)
+                        : node.baseNeckScale,
                   }),
             })
           }}