@tldiagram/core-ui 1.95.1 → 2.0.0

package/src/components/ElementPanel.tsx

@@ -73,8 +73,8 @@ function dedupeTechnologyLinks(links: TechnologyConnector[]): TechnologyConnecto
 
   // 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)
+    const aPrimary = !!(a.is_primary_icon ?? a.isPrimaryIcon)
+    const bPrimary = !!(b.is_primary_icon ?? b.isPrimaryIcon)
     if (aPrimary && !bPrimary) return -1
     if (!aPrimary && bPrimary) return 1
     return 0
@@ -84,7 +84,7 @@ function dedupeTechnologyLinks(links: TechnologyConnector[]): TechnologyConnecto
     const label = link.label.trim()
     if (!label) continue
 
-    const isPrimary = !!(link.is_primary_icon ?? (link as any).isPrimaryIcon)
+    const isPrimary = !!(link.is_primary_icon ?? link.isPrimaryIcon)
 
     if (link.type === 'catalog' && link.slug) {
       const slug = link.slug.trim()
@@ -141,7 +141,7 @@ async function normalizeInitialTechnologyLinks(element: LibraryElement): Promise
           type: 'catalog',
           slug: link.slug,
           label: match?.name ?? link.label,
-          is_primary_icon: !!(link.is_primary_icon ?? (link as any).isPrimaryIcon),
+          is_primary_icon: !!(link.is_primary_icon ?? link.isPrimaryIcon),
         })
       } else {
         const parts = splitTechnologyLabel(link.label)
@@ -158,10 +158,11 @@ async function normalizeInitialTechnologyLinks(element: LibraryElement): Promise
     }
   }
 
-  // If no catalog item is primary, try to match against element.logo_url or fallback to first catalog item
+  // If no catalog item is primary, try to match against element.logo_url. An
+  // explicit empty logo_url means the user deselected technology icons.
   const deduped = dedupeTechnologyLinks(normalized)
   const hasPrimary = deduped.some(l => l.type === 'catalog' && l.is_primary_icon)
-  if (!hasPrimary) {
+  if (!hasPrimary && element.logo_url !== '') {
     let bestMatchIndex = -1
     if (element.logo_url) {
       bestMatchIndex = deduped.findIndex(l => l.type === 'catalog' && l.slug && element.logo_url?.toLowerCase().includes(l.slug.toLowerCase()))
@@ -169,11 +170,6 @@ async function normalizeInitialTechnologyLinks(element: LibraryElement): Promise
 
     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
-      }
     }
   }
 
@@ -218,6 +214,11 @@ export interface ElementPanelProps extends ElementPanelSlots {
   autoSave?: boolean
   onDelete?: (id: number) => void
   onPermanentDelete?: (id: number) => void
+  onMerge?: (id: number) => void
+  visibilityOverrideDelta?: number
+  onPromoteVisibility?: (id: number) => Promise<void> | void
+  onDemoteVisibility?: (id: number) => Promise<void> | void
+  onResetVisibility?: (id: number) => Promise<void> | void
   orgId?: string
   links?: ViewConnector[]
   parentLinks?: ViewConnector[]
@@ -231,7 +232,7 @@ export interface ElementPanelProps extends ElementPanelSlots {
  * Location: Right side of the screen on desktop. Overlays screen on mobile.
  * Aliases: Element Properties, Element Details.
  */
-function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDelete, onPermanentDelete, orgId, links = [], parentLinks = [], hasBackdrop = true, availableTags = [], elementPanelAfterContentSlot }: ElementPanelProps) {
+function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDelete, onPermanentDelete, onMerge, visibilityOverrideDelta = 0, onPromoteVisibility, onDemoteVisibility, onResetVisibility, orgId, links = [], parentLinks = [], hasBackdrop = true, availableTags = [], elementPanelAfterContentSlot }: ElementPanelProps) {
   const { canEdit, viewId } = useViewEditorContext()
   const isEdit = !!element
   const isReadOnly = !canEdit
@@ -276,11 +277,11 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
       setTypeResults([])
       setUrl(element.url ?? '')
       setTags(element.tags ?? [])
-      setExplicitLogoClear(false)
+      setExplicitLogoClear(element.logo_url === '')
 
       const linksFromElement = (element.technology_connectors ?? []).map(tl => ({
         ...tl,
-        is_primary_icon: !!(tl.is_primary_icon ?? (tl as any).isPrimaryIcon),
+        is_primary_icon: !!(tl.is_primary_icon ?? tl.isPrimaryIcon),
       }))
       const fallbackLinks: TechnologyConnector[] = linksFromElement.length > 0
         ? linksFromElement
@@ -333,14 +334,14 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
   }, [element, isOpen])
 
   const buildPayloadAndFingerprint = useCallback(async () => {
-    const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && link.slug)
+    const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? link.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 ?? (link as any).isPrimaryIcon),
+      is_primary_icon: !!(link.is_primary_icon ?? link.isPrimaryIcon),
     }))
 
     const normalizedType = type.trim().toLowerCase()
@@ -420,9 +421,9 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     })
   }
 
-  const handleClose = useCallback(() => {
+  const handleClose = useCallback(async () => {
     if (autoSaveEdit) {
-      void saveIfDirtyRef.current?.()
+      await saveIfDirtyRef.current?.()
     }
     onClose()
   }, [autoSaveEdit, onClose])
@@ -526,13 +527,12 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
         type: 'catalog',
         slug: item.defaultSlug,
         label: item.name,
-        is_primary_icon: !hasPrimaryCatalog,
+        is_primary_icon: !explicitLogoClear && !hasPrimaryCatalog,
       },
     ]))
     setTechnologyQuery('')
     setTechnologyResults([])
     setTechnologyMeta((prev) => ({ ...prev, [item.defaultSlug]: item }))
-    setExplicitLogoClear(false)
     scheduleAutoSave()
   }
 
@@ -572,7 +572,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
     scheduleAutoSave()
   }
 
-  const selectedPrimarySlug = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)?.slug ?? ''
+  const selectedPrimarySlug = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? link.isPrimaryIcon) && !!link.slug)?.slug ?? ''
 
   const commitTypeFromQuery = () => {
     if (isReadOnly) return
@@ -595,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 as any).isPrimaryIcon) && link.slug)
+      const primaryLink = technologyLinks.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? link.isPrimaryIcon) && link.slug)
       const primaryMetadata = primaryLink?.slug
         ? (technologyMeta[primaryLink.slug] ?? await getTechnologyCatalogItemBySlug(primaryLink.slug))
         : null
@@ -604,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 ?? (link as any).isPrimaryIcon),
+        is_primary_icon: !!(link.is_primary_icon ?? link.isPrimaryIcon),
       }))
 
       const normalizedType = type.trim().toLowerCase()
@@ -862,7 +862,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
                     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
+                    const isPrimaryIcon = link.type === 'catalog' && !!(link.is_primary_icon ?? link.isPrimaryIcon) && !!link.slug
                     return (
                       <WrapItem key={`${link.type}:${link.slug ?? link.label}`}>
                         <Popover trigger={isMobile ? 'click' : 'hover'} placement="top" closeOnBlur>
@@ -1034,6 +1034,43 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
 
             {elementPanelAfterContentSlot}
 
+            {element && (onPromoteVisibility || onDemoteVisibility || onResetVisibility) && (
+              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={2}>
+                <HStack justify="space-between" mb={2}>
+                  <FormLabel fontSize="xs" fontWeight="bold" color="gray.400" mb={0}>DENSITY</FormLabel>
+                  {visibilityOverrideDelta !== 0 && (
+                    <Badge colorScheme={visibilityOverrideDelta > 0 ? 'teal' : 'orange'} variant="subtle">
+                      {visibilityOverrideDelta > 0 ? `+${visibilityOverrideDelta}` : visibilityOverrideDelta}
+                    </Badge>
+                  )}
+                </HStack>
+                <HStack spacing={2}>
+                  <Button variant="subtle" size="sm" color="teal.200" _hover={{ bg: 'teal.900', color: 'teal.100' }} onClick={() => onPromoteVisibility?.(element.id)} flex={1} isDisabled={isReadOnly}>
+                    Promote
+                  </Button>
+                  <Button variant="subtle" size="sm" color="orange.200" _hover={{ bg: 'orange.900', color: 'orange.100' }} onClick={() => onDemoteVisibility?.(element.id)} flex={1} isDisabled={isReadOnly}>
+                    Demote
+                  </Button>
+                  {visibilityOverrideDelta !== 0 && (
+                    <Button variant="ghost" size="sm" onClick={() => onResetVisibility?.(element.id)} isDisabled={isReadOnly}>
+                      Reset
+                    </Button>
+                  )}
+                </HStack>
+              </Box>
+            )}
+
+
+
+            {isEdit && canEdit && onMerge && (
+              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={2}>
+                <Button variant="subtle" size="sm" color="teal.200" _hover={{ bg: 'teal.900', color: 'teal.100' }}
+                  onClick={() => onMerge(element.id)} w="full">
+                  Merge
+                </Button>
+              </Box>
+            )}
+
             {isEdit && canEdit && (
               <HStack borderTop="1px solid" borderColor="whiteAlpha.100" pt={2} spacing={2}>
                 <Button variant="subtle" size="sm" color="white" _hover={{ bg: 'whiteAlpha.100' }} onClick={handleDelete} flex={1}>
@@ -1072,7 +1109,7 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
         onClose={confirmPermanentDelete.onClose}
         onConfirm={handlePermanentDelete}
         title="Delete Element"
-        body="Permanently delete this element? It will be removed from all views and cannot be recovered."
+        body="This permanently deletes the element from the library and cannot be reverted."
         confirmLabel="Delete Permanently"
       />
     </>

package/src/components/InlineElementAdder.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Box, Badge, HStack, Input, Text, VStack } from '@chakra-ui/react'
 import type { LibraryElement } from '../types'
 import { TYPE_COLORS } from '../types'
+import { useElementSearch } from '../hooks/useElementSearch'
 
 interface Props {
   x: number
@@ -32,7 +33,7 @@ export default function InlineElementAdder({
   title,
   getSecondaryLabel,
 }: Props) {
-  const [query, setQuery] = useState('')
+  const { query, setQuery, remoteElements } = useElementSearch()
   const [activeIndex, setActiveIndex] = useState(0)
   const [busy, setBusy] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -44,12 +45,16 @@ export default function InlineElementAdder({
 
   const filtered = (() => {
     if (!query.trim()) return []
+    const byID = new Map<number, LibraryElement>()
+    remoteElements.forEach((element) => byID.set(element.id, element))
+    allElements.forEach((element) => byID.set(element.id, element))
+    const candidates = Array.from(byID.values())
     try {
       const re = new RegExp(query, 'i')
-      return allElements.filter((o) => re.test(o.name)).slice(0, 8)
+      return candidates.filter((o) => re.test(o.name)).slice(0, 8)
     } catch {
       const q = query.toLowerCase()
-      return allElements.filter((o) => o.name.toLowerCase().includes(q)).slice(0, 8)
+      return candidates.filter((o) => o.name.toLowerCase().includes(q)).slice(0, 8)
     }
   })()
 

package/src/components/LayoutSection.tsx

@@ -49,9 +49,10 @@ const ALGO_META: Record<Algorithm, { label: string }> = {
 interface Props {
   view: ViewTreeNode | null
   canEdit: boolean
+  onUnsupportedMutation?: () => void
 }
 
-export default function LayoutSection({ view, canEdit }: Props) {
+export default function LayoutSection({ view, canEdit, onUnsupportedMutation }: Props) {
   const [open, setOpen] = useState(false)
   const [algo, setAlgo] = useState<Algorithm>('dagre')
   const [running, setRunning] = useState(false)
@@ -73,6 +74,7 @@ export default function LayoutSection({ view, canEdit }: Props) {
 
   const handleCollisionRemoval = async () => {
     if (!canEdit || !view) return
+    onUnsupportedMutation?.()
     setCollisionRunning(true)
     try {
       const [objs, edgeList] = await Promise.all([
@@ -192,6 +194,7 @@ export default function LayoutSection({ view, canEdit }: Props) {
 
   const applyLayout = async () => {
     if (!view || !canEdit) return
+    onUnsupportedMutation?.()
     setRunning(true)
     try {
       const [objs, edgeList] = await Promise.all([

package/src/components/MergeDialog.tsx

@@ -0,0 +1,269 @@
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
+import {
+  Box,
+  Button,
+  CloseButton,
+  HStack,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Radio,
+  RadioGroup,
+  Spinner,
+  Text,
+  VStack,
+  Badge,
+} from '@chakra-ui/react'
+import type { LibraryElement } from '../types'
+import { useElementSearch } from '../hooks/useElementSearch'
+
+interface MergeDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  source: LibraryElement | null
+  onMerge: (survivorId: number, resolved: {
+    kind: string | null
+    description: string | null
+    repo: string | null
+    branch: string | null
+    file_path: string | null
+    language: string | null
+  }) => Promise<void>
+}
+
+type Step = 'select' | 'resolve'
+
+function fieldsConflict(a: LibraryElement, b: LibraryElement): boolean {
+  if ((a.kind || null) !== (b.kind || null)) return true
+  if ((a.description || null) !== (b.description || null)) return true
+  if ((a.repo || null) !== (b.repo || null)) return true
+  if ((a.branch || null) !== (b.branch || null)) return true
+  if ((a.file_path || null) !== (b.file_path || null)) return true
+  if ((a.language || null) !== (a.language || null)) return true
+  return false
+}
+
+export default function MergeDialog({ isOpen, onClose, source, onMerge }: MergeDialogProps) {
+  const [step, setStep] = useState<Step>('select')
+  const [survivor, setSurvivor] = useState<LibraryElement | null>(null)
+  const [resolved, setResolved] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const { query: search, setQuery: setSearch, remoteElements, fetching } = useElementSearch()
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+    const t = setTimeout(() => searchInputRef.current?.focus(), 30)
+    return () => clearTimeout(t)
+  }, [isOpen])
+
+  const candidates = useMemo(() => {
+    if (!source) return []
+    const results = remoteElements.filter((el) => el.id !== source.id)
+    return results
+  }, [source, remoteElements])
+
+  const conflicts = useMemo(() => {
+    if (!source || !survivor || !fieldsConflict(source, survivor)) return null
+    const items: { key: string; label: string; source: string | null; survivor: string | null }[] = []
+    if ((source.kind || null) !== (survivor.kind || null)) {
+      items.push({ key: 'kind', label: 'Type/Kind', source: source.kind || null, survivor: survivor.kind || null })
+    }
+    if ((source.description || null) !== (survivor.description || null)) {
+      items.push({ key: 'description', label: 'Description', source: source.description || null, survivor: survivor.description || null })
+    }
+    const srcGit = [source.repo, source.branch, source.file_path, source.language].filter(Boolean).join(' / ')
+    const surGit = [survivor.repo, survivor.branch, survivor.file_path, survivor.language].filter(Boolean).join(' / ')
+    if (srcGit !== surGit) {
+      items.push({ key: 'gitsource', label: 'Git Source', source: srcGit || null, survivor: surGit || null })
+    }
+    return items.length > 0 ? items : null
+  }, [source, survivor])
+
+  const handleSelect = useCallback((el: LibraryElement) => {
+    setSurvivor(el)
+    if (source && fieldsConflict(source, el)) {
+      setStep('resolve')
+    } else {
+      handleMerge(el.id)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source])
+
+  const handleResolveChange = useCallback((key: string, value: string) => {
+    setResolved((prev) => ({ ...prev, [key]: value }))
+  }, [])
+
+  const handleMerge = useCallback(async (survivorId: number) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const finalResolved: {
+        kind: string | null
+        description: string | null
+        repo: string | null
+        branch: string | null
+        file_path: string | null
+        language: string | null
+      } = { kind: null, description: null, repo: null, branch: null, file_path: null, language: null }
+
+      if (resolved.kind) finalResolved.kind = resolved.kind
+      if (resolved.description) finalResolved.description = resolved.description
+      if (resolved.gitsource) {
+        const parts = resolved.gitsource.split(' / ')
+        if (parts.length === 4) {
+          finalResolved.repo = parts[0] || null
+          finalResolved.branch = parts[1] || null
+          finalResolved.file_path = parts[2] || null
+          finalResolved.language = parts[3] || null
+        }
+      }
+      await onMerge(survivorId, finalResolved)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Merge failed')
+    } finally {
+      setLoading(false)
+    }
+  }, [resolved, onMerge])
+
+  const handleResolve = useCallback(async () => {
+    if (!survivor) return
+    await handleMerge(survivor.id)
+  }, [survivor, handleMerge])
+
+  const handleClose = useCallback(() => {
+    setStep('select')
+    setSearch('')
+    setSurvivor(null)
+    setResolved({})
+    setError(null)
+    onClose()
+  }, [onClose, setSearch])
+
+  if (!isOpen || !source) return null
+
+  return (
+    <Box position="fixed" inset={0} zIndex={1500} display="flex" alignItems="center" justifyContent="center">
+      <Box position="absolute" inset={0} bg="blackAlpha.800" onClick={handleClose} />
+      <Box position="relative" bg="var(--bg-panel)" border="1px solid" borderColor="whiteAlpha.100" rounded="xl"
+        boxShadow="0 8px 32px rgba(0,0,0,0.5)" backdropFilter="blur(20px)" mx={4} w="100%" maxW="440px" maxH="80vh" overflow="hidden">
+        <Box px={4} py={3} borderBottom="1px solid" borderColor="whiteAlpha.100">
+          <HStack justify="space-between">
+            <Text fontWeight="semibold" color="white">
+              {step === 'select' ? 'Merge Element Into...' : 'Resolve Conflicts'}
+            </Text>
+            <CloseButton size="sm" onClick={handleClose} />
+          </HStack>
+        </Box>
+
+        {step === 'select' && (
+          <>
+            <Box px={4} pt={3} pb={2}>
+              <Text fontSize="xs" color="gray.400">
+                Merging <Badge variant="subtle" colorScheme="blue" fontSize="xs" mx={0.5}>{source.name}</Badge> into another element. All connectors will be reassigned.
+              </Text>
+            </Box>
+            <Box px={4} pb={2}>
+              <InputGroup size="sm">
+                <InputLeftElement pointerEvents="none" color="gray.400" fontSize="xs">
+                <Text>&#x1F50D;</Text>
+              </InputLeftElement>
+                <Input ref={searchInputRef} placeholder="Search elements..." value={search} onChange={(e) => setSearch(e.target.value)}
+                  autoFocus bg="whiteAlpha.50" borderColor="whiteAlpha.100" _hover={{ borderColor: 'whiteAlpha.200' }}
+                  _focus={{ borderColor: 'var(--accent)' }} />
+              </InputGroup>
+            </Box>
+            <Box maxH="320px" overflowY="auto" px={1}>
+              {fetching ? (
+                <Box px={4} py={6} textAlign="center">
+                  <Spinner size="sm" color="var(--accent)" />
+                </Box>
+              ) : !search.trim() ? (
+                <Box px={4} py={6} textAlign="center">
+                  <Text fontSize="sm" color="gray.500">Type to search elements...</Text>
+                </Box>
+              ) : candidates.length === 0 ? (
+                <Box px={4} py={6} textAlign="center">
+                  <Text fontSize="sm" color="gray.500">No matching elements</Text>
+                </Box>
+              ) : (
+                <VStack spacing={0} align="stretch" px={1} pb={2}>
+                  {candidates.map((el) => (
+                    <Button key={el.id} variant="ghost" size="sm" h="auto" py={2.5} px={3} justifyContent="flex-start"
+                      color="clay.text" _hover={{ bg: 'whiteAlpha.100' }} onClick={() => handleSelect(el)}>
+                      <VStack spacing={0.5} align="start" w="full">
+                        <Text fontWeight="medium" fontSize="sm">{el.name}</Text>
+                        {el.kind && <Badge variant="subtle" fontSize="2xs" colorScheme="gray">{el.kind}</Badge>}
+                      </VStack>
+                    </Button>
+                  ))}
+                </VStack>
+              )}
+            </Box>
+          </>
+        )}
+
+        {step === 'resolve' && survivor && conflicts && (
+          <>
+            <Box px={4} py={2}>
+              <Text fontSize="xs" color="gray.400" mb={1}>
+                Some fields differ. Choose which value to keep for each conflict.
+              </Text>
+              <HStack spacing={2} mb={4}>
+                <Badge variant="subtle" colorScheme="red" fontSize="2xs">{source.name} (will be deleted)</Badge>
+                <Badge variant="subtle" colorScheme="green" fontSize="2xs">{survivor.name} (survivor)</Badge>
+              </HStack>
+            </Box>
+            <Box px={4} pb={2} maxH="280px" overflowY="auto">
+              <VStack spacing={4} align="stretch">
+                {conflicts.map((conflict) => (
+                  <Box key={conflict.key} p={3} bg="whiteAlpha.50" rounded="md" border="1px solid" borderColor="whiteAlpha.100">
+                    <Text fontSize="xs" fontWeight="medium" color="gray.300" mb={2}>{conflict.label}</Text>
+                    <RadioGroup value={resolved[conflict.key] || ''} onChange={(val) => handleResolveChange(conflict.key, val)}>
+                      <VStack spacing={1.5} align="stretch">
+                        {conflict.source && conflict.source !== 'null' && conflict.source !== '' && (
+                          <Radio value="source" size="sm">
+                            <HStack spacing={1.5}>
+                              <Text fontSize="xs" color="gray.300">{conflict.source}</Text>
+                              <Badge variant="subtle" colorScheme="red" fontSize="2xs">source</Badge>
+                            </HStack>
+                          </Radio>
+                        )}
+                        {conflict.survivor && conflict.survivor !== 'null' && conflict.survivor !== '' && (
+                          <Radio value="survivor" size="sm">
+                            <HStack spacing={1.5}>
+                              <Text fontSize="xs" color="gray.300">{conflict.survivor}</Text>
+                              <Badge variant="subtle" colorScheme="green" fontSize="2xs">survivor</Badge>
+                            </HStack>
+                          </Radio>
+                        )}
+                        <Radio value="none" size="sm">
+                          <Text fontSize="xs" color="gray.400">Leave empty</Text>
+                        </Radio>
+                      </VStack>
+                    </RadioGroup>
+                  </Box>
+                ))}
+              </VStack>
+            </Box>
+            <Box px={4} pt={2} pb={4} borderTop="1px solid" borderColor="whiteAlpha.100">
+              <HStack justify="space-between">
+                <Button variant="ghost" size="sm" onClick={() => setStep('select')}>Back</Button>
+                <Button size="sm" colorScheme="blue" onClick={handleResolve} isLoading={loading}>
+                  Merge
+                </Button>
+              </HStack>
+            </Box>
+          </>
+        )}
+
+        {error && (
+          <Box px={4} pb={3}>
+            <Text fontSize="xs" color="red.300">{error}</Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/components/NodeContainer.tsx

@@ -8,6 +8,8 @@ export interface ElementContainerProps extends BoxProps {
   isSource?: boolean
   isTarget?: boolean
   isConnectorHighlighted?: boolean
+  hasStack?: boolean
+  kind?: string | null
 }
 
 export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
@@ -15,19 +17,24 @@ export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
   isSource,
   isTarget,
   isConnectorHighlighted,
+  hasStack,
+  kind: _kind,
   children,
   ...props
 }, ref) => {
   const { accent } = useAccentColor()
 
+  const brandedBorder = hexToRgba('#a0aec0', 0.5)
+
   const borderColor = isSource
     ? accent
     : isTarget
       ? 'teal.300'
       : isSelected || isConnectorHighlighted
         ? accent
-        : 'gray.600'
+        : brandedBorder
 
+  // Shadows matching ZUICanvas / high-fidelity look
   const selectionShadow      = `0 0 0 3px ${hexToRgba(accent, 0.35)}, 0 10px 36px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4)`
   const sourceShadow         = `0 0 0 3px ${hexToRgba(accent, 0.55)}, 0 0 24px ${hexToRgba(accent, 0.25)}`
   const edgeHighlightShadow  = `0 0 0 2px ${hexToRgba(accent, 0.2)}, 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35)`
@@ -36,23 +43,54 @@ export const ElementContainer = memo(forwardRef<ElementContainerProps, 'div'>(({
 
   const boxShadow = isSource ? sourceShadow : isSelected ? selectionShadow : isConnectorHighlighted ? edgeHighlightShadow : restingShadow
 
+  const finalBorderColor = borderColor
+
   return (
-    <Box
-      ref={ref}
-      bg="var(--bg-element)"
-      borderColor={borderColor}
-      borderWidth="1px"
-      rounded="lg"
-      boxShadow={boxShadow}
-      transition="all var(--chakra-transitions-duration-fast) var(--chakra-transitions-easing-pop)"
-      position="relative"
-      _hover={{
-        borderColor: isSource ? accent : isTarget ? 'teal.200' : accent,
-        boxShadow: hoverShadow,
-      }}
-      {...props}
-    >
-      {children}
+    <Box position="relative" zIndex={1}>
+      {hasStack && (
+        <>
+          {/* Stack effect matching ZUI renderer.ts (offset 4px and 8px) */}
+          <Box
+            position="absolute"
+            inset={0}
+            transform="translate(8px, 8px)"
+            bg="var(--bg-element)"
+            borderColor={finalBorderColor}
+            borderWidth="1px"
+            rounded="lg"
+            opacity={0.4}
+            zIndex={-2}
+          />
+          <Box
+            position="absolute"
+            inset={0}
+            transform="translate(4px, 4px)"
+            bg="var(--bg-element)"
+            borderColor={finalBorderColor}
+            borderWidth="1px"
+            rounded="lg"
+            opacity={0.7}
+            zIndex={-1}
+          />
+        </>
+      )}
+      <Box
+        ref={ref}
+        bg="var(--bg-element)"
+        borderColor={finalBorderColor}
+        borderWidth="1px"
+        rounded="lg"
+        boxShadow={boxShadow}
+        transition="all var(--chakra-transitions-duration-fast) var(--chakra-transitions-easing-pop)"
+        position="relative"
+        _hover={{
+          borderColor: isSource ? accent : isTarget ? 'teal.200' : accent,
+          boxShadow: hoverShadow,
+        }}
+        {...props}
+      >
+        {children}
+      </Box>
     </Box>
   )
 }))