@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/skeletons.js

@@ -30,7 +30,6 @@ const panelRow = css({
     borderTop: "1px solid token(colors.border.divider)",
     "&:first-of-type": { borderTop: "0" },
 });
-// A list row: two lines of copy over each other, then a status chip at the end.
 const listRow = css({
     display: "flex",
     alignItems: "center",
@@ -39,7 +38,6 @@ const listRow = css({
     lineHeight: "tight",
 });
 const listRowCopy = css({ display: "grid", gap: "control.iconGap", flex: "1", minWidth: "0" });
-// A stat tile's and a card's placeholders wear the card they stand in for.
 const statTile = css(cardSurface, {
     display: "grid",
     alignContent: "start",
@@ -73,15 +71,15 @@ const cardTakeaway = css({
 const textWidths = ["72%", "54%", "64%", "46%"];
 /** Stands in for a labelled group of sidebar rows: a section label, then icon-and-name rows. */
 export function SidebarRowsSkeleton({ rows = 3 }) {
-    return (_jsxs("div", { className: sidebarSection, children: [_jsx("span", { className: sidebarLabel, children: _jsx(Skeleton, { shape: "text", style: { width: 64 } }) }), Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: sidebarRow, children: [_jsx(Skeleton, { shape: "circle", style: { width: 16 } }), _jsx(Skeleton, { shape: "text", style: { width: textWidths[index % textWidths.length] } })] }, index)))] }));
+    return (_jsxs("div", { className: sidebarSection, children: [_jsx("span", { className: sidebarLabel, children: _jsx(Skeleton, { shape: "text", width: "short" }) }), Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: sidebarRow, children: [_jsx(Skeleton, { shape: "circle", style: { width: 16 } }), _jsx(Skeleton, { shape: "text", style: { width: textWidths[index % textWidths.length] } })] }, index)))] }));
 }
 /** Stands in for a page header: optional avatar, title, meta line, and action buttons. */
 export function PageHeaderSkeleton({ avatar = false, actions = 0, }) {
-    return (_jsxs(Toolbar, { render: _jsx("header", {}), gap: "16", justify: "between", stackOnPhone: true, children: [_jsxs(Cluster, { gap: "12", wrap: false, children: [avatar && _jsx(Skeleton, { shape: "circle", style: { width: 50 } }), _jsxs("div", { children: [_jsx("div", { className: pageTitle, children: _jsx(Skeleton, { shape: "text", style: { width: 220 } }) }), _jsx(Text, { render: _jsx("div", {}), size: "caption", children: _jsx(Skeleton, { shape: "text", style: { width: 160 } }) })] })] }), actions > 0 && (_jsx(Cluster, { gap: "12", wrap: false, children: Array.from({ length: actions }, (_, index) => (_jsx(Skeleton, { style: { width: 112, height: 38 } }, index))) }))] }));
+    return (_jsxs(Toolbar, { render: _jsx("header", {}), gap: "16", justify: "between", stackOnPhone: true, children: [_jsxs(Cluster, { gap: "12", wrap: false, children: [avatar && _jsx(Skeleton, { shape: "circle", style: { width: "var(--sizes-avatar\\.welcome)" } }), _jsxs("div", { children: [_jsx("div", { className: pageTitle, children: _jsx(Skeleton, { shape: "text", style: { width: 220 } }) }), _jsx(Text, { render: _jsx("div", {}), size: "caption", children: _jsx(Skeleton, { shape: "text", style: { width: 160 } }) })] })] }), actions > 0 && (_jsx(Cluster, { gap: "12", wrap: false, children: Array.from({ length: actions }, (_, index) => (_jsx(Skeleton, { height: "control", style: { width: 112 } }, index))) }))] }));
 }
 /** Stands in for a panel of label-value rows. */
 export function PanelSkeleton({ rows = 4 }) {
-    return (_jsxs(Panel, { tone: "outline", children: [_jsx(PanelHeader, { level: 2, title: _jsx(Skeleton, { shape: "text", style: { width: 120 } }) }), _jsx("div", { children: Array.from({ length: rows }, (_, index) => (_jsxs(Toolbar, { justify: "between", className: panelRow, children: [_jsx(Skeleton, { shape: "text", style: { width: 80 } }), _jsx(Skeleton, { shape: "text", style: { width: 96 + (index % 3) * 24 } })] }, index))) })] }));
+    return (_jsxs(Panel, { tone: "outline", children: [_jsx(PanelHeader, { level: 2, title: _jsx(Skeleton, { shape: "text", width: "medium" }) }), _jsx("div", { children: Array.from({ length: rows }, (_, index) => (_jsxs(Toolbar, { justify: "between", className: panelRow, children: [_jsx(Skeleton, { shape: "text", style: { width: 80 } }), _jsx(Skeleton, { shape: "text", style: { width: 96 + (index % 3) * 24 } })] }, index))) })] }));
 }
 /* Each placeholder row varies its bars' widths, so a column of them does not read as a grid. */
 const listRowWidths = [
@@ -89,25 +87,22 @@ const listRowWidths = [
     [180, 120],
     [200, 70],
 ];
-/** Stands in for list rows: a line of text over a line of small print, then a status chip. */
 export function ListRowsSkeleton({ rows = 3 }) {
     return (_jsx("div", { children: Array.from({ length: rows }, (_, index) => {
             const [text, caption] = listRowWidths[index % listRowWidths.length];
             return (_jsxs("div", { className: listRow, children: [_jsxs("div", { className: listRowCopy, children: [_jsx(Skeleton, { shape: "text", height: "line", style: { maxWidth: text } }), _jsx(Skeleton, { shape: "text", height: "smallLine", style: { maxWidth: caption } })] }), _jsx(Skeleton, { shape: "pill", width: "short" })] }, index));
         }) }));
 }
-/** Stands in for a stat tile: its label, a small badge for the figure, and a line of small print. */
 export function StatTileSkeleton({ className }) {
-    return (_jsxs("div", { className: cx(statTile, className), children: [_jsx(Skeleton, { shape: "text", height: "line", style: { width: 100 } }), _jsx(Skeleton, { shape: "pill", height: "badge", style: { width: 48 } }), _jsx(Skeleton, { shape: "text", height: "smallLine", style: { width: 120 } })] }));
+    return (_jsxs("div", { className: cx(statTile, className), children: [_jsx(Skeleton, { shape: "text", height: "line", style: { width: 100 } }), _jsx(Skeleton, { shape: "pill", height: "badge", style: { width: 48 } }), _jsx(Skeleton, { shape: "text", height: "smallLine", width: "medium" })] }));
 }
 const cardBarWidths = ["35%", "46%", "60%", "23%"];
-/** Stands in for a card: a title and its meta line, labelled bars, and a takeaway under a rule. */
 export function CardSkeleton({ bars = 4 }) {
     return (_jsxs("div", { className: card, children: [_jsxs("div", { className: cardHeader, children: [_jsx(Skeleton, { shape: "text", height: "line", style: { width: 170 } }), _jsx(Skeleton, { shape: "text", height: "smallLine", style: { maxWidth: 220 } })] }), _jsx("div", { className: cardBars, children: Array.from({ length: bars }, (_, index) => (_jsxs("div", { className: cardBar, children: [_jsx(Skeleton, { shape: "text", height: "smallLine", style: { width: 56 } }), _jsx(Skeleton, { height: "bar", width: cardBarWidths[index % cardBarWidths.length] })] }, index))) }), _jsx("div", { className: cardTakeaway, children: _jsx(Skeleton, { shape: "text", height: "smallLine", style: { maxWidth: 200 } }) })] }));
 }
 /** Placeholder for a row's compact edit and delete icon buttons. */
 export function RowActionsSkeleton() {
-    return (_jsxs(Cluster, { gap: "12", render: _jsx("span", {}), children: [_jsx(Skeleton, { shape: "circle", style: { width: 24 } }), _jsx(Skeleton, { shape: "circle", style: { width: 24 } })] }));
+    return (_jsxs(Cluster, { gap: "12", render: _jsx("span", {}), children: [_jsx(Skeleton, { shape: "circle" }), _jsx(Skeleton, { shape: "circle" })] }));
 }
 const placeholderColumn = createTableColumns();
 /**

package/dist/components/stages.d.ts

@@ -24,8 +24,13 @@ export type Stage = {
 /** The stage a record is at: the first neither done nor ahead, else the last done, else the first. */
 export declare function currentStageIndex(stages: readonly Pick<Stage, "status">[]): number;
 export type StageStripProps = Omit<ComponentProps<"ol">, "children" | "defaultValue"> & {
+    /** At least one; an empty list throws. */
     stages: readonly Stage[];
-    /** The chosen stage's id; the current stage while neither this nor `defaultValue` is set. */
+    /**
+     * The chosen stage's id, which must name one of `stages`; the current stage while neither this
+     * nor `defaultValue` is set. Left to the strip, a choice whose stage leaves `stages` goes back
+     * to the current stage.
+     */
     value?: string;
     defaultValue?: string;
     onValueChange?: (id: string) => void;
@@ -44,10 +49,8 @@ export type StepAction = {
         content: ReactNode;
     };
 };
-/** One way forward from a stuck step. */
 export type HelpOption = {
     label: string;
-    /** What choosing it does, in a line. */
     detail?: string;
     icon?: ReactNode;
     onSelect?: () => void;

package/dist/components/stages.js

@@ -1,12 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
- * A record's path through its stages, and the work at the stage it is at. `StepDot` marks a
- * step's status wherever one is listed; `StageStrip` is the path as one row of stages joined by
- * connectors, each a button that chooses its stage, and `PartsRollup` stands in for it on a record
- * split into parts; `CurrentStep` is the attention row for the step the reader acts on, and
- * `StepChain` the steps that follow from it, as `StepChip`s, and `HelpMenu` its ways forward when
- * stuck; `Requirement` is one thing a stage needs and `StageChecklist` lists them per stage;
- * `ParallelChip` is someone else's work under way; `ConfirmationRow` says a move landed.
+ * A record's path through its stages, and the work at the stage it is at.
  */
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import { CaretDownIcon, CaretUpIcon, CheckIcon, SparkleIcon } from "@phosphor-icons/react";
@@ -14,17 +8,13 @@ import { css, cva, cx } from "#primitives/css";
 import { Button } from "./button.js";
 import { useControllableState } from "./controllable-state.js";
 import { DateTime } from "./date-time.js";
+import { glassMenuSurface } from "./glass-menu.js";
 import { HotkeyLayer } from "./hotkeys.js";
 import { icon, Spinner } from "./icon.js";
 import { Cluster, MutedText } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
 import { Popover } from "./overlays.js";
-/*
- * Step dot: 16 on the strip, 14 on rows, 12 inside chips. A ring in its status's hue, solid or
- * dashed, with a mark inside: a check on the green glass once done, a dot for the reader's step
- * and the agent's, a bar for a blocked one. Waiting, ahead and locked are the ring alone.
- */
 const stepDot = cva({
     base: {
         display: "inline-grid",
@@ -42,7 +32,7 @@ const stepDot = cva({
             // The green glass, its hairline drawn by the `[data-edge]` ring in place of the border.
             done: {
                 borderWidth: "0!",
-                background: "token(gradients.stepDoneGlass)",
+                background: "[token(gradients.stepDoneGlass)]",
                 color: "fg.primary",
                 "--edge": "token(gradients.border.stepDoneGlass)",
                 _light: { color: "accent.green" },
@@ -87,19 +77,18 @@ const stepDot = cva({
     },
     defaultVariants: { status: "todo", size: "medium" },
 });
-// The marks inside, as shares of the dot so every size draws them alike: the kit's 7px centre in
-// a 16px dot, measured across the whole dot rather than inside its ring.
+// The marks inside are shares of the dot, measured across the whole dot rather than inside its ring.
 const stepDotCenter = css({
-    width: "calc(var(--step-dot-size) * 0.4375)",
-    height: "calc(var(--step-dot-size) * 0.4375)",
+    width: "[calc(var(--step-dot-size) * 0.4375)]",
+    height: "[calc(var(--step-dot-size) * 0.4375)]",
     borderRadius: "round",
     background: "currentColor",
-    "[data-status=agent] > &": { width: "25%", height: "25%" },
+    "[data-status=agent] > &": { width: "[25%]", height: "[25%]" },
 });
 const stepDotBar = css({
-    width: "44%",
-    height: "10%",
-    minHeight: "1px",
+    width: "[44%]",
+    height: "[10%]",
+    minHeight: "[1px]",
     borderRadius: "round",
     background: "currentColor",
 });
@@ -108,10 +97,7 @@ export function StepDot({ status, size = "medium", className, children, ...props
     return (_jsx("span", { "aria-hidden": "true", ...props, className: cx(stepDot({ status, size }), className), "data-ciridae-ui": "", "data-edge": status === "done" ? "gradient" : undefined, "data-status": status, children: children ?? (_jsxs(_Fragment, { children: [status === "done" && _jsx(CheckIcon, { weight: "bold" }), (status === "current" || status === "agent") && _jsx("span", { className: stepDotCenter }), status === "blocked" && _jsx("span", { className: stepDotBar })] })) }));
 }
 /*
- * Stage strip: the stages in one row, each its dot, name and meta, joined by connectors that
- * stretch to fill the width, green out of a finished stage and grey ahead. The reader's stage is
- * a warm pill, a blocked one a grey pill with its meta in red. Every stage is a button that
- * chooses it. As the box narrows, metas go first, then every stage but the current and the chosen
+ * Stage strip: as the box narrows, metas go first, then every stage but the current and the chosen
  * one folds to its dot. Past `maxVisible` the finished stages fold into one "N done" stage and the
  * tail into a "+N" count, each listing its stages when pressed; the fold follows the current
  * stage, never the choice, so a stage stays where it was clicked.
@@ -134,8 +120,8 @@ const strip = css({
 });
 const stripItem = css({ display: "contents" });
 const connector = css({
-    flex: "1 1 0",
-    minWidth: "token(spacing.layout.controlGap)",
+    flex: "[1 1 0]",
+    minWidth: "[token(spacing.layout.controlGap)]",
     height: "border.hairline",
     borderRadius: "round",
     background: "border.divider",
@@ -145,10 +131,10 @@ const stage = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    flex: "0 1 auto",
+    flex: "[0 1 auto]",
     minWidth: "0",
     paddingBlock: "panel.hairline",
-    paddingInline: "0",
+    paddingInline: "none",
     border: "none",
     borderRadius: "round",
     background: "transparent",
@@ -161,28 +147,26 @@ const stage = css({
     whiteSpace: "nowrap",
     cursor: "pointer",
     "&[data-state=todo], &[data-state=locked]": { color: "fg.secondary" },
-    // The reader's stage and a blocked one are pills: the current stage's warm glass, and the
-    // selected glass in light, the red glass in dark. Their edge takes a pixel a side, as the kit's.
+    // Their edge takes a pixel a side, as the kit's.
     "&:is([data-state=current], [data-state=blocked])": {
         paddingInlineStart: "control.block",
         paddingInlineEnd: "control.iconInline",
         border: "1px solid transparent",
     },
     "&[data-state=current]": {
-        background: "token(gradients.currentStageGlass)",
+        background: "[token(gradients.currentStageGlass)]",
         color: "accent.yellow",
         "--edge": "token(gradients.border.currentStageGlass)",
     },
     "&[data-state=blocked]": {
-        background: "token(gradients.dangerGlass)",
-        _light: { background: "token(gradients.selected)" },
+        background: "[token(gradients.dangerGlass)]",
+        _light: { background: "[token(gradients.selected)]" },
         "--edge": "token(gradients.border.raised)",
         "& [data-stage-meta]": { color: "accent.red" },
     },
-    // A stage under the pointer, focused or chosen takes a faint pill, reaching past a plain one.
     "&:is(:hover, :focus-visible, [aria-pressed=true], [data-selected]):not([data-current])": {
         background: "bg.rowHover",
-        boxShadow: "0 0 0 token(spacing.panel.hairline) token(colors.bg.rowHover)",
+        boxShadow: "[0 0 0 token(spacing.panel.hairline) token(colors.bg.rowHover)]",
     },
     _focusVisible: { focusRing: "outer" },
 });
@@ -191,9 +175,8 @@ const stageMeta = css({
     flexShrink: "0",
     color: "fg.label",
     fontSize: "code",
-    "[data-state=current] > &": { color: "inherit" },
+    "[data-state=current] > &": { color: "[inherit]" },
 });
-// The tail past the fold: a quiet count that lists the stages it stands for.
 const moreStages = css({
     flexShrink: "0",
     padding: "none",
@@ -238,8 +221,14 @@ function stripItems(stages, maxVisible, currentIndex) {
 export function StageStrip({ stages, value, defaultValue, onValueChange, maxVisible = 7, className, ...props }) {
     const { labels } = useCiridaeLocale();
     const currentIndex = currentStageIndex(stages);
+    // Both hooks run before the checks below, so React sees the same hooks on every render.
     const [chosen, setChosen] = useControllableState(value, defaultValue ?? stages[currentIndex]?.id ?? "", onValueChange);
+    if (stages.length === 0)
+        throw new Error("StageStrip needs at least one stage");
     const chosenIndex = stages.findIndex((item) => item.id === chosen);
+    if (value !== undefined && chosenIndex < 0) {
+        throw new Error(`StageStrip's value "${value}" names none of its stages`);
+    }
     const selectedIndex = chosenIndex >= 0 ? chosenIndex : currentIndex;
     const menuItems = (indices) => indices.map((index) => ({
         label: stages[index].label,
@@ -263,9 +252,8 @@ export function StageStrip({ stages, value, defaultValue, onValueChange, maxVisi
         }) }));
 }
 /*
- * Current step: the attention row, with the inner card when expanded. Light paints the reader's
- * move, a ready step and a stuck one in their solid tint, dark in their hue's glass. The row sets
- * `--step-edge`, the hairline it and its card draw, in the tint's edge; the grey glass's otherwise.
+ * The row sets `--step-edge`, the hairline it and its card draw, in the tint's edge; the grey
+ * glass's otherwise.
  */
 const attentionRow = cva({
     base: {
@@ -282,29 +270,29 @@ const attentionRow = cva({
     variants: {
         tone: {
             warning: {
-                background: "token(gradients.tinted)",
+                background: "[token(gradients.tinted)]",
                 "--step-edge": "token(gradients.border.warningTint)",
                 _light: { background: "bg.warningTint" },
             },
             success: {
-                background: "token(gradients.successGlass)",
+                background: "[token(gradients.successGlass)]",
                 "--step-edge": "token(gradients.border.successTint)",
                 _light: { background: "bg.successTint" },
             },
             info: {
-                background: "token(gradients.infoGlass)",
+                background: "[token(gradients.infoGlass)]",
                 "--step-edge": "token(gradients.border.infoGlass)",
             },
             // Waiting: the raised glass in dark; in light the grey well inside a flat divider hairline.
             neutral: {
-                background: "token(gradients.raised)",
+                background: "[token(gradients.raised)]",
                 _light: {
                     background: "bg.field",
                     "--step-edge": "linear-gradient(token(colors.border.divider), token(colors.border.divider))",
                 },
             },
             danger: {
-                background: "token(gradients.dangerGlass)",
+                background: "[token(gradients.dangerGlass)]",
                 "--step-edge": "token(gradients.border.errorTint)",
                 _light: { background: "bg.errorTint" },
             },
@@ -312,8 +300,8 @@ const attentionRow = cva({
     },
 });
 /*
- * The fold toggle at the header's end: a 24px round button in its hue's glass. In dark it takes
- * the row's edge; in light the yellow and red ones keep their glass's own, softer than the tint's.
+ * In dark the fold toggle takes the row's edge; in light the yellow and red ones keep their
+ * glass's own, softer than the tint's.
  */
 const collapseToggle = cva({
     base: {
@@ -323,22 +311,22 @@ const collapseToggle = cva({
         width: "control.shortcut",
         height: "control.shortcut",
         borderRadius: "round",
-        background: "token(gradients.raised)",
+        background: "[token(gradients.raised)]",
         color: "fg.primary",
         "--edge": "var(--step-edge)",
     },
     variants: {
         tone: {
             warning: {
-                background: "token(gradients.tinted)",
+                background: "[token(gradients.tinted)]",
                 _light: { "--edge": "token(gradients.border.tinted)" },
             },
-            success: { background: "token(gradients.successGlass)" },
-            info: { background: "token(gradients.infoGlass)" },
+            success: { background: "[token(gradients.successGlass)]" },
+            info: { background: "[token(gradients.infoGlass)]" },
             // The grey toggle keeps the raised glass's edge where its row draws a flat hairline.
             neutral: { _light: { "--edge": "token(gradients.border.raised)" } },
             danger: {
-                background: "token(gradients.dangerGlass)",
+                background: "[token(gradients.dangerGlass)]",
                 _light: { "--edge": "token(gradients.border.dangerGlass)" },
             },
         },
@@ -348,7 +336,7 @@ const attentionHeader = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     height: "control.compact",
     paddingInline: "control.block",
     border: "none",
@@ -369,7 +357,6 @@ const attentionHeader = css({
     // A stuck step's header is the muted red the kit gives red text on its tint.
     "&[data-tone=danger]": { color: "accent.redDark" },
 });
-// The card holds the step on the page's own face: the solid card in light, the panel in dark.
 const attentionCard = css({
     display: "flex",
     alignItems: "center",
@@ -415,25 +402,14 @@ function StepActionButton({ action, variant, }) {
         return button;
     return (_jsx(Popover, { trigger: button, open: action.popover.open, onOpenChange: action.popover.onOpenChange, children: action.popover.content }));
 }
-/*
- * Help menu: the ways forward a stuck step offers behind "Not sure?", on the popover's glass. A
- * header says what the menu is for; each option is an icon on the raised tile, a title and a line
- * on what it does.
- */
-const helpPopup = css({
+/** The positioner is the positioned element, so it carries the stacking order. */
+const helpPositioner = css({ zIndex: "popover" });
+const helpPopup = css(glassMenuSurface, {
     display: "grid",
     width: "overlay.helpMenu",
-    maxWidth: "calc(100vw - token(spacing.panel.roomy))",
-    padding: "menu.inset",
-    border: "1px solid token(colors.border.divider)",
-    borderRadius: "action",
-    background: "bg.popover",
-    backdropFilter: "blur(token(blurs.popover))",
-    boxShadow: "soft",
-    color: "fg.primary",
+    maxWidth: "[calc(100vw - token(spacing.panel.roomy))]",
     fontWeight: "medium",
     letterSpacing: "compact",
-    outline: "none",
 });
 const helpHeader = css({
     display: "grid",
@@ -452,8 +428,8 @@ const helpOption = css({
     paddingInline: "control.compactInline",
     borderRadius: "control",
     cursor: "pointer",
-    outline: "none",
-    "&[data-highlighted]": { background: "token(gradients.selected)" },
+    outline: "0",
+    "&[data-highlighted]": { background: "[token(gradients.selected)]" },
 });
 const helpTile = css({
     display: "grid",
@@ -462,14 +438,14 @@ const helpTile = css({
     width: "control.roundSmall",
     height: "control.roundSmall",
     borderRadius: "action",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     fontSize: "icon.small",
     "--edge": "token(gradients.border.raised)",
 });
 const helpCopy = css({ display: "grid", gap: "control.trackInset", minWidth: "0" });
 const helpTitle = css({ fontSize: "caption", lineHeight: "tight" });
 export function HelpMenu({ trigger, title, detail, options }) {
-    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: css({ zIndex: "popover" }), sideOffset: 6, align: "end", children: _jsxs(BaseMenu.Popup, { className: helpPopup, "data-ciridae-ui": "", children: [_jsxs("div", { className: helpHeader, role: "presentation", children: [title, detail !== undefined && _jsx("span", { className: helpDetail, children: detail })] }), options.map((option) => (_jsxs(BaseMenu.Item, { className: helpOption, onClick: option.onSelect, children: [option.icon && (_jsx("span", { className: helpTile, "data-ciridae-ui": "", "data-edge": "gradient", children: option.icon })), _jsxs("span", { className: helpCopy, children: [_jsx("span", { className: helpTitle, children: option.label }), option.detail && _jsx("span", { className: helpDetail, children: option.detail })] })] }, option.label)))] }) }) }) })] }));
+    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: helpPositioner, sideOffset: 6, align: "end", children: _jsxs(BaseMenu.Popup, { className: helpPopup, "data-ciridae-ui": "", children: [_jsxs("div", { className: helpHeader, role: "presentation", children: [title, detail !== undefined && _jsx("span", { className: helpDetail, children: detail })] }), options.map((option) => (_jsxs(BaseMenu.Item, { className: helpOption, onClick: option.onSelect, children: [option.icon && (_jsx("span", { className: helpTile, "data-ciridae-ui": "", "data-edge": "gradient", children: option.icon })), _jsxs("span", { className: helpCopy, children: [_jsx("span", { className: helpTitle, children: option.label }), option.detail && _jsx("span", { className: helpDetail, children: option.detail })] })] }, option.label)))] }) }) }) })] }));
 }
 /** The step the reader acts on: a tinted header that folds the card with its title and actions. */
 export function CurrentStep({ tone, meta, title, description, primary, secondary, help, busy = false, expanded: ownExpanded, defaultExpanded = true, onExpandedChange, className, ...props }) {
@@ -477,17 +453,16 @@ export function CurrentStep({ tone, meta, title, description, primary, secondary
     const [expanded, setExpanded] = useControllableState(ownExpanded, defaultExpanded, onExpandedChange);
     return (_jsxs("div", { ...props, className: cx(attentionRow({ tone }), className), "data-ciridae-ui": "", "data-edge": "gradient", children: [_jsxs("button", { type: "button", className: attentionHeader, "data-tone": tone, "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: [busy ? (_jsx(Spinner, { size: "compact", "aria-hidden": "true" })) : (_jsx(StepDot, { status: toneStatus[tone], size: "small" })), _jsx("span", { className: css({ flex: "1" }), children: meta }), _jsx("span", { className: collapseToggle({ tone }), "data-ciridae-ui": "", "data-edge": "gradient", children: expanded ? (_jsx(CaretUpIcon, { className: icon({ size: "compact" }) })) : (_jsx(CaretDownIcon, { className: icon({ size: "compact" }) })) })] }), expanded && (_jsxs("div", { className: attentionCard, "data-ciridae-ui": "", "data-edge": "gradient", children: [_jsxs("div", { className: css({ minWidth: "0" }), children: [_jsx("div", { className: attentionTitle, children: title }), description !== undefined && _jsx("div", { className: attentionDescription, children: description })] }), (help || secondary || primary) && (_jsxs(Cluster, { gap: "4", className: stepActions, children: [help && (_jsx(HelpMenu, { ...help, trigger: _jsx(Button, { variant: "ghost", children: labels.record.notSure }) })), secondary && (_jsx(StepActionButton, { action: secondary, variant: tone === "warning" ? "tinted" : "secondary" })), primary && _jsx(StepActionButton, { action: primary, variant: "primary" })] }))] }))] }));
 }
-/* Confirmation row: the ready step's green, one 32px line inside a 4px inset. */
 const confirmation = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    minHeight: "calc(token(sizes.control.compact) + token(spacing.panel.hairline) * 2)",
+    minHeight: "[calc(token(sizes.control.compact) + token(spacing.panel.hairline) * 2)]",
     padding: "panel.hairline",
     paddingInlineStart: "control.compactInline",
     border: "1px solid transparent",
     borderRadius: "action",
-    background: "token(gradients.successGlass)",
+    background: "[token(gradients.successGlass)]",
     color: "accent.green",
     fontSize: "code",
     fontWeight: "medium",
@@ -501,9 +476,7 @@ export function ConfirmationRow({ message, at, onUndo, labels: ownLabels, classN
     return (_jsxs("div", { role: "status", ...props, className: cx(confirmation, className), "data-ciridae-ui": "", "data-edge": "gradient", children: [_jsx(StepDot, { status: "done", size: "small" }), _jsx("span", { className: css({ flex: "1" }), children: message }), _jsx(MutedText, { children: _jsx(DateTime, { value: at }) }), onUndo && (_jsx(Button, { variant: "secondary", size: "small", onClick: onUndo, children: labels.undo }))] }));
 }
 /*
- * Requirement: one thing a stage needs, as its 12px dot, its 13px name and a muted meta. A done
- * one steps back to the muted grey; a locked one fades, so what is coming stays in view; a
- * dependent one indents under the step it waits on.
+ * Requirement: a locked one fades, so what is coming stays in view.
  */
 const requirement = css({
     display: "inline-flex",
@@ -517,9 +490,12 @@ const requirement = css({
     lineHeight: "tight",
     "&[data-status=done]": { color: "fg.subtle" },
     // The row fades as a whole, so its dot does not fade a second time.
-    "&[data-status=locked]": { opacity: "locked.requirement", "& > [data-status]": { opacity: "1" } },
+    "&[data-status=locked]": {
+        opacity: "locked.requirement",
+        "& > [data-status]": { opacity: "[1]" },
+    },
     "&[data-nested]": {
-        paddingInlineStart: "calc(token(sizes.avatar.micro) + token(spacing.control.iconGap))",
+        paddingInlineStart: "[calc(token(sizes.avatar.micro) + token(spacing.control.iconGap))]",
     },
 });
 const requirementMeta = css({ flexShrink: "0", color: "fg.subtle", fontSize: "code" });
@@ -566,7 +542,7 @@ const stepChip = css({
     paddingInlineEnd: "control.block",
     border: "1px solid transparent",
     borderRadius: "pill",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     boxShadow: "soft",
     color: "fg.label",
     fontSize: "code",
@@ -581,7 +557,7 @@ const stepChip = css({
         height: "control.shortcut",
         color: "accent.blue",
         "& > [data-label]": {
-            background: "token(gradients.chart.progress)",
+            background: "[token(gradients.chart.progress)]",
             backgroundClip: "text",
             color: "transparent",
         },
@@ -592,35 +568,36 @@ export function StepChip({ status, children, className, ...props }) {
     return (_jsxs("span", { ...props, className: cx(stepChip, className), "data-ciridae-ui": "", "data-edge": "gradient", "data-status": status, children: [status === "agent" ? (_jsx(SparkleIcon, { weight: "fill", "aria-hidden": "true" })) : (_jsx(StepDot, { status: status, size: "chip" })), _jsx("span", { "data-label": "", children: children })] }));
 }
 /*
- * Step chain: the steps that follow from the expanded step, one row a lead: a tree line from the
- * step above, the lead's dot and words, then its steps as chips, each joined to the one before by
- * a short link in that one's hue: green after a done step, yellow after the current, grey ahead.
+ * Step chain: each chip is joined to the one before by a short link in that one's hue: green after
+ * a done step, yellow after the current, grey ahead.
  */
 const stepChain = css({
     display: "flex",
-    alignItems: "flex-end",
+    alignItems: "flex-start",
     gap: "layout.tightGap",
-    height: "control.compact",
+    minHeight: "control.compact",
     paddingInline: "control.iconGap",
     minWidth: "0",
 });
-// An L from the step above down to the lead, its corner rounded.
 const chainTree = css({
     flexShrink: "0",
     alignSelf: "flex-start",
-    width: "9px",
-    height: "calc(100% - token(spacing.panel.default) + 1px)",
+    width: "[9px]",
+    height: "[calc(token(sizes.control.compact) - token(spacing.panel.default) + 1px)]",
     borderInlineStart: "1px solid token(colors.border.divider)",
     borderBottom: "1px solid token(colors.border.divider)",
     borderEndStartRadius: "keycap",
 });
+// Where the chain is wider than its row, its chips wrap, the first line staying level with the tree.
 const chainItems = css({
     display: "flex",
+    flexWrap: "wrap",
     alignItems: "center",
+    alignContent: "center",
     gap: "control.iconGap",
-    height: "control.chip",
     minWidth: "0",
-    overflow: "hidden",
+    minHeight: "control.compact",
+    paddingTop: "[calc(token(sizes.control.compact) - token(sizes.control.chip))]",
 });
 const chainLead = css({
     flexShrink: "0",
@@ -635,7 +612,7 @@ const chainLead = css({
 });
 const chainLink = css({
     flexShrink: "0",
-    width: "token(spacing.control.compactInline)",
+    width: "[token(spacing.control.compactInline)]",
     height: "border.hairline",
     background: "border.divider",
     "&[data-after=done]": { background: "accent.green" },
@@ -644,11 +621,6 @@ const chainLink = css({
 export function StepChain({ lead, steps, className, ...props }) {
     return (_jsxs("div", { ...props, className: cx(stepChain, className), "data-ciridae-ui": "", children: [_jsx("span", { className: chainTree, "aria-hidden": "true" }), _jsxs("span", { className: chainItems, children: [_jsx(StepDot, { status: lead.status, size: "small" }), _jsx("span", { className: chainLead, "data-status": lead.status, children: lead.label }), steps.map((step, index) => (_jsxs("span", { className: css({ display: "contents" }), children: [_jsx("span", { className: chainLink, "aria-hidden": "true", "data-after": index === 0 ? lead.status : steps[index - 1].status }), _jsx(StepChip, { status: step.status, children: step.label })] }, step.id)))] })] }));
 }
-/*
- * Parallel chip: someone else's work under way beside the reader's, on the selected glass. A
- * person shows their avatar, the agent its dashed blue dot, the system a dashed grey one; then
- * who, what they are doing, and at most one action.
- */
 const parallelChip = css({
     display: "inline-flex",
     alignItems: "center",
@@ -659,7 +631,7 @@ const parallelChip = css({
     paddingInlineEnd: "control.compactInline",
     border: "1px solid transparent",
     borderRadius: "shell",
-    background: "token(gradients.selected)",
+    background: "[token(gradients.selected)]",
     fontWeight: "medium",
     letterSpacing: "compact",
     lineHeight: "tight",
@@ -704,16 +676,16 @@ const partsLabel = css({ color: "fg.primary", fontSize: "caption" });
 const partsBar = css({
     display: "flex",
     gap: "layout.tightGap",
-    width: "320px",
-    maxWidth: "100%",
+    width: "[320px]",
+    maxWidth: "full",
     height: "progress.track",
 });
 const partsSegment = css({
-    flex: "1 1 0",
+    flex: "[1 1 0]",
     borderRadius: "round",
     background: "chart.notStarted",
     "&[data-state=done]": { background: "accent.green" },
-    "&[data-state=needsYou]": { background: "token(gradients.chart.atRisk)" },
+    "&[data-state=needsYou]": { background: "[token(gradients.chart.atRisk)]" },
 });
 const partsLegend = css({ color: "fg.muted", fontSize: "code", _light: { color: "fg.subtle" } });
 export function PartsRollup({ label, parts, legend, className, ...props }) {

package/dist/components/stat-card.d.ts

@@ -17,10 +17,7 @@ export type SparklineProps = Omit<ComponentProps<"div">, "children"> & {
     strokeWidth?: number;
     endPointSize?: number;
 };
-/**
- * A run of values as a line filling its box; decorative, as the figure beside it says what it
- * shows. Under two values there is no line, and a dashed rule stands in for it.
- */
+/** Decorative, as the figure beside it says what it shows. Under two values there is no line, and a dashed rule stands in for it. */
 export declare function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth, endPointSize, className, ...props }: SparklineProps): import("react").JSX.Element;
 export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" | "onSelect"> & {
     label: ReactNode;
@@ -39,4 +36,4 @@ export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" |
      */
     divider?: "card" | "left" | "none";
 };
-export declare function MetricCard({ label, value, change, sparkline, onSelect, href, divider, render, className, ...props }: MetricCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MetricCard({ label, value, change, sparkline, onSelect, onClick, href, divider, render, className, ...props }: MetricCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;