@ciridae/ui 1.0.2 → 1.0.4

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.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-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/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>>;

package/dist/components/drawer.d.ts

@@ -14,16 +14,21 @@ export type DrawerProps = Omit<ComponentProps<typeof BaseDrawer.Root>, "children
     size?: "narrow" | "regular" | "large";
     children: ReactNode;
 };
-export declare function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size, children, ...rootProps }: DrawerProps): import("@types/react").JSX.Element;
+/**
+ * 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;
-}): import("@types/react").JSX.Element;
-export declare function DrawerForm({ className, ...props }: ComponentProps<"form">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function DrawerForm({ className, ...props }: ComponentProps<"form">): import("react").JSX.Element;
 export type DrawerFooterProps = ComponentProps<"footer"> & {
     /** Muted text at the footer's leading edge saying what the actions do, before the actions. */
     note?: ReactNode;
 };
-export declare function DrawerFooter({ note, className, children, ...props }: DrawerFooterProps): import("@types/react").JSX.Element;
+export declare function DrawerFooter({ note, className, children, ...props }: DrawerFooterProps): import("react").JSX.Element;
 export type DrawerFieldProps = {
     label: ReactNode;
     /** Muted after the label, such as `Optional` or where a value was filled in from. */
@@ -39,6 +44,6 @@ export type DrawerFieldProps = {
  * A labelled form field. Its `<label>` points at the control inside, and its helper or error
  * describes it: `Input`, `Textarea`, `Select` and `Combobox` take the ids from the field.
  */
-export declare function DrawerField({ label, hint, helper, error, controlId, children }: DrawerFieldProps): import("@types/react").JSX.Element;
+export declare function DrawerField({ label, hint, helper, error, controlId, children }: DrawerFieldProps): import("react").JSX.Element;
 /** Two fields side by side. */
-export declare function DrawerFieldRow({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function DrawerFieldRow({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/components/drawer.js

@@ -9,55 +9,51 @@ import { HotkeyLayer } from "./hotkeys.js";
 import { icon } from "./icon.js";
 import { Eyebrow, heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
-const backdrop = css({
-    position: "fixed",
-    inset: "none",
-    zIndex: "drawer",
-    background: "bg.backdrop",
-    transitionProperty: "opacity",
-    transitionDuration: "fast",
-    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
-    _motionReduce: { transitionDuration: "0ms" },
-});
 const viewport = css({ position: "fixed", inset: "none", zIndex: "drawer", pointerEvents: "none" });
+/*
+ * A drawer sits beside the page, which stays usable: no scrim, docked to the window's right edge
+ * at full height, a glass shell holding the sheet. The shell's padding is what keeps the sheet off
+ * the window's edges, level with the main panel; a phone takes the sheet to the edges.
+ */
 const popup = cva({
     base: {
         position: "absolute",
-        // Inset from the window by the shell's gap and rounded like the main panel, so a sheet reads
-        // as the docked agent sheet does; a phone takes it to the edges, where rounding is a gap.
-        insetBlock: "panel.compact",
-        insetInlineEnd: "panel.compact",
+        insetBlock: "none",
+        insetInlineEnd: "none",
         display: "flex",
-        overflow: "hidden",
+        padding: "panel.compact",
         pointerEvents: "auto",
         outline: "none",
         textStyle: "body",
-        background: "bg.surface",
-        border: "1px solid token(colors.border.control)",
-        borderRadius: "action",
-        boxShadow: "card",
-        _phone: { insetBlock: "none", insetInlineEnd: "none", border: "0", borderRadius: "0" },
+        border: "1px solid token(colors.border.divider)",
+        borderRadius: "shell",
+        background: "bg.drawerShell",
+        backdropFilter: "blur(token(blurs.drawerShell))",
+        boxShadow: "drawerShell",
+        _phone: { padding: "none", border: "0", borderRadius: "0" },
         // Base UI drives live swipe drag through this custom property; the resting
         // transform must reference it or dragging won't visually track the pointer.
         transform: "translateX(var(--drawer-swipe-movement-x, 0px))",
         transitionProperty: "transform",
         transitionDuration: "default",
         "&[data-starting-style], &[data-ending-style]": {
-            transform: "translateX(calc(100% + token(spacing.panel.compact)))",
-            _rtl: { transform: "translateX(calc(-100% - token(spacing.panel.compact)))" },
+            transform: "translateX(100%)",
+            _rtl: { transform: "translateX(-100%)" },
         },
         "&[data-swiping]": { transitionDuration: "0ms" },
         _motionReduce: { transitionDuration: "0ms" },
     },
+    // The sheet's width, plus the shell's padding and its 1px edge on each side.
     variants: {
         size: {
-            // A conversation or a short form, such as the agent sheet.
+            // The assistant and a preview.
             narrow: {
-                width: "min(calc(100vw - token(spacing.panel.compact) * 2), token(sizes.overlay.sheetNarrow))",
+                width: "min(100vw, calc(token(sizes.overlay.sheetNarrow) + token(spacing.panel.compact) * 2 + 2px))",
                 _phone: { width: "100vw" },
             },
+            // Create, edit and act.
             regular: {
-                width: "min(calc(100vw - token(spacing.panel.compact) * 2), token(sizes.overlay.sheet))",
+                width: "min(100vw, calc(token(sizes.overlay.sheet) + token(spacing.panel.compact) * 2 + 2px))",
                 _phone: { width: "100vw" },
             },
             // Near the full viewport, for content such as logs that needs the room.
@@ -72,26 +68,51 @@ const panel = css({
     minWidth: "0",
     minHeight: "0",
     flexDirection: "column",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.divider)",
+    borderRadius: "action",
+    background: "bg.drawerSheet",
+    boxShadow: "soft",
     color: "fg.primary",
+    _phone: { border: "0", borderRadius: "0" },
 });
-// At least the app header's height, so on a desktop the sheet's header rule lines up with the main
-// panel's beside it: both start one shell gap from the window's top.
-const header = css({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "layout.contentGap",
-    minHeight: "shell.header",
-    paddingBlock: "layout.tightGap",
-    paddingInlineStart: "panel.comfortable",
-    paddingInlineEnd: "panel.default",
-    borderBottom: "1px solid token(colors.border.control)",
+// At least the app header's height, so on a desktop a title-only sheet's header rule lines up with
+// the main panel's beside it: both start one shell gap from the window's top. Under a subtitle it
+// takes the design's even 16px padding, its close button at the top. The narrow sheet's header is
+// one line exactly the app header's height, its 34px round buttons centred in it.
+const header = cva({
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: "layout.contentGap",
+        minHeight: "shell.header",
+        paddingBlock: "panel.default",
+        paddingInlineStart: "panel.comfortable",
+        paddingInlineEnd: "panel.default",
+        borderBottom: "1px solid token(colors.border.divider)",
+        "&:has([data-sheet-subtitle])": {
+            paddingBlock: "panel.comfortable",
+            "& > [data-header-line]": { alignItems: "flex-start" },
+        },
+    },
+    // The narrow header is the Ask Ciridae drawer's one line: 8px between its title and actions.
+    variants: {
+        size: {
+            narrow: { gap: "layout.controlGap", height: "shell.header", paddingBlock: "none" },
+            regular: { paddingInlineEnd: "panel.comfortable" },
+            large: { paddingInlineEnd: "panel.comfortable" },
+        },
+    },
 });
-const headerLine = css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "layout.contentGap",
+const headerLine = cva({
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "layout.contentGap",
+    },
+    variants: { size: { narrow: { gap: "layout.controlGap" }, regular: {}, large: {} } },
 });
 const titleBlock = css({
     display: "flex",
@@ -107,12 +128,21 @@ const titleLine = css({
     gap: "layout.contentGap",
     minWidth: "0",
 });
-const titleStyle = cx(heading(), css({ minWidth: "0", lineHeight: "tight" }));
-// The sheet's mark before its title, muted like the agent sheet's sparkle.
+const titleStyle = css({ minWidth: "0", lineHeight: "tight" });
+const subtitleStyle = css({
+    margin: "none",
+    color: "fg.label",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+// The sheet's mark before its title, muted like the agent sheet's sparkle. A flex row of its own,
+// so the heading stays the title's line high rather than an inline box's.
 const titleMark = css({
-    display: "inline-flex",
+    display: "flex",
     alignItems: "center",
-    gap: "control.iconGap",
+    gap: "layout.controlGap",
     minWidth: "0",
     "& > svg": { flexShrink: "0", color: "fg.muted" },
 });
@@ -154,10 +184,9 @@ const footer = css({
     alignItems: "center",
     justifyContent: "flex-end",
     flexWrap: "wrap",
-    gap: "layout.controlGap",
+    gap: "layout.tightGap",
     padding: "panel.comfortable",
-    borderTop: "1px solid token(colors.border.control)",
-    background: "bg.card",
+    borderTop: "1px solid token(colors.border.divider)",
 });
 const footerNote = css({
     flex: "1",
@@ -166,12 +195,20 @@ const footerNote = css({
     fontWeight: "medium",
     letterSpacing: "compact",
 });
-const footerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const footerActions = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
+/**
+ * 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 function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size = "regular", children, ...rootProps }) {
     const { labels, dir } = useCiridaeLocale();
-    const close = (_jsx(BaseDrawer.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost", size: "small" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }));
+    // The narrow sheet's title is body size, as the app header's is, beside a 34px close.
+    const narrow = size === "narrow";
+    const titleClassName = cx(heading({ size: narrow ? "small" : "medium" }), titleStyle);
+    const close = (_jsx(BaseDrawer.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, size: narrow ? "medium" : "small" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }));
     const titleContent = titleIcon ? (_jsxs("span", { className: titleMark, children: [titleIcon, title] })) : (title);
-    return (_jsx(BaseDrawer.Root, { ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseDrawer.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { className: popup({ size }), "data-ciridae-ui": "", children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header, children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: title }), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine, children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleStyle, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleStyle, children: titleContent })), subtitle && _jsx(Eyebrow, { as: "p", children: subtitle })] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) })] }) }) }));
+    return (_jsx(BaseDrawer.Root, { modal: false, disablePointerDismissal: true, ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { className: popup({ size }), "data-ciridae-ui": "", children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header({ size }), children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: title }), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine({ size }), "data-header-line": "", children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent })), subtitle && (_jsx("p", { className: subtitleStyle, "data-sheet-subtitle": "", children: subtitle }))] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) }) }) }) }));
 }
 export function DrawerBody({ flush = false, className, ...props }) {
     return (_jsx(BaseDrawer.Content, { ...props, className: cx(body({ flush }), className), "data-ciridae-ui": "" }));
@@ -186,7 +223,7 @@ export function DrawerFooter({ note, className, children, ...props }) {
 const field = css({
     display: "flex",
     flexDirection: "column",
-    gap: "control.iconGap",
+    gap: "layout.controlGap",
     minWidth: "0",
 });
 const fieldLabelRow = css({
@@ -198,7 +235,7 @@ const fieldLabelRow = css({
     letterSpacing: "compact",
     lineHeight: "tight",
 });
-const fieldHint = css({ color: "fg.muted" });
+const fieldHint = css({ color: "fg.subtle" });
 const fieldError = css({
     margin: "none",
     color: "accent.red",

package/dist/components/dropzone.d.ts

@@ -18,16 +18,16 @@ export type DropzoneProps = useRender.ComponentProps<"div"> & {
     accept?: string;
 };
 /** Drop or paste files onto the element; while dragged over it carries `data-dragging`. */
-export declare function Dropzone({ onFiles, dropLabel, disabled, accept, render, className, children, ...props }: DropzoneProps): import("@types/react").JSX.Element;
+export declare function Dropzone({ onFiles, dropLabel, disabled, accept, render, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 /** The enclosing `Dropzone`'s picker, for a trigger of the caller's own, such as an icon button. */
 export declare function useDropzonePicker(): DropzoneContextValue;
 export type DropzoneTriggerProps = Omit<ButtonProps, "onClick">;
 /** Opens the enclosing `Dropzone`'s file picker; a paperclip unless it sets its own icon. */
-export declare function DropzoneTrigger({ icon: triggerIcon, variant, disabled, ...props }: DropzoneTriggerProps): import("@types/react").JSX.Element;
+export declare function DropzoneTrigger({ icon: triggerIcon, variant, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
 /** A dashed pad at rest inside a `Dropzone`: drop files on it, or browse for them. */
 export declare function DropzonePad({ className }: {
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export type DropzoneFileListProps = {
     files: readonly File[];
     onRemove: (file: File) => void;
@@ -42,6 +42,6 @@ export type DropzoneFileListProps = {
     className?: string;
 };
 /** One row per file: a thumbnail for an image, else its type's icon, its name and size, remove. */
-export declare function DropzoneFileList({ files, onRemove, pending, disabled, variant, className, }: DropzoneFileListProps): import("@types/react").JSX.Element | null;
+export declare function DropzoneFileList({ files, onRemove, pending, disabled, variant, className, }: DropzoneFileListProps): import("react").JSX.Element | null;
 /** A file's type as an icon: PDF, archive, text, or a plain file. */
 export declare function fileTypeIcon(file: Pick<File, "name" | "type">): ReactNode;