panelui-web 0.4.0 → 0.5.0

package/dist/components/menu/index.js

@@ -0,0 +1,188 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Menu — a list of actions that opens from a button.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger render={<Button variant="outline" />}>Options</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onClick={rename}>
+ *       <PencilIcon /> Rename <Menu.Shortcut>⌘R</Menu.Shortcut>
+ *     </Menu.Item>
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger><ShareIcon /> Share</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>Copy link</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *     <Menu.Separator />
+ *     <Menu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Pinned</Menu.CheckboxItem>
+ *     <Menu.Item variant="destructive">Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ *
+ * ## One row shape
+ *
+ * Every row is the same: an icon, the label, and whatever belongs at the end
+ * of it, a shortcut, a badge, a check or the chevron of a submenu. Icons are
+ * written as the row's first child and sized by the row, so rows with and
+ * without them still line up when every row in a group has one.
+ *
+ * ## Submenus
+ *
+ * A submenu opens to the side when its row is hovered or pressed, or with
+ * the right arrow key, and closes with the left one. The pointer can cross
+ * diagonally to it without closing it on the way.
+ *
+ * ## Items that stay open
+ *
+ * Pressing an item closes the menu. A check item or a radio item keeps it
+ * open, so several can be switched in a row; pass `closeOnClick` to change
+ * either.
+ */
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { tv } from 'tailwind-variants';
+const menuVariants = tv({
+    slots: {
+        positioner: 'z-50 outline-none',
+        popup: [
+            'min-w-48 origin-(--transform-origin) rounded-xl border bg-popover p-1 text-popover-foreground shadow-lg outline-none',
+            'max-h-(--available-height) overflow-y-auto [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]',
+            'transition-[opacity,scale] duration-150 ease-out',
+            'data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',
+            'motion-reduce:transition-none',
+        ],
+        item: [
+            // The label never wraps; a description beside it is cut short instead.
+            'flex min-h-8 cursor-default items-center gap-2.5 whitespace-nowrap rounded-lg px-2 py-1.5 text-sm outline-none select-none',
+            'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            // A submenu's row stays lit while its submenu is open, so it is clear what it belongs to.
+            'data-popup-open:bg-accent',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+            '[&>svg:first-child]:text-muted-foreground data-highlighted:[&>svg:first-child]:text-current',
+        ],
+        end: 'ms-auto flex items-center ps-3',
+        check: 'ms-auto flex size-4 items-center justify-center ps-0 text-foreground',
+        description: 'min-w-0 truncate text-muted-foreground',
+        shortcut: 'ms-auto ps-3 text-xs tracking-wide text-muted-foreground',
+        badge: 'ms-auto inline-flex h-5 items-center gap-1 rounded-md bg-muted px-1.5 text-xs font-medium tabular-nums text-muted-foreground [&_svg:not([class*=size-])]:size-3',
+        chevron: 'ms-auto text-muted-foreground',
+        group: 'flex flex-col',
+        groupLabel: 'px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground',
+        separator: 'mx-2 my-1 h-px bg-border',
+    },
+    variants: {
+        variant: {
+            default: {},
+            destructive: {
+                item: 'text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive [&>svg:first-child]:text-destructive',
+            },
+        },
+    },
+});
+/** Holds whether the menu is open. Takes `open`/`onOpenChange`, `defaultOpen` and `modal`. */
+function MenuRoot(props) {
+    return _jsx(BaseMenu.Root, { ...props });
+}
+MenuRoot.displayName = 'Menu';
+/** The button that opens the menu. `render` draws it as another element, such as a `Button`. */
+function MenuTrigger(props) {
+    return _jsx(BaseMenu.Trigger, { "data-slot": "menu-trigger", ...props });
+}
+MenuTrigger.displayName = 'Menu.Trigger';
+/** The list, opened in a layer over the page. It moves to the other side when there is no room. */
+function MenuContent({ side = 'bottom', align = 'start', sideOffset = 6, alignOffset, container, anchor, className, ...props }) {
+    const slots = menuVariants();
+    return (_jsx(BaseMenu.Portal, { container: container, children: _jsx(BaseMenu.Positioner, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, anchor: anchor, className: slots.positioner(), children: _jsx(BaseMenu.Popup, { "data-slot": "menu-content", className: slots.popup({ className }), ...props }) }) }));
+}
+MenuContent.displayName = 'Menu.Content';
+/** One action. Put an icon first, then the label, then a `Menu.Shortcut` or `Menu.Badge` if it has one. */
+function MenuItem({ variant, className, ...props }) {
+    return _jsx(BaseMenu.Item, { "data-slot": "menu-item", className: menuVariants({ variant }).item({ className }), ...props });
+}
+MenuItem.displayName = 'Menu.Item';
+const Check = () => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+/** An item that is switched on and off, with a check at its end while on. The menu stays open. */
+function MenuCheckboxItem({ className, children, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.CheckboxItem, { "data-slot": "menu-checkbox-item", className: slots.item({ className }), ...props, children: [children, _jsx("span", { className: slots.check(), children: _jsx(BaseMenu.CheckboxItemIndicator, { className: "flex", children: _jsx(Check, {}) }) })] }));
+}
+MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
+/** Radio items of which one is chosen. Takes `value` and `onValueChange`. */
+function MenuRadioGroup({ className, ...props }) {
+    return _jsx(BaseMenu.RadioGroup, { "data-slot": "menu-radio-group", className: menuVariants().group({ className }), ...props });
+}
+MenuRadioGroup.displayName = 'Menu.RadioGroup';
+/** One choice in a radio group, with a check at its end while chosen. */
+function MenuRadioItem({ className, children, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.RadioItem, { "data-slot": "menu-radio-item", className: slots.item({ className }), ...props, children: [children, _jsx("span", { className: slots.check(), children: _jsx(BaseMenu.RadioItemIndicator, { className: "flex", children: _jsx(Check, {}) }) })] }));
+}
+MenuRadioItem.displayName = 'Menu.RadioItem';
+/** A submenu: a `Menu.SubTrigger` row and the `Menu.SubContent` it opens. */
+function MenuSub(props) {
+    return _jsx(BaseMenu.SubmenuRoot, { ...props });
+}
+MenuSub.displayName = 'Menu.Sub';
+/** The row that opens a submenu, with a chevron at its end. It opens on hover as well as on press. */
+function MenuSubTrigger({ className, children, end, openOnHover = true, delay = 80, ...props }) {
+    const slots = menuVariants();
+    return (_jsxs(BaseMenu.SubmenuTrigger, { "data-slot": "menu-sub-trigger", openOnHover: openOnHover, delay: delay, className: slots.item({ className }), ...props, children: [children, _jsxs("span", { className: slots.end(), children: [end, _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.chevron({ className: end ? 'ms-2' : undefined }), children: _jsx("path", { d: "m9 18 6-6-6-6" }) })] })] }));
+}
+MenuSubTrigger.displayName = 'Menu.SubTrigger';
+/** The submenu's list, opened beside its row with the first item level with it. */
+function MenuSubContent({ side = 'inline-end', align = 'start', sideOffset = 6, alignOffset = -5, ...props }) {
+    return _jsx(MenuContent, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, ...props });
+}
+MenuSubContent.displayName = 'Menu.SubContent';
+/** Items that belong together, under a `Menu.GroupLabel`. */
+function MenuGroup({ className, ...props }) {
+    return _jsx(BaseMenu.Group, { "data-slot": "menu-group", className: menuVariants().group({ className }), ...props });
+}
+MenuGroup.displayName = 'Menu.Group';
+/** The heading of a group. Screen readers announce the group by it. */
+function MenuGroupLabel({ className, ...props }) {
+    return _jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: menuVariants().groupLabel({ className }), ...props });
+}
+MenuGroupLabel.displayName = 'Menu.GroupLabel';
+/** A rule between groups of items. */
+function MenuSeparator({ className, ...props }) {
+    return _jsx("div", { role: "separator", "data-slot": "menu-separator", className: menuVariants().separator({ className }), ...props });
+}
+MenuSeparator.displayName = 'Menu.Separator';
+/** What an item does, in quieter words after its label. */
+function MenuDescription({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menu-description", className: menuVariants().description({ className }), ...props });
+}
+MenuDescription.displayName = 'Menu.Description';
+/** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
+function MenuShortcut({ className, ...props }) {
+    return _jsx("kbd", { "data-slot": "menu-shortcut", className: menuVariants().shortcut({ className }), ...props });
+}
+MenuShortcut.displayName = 'Menu.Shortcut';
+/** A small count or flag at an item's end: how many need attention, or that something is new. */
+function MenuBadge({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menu-badge", className: menuVariants().badge({ className }), ...props });
+}
+MenuBadge.displayName = 'Menu.Badge';
+export const Menu = Object.assign(MenuRoot, {
+    Trigger: MenuTrigger,
+    Content: MenuContent,
+    Item: MenuItem,
+    CheckboxItem: MenuCheckboxItem,
+    RadioGroup: MenuRadioGroup,
+    RadioItem: MenuRadioItem,
+    Sub: MenuSub,
+    SubTrigger: MenuSubTrigger,
+    SubContent: MenuSubContent,
+    Group: MenuGroup,
+    GroupLabel: MenuGroupLabel,
+    Separator: MenuSeparator,
+    Description: MenuDescription,
+    Shortcut: MenuShortcut,
+    Badge: MenuBadge,
+});
+export { MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, };

package/dist/components/planet/index.js

@@ -47,7 +47,10 @@ import { tv } from 'tailwind-variants';
 import { LAND, LAND_COLUMNS, LAND_ROWS } from './land.js';
 const planetVariants = tv({
     slots: {
-        root: 'flex w-full flex-col items-center gap-4 text-foreground',
+        // `isolate` keeps the markers' depth ordering inside the planet. Each marker
+        // sets its own z-index, and without a stacking context of its own those
+        // numbers compete with the page's sidebars and menus, and win.
+        root: 'isolate flex w-full flex-col items-center gap-4 text-foreground',
         // `touch-pan-y` leaves a vertical swipe to the page. A globe that traps
         // the scroll it sits in is worse than one that only turns sideways.
         globe: 'relative aspect-square w-full max-w-md cursor-grab touch-pan-y select-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background active:cursor-grabbing',

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

@@ -0,0 +1,414 @@
+/**
+ * Prompt — where a message to an assistant is written, with what goes with
+ * it: files, a model, tools, and a button that sends it.
+ *
+ * ```tsx
+ * <Prompt onSubmit={({ text, files }) => send(text, files)} status={status} onStop={stop}>
+ *   <Prompt.Field>
+ *     <Prompt.Attachments />
+ *     <Prompt.Textarea placeholder="Ask anything" />
+ *     <Prompt.Footer>
+ *       <Prompt.Tools>
+ *         <Prompt.Menu>
+ *           <Prompt.AttachItem />
+ *         </Prompt.Menu>
+ *         <Prompt.Model items={models} defaultValue="swift" />
+ *       </Prompt.Tools>
+ *       <Prompt.Submit />
+ *     </Prompt.Footer>
+ *   </Prompt.Field>
+ *   <Prompt.Status>Reading the files</Prompt.Status>
+ * </Prompt>
+ * ```
+ *
+ * ## A field in a tray
+ *
+ * The field is a raised card. What is said about it, rather than in it, sits
+ * in bands that the card overlaps: `Prompt.Banner` above for something to do
+ * first, `Prompt.Status` below for what the answer is doing, and
+ * `Prompt.Context` below, inset, for where the message is going. A band opens
+ * and closes with its `open` prop, folding under the card, so a band can come
+ * and go without the page jumping by more than its own height.
+ *
+ * ## Sending
+ *
+ * Enter sends and Shift+Enter starts a new line; Enter while a character is
+ * still being composed is left to the input method. `onSubmit` is handed the
+ * text, trimmed, and the files, and the field is cleared. Nothing is sent
+ * while it is empty or while `status` is `submitted` or `streaming`.
+ *
+ * ## One button, four jobs
+ *
+ * `Prompt.Submit` sends. While the answer is on its way it stops it instead,
+ * calling `onStop`, with a ring turning round it. Given `onVoice`, it is a
+ * voice button while the field is empty, and its bars move while `listening`.
+ * The icons cross-fade in place, so the button never moves under the pointer.
+ *
+ * ## Files
+ *
+ * Files arrive from `Prompt.AttachItem` in the menu or `Prompt.Attach`, from
+ * ⌘U or Ctrl+U in the field, from a paste, or dropped on the field.
+ * `accept` and `maxFiles` decide which are taken, and `onReject` is told about
+ * the rest. Images are shown as thumbnails, anything else as a chip with its
+ * name and size.
+ */
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ButtonProps } from '../button/index.js';
+import { type MenuContentProps, type MenuItemProps } from '../menu/index.js';
+import { type TextareaProps } from '../textarea/index.js';
+export type PromptState = 'idle' | 'submitted' | 'streaming' | 'error';
+export interface PromptMessage {
+    /** What was written, trimmed. */
+    text: string;
+    /** The files that were attached, in the order they were added. */
+    files: File[];
+}
+export interface PromptAttachment {
+    id: string;
+    file: File;
+    /** An object URL for an image, to show it by. */
+    preview?: string;
+}
+export type PromptRejectReason = 'accept' | 'max-files';
+export interface PromptProps extends Omit<ComponentProps<'form'>, 'onSubmit' | 'defaultValue'> {
+    /** What is written in the field, when the caller holds it. */
+    value?: string;
+    /** What the field starts with, when the caller does not hold it. */
+    defaultValue?: string;
+    /** Called with what is written, each time it changes, and with `''` when it is sent. */
+    onValueChange?: (value: string) => void;
+    /** Called with the text and the files when the message is sent. */
+    onSubmit?: (message: PromptMessage) => void;
+    /**
+     * Where the answer is. `submitted` and `streaming` stop the field being
+     * sent and turn the submit button into a stop button; `error` marks the
+     * field. Default `idle`.
+     */
+    status?: PromptState;
+    /** Called when the stop button is pressed. Without it, the button cannot be pressed while busy. */
+    onStop?: () => void;
+    /** Turns the whole prompt off. */
+    disabled?: boolean;
+    /** Files attached to begin with, such as those of a message being edited and sent again. */
+    defaultFiles?: File[];
+    /** Which files can be attached, as for `<input type="file">`: `image/*,.pdf`. Default any. */
+    accept?: string;
+    /** How many files can be attached at once. Default no limit. */
+    maxFiles?: number;
+    /** Called with the files that were not taken, and why. */
+    onReject?: (files: File[], reason: PromptRejectReason) => void;
+}
+declare function PromptRoot({ value: controlledValue, defaultValue, onValueChange, onSubmit, status, onStop, disabled, defaultFiles, accept, maxFiles, onReject, className, children, ...props }: PromptProps): import("react").JSX.Element;
+declare namespace PromptRoot {
+    var displayName: string;
+}
+export interface PromptBannerProps extends ComponentProps<'div'> {
+    /** Whether it is shown. It folds under the field when it is not. Default `true`. */
+    open?: boolean;
+}
+/** A band above the field, for something to do before or while writing: connect an account, pick a project. */
+declare function PromptBanner({ open, ...props }: PromptBannerProps): import("react").JSX.Element;
+declare namespace PromptBanner {
+    var displayName: string;
+}
+export interface PromptBannerActionProps extends ButtonProps {
+}
+/** The banner's button, at its end. */
+declare function PromptBannerAction({ className, size, shape, ...props }: PromptBannerActionProps): import("react").JSX.Element;
+declare namespace PromptBannerAction {
+    var displayName: string;
+}
+export interface PromptStatusProps extends ComponentProps<'div'> {
+    /** Whether it is shown. Default: while `status` is `submitted` or `streaming`. */
+    open?: boolean;
+    /** Something before the words: the model's mark, a tool's icon. */
+    icon?: ReactNode;
+    /** Whether a spinner turns at its end. Default `true`. */
+    spinner?: boolean;
+}
+/** A band under the field saying what the answer is doing, with the words lit by a moving sweep. */
+declare function PromptStatus({ open, icon, spinner, children, ...props }: PromptStatusProps): import("react").JSX.Element;
+declare namespace PromptStatus {
+    var displayName: string;
+}
+export interface PromptContextProps extends ComponentProps<'div'> {
+}
+/** A strip under the field, inset from its edges, for where the message is going: a branch, a folder, a ticket. */
+declare function PromptContext({ className, ...props }: PromptContextProps): import("react").JSX.Element;
+declare namespace PromptContext {
+    var displayName: string;
+}
+export interface PromptContextItemProps extends ComponentProps<'span'> {
+    /** Called when it is pressed. Passing this makes the item a button. */
+    onSelect?: () => void;
+}
+/** One fact in the context strip, with an icon before it. */
+declare function PromptContextItem({ onSelect, className, children, ...props }: PromptContextItemProps): import("react").JSX.Element;
+declare namespace PromptContextItem {
+    var displayName: string;
+}
+export interface PromptHintProps extends ComponentProps<'p'> {
+}
+/** A quiet line under the prompt. Keys written in `<kbd>` are drawn as keys. */
+declare function PromptHint({ className, children, ...props }: PromptHintProps): import("react").JSX.Element;
+declare namespace PromptHint {
+    var displayName: string;
+}
+export interface PromptFieldProps extends ComponentProps<'div'> {
+    /**
+     * `stacked` puts the text above a footer. `inline` puts every part in one
+     * row, the text between them, for a one-line composer; the row wraps as
+     * the text grows. Default `stacked`.
+     */
+    layout?: 'stacked' | 'inline';
+}
+/** The card that holds the text, the files and the footer. Files can be dropped on it. */
+declare function PromptField({ layout, className, onDragOver, onDragLeave, onDrop, ...props }: PromptFieldProps): import("react").JSX.Element;
+declare namespace PromptField {
+    var displayName: string;
+}
+export interface PromptTextareaProps extends Omit<TextareaProps, 'value' | 'defaultValue' | 'onChange' | 'variant'> {
+}
+/** Where the message is written. Enter sends, Shift+Enter starts a new line, and pasted files are attached. */
+declare function PromptTextarea({ className, minRows, maxRows, onKeyDown, onPaste, 'aria-label': ariaLabel, ...props }: PromptTextareaProps): import("react").JSX.Element;
+declare namespace PromptTextarea {
+    var displayName: string;
+}
+export interface PromptAttachmentsProps extends ComponentProps<'ul'> {
+}
+/** The files attached so far: images as thumbnails, anything else as a chip. Takes no room while there are none. */
+declare function PromptAttachments({ className, 'aria-label': ariaLabel, ...props }: PromptAttachmentsProps): import("react").JSX.Element | null;
+declare namespace PromptAttachments {
+    var displayName: string;
+}
+export interface PromptFooterProps extends ComponentProps<'div'> {
+}
+/** The row under the text: tools at the start, the submit button at the end. */
+declare function PromptFooter({ className, ...props }: PromptFooterProps): import("react").JSX.Element;
+declare namespace PromptFooter {
+    var displayName: string;
+}
+export interface PromptToolsProps extends ComponentProps<'div'> {
+}
+/** The tools at the start of the footer. Wraps onto a second line where it has to. */
+declare function PromptTools({ className, ...props }: PromptToolsProps): import("react").JSX.Element;
+declare namespace PromptTools {
+    var displayName: string;
+}
+export interface PromptToolProps extends Omit<ButtonProps, 'aria-pressed'> {
+    /** What it does, for a screen reader and for the tooltip. Shown beside the icon with `showLabel`. */
+    label: string;
+    /** Whether it is switched on, for a tool that stays on. Leave it out for one that acts once. */
+    pressed?: boolean;
+    /** Called with the new state when a tool with `pressed` is pressed. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Writes the label beside the icon. */
+    showLabel?: boolean;
+}
+/** A round button in the footer, holding an icon. With `pressed`, it switches on and off. */
+declare function PromptTool({ label, pressed, onPressedChange, showLabel, onClick, className, children, variant, ...props }: PromptToolProps): import("react").JSX.Element;
+declare namespace PromptTool {
+    var displayName: string;
+}
+export interface PromptAttachProps extends Omit<PromptToolProps, 'label' | 'pressed' | 'onPressedChange'> {
+    /** Default `Attach files`. */
+    label?: string;
+}
+/** A tool that opens the file picker. Files can also be pasted, or dropped on the field. */
+declare function PromptAttach({ label, onClick, children, ...props }: PromptAttachProps): import("react").JSX.Element;
+declare namespace PromptAttach {
+    var displayName: string;
+}
+export interface PromptModelItem {
+    value: string;
+    label: string;
+    /** Shown before the label, in the list and on the button once chosen. */
+    icon?: ReactNode;
+    /** A second line in the list. */
+    description?: ReactNode;
+}
+export interface PromptModelProps {
+    /** The models to choose from. */
+    items: readonly PromptModelItem[];
+    /** The chosen model, when the caller holds it. */
+    value?: string;
+    /** The model chosen to begin with, when the caller does not hold it. */
+    defaultValue?: string;
+    /** Called with the model's `value` when another is chosen. */
+    onValueChange?: (value: string) => void;
+    /** `pill` has an edge, like the tools beside it. `ghost` has none until hovered. Default `pill`. */
+    variant?: 'pill' | 'ghost';
+    /** What a screen reader calls the button. Default `Model`. */
+    label?: string;
+    className?: string;
+}
+/** Chooses the model the message goes to. The button shows the chosen one's icon and name. */
+declare function PromptModel({ items, value, defaultValue, onValueChange, variant, label, className, }: PromptModelProps): import("react").JSX.Element;
+declare namespace PromptModel {
+    var displayName: string;
+}
+export interface PromptMenuProps extends Omit<MenuContentProps, 'children'> {
+    /** What a screen reader and the tooltip call the button. Default `Add`. */
+    label?: string;
+    /** Replaces the plus on the button. */
+    icon?: ReactNode;
+    /** The menu: `Prompt.AttachItem`, and any `Menu` items, check items and submenus. */
+    children?: ReactNode;
+    /** `field` opens the menu as wide as the field, lined up with it, for items with descriptions. Default `auto`. */
+    width?: 'auto' | 'field';
+}
+/**
+ * One round button that opens a menu of everything that can be added to the
+ * message: files, tools, modes. It keeps the footer to one button however
+ * many there are.
+ */
+declare function PromptMenu({ label, icon, children, side, align, width, className, ...props }: PromptMenuProps): import("react").JSX.Element;
+declare namespace PromptMenu {
+    var displayName: string;
+}
+export interface PromptAttachItemProps extends Omit<MenuItemProps, 'children'> {
+    /** Default `Add files`. */
+    children?: ReactNode;
+    /** The keys shown at its end. Default `⌘U`; pass `null` for none. ⌘U and Ctrl+U in the field open the picker. */
+    shortcut?: ReactNode;
+}
+/** The menu item that opens the file picker. */
+declare function PromptAttachItem({ children, shortcut, onClick, ...props }: PromptAttachItemProps): import("react").JSX.Element;
+declare namespace PromptAttachItem {
+    var displayName: string;
+}
+export interface PromptSubmitProps extends Omit<ButtonProps, 'type' | 'children'> {
+    /** Makes the button a voice button while the field is empty. Called when it is pressed. */
+    onVoice?: () => void;
+    /** Whether voice is being heard. The bars move while it is. */
+    listening?: boolean;
+    /** What a screen reader calls the button while it sends. Default `Send`. */
+    sendLabel?: string;
+    /** While it stops the answer. Default `Stop`. */
+    stopLabel?: string;
+    /** While it starts voice. Default `Speak`. */
+    voiceLabel?: string;
+}
+/** Sends the message. While busy it stops the answer, and with `onVoice` it starts voice while the field is empty. */
+declare function PromptSubmit({ onVoice, listening, sendLabel, stopLabel, voiceLabel, onClick, className, disabled, ...props }: PromptSubmitProps): import("react").JSX.Element;
+declare namespace PromptSubmit {
+    var displayName: string;
+}
+export type PromptTaskStatus = 'pending' | 'active' | 'done' | 'error';
+export interface PromptTasksProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** Whether the band is shown. It folds under the field when it is not. Default `true`. */
+    open?: boolean;
+    /** What the agent is doing, on the band's one line: "Preparing the release". */
+    title: ReactNode;
+    /** Whether the list is open under the title, when the caller holds it. */
+    expanded?: boolean;
+    /** Whether the list starts open, when the caller does not hold it. Default `false`. */
+    defaultExpanded?: boolean;
+    /** Called when the title is pressed to open or close the list. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** How tall the list grows before it scrolls, as a CSS length. Default `10rem`. */
+    maxHeight?: string;
+}
+/**
+ * A band above the field with an agent's tasks: one line with a ring that
+ * fills as they are done, opening into the list. The list scrolls past
+ * `maxHeight`, and keeps the task in progress in view.
+ */
+declare function PromptTasks({ open, title, expanded, defaultExpanded, onExpandedChange, maxHeight, className, children, ...props }: PromptTasksProps): import("react").JSX.Element;
+declare namespace PromptTasks {
+    var displayName: string;
+}
+export interface PromptTaskProps extends ComponentProps<'li'> {
+    /** `pending`, `active` (its words are lit while it runs), `done` (a check) or `error`. Default `pending`. */
+    status?: PromptTaskStatus;
+}
+/** One task in `Prompt.Tasks`. */
+declare function PromptTask({ status, className, children, ...props }: PromptTaskProps): import("react").JSX.Element;
+declare namespace PromptTask {
+    var displayName: string;
+}
+export interface PromptCommandItem {
+    /** What is typed after the trigger to reach it: `summarise` for `/summarise`. */
+    value: string;
+    /** Its name in the list. Default the trigger and the value. */
+    label?: ReactNode;
+    /** What it does, after the name. */
+    description?: ReactNode;
+    icon?: ReactNode;
+}
+export interface PromptCommandsProps {
+    /** The commands. */
+    items: readonly PromptCommandItem[];
+    /** The character that opens the list when the field starts with it. Default `/`. */
+    trigger?: string;
+    /**
+     * Called with the command chosen. With it, the field is cleared and the
+     * command is yours to show; without it, the command is written into the field.
+     */
+    onSelect?: (item: PromptCommandItem) => void;
+    /** The heading over the list. Default `Commands`. */
+    label?: ReactNode;
+    /** How tall the list grows before it scrolls, as a CSS length. Default `12rem`. */
+    maxHeight?: string;
+}
+/**
+ * A band above the field listing commands while the text is a trigger and a
+ * word, `/sum`. The arrow keys move through it, Enter or Tab chooses, Escape
+ * puts it away.
+ */
+declare function PromptCommands({ items, trigger, onSelect, label, maxHeight }: PromptCommandsProps): import("react").JSX.Element;
+declare namespace PromptCommands {
+    var displayName: string;
+}
+export interface PromptRecorderProps extends ComponentProps<'div'> {
+    /** What has been heard so far, written in as it arrives. */
+    transcript?: ReactNode;
+    /** Shown, lit by a moving sweep, until there is a transcript. Default `Listening…`. */
+    placeholder?: ReactNode;
+    /** Called when the cross is pressed, to throw the recording away. */
+    onCancel?: () => void;
+    /** Called when the check is pressed, to keep it. */
+    onDone?: () => void;
+    /**
+     * How loud the input is now, from 0 to 1, to draw from a real microphone.
+     * Without it the wave moves on its own, as a sign that it is listening.
+     */
+    level?: number;
+    /** What a screen reader calls the cross. Default `Cancel recording`. */
+    cancelLabel?: string;
+    /** And the check. Default `Finish recording`. */
+    doneLabel?: string;
+}
+/**
+ * Takes the place of the text and the footer while voice is recorded: what
+ * has been heard so far, the sound as a wave scrolling to the left, how long
+ * it has been, and buttons to throw it away or keep it.
+ */
+declare function PromptRecorder({ transcript, placeholder, onCancel, onDone, level, cancelLabel, doneLabel, className, ...props }: PromptRecorderProps): import("react").JSX.Element;
+declare namespace PromptRecorder {
+    var displayName: string;
+}
+export declare const Prompt: typeof PromptRoot & {
+    Banner: typeof PromptBanner;
+    BannerAction: typeof PromptBannerAction;
+    Field: typeof PromptField;
+    Attachments: typeof PromptAttachments;
+    Textarea: typeof PromptTextarea;
+    Footer: typeof PromptFooter;
+    Tools: typeof PromptTools;
+    Tool: typeof PromptTool;
+    Attach: typeof PromptAttach;
+    Menu: typeof PromptMenu;
+    AttachItem: typeof PromptAttachItem;
+    Model: typeof PromptModel;
+    Submit: typeof PromptSubmit;
+    Status: typeof PromptStatus;
+    Tasks: typeof PromptTasks;
+    Task: typeof PromptTask;
+    Commands: typeof PromptCommands;
+    Recorder: typeof PromptRecorder;
+    Context: typeof PromptContext;
+    ContextItem: typeof PromptContextItem;
+    Hint: typeof PromptHint;
+};
+export { PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, };