@pascal-app/editor 0.4.0

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

@@ -0,0 +1,219 @@
+'use client'
+
+import type { AssetInput } from '@pascal-app/core'
+import { resolveCdnUrl } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './../../../components/ui/primitives/tooltip'
+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 }) {
+  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
+
+  // 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 filteredItems = categoryItems.filter((item) => {
+    const tags = item.tags ?? []
+    if (activePlacementTag && !tags.includes(activePlacementTag)) return false
+    if (activeFunctionalTag && !tags.includes(activeFunctionalTag)) return false
+    return true
+  })
+
+  // 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)
+    }
+  }, [filteredItems, 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'
+    }
+    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>
+      )}
+
+      {/* 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) || ''}
+                  />
+                  {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>
+  )
+}

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

@@ -0,0 +1,230 @@
+'use client'
+
+import { type AnyNode, type CeilingNode, type MaterialSchema, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Edit, Plus, Trash2 } from 'lucide-react'
+import { useCallback, useEffect } from 'react'
+import useEditor from '../../../store/use-editor'
+import { ActionButton } 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'
+
+export function CeilingPanel() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodes = useScene((s) => s.nodes)
+  const updateNode = useScene((s) => s.updateNode)
+  const editingHole = useEditor((s) => s.editingHole)
+  const setEditingHole = useEditor((s) => s.setEditingHole)
+
+  const selectedId = selectedIds[0]
+  const node = selectedId
+    ? (nodes[selectedId as AnyNode['id']] as CeilingNode | undefined)
+    : undefined
+
+  const handleUpdate = useCallback(
+    (updates: Partial<CeilingNode>) => {
+      if (!selectedId) return
+      updateNode(selectedId as AnyNode['id'], updates)
+    },
+    [selectedId, updateNode],
+  )
+
+  const handleMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      handleUpdate({ material })
+    },
+    [handleUpdate],
+  )
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+    setEditingHole(null)
+  }, [setSelection, setEditingHole])
+
+  useEffect(() => {
+    if (!node) {
+      setEditingHole(null)
+    }
+  }, [node, setEditingHole])
+
+  useEffect(() => {
+    return () => {
+      setEditingHole(null)
+    }
+  }, [setEditingHole])
+
+  const handleAddHole = useCallback(() => {
+    if (!(node && selectedId)) return
+
+    const polygon = node.polygon
+    let cx = 0
+    let cz = 0
+    for (const [x, z] of polygon) {
+      cx += x
+      cz += z
+    }
+    cx /= polygon.length
+    cz /= polygon.length
+
+    const holeSize = 0.5
+    const newHole: Array<[number, number]> = [
+      [cx - holeSize, cz - holeSize],
+      [cx + holeSize, cz - holeSize],
+      [cx + holeSize, cz + holeSize],
+      [cx - holeSize, cz + holeSize],
+    ]
+    const currentHoles = node?.holes || []
+    handleUpdate({ holes: [...currentHoles, newHole] })
+    setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
+  }, [node, selectedId, handleUpdate, setEditingHole])
+
+  const handleEditHole = useCallback(
+    (index: number) => {
+      if (!selectedId) return
+      setEditingHole({ nodeId: selectedId, holeIndex: index })
+    },
+    [selectedId, setEditingHole],
+  )
+
+  const handleDeleteHole = useCallback(
+    (index: number) => {
+      if (!selectedId) return
+      const currentHoles = node?.holes || []
+      const newHoles = currentHoles.filter((_, i) => i !== index)
+      handleUpdate({ holes: newHoles })
+      if (editingHole?.nodeId === selectedId && editingHole?.holeIndex === index) {
+        setEditingHole(null)
+      }
+    },
+    [selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
+  )
+
+  if (!node || node.type !== 'ceiling' || selectedIds.length !== 1) return null
+
+  const calculateArea = (polygon: Array<[number, number]>): number => {
+    if (polygon.length < 3) return 0
+    let area = 0
+    const n = polygon.length
+    for (let i = 0; i < n; i++) {
+      const j = (i + 1) % n
+      area += polygon[i]?.[0] * polygon[j]?.[1]
+      area -= polygon[j]?.[0] * polygon[i]?.[1]
+    }
+    return Math.abs(area) / 2
+  }
+
+  const area = calculateArea(node.polygon)
+
+  return (
+    <PanelWrapper
+      icon="/icons/ceiling.png"
+      onClose={handleClose}
+      title={node.name || 'Ceiling'}
+      width={320}
+    >
+      <PanelSection title="Height">
+        <SliderControl
+          label="Height"
+          max={6}
+          min={0}
+          onChange={(v) => handleUpdate({ height: v })}
+          precision={3}
+          step={0.01}
+          unit="m"
+          value={Math.round(node.height * 1000) / 1000}
+        />
+
+        <div className="mt-2 grid grid-cols-3 gap-1.5 px-1 pb-1">
+          <ActionButton label="Low (2.4m)" onClick={() => handleUpdate({ height: 2.4 })} />
+          <ActionButton label="Standard (2.5m)" onClick={() => handleUpdate({ height: 2.5 })} />
+          <ActionButton label="High (3.0m)" onClick={() => handleUpdate({ height: 3.0 })} />
+        </div>
+      </PanelSection>
+
+      <PanelSection title="Info">
+        <div className="flex items-center justify-between px-2 py-1 text-muted-foreground text-sm">
+          <span>Area</span>
+          <span className="font-mono text-white">{area.toFixed(2)} m²</span>
+        </div>
+      </PanelSection>
+
+      <PanelSection title="Holes">
+        {node.holes && node.holes.length > 0 ? (
+          <div className="flex flex-col gap-1 pb-2">
+            {node.holes.map((hole, index) => {
+              const holeArea = calculateArea(hole)
+              const isEditing =
+                editingHole?.nodeId === selectedId && editingHole?.holeIndex === index
+              return (
+                <div
+                  className={`flex items-center justify-between rounded-lg border p-2 transition-colors ${
+                    isEditing
+                      ? 'border-primary/50 bg-primary/10'
+                      : 'border-transparent hover:bg-accent/30'
+                  }`}
+                  key={index}
+                >
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`font-medium text-xs ${isEditing ? 'text-primary' : 'text-white'}`}
+                    >
+                      Hole {index + 1} {isEditing && '(Editing)'}
+                    </p>
+                    <p className="text-[10px] text-muted-foreground">
+                      {holeArea.toFixed(2)} m² · {hole.length} pts
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    {isEditing ? (
+                      <ActionButton
+                        className="h-7 bg-primary text-primary-foreground hover:bg-primary/90"
+                        label="Done"
+                        onClick={() => setEditingHole(null)}
+                      />
+                    ) : (
+                      <>
+                        <button
+                          className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground"
+                          onClick={() => handleEditHole(index)}
+                          type="button"
+                        >
+                          <Edit className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:text-red-300"
+                          onClick={() => handleDeleteHole(index)}
+                          type="button"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="px-2 py-3 text-center text-muted-foreground text-xs">No holes</div>
+        )}
+
+        <div className="px-1 pt-1 pb-1">
+          <ActionButton
+            className="w-full"
+            disabled={editingHole?.nodeId === selectedId}
+            icon={<Plus className="h-3.5 w-3.5" />}
+            label="Add Hole"
+            onClick={handleAddHole}
+          />
+        </div>
+      </PanelSection>
+
+      <PanelSection title="Material">
+        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+      </PanelSection>
+    </PanelWrapper>
+  )
+}