@pascal-app/editor 0.4.0

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

@@ -0,0 +1,271 @@
+import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
+import { ChevronRight } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import { forwardRef, useEffect, useRef } from 'react'
+
+export function handleTreeSelection(
+  e: React.MouseEvent,
+  nodeId: string,
+  selectedIds: string[],
+  setSelection: (s: any) => void,
+) {
+  if (e.metaKey || e.ctrlKey) {
+    if (selectedIds.includes(nodeId)) {
+      setSelection({ selectedIds: selectedIds.filter((id) => id !== nodeId) })
+    } else {
+      setSelection({ selectedIds: [...selectedIds, nodeId] })
+    }
+    return true
+  }
+
+  if (e.shiftKey && selectedIds.length > 0) {
+    const lastSelectedId = selectedIds[selectedIds.length - 1]
+    if (lastSelectedId) {
+      const nodes = Array.from(document.querySelectorAll('[data-treenode-id]'))
+      const nodeIds = nodes.map((n) => n.getAttribute('data-treenode-id') as string)
+
+      const startIndex = nodeIds.indexOf(lastSelectedId)
+      const endIndex = nodeIds.indexOf(nodeId)
+
+      if (startIndex !== -1 && endIndex !== -1) {
+        const start = Math.min(startIndex, endIndex)
+        const end = Math.max(startIndex, endIndex)
+        const range = nodeIds.slice(start, end + 1)
+
+        // We can keep the previous selections that were outside the range if we want,
+        // but standard file system shift-click replaces the selection with the range.
+        setSelection({ selectedIds: range })
+        return true
+      }
+    }
+    // Fallback: if range selection fails (e.g. node not visible in tree), just add to selection
+    if (!selectedIds.includes(nodeId)) {
+      setSelection({ selectedIds: [...selectedIds, nodeId] })
+      return true
+    }
+  }
+
+  setSelection({ selectedIds: [nodeId] })
+  return false
+}
+
+export function focusTreeNode(nodeId: AnyNodeId) {
+  emitter.emit('camera-controls:focus', { nodeId })
+}
+
+import { cn } from '../../../../../lib/utils'
+import { BuildingTreeNode } from './building-tree-node'
+import { CeilingTreeNode } from './ceiling-tree-node'
+import { DoorTreeNode } from './door-tree-node'
+import { ItemTreeNode } from './item-tree-node'
+import { LevelTreeNode } from './level-tree-node'
+import { RoofTreeNode } from './roof-tree-node'
+import { SlabTreeNode } from './slab-tree-node'
+import { StairTreeNode } from './stair-tree-node'
+import { WallTreeNode } from './wall-tree-node'
+import { WindowTreeNode } from './window-tree-node'
+import { ZoneTreeNode } from './zone-tree-node'
+
+interface TreeNodeProps {
+  nodeId: AnyNodeId
+  depth?: number
+  isLast?: boolean
+}
+
+export function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
+  const node = useScene((state) => state.nodes[nodeId])
+
+  if (!node) return null
+
+  switch (node.type) {
+    case 'building':
+      return <BuildingTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'ceiling':
+      return <CeilingTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'level':
+      return <LevelTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'slab':
+      return <SlabTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'wall':
+      return <WallTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'roof':
+      return <RoofTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'stair':
+      return <StairTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'item':
+      return <ItemTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'door':
+      return <DoorTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'window':
+      return <WindowTreeNode depth={depth} isLast={isLast} node={node as any} />
+    case 'zone':
+      return <ZoneTreeNode depth={depth} isLast={isLast} node={node as any} />
+    default:
+      return null
+  }
+}
+
+interface TreeNodeWrapperProps {
+  nodeId?: string
+  icon: React.ReactNode
+  label: React.ReactNode
+  depth: number
+  hasChildren: boolean
+  expanded: boolean
+  onToggle: () => void
+  onClick: (e: React.MouseEvent) => void
+  onDoubleClick?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+  onPointerDown?: (e: React.PointerEvent) => void
+  actions?: React.ReactNode
+  children?: React.ReactNode
+  isSelected?: boolean
+  isHovered?: boolean
+  isVisible?: boolean
+  isLast?: boolean
+  isDraggable?: boolean
+  isDropTarget?: boolean
+}
+
+export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
+  function TreeNodeWrapper(
+    {
+      nodeId,
+      icon,
+      label,
+      depth,
+      hasChildren,
+      expanded,
+      onToggle,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerDown,
+      actions,
+      children,
+      isSelected,
+      isHovered,
+      isVisible = true,
+      isLast,
+      isDraggable,
+      isDropTarget,
+    },
+    ref,
+  ) {
+    const rowRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (isSelected && rowRef.current) {
+        rowRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      }
+    }, [isSelected])
+
+    return (
+      <div data-treenode-id={nodeId} ref={ref}>
+        <div
+          className={cn(
+            'group/row relative flex h-8 cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b text-sm transition-all duration-200',
+            isSelected
+              ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
+              : isDropTarget
+                ? 'bg-blue-500/15 text-foreground ring-1 ring-blue-500/40 ring-inset'
+                : isHovered
+                  ? 'bg-accent/30 text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+            !isVisible && 'opacity-50',
+            isDraggable && 'cursor-grab active:cursor-grabbing',
+          )}
+          onClick={onClick}
+          onDoubleClick={onDoubleClick}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onPointerDown={onPointerDown}
+          ref={rowRef}
+          style={{ paddingLeft: depth * 12 + 12, paddingRight: 12 }}
+        >
+          {/* Vertical tree line */}
+          <div
+            className={cn(
+              'pointer-events-none absolute w-px bg-border/50',
+              isLast ? 'top-0 bottom-1/2' : 'top-0 bottom-0',
+            )}
+            style={{ left: (depth - 1) * 12 + 20 }}
+          />
+          {/* Horizontal branch line */}
+          <div
+            className="pointer-events-none absolute top-1/2 h-px bg-border/50"
+            style={{ left: (depth - 1) * 12 + 20, width: 4 }}
+          />
+          {/* Line down to children */}
+          {hasChildren && expanded && (
+            <div
+              className="pointer-events-none absolute top-1/2 bottom-0 w-px bg-border/50"
+              style={{ left: depth * 12 + 20 }}
+            />
+          )}
+
+          <button
+            className="z-10 flex h-4 w-4 shrink-0 items-center justify-center bg-inherit"
+            onClick={(e) => {
+              e.stopPropagation()
+              onToggle()
+            }}
+          >
+            {hasChildren ? (
+              <motion.div
+                animate={{ rotate: expanded ? 90 : 0 }}
+                initial={false}
+                transition={{ duration: 0.2 }}
+              >
+                <ChevronRight className="h-3 w-3" />
+              </motion.div>
+            ) : null}
+          </button>
+          <div className="flex min-w-0 flex-1 items-center gap-1.5">
+            <span
+              className={cn(
+                'flex h-4 w-4 shrink-0 items-center justify-center transition-all duration-200',
+                !isSelected && 'opacity-60 grayscale',
+              )}
+            >
+              {icon}
+            </span>
+            <div
+              className={cn(
+                'min-w-0 flex-1 truncate',
+                !isVisible && 'text-muted-foreground line-through',
+              )}
+            >
+              {label}
+            </div>
+          </div>
+          {actions && (
+            <div
+              className={cn(
+                'pr-1 opacity-0 transition-opacity duration-200 group-hover/row:opacity-100',
+                !isVisible && 'opacity-100',
+              )}
+            >
+              {actions}
+            </div>
+          )}
+        </div>
+        <AnimatePresence initial={false}>
+          {expanded && children && (
+            <motion.div
+              animate={{ height: 'auto', opacity: 1 }}
+              className="overflow-hidden"
+              exit={{ height: 0, opacity: 0 }}
+              initial={{ height: 0, opacity: 0 }}
+              transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    )
+  },
+)

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

@@ -0,0 +1,106 @@
+import { type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface WallTreeNodeProps {
+  node: WallNode
+  depth: number
+  isLast?: boolean
+}
+
+export function WallTreeNode({ node, depth, isLast }: WallTreeNodeProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = selectedIds.includes(node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  useEffect(() => {
+    if (selectedIds.length === 0) return
+    const nodes = useScene.getState().nodes
+    let isDescendant = false
+    for (const id of selectedIds) {
+      let current = nodes[id as AnyNodeId]
+      while (current?.parentId) {
+        if (current.parentId === node.id) {
+          isDescendant = true
+          break
+        }
+        current = nodes[current.parentId as AnyNodeId]
+      }
+      if (isDescendant) break
+    }
+    if (isDescendant) {
+      setExpanded(true)
+    }
+  }, [selectedIds, node.id])
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+    if (!handled && useEditor.getState().phase === 'furnish') {
+      useEditor.getState().setPhase('structure')
+    }
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredId(null)
+  }
+
+  const defaultName = 'Wall'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={expanded}
+      hasChildren={node.children.length > 0}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/wall.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={node.id}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={() => setExpanded(!expanded)}
+    >
+      {node.children.map((childId, index) => (
+        <TreeNode
+          depth={depth + 1}
+          isLast={index === node.children.length - 1}
+          key={childId}
+          nodeId={childId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+}

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

@@ -0,0 +1,64 @@
+'use client'
+
+import type { WindowNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface WindowTreeNodeProps {
+  node: WindowNode
+  depth: number
+  isLast?: boolean
+}
+
+export function WindowTreeNode({ node, depth, isLast }: WindowTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = selectedIds.includes(node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const defaultName = 'Window'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/window.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={node.id}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation()
+        const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
+        if (!handled && useEditor.getState().phase === 'furnish') {
+          useEditor.getState().setPhase('structure')
+        }
+      }}
+      onDoubleClick={() => focusTreeNode(node.id)}
+      onMouseEnter={() => setHoveredId(node.id)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+}

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

@@ -0,0 +1,87 @@
+import { useScene, type ZoneNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useState } from 'react'
+import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface ZoneTreeNodeProps {
+  node: ZoneNode
+  depth: number
+  isLast?: boolean
+}
+
+export function ZoneTreeNode({ node, depth, isLast }: ZoneTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const updateNode = useScene((state) => state.updateNode)
+  const isSelected = useViewer((state) => state.selection.zoneId === node.id)
+  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const handleClick = () => {
+    setSelection({ zoneId: node.id })
+  }
+
+  const handleDoubleClick = () => {
+    focusTreeNode(node.id)
+  }
+
+  const handleMouseEnter = () => {
+    setHoveredId(node.id)
+  }
+
+  const handleMouseLeave = () => {
+    setHoveredId(null)
+  }
+
+  // Calculate approximate area from polygon
+  const area = calculatePolygonArea(node.polygon).toFixed(1)
+  const defaultName = `Zone (${area}m²)`
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={<ColorDot color={node.color} onChange={(color) => updateNode(node.id, { color })} />}
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          node={node}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={() => {}}
+    />
+  )
+}
+
+/**
+ * Calculate the area of a polygon using the shoelace formula
+ */
+function calculatePolygonArea(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
+}

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

@@ -0,0 +1,167 @@
+import { emitter, useScene, type ZoneNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Camera, Hexagon, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './../../../../../components/ui/primitives/popover'
+import { cn } from './../../../../../lib/utils'
+import useEditor from './../../../../../store/use-editor'
+
+function ZoneItem({ zone }: { zone: ZoneNode }) {
+  const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
+  const deleteNode = useScene((state) => state.deleteNode)
+  const updateNode = useScene((state) => state.updateNode)
+  const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const setSelection = useViewer((state) => state.setSelection)
+
+  const isSelected = selectedZoneId === zone.id
+
+  const handleClick = () => {
+    setSelection({ zoneId: zone.id })
+  }
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    deleteNode(zone.id)
+    if (isSelected) {
+      setSelection({ zoneId: null })
+    }
+  }
+
+  const handleColorChange = (color: string) => {
+    updateNode(zone.id, { color })
+  }
+
+  return (
+    <div
+      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-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}
+    >
+      <span className="mr-2">
+        <ColorDot color={zone.color} onChange={handleColorChange} />
+      </span>
+      <Hexagon className="mr-1.5 h-3.5 w-3.5 shrink-0" />
+      <span className="flex-1 truncate">{zone.name}</span>
+      {/* Camera snapshot button */}
+      <Popover onOpenChange={setCameraPopoverOpen} open={cameraPopoverOpen}>
+        <PopoverTrigger asChild>
+          <button
+            className="relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/row:opacity-100 dark:hover:bg-white/10"
+            onClick={(e) => e.stopPropagation()}
+            title="Camera snapshot"
+          >
+            <Camera className="h-3 w-3" />
+            {zone.camera && (
+              <span className="absolute top-0.5 right-0.5 h-1.5 w-1.5 rounded-full bg-primary" />
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-auto p-1"
+          onClick={(e) => e.stopPropagation()}
+          side="right"
+        >
+          <div className="flex flex-col gap-0.5">
+            {zone.camera && (
+              <button
+                className="flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-popover-foreground text-sm hover:bg-accent"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  emitter.emit('camera-controls:view', { nodeId: zone.id })
+                  setCameraPopoverOpen(false)
+                }}
+              >
+                <Camera className="h-3.5 w-3.5" />
+                View snapshot
+              </button>
+            )}
+            <button
+              className="flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-popover-foreground text-sm hover:bg-accent"
+              onClick={(e) => {
+                e.stopPropagation()
+                emitter.emit('camera-controls:capture', { nodeId: zone.id })
+                setCameraPopoverOpen(false)
+              }}
+            >
+              <Camera className="h-3.5 w-3.5" />
+              {zone.camera ? 'Update snapshot' : 'Take snapshot'}
+            </button>
+            {zone.camera && (
+              <button
+                className="flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-popover-foreground text-sm hover:bg-destructive hover:text-destructive-foreground"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  updateNode(zone.id, { camera: undefined })
+                  setCameraPopoverOpen(false)
+                }}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                Clear snapshot
+              </button>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+      <button
+        className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/row:opacity-100 dark:hover:bg-white/10"
+        onClick={handleDelete}
+      >
+        <Trash2 className="h-3 w-3" />
+      </button>
+    </div>
+  )
+}
+
+export function ZonePanel() {
+  const nodes = useScene((state) => state.nodes)
+  const currentLevelId = useViewer((state) => state.selection.levelId)
+  const setPhase = useEditor((state) => state.setPhase)
+  const setMode = useEditor((state) => state.setMode)
+  const setTool = useEditor((state) => state.setTool)
+
+  // Filter nodes to get zones for the current level
+  const levelZones = Object.values(nodes).filter(
+    (node): node is ZoneNode => node.type === 'zone' && node.parentId === currentLevelId,
+  )
+
+  const handleAddZone = () => {
+    if (currentLevelId) {
+      setPhase('structure')
+      setMode('build')
+      setTool('zone')
+    }
+  }
+
+  if (!currentLevelId) {
+    return (
+      <div className="px-3 py-4 text-muted-foreground text-sm">
+        Select a level to view and create zones
+      </div>
+    )
+  }
+
+  return (
+    <div className="py-1">
+      {levelZones.length === 0 ? (
+        <div className="px-3 py-4 text-muted-foreground text-sm">
+          No zones on this level.{' '}
+          <button className="cursor-pointer text-primary hover:underline" onClick={handleAddZone}>
+            Add one
+          </button>
+        </div>
+      ) : (
+        levelZones.map((zone) => <ZoneItem key={zone.id} zone={zone} />)
+      )}
+    </div>
+  )
+}