@adea-ai/ui 0.65.0 → 0.66.0

package/dist/components/conversation/chat-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.js","names":["ChevronsDownUp","ChevronsUpDown","MoreHorizontal","ArrowUp","Show","createEffect","createSignal","on","onCleanup","onMount","JSX","Button","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","Spinner","BusySendButton","BusySendButtonProps","BusySendMode","createComposerImeGuard","ChatComposerControl","focus","expandAndFocus","ChatComposerProps","value","onValueChange","onSubmit","input","text","action","Promise","resetKey","disabled","readOnly","blockedReason","placeholder","inputLabel","collapse","onChange","controlRef","control","sendableActions","Partial","Record","busy","Omit","knowledge","Element","followUps","band","approval","notices","attachments","leadingActions","trailingActions","menuItems","context","approvalFocus","ChatComposer","props","ime","pending","setPending","error","setError","field","HTMLTextAreaElement","restoreBar","HTMLButtonElement","focusFrame","focusTarget","selection","start","end","direction","generation","active","collapsed","unavailable","cancelFocus","undefined","cancelAnimationFrame","requestFocus","target","requestAnimationFrame","setSelectionRange","Math","min","length","changeCollapsed","selectionStart","selectionEnd","selectionDirection","onBlur","defer","mode","canSend","selected","trim","submit","started","preview","first","split","find","line","slice","_el$","_tmpl$1","_el$5","firstChild","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$3","_tmpl$2","_el$4","_tmpl$3","_el$6","_tmpl$4","_el$7","_tmpl$5","_el$8","_tmpl$6","message","_el$15","_tmpl$10","fallback","ref","element","type","variant","size","onClick","_tmpl$11","_el$17","_tmpl$12","_el$9","_tmpl$9","_el$1","_el$10","nextSibling","_el$11","_el$13","addEventListener","event","preventDefault","_el$0","_tmpl$7","$$keydown","key","shiftKey","defaultPrevented","claimEnter","metaKey","ctrlKey","_$addEventListener","onFocus","onCompositionEnd","onCompositionStart","$$input","currentTarget","_$use","placement","as","onCloseAutoFocus","_$memo","onSelect","_tmpl$8","aria-label","label","_$mergeProps","alternateActionHint","onFire","_$effect","_p$","_v$","_v$2","_v$3","_v$4","e","_$setAttribute","t","a","o","_el$14","_tmpl$0","_$delegateEvents","_$createComponent","_$memo","_$mergeProps","_$setAttribute","_$delegateEvents"],"sources":["../../../src/components/conversation/chat-composer.tsx"],"sourcesContent":["/*\n * Substantially translated from KiroCrew website/src/components/ChatInput.tsx\n * at 283e136c0f902e965a535a7c9548c57c7504fed0.\n * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n * Licensed under Apache-2.0; see LICENSE and NOTICE.\n */\nimport { ChevronsDownUp, ChevronsUpDown, MoreHorizontal, ArrowUp } from 'lucide-solid'\nimport { Show, createEffect, createSignal, on, onCleanup, onMount, type JSX } from 'solid-js'\nimport { Button } from '../ui/button/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu/dropdown-menu'\nimport { Spinner } from '../ui/spinner/spinner'\nimport { BusySendButton, type BusySendButtonProps, type BusySendMode } from './busy-send-button'\nimport { createComposerImeGuard } from './ime-guard'\n\nexport type ChatComposerControl = {\n  /** Focus this instance; false when it is unavailable or collapsed. */\n  focus: () => boolean\n  /** A typing intent, unlike merely navigating to a conversation. */\n  expandAndFocus: () => boolean\n}\nexport type ChatComposerProps = {\n  value: string\n  onValueChange: (value: string) => void\n  /** The host owns attachments and delivery; text/action are captured at the gesture. */\n  onSubmit: (input: { text: string; action: 'send' | BusySendMode }) => void | Promise<void>\n  /** Host scope fence; changes discard local feedback, not the host draft. */\n  resetKey?: unknown\n  disabled?: boolean\n  readOnly?: boolean\n  /** A visible capability or connectivity reason. */\n  blockedReason?: string\n  placeholder?: string\n  inputLabel?: string\n  /** Opt-in and controlled: the library neither persists nor broadcasts it. */\n  collapse?: { value: boolean; onChange: (value: boolean) => void }\n  controlRef?: (control: ChatComposerControl | undefined) => void\n  /** Host payload eligibility by action; explicit false refuses even a nonempty draft. */\n  sendableActions?: Partial<Record<'send' | BusySendMode, boolean>>\n  busy?: Omit<BusySendButtonProps, 'onFire' | 'disabled' | 'alternateActionHint'>\n  knowledge?: JSX.Element\n  followUps?: JSX.Element\n  band?: JSX.Element\n  approval?: JSX.Element\n  notices?: JSX.Element\n  attachments?: JSX.Element\n  leadingActions?: JSX.Element\n  trailingActions?: JSX.Element\n  /** Host-contributed menu items; no upload, skill or permission services here. */\n  menuItems?: JSX.Element\n  context?: JSX.Element\n  /** Host derives this from the pending approval presentation, not UI policy. */\n  approvalFocus?: boolean\n}\n\n/**\n * Kiro's composer assembly: context/options, adjacent band, approval/notices,\n * staged content, input/action groups and a context shelf. Reading collapse\n * really unmounts the input and shelf and offers a labeled way back with draft\n * preview. The host retains the only draft, identities, preferences and services.\n *\n * Kobalte owns the options menu. Scoped imperative typing intent replaces the\n * donor global lookup/broadcast so a second composer cannot receive this draft\n * or focus. No animation starts from hidden geometry, no global shortcut, and no\n * runtime/permission/voice/optimizer authority is copied. More specific chips,\n * approval decisions and staged-content semantics are supplied by their owners.\n */\nexport function ChatComposer(props: ChatComposerProps) {\n  const ime = createComposerImeGuard()\n  const [pending, setPending] = createSignal(false)\n  const [error, setError] = createSignal<string | null>(null)\n  let field: HTMLTextAreaElement | undefined\n  let restoreBar: HTMLButtonElement | undefined\n  let focusFrame: number | undefined\n  let focusTarget: 'input' | 'bar' | undefined\n  let selection:\n    | { start: number; end: number; direction: 'forward' | 'backward' | 'none' }\n    | undefined\n  let generation = 0\n  let active = true\n  const collapsed = () => props.collapse?.value === true\n  const unavailable = () => props.disabled || props.readOnly || !!props.blockedReason\n  const cancelFocus = () => {\n    if (focusFrame !== undefined) cancelAnimationFrame(focusFrame)\n    focusFrame = undefined\n  }\n  const requestFocus = (target: 'input' | 'bar') => {\n    cancelFocus()\n    focusTarget = target\n    focusFrame = requestAnimationFrame(() => {\n      focusFrame = undefined\n      if (!active || props.approvalFocus) return\n      if (target === 'bar' && collapsed()) restoreBar?.focus()\n      if (target === 'input' && !collapsed() && !props.disabled && field) {\n        field.focus()\n        if (selection)\n          field.setSelectionRange(\n            Math.min(selection.start, field.value.length),\n            Math.min(selection.end, field.value.length),\n            selection.direction\n          )\n      }\n      focusTarget = undefined\n    })\n  }\n  const changeCollapsed = (value: boolean) => {\n    if (!props.collapse || props.approvalFocus) return\n    if (value && field)\n      selection = {\n        start: field.selectionStart,\n        end: field.selectionEnd,\n        direction: field.selectionDirection,\n      }\n    props.collapse.onChange(value)\n    requestFocus(value ? 'bar' : 'input')\n  }\n  const control: ChatComposerControl = {\n    focus() {\n      if (collapsed() || props.approvalFocus || props.disabled || !field) return false\n      field.focus()\n      return true\n    },\n    expandAndFocus() {\n      if (props.approvalFocus || props.disabled) return false\n      if (collapsed()) changeCollapsed(false)\n      else requestFocus('input')\n      return true\n    },\n  }\n  onMount(() => props.controlRef?.(control))\n  createEffect(\n    on(\n      () => props.resetKey,\n      () => {\n        generation += 1\n        selection = undefined\n        cancelFocus()\n        focusTarget = undefined\n        setPending(false)\n        setError(null)\n        ime.onBlur()\n      },\n      { defer: true }\n    )\n  )\n  onCleanup(() => {\n    active = false\n    generation += 1\n    cancelFocus()\n    props.controlRef?.(undefined)\n  })\n  const action = (): 'send' | BusySendMode => props.busy?.mode ?? 'send'\n  const canSend = (selected: 'send' | BusySendMode = action()) =>\n    !unavailable() &&\n    !pending() &&\n    (props.sendableActions?.[selected] ?? props.value.trim().length > 0) &&\n    !(selected !== 'send' && props.busy?.unavailable?.[selected])\n  const submit = async (selected: 'send' | BusySendMode = action()) => {\n    if (!canSend(selected)) return\n    const started = generation\n    const input = { text: props.value, action: selected }\n    setPending(true)\n    setError(null)\n    try {\n      await props.onSubmit(input)\n    } catch {\n      if (active && started === generation)\n        setError('Message not sent. Check your draft and retry when the connection recovers.')\n    } finally {\n      if (active && started === generation) setPending(false)\n    }\n  }\n  const preview = () => {\n    const first =\n      props.value\n        .split('\\n')\n        .find((line) => line.trim().length > 0)\n        ?.trim() ?? ''\n    return first.length > 120 ? `${first.slice(0, 120)}…` : first\n  }\n  return (\n    <div data-slot=\"chat-composer\" class=\"mx-auto flex w-full max-w-4xl flex-col px-4 pb-1\">\n      <Show when={!props.approvalFocus}>\n        <Show when={props.knowledge}>\n          <div data-slot=\"composer-knowledge\">{props.knowledge}</div>\n        </Show>\n        <Show when={props.followUps}>\n          <div data-slot=\"composer-follow-ups\">{props.followUps}</div>\n        </Show>\n      </Show>\n      <Show when={props.band}>\n        <div data-slot=\"composer-band\">{props.band}</div>\n      </Show>\n      <div aria-hidden=\"true\" class=\"h-1.5 shrink-0\" />\n      <Show when={props.approval}>\n        <div data-slot=\"composer-approval\">{props.approval}</div>\n      </Show>\n      <Show when={props.notices}>\n        <div data-slot=\"composer-notices\">{props.notices}</div>\n      </Show>\n      <Show when={props.blockedReason}>\n        <p role=\"status\" class=\"text-muted-foreground mb-1 text-xs\">\n          {props.blockedReason}\n        </p>\n      </Show>\n      <Show when={error()}>\n        {(message) => (\n          <p role=\"alert\" class=\"text-destructive mb-1 text-xs\">\n            {message()}\n          </p>\n        )}\n      </Show>\n      <Show when={!props.approvalFocus}>\n        <Show\n          when={!collapsed()}\n          fallback={\n            <Button\n              ref={(element) => {\n                restoreBar = element\n                onCleanup(() => {\n                  if (restoreBar === element) restoreBar = undefined\n                })\n              }}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"w-full justify-start\"\n              aria-expanded={false}\n              aria-label=\"Show the message input\"\n              onClick={() => changeCollapsed(false)}\n            >\n              <ChevronsUpDown />\n              <span aria-hidden=\"true\" class=\"shrink-0\">\n                Show the message input\n              </span>\n              <Show when={preview()}>\n                <span aria-hidden=\"true\" class=\"min-w-0 flex-1 truncate\">\n                  {preview()}\n                </span>\n              </Show>\n            </Button>\n          }\n        >\n          <form\n            data-slot=\"composer-input-box\"\n            class=\"border-input bg-card flex flex-col overflow-hidden rounded-2xl border transition-colors focus-within:border-ring\"\n            onSubmit={(event) => {\n              event.preventDefault()\n              void submit()\n            }}\n          >\n            <Show when={props.attachments}>\n              <div data-slot=\"composer-staged-content\">{props.attachments}</div>\n            </Show>\n            <textarea\n              ref={(element) => {\n                field = element\n                onCleanup(() => {\n                  if (field === element) field = undefined\n                })\n              }}\n              data-slot=\"composer-input\"\n              aria-label={props.inputLabel ?? 'Message'}\n              class=\"field-sizing-content text-foreground placeholder:text-muted-foreground min-h-11 max-h-36 w-full resize-none border-0 bg-transparent px-4 py-3 text-sm outline-none disabled:opacity-50\"\n              value={props.value}\n              onInput={(event) => props.onValueChange(event.currentTarget.value)}\n              disabled={props.disabled}\n              readOnly={props.readOnly || pending()}\n              placeholder={props.placeholder ?? 'Write a message…'}\n              rows={1}\n              onCompositionStart={ime.onCompositionStart}\n              onCompositionEnd={ime.onCompositionEnd}\n              onFocus={ime.onFocus}\n              onBlur={ime.onBlur}\n              onKeyDown={(event) => {\n                if (event.key === 'Escape' && error()) {\n                  setError(null)\n                  return\n                }\n                if (event.key !== 'Enter' || event.shiftKey || event.defaultPrevented) return\n                if (ime.claimEnter(event)) {\n                  const selected =\n                    props.busy && (event.metaKey || event.ctrlKey)\n                      ? props.busy.mode === 'steer'\n                        ? 'queue'\n                        : 'steer'\n                      : action()\n                  void submit(selected)\n                }\n              }}\n            />\n            <div\n              data-slot=\"composer-action-row\"\n              class=\"flex items-center justify-between gap-2 px-2.5 pb-2 pt-0.5\"\n            >\n              <div class=\"flex min-w-0 items-center gap-1\">\n                <Show when={props.collapse || props.menuItems}>\n                  <DropdownMenu placement=\"top-start\">\n                    <DropdownMenuTrigger\n                      as={Button}\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      aria-label=\"Message input options\"\n                    >\n                      <MoreHorizontal />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      onCloseAutoFocus={(event) => {\n                        if (focusTarget) event.preventDefault()\n                      }}\n                    >\n                      {props.menuItems}\n                      <Show when={props.collapse}>\n                        <DropdownMenuItem onSelect={() => changeCollapsed(true)}>\n                          <ChevronsDownUp />\n                          <div class=\"flex min-w-0 flex-col\">\n                            <span>Collapse the message input</span>\n                            <span class=\"text-muted-foreground text-xs\">\n                              Make room to read; keep your draft\n                            </span>\n                          </div>\n                        </DropdownMenuItem>\n                      </Show>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </Show>\n                {props.leadingActions}\n              </div>\n              <div class=\"flex shrink-0 items-center gap-1\">\n                {props.trailingActions}\n                <Show\n                  when={props.busy}\n                  fallback={\n                    <Button\n                      type=\"submit\"\n                      size=\"icon-sm\"\n                      disabled={!canSend()}\n                      aria-label={pending() ? 'Sending message' : 'Send message'}\n                    >\n                      <Show when={pending()} fallback={<ArrowUp />}>\n                        <Spinner size=\"sm\" label={false} />\n                      </Show>\n                    </Button>\n                  }\n                >\n                  {(busy) => (\n                    <BusySendButton\n                      {...busy()}\n                      alternateActionHint={\n                        canSend(busy().mode === 'steer' ? 'queue' : 'steer')\n                          ? 'Ctrl/Cmd+Enter uses the other action'\n                          : undefined\n                      }\n                      disabled={!canSend()}\n                      onFire={() => {\n                        void submit()\n                      }}\n                    />\n                  )}\n                </Show>\n              </div>\n            </div>\n          </form>\n          <Show when={props.context}>\n            <div data-slot=\"composer-context\" class=\"flex min-w-0 items-center gap-2 pt-1\">\n              {props.context}\n            </div>\n          </Show>\n        </Show>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/conversation/index.d.ts

@@ -1,3 +1,4 @@
+export { ChatComposer, type ChatComposerProps, type ChatComposerControl } from './chat-composer';
 export { BusySendButton, type BusySendMode, type BusySendButtonProps } from './busy-send-button';
 export { ConversationAvatar, type ConversationAvatarKind, type ConversationAvatarProps, } from './conversation-avatar';
 export { ConversationSurface, type ConversationSurfaceProps } from './conversation-surface';

package/dist/components/conversation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAChG,OAAO,EACL,kBAAkB,EAClB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AAC3F,OAAO,EACL,wBAAwB,EACxB,YAAY,EACZ,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,cAAc,EACd,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAChG,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAChG,OAAO,EACL,kBAAkB,EAClB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AAC3F,OAAO,EACL,wBAAwB,EACxB,YAAY,EACZ,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,cAAc,EACd,WAAW,EACX,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAA"}

package/dist/components/conversation/index.js

@@ -1,7 +1,8 @@
 import { BusySendButton } from "./busy-send-button.js";
+import { ChatComposer } from "./chat-composer.js";
 import { ConversationAvatar } from "./conversation-avatar.js";
 import { ConversationSurface } from "./conversation-surface.js";
 import { ComposerAttachmentButton, ComposerHint, MessageComposer } from "./message-composer.js";
 import { MessageBody, MessageDayDivider, MessageGroup, MessageRow } from "./message-row.js";
 import { AttachmentCard, ThreadPanel } from "./thread-panel.js";
-export { AttachmentCard, BusySendButton, ComposerAttachmentButton, ComposerHint, ConversationAvatar, ConversationSurface, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ThreadPanel };
+export { AttachmentCard, BusySendButton, ChatComposer, ComposerAttachmentButton, ComposerHint, ConversationAvatar, ConversationSurface, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ThreadPanel };

package/dist/index.js

@@ -71,6 +71,7 @@ import { SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, Side
 import { StatusBar, StatusBarItem, StatusBarSpacer } from "./components/layout/status-bar/status-bar.js";
 import { TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle } from "./components/layout/top-bar/top-bar.js";
 import { BusySendButton } from "./components/conversation/busy-send-button.js";
+import { ChatComposer } from "./components/conversation/chat-composer.js";
 import { ConversationAvatar } from "./components/conversation/conversation-avatar.js";
 import { ConversationSurface } from "./components/conversation/conversation-surface.js";
 import { ComposerAttachmentButton, ComposerHint, MessageComposer } from "./components/conversation/message-composer.js";
@@ -92,4 +93,4 @@ import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/ver
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { keyedRows } from "./lib/keyed-rows.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityIcon, Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, Skeleton, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, UpdateDialog, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, focusPane, fontOptions, formatBytes, formatReleaseDate, initialsFrom, inlineScriptLiteral, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, normalizeLayout, parseDiff, plainTextFromMarkdown, radiusTokens, resizeSplit, resolvedDensity, sheetVariants, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, zIndexTokens };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityIcon, Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavSection, SidebarNavTitle, Skeleton, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, UpdateDialog, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, focusPane, fontOptions, formatBytes, formatReleaseDate, initialsFrom, inlineScriptLiteral, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, normalizeLayout, parseDiff, plainTextFromMarkdown, radiusTokens, resizeSplit, resolvedDensity, sheetVariants, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, zIndexTokens };

package/dist/r/conversation.json

@@ -22,6 +22,11 @@
       "type": "registry:ui",
       "target": "components/conversation/busy-send-button.tsx"
     },
+    {
+      "path": "src/components/conversation/chat-composer.tsx",
+      "type": "registry:ui",
+      "target": "components/conversation/chat-composer.tsx"
+    },
     {
       "path": "src/components/conversation/conversation-avatar.tsx",
       "type": "registry:ui",

package/dist/r/registry.json

@@ -1836,6 +1836,11 @@
           "type": "registry:ui",
           "target": "components/conversation/busy-send-button.tsx"
         },
+        {
+          "path": "src/components/conversation/chat-composer.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/chat-composer.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-avatar.tsx",
           "type": "registry:ui",

package/dist/r/src/components/composites/update-dialog/update-dialog.tsx

@@ -457,7 +457,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
           </Show>
 
           <Show when={notes()}>
-            <section class="flex flex-col gap-2" aria-labelledby="update-release-notes">
+            <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2">
                 <h2 id="update-release-notes" class="text-sm font-semibold">
                   What changed in this release
@@ -477,11 +477,11 @@ export function UpdateDialog(props: UpdateDialogProps) {
               >
                 {notes()}
               </div>
-            </section>
+            </div>
           </Show>
 
           <Show when={changelog()}>
-            <section class="flex flex-col gap-2" aria-labelledby="update-changelog">
+            <div class="flex flex-col gap-2">
               <h2 id="update-changelog" class="text-sm font-semibold">
                 Installed changelog
               </h2>
@@ -499,7 +499,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
               >
                 {changelog()}
               </div>
-            </section>
+            </div>
           </Show>
         </div>
 

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

@@ -0,0 +1,378 @@
+/*
+ * Substantially translated from KiroCrew website/src/components/ChatInput.tsx
+ * at 283e136c0f902e965a535a7c9548c57c7504fed0.
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Licensed under Apache-2.0; see LICENSE and NOTICE.
+ */
+import { ChevronsDownUp, ChevronsUpDown, MoreHorizontal, ArrowUp } from 'lucide-solid'
+import { Show, createEffect, createSignal, on, onCleanup, onMount, type JSX } from 'solid-js'
+import { Button } from '../ui/button/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu/dropdown-menu'
+import { Spinner } from '../ui/spinner/spinner'
+import { BusySendButton, type BusySendButtonProps, type BusySendMode } from './busy-send-button'
+import { createComposerImeGuard } from './ime-guard'
+
+export type ChatComposerControl = {
+  /** Focus this instance; false when it is unavailable or collapsed. */
+  focus: () => boolean
+  /** A typing intent, unlike merely navigating to a conversation. */
+  expandAndFocus: () => boolean
+}
+export type ChatComposerProps = {
+  value: string
+  onValueChange: (value: string) => void
+  /** The host owns attachments and delivery; text/action are captured at the gesture. */
+  onSubmit: (input: { text: string; action: 'send' | BusySendMode }) => void | Promise<void>
+  /** Host scope fence; changes discard local feedback, not the host draft. */
+  resetKey?: unknown
+  disabled?: boolean
+  readOnly?: boolean
+  /** A visible capability or connectivity reason. */
+  blockedReason?: string
+  placeholder?: string
+  inputLabel?: string
+  /** Opt-in and controlled: the library neither persists nor broadcasts it. */
+  collapse?: { value: boolean; onChange: (value: boolean) => void }
+  controlRef?: (control: ChatComposerControl | undefined) => void
+  /** Host payload eligibility by action; explicit false refuses even a nonempty draft. */
+  sendableActions?: Partial<Record<'send' | BusySendMode, boolean>>
+  busy?: Omit<BusySendButtonProps, 'onFire' | 'disabled' | 'alternateActionHint'>
+  knowledge?: JSX.Element
+  followUps?: JSX.Element
+  band?: JSX.Element
+  approval?: JSX.Element
+  notices?: JSX.Element
+  attachments?: JSX.Element
+  leadingActions?: JSX.Element
+  trailingActions?: JSX.Element
+  /** Host-contributed menu items; no upload, skill or permission services here. */
+  menuItems?: JSX.Element
+  context?: JSX.Element
+  /** Host derives this from the pending approval presentation, not UI policy. */
+  approvalFocus?: boolean
+}
+
+/**
+ * Kiro's composer assembly: context/options, adjacent band, approval/notices,
+ * staged content, input/action groups and a context shelf. Reading collapse
+ * really unmounts the input and shelf and offers a labeled way back with draft
+ * preview. The host retains the only draft, identities, preferences and services.
+ *
+ * Kobalte owns the options menu. Scoped imperative typing intent replaces the
+ * donor global lookup/broadcast so a second composer cannot receive this draft
+ * or focus. No animation starts from hidden geometry, no global shortcut, and no
+ * runtime/permission/voice/optimizer authority is copied. More specific chips,
+ * approval decisions and staged-content semantics are supplied by their owners.
+ */
+export function ChatComposer(props: ChatComposerProps) {
+  const ime = createComposerImeGuard()
+  const [pending, setPending] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+  let field: HTMLTextAreaElement | undefined
+  let restoreBar: HTMLButtonElement | undefined
+  let focusFrame: number | undefined
+  let focusTarget: 'input' | 'bar' | undefined
+  let selection:
+    | { start: number; end: number; direction: 'forward' | 'backward' | 'none' }
+    | undefined
+  let generation = 0
+  let active = true
+  const collapsed = () => props.collapse?.value === true
+  const unavailable = () => props.disabled || props.readOnly || !!props.blockedReason
+  const cancelFocus = () => {
+    if (focusFrame !== undefined) cancelAnimationFrame(focusFrame)
+    focusFrame = undefined
+  }
+  const requestFocus = (target: 'input' | 'bar') => {
+    cancelFocus()
+    focusTarget = target
+    focusFrame = requestAnimationFrame(() => {
+      focusFrame = undefined
+      if (!active || props.approvalFocus) return
+      if (target === 'bar' && collapsed()) restoreBar?.focus()
+      if (target === 'input' && !collapsed() && !props.disabled && field) {
+        field.focus()
+        if (selection)
+          field.setSelectionRange(
+            Math.min(selection.start, field.value.length),
+            Math.min(selection.end, field.value.length),
+            selection.direction
+          )
+      }
+      focusTarget = undefined
+    })
+  }
+  const changeCollapsed = (value: boolean) => {
+    if (!props.collapse || props.approvalFocus) return
+    if (value && field)
+      selection = {
+        start: field.selectionStart,
+        end: field.selectionEnd,
+        direction: field.selectionDirection,
+      }
+    props.collapse.onChange(value)
+    requestFocus(value ? 'bar' : 'input')
+  }
+  const control: ChatComposerControl = {
+    focus() {
+      if (collapsed() || props.approvalFocus || props.disabled || !field) return false
+      field.focus()
+      return true
+    },
+    expandAndFocus() {
+      if (props.approvalFocus || props.disabled) return false
+      if (collapsed()) changeCollapsed(false)
+      else requestFocus('input')
+      return true
+    },
+  }
+  onMount(() => props.controlRef?.(control))
+  createEffect(
+    on(
+      () => props.resetKey,
+      () => {
+        generation += 1
+        selection = undefined
+        cancelFocus()
+        focusTarget = undefined
+        setPending(false)
+        setError(null)
+        ime.onBlur()
+      },
+      { defer: true }
+    )
+  )
+  onCleanup(() => {
+    active = false
+    generation += 1
+    cancelFocus()
+    props.controlRef?.(undefined)
+  })
+  const action = (): 'send' | BusySendMode => props.busy?.mode ?? 'send'
+  const canSend = (selected: 'send' | BusySendMode = action()) =>
+    !unavailable() &&
+    !pending() &&
+    (props.sendableActions?.[selected] ?? props.value.trim().length > 0) &&
+    !(selected !== 'send' && props.busy?.unavailable?.[selected])
+  const submit = async (selected: 'send' | BusySendMode = action()) => {
+    if (!canSend(selected)) return
+    const started = generation
+    const input = { text: props.value, action: selected }
+    setPending(true)
+    setError(null)
+    try {
+      await props.onSubmit(input)
+    } catch {
+      if (active && started === generation)
+        setError('Message not sent. Check your draft and retry when the connection recovers.')
+    } finally {
+      if (active && started === generation) setPending(false)
+    }
+  }
+  const preview = () => {
+    const first =
+      props.value
+        .split('\n')
+        .find((line) => line.trim().length > 0)
+        ?.trim() ?? ''
+    return first.length > 120 ? `${first.slice(0, 120)}…` : first
+  }
+  return (
+    <div data-slot="chat-composer" class="mx-auto flex w-full max-w-4xl flex-col px-4 pb-1">
+      <Show when={!props.approvalFocus}>
+        <Show when={props.knowledge}>
+          <div data-slot="composer-knowledge">{props.knowledge}</div>
+        </Show>
+        <Show when={props.followUps}>
+          <div data-slot="composer-follow-ups">{props.followUps}</div>
+        </Show>
+      </Show>
+      <Show when={props.band}>
+        <div data-slot="composer-band">{props.band}</div>
+      </Show>
+      <div aria-hidden="true" class="h-1.5 shrink-0" />
+      <Show when={props.approval}>
+        <div data-slot="composer-approval">{props.approval}</div>
+      </Show>
+      <Show when={props.notices}>
+        <div data-slot="composer-notices">{props.notices}</div>
+      </Show>
+      <Show when={props.blockedReason}>
+        <p role="status" class="text-muted-foreground mb-1 text-xs">
+          {props.blockedReason}
+        </p>
+      </Show>
+      <Show when={error()}>
+        {(message) => (
+          <p role="alert" class="text-destructive mb-1 text-xs">
+            {message()}
+          </p>
+        )}
+      </Show>
+      <Show when={!props.approvalFocus}>
+        <Show
+          when={!collapsed()}
+          fallback={
+            <Button
+              ref={(element) => {
+                restoreBar = element
+                onCleanup(() => {
+                  if (restoreBar === element) restoreBar = undefined
+                })
+              }}
+              type="button"
+              variant="outline"
+              size="sm"
+              class="w-full justify-start"
+              aria-expanded={false}
+              aria-label="Show the message input"
+              onClick={() => changeCollapsed(false)}
+            >
+              <ChevronsUpDown />
+              <span aria-hidden="true" class="shrink-0">
+                Show the message input
+              </span>
+              <Show when={preview()}>
+                <span aria-hidden="true" class="min-w-0 flex-1 truncate">
+                  {preview()}
+                </span>
+              </Show>
+            </Button>
+          }
+        >
+          <form
+            data-slot="composer-input-box"
+            class="border-input bg-card flex flex-col overflow-hidden rounded-2xl border transition-colors focus-within:border-ring"
+            onSubmit={(event) => {
+              event.preventDefault()
+              void submit()
+            }}
+          >
+            <Show when={props.attachments}>
+              <div data-slot="composer-staged-content">{props.attachments}</div>
+            </Show>
+            <textarea
+              ref={(element) => {
+                field = element
+                onCleanup(() => {
+                  if (field === element) field = undefined
+                })
+              }}
+              data-slot="composer-input"
+              aria-label={props.inputLabel ?? 'Message'}
+              class="field-sizing-content text-foreground placeholder:text-muted-foreground min-h-11 max-h-36 w-full resize-none border-0 bg-transparent px-4 py-3 text-sm outline-none disabled:opacity-50"
+              value={props.value}
+              onInput={(event) => props.onValueChange(event.currentTarget.value)}
+              disabled={props.disabled}
+              readOnly={props.readOnly || pending()}
+              placeholder={props.placeholder ?? 'Write a message…'}
+              rows={1}
+              onCompositionStart={ime.onCompositionStart}
+              onCompositionEnd={ime.onCompositionEnd}
+              onFocus={ime.onFocus}
+              onBlur={ime.onBlur}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape' && error()) {
+                  setError(null)
+                  return
+                }
+                if (event.key !== 'Enter' || event.shiftKey || event.defaultPrevented) return
+                if (ime.claimEnter(event)) {
+                  const selected =
+                    props.busy && (event.metaKey || event.ctrlKey)
+                      ? props.busy.mode === 'steer'
+                        ? 'queue'
+                        : 'steer'
+                      : action()
+                  void submit(selected)
+                }
+              }}
+            />
+            <div
+              data-slot="composer-action-row"
+              class="flex items-center justify-between gap-2 px-2.5 pb-2 pt-0.5"
+            >
+              <div class="flex min-w-0 items-center gap-1">
+                <Show when={props.collapse || props.menuItems}>
+                  <DropdownMenu placement="top-start">
+                    <DropdownMenuTrigger
+                      as={Button}
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="Message input options"
+                    >
+                      <MoreHorizontal />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      onCloseAutoFocus={(event) => {
+                        if (focusTarget) event.preventDefault()
+                      }}
+                    >
+                      {props.menuItems}
+                      <Show when={props.collapse}>
+                        <DropdownMenuItem onSelect={() => changeCollapsed(true)}>
+                          <ChevronsDownUp />
+                          <div class="flex min-w-0 flex-col">
+                            <span>Collapse the message input</span>
+                            <span class="text-muted-foreground text-xs">
+                              Make room to read; keep your draft
+                            </span>
+                          </div>
+                        </DropdownMenuItem>
+                      </Show>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </Show>
+                {props.leadingActions}
+              </div>
+              <div class="flex shrink-0 items-center gap-1">
+                {props.trailingActions}
+                <Show
+                  when={props.busy}
+                  fallback={
+                    <Button
+                      type="submit"
+                      size="icon-sm"
+                      disabled={!canSend()}
+                      aria-label={pending() ? 'Sending message' : 'Send message'}
+                    >
+                      <Show when={pending()} fallback={<ArrowUp />}>
+                        <Spinner size="sm" label={false} />
+                      </Show>
+                    </Button>
+                  }
+                >
+                  {(busy) => (
+                    <BusySendButton
+                      {...busy()}
+                      alternateActionHint={
+                        canSend(busy().mode === 'steer' ? 'queue' : 'steer')
+                          ? 'Ctrl/Cmd+Enter uses the other action'
+                          : undefined
+                      }
+                      disabled={!canSend()}
+                      onFire={() => {
+                        void submit()
+                      }}
+                    />
+                  )}
+                </Show>
+              </div>
+            </div>
+          </form>
+          <Show when={props.context}>
+            <div data-slot="composer-context" class="flex min-w-0 items-center gap-2 pt-1">
+              {props.context}
+            </div>
+          </Show>
+        </Show>
+      </Show>
+    </div>
+  )
+}

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

@@ -1,3 +1,4 @@
+export { ChatComposer, type ChatComposerProps, type ChatComposerControl } from './chat-composer'
 export { BusySendButton, type BusySendMode, type BusySendButtonProps } from './busy-send-button'
 export {
   ConversationAvatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.65.0",
+  "version": "0.66.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",
@@ -86,6 +86,7 @@
     "theme:check": "bun scripts/build-default-theme.ts --check",
     "check:packed-layout": "node scripts/check-packed-layout.mjs",
     "check:packed-consumer": "bun scripts/check-packed-consumer.ts",
+    "check:packed-conversation": "bun scripts/check-packed-conversation.ts",
     "check:packed-layout-renderer": "bun scripts/check-packed-layout-renderer.ts",
     "check:packed-appearance": "bun scripts/check-packed-appearance.ts"
   },

package/registry.json

@@ -1836,6 +1836,11 @@
           "type": "registry:ui",
           "target": "components/conversation/busy-send-button.tsx"
         },
+        {
+          "path": "src/components/conversation/chat-composer.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/chat-composer.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-avatar.tsx",
           "type": "registry:ui",

package/src/components/composites/update-dialog/update-dialog.tsx

@@ -457,7 +457,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
           </Show>
 
           <Show when={notes()}>
-            <section class="flex flex-col gap-2" aria-labelledby="update-release-notes">
+            <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2">
                 <h2 id="update-release-notes" class="text-sm font-semibold">
                   What changed in this release
@@ -477,11 +477,11 @@ export function UpdateDialog(props: UpdateDialogProps) {
               >
                 {notes()}
               </div>
-            </section>
+            </div>
           </Show>
 
           <Show when={changelog()}>
-            <section class="flex flex-col gap-2" aria-labelledby="update-changelog">
+            <div class="flex flex-col gap-2">
               <h2 id="update-changelog" class="text-sm font-semibold">
                 Installed changelog
               </h2>
@@ -499,7 +499,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
               >
                 {changelog()}
               </div>
-            </section>
+            </div>
           </Show>
         </div>