@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/data-display.js

@@ -6,10 +6,11 @@ import { Fragment } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { CopyButton } from "./copyable-id.js";
 import { Skeleton } from "./skeleton.js";
-// The neutral avatar is the Round 2 one: a person or the agent on the raised glass face, an
-// organization as the text-colored tile the workspace switcher shows. A colored one derives its
-// fill, text, and border from one `--avatar-hue`, mixed toward the surface or the text color so it
-// holds in both themes. The hues are brighter than the accent tokens so avatars read apart.
+// The neutral avatar is a person or the agent on the raised glass gradient inside its gradient
+// hairline, an organization the text-colored tile the workspace switcher shows. A colored one
+// derives its fill, text, and border from one `--avatar-hue`, mixed toward the opaque surface or
+// the text color so it holds in both themes. The hues are brighter than the accent tokens so
+// avatars read apart.
 const avatar = css({
     display: "inline-grid",
     placeItems: "center",
@@ -41,24 +42,25 @@ const avatar = css({
     // A person, or the agent: a circle on the glass face, or a pale circle in its hue.
     "&[data-kind=user], &[data-kind=agent]": {
         borderRadius: "round",
-        background: "bg.raised",
+        background: "token(gradients.raised)",
         color: "fg.primary",
     },
+    "--edge": "token(gradients.border.raised)",
     "&[data-kind=agent], &[data-icon]": { color: "fg.secondary" },
     // An icon fills the same share of every size, so marks match whatever avatar they sit beside.
     "&:is([data-kind=agent], [data-icon]) svg": { width: "58%", height: "58%" },
     // An icon stands on its own, with no circle or ring, so it fills most of its box.
     "&[data-icon]": { background: "transparent", "& svg": { width: "80%", height: "80%" } },
     "&:is([data-kind=user], [data-kind=agent]):not([data-color=neutral])": {
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 30%, token(colors.bg.card))",
-        background: "color-mix(in srgb, var(--avatar-hue) 16%, token(colors.bg.card))",
+        borderColor: "color-mix(in srgb, var(--avatar-hue) 30%, token(colors.bg.surface))",
+        background: "color-mix(in srgb, var(--avatar-hue) 16%, token(colors.bg.surface))",
         color: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.fg.primary))",
     },
     // A project: a pale tile edged and lettered in the hue's strong shade.
     "&[data-kind=project]": {
         borderRadius: "20%",
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.bg.card))",
-        background: "color-mix(in srgb, var(--avatar-hue) 14%, token(colors.bg.card))",
+        borderColor: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.bg.surface))",
+        background: "color-mix(in srgb, var(--avatar-hue) 14%, token(colors.bg.surface))",
         color: "color-mix(in srgb, var(--avatar-hue) 75%, token(colors.fg.primary))",
         fontWeight: "semibold",
     },
@@ -81,12 +83,16 @@ const avatar = css({
     "&[data-size=large]": {
         width: "avatar.large",
         height: "avatar.large",
-        fontSize: "heading",
+        fontSize: "body",
     },
     // A list row's owner, and the workspace switcher's mark.
     "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
+    // A record's owner, and the empty slot where one goes.
+    "&[data-size=owner]": { width: "avatar.owner", height: "avatar.owner" },
     // A menu item's leading avatar.
     "&[data-size=menu]": { width: "avatar.menu", height: "avatar.menu" },
+    // The agent standing on its own, the kit's Agent avatar.
+    "&[data-size=agent]": { width: "avatar.agent", height: "avatar.agent" },
     "&[data-size=small]": { width: "avatar.small", height: "avatar.small", fontSize: "avatar.small" },
     // The inline mark's size, so a project's tile lines up with icons and provider logos.
     "&[data-size=mark]": { width: "mark.inline", height: "mark.inline", fontSize: "avatar.mark" },
@@ -125,7 +131,22 @@ const avatarBadge = css({
 export function Avatar({ label, src, size = "medium", kind = "user", icon, badge, color = "neutral", className, ...props }) {
     const initials = labelInitials(label, kind === "organization" ? 1 : 2);
     const glass = !icon && color === "neutral" && (kind === "user" || kind === "agent");
-    return (_jsxs(BaseAvatar.Root, { ...props, "aria-label": label, "data-ciridae-ui": "", "data-size": size, "data-kind": kind, "data-color": color, "data-icon": icon ? "" : undefined, "data-edge": glass ? "glass" : undefined, className: cx(avatar, className), children: [src && _jsx(BaseAvatar.Image, { src: src, alt: "", className: avatarImage }), _jsx(BaseAvatar.Fallback, { className: avatarFallback, children: icon ?? (kind === "agent" ? _jsx(SparkleIcon, { weight: "fill" }) : initials) }), badge && _jsx("span", { className: avatarBadge, children: badge })] }));
+    return (_jsxs(BaseAvatar.Root, { ...props, "aria-label": label, "data-ciridae-ui": "", "data-size": size, "data-kind": kind, "data-color": color, "data-icon": icon ? "" : undefined, "data-edge": glass ? "gradient" : undefined, className: cx(avatar, className), children: [src && _jsx(BaseAvatar.Image, { src: src, alt: "", className: avatarImage }), _jsx(BaseAvatar.Fallback, { className: avatarFallback, children: icon ?? (kind === "agent" ? _jsx(SparkleIcon, { weight: "fill" }) : initials) }), badge && _jsx("span", { className: avatarBadge, children: badge })] }));
+}
+// No owner yet: the avatar's circle as a dashed ring, empty.
+const unassignedAvatar = css({
+    display: "inline-block",
+    flexShrink: "0",
+    width: "avatar.owner",
+    height: "avatar.owner",
+    border: "1px dashed token(colors.border.control)",
+    borderRadius: "round",
+    "&[data-size=small]": { width: "avatar.small", height: "avatar.small" },
+    "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
+});
+/** The slot where an owner's avatar goes, before anyone owns the record. */
+export function UnassignedAvatar({ size = "owner", className, ...props }) {
+    return (_jsx("span", { ...props, className: cx(unassignedAvatar, className), "data-ciridae-ui": "", "data-size": size }));
 }
 /** Up to `count` capital initials from a name's first words. */
 function labelInitials(label, count) {
@@ -141,13 +162,13 @@ const divider = cva({
     variants: {
         inset: {
             none: {},
-            // Between a menu's or a popover's groups: inset to its rows' text, a little room above and
-            // below.
+            // Between a menu's or a popover's groups, as the glass menu's divider: inset to its rows'
+            // text, a little room above and below.
             menu: {
                 width: "auto",
                 marginBlock: "layout.tightGap",
                 marginInline: "menu.itemInline",
-                background: "border.panel",
+                background: "border.divider",
             },
         },
     },
@@ -155,31 +176,60 @@ const divider = cva({
 export function Divider({ inset = "none", className, ...props }) {
     return (_jsx(BaseSeparator, { ...props, "data-ciridae-ui": "", className: cx(divider({ inset }), className) }));
 }
+/*
+ * Labels are the muted grey, values the text color. `facts` sets each label against its value at
+ * the far edge, a hairline under every row but the last; `compact` is the key-value pair, its
+ * labels a 120px column of 12px type.
+ */
 const descriptionList = cva({
     base: {
         display: "grid",
         gridTemplateColumns: "max-content minmax(0, 1fr)",
         margin: "none",
-        "& dt": { color: "fg.muted" },
+        "& dt": { color: "fg.label" },
         "& dd": { margin: "none", overflowWrap: "anywhere" },
         "& a": { color: "inherit" },
     },
     variants: {
         density: {
             default: { rowGap: "layout.controlGap", columnGap: "layout.sectionGap" },
-            compact: { rowGap: "control.trackInset", columnGap: "layout.clusterGap" },
+            compact: {
+                gridTemplateColumns: "120px minmax(0, 1fr)",
+                rowGap: "layout.clusterGap",
+                columnGap: "layout.contentGap",
+                "& dt": { fontSize: "code", fontWeight: "medium" },
+                "& dd": { fontSize: "body", fontWeight: "medium" },
+            },
+        },
+        layout: {
+            columns: {},
+            facts: {
+                gridTemplateColumns: "minmax(0, 1fr) auto",
+                alignItems: "center",
+                rowGap: "0",
+                columnGap: "layout.contentGap",
+                "& dt, & dd": {
+                    paddingBlock: "panel.default",
+                    borderBottom: "1px solid token(colors.border.divider)",
+                    lineHeight: "tight",
+                },
+                "& > :nth-last-child(-n+2)": { borderBottom: "0" },
+                "& dt": { fontSize: "code", fontWeight: "medium" },
+                "& dd": { fontSize: "body", fontWeight: "medium", textAlign: "end" },
+            },
         },
     },
 });
 const placeholderValueWidths = [96, 120, 144];
 /**
  * Label-value pairs in two columns. Rows whose value is `null` or `undefined` are left out, so
- * callers can list every field a record may carry. `compact` tightens the rows for dense output.
+ * callers can list every field a record may carry. `compact` sets them as key-value pairs;
+ * `layout="facts"` as fact rows, each value at the far edge over a hairline.
  * `loading` keeps every row's label and draws a placeholder for its value, so the list arrives at
  * the size it loads to; build the rows from the record that may not have loaded yet.
  */
-export function DescriptionList({ rows, density = "default", loading = false, className, ...props }) {
-    return (_jsx("dl", { ...props, "aria-busy": loading || undefined, "data-ciridae-ui": "", className: cx(descriptionList({ density }), className), children: rows.map(([label, value], index) => loading ? (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: _jsx(Skeleton, { shape: "text", style: { width: placeholderValueWidths[index % placeholderValueWidths.length] } }) })] }, label)) : value === null || value === undefined ? null : (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] }, label))) }));
+export function DescriptionList({ rows, density = "default", layout = "columns", loading = false, className, ...props }) {
+    return (_jsx("dl", { ...props, "aria-busy": loading || undefined, "data-ciridae-ui": "", className: cx(descriptionList({ density, layout }), className), children: rows.map(([label, value], index) => loading ? (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: _jsx(Skeleton, { shape: "text", style: { width: placeholderValueWidths[index % placeholderValueWidths.length] } }) })] }, label)) : value === null || value === undefined ? null : (_jsxs(Fragment, { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] }, label))) }));
 }
 const codeBlock = css({
     margin: "none",
@@ -219,3 +269,72 @@ export function CodeBlock({ className, copy, copyLabel = "text", ...props }) {
         return block;
     return (_jsxs("div", { className: codeBlockFrame, children: [block, _jsx("span", { className: codeBlockCopy, children: _jsx(CopyButton, { value: copy, label: copyLabel }) })] }));
 }
+/*
+ * Detail field: one field of a record as a row, the kit's Detail field. A 150px label column of
+ * 12px grey beside the 14px value and, under it, where the value came from and who vouches for it,
+ * or a description when a badge rides beside the value. `selected` is the open field; `inset`
+ * sets it in the selected glass between hairlines; `highlighted` is the warm band for a field that
+ * needs a look, such as two sources that disagree.
+ */
+const detailField = css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.contentGap",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "&[data-divider]": { borderBottom: "1px solid token(colors.border.divider)" },
+    "&[data-state=default]:hover": { background: "bg.rowHover" },
+    "&[data-state=selected]": { background: "token(gradients.selected)" },
+    "&:is([data-state=inset], [data-state=highlighted])": {
+        borderBlock: "1px solid token(colors.border.divider)",
+    },
+    "&[data-state=inset]": { background: "token(gradients.selected)" },
+    "&[data-state=highlighted]": { background: "bg.warningTint" },
+});
+// The label sits on the value's first line: 14px of text, or the badge's 24.
+const detailFieldLabel = css({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: "0",
+    width: "150px",
+    minHeight: "token(fontSizes.body)",
+    color: "fg.label",
+    fontSize: "code",
+    "[data-badge] > &": { minHeight: "control.shortcut" },
+});
+const detailFieldValue = css({ display: "grid", gap: "control.iconGap", flex: "1", minWidth: "0" });
+// A badge that does not fit beside the value drops under it.
+const detailFieldValueLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    color: "fg.primary",
+    fontSize: "body",
+    "[data-badge] &": { minHeight: "control.shortcut" },
+});
+const detailFieldNote = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    columnGap: "layout.contentGap",
+    rowGap: "layout.tightGap",
+    color: "fg.muted",
+    fontSize: "code",
+    _light: { color: "fg.secondary" },
+});
+const detailFieldNoteItem = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    "& > svg": { flexShrink: "0", fontSize: "icon.small" },
+});
+const detailFieldAction = css({ flexShrink: "0", alignSelf: "center" });
+export function DetailField({ label, value, source, assurance, badge, description, action, state = "default", divider = true, className, ...props }) {
+    const notes = [source, assurance].filter((note) => note !== undefined);
+    return (_jsxs("div", { ...props, className: cx(detailField, className), "data-ciridae-ui": "", "data-state": state, "data-divider": divider || undefined, "data-badge": badge !== undefined || undefined, children: [_jsx("span", { className: detailFieldLabel, children: label }), _jsxs("span", { className: detailFieldValue, children: [_jsxs("span", { className: detailFieldValueLine, children: [value, badge] }), notes.length > 0 && (_jsx("span", { className: detailFieldNote, children: notes.map((note, index) => (_jsxs("span", { className: detailFieldNoteItem, children: [note.icon, note.label] }, index))) })), description !== undefined && _jsx("span", { className: detailFieldNote, children: description })] }), action !== undefined && _jsx("span", { className: detailFieldAction, children: action })] }));
+}

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

@@ -33,7 +33,11 @@ export type TableColumnMeta = {
     locked?: boolean;
     /** Holds the row's own link instead of the first column, when the first holds links of its own. */
     rowLink?: boolean;
-    skeleton?: ReactNode;
+    /**
+     * What the column draws while the list loads, shaped like its cells: `lines` a primary line over
+     * a smaller one, `pill` a badge, `person` an avatar and a name, or any node. A line by default.
+     */
+    skeleton?: "lines" | "pill" | "person" | ReactNode;
     /** Drops the column on phone-width screens, so the columns that identify a row keep their room. */
     hideOnNarrow?: boolean;
 };
@@ -87,6 +91,14 @@ export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "ch
     onSortingChange?: (sorting: SortingState) => void;
     /** The rows arrive in the order `sorting` asks for, such as from a server. */
     manualSorting?: boolean;
+    /**
+     * Shows one page of the sorted rows, `number` counting from 1, for a list paged in the browser
+     * under a `Pagination`. Leave it out when `data` is already the page.
+     */
+    page?: {
+        number: number;
+        rowsPerPage: number;
+    };
     /** Adds a checkbox column; a function says which rows can be ticked. */
     enableRowSelection?: boolean | ((row: Row) => boolean);
     rowSelection?: RowSelectionState;
@@ -156,7 +168,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("react").JSX.Element;
+export declare function DataGrid<Row extends RowData>({ data, columns, getRowId, variant, density, sorting: sortingProp, defaultSorting, onSortingChange, manualSorting, page, 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;

package/dist/components/data-grid.js

@@ -61,7 +61,7 @@ function scrollingAncestor(element) {
  * hover-revealed row actions, groups, loading, empty and no-results states. `role="table"`; Enter
  * on a pressable row opens it.
  */
-export function DataGrid({ data, columns, getRowId, variant = "framed", density = "default", sorting: sortingProp, defaultSorting = emptySorting, onSortingChange, manualSorting = false, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection = emptySelection, onRowSelectionChange, stickySelectColumn = false, columnVisibility: columnVisibilityProp, defaultColumnVisibility = emptyVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder = emptyOrder, onColumnOrderChange, headerMenu = false, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation = false, virtualize = false, rowActions, renderRowDetail, groupBy, renderGroupRow, loading = false, empty, noResults, filtered, hideHeader = false, fill = false, narrowScreenLayout = "columns", footer, labels: ownLabels, className, frameClassName, style, ...props }) {
+export function DataGrid({ data, columns, getRowId, variant = "framed", density = "default", sorting: sortingProp, defaultSorting = emptySorting, onSortingChange, manualSorting = false, page, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection = emptySelection, onRowSelectionChange, stickySelectColumn = false, columnVisibility: columnVisibilityProp, defaultColumnVisibility = emptyVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder = emptyOrder, onColumnOrderChange, headerMenu = false, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation = false, virtualize = false, rowActions, renderRowDetail, groupBy, renderGroupRow, loading = false, empty, noResults, filtered, hideHeader = false, fill = false, narrowScreenLayout = "columns", footer, labels: ownLabels, className, frameClassName, style, ...props }) {
     const { labels: localeLabels } = useCiridaeLocale();
     const labels = { ...localeLabels.table, ...ownLabels };
     const [sorting, setSorting] = useControllableState(sortingProp, defaultSorting, onSortingChange);
@@ -149,7 +149,10 @@ export function DataGrid({ data, columns, getRowId, variant = "framed", density
     }
     const selectable = enableRowSelection !== undefined && enableRowSelection !== false;
     const canSelect = (row) => typeof enableRowSelection === "function" ? enableRowSelection(row) : selectable;
-    const rows = table.getRowModel().rows;
+    const sortedRows = table.getRowModel().rows;
+    const rows = page
+        ? sortedRows.slice((page.number - 1) * page.rowsPerPage, page.number * page.rowsPerPage)
+        : sortedRows;
     const selectableIds = rows.filter((row) => canSelect(row.original)).map((row) => row.id);
     const setSelected = (ids, selected) => {
         const next = Object.fromEntries(Object.entries(rowSelection).filter(([id]) => selected || !ids.includes(id)));
@@ -487,14 +490,12 @@ export function DataGrid({ data, columns, getRowId, variant = "framed", density
                     headRefs.current.set(column.id, element);
                 else
                     headRefs.current.delete(column.id);
-            }, children: menuItems.length > 0 ? (_jsx(Menu, { align: meta?.align === "end" ? "end" : "start", trigger: _jsxs("button", { type: "button", className: headButton, "data-sorted": sorted || undefined, children: [content, caret] }), items: menuItems })) : column.getCanSort() ? (_jsxs("button", { type: "button", className: headButton, "data-sorted": sorted || undefined, "data-toggle": "", onClick: column.getToggleSortingHandler(), children: [content, caret] })) : (content) }, column.id));
+            }, children: menuItems.length > 0 ? (_jsx(Menu, { align: meta?.align === "end" ? "end" : "start", trigger: _jsxs("button", { type: "button", className: headButton, "data-sorted": sorted || undefined, children: [content, caret] }), items: menuItems })) : column.getCanSort() ? (_jsxs("button", { type: "button", className: headButton, "data-sorted": sorted || undefined, onClick: column.getToggleSortingHandler(), children: [content, caret] })) : (content) }, column.id));
     };
     const showEmpty = !loading && rows.length === 0;
     const isFiltered = filtered ?? (filters !== undefined && filters.length > 0);
     const emptyContent = isFiltered && noResults !== undefined ? noResults : (empty ?? labels.nothingToShow);
-    return (_jsxs("div", { ref: frameRef, className: cx(frame, frameClassName), "data-ciridae-ui": "", "data-variant": variant, "data-density": density, "data-fill": fill || undefined, "data-stacked": narrowScreenLayout === "stacked" || undefined, children: [_jsxs("div", { ...props, ref: gridRef, role: "table", "aria-busy": loading || undefined, className: cx(grid, className), style: { ...style, gridTemplateColumns: template }, children: [!hideHeader && (_jsxs("div", { role: "row", className: headRow, children: [selectable && (_jsx("div", { ref: selectHeadRef, role: "columnheader", className: cx(headCell, selectCell, stickySelectColumn && pinnedCell), children: _jsx(Checkbox, { "aria-label": labels.selectAll, checked: allSelected === "all" && selectableIds.length > 0, indeterminate: allSelected === "some", disabled: loading || selectableIds.length === 0, onCheckedChange: (checked) => setSelected(selectableIds, checked) }) })), shownColumns.map(headerCell), rowActions && (_jsx("div", { role: "columnheader", className: headCell, children: _jsx("span", { className: visuallyHidden, children: labels.actions }) }))] })), loading ? (skeletonRows.map((rowIndex) => (_jsxs("div", { role: "row", className: bodyRow, "data-skeleton": "", children: [selectable && _jsx("div", { role: "cell", className: cx(cell, selectCell) }), shownColumns.map((column, columnIndex) => (_jsx("div", { role: "cell", className: cellClass(column), "data-align": column.columnDef.meta?.align, children: column.columnDef.meta?.skeleton ?? (_jsx(Skeleton, { shape: "text", style: {
-                                        width: skeletonWidths[(rowIndex + columnIndex) % skeletonWidths.length],
-                                    } })) }, column.id))), rowActions && _jsx("div", { role: "cell", className: cell })] }, rowIndex)))) : showEmpty ? (_jsx("div", { role: "row", className: emptyRow, children: _jsx("div", { role: "cell", "aria-colspan": columnCount, className: emptyCell, children: emptyContent }) })) : (drawBody())] }), footer, filterColumn && filterField && onFiltersChange && (_jsx(Popover, { open: true, onOpenChange: (open) => {
+    return (_jsxs("div", { ref: frameRef, className: cx(frame, frameClassName), "data-ciridae-ui": "", "data-variant": variant, "data-density": density, "data-fill": fill || undefined, "data-stacked": narrowScreenLayout === "stacked" || undefined, children: [_jsxs("div", { ...props, ref: gridRef, role: "table", "aria-busy": loading || undefined, className: cx(grid, className), style: { ...style, gridTemplateColumns: template }, children: [!hideHeader && (_jsxs("div", { role: "row", className: headRow, children: [selectable && (_jsx("div", { ref: selectHeadRef, role: "columnheader", className: cx(headCell, selectCell, stickySelectColumn && pinnedCell), children: _jsx(Checkbox, { "aria-label": labels.selectAll, checked: allSelected === "all" && selectableIds.length > 0, indeterminate: allSelected === "some", disabled: loading || selectableIds.length === 0, onCheckedChange: (checked) => setSelected(selectableIds, checked) }) })), shownColumns.map(headerCell), rowActions && (_jsx("div", { role: "columnheader", className: headCell, children: _jsx("span", { className: visuallyHidden, children: labels.actions }) }))] })), loading ? (skeletonRows.map((rowIndex) => (_jsxs("div", { role: "row", className: bodyRow, "data-skeleton": "", style: { opacity: 1 - rowIndex * skeletonRowFade }, children: [selectable && (_jsx("div", { role: "cell", className: cx(cell, selectCell), children: _jsx(Skeleton, { shape: "square", className: skeletonCheckbox }) })), shownColumns.map((column, columnIndex) => (_jsx("div", { role: "cell", className: cellClass(column), "data-align": column.columnDef.meta?.align, children: _jsx(SkeletonCell, { shape: column.columnDef.meta?.skeleton, width: skeletonWidths[(rowIndex + columnIndex) % skeletonWidths.length] }) }, column.id))), rowActions && _jsx("div", { role: "cell", className: cell })] }, rowIndex)))) : showEmpty ? (_jsx("div", { role: "row", className: emptyRow, children: _jsx("div", { role: "cell", "aria-colspan": columnCount, className: emptyCell, children: emptyContent }) })) : (drawBody())] }), footer, filterColumn && filterField && onFiltersChange && (_jsx(Popover, { open: true, onOpenChange: (open) => {
                     if (!open)
                         setFilterColumnId(null);
                 }, anchor: headRefs.current.get(filterColumn.id) ?? null, density: "compact", children: _jsx("div", { className: columnFilter, children: _jsx(FilterValueEditor, { field: filterField, value: filters?.find((filter) => filter.field === filterField.key), onChange: (filter) => onFiltersChange(replaceFilter(filters ?? [], filter)) }) }) }))] }));
@@ -511,6 +512,8 @@ const emptySelection = {};
 const emptyVisibility = {};
 const emptyOrder = [];
 const skeletonRows = [0, 1, 2, 3, 4];
+// Each loading row a little fainter than the one above, so the list reads as fading out.
+const skeletonRowFade = 0.08;
 const skeletonWidths = ["70%", "45%", "85%", "55%"];
 /** What takes a click of its own inside a row, so pressing it leaves the row alone. */
 const interactiveSelector = "a:not([data-row-link]), button, input, label, select, textarea, [role=button], [role=checkbox], [role=combobox], [role=menuitem], [contenteditable=true]";
@@ -568,7 +571,7 @@ function compareSortValues(left, right, columnId) {
 // The surface a pinned cell rebuilds: the list's own surfaces are translucent, so a pinned cell
 // redraws them on the solid canvas, or the columns scrolling under it would show through.
 const frame = css({
-    "--row-gap-inline": "token(spacing.layout.pageGap)",
+    "--row-gap-inline": "token(spacing.layout.clusterGap)",
     "--row-pad-inline": "token(spacing.panel.comfortable)",
     "--row-pad-block": "token(spacing.panel.default)",
     "--pinned-background": "token(colors.bg.canvas)",
@@ -583,9 +586,9 @@ const frame = css({
     "&[data-variant=framed]": {
         border: "1px solid token(colors.border.panel)",
         borderRadius: "action",
-        background: "bg.hover",
+        background: "token(gradients.card)",
+        boxShadow: "card",
         _light: {
-            background: "bg.card",
             "--pinned-background": "token(colors.bg.card)",
             "--pinned-layers": "none",
         },
@@ -593,10 +596,11 @@ const frame = css({
     "&[data-variant=framed][data-density=compact]": {
         "--row-pad-block": "token(spacing.control.compactBlock)",
     },
+    // A plain list has no frame to inset from: its cells pad themselves, half the column gap a side.
     "&[data-variant=plain]": {
         "--row-gap-inline": "0px",
         "--row-pad-inline": "0px",
-        "--row-pad-block": "token(spacing.table.rowBlock)",
+        "--row-pad-block": "token(spacing.panel.default)",
         "--pinned-layers": "inset 0 0 0 999px token(colors.bg.panel)",
     },
     "&[data-variant=plain][data-density=compact]": {
@@ -615,6 +619,8 @@ const grid = css({
     color: "fg.primary",
     fontSize: "body",
     letterSpacing: "compact",
+    // The kit's cells set their text at 100%; a plain list's lines may wrap, so they keep room.
+    lineHeight: "tight",
     "[data-variant=plain] > &": { lineHeight: "compact" },
     // On a phone a stacked list lays each row out as one block: the first cell takes the whole
     // first line and the others wrap under it, an end-aligned one pushed to the far edge.
@@ -646,17 +652,13 @@ const rowBase = {
     borderBottom: "1px solid token(colors.border.panel)",
     "[data-variant=plain] &": { borderBottomColor: "border.subtle" },
 };
+// The kit's header row is 44px: its 12px labels centred, whatever the cells' block padding.
 const headRow = css(rowBase, {
+    minHeight: "table.headRow",
     color: "fg.primary",
     fontSize: "code",
     fontWeight: "medium",
     lineHeight: "tight",
-    "[data-variant=plain] &": {
-        color: "fg.muted",
-        fontSize: "caption",
-        letterSpacing: "label",
-        textTransform: "uppercase",
-    },
     "[data-fill] &": {
         position: "sticky",
         top: "0",
@@ -671,8 +673,9 @@ const bodyRow = css(rowBase, {
     position: "relative",
     outline: "none",
     "&:last-child": { borderBottom: "0" },
+    // 56px: a 32px avatar or two-line cell inside the padding, the bottom hairline inside that.
     "[data-variant=framed][data-density=default] &": {
-        minHeight: "calc(token(sizes.control.compact) + var(--row-pad-block) * 2 + 1px)",
+        minHeight: "calc(token(sizes.control.compact) + var(--row-pad-block) * 2)",
     },
     // The row's wash is one layer over every cell, the pinned ones included, so they tint together.
     _after: {
@@ -685,10 +688,11 @@ const bodyRow = css(rowBase, {
         transitionProperty: "background",
         transitionDuration: "fast",
     },
+    // A ticked row shows it in its checkbox alone; the row open beside the list wears the selected
+    // glass, and keeps it under the pointer.
     "&[data-pressable]": { cursor: "pointer" },
-    "&[data-pressable]:hover": { "--row-wash": "token(colors.bg.rowHover)" },
-    "&:is([data-selected], [data-active])": { "--row-wash": "token(colors.bg.selected)" },
-    "&:is([data-selected], [data-active]):hover": { "--row-wash": "token(colors.bg.selectedHover)" },
+    "&[data-pressable]:not([data-active]):hover": { "--row-wash": "token(colors.bg.rowHover)" },
+    "&[data-active]": { "--row-wash": "token(gradients.selected)" },
     _focusVisible: { focusRing: "inset", "--row-wash": "token(colors.bg.rowHover)" },
     // Its anchor stands for the row and sits in a cell that may clip, so the row draws the ring.
     "&:has(a[data-row-link]:focus-visible)": {
@@ -715,11 +719,13 @@ const emptyRow = css({ gridColumn: "1 / -1" });
 const cellBase = {
     minWidth: "0",
     paddingBlock: "var(--row-pad-block)",
-    "[data-variant=plain] &": { paddingInline: "table.cell" },
+    "[data-variant=plain] &": { paddingInline: "panel.compact" },
     "&[data-align=end]": { textAlign: "end", justifyContent: "flex-end" },
     "&[data-align=end] > [data-shape]": { marginInlineStart: "auto" },
 };
+// The row's hairline sits inside its bottom padding, as the kit's 56px row draws it.
 const cell = css(cellBase, {
+    paddingBottom: "calc(var(--row-pad-block) - token(sizes.border.hairline))",
     fontWeight: "medium",
     "[data-variant=plain] &": { fontWeight: "normal" },
     "& a": { color: "inherit", textDecoration: "none" },
@@ -817,13 +823,42 @@ const headButton = css({
     cursor: "pointer",
     borderRadius: "control",
     _focusVisible: { focusRing: "outer" },
-    "& svg": { flexShrink: "0", color: "fg.muted" },
+    // The sort caret shows only while the column is sorted, pointed at, focused or its menu open.
+    "& svg": { flexShrink: "0", color: "fg.muted", opacity: "0", transition: "opacity .15s" },
     "&[data-sorted] svg": { color: "fg.primary" },
-    // A plain list's sort toggle shows its caret only while pointed at or sorted.
-    // A sort toggle shows its caret only while pointed at or sorted; a head menu's always shows.
-    "&[data-toggle] svg": { opacity: "0", transition: "opacity .15s" },
-    "&[data-toggle]:is(:hover, :focus-visible, [data-sorted]) svg": { opacity: "1" },
+    "&:is(:hover, :focus-visible, [data-sorted], [data-popup-open]) svg": { opacity: "1" },
     "[data-align=end] > &": { marginInlineStart: "auto" },
 });
+// Past the skeleton's own shape sizes, which match on its `data-shape` too.
+const skeletonCheckbox = css({
+    "&[data-shape][data-ciridae-ui]": { width: "control.checkbox", borderRadius: "control" },
+});
+// A loading cell in its column's shape: the kit's skeleton row draws two lines for the primary
+// column, a 20px pill for a badge and a 24px circle beside a line for a person.
+const skeletonLines = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    width: "100%",
+    lineHeight: "tight",
+});
+const skeletonPill = css({
+    "&[data-shape][data-ciridae-ui]": { width: "80px", height: "control.mark", borderRadius: "pill" },
+});
+const skeletonPerson = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    width: "100%",
+});
+const skeletonAvatar = css({ "&[data-shape][data-ciridae-ui]": { width: "avatar.menu" } });
+function SkeletonCell({ shape, width, }) {
+    if (shape === "lines")
+        return (_jsxs("span", { className: skeletonLines, children: [_jsx(Skeleton, { shape: "text", width: width }), _jsx(Skeleton, { shape: "text", height: "caption", width: "45%" })] }));
+    if (shape === "pill")
+        return _jsx(Skeleton, { className: skeletonPill });
+    if (shape === "person")
+        return (_jsxs("span", { className: skeletonPerson, children: [_jsx(Skeleton, { shape: "circle", className: skeletonAvatar }), _jsx(Skeleton, { shape: "text", width: width })] }));
+    return shape ?? _jsx(Skeleton, { shape: "text", width: width });
+}
 const columnFilter = css({ display: "flex", flexDirection: "column", width: "260px" });
 const visuallyHidden = css({ srOnly: true });

package/dist/components/date-range-picker.js

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { css, cx } from "#primitives/css";
 import { Calendar } from "./calendar.js";
 import { useControllableState } from "./controllable-state.js";
-import { Divider } from "./data-display.js";
+import { glassMenuDivider, glassMenuRow } from "./glass-menu.js";
 import { icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Popover } from "./overlays.js";
@@ -82,7 +82,7 @@ const trigger = css({
     paddingInline: "control.compactInline",
     border: "1px solid transparent",
     borderRadius: "action",
-    background: "bg.glass",
+    background: "token(gradients.selected)",
     color: "fg.primary",
     fontFamily: "sans",
     fontSize: "body",
@@ -90,31 +90,20 @@ const trigger = css({
     letterSpacing: "compact",
     whiteSpace: "nowrap",
     cursor: "pointer",
-    _hover: { background: "bg.glassHover" },
+    _hover: { background: "token(gradients.raisedHover)" },
     "&[data-popup-open]": { borderColor: "fg.primary" },
     _focusVisible: { focusRing: "outer" },
 });
 const options = css({ display: "grid", width: "222px" });
-const option = css({
-    display: "flex",
-    alignItems: "center",
-    gap: "layout.controlGap",
-    height: "control.compact",
-    paddingInline: "menu.itemInline",
+// A menu row on the popover's glass sheet.
+const option = css(glassMenuRow, {
     border: "0",
-    borderRadius: "control",
     background: "transparent",
-    color: "fg.primary",
-    font: "inherit",
-    fontSize: "body",
-    fontWeight: "medium",
-    letterSpacing: "compact",
+    fontFamily: "inherit",
     textAlign: "start",
-    cursor: "pointer",
-    _hover: { background: "bg.glass" },
-    _focusVisible: { focusRing: "inset" },
 });
-const checkSlot = css({ display: "inline-flex", width: "14px", flexShrink: "0" });
+const optionsDivider = css(glassMenuDivider);
+const checkSlot = css({ display: "inline-flex", width: "mark.inline", flexShrink: "0" });
 /**
  * A select-shaped trigger opening the presets, and Pick dates, which swaps them for a calendar:
  * the first day picked starts the range and the second ends it.
@@ -149,5 +138,5 @@ export function DateRangePicker({ value: ownValue, defaultValue = { kind: "prese
     return (_jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsxs("button", { type: "button", className: cx(trigger, className), "aria-label": `${labels.label}: ${valueLabel}`, "data-ciridae-ui": "", "data-edge": "glass", children: [valueLabel, _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] }), children: picking ? (_jsx(Calendar, { month: month, selected: start, onMonthChange: setMonth, onSelect: pickDay })) : (_jsxs("div", { className: options, children: [presets.map((preset) => (_jsxs("button", { type: "button", className: option, onClick: () => {
                         setValue({ kind: "preset", preset: preset.value });
                         changeOpen(false);
-                    }, children: [_jsx("span", { className: checkSlot, children: value.kind === "preset" && value.preset === preset.value && (_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" })) }), preset.label] }, preset.value))), _jsx(Divider, { inset: "menu" }), _jsxs("button", { type: "button", className: option, onClick: () => setPicking(true), children: [_jsx("span", { className: checkSlot, children: value.kind === "custom" && (_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" })) }), labels.pickDates] })] })) }));
+                    }, children: [_jsx("span", { className: checkSlot, children: value.kind === "preset" && value.preset === preset.value && (_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" })) }), preset.label] }, preset.value))), _jsx("div", { className: optionsDivider, role: "separator" }), _jsxs("button", { type: "button", className: option, onClick: () => setPicking(true), children: [_jsx("span", { className: checkSlot, children: value.kind === "custom" && (_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" })) }), labels.pickDates] })] })) }));
 }

package/dist/components/drawer.d.ts

@@ -14,6 +14,11 @@ export type DrawerProps = Omit<ComponentProps<typeof BaseDrawer.Root>, "children
     size?: "narrow" | "regular" | "large";
     children: ReactNode;
 };
+/**
+ * A sheet docked at the window's right edge beside the page, which stays usable: it is not modal
+ * and a click outside leaves it open, so Escape or its close button closes it. Pass `modal` or
+ * `disablePointerDismissal` to change either.
+ */
 export declare function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size, children, ...rootProps }: DrawerProps): import("react").JSX.Element;
 export declare function DrawerBody({ flush, className, ...props }: ComponentProps<"div"> & {
     flush?: boolean;