polish catalog

apps/editor/components/ui/action-menu/index.tsx

@@ -34,7 +34,7 @@ export function ActionMenu({ className }: { className?: string }) {
           {mode === "build" && tool === "item" && catalogCategory && (
             <motion.div
               className={cn(
-                "overflow-hidden border-zinc-800 max-h-96 border-b px-2 py-2",
+                "overflow-hidden border-zinc-800 border-b px-2 py-2",
               )}
               initial={{
                 opacity: 0,
@@ -45,7 +45,7 @@ export function ActionMenu({ className }: { className?: string }) {
               }}
               animate={{
                 opacity: 1,
-                maxHeight: 80,
+                maxHeight: 160,
                 paddingTop: 8,
                 paddingBottom: 8,
                 borderBottomWidth: 1,

apps/editor/components/ui/item-catalog/item-catalog.tsx

@@ -1,27 +1,69 @@
 "use client";
 
+import { AssetInput } from "@pascal-app/core";
+import { resolveCdnUrl } from "@pascal-app/viewer";
 import Image from "next/image";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/primitives/tooltip";
-
 import { cn } from "@/lib/utils";
 import useEditor, { CatalogCategory } from "@/store/use-editor";
 import { CATALOG_ITEMS } from "./catalog-items";
-import { AssetInput } from "@pascal-app/core";
+
-import { resolveCdnUrl } from "@pascal-app/viewer";
+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 filteredItems = CATALOG_ITEMS.filter(
+  // Reset tag filters when category changes
+  useEffect(() => {
+    setActivePlacementTag(null);
+    setActiveFunctionalTag(null);
+  }, [category]);
+
+  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(
@@ -44,50 +86,134 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
   };
 
   return (
-    <div className="-mx-2 -my-2 flex max-w-xl gap-2 overflow-x-auto p-2">
+    <div className="flex flex-col gap-2">
-      {filteredItems.map((item, index) => {
+      {/* Filter chips */}
-        const isSelected = selectedItem?.src === item?.src;
+      {hasFilters && (
-        const attachmentIcon = getAttachmentIcon(item?.attachTo);
+        <div className="flex flex-col gap-1.5">
-        return (
+          {/* Placement row */}
-          <Tooltip key={index}>
+          {placementTags.length > 0 && (
-            <TooltipTrigger asChild>
+            <div className="flex flex-wrap gap-1">
               <button
-                className={cn(
-                  "relative aspect-square min-w-14 min-h-14 h-14 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"
-              >
+                onClick={() => setActivePlacementTag(null)}
-                <Image
+                className={cn(
-                  alt={item.name}
+                  "cursor-pointer rounded-md px-2 py-0.5 text-xs font-medium transition-colors",
-                  className="rounded-lg object-cover"
+                  activePlacementTag === null
-                  fill
+                    ? "bg-blue-500 text-white"
-                  src={resolveCdnUrl(item.thumbnail) || ''}
+                    : "bg-blue-950/50 text-blue-300 hover:bg-blue-900/60 hover:text-blue-200",
-                />
-                {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>
                 )}
+              >
+                All
               </button>
-            </TooltipTrigger>
+              {placementTags.map((tag) => {
-            <TooltipContent className="text-xs" side="top">
+                const count = placementCount(tag);
-              {item.name}
+                const isActive = activePlacementTag === tag;
-            </TooltipContent>
+                const isEmpty = count === 0 && !isActive;
-          </Tooltip>
+                return (
-        );
+                  <button
-      })}
+                    key={tag}
+                    type="button"
+                    disabled={isEmpty}
+                    onClick={() => setActivePlacementTag(isActive ? null : tag)}
+                    className={cn(
+                      "inline-flex cursor-pointer items-center gap-1 rounded-md pl-2 pr-1.5 py-0.5 text-xs font-medium transition-colors capitalize",
+                      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",
+                    )}
+                  >
+                    {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
+                    key={tag}
+                    type="button"
+                    disabled={isEmpty}
+                    onClick={() => setActiveFunctionalTag(isActive ? null : tag)}
+                    className={cn(
+                      "inline-flex cursor-pointer items-center gap-1 rounded-md pl-2 pr-1.5 py-0.5 text-xs font-medium transition-colors capitalize",
+                      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",
+                    )}
+                  >
+                    {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 min-w-14 min-h-14 h-14 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
+                    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>
   );
 }

packages/core/src/schema/nodes/item.ts

@@ -10,6 +10,7 @@ const assetSchema = z.object({
   src: z.string(),
   dimensions: z.tuple([z.number(), z.number(), z.number()]).default([1, 1, 1]), // [w, h, d]
   attachTo: z.enum(['wall', 'wall-side', 'ceiling']).optional(),
+  tags: z.array(z.string()).optional(),
   // These are "Corrective" transforms to normalize the GLB
   offset: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
   rotation: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]),
@@ -42,6 +43,7 @@ export const ItemNode = BaseNode.extend({
     - offset: corrective position offset for the model
     - rotation: corrective rotation for the model
     - scale: corrective scale for the model
+    - tags: tags associated with the item
 `)
 
 export type ItemNode = z.infer<typeof ItemNode>

packages/viewer/src/components/viewer/post-processing.tsx

@@ -26,7 +26,7 @@ import useViewer from '../../store/use-viewer'
 // SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
 export const SSGI_PARAMS = {
   enabled: true,
-  sliceCount: 1, 
+  sliceCount: 2, 
   stepCount: 8,
   radius: 1,
   expFactor: 1.5,