@adea-ai/ui 0.120.0 → 0.122.0

package/dist/r/registry.json

@@ -885,6 +885,11 @@
           "path": "src/components/ui/kbd/kbd.tsx",
           "type": "registry:ui",
           "target": "components/ui/kbd/kbd.tsx"
+        },
+        {
+          "path": "src/components/ui/kbd/platform-modifier.ts",
+          "type": "registry:ui",
+          "target": "components/ui/kbd/platform-modifier.ts"
         }
       ]
     },
@@ -2374,11 +2379,21 @@
           "type": "registry:ui",
           "target": "components/conversation/chat-composer.tsx"
         },
+        {
+          "path": "src/components/conversation/composer-menu.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/composer-menu.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-avatar.tsx",
           "type": "registry:ui",
           "target": "components/conversation/conversation-avatar.tsx"
         },
+        {
+          "path": "src/components/conversation/conversation-pane.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/conversation-pane.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-surface.tsx",
           "type": "registry:ui",

package/dist/r/src/components/composites/account-menu/account-menu.tsx

@@ -84,6 +84,14 @@ export type AccountMenuProps = {
   platform?: 'desktop' | 'web'
   /** Whether a session exists. Decides the sign-in/sign-out row. */
   authenticated: boolean
+  /**
+   * Draw the pending-update indicator: an accent dot on the trigger and on the
+   * `updates` row — the id `createAppMenuItems` mints, the same convention the
+   * fallback icons follow — and extend both accessible names with "update
+   * available", because the dot itself carries no text. The updater remains the
+   * caller's: the prop only mirrors its state into the menu.
+   */
+  updateAvailable?: boolean
   /** Local-only applications can omit the session actions altogether. */
   showSession?: boolean
   /** Disable the session row while a sign-in or sign-out is in flight. */
@@ -116,6 +124,7 @@ export function AccountMenu(props: AccountMenuProps) {
     'items',
     'platform',
     'authenticated',
+    'updateAvailable',
     'showSession',
     'busy',
     'label',
@@ -142,6 +151,21 @@ export function AccountMenu(props: AccountMenuProps) {
   const visible = () =>
     local.items.filter((item) => !item.platform || item.platform === (local.platform ?? 'desktop'))
 
+  // The pending update reaches the user twice on each surface: as a dot and as
+  // words. The dot is aria-hidden, so the accessible names carry the state —
+  // which is why the names are extended here rather than left to the caller.
+  const triggerName = () =>
+    `${local.label ?? 'Account and settings'}${local.updateAvailable ? ', update available' : ''}`
+  const updateDot = () => (
+    <Show when={local.updateAvailable}>
+      <span
+        data-slot="account-menu-update-dot"
+        aria-hidden="true"
+        class="absolute top-1.5 right-2.5 size-2 rounded-full bg-primary"
+      />
+    </Show>
+  )
+
   // Built by reference at each return, not once up front: Solid fixes a node's
   // owner chain when the JSX expression runs, and an eagerly created tree would
   // never see the Tooltip provider below — Kobalte's TooltipTrigger then throws
@@ -164,13 +188,15 @@ export function AccountMenu(props: AccountMenuProps) {
             ref={(element: HTMLButtonElement) => (trigger = element)}
             variant="ghost"
             size={local.size ?? 'icon-md'}
-            class={cn('text-muted-foreground', local.class)}
-            aria-label={local.label ?? 'Account and settings'}
+            class={cn('relative text-muted-foreground', local.class)}
+            data-slot="account-menu-trigger"
+            aria-label={triggerName()}
             onFocus={() => local.onIntent?.()}
             onPointerEnter={() => local.onIntent?.()}
             {...rest}
           >
             <UserRound aria-hidden="true" />
+            {updateDot()}
           </TooltipTrigger>
         }
       >
@@ -180,13 +206,15 @@ export function AccountMenu(props: AccountMenuProps) {
         <DropdownMenuTrigger
           as={SideRailButton}
           ref={(element: HTMLButtonElement) => (trigger = element)}
-          label={local.label ?? 'Account and settings'}
-          class={local.class}
+          label={triggerName()}
+          class={cn('relative', local.class)}
+          data-slot="account-menu-trigger"
           onFocus={() => local.onIntent?.()}
           onPointerEnter={() => local.onIntent?.()}
           {...rest}
         >
           <UserRound aria-hidden="true" />
+          {updateDot()}
         </DropdownMenuTrigger>
       </Show>
       <DropdownMenuContent
@@ -211,6 +239,11 @@ export function AccountMenu(props: AccountMenuProps) {
             {(item) => (
               <DropdownMenuItem
                 disabled={item.disabled}
+                aria-label={
+                  local.updateAvailable && item.id === 'updates'
+                    ? `${item.label}, update available`
+                    : undefined
+                }
                 onSelect={() => {
                   pendingAfterClose = item.onSelectAfterClose
                     ? { callback: item.onSelectAfterClose }
@@ -222,6 +255,13 @@ export function AccountMenu(props: AccountMenuProps) {
               >
                 {item.icon ?? renderFallbackIcon(item.id)}
                 <span>{item.label}</span>
+                <Show when={local.updateAvailable && item.id === 'updates'}>
+                  <span
+                    data-slot="account-menu-update-dot"
+                    aria-hidden="true"
+                    class="ms-auto size-2 shrink-0 rounded-full bg-primary"
+                  />
+                </Show>
               </DropdownMenuItem>
             )}
           </For>

package/dist/r/src/components/conversation/composer-menu.tsx

@@ -0,0 +1,67 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../lib/utils'
+import { overlaySurface } from '../../lib/overlay'
+import { Button } from '../ui/button/button'
+
+export type ComposerMenuProps = ComponentProps<'div'> & {
+  /** A name for what the menu offers, e.g. "Mention an Agent". */
+  label?: string
+}
+
+/**
+ * ComposerMenu.
+ *
+ * The panel a composer raises above the field: mention suggestions while the
+ * reader types a name, the picker of what can be attached, follow-up prompts.
+ * It is deliberately *not* a `Menu`: there is no trigger and no focus trap —
+ * the reader keeps typing while it is open, and it opens and closes on the
+ * draft's own grammar rather than on a button press.
+ *
+ * Rows are `ComposerMenuItem`s; anything else a caller renders (a checkbox
+ * list, a heading) sits inside the same panel. Placement stays with the host —
+ * a suggestion menu renders in the composer's `menu` slot, a picker anchors to
+ * its own control.
+ */
+export function ComposerMenu(props: ComposerMenuProps) {
+  const [local, rest] = splitProps(props, ['class', 'label', 'children'])
+
+  return (
+    <div
+      role="group"
+      aria-label={local.label}
+      data-slot="composer-menu"
+      class={cn(
+        overlaySurface,
+        'flex max-h-56 min-w-60 flex-col gap-0.5 overflow-y-auto p-1',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+export type ComposerMenuItemProps = ComponentProps<typeof Button>
+
+/**
+ * ComposerMenuItem.
+ *
+ * One row of a `ComposerMenu`. A ghost button stretched across the panel —
+ * the same row every menu in the library draws, so a suggestion never reads as
+ * a stray button floating over the draft.
+ */
+export function ComposerMenuItem(props: ComposerMenuItemProps) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <Button
+      variant="ghost"
+      class={cn('w-full justify-start gap-2 text-start font-normal', local.class)}
+      {...rest}
+    >
+      {local.children}
+    </Button>
+  )
+}

package/dist/r/src/components/conversation/conversation-pane.tsx

@@ -0,0 +1,111 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '../../lib/utils'
+
+export type ConversationPaneProps = ComponentProps<'section'> & {
+  /** Above the transcript: the conversation's identity and its actions. */
+  header?: JSX.Element
+  /** The transcript — typically a `ConversationSurface` with `gutter`. */
+  children: JSX.Element
+  /** Below the transcript: the composer. */
+  composer?: JSX.Element
+  /**
+   * The thread side panel. Its presence opens the second column; at narrow
+   * widths the panel overlays the conversation instead of squeezing it, and
+   * the conversation chrome steps aside — out of the accessibility tree with
+   * it, which is why the overlay hides with `visibility` rather than paint.
+   */
+  thread?: JSX.Element
+  /**
+   * Apply the shared page gutters to the composer, tracking the transcript's
+   * own gutter (`ConversationSurface`'s `gutter`) so the two read as one pane.
+   */
+  gutter?: boolean
+}
+
+/**
+ * ConversationPane.
+ *
+ * The frame a conversation lives in: a header above, the transcript, a composer
+ * below, and — while a thread is open — the thread panel beside all of it.
+ *
+ * The layout earns its place in the library because the thread is where
+ * applications get it wrong. Two impulses both fail: shrinking the transcript
+ * to make room turns a busy thread into a one-word-per-line stripe, and
+ * *hiding* the transcript with `display: none` unmounts it, losing scroll
+ * position and DOM. So the desktop layout gives the thread a fixed column and
+ * leaves the transcript fluid; below the collapse width the panel overlays the
+ * conversation in full and the conversation steps aside invisibly — still
+ * mounted, still in the DOM, gone from the accessibility tree.
+ */
+export function ConversationPane(props: ConversationPaneProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'header',
+    'composer',
+    'thread',
+    'gutter',
+    'children',
+  ])
+  const threadOpen = () => local.thread !== undefined
+
+  return (
+    <section
+      data-slot="conversation-pane"
+      data-conversation-thread-open={threadOpen() || undefined}
+      class={cn(
+        'relative grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)_auto]',
+        threadOpen()
+          ? 'grid-cols-1 md:grid-cols-[minmax(20rem,1fr)_minmax(18rem,22rem)] lg:grid-cols-[minmax(24rem,1fr)_minmax(20rem,26rem)]'
+          : 'grid-cols-1',
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={local.header}>
+        {(header) => (
+          <div class={cn('col-start-1 row-start-1 min-w-0', threadOpen() && 'max-md:invisible')}>
+            {header()}
+          </div>
+        )}
+      </Show>
+
+      <div
+        class={cn(
+          'col-start-1 row-start-2 flex min-h-0 min-w-0 flex-col',
+          threadOpen() && 'max-md:invisible'
+        )}
+      >
+        {local.children}
+      </div>
+
+      <Show when={local.composer}>
+        {(composer) => (
+          <div
+            class={cn(
+              'col-start-1 row-start-3 min-w-0',
+              local.gutter && 'mx-[clamp(0.8rem,3vw,2.5rem)] mb-[1.15rem] max-[30rem]:mx-2',
+              threadOpen() && 'max-md:invisible'
+            )}
+          >
+            {composer()}
+          </div>
+        )}
+      </Show>
+
+      <Show when={local.thread}>
+        {(thread) => (
+          <div
+            class={cn(
+              'min-h-0 min-w-0',
+              threadOpen() &&
+                'max-md:absolute max-md:inset-0 max-md:z-(--z-docked) max-md:*:border-s-0 md:col-start-2 md:row-span-3 md:row-start-1'
+            )}
+          >
+            {thread()}
+          </div>
+        )}
+      </Show>
+    </section>
+  )
+}

package/dist/r/src/components/conversation/conversation-surface.tsx

@@ -38,6 +38,12 @@ export type ConversationSurfaceProps = ComponentProps<'div'> & {
   empty?: JSX.Element
   /** A header that scrolls with the transcript, e.g. a day divider or a banner. */
   header?: JSX.Element
+  /**
+   * The shared page gutter: reading padding inside the scroller plus a stable
+   * gutter, so the scrollbar never shifts the text when it appears. The page
+   * frame around the surface is `ConversationPane`'s job.
+   */
+  gutter?: boolean
 }
 
 export function ConversationSurface(props: ConversationSurfaceProps) {
@@ -50,6 +56,7 @@ export function ConversationSurface(props: ConversationSurfaceProps) {
     'onReadingPositionChange',
     'empty',
     'header',
+    'gutter',
     'children',
     'onScroll',
     'ref',
@@ -84,7 +91,11 @@ export function ConversationSurface(props: ConversationSurfaceProps) {
         }}
         onScroll={onScroll}
         tabindex={local.tabindex ?? 0}
-        class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+        class={cn(
+          'min-h-0 flex-1 overflow-y-auto overscroll-contain',
+          local.gutter &&
+            'px-[clamp(0.8rem,3vw,2.5rem)] pt-[1.35rem] pb-[1.1rem] [scrollbar-gutter:stable] max-[30rem]:px-2'
+        )}
         {...rest}
       >
         <div ref={follow.bindContent} data-slot="conversation-content">

package/dist/r/src/components/conversation/index.ts

@@ -10,6 +10,13 @@ export {
   type ConversationSurfaceProps,
   type ConversationReadingPosition,
 } from './conversation-surface'
+export { ConversationPane, type ConversationPaneProps } from './conversation-pane'
+export {
+  ComposerMenu,
+  ComposerMenuItem,
+  type ComposerMenuProps,
+  type ComposerMenuItemProps,
+} from './composer-menu'
 export {
   ComposerAttachmentButton,
   ComposerHint,

package/dist/r/src/components/conversation/message-composer.tsx

@@ -71,6 +71,12 @@ export type MessageComposerProps = Omit<ComponentProps<'form'>, 'onSubmit'> & {
   trailing?: JSX.Element
   /** A menu rendered above the field, e.g. mention suggestions. */
   menu?: JSX.Element
+  /**
+   * Host progress rendered in the composer's own live region, e.g. dictation
+   * state — plain paragraphs are progress, a `role="alert"` paragraph is a
+   * failure. Sending and send-failure copy stays the composer's own.
+   */
+  status?: JSX.Element
   /** The reply target, drawn as a strip above the field. */
   replyTo?: { label: string; onDismiss: () => void }
   /** Ref to the actual message textarea, for host focus and selection behavior. */
@@ -102,6 +108,7 @@ export function MessageComposer(props: MessageComposerProps) {
     'leading',
     'trailing',
     'menu',
+    'status',
     'replyTo',
     'inputRef',
     'inputId',
@@ -281,6 +288,7 @@ export function MessageComposer(props: MessageComposerProps) {
         >
           {pendingLabel()}…
         </Show>
+        <Show when={local.status}>{local.status}</Show>
       </div>
     </form>
   )

package/dist/r/src/components/ui/command/command.tsx

@@ -286,3 +286,38 @@ export function CommandShortcut(props: {
     </span>
   )
 }
+
+/**
+ * The status line a command surface reports under its list: searching, offline,
+ * a partial result caveat. The copy and the live-role semantics (`status`,
+ * `alert`) are the caller's — a palette's failure modes are app facts — but the
+ * line's shape is not something every caller should redraw.
+ */
+export function CommandStatus(props: ComponentProps<'p'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <p
+      data-slot="command-status"
+      class={cn('text-muted-foreground px-4 py-4 text-center text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * The keyboard hint a palette footer carries, right-aligned under the list so
+ * it reads as furniture rather than a result. Muted on purpose: the arrows are
+ * what the user has already been doing by the time they read it.
+ */
+export function CommandHint(props: ComponentProps<'p'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <p
+      data-slot="command-hint"
+      class={cn('text-muted-foreground px-4 pb-1.5 text-right text-xs', local.class)}
+      {...rest}
+    />
+  )
+}

package/dist/r/src/components/ui/command/index.ts

@@ -3,10 +3,12 @@ export {
   CommandDialog,
   CommandEmpty,
   CommandGroup,
+  CommandHint,
   CommandInput,
   CommandItem,
   CommandList,
   CommandLoading,
   CommandSeparator,
   CommandShortcut,
+  CommandStatus,
 } from './command'

package/dist/r/src/components/ui/kbd/index.ts

@@ -8,3 +8,8 @@ export {
   type KbdChordProps,
   type KbdSize,
 } from './kbd'
+export {
+  platformModifierKey,
+  searchShortcutKeyshortcuts,
+  searchShortcutLabel,
+} from './platform-modifier'

package/dist/r/src/components/ui/kbd/platform-modifier.ts

@@ -0,0 +1,37 @@
+/**
+ * Which modifier a chord should advertise.
+ *
+ * Every global chord in the product binds `(metaKey || ctrlKey)`, so the
+ * working key is the platform's command modifier wherever the app runs — but
+ * Apple platforms draw it as ⌘ and everyone else spells it Ctrl. A chord
+ * label drawn from anything else (a hardcoded ⌘, say) advertises a key that
+ * does not work as drawn on Windows and Linux.
+ *
+ * These helpers are the one place that decides the glyph, so every surface
+ * that draws or announces a shortcut — rail rows, menus, a pane's search
+ * field — draws the same one. They sit next to the `Kbd` caps because the
+ * glyph is a property of the drawing, not of the feature that shows it: a
+ * spelled-out `Ctrl` needs one cap per word (a `KbdGroup`), while `⌘K` can
+ * ride `KbdChord`'s one-cap-per-character split.
+ */
+
+/** The modifier glyph the running OS renders for Meta: ⌘ on Apple platforms, Ctrl elsewhere. */
+export function platformModifierKey(platform?: string): '⌘' | 'Ctrl' {
+  // The guard keeps server renders honest: no navigator means no Apple
+  // platform string, so they fall back to the spelled-out modifier.
+  const browserPlatform = platform ?? (typeof navigator === 'undefined' ? '' : navigator.platform)
+  return /Mac|iPhone|iPad|iPod/i.test(browserPlatform) ? '⌘' : 'Ctrl'
+}
+
+/** The workspace search chord label as the rail's hover text draws it: the
+ *  platform modifier plus K (`⌘K`, or `Ctrl+K` where ⌘ does not exist). */
+export function searchShortcutLabel(platform?: string): string {
+  return platformModifierKey(platform) === '⌘' ? '⌘K' : 'Ctrl+K'
+}
+
+/**
+ * The `aria-keyshortcuts` for the search chord. The binding accepts Meta and
+ * Ctrl alike, so the announced shortcuts name both: a hardcoded `Meta+K`
+ * would promise a key the row does not keep on non-Apple platforms.
+ */
+export const searchShortcutKeyshortcuts = 'Meta+K Control+K'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.120.0",
+  "version": "0.122.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -885,6 +885,11 @@
           "path": "src/components/ui/kbd/kbd.tsx",
           "type": "registry:ui",
           "target": "components/ui/kbd/kbd.tsx"
+        },
+        {
+          "path": "src/components/ui/kbd/platform-modifier.ts",
+          "type": "registry:ui",
+          "target": "components/ui/kbd/platform-modifier.ts"
         }
       ]
     },
@@ -2374,11 +2379,21 @@
           "type": "registry:ui",
           "target": "components/conversation/chat-composer.tsx"
         },
+        {
+          "path": "src/components/conversation/composer-menu.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/composer-menu.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-avatar.tsx",
           "type": "registry:ui",
           "target": "components/conversation/conversation-avatar.tsx"
         },
+        {
+          "path": "src/components/conversation/conversation-pane.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/conversation-pane.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-surface.tsx",
           "type": "registry:ui",

package/src/components/composites/account-menu/account-menu.tsx

@@ -84,6 +84,14 @@ export type AccountMenuProps = {
   platform?: 'desktop' | 'web'
   /** Whether a session exists. Decides the sign-in/sign-out row. */
   authenticated: boolean
+  /**
+   * Draw the pending-update indicator: an accent dot on the trigger and on the
+   * `updates` row — the id `createAppMenuItems` mints, the same convention the
+   * fallback icons follow — and extend both accessible names with "update
+   * available", because the dot itself carries no text. The updater remains the
+   * caller's: the prop only mirrors its state into the menu.
+   */
+  updateAvailable?: boolean
   /** Local-only applications can omit the session actions altogether. */
   showSession?: boolean
   /** Disable the session row while a sign-in or sign-out is in flight. */
@@ -116,6 +124,7 @@ export function AccountMenu(props: AccountMenuProps) {
     'items',
     'platform',
     'authenticated',
+    'updateAvailable',
     'showSession',
     'busy',
     'label',
@@ -142,6 +151,21 @@ export function AccountMenu(props: AccountMenuProps) {
   const visible = () =>
     local.items.filter((item) => !item.platform || item.platform === (local.platform ?? 'desktop'))
 
+  // The pending update reaches the user twice on each surface: as a dot and as
+  // words. The dot is aria-hidden, so the accessible names carry the state —
+  // which is why the names are extended here rather than left to the caller.
+  const triggerName = () =>
+    `${local.label ?? 'Account and settings'}${local.updateAvailable ? ', update available' : ''}`
+  const updateDot = () => (
+    <Show when={local.updateAvailable}>
+      <span
+        data-slot="account-menu-update-dot"
+        aria-hidden="true"
+        class="absolute top-1.5 right-2.5 size-2 rounded-full bg-primary"
+      />
+    </Show>
+  )
+
   // Built by reference at each return, not once up front: Solid fixes a node's
   // owner chain when the JSX expression runs, and an eagerly created tree would
   // never see the Tooltip provider below — Kobalte's TooltipTrigger then throws
@@ -164,13 +188,15 @@ export function AccountMenu(props: AccountMenuProps) {
             ref={(element: HTMLButtonElement) => (trigger = element)}
             variant="ghost"
             size={local.size ?? 'icon-md'}
-            class={cn('text-muted-foreground', local.class)}
-            aria-label={local.label ?? 'Account and settings'}
+            class={cn('relative text-muted-foreground', local.class)}
+            data-slot="account-menu-trigger"
+            aria-label={triggerName()}
             onFocus={() => local.onIntent?.()}
             onPointerEnter={() => local.onIntent?.()}
             {...rest}
           >
             <UserRound aria-hidden="true" />
+            {updateDot()}
           </TooltipTrigger>
         }
       >
@@ -180,13 +206,15 @@ export function AccountMenu(props: AccountMenuProps) {
         <DropdownMenuTrigger
           as={SideRailButton}
           ref={(element: HTMLButtonElement) => (trigger = element)}
-          label={local.label ?? 'Account and settings'}
-          class={local.class}
+          label={triggerName()}
+          class={cn('relative', local.class)}
+          data-slot="account-menu-trigger"
           onFocus={() => local.onIntent?.()}
           onPointerEnter={() => local.onIntent?.()}
           {...rest}
         >
           <UserRound aria-hidden="true" />
+          {updateDot()}
         </DropdownMenuTrigger>
       </Show>
       <DropdownMenuContent
@@ -211,6 +239,11 @@ export function AccountMenu(props: AccountMenuProps) {
             {(item) => (
               <DropdownMenuItem
                 disabled={item.disabled}
+                aria-label={
+                  local.updateAvailable && item.id === 'updates'
+                    ? `${item.label}, update available`
+                    : undefined
+                }
                 onSelect={() => {
                   pendingAfterClose = item.onSelectAfterClose
                     ? { callback: item.onSelectAfterClose }
@@ -222,6 +255,13 @@ export function AccountMenu(props: AccountMenuProps) {
               >
                 {item.icon ?? renderFallbackIcon(item.id)}
                 <span>{item.label}</span>
+                <Show when={local.updateAvailable && item.id === 'updates'}>
+                  <span
+                    data-slot="account-menu-update-dot"
+                    aria-hidden="true"
+                    class="ms-auto size-2 shrink-0 rounded-full bg-primary"
+                  />
+                </Show>
               </DropdownMenuItem>
             )}
           </For>