@pascal-app/editor 0.8.0 → 0.9.1

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -0,0 +1,263 @@
+'use client'
+
+import type { AssetInput } from '@pascal-app/core'
+import { Root as TooltipRoot } from '@radix-ui/react-tooltip'
+import NextImage from 'next/image'
+import { useMemo, useState } from 'react'
+import { triggerSFX } from '../../../../../lib/sfx-bus'
+import { cn } from '../../../../../lib/utils'
+import { ItemCatalog } from '../../../item-catalog/item-catalog'
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../../../../components/ui/primitives/tooltip'
+
+/** A function-axis taxonomy node, assembled into a tree by the embedder. */
+export type FunctionTreeNode = {
+  slug: string
+  name: string
+  iconUrl?: string | null
+  children: FunctionTreeNode[]
+}
+
+const SOURCE_CHIPS: Array<{ id: NonNullable<AssetInput['source']>; label: string }> = [
+  { id: 'library', label: 'Library' },
+  { id: 'community', label: 'Community' },
+  { id: 'mine', label: 'Mine' },
+]
+
+/** Every slug at or below `node`, so a non-leaf selection matches descendants. */
+function descendantSlugs(node: FunctionTreeNode): Set<string> {
+  const out = new Set<string>()
+  const walk = (n: FunctionTreeNode) => {
+    out.add(n.slug)
+    for (const child of n.children) walk(child)
+  }
+  walk(node)
+  return out
+}
+
+function itemFunctionSlugs(item: AssetInput): string[] {
+  if (item.functionTags && item.functionTags.length > 0) return item.functionTags
+  return item.category ? [item.category] : []
+}
+
+/**
+ * DB-driven hierarchical Items browse. Roots render as the category tab bar;
+ * a selected root with children exposes those children as a secondary chip
+ * row. Selecting any node shows items tagged with that node or any descendant.
+ * Library / Community / Mine narrows by source on top of the tree selection.
+ */
+export function FunctionTreePanel({
+  functionTree,
+  items,
+  onSearchChange,
+  searchResults,
+  leadingTile,
+  emptyState,
+}: {
+  functionTree: FunctionTreeNode[]
+  items?: AssetInput[]
+  onSearchChange?: (query: string) => void
+  searchResults?: AssetInput[] | null
+  leadingTile?: React.ReactNode
+  emptyState?: React.ReactNode
+}) {
+  const [activeRootSlug, setActiveRootSlug] = useState<string | null>(
+    functionTree[0]?.slug ?? null,
+  )
+  const [activeChildSlug, setActiveChildSlug] = useState<string | null>(null)
+  const [activeSource, setActiveSource] = useState<AssetInput['source'] | null>('library')
+  const [search, setSearch] = useState('')
+
+  const isServerSearch = onSearchChange !== undefined
+  const isSearchPending = isServerSearch && search.length > 0 && searchResults === null
+
+  const activeRoot = functionTree.find((n) => n.slug === activeRootSlug) ?? functionTree[0]
+  const activeNode =
+    (activeChildSlug && activeRoot?.children.find((c) => c.slug === activeChildSlug)) || activeRoot
+
+  const matchesSource = (item: AssetInput) => {
+    if (!activeSource) return true
+    const itemSource = item.source ?? 'library'
+    if (activeSource === 'mine') return itemSource === 'mine'
+    if (activeSource === 'library') return itemSource === 'library'
+    if (activeSource === 'community') {
+      if (itemSource === 'community') return true
+      if (itemSource === 'mine') return !item.isDraft
+      return false
+    }
+    return true
+  }
+
+  const treeItems = useMemo(() => {
+    const base = items ?? []
+    if (!activeNode) return base.filter(matchesSource)
+    const slugs = descendantSlugs(activeNode)
+    return base.filter(
+      (item) => matchesSource(item) && itemFunctionSlugs(item).some((s) => slugs.has(s)),
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, activeNode, activeSource])
+
+  const searchItems = useMemo(() => {
+    if (!(isServerSearch && search && searchResults)) return null
+    return activeSource ? searchResults.filter(matchesSource) : searchResults
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isServerSearch, search, searchResults, activeSource])
+
+  function selectRoot(slug: string) {
+    setActiveRootSlug(slug)
+    setActiveChildSlug(null)
+    setSearch('')
+    onSearchChange?.('')
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Root nodes as a category grid — icon when available, otherwise a
+          two-letter abbreviation, with the full name in a hover tooltip.
+          Mirrors the Build tab's tile grid so the two panels read the same. */}
+      <TooltipProvider delayDuration={0} disableHoverableContent>
+        <div className="grid shrink-0 grid-cols-5 gap-1.5 border-border/70 border-b p-2">
+          {functionTree.map((root) => {
+            const isActive = activeRoot?.slug === root.slug
+            return (
+              <TooltipRoot key={root.slug}>
+                <TooltipTrigger asChild>
+                  <button
+                    className={cn(
+                      'relative flex aspect-square items-center justify-center rounded-xl transition-all duration-200',
+                      isActive
+                        ? 'bg-primary/10 ring-1 ring-primary/50'
+                        : 'bg-muted/40 opacity-70 grayscale hover:bg-muted hover:opacity-100 hover:grayscale-0',
+                    )}
+                    onClick={() => {
+                      triggerSFX('sfx:menu-click')
+                      selectRoot(root.slug)
+                    }}
+                    onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                    type="button"
+                  >
+                    {root.iconUrl ? (
+                      <NextImage
+                        alt={root.name}
+                        className="size-7 object-contain"
+                        height={28}
+                        src={root.iconUrl}
+                        width={28}
+                      />
+                    ) : (
+                      <span className="font-semibold text-muted-foreground text-xs uppercase">
+                        {root.name.slice(0, 2)}
+                      </span>
+                    )}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent className="icon-grid-tooltip pointer-events-none" side="top">
+                  {root.name}
+                </TooltipContent>
+              </TooltipRoot>
+            )
+          })}
+        </div>
+      </TooltipProvider>
+
+      {/* Search + source filter */}
+      <div className="flex shrink-0 flex-col gap-2 border-border/70 border-b p-2">
+        <div className="flex items-center gap-1.5">
+          <input
+            className="w-1/2 min-w-0 shrink-0 rounded-lg bg-muted px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none"
+            onChange={(e) => {
+              setSearch(e.target.value)
+              onSearchChange?.(e.target.value)
+            }}
+            placeholder="Search..."
+            type="text"
+            value={search}
+          />
+          <div className="flex w-1/2 min-w-0 shrink-0 rounded-lg bg-muted p-0.5">
+            {SOURCE_CHIPS.map((chip) => {
+              const isActive = activeSource === chip.id
+              return (
+                <button
+                  className={cn(
+                    'min-w-0 flex-1 truncate rounded-md px-1 py-1 text-center font-medium text-[10px] transition-colors',
+                    isActive
+                      ? 'bg-background text-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground',
+                  )}
+                  key={chip.id}
+                  onClick={() => setActiveSource(isActive ? null : chip.id)}
+                  type="button"
+                >
+                  {chip.label}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Child nodes of the active root as a secondary chip row */}
+        {!search && activeRoot && activeRoot.children.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',
+                activeChildSlug === null
+                  ? 'bg-violet-500 text-white'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
+              )}
+              onClick={() => setActiveChildSlug(null)}
+              type="button"
+            >
+              All
+            </button>
+            {activeRoot.children.map((child) => {
+              const isActive = activeChildSlug === child.slug
+              return (
+                <button
+                  className={cn(
+                    'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs capitalize transition-colors',
+                    isActive
+                      ? 'bg-violet-500 text-white'
+                      : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
+                  )}
+                  key={child.slug}
+                  onClick={() => setActiveChildSlug(isActive ? null : child.slug)}
+                  type="button"
+                >
+                  {child.name}
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Item grid */}
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {isSearchPending ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="size-5 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-muted-foreground" />
+          </div>
+        ) : isServerSearch && search && searchResults?.length === 0 ? (
+          (emptyState ?? (
+            <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
+              No results for &ldquo;{search}&rdquo;
+            </div>
+          ))
+        ) : (
+          <ItemCatalog
+            category={'furnish' as never}
+            emptyState={emptyState}
+            key={activeNode?.slug ?? 'all'}
+            leadingTile={leadingTile}
+            overrideItems={isServerSearch && search ? (searchItems ?? undefined) : treeItems}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/sidebar/panels/items-panel/index.tsx

@@ -3,12 +3,14 @@
 import type { AssetInput } from '@pascal-app/core'
 import NextImage from 'next/image'
 import { useEffect, useState } from 'react'
+import { triggerSFX } from '../../../../../lib/sfx-bus'
 import { cn } from '../../../../../lib/utils'
 import type { CatalogCategory } from '../../../../../store/use-editor'
 import useEditor from '../../../../../store/use-editor'
 import { furnishTools } from '../../../action-menu/furnish-tools'
 import { CATALOG_ITEMS } from '../../../item-catalog/catalog-items'
 import { ItemCatalog } from '../../../item-catalog/item-catalog'
+import { type FunctionTreeNode, FunctionTreePanel } from './function-tree-panel'
 
 const PLACEMENT_TAGS = new Set(['floor', 'wall', 'ceiling', 'countertop'])
 
@@ -18,6 +20,9 @@ export function ItemsPanel({
   searchResults,
   leadingTile,
   emptyState,
+  functionTree,
+  showSourceFilter = true,
+  showTagFilters = true,
 }: {
   items?: AssetInput[]
   /** Called when the search query changes (community edition uses this for server-side search) */
@@ -34,6 +39,64 @@ export function ItemsPanel({
    * or no search results). Replaces the default "No results" message.
    */
   emptyState?: React.ReactNode
+  /**
+   * DB-driven function taxonomy. When provided, the panel renders the
+   * hierarchical tree browse instead of the legacy hardcoded category tabs.
+   */
+  functionTree?: FunctionTreeNode[]
+  /**
+   * Library/Community/Mine source chips. The open-source editor has no
+   * uploaded items (only the built-in catalog), so it hides these.
+   */
+  showSourceFilter?: boolean
+  /**
+   * Placement/functional tag filter chips under the search row. The
+   * open-source editor hides these to keep the panel to plain categories.
+   */
+  showTagFilters?: boolean
+}) {
+  // When the embedder supplies a function taxonomy, the hierarchical browse
+  // replaces the legacy `furnishTools` category tabs entirely.
+  if (functionTree && functionTree.length > 0) {
+    return (
+      <FunctionTreePanel
+        emptyState={emptyState}
+        functionTree={functionTree}
+        items={items}
+        leadingTile={leadingTile}
+        onSearchChange={onSearchChange}
+        searchResults={searchResults}
+      />
+    )
+  }
+
+  return <LegacyItemsPanel
+    emptyState={emptyState}
+    items={items}
+    leadingTile={leadingTile}
+    onSearchChange={onSearchChange}
+    searchResults={searchResults}
+    showSourceFilter={showSourceFilter}
+    showTagFilters={showTagFilters}
+  />
+}
+
+function LegacyItemsPanel({
+  items,
+  onSearchChange,
+  searchResults,
+  leadingTile,
+  emptyState,
+  showSourceFilter = true,
+  showTagFilters = true,
+}: {
+  items?: AssetInput[]
+  onSearchChange?: (query: string) => void
+  searchResults?: AssetInput[] | null
+  leadingTile?: React.ReactNode
+  emptyState?: React.ReactNode
+  showSourceFilter?: boolean
+  showTagFilters?: boolean
 }) {
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
@@ -45,8 +108,11 @@ export function ItemsPanel({
   const [activeFunctionalTag, setActiveFunctionalTag] = useState<string | null>(null)
   // Library / Community / Mine. Default to Library so first-time users see
   // the curated catalog rather than every uploaded item; clicking the chip
-  // again clears the filter (`null` = show everything).
-  const [activeSource, setActiveSource] = useState<AssetInput['source'] | null>('library')
+  // again clears the filter (`null` = show everything). With the chips hidden
+  // there is nothing to filter by, so start unfiltered.
+  const [activeSource, setActiveSource] = useState<AssetInput['source'] | null>(
+    showSourceFilter ? 'library' : null,
+  )
   const [search, setSearch] = useState('')
   const isServerSearch = onSearchChange !== undefined
   // True when server search is active but results haven't come back yet
@@ -108,7 +174,7 @@ export function ItemsPanel({
   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
+  const hasFilters = showTagFilters && allTags.length > 1
 
   const placementCount = (tag: string | null) =>
     categoryItems.filter((item) => {
@@ -129,7 +195,7 @@ export function ItemsPanel({
   return (
     <div className="flex h-full flex-col">
       {/* Category tabs */}
-      <div className="flex shrink-0 gap-1 overflow-x-auto border-border/70 border-b p-2">
+      <div className="flex shrink-0 flex-wrap gap-1 border-border/70 border-b p-2">
         {furnishTools.map((cat) => {
           const isActive = activeCategory.catalogCategory === cat.catalogCategory
           return (
@@ -141,7 +207,11 @@ export function ItemsPanel({
                   : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground',
               )}
               key={cat.catalogCategory}
-              onClick={() => selectCategory(cat.catalogCategory)}
+              onClick={() => {
+                triggerSFX('sfx:menu-click')
+                selectCategory(cat.catalogCategory)
+              }}
+              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
               type="button"
             >
               <NextImage
@@ -161,9 +231,13 @@ export function ItemsPanel({
       <div className="flex shrink-0 flex-col gap-2 border-border/70 border-b p-2">
         <div className="flex items-center gap-1.5">
           {/* Search and source filter take 50/50 of the row. `min-w-0` on
-              both sides lets each half shrink to fit when the panel narrows. */}
+              both sides lets each half shrink to fit when the panel narrows.
+              With the source chips hidden, search spans the full row. */}
           <input
-            className="w-1/2 min-w-0 shrink-0 rounded-lg bg-muted px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none"
+            className={cn(
+              'min-w-0 shrink-0 rounded-lg bg-muted px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none',
+              showSourceFilter ? 'w-1/2' : 'w-full',
+            )}
             onChange={(e) => {
               setSearch(e.target.value)
               onSearchChange?.(e.target.value)
@@ -172,7 +246,7 @@ export function ItemsPanel({
             type="text"
             value={search}
           />
-          {sourceChips.length > 0 && (
+          {showSourceFilter && sourceChips.length > 0 && (
             <div className="flex w-1/2 min-w-0 shrink-0 rounded-lg bg-muted p-0.5">
               {sourceChips.map((chip) => {
                 const isActive = activeSource === chip.id

package/src/components/ui/sidebar/panels/settings-panel/index.tsx

@@ -1,4 +1,4 @@
-import { emitter, useScene } from '@pascal-app/core'
+import { emitter, useScene, validateBuildJson } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { TreeView, VisualJson } from '@visual-json/react'
 import { Camera, Download, Save, Trash2, Upload } from 'lucide-react'
@@ -21,6 +21,7 @@ import { Switch } from './../../../../../components/ui/primitives/switch'
 import useEditor, { selectDefaultBuildingAndLevel } from './../../../../../store/use-editor'
 import { AudioSettingsDialog } from './audio-settings-dialog'
 import { KeyboardShortcutsDialog } from './keyboard-shortcuts-dialog'
+import { LoadBuildDialog, type PendingImport } from './load-build-dialog'
 
 type SceneNode = Record<string, unknown> & {
   id?: unknown
@@ -183,8 +184,10 @@ export function SettingsPanel({
   const resetSelection = useViewer((state) => state.resetSelection)
   const exportScene = useViewer((state) => state.exportScene)
   const showGrid = useViewer((state) => state.showGrid)
+  const shadows = useViewer((state) => state.shadows)
   const setPhase = useEditor((state) => state.setPhase)
   const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false)
+  const [pendingImport, setPendingImport] = useState<PendingImport | null>(null)
   const sceneGraphValue = useMemo(
     () => buildSceneGraphValue(nodes as Record<string, SceneNode>, rootNodeIds),
     [nodes, rootNodeIds],
@@ -221,16 +224,37 @@ export function SettingsPanel({
 
     const reader = new FileReader()
     reader.onload = (event) => {
+      const text = event.target?.result as string
+      let parsed: unknown
       try {
-        const data = JSON.parse(event.target?.result as string)
-        if (data.nodes && data.rootNodeIds) {
-          setScene(data.nodes, data.rootNodeIds)
-          resetSelection()
-          setPhase('site')
-        }
-      } catch (err) {
-        console.error('Failed to load build:', err)
+        parsed = JSON.parse(text)
+      } catch {
+        setPendingImport({
+          fileName: file.name,
+          fileSizeBytes: file.size,
+          result: {
+            ok: false,
+            parsed: null,
+            stats: { total: 0, byType: {}, unknownTypes: {}, floorAreaM2: 0 },
+            errors: [
+              {
+                severity: 'error',
+                code: 'invalid_json',
+                message: 'File could not be parsed as JSON.',
+              },
+            ],
+            warnings: [],
+            schemaIssues: [],
+            schemaIssueCount: 0,
+          },
+        })
+        return
       }
+      setPendingImport({
+        fileName: file.name,
+        fileSizeBytes: file.size,
+        result: validateBuildJson(parsed),
+      })
     }
     reader.readAsText(file)
 
@@ -238,6 +262,16 @@ export function SettingsPanel({
     e.target.value = ''
   }
 
+  const handleConfirmImport = (parsed: { nodes: Record<string, unknown>; rootNodeIds: string[] }) => {
+    setScene(
+      parsed.nodes as Parameters<typeof setScene>[0],
+      parsed.rootNodeIds as Parameters<typeof setScene>[1],
+    )
+    resetSelection()
+    setPhase('site')
+    setPendingImport(null)
+  }
+
   const handleResetToDefault = () => {
     clearScene()
     resetSelection()
@@ -307,6 +341,16 @@ export function SettingsPanel({
               onCheckedChange={(checked) => useViewer.getState().setShowGrid(checked)}
             />
           </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium text-sm">Shadows</div>
+              <div className="text-muted-foreground text-xs">Cast shadows from lights</div>
+            </div>
+            <Switch
+              checked={shadows}
+              onCheckedChange={(checked) => useViewer.getState().setShadows(checked)}
+            />
+          </div>
         </div>
       )}
 
@@ -380,6 +424,12 @@ export function SettingsPanel({
           ref={fileInputRef}
           type="file"
         />
+
+        <LoadBuildDialog
+          onCancel={() => setPendingImport(null)}
+          onConfirm={handleConfirmImport}
+          pending={pendingImport}
+        />
       </div>
 
       {/* Audio Section */}

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -37,7 +37,6 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
       { keys: ['1'], action: 'Switch to Site phase' },
       { keys: ['2'], action: 'Switch to Structure phase' },
       { keys: ['3'], action: 'Switch to Furnish phase' },
-      { keys: ['S'], action: 'Switch to Structure layer' },
       { keys: ['F'], action: 'Switch to Furnish layer' },
       { keys: ['Z'], action: 'Switch to Zones layer' },
       {
@@ -56,6 +55,7 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
     shortcuts: [
       { keys: ['V'], action: 'Switch to Select mode' },
       { keys: ['B'], action: 'Switch to Build mode' },
+      { keys: ['X'], action: 'Switch to Delete mode' },
       {
         keys: ['Esc'],
         action: 'Cancel the active tool and return to Select mode',
@@ -100,6 +100,11 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Camera',
     shortcuts: [
+      {
+        keys: ['W', 'A', 'S', 'D'],
+        action: 'Pan camera',
+        note: 'Moves in screen space, similar to dragging the camera view.',
+      },
       {
         keys: ['Middle click'],
         action: 'Pan camera',