@tldiagram/core-ui 1.94.3 → 1.94.4

package/package.json

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

package/src/components/ViewFloatingMenu.tsx

@@ -49,6 +49,8 @@ export interface ViewFloatingMenuProps extends ViewFloatingMenuSlots {
   setHighlightColor: (color: string | null) => void
 
   toolbarSlot?: React.ReactNode
+  hideFocusView?: boolean
+  hideExpandExtras?: boolean
 }
 
 /**
@@ -83,6 +85,8 @@ function ViewFloatingMenu({
   setHighlightColor,
   shareSlot,
   toolbarSlot,
+  hideFocusView = false,
+  hideExpandExtras = false,
 }: ViewFloatingMenuProps) {
   const { canEdit } = useViewEditorContext()
   const { isOpen: isTagsOpen, onClose: onTagsClose, onToggle: onTagsToggle } = useDisclosure()
@@ -127,24 +131,28 @@ function ViewFloatingMenu({
         </Button>
       </Tooltip>
 
-      <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-      <Tooltip label={focusMode ? 'Show context' : 'Focus on this view'} placement="top" openDelay={200}>
-        <Button
-          variant="ghost"
-          h="28px"
-          px={2.5}
-          color={focusMode ? 'var(--accent)' : 'gray.300'}
-          bg={focusMode ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
-          _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
-          onClick={() => onFocusModeChange(!focusMode)}
-        >
-          <HStack spacing={1.5}>
-            <FocusSvg />
-            <Text fontSize="11px" fontWeight="normal">Focus View</Text>
-            <Box w="6px" h="6px" rounded="full" bg={focusMode ? 'var(--accent)' : 'gray.500'} />
-          </HStack>
-        </Button>
-      </Tooltip>
+      {!hideFocusView && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          <Tooltip label={focusMode ? 'Show context' : 'Focus on this view'} placement="top" openDelay={200}>
+            <Button
+              variant="ghost"
+              h="28px"
+              px={2.5}
+              color={focusMode ? 'var(--accent)' : 'gray.300'}
+              bg={focusMode ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent'}
+              _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+              onClick={() => onFocusModeChange(!focusMode)}
+            >
+              <HStack spacing={1.5}>
+                <FocusSvg />
+                <Text fontSize="11px" fontWeight="normal">Focus View</Text>
+                <Box w="6px" h="6px" rounded="full" bg={focusMode ? 'var(--accent)' : 'gray.500'} />
+              </HStack>
+            </Button>
+          </Tooltip>
+        </>
+      )}
       <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
 
       {(allTags.length > 0 || layers.length > 0) && (
@@ -356,22 +364,26 @@ function ViewFloatingMenu({
         </>
       )}
 
-      <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
-      <Button
-        variant="ghost"
-        h="28px"
-        minW="36px"
-        px={2}
-        display="inline-flex"
-        alignItems="center"
-        justifyContent="center"
-        color="gray.300"
-        _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
-        onClick={() => setExtrasOpen((prev) => !prev)}
-        aria-label={extrasOpen ? 'Collapse extras' : 'Expand extras'}
-      >
-        {extrasOpen ? <CollapseExtrasSvg /> : <ExpandExtrasSvg />}
-      </Button>
+      {!hideExpandExtras && (
+        <>
+          <Box w="1px" h="16px" bg="whiteAlpha.100" flexShrink={0} mx={0.5} />
+          <Button
+            variant="ghost"
+            h="28px"
+            minW="36px"
+            px={2}
+            display="inline-flex"
+            alignItems="center"
+            justifyContent="center"
+            color="gray.300"
+            _hover={{ bg: 'rgba(var(--accent-rgb), 0.12)', color: 'var(--accent)' }}
+            onClick={() => setExtrasOpen((prev) => !prev)}
+            aria-label={extrasOpen ? 'Collapse extras' : 'Expand extras'}
+          >
+            {extrasOpen ? <CollapseExtrasSvg /> : <ExpandExtrasSvg />}
+          </Button>
+        </>
+      )}
     </HStack>
   )
 }

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/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