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,6 +86,89 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
   };
 
   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
+                type="button"
+                onClick={() => setActivePlacementTag(null)}
+                className={cn(
+                  "cursor-pointer rounded-md px-2 py-0.5 text-xs font-medium 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",
+                )}
+              >
+                All
+              </button>
+              {placementTags.map((tag) => {
+                const count = placementCount(tag);
+                const isActive = activePlacementTag === tag;
+                const isEmpty = count === 0 && !isActive;
+                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;
@@ -63,7 +188,7 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
                     alt={item.name}
                     className="rounded-lg object-cover"
                     fill
-                  src={resolveCdnUrl(item.thumbnail) || ''}
+                    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">
@@ -89,5 +214,6 @@ export function ItemCatalog({ category }: { category: CatalogCategory }) {
           );
         })}
       </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,