@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/project-avatar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from "./data-display.js";
+// No neutral, so every project gets a color; no red, which beside a status reads as a failure.
+const projectAvatarColors = [
+    "blue",
+    "violet",
+    "green",
+    "teal",
+    "yellow",
+    "orange",
+    "pink",
+];
+/**
+ * A project's avatar, its color picked from the project id so every app shows the same one.
+ * Decorative: the project's name always sits beside it.
+ */
+export function ProjectAvatar({ projectId, name, size, className, }) {
+    let hash = 0;
+    for (const char of projectId)
+        hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;
+    return (_jsx(Avatar, { kind: "project", label: name, size: size, color: projectAvatarColors[hash % projectAvatarColors.length], className: className, "aria-hidden": "true" }));
+}

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

@@ -0,0 +1,22 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ComponentProps, ReactNode } from "react";
+export type RadioCardGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "defaultValue" | "name" | "onValueChange" | "value"> & {
+    name: string;
+    label: string;
+    className?: string;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function RadioCardGroup({ name, label, defaultValue, value, onValueChange, className, ...props }: RadioCardGroupProps): import("@types/react").JSX.Element;
+export type RadioCardProps = Omit<ComponentProps<typeof BaseRadio.Root>, "children" | "className"> & {
+    value: string;
+    title: ReactNode;
+    detail?: ReactNode;
+    /** Where the option comes from, shown muted at the card's end, such as a provider mark and name. */
+    source?: ReactNode;
+    className?: string;
+};
+/** One option of a `RadioCardGroup`. */
+export declare function RadioCard({ title, detail, source: sourceContent, className, ...props }: RadioCardProps): import("@types/react").JSX.Element;

package/dist/components/radio-card.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { css, cx } from "#primitives/css";
+import { checkMark, radioDot } from "./form-controls.js";
+/*
+ * A choice drawn as a card: the radio, a title with its detail, and where the option comes from
+ * at the far edge. The whole card is the radio, so it takes the hover wash, the focus ring, and,
+ * once chosen, the accent wash under the accent's edge.
+ */
+const cards = css({ display: "grid", gap: "layout.controlGap" });
+const card = css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.contentGap",
+    width: "100%",
+    padding: "panel.default",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "transparent",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    textAlign: "start",
+    cursor: "pointer",
+    transitionProperty: "background, border-color",
+    transitionDuration: "fast",
+    _hover: { background: "bg.glassHover" },
+    "&[data-checked]": {
+        background: "bg.selected",
+        borderColor: "border.selected",
+    },
+    _focusVisible: { focusRing: "outer" },
+    "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+});
+// The card's own hover darkens the mark's edge too, as a label's hover does for a loose checkbox.
+const mark = css({
+    // Centered on the title's first line, which is one `em` tall, so a detail line below it can't pull
+    // the mark down.
+    marginTop: "calc((1em - token(sizes.control.radio)) / 2)",
+    "[data-checked] > &": {
+        background: "bg.primary",
+        borderColor: "transparent",
+    },
+    "[data-checked]:hover > &": { background: "bg.primaryHover" },
+});
+const copy = css({ flex: "1", minWidth: "0", display: "grid", gap: "layout.tightGap" });
+const detailText = css({ color: "fg.muted", fontSize: "code" });
+const source = css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: "0",
+    gap: "control.iconGap",
+    color: "fg.muted",
+    fontSize: "code",
+});
+export function RadioCardGroup({ name, label, defaultValue, value, onValueChange, className, ...props }) {
+    return (_jsx(BaseRadioGroup, { ...props, className: cx(cards, className), "aria-label": props["aria-label"] ?? label, "data-ciridae-ui": "", defaultValue: defaultValue, name: name, onValueChange: (nextValue) => onValueChange?.(String(nextValue)), value: value }));
+}
+/** One option of a `RadioCardGroup`. */
+export function RadioCard({ title, detail, source: sourceContent, className, ...props }) {
+    return (_jsxs(BaseRadio.Root, { ...props, className: cx(card, className), "data-ciridae-ui": "", children: [_jsx("span", { className: cx(checkMark({ shape: "round", focus: "row" }), mark), children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), _jsxs("span", { className: copy, children: [_jsx("span", { children: title }), detail !== undefined && _jsx("span", { className: detailText, children: detail })] }), sourceContent !== undefined && _jsx("span", { className: source, children: sourceContent })] }));
+}

package/dist/components/recent-items.d.ts

@@ -0,0 +1,28 @@
+type RecentItemsStorage<Item> = {
+    storageKey?: undefined;
+    parseItem?: undefined;
+} | {
+    /** Keeps both lists in `localStorage` as `{ recent, pinned }`. */
+    storageKey: string;
+    /** Reads one stored entry back, or null to drop it, such as a record that is gone. */
+    parseItem: (stored: unknown) => Item | null;
+};
+export type UseRecentItemsOptions<Item> = RecentItemsStorage<Item> & {
+    /** What makes two items the same, such as a record's route. */
+    getId: (item: Item) => string;
+    /** The open item; it joins Recent unless it is pinned or already listed. */
+    current?: Item | null;
+    /** Recent's length; 10 by default. */
+    limit?: number;
+    /** Recent while nothing is stored. */
+    seed?: readonly Item[];
+};
+export declare function useRecentItems<Item>({ getId, current, limit, seed, storageKey, parseItem, }: UseRecentItemsOptions<Item>): {
+    recent: readonly Item[];
+    pinned: readonly Item[];
+    isPinned: (item: Item) => boolean;
+    pin: (item: Item) => void;
+    unpin: (item: Item) => void;
+    togglePin: (item: Item) => void;
+};
+export {};

package/dist/components/recent-items.js

@@ -0,0 +1,63 @@
+/*
+ * The items a person opened lately and the ones they pinned, for a sidebar's Pinned and Recent
+ * sections. An item joins Recent at the top the first time it opens; one already listed keeps its
+ * place, so reopening never reshuffles the list under the pointer. Pinning moves an item out of
+ * Recent to the end of Pinned; unpinning puts it back in Recent. Recent holds `limit` items.
+ */
+import { useCallback, useEffect, useState } from "react";
+const DEFAULT_LIMIT = 10;
+function readStored(storageKey, parseItem) {
+    try {
+        const text = globalThis.localStorage?.getItem(storageKey);
+        if (!text)
+            return null;
+        const stored = JSON.parse(text);
+        if (typeof stored !== "object" || stored === null)
+            return null;
+        const list = (value) => Array.isArray(value) ? value.flatMap((entry) => parseItem(entry) ?? []) : [];
+        return {
+            recent: "recent" in stored ? list(stored.recent) : [],
+            pinned: "pinned" in stored ? list(stored.pinned) : [],
+        };
+    }
+    catch {
+        // Unreadable storage starts from the seed.
+        return null;
+    }
+}
+export function useRecentItems({ getId, current, limit = DEFAULT_LIMIT, seed = [], storageKey, parseItem, }) {
+    const [state, setState] = useState(() => {
+        const stored = storageKey && parseItem ? readStored(storageKey, parseItem) : null;
+        return stored ?? { recent: seed.slice(0, limit), pinned: [] };
+    });
+    const listed = useCallback((items, item) => items.some((other) => getId(other) === getId(item)), [getId]);
+    const without = useCallback((items, item) => items.filter((other) => getId(other) !== getId(item)), [getId]);
+    const withRecent = useCallback((items, item) => listed(items, item) ? items : [item, ...items].slice(0, limit), [listed, limit]);
+    useEffect(() => {
+        if (!current)
+            return;
+        setState((previous) => listed(previous.pinned, current) || listed(previous.recent, current)
+            ? previous
+            : { ...previous, recent: withRecent(previous.recent, current) });
+    }, [current, listed, withRecent]);
+    useEffect(() => {
+        if (!storageKey)
+            return;
+        try {
+            globalThis.localStorage?.setItem(storageKey, JSON.stringify(state));
+        }
+        catch {
+            // Storage is a convenience; the lists still work for this visit.
+        }
+    }, [state, storageKey]);
+    const pin = useCallback((item) => setState(({ recent, pinned }) => listed(pinned, item)
+        ? { recent, pinned }
+        : { pinned: [...pinned, item], recent: without(recent, item) }), [listed, without]);
+    const unpin = useCallback((item) => setState(({ recent, pinned }) => ({
+        pinned: without(pinned, item),
+        recent: withRecent(recent, item),
+    })), [without, withRecent]);
+    const isPinned = (item) => listed(state.pinned, item);
+    const togglePin = (item) => (isPinned(item) ? unpin(item) : pin(item));
+    return { recent: state.recent, pinned: state.pinned, isPinned, pin, unpin, togglePin };
+}

package/dist/components/record.d.ts

@@ -0,0 +1,95 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactNode } from "react";
+import { type StepStatus } from "./stages.js";
+import { TabsRoot } from "./tabs.js";
+import type { Tone } from "./badge.js";
+export type DetailLayoutProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The record's title row: it opens the work's column, or sits over the tab row once tabbed. */
+    header?: ReactNode;
+    main: ReactNode;
+    aside?: ReactNode;
+    /** The layout's width under which the aside stacks below the main column. Defaults to 900. */
+    stackBelow?: number;
+    /** Beside the main column, the aside sticks and holds the window's height. */
+    stickyAside?: boolean;
+    /** Stacked, `below` puts the aside under the work; `tabs` shows one at a time under a tab row. */
+    stacking?: "below" | "tabs";
+    /** The tab row's names for the work and the aside. Default to the locale's. */
+    tabLabels?: {
+        main: ReactNode;
+        aside: ReactNode;
+    };
+};
+export declare function DetailLayout({ header, main, aside, stackBelow, stickyAside, stacking, tabLabels, className, ...props }: DetailLayoutProps): import("@types/react").JSX.Element;
+/** The record's title row is the page's: `PageHeading`, with `leading`, `badge` and menu `actions`. */
+export { PageHeading, type PageHeadingProps } from "./page-frame.js";
+export type RelatedTab = {
+    value: string;
+    label: ReactNode;
+    /** Muted after the label, such as how many rows the tab holds. */
+    count?: number;
+    /** At the end of the tab row while the tab is open, such as which part it shows. */
+    meta?: ReactNode;
+    content: ReactNode;
+};
+export type RelatedTabsProps = Omit<ComponentProps<typeof TabsRoot>, "children" | "value" | "defaultValue" | "onValueChange"> & {
+    tabs: readonly RelatedTab[];
+    value?: string;
+    /** The first tab by default. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function RelatedTabs({ tabs, value, defaultValue, onValueChange, className, ...props }: RelatedTabsProps): import("@types/react").JSX.Element | null;
+export type ItemCardField = {
+    label: ReactNode;
+    value: ReactNode;
+    /** The column's share of the row, as a grid `fr`. Defaults to 1. */
+    weight?: number;
+};
+export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children" | "onSelect"> & {
+    title: ReactNode;
+    /** One segment per stage, in its status's color. */
+    progress?: readonly StepStatus[];
+    fields: readonly ItemCardField[];
+    /** The footer's start: the stage the item is at. */
+    status: {
+        label: ReactNode;
+        status: StepStatus;
+    };
+    /** The footer's end, such as what comes next. */
+    footer?: ReactNode;
+    selected?: boolean;
+    /** Makes the card a button; `href` or a router link as `render` makes it a link. */
+    onSelect?: () => void;
+    href?: string;
+};
+export declare function ItemCard({ title, progress, fields, status, footer, selected, onSelect, href, render, className, style, ...props }: ItemCardProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export type RelatedListItem = {
+    id: string;
+    title: ReactNode;
+    /** In the item's tile, such as the record type's icon. */
+    icon?: ReactNode;
+    /** The line under the title, joined by separators, such as its type and number. */
+    details?: readonly ReactNode[];
+    /** Last on that line, in its tone's color. */
+    status?: {
+        label: ReactNode;
+        tone?: Tone;
+    };
+    /** Makes the row a link; a router link as `render` routes it. */
+    href?: string;
+    render?: useRender.ComponentProps<"a">["render"];
+    /** Makes the row a button. */
+    onOpen?: () => void;
+};
+export type RelatedListGroup = {
+    id: string;
+    label: ReactNode;
+    items: readonly RelatedListItem[];
+};
+export type RelatedListProps = Omit<ComponentProps<"div">, "children"> & {
+    groups: readonly RelatedListGroup[];
+    /** After the groups, such as a button that links another record. */
+    footer?: ReactNode;
+};
+export declare function RelatedList({ groups, footer, className, ...props }: RelatedListProps): import("@types/react").JSX.Element;

package/dist/components/record.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The pieces a record's page is laid out with. `DetailLayout` splits it into the work and a side
+ * column; `PageHeading` (also exported here) is the record's title row; `RelatedTabs` is the tabbed card of what the
+ * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw; `RelatedList`
+ * lists the records and documents it points at.
+ */
+import { useRender } from "@base-ui/react/use-render";
+import { CaretRightIcon } from "@phosphor-icons/react";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { useControllableState } from "./controllable-state.js";
+import { directional, icon } from "./icon.js";
+import { MutedText } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { cardSurface } from "./panel.js";
+import { StepDot } from "./stages.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs.js";
+/*
+ * Detail layout: the work in two thirds, the side column in the last, while the layout's own box
+ * is at least `stackBelow` wide; under it the side column follows the work. By the box, not the
+ * window, so a docked sheet narrows it as a small screen does.
+ */
+const detailLayout = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)",
+    gap: "layout.contentGap",
+    // The side column runs the full height of the work beside it.
+    alignItems: "stretch",
+    "&[data-stacked]": { gridTemplateColumns: "minmax(0, 1fr)" },
+    "& > [hidden]": { display: "none" },
+});
+// The tab row starts where the title over it does: inside the heading's own inset.
+const detailTabs = css({
+    "&[data-variant=underline]:is([data-ciridae-ui] > *)": { paddingInline: "layout.tightGap" },
+});
+const detailMain = css({ display: "grid", alignContent: "start", gap: "layout.contentGap" });
+const detailAside = css({
+    display: "flex",
+    flexDirection: "column",
+    minWidth: "0",
+    "& > *": { flex: "1", minHeight: "0" },
+    // Beside the work, a sticky aside holds the window's height, so whatever it ends with sits at the
+    // foot of the screen: the shell's content box less its insets.
+    _notWide: {
+        "[data-sticky-aside]:not([data-stacked]) > &": {
+            position: "sticky",
+            top: "0",
+            alignSelf: "start",
+            height: "calc(100dvh - token(spacing.panel.compact) * 2 - token(sizes.shell.header) - var(--app-content-inset) * 2 - 3px)",
+        },
+    },
+});
+/** True while `element` is narrower than `width`, measured before paint. */
+function useNarrowerThan(width) {
+    const ref = useRef(null);
+    const [narrow, setNarrow] = useState(false);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const measure = () => setNarrow(element.getBoundingClientRect().width < width);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [width]);
+    return [ref, narrow];
+}
+export function DetailLayout({ header, main, aside, stackBelow = 900, stickyAside = false, stacking = "below", tabLabels, className, ...props }) {
+    const [ref, stacked] = useNarrowerThan(stackBelow);
+    const { labels } = useCiridaeLocale();
+    const [tab, setTab] = useState("main");
+    const tabbed = stacked && stacking === "tabs" && aside !== undefined;
+    // Both columns stay mounted across the switch, so a draft or an open tab inside survives it.
+    return (_jsxs(TabsRoot, { ref: ref, ...props, value: tab, onValueChange: (value) => setTab(value), className: cx(detailLayout, className), "data-ciridae-ui": "", "data-stacked": stacked || aside === undefined || undefined, "data-sticky-aside": stickyAside || undefined, children: [tabbed && header, tabbed && (_jsxs(TabsList, { variant: "underline", className: detailTabs, children: [_jsx(TabsTab, { value: "main", children: tabLabels?.main ?? labels.record.mainTab }), _jsx(TabsTab, { value: "aside", children: tabLabels?.aside ?? labels.record.asideTab })] })), _jsxs("div", { className: detailMain, hidden: tabbed && tab !== "main", children: [!tabbed && header, main] }), aside !== undefined && (_jsx("div", { className: detailAside, hidden: tabbed && tab !== "aside", children: aside }))] }));
+}
+/** The record's title row is the page's: `PageHeading`, with `leading`, `badge` and menu `actions`. */
+export { PageHeading } from "./page-frame.js";
+/* Related tabs: one card, its tabs on the header row with the open tab's meta at the end. */
+const relatedCard = css({
+    containerType: "inline-size",
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    alignContent: "start",
+    gap: "layout.tightGap",
+    paddingInline: "layout.tightGap",
+    paddingBottom: "layout.tightGap",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "inset",
+    background: "bg.panel",
+    minWidth: "0",
+});
+const relatedHeader = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minHeight: "control.field",
+    paddingInlineEnd: "panel.default",
+    "& > :first-child": { minWidth: "0", maxWidth: "100%" },
+});
+// Wrapped under the tabs, the meta keeps the rows' inset.
+const relatedMeta = css({ paddingInlineStart: "control.block", fontSize: "code" });
+export function RelatedTabs({ tabs, value, defaultValue, onValueChange, className, ...props }) {
+    const [chosen, setChosen] = useControllableState(value, defaultValue ?? tabs[0]?.value ?? "", onValueChange);
+    const open = tabs.find((tab) => tab.value === chosen) ?? tabs[0];
+    if (!open)
+        return null;
+    return (_jsxs(TabsRoot, { value: open.value, onValueChange: (next) => setChosen(String(next)), ...props, className: cx(relatedCard, className), "data-ciridae-ui": "", children: [_jsxs("div", { className: relatedHeader, children: [_jsx(TabsList, { variant: "contained", children: tabs.map((tab) => (_jsx(TabsTab, { value: tab.value, count: tab.count, children: tab.label }, tab.value))) }), open.meta !== undefined && _jsx(MutedText, { className: relatedMeta, children: open.meta })] }), tabs.map((tab) => (_jsx(TabsPanel, { value: tab.value, children: tab.content }, tab.value)))] }));
+}
+/* Item card: one of a record's parts, with its progress as a thin segmented bar. */
+const itemCard = css(cardSurface, {
+    display: "grid",
+    gap: "layout.clusterGap",
+    padding: "panel.comfortable",
+    textAlign: "start",
+    color: "fg.primary",
+    font: "inherit",
+    letterSpacing: "compact",
+    textDecoration: "none",
+    "&:is(button, a)": { cursor: "pointer", _hover: { borderColor: "border.glass" } },
+    "&[data-selected]": { borderColor: "accent.green", _hover: { borderColor: "accent.green" } },
+    _focusVisible: { focusRing: "outer" },
+});
+const itemHeader = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    fontSize: "body",
+    fontWeight: "medium",
+    whiteSpace: "nowrap",
+});
+const progressBar = css({ display: "inline-flex", alignItems: "center", gap: "2px" });
+const progressSegment = css({
+    width: "14px",
+    height: "4px",
+    borderRadius: "1px",
+    background: "bg.fill",
+    "&[data-status=done]": { background: "accent.green" },
+    "&[data-status=current]": { background: "accent.yellow" },
+    "&[data-status=agent]": { background: "accent.blue" },
+    "&[data-status=blocked]": { background: "accent.red" },
+    "&[data-status=waiting]": { background: "fg.muted" },
+});
+const itemFields = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    paddingBottom: "panel.default",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+const itemFieldLabel = css({
+    display: "block",
+    marginBottom: "layout.controlGap",
+    color: "fg.muted",
+    fontWeight: "regular",
+    letterSpacing: "normal",
+});
+const itemFooter = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    paddingTop: "panel.default",
+    borderTop: "1px solid token(colors.border.panel)",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+const itemStatus = css({ display: "inline-flex", alignItems: "center", gap: "layout.tightGap" });
+export function ItemCard({ title, progress, fields, status, footer, selected = false, onSelect, href, render, className, style, ...props }) {
+    const interactive = onSelect !== undefined || href !== undefined || render !== undefined;
+    const columns = {
+        gridTemplateColumns: fields.map((field) => `minmax(0, ${field.weight ?? 1}fr)`).join(" "),
+    };
+    return useRender({
+        defaultTagName: href !== undefined ? "a" : interactive ? "button" : "div",
+        render,
+        props: {
+            ...(href !== undefined ? { href } : interactive ? { type: "button" } : {}),
+            ...props,
+            style,
+            onClick: onSelect,
+            className: cx(itemCard, className),
+            "data-ciridae-ui": "",
+            "data-selected": selected || undefined,
+            "aria-pressed": onSelect !== undefined && href === undefined ? selected : undefined,
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: itemHeader, children: [title, progress && (_jsx("span", { className: progressBar, "aria-hidden": "true", children: progress.map((segment, index) => (_jsx("span", { className: progressSegment, "data-status": segment }, index))) }))] }), _jsxs("span", { className: css({ display: "grid" }), children: [_jsx("span", { className: itemFields, style: columns, children: fields.map((field, index) => (_jsxs("span", { children: [_jsx("span", { className: itemFieldLabel, children: field.label }), field.value] }, index))) }), _jsxs("span", { className: itemFooter, children: [_jsxs("span", { className: itemStatus, children: [_jsx(StepDot, { status: status.status, size: "small" }), status.label] }), footer] })] })] })),
+        },
+    });
+}
+/* Related list: the records and documents a record points at, grouped by relation. */
+const groupHeader = css({
+    display: "flex",
+    alignItems: "baseline",
+    gap: "control.iconGap",
+    margin: "none",
+    paddingTop: "panel.comfortable",
+    paddingInline: "panel.default",
+    paddingBottom: "control.iconGap",
+    color: "fg.muted",
+    font: "inherit",
+    fontSize: "code",
+    fontWeight: "medium",
+    "section:first-child > &": { paddingTop: "layout.tightGap" },
+});
+const relatedRows = css({ margin: "none", padding: "none", listStyle: "none" });
+const relatedRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    width: "100%",
+    padding: "panel.default",
+    border: "0",
+    borderRadius: "action",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    textDecoration: "none",
+    "&:is(button, a)": { cursor: "pointer", _hover: { background: "bg.rowHover" } },
+    _focusVisible: { focusRing: "outer" },
+});
+const tile = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.compact",
+    height: "control.compact",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "action",
+    background: "bg.panel",
+    color: "fg.secondary",
+    "& svg": { fontSize: "icon.small" },
+});
+const rowTitle = css({
+    display: "block",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const rowMeta = css({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "control.iconGap",
+    marginTop: "layout.tightGap",
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    "& [data-separator]": { color: "fg.muted" },
+    "& [data-tone=info]": { color: "accent.blue" },
+    "& [data-tone=success]": { color: "accent.green" },
+    "& [data-tone=warning]": { color: "accent.yellow" },
+    "& [data-tone=danger]": { color: "accent.red" },
+});
+const listFooter = css({ paddingTop: "panel.comfortable", paddingInline: "panel.default" });
+function RelatedListRow({ item }) {
+    const link = item.href !== undefined || item.render !== undefined;
+    const interactive = link || item.onOpen !== undefined;
+    const line = [
+        ...(item.details ?? []).map((detail, index) => ({ key: `detail-${index}`, node: detail })),
+        ...(item.status ? [{ key: "status", node: item.status.label, tone: item.status.tone }] : []),
+    ];
+    return useRender({
+        defaultTagName: link ? "a" : interactive ? "button" : "div",
+        render: item.render,
+        props: {
+            ...(item.href !== undefined ? { href: item.href } : {}),
+            ...(!link && interactive ? { type: "button" } : {}),
+            className: relatedRow,
+            onClick: item.onOpen,
+            children: (_jsxs(_Fragment, { children: [item.icon !== undefined && _jsx("span", { className: tile, children: item.icon }), _jsxs("span", { className: css({ flex: "1", minWidth: "0" }), children: [_jsx("span", { className: rowTitle, children: item.title }), line.length > 0 && (_jsx("span", { className: rowMeta, children: line.map((part, index) => (_jsxs("span", { className: css({ display: "contents" }), children: [index > 0 && (_jsx("span", { "data-separator": "", "aria-hidden": "true", children: "\u00B7" })), _jsx("span", { "data-tone": "tone" in part ? part.tone : undefined, children: part.node })] }, part.key))) }))] }), interactive && _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) })] })),
+        },
+    });
+}
+export function RelatedList({ groups, footer, className, ...props }) {
+    return (_jsxs("div", { ...props, className: className, "data-ciridae-ui": "", children: [groups.map((group) => (_jsxs("section", { children: [_jsxs("h3", { className: groupHeader, children: [group.label, _jsx("span", { children: group.items.length })] }), _jsx("ul", { className: relatedRows, children: group.items.map((item) => (_jsx("li", { children: _jsx(RelatedListRow, { item: item }) }, item.id))) })] }, group.id))), footer !== undefined && _jsx("div", { className: listFooter, children: footer })] }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/**
+ * A region that scrolls inside its own bounds and shows a slim scrollbar while it overflows. Size
+ * the viewport with `viewportClassName`, such as a `maxHeight`; content taller than that scrolls.
+ */
+export declare function ScrollArea({ className, viewportClassName, scrollDirections, children, ...viewportProps }: {
+    className?: string;
+    viewportClassName: string;
+    /**
+     * Omit to scroll up and down only; `vertical-and-horizontal` also scrolls sideways, for content
+     * wider than the area such as a table on a phone.
+     */
+    scrollDirections?: "vertical" | "vertical-and-horizontal";
+    children: ReactNode;
+    "aria-label"?: string;
+}): import("@types/react").JSX.Element;

package/dist/components/scroll-area.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { css, cx } from "#primitives/css";
+const root = css({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    minWidth: "0",
+    minHeight: "0",
+});
+// Scrolling past either end carries on to the page, so a list in the middle of a form never
+// stops the reader short of what follows it.
+const viewport = css({
+    minHeight: "0",
+    _focusVisible: { focusRing: "inset" },
+});
+// Always drawn while there is overflow, rather than only on hover, so a list shows it scrolls.
+const scrollbar = css({
+    zIndex: "scrollbar",
+    display: "flex",
+    padding: "1px",
+    opacity: "0.7",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    "&[data-orientation=vertical]": {
+        width: "scroll.bar",
+        marginBlock: "2px",
+        marginInlineEnd: "1px",
+    },
+    "&[data-orientation=horizontal]": {
+        height: "scroll.bar",
+        marginInline: "2px",
+        marginBottom: "1px",
+    },
+    "&[data-hovering], &[data-scrolling]": { opacity: "1" },
+});
+// Base UI sizes the thumb along its track; it fills the track's other axis.
+const thumb = css({
+    borderRadius: "round",
+    background: "border.control",
+    "&[data-orientation=vertical]": { width: "100%" },
+    "&[data-orientation=horizontal]": { height: "100%" },
+});
+/**
+ * A region that scrolls inside its own bounds and shows a slim scrollbar while it overflows. Size
+ * the viewport with `viewportClassName`, such as a `maxHeight`; content taller than that scrolls.
+ */
+export function ScrollArea({ className, viewportClassName, scrollDirections = "vertical", children, ...viewportProps }) {
+    return (_jsxs(BaseScrollArea.Root, { className: cx(root, className), "data-ciridae-ui": "", children: [_jsx(BaseScrollArea.Viewport, { ...viewportProps, className: cx(viewport, viewportClassName), children: _jsx(BaseScrollArea.Content, { style: scrollDirections === "vertical" ? { minWidth: 0 } : undefined, children: children }) }), _jsx(BaseScrollArea.Scrollbar, { orientation: "vertical", className: scrollbar, children: _jsx(BaseScrollArea.Thumb, { className: thumb }) }), scrollDirections === "vertical-and-horizontal" && (_jsx(BaseScrollArea.Scrollbar, { orientation: "horizontal", className: scrollbar, children: _jsx(BaseScrollArea.Thumb, { className: thumb }) }))] }));
+}