@kitn.ai/ui 0.16.0 → 0.18.0

package/src/components/link-preview.tsx

@@ -10,6 +10,7 @@ import {
   Show,
 } from 'solid-js';
 import { cn } from '../utils/cn';
+import { Skeleton } from '../ui/skeleton';
 import { Link as LinkIcon } from 'lucide-solid';
 import type { CardEvent } from '../primitives/card-contract';
 import {
@@ -153,11 +154,11 @@ export function LinkPreview(props: LinkPreviewProps): JSX.Element {
       >
         <Show when={loading()}>
           {/* Skeleton while the bare-URL fetcher resolves. */}
-          <div class="aspect-[16/9] w-full animate-pulse bg-muted" />
+          <Skeleton class="aspect-[16/9] w-full rounded-none" />
           <div class="space-y-2 p-3">
-            <div class="h-3 w-1/3 animate-pulse rounded bg-muted" />
-            <div class="h-4 w-2/3 animate-pulse rounded bg-muted" />
-            <div class="h-3 w-full animate-pulse rounded bg-muted" />
+            <Skeleton class="h-3 w-1/3" />
+            <Skeleton class="h-4 w-2/3" />
+            <Skeleton class="h-3 w-full" />
           </div>
         </Show>
         <Show when={!loading()}>

package/src/components/markdown.tsx

@@ -11,6 +11,9 @@ export interface MarkdownProps {
   id?: string;
   class?: string;
   codeTheme?: string;
+  /** Optional `::part` name(s) to expose on the rendered root. Lets callers
+   *  (e.g. the message bubble) surface a styleable part through the shadow. */
+  part?: string;
 }
 
 interface ParsedBlock {
@@ -49,13 +52,13 @@ function MarkdownBlock(props: { content: string }) {
 }
 
 function Markdown(props: MarkdownProps) {
-  const [local] = splitProps(props, ['content', 'id', 'class', 'codeTheme']);
+  const [local] = splitProps(props, ['content', 'id', 'class', 'codeTheme', 'part']);
   const config = useChatConfig();
   const blockId = () => local.id ?? createUniqueId();
   const blocks = createMemo(() => parseMarkdownIntoBlocks(local.content));
 
   return (
-    <div class={cn('chat-markdown max-w-none break-words whitespace-normal [&>div:first-child>p:first-child]:mt-0 [&>div:last-child>p:last-child]:mb-0', textClass(config.proseSize()), local.class)}>
+    <div part={local.part} class={cn('chat-markdown max-w-none break-words whitespace-normal [&>div:first-child>p:first-child]:mt-0 [&>div:last-child>p:last-child]:mb-0', textClass(config.proseSize()), local.class)}>
       <For each={blocks()}>
         {(block) => (
           <Switch>

package/src/components/message.tsx

@@ -5,8 +5,11 @@ import { cn } from "../utils/cn";
 import { Markdown } from "./markdown";
 import { Button } from "../ui/button";
 import { actionIcon, BUILTIN_ACTION_LABEL } from "../ui/action-icons";
-import type { ChatMessageAction, CustomAction } from "../elements/chat-types";
+import type { ChatMessageAction, CustomAction, FeedbackVote } from "../elements/chat-types";
 import { useChatConfig, textClass } from "../primitives/chat-config";
+import { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning";
+import { Tool, type ToolPart } from "./tool";
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from "./attachments";
 
 // --- Message ---
 
@@ -17,7 +20,7 @@ export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
 function Message(props: MessageProps) {
   const [local, rest] = splitProps(props, ["children", "class"]);
   return (
-    <div class={cn("flex items-start gap-3", local.class)} {...rest}>
+    <div part="row" class={cn("flex items-start gap-3", local.class)} {...rest}>
       {local.children}
     </div>
   );
@@ -35,6 +38,7 @@ export interface MessageAvatarProps {
 function MessageAvatar(props: MessageAvatarProps) {
   return (
     <div
+      part="avatar"
       class={cn("h-8 w-8 shrink-0 overflow-hidden rounded-full", props.class)}
     >
       <Show
@@ -62,10 +66,14 @@ function MessageAvatar(props: MessageAvatarProps) {
 export interface MessageContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
   children: JSX.Element | string;
   markdown?: boolean;
+  /** `::part` name(s) exposed on the content node. The body passes
+   *  `"bubble content"` so consumers can target either the rounded bubble or the
+   *  text region from outside the shadow boundary. */
+  part?: string;
 }
 
 function MessageContent(props: MessageContentProps) {
-  const [local, rest] = splitProps(props, ["children", "markdown", "class"]);
+  const [local, rest] = splitProps(props, ["children", "markdown", "class", "part"]);
   const config = useChatConfig();
   const classNames = () =>
     cn(
@@ -78,12 +86,12 @@ function MessageContent(props: MessageContentProps) {
     <Show
       when={local.markdown}
       fallback={
-        <div class={classNames()} {...rest}>
+        <div part={local.part} class={classNames()} {...rest}>
           {local.children}
         </div>
       }
     >
-      <Markdown content={local.children as string} class={classNames()} />
+      <Markdown part={local.part} content={local.children as string} class={classNames()} />
     </Show>
   );
 }
@@ -119,6 +127,13 @@ export interface MessageActionBarProps {
   reveal?: 'always' | 'hover';
   /** Fired with the built-in name or the custom action id when a button is clicked. */
   onAction: (id: string) => void;
+  /** The active feedback vote. When `'like'`/`'dislike'` is set, that button is
+   *  marked pressed (filled) and the OTHER vote button animates out. `undefined`
+   *  shows both. Pure/prop-driven so the bar survives re-renders. */
+  activeFeedback?: FeedbackVote;
+  /** When true, the `copy` button shows its emerald check icon instead of the
+   *  copy glyph (cleared by the owner after ~2s). */
+  copied?: boolean;
   class?: string;
 }
 
@@ -130,16 +145,30 @@ function normalizeAction(a: ChatMessageAction | CustomAction) {
   return { id: a.id, label: a.label, Icon: actionIcon(a.icon) };
 }
 
+/** Is this entry one of the two feedback votes? */
+function feedbackVoteOf(a: ChatMessageAction | CustomAction): FeedbackVote | undefined {
+  return a === 'like' || a === 'dislike' ? a : undefined;
+}
+
 /**
  * The shared message action toolbar. Renders one ghost icon button per entry —
  * built-in names pull their label+icon from the curated registry; custom
  * descriptors use their `label` plus `actionIcon(icon)` (label-only when the
  * icon is unknown or absent). `reveal="hover"` makes the bar fade in on the
  * parent `.group`'s hover.
+ *
+ * Pure/prop-driven: feedback (`activeFeedback`) and copy (`copied`) state are
+ * owned by the parent facade and passed in — the bar holds no internal signals,
+ * so it survives the new-array-per-chunk re-renders of a streaming thread. With
+ * a vote active, the chosen `like`/`dislike` button is marked `aria-pressed` +
+ * filled and the other vote button collapses its width (sliding the active thumb
+ * into its place) via a 0fr↔1fr grid transition. The
+ * `copy` button swaps to an emerald check while `copied`.
  */
 function MessageActionBar(props: MessageActionBarProps) {
   return (
     <MessageActions
+      part="actions"
       class={cn(
         'mt-1 flex gap-0',
         props.reveal === 'hover' && 'opacity-0 transition-opacity group-hover:opacity-100',
@@ -150,38 +179,169 @@ function MessageActionBar(props: MessageActionBarProps) {
         {(a) => {
           const item = normalizeAction(a);
           const tooltipText = () => (typeof a !== 'string' && a.tooltip) ? a.tooltip : item.label;
+          const vote = feedbackVoteOf(a);
+          // A vote button is the active one when it matches the resolved vote.
+          const isActiveVote = () => vote !== undefined && props.activeFeedback === vote;
+          // The COPY button reflects the copied check.
+          const isCopy = item.id === 'copy';
+          const showCheck = () => isCopy && props.copied === true;
+
           // Factory (not a shared node): each Show branch gets its own Button so
           // the eager DOM node is never referenced from two places.
           const button = () => (
             <Button
               variant="ghost"
               size="icon-sm"
-              class="rounded-full"
+              class={cn('rounded-full', isActiveVote() && 'text-primary')}
               data-action={item.id}
-              aria-label={item.label}
+              aria-label={showCheck() ? 'Copied' : item.label}
+              aria-pressed={vote !== undefined ? isActiveVote() : undefined}
               onClick={() => props.onAction(item.id)}
             >
-              <Show when={item.Icon} fallback={<span class="px-1 text-xs">{item.label}</span>}>
-                {(Icon) => {
-                  const I = Icon();
-                  return <I class="size-3.5" />;
-                }}
+              <Show
+                when={showCheck()}
+                fallback={
+                  <Show when={item.Icon} fallback={<span class="px-1 text-xs">{item.label}</span>}>
+                    {(Icon) => {
+                      const I = Icon();
+                      return <I class={cn('size-3.5', isActiveVote() && 'fill-current')} />;
+                    }}
+                  </Show>
+                }
+              >
+                <Check class="size-3.5 text-emerald-400" />
               </Show>
             </Button>
           );
           // Icon-only buttons get a tooltip; label-only buttons (text already
           // visible) don't.
-          return (
+          const rendered = () => (
             <Show when={item.Icon} fallback={button()}>
               <Tooltip content={tooltipText()}>{button()}</Tooltip>
             </Show>
           );
+
+          // When the OTHER vote is active, this vote button collapses — its WIDTH
+          // animates to zero via a 0fr↔1fr grid so the remaining thumb slides into
+          // its place, while it fades out; it slides + fades back on un-vote. (Kept
+          // mounted-but-collapsed, not unmounted, so the sibling can slide.) No
+          // vote active → both shown; non-vote entries always render.
+          return (
+            <Show when={vote !== undefined} fallback={rendered()}>
+              {(() => {
+                const show = () => props.activeFeedback === undefined || props.activeFeedback === vote;
+                return (
+                  <span
+                    data-feedback-collapsed={show() ? undefined : ''}
+                    class={cn(
+                      'grid transition-[grid-template-columns,opacity] duration-300 ease-out',
+                      show() ? 'grid-cols-[1fr] opacity-100' : 'grid-cols-[0fr] opacity-0',
+                    )}
+                  >
+                    <span class="min-w-0 overflow-hidden">{rendered()}</span>
+                  </span>
+                );
+              })()}
+            </Show>
+          );
         }}
       </For>
     </MessageActions>
   );
 }
 
+// --- MessageBody ---
+
+export interface MessageBodyProps {
+  /** The message text/markdown. */
+  content: string;
+  /** Optional collapsible reasoning block, rendered above the content. */
+  reasoning?: { text: string; label?: string };
+  /** Tool-call parts, rendered above the content. */
+  tools?: ToolPart[];
+  /** Inline attachment previews, rendered above the content. */
+  attachments?: AttachmentData[];
+  /** Whether this is a user message (right-aligned bubble) vs an assistant
+   *  message (full-width transparent). */
+  isUser: boolean;
+  /** Whether the content renders as markdown. */
+  markdown: boolean;
+  /** Action-bar entries — built-in names and/or custom descriptors. When empty
+   *  the bar is not rendered. */
+  actions?: (ChatMessageAction | CustomAction)[];
+  /** `'always'` (default) keeps the bar visible; `'hover'` reveals it on parent
+   *  `.group` hover. */
+  actionsReveal?: 'always' | 'hover';
+  /** Fired with the built-in name or custom id when an action is clicked. */
+  onAction?: (id: string) => void;
+  /** The currently-active feedback vote, so the bar can mark like/dislike and
+   *  hide the other. */
+  activeFeedback?: FeedbackVote;
+  /** When true, the copy button shows its "copied" check icon. */
+  copied?: boolean;
+  /** INJECT slot projected at the TOP of the body — above the reasoning / tools /
+   *  content. A per-message header: a model-name label, a role + timestamp line.
+   *  In the `<kai-message>` shadow this is `<slot name="before-body" />`. */
+  beforeBody?: JSX.Element;
+  /** INJECT slot projected at the BOTTOM of the body — below the action bar. A
+   *  citation / sources row, a token-cost / latency line. In the `<kai-message>`
+   *  shadow this is `<slot name="after-body" />`. */
+  afterBody?: JSX.Element;
+}
+
+/**
+ * The shared message body: an optional reasoning block, tool calls, inline
+ * attachments, the content bubble, and the action bar — in that order. This is
+ * the single source of truth for how a message renders, consumed by `ChatThread`
+ * (the `<For>` over `messages`), the standalone `<kai-message>` facade, and (in
+ * future) `kai-compare` for each candidate. Pure/prop-driven: all interaction
+ * state (copied, feedback vote) is owned above and passed in.
+ */
+function MessageBody(props: MessageBodyProps) {
+  return (
+    <>
+      {/* before-body (inject): a per-message header above everything else. */}
+      <Show when={props.beforeBody}>{props.beforeBody}</Show>
+      <Show when={props.reasoning}>
+        {(r) => (
+          <Reasoning class="mb-2 w-full">
+            <ReasoningTrigger>{r().label ?? 'Reasoning'}</ReasoningTrigger>
+            <ReasoningContent markdown>{r().text}</ReasoningContent>
+          </Reasoning>
+        )}
+      </Show>
+      <For each={props.tools ?? []}>{(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}</For>
+      <Show when={props.attachments?.length}>
+        <Attachments variant="inline" class={props.isUser ? 'mb-2 justify-end' : 'mb-2'}>
+          <For each={props.attachments!}>
+            {(att) => (<Attachment data={att}><AttachmentPreview /><AttachmentInfo /></Attachment>)}
+          </For>
+        </Attachments>
+      </Show>
+      <MessageContent
+        part="bubble content"
+        markdown={props.markdown}
+        class={props.isUser
+          ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2'
+          : 'bg-transparent p-0'}
+      >
+        {props.content}
+      </MessageContent>
+      <Show when={(props.actions?.length ?? 0) > 0}>
+        <MessageActionBar
+          actions={props.actions!}
+          reveal={props.actionsReveal === 'hover' ? 'hover' : 'always'}
+          activeFeedback={props.activeFeedback}
+          copied={props.copied}
+          onAction={(id) => props.onAction?.(id)}
+        />
+      </Show>
+      {/* after-body (inject): a citation row / cost line below the action bar. */}
+      <Show when={props.afterBody}>{props.afterBody}</Show>
+    </>
+  );
+}
+
 // --- MessageAction ---
 
 export interface MessageActionProps {
@@ -224,4 +384,4 @@ function MessageCopyButton(props: MessageCopyButtonProps) {
   );
 }
 
-export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageAction, MessageCopyButton };
+export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageBody, MessageAction, MessageCopyButton };

package/src/components/model-switcher.tsx

@@ -1,10 +1,21 @@
 import { splitProps, For, Show, createSignal } from 'solid-js';
 import { cn } from '../utils/cn';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '../ui/dropdown';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, type DropdownController } from '../ui/dropdown';
 import { Button } from '../ui/button';
 import type { ModelOption } from '../types';
 
-export interface ModelSwitcherProps { models: ModelOption[]; currentModelId: string; onModelChange: (modelId: string) => void; class?: string; }
+export interface ModelSwitcherProps {
+  models: ModelOption[];
+  currentModelId: string;
+  onModelChange: (modelId: string) => void;
+  class?: string;
+  /** Initial open state of the dropdown (uncontrolled seed). */
+  defaultOpen?: boolean;
+  /** Disable the trigger — click/keyboard no longer open the dropdown. */
+  disabled?: boolean;
+  /** Receive the dropdown's open controller (forwarded from the inner Dropdown). */
+  controllerRef?: (api: DropdownController) => void;
+}
 
 const Chevron = (props: { class?: string }) => (
   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class={props.class}>
@@ -25,7 +36,7 @@ function ModelRow(props: { model: ModelOption; currentModelId: string; onModelCh
 }
 
 export function ModelSwitcher(props: ModelSwitcherProps) {
-  const [local] = splitProps(props, ['models', 'currentModelId', 'onModelChange', 'class']);
+  const [local] = splitProps(props, ['models', 'currentModelId', 'onModelChange', 'class', 'defaultOpen', 'disabled', 'controllerRef']);
   const currentModel = () => local.models.find((m) => m.id === local.currentModelId);
 
   // Ungrouped models list first; grouped models collect under their group name,
@@ -44,7 +55,11 @@ export function ModelSwitcher(props: ModelSwitcherProps) {
 
   return (
     <Show when={local.models.length > 1}>
-      <Dropdown>
+      <Dropdown
+        defaultOpen={local.defaultOpen}
+        disabled={local.disabled}
+        controllerRef={local.controllerRef}
+      >
         <DropdownTrigger as={(triggerProps: any) => (
           <Button variant="ghost" size="sm" class={cn('gap-1 text-meta text-muted-foreground', local.class)} {...triggerProps}>
             {currentModel()?.name ?? local.currentModelId}

package/src/components/prompt-input.tsx

@@ -1,18 +1,21 @@
-import { type JSX, splitProps, createSignal, createContext, useContext, createEffect, on } from 'solid-js';
+import { type JSX, splitProps, createSignal, createContext, useContext } from 'solid-js';
 import { cn } from '../utils/cn';
 import { useChatConfig, textClass } from '../primitives/chat-config';
+import { Composer, type TriggerDef, type ComposerChange } from './composer';
+import type { ComposerDoc } from '../primitives/composer-model';
 
 // --- Context ---
 
 interface PromptInputContextType {
   isLoading: boolean;
-  value: () => string;
+  // A string (controlled text) or a ComposerDoc (a seed that pre-populates pills).
+  value: () => string | ComposerDoc;
   setValue: (value: string) => void;
   maxHeight: number | string;
   onSubmit?: () => void;
   disabled?: boolean;
-  textareaRef: HTMLTextAreaElement | undefined;
-  setTextareaRef: (el: HTMLTextAreaElement) => void;
+  textareaRef: HTMLElement | undefined;
+  setTextareaRef: (el: HTMLElement) => void;
 }
 
 const PromptInputContext = createContext<PromptInputContextType>();
@@ -27,7 +30,8 @@ function usePromptInput() {
 
 export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
   isLoading?: boolean;
-  value?: string;
+  /** String = controlled text; ComposerDoc = a seed that pre-populates pills. */
+  value?: string | ComposerDoc;
   onValueChange?: (value: string) => void;
   maxHeight?: number | string;
   onSubmit?: () => void;
@@ -41,8 +45,8 @@ function PromptInput(props: PromptInputProps) {
     'children', 'disabled', 'class', 'onClick',
   ]);
 
-  const [internalValue, setInternalValue] = createSignal(local.value ?? '');
-  let textareaRef: HTMLTextAreaElement | undefined;
+  const [internalValue, setInternalValue] = createSignal<string | ComposerDoc>(local.value ?? '');
+  let textareaRef: HTMLElement | undefined;
 
   const handleChange = (newValue: string) => {
     setInternalValue(newValue);
@@ -70,13 +74,14 @@ function PromptInput(props: PromptInputProps) {
       }}
     >
       <div
+        data-prompt-input
         onClick={handleClick}
         class={cn(
           // The inner textarea neutralizes its own ring (focus-visible:ring-0),
           // so the FRAME owns the focus affordance: a blue ring whenever a
           // control inside it is focused. Without this the composer had no
           // visible keyboard-focus state.
-          'bg-muted/40 cursor-text rounded-xl p-2 shadow-xs',
+          'bg-surface cursor-text rounded-xl p-2 shadow-xs',
           'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-0',
           local.disabled && 'cursor-not-allowed opacity-60',
           local.class
@@ -93,83 +98,49 @@ function PromptInput(props: PromptInputProps) {
 
 export interface PromptInputTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
   disableAutosize?: boolean;
+  /** Rich entity triggers (`/`, `@`) forwarded to the composer. */
+  triggers?: TriggerDef[];
+  /** Default icon per entity kind (kind → image src), forwarded to the composer. */
+  kindIcons?: Record<string, string>;
+  /** Structured change (doc + entities) from the composer, on every edit. */
+  onComposerChange?: (change: ComposerChange) => void;
 }
 
 function PromptInputTextarea(props: PromptInputTextareaProps) {
-  const [local, rest] = splitProps(props, ['class', 'onKeyDown', 'disableAutosize']);
+  const [local] = splitProps(props, ['class', 'placeholder', 'aria-label', 'triggers', 'kindIcons', 'onComposerChange']);
   const ctx = usePromptInput();
   const config = useChatConfig();
 
-  function adjustHeight(el: HTMLTextAreaElement | undefined) {
-    if (!el || local.disableAutosize) return;
-    el.style.height = 'auto';
-    const maxH = ctx.maxHeight;
-    if (typeof maxH === 'number') {
-      el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
-    } else {
-      el.style.height = `min(${el.scrollHeight}px, ${maxH})`;
-    }
-  }
-
-  function handleRef(el: HTMLTextAreaElement) {
-    ctx.setTextareaRef(el);
-    adjustHeight(el);
-  }
-
-  createEffect(on(
-    () => [ctx.value(), ctx.maxHeight, local.disableAutosize],
-    () => {
-      if (ctx.textareaRef && !local.disableAutosize) {
-        adjustHeight(ctx.textareaRef);
-      }
-    }
-  ));
-
-  function handleInput(e: InputEvent & { currentTarget: HTMLTextAreaElement }) {
-    const el = e.currentTarget;
-    let value = el.value;
-    // Disallow leading whitespace — a prompt can't start with a space or blank
-    // line. Strip it (covers typing a space at the start AND pasting) and keep
-    // the caret in the right place.
-    if (/^\s/.test(value)) {
-      const stripped = value.replace(/^\s+/, '');
-      const removed = value.length - stripped.length;
-      const caret = Math.max(0, (el.selectionStart ?? 0) - removed);
-      el.value = stripped;
-      el.setSelectionRange(caret, caret);
-      value = stripped;
-    }
-    adjustHeight(el);
-    ctx.setValue(value);
-  }
-
-  function handleKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      // A disabled composer is non-interactive: Enter must not submit.
-      if (!ctx.disabled) ctx.onSubmit?.();
-    }
-    if (typeof local.onKeyDown === 'function') {
-      (local.onKeyDown as (e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => void)(e);
-    }
-  }
+  // The editable mirrors the original <textarea>'s classes EXACTLY so swapping in
+  // the contenteditable composer is visually identical. The frame (PromptInput
+  // root) still owns radius/bg/padding/focus-ring; auto-grow is native to a
+  // contenteditable block (capped via max-height on the editable).
+  const editableClass = () =>
+    cn(
+      'text-foreground min-h-[44px] w-full bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 overflow-y-auto whitespace-pre-wrap break-words',
+      textClass(config.proseSize()),
+      local.class,
+    );
 
   return (
-    <textarea
-      ref={handleRef}
+    <Composer
+      bare
       value={ctx.value()}
-      onInput={handleInput}
-      onKeyDown={handleKeyDown}
-      class={cn(
-        // Typed text uses the normal foreground (light/dark), NOT the brand/accent
-        // color — the composer should read as plain text, not tinted.
-        'text-foreground min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-        textClass(config.proseSize()),
-        local.class
-      )}
-      rows={1}
+      placeholder={local.placeholder as string | undefined}
+      ariaLabel={local['aria-label'] as string | undefined}
       disabled={ctx.disabled}
-      {...rest}
+      maxHeight={ctx.maxHeight}
+      editableClass={editableClass()}
+      editableRef={(el) => ctx.setTextareaRef(el)}
+      triggers={local.triggers}
+      kindIcons={local.kindIcons}
+      // Surface the structured change (doc/entities) BEFORE the string value, so a
+      // consumer that enriches its events has the latest doc when value-change fires.
+      // A prompt can't start with whitespace — strip leading whitespace from the
+      // string value (parity with the old textarea); the controlled round-trip
+      // re-renders the editable so the stripped value shows too.
+      onChange={(c) => { local.onComposerChange?.(c); ctx.setValue(c.text.replace(/^\s+/, '')); }}
+      onSubmit={() => { if (!ctx.disabled) ctx.onSubmit?.(); }}
     />
   );
 }