@tldiagram/core-ui 1.94.2 → 1.94.4

package/dist/pages/InfiniteZoom.d.ts

@@ -7,4 +7,4 @@ export interface InfiniteZoomHandle {
 }
 declare const InfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;
 export default InfiniteZoom;
-export declare function SharedInfiniteZoom(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare const SharedInfiniteZoom: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<InfiniteZoomHandle>>;

package/package.json

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

package/src/api/client.ts

@@ -8,6 +8,7 @@ import type {
   ExploreData,
   LibraryElement,
   PlacedElement,
+  Tag,
   View,
   ViewConnector,
   ViewLayer,
@@ -91,6 +92,7 @@ interface ProtoDiagram {
   updatedAt?: string
   updated_at?: string
   parent_view_id?: number | null
+  parentViewId?: number | null
   children?: ProtoDiagram[]
 }
 
@@ -107,7 +109,9 @@ function mapDiagram(d: ProtoDiagram): ViewTreeNode {
     depth: d.depth ?? 0,
     created_at: d.createdAt ?? d.created_at ?? '',
     updated_at: d.updatedAt ?? d.updated_at ?? '',
-    parent_view_id: d.parent_view_id ?? null,
+    parent_view_id: d.parentViewId != null || d.parent_view_id != null
+      ? Number(d.parentViewId ?? d.parent_view_id)
+      : null,
     children: (d.children ?? []).map(mapDiagram),
   }
 }
@@ -333,6 +337,12 @@ export const api = {
   },
 
   workspace: {
+    orgs: {
+      tagColors: {
+        list: (): Promise<Tag[]> => Promise.resolve([]),
+      },
+    },
+
     elements: {
       list: (params?: { limit?: number; offset?: number; search?: string }): Promise<LibraryElement[]> =>
         api.elements.list(params),
@@ -641,6 +651,84 @@ export const api = {
           password_required: false,
         }
       }),
+
+    loadShared: async (token: string, password?: string): Promise<ExploreData & { password_required?: boolean }> => {
+      const init: RequestInit = {
+        method: password ? 'POST' : 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      }
+      if (password) {
+        init.body = JSON.stringify({ password })
+      }
+      const res = await fetch(apiUrl(`/shared/explore/${token}`), init)
+      if (!res.ok) {
+        throw new Error(`Failed to load shared diagram: ${res.statusText}`)
+      }
+      const data = await res.json() as {
+        tree: any[]
+        views: Record<string, { elements: any[]; connectors: any[] }>
+        password_required?: boolean
+      }
+
+      const tree = (data.tree ?? []).map(mapDiagram)
+      const views = Object.fromEntries(
+        Object.entries(data.views ?? {}).map(([key, value]) => [
+          key,
+          {
+            placements: (value.elements ?? []).map(protoPlacedElement),
+            connectors: (value.connectors ?? []).map(protoConnector),
+          },
+        ])
+      )
+
+      // Ensure that the share root is treated as a root (no parent) so that computeLayout
+      // picks it up even if it was nested in the original workspace.
+      const sharedRoot = tree.find(n => String(n.id) === String(data.views[token]?.elements?.[0]?.view_id ?? ''))
+      // Backend actually returns the shareToken.ViewID as the root of the tree it builds.
+      // We should find the node in 'tree' that has no parent *within the returned set*.
+      // For shared explore, the backend typically returns a tree starting at the shared view.
+      tree.forEach(node => {
+        // If the node's parent is not in our tree, it's a root for this shared view.
+        const parentInTree = tree.find(n => n.id === node.parent_view_id)
+        if (!parentInTree) {
+          node.parent_view_id = null
+        }
+      })
+      const navigations: ViewConnector[] = []
+      const elementToChildView = new Map<number, any>()
+      const allViews: any[] = []
+      const flatTree = (nodes: any[]) => {
+        nodes.forEach(n => {
+          allViews.push(n)
+          if (n.owner_element_id) elementToChildView.set(n.owner_element_id, n)
+          if (n.children) flatTree(n.children)
+        })
+      }
+      flatTree(tree)
+
+      Object.values(views).forEach((v: any) => {
+        v.placements.forEach((p: any) => {
+          const childView = elementToChildView.get(p.element_id)
+          if (childView) {
+            navigations.push({
+              id: 0,
+              element_id: p.element_id,
+              from_view_id: p.view_id,
+              to_view_id: childView.id,
+              to_view_name: childView.name,
+              relation_type: 'child',
+            })
+          }
+        })
+      })
+
+      return {
+        tree,
+        views,
+        navigations,
+        password_required: data.password_required,
+      }
+    },
   },
 
   import: {

package/src/components/NodeHoverCard.tsx

@@ -1,13 +1,14 @@
 import { Box, Divider, Flex, HStack, Tag, Text, VStack } from '@chakra-ui/react'
-import { TYPE_COLORS, type PlacedElement } from '../types'
+import { TYPE_COLORS, type PlacedElement, type Tag as TagType } from '../types'
 
 interface Props {
     data: PlacedElement & { hasChildLink?: boolean }
     /** Bounding rect of the node element in screen (viewport) coordinates */
     anchorRect: DOMRect
+    tagColors?: Record<string, TagType>
 }
 
-export default function NodeHoverCard({ data, anchorRect }: Props) {
+export default function NodeHoverCard({ data, anchorRect, tagColors }: Props) {
     const color = TYPE_COLORS[data.kind ?? ''] ?? 'gray'
 
     // Position the card centred above the node using fixed coordinates so it
@@ -101,19 +102,23 @@ export default function NodeHoverCard({ data, anchorRect }: Props) {
                 {/* Tags */}
                 {data.tags && data.tags.length > 0 && (
                     <HStack spacing={1} flexWrap="wrap">
-                        {data.tags.map((tag) => (
-                            <Tag
-                                key={tag}
-                                size="sm"
-                                variant="outline"
-                                colorScheme="gray"
-                                fontSize="9px"
-                                borderColor="rgba(255,255,255,0.1)"
-                                color="gray.500"
-                            >
-                                {tag}
-                            </Tag>
-                        ))}
+                        {data.tags.map((tag) => {
+                            const tagColor = tagColors?.[tag]?.color
+                            return (
+                                <Tag
+                                    key={tag}
+                                    size="sm"
+                                    variant="subtle"
+                                    bg={tagColor ? `color-mix(in srgb, ${tagColor} 12%, transparent)` : 'whiteAlpha.100'}
+                                    color={tagColor || 'gray.400'}
+                                    fontSize="9px"
+                                    borderColor={tagColor ? `color-mix(in srgb, ${tagColor} 30%, transparent)` : 'rgba(255,255,255,0.1)'}
+                                    borderWidth="1px"
+                                >
+                                    {tag}
+                                </Tag>
+                            )
+                        })}
                     </HStack>
                 )}
 

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/InfiniteZoom.tsx

@@ -132,7 +132,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
     }
   }, [showMiniOnboarding])
   useEffect(() => {
-    const loader = api.explore.load()
+    const loader = sharedToken ? api.explore.loadShared(sharedToken) : api.explore.load()
     loader.then((d) => {
       if (d.password_required) {
         setLoading(false)
@@ -147,23 +147,27 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
   // Fetch tag colors and layers once data is loaded (authenticated users only).
   // Only fetch from root tree nodes child/nested diagrams would duplicate the same layers.
   useEffect(() => {
-    if (!data) return
+    if (!data || sharedToken) return
     let cancelled = false
     const rootIds = (data.tree ?? []).map(n => n.id)
     const fetchTagData = async () => {
-      const diagramLayers = await Promise.all(
-        rootIds.map(id => api.workspace.views.layers.list(id)),
-      )
-      if (!cancelled) {
-        // Deduplicate by layer ID in case of any API overlap
-        const seen = new Set<number>()
-        const unique = diagramLayers.flat().filter(l => seen.has(l.id) ? false : (seen.add(l.id), true))
-        setLayers(unique)
+      try {
+        const diagramLayers = await Promise.all(
+          rootIds.map(id => api.workspace.views.layers.list(id)),
+        )
+        if (!cancelled) {
+          // Deduplicate by layer ID in case of any API overlap
+          const seen = new Set<number>()
+          const unique = diagramLayers.flat().filter(l => seen.has(l.id) ? false : (seen.add(l.id), true))
+          setLayers(unique)
+        }
+      } catch {
+        // intentionally empty: layers are not available for public shared pages
       }
     }
     void fetchTagData()
     return () => { cancelled = true }
-  }, [data])
+  }, [data, sharedToken])
 
   const handleCanvasReady = useCallback(() => {
     setCanvasReady(true)
@@ -400,7 +404,8 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
 const InfiniteZoom = forwardRef<InfiniteZoomHandle, Props>(InfiniteZoomInner)
 export default InfiniteZoom
 
-export function SharedInfiniteZoom(props: Props) {
+export const SharedInfiniteZoom = forwardRef<InfiniteZoomHandle, Props>((props, ref) => {
   const { token } = useParams()
-  return <InfiniteZoomInner {...props} sharedToken={token} />
-}
+  const effectiveToken = props.sharedToken ?? token
+  return <InfiniteZoom {...props} ref={ref} sharedToken={effectiveToken} />
+})

package/src/pages/ViewEditor/index.tsx

@@ -260,7 +260,15 @@ function ViewEditorInner({
   const [tagColors, setTagColors] = useState<Record<string, Tag>>({})
 
   useEffect(() => {
-    // api.workspace.orgs.tagColors.list().then(setTagColors).catch(() => { /* skip */ })
+    api.workspace.orgs.tagColors.list().then((res) => {
+      if (Array.isArray(res)) {
+        const next: Record<string, Tag> = {}
+        res.forEach(t => { next[t.name] = t })
+        setTagColors(next)
+      } else {
+        setTagColors(res)
+      }
+    }).catch(() => { /* skip */ })
   }, [])
 
   const [layers, setLayers] = useState<import('../../types').ViewLayer[]>([])
@@ -1369,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