@a4ui/core 0.37.0 → 0.38.0

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.37.0'
+export const A4UI_VERSION = '0.38.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -42,6 +42,19 @@ export { createLinkedSelection, type LinkedSelection } from './lib/createLinkedS
 export { Accordion, type AccordionItem } from './ui/Accordion'
 export { Badge, type BadgeTone } from './ui/Badge'
 export { Button, type ButtonVariant } from './ui/Button'
+export {
+  ButtonGroup,
+  ButtonGroupText,
+  ButtonGroupSeparator,
+  type ButtonGroupProps,
+  type ButtonGroupTextProps,
+  type ButtonGroupSeparatorProps,
+  type ButtonGroupOrientation,
+} from './ui/ButtonGroup'
+export { AspectRatio, type AspectRatioProps } from './ui/AspectRatio'
+export { Label, type LabelProps } from './ui/Label'
+export { NativeSelect, type NativeSelectProps, type NativeSelectSize } from './ui/NativeSelect'
+export { Prose, type ProseProps, type ProseSize } from './ui/Prose'
 export { Card, CardHeader, CardTitle, CardContent } from './ui/Card'
 export { Checkbox } from './ui/Checkbox'
 export { DateField } from './ui/DateField'
@@ -49,12 +62,55 @@ export { TimeField, type TimeFieldProps } from './ui/TimeField'
 export { DateTimeField, type DateTimeFieldProps } from './ui/DateTimeField'
 export { DateRangePicker, type DateRange, type DateRangePickerProps } from './ui/DateRangePicker'
 export { FormField, FormLabel, FormControl, FormDescription, FormError, type FormFieldProps } from './ui/Form'
+export {
+  Field,
+  FieldSet,
+  FieldLegend,
+  FieldGroup,
+  FieldContent,
+  FieldLabel,
+  FieldTitle,
+  FieldDescription,
+  FieldSeparator,
+  FieldError,
+  type FieldProps,
+  type FieldSetProps,
+  type FieldLegendProps,
+  type FieldGroupProps,
+  type FieldLabelProps,
+  type FieldSeparatorProps,
+  type FieldErrorProps,
+  type FieldOrientation,
+} from './ui/Field'
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupTextarea,
+  type InputGroupProps,
+  type InputGroupAddonProps,
+  type InputGroupAddonAlign,
+  type InputGroupButtonProps,
+  type InputGroupButtonSize,
+  type InputGroupInputProps,
+  type InputGroupTextareaProps,
+} from './ui/InputGroup'
 export { FileUpload, type UploadFile, type FileUploadProps } from './ui/FileUpload'
 export { MultiSelect, type MultiSelectOption, type MultiSelectProps } from './ui/MultiSelect'
-export { Drawer } from './ui/Drawer'
+export { Drawer, type DrawerProps, type DrawerSide } from './ui/Drawer'
 export { Dropdown, type DropdownItem } from './ui/Dropdown'
 export { Dropzone } from './ui/Dropzone'
 export { Input } from './ui/Input'
+export {
+  Questionnaire,
+  type QuestionnaireProps,
+  type QuestionnaireQuestion,
+  type QuestionnaireOption,
+  type QuestionnaireAnswers,
+  type QuestionnaireLabels,
+} from './ui/Questionnaire'
 export { Modal } from './ui/Modal'
 export { PageHeader } from './ui/PageHeader'
 export { Pagination } from './ui/Pagination'
@@ -84,6 +140,37 @@ export { Toggle } from './ui/Toggle'
 export { ToggleGroup, type ToggleGroupOption } from './ui/ToggleGroup'
 export { SegmentedControl, type SegmentedOption } from './ui/SegmentedControl'
 export { Breadcrumb, type BreadcrumbItem } from './ui/Breadcrumb'
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarSub,
+  type MenubarCheckboxItemProps,
+  type MenubarItemProps,
+  type MenubarMenuProps,
+  type MenubarProps,
+  type MenubarRadioGroupProps,
+  type MenubarRadioItemProps,
+  type MenubarSubProps,
+} from './ui/Menubar'
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuPanelLink,
+  NavigationMenuTrigger,
+  type NavigationMenuContentProps,
+  type NavigationMenuLinkProps,
+  type NavigationMenuMobileSection,
+  type NavigationMenuPanelLinkProps,
+  type NavigationMenuProps,
+} from './ui/NavigationMenu'
 export { AlertDialog } from './ui/AlertDialog'
 export { ContextMenu, type ContextMenuItem } from './ui/ContextMenu'
 export { Combobox } from './ui/Combobox'
@@ -92,6 +179,33 @@ export { Stepper, type StepItem, type StepperProps } from './ui/Stepper'
 export { Timeline, type TimelineItem, type TimelineTone, type TimelineProps } from './ui/Timeline'
 export { Rating, type RatingProps } from './ui/Rating'
 export { PricingTable, type PricingTier, type PricingPeriod } from './ui/PricingTable'
+// Page sections — data-driven marketing blocks.
+export type { SectionLink } from './ui/internal/sectionKit'
+export { SiteNav, type SiteNavProps } from './ui/SiteNav'
+export { Hero, type HeroProps, type HeroLayout, type HeroBackground } from './ui/Hero'
+export { FeatureGrid, type FeatureGridProps, type FeatureItem } from './ui/FeatureGrid'
+export {
+  Testimonials,
+  type TestimonialsProps,
+  type TestimonialItem,
+  type TestimonialsLayout,
+} from './ui/Testimonials'
+export { Faq, type FaqProps, type FaqItem } from './ui/Faq'
+export { CtaBanner, type CtaBannerProps } from './ui/CtaBanner'
+export {
+  ContactSection,
+  type ContactSectionProps,
+  type ContactField,
+  type ContactValues,
+} from './ui/ContactSection'
+export {
+  SiteFooter,
+  type SiteFooterProps,
+  type FooterColumn,
+  type SocialLink,
+  type SocialNetwork,
+} from './ui/SiteFooter'
+export { TeamGrid, type TeamGridProps, type TeamMember } from './ui/TeamGrid'
 export { BeforeAfter, type BeforeAfterProps } from './ui/BeforeAfter'
 export {
   Configurator,
@@ -124,6 +238,23 @@ export {
 export { Anchor, type AnchorItem, type AnchorProps } from './ui/Anchor'
 export { Highlight, type HighlightProps } from './ui/Highlight'
 export { List, type ListItem } from './ui/List'
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+  type ItemMediaVariant,
+  type ItemProps,
+  type ItemSize,
+  type ItemVariant,
+} from './ui/Item'
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps } from './ui/ScrollArea'
 export { Countdown, type CountdownProps } from './ui/Countdown'
 export { Affix } from './ui/Affix'
 export { Transfer, type TransferItem, type TransferProps } from './ui/Transfer'
@@ -151,7 +282,31 @@ export { Clock, type ClockProps } from './ui/Clock'
 
 // Conversation / AI, transitions, and depth surfaces (roadmap phase 1).
 export { ChatThread, type ChatThreadProps } from './ui/ChatThread'
-export { Message, type MessageProps, type ChatRole } from './ui/Message'
+export {
+  Message,
+  MessageGroup,
+  type MessageProps,
+  type MessageGroupProps,
+  type MessageVariant,
+  type MessageAlign,
+  type ChatRole,
+} from './ui/Message'
+export { type ChatThreadApi } from './ui/ChatThread'
+export { ChatMarker, type ChatMarkerProps, type ChatMarkerVariant } from './ui/ChatMarker'
+export {
+  Attachment,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentGroup,
+  type AttachmentProps,
+  type AttachmentActionProps,
+  type AttachmentState,
+  type AttachmentOrientation,
+} from './ui/Attachment'
 export { StreamingText, type StreamingTextProps } from './ui/StreamingText'
 export { Citation, type CitationProps, SourceList, type SourceListProps } from './ui/Citation'
 export { PromptComposer, type PromptComposerProps } from './ui/PromptComposer'
@@ -330,8 +485,42 @@ export { flyToCart, type FlyToCartOptions } from './lib/flyToCart'
 // Layout (src/layout) — generic shell + backdrop + toggles. App-coupled pieces
 // (Sidebar, Topbar, CompanySwitcher, DemoBanner, CommandPalette) stay in the app.
 export { AppShell } from './layout/AppShell'
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarRail,
+  SidebarInset,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  SidebarMenuSkeleton,
+  useSidebar,
+  type SidebarProps,
+  type SidebarProviderProps,
+  type SidebarTriggerProps,
+  type SidebarGroupActionProps,
+  type SidebarMenuButtonProps,
+  type SidebarMenuSubProps,
+  type SidebarSide,
+  type SidebarVariant,
+  type SidebarCollapsible,
+} from './ui/Sidebar'
 export { SpaceBackground } from './layout/SpaceBackground'
 export { Aurora, type AuroraProps } from './layout/Aurora'
+export type { ModalProps } from './ui/Modal'
 export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery'
 export { SnowScenery } from './layout/SnowScenery'
 export { ChristmasBackground } from './layout/ChristmasBackground'

package/src/layout/Aurora.tsx

@@ -30,9 +30,32 @@ export interface AuroraProps {
    * @default 'blobs'
    */
   variant?: 'blobs' | 'mesh'
+  /**
+   * Blob palette. Each entry is a CSS color (`'#ff6a3d'`, `'oklch(0.7 0.2 40)'`,
+   * `'hsl(var(--brand))'`) or a theme token written as a custom property name
+   * (`'--primary'`, `'--accent'`, `'--success'` ...). Entries are assigned to the
+   * blobs / mesh points in order and repeat when there are fewer colors than
+   * blobs. Defaults to the theme tokens `--primary` / `--accent`, so every theme
+   * still tints it for free.
+   */
+  colors?: string[]
+  /**
+   * Color of the cursor-following glow, same format as a `colors` entry.
+   * @default '--primary'
+   */
+  glowColor?: string
+  /** Peak opacity of the cursor glow, 0..1. @default 0.1 */
+  glowOpacity?: number
   class?: string
 }
 
+/** Resolve a palette entry to a CSS color at the given alpha. `--token` => theme token. */
+function colorAt(color: string, alpha: number): string {
+  const a = Math.min(1, Math.max(0, alpha))
+  if (color.startsWith('--')) return `hsl(var(${color}) / ${a.toFixed(2)})`
+  return `color-mix(in srgb, ${color} ${(a * 100).toFixed(0)}%, transparent)`
+}
+
 // Mesh variant — several token-tinted radial gradients composited into one
 // backdrop (positions chosen to fill the corners without a hard seam).
 const MESH_STOPS = [
@@ -68,10 +91,16 @@ const BLOBS = [
  */
 export function Aurora(props: AuroraProps): JSX.Element {
   const intensity = (): number => props.intensity ?? 0.45
+  // Palette entry for blob/mesh index `i`: custom colors cycle; otherwise the
+  // built-in token for that slot.
+  const colorFor = (i: number, token: string): string => {
+    const list = props.colors
+    return list && list.length > 0 ? list[i % list.length] : token
+  }
   const meshBg = (): string =>
     MESH_STOPS.map(
-      (s) =>
-        `radial-gradient(45% 45% at ${s.at}, hsl(var(${s.token}) / ${(intensity() * s.a).toFixed(2)}), transparent 70%)`,
+      (s, i) =>
+        `radial-gradient(45% 45% at ${s.at}, ${colorAt(colorFor(i, s.token), intensity() * s.a)}, transparent 70%)`,
     ).join(', ')
   let root: HTMLDivElement | undefined
 
@@ -93,11 +122,11 @@ export function Aurora(props: AuroraProps): JSX.Element {
         when={props.variant === 'mesh'}
         fallback={
           <For each={BLOBS}>
-            {(b) => (
+            {(b, i) => (
               <div
                 class={cn('absolute rounded-full blur-3xl', b.pos, b.size, props.animated && 'aurora-drift')}
                 style={{
-                  background: `radial-gradient(circle, hsl(var(${b.token}) / ${(intensity() * b.a).toFixed(2)}), transparent 70%)`,
+                  background: `radial-gradient(circle, ${colorAt(colorFor(i(), b.token), intensity() * b.a)}, transparent 70%)`,
                 }}
               />
             )}
@@ -110,12 +139,12 @@ export function Aurora(props: AuroraProps): JSX.Element {
         />
       </Show>
       {/* Soft glow that follows the cursor across the backdrop (positioned by
-          bindPointerFx via left/top on pointermove). */}
+          bindPointerFx via transform, coalesced per frame). */}
       <div
         id="cursorGlow"
-        class="absolute h-[520px] w-[520px] rounded-full opacity-0 transition-opacity duration-300"
+        class="absolute h-[520px] w-[520px] rounded-full opacity-0 transition-opacity duration-300 will-change-transform"
         style={{
-          background: 'radial-gradient(circle, hsl(var(--primary) / 0.1), transparent 70%)',
+          background: `radial-gradient(circle, ${colorAt(props.glowColor ?? '--primary', props.glowOpacity ?? 0.1)}, transparent 70%)`,
           transform: 'translate(-50%,-50%)',
         }}
       />

package/src/layout/sceneEffects.ts

@@ -8,11 +8,29 @@
 export function bindPointerFx(root: HTMLElement): () => void {
   const glow = root.querySelector<HTMLElement>('#cursorGlow')
 
+  // The glow is moved with `transform` only (compositor-friendly: no layout, and
+  // no repaint of backdrop-filter surfaces in front of it). It is pinned at 0,0
+  // once; pointermoves are coalesced to one write per animation frame.
+  let frame = 0
+  let gx = 0
+  let gy = 0
+  if (glow) {
+    glow.style.left = '0px'
+    glow.style.top = '0px'
+    glow.style.willChange = 'transform'
+  }
+  const paintGlow = (): void => {
+    frame = 0
+    if (!glow) return
+    glow.style.transform = `translate3d(${gx}px, ${gy}px, 0) translate(-50%, -50%)`
+  }
+
   const onMove = (e: PointerEvent): void => {
     if (glow) {
-      glow.style.opacity = '1'
-      glow.style.left = `${e.clientX}px`
-      glow.style.top = `${e.clientY}px`
+      gx = e.clientX
+      gy = e.clientY
+      if (glow.style.opacity !== '1') glow.style.opacity = '1'
+      if (!frame) frame = requestAnimationFrame(paintGlow)
     }
     const el = e.target as Element | null
     const magnetic = el?.closest?.('.magnetic') as HTMLElement | null
@@ -42,6 +60,7 @@ export function bindPointerFx(root: HTMLElement): () => void {
   document.addEventListener('pointerout', onOut as EventListener)
 
   return () => {
+    if (frame) cancelAnimationFrame(frame)
     document.removeEventListener('pointermove', onMove as EventListener)
     window.removeEventListener('pointerleave', onLeave)
     document.removeEventListener('pointerout', onOut as EventListener)

package/src/lib/anchored.ts

@@ -0,0 +1,57 @@
+// Keeping a portaled popover glued to the trigger it belongs to.
+//
+// DateField, TimeField, DateRangePicker and MultiSelect all render their panel
+// in a <Portal> so it escapes the stacking context of whatever card it sits in.
+// At <body> it cannot be positioned relative to the trigger, so each one places
+// it with `position: fixed` at the trigger's viewport rect — which is correct
+// until the page scrolls and the rect goes stale.
+//
+// All four handled that by CLOSING on any captured scroll, and that made them
+// unusable on a scrolling page: clicking a trigger below the fold scrolls it
+// into view, the scroll event arrives right after the panel opens, and the
+// panel shuts in the same gesture. Reported as a date picker that simply did
+// not respond to clicks; measured in a browser as open-then-closed within
+// 300 ms, with `mousedown` followed by `scroll:document`.
+//
+// A fixed panel does not need to disappear when the page moves — it needs to
+// move with it. This re-places it, and closes only when the trigger has
+// actually left the viewport, where following it would leave a panel hovering
+// over unrelated content.
+
+/** Vertical slack, in px, before a trigger counts as gone. Half a row: enough
+ * not to close while a sticky header slides over the trigger's top edge. */
+const OFF_SCREEN_SLACK = 16
+
+export interface AnchorReflowOptions {
+  /** The trigger the panel is anchored to. */
+  anchor: () => HTMLElement | undefined
+  /** Re-reads the anchor's rect and repositions the panel. */
+  place: () => void
+  /** Called only when the anchor is no longer on screen. */
+  close: () => void
+}
+
+/**
+ * The scroll/resize handler an anchored popover should register, instead of
+ * `close`.
+ *
+ * Registering it for `scroll` still needs capture (`true`): the scroll may come
+ * from any ancestor container, and scroll events do not bubble to `window`.
+ */
+export function createAnchorReflow(options: AnchorReflowOptions): () => void {
+  return () => {
+    const el = options.anchor()
+    if (!el) {
+      options.close()
+      return
+    }
+    const rect = el.getBoundingClientRect()
+    const gone =
+      rect.bottom < -OFF_SCREEN_SLACK ||
+      rect.top > window.innerHeight + OFF_SCREEN_SLACK ||
+      rect.right < 0 ||
+      rect.left > window.innerWidth
+    if (gone) options.close()
+    else options.place()
+  }
+}

package/src/ui/AspectRatio.tsx

@@ -0,0 +1,35 @@
+import { splitProps, type JSX, type ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface AspectRatioProps extends ParentProps {
+  /** Width divided by height, e.g. `16 / 9`. @default 1 */
+  ratio?: number
+  class?: string
+}
+
+export type { AspectRatioProps }
+
+/**
+ * Box that keeps a fixed width:height ratio (CSS `aspect-ratio`). Children fill
+ * it; give images/video `object-cover`.
+ *
+ * @example
+ * ```tsx
+ * <AspectRatio ratio={16 / 9} class="w-full overflow-hidden rounded-lg">
+ *   <img src="/cover.jpg" alt="" class="object-cover" />
+ * </AspectRatio>
+ * ```
+ */
+export function AspectRatio(props: AspectRatioProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['ratio', 'class', 'children'])
+  return (
+    <div
+      class={cn('relative w-full [&>*]:h-full [&>*]:w-full', local.class)}
+      style={{ 'aspect-ratio': String(local.ratio ?? 1) }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}

package/src/ui/Attachment.tsx

@@ -0,0 +1,189 @@
+// Attachment — a file/image chip for chat UIs, built on the `Item` row primitive.
+// Adds an upload lifecycle (idle / uploading / processing / error / done), a
+// progress bar and a horizontally scrolling group.
+import { splitProps, type JSX, type ParentProps, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, type ItemSize } from './Item'
+import { ScrollArea } from './ScrollArea'
+
+export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done'
+export type AttachmentOrientation = 'horizontal' | 'vertical'
+
+interface AttachmentProps extends ParentProps {
+  /** Lifecycle state. `uploading`/`processing` set `aria-busy`; `error` uses destructive tokens. @default 'idle' */
+  state?: AttachmentState
+  /** Density, forwarded to `Item`. @default 'default' */
+  size?: ItemSize
+  /** Lay media and text side by side, or stacked. @default 'horizontal' */
+  orientation?: AttachmentOrientation
+  /**
+   * Upload progress, 0–100. Only used while `state="uploading"`; when omitted
+   * the bar is indeterminate (no `aria-valuenow`).
+   */
+  progress?: number
+  /** Accessible name of the progress bar. @default 'Uploading' / 'Processing' */
+  progressLabel?: string
+  class?: string
+}
+
+export type { AttachmentProps }
+
+const clamp = (n: number): number => Math.min(100, Math.max(0, n))
+
+/**
+ * A file or image attachment: `AttachmentMedia`, an `AttachmentContent` with
+ * title/description and trailing `AttachmentActions`. Group several in an
+ * `AttachmentGroup` (horizontal scroll-snap row).
+ *
+ * @example
+ * ```tsx
+ * <Attachment state="uploading" progress={42}>
+ *   <AttachmentMedia><FileText /></AttachmentMedia>
+ *   <AttachmentContent>
+ *     <AttachmentTitle>roadmap.pdf</AttachmentTitle>
+ *     <AttachmentDescription>42% of 2.4 MB</AttachmentDescription>
+ *   </AttachmentContent>
+ *   <AttachmentActions>
+ *     <AttachmentAction label="Cancel upload"><X /></AttachmentAction>
+ *   </AttachmentActions>
+ * </Attachment>
+ * ```
+ */
+export function Attachment(props: AttachmentProps): JSX.Element {
+  const [local] = splitProps(props, [
+    'state',
+    'size',
+    'orientation',
+    'progress',
+    'progressLabel',
+    'class',
+    'children',
+  ])
+  const state = (): AttachmentState => local.state ?? 'idle'
+  const busy = (): boolean => state() === 'uploading' || state() === 'processing'
+  const determinate = (): boolean => state() === 'uploading' && local.progress !== undefined
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state()}
+      data-orientation={local.orientation ?? 'horizontal'}
+      aria-busy={busy() ? 'true' : undefined}
+      class={cn(
+        'relative w-full overflow-hidden rounded-lg border bg-card/60 text-card-foreground',
+        state() === 'error'
+          ? 'border-destructive/50 bg-destructive/10 text-destructive [&_[data-slot=item-description]]:text-destructive/80'
+          : 'border-border',
+        local.class,
+      )}
+    >
+      <Item
+        size={local.size}
+        class={cn(
+          'flex-nowrap border-0',
+          local.orientation === 'vertical' && 'flex-col items-start',
+          state() === 'processing' && 'animate-pulse',
+        )}
+      >
+        {local.children}
+      </Item>
+      <Show when={busy()}>
+        <div
+          role="progressbar"
+          aria-label={local.progressLabel ?? (state() === 'uploading' ? 'Uploading' : 'Processing')}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={determinate() ? Math.round(clamp(local.progress ?? 0)) : undefined}
+          class="absolute inset-x-0 bottom-0 h-1 bg-muted"
+        >
+          <div
+            class={cn(
+              'h-full bg-primary transition-[width] duration-200',
+              !determinate() && 'w-1/3 animate-pulse',
+            )}
+            style={determinate() ? { width: `${clamp(local.progress ?? 0)}%` } : undefined}
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+interface SlotProps extends ParentProps {
+  class?: string
+}
+
+/** Leading visual: an icon tile (`icon`, default) or an image thumbnail (`image`). */
+export function AttachmentMedia(props: SlotProps & { variant?: 'icon' | 'image' }): JSX.Element {
+  return (
+    <ItemMedia variant={props.variant ?? 'icon'} class={props.class}>
+      {props.children}
+    </ItemMedia>
+  )
+}
+
+/** The text column. */
+export function AttachmentContent(props: SlotProps): JSX.Element {
+  return <ItemContent class={props.class}>{props.children}</ItemContent>
+}
+
+/** File name; truncates on one line. */
+export function AttachmentTitle(props: SlotProps): JSX.Element {
+  return <ItemTitle class={cn('block truncate', props.class)}>{props.children}</ItemTitle>
+}
+
+/** Secondary line: size, status or error message. */
+export function AttachmentDescription(props: SlotProps): JSX.Element {
+  return <ItemDescription class={cn('line-clamp-1 text-xs', props.class)}>{props.children}</ItemDescription>
+}
+
+/** Trailing controls. */
+export function AttachmentActions(props: SlotProps): JSX.Element {
+  return <ItemActions class={cn('gap-1', props.class)}>{props.children}</ItemActions>
+}
+
+interface AttachmentActionProps extends ParentProps {
+  /** Accessible name (required: the button only holds an icon). */
+  label: string
+  onClick?: (event: MouseEvent) => void
+  disabled?: boolean
+  class?: string
+}
+
+export type { AttachmentActionProps }
+
+/** Icon button inside `AttachmentActions`. */
+export function AttachmentAction(props: AttachmentActionProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      aria-label={props.label}
+      disabled={props.disabled}
+      onClick={(e) => props.onClick?.(e)}
+      class={cn(
+        'grid h-7 w-7 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&>svg]:h-4 [&>svg]:w-4',
+        props.class,
+      )}
+    >
+      {props.children}
+    </button>
+  )
+}
+
+/** Horizontal scroll-snap row of attachments. */
+export function AttachmentGroup(props: SlotProps & { label?: string }): JSX.Element {
+  return (
+    <ScrollArea
+      orientation="horizontal"
+      label={props.label ?? 'Attachments'}
+      class={cn('w-full snap-x snap-mandatory rounded-lg', props.class)}
+    >
+      <div
+        data-slot="attachment-group"
+        class="flex w-max gap-2 p-1 [&>[data-slot=attachment]]:w-64 [&>[data-slot=attachment]]:shrink-0 [&>[data-slot=attachment]]:snap-start"
+      >
+        {props.children}
+      </div>
+    </ScrollArea>
+  )
+}