@tldiagram/core-ui 1.94.1 → 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/dist/pages/ViewEditor/hooks/useViewData.d.ts

@@ -56,8 +56,6 @@ export declare function useViewData({ viewId, interactionSourceId, clickConnectM
     incomingLinks: import("../../..").IncomingViewConnector[];
     treeData: ViewTreeNode[];
     allElements: LibraryElement[];
-    libraryRefresh: number;
-    setLibraryRefresh: (next: import("../../../store/useStore").StoreSetter<number>) => void;
     existingElementIds: Set<number>;
     viewElementsRef: import("react").MutableRefObject<PlacedElement[]>;
     linksMapRef: import("react").MutableRefObject<Record<number, import("../../..").ViewConnector[]>>;

package/dist/store/useStore.d.ts

@@ -32,7 +32,6 @@ export type CanvasStoreState = ViewEditorUiState & {
     incomingLinks: IncomingViewConnector[];
     treeData: ViewTreeNode[];
     allElements: LibraryElement[];
-    libraryRefresh: number;
     setViewEditorUi: (patch: Partial<ViewEditorUiState>) => void;
     setSnapToGrid: (snapToGrid: boolean) => void;
     setSelectedElement: (selectedElement: LibraryElement | null) => void;
@@ -47,7 +46,6 @@ export type CanvasStoreState = ViewEditorUiState & {
     setIncomingLinks: (next: StoreSetter<IncomingViewConnector[]>) => void;
     setTreeData: (next: StoreSetter<ViewTreeNode[]>) => void;
     setAllElements: (next: StoreSetter<LibraryElement[]>) => void;
-    setLibraryRefresh: (next: StoreSetter<number>) => void;
     resetCanvas: () => void;
     hydrateViewContent: (payload: ViewContentPayload) => void;
     updateElementPosition: (elementId: number, x: number, y: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tldiagram/core-ui",
-  "version": "1.94.1",
+  "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),
   }
 }
@@ -134,41 +138,51 @@ function protoElementToLibrary(e: Record<string, unknown>): LibraryElement {
     description: (e.description ?? null) as string | null,
     technology: (e.technology ?? null) as string | null,
     url: (e.url ?? null) as string | null,
-    logo_url: (e.logo_url ?? null) as string | null,
-    technology_connectors: (e.technology_connectors ?? []) as LibraryElement['technology_connectors'],
+    logo_url: (e.logo_url ?? e.logoUrl ?? null) as string | null,
+    technology_connectors: ((e.technology_connectors ?? e.technologyLinks ?? []) as any[]).map(tl => ({
+      type: tl.type,
+      slug: tl.slug,
+      label: tl.label,
+      is_primary_icon: !!(tl.is_primary_icon ?? tl.isPrimaryIcon),
+    })),
     tags: (e.tags ?? []) as string[],
     repo: (e.repo ?? null) as string | null,
     branch: (e.branch ?? null) as string | null,
     file_path: (e.file_path ?? null) as string | null,
     language: (e.language ?? null) as string | null,
-    created_at: String(e.created_at ?? new Date().toISOString()),
-    updated_at: String(e.updated_at ?? new Date().toISOString()),
-    has_view: Boolean(e.has_view ?? false),
-    view_label: (e.view_label ?? null) as string | null,
+    created_at: String(e.created_at ?? e.createdAt ?? new Date().toISOString()),
+    updated_at: String(e.updated_at ?? e.updatedAt ?? new Date().toISOString()),
+    has_view: Boolean(e.has_view ?? e.hasView ?? false),
+    view_label: (e.view_label ?? e.viewLabel ?? null) as string | null,
   }
 }
 
 function protoPlacedElement(p: Record<string, unknown>): PlacedElement {
   return {
     id: Number(p.id ?? 0),
-    view_id: Number(p.view_id ?? 0),
-    element_id: Number(p.element_id ?? 0),
-    position_x: Number(p.position_x ?? 0),
-    position_y: Number(p.position_y ?? 0),
+    view_id: Number(p.view_id ?? p.viewId ?? 0),
+    element_id: Number(p.element_id ?? p.elementId ?? 0),
+    position_x: Number(p.position_x ?? p.positionX ?? 0),
+    position_y: Number(p.position_y ?? p.positionY ?? 0),
     name: String(p.name ?? ''),
     description: (p.description ?? null) as string | null,
     kind: (p.kind ?? null) as string | null,
     technology: (p.technology ?? null) as string | null,
     url: (p.url ?? null) as string | null,
-    logo_url: (p.logo_url ?? null) as string | null,
-    technology_connectors: (p.technology_connectors ?? []) as PlacedElement['technology_connectors'],
+    logo_url: (p.logo_url ?? p.logoUrl ?? null) as string | null,
+    technology_connectors: ((p.technology_connect_ors ?? p.technology_connectors ?? p.technologyLinks ?? []) as any[]).map(tl => ({
+      type: tl.type,
+      slug: tl.slug,
+      label: tl.label,
+      is_primary_icon: !!(tl.is_primary_icon ?? tl.isPrimaryIcon),
+    })),
     tags: (p.tags ?? []) as string[],
     repo: (p.repo ?? null) as string | null,
     branch: (p.branch ?? null) as string | null,
     file_path: (p.file_path ?? null) as string | null,
     language: (p.language ?? null) as string | null,
-    has_view: Boolean(p.has_view ?? false),
-    view_label: (p.view_label ?? null) as string | null,
+    has_view: Boolean(p.has_view ?? p.hasView ?? false),
+    view_label: (p.view_label ?? p.viewLabel ?? null) as string | null,
   }
 }
 
@@ -323,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),
@@ -631,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/ContextNeighborElement.tsx

@@ -62,7 +62,7 @@ function ContextNeighborNode({ data }: Props) {
 
   const logoUrl = useMemo(() => {
     if (data.logo_url) return resolveIconPath(data.logo_url)
-    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
     if (!selected?.slug) return undefined
     return resolveIconPath(`/icons/${selected.slug}.png`)
   }, [data.logo_url, data.technology_connectors])

package/src/components/ElementLibrary.tsx

@@ -34,7 +34,6 @@ interface Props {
   existingElementIds: Set<number>
   existingElements?: LibraryElement[]
   onCreateNew: () => void
-  refresh: number
   isOpen: boolean
   onClose: () => void
   onTapAdd?: (obj: LibraryElement) => void
@@ -89,7 +88,6 @@ function ElementLibrary({
   existingElementIds,
   existingElements = [],
   onCreateNew,
-  refresh,
   isOpen,
   onClose,
   onTapAdd,
@@ -134,7 +132,7 @@ function ElementLibrary({
     if (isOpen) {
       fetchElements(0, searchRef.current, true)
     }
-  }, [isOpen, refresh, fetchElements])
+  }, [isOpen, fetchElements])
 
   // Debounced search
   useEffect(() => {

package/src/components/ElementNode.tsx

@@ -317,7 +317,7 @@ function ElementNode({ data, selected }: Props) {
   }, [data.reconnectCandidates])
 
   const derivedPrimaryIconPath = (() => {
-    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
     if (!selected?.slug) return undefined
     return resolveIconPath(`/icons/${selected.slug}.png`)
   })()