panelui-web 0.7.0 → 0.9.0

package/dist/components/dialog/index.js

@@ -0,0 +1,299 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dialog — a task taken out of the page and done in a box over it: renaming
+ * something, inviting people, filling in a short form.
+ *
+ * ```tsx
+ * <Dialog>
+ *   <Dialog.Trigger render={<Button />}>Rename</Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header title="Rename board" description="Everyone on the board sees the new name." />
+ *     <Dialog.Body>
+ *       <Input defaultValue="Spring launch" aria-label="Name" />
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
+ *       <Button>Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog>
+ * ```
+ *
+ * ## A panel in a band
+ *
+ * The task sits in a panel, and `Dialog.Footer` moves out of it into the
+ * darker band underneath, where the buttons are equal pills: the same shape
+ * as Feedback and Alert Dialog, so the three read as one family.
+ * `variant="plain"` is a single surface with the footer ruled off at its
+ * foot, for a dense form where the band would be one more edge.
+ *
+ * ## The middle scrolls
+ *
+ * The dialog is never taller than the screen. The header and footer stay
+ * put and `Dialog.Body` scrolls between them, with a thin drawn thumb that
+ * shows while it moves.
+ *
+ * ## Focus goes to the task
+ *
+ * The close button is drawn in the corner but comes last in the order, so
+ * opening the dialog puts focus on its first field rather than on the way
+ * out. A press outside, Escape or the close button dismiss it.
+ *
+ * ## Lists to choose from
+ *
+ * `Dialog.List` is a list of one-line choices for the body, such as a time
+ * zone or a project to move something to: grouped under headings that stay
+ * pinned while it scrolls, moved through with the arrow keys, with a check
+ * on the chosen one. It opens scrolled to the chosen one.
+ *
+ * ## On a phone it sits low
+ *
+ * Under 640px wide it rests at the bottom of the screen, a few pixels clear
+ * of the edges, where a thumb reaches its buttons.
+ */
+import { Dialog as Primitive } from '@base-ui/react/dialog';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef, } from 'react';
+import { tv } from 'tailwind-variants';
+const dialogVariants = tv({
+    slots: {
+        backdrop: 'fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+        viewport: 'fixed inset-0 z-50 grid place-items-center overflow-hidden p-4 max-sm:items-end max-sm:p-2',
+        shell: [
+            'relative flex max-h-[calc(100dvh-2rem)] w-full min-h-0 flex-col text-popover-foreground outline-none max-sm:max-h-[calc(100dvh-1rem)]',
+            // A dialog opened from this one steps it back, smaller and veiled, so
+            // the depth can be counted.
+            'origin-top scale-[calc(1-0.05*var(--nested-dialogs,0))] translate-y-[calc(-0.75rem*var(--nested-dialogs,0))]',
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-black/0 after:transition-colors after:duration-200 after:content-[''] data-nested-dialog-open:after:bg-black/10 dark:data-nested-dialog-open:after:bg-black/30",
+        ],
+        popup: 'transition-[opacity,scale,translate] duration-200 ease-[cubic-bezier(0.2,0,0,1)] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:translate-y-2 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
+        panel: 'relative flex min-h-0 flex-1 flex-col',
+        header: 'flex shrink-0 flex-col gap-1',
+        title: 'text-[19px] font-semibold leading-6 tracking-[-0.01em]',
+        description: 'text-[15px] leading-[22px] text-muted-foreground',
+        body: [
+            'relative flex min-h-0 flex-1 flex-col',
+            // A hairline at an edge the content has been scrolled past, so what is
+            // cut off reads as going under the header, not as stopping there.
+            "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-20 before:h-px before:bg-border before:opacity-0 before:transition-opacity before:content-[''] data-overflow-y-start:before:opacity-100",
+        ],
+        bodyViewport: 'min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none',
+        bodyContent: 'flex flex-col gap-4',
+        scrollbar: 'my-2 me-1 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0',
+        thumb: 'relative flex-1 rounded-full bg-foreground/20',
+        footer: 'flex shrink-0 items-center',
+        close: [
+            'absolute end-4 top-4 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-full',
+            'bg-muted text-muted-foreground outline-none transition-[background-color,color,scale] duration-150',
+            'after:absolute after:-inset-1.5 hover:bg-foreground/10 hover:text-foreground active:scale-95',
+            'focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none [&_svg]:size-4',
+        ],
+        // Pulled out by the rows' own padding, so a row's text lines up with the
+        // header's, and no further: the scrollbar runs in the 12px left at each
+        // side, and a heading or a row reaching into it shows through the thumb.
+        list: '-mx-2 flex flex-col outline-none',
+        listGroup: 'flex flex-col [&+&]:mt-2',
+        listGroupLabel: 'sticky top-0 z-10 bg-popover px-2 pb-1.5 pt-2 text-xs font-medium text-muted-foreground',
+        listItem: [
+            'flex h-10 shrink-0 cursor-pointer select-none items-center gap-3 rounded-xl px-2 text-sm outline-none',
+            // Room for the pinned heading above it when the arrow keys scroll it into view.
+            'scroll-mb-2 scroll-mt-10 transition-colors duration-100 hover:bg-foreground/[0.05]',
+            'focus-visible:bg-foreground/[0.06] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/60',
+            'data-selected:bg-[color-mix(in_oklab,var(--primary)_9%,transparent)] data-selected:font-medium',
+            'aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:hover:bg-transparent motion-reduce:transition-none',
+        ],
+        listItemLabel: 'min-w-0 flex-1 truncate',
+        listItemMeta: 'shrink-0 text-xs font-normal tabular-nums text-muted-foreground',
+        listItemCheck: 'flex size-4 shrink-0 items-center justify-center text-primary [&_svg]:size-4',
+    },
+    variants: {
+        variant: {
+            /*
+             * The band is the popover surface with black mixed in, so it is the
+             * darker of the two in either theme. 38 and 30 are one corner: the
+             * panel's radius is the band's less the 8px between them.
+             */
+            inset: {
+                shell: 'rounded-[38px] bg-[color-mix(in_oklab,var(--popover),black_5%)] p-2 shadow-xl ring-1 ring-foreground/[0.06] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+                panel: 'overflow-hidden rounded-[30px] bg-popover shadow-xs',
+                header: 'px-5 pb-3 pt-5',
+                body: 'first:pt-5',
+                bodyContent: 'px-5 pb-5',
+                // Held in from the band's edge further than the panel is, with the
+                // buttons as equal pills: a row of decisions, not a third edge.
+                footer: 'gap-3 px-[10px] pb-0.5 pt-2.5 *:h-11 *:min-w-0 *:flex-1 *:rounded-full',
+            },
+            plain: {
+                shell: 'overflow-hidden rounded-[28px] border bg-popover shadow-xl',
+                header: 'px-6 pb-4 pt-6',
+                body: 'first:pt-6',
+                bodyContent: 'px-6 pb-6',
+                footer: 'justify-end gap-2 border-t bg-muted/50 px-6 py-3.5',
+            },
+        },
+        size: {
+            sm: { shell: 'max-w-sm' },
+            md: { shell: 'max-w-md' },
+            lg: { shell: 'max-w-xl' },
+        },
+        blur: {
+            true: { backdrop: 'bg-black/20 backdrop-blur-md' },
+        },
+    },
+    defaultVariants: { variant: 'inset', size: 'md' },
+});
+const DialogContext = createContext({ inline: false, showClose: true, variant: 'inset' });
+function DialogRoot({ children, open, defaultOpen, onOpenChange, dismissible = true, }) {
+    return (_jsx(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange ? (next) => onOpenChange(next) : undefined, disablePointerDismissal: !dismissible, children: children }));
+}
+DialogRoot.displayName = 'Dialog';
+/** What opens the dialog. A plain button unless `render` supplies one. */
+function DialogTrigger({ render, children, ...props }) {
+    return (_jsx(Primitive.Trigger, { render: render, ...props, children: children }));
+}
+DialogTrigger.displayName = 'Dialog.Trigger';
+const isFooter = (child) => isValidElement(child) && child.type === DialogFooter;
+/** The dialog itself, with the dimmed page behind it. */
+function DialogContent({ variant = 'inset', size = 'md', showClose = true, blur = false, inline = false, className, children, ...props }) {
+    const slots = dialogVariants({ variant, size, blur });
+    const context = useMemo(() => ({ inline, showClose, variant }), [inline, showClose, variant]);
+    // In the inset look the footer leaves the panel for the band under it.
+    const all = Children.toArray(children);
+    const footer = variant === 'inset' ? all.filter(isFooter) : [];
+    const rest = variant === 'inset' ? all.filter((child) => !isFooter(child)) : all;
+    const inside = (_jsxs(DialogContext.Provider, { value: context, children: [_jsxs("div", { "data-slot": "dialog-panel", className: slots.panel(), children: [rest, showClose ? _jsx(DialogClose, { "aria-label": "Close", className: slots.close(), icon: true }) : null] }), footer] }));
+    if (inline) {
+        return (_jsx("div", { "data-slot": "dialog-content", "data-variant": variant, className: slots.shell({ className }), ...props, children: inside }));
+    }
+    return (_jsxs(Primitive.Portal, { children: [_jsx(Primitive.Backdrop, { className: slots.backdrop() }), _jsx(Primitive.Viewport, { className: slots.viewport(), children: _jsx(Primitive.Popup, { "data-slot": "dialog-content", "data-variant": variant, className: slots.shell({ className: [slots.popup(), className] }), ...props, children: inside }) })] }));
+}
+DialogContent.displayName = 'Dialog.Content';
+/** The heading block. It leaves room for the close button beside the title. */
+function DialogHeader({ title, description, className, children, ...props }) {
+    const { showClose, variant } = useContext(DialogContext);
+    const slots = dialogVariants({ variant });
+    return (_jsxs("div", { "data-slot": "dialog-header", className: slots.header({ className: [showClose && 'pe-14', className] }), ...props, children: [title !== undefined ? _jsx(DialogTitle, { children: title }) : null, description !== undefined ? _jsx(DialogDescription, { children: description }) : null, children] }));
+}
+DialogHeader.displayName = 'Dialog.Header';
+/** The dialog's name, announced when it opens. */
+function DialogTitle({ className, ...props }) {
+    const { inline } = useContext(DialogContext);
+    const slots = dialogVariants();
+    if (inline)
+        return _jsx("h2", { "data-slot": "dialog-title", className: slots.title({ className }), ...props });
+    return _jsx(Primitive.Title, { "data-slot": "dialog-title", className: slots.title({ className }), ...props });
+}
+DialogTitle.displayName = 'Dialog.Title';
+/** A sentence under the title, read out after it. */
+function DialogDescription({ className, ...props }) {
+    const { inline } = useContext(DialogContext);
+    const slots = dialogVariants();
+    if (inline)
+        return _jsx("p", { "data-slot": "dialog-description", className: slots.description({ className }), ...props });
+    return _jsx(Primitive.Description, { "data-slot": "dialog-description", className: slots.description({ className }), ...props });
+}
+DialogDescription.displayName = 'Dialog.Description';
+/**
+ * The part that scrolls, between the header and the footer. Its children are
+ * laid out in a column with a gap, so a form's fields need no wrapper.
+ */
+function DialogBody({ className, children, ...props }) {
+    const { variant } = useContext(DialogContext);
+    const slots = dialogVariants({ variant });
+    return (_jsxs(ScrollArea.Root, { "data-slot": "dialog-body", className: slots.body(), children: [_jsx(ScrollArea.Viewport, { className: slots.bodyViewport(), children: _jsx(ScrollArea.Content, { className: slots.bodyContent({ className }), ...props, children: children }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+}
+DialogBody.displayName = 'Dialog.Body';
+/**
+ * The buttons. In the inset look they sit in the band under the panel as
+ * equal pills; in `plain` they sit at the end of a ruled strip. Keep it a
+ * direct child of `Dialog.Content`, so the band can find it.
+ */
+function DialogFooter({ className, ...props }) {
+    const { variant } = useContext(DialogContext);
+    return _jsx("div", { "data-slot": "dialog-footer", className: dialogVariants({ variant }).footer({ className }), ...props });
+}
+DialogFooter.displayName = 'Dialog.Footer';
+/** Closes the dialog. */
+function DialogClose({ render, icon = false, children, ...props }) {
+    const { inline } = useContext(DialogContext);
+    const content = icon ? (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })) : (children);
+    if (inline) {
+        return (_jsx("button", { type: "button", "data-slot": "dialog-close", ...props, children: content }));
+    }
+    return (_jsx(Primitive.Close, { "data-slot": "dialog-close", render: render, ...props, children: content }));
+}
+DialogClose.displayName = 'Dialog.Close';
+/**
+ * A list of one-line choices in the body. The arrow keys, Home and End move
+ * between its items, and it opens scrolled to the selected one.
+ */
+function DialogList({ className, onKeyDown, children, ...props }) {
+    const list = useRef(null);
+    const items = () => [...(list.current?.querySelectorAll('[data-slot=dialog-list-item]:not([aria-disabled=true])') ?? [])];
+    useEffect(() => {
+        const all = items();
+        const selected = all.find((item) => item.dataset.selected !== undefined);
+        // One item takes Tab: the chosen one, or the first when none is.
+        if (!selected && all[0])
+            all[0].tabIndex = 0;
+        selected?.scrollIntoView({ block: 'center' });
+    }, []);
+    const move = (event) => {
+        onKeyDown?.(event);
+        const all = items();
+        const index = all.indexOf(document.activeElement);
+        const next = event.key === 'ArrowDown'
+            ? all[index < 0 ? 0 : Math.min(index + 1, all.length - 1)]
+            : event.key === 'ArrowUp'
+                ? all[Math.max(index - 1, 0)]
+                : event.key === 'Home'
+                    ? all[0]
+                    : event.key === 'End'
+                        ? all[all.length - 1]
+                        : undefined;
+        if (!next)
+            return;
+        event.preventDefault();
+        next.focus();
+    };
+    return (_jsx("div", { ref: list, role: "listbox", "data-slot": "dialog-list", className: dialogVariants().list({ className }), onKeyDown: move, ...props, children: children }));
+}
+DialogList.displayName = 'Dialog.List';
+/** A run of items in `Dialog.List` under a heading of their own. */
+function DialogListGroup({ label, className, children, ...props }) {
+    const slots = dialogVariants();
+    const id = useId();
+    return (_jsxs("div", { role: "group", "aria-labelledby": id, "data-slot": "dialog-list-group", className: slots.listGroup({ className }), ...props, children: [_jsx("div", { id: id, className: slots.listGroupLabel(), children: label }), children] }));
+}
+DialogListGroup.displayName = 'Dialog.ListGroup';
+/** One choice in `Dialog.List`, on one line. */
+function DialogListItem({ selected = false, onSelect, meta, disabled = false, className, onClick, onKeyDown, children, ...props }) {
+    const slots = dialogVariants();
+    return (_jsxs("div", { role: "option", "aria-selected": selected, "aria-disabled": disabled || undefined, tabIndex: selected ? 0 : -1, "data-slot": "dialog-list-item", "data-selected": selected ? '' : undefined, className: slots.listItem({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!disabled)
+                onSelect?.();
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
+                event.preventDefault();
+                onSelect?.();
+            }
+        }, ...props, children: [_jsx("span", { className: slots.listItemLabel(), children: children }), meta !== undefined ? _jsx("span", { className: slots.listItemMeta(), children: meta }) : null, _jsx("span", { "aria-hidden": "true", className: slots.listItemCheck(), children: selected ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) })) : null })] }));
+}
+DialogListItem.displayName = 'Dialog.ListItem';
+export const Dialog = Object.assign(DialogRoot, {
+    Trigger: DialogTrigger,
+    Content: DialogContent,
+    Header: DialogHeader,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Body: DialogBody,
+    Footer: DialogFooter,
+    Close: DialogClose,
+    List: DialogList,
+    ListGroup: DialogListGroup,
+    ListItem: DialogListItem,
+});
+export { DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem, };

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

@@ -30,6 +30,14 @@
  * 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.
  *
+ * ## Modes
+ *
+ * A prompt that changes with what the app is doing names its states with
+ * `mode`, and each band says which of them it belongs to with its own
+ * `mode`. The bands that match open and the others fold, in one movement,
+ * so the card moves once, by the difference between them. A band's own
+ * `open` still wins over its mode.
+ *
  * ## Sending
  *
  * Enter sends and Shift+Enter starts a new line; Enter while a character is
@@ -97,17 +105,27 @@ export interface PromptProps extends Omit<ComponentProps<'form'>, 'onSubmit' | '
     maxFiles?: number;
     /** Called with the files that were not taken, and why. */
     onReject?: (files: File[], reason: PromptRejectReason) => void;
+    /**
+     * The state the prompt is in, named by you: `"connect"`, `"tasks"`,
+     * `"writing"`. Each band given a `mode` of its own opens while this
+     * matches it and folds away otherwise.
+     */
+    mode?: string;
 }
-declare function PromptRoot({ value: controlledValue, defaultValue, onValueChange, onSubmit, status, onStop, disabled, defaultFiles, accept, maxFiles, onReject, className, children, ...props }: PromptProps): import("react").JSX.Element;
+declare function PromptRoot({ value: controlledValue, defaultValue, onValueChange, onSubmit, status, onStop, disabled, defaultFiles, accept, maxFiles, onReject, mode, className, children, ...props }: PromptProps): import("react").JSX.Element;
 declare namespace PromptRoot {
     var displayName: string;
 }
+/** A band's `mode`: the prompt mode, or modes, it is open in. */
+export type PromptBandMode = string | string[];
 export interface PromptBannerProps extends ComponentProps<'div'> {
-    /** Whether it is shown. It folds under the field when it is not. Default `true`. */
+    /** Whether it is shown. It folds under the field when it is not. Default: shown, or with `mode`, while the prompt is in that mode. */
     open?: boolean;
+    /** The prompt modes it is shown in. It folds away in any other. */
+    mode?: PromptBandMode;
 }
 /** 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 function PromptBanner({ open, mode, ...props }: PromptBannerProps): import("react").JSX.Element;
 declare namespace PromptBanner {
     var displayName: string;
 }
@@ -119,22 +137,28 @@ declare namespace PromptBannerAction {
     var displayName: string;
 }
 export interface PromptStatusProps extends ComponentProps<'div'> {
-    /** Whether it is shown. Default: while `status` is `submitted` or `streaming`. */
+    /** Whether it is shown. Default: while `status` is `submitted` or `streaming`, or with `mode`, while the prompt is in that mode. */
     open?: boolean;
+    /** The prompt modes it is shown in. It folds away in any other. */
+    mode?: PromptBandMode;
     /** 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 function PromptStatus({ open, mode, icon, spinner, children, ...props }: PromptStatusProps): import("react").JSX.Element;
 declare namespace PromptStatus {
     var displayName: string;
 }
 export interface PromptContextProps extends ComponentProps<'div'> {
+    /** Whether it is shown. It folds under the field when it is not. Default: shown, or with `mode`, while the prompt is in that mode. */
+    open?: boolean;
+    /** The prompt modes it is shown in. It folds away in any other. */
+    mode?: PromptBandMode;
 }
 /** 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 function PromptContext({ open, mode, className, ...props }: PromptContextProps): import("react").JSX.Element;
 declare namespace PromptContext {
     var displayName: string;
 }
@@ -296,8 +320,10 @@ declare namespace PromptSubmit {
 }
 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`. */
+    /** Whether the band is shown. It folds under the field when it is not. Default: shown, or with `mode`, while the prompt is in that mode. */
     open?: boolean;
+    /** The prompt modes it is shown in. It folds away in any other. */
+    mode?: PromptBandMode;
     /** 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. */
@@ -314,7 +340,7 @@ export interface PromptTasksProps extends Omit<ComponentProps<'div'>, 'title'> {
  * 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 function PromptTasks({ open, mode, title, expanded, defaultExpanded, onExpandedChange, maxHeight, className, children, ...props }: PromptTasksProps): import("react").JSX.Element;
 declare namespace PromptTasks {
     var displayName: string;
 }

package/dist/components/prompt/index.js

@@ -32,6 +32,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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.
  *
+ * ## Modes
+ *
+ * A prompt that changes with what the app is doing names its states with
+ * `mode`, and each band says which of them it belongs to with its own
+ * `mode`. The bands that match open and the others fold, in one movement,
+ * so the card moves once, by the difference between them. A band's own
+ * `open` still wins over its mode.
+ *
  * ## Sending
  *
  * Enter sends and Shift+Enter starts a new line; Enter while a character is
@@ -120,8 +128,10 @@ const promptVariants = tv({
         submitRing: 'pointer-events-none absolute -inset-[3px] size-[calc(100%+6px)] text-primary transition-opacity duration-200',
         statusText: 'min-w-0 truncate bg-[linear-gradient(90deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent',
         statusSpinner: 'ms-auto size-4 animate-spin text-muted-foreground motion-reduce:animate-none',
+        // The strip folds like a band: its tuck under the card moves with it.
+        contextFold: 'mx-4 grid transition-[grid-template-rows,margin,opacity] duration-300 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
         context: [
-            'relative mx-4 -mt-5 flex items-center gap-x-4 gap-y-1 rounded-b-[1rem] border bg-muted px-3.5 pb-2 pt-6.5 text-xs text-muted-foreground',
+            'relative flex items-center gap-x-4 gap-y-1 rounded-b-[1rem] border bg-muted px-3.5 pb-2 pt-6.5 text-xs text-muted-foreground',
             'flex-wrap [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
         ],
         contextItem: 'inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap',
@@ -209,7 +219,7 @@ function attach(file) {
         preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
     };
 }
-function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange, onSubmit, status = 'idle', onStop, disabled = false, defaultFiles, accept, maxFiles, onReject, className, children, ...props }) {
+function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange, onSubmit, status = 'idle', onStop, disabled = false, defaultFiles, accept, maxFiles, onReject, mode, className, children, ...props }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
     const [attachments, setAttachments] = useState(() => (defaultFiles ?? []).map(attach));
@@ -274,6 +284,7 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         removeAttachment,
         openFileDialog,
         status,
+        mode,
         busy,
         disabled,
         empty,
@@ -287,12 +298,12 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         keyHandler,
         listbox,
         setListbox,
-    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
+    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, mode, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
     const send = (event) => {
         event.preventDefault();
         submit();
     };
-    return (_jsx(PromptStore.Provider, { value: context, children: _jsxs("form", { "data-slot": "prompt", "data-status": status, "aria-busy": busy || undefined, className: promptVariants().root({ className }), onSubmit: send, ...props, children: [children, _jsx("input", { ref: fileInput, type: "file", multiple: maxFiles !== 1, accept: accept, tabIndex: -1, "aria-hidden": "true", className: "hidden", onChange: (event) => {
+    return (_jsx(PromptStore.Provider, { value: context, children: _jsxs("form", { "data-slot": "prompt", "data-status": status, "data-mode": mode, "aria-busy": busy || undefined, className: promptVariants().root({ className }), onSubmit: send, ...props, children: [children, _jsx("input", { ref: fileInput, type: "file", multiple: maxFiles !== 1, accept: accept, tabIndex: -1, "aria-hidden": "true", className: "hidden", onChange: (event) => {
                         if (event.target.files)
                             addFiles(event.target.files);
                         // Cleared, so choosing the same file again still counts as a change.
@@ -311,9 +322,22 @@ function Band({ edge, open, slot, className, children, ...props }) {
     }, [open]);
     return (_jsx("div", { "data-slot": slot, "data-open": open ? '' : undefined, className: slots.band(), children: _jsx("div", { ref: clip, className: slots.bandClip(), children: _jsx("div", { className: slots.bandInner({ className }), ...props, children: children }) }) }));
 }
+/**
+ * Whether a band is open: its own `open` if given, else whether the
+ * prompt's mode is one of the band's, else what the band does by default.
+ */
+function useBandOpen(part, open, mode, fallback) {
+    const prompt = usePrompt(part);
+    if (open !== undefined)
+        return open;
+    if (mode !== undefined)
+        return prompt.mode !== undefined && (Array.isArray(mode) ? mode : [mode]).includes(prompt.mode);
+    return fallback(prompt);
+}
 /** A band above the field, for something to do before or while writing: connect an account, pick a project. */
-function PromptBanner({ open = true, ...props }) {
-    return _jsx(Band, { edge: "top", open: open, slot: "prompt-banner", ...props });
+function PromptBanner({ open, mode, ...props }) {
+    const shown = useBandOpen('Prompt.Banner', open, mode, () => true);
+    return _jsx(Band, { edge: "top", open: shown, slot: "prompt-banner", ...props });
 }
 PromptBanner.displayName = 'Prompt.Banner';
 /** The banner's button, at its end. */
@@ -340,17 +364,22 @@ function useShimmer(active) {
     return ref;
 }
 /** A band under the field saying what the answer is doing, with the words lit by a moving sweep. */
-function PromptStatus({ open, icon, spinner = true, children, ...props }) {
-    const prompt = usePrompt('Prompt.Status');
-    const shown = open ?? prompt.busy;
+function PromptStatus({ open, mode, icon, spinner = true, children, ...props }) {
+    const shown = useBandOpen('Prompt.Status', open, mode, (prompt) => prompt.busy);
     const slots = promptVariants();
     const text = useShimmer(shown);
     return (_jsxs(Band, { edge: "bottom", open: shown, slot: "prompt-status", role: "status", ...props, children: [icon, _jsx("span", { ref: text, className: slots.statusText(), children: children }), spinner ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", className: slots.statusSpinner(), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) })) : null] }));
 }
 PromptStatus.displayName = 'Prompt.Status';
 /** A strip under the field, inset from its edges, for where the message is going: a branch, a folder, a ticket. */
-function PromptContext({ className, ...props }) {
-    return _jsx("div", { "data-slot": "prompt-context", className: promptVariants().context({ className }), ...props });
+function PromptContext({ open, mode, className, ...props }) {
+    const shown = useBandOpen('Prompt.Context', open, mode, () => true);
+    const slots = promptVariants();
+    const clip = useRef(null);
+    useEffect(() => {
+        clip.current?.toggleAttribute('inert', !shown);
+    }, [shown]);
+    return (_jsx("div", { "data-slot": "prompt-context", "data-open": shown ? '' : undefined, className: slots.contextFold({ className: shown ? '-mt-5 grid-rows-[1fr] opacity-100' : 'mt-0 grid-rows-[0fr] opacity-0' }), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: _jsx("div", { className: slots.context({ className }), ...props }) }) }));
 }
 PromptContext.displayName = 'Prompt.Context';
 /** One fact in the context strip, with an icon before it. */
@@ -567,7 +596,8 @@ function ProgressRing({ done, total }) {
  * fills as they are done, opening into the list. The list scrolls past
  * `maxHeight`, and keeps the task in progress in view.
  */
-function PromptTasks({ open = true, title, expanded, defaultExpanded = false, onExpandedChange, maxHeight = '10rem', className, children, ...props }) {
+function PromptTasks({ open, mode, title, expanded, defaultExpanded = false, onExpandedChange, maxHeight = '10rem', className, children, ...props }) {
+    const shown = useBandOpen('Prompt.Tasks', open, mode, () => true);
     const slots = promptVariants();
     const [inner, setInner] = useState(defaultExpanded);
     const isExpanded = expanded ?? inner;
@@ -593,7 +623,7 @@ function PromptTasks({ open = true, title, expanded, defaultExpanded = false, on
             setInner(!isExpanded);
         onExpandedChange?.(!isExpanded);
     };
-    return (_jsxs(Band, { edge: "top", open: open, slot: "prompt-tasks", className: ['flex-col items-stretch gap-0 px-0 pt-0.5', className].filter(Boolean).join(' '), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, className: slots.tasksHeader(), children: [_jsx(ProgressRing, { done: done, total: tasks.length }), _jsx("span", { className: slots.tasksTitle(), children: title }), _jsxs("span", { className: slots.tasksCount(), children: [done, "/", tasks.length] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.tasksChevron({ className: isExpanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: slots.tasksBody({ className: isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' }), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("ol", { ref: list, id: listId, "aria-label": "Tasks", className: slots.tasksList(), style: { maxHeight }, children: children }) }) })] }));
+    return (_jsxs(Band, { edge: "top", open: shown, slot: "prompt-tasks", className: ['flex-col items-stretch gap-0 px-0 pt-0.5', className].filter(Boolean).join(' '), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, className: slots.tasksHeader(), children: [_jsx(ProgressRing, { done: done, total: tasks.length }), _jsx("span", { className: slots.tasksTitle(), children: title }), _jsxs("span", { className: slots.tasksCount(), children: [done, "/", tasks.length] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.tasksChevron({ className: isExpanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: slots.tasksBody({ className: isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' }), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("ol", { ref: list, id: listId, "aria-label": "Tasks", className: slots.tasksList(), style: { maxHeight }, children: children }) }) })] }));
 }
 PromptTasks.displayName = 'Prompt.Tasks';
 /** One task in `Prompt.Tasks`. */

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

@@ -161,6 +161,50 @@ declare function SheetClose({ render, icon, children, ...props }: SheetCloseProp
 declare namespace SheetClose {
     var displayName: string;
 }
+export interface SheetSlidesProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * `true` makes it a deck: each slide fills the height, and a scroll
+     * glides to the next one. `false` makes it a numbered column of smaller
+     * slides that scrolls freely. Default `true`.
+     */
+    snap?: boolean;
+    /** The current slide, counted from 0, when the caller holds it. Setting it scrolls that slide into view. */
+    index?: number;
+    /** The slide to start on, when the caller does not hold it. Default `0`. */
+    defaultIndex?: number;
+    /**
+     * Called with the new index when the current slide changes: scrolled to
+     * in a deck, pressed in a column. In a column, passing it makes each
+     * slide a button.
+     */
+    onIndexChange?: (index: number) => void;
+    /** Show "3 / 8" under the current slide. Default: on in a deck. */
+    counter?: boolean;
+    /** The shape of a slide in a column, as a CSS aspect ratio. Default `16 / 9`. */
+    aspect?: string;
+}
+/**
+ * A column of rounded slides in place of `Sheet.Body`: a deck that moves one
+ * slide at a time, or with `snap={false}`, a numbered column to choose from.
+ */
+declare function SheetSlides({ snap, index, defaultIndex, onIndexChange, counter, aspect, className, style, children, 'aria-label': label, ...props }: SheetSlidesProps): import("react").JSX.Element;
+declare namespace SheetSlides {
+    var displayName: string;
+}
+export interface SheetSlideProps extends ComponentProps<'div'> {
+    /**
+     * What a screen reader calls it, after its place: "3 of 8, Harbour at
+     * dawn". An image's `alt` usually says it already.
+     */
+    label?: string;
+    /** Its shape in a column, overriding `Sheet.Slides`' `aspect`. */
+    aspect?: string;
+}
+/** One slide: a rounded frame that fills with an image, a video or anything drawn. */
+declare function SheetSlide({ label, aspect, className, style, children, ...props }: SheetSlideProps): import("react").JSX.Element;
+declare namespace SheetSlide {
+    var displayName: string;
+}
 export interface SheetStageProps extends ComponentProps<'div'> {
 }
 /**
@@ -183,5 +227,7 @@ export declare const Sheet: typeof SheetRoot & {
     Footer: typeof SheetFooter;
     Close: typeof SheetClose;
     Stage: typeof SheetStage;
+    Slides: typeof SheetSlides;
+    Slide: typeof SheetSlide;
 };
-export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };