@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/agent-work.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The main agent's work beside its one long-running thread. `AgentTask` is a piece of work the
+ * agent runs on its own; the host owns the list. The thread is its history: a waiting task is the
+ * agent asking (`AgentTaskCard`), a finished one its summary as a reply. `AgentWork` is the rest,
+ * kept minimal: one line for what the agent is doing now and the tasks waiting on the user, each
+ * a jump to its ask in the thread; a column beside the thread, or a line over it that opens the
+ * list (the sheet). `AgentWorkButton` is that line as a header button over a drawer (a phone).
+ */
+import { CaretDownIcon, SealCheckIcon } from "@phosphor-icons/react";
+import { Fragment, useRef, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { Drawer, DrawerBody } from "./drawer.js";
+import { icon, Spinner } from "./icon.js";
+import { Eyebrow } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+/** The id of a waiting task's ask in the thread. */
+export function agentTaskAnchorId(taskId) {
+    return `agent-task-${taskId}`;
+}
+/** Scrolls a waiting task's ask into view and marks it for a moment. */
+export function jumpToAgentTask(task) {
+    const target = document.getElementById(agentTaskAnchorId(task.id));
+    if (!target)
+        return;
+    target.scrollIntoView({ block: "center", behavior: "smooth" });
+    target.focus({ preventScroll: true });
+    target.dataset.highlighted = "";
+    setTimeout(() => delete target.dataset.highlighted, 1600);
+}
+/** The running task started last, whose phrase says what the agent is doing now. */
+function currentTask(tasks) {
+    return tasks
+        .filter((task) => task.status === "running")
+        .sort((first, second) => Date.parse(second.startedAt) - Date.parse(first.startedAt))[0];
+}
+const workColumn = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.controlGap",
+    flex: "1",
+    minHeight: "0",
+    overflowY: "auto",
+    paddingBlock: "panel.default",
+    paddingInline: "menu.inset",
+    "& [data-heading]": { paddingBlock: "layout.tightGap", paddingInline: "menu.itemInline" },
+    "& > section": { display: "grid" },
+});
+const nowLine = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minWidth: "0",
+    paddingInline: "menu.itemInline",
+    color: "fg.secondary",
+    fontSize: "caption",
+    lineHeight: "compact",
+    "& > span": { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+});
+const waitingRow = css({
+    display: "block",
+    width: "100%",
+    paddingBlock: "control.compactBlock",
+    paddingInline: "menu.itemInline",
+    border: "0",
+    borderRadius: "action",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "caption",
+    lineHeight: "compact",
+    textAlign: "start",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    _hover: { background: "bg.hover" },
+    _focusVisible: { focusRing: "inset" },
+});
+const summaryBar = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    width: "100%",
+    minHeight: "control.small",
+    paddingBlock: "layout.tightGap",
+    paddingInline: "panel.comfortable",
+    border: "0",
+    borderBottom: "1px solid token(colors.border.control)",
+    background: "transparent",
+    color: "fg.muted",
+    font: "inherit",
+    fontSize: "code",
+    lineHeight: "compact",
+    textAlign: "start",
+    "&:is(button)": { cursor: "pointer", _hover: { color: "fg.primary" } },
+    _focusVisible: { focusRing: "inset" },
+    "& > [data-phrase]": {
+        flex: "1",
+        minWidth: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& > svg:last-child": { transition: "rotate 120ms ease" },
+    "&[aria-expanded=true] > svg:last-child": { rotate: "180deg" },
+});
+const summaryLists = css({
+    maxHeight: "50vh",
+    overflowY: "auto",
+    borderBottom: "1px solid token(colors.border.control)",
+});
+/** What the agent is doing now and what waits on the user; nothing when neither. */
+export function AgentWork({ tasks, layout = "column", onTaskSelect, className }) {
+    const { labels } = useCiridaeLocale();
+    const [open, setOpen] = useState(false);
+    const now = currentTask(tasks);
+    const waiting = tasks.filter((task) => task.status === "waiting");
+    const select = (task) => {
+        setOpen(false);
+        if (onTaskSelect)
+            onTaskSelect(task);
+        // After the summary's list closes, so the thread has its full height again.
+        else
+            requestAnimationFrame(() => jumpToAgentTask(task));
+    };
+    const waitingList = waiting.length > 0 && (_jsxs("section", { children: [_jsx(Eyebrow, { as: "div", "data-heading": "", children: labels.chat.waitingOnYou }), waiting.map((task) => (_jsx("button", { type: "button", className: waitingRow, onClick: () => select(task), children: task.title }, task.id)))] }));
+    if (layout === "column") {
+        return (_jsxs("div", { className: cx(workColumn, className), "data-ciridae-ui": "", children: [now && _jsx(NowLine, { task: now }), waitingList] }));
+    }
+    if (!now && waiting.length === 0)
+        return null;
+    const phrase = now ? (now.activity ?? now.title) : labels.chat.waitingOnYou;
+    const mark = now ? (_jsx(Spinner, { size: "small", "aria-hidden": "true" })) : (_jsx(SealCheckIcon, { className: icon({ size: "small", tone: "warning" }), weight: "fill" }));
+    if (waiting.length === 0) {
+        return (_jsxs("div", { className: cx(summaryBar, className), "data-ciridae-ui": "", children: [mark, _jsx("span", { "data-phrase": "", children: phrase })] }));
+    }
+    return (_jsxs("div", { className: className, "data-ciridae-ui": "", children: [_jsxs("button", { type: "button", className: summaryBar, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [mark, _jsx("span", { "data-phrase": "", children: phrase }), _jsx(CaretDownIcon, { className: icon({ size: "compact" }), weight: "bold" })] }), open && (_jsx("div", { className: summaryLists, children: _jsx("div", { className: workColumn, children: waitingList }) }))] }));
+}
+function NowLine({ task }) {
+    return (_jsxs("div", { className: nowLine, children: [_jsx(Spinner, { size: "small", "aria-hidden": "true" }), _jsx("span", { children: task.activity ?? task.title })] }));
+}
+/**
+ * The agent's work as a header icon button, such as on a phone: spinning while it works, with a
+ * dot while something waits on the user, over a drawer with the column.
+ */
+export function AgentWorkButton({ tasks, title, className }) {
+    const { labels } = useCiridaeLocale();
+    const [open, setOpen] = useState(false);
+    const picked = useRef(null);
+    const now = currentTask(tasks);
+    const waiting = tasks.some((task) => task.status === "waiting");
+    if (!now && !waiting)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": waiting ? labels.chat.waitingOnYou : (now?.activity ?? now?.title ?? ""), badge: waiting, className: className, onClick: () => setOpen(true), children: now ? (_jsx(Spinner, { size: "small", "aria-hidden": "true" })) : (_jsx(SealCheckIcon, { className: icon({ size: "small" }) })) }), _jsx(Drawer, { open: open, onOpenChange: setOpen, onOpenChangeComplete: (isOpen) => {
+                    // Once the drawer is gone, so the thread can scroll and take focus.
+                    if (isOpen || !picked.current)
+                        return;
+                    jumpToAgentTask(picked.current);
+                    picked.current = null;
+                }, size: "narrow", title: title, children: _jsx(DrawerBody, { flush: true, children: _jsx(AgentWork, { tasks: tasks, onTaskSelect: (task) => {
+                            picked.current = task;
+                            setOpen(false);
+                        } }) }) })] }));
+}
+const askCard = css({
+    display: "grid",
+    gap: "control.iconGap",
+    width: "100%",
+    maxWidth: "chat.bubble",
+    paddingBlock: "control.block",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "field",
+    background: "bg.card",
+    fontSize: "caption",
+    lineHeight: "log",
+    outline: "none",
+    scrollMarginBlock: "panel.default",
+    transitionProperty: "border-color, box-shadow",
+    transitionDuration: "fast",
+    "&[data-highlighted]": { borderColor: "border.focus", boxShadow: "focus" },
+});
+const detailList = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr)",
+    columnGap: "layout.controlGap",
+    margin: "none",
+    fontSize: "code",
+    lineHeight: "compact",
+    "& > dt": { color: "fg.muted", whiteSpace: "nowrap" },
+    "& > dd": { margin: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+});
+const cardActions = css({ display: "flex", justifyContent: "flex-end", gap: "layout.controlGap" });
+const optionList = css({
+    marginInline: "calc(token(spacing.control.compactInline) * -1)",
+    marginBlockEnd: "calc(token(spacing.control.block) * -1)",
+    "& > button": {
+        display: "block",
+        width: "100%",
+        paddingBlock: "control.compactBlock",
+        paddingInline: "control.compactInline",
+        border: "0",
+        borderTop: "1px solid token(colors.border.control)",
+        background: "transparent",
+        color: "fg.primary",
+        font: "inherit",
+        textAlign: "start",
+        cursor: "pointer",
+        _hover: { background: "bg.hover" },
+        _focusVisible: { focusRing: "inset" },
+        "&:last-child": { borderBottomLeftRadius: "field", borderBottomRightRadius: "field" },
+        "& > span": { display: "block", color: "fg.muted", fontSize: "code" },
+    },
+});
+/** The agent asking: a waiting task's question, its details, and Deny / Approve or the answers. */
+export function AgentTaskCard({ task, onReply }) {
+    const { labels } = useCiridaeLocale();
+    const { ask } = task;
+    if (!ask)
+        return null;
+    return (_jsxs("div", { id: agentTaskAnchorId(task.id), className: askCard, tabIndex: -1, "data-ciridae-ui": "", children: [_jsx("span", { children: ask.text }), ask.kind === "approval" && ask.details && ask.details.length > 0 && (_jsx("dl", { className: detailList, children: ask.details.map((detail) => (_jsxs(Fragment, { children: [_jsx("dt", { children: detail.label }), _jsx("dd", { children: detail.value })] }, detail.label))) })), ask.kind === "approval" ? (_jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", onClick: () => onReply?.(task, { kind: "decision", decision: "deny" }), children: labels.chat.deny }), _jsx(Button, { onClick: () => onReply?.(task, { kind: "decision", decision: "allow" }), children: labels.chat.approve })] })) : (_jsx("div", { className: optionList, children: ask.options.map((option) => (_jsxs("button", { type: "button", onClick: () => onReply?.(task, { kind: "answer", answer: option.label }), children: [option.label, option.description && _jsx("span", { children: option.description })] }, option.label))) }))] }));
+}

package/dist/components/app-navigation.d.ts

@@ -0,0 +1,66 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+export type NavItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** After the label, such as how many open items the page lists. */
+    count?: ReactNode;
+    /** Makes the row a link to this address. */
+    href?: string;
+    /** The row's link element, such as a router's `<Link to="...">`; `renderLink` builds it for every row. */
+    render?: ReactElement;
+    onSelect?: () => void;
+    /** At the row's end on hover or focus, such as a pin `IconButton`; never in the rail. */
+    action?: ReactNode;
+    /** `compact` for a secondary list, such as recently opened records. */
+    size?: "regular" | "compact";
+};
+export type NavSection = {
+    id: string;
+    label?: ReactNode;
+    items: readonly NavItem[];
+    /** Past this many items the rest fold behind a More row. */
+    maxVisible?: number;
+    /** Whether its items are in the rail too. Defaults to true. */
+    rail?: boolean;
+    /** On the tinted panel under the main sections; consecutive panel sections share one. */
+    panel?: boolean;
+    /** Unfolded, its items scroll in a short box rather than lengthen the sidebar. */
+    scrollWhenUnfolded?: boolean;
+    /** Under its items in the expanded sidebar, inset as its label is, such as a picker that scopes them. */
+    footer?: ReactNode;
+};
+export type AppNavigationProps = Omit<ComponentProps<"aside">, "children"> & {
+    sections: readonly NavSection[];
+    /**
+     * The open item's id, or several, such as a list and the record opened from it: those rows are
+     * marked current, and a fold holding one opens.
+     */
+    activeId?: string | readonly string[] | null;
+    /** Every row's link element, such as `(item) => <Link to={paths[item.id]} />`. */
+    renderLink?: (item: NavItem) => ReactElement | undefined;
+    /** Above the sections in the expanded sidebar, such as the workspace switcher and search. */
+    header?: ReactNode;
+    /** Above the icons in the rail. */
+    railHeader?: ReactNode;
+    /** Pinned to the sidebar's foot; use `AppSidebarOnly` for its expanded and rail versions. */
+    footer?: ReactNode;
+    /** Unfold every section while the sidebar has room for all of its rows. Defaults to true. */
+    autoUnfold?: boolean;
+    labels?: Partial<{
+        more: string;
+        less: string;
+        navigation: string;
+    }>;
+};
+/**
+ * Whether the sidebar has room to list `foldedRows` more rows: the free space between its
+ * navigation and its footer covers them. Once it has, it loses it only when the navigation runs
+ * out of room, so it does not flicker at the threshold.
+ */
+export declare function useSidebarRoom(foldedRows: number): {
+    navRef: import("@types/react").RefObject<HTMLDivElement | null>;
+    footerRef: import("@types/react").RefObject<HTMLDivElement | null>;
+    roomy: boolean;
+};
+export declare function AppNavigation({ sections, activeId: ownActiveId, renderLink, header, railHeader, footer, autoUnfold, labels: ownLabels, ...props }: AppNavigationProps): import("@types/react").JSX.Element;

package/dist/components/app-navigation.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The app's sidebar from data. `AppNavigation` draws its sections twice from the same list: as the
+ * expanded sidebar, and as the icon rail the shell shows under 1000px. A section can fold past
+ * `maxVisible` behind a More row, and unfolds on its own while the item it holds is open or, with
+ * `autoUnfold`, while the sidebar has room for every row. Pinned and recent records are sections
+ * like any other, which the caller builds from its own state.
+ */
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Fragment, useLayoutEffect, useRef, useState, } from "react";
+import { css } from "#primitives/css";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { AppSidebar, AppSidebarFooter, AppSidebarNav, AppSidebarRail } from "./shell.js";
+import { SidebarItem, SidebarPanel, SidebarSection } from "./sidebar.js";
+const navCount = css({ color: "fg.muted", fontSize: "code", fontVariantNumeric: "tabular-nums" });
+const sectionFooter = css({
+    display: "grid",
+    gap: "control.trackInset",
+    paddingInline: "control.compactInline",
+    paddingTop: "layout.tightGap",
+});
+const foldScroll = css({
+    display: "grid",
+    gap: "control.trackInset",
+    maxHeight: "200px",
+    overflowY: "auto",
+});
+/** The tallest row, so an estimate of the folded rows' height never overshoots. */
+const SIDEBAR_ROW_HEIGHT = 32;
+/**
+ * Whether the sidebar has room to list `foldedRows` more rows: the free space between its
+ * navigation and its footer covers them. Once it has, it loses it only when the navigation runs
+ * out of room, so it does not flicker at the threshold.
+ */
+export function useSidebarRoom(foldedRows) {
+    const navRef = useRef(null);
+    const footerRef = useRef(null);
+    const [roomy, setRoomy] = useState(false);
+    useLayoutEffect(() => {
+        const nav = navRef.current;
+        const footer = footerRef.current;
+        if (!nav || !footer)
+            return;
+        const measure = () => {
+            const free = footer.getBoundingClientRect().top - nav.getBoundingClientRect().bottom;
+            setRoomy((current) => current
+                ? free >= 0 && nav.scrollHeight <= nav.clientHeight + 1
+                : free >= foldedRows * SIDEBAR_ROW_HEIGHT);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(nav);
+        observer.observe(document.documentElement);
+        return () => observer.disconnect();
+    }, [foldedRows]);
+    return { navRef, footerRef, roomy };
+}
+function NavRow({ item, activeIds, renderLink, }) {
+    return (_jsx(SidebarItem, { size: item.size, icon: item.icon, active: activeIds.includes(item.id), trailing: item.count !== undefined && _jsx("span", { className: navCount, children: item.count }), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect, action: item.action, children: item.label }));
+}
+function SectionItems({ section, activeIds, renderLink, roomy, labels, }) {
+    const [expanded, setExpanded] = useState(false);
+    const { items, maxVisible } = section;
+    const rows = (shown) => shown.map((item) => (_jsx(NavRow, { item: item, activeIds: activeIds, renderLink: renderLink }, item.id)));
+    if (maxVisible === undefined || items.length <= maxVisible || roomy)
+        return rows(items);
+    const unfolded = expanded || items.slice(maxVisible).some((item) => activeIds.includes(item.id));
+    const Caret = unfolded ? CaretUpIcon : CaretDownIcon;
+    return (_jsxs(_Fragment, { children: [!unfolded ? (rows(items.slice(0, maxVisible))) : section.scrollWhenUnfolded ? (_jsx("div", { className: foldScroll, children: rows(items) })) : (rows(items)), _jsx(SidebarItem, { size: "compact", icon: _jsx(Caret, { className: icon({ size: "small" }) }), "aria-expanded": unfolded, onClick: () => setExpanded(!unfolded), children: unfolded ? labels.less : labels.more })] }));
+}
+/** Runs of sections: each main section alone, consecutive panel sections together. */
+function sectionRuns(sections) {
+    const runs = [];
+    for (const section of sections) {
+        if (section.items.length === 0)
+            continue;
+        const panel = section.panel ?? false;
+        const last = runs[runs.length - 1];
+        if (panel && last?.panel)
+            last.sections.push(section);
+        else
+            runs.push({ panel, sections: [section] });
+    }
+    return runs;
+}
+export function AppNavigation({ sections, activeId: ownActiveId = null, renderLink, header, railHeader, footer, autoUnfold = true, labels: ownLabels, ...props }) {
+    const labels = { ...useCiridaeLocale().labels.navigation, ...ownLabels };
+    const activeIds = ownActiveId === null ? [] : typeof ownActiveId === "string" ? [ownActiveId] : ownActiveId;
+    // Every row a fold hides, less the More row it trades them for.
+    const foldedRows = sections.reduce((rows, section) => rows +
+        (section.maxVisible === undefined
+            ? 0
+            : Math.max(0, section.items.length - section.maxVisible - 1)), 0);
+    const room = useSidebarRoom(foldedRows);
+    const roomy = autoUnfold && room.roomy;
+    const sectionBlock = (section) => (_jsxs(SidebarSection, { label: section.label, children: [_jsx(SectionItems, { section: section, activeIds: activeIds, renderLink: renderLink, roomy: roomy, labels: labels }), section.footer && _jsx("div", { className: sectionFooter, children: section.footer })] }, section.id));
+    return (_jsxs(AppSidebar, { "aria-label": labels.navigation, ...props, children: [_jsxs(AppSidebarNav, { ref: room.navRef, children: [header, sectionRuns(sections).map((run) => run.panel ? (_jsx(SidebarPanel, { children: run.sections.map(sectionBlock) }, run.sections[0].id)) : (_jsx(Fragment, { children: run.sections.map(sectionBlock) }, run.sections[0].id)))] }), _jsxs(AppSidebarRail, { children: [railHeader, sections
+                        .filter((section) => section.rail !== false)
+                        .flatMap((section) => section.items)
+                        .map((item) => (_jsx(SidebarItem, { "aria-label": item.label, icon: item.icon, active: activeIds.includes(item.id), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect }, item.id)))] }), _jsx(AppSidebarFooter, { ref: room.footerRef, children: footer })] }));
+}

package/dist/components/badge.d.ts

@@ -0,0 +1,14 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactNode } from "react";
+/** What a color says, wherever color carries meaning. */
+export type Tone = "neutral" | "info" | "success" | "warning" | "danger";
+export type BadgeProps = Omit<useRender.ComponentProps<"span">, "children"> & {
+    tone?: Tone;
+    /** `pill` for a judgment or state; `square` for a fact, such as a value's source. */
+    shape?: "pill" | "square";
+    /** `bare` drops the box: the icon and the words, muted, the tone on the icon alone. */
+    appearance?: "filled" | "bare";
+    icon?: ReactNode;
+    children: ReactNode;
+};
+export declare function Badge({ tone, shape, appearance, icon, children, render, className, ...props }: BadgeProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;

package/dist/components/badge.js

@@ -0,0 +1,107 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A badge: a short label, usually with an icon, that says what state something is in. Its
+ * `tone` carries the meaning: `warning`, `danger`, `success` and `info` tint the glass toward
+ * their hue, `neutral` stays grey. A `pill` carries a judgment, such as a verdict or a run mode;
+ * a `square` badge carries a fact, such as where a value came from, in a field's flat well.
+ */
+import { useRender } from "@base-ui/react/use-render";
+import { cva, cx } from "#primitives/css";
+const badge = cva({
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "layout.tightGap",
+        flexShrink: "0",
+        height: "control.shortcut",
+        paddingInlineStart: "control.iconGap",
+        paddingInlineEnd: "control.block",
+        border: "1px solid transparent",
+        color: "fg.muted",
+        fontSize: "code",
+        fontWeight: "medium",
+        letterSpacing: "compact",
+        lineHeight: "tight",
+        whiteSpace: "nowrap",
+        textDecoration: "none",
+        "& svg": { fontSize: "icon.small", flexShrink: "0" },
+    },
+    variants: {
+        shape: {
+            pill: { borderRadius: "pill" },
+            square: {
+                borderRadius: "control",
+                borderColor: "border.control",
+                background: "bg.field",
+                _light: { borderColor: "border.mark", background: "bg.card" },
+            },
+        },
+        // A fact told in passing: the icon and the words, muted, with no box; a tone tints the icon.
+        appearance: {
+            filled: {},
+            bare: {
+                height: "auto",
+                gap: "layout.tightGap",
+                paddingInline: "none",
+                border: "0",
+                borderRadius: "0",
+                background: "transparent",
+                flexShrink: "0",
+                _light: { background: "transparent" },
+            },
+        },
+        tone: {
+            neutral: {},
+            info: { color: "accent.blue" },
+            success: { color: "accent.green" },
+            warning: { color: "accent.yellow" },
+            danger: { color: "accent.red" },
+        },
+    },
+    compoundVariants: [
+        { appearance: "filled", shape: "pill", tone: "neutral", css: { background: "bg.raised" } },
+        { appearance: "filled", shape: "pill", tone: "info", css: { background: "bg.infoSubtle" } },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "success",
+            css: { background: "bg.successSubtle" },
+        },
+        { appearance: "filled", shape: "pill", tone: "warning", css: { background: "bg.tinted" } },
+        { appearance: "filled", shape: "pill", tone: "danger", css: { background: "bg.errorSubtle" } },
+        {
+            appearance: "bare",
+            tone: "info",
+            css: { color: "fg.muted", "& svg": { color: "accent.blue" } },
+        },
+        {
+            appearance: "bare",
+            tone: "success",
+            css: { color: "fg.muted", "& svg": { color: "accent.green" } },
+        },
+        {
+            appearance: "bare",
+            tone: "warning",
+            css: { color: "fg.muted", "& svg": { color: "accent.yellow" } },
+        },
+        {
+            appearance: "bare",
+            tone: "danger",
+            css: { color: "fg.muted", "& svg": { color: "accent.red" } },
+        },
+    ],
+    defaultVariants: { appearance: "filled", shape: "pill", tone: "neutral" },
+});
+export function Badge({ tone = "neutral", shape = "pill", appearance = "filled", icon, children, render, className, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        render,
+        props: {
+            ...props,
+            className: cx(badge({ tone, shape, appearance }), className),
+            "data-ciridae-ui": "",
+            "data-edge": shape === "pill" && appearance === "filled" ? "glass" : undefined,
+            children: (_jsxs(_Fragment, { children: [icon, children] })),
+        },
+    });
+}

package/dist/components/brand-icons.d.ts

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+/**
+ * GitHub's own mark, rather than a lookalike from an icon set: it carries the brand, so it should
+ * be the shape people recognize. Path from Octicons `mark-github` (MIT).
+ */
+export declare function GithubMarkIcon(props: SVGProps<SVGSVGElement>): import("@types/react").JSX.Element;
+/**
+ * The mark in the current text color, so it follows the theme. Decorative unless given a
+ * `title`, which names it for assistive technology.
+ */
+export declare function CiridaeMark({ title, ...props }: SVGProps<SVGSVGElement> & {
+    title?: string;
+}): import("@types/react").JSX.Element;
+/** The mark over its wordmark, in the current text color; `title` names it for assistive technology. */
+export declare function CiridaeLogo({ title, ...props }: SVGProps<SVGSVGElement> & {
+    title: string;
+}): import("@types/react").JSX.Element;

package/dist/components/brand-icons.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * GitHub's own mark, rather than a lookalike from an icon set: it carries the brand, so it should
+ * be the shape people recognize. Path from Octicons `mark-github` (MIT).
+ */
+export function GithubMarkIcon(props) {
+    return (_jsx("svg", { 
+        // Sized in ems like the icon set's own glyphs, so `icon()` controls it.
+        width: "1em", height: "1em", ...props, viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", focusable: "false", "data-ciridae-ui": "", children: _jsx("path", { d: "M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" }) }));
+}
+/**
+ * The mark in the current text color, so it follows the theme. Decorative unless given a
+ * `title`, which names it for assistive technology.
+ */
+export function CiridaeMark({ title, ...props }) {
+    return (_jsx("svg", { width: "1em", height: "1em", ...props, viewBox: "7 -83 601 601", fill: "currentColor", ...(title ? { role: "img", "aria-label": title } : { "aria-hidden": true }), focusable: "false", "data-ciridae-ui": "", children: _jsx("path", { d: "M190.169 104.116C190.169 102.537 191.456 101.262 193.029 101.262C249.439 101.262 277.742 101.262 291.22 87.8152C304.698 74.3686 304.698 46.1219 304.698 -10.1459C304.698 -11.725 305.976 -13 307.559 -13C309.142 -13 310.42 -11.725 310.42 -10.1459C310.42 46.1317 310.42 74.3686 323.898 87.8152C337.376 101.262 365.689 101.262 422.089 101.262C423.671 101.262 424.949 102.547 424.949 104.116C424.949 105.685 423.671 106.97 422.089 106.97C365.679 106.97 337.376 106.97 323.898 120.417C310.42 133.863 310.42 162.11 310.42 218.378C310.42 219.957 309.142 221.232 307.559 221.232C305.976 221.232 304.698 219.947 304.698 218.378C304.698 162.1 304.698 133.863 291.22 120.417C277.742 106.97 249.429 106.97 193.029 106.97C191.447 106.97 190.169 105.685 190.169 104.116ZM607.577 159.982C606.791 158.609 605.031 158.157 603.665 158.932C603.655 158.932 603.635 158.952 603.615 158.952C603.606 158.952 603.596 158.962 603.566 158.971C554.776 187.071 530.277 201.185 511.884 196.251C493.49 191.337 479.334 166.906 451.178 118.249C451.158 118.21 451.129 118.18 451.119 118.141C450.333 116.768 448.573 116.317 447.206 117.092C446.292 117.621 445.771 118.573 445.771 119.563C445.771 120.054 445.899 120.544 446.145 120.995C446.164 121.035 446.194 121.064 446.204 121.103C446.243 121.162 446.263 121.201 446.292 121.25C474.389 169.799 488.486 194.211 483.561 212.552C482.735 215.632 481.359 218.535 479.619 221.202C477.594 224.312 475.106 227.117 472.442 229.696C469.159 232.874 465.59 235.738 461.923 238.445C457.391 241.789 452.692 244.908 447.934 247.929C442.143 251.607 436.265 255.138 430.356 258.62C423.288 262.788 416.18 266.888 409.072 270.977C402.751 274.616 396.381 278.167 390.06 281.815C386.874 283.649 383.699 285.493 380.514 287.327C376.296 289.76 372.079 292.202 367.861 294.634L357.716 300.489C356.851 300.99 355.986 301.49 355.121 301.99C325.697 318.967 289.411 319.007 259.968 302.039C259.181 301.588 258.385 301.127 257.599 300.676L251.425 297.115C248.564 295.468 245.703 293.82 242.852 292.172L233.277 286.66C230.22 284.895 227.162 283.139 224.105 281.374L216.732 277.127C211.02 273.841 205.416 270.369 199.685 267.123C197.512 265.897 195.35 264.661 193.187 263.416C188.291 260.571 183.405 257.707 178.539 254.794C174.311 252.254 170.094 249.675 165.945 247.017C162.357 244.722 158.808 242.368 155.348 239.896C152.379 237.778 149.479 235.581 146.697 233.227C144.327 231.226 142.037 229.108 139.933 226.822C138.124 224.851 136.443 222.752 135.018 220.486C133.739 218.456 132.668 216.289 131.891 214.023C131.695 213.454 131.518 212.876 131.37 212.297C126.445 193.956 140.542 169.554 168.639 120.995C168.678 120.936 168.698 120.897 168.728 120.848C168.747 120.809 168.777 120.78 168.787 120.75C169.052 120.309 169.18 119.799 169.16 119.318C169.16 118.337 168.649 117.376 167.725 116.847C166.358 116.062 164.608 116.523 163.802 117.896C163.783 117.935 163.753 117.965 163.743 117.994C135.588 166.651 121.431 191.082 103.038 195.996C84.6441 200.91 60.1751 186.836 11.4632 158.785C11.4436 158.775 11.4141 158.765 11.3944 158.736C11.3452 158.716 11.3059 158.677 11.2568 158.658C9.89027 157.873 8.14038 158.334 7.34408 159.707C7.1278 160.168 7 160.658 7 161.149C7 162.13 7.5112 163.091 8.43531 163.62C57.2849 191.749 81.7932 205.873 86.7283 224.253C91.6536 242.593 77.5561 267.005 49.4595 315.554C49.43 315.613 49.4005 315.662 49.371 315.701C49.3514 315.741 49.3219 315.77 49.312 315.809C49.0466 316.27 48.9188 316.761 48.9385 317.241C48.9385 318.222 49.4497 319.183 50.3738 319.713C50.8162 319.978 51.3175 320.105 51.8091 320.105C52.7922 320.105 53.7556 319.595 54.2963 318.673C54.3159 318.634 54.3454 318.605 54.3553 318.565C82.5109 269.908 96.6673 245.477 115.061 240.563C117.342 239.955 119.691 239.651 122.051 239.602C124.656 239.553 127.261 239.818 129.817 240.279C132.766 240.808 135.676 241.603 138.517 242.535C141.86 243.633 145.133 244.928 148.358 246.32C152.133 247.958 155.849 249.734 159.526 251.587C163.802 253.735 168.03 255.981 172.227 258.276C177.064 260.915 181.862 263.612 186.649 266.329C192.489 269.644 198.338 272.949 204.119 276.352C209.319 279.412 214.539 282.462 219.769 285.473L228.794 290.672L238.468 296.243L247.355 301.362L254.01 305.197L256.999 306.914L257.038 306.943C286.442 323.881 304.561 355.168 304.58 389.045L304.6 444.136C304.6 445.195 305.17 446.117 306.035 446.617C306.448 446.862 306.94 447.009 307.461 447C309.043 447 310.321 445.724 310.312 444.145V389.241C310.292 355.394 328.381 324.087 357.755 307.139C359.358 306.217 360.95 305.295 362.553 304.363C366.387 302.147 370.221 299.93 374.055 297.724C378.685 295.056 383.316 292.378 387.936 289.711C391.918 287.415 395.889 285.12 399.871 282.816C407.411 278.461 415.02 274.204 422.58 269.879C429.157 266.113 435.744 262.376 442.399 258.737C447.904 255.726 453.459 252.784 459.112 250.047C463.712 247.821 468.392 245.712 473.189 243.947C477.063 242.515 481.034 241.289 485.104 240.553C488.476 239.945 491.927 239.68 495.338 240.004C496.892 240.151 498.425 240.426 499.929 240.828C518.323 245.742 532.479 270.173 560.635 318.83C560.655 318.869 560.684 318.899 560.694 318.938C561.225 319.85 562.188 320.37 563.181 320.37C563.663 320.37 564.154 320.242 564.616 319.978C565.531 319.448 566.052 318.487 566.052 317.506C566.052 317.016 565.924 316.525 565.678 316.074C565.659 316.045 565.629 316.005 565.619 315.976C565.59 315.917 565.56 315.868 565.531 315.829C537.434 267.28 523.337 242.868 528.262 224.527C533.187 206.167 557.686 192.053 606.476 163.954C606.486 163.954 606.496 163.944 606.506 163.934C606.525 163.934 606.545 163.915 606.565 163.905C607.479 163.375 608 162.424 608 161.433C608 160.943 607.872 160.452 607.626 160.001H607.587L607.577 159.982Z" }) }));
+}
+/** The mark over its wordmark, in the current text color; `title` names it for assistive technology. */
+export function CiridaeLogo({ title, ...props }) {
+    return (_jsxs("svg", { ...props, viewBox: "0 -13 614 670", fill: "currentColor", role: "img", "aria-label": title, "data-ciridae-ui": "", children: [_jsx("path", { d: "M190.169 104.116C190.169 102.537 191.456 101.262 193.029 101.262C249.439 101.262 277.742 101.262 291.22 87.8152C304.698 74.3686 304.698 46.1219 304.698 -10.1459C304.698 -11.725 305.976 -13 307.559 -13C309.142 -13 310.42 -11.725 310.42 -10.1459C310.42 46.1317 310.42 74.3686 323.898 87.8152C337.376 101.262 365.689 101.262 422.089 101.262C423.671 101.262 424.949 102.547 424.949 104.116C424.949 105.685 423.671 106.97 422.089 106.97C365.679 106.97 337.376 106.97 323.898 120.417C310.42 133.863 310.42 162.11 310.42 218.378C310.42 219.957 309.142 221.232 307.559 221.232C305.976 221.232 304.698 219.947 304.698 218.378C304.698 162.1 304.698 133.863 291.22 120.417C277.742 106.97 249.429 106.97 193.029 106.97C191.447 106.97 190.169 105.685 190.169 104.116ZM607.577 159.982C606.791 158.609 605.031 158.157 603.665 158.932C603.655 158.932 603.635 158.952 603.615 158.952C603.606 158.952 603.596 158.962 603.566 158.971C554.776 187.071 530.277 201.185 511.884 196.251C493.49 191.337 479.334 166.906 451.178 118.249C451.158 118.21 451.129 118.18 451.119 118.141C450.333 116.768 448.573 116.317 447.206 117.092C446.292 117.621 445.771 118.573 445.771 119.563C445.771 120.054 445.899 120.544 446.145 120.995C446.164 121.035 446.194 121.064 446.204 121.103C446.243 121.162 446.263 121.201 446.292 121.25C474.389 169.799 488.486 194.211 483.561 212.552C482.735 215.632 481.359 218.535 479.619 221.202C477.594 224.312 475.106 227.117 472.442 229.696C469.159 232.874 465.59 235.738 461.923 238.445C457.391 241.789 452.692 244.908 447.934 247.929C442.143 251.607 436.265 255.138 430.356 258.62C423.288 262.788 416.18 266.888 409.072 270.977C402.751 274.616 396.381 278.167 390.06 281.815C386.874 283.649 383.699 285.493 380.514 287.327C376.296 289.76 372.079 292.202 367.861 294.634L357.716 300.489C356.851 300.99 355.986 301.49 355.121 301.99C325.697 318.967 289.411 319.007 259.968 302.039C259.181 301.588 258.385 301.127 257.599 300.676L251.425 297.115C248.564 295.468 245.703 293.82 242.852 292.172L233.277 286.66C230.22 284.895 227.162 283.139 224.105 281.374L216.732 277.127C211.02 273.841 205.416 270.369 199.685 267.123C197.512 265.897 195.35 264.661 193.187 263.416C188.291 260.571 183.405 257.707 178.539 254.794C174.311 252.254 170.094 249.675 165.945 247.017C162.357 244.722 158.808 242.368 155.348 239.896C152.379 237.778 149.479 235.581 146.697 233.227C144.327 231.226 142.037 229.108 139.933 226.822C138.124 224.851 136.443 222.752 135.018 220.486C133.739 218.456 132.668 216.289 131.891 214.023C131.695 213.454 131.518 212.876 131.37 212.297C126.445 193.956 140.542 169.554 168.639 120.995C168.678 120.936 168.698 120.897 168.728 120.848C168.747 120.809 168.777 120.78 168.787 120.75C169.052 120.309 169.18 119.799 169.16 119.318C169.16 118.337 168.649 117.376 167.725 116.847C166.358 116.062 164.608 116.523 163.802 117.896C163.783 117.935 163.753 117.965 163.743 117.994C135.588 166.651 121.431 191.082 103.038 195.996C84.6441 200.91 60.1751 186.836 11.4632 158.785C11.4436 158.775 11.4141 158.765 11.3944 158.736C11.3452 158.716 11.3059 158.677 11.2568 158.658C9.89027 157.873 8.14038 158.334 7.34408 159.707C7.1278 160.168 7 160.658 7 161.149C7 162.13 7.5112 163.091 8.43531 163.62C57.2849 191.749 81.7932 205.873 86.7283 224.253C91.6536 242.593 77.5561 267.005 49.4595 315.554C49.43 315.613 49.4005 315.662 49.371 315.701C49.3514 315.741 49.3219 315.77 49.312 315.809C49.0466 316.27 48.9188 316.761 48.9385 317.241C48.9385 318.222 49.4497 319.183 50.3738 319.713C50.8162 319.978 51.3175 320.105 51.8091 320.105C52.7922 320.105 53.7556 319.595 54.2963 318.673C54.3159 318.634 54.3454 318.605 54.3553 318.565C82.5109 269.908 96.6673 245.477 115.061 240.563C117.342 239.955 119.691 239.651 122.051 239.602C124.656 239.553 127.261 239.818 129.817 240.279C132.766 240.808 135.676 241.603 138.517 242.535C141.86 243.633 145.133 244.928 148.358 246.32C152.133 247.958 155.849 249.734 159.526 251.587C163.802 253.735 168.03 255.981 172.227 258.276C177.064 260.915 181.862 263.612 186.649 266.329C192.489 269.644 198.338 272.949 204.119 276.352C209.319 279.412 214.539 282.462 219.769 285.473L228.794 290.672L238.468 296.243L247.355 301.362L254.01 305.197L256.999 306.914L257.038 306.943C286.442 323.881 304.561 355.168 304.58 389.045L304.6 444.136C304.6 445.195 305.17 446.117 306.035 446.617C306.448 446.862 306.94 447.009 307.461 447C309.043 447 310.321 445.724 310.312 444.145V389.241C310.292 355.394 328.381 324.087 357.755 307.139C359.358 306.217 360.95 305.295 362.553 304.363C366.387 302.147 370.221 299.93 374.055 297.724C378.685 295.056 383.316 292.378 387.936 289.711C391.918 287.415 395.889 285.12 399.871 282.816C407.411 278.461 415.02 274.204 422.58 269.879C429.157 266.113 435.744 262.376 442.399 258.737C447.904 255.726 453.459 252.784 459.112 250.047C463.712 247.821 468.392 245.712 473.189 243.947C477.063 242.515 481.034 241.289 485.104 240.553C488.476 239.945 491.927 239.68 495.338 240.004C496.892 240.151 498.425 240.426 499.929 240.828C518.323 245.742 532.479 270.173 560.635 318.83C560.655 318.869 560.684 318.899 560.694 318.938C561.225 319.85 562.188 320.37 563.181 320.37C563.663 320.37 564.154 320.242 564.616 319.978C565.531 319.448 566.052 318.487 566.052 317.506C566.052 317.016 565.924 316.525 565.678 316.074C565.659 316.045 565.629 316.005 565.619 315.976C565.59 315.917 565.56 315.868 565.531 315.829C537.434 267.28 523.337 242.868 528.262 224.527C533.187 206.167 557.686 192.053 606.476 163.954C606.486 163.954 606.496 163.944 606.506 163.934C606.525 163.934 606.545 163.915 606.565 163.905C607.479 163.375 608 162.424 608 161.433C608 160.943 607.872 160.452 607.626 160.001H607.587L607.577 159.982Z" }), _jsx("path", { d: "M4 610.748C4 585.897 20.4039 567.256 43.0175 567.256H94.4661V584.651H51.7204C42.901 584.651 37.9262 589.625 37.9262 598.445V623.051C37.9262 631.754 42.901 636.845 51.7204 636.845H94.4661V654.239H43.0175C20.4039 654.239 4 635.598 4 610.748Z M106.524 567.256H137.596V654.239H106.524L106.524 567.256Z M151.264 567.256H225.827C240.984 567.256 252.052 577.94 252.052 592.363C252.052 606.786 240.996 617.47 225.827 617.47H218.872L253.672 654.251H214.771L181.963 616.468V654.251H151.264V567.268V567.256ZM181.963 583.287V605.284H209.307C215.773 605.284 219.373 601.928 219.373 596.091V592.491C219.373 586.771 215.773 583.299 209.307 583.299H181.963V583.287Z M261.488 567.256H292.56V654.239H261.488V567.256Z M306.223 567.256H368.355C390.969 567.256 407.373 585.897 407.373 610.748C407.373 635.598 390.969 654.239 368.355 654.239H306.223V567.256ZM373.446 624.67V596.837C373.446 588.018 368.355 583.043 359.652 583.043H336.91V638.464H359.652C368.355 638.464 373.446 633.373 373.446 624.67Z M444.656 567.256H479.829L520.594 654.239H487.169L479.34 636.472H434.357L426.155 654.239H404.031L444.668 567.256H444.656ZM471.744 619.451L457.076 586.771L442.035 619.451H471.732H471.744Z M527.919 567.256H610.184V584.278H558.246V600.682H610.184V617.458H558.246V637.089H610.184V654.239H527.919V567.256Z" })] }));
+}

package/dist/components/breakpoint.d.ts

@@ -0,0 +1,7 @@
+import { type Breakpoint } from "../theme/breakpoints.js";
+export { breakpointQuery, breakpoints, type Breakpoint } from "../theme/breakpoints.js";
+/**
+ * Whether the viewport is at or under the breakpoint: `wide`, `rail`, where the shell folds its
+ * sidebar, or `phone`. False during server rendering.
+ */
+export declare function useBreakpoint(breakpoint: Breakpoint): boolean;

package/dist/components/breakpoint.js

@@ -0,0 +1,16 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { breakpointQuery } from "../theme/breakpoints.js";
+export { breakpointQuery, breakpoints } from "../theme/breakpoints.js";
+/**
+ * Whether the viewport is at or under the breakpoint: `wide`, `rail`, where the shell folds its
+ * sidebar, or `phone`. False during server rendering.
+ */
+export function useBreakpoint(breakpoint) {
+    const query = breakpointQuery(breakpoint);
+    const subscribe = useCallback((onChange) => {
+        const media = matchMedia(query);
+        media.addEventListener("change", onChange);
+        return () => media.removeEventListener("change", onChange);
+    }, [query]);
+    return useSyncExternalStore(subscribe, () => matchMedia(query).matches, () => false);
+}

package/dist/components/bulk-action-bar.d.ts

@@ -0,0 +1,15 @@
+import { type CiridaeLabels } from "./locale.js";
+import type { ComponentProps, ReactNode } from "react";
+/**
+ * Shown in place of a list's footer while rows are ticked. `actions` are the buttons for the ticked
+ * rows; `onSelectAll` with `total` offers to tick every row the list holds, beyond the page.
+ */
+export declare function BulkActionBar({ count, onClear, actions, onSelectAll, total, labels: ownLabels, className, ...props }: Omit<ComponentProps<"div">, "children"> & {
+    count: number;
+    onClear: () => void;
+    actions?: ReactNode;
+    onSelectAll?: () => void;
+    /** Every row the list holds, as the Select all button counts it. */
+    total?: string;
+    labels?: Partial<CiridaeLabels["table"]>;
+}): import("@types/react").JSX.Element;