@tldiagram/core-ui 1.95.1 → 2.0.0

package/src/components/ProxyConnectorPanel.tsx

@@ -1,15 +1,19 @@
-import { Box, Button, HStack, Icon, Text, VStack, Divider, Flex } from '@chakra-ui/react'
+import { Box, Button, HStack, Icon, Text, VStack, Divider, Flex, IconButton } from '@chakra-ui/react'
 import { useNavigate } from 'react-router-dom'
 import type { ProxyConnectorDetails } from '../crossBranch/types'
 import SlidingPanel from './SlidingPanel'
 import PanelHeader from './PanelHeader'
-import { ChevronRightIcon, NavigationIcon } from './Icons'
+import { ChevronRightIcon, NavigationIcon, TrashIcon, EditIcon } from './Icons'
+import { useViewEditorContext } from '../pages/ViewEditor/context'
+import type { Connector } from '../types'
 
 interface Props {
   isOpen: boolean
   onClose: () => void
   details: ProxyConnectorDetails | null
   hasBackdrop?: boolean
+  onEdit?: (connector: Connector) => void
+  onDelete?: (connectorId: number, ownerViewId: number) => void
 }
 
 export default function ProxyConnectorPanel({
@@ -17,8 +21,11 @@ export default function ProxyConnectorPanel({
   onClose,
   details,
   hasBackdrop = true,
+  onEdit,
+  onDelete,
 }: Props) {
   const navigate = useNavigate()
+  const { canEdit } = useViewEditorContext()
 
   return (
     <SlidingPanel
@@ -27,6 +34,7 @@ export default function ProxyConnectorPanel({
       panelKey="proxy-connector-panel"
       width={{ base: 'calc(100vw - 24px)', md: '300px' }}
       hasBackdrop={hasBackdrop}
+      zIndex={950}
     >
       <PanelHeader title="Relationships" onClose={onClose} />
 
@@ -71,21 +79,54 @@ export default function ProxyConnectorPanel({
                   >
                     <VStack align="stretch" spacing={3}>
                       <Box>
-                        <HStack spacing={2} mb={1}>
-                          <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                            {leaf.source.actualElementName}
-                          </Text>
-                          <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
-                          <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                            {leaf.target.actualElementName}
-                          </Text>
-                        </HStack>
+                        <HStack justify="space-between" align="start">
+                          <VStack align="start" spacing={1} flex={1}>
+                            <HStack spacing={2}>
+                              <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
+                                {leaf.source.actualElementName}
+                              </Text>
+                              <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
+                              <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
+                                {leaf.target.actualElementName}
+                              </Text>
+                            </HStack>
+
+                            {(leaf.connector.label || leaf.connector.relationship) && (
+                              <Text color="gray.400" fontSize="xs" fontStyle={!leaf.connector.label ? 'italic' : 'normal'}>
+                                {leaf.connector.label || leaf.connector.relationship}
+                              </Text>
+                            )}
+                          </VStack>
 
-                        {(leaf.connector.label || leaf.connector.relationship) && (
-                          <Text color="gray.400" fontSize="xs" fontStyle={!leaf.connector.label ? 'italic' : 'normal'}>
-                            {leaf.connector.label || leaf.connector.relationship}
-                          </Text>
-                        )}
+                          {canEdit && (
+                            <HStack spacing={1} mt={-1}>
+                              <IconButton
+                                aria-label="Edit connector"
+                                icon={<EditIcon size={14} />}
+                                size="xs"
+                                variant="ghost"
+                                color="blue.300"
+                                _hover={{ bg: 'blue.900', color: 'blue.100' }}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  onEdit?.(leaf.connector)
+                                }}
+                              />
+                              <IconButton
+                                aria-label="Delete connector"
+                                icon={<TrashIcon size={14} />}
+                                size="xs"
+                                variant="ghost"
+                                color="red.400"
+                                _hover={{ bg: 'red.900', color: 'red.100' }}
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  onDelete?.(leaf.connector.id, leaf.ownerViewId)
+                                }}
+                              />
+                            </HStack>
+                          )}
+                        </HStack>
                       </Box>
 
                       {leaf.connector.description && (
@@ -128,3 +169,4 @@ export default function ProxyConnectorPanel({
     </SlidingPanel>
   )
 }
+

package/src/components/ViewBezierConnector.tsx

@@ -1,6 +1,7 @@
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import { BaseEdge, EdgeLabelRenderer, Position, useStore, type EdgeProps } from 'reactflow'
 import { measureEdgeLabel, useEdgeLabelLayout } from './ViewEditorEdgeLabelLayout'
+import type { ProxyConnectorDetails } from '../crossBranch/types'
 
 const CURVATURE = 0.5
 
@@ -35,6 +36,7 @@ function ViewBezierConnector({
 }: EdgeProps) {
   const sourceNode = useStore((s) => s.nodeInternals.get(source))
   const targetNode = useStore((s) => s.nodeInternals.get(target))
+  const edge = useStore((s) => s.edges.find((candidate) => candidate.id === id))
 
   const finalSourceX = sourceX
   const finalSourceY = sourceY
@@ -74,6 +76,37 @@ function ViewBezierConnector({
   const text = (!selected && fullText.length > 30) ? `${fullText.slice(0, 30)}...` : fullText
   const textWidth = text ? measureEdgeLabel(text, `${fontWeight} ${fontSize}px Inter, system-ui, sans-serif`) : 0
   const padding = Array.isArray(labelBgPadding) ? labelBgPadding : [2, 4]
+  const proxyBadgeCount = typeof (edge?.data as { proxyBadgeCount?: number } | undefined)?.proxyBadgeCount === 'number'
+    ? (edge?.data as { proxyBadgeCount: number }).proxyBadgeCount
+    : 0
+  const proxyBadgeDetails = ((edge?.data as { proxyBadgeDetails?: ProxyConnectorDetails | null } | undefined)?.proxyBadgeDetails) ?? null
+  const proxyBadgeText = proxyBadgeCount > 0 ? `+${proxyBadgeCount}` : ''
+  const versionChangeType = (edge?.data as { versionChangeType?: string } | undefined)?.versionChangeType
+  const versionBadgeText = versionChangeType === 'added'
+    ? '+ connector'
+    : versionChangeType === 'deleted'
+      ? '- connector'
+      : versionChangeType
+        ? '~ connector'
+        : ''
+  const badgeFontSize = 11
+  const badgeHorizontalPadding = 7
+  const badgeSize = 24
+  const labelWidth = textWidth + padding[1] * 2
+  const versionBadgeWidth = versionBadgeText
+    ? measureEdgeLabel(versionBadgeText, `700 ${badgeFontSize}px Inter, system-ui, sans-serif`) + badgeHorizontalPadding * 2
+    : 0
+  const badgeWidth = proxyBadgeText
+    ? Math.max(badgeSize, measureEdgeLabel(proxyBadgeText, `600 ${badgeFontSize}px Inter, system-ui, sans-serif`) + badgeHorizontalPadding * 2)
+    : 0
+  const labelHeight = text ? fontSize + padding[0] * 2 : 0
+  const badgeGap = (text && (proxyBadgeText || versionBadgeText)) || (proxyBadgeText && versionBadgeText) ? 8 : 0
+  const stackWidth = Math.max(labelWidth, badgeWidth, versionBadgeWidth)
+  const stackHeight = labelHeight +
+    (text && (proxyBadgeText || versionBadgeText) ? badgeGap : 0) +
+    (versionBadgeText ? badgeSize : 0) +
+    (versionBadgeText && proxyBadgeText ? badgeGap : 0) +
+    (proxyBadgeText ? badgeSize : 0)
 
   // Cubic bezier midpoint at t=0.5
   const labelX = 0.125 * finalSourceX + 0.375 * cp1x + 0.375 * cp2x + 0.125 * finalTargetX
@@ -82,16 +115,23 @@ function ViewBezierConnector({
   const labelLayout = useEdgeLabelLayout({
     id,
     preferredX: labelX,
-    preferredY: labelY,
-    width: textWidth + padding[1] * 2,
-    height: fontSize + padding[0] * 2,
+    preferredY: labelY + (stackHeight > 0 ? (stackHeight - labelHeight) / 2 : 0),
+    width: stackWidth,
+    height: stackHeight || (fontSize + padding[0] * 2),
     dx: finalTargetX - finalSourceX,
     dy: finalTargetY - finalSourceY,
   })
 
-  const labelWidth = textWidth + padding[1] * 2
-  const labelPath = text ? ` M ${labelLayout.x - labelWidth / 2},${labelLayout.y} L ${labelLayout.x + labelWidth / 2},${labelLayout.y}` : ''
+  const labelCenterY = labelLayout.y - ((proxyBadgeText || versionBadgeText) ? (stackHeight - labelHeight) / 2 : 0)
+  const labelPath = text ? ` M ${labelLayout.x - labelWidth / 2},${labelCenterY} L ${labelLayout.x + labelWidth / 2},${labelCenterY}` : ''
   const combinedInteractionPath = `${interactionPath}${labelPath}`
+  const handleBadgeClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!proxyBadgeDetails) return
+    const onOpenProxyBadge = (edge?.data as { onOpenProxyBadge?: (details: ProxyConnectorDetails) => void } | undefined)?.onOpenProxyBadge
+    onOpenProxyBadge?.(proxyBadgeDetails)
+  }, [edge?.data, proxyBadgeDetails])
 
   return (
     <>
@@ -108,7 +148,7 @@ function ViewBezierConnector({
         interactionWidth={20}
         style={{ stroke: 'transparent' }}
       />
-      {text && (
+      {(text || proxyBadgeText || versionBadgeText) && (
         <EdgeLabelRenderer>
           <div
             style={{
@@ -117,22 +157,77 @@ function ViewBezierConnector({
               pointerEvents: 'none',
               opacity: Number(labelStyle?.opacity ?? 1),
               zIndex: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: badgeGap,
             }}
           >
-            <div
-              style={{
-                padding: `${padding[0]}px ${padding[1]}px`,
-                borderRadius: Array.isArray(labelBgBorderRadius) ? labelBgBorderRadius[0] : Number(labelBgBorderRadius ?? 4),
-                background: String(labelBgStyle?.fill ?? 'var(--chakra-colors-gray-900)'),
-                color: String(labelStyle?.fill ?? 'var(--accent)'),
-                fontSize,
-                fontWeight,
-                lineHeight: 1,
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {text}
-            </div>
+            {text && (
+              <div
+                style={{
+                  padding: `${padding[0]}px ${padding[1]}px`,
+                  borderRadius: Array.isArray(labelBgBorderRadius) ? labelBgBorderRadius[0] : Number(labelBgBorderRadius ?? 4),
+                  background: String(labelBgStyle?.fill ?? 'var(--chakra-colors-gray-900)'),
+                  color: String(labelStyle?.fill ?? 'var(--accent)'),
+                  fontSize,
+                  fontWeight,
+                  lineHeight: 1,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {text}
+              </div>
+            )}
+            {proxyBadgeText && (
+              <button
+                type="button"
+                onClick={handleBadgeClick}
+                style={{
+                  minWidth: badgeWidth,
+                  height: badgeSize,
+                  padding: `0 ${badgeHorizontalPadding}px`,
+                  borderRadius: 999,
+                  background: 'var(--bg-element)',
+                  border: '1px dashed rgba(var(--accent-rgb), 0.8)',
+                  color: 'white',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: badgeFontSize,
+                  fontWeight: 600,
+                  lineHeight: 1,
+                  boxShadow: selected ? '0 0 0 1px rgba(255,255,255,0.2)' : 'none',
+                  cursor: proxyBadgeDetails ? 'pointer' : 'default',
+                  pointerEvents: 'auto',
+                  appearance: 'none',
+                }}
+              >
+                {proxyBadgeText}
+              </button>
+            )}
+            {versionBadgeText && (
+              <div
+                style={{
+                  minWidth: versionBadgeWidth,
+                  height: badgeSize,
+                  padding: `0 ${badgeHorizontalPadding}px`,
+                  borderRadius: 999,
+                  background: 'rgba(17, 24, 39, 0.9)',
+                  border: `1px solid ${versionChangeType === 'added' ? '#68d391' : versionChangeType === 'deleted' ? '#fc8181' : '#f6e05e'}`,
+                  color: versionChangeType === 'added' ? '#68d391' : versionChangeType === 'deleted' ? '#fc8181' : '#f6e05e',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: badgeFontSize,
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
+                }}
+              >
+                {versionBadgeText}
+              </div>
+            )}
           </div>
         </EdgeLabelRenderer>
       )}

package/src/components/ViewExplorer/index.tsx

@@ -43,7 +43,7 @@ interface Props {
   tagColors: Record<string, Tag>
   selectedElement?: LibraryElement | null
   onUpdateTags?: (elementId: number, tags: string[]) => Promise<void>
-  onCreateTag: (tag: string, color?: string) => Promise<void>
+  onCreateTag: (tag: string, color?: string, description?: string) => Promise<void>
   layers: ViewLayer[]
   onHoverLayer: (tags: string[] | null, color?: string | null) => void
   onCreateLayer: (name: string, tags: string[], color: string) => Promise<void>

package/src/components/ViewFloatingMenu-vscode.tsx

@@ -20,6 +20,11 @@ interface ViewFloatingMenuProps {
   onImport: () => void
   onExport: () => void
   onShare: () => void
+  canUndo?: boolean
+  canRedo?: boolean
+  undoRedoDisabled?: boolean
+  onUndo?: () => void
+  onRedo?: () => void
   isFreePlan: boolean
   canUpgrade?: boolean
   activeTags?: string[]

package/src/components/ViewFloatingMenu.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import type { ViewFloatingMenuSlots } from '../slots'
 
 import {
-  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, useDisclosure
+  HStack, Tooltip, Button, Box, Text, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, IconButton, Slider, SliderTrack, SliderFilledTrack, SliderThumb, useDisclosure
 } from '@chakra-ui/react'
 import { DownloadIcon } from '@chakra-ui/icons'
 import {
@@ -17,6 +17,7 @@ import {
   TagsIcon,
 } from './Icons'
 import { KbdHint } from './PanelUI'
+import { RedoSvg, UndoSvg } from './ViewDrawMenu'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Tag, ViewLayer } from '../types'
 
@@ -35,6 +36,13 @@ export interface ViewFloatingMenuProps extends ViewFloatingMenuSlots {
   onShare?: () => void
   focusMode: boolean
   onFocusModeChange: (enabled: boolean) => void
+  densityLevel?: number
+  onDensityLevelChange?: (level: number) => void
+  canUndo?: boolean
+  canRedo?: boolean
+  undoRedoDisabled?: boolean
+  onUndo?: () => void
+  onRedo?: () => void
 
   // Tag-related props
   allTags: string[]
@@ -73,6 +81,13 @@ function ViewFloatingMenu({
   onExport,
   focusMode,
   onFocusModeChange,
+  densityLevel = 0,
+  onDensityLevelChange,
+  canUndo = false,
+  canRedo = false,
+  undoRedoDisabled = false,
+  onUndo,
+  onRedo,
   allTags,
   layers,
   tagColors,
@@ -90,6 +105,11 @@ function ViewFloatingMenu({
 }: ViewFloatingMenuProps) {
   const { canEdit } = useViewEditorContext()
   const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
+  const [draftDensityLevel, setDraftDensityLevel] = React.useState(densityLevel)
+
+  React.useEffect(() => {
+    setDraftDensityLevel(densityLevel)
+  }, [densityLevel])
 
   return (
     <HStack
@@ -131,6 +151,46 @@ function ViewFloatingMenu({
         </Button>
       </Tooltip>
 
+      {(canUndo || canRedo) && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          {canUndo && (
+            <Tooltip label="Undo" placement="top" openDelay={200}>
+              <IconButton
+                aria-label="Undo"
+                icon={<UndoSvg />}
+                variant="ghost"
+                h="28px"
+                minW="28px"
+                px={0}
+                color="gray.300"
+                isDisabled={undoRedoDisabled}
+                _disabled={{ opacity: 0.35, cursor: 'not-allowed' }}
+                _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                onClick={onUndo}
+              />
+            </Tooltip>
+          )}
+          {canRedo && (
+            <Tooltip label="Redo" placement="top" openDelay={200}>
+              <IconButton
+                aria-label="Redo"
+                icon={<RedoSvg />}
+                variant="ghost"
+                h="28px"
+                minW="28px"
+                px={0}
+                color="gray.300"
+                isDisabled={undoRedoDisabled}
+                _disabled={{ opacity: 0.35, cursor: 'not-allowed' }}
+                _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+                onClick={onRedo}
+              />
+            </Tooltip>
+          )}
+        </>
+      )}
+
       {!hideFocusView && (
         <>
           <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
@@ -265,6 +325,55 @@ function ViewFloatingMenu({
         </>
       )}
 
+      {onDensityLevelChange && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          <Tooltip label={`Density ${draftDensityLevel}`} placement="top" openDelay={200}>
+            <Box
+              w="92px"
+              h="28px"
+              px={2.5}
+              display="flex"
+              alignItems="center"
+              bg="whiteAlpha.50"
+              rounded="md"
+            >
+              <Slider
+                aria-label="Density"
+                min={-2}
+                max={2}
+                step={1}
+                value={draftDensityLevel}
+                onChange={setDraftDensityLevel}
+                onChangeEnd={(value) => {
+                  setDraftDensityLevel(value)
+                  onDensityLevelChange(value)
+                }}
+                focusThumbOnChange={false}
+              >
+                <SliderTrack h="3px" bg="whiteAlpha.200">
+                  <SliderFilledTrack bg="var(--accent)" />
+                </SliderTrack>
+                {[-2, -1, 0, 1, 2].map((value) => (
+                  <Box
+                    key={value}
+                    position="absolute"
+                    left={`${((value + 2) / 4) * 100}%`}
+                    top="50%"
+                    transform="translate(-50%, -50%)"
+                    w="1px"
+                    h="9px"
+                    bg={draftDensityLevel >= value ? 'var(--accent)' : 'whiteAlpha.400'}
+                    pointerEvents="none"
+                  />
+                ))}
+                <SliderThumb boxSize="12px" bg="white" border="2px solid" borderColor="var(--accent)" />
+              </Slider>
+            </Box>
+          </Tooltip>
+        </>
+      )}
+
       {/* Draw mode toggle */}
       <Tooltip
         label={drawingMode ? 'Exit drawing mode' : 'Draw on diagram'}

package/src/components/ViewGridNode.tsx

@@ -43,6 +43,9 @@ export interface ViewGridNodeData {
   name: string
   level_label: string | null
   counts?: { nodes: number; edges: number }
+  kind?: 'view' | 'cluster'
+  collapsedCount?: number
+  dimmed?: boolean
   focused: boolean
   canEdit: boolean
   isEditing: boolean
@@ -72,6 +75,7 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
 
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure()
   const [isTooltipOpen, setIsTooltipOpen] = useState(false)
+  const isCluster = data.kind === 'cluster'
 
   useEffect(() => {
     if (!isMenuOpen && !isTooltipOpen) return
@@ -114,6 +118,7 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
   }, [])
 
   useEffect(() => {
+    if (isCluster) return
     if (!hasRequested) return
 
     let active = true
@@ -141,13 +146,15 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
         URL.revokeObjectURL(url)
       }
     }
-  }, [hasRequested, data.id])
+  }, [hasRequested, data.id, isCluster])
 
   const borderColor = data.focused ? accent : 'rgba(255,255,255,0.14)'
 
   const boxShadow = data.focused
     ? `0 0 24px ${hexToRgba(accent, 0.4)}`
-    : '0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05)'
+    : isCluster
+      ? '0 14px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05)'
+      : '0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05)'
 
   return (
     // Outer container: sizing + group context, overflow visible for the "New Child" hover button
@@ -160,7 +167,26 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
       h="150px"
       position="relative"
       userSelect="none"
+      opacity={data.dimmed ? 0.5 : 1}
       transition="opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
+      _before={isCluster ? {
+        content: '""',
+        position: 'absolute',
+        inset: '8px -9px -8px 9px',
+        borderRadius: '12px',
+        border: '1px solid rgba(255,255,255,0.08)',
+        bg: 'rgba(var(--bg-element-rgb), 0.55)',
+        boxShadow: '0 8px 20px rgba(0,0,0,0.28)',
+      } : undefined}
+      _after={isCluster ? {
+        content: '""',
+        position: 'absolute',
+        inset: '16px -18px -16px 18px',
+        borderRadius: '12px',
+        border: '1px solid rgba(255,255,255,0.06)',
+        bg: 'rgba(var(--bg-element-rgb), 0.35)',
+        boxShadow: '0 8px 20px rgba(0,0,0,0.2)',
+      } : undefined}
     >
       <Handle
         type="target"
@@ -212,9 +238,32 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
           overflow="hidden"
           borderRadius="8px 8px 0 0"
           flexShrink={0}
-          bg="var(--bg-card-solid)"
+          bg={isCluster ? 'rgba(var(--bg-element-rgb), 0.88)' : 'var(--bg-card-solid)'}
         >
-          {thumbnailUrl ? (
+          {isCluster ? (
+            <Flex
+              position="absolute"
+              inset={0}
+              p={3}
+              gap={1.5}
+              align="flex-start"
+              justify="flex-start"
+              wrap="wrap"
+              bg="radial-gradient(circle at 80% 18%, rgba(var(--accent-rgb), 0.16), transparent 42px), linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))"
+            >
+              {Array.from({ length: Math.min(18, Math.max(6, data.collapsedCount ?? 6)) }).map((_, i) => (
+                <Box
+                  key={i}
+                  w={`${18 + (i % 4) * 6}px`}
+                  h="14px"
+                  borderRadius="5px"
+                  bg={i % 5 === 0 ? hexToRgba(accent, 0.2) : 'rgba(255,255,255,0.06)'}
+                  border="1px solid"
+                  borderColor={i % 5 === 0 ? hexToRgba(accent, 0.34) : 'rgba(255,255,255,0.07)'}
+                />
+              ))}
+            </Flex>
+          ) : thumbnailUrl ? (
             <Box
               as="img"
               src={thumbnailUrl}
@@ -294,7 +343,7 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
               </Text>
             )}
 
-            {!data.isEditing && (
+            {!data.isEditing && !isCluster && (
               <Flex align="center" gap={1} onClick={(e) => e.stopPropagation()} mt="-2px">
                 <Menu
                   isLazy
@@ -404,9 +453,11 @@ export default function ViewGridNode({ data }: { data: ViewGridNodeData }) {
               flexShrink={0}
               textShadow="0 1px 2px rgba(0,0,0,0.5)"
             >
-              {data.counts
-                ? `${data.counts.nodes}n · ${data.counts.edges}e`
-                : '-'}
+              {isCluster && data.collapsedCount
+                ? `${data.collapsedCount} views`
+                : data.counts
+                  ? `${data.counts.nodes}n · ${data.counts.edges}e`
+                  : '-'}
             </Text>
           </Flex>
         </Flex>

package/src/components/ViewPanel.tsx

@@ -28,6 +28,7 @@ interface Props {
   view: ViewTreeNode | null
   canEdit?: boolean
   onSave: (updated: ViewTreeNode) => void
+  onUnsupportedMutation?: () => void
   hasBackdrop?: boolean
 }
 
@@ -37,7 +38,7 @@ interface Props {
  * Location: Right side of the screen on desktop. Overlays screen on mobile.
  * Aliases: View Properties, View Settings.
  */
-function ViewPanel({ isOpen, onClose, view, canEdit: canEditProp, onSave, hasBackdrop = true }: Props) {
+function ViewPanel({ isOpen, onClose, view, canEdit: canEditProp, onSave, onUnsupportedMutation, hasBackdrop = true }: Props) {
   const ctx = useContext(ViewEditorContext)
   const canEdit = canEditProp ?? ctx?.canEdit ?? true
   const isReadOnly = !canEdit
@@ -118,7 +119,7 @@ function ViewPanel({ isOpen, onClose, view, canEdit: canEditProp, onSave, hasBac
               rows={4}
             />
           </FormControl>
-          <LayoutSection view={view} canEdit={canEdit} />
+          <LayoutSection view={view} canEdit={canEdit} onUnsupportedMutation={onUnsupportedMutation} />
 
           {view && (
             <Box pt={2} borderTop="1px solid" borderColor="whiteAlpha.50">