@tldiagram/core-ui 1.94.3 → 1.94.5

package/src/demo/viewEditor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, type MutableRefObject, type RefObject } from 'react'
+import { useCallback, useEffect, useMemo, type MutableRefObject, type RefObject } from 'react'
 import { getNodesBounds, getViewportForBounds, type Node as RFNode, type ReactFlowInstance } from 'reactflow'
 
 export interface ViewEditorDemoOptions {
@@ -6,24 +6,19 @@ export interface ViewEditorDemoOptions {
   disableImportExport?: boolean
   hideFlowControls?: boolean
   disableOnboarding?: boolean
+  hideFocusView?: boolean
+  hideExpandExtras?: boolean
 }
 
 export const DEMO_VIEW_EDITOR_OPTIONS: Omit<ViewEditorDemoOptions, 'revealProgress'> = {
   disableImportExport: true,
   hideFlowControls: true,
   disableOnboarding: true,
+  hideFocusView: true,
+  hideExpandExtras: true,
 }
 
-function getCenteredViewport(bounds: { x: number; y: number; width: number; height: number }, width: number, height: number, zoom: number) {
-  const centerX = bounds.x + bounds.width / 2
-  const centerY = bounds.y + bounds.height / 2
 
-  return {
-    x: width / 2 - centerX * zoom,
-    y: height / 2 - centerY * zoom,
-    zoom,
-  }
-}
 
 interface UseDemoRevealViewportArgs {
   demoOptions?: ViewEditorDemoOptions
@@ -44,19 +39,12 @@ export function useDemoRevealViewport({
   needsFitViewRef,
   computedMinZoom,
   setViewport,
-  resetKey,
 }: UseDemoRevealViewportArgs) {
   const clampedRevealProgress = useMemo(() => {
     if (typeof demoOptions?.revealProgress !== 'number') return null
     return Math.max(0, Math.min(1, demoOptions.revealProgress))
   }, [demoOptions?.revealProgress])
 
-  const revealZoomRef = useRef<number | null>(null)
-
-  useEffect(() => {
-    revealZoomRef.current = null
-  }, [resetKey, clampedRevealProgress])
-
   const applyDemoRevealViewport = useCallback(() => {
     if (clampedRevealProgress === null) return false
 
@@ -73,24 +61,7 @@ export function useDemoRevealViewport({
     const fittedViewport = getViewportForBounds(bounds, width, height, computedMinZoom, 2, 0.1)
     if (![fittedViewport.x, fittedViewport.y, fittedViewport.zoom].every(Number.isFinite)) return false
 
-    if (clampedRevealProgress >= 0.999) {
-      revealZoomRef.current = fittedViewport.zoom
-      setViewport(fittedViewport, { duration: 0 })
-      return true
-    }
-
-    const fixedZoom = revealZoomRef.current ?? fittedViewport.zoom
-    revealZoomRef.current = fixedZoom
-
-    const centeredViewport = getCenteredViewport(bounds, width, height, fixedZoom)
-    const reveal = 1 - Math.pow(1 - clampedRevealProgress, 3)
-    const hiddenOffsetX = Math.max(width * 1.15, bounds.width * fixedZoom * 0.75)
-
-    setViewport({
-      x: centeredViewport.x + hiddenOffsetX * (1 - reveal),
-      y: centeredViewport.y,
-      zoom: fixedZoom,
-    }, { duration: 0 })
+    setViewport(fittedViewport, { duration: 0 })
 
     return true
   }, [clampedRevealProgress, computedMinZoom, containerRef, rfNodesRef, setViewport])
@@ -107,4 +78,4 @@ export function useDemoRevealViewport({
     disableImportExport: demoOptions?.disableImportExport ?? false,
     hideFlowControls: demoOptions?.hideFlowControls ?? false,
   }
-}
+}

package/src/pages/InfiniteZoom.tsx

@@ -193,7 +193,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 +231,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 */}

package/src/pages/ViewEditor/index.tsx

@@ -1377,6 +1377,8 @@ function ViewEditorInner({
               setHighlightColor={setHoveredLayerColor}
               shareSlot={shareSlot}
               toolbarSlot={toolbarSlot}
+              hideFocusView={demoOptions?.hideFocusView}
+              hideExpandExtras={demoOptions?.hideExpandExtras}
             />
           </Box>
         </Flex>

package/src/utils/toast.ts

@@ -52,6 +52,14 @@ const toast: CustomToast = (options: UseToastOptions) => {
   const status = options.status || 'error'
 
   if (status === 'error') {
+    // Silence error toasts if we are on a demo route
+    const isDemoRoute = window.location.pathname.includes('/demo') || 
+                        window.location.pathname.includes('/app/demo');
+
+    if (isDemoRoute) {
+      return undefined
+    }
+
     const summary = getErrorSummary(options)
     
     // Check if an error toast is already active