@ciridae/ui 1.0.2 → 1.0.4

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

@@ -4,8 +4,11 @@ export type CheckboxItemProps = Omit<ComponentProps<typeof BaseCheckbox.Root>, "
     children: ReactNode;
     /** Shown muted at the row's end, such as where the item comes from. */
     meta?: ReactNode;
-    /** Shows a drag handle on hover, for a row that can be reordered. */
-    grip?: boolean;
+    /**
+     * Shows a drag handle on hover, for a row that can be reordered; `locked` keeps the handle's
+     * room empty, for a row that stays put among ones that move.
+     */
+    grip?: boolean | "locked";
     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-item.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { CheckIcon, DotsSixVerticalIcon, MinusIcon } from "@phosphor-icons/react";
+import { DotsSixVerticalIcon } from "@phosphor-icons/react";
 import { css, cx } from "#primitives/css";
-import { checkIndicator, checkMark } from "./form-controls.js";
+import { CheckGlyph, checkIndicator, checkMark, checkMarkEdge } from "./form-controls.js";
 import { icon } from "./icon.js";
 /*
  * A checkbox as a whole row: the mark, its label, and what else the row has to say, with the hover
@@ -23,8 +23,10 @@ const row = css({
     cursor: "pointer",
     transitionProperty: "background",
     transitionDuration: "fast",
-    _hover: { background: "bg.glass" },
-    "&:has(:focus-visible)": { focusRing: "outer" },
+    // The selected tint in dark and the row wash in light, as a menu row hovers; focus rings the row
+    // inside its own edge.
+    _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
+    "&:has(:focus-visible)": { focusRing: "inset" },
     "&:has([data-disabled])": { opacity: "disabled", cursor: "not-allowed" },
 });
 // The grip only shows once the row is pointed at, so a list of rows is not a column of grips.
@@ -37,9 +39,11 @@ const grip = css({
     transitionProperty: "opacity",
     transitionDuration: "fast",
     "label:hover > &, label:focus-within > &": { opacity: "1" },
+    // A locked row keeps the grip's room, so its label lines up with the rows that move.
+    "&[data-locked]": { visibility: "hidden" },
 });
 const labelText = css({ flex: "1", minWidth: "0" });
 const metaText = css({ flexShrink: "0", color: "fg.subtle", fontSize: "code" });
 export function CheckboxItem({ children, meta, grip: showGrip, className, ...props }) {
-    return (_jsxs("label", { className: cx(row, className), "data-ciridae-ui": "", children: [showGrip && (_jsx("span", { className: grip, "aria-hidden": "true", children: _jsx(DotsSixVerticalIcon, { className: icon({ size: "small" }) }) })), _jsx(BaseCheckbox.Root, { ...props, className: checkMark({ focus: "row" }), children: _jsx(BaseCheckbox.Indicator, { className: checkIndicator, children: props.indeterminate ? _jsx(MinusIcon, { weight: "bold" }) : _jsx(CheckIcon, { weight: "bold" }) }) }), _jsx("span", { className: labelText, children: children }), meta !== undefined && _jsx("span", { className: metaText, children: meta })] }));
+    return (_jsxs("label", { className: cx(row, className), "data-ciridae-ui": "", children: [showGrip && (_jsx("span", { className: grip, "aria-hidden": "true", "data-locked": showGrip === "locked" || undefined, children: _jsx(DotsSixVerticalIcon, { className: icon({ size: "small" }) }) })), _jsx(BaseCheckbox.Root, { ...props, ...checkMarkEdge, className: checkMark({ focus: "row" }), children: _jsx(BaseCheckbox.Indicator, { className: checkIndicator, children: _jsx(CheckGlyph, { mixed: props.indeterminate }) }) }), _jsx("span", { className: labelText, children: children }), meta !== undefined && _jsx("span", { className: metaText, children: meta })] }));
 }

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

@@ -1,5 +1,10 @@
 import type { Tone } from "./badge.js";
 import type { ComponentProps, ReactNode } from "react";
+/** A small neutral label naming a category, such as "Prefilled". A status takes a `Badge`. */
+export declare function Tag({ icon, children, className, ...props }: Omit<ComponentProps<"span">, "children"> & {
+    children: ReactNode;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
 export type ChipProps = Omit<ComponentProps<"span">, "children"> & {
     children: ReactNode;
     /** A mark before the label. */
@@ -14,4 +19,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/chip.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { XIcon } from "@phosphor-icons/react";
 import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
+import { faceEdge } from "./gradient-edge.js";
 import { icon as iconStyle } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 const chip = css({
@@ -36,6 +37,31 @@ const chip = css({
     "&[data-tone=warning]": { background: "bg.warningSubtle", color: "accent.yellow" },
     "&[data-tone=danger], &[data-invalid]": { borderColor: "accent.red", color: "accent.red" },
 });
+/* An 18px label on the raised face: 12px text over a 2px inset and the edge's 1px. */
+const tag = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    paddingBlock: "control.trackInset",
+    paddingInlineStart: "control.iconGap",
+    paddingInlineEnd: "layout.controlGap",
+    border: "1px solid transparent",
+    borderRadius: "round",
+    background: "token(gradients.raised)",
+    color: "fg.label",
+    fontFamily: "sans",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    whiteSpace: "nowrap",
+    "& > svg": { flexShrink: "0", fontSize: "icon.small" },
+});
+/** A small neutral label naming a category, such as "Prefilled". A status takes a `Badge`. */
+export function Tag({ icon, children, className, ...props }) {
+    const edge = faceEdge("raised");
+    return (_jsxs("span", { ...props, className: cx(tag, edge.className, className), "data-ciridae-ui": "", "data-edge": edge["data-edge"], children: [icon, children] }));
+}
 export function Chip({ children, icon, tone = "neutral", onRemove, removeLabel, disabled = false, invalid = false, size = "regular", className, ...props }) {
     const { labels } = useCiridaeLocale();
     const name = removeLabel ?? (typeof children === "string" ? children : "");

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/column-settings.js

@@ -102,7 +102,7 @@ export function ColumnSettings({ columns, columnVisibility, onColumnVisibilityCh
     };
     const setShown = (id, visible) => onColumnVisibilityChange({ ...columnVisibility, [id]: visible });
     const dropMarker = (_jsx("span", { className: dropSlot, "aria-hidden": "true", children: _jsx("span", {}) }));
-    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange, density: "compact", trigger: trigger ?? (_jsx(Button, { variant: "secondary", size: "medium", icon: _jsx(ColumnsIcon, { className: icon({ size: "small" }) }), children: labels.columns })), children: _jsxs("div", { className: panel, children: [_jsxs("div", { className: heading, children: [labels.columns, onReset && (_jsx(Button, { variant: "ghost", onClick: onReset, children: labels.reset }))] }), _jsxs("div", { className: list, onDragEnd: finishDrag, children: [locked.map((column) => (_jsx(CheckboxItem, { checked: true, disabled: true, meta: labels.alwaysShown, children: column.label }, column.id))), shown.map((column, index) => (_jsxs("span", { className: css({ display: "contents" }), children: [dropIndex === index && dragging !== column.id && dropMarker, _jsx("span", { className: draggable, draggable: reorderable, "data-dragging": dragging === column.id || undefined, onDragStart: (event) => {
+    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange, density: "compact", trigger: trigger ?? (_jsx(Button, { variant: "secondary", size: "medium", icon: _jsx(ColumnsIcon, { className: icon({ size: "small" }) }), children: labels.columns })), children: _jsxs("div", { className: panel, children: [_jsxs("div", { className: heading, children: [labels.columns, onReset && (_jsx(Button, { variant: "ghost", onClick: onReset, children: labels.reset }))] }), _jsxs("div", { className: list, onDragEnd: finishDrag, children: [locked.map((column) => (_jsx(CheckboxItem, { checked: true, disabled: true, grip: reorderable && "locked", meta: labels.alwaysShown, children: column.label }, column.id))), shown.map((column, index) => (_jsxs("span", { className: css({ display: "contents" }), children: [dropIndex === index && dragging !== column.id && dropMarker, _jsx("span", { className: draggable, draggable: reorderable, "data-dragging": dragging === column.id || undefined, onDragStart: (event) => {
                                         event.dataTransfer.effectAllowed = "move";
                                         setDragging(column.id);
                                     }, onDragOver: (event) => dragOver(event, index), onDrop: (event) => {

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

@@ -6,6 +6,8 @@ export type CommandMenuItem = {
     icon?: ReactNode;
     /** Muted text after the label, such as a record's title. */
     detail?: string;
+    /** What the row is, at its end, such as "Invoice" or "Job". */
+    kind?: string;
     /** The hotkey that runs it while the menu is open, such as "Mod+J", shown at the row's end. */
     shortcut?: HotkeyChord;
     /** More text the query matches, such as a job's customer. */
@@ -39,5 +41,7 @@ export type CommandMenuProps = {
     placeholder?: string;
     /** Shown when no row matches, above any `unfiltered` row; the locale's "No results" by default. */
     empty?: ReactNode;
+    /** What the menu searches, at the end of its footer, such as "Records, people and actions". */
+    searchScope?: 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, searchScope, }: CommandMenuProps): import("react").JSX.Element;

package/dist/components/command-menu.js

@@ -12,9 +12,9 @@ import { Command } from "cmdk";
 import { useLayoutEffect, useRef, useState, } from "react";
 import { css } from "#primitives/css";
 import { scoreCommandMatch } from "./command-match.js";
-import { HotkeyLayer, useHotkeys } from "./hotkeys.js";
+import { formatForDisplay, HotkeyLayer, useHotkeys } from "./hotkeys.js";
 import { icon } from "./icon.js";
-import { ShortcutHint } from "./keycap.js";
+import { Keycap, ShortcutHint } from "./keycap.js";
 import { useCiridaeLocale } from "./locale.js";
 const backdrop = css({
     position: "fixed",
@@ -26,22 +26,23 @@ const backdrop = css({
     "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
     _motionReduce: { transition: "none" },
 });
+// The palette is a sheet in a glass shell, as a modal is: the shell blurs the page in dark, the
+// sheet blurs it in light.
 const popup = css({
     zIndex: "dialog",
     position: "fixed",
-    top: "15dvh",
+    top: "18dvh",
     left: "50%",
     display: "flex",
-    flexDirection: "column",
     width: "calc(100vw - token(spacing.layout.pageGap) * 2)",
-    maxWidth: "overlay.dialog",
-    overflow: "hidden",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "action",
-    background: "bg.card",
+    maxWidth: "calc(token(sizes.overlay.palette) + token(spacing.menu.inset) * 2 + 2px)",
+    padding: "menu.inset",
+    border: "1px solid token(colors.border.divider)",
+    borderRadius: "shell",
+    background: "bg.modalShell",
+    backdropFilter: "blur(token(blurs.modalShell))",
     color: "fg.primary",
     textStyle: "body",
-    boxShadow: "card",
     outline: "none",
     transform: "translateX(-50%)",
     transitionProperty: "opacity",
@@ -49,6 +50,18 @@ const popup = css({
     "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
     _motionReduce: { transition: "none" },
     _phone: { top: "layout.pageGap" },
+    "& > [cmdk-root]": {
+        display: "flex",
+        flexDirection: "column",
+        flex: "1",
+        minWidth: "0",
+        overflow: "hidden",
+        border: "1px solid token(colors.border.divider)",
+        borderRadius: "inset",
+        background: "bg.modalSheet",
+        backdropFilter: "blur(token(blurs.modalSheet))",
+        boxShadow: "soft",
+    },
 });
 const visuallyHidden = css({
     position: "absolute",
@@ -65,9 +78,9 @@ const field = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    height: "control.search",
-    paddingInline: "control.compactInline",
-    borderBottom: "1px solid token(colors.border.control)",
+    height: "commandPalette.query",
+    flexShrink: "0",
+    paddingInline: "control.inline",
     color: "fg.muted",
     "& > input": {
         flex: "1",
@@ -78,35 +91,52 @@ const field = css({
         background: "transparent",
         color: "fg.primary",
         font: "inherit",
+        fontWeight: "medium",
+        letterSpacing: "compact",
         _placeholder: { color: "fg.muted" },
     },
 });
+// The rules between the query, the results and the footer stop short of the sheet's edges.
+const divider = css({
+    flexShrink: "0",
+    height: "border.hairline",
+    marginInline: "panel.compact",
+    background: "border.divider",
+});
 const list = css({
     maxHeight: "min(60dvh, 420px)",
     overflowY: "auto",
     overscrollBehavior: "contain",
-    "& [cmdk-group] + [cmdk-group]": { borderTop: "1px solid token(colors.border.subtle)" },
+    padding: "panel.compact",
+    "& [cmdk-group-items]": { display: "grid", gap: "control.trackInset" },
     "& [cmdk-group-heading]": {
         paddingInline: "control.compactInline",
         paddingTop: "control.block",
-        paddingBottom: "layout.tightGap",
-        color: "fg.muted",
+        paddingBottom: "control.compactBlock",
+        color: "fg.subtle",
         fontSize: "code",
         fontWeight: "medium",
+        letterSpacing: "compact",
+        lineHeight: "tight",
     },
-    // The last group's rows run to the popup's foot, with the field's inset under them.
-    "& [cmdk-group]:last-child": { paddingBottom: "layout.tightGap" },
+    "& [cmdk-group] + [cmdk-group]": { marginTop: "control.trackInset" },
 });
 const row = css({
     display: "flex",
     alignItems: "center",
-    gap: "layout.controlGap",
-    minHeight: "menu.item",
+    gap: "layout.contentGap",
+    minHeight: "commandPalette.row",
     paddingInline: "control.compactInline",
-    fontSize: "caption",
-    lineHeight: "body",
+    borderRadius: "control",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
     cursor: "pointer",
-    "&[data-selected=true]": { background: "bg.rowHover" },
+    "&[data-selected=true]": {
+        background: "token(gradients.selected)",
+        boxShadow: "inset 0 0 0 1px token(colors.border.divider)",
+    },
     "& > svg": { flexShrink: "0", color: "fg.muted" },
     "& > [data-label]": {
         flexShrink: "0",
@@ -121,7 +151,14 @@ const row = css({
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
-        color: "fg.muted",
+        color: "fg.subtle",
+        fontSize: "code",
+    },
+    "& > [data-kind]": {
+        flexShrink: "0",
+        marginInlineStart: "auto",
+        color: "fg.subtle",
+        fontSize: "code",
     },
     "& > [data-shortcut]": { marginInlineStart: "auto" },
     // A link row's anchor fills the row, so its content lays out as a plain row's does. Choosing
@@ -150,7 +187,14 @@ const row = css({
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            color: "fg.muted",
+            color: "fg.subtle",
+            fontSize: "code",
+        },
+        "& > [data-kind]": {
+            flexShrink: "0",
+            marginInlineStart: "auto",
+            color: "fg.subtle",
+            fontSize: "code",
         },
     },
 });
@@ -160,6 +204,24 @@ const emptyRow = css({
     color: "fg.muted",
     fontSize: "caption",
 });
+// How to drive the palette from the keyboard, and what it searches.
+const footer = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.clusterGap",
+    minHeight: "commandPalette.footer",
+    flexShrink: "0",
+    paddingInline: "control.inline",
+    color: "fg.subtle",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    _phone: { display: "none" },
+});
+const footerHints = css({ display: "flex", alignItems: "center", gap: "layout.clusterGap" });
+const footerHint = css({ display: "flex", alignItems: "center", gap: "control.iconGap" });
+const footerKeys = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
 /**
  * The shown rows' hotkeys, in the menu's layer: it is the newest scope, so a row's hotkey wins over
  * the page's own binding for the same keys, such as Cmd+J opening the chat empty.
@@ -176,10 +238,14 @@ function CommandMenuShortcuts({ items, run, }) {
         : []));
     return null;
 }
+/** The keys the palette's footer names, as its keycaps write them. */
+const escapeKey = formatForDisplay("Escape");
+const moveKeys = [formatForDisplay("ArrowUp"), formatForDisplay("ArrowDown")];
+const openKey = formatForDisplay("Enter");
 /** Past this many rows the menu draws only those near the view. */
 const virtualizeRowsPast = 50;
-/** A row's height before it is measured: the menu's item height. */
-const menuRowHeight = 30;
+/** A row's height before it is measured: the palette's row height, `sizes.commandPalette.row`. */
+const menuRowHeight = 40;
 // The rows lie over a box as tall as all of them, each moved down to its place.
 const virtualLines = css({
     position: "relative",
@@ -189,7 +255,7 @@ const virtualLines = css({
 function matchesQuery(item, query) {
     return item.unfiltered === true || scoreCommandMatch(item, query) > 0;
 }
-export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, }) {
+export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, searchScope, }) {
     const { labels } = useCiridaeLocale();
     const title = ownTitle ?? labels.commandMenu.title;
     const placeholder = ownPlaceholder ?? labels.common.search;
@@ -306,8 +372,8 @@ export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups,
                         links.current.set(item.id, element);
                     else
                         links.current.delete(item.id);
-                } })) : (_jsx(CommandMenuRowContent, { item: item })), item.shortcut && _jsx(ShortcutHint, { "data-shortcut": "", hotkey: item.shortcut })] }, item.id));
-    return (_jsx(BaseDialog.Root, { open: open, onOpenChange: setOpen, children: _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(CommandMenuShortcuts, { items: shownGroups.flatMap((group) => group.items), run: run }), _jsx(BaseDialog.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsxs(BaseDialog.Popup, { className: popup, "data-ciridae-ui": "", ref: popupRef, finalFocus: restoreFocus, children: [_jsx(BaseDialog.Title, { className: visuallyHidden, children: title }), _jsxs(Command, { label: title, shouldFilter: false, loop: true, ...(virtualized ? { value: selectedId, onValueChange: setChosenId } : {}), onKeyDown: moveSelection, children: [_jsxs("div", { className: field, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(Command.Input, { autoFocus: true, placeholder: placeholder, value: query, onValueChange: onQueryChange })] }), _jsxs(Command.List, { ref: setListElement, className: list, children: [!matched && (_jsx("div", { className: emptyRow, role: "presentation", children: empty })), virtualized ? (_jsx("div", { className: virtualLines, style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => {
+                } })) : (_jsx(CommandMenuRowContent, { item: item })), item.shortcut && _jsx(ShortcutHint, { boxed: true, "data-shortcut": "", hotkey: item.shortcut })] }, item.id));
+    return (_jsx(BaseDialog.Root, { open: open, onOpenChange: setOpen, children: _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(CommandMenuShortcuts, { items: shownGroups.flatMap((group) => group.items), run: run }), _jsx(BaseDialog.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsxs(BaseDialog.Popup, { className: popup, "data-ciridae-ui": "", ref: popupRef, finalFocus: restoreFocus, children: [_jsx(BaseDialog.Title, { className: visuallyHidden, children: title }), _jsxs(Command, { label: title, shouldFilter: false, loop: true, ...(virtualized ? { value: selectedId, onValueChange: setChosenId } : {}), onKeyDown: moveSelection, children: [_jsxs("div", { className: field, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(Command.Input, { autoFocus: true, placeholder: placeholder, value: query, onValueChange: onQueryChange }), _jsx(Keycap, { "aria-hidden": "true", children: escapeKey })] }), _jsx("div", { className: divider }), _jsxs(Command.List, { ref: setListElement, className: list, children: [!matched && (_jsx("div", { className: emptyRow, role: "presentation", children: empty })), virtualized ? (_jsx("div", { className: virtualLines, style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => {
                                                     const line = lines[virtualItem.index];
                                                     if (!line)
                                                         return null;
@@ -317,10 +383,10 @@ export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups,
                                                         style: { transform: `translateY(${virtualItem.start}px)` },
                                                     };
                                                     return line.kind === "heading" ? (_jsx("div", { ref: measured.ref, "data-index": measured.index, style: measured.style, "cmdk-group-heading": "", role: "presentation", children: line.heading }, line.key)) : (drawItem(line.item, measured));
-                                                }) })) : (shownGroups.map((group, groupIndex) => (_jsx(Command.Group, { heading: group.heading, children: group.items.map((item) => drawItem(item)) }, group.id ?? group.heading ?? groupIndex))))] })] })] })] }) }) }));
+                                                }) })) : (shownGroups.map((group, groupIndex) => (_jsx(Command.Group, { heading: group.heading, children: group.items.map((item) => drawItem(item)) }, group.id ?? group.heading ?? groupIndex))))] }), _jsx("div", { className: divider }), _jsxs("div", { className: footer, children: [_jsxs("div", { className: footerHints, children: [_jsxs("span", { className: footerHint, children: [_jsx("span", { className: footerKeys, children: moveKeys.map((key) => (_jsx(Keycap, { "aria-hidden": "true", children: key }, key))) }), labels.commandMenu.move] }), _jsxs("span", { className: footerHint, children: [_jsx(Keycap, { "aria-hidden": "true", children: openKey }), labels.commandMenu.open] }), _jsxs("span", { className: footerHint, children: [_jsx(Keycap, { "aria-hidden": "true", children: escapeKey }), labels.common.close] })] }), searchScope] })] })] })] }) }) }));
 }
 function CommandMenuRowContent({ item }) {
-    return (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { "data-label": "", children: item.label }), item.detail && _jsx("span", { "data-detail": "", children: item.detail })] }));
+    return (_jsxs(_Fragment, { children: [item.icon, _jsx("span", { "data-label": "", children: item.label }), item.detail && _jsx("span", { "data-detail": "", children: item.detail }), item.kind && _jsx("span", { "data-kind": "", children: item.kind })] }));
 }
 /** A link row's anchor; the row's own selection clicks it, so it never takes focus itself. */
 function CommandMenuLink({ item, register, }) {

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

@@ -18,19 +18,23 @@ export type CommandPaletteProps = {
     title?: string;
     placeholder?: string;
     empty?: ReactNode;
+    /** What the palette searches, at the end of its footer, such as "Records, people and actions". */
+    searchScope?: ReactNode;
 };
 /** Whether the palette is open; `hotkey` (Cmd/Ctrl+K by default) toggles it from anywhere. */
 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, searchScope, }: 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;
+    /** The icon alone, round, for the rail; it is named "Search" unless given an `aria-label`. */
+    compact?: boolean;
 };
 /** 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, compact, className, children, ...props }: CommandPaletteTriggerProps): import("react").JSX.Element;

package/dist/components/command-palette.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * The app's Cmd+K palette on `CommandMenu`: groups of pages, records, people and actions the app
  * supplies, matched loosely on label, detail and keywords and ranked closest first within each
@@ -25,7 +25,7 @@ export function useCommandPalette({ hotkey = "Mod+K" } = {}) {
     const toggle = useCallback(() => setOpen((current) => !current), []);
     return { open, setOpen, toggle };
 }
-export function CommandPalette({ open, onOpenChange, groups, onQueryChange, footerItem, title, placeholder, empty, }) {
+export function CommandPalette({ open, onOpenChange, groups, onQueryChange, footerItem, title, placeholder, empty, searchScope, }) {
     const [query, setQuery] = useState("");
     const changeQuery = (next) => {
         setQuery(next);
@@ -47,31 +47,40 @@ export function CommandPalette({ open, onOpenChange, groups, onQueryChange, foot
     const footer = typed && footerItem ? footerItem(typed) : null;
     return (_jsx(CommandMenu, { open: open, onOpenChange: onOpenChange, query: query, onQueryChange: changeQuery, groups: footer
             ? [...rankedGroups, { id: "footer", items: [{ ...footer, unfiltered: true }] }]
-            : rankedGroups, title: title, placeholder: placeholder, empty: empty }));
+            : rankedGroups, title: title, placeholder: placeholder, empty: empty, searchScope: searchScope }));
 }
+// A form field's well on the canvas, as the sidebar draws it; in the rail, a round icon.
 const trigger = css({
     display: "flex",
     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.sidebarSearch",
     paddingInlineStart: "control.compactInline",
-    paddingInlineEnd: "control.iconGap",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "action",
-    background: "bg.field",
+    paddingInlineEnd: "control.block",
+    border: "1px solid token(colors.border.canvas)",
+    borderRadius: "control",
+    background: "bg.formField",
     color: "fg.muted",
+    _light: { color: "fg.primary" },
     font: "inherit",
     fontWeight: "medium",
     letterSpacing: "compact",
+    lineHeight: "tight",
     cursor: "pointer",
     _hover: { color: "fg.primary" },
     _focusVisible: { focusRing: "outer" },
     "& > [data-shortcut]": { marginInlineStart: "auto", _phone: { display: "none" } },
+    "&[data-compact]": {
+        justifyContent: "center",
+        width: "control.compact",
+        height: "control.compact",
+        padding: "none",
+        borderRadius: "round",
+    },
 });
 /** A search field's face, as a button that opens the palette; reads "Search" unless given text. */
-export function CommandPaletteTrigger({ hotkey = "Mod+K", className, children, ...props }) {
+export function CommandPaletteTrigger({ hotkey = "Mod+K", compact = false, className, children, ...props }) {
     const { labels } = useCiridaeLocale();
-    return (_jsxs("button", { type: "button", "aria-haspopup": "dialog", ...props, className: cx(trigger, className), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), children ?? labels.common.search, _jsx(ShortcutHint, { "data-shortcut": "", hotkey: hotkey })] }));
+    return (_jsxs("button", { type: "button", "aria-haspopup": "dialog", "aria-label": compact ? labels.common.search : undefined, ...props, className: cx(trigger, className), "data-ciridae-ui": "", "data-compact": compact || undefined, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), !compact && (_jsxs(_Fragment, { children: [children ?? labels.common.search, _jsx(ShortcutHint, { boxed: true, "data-shortcut": "", hotkey: hotkey })] }))] }));
 }

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;