@tldiagram/core-ui 2.0.4 → 2.0.6

package/dist/pages/ViewEditor/hooks/useCanvasInteractions.d.ts

@@ -173,6 +173,7 @@ export declare function useCanvasInteractions({ viewId, canEdit, drawingMode: _d
         clientX: number;
         clientY: number;
     }) => void;
+    stableOnReconnectPick: (targetElementId: number) => Promise<boolean>;
     showAddingElementAt: (clientX: number, clientY: number, expandResults?: boolean, mode?: "add" | "connect", forceConnect?: boolean) => void;
     onNodesChange: (changes: NodeChange[]) => void;
     onEdgesChange: (changes: EdgeChange[]) => void;

package/dist/utils/string.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Truncates a string to a specified length and appends an ellipsis.
+ */
+export declare const truncate: (str: string, limit?: number) => string;

package/dist/utils/string.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/src/components/ElementPanel.tsx

@@ -6,7 +6,6 @@ import {
   Box,
   Button,
   CloseButton,
-  Divider,
   FormControl,
   FormLabel,
   HStack,
@@ -1034,49 +1033,87 @@ 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
+            {(element && (onPromoteVisibility || onDemoteVisibility || onResetVisibility)) || (isEdit && canEdit && onMerge) ? (
+              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={4} pb={1}>
+                {element && (onPromoteVisibility || onDemoteVisibility || onResetVisibility) && (
+                  <>
+                    <HStack justify="space-between" mb={2}>
+                      <FormLabel fontSize="xs" fontWeight="semibold" letterSpacing="wider" color="gray.500" mb={0} textTransform="uppercase">Density</FormLabel>
+                      {visibilityOverrideDelta !== 0 && (
+                        <Badge colorScheme={visibilityOverrideDelta > 0 ? 'teal' : 'orange'} variant="subtle" fontSize="xs">
+                          {visibilityOverrideDelta > 0 ? `+${visibilityOverrideDelta}` : visibilityOverrideDelta}
+                        </Badge>
+                      )}
+                    </HStack>
+                    <HStack spacing={2} mb={isEdit && canEdit && onMerge ? 2 : 0}>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        borderColor="teal.700"
+                        color="teal.300"
+                        _hover={{ bg: 'teal.900', borderColor: 'teal.500', color: 'teal.100' }}
+                        onClick={() => onPromoteVisibility?.(element.id)}
+                        flex={1}
+                        isDisabled={isReadOnly}
+                      >
+                        Promote
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        borderColor="orange.700"
+                        color="orange.300"
+                        _hover={{ bg: 'orange.900', borderColor: 'orange.500', color: 'orange.100' }}
+                        onClick={() => onDemoteVisibility?.(element.id)}
+                        flex={1}
+                        isDisabled={isReadOnly}
+                      >
+                        Demote
+                      </Button>
+                      {visibilityOverrideDelta !== 0 && (
+                        <Button variant="ghost" size="sm" color="gray.400" _hover={{ bg: 'whiteAlpha.100', color: 'white' }} onClick={() => onResetVisibility?.(element.id)} isDisabled={isReadOnly}>
+                          Reset
+                        </Button>
+                      )}
+                    </HStack>
+                  </>
+                )}
+                {isEdit && canEdit && onMerge && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    borderColor="teal.700"
+                    color="teal.300"
+                    _hover={{ bg: 'teal.900', borderColor: 'teal.500', color: 'teal.100' }}
+                    onClick={() => onMerge(element.id)}
+                    w="full"
+                  >
+                    Merge
                   </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>
-            )}
+            ) : null}
 
             {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}>
+              <HStack borderTop="1px solid" borderColor="whiteAlpha.100" pt={4} pb={1} spacing={2}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  color="gray.400"
+                  _hover={{ bg: 'whiteAlpha.100', color: 'white' }}
+                  onClick={handleDelete}
+                  flex={1}
+                >
                   Remove
                 </Button>
-                <Button variant="subtle" size="sm" color="red.300" _hover={{ bg: 'red.900', color: 'red.100' }} onClick={confirmPermanentDelete.onOpen} flex={1}>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  color="red.400"
+                  _hover={{ bg: 'red.900', color: 'red.200' }}
+                  onClick={confirmPermanentDelete.onOpen}
+                  flex={1}
+                >
                   Delete Element
                 </Button>
               </HStack>
@@ -1084,24 +1121,19 @@ function ElementPanel({ isOpen, onClose, element, onSave, autoSave = false, onDe
           </VStack>
         </ScrollIndicatorWrapper>
 
-        <Divider borderColor="whiteAlpha.100" />
-
         {/* Footer */}
-        <HStack px={4} py={3} justify="space-between" flexShrink={0}>
-
-          {!autoSaveEdit && (
-            <HStack ml="auto">
-              <Button variant="ghost" size="sm" onClick={handleClose}>
-                Cancel
+        {!autoSaveEdit && (
+          <HStack px={4} py={3} justify="flex-end" flexShrink={0}>
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              Cancel
+            </Button>
+            {canEdit && (
+              <Button size="sm" px={5} colorScheme="blue" onClick={handleSave} isLoading={loading}>
+                Save
               </Button>
-              {canEdit && (
-                <Button size="sm" px={5} colorScheme="blue" onClick={handleSave} isLoading={loading}>
-                  Save
-                </Button>
-              )}
-            </HStack>
-          )}
-        </HStack>
+            )}
+          </HStack>
+        )}
       </SlidingPanel>
 
       <ConfirmDialog

package/src/components/ProxyConnectorPanel.tsx

@@ -6,6 +6,7 @@ import PanelHeader from './PanelHeader'
 import { ChevronRightIcon, NavigationIcon, TrashIcon, EditIcon } from './Icons'
 import { useViewEditorContext } from '../pages/ViewEditor/context'
 import type { Connector } from '../types'
+import { truncate } from '../utils/string'
 
 interface Props {
   isOpen: boolean
@@ -83,11 +84,11 @@ export default function ProxyConnectorPanel({
                           <VStack align="start" spacing={1} flex={1}>
                             <HStack spacing={2}>
                               <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                                {leaf.source.actualElementName}
+                                {truncate(leaf.source.actualElementName)}
                               </Text>
                               <Icon as={ChevronRightIcon} color="whiteAlpha.400" />
                               <Text color="white" fontSize="sm" fontWeight="semibold" isTruncated>
-                                {leaf.target.actualElementName}
+                                {truncate(leaf.target.actualElementName)}
                               </Text>
                             </HStack>
 

package/src/components/SlidingPanel.tsx

@@ -99,8 +99,6 @@ export default function SlidingPanel({
               backdropFilter="blur(24px)"
               border="1px solid"
               borderColor="whiteAlpha.100"
-              borderTop="2px solid"
-              borderTopColor="var(--accent)"
               rounded="xl"
               shadow="panel"
             >

package/src/pages/AppearanceSettings.tsx

@@ -1,46 +1,32 @@
-import { Box, FormLabel, HStack, Select, Text, Tooltip, VStack, Wrap, WrapItem } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  FormLabel,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  Tooltip,
+  VStack,
+  Wrap,
+  WrapItem,
+} from '@chakra-ui/react'
 import { ACCENT_OPTIONS, BACKGROUND_OPTIONS, ELEMENT_OPTIONS } from '../constants/colors'
 import { useTheme } from '../context/ThemeContext'
 import { useSourceEditor } from '../utils/sourceEditor'
-import type { SourceEditor } from '../api/client'
+import { ChevronDownIcon } from '../components/Icons'
 
 export default function AppearanceSettings({ compact = false }: { compact?: boolean }) {
   const { accent, setAccent, background, setBackground, elementColor, setElementColor } = useTheme()
   const { editor, setEditor } = useSourceEditor()
-  const swatchSize = compact ? '28px' : '32px'
+  const swatchSize = compact ? '21px' : '32px'
   const sectionGap = compact ? 5 : 8
 
   return (
     <VStack align="start" spacing={sectionGap} maxW={compact ? '320px' : '480px'} w="full">
-      <Box w="full">
-        <HStack justify="space-between" align="end" w="full" mb={compact ? 0 : 1}>
-          <Box>
-            <Text fontFamily="heading" fontSize={compact ? 'md' : 'lg'} fontWeight="bold" color="gray.100" mb={1}>
-              Theme
-            </Text>
-          </Box>
-        </HStack>
-      </Box>
 
-      <Box w="full">
-        <FormLabel mb={3} fontSize={compact ? 'xs' : 'sm'} textTransform="uppercase" letterSpacing="0.12em" color="gray.400">
-          Source Editor
-        </FormLabel>
-        <Select
-          size="sm"
-          value={editor}
-          onChange={(event) => setEditor(event.target.value as SourceEditor)}
-          bg="whiteAlpha.50"
-          borderColor="whiteAlpha.200"
-          color="gray.100"
-          maxW="220px"
-          _hover={{ borderColor: 'whiteAlpha.400' }}
-          _focus={{ borderColor: 'blue.400', boxShadow: '0 0 0 1px var(--chakra-colors-blue-400)' }}
-        >
-          <option value="zed">Zed</option>
-          <option value="vscode">VS Code</option>
-        </Select>
-      </Box>
 
       <Box w="full">
         <FormLabel mb={3} fontSize={compact ? 'xs' : 'sm'} textTransform="uppercase" letterSpacing="0.12em" color="gray.400">
@@ -153,6 +139,36 @@ export default function AppearanceSettings({ compact = false }: { compact?: bool
           })}
         </Wrap>
       </Box>
+
+      <Box w="full">
+        <FormLabel mb={3} fontSize={compact ? 'xs' : 'sm'} textTransform="uppercase" letterSpacing="0.12em" color="gray.400">
+          Editor
+        </FormLabel>
+        <Menu>
+          <MenuButton
+            as={Button}
+            size="sm"
+            variant="clay"
+            rightIcon={<ChevronDownIcon size={12} strokeWidth={4} />}
+            minW="140px"
+            textAlign="left"
+            bg="whiteAlpha.100"
+            color="gray.100"
+            _hover={{ bg: 'whiteAlpha.200' }}
+            _active={{ bg: 'whiteAlpha.300' }}
+          >
+            {editor === 'zed' ? 'Zed' : 'VS Code'}
+          </MenuButton>
+          <MenuList>
+            <MenuItem onClick={() => setEditor('zed')} fontWeight={editor === 'zed' ? 'bold' : 'normal'}>
+              Zed
+            </MenuItem>
+            <MenuItem onClick={() => setEditor('vscode')} fontWeight={editor === 'vscode' ? 'bold' : 'normal'}>
+              VS Code
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Box>
     </VStack>
   )
 }

package/src/pages/ViewEditor/hooks/useCanvasInteractions.ts

@@ -1008,6 +1008,43 @@ export function useCanvasInteractions({
     document.addEventListener('pointercancel', up)
   }, [canEdit, clearHandleReconnectListeners, performReconnect, rfNodesRef, _rfEdgesRef, syncHandleReconnectDrag])
 
+  const stableOnReconnectPick = useCallback(async (targetElementId: number) => {
+    const picking = reconnectPickingRef.current
+    if (!canEdit || !picking) return false
+
+    const oldConnector = _rfEdgesRef.current.find((candidate) => candidate.id === String(picking.edgeId))
+    const pickedNode = rfNodesRef.current.find((node) => node.id === String(targetElementId))
+    if (!oldConnector || !pickedNode) return false
+
+    const fixedNodeId = picking.endpoint === 'source' ? oldConnector.target : oldConnector.source
+    if (fixedNodeId === pickedNode.id) return false
+    const fixedNode = rfNodesRef.current.find((node) => node.id === fixedNodeId)
+    if (!fixedNode) return false
+
+    const closest = picking.endpoint === 'source'
+      ? findClosestHandles(pickedNode, fixedNode)
+      : findClosestHandles(fixedNode, pickedNode)
+    const newConnection: Connection = picking.endpoint === 'source'
+      ? {
+        source: pickedNode.id,
+        sourceHandle: ensureVisualHandleId(closest.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? closest.sourceHandle,
+        target: fixedNode.id,
+        targetHandle: ensureVisualHandleId(closest.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? closest.targetHandle,
+      }
+      : {
+        source: fixedNode.id,
+        sourceHandle: ensureVisualHandleId(closest.sourceHandle, DEFAULT_SOURCE_HANDLE_SIDE) ?? closest.sourceHandle,
+        target: pickedNode.id,
+        targetHandle: ensureVisualHandleId(closest.targetHandle, DEFAULT_TARGET_HANDLE_SIDE) ?? closest.targetHandle,
+      }
+
+    reconnectPickingRef.current = null
+    setReconnectPicking(null)
+    setConnectorLongPressMenu(null)
+    await performReconnect(oldConnector, newConnection)
+    return true
+  }, [canEdit, _rfEdgesRef, performReconnect, rfNodesRef])
+
   // ── Click-connect ghost cursor tracking ────────────────────────────────────
   useEffect(() => {
     if (!clickConnectMode) {
@@ -1528,6 +1565,7 @@ export function useCanvasInteractions({
     stableOnConnectTo,
     stableOnInteractionStart,
     stableOnStartHandleReconnect,
+    stableOnReconnectPick,
     showAddingElementAt,
     // RF event handlers
     onNodesChange,

package/src/pages/ViewEditor/hooks/useViewData.ts

@@ -227,7 +227,13 @@ export function useViewData({
       queryFn: () => api.workspace.views.treeAround(viewId, { ancestorLevels: 2, descendantLevels: 2 }),
       staleTime: 0,
     }).catch(() => null)
-    if (tree) useStore.getState().setTreeData(tree)
+    if (tree) {
+      const links = buildViewContentLinks(tree, viewId, viewElementsRef.current)
+      useStore.getState().setTreeData(tree)
+      useStore.getState().setLinksMap(links.linksMap)
+      useStore.getState().setParentLinksMap(links.parentLinksMap)
+      useStore.getState().setIncomingLinks(links.incomingLinks)
+    }
   }, [queryClient, viewId])
 
   // ── Fetch view content ──────────────────────────────────────────────────
@@ -281,8 +287,12 @@ export function useViewData({
     if (fresh) {
       setViewElements(fresh.placements)
       setConnectors(fresh.connectors)
+      const links = buildViewContentLinks(treeDataRef.current, viewId, fresh.placements)
+      setLinksMap(links.linksMap)
+      setParentLinksMap(links.parentLinksMap)
+      useStore.getState().setIncomingLinks(links.incomingLinks)
     }
-  }, [queryClient, setConnectors, setViewElements, viewId])
+  }, [queryClient, setConnectors, setLinksMap, setParentLinksMap, setViewElements, viewId])
 
   // ── Element mutation helpers ───────────────────────────────────────────────
   const handleElementDeleted = useCallback((deletedId: number) => {

package/src/pages/ViewEditor/index.tsx

@@ -485,6 +485,7 @@ function ViewEditorInner({
   const stableOnConnectToRef = useRef<(targetElementId: number) => Promise<void>>(async () => { })
   const stableOnInteractionStartRef = useRef<(elementId: number, options?: { sourceHandle?: string; clientX?: number; clientY?: number }) => void>(() => { })
   const stableOnStartHandleReconnectRef = useRef<(args: { edgeId: string; endpoint: 'source' | 'target'; handleId: string; clientX: number; clientY: number }) => void>(() => { })
+  const stableOnReconnectPickRef = useRef<(targetElementId: number) => Promise<boolean>>(async () => false)
 
   // ── Drawing engine ────────────────────────────────────────────────────────
   const drawing = useDrawingEngine(viewId)
@@ -518,18 +519,21 @@ function ViewEditorInner({
     stableOnZoomOut: useCallback(async (id: number) => { await stableOnZoomOutRef.current(id) }, []),
     stableOnNavigateToView: useCallback((id: number) => { stableOnNavigateToViewRef.current(id) }, []),
     stableOnSelect: useCallback((obj: PlacedElement) => {
-      setSelectedEdge(null)
-      setSelectedProxyConnectorDetails(null)
-      closeProxyConnectorPanelRef.current()
-      closeConnectorPanelRef.current()
-      setSelectedElement({
-        id: obj.element_id, name: obj.name, description: obj.description, kind: obj.kind,
-        technology: obj.technology, url: obj.url, logo_url: obj.logo_url,
-        technology_connectors: obj.technology_connectors, tags: obj.tags, repo: obj.repo,
-        branch: obj.branch, file_path: obj.file_path, language: obj.language,
-        created_at: '', updated_at: '', has_view: false, view_label: null,
+      void stableOnReconnectPickRef.current(obj.element_id).then((handled) => {
+        if (handled) return
+        setSelectedEdge(null)
+        setSelectedProxyConnectorDetails(null)
+        closeProxyConnectorPanelRef.current()
+        closeConnectorPanelRef.current()
+        setSelectedElement({
+          id: obj.element_id, name: obj.name, description: obj.description, kind: obj.kind,
+          technology: obj.technology, url: obj.url, logo_url: obj.logo_url,
+          technology_connectors: obj.technology_connectors, tags: obj.tags, repo: obj.repo,
+          branch: obj.branch, file_path: obj.file_path, language: obj.language,
+          created_at: '', updated_at: '', has_view: false, view_label: null,
+        })
+        openElementPanelRef.current()
       })
-      openElementPanelRef.current()
     }, []),
     stableOnOpenCodePreview: useCallback((elementId: number) => {
       const obj = previewViewElementsRef.current.find((o) => o.element_id === elementId)
@@ -1052,7 +1056,8 @@ function ViewEditorInner({
     stableOnConnectToRef.current = canvas.stableOnConnectTo
     stableOnInteractionStartRef.current = canvas.stableOnInteractionStart
     stableOnStartHandleReconnectRef.current = canvas.stableOnStartHandleReconnect
-  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect])
+    stableOnReconnectPickRef.current = canvas.stableOnReconnectPick
+  }, [canvas.stableOnZoomIn, canvas.stableOnZoomOut, canvas.stableOnNavigateToView, canvas.stableOnRemoveElement, canvas.stableOnConnectTo, canvas.stableOnInteractionStart, canvas.stableOnStartHandleReconnect, canvas.stableOnReconnectPick])
   const viewName = view?.name ?? null
 
   const [expandedAncestorGroups, setExpandedAncestorGroups] = useState<Set<string>>(new Set())
@@ -1780,7 +1785,7 @@ function ViewEditorInner({
               menu={connectorLongPressMenu}
               onEdit={(edgeId) => { const connector = connectors.find((e) => e.id === edgeId); if (connector) { setSelectedEdge(connector); connectorPanel.onOpen() }; setConnectorLongPressMenu(null) }}
               onMoveSource={(edgeId) => { const picking = { edgeId, endpoint: 'source' as const }; reconnectPickingRef.current = picking; setReconnectPicking(picking); setConnectorLongPressMenu(null) }}
-              onMoveTarget={(edgeId) => { const picking = { edgeId, endpoint: 'target' as const }; reconnectPickingRef.current = picking; setConnectorLongPressMenu(null) }}
+              onMoveTarget={(edgeId) => { const picking = { edgeId, endpoint: 'target' as const }; reconnectPickingRef.current = picking; setReconnectPicking(picking); setConnectorLongPressMenu(null) }}
               onDelete={async (edgeId) => {
                 setConnectorLongPressMenu(null)
                 if (!viewId) return

package/src/pages/ViewsGrid.tsx

@@ -832,7 +832,7 @@ function ViewGridInner({ onShare, treeData, loading, focusedId, onFocusChange, s
           onStartRename: () => startEdit(n.id, n.name),
           onDetails: () => handleDetailsOpen(n.id),
           onDelete: () => { setDeleteTargetId(n.id); onDeleteOpen() },
-          onShare: onShare ? () => onShare(n.id) : () => {},
+          onShare: onShare ? () => onShare(n.id) : () => { },
           onEditNameChange: setEditName,
           onEditCommit: commitEdit,
           onEditCancel: cancelEdit,
@@ -1088,7 +1088,7 @@ function ViewGridInner({ onShare, treeData, loading, focusedId, onFocusChange, s
               <Text color="gray.600" fontSize="sm" mb={1}>No views yet.</Text>
               {canEdit && (
                 <>
-                  <Text color="gray.700" fontSize="xs" mb={4}>Click "New Diagram" to get started.</Text>
+                  <Text color="gray.700" fontSize="xs" mb={4}>Click "+ New" to get started.</Text>
 
                 </>
               )}

package/src/utils/string.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { truncate } from './string'
+
+describe('truncate', () => {
+  it('does not truncate strings shorter than or equal to the limit', () => {
+    expect(truncate('hello', 10)).toBe('hello')
+    expect(truncate('1234567890', 10)).toBe('1234567890')
+  })
+
+  it('truncates strings longer than the limit and adds ellipsis', () => {
+    expect(truncate('hello world', 5)).toBe('hello...')
+    expect(truncate('12345678901', 10)).toBe('1234567890...')
+  })
+
+  it('uses default limit of 15', () => {
+    expect(truncate('123456789012345')).toBe('123456789012345')
+    expect(truncate('1234567890123456')).toBe('123456789012345...')
+  })
+})

package/src/utils/string.ts

@@ -0,0 +1,7 @@
+/**
+ * Truncates a string to a specified length and appends an ellipsis.
+ */
+export const truncate = (str: string, limit: number = 15): string => {
+  if (str.length <= limit) return str
+  return str.slice(0, limit) + '...'
+}