vocs 2.0.4 → 2.0.6

package/src/internal/icons.test.ts

@@ -34,8 +34,15 @@ describe('resolveIconSync', () => {
     expect(resolveIconSync('lucide:nonexistent-icon-xyz')).toBeUndefined()
   })
 
-  test('returns undefined for invalid format (no colon)', () => {
-    expect(resolveIconSync('nocolon')).toBeUndefined()
+  test('resolves bare icon name as lucide', () => {
+    const bare = resolveIconSync('arrow-right')
+    const prefixed = resolveIconSync('lucide:arrow-right')
+    expect(bare).toBeDefined()
+    expect(bare).toBe(prefixed)
+  })
+
+  test('returns undefined for bare name not in lucide', () => {
+    expect(resolveIconSync('nonexistent-icon-xyz')).toBeUndefined()
   })
 
   test('returns undefined for empty string parts', () => {

package/src/internal/icons.ts

@@ -182,7 +182,8 @@ export function matchIcon(
 export function resolveIconSync(icon: string): string | undefined {
   if (icon.startsWith('<svg')) return icon
 
-  const [collection, iconName] = icon.split(':')
+  // Default to `lucide` collection when no `collection:` prefix is provided.
+  const [collection, iconName] = icon.includes(':') ? icon.split(':') : ['lucide', icon]
   if (!collection || !iconName) return undefined
 
   const iconSet = iconSets[collection]

package/src/internal/mdx.test.ts

@@ -267,6 +267,129 @@ describe('remarkRestoreUnknownTextDirectives', () => {
 })
 
 describe('remarkFileTree', () => {
+  async function parse(items: { text: string }[]) {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'containerDirective',
+          name: 'file-tree',
+          children: [
+            {
+              type: 'list',
+              children: items.map((item) => ({
+                type: 'listItem',
+                children: [
+                  {
+                    type: 'paragraph',
+                    children: [{ type: 'text', value: item.text }],
+                  },
+                ],
+              })),
+            },
+          ],
+        },
+      ],
+    }
+    await remarkFileTree(Config.define({ rootDir: process.cwd() }))(tree as never)
+    const fileTree = tree.children[0] as {
+      data?: { hProperties?: Record<string, string> }
+    }
+    return JSON.parse(fileTree.data?.hProperties?.['data-v-file-tree-items'] ?? '[]')
+  }
+
+  it('extracts {info="..."} tooltip from a plain row', async () => {
+    const items = await parse([{ text: 'vocs.config.ts{info="Site config"}' }])
+    expect(items[0]).toMatchObject({
+      name: 'vocs.config.ts',
+      type: 'file',
+      tooltip: 'Site config',
+    })
+    expect(items[0].comment).toBeUndefined()
+  })
+
+  it('extracts tooltip from a row that also has an inline comment', async () => {
+    const items = await parse([{ text: 'layout.tsx the root layout{info="Wraps every page"}' }])
+    expect(items[0]).toMatchObject({
+      name: 'layout.tsx',
+      type: 'file',
+      comment: 'the root layout',
+      tooltip: 'Wraps every page',
+    })
+  })
+
+  it('extracts tooltip from a folder row', async () => {
+    const items = await parse([{ text: '+app the app dir{info="App router root"}' }])
+    expect(items[0]).toMatchObject({
+      name: 'app',
+      type: 'folder',
+      comment: 'the app dir',
+      tooltip: 'App router root',
+    })
+  })
+
+  it('supports unquoted {info=...} values', async () => {
+    const items = await parse([{ text: 'page.tsx{info=Home route}' }])
+    expect(items[0]).toMatchObject({
+      name: 'page.tsx',
+      tooltip: 'Home route',
+    })
+  })
+
+  it('omits tooltip when value is empty', async () => {
+    const items = await parse([{ text: 'page.tsx{info=""}' }])
+    expect(items[0]).toMatchObject({ name: 'page.tsx' })
+    expect(items[0].tooltip).toBeUndefined()
+  })
+
+  it('omits tooltip when no {info} present', async () => {
+    const items = await parse([{ text: 'page.tsx' }])
+    expect(items[0]).toMatchObject({ name: 'page.tsx' })
+    expect(items[0].tooltip).toBeUndefined()
+  })
+
+  it('extracts tooltip from a trailing mdxTextExpression (MDX form)', async () => {
+    // Simulate what the MDX pipeline emits for `vocs.config.ts{info="Site config"}`:
+    // a text node followed by an mdxTextExpression whose value is the contents
+    // between the braces (no braces).
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'containerDirective',
+          name: 'file-tree',
+          children: [
+            {
+              type: 'list',
+              children: [
+                {
+                  type: 'listItem',
+                  children: [
+                    {
+                      type: 'paragraph',
+                      children: [
+                        { type: 'text', value: 'vocs.config.ts' },
+                        { type: 'mdxTextExpression', value: 'info="Site config: nav, theme"' },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+    await remarkFileTree(Config.define({ rootDir: process.cwd() }))(tree as never)
+    const fileTree = tree.children[0] as { data?: { hProperties?: Record<string, string> } }
+    const items = JSON.parse(fileTree.data?.hProperties?.['data-v-file-tree-items'] ?? '[]')
+    expect(items[0]).toMatchObject({
+      name: 'vocs.config.ts',
+      type: 'file',
+      tooltip: 'Site config: nav, theme',
+    })
+  })
+
   it('preserves inline code in file comments', async () => {
     const tree = {
       type: 'root',

package/src/internal/mdx.ts

@@ -1110,9 +1110,21 @@ export function remarkFileTree(config: Config.Config): remarkFileTree.ReturnType
     comment?: string | undefined
     highlighted?: boolean | undefined
     icon?: string | undefined
+    tooltip?: string | undefined
     items?: FileTreeItem[] | undefined
   }
 
+  // Matches a trailing `{info="..."}` or `{info=...}` (quotes optional, value
+  // may be empty) on a file-tree row.
+  //
+  // Used in two places: against a raw text node when the row is parsed as
+  // Markdown, and against the body of an `mdxTextExpression` (which contains
+  // the contents *between* the braces) when the row is parsed as MDX. MDX
+  // intercepts `{...}` as a JS expression embed, so the braces aren't part of
+  // the captured value in that case.
+  const tooltipRegex = /\s*\{info(?:=(?:"([^"]*)"|([^}]*)))?\}\s*$/
+  const tooltipBodyRegex = /^\s*info(?:=(?:"([^"]*)"|([^}]*)))?\s*$/
+
   async function resolveAllIcons(items: FileTreeItem[]): Promise<void> {
     await Promise.all(
       items.map(async (item) => {
@@ -1159,6 +1171,37 @@ export function remarkFileTree(config: Config.Config): remarkFileTree.ReturnType
             )
             if (!paragraph) continue
 
+            // Pre-extract trailing `{info="..."}` so its (possibly space-
+            // containing) value doesn't get mis-split into name/comment below.
+            //
+            // MDX intercepts `{...}` as a JS expression embed (mdxTextExpression
+            // with body `info="..."`); plain Markdown leaves it as text. Handle
+            // both: a trailing mdxTextExpression takes precedence, otherwise
+            // look at the last text node.
+            let tooltip: string | undefined
+            const lastChild = paragraph.children[paragraph.children.length - 1]
+            if (lastChild?.type === 'mdxTextExpression') {
+              const expr = lastChild as MdAst.PhrasingContent & { value: string }
+              const match = expr.value.match(tooltipBodyRegex)
+              if (match) {
+                tooltip = (match[1] ?? match[2] ?? '').trim()
+                // Drop the expression entirely; an mdxTextExpression has no
+                // text representation in the row.
+                paragraph.children.pop()
+              }
+            } else {
+              const lastText = [...paragraph.children]
+                .reverse()
+                .find((c): c is MdAst.Text => c.type === 'text')
+              if (lastText) {
+                const match = lastText.value.match(tooltipRegex)
+                if (match) {
+                  tooltip = (match[1] ?? match[2] ?? '').trim()
+                  lastText.value = lastText.value.replace(tooltipRegex, '')
+                }
+              }
+            }
+
             let name = ''
             let comment = ''
             let folder = false
@@ -1211,6 +1254,7 @@ export function remarkFileTree(config: Config.Config): remarkFileTree.ReturnType
               type: folder ? 'folder' : 'file',
               ...(comment && { comment }),
               ...(highlighted && { highlighted }),
+              ...(tooltip && { tooltip }),
             }
 
             // Check for nested lists (children of this list item)

package/src/internal/shiki-transformers.test.ts

@@ -6,6 +6,7 @@ import {
   notationBlock,
   notationInclude,
   removeNotationEscape,
+  resetTwoslasher,
   resetTwoslashSnippets,
   shellNotation,
   shellPrompt,
@@ -212,6 +213,34 @@ const element = <div />`,
     highlighter.dispose()
   })
 
+  it('should keep producing correct output after the singleton twoslasher is reset', async () => {
+    const highlighter = await createHighlighter({
+      themes: ['github-dark'],
+      langs: ['typescript'],
+    })
+    const transformer = twoslash({ explicitTrigger: false })
+
+    const first = highlighter.codeToHtml('const a: number = 1', {
+      lang: 'typescript',
+      theme: 'github-dark',
+      transformers: [transformer],
+    })
+
+    // Force the singleton to drop; the next call must lazily reconstruct it
+    // and still produce equivalent rendered HTML.
+    resetTwoslasher()
+
+    const second = highlighter.codeToHtml('const a: number = 1', {
+      lang: 'typescript',
+      theme: 'github-dark',
+      transformers: [transformer],
+    })
+
+    expect(second).toBe(first)
+
+    highlighter.dispose()
+  })
+
   it('should typecheck virtual json files in check-only mode', async () => {
     const highlighter = await createHighlighter({
       themes: ['github-dark'],

package/src/internal/shiki-transformers.ts

@@ -222,9 +222,23 @@ export const twoslashErrors: TwoslashError[] = []
 const cwd = typeof process !== 'undefined' && typeof process.cwd === 'function' ? process.cwd() : ''
 const require = createRequire(import.meta.url)
 
-let twoslasher: TwoslashInstance
+let twoslasher: TwoslashInstance | undefined
+let twoslasherCalls = 0
 let typescript: TS | undefined
 
+/**
+ * How often to recreate the singleton `twoslasher`. The underlying
+ * `LanguageService` retains every `SourceFile`/`Symbol`/`Type` it has ever
+ * resolved (including the user's full dependency graph when snippets import
+ * library types), and there's no way to evict individual entries. Without a
+ * periodic reset, peak RSS on a site with 1000+ snippets can exceed 5 GB.
+ *
+ * Recreating it costs ~1.5s of TS lib re-init per reset; with the default of
+ * 200, that's ≤ a few seconds extra on the largest sites in exchange for
+ * GB-scale memory savings.
+ */
+const twoslasherResetInterval = 200
+
 export function twoslash(options: twoslash.Options): ShikiTransformer {
   const { cacheDir } = options
   const {
@@ -259,13 +273,24 @@ export function twoslash(options: twoslash.Options): ShikiTransformer {
           ignoreDeprecations: Number.parseInt(tsModule.versionMajorMinor, 10) >= 6 ? '6.0' : '5.0',
           moduleResolution: 100, // bundler (default, can be overridden)
           preserveSymlinks: false, // needed for monorepo/workspace symlinks
+          // Skip checking lib + .d.ts files. Twoslash snippets aren't authoring
+          // libraries — we only care about errors inside the snippet itself.
+          // Materially reduces peak RSS on large docs sites (avoids retaining
+          // ASTs for every lib.*.d.ts and @types/* file in TS's caches).
+          skipDefaultLibCheck: true,
+          skipLibCheck: true,
           types: ['node'], // include node types by default (process.env, etc.)
           ...(twoslashOptions?.compilerOptions ?? {}),
         },
       })
     }
 
-    return twoslasher(code, lang, executeOptions)
+    const result = twoslasher(code, lang, executeOptions)
+
+    // Periodically drop the singleton so the underlying `LanguageService` (and
+    // its retained source-file / symbol caches) becomes GC-eligible.
+    if (++twoslasherCalls >= twoslasherResetInterval) resetTwoslasher()
+    return result
   }
   const activeTwoslasher = checkOnly
     ? checkOnlyTwoslasher({ throws, twoslashOptions })
@@ -369,6 +394,19 @@ export function resetTwoslashSnippets() {
   TwoslashChecker.reset()
 }
 
+/**
+ * Drop the singleton `twoslasher` instance so its underlying `LanguageService`
+ * and the `SourceFile`/`Symbol`/`Type` caches it retains become eligible for
+ * garbage collection. The next twoslash call will lazily reconstruct it.
+ *
+ * Called automatically every `twoslasherResetInterval` snippets during a
+ * build; also safe to invoke explicitly between build phases.
+ */
+export function resetTwoslasher() {
+  twoslasher = undefined
+  twoslasherCalls = 0
+}
+
 function getTypeScript(): TS {
   if (typescript) return typescript
 

package/src/internal/sidebar.test.ts

@@ -130,6 +130,34 @@ describe('flatten', () => {
       ]
     `)
   })
+
+  test('preserves badge on flattened items', () => {
+    expect(
+      flatten([
+        { text: 'A', link: '/a', badge: 'New' },
+        {
+          text: 'Group',
+          items: [{ text: 'B', link: '/b', badge: { text: 'Beta', variant: 'warning' } }],
+        },
+      ]),
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "badge": "New",
+          "link": "/a",
+          "text": "A",
+        },
+        {
+          "badge": {
+            "text": "Beta",
+            "variant": "warning",
+          },
+          "link": "/b",
+          "text": "B",
+        },
+      ]
+    `)
+  })
 })
 
 describe('fromConfig', () => {

package/src/internal/sidebar.ts

@@ -1,6 +1,20 @@
 import type { Config } from './config.js'
 
+export type SidebarItemBadge =
+  | string
+  | {
+      /** Text displayed inside the badge. */
+      text: string
+      /** Visual variant. Defaults to `'info'`. */
+      variant?: 'note' | 'info' | 'warning' | 'danger' | 'tip' | 'success' | undefined
+    }
+
 export type SidebarItem<strict extends boolean = false> = {
+  /**
+   * Badge rendered to the right of the item text.
+   * Pass a string for a default `info` badge, or an object to pick a variant.
+   */
+  badge?: SidebarItemBadge | undefined
   /** Whether or not to disable the sidebar item. */
   disabled?: boolean | undefined
   /** Whether to open the link in a new tab. */

package/src/internal/twoslash/checker.ts

@@ -168,6 +168,11 @@ function parseSnippet(snippet: collect.Snippet, tsModule: TS, key: string): Pars
     ignoreDeprecations: Number.parseInt(tsModule.versionMajorMinor, 10) >= 6 ? '6.0' : '5.0',
     moduleResolution: 100,
     preserveSymlinks: false,
+    // Skip checking lib + .d.ts files. Twoslash snippets aren't authoring
+    // libraries — we only want errors inside the snippet itself. Avoids
+    // walking every lib.*.d.ts / @types/* AST per Program.
+    skipDefaultLibCheck: true,
+    skipLibCheck: true,
     types: ['node'],
     ...(snippet.twoslashOptions?.compilerOptions ?? {}),
   } satisfies TypeScript.CompilerOptions

package/src/react/internal/FileTree.client.tsx

@@ -1,6 +1,69 @@
 'use client'
 
+import { Popover } from '@base-ui/react/popover'
 import * as React from 'react'
+import LucideInfo from '~icons/lucide/info'
+
+const triggerBaseClassName =
+  'vocs:flex vocs:items-center vocs:gap-2 vocs:whitespace-nowrap vocs:justify-self-start vocs:rounded-md vocs:px-2 vocs:py-0.5 vocs:-mx-2 vocs:-my-0.5 vocs:border vocs:border-transparent vocs:transition-colors vocs:data-[highlighted=true]:bg-surfaceTint vocs:data-[highlighted=true]:border-primary'
+
+const tooltipTriggerClassName =
+  'vocs:hover:bg-surfaceTint vocs:hover:border-primary vocs:data-[popup-open]:bg-surfaceTint vocs:data-[popup-open]:border-primary'
+
+const folderButtonClassName = 'vocs:bg-transparent vocs:m-0 vocs:not-disabled:cursor-pointer'
+
+const popupClassName =
+  'vocs:max-w-[300px] vocs:bg-surface vocs:border vocs:border-primary vocs:rounded-md vocs:px-3 vocs:py-2 vocs:text-sm vocs:text-primary vocs:font-sans vocs:leading-snug vocs:shadow-md vocs:z-50'
+
+function InfoIndicator() {
+  return (
+    <span
+      aria-hidden="true"
+      className="vocs:shrink-0 vocs:flex vocs:items-center vocs:justify-center vocs:size-4 vocs:text-muted"
+    >
+      <LucideInfo className="vocs:size-3.5" />
+    </span>
+  )
+}
+
+/**
+ * Wraps a file row's label area (icon + name) so the entire row becomes a
+ * hover-activated popover trigger. The trigger gets the active-style
+ * background and border while hovered or while the popover is open, and a
+ * decorative info icon is appended to make the affordance discoverable.
+ */
+export function FileRowTrigger(props: FileRowTrigger.Props) {
+  const { children, content, highlighted, label } = props
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        render={<span />}
+        openOnHover
+        delay={150}
+        aria-label={`More info about ${label}`}
+        data-highlighted={highlighted ? 'true' : undefined}
+        className={`${triggerBaseClassName} ${tooltipTriggerClassName}`}
+      >
+        {children}
+        <InfoIndicator />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner side="top" align="center" sideOffset={6}>
+          <Popover.Popup className={popupClassName}>{content}</Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
+
+export declare namespace FileRowTrigger {
+  type Props = {
+    children: React.ReactNode
+    content: string
+    label: string
+    highlighted?: boolean | undefined
+  }
+}
 
 export function FolderToggle(props: FolderToggle.Props) {
   const {
@@ -12,6 +75,7 @@ export function FolderToggle(props: FolderToggle.Props) {
     highlighted,
     labelColumnOffset,
     name,
+    tooltip,
   } = props
   const [isOpen, setIsOpen] = React.useState(true)
   const rowStyle = comment
@@ -20,28 +84,60 @@ export function FolderToggle(props: FolderToggle.Props) {
       }
     : undefined
 
+  const folderInner = (
+    <>
+      <span className="vocs:shrink-0">{isOpen && hasChildren ? folderOpenIcon : folderIcon}</span>
+      <span>{name}</span>
+    </>
+  )
+
   return (
     <div className="vocs:flex vocs:flex-col vocs:overflow-visible">
       <div className="vocs:relative vocs:flex vocs:items-center vocs:py-1">
-        <button
-          className="vocs:grid vocs:items-center vocs:gap-x-4 vocs:w-fit vocs:bg-transparent vocs:p-0 vocs:m-0 vocs:text-primary vocs:not-disabled:cursor-pointer"
-          data-open={isOpen}
-          disabled={!hasChildren}
-          onClick={() => setIsOpen(!isOpen)}
+        <div
+          className="vocs:grid vocs:items-center vocs:gap-x-4 vocs:w-fit vocs:text-primary"
           style={rowStyle}
-          type="button"
         >
-          <span
-            className="vocs:flex vocs:items-center vocs:gap-2 vocs:whitespace-nowrap vocs:justify-self-start vocs:data-[highlighted=true]:bg-surfaceTint vocs:data-[highlighted=true]:border vocs:data-[highlighted=true]:border-primary vocs:rounded-md vocs:px-2 vocs:py-0.5 vocs:-mx-2 vocs:-my-0.5"
-            data-highlighted={highlighted}
-          >
-            <span className="vocs:shrink-0">
-              {isOpen && hasChildren ? folderOpenIcon : folderIcon}
-            </span>
-            <span>{name}</span>
-          </span>
+          {tooltip ? (
+            <Popover.Root>
+              <Popover.Trigger
+                render={
+                  <button
+                    disabled={!hasChildren}
+                    onClick={() => setIsOpen(!isOpen)}
+                    type="button"
+                  />
+                }
+                openOnHover
+                delay={150}
+                aria-label={`More info about ${name}`}
+                data-highlighted={highlighted ? 'true' : undefined}
+                data-open={isOpen}
+                className={`${triggerBaseClassName} ${folderButtonClassName} ${tooltipTriggerClassName}`}
+              >
+                {folderInner}
+                <InfoIndicator />
+              </Popover.Trigger>
+              <Popover.Portal>
+                <Popover.Positioner side="top" align="center" sideOffset={6}>
+                  <Popover.Popup className={popupClassName}>{tooltip}</Popover.Popup>
+                </Popover.Positioner>
+              </Popover.Portal>
+            </Popover.Root>
+          ) : (
+            <button
+              className={`${triggerBaseClassName} ${folderButtonClassName}`}
+              data-highlighted={highlighted}
+              data-open={isOpen}
+              disabled={!hasChildren}
+              onClick={() => setIsOpen(!isOpen)}
+              type="button"
+            >
+              {folderInner}
+            </button>
+          )}
           {comment && <span className="vocs:text-muted vocs:whitespace-nowrap">{comment}</span>}
-        </button>
+        </div>
       </div>
       {hasChildren && isOpen && folderContent}
     </div>
@@ -54,6 +150,7 @@ export declare namespace FolderToggle {
     folderOpenIcon: React.ReactNode
     name: string
     comment?: string | undefined
+    tooltip?: string | undefined
     hasChildren: boolean
     highlighted?: boolean | undefined
     labelColumnOffset: number

package/src/react/internal/FileTree.mdx.tsx

@@ -1,7 +1,7 @@
 import LucideFile from '~icons/lucide/file'
 import LucideFolder from '~icons/lucide/folder'
 import LucideFolderOpen from '~icons/lucide/folder-open'
-import { FolderToggle } from './FileTree.client.js'
+import { FileRowTrigger, FolderToggle } from './FileTree.client.js'
 
 export function FileTree(props: FileTree.Props) {
   const items: FileTree.Item[] = JSON.parse(props['data-v-file-tree-items'] ?? '[]')
@@ -33,6 +33,7 @@ export namespace FileTree {
     comment?: string
     highlighted?: boolean
     icon?: string
+    tooltip?: string
     items?: Item[]
   }
 
@@ -90,6 +91,7 @@ export namespace FileTree {
           <FolderToggle
             name={item.name}
             comment={item.comment}
+            tooltip={item.tooltip}
             hasChildren={!!hasChildren}
             highlighted={item.highlighted}
             labelColumnOffset={depth * indentSize}
@@ -105,19 +107,36 @@ export namespace FileTree {
               className="vocs:grid vocs:items-center vocs:gap-x-4 vocs:text-primary"
               style={rowStyle}
             >
-              <span
-                className="vocs:flex vocs:items-center vocs:gap-2 vocs:whitespace-nowrap vocs:justify-self-start vocs:data-[highlighted=true]:bg-surfaceTint vocs:data-[highlighted=true]:border vocs:data-[highlighted=true]:border-primary vocs:rounded-md vocs:px-2 vocs:py-0.5 vocs:-mx-2 vocs:-my-0.5"
-                data-highlighted={item.highlighted}
-              >
-                {item.name !== '...' && (
-                  <span className="vocs:shrink-0">
-                    <FileIcon icon={item.icon} />
+              {item.tooltip ? (
+                <FileRowTrigger
+                  content={item.tooltip}
+                  label={item.name}
+                  highlighted={item.highlighted}
+                >
+                  {item.name !== '...' && (
+                    <span className="vocs:shrink-0">
+                      <FileIcon icon={item.icon} />
+                    </span>
+                  )}
+                  <span className={item.name === '...' ? 'vocs:text-muted' : undefined}>
+                    {item.name}
+                  </span>
+                </FileRowTrigger>
+              ) : (
+                <span
+                  className="vocs:flex vocs:items-center vocs:gap-2 vocs:whitespace-nowrap vocs:justify-self-start vocs:data-[highlighted=true]:bg-surfaceTint vocs:data-[highlighted=true]:border vocs:data-[highlighted=true]:border-primary vocs:rounded-md vocs:px-2 vocs:py-0.5 vocs:-mx-2 vocs:-my-0.5"
+                  data-highlighted={item.highlighted}
+                >
+                  {item.name !== '...' && (
+                    <span className="vocs:shrink-0">
+                      <FileIcon icon={item.icon} />
+                    </span>
+                  )}
+                  <span className={item.name === '...' ? 'vocs:text-muted' : undefined}>
+                    {item.name}
                   </span>
-                )}
-                <span className={item.name === '...' ? 'vocs:text-muted' : undefined}>
-                  {item.name}
                 </span>
-              </span>
+              )}
               {item.comment && (
                 <span className="vocs:text-muted vocs:whitespace-nowrap">{item.comment}</span>
               )}