{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"composer","type":"registry:ui","title":"Composer","description":"The input at the bottom of a chat, taken apart: a root that owns the draft and eight parts that read it — a growing textarea, a send button that becomes a stop button, a toolbar, a model picker, an attachment row with its chips, and a completion menu you can mount twice on the same draft for / commands and @ mentions","author":"fancy-ui ","categories":["ai-chat"],"registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"],"files":[{"path":"react/src/components/composer/Composer.tsx","content":"\"use client\";\n\nimport { forwardRef, useRef, useState } from \"react\";\nimport type { FormEvent, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { useConstant, useIsomorphicLayoutEffect } from \"../../internals/dom/ssr\";\nimport { useEventCallback } from \"../../internals/dom/use-event-callback\";\nimport { useSoundCue } from \"../../sound/use-sound\";\nimport type { AttachmentData } from \"../../internals/ai-types\";\nimport { findTokenStart } from \"./caret\";\nimport { ComposerInput } from \"./ComposerInput\";\nimport { ComposerSubmit } from \"./ComposerSubmit\";\nimport { COMPOSER_CONTEXT_KEY } from \"./types\";\nimport type { ComposerContext } from \"./types\";\nimport \"./composer.css\";\n\n/**\n * Props for Composer\n */\nexport interface ComposerProps {\n\t/**\n\t * The draft text. Controlled when passed — report every write through\n\t * `onValueChange`; leave it out and the composer keeps its own copy.\n\t * Cleared by a successful submit.\n\t */\n\tvalue?: string;\n\t/** Called with the draft on every write the composer makes: typing, an insertion, a clear. */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Files riding along with the draft. Controlled when passed — the consumer\n\t * owns uploading them and reports removals back through\n\t * `onAttachmentsChange`.\n\t */\n\tattachments?: AttachmentData[];\n\t/** Called with the remaining attachments whenever the composer drops one. */\n\tonAttachmentsChange?: (attachments: AttachmentData[]) => void;\n\t/** Blocks typing, sending, and attaching. */\n\tdisabled?: boolean;\n\t/** A response is arriving: the send button becomes a stop button. */\n\tstreaming?: boolean;\n\t/** Placeholder for the default input. Ignored once `children` replaces the composition. */\n\tplaceholder?: string;\n\t/** Called with the trimmed draft and a snapshot of the attachments. */\n\tonSubmit?: (payload: { text: string; attachments: AttachmentData[] }) => void;\n\t/** Called when the stop button is pressed while streaming. */\n\tonStop?: () => void;\n\t/** Called with the files handed to `addFiles`. Upload them, then push onto `attachments`. */\n\tonAttach?: (files: File[]) => void;\n\t/** Replaces the default input-and-send-row composition entirely. */\n\tchildren?: ReactNode;\n\t/** An overlay covering the composer — a voice panel, a drop target, a confirmation. */\n\taccessory?: ReactNode;\n\t/** Additional CSS classes */\n\tclassName?: string;\n\t/**\n\t * Plays the matching interface cue through the sound controller. Off by\n\t * default; only audible once the user has enabled sound.\n\t */\n\tsound?: boolean;\n}\n\n/** Shared empty list, so the uncontrolled seed is one allocation for the module. */\nconst NO_ATTACHMENTS: AttachmentData[] = [];\n\n/**\n * The root of the composer compound: it owns the draft and publishes it.\n *\n * The form element arrives through the ref channel rather than a `ref` prop,\n * per PORTING.md — the source declares `ref = $bindable(null)`.\n */\nexport const Composer = forwardRef(function Composer(\n\t{\n\t\tvalue: valueProp,\n\t\tonValueChange,\n\t\tattachments: attachmentsProp,\n\t\tonAttachmentsChange,\n\t\tdisabled = false,\n\t\tstreaming = false,\n\t\tplaceholder,\n\t\tonSubmit,\n\t\tonStop,\n\t\tonAttach,\n\t\tchildren,\n\t\taccessory,\n\t\tclassName,\n\t\tsound = false,\n\t},\n\tforwardedRef\n) {\n\t// The source's `value` is `$bindable(\"\")` and `attachments` is\n\t// `$bindable([])`: a consumer can bind either, or leave it alone and let the\n\t// component keep writing its own copy. React has no such channel, so each\n\t// prop is controlled when it is passed and the local copy takes over when it\n\t// is not. Either way the `on*Change` callback fires with the same payload.\n\tconst playCue = useSoundCue(sound);\n\n\tconst [uncontrolledValue, setUncontrolledValue] = useState(\"\");\n\tconst value = valueProp !== undefined ? valueProp : uncontrolledValue;\n\n\tconst [uncontrolledAttachments, setUncontrolledAttachments] =\n\t\tuseState(NO_ATTACHMENTS);\n\tconst attachments = attachmentsProp !== undefined ? attachmentsProp : uncontrolledAttachments;\n\n\t// Written by ComposerInput through the context, read by insertText's caret\n\t// arithmetic. A composer with no input part keeps it null and falls back to\n\t// appending at the end of the draft.\n\t//\n\t// The ref holds the element so a write lands the instant it is made — the\n\t// context object every part reads is rebuilt per render, but this accessor\n\t// pair is not, so a part that stored it (or a test that captured it) keeps\n\t// reaching the live element. The state beside it exists only to re-render\n\t// the parts that render off the element's arrival: the completion menus,\n\t// which are nothing at all until an input has registered one.\n\tconst textareaElRef = useRef(null);\n\tconst [, setRegisteredTextarea] = useState(null);\n\tconst textareaRef = useConstant(() => ({\n\t\tget current(): HTMLTextAreaElement | null {\n\t\t\treturn textareaElRef.current;\n\t\t},\n\t\tset current(next: HTMLTextAreaElement | null) {\n\t\t\ttextareaElRef.current = next;\n\t\t\tsetRegisteredTextarea(next);\n\t\t},\n\t}));\n\n\t// Where insertText wants the caret once its write has reached the DOM, and\n\t// the render that guarantees the effect below gets a chance to put it there\n\t// even when the consumer ignores `onValueChange`. The counterpart of the\n\t// source's `void tick().then(...)`.\n\tconst pendingCaretRef = useRef<{ el: HTMLTextAreaElement; caret: number } | null>(null);\n\tconst [, setCaretNonce] = useState(0);\n\n\tfunction applyValue(next: string) {\n\t\tif (valueProp === undefined) setUncontrolledValue(next);\n\t\tonValueChange?.(next);\n\t}\n\n\tfunction applyAttachments(next: AttachmentData[]) {\n\t\tif (attachmentsProp === undefined) setUncontrolledAttachments(next);\n\t\tonAttachmentsChange?.(next);\n\t}\n\n\t// Every command is identity-stable and always runs the latest render's\n\t// logic: a part holds one of these across its whole life (a menu's document\n\t// listener, an input's mount registration) and must never call a closure\n\t// over a draft that has moved on.\n\tconst submit = useEventCallback(() => {\n\t\t// A composer that is off or already busy sends nothing, whatever the draft\n\t\t// says — the send button is disabled in both states, but Enter and a\n\t\t// programmatic `submit()` reach here too.\n\t\tif (disabled || streaming) return;\n\t\tconst text = value.trim();\n\t\tif (text === \"\" && attachments.length === 0) return;\n\t\t// With nobody listening there is nowhere for the draft to go, and clearing\n\t\t// it would throw away text the reader has no way of getting back.\n\t\tif (!onSubmit) return;\n\t\tplayCue(\"press\");\n\t\t// A copy, so a consumer stashing the payload does not end up holding the\n\t\t// live list it is about to mutate.\n\t\tonSubmit({ text, attachments: [...attachments] });\n\t\t// The text is ours to clear; the attachments belong to the consumer, who\n\t\t// alone knows whether an upload is still in flight.\n\t\tapplyValue(\"\");\n\t});\n\n\tconst stop = useEventCallback(() => {\n\t\tif (!streaming) return;\n\t\t// No handler, no interruption — the cue must not announce a stop that\n\t\t// cannot happen (ComposerSubmit disables itself in that state too).\n\t\tif (onStop) playCue(\"press\");\n\t\tonStop?.();\n\t});\n\n\tconst setValue = useEventCallback((next: string) => {\n\t\tapplyValue(next);\n\t});\n\n\tconst insertText = useEventCallback((text: string, replaceTriggerToken = false) => {\n\t\t// A composer that is off or already busy takes no dictation either — the\n\t\t// textarea is readonly in both states, and a menu writing through the\n\t\t// context would be the one way around that.\n\t\tif (disabled || streaming) return;\n\t\tconst current = value;\n\t\tconst el = textareaElRef.current;\n\t\tconst rawEnd = el?.selectionEnd;\n\t\tconst end = typeof rawEnd === \"number\" ? rawEnd : current.length;\n\t\tconst rawStart = el?.selectionStart;\n\t\tconst selectionStart = typeof rawStart === \"number\" ? Math.min(rawStart, end) : end;\n\n\t\t// The menus' own definition of a token, not a second one that could drift\n\t\t// from it: what a menu matched is exactly what a completion overwrites.\n\t\tconst trigger = replaceTriggerToken ? findTokenStart(current, end) : -1;\n\t\tconst start = trigger >= 0 ? trigger : selectionStart;\n\t\tconst trailing = current.slice(end);\n\n\t\t// Completing a token leaves the caret ready for the next word; a plain\n\t\t// insert splices exactly what it was handed, and nothing more.\n\t\tconst needsSpace = trigger >= 0 && !/\\s$/.test(text) && !/^\\s/.test(trailing);\n\t\tconst insertion = needsSpace ? `${text} ` : text;\n\t\tconst caret = start + insertion.length;\n\n\t\tapplyValue(`${current.slice(0, start)}${insertion}${trailing}`);\n\n\t\tif (!el) return;\n\t\t// The caret can only be placed once the value has reached the DOM, so it\n\t\t// waits for the commit. Focus comes back with it: the insertion was almost\n\t\t// certainly triggered from a menu that stole it.\n\t\tpendingCaretRef.current = { el, caret };\n\t\tsetCaretNonce((nonce) => nonce + 1);\n\t});\n\n\tconst addFiles = useEventCallback((files: File[]) => {\n\t\tif (disabled || files.length === 0) return;\n\t\tonAttach?.(files);\n\t});\n\n\tconst removeAttachment = useEventCallback((id: string) => {\n\t\tapplyAttachments(attachments.filter((attachment) => attachment.id !== id));\n\t});\n\n\t// No dependency list: the caret restore has to run on the commit that carried\n\t// the insertion, whichever render that turns out to be. It disarms itself.\n\t// A layout effect, so the first painted frame after an insertion already has\n\t// the caret where the source's `tick()` puts it (contract §4).\n\tuseIsomorphicLayoutEffect(() => {\n\t\tconst pending = pendingCaretRef.current;\n\t\tif (!pending) return;\n\t\tpendingCaretRef.current = null;\n\t\tif (!pending.el.isConnected) return;\n\t\tpending.el.focus();\n\t\tpending.el.setSelectionRange(pending.caret, pending.caret);\n\t});\n\n\t// Rebuilt every render on purpose: the rebuild is what re-renders the parts\n\t// reading the draft off it. Never memoise it.\n\tconst context: ComposerContext = {\n\t\tvalue: { current: value },\n\t\tattachments: { current: attachments },\n\t\tdisabled,\n\t\tstreaming,\n\t\tstoppable: typeof onStop === \"function\",\n\t\tsound,\n\t\t// Declared read-only on ComposerContext so no other part writes it; the\n\t\t// setter exists for ComposerInput alone, which registers its element here\n\t\t// on mount. See the note at the top of types.ts.\n\t\ttextareaRef,\n\t\tsubmit,\n\t\tstop,\n\t\tsetValue,\n\t\tinsertText,\n\t\taddFiles,\n\t\tremoveAttachment,\n\t};\n\n\tfunction handleSubmit(event: FormEvent) {\n\t\t// Nothing here navigates: the draft leaves through onSubmit.\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{children ?? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t)}\n\n\t\t\t\t{accessory ? (\n\t\t\t\t\t
{accessory}
\n\t\t\t\t) : null}\n\t\t\t\n\t\t\n\t);\n});\n","type":"registry:ui","target":"@ui/fancy/components/composer/Composer.tsx"},{"path":"react/src/components/composer/ComposerAttachment.tsx","content":"\"use client\";\n\nimport { useContext } from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { useSoundCue } from \"../../sound/use-sound\";\nimport type { AttachmentData } from \"../../internals/ai-types\";\nimport { COMPOSER_CONTEXT_KEY } from \"./types\";\nimport \"./composer-attachment.css\";\n\n/**\n * Props for ComposerAttachment\n */\nexport interface ComposerAttachmentProps {\n\t/** The file to show: its name, and whatever the upload knows so far. */\n\tattachment: AttachmentData;\n\t/** Called with the attachment id instead of the composer's own removal. */\n\tonRemove?: (id: string) => void;\n\t/** Additional CSS classes */\n\tclassName?: string;\n}\n\n/**\n * Powers of 1024, stopping at megabytes: a chip is not where gigabytes belong,\n * and a four-digit megabyte count still reads faster than a unit nobody\n * expects next to a file name.\n */\nconst UNITS = [\"B\", \"KB\", \"MB\"] as const;\n\n/** Bytes as a chip-sized caption. Anything unmeasurable prints nothing at all. */\nfunction formatSize(bytes: number | undefined): string {\n\tif (bytes === undefined || !Number.isFinite(bytes) || bytes < 0) return \"\";\n\tlet scaled = bytes;\n\tlet unit = 0;\n\twhile (scaled >= 1024 && unit < UNITS.length - 1) {\n\t\tscaled /= 1024;\n\t\tunit += 1;\n\t}\n\t// Bytes are whole things; the scaled units keep one decimal, and a trailing\n\t// `.0` is noise at this size.\n\tconst rounded = unit === 0 ? Math.round(scaled) : Math.round(scaled * 10) / 10;\n\treturn `${rounded} ${UNITS[unit]}`;\n}\n\n/** One file riding along with the draft: its name, its size, its upload, its cross. */\nexport function ComposerAttachment({ attachment, onRemove, className }: ComposerAttachmentProps) {\n\t// Undefined when the chip is used outside a Composer: it then relies on\n\t// `onRemove` alone, and goes inert without one rather than throwing.\n\tconst composer = useContext(COMPOSER_CONTEXT_KEY);\n\tconst playCue = useSoundCue(composer?.sound);\n\n\tconst status = attachment.status;\n\tconst uploading = status === \"uploading\";\n\tconst failed = status === \"error\";\n\t// Out-of-range progress is a consumer bug, not a reason to paint a bar past\n\t// the end of the chip.\n\tconst percent = Math.round(Math.min(1, Math.max(0, attachment.progress ?? 0)) * 100);\n\tconst size = formatSize(attachment.size);\n\tconst removeLabel = `Remove ${attachment.name}`;\n\n\t// A remove button with nothing to call is a lie, and so is a live one inside a\n\t// composer that has been switched off.\n\tconst removable = onRemove !== undefined || composer !== undefined;\n\tconst removeDisabled = !removable || (composer?.disabled ?? false);\n\n\tfunction remove() {\n\t\t// The native `disabled` attribute already blocks a real click, but a\n\t\t// synthetic dispatch — in a test, or from any other caller — walks\n\t\t// straight past it, so the handler guards again rather than trusting the\n\t\t// attribute alone (see Button's `handleClick`).\n\t\tif (removeDisabled) return;\n\t\tplayCue(\"press\");\n\t\t// The prop wins outright: a consumer that passes one is running its own\n\t\t// upload bookkeeping and will drop the entry itself.\n\t\tif (onRemove) {\n\t\t\tonRemove(attachment.id);\n\t\t\treturn;\n\t\t}\n\t\tcomposer?.removeAttachment(attachment.id);\n\t}\n\n\treturn (\n\t\t\n\t\t\t{attachment.previewUrl ? (\n\t\t\t\t// Decorative: the file name sits right beside it and says the same thing.\n\t\t\t\t\n\t\t\t) : (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\n\t\t\t\n\t\t\t\t{attachment.name}\n\t\t\t\n\n\t\t\t{size ? (\n\t\t\t\t\n\t\t\t\t\t{size}\n\t\t\t\t\n\t\t\t) : null}\n\n\t\t\t{/* The tint is the only other thing that says so, and it says it to no one. */}\n\t\t\t{failed ? Upload failed : null}\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t{uploading ? (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t) : null}\n\t\t
\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/composer/ComposerAttachment.tsx"},{"path":"react/src/components/composer/ComposerAttachments.tsx","content":"\"use client\";\n\nimport { useContext, useRef } from \"react\";\nimport type { ChangeEvent, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { ComposerAttachment } from \"./ComposerAttachment\";\nimport { COMPOSER_CONTEXT_KEY } from \"./types\";\nimport \"./composer-attachments.css\";\n\n/**\n * Props for ComposerAttachments\n */\nexport interface ComposerAttachmentsProps {\n\t/** Replaces the default chips. The add button and its file input stay. */\n\tchildren?: ReactNode;\n\t/** Accessible name and tooltip for the add button. */\n\taddLabel?: string;\n\t/** `accept` for the file picker, e.g. `\"image/*,.pdf\"`. Omitted by default. */\n\taccept?: string;\n\t/** Whether one pick may carry several files. */\n\tmultiple?: boolean;\n\t/** Additional CSS classes */\n\tclassName?: string;\n}\n\n/** The chip row and the paperclip that fills it. */\nexport function ComposerAttachments({\n\tchildren,\n\taddLabel = \"Attach files\",\n\taccept,\n\tmultiple = true,\n\tclassName,\n}: ComposerAttachmentsProps) {\n\t// Undefined when the row is used outside a Composer: there is then nothing to\n\t// list and nowhere to send a pick, so it renders nothing rather than throwing.\n\tconst composer = useContext(COMPOSER_CONTEXT_KEY);\n\n\t// Only ever reached imperatively, from the add button's click, so a plain ref\n\t// is enough — no hook is keyed on the node's existence (convention C-1).\n\tconst inputRef = useRef(null);\n\n\tconst attachments = composer?.attachments.current ?? [];\n\tconst disabled = composer?.disabled ?? false;\n\t// An empty row inside a composer still earns its line — that is where the\n\t// paperclip lives. An empty row outside one is a button that could not work.\n\tconst empty = composer === undefined && attachments.length === 0;\n\n\tfunction pick() {\n\t\t// The real picker is the hidden input; the button exists to be named,\n\t\t// focusable, and styled like the rest of the composer chrome.\n\t\tinputRef.current?.click();\n\t}\n\n\tfunction handleChange(event: ChangeEvent) {\n\t\tconst el = event.currentTarget;\n\t\tconst files = Array.from(el.files ?? []);\n\t\t// Cleared before anything else: re-picking the same file fires no second\n\t\t// change event while the input still holds the first pick, and a consumer\n\t\t// that rejects an upload would be stuck with it.\n\t\tel.value = \"\";\n\t\tif (files.length === 0) return;\n\t\tcomposer?.addFiles(files);\n\t}\n\n\t// Two uploads of the same file can arrive carrying the same id, and a duplicate\n\t// key is a crash — so the second and later sightings of an id take an\n\t// occurrence suffix. The first sighting keeps the bare id, which is what holds\n\t// a chip's identity steady when a chip ahead of it is removed: keying on the\n\t// position would change every key after the gap and replay the enter keyframe\n\t// down the whole tail of the row.\n\tconst seen = new Map();\n\tconst keyed = attachments.map((attachment) => {\n\t\tconst occurrence = seen.get(attachment.id) ?? 0;\n\t\tseen.set(attachment.id, occurrence + 1);\n\t\treturn {\n\t\t\tattachment,\n\t\t\tkey: occurrence === 0 ? attachment.id : `${attachment.id}#${occurrence}`,\n\t\t};\n\t});\n\n\tif (empty) return null;\n\n\treturn (\n\t\t
\n\t\t\t{children ??\n\t\t\t\tkeyed.map(({ attachment, key }) => (\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t))}\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\n\t\t\t{/* Out of the tab order and out of the accessibility tree: the button above\n\t\t\t is the control, and two names for one picker is one too many. */}\n\t\t\t\n\t\t
\n\t);\n}\n","type":"registry:ui","target":"@ui/fancy/components/composer/ComposerAttachments.tsx"},{"path":"react/src/components/composer/ComposerCommandMenu.tsx","content":"\"use client\";\n\nimport { forwardRef, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { useComposedRefs } from \"../../internals/dom/use-composed-refs\";\nimport { useElementRef } from \"../../internals/dom/use-element-ref\";\nimport { useEventCallback } from \"../../internals/dom/use-event-callback\";\nimport { useLiveRef } from \"../../internals/dom/use-live-ref\";\nimport { useFancyId } from \"../../internals/use-id\";\nimport { useSoundCue } from \"../../sound/use-sound\";\nimport { useFloat } from \"../../internals/use-float\";\nimport type { FloatRect } from \"../../internals/float\";\nimport type { CommandItemData } from \"../../internals/ai-types\";\nimport { findTriggerToken, measureCaretRect } from \"./caret\";\nimport { COMPOSER_CONTEXT_KEY } from \"./types\";\nimport \"./composer-command-menu.css\";\n\n/**\n * Props for ComposerCommandMenu\n */\nexport interface ComposerCommandMenuProps {\n\t/** The character that opens the menu — `/` for commands, `@` for mentions. */\n\ttrigger: string;\n\t/** Everything the menu can offer, before filtering. */\n\titems: CommandItemData[];\n\t/**\n\t * Handles a picked item. Defaults to completing the trigger token with the\n\t * item's label. `query` is what had been typed after the trigger.\n\t */\n\tonSelect?: (\n\t\titem: CommandItemData,\n\t\tctx: { insertText: (text: string, replaceTriggerToken?: boolean) => void; query: string }\n\t) => void;\n\t/** Decides which items survive the query. Defaults to a case-insensitive label/description match. */\n\tfilter?: (item: CommandItemData, query: string) => boolean;\n\t/** Shown in place of the rows when nothing matches. */\n\tempty?: ReactNode;\n\t/** How many matches the menu shows at once. */\n\tmaxItems?: number;\n\t/** What this menu offers: its accessible name, and the noun it is counted in. */\n\tlabel?: string;\n\t/** Additional CSS classes */\n\tclassName?: string;\n}\n\n/** Anchors the float before the caret has ever been measured. */\nconst ORIGIN: FloatRect = { x: 0, y: 0, width: 0, height: 0 };\n\nfunction defaultFilter(item: CommandItemData, text: string): boolean {\n\tif (text === \"\") return true;\n\tconst needle = text.toLowerCase();\n\treturn (\n\t\titem.label.toLowerCase().includes(needle) ||\n\t\t(item.description?.toLowerCase().includes(needle) ?? false)\n\t);\n}\n\n/**\n * Take the key away from everything else.\n *\n * `preventDefault` alone is not enough: the input's Enter-to-send handler never\n * asks whether the event was already handled, and it is registered further up\n * the tree, so the event has to stop travelling.\n */\nfunction consume(event: KeyboardEvent) {\n\tevent.preventDefault();\n\tevent.stopPropagation();\n}\n\n/**\n * A completion list that opens on a trigger token in the composer's draft.\n *\n * The menu element arrives through the ref channel rather than a `ref` prop,\n * per PORTING.md — the source declares `ref = $bindable(null)`. It is null\n * whenever the menu is closed, because it is not rendered then.\n */\nexport const ComposerCommandMenu = forwardRef(\n\tfunction ComposerCommandMenu(\n\t\t{ trigger, items, onSelect, filter, empty, maxItems = 8, label = \"Commands\", className },\n\t\tforwardedRef\n\t) {\n\t\t// Undefined outside a Composer: the menu then has no textarea to watch and\n\t\t// renders nothing at all, rather than throwing on a missing provider.\n\t\tconst composer = useContext(COMPOSER_CONTEXT_KEY);\n\t\tconst playCue = useSoundCue(composer?.sound);\n\n\t\tconst uid = useFancyId();\n\t\tconst listId = `${uid}-list`;\n\n\t\tconst textarea = composer?.textareaRef.current ?? null;\n\t\t// A composer that is off or streaming takes no dictation: completing into it\n\t\t// would write through a textarea the reader cannot type in.\n\t\tconst inert = (composer?.disabled ?? false) || (composer?.streaming ?? false);\n\n\t\tconst [open, setOpen] = useState(false);\n\t\tconst [query, setQuery] = useState(\"\");\n\t\t/** Where the open token starts, or -1. This is what \"the same token\" means. */\n\t\tconst [tokenStart, setTokenStart] = useState(-1);\n\t\t/** The token Escape dismissed, so it does not spring back on the next keystroke. */\n\t\tconst [dismissedStart, setDismissedStart] = useState(-1);\n\t\tconst [activeIndex, setActiveIndex] = useState(0);\n\n\t\t// The node, not a ref: the float below is keyed on it, and the menu only\n\t\t// exists while it is open — exactly the conditional node a `[]`-deps effect\n\t\t// reading a ref would miss (convention C-1). Composed above the early\n\t\t// return, never inside the JSX after it (convention C-2).\n\t\tconst [menuEl, menuRef] = useElementRef();\n\t\tconst ref = useComposedRefs(forwardedRef, menuRef);\n\n\t\tconst matches = items.filter((item) => (filter ?? defaultFilter)(item, query));\n\t\tconst visible = matches.slice(0, Math.max(0, maxItems));\n\t\t// The stored index is a wish; this is what it can actually be once the query\n\t\t// has shortened the list under it.\n\t\tconst active = visible.length === 0 ? -1 : Math.min(activeIndex, visible.length - 1);\n\n\t\t// A getter, not a rect measured once when the token opened: the float\n\t\t// re-reads its anchor on every scroll and resize, and a frozen rect would\n\t\t// send it repositioning against where the caret used to be.\n\t\tconst anchor = useMemo(() => {\n\t\t\tconst el = textarea;\n\t\t\tconst start = tokenStart;\n\t\t\treturn (): FloatRect => (el && start >= 0 ? measureCaretRect(el, start) : ORIGIN);\n\t\t}, [textarea, tokenStart]);\n\t\tuseFloat(menuEl, { anchor, placement: \"top-start\", offset: 6 });\n\n\t\t/**\n\t\t * The menu never takes focus — the reader is typing, and a completion list\n\t\t * that steals the caret would break the very sentence it is completing. That\n\t\t * rules out the usual combobox wiring, which needs `role`, `aria-expanded`,\n\t\t * `aria-controls` and `aria-activedescendant` on the input itself, and this\n\t\t * component is in no position to put them there: the textarea belongs to\n\t\t * `ComposerInput`, and reaching across to rewrite another component's\n\t\t * attributes from a sibling is exactly the kind of spooky action a compound\n\t\t * component should not do (it would also fight that component's own renders).\n\t\t *\n\t\t * So the announcement is made out loud instead, through a live region that is\n\t\t * always in the DOM — a region inserted at the same moment as its text usually\n\t\t * goes unread. The tradeoff is real: a screen-reader user hears how many\n\t\t * matches there are and that the arrows do something, but cannot hear each row\n\t\t * as it becomes active. Pointer and sighted-keyboard users lose nothing.\n\t\t *\n\t\t * The rows still carry stable ids, so a consumer who owns their own input part\n\t\t * — and may therefore write to it — can read the menu through `ref`, point\n\t\t * `aria-activedescendant` at the selected row, and have the full pattern.\n\t\t */\n\t\tconst announcement = (() => {\n\t\t\tif (!open) return \"\";\n\t\t\tconst noun = label.toLowerCase();\n\t\t\tconst word = visible.length === 1 && noun.endsWith(\"s\") ? noun.slice(0, -1) : noun;\n\t\t\treturn `${visible.length} ${word} available, use the arrow keys`;\n\t\t})();\n\n\t\tconst close = useEventCallback(() => {\n\t\t\tsetOpen(false);\n\t\t\tsetTokenStart(-1);\n\t\t});\n\n\t\t/**\n\t\t * Re-read the draft and decide whether the menu belongs on screen.\n\t\t *\n\t\t * Called from the textarea's own events rather than from an effect: the caret\n\t\t * is not reactive state, so nothing would wake an effect when it moves.\n\t\t */\n\t\tconst sync = useEventCallback(() => {\n\t\t\tconst el = textarea;\n\t\t\tif (!el || inert) {\n\t\t\t\tclose();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst end = el.selectionEnd ?? el.value.length;\n\t\t\t// Mid-selection there is no caret to complete at, only a range.\n\t\t\tif ((el.selectionStart ?? end) !== end) {\n\t\t\t\tclose();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst token = findTriggerToken(el.value, end, trigger);\n\t\t\tif (!token) {\n\t\t\t\t// Outside any token, a dismissal has nothing left to apply to: coming\n\t\t\t\t// back to the same spot should open the menu again.\n\t\t\t\tsetDismissedStart(-1);\n\t\t\t\tclose();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (token.start === dismissedStart) {\n\t\t\t\tsetOpen(false);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// A different token, or a different query within it, starts the list again\n\t\t\t// from the top — the row that was active may not even be in it any more.\n\t\t\tif (token.start !== tokenStart || token.query !== query) setActiveIndex(0);\n\t\t\t// Anchored to the trigger character, not to the caret: the menu then holds\n\t\t\t// still while the query is typed instead of crawling along with it. The\n\t\t\t// anchor getter above reads this position live.\n\t\t\tsetTokenStart(token.start);\n\t\t\tsetQuery(token.query);\n\t\t\tsetOpen(true);\n\t\t});\n\n\t\tconst move = useEventCallback((delta: number) => {\n\t\t\tconst count = visible.length;\n\t\t\tif (count === 0) return;\n\t\t\tconst from = active < 0 ? 0 : active;\n\t\t\tsetActiveIndex((from + delta + count) % count);\n\t\t});\n\n\t\tconst select = useEventCallback((item: CommandItemData | undefined) => {\n\t\t\tif (!item) return;\n\t\t\t// The menu's own open/close stay silent — it opens from keystrokes and\n\t\t\t// closes on blur/Escape, not a dismissal the reader triggered — so a pick\n\t\t\t// is the only cue this component ever plays.\n\t\t\tplayCue(\"select\");\n\t\t\tconst insertText = (text: string, replaceTriggerToken?: boolean) =>\n\t\t\t\tcomposer?.insertText(text, replaceTriggerToken);\n\t\t\tif (onSelect) onSelect(item, { insertText, query });\n\t\t\t// The trailing space is part of the completion: it closes the token, which\n\t\t\t// is also what stops the menu from immediately reopening on it.\n\t\t\telse insertText(`${item.label} `, true);\n\t\t\tsetDismissedStart(-1);\n\t\t\tclose();\n\t\t});\n\n\t\tconst handleKeydown = useEventCallback((event: KeyboardEvent) => {\n\t\t\tif (!open) return;\n\t\t\t// Mid-composition these keys belong to the IME, which is picking a candidate\n\t\t\t// of its own.\n\t\t\tif (event.isComposing) return;\n\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t// Dismissed for this token only. Typing on in it keeps the menu away;\n\t\t\t\t// starting another one brings it back.\n\t\t\t\tsetDismissedStart(tokenStart);\n\t\t\t\tclose();\n\t\t\t\tconsume(event);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tmove(1);\n\t\t\t\tconsume(event);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"ArrowUp\") {\n\t\t\t\tmove(-1);\n\t\t\t\tconsume(event);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (event.key === \"Enter\" || event.key === \"Tab\") {\n\t\t\t\t// Nothing to complete: Enter goes back to meaning send.\n\t\t\t\tif (active < 0) return;\n\t\t\t\tselect(visible[active]);\n\t\t\t\tconsume(event);\n\t\t\t}\n\t\t});\n\n\t\tconst handleBlur = useEventCallback(() => {\n\t\t\tclose();\n\t\t});\n\n\t\t// Wired here rather than with `on*` props because the element belongs to\n\t\t// another component: this part only ever gets handed the node through the\n\t\t// context, and it must let go of it just as cleanly. Every handler is\n\t\t// identity-stable, so the list of deps is the node and nothing else — one\n\t\t// registration per element, whatever the menu's own state does.\n\t\tuseEffect(() => {\n\t\t\tconst el = textarea;\n\t\t\tif (!el) {\n\t\t\t\tsetOpen(false);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst doc = el.ownerDocument;\n\t\t\tconst handleSelectionChange = () => {\n\t\t\t\t// `selectionchange` only fires on the document, for every selection on the\n\t\t\t\t// page: the guard is what makes it mean \"the caret moved in *our* input\",\n\t\t\t\t// and it is the only way to notice arrow keys and clicks that move the\n\t\t\t\t// caret without changing a character.\n\t\t\t\tif (doc.activeElement === el) sync();\n\t\t\t};\n\n\t\t\tel.addEventListener(\"input\", sync);\n\t\t\tel.addEventListener(\"keydown\", handleKeydown);\n\t\t\tel.addEventListener(\"blur\", handleBlur);\n\t\t\tdoc.addEventListener(\"selectionchange\", handleSelectionChange);\n\t\t\treturn () => {\n\t\t\t\tel.removeEventListener(\"input\", sync);\n\t\t\t\tel.removeEventListener(\"keydown\", handleKeydown);\n\t\t\t\tel.removeEventListener(\"blur\", handleBlur);\n\t\t\t\tdoc.removeEventListener(\"selectionchange\", handleSelectionChange);\n\t\t\t};\n\t\t}, [textarea, sync, handleKeydown, handleBlur]);\n\n\t\t// Reads the switches, writes only the menu: a composer that goes dark or\n\t\t// starts streaming mid-query takes the open menu down with it.\n\t\tuseEffect(() => {\n\t\t\tif (inert) close();\n\t\t}, [inert, close]);\n\n\t\t// The draft can also change under the menu without a keystroke — a submit\n\t\t// clearing it, a consumer restoring one — and neither fires `input`. Reading\n\t\t// the draft here is what wakes the token search on those writes; `open` is\n\t\t// read off a live ref rather than a dependency, so the effect answers to the\n\t\t// draft alone and never to the state `sync` itself sets.\n\t\tconst openLive = useLiveRef(open);\n\t\tconst draft = composer?.value.current;\n\t\tuseEffect(() => {\n\t\t\tvoid draft;\n\t\t\tif (openLive.current) sync();\n\t\t}, [draft, openLive, sync]);\n\n\t\tif (!textarea) return null;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{/*\n\t\t\t\t\tOnly in the DOM while it is open: a closed completion list is not a\n\t\t\t\t\thidden one, it does not exist, and neither its rows nor its live\n\t\t\t\t\tgeometry should cost anything while the reader is just typing.\n\t\t\t\t*/}\n\t\t\t\t{open ? (\n\t\t\t\t\t\n\t\t\t\t\t\t{visible.length > 0 ? (\n\t\t\t\t\t\t\t/* Suffixed with the index: two items may arrive carrying the same id. */\n\t\t\t\t\t\t\tvisible.map((item, index) => (\n\t\t\t\t\t\t\t\t event.preventDefault()}\n\t\t\t\t\t\t\t\t\tonClick={() => select(item)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{item.description ? (\n\t\t\t\t\t\t\t\t\t\t/*\n\t\t\t\t\t\t\t\t\t\t\t`text-foreground/70` rather than `text-muted-foreground`: this\n\t\t\t\t\t\t\t\t\t\t\ttext sits on the menu's own opaque surface, and on the tinted\n\t\t\t\t\t\t\t\t\t\t\tactive row above it, where the muted token drops under 4.5:1.\n\t\t\t\t\t\t\t\t\t\t\tSee the note on `.ft-active` for the arithmetic.\n\t\t\t\t\t\t\t\t\t\t*/\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{item.hint ? (\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.hint}\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t) : empty ? (\n\t\t\t\t\t\t\tempty\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t

No matches.

\n\t\t\t\t\t\t)}\n\t\t\t\t\t\n\t\t\t\t) : null}\n\n\t\t\t\t{/* Mounted whether or not the menu is: see the note on `announcement`. */}\n\t\t\t\t
\n\t\t\t\t\t{announcement}\n\t\t\t\t
\n\t\t\t\n\t\t);\n\t}\n);\n","type":"registry:ui","target":"@ui/fancy/components/composer/ComposerCommandMenu.tsx"},{"path":"react/src/components/composer/ComposerInput.tsx","content":"\"use client\";\n\nimport { forwardRef, useContext, useEffect, useRef } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, KeyboardEvent } from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { useElementRef } from \"../../internals/dom/use-element-ref\";\nimport { useComposedRefs } from \"../../internals/dom/use-composed-refs\";\nimport { COMPOSER_CONTEXT_KEY } from \"./types\";\nimport \"./composer-input.css\";\n\n/**\n * Props for ComposerInput\n */\ninterface ComposerInputOwnProps {\n\t/** Shown while the draft is empty. */\n\tplaceholder?: string;\n\t/** Height, in lines, before anything has been typed. Also the SSR height. */\n\trows?: number;\n\t/** Height ceiling, in lines. Past it the textarea scrolls instead of growing. */\n\tmaxRows?: number;\n\t/** Take focus on mount. */\n\tautofocus?: boolean;\n\t/** Additional CSS classes */\n\tclassName?: string;\n}\n\n/**\n * Native `