@pascal-app/editor 0.7.0 → 0.8.0

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

@@ -4,28 +4,60 @@ import {
   type AnyNode,
   type AnyNodeId,
   getClampedWallCurveOffset,
+  getEffectiveWallSurfaceMaterial,
   getMaxWallCurveOffset,
   getWallCurveLength,
+  getWallSurfaceMaterialSignature,
+  type MaterialSchema,
   normalizeWallCurveOffset,
   useScene,
   type WallNode,
+  type WallSurfaceSide,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Move, Spline } from 'lucide-react'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } 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'
 
+function buildWallSurfaceMaterialPatch(
+  node: WallNode,
+  targetSide: WallSurfaceSide | null,
+  material: MaterialSchema | undefined,
+  materialPreset: string | undefined,
+): Partial<WallNode> {
+  const nextSurfaceMaterial = { material, materialPreset }
+  const nextInterior =
+    targetSide === null || targetSide === 'interior'
+      ? nextSurfaceMaterial
+      : getEffectiveWallSurfaceMaterial(node, 'interior')
+  const nextExterior =
+    targetSide === null || targetSide === 'exterior'
+      ? nextSurfaceMaterial
+      : getEffectiveWallSurfaceMaterial(node, 'exterior')
+
+  return {
+    interiorMaterial: nextInterior.material,
+    interiorMaterialPreset: nextInterior.materialPreset,
+    exteriorMaterial: nextExterior.material,
+    exteriorMaterialPreset: nextExterior.materialPreset,
+    material: undefined,
+    materialPreset: undefined,
+  }
+}
+
 export function WallPanel() {
   const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
   const updateNode = useScene((s) => s.updateNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setCurvingWall = useEditor((s) => s.setCurvingWall)
+  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
 
   const node = useScene((s) =>
     selectedId ? (s.nodes[selectedId as AnyNode['id']] as WallNode | undefined) : undefined,
@@ -56,6 +88,35 @@ export function WallPanel() {
     [selectedId, updateNode],
   )
 
+  const effectiveInteriorMaterial = useMemo(
+    () => (node ? getEffectiveWallSurfaceMaterial(node, 'interior') : {}),
+    [node],
+  )
+  const effectiveExteriorMaterial = useMemo(
+    () => (node ? getEffectiveWallSurfaceMaterial(node, 'exterior') : {}),
+    [node],
+  )
+  const surfaceMaterialsMatch = useMemo(
+    () =>
+      getWallSurfaceMaterialSignature(effectiveInteriorMaterial) ===
+      getWallSurfaceMaterialSignature(effectiveExteriorMaterial),
+    [effectiveExteriorMaterial, effectiveInteriorMaterial],
+  )
+  const materialTargetSide =
+    selectedMaterialTarget &&
+    selectedMaterialTarget.nodeId === node?.id &&
+    (selectedMaterialTarget.role === 'interior' || selectedMaterialTarget.role === 'exterior')
+      ? selectedMaterialTarget.role
+      : null
+  const materialPickerValue =
+    materialTargetSide === 'interior'
+      ? effectiveInteriorMaterial
+      : materialTargetSide === 'exterior'
+        ? effectiveExteriorMaterial
+        : surfaceMaterialsMatch
+          ? effectiveInteriorMaterial
+          : {}
+
   const handleUpdateLength = useCallback(
     (newLength: number) => {
       if (!node || newLength <= 0) return
@@ -79,6 +140,24 @@ export function WallPanel() {
     [node, handleUpdate],
   )
 
+  const handleMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      if (!(node && materialTargetSide)) return
+      handleUpdate(
+        buildWallSurfaceMaterialPatch(node, materialTargetSide, undefined, materialPreset),
+      )
+    },
+    [handleUpdate, materialTargetSide, node],
+  )
+
+  const handleCustomMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      if (!(node && materialTargetSide)) return
+      handleUpdate(buildWallSurfaceMaterialPatch(node, materialTargetSide, material, undefined))
+    },
+    [handleUpdate, materialTargetSide, node],
+  )
+
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -160,6 +239,23 @@ export function WallPanel() {
         )}
       </PanelSection>
 
+      <PanelSection title="Material">
+        {materialTargetSide ? null : (
+          <div className="mb-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-[11px] text-muted-foreground">
+            Click the wall face you want to edit. Materials now apply to one side at a time.
+          </div>
+        )}
+        <MaterialPicker
+          disabled={!materialTargetSide}
+          hideSideControl
+          nodeType="wall"
+          onChange={handleCustomMaterialChange}
+          onSelectMaterialPreset={handleMaterialPresetChange}
+          selectedMaterialPreset={materialPickerValue.materialPreset}
+          value={materialPickerValue.material}
+        />
+      </PanelSection>
+
       <PanelSection title="Actions">
         <ActionGroup>
           <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />

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

@@ -12,8 +12,8 @@ import { useViewer } from '@pascal-app/viewer'
 import { BookMarked, Copy, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
 import { useCallback, useRef } from 'react'
 import { usePresetsAdapter } from '../../../contexts/presets-context'
-import { cn } from '../../../lib/utils'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { MetricControl } from '../controls/metric-control'
@@ -129,7 +129,11 @@ export function WindowPanel() {
       if (liveNode?.type !== 'window') return
 
       if (
-        !(previewRef.current && previewRef.current.id === selectedId && previewRef.current.key === key)
+        !(
+          previewRef.current &&
+          previewRef.current.id === selectedId &&
+          previewRef.current.key === key
+        )
       ) {
         previewRef.current = {
           id: selectedId as AnyNodeId,
@@ -299,7 +303,8 @@ export function WindowPanel() {
   const normRows = node.rowRatios.map((r) => r / rowSum)
   const isOpening = node.openingKind === 'opening'
   const openingShape = node.openingShape ?? 'rectangle'
-  const windowShape = openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
+  const windowShape =
+    openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
   const openingRadiusMode = node.openingRadiusMode ?? 'all'
   const openingCornerRadii = node.openingCornerRadii ?? [0.15, 0.15, 0.15, 0.15]
   const cornerRadius = node.cornerRadius ?? 0.15
@@ -340,7 +345,10 @@ export function WindowPanel() {
           nextUpdates.openingCornerRadii = nextRadii
         }
       } else {
-        const nextRadius = Math.min(Math.max(cornerRadius, 0), getMaxSharedWindowRadius(nextWidth, nextHeight))
+        const nextRadius = Math.min(
+          Math.max(cornerRadius, 0),
+          getMaxSharedWindowRadius(nextWidth, nextHeight),
+        )
         if (Math.abs(nextRadius - cornerRadius) > 1e-6) {
           nextUpdates.cornerRadius = nextRadius
         }
@@ -597,7 +605,7 @@ export function WindowPanel() {
         />
       </PanelSection>
 
-      {!isOpening && !rectangleOnlyWindowTypes.has(node.windowType) && (
+      {!(isOpening || rectangleOnlyWindowTypes.has(node.windowType)) && (
         <PanelSection title="Corner Shape">
           <SegmentedControl
             onChange={(value) =>

package/src/components/ui/primitives/number-input.tsx

@@ -144,7 +144,7 @@ export function NumberInput({
         }}
       />
       <div
-        className={`relative z-10 flex items-center overflow-hidden rounded-lg border shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] transition-all focus-within:border-primary focus-within:ring-1 focus-within:ring-primary ${isDragging ? 'border-neutral-300 bg-transparent ring-1 ring-neutral-200/60 dark:border-border dark:ring-border/50' : 'border-neutral-200/60 bg-white hover:border-neutral-300 dark:border-border/50 dark:bg-accent/30 dark:hover:border-border/80'}`}
+        className={`relative z-10 flex items-center overflow-hidden rounded-lg border shadow-elevation-0 transition-all focus-within:border-primary focus-within:ring-1 focus-within:ring-primary ${isDragging ? 'border-neutral-300 bg-transparent ring-1 ring-neutral-200/60 dark:border-border dark:ring-border/50' : 'border-neutral-200/60 bg-white hover:border-neutral-300 dark:border-border/50 dark:bg-accent/30 dark:hover:border-border/80'}`}
       >
         <div
           className={`z-10 select-none truncate py-1.5 pr-1 pl-2 font-barlow font-medium text-muted-foreground text-xs ${

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

@@ -0,0 +1,330 @@
+'use client'
+
+import type { AssetInput } from '@pascal-app/core'
+import NextImage from 'next/image'
+import { useEffect, useState } from 'react'
+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'
+
+const PLACEMENT_TAGS = new Set(['floor', 'wall', 'ceiling', 'countertop'])
+
+export function ItemsPanel({
+  items,
+  onSearchChange,
+  searchResults,
+  leadingTile,
+  emptyState,
+}: {
+  items?: AssetInput[]
+  /** Called when the search query changes (community edition uses this for server-side search) */
+  onSearchChange?: (query: string) => void
+  /** When non-null and search is active, these results bypass local filtering (server search results) */
+  searchResults?: AssetInput[] | null
+  /**
+   * Optional node rendered as the first grid cell, always visible. Used by the
+   * community edition to inject a "+ Generate with AI" tile.
+   */
+  leadingTile?: React.ReactNode
+  /**
+   * Optional node rendered when the grid has no items to show (empty category
+   * or no search results). Replaces the default "No results" message.
+   */
+  emptyState?: React.ReactNode
+}) {
+  const mode = useEditor((s) => s.mode)
+  const catalogCategory = useEditor((s) => s.catalogCategory)
+  const setMode = useEditor((s) => s.setMode)
+  const setTool = useEditor((s) => s.setTool)
+  const setCatalogCategory = useEditor((s) => s.setCatalogCategory)
+
+  const [activePlacementTag, setActivePlacementTag] = useState<string | null>(null)
+  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')
+  const [search, setSearch] = useState('')
+  const isServerSearch = onSearchChange !== undefined
+  // True when server search is active but results haven't come back yet
+  const isSearchPending = isServerSearch && search.length > 0 && searchResults === null
+
+  // Auto-select the first category when the panel mounts without one
+  useEffect(() => {
+    if (!(catalogCategory && furnishTools.some((c) => c.catalogCategory === catalogCategory))) {
+      setCatalogCategory(furnishTools[0]!.catalogCategory)
+    }
+  }, [catalogCategory, setCatalogCategory])
+
+  const activeCategory =
+    furnishTools.find((c) => c.catalogCategory === catalogCategory) ?? furnishTools[0]!
+
+  function selectCategory(categoryId: CatalogCategory) {
+    setCatalogCategory(categoryId)
+    setTool('item')
+    setActivePlacementTag(null)
+    setActiveFunctionalTag(null)
+    setSearch('')
+    if (mode !== 'build') setMode('build')
+  }
+
+  // Compute tags for the current category (for filter chips)
+  const baseItems = items ?? CATALOG_ITEMS
+  // Apply the Library/Community/Mine filter before any category/tag work.
+  // Items that don't carry a source field (e.g. seeded built-in catalog
+  // entries from `CATALOG_ITEMS`) fall under "library".
+  //
+  // Community is broader than just other users' uploads: my own *published*
+  // items show up there too so I can preview my catalog the way other users
+  // see it. My drafts only appear under Mine.
+  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 sourceItems = baseItems.filter(matchesSource)
+  const categoryItems = sourceItems.filter(
+    (item) => item.category === activeCategory.catalogCategory,
+  )
+
+  // The three source chips are always shown so users can discover the
+  // filter even before they own any items. Selecting "Mine" with no
+  // matching items falls through to the empty/no-results state.
+  const sourceChips: Array<{ id: AssetInput['source']; label: string }> = [
+    { id: 'library', label: 'Library' },
+    { id: 'community', label: 'Community' },
+    { id: 'mine', label: 'Mine' },
+  ]
+  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 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
+
+  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
+
+  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">
+        {furnishTools.map((cat) => {
+          const isActive = activeCategory.catalogCategory === cat.catalogCategory
+          return (
+            <button
+              className={cn(
+                'flex shrink-0 flex-col items-center gap-1 rounded-xl px-3 py-2 transition-colors',
+                isActive
+                  ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                  : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground',
+              )}
+              key={cat.catalogCategory}
+              onClick={() => selectCategory(cat.catalogCategory)}
+              type="button"
+            >
+              <NextImage
+                alt={cat.label}
+                className={cn('size-7 object-contain', !isActive && 'opacity-60 grayscale')}
+                height={28}
+                src={cat.iconSrc}
+                width={28}
+              />
+              <span className="font-medium text-[10px] leading-none">{cat.label}</span>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Search + filters (non-scrollable) */}
+      <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. */}
+          <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}
+          />
+          {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
+                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>
+
+        {hasFilters && !search && !isServerSearch && (
+          <div className="flex flex-col gap-1.5">
+            {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>
+            )}
+
+            {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>
+        )}
+      </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
+            activeFunctionalTag={isServerSearch ? null : activeFunctionalTag}
+            activePlacementTag={isServerSearch ? null : activePlacementTag}
+            category={activeCategory.catalogCategory}
+            emptyState={emptyState}
+            items={activeSource && items ? items.filter(matchesSource) : items}
+            key={activeCategory.catalogCategory}
+            leadingTile={leadingTile}
+            overrideItems={
+              isServerSearch && search
+                ? activeSource && searchResults
+                  ? searchResults.filter(matchesSource)
+                  : (searchResults ?? undefined)
+                : undefined
+            }
+            search={isServerSearch ? '' : search}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -3,9 +3,9 @@ import {
   type AnyNodeId,
   type BuildingNode,
   emitter,
-  GuideNode,
+  type GuideNode,
   LevelNode,
-  ScanNode,
+  type ScanNode,
   type SiteNode,
   useScene,
   type ZoneNode,
@@ -32,14 +32,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from './../../../../../components/ui/primitives/popover'
-import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
-import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
-
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from './../../../../../lib/level-duplication'
-
+import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
+import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { useUploadStore } from '../../../../../store/use-upload'

package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx

@@ -50,13 +50,7 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image
-          alt=""
-          className="object-contain"
-          height={14}
-          src="/icons/site.png"
-          width={14}
-        />
+        <Image alt="" className="object-contain" height={14} src="/icons/site.png" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -82,7 +82,9 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
 
   switch (nodeType) {
     case 'building':
-      return <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `building_${string}`} />
+      return (
+        <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `building_${string}`} />
+      )
     case 'ceiling':
       return <CeilingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'column':

package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx

@@ -44,7 +44,9 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       depth={depth}
       expanded={false}
       hasChildren={false}
-      icon={<ColorDot color={color ?? '#3b82f6'} onChange={(c) => updateNode(nodeId, { color: c })} />}
+      icon={
+        <ColorDot color={color ?? '#3b82f6'} onChange={(c) => updateNode(nodeId, { color: c })} />
+      }
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}

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

@@ -41,7 +41,7 @@ function ZoneItem({ zone }: { zone: ZoneNode }) {
       className={cn(
         'group/row mx-1 mb-0.5 flex h-8 cursor-pointer select-none items-center rounded-lg border px-2 text-sm transition-all duration-200',
         isSelected
-          ? 'border-neutral-200/60 bg-white text-foreground shadow-[0_1px_2px_0px_rgba(0,0,0,0.05)] ring-1 ring-white/50 ring-inset dark:border-border/50 dark:bg-accent/50 dark:ring-white/10'
+          ? 'border-neutral-200/60 bg-white text-foreground shadow-elevation-0 ring-1 ring-white/50 ring-inset dark:border-border/50 dark:bg-accent/50 dark:ring-white/10'
           : 'border-transparent text-muted-foreground hover:border-neutral-200/50 hover:bg-white/40 hover:text-foreground dark:hover:border-border/40 dark:hover:bg-accent/30',
       )}
       onClick={handleClick}

package/src/components/ui/slider.tsx

@@ -17,7 +17,7 @@ const sliderVariants = cva(
           [&_[data-slot=slider-track]]:border
           [&_[data-slot=slider-track]]:border-neutral-300
           [&_[data-slot=slider-track]]:bg-white/50
-          [&_[data-slot=slider-track]]:shadow-[0_1px_2px_0px_rgba(0,0,0,0.1)]
+          [&_[data-slot=slider-track]]:shadow-elevation-0
           [&_[data-slot=slider-track]]:ring-1
           [&_[data-slot=slider-track]]:ring-white
           [&_[data-slot=slider-track]]:ring-inset