@tldiagram/core-ui 1.94.4 → 1.95.0

package/dist/pages/InfiniteZoom.d.ts

@@ -1,9 +1,11 @@
+import { type ZUICameraFrame } from '../components/ZUI';
 interface Props {
     sharedToken?: string;
     shareSlot?: React.ReactNode;
 }
 export interface InfiniteZoomHandle {
     focusDiagram(viewId: number): boolean;
+    setCameraFrame(frame: ZUICameraFrame): boolean;
 }
 declare const InfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;
 export default InfiniteZoom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.94.4",
+  "version": "1.95.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/PanelUI.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Box } from '@chakra-ui/react'
+import { Box, BoxProps } from '@chakra-ui/react'
 
-export function KbdHint({ children }: { children: string }) {
+export function KbdHint({ children, ...props }: { children: string } & BoxProps) {
   return (
     <Box
       as="span"
@@ -17,6 +17,7 @@ export function KbdHint({ children }: { children: string }) {
       color="whiteAlpha.900"
       flexShrink={0}
       ml={2}
+      {...props}
     >
       {children}
     </Box>

package/src/components/ViewExplorer/TagManager/index.tsx

@@ -60,6 +60,7 @@ export const TagManager: React.FC<Props> = ({
   layerCounts,
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isUnusedCollapsed, setIsUnusedCollapsed] = useState(true)
   const [expandedLayerIds, setExpandedLayerIds] = useState<Set<number>>(new Set())
   const [namingPopover, setNamingPopover] = useState<{
     isOpen: boolean;
@@ -122,7 +123,7 @@ export const TagManager: React.FC<Props> = ({
   const handleConfirmNaming = async (name: string) => {
     const { tags } = namingPopover
     if (!tags || tags.length === 0) return
-    
+
     const color = pickUnusedColor(Object.values(tagColors).map(t => t.color))
     await onCreateLayer(name, tags, color)
     setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null, targetLayerId: null }))
@@ -300,28 +301,53 @@ export const TagManager: React.FC<Props> = ({
                     <Divider borderColor="whiteAlpha.100" />
                   )}
                   {unusedTags.length > 0 && (
-                    <Wrap spacing={1} opacity={0.6}>
-                      {unusedTags.map((tag) => (
-                        <WrapItem key={tag}>
-                          <TagItem
-                            tag={tag}
-                            color={tagColors[tag]?.color || '#A0AEC0'}
-                            description={tagColors[tag]?.description || null}
-                            isAssigned={(selectedElement.tags || []).includes(tag)}
-                            tagCount={tagCounts[tag]}
-                            onToggle={() => onToggleTagOnElement(tag)}
-                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
-                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
-                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
-                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
-                            onConfirmNaming={handleConfirmNaming}
-                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
-                            onSetColor={(color) => onCreateTag(tag, color)}
-                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
-                          />
-                        </WrapItem>
-                      ))}
-                    </Wrap>
+                    <VStack align="stretch" spacing={2}>
+                      <HStack
+                        spacing={1.5}
+                        cursor="pointer"
+                        onClick={() => setIsUnusedCollapsed(!isUnusedCollapsed)}
+                        role="button"
+                        opacity={0.6}
+                        _hover={{ opacity: 1 }}
+                        transition="opacity 0.2s"
+                      >
+                        <Box
+                          transform={isUnusedCollapsed ? 'rotate(-90deg)' : 'none'}
+                          transition="transform 0.2s"
+                          display="flex"
+                          alignItems="center"
+                        >
+                          <ChevronDownIcon size={10} />
+                        </Box>
+                        <Text fontSize="10px" fontWeight="bold" color="gray.500" textTransform="uppercase" letterSpacing="0.05em">
+                          Unused on view ({unusedTags.length})
+                        </Text>
+                      </HStack>
+                      {!isUnusedCollapsed && (
+                        <Wrap spacing={1} opacity={0.6}>
+                          {unusedTags.map((tag) => (
+                            <WrapItem key={tag}>
+                              <TagItem
+                                tag={tag}
+                                color={tagColors[tag]?.color || '#A0AEC0'}
+                                description={tagColors[tag]?.description || null}
+                                isAssigned={(selectedElement.tags || []).includes(tag)}
+                                tagCount={tagCounts[tag]}
+                                onToggle={() => onToggleTagOnElement(tag)}
+                                onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                                onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                                onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                                namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                                onConfirmNaming={handleConfirmNaming}
+                                onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                                onSetColor={(color) => onCreateTag(tag, color)}
+                                onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                              />
+                            </WrapItem>
+                          ))}
+                        </Wrap>
+                      )}
+                    </VStack>
                   )}
                 </VStack>
               </Box>
@@ -385,26 +411,51 @@ export const TagManager: React.FC<Props> = ({
                     <Divider borderColor="whiteAlpha.100" />
                   )}
                   {unusedTags.length > 0 && (
-                    <Wrap spacing={2} opacity={0.6}>
-                      {unusedTags.map((tag) => (
-                        <WrapItem key={tag}>
-                          <TagItem
-                            tag={tag}
-                            color={tagColors[tag]?.color || '#A0AEC0'}
-                            description={tagColors[tag]?.description || null}
-                            tagCount={tagCounts[tag]}
-                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
-                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
-                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
-                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
-                            onConfirmNaming={handleConfirmNaming}
-                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
-                            onSetColor={(color) => onCreateTag(tag, color)}
-                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
-                          />
-                        </WrapItem>
-                      ))}
-                    </Wrap>
+                    <VStack align="stretch" spacing={2}>
+                      <HStack
+                        spacing={1.5}
+                        cursor="pointer"
+                        onClick={() => setIsUnusedCollapsed(!isUnusedCollapsed)}
+                        role="button"
+                        opacity={0.6}
+                        _hover={{ opacity: 1 }}
+                        transition="opacity 0.2s"
+                      >
+                        <Box
+                          transform={isUnusedCollapsed ? 'rotate(-90deg)' : 'none'}
+                          transition="transform 0.2s"
+                          display="flex"
+                          alignItems="center"
+                        >
+                          <ChevronDownIcon size={10} />
+                        </Box>
+                        <Text fontSize="10px" fontWeight="bold" color="gray.500" textTransform="uppercase" letterSpacing="0.05em">
+                          Other tags ({unusedTags.length})
+                        </Text>
+                      </HStack>
+                      {!isUnusedCollapsed && (
+                        <Wrap spacing={2} opacity={0.6}>
+                          {unusedTags.map((tag) => (
+                            <WrapItem key={tag}>
+                              <TagItem
+                                tag={tag}
+                                color={tagColors[tag]?.color || '#A0AEC0'}
+                                description={tagColors[tag]?.description || null}
+                                tagCount={tagCounts[tag]}
+                                onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                                onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                                onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                                namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                                onConfirmNaming={handleConfirmNaming}
+                                onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                                onSetColor={(color) => onCreateTag(tag, color)}
+                                onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                              />
+                            </WrapItem>
+                          ))}
+                        </Wrap>
+                      )}
+                    </VStack>
                   )}
                 </VStack>
               </Box>

package/src/components/ViewExplorer/ViewNavigator.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Box, Tooltip, VStack, Text, Divider } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { Box, Tooltip, VStack, Text, HStack } from '@chakra-ui/react'
 import { ZoomInIcon, ZoomOutIcon, ChevronDownIcon } from '../Icons'
 import { KbdHint } from '../PanelUI'
 import { NavItem } from './types'
@@ -20,6 +20,8 @@ export const ViewNavigator: React.FC<Props> = ({
   onFilterToggle,
   onHoverZoom,
 }) => {
+  const [hoveredType, setHoveredType] = useState<'out' | 'in' | null>(null)
+
   const renderNavButton = (type: 'out' | 'in', items: NavItem[]) => {
     const isOut = type === 'out'
     const label = isOut ? 'Zoom Out' : 'Zoom In'
@@ -28,6 +30,7 @@ export const ViewNavigator: React.FC<Props> = ({
     const disabled = items.length === 0
     const isActive = activeFilter === type
     const accentColor = isOut ? PARENT_VIEW_COLOR : CHILD_VIEW_COLOR
+    const isHovered = hoveredType === type
 
     const subtitle = disabled
       ? isOut
@@ -46,7 +49,7 @@ export const ViewNavigator: React.FC<Props> = ({
               : 'No child views'
             : `Navigate to ${isOut ? 'Parent' : 'Child'} View [${shortcut}]`
         }
-        placement="left"
+        placement="top"
         openDelay={400}
       >
         <Box
@@ -56,41 +59,125 @@ export const ViewNavigator: React.FC<Props> = ({
           disabled={disabled}
           onClick={() => onFilterToggle(type, items)}
           onMouseEnter={() => {
+            setHoveredType(type)
             if (disabled || items.length !== 1) return
             onHoverZoom?.(items[0].elementId ?? null, type)
           }}
           onMouseLeave={() => {
+            setHoveredType(null)
             if (disabled || items.length !== 1) return
             onHoverZoom?.(null, null)
           }}
           opacity={disabled ? 0.4 : 1}
+          flex={hoveredType === null ? 1 : (isHovered ? 4 : 1)}
+          transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+          minW={0}
+          overflow="hidden"
+          position="relative"
+          px={isHovered || hoveredType === null ? 3 : 1}
+          sx={{
+            '.panel-action-icon-container': {
+              transition: 'all 0.3s ease',
+              width: '28px',
+              height: '28px',
+              marginRight: isOut ? '0.5rem' : 0,
+              marginLeft: isOut ? 0 : '0.5rem',
+              position: 'relative',
+            }
+          }}
         >
-          <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
-            <IconCmp />
-          </Box>
-          <VStack align="start" spacing={0} flex={1} minW={0}>
-            <Text
-              fontSize="sm"
-              color={disabled ? 'gray.500' : 'white'}
-              fontWeight="medium"
-              isTruncated
-              w="full"
-              textAlign="left"
-            >
-              {label}
-            </Text>
-            <Text
-              fontSize="xs"
-              color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.400'}
-              isTruncated
-              w="full"
-              transition="color 0.15s"
-              textAlign="left"
-            >
-              {subtitle}
-            </Text>
-          </VStack>
-          {items.length > 1 && (
+          {isOut ? (
+            <>
+              <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
+                <IconCmp />
+                {items.length > 1 && (
+                  <Box
+                    position="absolute"
+                    bottom="-5px"
+                    right="-5px"
+                    color="white"
+                    fontSize="12px"
+                    fontWeight="bold"
+                    minW="14px"
+                    h="14px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    zIndex={2}
+                  >
+                    {items.length}
+                  </Box>
+                )}
+              </Box>
+              <VStack
+                align="start"
+                spacing={0}
+                flex={1}
+                minW={0}
+                opacity={hoveredType === 'in' ? 0 : 1}
+                transition="opacity 0.2s, transform 0.3s"
+                transform={hoveredType === 'in' ? 'translateX(-10px)' : 'none'}
+              >
+                <Text fontSize="xs" color={disabled ? 'gray.500' : 'white'} fontWeight="bold" isTruncated w="full" textAlign="left">
+                  {label}
+                </Text>
+                {isHovered && (
+                  <Text fontSize="10px" color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.500'} isTruncated w="full" transition="color 0.15s" textAlign="left">
+                    {subtitle}
+                  </Text>
+                )}
+              </VStack>
+              <Box opacity={hoveredType === 'in' ? 0 : 1} transition="opacity 0.2s">
+                <KbdHint ml={1}>{shortcut}</KbdHint>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box opacity={hoveredType === 'out' ? 0 : 1} transition="opacity 0.2s">
+                <KbdHint ml={0} mr={1}>{shortcut}</KbdHint>
+              </Box>
+              <VStack
+                align="end"
+                spacing={0}
+                flex={1}
+                minW={0}
+                opacity={hoveredType === 'out' ? 0 : 1}
+                transition="opacity 0.2s, transform 0.3s"
+                transform={hoveredType === 'out' ? 'translateX(10px)' : 'none'}
+              >
+                <Text fontSize="xs" color={disabled ? 'gray.500' : 'white'} fontWeight="bold" isTruncated w="full" textAlign="right">
+                  {label}
+                </Text>
+                {isHovered && (
+                  <Text fontSize="10px" color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.500'} isTruncated w="full" transition="color 0.15s" textAlign="right">
+                    {subtitle}
+                  </Text>
+                )}
+              </VStack>
+              <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
+                <IconCmp />
+                {items.length > 1 && (
+                  <Box
+                    position="absolute"
+                    bottom="-5px"
+                    right="-5px"
+                    color="white"
+                    fontSize="12px"
+                    fontWeight="bold"
+                    minW="14px"
+                    h="14px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    zIndex={2}
+                  >
+                    {items.length}
+                  </Box>
+                )}
+              </Box>
+            </>
+          )}
+          {items.length > 1 && isHovered && (
             <Box
               color="whiteAlpha.400"
               _groupHover={{ color: 'white' }}
@@ -102,20 +189,19 @@ export const ViewNavigator: React.FC<Props> = ({
               <ChevronDownIcon size={12} strokeWidth={3.5} />
             </Box>
           )}
-          {isActive && items.length <= 1 && (
+          {isActive && items.length <= 1 && isHovered && (
             <Box w="5px" h="5px" rounded="full" bg={accentColor} flexShrink={0} mx={1} />
           )}
-          <KbdHint>{shortcut}</KbdHint>
         </Box>
       </Tooltip>
     )
   }
 
   return (
-    <VStack spacing={0} align="stretch" flexShrink={0} py={1}>
-      <Box>{renderNavButton('out', parents)}</Box>
-      <Divider borderColor="whiteAlpha.100" />
-      <Box>{renderNavButton('in', children)}</Box>
-    </VStack>
+    <HStack spacing={0} align="stretch" flexShrink={0} height="60px" borderColor="whiteAlpha.100">
+      {renderNavButton('out', parents)}
+      <Box w="1px" bg="whiteAlpha.100" />
+      {renderNavButton('in', children)}
+    </HStack>
   )
 }

package/src/components/ViewExplorer/index.tsx

@@ -142,23 +142,17 @@ function ViewExplorer({
   const children = useMemo(() => {
     if (viewId == null) return []
     const diagMap = new Map<number, NavItem>()
-    flat.forEach((n) => {
-      if (n.parent_view_id === viewId)
-        diagMap.set(n.id, { id: n.id, name: n.name, subtitle: 'Child View' })
-    })
+    
     const objMap = new Map(viewElements.map((o) => [o.element_id, o.name]))
     Object.entries(linksMap).forEach(([elementIdStr, links]) => {
       const elementId = Number(elementIdStr)
-      if (!Number.isFinite(elementId)) return
-      const isOnCanvas = onCanvasIds.has(elementId)
+      if (!Number.isFinite(elementId) || !onCanvasIds.has(elementId)) return
+      
       const objName = objMap.get(elementId) || 'Element'
       links.forEach((link) => {
         const existing = diagMap.get(link.to_view_id)
         if (existing) {
-          if (!existing.elementId && isOnCanvas) existing.elementId = elementId
-          if (existing.subtitle === 'Child View') {
-            existing.subtitle = `Child View (Via ${objName})`
-          } else if (!existing.subtitle?.includes(objName)) {
+          if (!existing.subtitle?.includes(objName)) {
             existing.subtitle = `${existing.subtitle}, ${objName}`
           }
         } else {
@@ -166,13 +160,13 @@ function ViewExplorer({
             id: link.to_view_id,
             name: link.to_view_name,
             subtitle: `Via ${objName}`,
-            elementId: isOnCanvas ? elementId : undefined,
+            elementId: elementId,
           })
         }
       })
     })
     return Array.from(diagMap.values())
-  }, [viewId, flat, linksMap, viewElements, onCanvasIds])
+  }, [viewId, linksMap, viewElements, onCanvasIds])
 
   const viewHoverMap = useMemo(() => {
     const map = new Map<number, { elementId: number | undefined; type: 'in' | 'out' }>()
@@ -184,32 +178,14 @@ function ViewExplorer({
   const filteredByMode = useMemo(() => {
     if (activeFilter === 'out') {
       const parentIds = new Set(parents.map((p) => p.id))
-      const ancestors = new Set<number>()
-      const findAncestors = (id: number) => {
-        const node = treeNodes.find(n => n.id === id)
-        if (node?.parent_view_id) {
-          ancestors.add(node.parent_view_id)
-          findAncestors(node.parent_view_id)
-        }
-      }
-      if (viewId) findAncestors(viewId)
-      return flat.filter((n) => parentIds.has(n.id) || ancestors.has(n.id) || n.id === viewId)
+      return flat.filter((n) => parentIds.has(n.id) || n.id === viewId)
     }
     if (activeFilter === 'in') {
       const childIds = new Set(children.map((c) => c.id))
-      const subtree = new Set<number>()
-      const traverse = (nodes: TreeNode[]) => {
-        nodes.forEach(n => {
-          subtree.add(n.id)
-          traverse(n.children)
-        })
-      }
-      const current = flat.find(n => n.id === viewId)
-      if (current) traverse(current.children)
-      return flat.filter((n) => childIds.has(n.id) || subtree.has(n.id) || n.id === viewId)
+      return flat.filter((n) => childIds.has(n.id) || n.id === viewId)
     }
     return flat
-  }, [flat, parents, children, activeFilter, viewId, treeNodes])
+  }, [flat, parents, children, activeFilter, viewId])
 
   const filtered = useMemo(() => {
     if (!query.trim()) return filteredByMode

package/src/components/ZUI/ZUICanvas.tsx

@@ -38,6 +38,12 @@ import { buildVisibleProxyConnectors, collectVisibleNodeAnchors, drawVisibleProx
 export interface ZUICanvasHandle {
   fitView(): void
   focusDiagram(viewId: number): boolean
+  setCameraFrame(frame: ZUICameraFrame): boolean
+}
+
+export interface ZUICameraFrame {
+  profile: 'detail-to-overview'
+  progress: number
 }
 
 interface Props {
@@ -238,6 +244,81 @@ function easeOutQuart(t: number): number {
   return 1 - Math.pow(1 - t, 4)
 }
 
+function clamp01(value: number): number {
+  return Math.max(0, Math.min(1, value))
+}
+
+function fitWorldRect(
+  rect: { x: number; y: number; w: number; h: number },
+  canvasW: number,
+  canvasH: number,
+  maxZoom: number,
+  padding: number,
+): ZUIViewState | null {
+  const bboxW = Math.max(1, rect.w)
+  const bboxH = Math.max(1, rect.h)
+  const zoom = Math.min(
+    (canvasW * (1 - padding * 2)) / bboxW,
+    (canvasH * (1 - padding * 2)) / bboxH,
+    maxZoom,
+  )
+  if (!Number.isFinite(zoom) || zoom <= 0) return null
+
+  return {
+    x: (canvasW - bboxW * zoom) / 2 - rect.x * zoom,
+    y: (canvasH - bboxH * zoom) / 2 - rect.y * zoom,
+    zoom,
+  }
+}
+
+function findFirstExpandableNode(groups: DiagramGroupLayout[]): PathItem | null {
+  for (const group of groups) {
+    const found = findFirstExpandableNodeInTree(group.nodes, 0, 0, 1, 0, 0)
+    if (found) return found
+  }
+  return null
+}
+
+function findFirstExpandableNodeInTree(
+  nodes: DiagramGroupLayout['nodes'],
+  parentAbsX: number,
+  parentAbsY: number,
+  parentAbsScale: number,
+  parentChildOffsetX: number,
+  parentChildOffsetY: number,
+): PathItem | null {
+  for (const node of nodes) {
+    const absX = parentAbsX + (node.worldX - parentChildOffsetX) * parentAbsScale
+    const absY = parentAbsY + (node.worldY - parentChildOffsetY) * parentAbsScale
+    const absW = node.worldW * parentAbsScale
+    const absH = node.worldH * parentAbsScale
+
+    if (node.children.length > 0) {
+      return {
+        id: node.id,
+        label: node.linkedDiagramLabel || node.label,
+        type: 'node',
+        isCircular: node.isCircular,
+        absX,
+        absY,
+        absW,
+        absH,
+      }
+    }
+
+    const found = findFirstExpandableNodeInTree(
+      node.children,
+      absX,
+      absY,
+      parentAbsScale * node.childScale,
+      node.childOffsetX,
+      node.childOffsetY,
+    )
+    if (found) return found
+  }
+  return null
+}
+
 export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, highlightedTags, highlightColor, hiddenTags, crossBranchSettings, hoverLocked = false }, ref) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -445,6 +526,63 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     return true
   }, [isMobileLayout, layout.groups, maxZoom, setHoveredItem, setViewState, viewStateRef])
 
+  const setCameraFrame = useCallback((frame: ZUICameraFrame) => {
+    if (frame.profile !== 'detail-to-overview') return false
+
+    const el = containerRef.current
+    if (!el) return false
+
+    const canvasW = el.offsetWidth
+    const canvasH = el.offsetHeight
+    if (canvasW === 0 || canvasH === 0) return false
+
+    const detailTarget = findFirstExpandableNode(layout.groups)
+    const overviewTarget = layout.groups[0]
+    if (!detailTarget || !overviewTarget) return false
+
+    const detail = fitWorldRect(
+      {
+        x: detailTarget.absX,
+        y: detailTarget.absY,
+        w: detailTarget.absW,
+        h: detailTarget.absH,
+      },
+      canvasW,
+      canvasH,
+      maxZoom,
+      0.28,
+    )
+
+    const overview = fitWorldRect(
+      {
+        x: overviewTarget.worldX,
+        y: overviewTarget.worldY,
+        w: overviewTarget.worldW,
+        h: overviewTarget.worldH,
+      },
+      canvasW,
+      canvasH,
+      maxZoom,
+      0.18,
+    )
+
+    if (!detail || !overview) return false
+
+    if (cameraTransitionRef.current !== null) {
+      cancelAnimationFrame(cameraTransitionRef.current)
+      cameraTransitionRef.current = null
+    }
+
+    setHoveredItem(null, true)
+    const t = easeOutQuart(clamp01(frame.progress))
+    setViewState({
+      x: detail.x + (overview.x - detail.x) * t,
+      y: detail.y + (overview.y - detail.y) * t,
+      zoom: detail.zoom + (overview.zoom - detail.zoom) * t,
+    })
+    return true
+  }, [layout.groups, maxZoom, setHoveredItem, setViewState])
+
   useEffect(() => {
     return () => {
       if (cameraTransitionRef.current !== null) {
@@ -482,8 +620,9 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
         fitView(el.offsetWidth, el.offsetHeight, layout.bbox)
       },
       focusDiagram,
+      setCameraFrame,
     }),
-    [fitView, focusDiagram, layout.bbox, setHoveredItem],
+    [fitView, focusDiagram, layout.bbox, setCameraFrame, setHoveredItem],
   )
 
   // ── RAF render loop ──────────────────────────────────────────────