feat(prompt-input): add PromptInput with token highlighting

PromptInput is a fully controlled form. PromptInputTextarea draws
@mention and /command tokens on an aria-hidden mirror beneath transparent
native text, grows through field-sizing with a measured fallback, and
never submits during IME composition. usePromptInput drives
PromptInputSuggestions from the keyboard, and PromptInputSubmit turns
Send into Stop while a reply is running.

Author: pratikbuilds

e2e/fixtures.tsx

@@ -21,6 +21,12 @@ import {
   type ChatMessage,
   type ConversationScrollPolicy,
   useConversation,
+  PromptInput,
+  PromptInputSubmit,
+  PromptInputSuggestions,
+  PromptInputTextarea,
+  type PromptInputStatus,
+  type PromptToken,
 } from "@corbits/react-ui";
 import {
   CommandPalette,
@@ -427,6 +433,69 @@ function ConversationGlideScenario() {
   );
 }
 
+const PROMPT_TOKENS: PromptToken[] = [
+  { id: "ada", kind: "mention", token: "@Ada", detail: "Research agent" },
+  { id: "adam", kind: "mention", token: "@Adam", detail: "Review agent" },
+  { id: "brief", kind: "command", token: "/brief", detail: "Summarize" },
+];
+
+/** Records every submit with its text, and every stop. "Reply" puts the
+ * prompt into the streaming state a host is in while an agent answers. */
+function Prompt() {
+  const [value, setValue] = useState("");
+  const [status, setStatus] = useState<PromptInputStatus>("ready");
+  const { log, record } = useEventLog();
+  return (
+    <div style={{ width: 480, paddingTop: 160 }}>
+      <PromptInput
+        value={value}
+        onValueChange={setValue}
+        onSubmit={() => record(`submit:${value}`)}
+        tokens={PROMPT_TOKENS}
+        status={status}
+      >
+        <PromptInputSuggestions />
+        <PromptInputTextarea />
+        <PromptInputSubmit
+          onStop={() => {
+            record("stop");
+            setStatus("ready");
+          }}
+        />
+      </PromptInput>
+      <Button onClick={() => setStatus("streaming")}>Reply</Button>
+      {log}
+    </div>
+  );
+}
+
+/** A host that sends attachments with the text: "Attach file" toggles one,
+ * and with it attached there is something to send even with no text. */
+function PromptWithAttachment() {
+  const [value, setValue] = useState("");
+  const [attached, setAttached] = useState(false);
+  const { log, record } = useEventLog();
+  return (
+    <div style={{ width: 480 }}>
+      <PromptInput
+        value={value}
+        onValueChange={setValue}
+        onSubmit={() =>
+          record(`submit:${value}${attached ? "+attachment" : ""}`)
+        }
+        canSubmit={value.trim() !== "" || attached}
+      >
+        <PromptInputTextarea />
+        <PromptInputSubmit />
+      </PromptInput>
+      <Button aria-pressed={attached} onClick={() => setAttached(!attached)}>
+        Attach file
+      </Button>
+      {log}
+    </div>
+  );
+}
+
 export const scenarios: Record<string, () => ReactNode> = {
   smoke: () => <Button>Ready</Button>,
   "approval-card": () => <Approval state="idle" />,
@@ -459,4 +528,6 @@ export const scenarios: Record<string, () => ReactNode> = {
   "conversation-settle": () => <ConversationScenario policy="settle" />,
   "conversation-stick": () => <ConversationScenario policy="stick" />,
   "conversation-glide": () => <ConversationGlideScenario />,
+  "prompt-input": () => <Prompt />,
+  "prompt-input-attachment": () => <PromptWithAttachment />,
 };