fancy-ui-react 0.2.0

package/dist/components/composer/ComposerAttachment.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+/* empty css                        */
+const UNITS = ["B", "KB", "MB"];
+function formatSize(bytes) {
+  if (bytes === void 0 || !Number.isFinite(bytes) || bytes < 0) return "";
+  let scaled = bytes;
+  let unit = 0;
+  while (scaled >= 1024 && unit < UNITS.length - 1) {
+    scaled /= 1024;
+    unit += 1;
+  }
+  const rounded = unit === 0 ? Math.round(scaled) : Math.round(scaled * 10) / 10;
+  return `${rounded} ${UNITS[unit]}`;
+}
+function ComposerAttachment({ attachment, onRemove, className }) {
+  const composer = useContext(COMPOSER_CONTEXT_KEY);
+  const playCue = useSoundCue(composer?.sound);
+  const status = attachment.status;
+  const uploading = status === "uploading";
+  const failed = status === "error";
+  const percent = Math.round(Math.min(1, Math.max(0, attachment.progress ?? 0)) * 100);
+  const size = formatSize(attachment.size);
+  const removeLabel = `Remove ${attachment.name}`;
+  const removable = onRemove !== void 0 || composer !== void 0;
+  const removeDisabled = !removable || (composer?.disabled ?? false);
+  function remove() {
+    if (removeDisabled) return;
+    playCue("press");
+    if (onRemove) {
+      onRemove(attachment.id);
+      return;
+    }
+    composer?.removeAttachment(attachment.id);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ft-composer-attachment relative flex max-w-full min-w-0 items-center gap-1.5 py-1 pr-1 pl-1.5 text-xs",
+        className,
+        failed && "ft-failed"
+      ),
+      "data-status": status,
+      "aria-busy": uploading ? "true" : void 0,
+      children: [
+        attachment.previewUrl ? (
+          // Decorative: the file name sits right beside it and says the same thing.
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "ft-composer-attachment-thumb size-5 shrink-0 rounded object-cover",
+              src: attachment.previewUrl,
+              alt: ""
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-3.5 shrink-0",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z" }),
+              /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ft-composer-attachment-name max-w-32 truncate", title: attachment.name, children: attachment.name }),
+        size ? /* @__PURE__ */ jsx("span", { className: "ft-composer-attachment-size text-foreground/70 shrink-0 tabular-nums", children: size }) : null,
+        failed ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Upload failed" }) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ft-composer-attachment-remove hover:bg-muted focus-visible:ring-ring inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40",
+            disabled: removeDisabled,
+            "aria-label": removeLabel,
+            title: removeLabel,
+            onClick: remove,
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "size-3",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                ]
+              }
+            )
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ft-composer-attachment-track",
+            role: "progressbar",
+            "aria-label": `Uploading ${attachment.name}`,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": percent,
+            children: /* @__PURE__ */ jsx("span", { className: "ft-composer-attachment-bar", style: { width: `${percent}%` } })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  ComposerAttachment
+};

package/dist/components/composer/ComposerAttachments.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+/**
+ * Props for ComposerAttachments
+ */
+export interface ComposerAttachmentsProps {
+    /** Replaces the default chips. The add button and its file input stay. */
+    children?: ReactNode;
+    /** Accessible name and tooltip for the add button. */
+    addLabel?: string;
+    /** `accept` for the file picker, e.g. `"image/*,.pdf"`. Omitted by default. */
+    accept?: string;
+    /** Whether one pick may carry several files. */
+    multiple?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** The chip row and the paperclip that fills it. */
+export declare function ComposerAttachments({ children, addLabel, accept, multiple, className, }: ComposerAttachmentsProps): import("react").JSX.Element | null;

package/dist/components/composer/ComposerAttachments.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { cn } from "../../utils.js";
+import { ComposerAttachment } from "./ComposerAttachment.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+/* empty css                         */
+function ComposerAttachments({
+  children,
+  addLabel = "Attach files",
+  accept,
+  multiple = true,
+  className
+}) {
+  const composer = useContext(COMPOSER_CONTEXT_KEY);
+  const inputRef = useRef(null);
+  const attachments = composer?.attachments.current ?? [];
+  const disabled = composer?.disabled ?? false;
+  const empty = composer === void 0 && attachments.length === 0;
+  function pick() {
+    inputRef.current?.click();
+  }
+  function handleChange(event) {
+    const el = event.currentTarget;
+    const files = Array.from(el.files ?? []);
+    el.value = "";
+    if (files.length === 0) return;
+    composer?.addFiles(files);
+  }
+  const seen = /* @__PURE__ */ new Map();
+  const keyed = attachments.map((attachment) => {
+    const occurrence = seen.get(attachment.id) ?? 0;
+    seen.set(attachment.id, occurrence + 1);
+    return {
+      attachment,
+      key: occurrence === 0 ? attachment.id : `${attachment.id}#${occurrence}`
+    };
+  });
+  if (empty) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ft-composer-attachments flex flex-wrap items-center gap-1.5", className), children: [
+    children ?? keyed.map(({ attachment, key }) => /* @__PURE__ */ jsx("div", { className: "ft-composer-attachment-slot flex min-w-0", children: /* @__PURE__ */ jsx(ComposerAttachment, { attachment }) }, key)),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ft-composer-attach text-foreground/70 hover:bg-muted hover:text-foreground focus-visible:ring-ring inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40",
+        disabled,
+        "aria-label": addLabel,
+        title: addLabel,
+        onClick: pick,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "size-4",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        className: "ft-composer-file-input",
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onChange: handleChange
+      }
+    )
+  ] });
+}
+export {
+  ComposerAttachments
+};

package/dist/components/composer/ComposerCommandMenu.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import type { CommandItemData } from "../../internals/ai-types.js";
+/**
+ * Props for ComposerCommandMenu
+ */
+export interface ComposerCommandMenuProps {
+    /** The character that opens the menu — `/` for commands, `@` for mentions. */
+    trigger: string;
+    /** Everything the menu can offer, before filtering. */
+    items: CommandItemData[];
+    /**
+     * Handles a picked item. Defaults to completing the trigger token with the
+     * item's label. `query` is what had been typed after the trigger.
+     */
+    onSelect?: (item: CommandItemData, ctx: {
+        insertText: (text: string, replaceTriggerToken?: boolean) => void;
+        query: string;
+    }) => void;
+    /** Decides which items survive the query. Defaults to a case-insensitive label/description match. */
+    filter?: (item: CommandItemData, query: string) => boolean;
+    /** Shown in place of the rows when nothing matches. */
+    empty?: ReactNode;
+    /** How many matches the menu shows at once. */
+    maxItems?: number;
+    /** What this menu offers: its accessible name, and the noun it is counted in. */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A completion list that opens on a trigger token in the composer's draft.
+ *
+ * The menu element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the source declares `ref = $bindable(null)`. It is null
+ * whenever the menu is closed, because it is not rendered then.
+ */
+export declare const ComposerCommandMenu: import("react").ForwardRefExoticComponent<ComposerCommandMenuProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/composer/ComposerCommandMenu.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useState, useMemo, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { useFloat } from "../../internals/use-float.js";
+import { measureCaretRect, findTriggerToken } from "./caret.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+/* empty css                          */
+const ORIGIN = { x: 0, y: 0, width: 0, height: 0 };
+function defaultFilter(item, text) {
+  if (text === "") return true;
+  const needle = text.toLowerCase();
+  return item.label.toLowerCase().includes(needle) || (item.description?.toLowerCase().includes(needle) ?? false);
+}
+function consume(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+const ComposerCommandMenu = forwardRef(
+  function ComposerCommandMenu2({ trigger, items, onSelect, filter, empty, maxItems = 8, label = "Commands", className }, forwardedRef) {
+    const composer = useContext(COMPOSER_CONTEXT_KEY);
+    const playCue = useSoundCue(composer?.sound);
+    const uid = useFancyId();
+    const listId = `${uid}-list`;
+    const textarea = composer?.textareaRef.current ?? null;
+    const inert = (composer?.disabled ?? false) || (composer?.streaming ?? false);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [tokenStart, setTokenStart] = useState(-1);
+    const [dismissedStart, setDismissedStart] = useState(-1);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [menuEl, menuRef] = useElementRef();
+    const ref = useComposedRefs(forwardedRef, menuRef);
+    const matches = items.filter((item) => (filter ?? defaultFilter)(item, query));
+    const visible = matches.slice(0, Math.max(0, maxItems));
+    const active = visible.length === 0 ? -1 : Math.min(activeIndex, visible.length - 1);
+    const anchor = useMemo(() => {
+      const el = textarea;
+      const start = tokenStart;
+      return () => el && start >= 0 ? measureCaretRect(el, start) : ORIGIN;
+    }, [textarea, tokenStart]);
+    useFloat(menuEl, { anchor, placement: "top-start", offset: 6 });
+    const announcement = (() => {
+      if (!open) return "";
+      const noun = label.toLowerCase();
+      const word = visible.length === 1 && noun.endsWith("s") ? noun.slice(0, -1) : noun;
+      return `${visible.length} ${word} available, use the arrow keys`;
+    })();
+    const close = useEventCallback(() => {
+      setOpen(false);
+      setTokenStart(-1);
+    });
+    const sync = useEventCallback(() => {
+      const el = textarea;
+      if (!el || inert) {
+        close();
+        return;
+      }
+      const end = el.selectionEnd ?? el.value.length;
+      if ((el.selectionStart ?? end) !== end) {
+        close();
+        return;
+      }
+      const token = findTriggerToken(el.value, end, trigger);
+      if (!token) {
+        setDismissedStart(-1);
+        close();
+        return;
+      }
+      if (token.start === dismissedStart) {
+        setOpen(false);
+        return;
+      }
+      if (token.start !== tokenStart || token.query !== query) setActiveIndex(0);
+      setTokenStart(token.start);
+      setQuery(token.query);
+      setOpen(true);
+    });
+    const move = useEventCallback((delta) => {
+      const count = visible.length;
+      if (count === 0) return;
+      const from = active < 0 ? 0 : active;
+      setActiveIndex((from + delta + count) % count);
+    });
+    const select = useEventCallback((item) => {
+      if (!item) return;
+      playCue("select");
+      const insertText = (text, replaceTriggerToken) => composer?.insertText(text, replaceTriggerToken);
+      if (onSelect) onSelect(item, { insertText, query });
+      else insertText(`${item.label} `, true);
+      setDismissedStart(-1);
+      close();
+    });
+    const handleKeydown = useEventCallback((event) => {
+      if (!open) return;
+      if (event.isComposing) return;
+      if (event.key === "Escape") {
+        setDismissedStart(tokenStart);
+        close();
+        consume(event);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        move(1);
+        consume(event);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        move(-1);
+        consume(event);
+        return;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        if (active < 0) return;
+        select(visible[active]);
+        consume(event);
+      }
+    });
+    const handleBlur = useEventCallback(() => {
+      close();
+    });
+    useEffect(() => {
+      const el = textarea;
+      if (!el) {
+        setOpen(false);
+        return;
+      }
+      const doc = el.ownerDocument;
+      const handleSelectionChange = () => {
+        if (doc.activeElement === el) sync();
+      };
+      el.addEventListener("input", sync);
+      el.addEventListener("keydown", handleKeydown);
+      el.addEventListener("blur", handleBlur);
+      doc.addEventListener("selectionchange", handleSelectionChange);
+      return () => {
+        el.removeEventListener("input", sync);
+        el.removeEventListener("keydown", handleKeydown);
+        el.removeEventListener("blur", handleBlur);
+        doc.removeEventListener("selectionchange", handleSelectionChange);
+      };
+    }, [textarea, sync, handleKeydown, handleBlur]);
+    useEffect(() => {
+      if (inert) close();
+    }, [inert, close]);
+    const openLive = useLiveRef(open);
+    const draft = composer?.value.current;
+    useEffect(() => {
+      if (openLive.current) sync();
+    }, [draft, openLive, sync]);
+    if (!textarea) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      open ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          id: listId,
+          role: "listbox",
+          "aria-label": label,
+          className: cn("ft-composer-command-menu flex flex-col text-sm", className),
+          children: visible.length > 0 ? (
+            /* Suffixed with the index: two items may arrive carrying the same id. */
+            visible.map((item, index) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                id: `${listId}-${index}`,
+                tabIndex: -1,
+                "aria-selected": index === active,
+                className: cn(
+                  "ft-composer-command flex w-full items-baseline gap-2 rounded-md px-2 py-1.5 text-left",
+                  index === active && "ft-active"
+                ),
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => select(item),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "ft-composer-command-label min-w-0 truncate font-medium", children: item.label }),
+                  item.description ? (
+                    /*
+                    	`text-foreground/70` rather than `text-muted-foreground`: this
+                    	text sits on the menu's own opaque surface, and on the tinted
+                    	active row above it, where the muted token drops under 4.5:1.
+                    	See the note on `.ft-active` for the arithmetic.
+                    */
+                    /* @__PURE__ */ jsx("span", { className: "text-foreground/70 min-w-0 flex-1 truncate text-xs", children: item.description })
+                  ) : null,
+                  item.hint ? /* @__PURE__ */ jsx("span", { className: "text-foreground/70 ml-auto flex-none font-mono text-xs", children: item.hint }) : null
+                ]
+              },
+              `${item.id}#${index}`
+            ))
+          ) : empty ? empty : /* @__PURE__ */ jsx("p", { className: "text-foreground/70 px-2 py-1.5 text-xs italic", children: "No matches." })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "sr-only", role: "status", "aria-live": "polite", children: announcement })
+    ] });
+  }
+);
+export {
+  ComposerCommandMenu
+};

package/dist/components/composer/ComposerInput.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Props for ComposerInput
+ */
+export interface ComposerInputProps {
+    /** Shown while the draft is empty. */
+    placeholder?: string;
+    /** Height, in lines, before anything has been typed. Also the SSR height. */
+    rows?: number;
+    /** Height ceiling, in lines. Past it the textarea scrolls instead of growing. */
+    maxRows?: number;
+    /** Take focus on mount. */
+    autofocus?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * The composer's textarea: auto-growing, Enter-to-send, registered into the root.
+ *
+ * The textarea arrives through the ref channel rather than a `ref` prop, per
+ * PORTING.md — the source declares `ref = $bindable(null)`.
+ */
+export declare const ComposerInput: import("react").ForwardRefExoticComponent<ComposerInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/composer/ComposerInput.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { COMPOSER_CONTEXT_KEY } from "./types.js";
+/* empty css                   */
+const FALLBACK_LINE_HEIGHT = 20;
+const NORMAL_LINE_RATIO = 1.5;
+function lines(count, fallback) {
+  const whole = Math.floor(count);
+  return Number.isFinite(whole) && whole >= 1 ? whole : fallback;
+}
+function px(input) {
+  const parsed = Number.parseFloat(input);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+const ComposerInput = forwardRef(
+  function ComposerInput2({ placeholder = "Message…", rows = 1, maxRows = 8, autofocus = false, className }, forwardedRef) {
+    const composer = useContext(COMPOSER_CONTEXT_KEY);
+    const [node, setNode] = useElementRef();
+    const ref = useComposedRefs(forwardedRef, setNode);
+    const value = composer?.value.current ?? "";
+    const minLines = lines(rows, 1);
+    const maxLines = Math.max(lines(maxRows, 8), minLines);
+    const locked = (composer?.disabled ?? false) || (composer?.streaming ?? false);
+    const metricsRef = useRef(null);
+    function measure(el) {
+      if (metricsRef.current) return metricsRef.current;
+      const style = getComputedStyle(el);
+      const declared = Number.parseFloat(style.lineHeight);
+      const fontSize = Number.parseFloat(style.fontSize);
+      const line = Number.isFinite(declared) && declared > 0 ? declared : Number.isFinite(fontSize) && fontSize > 0 ? fontSize * NORMAL_LINE_RATIO : FALLBACK_LINE_HEIGHT;
+      const padding = px(style.paddingTop) + px(style.paddingBottom);
+      const border = style.boxSizing === "border-box" ? px(style.borderTopWidth) + px(style.borderBottomWidth) : 0;
+      metricsRef.current = { line, extra: padding + border };
+      return metricsRef.current;
+    }
+    function grow() {
+      const el = node;
+      if (!el) return;
+      const { line, extra } = measure(el);
+      el.style.height = "auto";
+      const content = el.scrollHeight;
+      const min = minLines * line + extra;
+      const max = maxLines * line + extra;
+      const height = Math.min(Math.max(content, min), max);
+      el.style.height = `${height}px`;
+      el.style.overflowY = content > max ? "auto" : "hidden";
+    }
+    function handleInput(event) {
+      composer?.setValue(event.currentTarget.value);
+      grow();
+    }
+    function handleKeydown(event) {
+      if (event.key !== "Enter" || event.shiftKey) return;
+      if (event.nativeEvent.isComposing) return;
+      event.preventDefault();
+      composer?.submit();
+    }
+    useEffect(() => {
+      if (!node) return;
+      const slot = composer?.textareaRef;
+      if (slot) slot.current = node;
+      if (autofocus) node.focus();
+      grow();
+      return () => {
+        if (slot && slot.current === node) slot.current = null;
+      };
+    }, [node]);
+    useEffect(() => {
+      grow();
+    }, [value, node, minLines, maxLines]);
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: cn(
+          "ft-composer-input placeholder:text-muted-foreground w-full resize-none bg-transparent px-2 py-1.5 text-sm leading-relaxed outline-none",
+          className
+        ),
+        rows: minLines,
+        placeholder,
+        value: composer ? value : void 0,
+        readOnly: locked,
+        "aria-disabled": locked ? "true" : void 0,
+        onChange: handleInput,
+        onKeyDown: handleKeydown
+      }
+    );
+  }
+);
+export {
+  ComposerInput
+};

package/dist/components/composer/ComposerModelPicker.d.ts

@@ -0,0 +1,32 @@
+import type { ModelOptionData } from "../../internals/ai-types.js";
+/**
+ * Props for ComposerModelPicker
+ */
+export interface ComposerModelPickerProps {
+    /** The models on offer. An empty list leaves the picker inert. */
+    models: ModelOptionData[];
+    /**
+     * The selected model's id. Controlled when passed — report the pick back
+     * through `onValueChange`; leave it out and the picker keeps its own copy.
+     * Falls back to the first model.
+     */
+    value?: string;
+    /** Called with every pick the picker makes, changed or not — the write-back channel. */
+    onValueChange?: (id: string) => void;
+    /** Called with the id of a newly picked model. Silent when the pick changes nothing. */
+    onChange?: (id: string) => void;
+    /** Accessible name for the control and its menu. */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * The model switcher that lives on the composer's bottom rail.
+ *
+ * Focus lives on the listbox while the menu is open — the element carrying
+ * `aria-activedescendant` has to be the one holding focus — and returns to the
+ * trigger when the menu closes on Escape or on a pick. The menu is only in the
+ * DOM while it is open, and the one document listener it needs is added on open
+ * and taken back on close.
+ */
+export declare function ComposerModelPicker({ models, value: valueProp, onValueChange, onChange, label, className, }: ComposerModelPickerProps): import("react").JSX.Element;