@a4ui/core 0.37.1 → 0.38.0

package/src/ui/Message.tsx

@@ -1,13 +1,21 @@
-// Message — one chat message row, full-width (no bubble). Rich content is
-// passed as children so the caller can render markdown, code blocks, lists,
+// Message — one chat message row. By default full-width with no bubble; pass
+// `variant` for a bubble style and `align` to push it to one side. Rich content
+// is passed as children so the caller can render markdown, code blocks, lists,
 // etc. inside the readable prose block.
-import { type JSX, Match, Show, Switch } from 'solid-js'
+import { createContext, type JSX, Match, Show, Switch, useContext } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
 /** Who sent a {@link Message}; drives its subtle visual treatment. */
 export type ChatRole = 'user' | 'assistant' | 'system'
 
+/** Bubble style of a {@link Message}. */
+export type MessageVariant =
+  'default' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'destructive'
+
+/** Which side of the thread a message sits on. */
+export type MessageAlign = 'start' | 'end'
+
 export interface MessageProps {
   role: ChatRole
   children: JSX.Element
@@ -17,40 +25,85 @@ export interface MessageProps {
   avatar?: JSX.Element
   /** Preformatted timestamp string, e.g. `'2:45 PM'`. */
   timestamp?: string
+  /** Stable id, rendered as `data-message-id` so `ChatThread.scrollToMessage` can find it. */
+  id?: string
+  /**
+   * Bubble style. When omitted the legacy role-based treatment applies
+   * (`assistant` faint panel, `user` faint tint).
+   */
+  variant?: MessageVariant
+  /** Push the message to one side and shrink it to its content (max 85% wide). */
+  align?: MessageAlign
+  /** Slot under the content, e.g. a row of reaction chips. */
+  reactions?: JSX.Element
+  /** Slot under the content for `Attachment`s (wrap several in `AttachmentGroup`). */
+  attachments?: JSX.Element
   class?: string
 }
 
+const VARIANT: Record<MessageVariant, string> = {
+  default: 'border border-border bg-card text-card-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  muted: 'bg-muted/60 text-foreground',
+  tinted: 'border border-primary/20 bg-primary/10 text-foreground',
+  outline: 'border border-border bg-transparent text-foreground',
+  ghost: 'bg-transparent text-foreground',
+  destructive: 'border border-destructive/30 bg-destructive/10 text-destructive',
+}
+
+interface MessageGroupContext {
+  align?: MessageAlign
+  variant?: MessageVariant
+}
+
+const GroupContext = createContext<MessageGroupContext>()
+
 /**
- * Full-width chat message row with no bubble: an optional avatar/author
- * header line followed by a prose content block. Role is differentiated with
- * subtle, token-based treatment only — `assistant` gets a faint muted panel,
- * `user` stays plain, `system` is a small centered note.
+ * One chat message: an optional avatar/author header followed by a prose
+ * content block, with optional `reactions` and `attachments` slots. Role is
+ * differentiated with subtle, token-based treatment — or choose a bubble
+ * `variant` and an `align` side. Inside a {@link MessageGroup} the header is
+ * suppressed (the group shows the sender once).
  *
  * @example
  * ```tsx
- * <Message role="assistant" author="Nova" timestamp="2:45 PM">
+ * <Message role="assistant" author="Nova" timestamp="2:45 PM" variant="secondary" align="start">
  *   <p>Here's the summary you asked for.</p>
  * </Message>
  * ```
  */
 export function Message(props: MessageProps): JSX.Element {
+  const group = useContext(GroupContext)
+  const variant = (): MessageVariant | undefined => props.variant ?? group?.variant
+  const align = (): MessageAlign | undefined => props.align ?? group?.align
   return (
     <Switch>
       <Match when={props.role === 'system'}>
-        <div class={cn('text-center text-xs text-muted-foreground italic', props.class)}>
+        <div
+          data-message-id={props.id}
+          class={cn('text-center text-xs text-muted-foreground italic', props.class)}
+        >
           {props.children}
         </div>
       </Match>
       <Match when={true}>
         <div
+          data-message-id={props.id}
+          data-variant={variant()}
+          data-align={align()}
           class={cn(
             'flex flex-col gap-1',
-            props.role === 'assistant' && 'rounded-xl bg-muted/40 p-3',
-            props.role === 'user' && 'rounded-xl bg-primary/5 p-3',
+            variant() ? 'rounded-2xl px-3.5 py-2.5' : 'rounded-xl',
+            variant() ? VARIANT[variant()!] : 'text-foreground',
+            !variant() && props.role === 'assistant' && 'bg-muted/40 p-3',
+            !variant() && props.role === 'user' && 'bg-primary/5 p-3',
+            align() && 'w-fit max-w-[85%]',
+            align() === 'end' && 'self-end',
+            align() === 'start' && 'self-start',
             props.class,
           )}
         >
-          <Show when={props.author || props.avatar || props.timestamp}>
+          <Show when={!group && (props.author || props.avatar || props.timestamp)}>
             <div class="flex items-center gap-2">
               {props.avatar}
               <Show when={props.author}>
@@ -61,9 +114,82 @@ export function Message(props: MessageProps): JSX.Element {
               </Show>
             </div>
           </Show>
-          <div class="space-y-2 text-sm leading-relaxed text-foreground">{props.children}</div>
+          <div class="space-y-2 text-sm leading-relaxed">{props.children}</div>
+          <Show when={props.attachments}>
+            <div data-slot="message-attachments" class="mt-1 max-w-full">
+              {props.attachments}
+            </div>
+          </Show>
+          <Show when={props.reactions}>
+            <div data-slot="message-reactions" class="mt-1 flex flex-wrap items-center gap-1">
+              {props.reactions}
+            </div>
+          </Show>
         </div>
       </Match>
     </Switch>
   )
 }
+
+export interface MessageGroupProps {
+  /** Sender name, shown once above the group. */
+  author?: string
+  /** Sender avatar, shown once next to the name. */
+  avatar?: JSX.Element
+  /** Timestamp of the first message, shown once. */
+  timestamp?: string
+  /** Side for every message in the group (a message can still override it). */
+  align?: MessageAlign
+  /** Bubble style for every message in the group (a message can still override it). */
+  variant?: MessageVariant
+  /** The consecutive `Message`s from this sender. */
+  children: JSX.Element
+  class?: string
+}
+
+/**
+ * Visually groups consecutive messages from one sender: avatar, name and time
+ * appear once, and the bubbles sit closer together than separate messages.
+ *
+ * @example
+ * ```tsx
+ * <MessageGroup author="Nova" avatar={<Avatar name="Nova" size="sm" />} variant="secondary" align="start">
+ *   <Message role="assistant">First thought.</Message>
+ *   <Message role="assistant">And a follow-up.</Message>
+ * </MessageGroup>
+ * ```
+ */
+export function MessageGroup(props: MessageGroupProps): JSX.Element {
+  return (
+    <GroupContext.Provider
+      value={{
+        get align() {
+          return props.align
+        },
+        get variant() {
+          return props.variant
+        },
+      }}
+    >
+      <div
+        role="group"
+        aria-label={props.author ? `Messages from ${props.author}` : undefined}
+        data-slot="message-group"
+        class={cn('flex flex-col gap-1', props.class)}
+      >
+        <Show when={props.author || props.avatar || props.timestamp}>
+          <div class={cn('flex items-center gap-2', props.align === 'end' && 'flex-row-reverse')}>
+            {props.avatar}
+            <Show when={props.author}>
+              <span class="text-sm font-medium text-foreground">{props.author}</span>
+            </Show>
+            <Show when={props.timestamp}>
+              <span class="text-xs text-muted-foreground">{props.timestamp}</span>
+            </Show>
+          </div>
+        </Show>
+        {props.children}
+      </div>
+    </GroupContext.Provider>
+  )
+}

package/src/ui/Modal.tsx

@@ -12,7 +12,7 @@ import { Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
-interface ModalProps extends ParentProps {
+export interface ModalProps extends ParentProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   /** Header title; omitting it hides the whole header bar. */
@@ -24,11 +24,41 @@ interface ModalProps extends ParentProps {
    * @default 'drawer'
    */
   variant?: 'drawer' | 'center'
+  /**
+   * Width of the dialog: `'sm'` 24rem, `'md'` 32rem, `'lg'` 42rem, `'xl'` 56rem,
+   * `'full'` the whole viewport minus margin. Omitted keeps the historical width
+   * (`variant="center"`: 32rem, `variant="drawer"`: 520px). Content taller than
+   * the viewport scrolls inside the dialog; the header stays pinned.
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
   class?: string
   /** Accessible label for the close button. @default 'Close' */
   closeLabel?: string
 }
 
+const CENTER_WIDTH = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  full: 'max-w-full',
+} as const
+const DRAWER_WIDTH = {
+  sm: 'max-w-sm',
+  md: 'max-w-[520px]',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  full: 'max-w-full',
+} as const
+
+// Popovers inside the dialog (MultiSelect, ...) are portaled to <body>, so
+// Kobalte sees a click on them as "outside" and would close the dialog. Those
+// panels carry `data-a4-floating`; interacting with one is not a dismissal.
+function keepForFloating(e: Event): void {
+  const target = (e as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent?.target ?? e.target
+  if (target instanceof Element && target.closest('[data-a4-floating]')) e.preventDefault()
+}
+
 /**
  * Dialog on Kobalte's `Dialog` primitive (focus trap, portal, presence handled
  * for you), rendered as either a slide-over drawer or a centered modal depending
@@ -53,8 +83,10 @@ export function Modal(props: ModalProps): JSX.Element {
           fallback={
             <div class="fixed inset-0 z-50 flex justify-end">
               <Dialog.Content
+                onInteractOutside={keepForFloating}
                 class={cn(
-                  'drawer-content bg-glass flex h-full w-full max-w-[520px] flex-col overflow-y-auto border-l border-border text-card-foreground shadow-2xl',
+                  'drawer-content bg-glass flex h-full w-full flex-col overflow-y-auto border-l border-border text-card-foreground shadow-2xl',
+                  DRAWER_WIDTH[props.size ?? 'md'],
                   props.class,
                 )}
               >
@@ -78,13 +110,15 @@ export function Modal(props: ModalProps): JSX.Element {
         >
           <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
             <Dialog.Content
+              onInteractOutside={keepForFloating}
               class={cn(
-                'modal-content w-full max-w-lg rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+                'modal-content flex max-h-[calc(100dvh-2rem)] w-full flex-col rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+                CENTER_WIDTH[props.size ?? 'md'],
                 props.class,
               )}
             >
               <Show when={props.title}>
-                <div class="flex items-center justify-between border-b border-border p-6 pb-4">
+                <div class="flex shrink-0 items-center justify-between border-b border-border p-6 pb-4">
                   <Dialog.Title class="text-lg font-semibold leading-none tracking-tight">
                     {props.title}
                   </Dialog.Title>
@@ -96,7 +130,9 @@ export function Modal(props: ModalProps): JSX.Element {
                   </Dialog.CloseButton>
                 </div>
               </Show>
-              <div class="p-6 pt-4">{props.children}</div>
+              <div data-modal-body class="min-h-0 flex-1 overflow-y-auto overscroll-contain p-6 pt-4">
+                {props.children}
+              </div>
             </Dialog.Content>
           </div>
         </Show>

package/src/ui/MultiSelect.tsx

@@ -188,7 +188,8 @@ export function MultiSelect(props: MultiSelectProps): JSX.Element {
               left: `${pos().left}px`,
               width: `${pos().width}px`,
             }}
-            class="z-50 min-w-56 rounded-lg border border-border bg-card p-1 text-card-foreground shadow-lg"
+            data-a4-floating
+            class="pointer-events-auto z-50 min-w-56 rounded-lg border border-border bg-card p-1 text-card-foreground shadow-lg"
           >
             <Show when={props.searchable ?? true}>
               <input

package/src/ui/NativeSelect.tsx

@@ -0,0 +1,66 @@
+import { ChevronDown } from 'lucide-solid'
+import { createEffect, splitProps, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export type NativeSelectSize = 'sm' | 'default'
+
+interface NativeSelectProps extends Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  /** @default 'default' */
+  size?: NativeSelectSize
+  /** Marks the field invalid (destructive border + `aria-invalid`). */
+  invalid?: boolean
+  /** Class for the `<select>`; use `wrapperClass` for the outer box. */
+  class?: string
+  wrapperClass?: string
+}
+
+export type { NativeSelectProps }
+
+const SIZE: Record<NativeSelectSize, string> = {
+  default: 'py-2 text-sm',
+  sm: 'py-1 text-xs',
+}
+
+/**
+ * Styled native `<select>` — gets the OS picker on mobile. Takes `<option>` and
+ * `<optgroup>` children; `value`, `onChange` and every other select attribute
+ * pass straight through.
+ *
+ * @example
+ * ```tsx
+ * <NativeSelect value={plan()} onChange={(e) => setPlan(e.currentTarget.value)} aria-label="Plan">
+ *   <option value="free">Free</option>
+ *   <option value="pro">Pro</option>
+ * </NativeSelect>
+ * ```
+ */
+export function NativeSelect(props: NativeSelectProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['size', 'invalid', 'class', 'wrapperClass', 'children', 'value'])
+  let select: HTMLSelectElement | undefined
+  // Set after mount: a `value` attribute applied before the <option> children exist is ignored.
+  createEffect(() => {
+    if (select && local.value !== undefined) select.value = String(local.value)
+  })
+  return (
+    <div class={cn('relative w-full', local.wrapperClass)}>
+      <select
+        ref={select}
+        aria-invalid={local.invalid ? 'true' : undefined}
+        class={cn(
+          'peer w-full appearance-none rounded-md border bg-background pl-3 pr-9 text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50',
+          local.invalid ? 'border-destructive' : 'border-input',
+          SIZE[local.size ?? 'default'],
+          local.class,
+        )}
+        {...rest}
+      >
+        {local.children}
+      </select>
+      <ChevronDown
+        aria-hidden="true"
+        class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
+      />
+    </div>
+  )
+}

package/src/ui/NavigationMenu.tsx

@@ -0,0 +1,262 @@
+// Site navigation with rich dropdown panels on Kobalte's NavigationMenu
+// primitive. Desktop: triggers open panels rendered into ONE shared viewport
+// that animates its size between panels. Mobile (< md): collapses to a
+// hamburger button that opens a Drawer with an Accordion of the sections.
+import { NavigationMenu as KNav } from '@kobalte/core/navigation-menu'
+import { ChevronDown, Menu as MenuIcon } from 'lucide-solid'
+import type { JSX, ParentProps } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { useMediaQuery } from '../lib/media'
+import { Accordion } from './Accordion'
+import { Button } from './Button'
+import { Drawer } from './Drawer'
+
+const TRIGGER =
+  'inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted data-[expanded]:bg-muted focus-visible:ring-2 focus-visible:ring-ring'
+
+/** One section of the collapsed (mobile) navigation. */
+export interface NavigationMenuMobileSection {
+  /** Section title shown on the accordion trigger (or the link label). */
+  label: string
+  /** Destination when the section is a plain link with no children. */
+  href?: string
+  /** Child links; when present the section becomes an accordion entry. */
+  links?: { title: string; href: string; description?: string }[]
+}
+
+/** Props of {@link NavigationMenu}. */
+export interface NavigationMenuProps extends ParentProps {
+  /** Accessible name of the navigation landmark. @default 'Main' */
+  label?: string
+  /**
+   * The same sections as `children`, as data. Used below the `md` breakpoint,
+   * where the menu collapses into a hamburger + drawer. Required: the mobile
+   * layout cannot be derived from the desktop JSX.
+   */
+  mobileSections: NavigationMenuMobileSection[]
+  /** Drawer title. @default 'Menu' */
+  mobileTitle?: string
+  /** Accessible label of the hamburger button. @default 'Open navigation' */
+  mobileButtonLabel?: string
+  class?: string
+}
+
+/**
+ * Site navigation bar whose triggers open rich panels (links with icon, title
+ * and description, featured cards) inside a shared, size-animating viewport.
+ * Hover or click opens a panel, Escape closes it, and the links inside are
+ * reachable with Tab. The root is the `<ul>` list of items.
+ *
+ * @example
+ * ```tsx
+ * <NavigationMenu mobileSections={[{ label: 'Docs', href: '/docs' }]}>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+ *     <NavigationMenuContent>
+ *       <NavigationMenuPanelLink href="/tour" title="Tour" description="A quick walkthrough" />
+ *     </NavigationMenuContent>
+ *   </NavigationMenuItem>
+ *   <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
+ * </NavigationMenu>
+ * ```
+ */
+export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  return (
+    <Show when={isDesktop()} fallback={<MobileNavigation {...props} />}>
+      <KNav aria-label={props.label ?? 'Main'} class={cn('relative flex items-center gap-1', props.class)}>
+        {props.children}
+        <KNav.Viewport class="navmenu-viewport bg-glass relative z-50 mt-2 h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] overflow-hidden rounded-2xl shadow-2xl transition-[width,height] duration-300 ease-out">
+          <KNav.Arrow class="hidden" />
+        </KNav.Viewport>
+      </KNav>
+    </Show>
+  )
+}
+
+function MobileNavigation(props: NavigationMenuProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  const withLinks = () => props.mobileSections.filter((s) => s.links?.length)
+  const plain = () => props.mobileSections.filter((s) => !s.links?.length)
+  return (
+    <nav aria-label={props.label ?? 'Main'} class={props.class}>
+      <Button
+        variant="outline"
+        aria-label={props.mobileButtonLabel ?? 'Open navigation'}
+        aria-haspopup="dialog"
+        aria-expanded={open()}
+        onClick={() => setOpen(true)}
+      >
+        <MenuIcon class="h-4 w-4" />
+      </Button>
+      <Drawer side="left" open={open()} onOpenChange={setOpen} title={props.mobileTitle ?? 'Menu'}>
+        <div
+          class="p-5"
+          onKeyDown={(e) => {
+            // Escape typed while an accordion trigger has focus does not reach
+            // the dialog's own dismiss handler, so close explicitly.
+            if (e.key === 'Escape') setOpen(false)
+          }}
+        >
+          <Accordion
+            items={withLinks().map((s) => ({
+              value: s.label,
+              title: s.label,
+              content: (
+                <ul class="space-y-1">
+                  <For each={s.links}>
+                    {(l) => (
+                      <li>
+                        <a
+                          href={l.href}
+                          class="block rounded-md px-2 py-1.5 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                        >
+                          <span class="block text-sm font-medium text-foreground">{l.title}</span>
+                          <Show when={l.description}>
+                            <span class="block text-xs text-muted-foreground">{l.description}</span>
+                          </Show>
+                        </a>
+                      </li>
+                    )}
+                  </For>
+                </ul>
+              ),
+            }))}
+          />
+          <ul class="mt-2 space-y-1">
+            <For each={plain()}>
+              {(s) => (
+                <li>
+                  <a
+                    href={s.href}
+                    class="block rounded-md px-2 py-3 text-sm font-medium text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {s.label}
+                  </a>
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+      </Drawer>
+    </nav>
+  )
+}
+
+/** One top-level entry: pairs a trigger with its panel. */
+export function NavigationMenuItem(props: ParentProps): JSX.Element {
+  return <KNav.Menu>{props.children}</KNav.Menu>
+}
+
+/** Button that opens the sibling {@link NavigationMenuContent}; shows a chevron. */
+export function NavigationMenuTrigger(props: ParentProps & { class?: string }): JSX.Element {
+  return (
+    <KNav.Trigger class={cn(TRIGGER, 'group', props.class)}>
+      {props.children}
+      <KNav.Icon class="transition-transform duration-200 group-data-[expanded]:rotate-180">
+        <ChevronDown class="h-3.5 w-3.5" />
+      </KNav.Icon>
+    </KNav.Trigger>
+  )
+}
+
+/** Props of {@link NavigationMenuContent}. */
+export interface NavigationMenuContentProps extends ParentProps {
+  class?: string
+}
+
+/**
+ * The panel of one item. Rendered inside the shared viewport, which resizes to
+ * fit it. Put {@link NavigationMenuPanelLink}s in it, laid out with a grid.
+ */
+export function NavigationMenuContent(props: NavigationMenuContentProps): JSX.Element {
+  // Kobalte's menu content swallows Tab, which would make the links unreachable
+  // with a plain Tab press. Walk the panel's links with Tab / Shift+Tab, and
+  // when the end is passed close the menu (focus returns to its trigger) so
+  // the key never traps focus.
+  const onTab = (e: KeyboardEvent & { currentTarget: HTMLElement }): void => {
+    if (e.key !== 'Tab') return
+    const links = Array.from(e.currentTarget.querySelectorAll<HTMLElement>('a[role="menuitem"]'))
+    const at = links.indexOf(document.activeElement as HTMLElement)
+    const next = at + (e.shiftKey ? -1 : 1)
+    e.preventDefault()
+    // Deferred: Kobalte's own Shift+Tab handling re-focuses the panel right after this handler.
+    const target = links[next]
+    if (target) setTimeout(() => target.focus(), 0)
+    else e.currentTarget.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+  }
+  return (
+    <KNav.Portal>
+      <KNav.Content
+        class={cn(
+          'navmenu-content absolute left-0 top-0 w-max max-w-[min(90vw,40rem)] p-3 outline-none',
+          props.class,
+        )}
+        onKeyDown={onTab}
+      >
+        {props.children}
+      </KNav.Content>
+    </KNav.Portal>
+  )
+}
+
+/** Props of {@link NavigationMenuLink}. */
+export interface NavigationMenuLinkProps extends ParentProps {
+  href: string
+  class?: string
+}
+
+/** A top-level link with no panel; takes part in the trigger roving focus. */
+export function NavigationMenuLink(props: NavigationMenuLinkProps): JSX.Element {
+  return (
+    <KNav.Menu value={`link-trigger-${props.href}`}>
+      <KNav.Trigger as="a" href={props.href} class={cn(TRIGGER, props.class)}>
+        {props.children}
+      </KNav.Trigger>
+    </KNav.Menu>
+  )
+}
+
+/** Props of {@link NavigationMenuPanelLink}. */
+export interface NavigationMenuPanelLinkProps {
+  href: string
+  title: string
+  description?: string
+  /** Leading icon element (e.g. a lucide icon). */
+  icon?: JSX.Element
+  /** Renders as a large highlighted card, typically spanning several grid rows. */
+  featured?: boolean
+  class?: string
+}
+
+/** A link inside a panel: icon + title + description, or a featured card. */
+export function NavigationMenuPanelLink(props: NavigationMenuPanelLinkProps): JSX.Element {
+  return (
+    <KNav.Item
+      href={props.href}
+      class={cn(
+        'flex gap-3 rounded-xl p-3 text-left no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring',
+        props.featured
+          ? 'flex-col justify-end bg-gradient-to-br from-primary/30 to-accent/20 hover:from-primary/40'
+          : 'items-start hover:bg-muted data-[highlighted]:bg-muted',
+        props.class,
+      )}
+    >
+      <Show when={props.icon}>
+        <span class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/15 text-primary">
+          {props.icon}
+        </span>
+      </Show>
+      <span class="min-w-0">
+        <span class={cn('block font-medium text-foreground', props.featured ? 'text-base' : 'text-sm')}>
+          {props.title}
+        </span>
+        <Show when={props.description}>
+          <span class="mt-0.5 block text-xs leading-snug text-muted-foreground">{props.description}</span>
+        </Show>
+      </span>
+    </KNav.Item>
+  )
+}

package/src/ui/PromptComposer.tsx

@@ -18,6 +18,11 @@ export interface PromptComposerProps {
   /** Attachment labels/filenames shown as removable chips above the input. */
   attachments?: string[]
   onRemoveAttachment?: (index: number) => void
+  /**
+   * Rich attachment slot rendered above the input (alongside the chips above).
+   * Pass `Attachment`s, ideally wrapped in an `AttachmentGroup`.
+   */
+  attachmentItems?: JSX.Element
   /** When set, shows a paperclip button that calls this on click. */
   onAttach?: () => void
   class?: string
@@ -92,6 +97,12 @@ export function PromptComposer(props: PromptComposerProps): JSX.Element {
         </div>
       </Show>
 
+      <Show when={props.attachmentItems}>
+        <div data-slot="composer-attachments" class="mb-2">
+          {props.attachmentItems}
+        </div>
+      </Show>
+
       <textarea
         ref={textareaRef}
         aria-label="Message"