@tldiagram/core-ui 1.94.2 → 1.94.3

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.3",
   "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/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[]>([])