@ciridae/ui 1.0.1 → 1.0.3

package/dist/components/chat.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ArrowClockwiseIcon, ArrowUpIcon } from "@phosphor-icons/react";
+import { ArrowClockwiseIcon, ArrowDownIcon, ArrowUpIcon } from "@phosphor-icons/react";
 import { isSameDay, isToday, isYesterday } from "date-fns";
 import { Fragment, useEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { css, cva, cx } from "#primitives/css";
@@ -11,6 +11,8 @@ import { icon, Spinner } from "./icon.js";
 import { Lightbox } from "./lightbox.js";
 import { useCiridaeLocale } from "./locale.js";
 import { MentionInput } from "./mention-input.js";
+import { useResolvedFileUrl } from "./resolved-file-url.js";
+export { MessageText, splitSources, } from "../chat/message-text.js";
 /*
  * Two composers share one behaviour: `page` is the wide card of a chat page, and `sheet` the
  * composer at the foot of the agent sheet, its parts side by side as a messaging app's: the tools
@@ -192,6 +194,9 @@ const thread = css({
     flexDirection: "column",
     gap: "layout.tightGap",
     padding: "panel.default",
+    // The thread follows its newest entry itself: the browser's scroll anchoring would hold the
+    // view on what was there as a reply lands and pull it off the foot.
+    overflowAnchor: "none",
     "&[data-density=compact]": {
         paddingBlock: "layout.controlGap",
         "& > [data-group-position=single], & > [data-group-position=first]": {
@@ -199,6 +204,24 @@ const thread = css({
         },
     },
 });
+/*
+ * Under the thread, held at the foot of the scrolling area while the reader is away from the
+ * newest entry: the jump back to it. Takes no height, so showing it moves nothing.
+ */
+const latestSlot = css({
+    position: "sticky",
+    bottom: "layout.controlGap",
+    zIndex: "1",
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "center",
+    height: "0",
+    marginTop: "calc(token(spacing.layout.tightGap) * -1)",
+    pointerEvents: "none",
+    "& > *": { pointerEvents: "auto", boxShadow: "card" },
+});
+/** How close to the bottom the reader must be for new content to keep the thread at its foot. */
+const followDistancePx = 96;
 /* A reply's sources under its bubble: small links in a row. */
 const sourceRow = css({
     display: "flex",
@@ -338,7 +361,7 @@ const typingDots = css({
     "& > span:nth-child(2)": { animationDelay: "0.2s" },
     "& > span:nth-child(3)": { animationDelay: "0.4s" },
 });
-export function ChatComposer({ value, defaultValue = "", onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled = false, sendsWithoutText = false, attachments, variant = "page", autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }) {
+export function ChatComposer({ value, defaultValue = "", onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled = false, sendsWithoutText = false, attachments, onPasteFiles, variant = "page", autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }) {
     const { labels } = useCiridaeLocale();
     const ariaLabel = ownAriaLabel ?? labels.chat.message;
     const submitLabel = ownSubmitLabel ?? labels.chat.sendMessage;
@@ -357,14 +380,27 @@ export function ChatComposer({ value, defaultValue = "", onValueChange, onSend,
         setValue("");
     };
     const sheet = variant !== "page";
+    // In the capture phase, ahead of the text field and of an enclosing `Dropzone`, which would
+    // take the same files again.
+    const pasteFiles = onPasteFiles
+        ? (event) => {
+            const { files, types } = event.clipboardData;
+            // Rich text comes with a picture of itself, as office apps copy it: that stays text.
+            if (files.length === 0 || types.includes("text/html"))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            onPasteFiles(Array.from(files));
+        }
+        : undefined;
     const input = (_jsx(MentionInput, { ...inputProps, "aria-label": ariaLabel, autoFocus: autoFocus, className: cx(sheet ? sheetInput : pageInput, inputProps?.className), value: currentValue, onValueChange: setValue, triggers: mentions, mentionMark: mentionMark, listLabel: mentionsLabel, placeholder: placeholder, submitOn: variant === "feed" ? "mod+enter" : "enter", onSubmit: send }));
     // The sheet's send is quiet until there is something to send.
     const sendButton = (_jsx(IconButton, { "aria-label": submitLabel, disabled: !canSend, onClick: send, variant: sheet ? (canSend ? "primary" : "ghost") : "raised", children: _jsx(ArrowUpIcon, { className: icon({ size: "small" }), weight: "bold" }) }));
     const waiting = attachments ? _jsx("div", { "data-attachments": "", children: attachments }) : null;
     if (sheet) {
-        return (_jsxs("div", { ...props, className: cx(sheetComposer, className), "data-ciridae-ui": "", children: [tools && _jsx("div", { className: sheetSide, children: tools }), _jsxs("div", { className: sheetColumn, children: [waiting, _jsxs("div", { className: sheetBox, children: [input, actions && _jsx("div", { "data-actions": "", children: actions })] })] }), _jsx("div", { className: sheetSide, children: sendButton })] }));
+        return (_jsxs("div", { ...props, className: cx(sheetComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [tools && _jsx("div", { className: sheetSide, children: tools }), _jsxs("div", { className: sheetColumn, children: [waiting, _jsxs("div", { className: sheetBox, children: [input, actions && _jsx("div", { "data-actions": "", children: actions })] })] }), _jsx("div", { className: sheetSide, children: sendButton })] }));
     }
-    return (_jsxs("div", { ...props, className: cx(pageComposer, className), "data-ciridae-ui": "", children: [waiting, input, _jsxs("div", { className: composerFooter, children: [_jsx("div", { className: actionGroup, children: tools }), _jsxs("div", { className: actionGroup, children: [actions, sendButton] })] })] }));
+    return (_jsxs("div", { ...props, className: cx(pageComposer, className), "data-ciridae-ui": "", onPasteCapture: pasteFiles, children: [waiting, input, _jsxs("div", { className: composerFooter, children: [_jsx("div", { className: actionGroup, children: tools }), _jsxs("div", { className: actionGroup, children: [actions, sendButton] })] })] }));
 }
 /** A message bubble in the agent sheet. */
 export function ChatBubble({ side, groupPosition, className, ...props }) {
@@ -384,12 +420,13 @@ export function ChatAction({ className, ...props }) {
 /*
  * A conversation in time order. Close messages from one author read as a group: bubbles 4px
  * apart, groups 8px apart, the author's avatar beside the group's last bubble on the assistant's
- * side and the author and time once under it. The nearest scrolling ancestor, or the thread
- * itself, follows the newest entry.
+ * side and the author and time once under it. The nearest scrolling ancestor follows the newest
+ * entry while the reader is at its foot; scrolled up, reading back, a jump to the newest shows
+ * instead. A message the user sends always brings the thread to its foot.
  */
-export function ChatThread({ entries, assistant, renderCustom, formatTime, density = "comfortable", attachmentTiles = false, dayLabels = false, className, }) {
+export function ChatThread({ entries, assistant, renderCustom, formatTime, density = "comfortable", attachmentTiles = false, dayLabels = false, resolveAttachmentUrl, className, }) {
     const rootRef = useRef(null);
-    const { formatDateTime } = useCiridaeLocale();
+    const { formatDateTime, labels } = useCiridaeLocale();
     const authorOf = (entry) => entry.kind === "line" || entrySide(entry) === "user"
         ? undefined
         : ((entry.kind === "message" ? entry.author : undefined) ?? assistant);
@@ -398,20 +435,16 @@ export function ChatThread({ entries, assistant, renderCustom, formatTime, densi
         at: entry.at,
         author: authorOf(entry)?.name,
     })));
-    // Follows the newest entry.
-    const newestEntry = entries[entries.length - 1];
-    useEffect(() => {
-        const root = rootRef.current;
-        const scroller = root && findScrollContainer(root);
-        if (scroller)
-            scroller.scrollTop = scroller.scrollHeight;
-    }, [newestEntry?.id, entries.length]);
-    return (_jsx("div", { ref: rootRef, className: cx(thread, className), "data-ciridae-ui": "", "data-density": density === "compact" ? "compact" : undefined, children: entries.map((entry, index) => {
-            const previous = entries[index - 1];
-            const newDay = dayLabels && (!previous || !isSameDay(previous.at, entry.at));
-            const content = renderEntry(entry, index);
-            return newDay ? (_jsxs(Fragment, { children: [_jsx(DayLabel, { at: entry.at }), content] }, entry.id)) : (content);
-        }) }));
+    const newestUserMessage = [...entries]
+        .reverse()
+        .find((entry) => entry.kind === "message" && entry.side === "user");
+    const latest = useFollowLatest(rootRef, newestUserMessage?.id);
+    return (_jsxs("div", { ref: rootRef, className: cx(thread, className), "data-ciridae-ui": "", "data-density": density === "compact" ? "compact" : undefined, children: [entries.map((entry, index) => {
+                const previous = entries[index - 1];
+                const newDay = dayLabels && (!previous || !isSameDay(previous.at, entry.at));
+                const content = renderEntry(entry, index);
+                return newDay ? (_jsxs(Fragment, { children: [_jsx(DayLabel, { at: entry.at }), content] }, entry.id)) : (content);
+            }), _jsx("div", { className: latestSlot, children: latest.away && (_jsx(IconButton, { "aria-label": labels.chat.scrollToLatest, size: "compact", variant: "raised", onClick: latest.scrollToLatest, children: _jsx(ArrowDownIcon, { className: icon({ size: "small" }) }) })) })] }));
     function renderEntry(entry, index) {
         if (entry.kind === "line") {
             return (_jsx(ChatSystemLine, { tone: entry.tone, children: entry.text }, entry.id));
@@ -424,7 +457,7 @@ export function ChatThread({ entries, assistant, renderCustom, formatTime, densi
         const tiles = attachmentTiles && message?.attachments && message.attachments.length > 0
             ? message.attachments
             : null;
-        return (_jsxs("div", { className: entryBlock, "data-side": side, "data-group-position": position, children: [tiles && _jsx(AttachmentTiles, { attachments: tiles }), !(tiles && message?.body === "") && (_jsxs("div", { className: entryRow, title: message ? formatDateTime(entry.at) : undefined, children: [side === "assistant" && (_jsx("span", { className: avatarSlot, children: closesGroup && author && (_jsx(Avatar, { kind: author.kind, src: author.src, label: author.name, size: "small", "aria-hidden": "true" })) })), _jsx(ThreadEntryContent, { entry: entry, side: side, groupPosition: position, renderCustom: renderCustom, attachmentTiles: attachmentTiles }), message?.actions && !message.sending && (_jsx("span", { "data-entry-actions": "", children: message.actions }))] })), message?.sources && message.sources.length > 0 && (_jsx("span", { className: sourceRow, children: message.sources.map((source) => source.href ? (_jsx("a", { href: source.href, children: source.label }, source.id)) : (_jsx("span", { children: source.label }, source.id))) })), closesGroup && entry.kind !== "typing" && (_jsx("span", { className: entryFooter, children: message?.sending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", size: "compact" }), "Sending"] })) : (_jsxs("span", { children: [author && (_jsxs(_Fragment, { children: [author.label ?? author.name, " · "] })), _jsx(MessageTime, { at: entry.at, format: formatTime, dated: !dayLabels })] })) }))] }, entry.id));
+        return (_jsxs("div", { className: entryBlock, "data-side": side, "data-group-position": position, children: [tiles && _jsx(AttachmentTiles, { attachments: tiles, resolveUrl: resolveAttachmentUrl }), !(tiles && message?.body === "") && (_jsxs("div", { className: entryRow, title: message ? formatDateTime(entry.at) : undefined, children: [side === "assistant" && (_jsx("span", { className: avatarSlot, children: closesGroup && author && (_jsx(Avatar, { kind: author.kind, src: author.src, label: author.name, size: "small", "aria-hidden": "true" })) })), _jsx(ThreadEntryContent, { entry: entry, side: side, groupPosition: position, renderCustom: renderCustom, attachmentTiles: attachmentTiles }), message?.actions && !message.sending && (_jsx("span", { "data-entry-actions": "", children: message.actions }))] })), message?.sources && message.sources.length > 0 && (_jsx("span", { className: sourceRow, children: message.sources.map((source) => source.href ? (_jsx("a", { href: source.href, children: source.label }, source.id)) : (_jsx("span", { children: source.label }, source.id))) })), closesGroup && entry.kind !== "typing" && (_jsx("span", { className: entryFooter, children: message?.sending ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", size: "compact" }), labels.chat.sending] })) : (_jsxs("span", { children: [author && (_jsxs(_Fragment, { children: [author.label ?? author.name, " · "] })), _jsx(MessageTime, { at: entry.at, format: formatTime, dated: !dayLabels })] })) }))] }, entry.id));
     }
 }
 /** A day's heading in a thread that runs over days: Today, Yesterday, or the date. */
@@ -440,17 +473,23 @@ function DayLabel({ at }) {
 export function ChatSuggestions({ suggestions, onSelect, className }) {
     return (_jsx("div", { className: cx(suggestionList, className), "data-ciridae-ui": "", children: suggestions.map((text) => (_jsx("button", { type: "button", className: suggestion, onClick: () => onSelect(text), children: text }, text))) }));
 }
-function AttachmentTiles({ attachments }) {
-    const { labels } = useCiridaeLocale();
+function AttachmentTiles({ attachments, resolveUrl, }) {
     const [open, setOpen] = useState(null);
-    // The files the lightbox can show, in the message's order: those the service has a link for.
-    const viewable = attachments.flatMap((attachment) => attachment.url ? [{ ...attachment, url: attachment.url }] : []);
+    // The files the lightbox can show, in the message's order: those with a link or a way to one.
+    const viewable = attachments.filter((attachment) => attachment.url || resolveUrl);
     return (_jsxs("span", { className: attachmentTiles, children: [attachments.map((attachment) => {
-                const image = attachment.url && attachment.mediaType?.startsWith("image/");
-                const content = image ? (_jsx("img", { src: attachment.url ?? undefined, alt: attachment.name })) : (_jsxs(_Fragment, { children: [fileTypeIcon({ name: attachment.name, type: attachment.mediaType ?? "" }), _jsx("span", { children: attachment.name })] }));
-                const index = viewable.findIndex((item) => item.id === attachment.id);
-                return index >= 0 ? (_jsx("button", { type: "button", className: fileSquare, "data-image": image || undefined, "aria-label": labels.lightbox.preview(attachment.name), title: attachment.name, onClick: () => setOpen(index), children: content }, attachment.id)) : (_jsx("span", { className: fileSquare, title: attachment.name, children: content }, attachment.id));
-            }), _jsx(Lightbox, { items: viewable, index: open, onIndexChange: setOpen })] }));
+                const index = viewable.indexOf(attachment);
+                return (_jsx(AttachmentTile, { attachment: attachment, resolveUrl: resolveUrl, onOpen: index >= 0 ? () => setOpen(index) : undefined }, attachment.id));
+            }), _jsx(Lightbox, { items: viewable, index: open, onIndexChange: setOpen, resolveUrl: resolveUrl })] }));
+}
+/** An image's thumbnail, loaded through `resolveUrl` when it has no link, or the file's icon and name. */
+function AttachmentTile({ attachment, resolveUrl, onOpen, }) {
+    const { labels } = useCiridaeLocale();
+    const imageType = attachment.mediaType?.startsWith("image/") ?? false;
+    const { url } = useResolvedFileUrl(attachment, resolveUrl, imageType);
+    const image = imageType && url !== null;
+    const content = image ? (_jsx("img", { src: url, alt: attachment.name })) : (_jsxs(_Fragment, { children: [fileTypeIcon({ name: attachment.name, type: attachment.mediaType ?? "" }), _jsx("span", { children: attachment.name })] }));
+    return onOpen ? (_jsx("button", { type: "button", className: fileSquare, "data-image": image || undefined, "aria-label": labels.lightbox.preview(attachment.name), title: attachment.name, onClick: onOpen, children: content })) : (_jsx("span", { className: fileSquare, "data-image": image || undefined, title: attachment.name, children: content }));
 }
 function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachmentTiles: tiles, }) {
     const { labels } = useCiridaeLocale();
@@ -460,7 +499,7 @@ function ThreadEntryContent({ entry, side, groupPosition, renderCustom, attachme
         case "typing":
             return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: typingBubble, role: "status", "aria-label": labels.chat.typing, children: [entry.label, _jsx(ChatTypingDots, {})] }));
         case "failure":
-            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: errorBubble, role: "alert", children: [entry.message, _jsx(Button, { variant: "ghost", icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: entry.onRetry, children: "Retry" })] }));
+            return (_jsxs(ChatBubble, { side: side, groupPosition: groupPosition, className: errorBubble, role: "alert", children: [entry.message, _jsx(Button, { variant: "ghost", icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: entry.onRetry, children: labels.common.retry })] }));
         case "custom":
             return renderCustom?.(entry.data);
     }
@@ -535,6 +574,62 @@ function MessageTime({ at, format: formatAt, dated, }) {
                     : formatTime(at);
     return (_jsxs("time", { dateTime: new Date(at).toISOString(), className: messageTime, children: [_jsx("span", { "data-shown": "", children: text }), exact !== text && _jsx("span", { "data-exact": "", children: exact })] }));
 }
+/**
+ * Keeps the nearest scrolling ancestor of `rootRef` at its foot while the reader is there, as
+ * entries land or images in them load; `away` while they have scrolled up from it. A new
+ * `sentMessageId`, the user's own message, brings it to the foot from anywhere.
+ */
+function useFollowLatest(rootRef, sentMessageId) {
+    const [away, setAway] = useState(false);
+    const atFootRef = useRef(true);
+    const scrollerRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        const scroller = root && findScrollContainer(root);
+        if (!root || !scroller)
+            return;
+        scrollerRef.current = scroller;
+        const toFoot = () => {
+            scroller.scrollTop = scroller.scrollHeight;
+        };
+        // Content that grew since the last look keeps a reader at the foot there, whichever of its
+        // resize or the scroll it caused is seen first; a reader's own scroll leaves the height.
+        let lastHeight = scroller.scrollHeight;
+        const follow = () => {
+            const grew = scroller.scrollHeight !== lastHeight;
+            lastHeight = scroller.scrollHeight;
+            if (grew && atFootRef.current)
+                return toFoot();
+            const distance = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
+            atFootRef.current = distance < followDistancePx;
+            setAway(!atFootRef.current);
+        };
+        toFoot();
+        const resizes = new ResizeObserver(follow);
+        resizes.observe(root);
+        resizes.observe(scroller);
+        scroller.addEventListener("scroll", follow, { passive: true });
+        return () => {
+            resizes.disconnect();
+            scroller.removeEventListener("scroll", follow);
+        };
+    }, [rootRef]);
+    useEffect(() => {
+        const scroller = scrollerRef.current;
+        if (!scroller || sentMessageId === undefined)
+            return;
+        atFootRef.current = true;
+        scroller.scrollTop = scroller.scrollHeight;
+    }, [sentMessageId]);
+    return {
+        away,
+        scrollToLatest: () => {
+            const scroller = scrollerRef.current;
+            atFootRef.current = true;
+            scroller?.scrollTo({ top: scroller.scrollHeight, behavior: "smooth" });
+        },
+    };
+}
 function findScrollContainer(element) {
     for (let node = element; node; node = node.parentElement) {
         const { overflowY } = getComputedStyle(node);

package/dist/components/checkbox-item.d.ts

@@ -8,4 +8,4 @@ export type CheckboxItemProps = Omit<ComponentProps<typeof BaseCheckbox.Root>, "
     grip?: boolean;
     className?: string;
 };
-export declare function CheckboxItem({ children, meta, grip: showGrip, className, ...props }: CheckboxItemProps): import("@types/react").JSX.Element;
+export declare function CheckboxItem({ children, meta, grip: showGrip, className, ...props }: CheckboxItemProps): import("react").JSX.Element;

package/dist/components/checkbox-list.d.ts

@@ -48,4 +48,4 @@ export type CheckboxListProps = {
  * group. A long list can take a search, and bulk actions that touch only the items it leaves shown,
  * so nothing is ticked or cleared out of sight.
  */
-export declare function CheckboxList(props: CheckboxListProps): import("@types/react").JSX.Element;
+export declare function CheckboxList(props: CheckboxListProps): import("react").JSX.Element;

package/dist/components/chip.d.ts

@@ -14,4 +14,4 @@ export type ChipProps = Omit<ComponentProps<"span">, "children"> & {
     /** Compact recipients and inline tags; regular preserves the standalone chip. */
     size?: "regular" | "compact";
 };
-export declare function Chip({ children, icon, tone, onRemove, removeLabel, disabled, invalid, size, className, ...props }: ChipProps): import("@types/react").JSX.Element;
+export declare function Chip({ children, icon, tone, onRemove, removeLabel, disabled, invalid, size, className, ...props }: ChipProps): import("react").JSX.Element;

package/dist/components/collapsible.d.ts

@@ -5,4 +5,4 @@ export type CollapsibleProps = Omit<ComponentProps<typeof BaseCollapsible.Root>,
     label: ReactNode;
     children: ReactNode;
 };
-export declare function Collapsible({ label, children, ...rootProps }: CollapsibleProps): import("@types/react").JSX.Element;
+export declare function Collapsible({ label, children, ...rootProps }: CollapsibleProps): import("react").JSX.Element;

package/dist/components/color-theme.d.ts

@@ -33,7 +33,7 @@ export type ThemeProviderProps = {
  * `_light` values resolve through, so every component follows without
  * threading a prop.
  */
-export declare function ThemeProvider({ children, defaultColorTheme, storageKey, brand, palette, fonts, }: ThemeProviderProps): import("@types/react").JSX.Element;
+export declare function ThemeProvider({ children, defaultColorTheme, storageKey, brand, palette, fonts, }: ThemeProviderProps): import("react").JSX.Element;
 /** Throws outside a `ThemeProvider`, where there is no theme to report or change. */
 export declare function useColorTheme(): ColorThemeContextValue;
 /** Throws outside a `ThemeProvider` given a `brand`, where there is no name to show. */

package/dist/components/column-settings.d.ts

@@ -19,4 +19,4 @@ export declare function ColumnSettings<Row extends RowData>({ columns, columnVis
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     labels?: Partial<CiridaeLabels["table"]>;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/command-menu.d.ts

@@ -40,4 +40,4 @@ export type CommandMenuProps = {
     /** Shown when no row matches, above any `unfiltered` row; the locale's "No results" by default. */
     empty?: ReactNode;
 };
-export declare function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, }: CommandMenuProps): import("@types/react").JSX.Element;
+export declare function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, }: CommandMenuProps): import("react").JSX.Element;

package/dist/components/command-palette.d.ts

@@ -24,13 +24,13 @@ export declare function useCommandPalette({ hotkey }?: {
     hotkey?: HotkeyChord;
 }): {
     open: boolean;
-    setOpen: import("@types/react").Dispatch<import("@types/react").SetStateAction<boolean>>;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     toggle: () => void;
 };
-export declare function CommandPalette({ open, onOpenChange, groups, onQueryChange, footerItem, title, placeholder, empty, }: CommandPaletteProps): import("@types/react").JSX.Element;
+export declare function CommandPalette({ open, onOpenChange, groups, onQueryChange, footerItem, title, placeholder, empty, }: CommandPaletteProps): import("react").JSX.Element;
 export type CommandPaletteTriggerProps = ComponentProps<"button"> & {
     /** The hotkey `useCommandPalette` opens it with, shown at the end; Cmd/Ctrl+K by default. */
     hotkey?: HotkeyChord;
 };
 /** A search field's face, as a button that opens the palette; reads "Search" unless given text. */
-export declare function CommandPaletteTrigger({ hotkey, className, children, ...props }: CommandPaletteTriggerProps): import("@types/react").JSX.Element;
+export declare function CommandPaletteTrigger({ hotkey, className, children, ...props }: CommandPaletteTriggerProps): import("react").JSX.Element;

package/dist/components/command-palette.js

@@ -54,8 +54,7 @@ const trigger = css({
     alignItems: "center",
     gap: "control.iconGap",
     width: "100%",
-    // The sidebar row's height, so it sits in the column as one of its items.
-    height: "control.small",
+    height: "control.compact",
     paddingInlineStart: "control.compactInline",
     paddingInlineEnd: "control.iconGap",
     border: "1px solid token(colors.border.control)",

package/dist/components/copyable-id.d.ts

@@ -1,9 +1,11 @@
 import { type IconButtonProps } from "./button.js";
 /**
  * Copies `value` (or what it returns, read at the moment of copying) and reports `copied` for a
- * moment afterwards, for a check-mark confirmation.
+ * moment afterwards, for a check-mark confirmation. A copy the browser refuses, such as a denied
+ * permission or an insecure origin with no clipboard, goes to `onError`, or without one raises the
+ * kit's error toast, so a reader never pastes a stale clipboard thinking it holds the value.
  */
-export declare function useCopy(value: string | (() => string), onCopied?: () => void): {
+export declare function useCopy(value: string | (() => string), onCopied?: () => void, onError?: (error: unknown) => void): {
     copied: boolean;
     copy: () => undefined;
 };
@@ -16,10 +18,12 @@ export type CopyButtonProps = {
     variant?: "raised" | "ghost" | "inline";
     size?: IconButtonProps["size"];
     onCopied?: () => void;
+    /** A refused copy; the kit's error toast without it. */
+    onError?: (error: unknown) => void;
     className?: string;
 };
 /** A button that copies `value`, its icon turning into a check once copied. */
-export declare function CopyButton({ value, label, variant, size, onCopied, className, }: CopyButtonProps): import("@types/react").JSX.Element;
+export declare function CopyButton({ value, label, variant, size, onCopied, onError, className, }: CopyButtonProps): import("react").JSX.Element;
 /**
  * A long identifier, such as an error's trace ID, shown short and copied whole on click so a
  * reader can hand it to support.
@@ -28,10 +32,23 @@ export declare function CopyableId({ value, label, className, }: {
     value: string;
     label?: string;
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** Text shown in full with a copy control; `label` names what gets copied, such as a key's name. */
 export declare function CopyableText({ text, label, className, }: {
     text: string;
     label: string;
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+/**
+ * A value to paste elsewhere, such as a command or a connection code, as a labelled read-only
+ * field with a copy button: it selects on focus and reads like the field it is pasted into. The
+ * row stays while there is no value yet, showing `placeholder`. The value is masked from session
+ * recorders, since such values are often credentials.
+ */
+export declare function CopyField({ label, value, placeholder, className, }: {
+    label: string;
+    value: string | undefined;
+    /** What an absent value means, such as that it is not generated yet. */
+    placeholder?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/copyable-id.js

@@ -3,8 +3,11 @@ import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
 import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
+import { Field, FieldLabel } from "./form-layout.js";
 import { icon } from "./icon.js";
+import { Input } from "./input.js";
 import { useCiridaeLocale } from "./locale.js";
+import { useToast } from "./toast.js";
 const copyableId = css({
     display: "inline-flex",
     alignItems: "center",
@@ -23,20 +26,41 @@ const shownLength = 8;
 const copiedFeedbackMs = 1500;
 /**
  * Copies `value` (or what it returns, read at the moment of copying) and reports `copied` for a
- * moment afterwards, for a check-mark confirmation.
+ * moment afterwards, for a check-mark confirmation. A copy the browser refuses, such as a denied
+ * permission or an insecure origin with no clipboard, goes to `onError`, or without one raises the
+ * kit's error toast, so a reader never pastes a stale clipboard thinking it holds the value.
  */
-export function useCopy(value, onCopied) {
+export function useCopy(value, onCopied, onError) {
     const [copied, setCopied] = useState(false);
+    const { labels } = useCiridaeLocale();
+    const toast = useToast();
     useEffect(() => {
         if (!copied)
             return;
         const timer = setTimeout(() => setCopied(false), copiedFeedbackMs);
         return () => clearTimeout(timer);
     }, [copied]);
-    const copy = () => void navigator.clipboard.writeText(typeof value === "function" ? value() : value).then(() => {
+    // `await` rather than `.catch`: an insecure origin has no `navigator.clipboard` at all and
+    // throws before a promise exists.
+    const writeValue = async () => {
+        try {
+            await navigator.clipboard.writeText(typeof value === "function" ? value() : value);
+        }
+        catch (error) {
+            if (onError)
+                onError(error);
+            else
+                toast.add({
+                    variant: "error",
+                    title: labels.clipboard.copyFailed,
+                    description: labels.clipboard.copyByHand,
+                });
+            return;
+        }
         setCopied(true);
         onCopied?.();
-    });
+    };
+    const copy = () => void writeValue();
     return { copied, copy };
 }
 const inlineCopy = css({
@@ -51,8 +75,8 @@ const inlineCopy = css({
     _focusVisible: { focusRing: "outer", borderRadius: "control" },
 });
 /** A button that copies `value`, its icon turning into a check once copied. */
-export function CopyButton({ value, label, variant = "raised", size, onCopied, className, }) {
-    const { copied, copy } = useCopy(value, onCopied);
+export function CopyButton({ value, label, variant = "raised", size, onCopied, onError, className, }) {
+    const { copied, copy } = useCopy(value, onCopied, onError);
     const { labels } = useCiridaeLocale();
     const name = copied
         ? labels.common.copied
@@ -134,3 +158,19 @@ export function CopyableText({ text, label, className, }) {
     };
     return (_jsxs("span", { className: copyableText, "data-ciridae-ui": "", onMouseEnter: measureOverflow, children: [_jsx("span", { ref: box, className: cx(marqueeBox, className), title: text, children: _jsx("span", { children: text }) }), _jsx("button", { type: "button", className: copyTextButton, "aria-label": labels.common.copy(label), "data-copied": copied || undefined, onClick: copy, children: copied ? (_jsx(CheckIcon, { className: icon({ size: "small" }) })) : (_jsx(CopyIcon, { className: icon({ size: "small" }) })) })] }));
 }
+const copyFieldRow = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+    alignItems: "end",
+    gap: "layout.tightGap",
+});
+const copyFieldValue = css({ fontFamily: "mono", fontSize: "code" });
+/**
+ * A value to paste elsewhere, such as a command or a connection code, as a labelled read-only
+ * field with a copy button: it selects on focus and reads like the field it is pasted into. The
+ * row stays while there is no value yet, showing `placeholder`. The value is masked from session
+ * recorders, since such values are often credentials.
+ */
+export function CopyField({ label, value, placeholder, className, }) {
+    return (_jsxs("div", { className: cx(copyFieldRow, className), "data-ciridae-ui": "", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { children: label }), _jsx(Input, { className: cx("ph-no-capture", copyFieldValue), "data-sentry-mask": true, onFocus: (event) => event.target.select(), placeholder: placeholder, readOnly: true, value: value ?? "" })] }), value !== undefined && _jsx(CopyButton, { label: label, value: value, variant: "ghost" })] }));
+}

package/dist/components/data-display.d.ts

@@ -19,12 +19,12 @@ export declare function Avatar({ label, src, size, kind, icon, badge, color, cla
     icon?: ReactNode;
     badge?: ReactNode;
     color?: AvatarColor;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export declare function Divider({ inset, className, ...props }: Omit<ComponentProps<typeof BaseSeparator>, "className"> & {
     className?: string;
     /** `menu` insets it to a menu's or a popover's rows. */
     inset?: "none" | "menu";
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export type DescriptionRow = [label: string, value: ReactNode];
 /**
  * Label-value pairs in two columns. Rows whose value is `null` or `undefined` are left out, so
@@ -36,7 +36,7 @@ export declare function DescriptionList({ rows, density, loading, className, ...
     rows: DescriptionRow[];
     density?: "default" | "compact";
     loading?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * Scrollable block of literal text, such as a command or a generated file. `copy` adds a copy
  * button with that text, which can differ from what is shown (e.g. masked secrets).
@@ -44,4 +44,4 @@ export declare function DescriptionList({ rows, density, loading, className, ...
 export declare function CodeBlock({ className, copy, copyLabel, ...props }: ComponentProps<"pre"> & {
     copy?: string;
     copyLabel?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/data-grid.d.ts

@@ -38,10 +38,10 @@ export type TableColumnMeta = {
     hideOnNarrow?: boolean;
 };
 declare const tableFeatureSet: {
-    rowSortingFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnVisibilityFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnOrderingFeature: import("@tanstack/react-table/dist").TableFeature;
-    sortedRowModel: (table: import("@tanstack/react-table/dist").Table<any, any>) => () => import("@tanstack/react-table/dist").RowModel<any, any>;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     columnMeta: TableColumnMeta;
 };
 export type TableFeatureSet = typeof tableFeatureSet;
@@ -52,10 +52,10 @@ export type TableColumns<Row extends RowData> = ReturnType<ColumnHelper<TableFea
  * columns render without one. See `TableColumnMeta` for the per-column options.
  */
 export declare function createTableColumns<Row extends RowData>(): ColumnHelper<{
-    rowSortingFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnVisibilityFeature: import("@tanstack/react-table/dist").TableFeature;
-    columnOrderingFeature: import("@tanstack/react-table/dist").TableFeature;
-    sortedRowModel: (table: import("@tanstack/react-table/dist").Table<any, any>) => () => import("@tanstack/react-table/dist").RowModel<any, any>;
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
     columnMeta: TableColumnMeta;
 }, Row>;
 /** A column's id and name as column settings list them. */
@@ -156,7 +156,7 @@ export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "ch
  * hover-revealed row actions, groups, loading, empty and no-results states. `role="table"`; Enter
  * on a pressable row opens it.
  */
-export declare function DataGrid<Row extends RowData>({ data, columns, getRowId, variant, density, sorting: sortingProp, defaultSorting, onSortingChange, manualSorting, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection, onRowSelectionChange, stickySelectColumn, columnVisibility: columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, headerMenu, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation, virtualize, rowActions, renderRowDetail, groupBy, renderGroupRow, loading, empty, noResults, filtered, hideHeader, fill, narrowScreenLayout, footer, labels: ownLabels, className, frameClassName, style, ...props }: DataGridProps<Row>): import("@types/react").JSX.Element;
+export declare function DataGrid<Row extends RowData>({ data, columns, getRowId, variant, density, sorting: sortingProp, defaultSorting, onSortingChange, manualSorting, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection, onRowSelectionChange, stickySelectColumn, columnVisibility: columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, headerMenu, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation, virtualize, rowActions, renderRowDetail, groupBy, renderGroupRow, loading, empty, noResults, filtered, hideHeader, fill, narrowScreenLayout, footer, labels: ownLabels, className, frameClassName, style, ...props }: DataGridProps<Row>): import("react").JSX.Element;
 export type TableProps<Row extends RowData> = Omit<DataGridProps<Row>, "defaultSorting" | "empty"> & {
     /** The sort the table starts with; `defaultSorting` on `DataGrid`. */
     initialSorting?: SortingState;
@@ -167,4 +167,4 @@ export type TableProps<Row extends RowData> = Omit<DataGridProps<Row>, "defaultS
  * `DataGrid` with the plain look: flush with its section, heads in caps, rows that light on hover
  * when they lead somewhere.
  */
-export declare function Table<Row extends RowData>({ variant, initialSorting, emptyMessage, ...props }: TableProps<Row>): import("@types/react").JSX.Element;
+export declare function Table<Row extends RowData>({ variant, initialSorting, emptyMessage, ...props }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/date-range-picker.d.ts

@@ -41,4 +41,4 @@ export declare function DateRangePicker({ value: ownValue, defaultValue, onValue
     today?: Date;
     labels?: Partial<CiridaeLabels["dateRange"]>;
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/date-time.d.ts

@@ -8,4 +8,4 @@ import { type DateInput } from "./locale.js";
 export declare function DateTime({ value, mode, }: {
     value: DateInput | null;
     mode?: "auto" | "date" | "dateTime" | "relative";
-}): import("@types/react").JSX.Element | null;
+}): import("react").JSX.Element | null;

package/dist/components/dialog-height-context.d.ts

@@ -1,2 +1,2 @@
 /** A Wizard starts a new height scope on each step; filtering within that step keeps its height. */
-export declare const DialogHeightResetContext: import("@types/react").Context<(() => void) | null>;
+export declare const DialogHeightResetContext: import("react").Context<(() => void) | null>;

package/dist/components/document-viewer.d.ts

@@ -49,7 +49,7 @@ export type DocumentViewerProps = Omit<ComponentProps<"div">, "children"> & {
     actions?: ReactNode;
     labels?: Partial<CiridaeLabels["documentViewer"]>;
 };
-export declare function DocumentViewer({ pages, regions, activeRegionId: ownActiveRegionId, defaultActiveRegionId, onActiveRegionChange, pageId: ownPageId, defaultPageId, onPageChange, zoom: ownZoom, defaultZoom, onZoomChange, aside, actions, labels: ownLabels, className, ...props }: DocumentViewerProps): import("@types/react").JSX.Element;
+export declare function DocumentViewer({ pages, regions, activeRegionId: ownActiveRegionId, defaultActiveRegionId, onActiveRegionChange, pageId: ownPageId, defaultPageId, onPageChange, zoom: ownZoom, defaultZoom, onZoomChange, aside, actions, labels: ownLabels, className, ...props }: DocumentViewerProps): import("react").JSX.Element;
 export type DocumentFieldProps = useRender.ComponentProps<"button"> & {
     /** The region this field was read from; selecting either marks the other. */
     regionId: string;
@@ -59,4 +59,4 @@ export type DocumentFieldProps = useRender.ComponentProps<"button"> & {
  * selected, marked while its region is hovered, and scrolled into view when its region is
  * selected on the page.
  */
-export declare function DocumentField({ regionId, render, className, onClick, onMouseEnter, onMouseLeave, ...props }: DocumentFieldProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function DocumentField({ regionId, render, className, onClick, onMouseEnter, onMouseLeave, ...props }: DocumentFieldProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;