@tldiagram/core-ui 1.94.1 → 1.94.3

package/src/components/ElementPanel.tsx

@@ -18,8 +18,6 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Radio,
-  RadioGroup,
   Tag,
   TagCloseButton,
   TagLabel,
@@ -45,6 +43,173 @@ import TagUpsert from './TagUpsert'
 
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 
+function normalizeTechnologyLabel(value: string): string {
+  return value.trim().replace(/\s+/g, ' ').toLowerCase()
+}
+
+function splitTechnologyLabel(value: string): string[] {
+  return value.split(',').map((part) => part.trim()).filter(Boolean)
+}
+
+function findCatalogItemByLabel(index: Awaited<ReturnType<typeof getTechnologyCatalogIndex>>, label: string): TechnologyCatalogItem | null {
+  const normalized = normalizeTechnologyLabel(label)
+  if (!normalized) return null
+
+  const bySlugMatch = index.bySlug.get(label.trim())
+  if (bySlugMatch) return bySlugMatch
+
+  return index.items.find((item) => (
+    normalizeTechnologyLabel(item.name) === normalized ||
+    normalizeTechnologyLabel(item.nameShort) === normalized ||
+    normalizeTechnologyLabel(item.defaultSlug) === normalized
+  )) ?? null
+}
+
+function dedupeTechnologyLinks(links: TechnologyConnector[]): TechnologyConnector[] {
+  const seenCatalog = new Set<string>()
+  const seenCustom = new Set<string>()
+  const result: TechnologyConnector[] = []
+  let primarySet = false
+
+  // Sort links to process primary ones first, ensuring they are preserved during deduping
+  const sortedLinks = [...links].sort((a, b) => {
+    const aPrimary = !!(a.is_primary_icon ?? (a as any).isPrimaryIcon)
+    const bPrimary = !!(b.is_primary_icon ?? (b as any).isPrimaryIcon)
+    if (aPrimary && !bPrimary) return -1
+    if (!aPrimary && bPrimary) return 1
+    return 0
+  })
+
+  for (const link of sortedLinks) {
+    const label = link.label.trim()
+    if (!label) continue
+
+    const isPrimary = !!(link.is_primary_icon ?? (link as any).isPrimaryIcon)
+
+    if (link.type === 'catalog' && link.slug) {
+      const slug = link.slug.trim()
+      const key = slug.toLowerCase()
+      if (seenCatalog.has(key)) continue
+      seenCatalog.add(key)
+      result.push({
+        type: 'catalog',
+        slug,
+        label,
+        is_primary_icon: !primarySet && isPrimary,
+      })
+      if (isPrimary) primarySet = true
+      continue
+    }
+
+    const key = normalizeTechnologyLabel(label)
+    if (seenCustom.has(key)) continue
+    seenCustom.add(key)
+    result.push({ type: 'custom', label, is_primary_icon: false })
+  }
+
+  return result.slice(0, 3)
+}
+
+async function normalizeInitialTechnologyLinks(element: LibraryElement): Promise<TechnologyConnector[]> {
+  const rawLinks = element.technology_connectors ?? []
+  const legacyLabels = splitTechnologyLabel(element.technology ?? '')
+
+  if (rawLinks.length === 0 && legacyLabels.length === 0) return []
+
+  const index = await getTechnologyCatalogIndex()
+  const normalized: TechnologyConnector[] = []
+
+  const pushLabel = (label: string, isPrimaryIcon = false) => {
+    const match = findCatalogItemByLabel(index, label)
+    if (match) {
+      normalized.push({
+        type: 'catalog',
+        slug: match.defaultSlug,
+        label: match.name,
+        is_primary_icon: isPrimaryIcon,
+      })
+    } else {
+      normalized.push({ type: 'custom', label: label.trim(), is_primary_icon: false })
+    }
+  }
+
+  if (rawLinks.length > 0) {
+    for (const link of rawLinks) {
+      if (link.type === 'catalog') {
+        const match = link.slug ? index.bySlug.get(link.slug) : null
+        normalized.push({
+          type: 'catalog',
+          slug: link.slug,
+          label: match?.name ?? link.label,
+          is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
+        })
+      } else {
+        const parts = splitTechnologyLabel(link.label)
+        if (parts.length > 1) {
+          for (const part of parts) pushLabel(part)
+        } else {
+          pushLabel(link.label)
+        }
+      }
+    }
+  } else {
+    for (const label of legacyLabels) {
+      pushLabel(label)
+    }
+  }
+
+  // If no catalog item is primary, try to match against element.logo_url or fallback to first catalog item
+  const deduped = dedupeTechnologyLinks(normalized)
+  const hasPrimary = deduped.some(l => l.type === 'catalog' && l.is_primary_icon)
+  if (!hasPrimary) {
+    let bestMatchIndex = -1
+    if (element.logo_url) {
+      bestMatchIndex = deduped.findIndex(l => l.type === 'catalog' && l.slug && element.logo_url?.toLowerCase().includes(l.slug.toLowerCase()))
+    }
+
+    if (bestMatchIndex !== -1) {
+      deduped[bestMatchIndex].is_primary_icon = true
+    } else {
+      const firstCatalog = deduped.find(l => l.type === 'catalog')
+      if (firstCatalog) {
+        firstCatalog.is_primary_icon = true
+      }
+    }
+  }
+
+  return deduped
+}
+
+function buildTechnologyFingerprintPayload(
+  element: LibraryElement,
+  links: TechnologyConnector[],
+  type: string,
+) {
+  const normalizedLinks = links.map((link) => ({
+    type: link.type,
+    slug: link.type === 'catalog' ? link.slug : undefined,
+    label: link.label,
+    is_primary_icon: !!link.is_primary_icon,
+  }))
+  const normalizedType = type.trim().toLowerCase()
+  const technology = links.map((link) => link.label).join(', ')
+
+  return {
+    name: element.name,
+    description: element.description ?? '',
+    kind: normalizedType,
+    technology,
+    url: element.url ?? '',
+    logo_url: element.logo_url ?? '',
+    technology_connectors: normalizedLinks,
+    tags: element.tags ?? [],
+    repo: element.repo,
+    branch: element.branch,
+    file_path: element.file_path,
+    language: element.language,
+  }
+}
+
 export interface ElementPanelProps extends ElementPanelSlots {
   isOpen: boolean
   onClose: () => void
@@ -101,6 +266,8 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   }, [technologyQuery])
 
   useEffect(() => {
+    let cancelled = false
+
     if (element) {
       setName(element.name)
       setDescription(element.description ?? '')
@@ -108,43 +275,42 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
       setTypeQuery('')
       setTypeResults([])
       setUrl(element.url ?? '')
-      const linksFromElement = element.technology_connectors ?? []
-      if (linksFromElement.length > 0) {
-        setTechnologyConnectors(linksFromElement)
-      } else if (element.technology) {
-        setTechnologyConnectors([{ type: 'custom', label: element.technology }])
-      } else {
-        setTechnologyConnectors([])
-      }
       setTags(element.tags ?? [])
       setExplicitLogoClear(false)
 
-      // Initialize autosave fingerprint based on a payload normalized the same way as saves.
-      const initialLinks: TechnologyConnector[] = linksFromElement.length > 0
-        ? linksFromElement
-        : (element.technology ? [{ type: 'custom', label: element.technology }] : [])
-      const normalizedLinks = initialLinks.map((link) => ({
-        type: link.type,
-        slug: link.type === 'catalog' ? link.slug : undefined,
-        label: link.label,
-        is_primary_icon: !!link.is_primary_icon,
+      const linksFromElement = (element.technology_connectors ?? []).map(tl => ({
+        ...tl,
+        is_primary_icon: !!(tl.is_primary_icon ?? (tl as any).isPrimaryIcon),
       }))
-      const normalizedType = (element.kind ?? '').trim().toLowerCase()
-      const technology = initialLinks.map((link) => link.label).join(', ')
-      lastSavedFingerprintRef.current = JSON.stringify({
-        name: element.name,
-        description: element.description ?? '',
-        kind: normalizedType,
-        technology,
-        url: element.url ?? '',
-        logo_url: element.logo_url ?? '',
-        technology_connectors: normalizedLinks,
-        tags: element.tags ?? [],
-        repo: element.repo,
-        branch: element.branch,
-        file_path: element.file_path,
-        language: element.language,
-      })
+      const fallbackLinks: TechnologyConnector[] = linksFromElement.length > 0
+        ? linksFromElement
+        : (element.technology ? [{ type: 'custom', label: element.technology, is_primary_icon: false }] : [])
+      setTechnologyConnectors(fallbackLinks)
+      lastSavedFingerprintRef.current = JSON.stringify(buildTechnologyFingerprintPayload(
+        element,
+        fallbackLinks,
+        element.kind ?? '',
+      ))
+
+      normalizeInitialTechnologyLinks(element)
+        .then((initialLinks) => {
+          if (cancelled) return
+          setTechnologyConnectors(initialLinks)
+          lastSavedFingerprintRef.current = JSON.stringify(buildTechnologyFingerprintPayload(
+            element,
+            initialLinks,
+            element.kind ?? '',
+          ))
+        })
+        .catch(() => {
+          if (cancelled) return
+          setTechnologyConnectors(fallbackLinks)
+          lastSavedFingerprintRef.current = JSON.stringify(buildTechnologyFingerprintPayload(
+            element,
+            fallbackLinks,
+            element.kind ?? '',
+          ))
+        })
     } else {
       setName('')
       setDescription('')
@@ -160,17 +326,21 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
       setExplicitLogoClear(false)
       lastSavedFingerprintRef.current = ''
     }
+
+    return () => {
+      cancelled = true
+    }
   }, [element, isOpen])
 
   const buildPayloadAndFingerprint = useCallback(async () => {
-    const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && link.is_primary_icon && link.slug)
+    const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && link.slug)
     const primarySlug = primaryLink?.slug
 
     const normalizedLinks = technologyLinks.map((link) => ({
       type: link.type,
       slug: link.type === 'catalog' ? link.slug : undefined,
       label: link.label,
-      is_primary_icon: !!link.is_primary_icon,
+      is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
     }))
 
     const normalizedType = type.trim().toLowerCase()
@@ -179,7 +349,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     if (explicitLogoClear) {
       logoUrl = ''
     }
-    if (primarySlug) {
+    if (!explicitLogoClear && primarySlug) {
       const cached = technologyMeta[primarySlug]
       if (cached?.iconUrl) {
         logoUrl = cached.iconUrl
@@ -378,43 +548,31 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   }
 
   const removeTechnology = (linkToRemove: TechnologyConnector) => {
-    setTechnologyConnectors((prev) => {
-      const next = prev.filter((link) => !(link.type === linkToRemove.type && link.slug === linkToRemove.slug && link.label === linkToRemove.label))
-      const hasPrimaryCatalog = next.some((link) => link.type === 'catalog' && !!link.is_primary_icon)
-      if (hasPrimaryCatalog) return next
-
-      const firstCatalogIndex = next.findIndex((link) => link.type === 'catalog' && !!link.slug)
-      if (firstCatalogIndex === -1) return next
-
-      return next.map((link, index) => ({
-        ...link,
-        is_primary_icon: index === firstCatalogIndex,
-      }))
-    })
+    if (linkToRemove.type === 'catalog' && linkToRemove.is_primary_icon) {
+      setExplicitLogoClear(true)
+    }
+    setTechnologyConnectors((prev) => prev.filter((link) => (
+      !(link.type === linkToRemove.type && link.slug === linkToRemove.slug && link.label === linkToRemove.label)
+    )))
     scheduleAutoSave()
   }
 
-  const markPrimaryIcon = (selectedSlug: string) => {
+  const togglePrimaryIcon = (selectedSlug: string) => {
+    const isDeselecting = selectedPrimarySlug === selectedSlug
     setTechnologyConnectors((prev) => prev.map((link) => {
       if (link.type !== 'catalog') {
         return { ...link, is_primary_icon: false }
       }
       return {
         ...link,
-        is_primary_icon: link.slug === selectedSlug,
+        is_primary_icon: !isDeselecting && link.slug === selectedSlug,
       }
     }))
-    setExplicitLogoClear(false)
+    setExplicitLogoClear(isDeselecting)
     scheduleAutoSave()
   }
 
-  const clearPrimaryIcon = () => {
-    setTechnologyConnectors((prev) => prev.map((link) => ({ ...link, is_primary_icon: false })))
-    setExplicitLogoClear(true)
-    scheduleAutoSave()
-  }
-
-  const selectedPrimarySlug = technologyLinks.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)?.slug ?? ''
+  const selectedPrimarySlug = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)?.slug ?? ''
 
   const commitTypeFromQuery = () => {
     if (isReadOnly) return
@@ -437,7 +595,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     if (isReadOnly || !name.trim()) return
     setLoading(true)
     try {
-      const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && link.is_primary_icon && link.slug)
+      const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && link.slug)
       const primaryMetadata = primaryLink?.slug
         ? (technologyMeta[primaryLink.slug] ?? await getTechnologyCatalogItemBySlug(primaryLink.slug))
         : null
@@ -446,7 +604,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
         type: link.type,
         slug: link.type === 'catalog' ? link.slug : undefined,
         label: link.label,
-        is_primary_icon: !!link.is_primary_icon,
+        is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
       }))
 
       const normalizedType = type.trim().toLowerCase()
@@ -457,7 +615,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
         kind: normalizedType,
         technology: technologyLinks.map((link) => link.label).join(', '),
         url,
-        logo_url: primaryMetadata?.iconUrl ?? '',
+        logo_url: explicitLogoClear ? '' : (primaryMetadata?.iconUrl ?? ''),
         technology_connectors: normalizedLinks,
         tags,
         repo: element?.repo,
@@ -703,11 +861,24 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                   {technologyLinks.map((link) => {
                     const meta = link.slug ? technologyMeta[link.slug] : undefined
                     const sourceUrl = meta?.websiteUrl || meta?.docsUrl
+                    const isSelectable = link.type === 'catalog' && !!link.slug && !isReadOnly
+                    const isPrimaryIcon = link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug
                     return (
                       <WrapItem key={`${link.type}:${link.slug ?? link.label}`}>
                         <Popover trigger={isMobile ? 'click' : 'hover'} placement="top" closeOnBlur>
                           <PopoverTrigger>
-                            <Tag size="sm" variant="subtle" bg="whiteAlpha.100" border="1px solid" borderColor="whiteAlpha.200" cursor="pointer">
+                            <Tag
+                              size="sm"
+                              variant="subtle"
+                              bg={isPrimaryIcon ? 'blue.500' : 'whiteAlpha.100'}
+                              border="1px solid"
+                              borderColor={isPrimaryIcon ? 'blue.300' : 'whiteAlpha.200'}
+                              color={isPrimaryIcon ? 'white' : undefined}
+                              cursor={isSelectable ? 'pointer' : 'default'}
+                              onClick={() => {
+                                if (isSelectable && link.slug) togglePrimaryIcon(link.slug)
+                              }}
+                            >
                               <TagLabel color="white">
                                 {link.type === 'catalog' && meta && (
                                   <Box as="img" src={resolveWithBase(meta.iconUrl)} alt={link.label} boxSize="12px" objectFit="contain" display="inline-block" mr={1.5} verticalAlign="middle" />
@@ -715,7 +886,13 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                                 {link.label}
                               </TagLabel>
                               {!isReadOnly && (
-                                <TagCloseButton onClick={() => removeTechnology(link)} />
+                                <TagCloseButton
+                                  onClick={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    removeTechnology(link)
+                                  }}
+                                />
                               )}
                             </Tag>
                           </PopoverTrigger>
@@ -739,28 +916,6 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                   })}
                 </Wrap>
 
-                <VStack align="stretch" spacing={1}>
-                  <Text fontSize="xs" color="gray.400">Canvas icon (optional)</Text>
-                  <Button size="xs" variant="ghost" w="fit-content" onClick={clearPrimaryIcon} isDisabled={isReadOnly}>
-                    None
-                  </Button>
-                  <RadioGroup value={selectedPrimarySlug} onChange={markPrimaryIcon}>
-                    <VStack align="stretch" spacing={1}>
-                      {technologyLinks.filter((link) => link.type === 'catalog' && !!link.slug).map((link) => (
-                        <Radio
-                          key={`primary-${link.slug}`}
-                          value={link.slug}
-                          isDisabled={isReadOnly}
-                          size="sm"
-                          colorScheme="blue"
-                        >
-                          <Text fontSize="xs" color="gray.200">{link.label}</Text>
-                        </Radio>
-                      ))}
-                    </VStack>
-                  </RadioGroup>
-                </VStack>
-
                 <Text fontSize="10px" color="gray.500">Maximum 3 linked technologies.</Text>
               </VStack>
             </FormControl>

package/src/components/Icons.tsx

@@ -5,9 +5,7 @@ export function ZoomOutIcon({ size = 14, strokeWidth = 3 }: { size?: number, str
   return (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      <line x1="8" y1="11" x2="14" y2="11" />
+      <path d="M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0M21 21l-4.343-4.343M8 11h6" />
     </svg>
   )
 }
@@ -16,10 +14,7 @@ export function ZoomInIcon({ size = 14, strokeWidth = 3 }: { size?: number, stro
   return (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      <line x1="11" y1="8" x2="11" y2="14" />
-      <line x1="8" y1="11" x2="14" y2="11" />
+      <path d="M19 11a8 8 0 1 1-16 0 8 8 0 0 1 16 0M21 21l-4.343-4.343M11 8v6M8 11h6" />
     </svg>
   )
 }

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/ZUI/layout.ts

@@ -168,7 +168,7 @@ function buildNodes(
       }))
 
     const derivedPrimaryIconPath = (() => {
-      const selected = obj.technology_connectors?.find((link) => link.type === 'catalog' && !!link.is_primary_icon && !!link.slug)
+      const selected = obj.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
       if (!selected?.slug) return null
       return resolveIconPath(`/icons/${selected.slug}.png`)
     })()

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/hooks/useViewData.ts

@@ -190,8 +190,6 @@ export function useViewData({
   const treeData = useStore((state) => state.treeData)
   const allElements = useStore((state) => state.allElements)
   const setAllElements = useStore((state) => state.setAllElements)
-  const libraryRefresh = useStore((state) => state.libraryRefresh)
-  const setLibraryRefresh = useStore((state) => state.setLibraryRefresh)
   const hydrateViewContent = useStore((state) => state.hydrateViewContent)
   const resetCanvas = useStore((state) => state.resetCanvas)
   const removeElementPlacement = useStore((state) => state.removeElementPlacement)
@@ -268,7 +266,7 @@ export function useViewData({
 
   // ── Keep all-org elements for inline adder ──────────────────────────────────
   const allElementsQuery = useQuery({
-    queryKey: ['elements', 'list', libraryRefresh],
+    queryKey: ['elements', 'list'],
     queryFn: () => api.elements.list(),
   })
 
@@ -671,8 +669,6 @@ export function useViewData({
     incomingLinks,
     treeData,
     allElements,
-    libraryRefresh,
-    setLibraryRefresh,
     existingElementIds,
     // Stable refs
     viewElementsRef,

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[]>([])
@@ -422,7 +430,7 @@ function ViewEditorInner({
     view, setView, viewElements, setViewElements, connectors, setConnectors,
     rfNodes, setRfNodes, rfEdges, setRfEdges,
     linksMap, setLinksMap, parentLinksMap, setParentLinksMap,
-    treeData, allElements, libraryRefresh,
+    treeData, allElements,
     existingElementIds,
     viewElementsRef, linksMapRef, parentLinksMapRef, incomingLinksRef,
     treeDataRef, rfNodesRef, rfEdgesRef, viewIdRef,
@@ -1376,7 +1384,7 @@ function ViewEditorInner({
         <ElementLibrary
           existingElementIds={existingElementIds}
           existingElements={existingElements}
-          onCreateNew={handleCreateNewLibrary} refresh={libraryRefresh}
+          onCreateNew={handleCreateNewLibrary}
           isOpen={libraryOpen} onClose={handleCloseLibrary}
           onTapAdd={canEdit ? handleTapAdd : undefined}
           onFindElement={handleFindElement}