@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/log-entry.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A record's activity as a log: a row per thing that happened, under a heading per day. A row is
+ * the time, who did it, what happened and a line more about it, and a trailing badge such as
+ * whether a person, a model or an agent did it. `comfortable` is a page's log, `compact` puts the
+ * line more beside what happened, and `panel` is the log in a drawer or side panel.
+ */
+import { css, cx } from "#primitives/css";
+import { Avatar } from "./data-display.js";
+import { useCiridaeLocale } from "./locale.js";
+const entry = css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.clusterGap",
+    width: "100%",
+    minWidth: "0",
+    paddingBlock: "log.entryBlock",
+    paddingInline: "log.entryInline",
+    color: "fg.primary",
+    _hover: { background: "token(gradients.rowHover)" },
+    "&[data-selected], &[data-selected]:hover": { background: "token(gradients.selected)" },
+    "&[role=button]": { cursor: "pointer" },
+    _focusVisible: { focusRing: "inset" },
+    "&[data-divider]": { borderBottom: "1px solid token(colors.border.divider)" },
+    "&[data-density=compact]": { alignItems: "center", paddingBlock: "log.entryCompactBlock" },
+    // A compact row's rule sits inside its padding, so it stays the kit's 40px with or without one.
+    "&[data-density=compact][data-divider]": {
+        paddingBottom: "calc(token(spacing.log.entryCompactBlock) - token(sizes.border.hairline))",
+    },
+    "&[data-density=panel]": {
+        paddingBlock: "log.entryPanelBlock",
+        paddingInline: "log.entryPanelInline",
+    },
+    // The time, the actor and the badge each sit in a line as tall as the actor, level with the
+    // headline beside them.
+    "& > [data-time], & > [data-actor], & > [data-badge]": {
+        display: "flex",
+        flexShrink: "0",
+        alignItems: "center",
+        height: "avatar.menu",
+    },
+    "& > [data-time]": {
+        width: "log.timeColumn",
+        color: "fg.subtle",
+        fontSize: "code",
+        fontWeight: "medium",
+        lineHeight: "tight",
+        fontVariantNumeric: "tabular-nums",
+        whiteSpace: "nowrap",
+    },
+    "& > [data-actor]": { justifyContent: "center", width: "avatar.menu" },
+    "& > [data-body]": {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
+        flex: "1",
+        minWidth: "0",
+    },
+    // One line as tall as the actor, ending in an ellipsis where the row is too narrow for it.
+    "& [data-headline]": {
+        display: "flex",
+        alignItems: "center",
+        minHeight: "avatar.menu",
+        fontSize: "body",
+        fontWeight: "medium",
+        lineHeight: "tight",
+        "& > span": {
+            minWidth: "0",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+    },
+    "& [data-detail]": {
+        color: "fg.label",
+        fontSize: "code",
+        fontWeight: "medium",
+        lineHeight: "log",
+    },
+    "&[data-density=compact] > [data-body]": {
+        display: "flex",
+        alignItems: "center",
+        gap: "layout.controlGap",
+        "& > *": { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+        // Block, so a long headline ends in an ellipsis; its own line height, so it centres with
+        // the detail.
+        "& > [data-headline]": { display: "block", minHeight: "auto" },
+        "& > [data-detail]": { flex: "1", lineHeight: "tight" },
+    },
+});
+// The log's actor mark: a person's photo or initials, or an icon for an agent, a sync or a rule,
+// on the raised glass circle. The icon is the small icon's size at every density.
+const actorIcon = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "avatar.menu",
+    height: "avatar.menu",
+    borderRadius: "round",
+    background: "token(gradients.raised)",
+    color: "fg.label",
+    "--edge": "token(gradients.border.raised)",
+    "& > svg": { fontSize: "icon.small" },
+});
+// Initials sit in the label grey here, where the avatar's own are the primary text colour; the
+// extra attribute outranks the avatar's kind rule.
+const actorPerson = css({ "&[data-ciridae-ui][data-kind=user]": { color: "fg.label" } });
+const groupHeader = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    paddingTop: "panel.comfortable",
+    paddingInline: "panel.default",
+    paddingBottom: "layout.tightGap",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    "& > [data-label]": { color: "fg.primary" },
+    "& > [data-meta]": { color: "fg.subtle" },
+});
+/** One thing that happened, as a row of a log. */
+export function LogEntry({ at, actor, headline, detail, badge, density = "comfortable", selected = false, divider = true, onSelect, className, ...props }) {
+    const { formatTime } = useCiridaeLocale();
+    const selectOnKey = (event) => {
+        if (event.target !== event.currentTarget || (event.key !== "Enter" && event.key !== " "))
+            return;
+        event.preventDefault();
+        onSelect?.();
+    };
+    return (_jsxs("div", { ...props, ...(onSelect && {
+            role: "button",
+            tabIndex: 0,
+            "aria-pressed": selected,
+            onClick: onSelect,
+            onKeyDown: selectOnKey,
+        }), className: cx(entry, className), "data-ciridae-ui": "", "data-density": density, "data-selected": selected || undefined, "data-divider": divider || undefined, children: [_jsx("time", { "data-time": "", dateTime: new Date(at).toISOString(), children: formatTime(at) }), _jsx("span", { "data-actor": "", children: actor }), _jsxs("div", { "data-body": "", children: [_jsx("span", { "data-headline": "", children: _jsx("span", { children: headline }) }), detail && _jsx("span", { "data-detail": "", children: detail })] }), badge && _jsx("span", { "data-badge": "", children: badge })] }));
+}
+/** A log's heading over a group of its rows, such as a day's: "Today", then "Oct 6". */
+export function LogGroupHeader({ label, meta, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(groupHeader, className), "data-ciridae-ui": "", children: [_jsx("span", { "data-label": "", children: label }), meta && _jsx("span", { "data-meta": "", children: meta })] }));
+}
+/** Who did a log entry's thing, as the mark for its `actor`. */
+export function LogActor({ name, src, icon }) {
+    if (icon)
+        return (_jsx("span", { role: "img", "aria-label": name, className: actorIcon, "data-ciridae-ui": "", "data-edge": "gradient", children: icon }));
+    return _jsx(Avatar, { label: name, src: src, size: "menu", className: actorPerson });
+}

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

@@ -6,7 +6,7 @@ import type { ComponentProps, Ref } from "react";
 export declare function LogList({ fill, className, ref, ...props }: ComponentProps<"div"> & {
     fill?: boolean;
     ref?: Ref<HTMLDivElement>;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * Monospace block of raw log text. `framed` gives it the log list's own scroll frame, for output
  * that is the whole list rather than one entry's detail.
@@ -15,6 +15,6 @@ export declare function LogOutput({ tone, framed, className, ref, ...props }: Co
     tone?: "error";
     framed?: boolean;
     ref?: Ref<HTMLPreElement>;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** Placeholder for plain monospace output such as Docker Compose logs. */
-export declare function LogOutputSkeleton(): import("@types/react").JSX.Element;
+export declare function LogOutputSkeleton(): import("react").JSX.Element;

package/dist/components/mention-input.d.ts

@@ -29,7 +29,7 @@ export declare function MentionChip({ mention, mark, href, }: {
     mention: Mention;
     mark?: ReactNode;
     href?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export type MentionInputProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSubmit" | "placeholder"> & {
     /** The text, each mention in it as `[@label](mention://kind/id)`. */
     value: string;
@@ -47,4 +47,4 @@ export type MentionInputProps = Omit<ComponentProps<"div">, "children" | "defaul
     /** Names the picker's list; the locale's "Mentions" by default. */
     listLabel?: string;
 };
-export declare function MentionInput({ value, onValueChange, triggers, mentionMark, placeholder, submitOn, onSubmit, disabled, autoFocus, listLabel, ref, className, onKeyDown, onFocus, onBlur, onPointerDown, ...props }: MentionInputProps): import("@types/react").JSX.Element;
+export declare function MentionInput({ value, onValueChange, triggers, mentionMark, placeholder, submitOn, onSubmit, disabled, autoFocus, listLabel, ref, className, onKeyDown, onFocus, onBlur, onPointerDown, ...props }: MentionInputProps): import("react").JSX.Element;

package/dist/components/mention-input.js

@@ -244,7 +244,7 @@ const field = css({
     },
     "&[aria-disabled=true]": { cursor: "default", opacity: "0.5" },
 });
-/* The picker: a flush menu over the caret, its rows edge to edge. */
+/* The picker: a flush menu over the caret on the popovers' glass, its rows edge to edge. */
 const picker = css({
     zIndex: "popover",
     display: "grid",
@@ -254,9 +254,10 @@ const picker = css({
     overflowY: "auto",
     border: "1px solid token(colors.border.control)",
     borderRadius: "action",
-    background: "bg.card",
+    background: "bg.popover",
+    backdropFilter: "blur(token(blurs.popover))",
     color: "fg.primary",
-    boxShadow: "card",
+    boxShadow: "soft",
     outline: "none",
 });
 const pickerRow = css({

package/dist/components/menu.d.ts

@@ -12,7 +12,7 @@ export type MenuItem = {
     variant?: "default" | "danger";
     /** Shows a check mark, for the active choice in a set. */
     checked?: boolean;
-    /** Muted after the label, such as what a choice covers. */
+    /** Muted at the row's end, such as what a choice covers. */
     meta?: string;
     /** The hotkey that does what the item does, at the row's end; the host binds it. */
     shortcut?: Hotkey;
@@ -59,8 +59,12 @@ export type MenuProps = Omit<ComponentProps<typeof BaseMenu.Root>, "children"> &
     items: readonly MenuItem[];
     /** Which edge of the trigger the menu lines up with; `end` keeps a right-hand menu inside its container. */
     align?: "start" | "end";
+    /** How far the menu floats from its trigger, in px. Defaults to the kit's 4. */
+    sideOffset?: number;
+    /** Makes the menu exactly as wide as its trigger rather than at least `overlay.menu`. */
+    matchTriggerWidth?: boolean;
 };
-export declare function Menu({ trigger, items, align, ...rootProps }: MenuProps): import("@types/react").JSX.Element;
+export declare function Menu({ trigger, items, align, sideOffset, matchTriggerWidth, ...rootProps }: MenuProps): import("react").JSX.Element;
 export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
     /** The button's accessible name, such as "Record actions" or "More for INV-4821". */
     label: string;
@@ -73,4 +77,4 @@ export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
     ref?: Ref<HTMLButtonElement>;
 };
 /** The "more" button: an `IconButton` with three dots that opens a `Menu` of `items`. */
-export declare function OverflowMenu({ label, size, variant, align, disabled, ref, ...props }: OverflowMenuProps): import("@types/react").JSX.Element;
+export declare function OverflowMenu({ label, size, variant, align, disabled, ref, ...props }: OverflowMenuProps): import("react").JSX.Element;

package/dist/components/menu.js

@@ -3,21 +3,14 @@ import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { CaretRightIcon, CheckIcon, DotsThreeIcon } from "@phosphor-icons/react";
 import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
+import { glassMenuDivider, glassMenuRow, glassMenuSurface } from "./glass-menu.js";
 import { HotkeyLayer } from "./hotkeys.js";
 import { directional, icon, Spinner } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
-/* Flush, like the select menu: rows run edge to edge and the popup's corners clip them. */
-const popup = css({
-    minWidth: "overlay.menu",
-    padding: "none",
-    overflow: "hidden",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "action",
-    background: "bg.card",
-    color: "fg.primary",
-    textStyle: "body",
-    boxShadow: "card",
-});
+import { singleLineTextClass } from "./single-line-text.js";
+const popup = css(glassMenuSurface, { minWidth: "overlay.menu" });
+// As wide as its trigger, such as a switcher whose menu hangs under a full-width button.
+const triggerWidthPopup = css(glassMenuSurface, { width: "var(--anchor-width)" });
 // A submenu joins its parent: the corner it opens from goes square, so the two read as one panel.
 const submenuPopup = css({
     "&:is([data-side=right], [data-side=inline-end])": { borderStartStartRadius: "0" },
@@ -25,28 +18,34 @@ const submenuPopup = css({
 });
 /** The positioner is the positioned element, so it carries the stacking order. */
 const positioner = css({ zIndex: "popover" });
-const item = css({
-    display: "flex",
-    alignItems: "center",
-    gap: "layout.controlGap",
-    minHeight: "menu.item",
-    paddingInline: "control.compactInline",
-    fontSize: "caption",
-    lineHeight: "body",
-    cursor: "pointer",
-    outline: "none",
-    "&[data-highlighted], &[data-popup-open]": { background: "bg.rowHover" },
-    "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+// A submenu's row stays lit while its submenu is open. A label stays on the row's one line, as the
+// design's 32px rows set it, and ends in an ellipsis in a menu held to its trigger's width.
+const itemStyle = css.raw(glassMenuRow, {
+    "&[data-popup-open]": {
+        background: "bg.hover",
+        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+    },
     "& > [data-label]": { flex: "1", minWidth: "0" },
     "& > [data-trailing]": { color: "fg.muted" },
 });
-const danger = css({ color: "accent.red" });
+const item = css(itemStyle);
+const dangerItem = css(itemStyle, { color: "accent.red" });
+// Every icon sits in one 14px slot, so labels line up whatever the icon's own size. A wider mark,
+// such as an avatar, widens its slot instead of spilling into the gap before the label.
+const iconSlot = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    minWidth: "mark.inline",
+    minHeight: "mark.inline",
+    fontSize: "icon.small",
+});
 /* Not an item: a row that names what the menu belongs to, such as the signed-in account. */
 const header = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    paddingInline: "control.compactInline",
+    paddingInline: "menu.itemInline",
     paddingBlock: "control.compactBlock",
     fontSize: "caption",
     lineHeight: "compact",
@@ -64,7 +63,7 @@ const groupHeading = css({
     display: "flex",
     alignItems: "center",
     minHeight: "menu.item",
-    paddingInline: "control.compactInline",
+    paddingInline: "menu.itemInline",
     color: "fg.muted",
     fontSize: "code",
     fontWeight: "medium",
@@ -72,18 +71,16 @@ const groupHeading = css({
     cursor: "default",
 });
 const itemMeta = css({
+    flexShrink: "1",
     minWidth: "0",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    color: "fg.muted",
-});
-const separator = css({
-    height: "border.hairline",
-    background: "border.subtle",
+    fontSize: "caption",
 });
-export function Menu({ trigger, items, align = "start", ...rootProps }) {
-    return (_jsxs(BaseMenu.Root, { ...rootProps, children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 6, align: align, children: _jsx(BaseMenu.Popup, { className: popup, "data-ciridae-ui": "", children: _jsx(MenuItems, { items: items }) }) }) }) })] }));
+const separator = css(glassMenuDivider);
+export function Menu({ trigger, items, align = "start", sideOffset = 4, matchTriggerWidth = false, ...rootProps }) {
+    return (_jsxs(BaseMenu.Root, { ...rootProps, children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: sideOffset, align: align, children: _jsx(BaseMenu.Popup, { className: matchTriggerWidth ? triggerWidthPopup : popup, "data-ciridae-ui": "", children: _jsx(MenuItems, { items: items }) }) }) }) })] }));
 }
 /** The "more" button: an `IconButton` with three dots that opens a `Menu` of `items`. */
 export function OverflowMenu({ label, size = "medium", variant = "raised", align = "end", disabled, ref, ...props }) {
@@ -100,10 +97,10 @@ function MenuItems({ items }) {
             return (_jsxs("div", { className: header, role: "presentation", children: [menuItem.icon, _jsxs("span", { className: headerCopy, children: [_jsx("span", { children: menuItem.label }), menuItem.detail && _jsx("span", { children: menuItem.detail })] })] }, index));
         }
         if (menuItem.items) {
-            return (_jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: item, disabled: menuItem.disabled, children: [menuItem.icon, _jsx("span", { "data-label": "", children: menuItem.label }), _jsx(CaretRightIcon, { "data-trailing": "", className: cx(icon({ size: "tiny" }), directional) })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 0, align: "start", alignOffset: -1, children: _jsx(BaseMenu.Popup, { className: cx(popup, submenuPopup), "data-ciridae-ui": "", children: _jsx(MenuItems, { items: menuItem.items }) }) }) })] }, menuItem.label));
+            return (_jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: item, disabled: menuItem.disabled, children: [menuItem.icon && _jsx("span", { className: iconSlot, children: menuItem.icon }), _jsx("span", { "data-label": "", className: singleLineTextClass, children: menuItem.label }), _jsx(CaretRightIcon, { "data-trailing": "", className: cx(icon({ size: "small" }), directional) })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 0, align: "start", alignOffset: -5, children: _jsx(BaseMenu.Popup, { className: cx(popup, submenuPopup), "data-ciridae-ui": "", children: _jsx(MenuItems, { items: menuItem.items }) }) }) })] }, menuItem.label));
         }
-        const content = (_jsxs(_Fragment, { children: [menuItem.loading ? _jsx(Spinner, { "aria-hidden": "true" }) : menuItem.icon, _jsxs("span", { "data-label": "", children: [menuItem.label, menuItem.meta !== undefined && _jsxs("span", { className: itemMeta, children: [" ", menuItem.meta] })] }), menuItem.shortcut && _jsx(ShortcutHint, { "data-trailing": "", hotkey: menuItem.shortcut }), menuItem.checked && _jsx(CheckIcon, { "data-trailing": "", className: icon({ size: "small" }) })] }));
-        const className = cx(item, menuItem.variant === "danger" && danger);
+        const content = (_jsxs(_Fragment, { children: [(menuItem.loading || menuItem.icon) && (_jsx("span", { className: iconSlot, children: menuItem.loading ? _jsx(Spinner, { "aria-hidden": "true" }) : menuItem.icon })), _jsx("span", { "data-label": "", className: singleLineTextClass, children: menuItem.label }), menuItem.meta !== undefined && (_jsx("span", { "data-trailing": "", className: itemMeta, children: menuItem.meta })), menuItem.shortcut && _jsx(ShortcutHint, { "data-trailing": "", boxed: true, hotkey: menuItem.shortcut }), menuItem.checked && _jsx(CheckIcon, { "data-trailing": "", className: icon({ size: "small" }) })] }));
+        const className = menuItem.variant === "danger" ? dangerItem : item;
         if (menuItem.href !== undefined || menuItem.render !== undefined) {
             return (_jsx(BaseMenu.LinkItem, { className: className, href: menuItem.href, render: menuItem.render, closeOnClick: true, onClick: menuItem.onSelect, children: content }, menuItem.label));
         }

package/dist/components/meter.d.ts

@@ -1,5 +1,5 @@
 import type { Tone } from "./badge.js";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
     value: number;
     /** 1 by default, so a share can be passed as is. */
@@ -11,4 +11,12 @@ export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
     /** The figure shown above the track, such as "92%"; nothing is shown without it. */
     valueLabel?: ReactNode;
 };
-export declare function Meter({ value, max, tone, label, valueLabel, className, ...props }: MeterProps): import("@types/react").JSX.Element;
+export declare function Meter({ value, max, tone, label, valueLabel, className, ...props }: MeterProps): import("react").JSX.Element;
+/** A button with `onClick`, otherwise a plain row; either way it takes the caller's attributes. */
+export type BudgetRowProps = Omit<HTMLAttributes<HTMLElement>, "children"> & Pick<MeterProps, "value" | "max" | "tone" | "valueLabel"> & {
+    icon: ReactNode;
+    name: string;
+    /** Under the name, such as "$184K of $200K of approved budget". */
+    detail: ReactNode;
+};
+export declare function BudgetRow({ icon, name, detail, value, max, tone, valueLabel, className, ...props }: BudgetRowProps): import("react").JSX.Element;

package/dist/components/meter.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * A measured amount against its limit, such as a budget spent: a thin track filled to
  * `value / max`, with the figure above it at the end. Past the limit the track stays full. It is
- * phrasing content, so it can sit inside a row's button.
+ * phrasing content, so it can sit inside a row's button. On track (`info`) and at risk (`warning`)
+ * fill as the chart's progress bar does, a gradient over the hue's track.
  */
 import { css, cva, cx } from "#primitives/css";
 const meter = css({
@@ -19,9 +20,9 @@ const track = cva({
     variants: {
         tone: {
             neutral: { background: "bg.hover" },
-            info: { background: "bg.infoSubtle" },
+            info: { background: "chart.progressTrack" },
             success: { background: "bg.successSubtle" },
-            warning: { background: "bg.warningSubtle" },
+            warning: { background: "chart.atRiskTrack" },
             danger: { background: "bg.errorSubtle" },
         },
     },
@@ -31,9 +32,9 @@ const fill = cva({
     variants: {
         tone: {
             neutral: { background: "fg.subtle" },
-            info: { background: "accent.blue" },
+            info: { background: "token(gradients.chart.progress)" },
             success: { background: "accent.green" },
-            warning: { background: "accent.yellow" },
+            warning: { background: "token(gradients.chart.atRisk)" },
             danger: { background: "accent.red" },
         },
     },
@@ -42,3 +43,60 @@ export function Meter({ value, max = 1, tone = "info", label, valueLabel, classN
     const share = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
     return (_jsxs("span", { role: "meter", "aria-label": label, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": typeof valueLabel === "string" ? valueLabel : undefined, ...props, className: cx(meter, className), "data-ciridae-ui": "", children: [valueLabel, _jsx("span", { className: track({ tone }), children: _jsx("span", { className: fill({ tone }), style: { width: `${share * 100}%` } }) })] }));
 }
+/*
+ * Budget row: a job's spend against its budget as a row, the kit's Budget row: the icon on the
+ * raised tile, the name over what is spent of what, and a 170px meter at the end. A row with
+ * `onClick` is a button that opens the job. Rows in a list part with a hairline above each.
+ */
+const budgetRow = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "meter.rowGap",
+    width: "100%",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    border: "0",
+    borderTop: "1px solid token(colors.border.divider)",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    textAlign: "start",
+    _first: { borderTop: "0" },
+    "&:is(button)": {
+        cursor: "pointer",
+        _hover: { background: "bg.rowHover" },
+        _focusVisible: { focusRing: "inset" },
+    },
+});
+const budgetLeading = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    flex: "1",
+    minWidth: "0",
+});
+const budgetTile = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "tile.icon",
+    height: "tile.icon",
+    border: "1px solid transparent",
+    borderRadius: "action",
+    background: "token(gradients.raised)",
+    fontSize: "icon.medium",
+    "--edge": "token(gradients.border.raised)",
+});
+const budgetCopy = css({ display: "grid", gap: "layout.tightGap", minWidth: "0" });
+const budgetName = css({ fontSize: "body" });
+const budgetDetail = css({ color: "fg.secondary", fontSize: "code" });
+// Fluid under 170px, so the job's name keeps a readable line on a phone.
+const budgetMeter = css({ width: "min(170px, 40%)", flexShrink: "0" });
+export function BudgetRow({ icon, name, detail, value, max, tone, valueLabel, className, ...props }) {
+    const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: budgetLeading, children: [_jsx("span", { className: budgetTile, "data-ciridae-ui": "", "data-edge": "gradient", children: icon }), _jsxs("span", { className: budgetCopy, children: [_jsx("span", { className: budgetName, children: name }), _jsx("span", { className: budgetDetail, children: detail })] })] }), _jsx(Meter, { className: budgetMeter, value: value, max: max, tone: tone, label: name, valueLabel: valueLabel })] }));
+    return props.onClick ? (_jsx("button", { type: "button", ...props, className: cx(budgetRow, className), "data-ciridae-ui": "", children: content })) : (_jsx("div", { ...props, className: cx(budgetRow, className), "data-ciridae-ui": "", children: content }));
+}

package/dist/components/navigation.d.ts

@@ -4,18 +4,35 @@ export type PaginationProps = Omit<ComponentProps<"nav">, "children"> & {
     page: number;
     pages: number;
     onPageChange: (page: number) => void;
+    /** At the bar's start, such as a `Select` of how many rows a page shows. */
+    pageSizeSelect?: ReactNode;
+    /** Before the pager, such as "Showing 1 to 25 of 1,284". */
+    summary?: ReactNode;
+    /** A button per page between Previous and Next, for a short run of pages. */
+    numbered?: boolean;
     labels?: Partial<CiridaeLabels["pagination"]>;
 };
-export declare function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }: PaginationProps): import("@types/react").JSX.Element;
+export declare function Pagination({ page, pages, onPageChange, pageSizeSelect, summary, numbered, labels: ownLabels, className, ...props }: PaginationProps): import("react").JSX.Element;
 export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
     icon?: ReactNode;
     title: ReactNode;
     description?: ReactNode;
+    /** The main way forward: a primary medium button on a page, a secondary small one in a card. */
     action?: ReactNode;
+    /** A second way forward before `action`, such as a secondary medium button on a page. */
+    secondaryAction?: ReactNode;
     /**
-     * `block` frames a page's or panel's empty state; `bare` is the same without the frame, its icon
-     * in a ring, for a table or card that frames it; `inline` is one muted line in a list.
+     * `block` is a page's or panel's empty state; `bare` the same, tighter, for a table or card
+     * that frames it; `inline` is one muted line in a list.
      */
     variant?: "block" | "bare" | "inline";
 };
-export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("@types/react").JSX.Element;
+export declare function EmptyState({ icon, title, description, action, secondaryAction, variant, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+export type EmptyTileProps = Omit<ComponentProps<"div">, "children"> & {
+    /** What the tile would count, as its stat tile names it. */
+    label: ReactNode;
+    /** Why there is no figure, such as "No invoices this period". */
+    note?: ReactNode;
+};
+/** A stat tile with no figure: its label, a dash in the figure's place, and why. */
+export declare function EmptyTile({ label, note, className, ...props }: EmptyTileProps): import("react").JSX.Element;