@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/stages.js

@@ -1,159 +1,215 @@
 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 arrowed segments,
- * each a button that chooses its stage; `CurrentStep` is the attention row for the step the
- * reader acts on; `StageChecklist` lists what stages need; `ConfirmationRow` says a move landed.
+ * 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.
  */
-import { CaretDownIcon, CaretUpIcon, CheckIcon, LockIcon, MinusIcon, SparkleIcon, WarningCircleIcon, } from "@phosphor-icons/react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { CaretDownIcon, CaretUpIcon, CheckIcon, SparkleIcon } from "@phosphor-icons/react";
 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 { 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. */
+/*
+ * 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",
         placeItems: "center",
         flexShrink: "0",
         borderRadius: "round",
-        border: "1px solid currentColor",
-        color: "fg.muted",
+        borderStyle: "solid",
+        borderColor: "currentColor",
+        color: "fg.secondary",
         lineHeight: "tight",
+        "&[data-status=waiting], &[data-status=agent]": { borderStyle: "dashed" },
     },
     variants: {
         status: {
-            done: { background: "accent.green", borderColor: "accent.green", color: "fg.onAccent" },
-            current: { color: "accent.yellow" },
-            waiting: { color: "fg.muted" },
+            // The green glass, its hairline drawn by the `[data-edge]` ring in place of the border.
+            done: {
+                borderWidth: "0!",
+                background: "token(gradients.stepDoneGlass)",
+                color: "fg.primary",
+                "--edge": "token(gradients.border.stepDoneGlass)",
+                _light: { color: "accent.green" },
+            },
+            current: { color: "accent.yellowIcon" },
+            waiting: { color: "fg.label" },
             agent: { color: "accent.blue" },
             blocked: { color: "accent.red" },
-            locked: { color: "fg.muted", opacity: "disabled" },
-            todo: { color: "border.panel" },
+            // The kit's Gray 50 ring in dark and Light Gray 66 in light; a locked one fades to half.
+            locked: { color: "border.control", opacity: "locked.step" },
+            todo: { color: "border.control" },
         },
         size: {
-            chip: { width: "avatar.micro", height: "avatar.micro", fontSize: "icon.tiny" },
-            small: { width: "control.knob", height: "control.knob", fontSize: "icon.tiny" },
-            medium: { width: "control.checkbox", height: "control.checkbox", fontSize: "icon.check" },
+            // The kit's strokes per size: a 12px ring is 1.25 and an empty one 1.5; a 14px ring is 1,
+            // and 1.3125 for the dashed and blocked ones; a 16px ring is 1.5 throughout.
+            chip: {
+                "--step-dot-size": "token(sizes.avatar.micro)",
+                width: "avatar.micro",
+                height: "avatar.micro",
+                borderWidth: "1.25px",
+                fontSize: "icon.tiny",
+                "&:is([data-status=todo], [data-status=locked])": { borderWidth: "1.5px" },
+            },
+            small: {
+                "--step-dot-size": "token(sizes.control.knob)",
+                width: "control.knob",
+                height: "control.knob",
+                borderWidth: "1px",
+                fontSize: "icon.tiny",
+                "&:is([data-status=waiting], [data-status=agent], [data-status=blocked])": {
+                    borderWidth: "1.3125px",
+                },
+            },
+            medium: {
+                "--step-dot-size": "token(sizes.control.checkbox)",
+                width: "control.checkbox",
+                height: "control.checkbox",
+                borderWidth: "1.5px",
+                fontSize: "icon.check",
+            },
         },
     },
     defaultVariants: { status: "todo", size: "medium" },
 });
-const stepDotCore = css({
-    width: "indicator.radio",
-    height: "indicator.radio",
+// 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.
+const stepDotCenter = css({
+    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%" },
+});
+const stepDotBar = css({
+    width: "44%",
+    height: "10%",
+    minHeight: "1px",
     borderRadius: "round",
     background: "currentColor",
 });
 /** A step's status as a dot; decorative, so the text beside it says the status. */
 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": "", children: children ?? (_jsxs(_Fragment, { children: [status === "done" && _jsx(CheckIcon, { weight: "bold" }), status === "current" && _jsx("span", { className: stepDotCore }), status === "waiting" && _jsx(MinusIcon, { weight: "bold" }), status === "agent" && _jsx(SparkleIcon, { weight: "fill" }), status === "blocked" && _jsx(WarningCircleIcon, { weight: "bold" }), status === "locked" && _jsx(LockIcon, { weight: "bold" })] })) }));
+    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: one enclosed row of arrowed segments, each filled with its state, every one a
- * button that chooses its stage. Segments share the width; as the box narrows, dates go first,
- * then every stage but the current and the chosen one folds to its dot. Past `maxVisible` the
- * strip windows itself around the current stage: it, its neighbours and the chosen stage stay, and
- * the runs between them fold into one counted segment each, which lists its stages when pressed.
- * The window never moves with the choice, so a segment stays where it was clicked.
+ * 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
+ * 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.
  */
 const strip = css({
-    "--stage-arrow": "10px",
     display: "flex",
-    alignItems: "stretch",
-    gap: "panel.hairline",
+    alignItems: "center",
+    gap: "stage.connectorGap",
     minWidth: "0",
-    height: "control.compact",
     margin: "none",
     padding: "none",
     listStyle: "none",
     containerType: "inline-size",
     "@container (max-width: 720px)": { "& [data-stage-meta]": { display: "none" } },
     "@container (max-width: 520px)": {
-        "& > li > :not([data-current], [aria-pressed=true])": {
-            flex: "0 0 auto",
-            "& [data-stage-label]": { display: "none" },
-        },
-        "& > li > [data-folded]": {
-            paddingInline: "calc(var(--stage-arrow) + token(spacing.layout.tightGap))",
-        },
-    },
-    "&[data-many]": {
-        // A folded run is a summary, so it takes only what its count needs.
-        "& > li > [data-run]": { flex: "0 0 auto" },
-        "@container (max-width: 1100px)": { "& [data-stage-meta]": { display: "none" } },
-        "@container (max-width: 480px)": {
-            "& > li > :not([data-current], [aria-pressed=true])": {
-                flex: "0 0 auto",
-                "& [data-stage-label]": { display: "none" },
-            },
+        "& > li > :not([data-current], [aria-pressed=true], [data-selected]) [data-stage-label]": {
+            display: "none",
         },
     },
 });
 const stripItem = css({ display: "contents" });
+const connector = css({
+    flex: "1 1 0",
+    minWidth: "token(spacing.layout.controlGap)",
+    height: "border.hairline",
+    borderRadius: "round",
+    background: "border.divider",
+    "&[data-after=done]": { background: "accent.green" },
+});
 const stage = css({
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
     gap: "control.iconGap",
-    flex: "1 1 0",
+    flex: "0 1 auto",
     minWidth: "0",
-    // Each segment tucks under the previous one's point, so the gap between reads as one chevron.
-    marginInlineStart: "calc(var(--stage-arrow) * -1)",
-    paddingInline: "calc(var(--stage-arrow) + token(spacing.control.block))",
-    clipPath: "polygon(0 0, calc(100% - var(--stage-arrow)) 0, 100% 50%, calc(100% - var(--stage-arrow)) 100%, 0 100%, var(--stage-arrow) 50%)",
-    // The grey fill, not glass: glass is near-white in light and the stages ahead vanished.
-    background: "bg.fill",
-    color: "fg.secondary",
+    paddingBlock: "panel.hairline",
+    paddingInline: "0",
+    border: "none",
+    borderRadius: "round",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
     fontSize: "caption",
     fontWeight: "medium",
     letterSpacing: "compact",
+    lineHeight: "tight",
     whiteSpace: "nowrap",
-    // Each segment is its item's only child, so the ends are found from the list item.
-    "li:first-child > &": {
-        marginInlineStart: "0",
-        paddingInlineStart: "control.compactInline",
-        borderStartStartRadius: "action",
-        borderEndStartRadius: "action",
-        clipPath: "polygon(0 0, calc(100% - var(--stage-arrow)) 0, 100% 50%, calc(100% - var(--stage-arrow)) 100%, 0 100%)",
+    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.
+    "&:is([data-state=current], [data-state=blocked])": {
+        paddingInlineStart: "control.block",
+        paddingInlineEnd: "control.iconInline",
+        border: "1px solid transparent",
     },
-    "li:last-child > &": {
-        paddingInlineEnd: "control.compactInline",
-        borderStartEndRadius: "action",
-        borderEndEndRadius: "action",
-        clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--stage-arrow) 50%)",
+    "&[data-state=current]": {
+        background: "token(gradients.currentStageGlass)",
+        color: "accent.yellow",
+        "--edge": "token(gradients.border.currentStageGlass)",
     },
-    "&[data-state=done]": { background: "bg.successSubtle", color: "accent.green" },
-    "&[data-state=current]": { background: "bg.warningSubtle", color: "accent.yellow" },
-    "&[data-state=blocked]": { background: "bg.errorSubtle", color: "accent.red" },
-    "&[data-state=agent]": { background: "bg.infoSubtle", color: "accent.blue" },
-    "&[data-state=todo], &[data-state=locked]": {
-        color: "fg.muted",
-        // The dot's own hairline grey vanishes on the segment's fill.
-        "& > :first-child": { color: "fg.muted" },
+    "&[data-state=blocked]": {
+        background: "token(gradients.dangerGlass)",
+        _light: { background: "token(gradients.selected)" },
+        "--edge": "token(gradients.border.raised)",
+        "& [data-stage-meta]": { color: "accent.red" },
     },
-    // Every stage can be chosen: it takes the hover wash, and the chosen one keeps it.
+    // 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)",
+    },
+    _focusVisible: { focusRing: "outer" },
+});
+const stageLabel = css({ overflow: "hidden", textOverflow: "ellipsis" });
+const stageMeta = css({
+    flexShrink: "0",
+    color: "fg.label",
+    fontSize: "code",
+    "[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",
     border: "none",
+    borderRadius: "control",
+    background: "transparent",
+    color: "fg.subtle",
     font: "inherit",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    whiteSpace: "nowrap",
     cursor: "pointer",
-    _hover: { boxShadow: "inset 0 0 0 999px token(colors.bg.rowHover)" },
-    _focusVisible: { outline: "none", boxShadow: "inset 0 0 0 999px token(colors.bg.rowHover)" },
-    "&[aria-pressed=true]": { boxShadow: "inset 0 0 0 999px token(colors.bg.rowHover)" },
-    // A chosen stage ahead has no fill of its own, so its text lifts to show the choice.
-    "&[aria-pressed=true]:is([data-state=todo], [data-state=locked])": {
-        color: "fg.primary",
-        "& > :first-child": { color: "fg.primary" },
-    },
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
 });
-const stageLabel = css({ overflow: "hidden", textOverflow: "ellipsis" });
-const stageMeta = css({ flexShrink: "0", opacity: "0.7", fontSize: "code" });
-/* A folded run's dot carries its count instead of an icon. */
-const countDot = css({ fontSize: "icon.tiny", fontWeight: "medium", lineHeight: "1" });
 /** The stage a record is at: the first neither done nor ahead, else the last done, else the first. */
 export function currentStageIndex(stages) {
     const active = stages.findIndex((item) => item.status !== "done" && item.status !== "todo" && item.status !== "locked");
@@ -162,33 +218,21 @@ export function currentStageIndex(stages) {
     const lastDone = stages.map((item) => item.status).lastIndexOf("done");
     return lastDone >= 0 ? lastDone : 0;
 }
-/** The strip's segments: every stage, or past `maxVisible` the window around the current one. */
-function stripItems(stages, maxVisible, currentIndex, selectedIndex) {
-    if (stages.length <= maxVisible) {
-        return stages.map((stage, index) => ({ kind: "stage", stage, index }));
-    }
-    const kept = new Set([currentIndex - 1, currentIndex, currentIndex + 1, selectedIndex]);
-    const items = [];
-    let run = [];
-    const closeRun = () => {
-        if (run.length === 1)
-            items.push({ kind: "stage", stage: stages[run[0]], index: run[0] });
-        if (run.length > 1) {
-            const done = run.every((index) => stages[index].status === "done");
-            items.push({ kind: "run", indices: run, status: done ? "done" : "todo" });
-        }
-        run = [];
-    };
-    stages.forEach((stage, index) => {
-        if (kept.has(index)) {
-            closeRun();
-            items.push({ kind: "stage", stage, index });
-        }
-        else {
-            run.push(index);
-        }
-    });
-    closeRun();
+/**
+ * The strip's items: every stage, or past `maxVisible` the stages before the current one folded
+ * into one, then as many as fit, then the rest as a count.
+ */
+function stripItems(stages, maxVisible, currentIndex) {
+    const all = stages.map((stage, index) => ({ kind: "stage", stage, index }));
+    if (stages.length <= maxVisible)
+        return all;
+    const before = stages.slice(0, currentIndex).map((_, index) => index);
+    const items = before.length > 1 ? [{ kind: "done", indices: before }] : all.slice(0, currentIndex);
+    const room = Math.max(maxVisible - items.length - 1, 1);
+    items.push(...all.slice(currentIndex, currentIndex + room));
+    const rest = stages.slice(currentIndex + room).map((_, offset) => currentIndex + room + offset);
+    if (rest.length > 0)
+        items.push({ kind: "more", indices: rest });
     return items;
 }
 export function StageStrip({ stages, value, defaultValue, onValueChange, maxVisible = 7, className, ...props }) {
@@ -197,16 +241,32 @@ export function StageStrip({ stages, value, defaultValue, onValueChange, maxVisi
     const [chosen, setChosen] = useControllableState(value, defaultValue ?? stages[currentIndex]?.id ?? "", onValueChange);
     const chosenIndex = stages.findIndex((item) => item.id === chosen);
     const selectedIndex = chosenIndex >= 0 ? chosenIndex : currentIndex;
-    const many = stages.length > maxVisible;
-    return (_jsx("ol", { "aria-label": labels.record.stages, ...props, className: cx(strip, className), "data-ciridae-ui": "", "data-many": many || undefined, children: stripItems(stages, maxVisible, currentIndex, selectedIndex).map((item) => item.kind === "stage" ? (_jsx("li", { className: stripItem, children: _jsxs("button", { type: "button", className: stage, "data-state": item.stage.status, "data-current": item.index === currentIndex || undefined, "data-folded": item.index !== currentIndex || undefined, title: item.stage.label, "aria-current": item.index === currentIndex ? "step" : undefined, "aria-pressed": item.index === selectedIndex, onClick: () => setChosen(item.stage.id), children: [_jsx(StepDot, { status: item.stage.status, size: "small" }), _jsx("span", { className: stageLabel, "data-stage-label": "", children: item.stage.label }), item.stage.meta && (_jsx("span", { className: stageMeta, "data-stage-meta": "", children: item.stage.meta }))] }) }, item.stage.id)) : (_jsx("li", { className: stripItem, children: _jsx(Menu, { trigger: _jsxs("button", { type: "button", className: stage, "data-state": item.status, "data-folded": "", "data-run": "", "aria-label": item.status === "done"
-                        ? labels.record.runDoneLabel(item.indices.length)
-                        : labels.record.runToGoLabel(item.indices.length), children: [_jsx(StepDot, { status: item.status, size: "small", className: countDot, children: item.indices.length }), _jsx("span", { className: stageLabel, "data-stage-label": "", children: item.status === "done" ? labels.record.runDone : labels.record.runToGo })] }), items: item.indices.map((index) => ({
-                    label: stages[index].label,
-                    icon: _jsx(StepDot, { status: stages[index].status, size: "small" }),
-                    onSelect: () => setChosen(stages[index].id),
-                })) }) }, `run-${item.indices[0]}`))) }));
+    const menuItems = (indices) => indices.map((index) => ({
+        label: stages[index].label,
+        icon: _jsx(StepDot, { status: stages[index].status, size: "small" }),
+        checked: index === selectedIndex,
+        onSelect: () => setChosen(stages[index].id),
+    }));
+    const items = stripItems(stages, maxVisible, currentIndex);
+    return (_jsx("ol", { "aria-label": labels.record.stages, ...props, className: cx(strip, className), "data-ciridae-ui": "", children: items.map((item, position) => {
+            const next = items[position + 1];
+            const join = next !== undefined && next.kind !== "more" && (_jsx("span", { className: connector, "aria-hidden": "true", "data-after": item.kind === "done" || (item.kind === "stage" && item.stage.status === "done")
+                    ? "done"
+                    : undefined }));
+            if (item.kind === "stage")
+                return (_jsxs("li", { className: stripItem, children: [_jsxs("button", { type: "button", className: stage, "data-ciridae-ui": "", "data-edge": item.stage.status === "current" || item.stage.status === "blocked"
+                                ? "gradient"
+                                : undefined, "data-state": item.stage.status, "data-current": item.index === currentIndex || undefined, title: item.stage.label, "aria-current": item.index === currentIndex ? "step" : undefined, "aria-pressed": item.index === selectedIndex, onClick: () => setChosen(item.stage.id), children: [_jsx(StepDot, { status: item.stage.status }), _jsx("span", { className: stageLabel, "data-stage-label": "", children: item.stage.label }), item.stage.meta && (_jsx("span", { className: stageMeta, "data-stage-meta": "", children: item.stage.meta }))] }), join] }, item.stage.id));
+            if (item.kind === "done")
+                return (_jsxs("li", { className: stripItem, children: [_jsx(Menu, { trigger: _jsxs("button", { type: "button", className: stage, "data-state": "done", "aria-label": labels.record.runDoneLabel(item.indices.length), "data-selected": item.indices.includes(selectedIndex) || undefined, children: [_jsx(StepDot, { status: "done" }), _jsx("span", { className: stageLabel, "data-stage-label": "", children: labels.record.runDoneShort(item.indices.length) })] }), items: menuItems(item.indices) }), join] }, "done"));
+            return (_jsx("li", { className: stripItem, children: _jsx(Menu, { trigger: _jsx("button", { type: "button", className: moreStages, "aria-label": labels.record.runToGoLabel(item.indices.length), "data-selected": item.indices.includes(selectedIndex) || undefined, children: labels.common.moreCount(item.indices.length) }), items: menuItems(item.indices) }) }, "more"));
+        }) }));
 }
-/* Current step: the attention row, tinted to its tone, with the inner card when expanded. */
+/*
+ * 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.
+ */
 const attentionRow = cva({
     base: {
         // The step card stacks by its own width, so a narrow record column stacks it as a phone does.
@@ -214,17 +274,73 @@ const attentionRow = cva({
         display: "grid",
         gap: "layout.tightGap",
         padding: "layout.tightGap",
-        border: "1px solid token(colors.border.panel)",
+        border: "1px solid transparent",
         borderRadius: "action",
-        background: "bg.glass",
+        "--step-edge": "token(gradients.border.raised)",
+        "--edge": "var(--step-edge)",
     },
     variants: {
         tone: {
-            warning: { borderColor: "border.glass", background: "bg.tinted" },
-            success: { borderColor: "border.glass", background: "bg.successSubtle" },
-            info: { borderColor: "border.glass", background: "bg.infoSubtle" },
-            neutral: {},
-            danger: { borderColor: "border.glass", background: "bg.errorSubtle" },
+            warning: {
+                background: "token(gradients.tinted)",
+                "--step-edge": "token(gradients.border.warningTint)",
+                _light: { background: "bg.warningTint" },
+            },
+            success: {
+                background: "token(gradients.successGlass)",
+                "--step-edge": "token(gradients.border.successTint)",
+                _light: { background: "bg.successTint" },
+            },
+            info: {
+                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)",
+                _light: {
+                    background: "bg.field",
+                    "--step-edge": "linear-gradient(token(colors.border.divider), token(colors.border.divider))",
+                },
+            },
+            danger: {
+                background: "token(gradients.dangerGlass)",
+                "--step-edge": "token(gradients.border.errorTint)",
+                _light: { background: "bg.errorTint" },
+            },
+        },
+    },
+});
+/*
+ * 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.
+ */
+const collapseToggle = cva({
+    base: {
+        display: "inline-grid",
+        placeItems: "center",
+        flexShrink: "0",
+        width: "control.shortcut",
+        height: "control.shortcut",
+        borderRadius: "round",
+        background: "token(gradients.raised)",
+        color: "fg.primary",
+        "--edge": "var(--step-edge)",
+    },
+    variants: {
+        tone: {
+            warning: {
+                background: "token(gradients.tinted)",
+                _light: { "--edge": "token(gradients.border.tinted)" },
+            },
+            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)",
+                _light: { "--edge": "token(gradients.border.dangerGlass)" },
+            },
         },
     },
 });
@@ -245,21 +361,26 @@ const attentionHeader = css({
     fontSize: "code",
     fontWeight: "medium",
     letterSpacing: "compact",
+    lineHeight: "tight",
     "&[data-tone=warning]": { color: "accent.yellow" },
     "&[data-tone=success]": { color: "accent.green" },
     "&[data-tone=info]": { color: "accent.blue" },
-    "&[data-tone=neutral]": { color: "fg.muted" },
-    "&[data-tone=danger]": { color: "accent.red" },
+    "&[data-tone=neutral]": { color: "fg.secondary" },
+    // 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",
     justifyContent: "space-between",
     gap: "layout.clusterGap",
     padding: "panel.default",
-    border: "1px solid token(colors.border.glass)",
+    border: "1px solid transparent",
     borderRadius: "control",
     background: "bg.panel",
+    _light: { background: "bg.card" },
+    "--edge": "var(--step-edge)",
     "@container (max-width: 560px)": { flexDirection: "column", alignItems: "stretch" },
     _phone: { padding: "panel.compact" },
 });
@@ -278,6 +399,7 @@ const attentionDescription = css({
     color: "fg.secondary",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "body",
     marginTop: "layout.tightGap",
 });
 const toneStatus = {
@@ -293,31 +415,116 @@ 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({
+    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",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    outline: "none",
+});
+const helpHeader = css({
+    display: "grid",
+    gap: "control.trackInset",
+    paddingBlock: "control.block",
+    paddingInline: "control.compactInline",
+    fontSize: "caption",
+    lineHeight: "tight",
+});
+const helpDetail = css({ color: "fg.subtle", fontSize: "code", lineHeight: "body" });
+const helpOption = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    paddingBlock: "control.block",
+    paddingInline: "control.compactInline",
+    borderRadius: "control",
+    cursor: "pointer",
+    outline: "none",
+    "&[data-highlighted]": { background: "token(gradients.selected)" },
+});
+const helpTile = css({
+    display: "grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.roundSmall",
+    height: "control.roundSmall",
+    borderRadius: "action",
+    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)))] }) }) }) })] }));
+}
 /** 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 }) {
     const { labels } = useCiridaeLocale();
     const [expanded, setExpanded] = useControllableState(ownExpanded, defaultExpanded, onExpandedChange);
-    return (_jsxs("div", { ...props, className: cx(attentionRow({ tone }), className), "data-ciridae-ui": "", 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 }), expanded ? (_jsx(CaretUpIcon, { className: icon({ size: "compact" }) })) : (_jsx(CaretDownIcon, { className: icon({ size: "compact" }) }))] }), expanded && (_jsxs("div", { className: attentionCard, 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(Menu, { align: "end", trigger: _jsx(Button, { variant: "ghost", children: labels.record.notSure }), items: help })), secondary && (_jsx(StepActionButton, { action: secondary, variant: tone === "warning" ? "tinted" : "secondary" })), primary && _jsx(StepActionButton, { action: primary, variant: "primary" })] }))] }))] }));
+    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. */
+/* 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: "control.default",
+    minHeight: "calc(token(sizes.control.compact) + token(spacing.panel.hairline) * 2)",
+    padding: "panel.hairline",
     paddingInlineStart: "control.compactInline",
-    paddingInlineEnd: "control.block",
-    border: "1px solid token(colors.border.glass)",
+    border: "1px solid transparent",
     borderRadius: "action",
-    background: "bg.successSubtle",
+    background: "token(gradients.successGlass)",
     color: "accent.green",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "tight",
+    "--edge": "token(gradients.border.successTint)",
+    _light: { background: "bg.successTint" },
 });
 /** A move that just landed, with when and an undo. */
 export function ConfirmationRow({ message, at, onUndo, labels: ownLabels, className, ...props }) {
     const labels = { ...useCiridaeLocale().labels.record, ...ownLabels };
-    return (_jsxs("div", { role: "status", ...props, className: cx(confirmation, className), "data-ciridae-ui": "", 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", onClick: onUndo, children: labels.undo }))] }));
+    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.
+ */
+const requirement = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minWidth: "0",
+    color: "fg.primary",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    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-nested]": {
+        paddingInlineStart: "calc(token(sizes.avatar.micro) + token(spacing.control.iconGap))",
+    },
+});
+const requirementMeta = css({ flexShrink: "0", color: "fg.subtle", fontSize: "code" });
+export function Requirement({ status, meta, nested = false, children, className, ...props }) {
+    return (_jsxs("span", { ...props, className: cx(requirement, className), "data-ciridae-ui": "", "data-status": status, "data-nested": nested || undefined, children: [_jsx(StepDot, { status: status, size: "chip" }), _jsx("span", { className: css({ minWidth: "0" }), children: children }), meta !== undefined && _jsx("span", { className: requirementMeta, children: meta })] }));
 }
 /* Stage checklists: what each stage needs, needed or will need, as plain rows under its label. */
 const checklist = css({
@@ -340,26 +547,175 @@ const checklistHeading = css({
     fontWeight: "medium",
 });
 const checklistList = css({ display: "grid", margin: "none", padding: "none", listStyle: "none" });
-const checklistRow = css({
+const checklistRow = css({ display: "flex", alignItems: "center", minHeight: "control.shortcut" });
+/** Checklists side by side, each under its label with its meta or how many of its steps are done. */
+export function StageChecklist({ groups, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsx("div", { ...props, className: cx(checklist, className), "data-ciridae-ui": "", children: groups.map(({ id, label, meta, steps }) => {
+            const done = steps.filter((step) => step.status === "done").length;
+            return (_jsxs("section", { className: checklistGroup, children: [_jsxs("h3", { className: checklistHeading, children: [label, _jsx("span", { children: meta ?? (steps.length > 0 && labels.record.checklistProgress(done, steps.length)) })] }), _jsx("ul", { className: checklistList, children: steps.map((step, index) => (_jsx("li", { className: checklistRow, children: _jsx(Requirement, { status: step.status, meta: step.meta, nested: step.nested, children: step.label }) }, step.id ?? index))) })] }, id));
+        }) }));
+}
+const stepChip = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    flexShrink: "0",
+    height: "control.chip",
+    paddingInlineStart: "control.iconGap",
+    paddingInlineEnd: "control.block",
+    border: "1px solid transparent",
+    borderRadius: "pill",
+    background: "token(gradients.raised)",
+    boxShadow: "soft",
+    color: "fg.label",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    whiteSpace: "nowrap",
+    "--edge": "token(gradients.border.raised)",
+    "&[data-status=done]": { color: "accent.green" },
+    "&[data-status=current]": { color: "accent.yellow" },
+    "&[data-status=agent]": {
+        height: "control.shortcut",
+        color: "accent.blue",
+        "& > [data-label]": {
+            background: "token(gradients.chart.progress)",
+            backgroundClip: "text",
+            color: "transparent",
+        },
+        "& > svg": { fontSize: "icon.small" },
+    },
+});
+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.
+ */
+const stepChain = css({
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "layout.tightGap",
+    height: "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)",
+    borderInlineStart: "1px solid token(colors.border.divider)",
+    borderBottom: "1px solid token(colors.border.divider)",
+    borderEndStartRadius: "keycap",
+});
+const chainItems = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    minHeight: "control.shortcut",
-    color: "fg.secondary",
+    height: "control.chip",
+    minWidth: "0",
+    overflow: "hidden",
+});
+const chainLead = css({
+    flexShrink: "0",
     fontSize: "code",
     fontWeight: "medium",
     letterSpacing: "compact",
-    "&[data-status=done]": { color: "fg.muted" },
-    "&[data-status=current]": { color: "fg.primary" },
-    "&[data-status=agent]": { color: "accent.blue" },
-    "&[data-status=blocked]": { color: "accent.red" },
-    "&[data-status=locked], &[data-status=todo]": { color: "fg.muted" },
+    lineHeight: "tight",
+    whiteSpace: "nowrap",
+    color: "fg.label",
+    "&[data-status=done]": { color: "accent.green" },
+    "&[data-status=current]": { color: "accent.yellow" },
 });
-/** Checklists side by side, each under its label with its meta or how many of its steps are done. */
-export function StageChecklist({ groups, className, ...props }) {
-    const { labels } = useCiridaeLocale();
-    return (_jsx("div", { ...props, className: cx(checklist, className), "data-ciridae-ui": "", children: groups.map(({ id, label, meta, steps }) => {
-            const done = steps.filter((step) => step.status === "done").length;
-            return (_jsxs("section", { className: checklistGroup, children: [_jsxs("h3", { className: checklistHeading, children: [label, _jsx("span", { children: meta ?? (steps.length > 0 && labels.record.checklistProgress(done, steps.length)) })] }), _jsx("ul", { className: checklistList, children: steps.map((step, index) => (_jsxs("li", { className: checklistRow, "data-status": step.status, children: [_jsx(StepDot, { status: step.status, size: "chip" }), step.label] }, step.id ?? index))) })] }, id));
-        }) }));
+const chainLink = css({
+    flexShrink: "0",
+    width: "token(spacing.control.compactInline)",
+    height: "border.hairline",
+    background: "border.divider",
+    "&[data-after=done]": { background: "accent.green" },
+    "&[data-after=current]": { background: "accent.yellowIcon" },
+});
+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",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    paddingBlock: "control.compactBlock",
+    paddingInlineStart: "control.block",
+    paddingInlineEnd: "control.compactInline",
+    border: "1px solid transparent",
+    borderRadius: "shell",
+    background: "token(gradients.selected)",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    whiteSpace: "nowrap",
+    "--edge": "token(gradients.border.selected)",
+});
+const parallelWho = css({ color: "fg.primary", fontSize: "caption" });
+const parallelDoing = css({
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: "fg.subtle",
+    fontSize: "code",
+});
+const parallelAction = css({
+    padding: "none",
+    border: "none",
+    borderRadius: "control",
+    background: "transparent",
+    color: "accent.blue",
+    font: "inherit",
+    fontSize: "caption",
+    cursor: "pointer",
+    _hover: { textDecoration: "underline" },
+    _focusVisible: { focusRing: "outer" },
+});
+export function ParallelChip({ actor, who, doing, action, className, ...props }) {
+    return (_jsxs("span", { ...props, className: cx(parallelChip, className), "data-ciridae-ui": "", "data-edge": "gradient", children: [actor.kind === "person" ? (actor.avatar) : (_jsx(StepDot, { status: actor.kind === "agent" ? "agent" : "waiting" })), _jsx("span", { className: parallelWho, children: who }), _jsx("span", { className: parallelDoing, children: doing }), action && (_jsx("button", { type: "button", className: parallelAction, onClick: action.onClick, children: action.label }))] }));
+}
+const partsRollup = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.contentGap",
+    minHeight: "partsRollup.height",
+    paddingBlock: "panel.hairline",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const partsLabel = css({ color: "fg.primary", fontSize: "caption" });
+const partsBar = css({
+    display: "flex",
+    gap: "layout.tightGap",
+    width: "320px",
+    maxWidth: "100%",
+    height: "progress.track",
+});
+const partsSegment = css({
+    flex: "1 1 0",
+    borderRadius: "round",
+    background: "chart.notStarted",
+    "&[data-state=done]": { background: "accent.green" },
+    "&[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 }) {
+    return (_jsxs("div", { ...props, className: cx(partsRollup, className), "data-ciridae-ui": "", children: [_jsx("span", { className: partsLabel, children: label }), _jsx("span", { className: partsBar, "aria-hidden": "true", children: parts.map((state, index) => (_jsx("span", { className: partsSegment, "data-state": state }, index))) }), _jsx("span", { className: partsLegend, children: legend })] }));
 }