@tldiagram/core-ui 1.94.4 → 1.95.0

package/src/components/ZUI/index.ts

@@ -1,3 +1,3 @@
 // src/components/ZUI/index.ts
 export { ZUICanvas } from './ZUICanvas'
-export type { ZUICanvasHandle } from './ZUICanvas'
+export type { ZUICameraFrame, ZUICanvasHandle } from './ZUICanvas'

package/src/pages/InfiniteZoom.tsx

@@ -24,7 +24,7 @@ import { FitViewIcon as FitViewSvg, TagsIcon, EyeIcon, EyeOffIcon, FocusIcon as
 import ExploreOnboarding from '../components/ExploreOnboarding'
 import ExplorePageOnboarding from '../components/ExplorePageOnboarding'
 import MiniZoomOnboarding from '../components/MiniZoomOnboarding'
-import { ZUICanvas, type ZUICanvasHandle } from '../components/ZUI'
+import { ZUICanvas, type ZUICameraFrame, type ZUICanvasHandle } from '../components/ZUI'
 import { useCrossBranchContextSettings } from '../crossBranch/settings'
 import { primeWorkspaceGraphSnapshot } from '../crossBranch/store'
 
@@ -36,6 +36,7 @@ interface Props {
 
 export interface InfiniteZoomHandle {
   focusDiagram(viewId: number): boolean
+  setCameraFrame(frame: ZUICameraFrame): boolean
 }
 
 const MINI_ONBOARDING_KEY = 'shared_zoom_onboarding_dismissed'
@@ -62,6 +63,9 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
     focusDiagram(viewId: number) {
       return zuiRef.current?.focusDiagram(viewId) ?? false
     },
+    setCameraFrame(frame: ZUICameraFrame) {
+      return zuiRef.current?.setCameraFrame(frame) ?? false
+    },
   }), [])
 
   // ── No data or No content ────────────────────────────────────────
@@ -173,6 +177,24 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
     setCanvasReady(true)
   }, [])
 
+  useEffect(() => {
+    if (!sharedToken) return
+
+    const handleMessage = (event: MessageEvent) => {
+      const data = event.data as { type?: unknown; progress?: unknown; profile?: unknown } | null
+      if (!data || data.type !== 'tldiagram-zui-camera') return
+      if (data.profile !== 'detail-to-overview') return
+
+      const progress = Number(data.progress)
+      if (!Number.isFinite(progress)) return
+
+      zuiRef.current?.setCameraFrame({ profile: 'detail-to-overview', progress })
+    }
+
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [sharedToken])
+
   if (!loading && (!data || (data.tree ?? []).length === 0 || !hasPlacements)) {
     const noDiagrams = !data || (data.tree ?? []).length === 0
     return (
@@ -193,7 +215,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
             {noDiagrams ? 'Create First Diagram' : 'Go to Editor'}
           </Button>
         )}
-        {!noDiagrams && <ExplorePageOnboarding hasDiagrams={!noDiagrams} />}
+        {!noDiagrams && !sharedToken && <ExplorePageOnboarding hasDiagrams={!noDiagrams} />}
       </Center>
     )
   }
@@ -231,7 +253,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
           />
 
           {/* Onboarding overlay */}
-          {data && <ExploreOnboarding hasLinkedNodes={!!(data.navigations?.length > 0)} />}
+          {data && !sharedToken && <ExploreOnboarding hasLinkedNodes={!!(data.navigations?.length > 0)} />}
           <MiniZoomOnboarding isVisible={showMiniOnboarding} />
 
           {/* Bottom toolbar */}