@tldiagram/core-ui 1.95.0 → 1.95.1

package/package.json

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

package/src/components/MiniZoomOnboarding.tsx

@@ -1,18 +1,13 @@
-import { Box, HStack, Text } from '@chakra-ui/react'
-import { keyframes } from '@emotion/react'
+import { Box, CloseButton, HStack, Text } from '@chakra-ui/react'
 import { ZoomInIcon } from './Icons'
 
 interface Props {
   isVisible: boolean
+  onClose?: () => void
 }
 
-const pulseGlow = keyframes`
-  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); }
-  70% { box-shadow: 0 0 0 20px rgba(var(--accent-rgb), 0); }
-  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
-`
 
-export default function MiniZoomOnboarding({ isVisible }: Props) {
+export default function MiniZoomOnboarding({ isVisible, onClose }: Props) {
   return (
     <Box
       position="absolute"
@@ -22,14 +17,14 @@ export default function MiniZoomOnboarding({ isVisible }: Props) {
       zIndex={100}
       opacity={isVisible ? 1 : 0}
       transition="all 0.8s cubic-bezier(0.16, 1, 0.3, 1)"
-      pointerEvents="none"
+      pointerEvents={isVisible ? 'auto' : 'none'}
     >
       <Box
         className="glass"
         px={6}
+        pr={onClose ? 11 : 6}
         py={4}
         borderRadius="12px"
-        animation={isVisible ? `${pulseGlow} 3s infinite` : 'none'}
         position="relative"
         overflow="hidden"
         border="1.5px solid rgba(var(--accent-rgb), 0.3)"
@@ -44,27 +39,39 @@ export default function MiniZoomOnboarding({ isVisible }: Props) {
           bg="var(--accent)"
           opacity={0.8}
         />
-        
+        {onClose && (
+          <CloseButton
+            aria-label="Dismiss zoom hint"
+            position="absolute"
+            top={2}
+            right={2}
+            size="sm"
+            color="whiteAlpha.700"
+            _hover={{ color: 'white', bg: 'whiteAlpha.200' }}
+            onClick={onClose}
+          />
+        )}
+
         <HStack spacing={5} pl={3}>
           <Box color="var(--accent)">
             <ZoomInIcon size={24} />
           </Box>
           <Box>
-            <Text 
-              fontSize="10px" 
-              color="var(--accent)" 
-              fontWeight="900" 
-              letterSpacing="0.15em" 
-              textTransform="uppercase" 
+            <Text
+              fontSize="10px"
+              color="var(--accent)"
+              fontWeight="900"
+              letterSpacing="0.15em"
+              textTransform="uppercase"
               mb={0.5}
               opacity={0.9}
             >
-              Pro Tip
+              Hint:
             </Text>
-            <Text 
-              fontSize="15px" 
-              color="white" 
-              fontWeight="600" 
+            <Text
+              fontSize="15px"
+              color="white"
+              fontWeight="600"
               whiteSpace="nowrap"
               letterSpacing="-0.01em"
             >

package/src/components/ZUI/ZUICanvas.tsx

@@ -51,6 +51,7 @@ interface Props {
   onReady?: () => void
   onZoom?: () => void
   onPan?: () => void
+  initialCameraFrame?: ZUICameraFrame
   highlightedTags?: string[]
   highlightColor?: string
   hiddenTags?: string[]
@@ -319,7 +320,7 @@ function findFirstExpandableNodeInTree(
   return null
 }
 
-export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, highlightedTags, highlightColor, hiddenTags, crossBranchSettings, hoverLocked = false }, ref) {
+export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({ data, onReady, onZoom, onPan, initialCameraFrame, highlightedTags, highlightColor, hiddenTags, crossBranchSettings, hoverLocked = false }, ref) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const cameraTransitionRef = useRef<number | null>(null)
@@ -583,6 +584,11 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     return true
   }, [layout.groups, maxZoom, setHoveredItem, setViewState])
 
+  const fitInitialView = useCallback((w: number, h: number) => {
+    if (initialCameraFrame && setCameraFrame(initialCameraFrame)) return
+    fitView(w, h, layout.bbox)
+  }, [fitView, initialCameraFrame, layout.bbox, setCameraFrame])
+
   useEffect(() => {
     return () => {
       if (cameraTransitionRef.current !== null) {
@@ -600,14 +606,13 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     // Only set as initialized if we have valid dimensions
     if (w > 0 && h > 0) {
       setContainerSize({ w, h })
-      fitView(w, h, layout.bbox)
+      fitInitialView(w, h)
       if (!initialized) {
         setInitialized(true)
         onReady?.()
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [layout, initialized, onReady])
+  }, [initialized, onReady, fitInitialView])
 
   // ── Expose fitView to parent ─────────────────────────────────────
   useImperativeHandle(
@@ -670,7 +675,7 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
 
       // Trigger initialization if it hasn't happened yet
       if (!initialized && w > 0 && h > 0) {
-        fitView(w, h, layout.bbox)
+        fitInitialView(w, h)
         setInitialized(true)
         onReady?.()
       }
@@ -680,7 +685,7 @@ export const ZUICanvas = forwardRef<ZUICanvasHandle, Props>(function ZUICanvas({
     ro.observe(container)
     resize()
     return () => ro.disconnect()
-  }, [initialized, layout, fitView, onReady])
+  }, [initialized, fitInitialView, onReady])
 
   useEffect(() => {
     if (!initialized) return // Don't start loop until initialized

package/src/pages/InfiniteZoom.tsx

@@ -1,6 +1,6 @@
 // src/pages/InfiniteZoom.tsx Explore page holds the ZUI feature
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import {
   Box,
   Button,
@@ -44,11 +44,13 @@ const MINI_ONBOARDING_KEY = 'shared_zoom_onboarding_dismissed'
 // ── Inner component ────────────────────────────────────────────────
 function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<InfiniteZoomHandle>) {
   const navigate = useNavigate()
+  const location = useLocation()
 
   const [data, setData] = useState<ExploreData | null>(null)
   const [loading, setLoading] = useState(true)
   const [canvasReady, setCanvasReady] = useState(false)
   const [showMiniOnboarding, setShowMiniOnboarding] = useState(false)
+  const [miniOnboardingInteractionSeen, setMiniOnboardingInteractionSeen] = useState(false)
   const [tagColors] = useState<Record<string, import('../types').Tag>>({})
   const [layers, setLayers] = useState<ViewLayer[]>([])
   const [highlightedTags, setHighlightedTags] = useState<string[]>([])
@@ -59,6 +61,15 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
   const crossBranchSurface = sharedToken ? 'zui-shared' : 'zui'
   const { settings: crossBranchSettings, setEnabled: setCrossBranchEnabled } = useCrossBranchContextSettings(crossBranchSurface)
 
+  const cameraProfile = useMemo(() => new URLSearchParams(location.search).get('profile'), [location.search])
+  const isDetailToOverviewProfile = sharedToken && cameraProfile === 'detail-to-overview'
+
+  const initialCameraFrame = useMemo<ZUICameraFrame | undefined>(() => {
+    return isDetailToOverviewProfile
+      ? { profile: 'detail-to-overview', progress: 0 }
+      : undefined
+  }, [isDetailToOverviewProfile])
+
   useImperativeHandle(ref, () => ({
     focusDiagram(viewId: number) {
       return zuiRef.current?.focusDiagram(viewId) ?? false
@@ -124,17 +135,32 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
   }, [])
 
   useEffect(() => {
+    if (isDetailToOverviewProfile) return
     if (sharedToken && canvasReady && !localStorage.getItem(MINI_ONBOARDING_KEY)) {
       setShowMiniOnboarding(true)
     }
-  }, [sharedToken, canvasReady])
+  }, [sharedToken, canvasReady, isDetailToOverviewProfile])
 
-  const handleInteraction = useCallback(() => {
+  const dismissMiniOnboarding = useCallback(() => {
     if (showMiniOnboarding) {
       setShowMiniOnboarding(false)
-      localStorage.setItem(MINI_ONBOARDING_KEY, 'true')
+      if (!isDetailToOverviewProfile) {
+        localStorage.setItem(MINI_ONBOARDING_KEY, 'true')
+      }
     }
-  }, [showMiniOnboarding])
+  }, [isDetailToOverviewProfile, showMiniOnboarding])
+
+  const showMiniOnboardingAfterCanvasInteraction = useCallback(() => {
+    if (!isDetailToOverviewProfile || miniOnboardingInteractionSeen) return
+    setMiniOnboardingInteractionSeen(true)
+    setShowMiniOnboarding(true)
+  }, [isDetailToOverviewProfile, miniOnboardingInteractionSeen])
+
+  const handleCanvasZoom = useCallback(() => {
+    setMiniOnboardingInteractionSeen(true)
+    dismissMiniOnboarding()
+  }, [dismissMiniOnboarding])
+
   useEffect(() => {
     const loader = sharedToken ? api.explore.loadShared(sharedToken) : api.explore.load()
     loader.then((d) => {
@@ -243,8 +269,9 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
             ref={zuiRef}
             data={data}
             onReady={handleCanvasReady}
-            onZoom={handleInteraction}
-            onPan={handleInteraction}
+            onZoom={handleCanvasZoom}
+            onPan={showMiniOnboardingAfterCanvasInteraction}
+            initialCameraFrame={initialCameraFrame}
             highlightedTags={highlightedTags}
             highlightColor={highlightColor}
             hiddenTags={hiddenTags}
@@ -254,7 +281,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
 
           {/* Onboarding overlay */}
           {data && !sharedToken && <ExploreOnboarding hasLinkedNodes={!!(data.navigations?.length > 0)} />}
-          <MiniZoomOnboarding isVisible={showMiniOnboarding} />
+          <MiniZoomOnboarding isVisible={showMiniOnboarding} onClose={dismissMiniOnboarding} />
 
           {/* Bottom toolbar */}
           <Box