@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/overlays.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { XIcon } from "@phosphor-icons/react";
+import { useCallback, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { DialogHeightResetContext } from "./dialog-height-context.js";
+import { HotkeyLayer } from "./hotkeys.js";
+import { icon } from "./icon.js";
+import { heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+/** A positioned popup carries its own stacking order; a positioner-anchored one gets it there. */
+const positioner = css({ zIndex: "popover" });
+const tooltipPositioner = css({ zIndex: "tooltip" });
+const popupStyle = css.raw({
+    maxWidth: "overlay.dialog",
+    padding: "panel.comfortable",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "inset",
+    backgroundColor: "bg.card",
+    color: "fg.primary",
+    textStyle: "body",
+    boxShadow: "card",
+    // A popup takes focus when it opens or when its focused content unmounts (a wizard changing
+    // step); it is a container, not a control, so it draws no ring.
+    outline: "none",
+});
+const popup = css(popupStyle);
+// The title and footer stay put; a long body scrolls between them.
+const dialogLayout = css.raw({
+    display: "grid",
+    gap: "layout.clusterGap",
+    gridTemplateRows: "auto minmax(0, 1fr)",
+    "&:has(> :nth-child(3))": { gridTemplateRows: "auto minmax(0, 1fr) auto" },
+    // A dialog's own inset, not the page margin, so page density changes leave it alone.
+    padding: "panel.comfortable",
+});
+const dialogPopup = css.raw(popupStyle, dialogLayout, {
+    zIndex: "dialog",
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    width: "calc(100vw - token(spacing.layout.pageGap) * 2)",
+    maxHeight: "calc(100dvh - token(spacing.layout.pageGap) * 2)",
+    border: "1px solid token(colors.border.card)",
+    borderRadius: "inset",
+    background: "bg.surface",
+    boxShadow: "panel",
+    transform: "translate(-50%, -50%)",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "fast",
+    _motionReduce: { transition: "none" },
+    "&[data-starting-style], &[data-ending-style]": {
+        opacity: "0",
+        transform: "translate(-50%, calc(-50% + token(spacing.control.block)))",
+    },
+});
+const visuallyHidden = css({ srOnly: true });
+const backdrop = css({
+    position: "fixed",
+    inset: "none",
+    background: "bg.backdrop",
+    zIndex: "dialog",
+});
+const dialogHeader = css({ display: "grid", gap: "layout.controlGap" });
+/** Title and the close button on one row, for a dialog dismissed from its header. */
+const dialogHeaderRow = css({
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+});
+const dialogTitle = cx(heading(), css({ display: "flex", alignItems: "center", gap: "layout.controlGap", lineHeight: "tight" }));
+const dialogDescription = css({
+    margin: "none",
+    color: "fg.muted",
+    fontSize: "body",
+    lineHeight: "compact",
+});
+// Bleeds past its edges by a control's focus ring, so scrolling does not clip the ring.
+const dialogBody = css({
+    display: "grid",
+    // Long code stays inside its own scroller instead of widening every body section.
+    gridTemplateColumns: "minmax(0, 1fr)",
+    alignContent: "start",
+    // A terminal wizard result centers its icon, message, and actions together.
+    "&:has(> [data-wizard-state=result])": { alignContent: "center" },
+    gap: "layout.contentGap",
+    overflowY: "auto",
+    margin: "calc(token(spacing.control.block) * -1)",
+    padding: "control.block",
+});
+const dialogLeadingActions = css({
+    display: "flex",
+    gap: "layout.controlGap",
+    marginInlineEnd: "auto",
+});
+const dialogFooter = css({
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "layout.controlGap",
+    paddingTop: "layout.controlGap",
+});
+const narrowDialogPopup = css.raw({ maxWidth: "card.centeredForm" });
+const wideDialogPopup = css.raw({ maxWidth: "overlay.dialogWide" });
+// Beside the dialog's own column, flush to its edges; below it on a narrow screen.
+const splitDialogPopup = css.raw({
+    padding: "none",
+    gap: "none",
+    gridTemplateRows: "auto auto",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    overflowY: "auto",
+    _notPhone: {
+        gridTemplateRows: "minmax(0, 1fr)",
+        gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+        overflowY: "visible",
+    },
+});
+const splitDialogMain = css(dialogLayout, { minHeight: "0" });
+const splitDialogAside = css({
+    minHeight: "0",
+    overflowY: "auto",
+    padding: "panel.comfortable",
+    borderTop: "1px solid token(colors.border.card)",
+    backgroundColor: "bg.panel",
+    _notPhone: { borderTop: "none", borderInlineStart: "1px solid token(colors.border.card)" },
+});
+export function Dialog({ trigger, finalFocus, title, titleVisibility = "visible", icon: titleIcon, description, children, actions, leadingActions, kind = "form", dismiss = kind === "form" ? "footer" : "header", closable = true, pending = false, dirty = false, closeLabel: ownCloseLabel, size = "regular", holdHeight = false, aside, onOpenChange, ...rootProps }) {
+    const heldHeight = useRef({
+        popup: null,
+        tallest: 0,
+    });
+    const resetHeight = useCallback(() => {
+        const held = heldHeight.current;
+        held.tallest = 0;
+        if (!held.popup)
+            return;
+        held.popup.style.removeProperty("min-height");
+        held.tallest = held.popup.offsetHeight;
+        held.popup.style.minHeight = `${held.tallest}px`;
+    }, []);
+    const holdTallestHeight = useCallback((popup) => {
+        if (!popup)
+            return;
+        heldHeight.current = { popup, tallest: 0 };
+        const observer = new ResizeObserver(() => {
+            if (popup.offsetHeight <= heldHeight.current.tallest)
+                return;
+            heldHeight.current.tallest = popup.offsetHeight;
+            popup.style.minHeight = `${popup.offsetHeight}px`;
+        });
+        observer.observe(popup);
+        return () => {
+            observer.disconnect();
+            heldHeight.current = { popup: null, tallest: 0 };
+        };
+    }, []);
+    const { labels } = useCiridaeLocale();
+    const closeLabel = ownCloseLabel ?? (dismiss === "footer" ? labels.common.cancel : labels.common.close);
+    const dismissInHeader = dismiss === "header";
+    const showCancel = !dismissInHeader;
+    const dismissalDisabled = !closable || pending;
+    const dialogContent = (_jsxs(_Fragment, { children: [_jsxs("div", { className: dismissInHeader ? dialogHeaderRow : undefined, children: [_jsxs("div", { className: dialogHeader, children: [titleVisibility === "hidden" ? (_jsx(BaseDialog.Title, { className: visuallyHidden, children: title })) : (_jsxs(BaseDialog.Title, { className: dialogTitle, children: [titleIcon, title] })), description && (_jsx(BaseDialog.Description, { className: dialogDescription, children: description }))] }), dismissInHeader && closable && (_jsx(BaseDialog.Close, { disabled: pending, render: _jsx(IconButton, { "aria-label": closeLabel, size: "compact", variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }))] }), _jsx("div", { className: dialogBody, children: _jsx(DialogHeightResetContext, { value: holdHeight ? resetHeight : null, children: children }) }), ((showCancel && closable) || actions || leadingActions) && (_jsxs("div", { className: dialogFooter, children: [leadingActions && _jsx("div", { className: dialogLeadingActions, children: leadingActions }), showCancel && closable && (_jsx(BaseDialog.Close, { disabled: pending, render: _jsx(Button, { variant: "secondary" }), children: dismissInHeader ? labels.common.cancel : closeLabel })), actions] }))] }));
+    return (_jsxs(BaseDialog.Root, { ...rootProps, onOpenChange: (open, details) => {
+            if (!open && (dismissalDisabled || (dirty && details.reason !== "close-press"))) {
+                return details.cancel();
+            }
+            onOpenChange?.(open, details);
+        }, children: [trigger && _jsx(BaseDialog.Trigger, { render: trigger }), _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseDialog.Backdrop, { "data-ciridae-ui": "", className: backdrop }), _jsx(BaseDialog.Popup, { finalFocus: finalFocus, ref: holdHeight ? holdTallestHeight : undefined, className: css(dialogPopup, size === "narrow" && aside === undefined && narrowDialogPopup, (size === "wide" || aside !== undefined) && wideDialogPopup, aside !== undefined && splitDialogPopup), "data-ciridae-ui": "", children: aside ? (_jsxs(_Fragment, { children: [_jsx("div", { className: splitDialogMain, children: dialogContent }), _jsx("aside", { className: splitDialogAside, "aria-label": aside.label, children: aside.content })] })) : (dialogContent) })] }) })] }));
+}
+/**
+ * A confirmation the reader must answer. Unlike `Dialog` it carries the
+ * `alertdialog` role and ignores an outside click, so the decision is made
+ * through one of the two actions rather than by clicking away. Escape still
+ * closes it, which Base UI keeps as the cancelling path, except while an
+ * async confirmation is pending.
+ */
+export function AlertDialog({ trigger, title, children, confirmLabel, cancelLabel, onConfirm, variant = "default", onOpenChange, ...rootProps }) {
+    const { labels } = useCiridaeLocale();
+    const actions = useRef(null);
+    // The ref answers the close guard synchronously; the state redraws the button.
+    const pendingRef = useRef(false);
+    const [pending, setPending] = useState(false);
+    const settle = () => {
+        pendingRef.current = false;
+        setPending(false);
+    };
+    const confirm = async () => {
+        const result = onConfirm();
+        if (!(result instanceof Promise))
+            return actions.current?.close();
+        pendingRef.current = true;
+        setPending(true);
+        try {
+            await result;
+        }
+        catch {
+            return settle();
+        }
+        settle();
+        actions.current?.close();
+    };
+    return (_jsxs(BaseAlertDialog.Root, { ...rootProps, actionsRef: actions, onOpenChange: (open, details) => {
+            if (!open && pendingRef.current)
+                return details.cancel();
+            onOpenChange?.(open, details);
+        }, children: [trigger && _jsx(BaseAlertDialog.Trigger, { render: trigger }), _jsx(BaseAlertDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseAlertDialog.Backdrop, { "data-ciridae-ui": "", className: backdrop }), _jsxs(BaseAlertDialog.Popup, { className: css(dialogPopup), "data-ciridae-ui": "", children: [_jsx(BaseAlertDialog.Title, { className: dialogTitle, children: title }), children && _jsx("div", { className: dialogBody, children: children }), _jsxs("div", { className: dialogFooter, children: [_jsx(BaseAlertDialog.Close, { render: _jsx(Button, { variant: "secondary" }), disabled: pending, children: cancelLabel ?? labels.common.cancel }), _jsx(Button, { variant: variant === "danger" ? "danger" : "primary", loading: pending, onClick: () => void confirm(), children: confirmLabel })] })] })] }) })] }));
+}
+// Merged rather than layered, so the density's inset replaces the popup's.
+const popoverPopups = {
+    regular: popup,
+    compact: css(popupStyle, { padding: "menu.inset", borderRadius: "action" }),
+    flush: css(popupStyle, { padding: "none", overflow: "hidden", borderRadius: "action" }),
+};
+const popoverWidths = {
+    narrow: css({ width: "overlay.popoverNarrow" }),
+    regular: css({ width: "overlay.popover" }),
+    wide: css({ width: "overlay.popoverWide" }),
+};
+const hoverOpenDelayMs = 300;
+const hoverCloseDelayMs = 150;
+export function Popover({ trigger, anchor, children, density = "regular", width, align, openOnHover = false, ...rootProps }) {
+    return (_jsxs(BasePopover.Root, { ...rootProps, children: [trigger && (_jsx(BasePopover.Trigger, { render: trigger, openOnHover: openOnHover, delay: hoverOpenDelayMs, closeDelay: hoverCloseDelayMs })), _jsx(BasePopover.Portal, { children: _jsx(HotkeyLayer, { enabled: !openOnHover, children: _jsx(BasePopover.Positioner, { className: positioner, sideOffset: 6, align: align, anchor: anchor, children: _jsx(BasePopover.Popup, { className: cx(popoverPopups[density], width && popoverWidths[width]), "data-ciridae-ui": "", initialFocus: openOnHover ? (openType) => openType === "keyboard" : undefined, children: children }) }) }) })] }));
+}
+export function Tooltip({ children, content, ...rootProps }) {
+    return (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { ...rootProps, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { className: tooltipPositioner, sideOffset: 6, children: _jsx(BaseTooltip.Popup, { className: css({
+                                zIndex: "tooltip",
+                                paddingBlock: "control.compactBlock",
+                                paddingInline: "menu.itemInline",
+                                borderRadius: "action",
+                                background: "fg.primary",
+                                color: "bg.canvas",
+                                fontSize: "caption",
+                                maxWidth: "overlay.tooltip",
+                                textWrap: "pretty",
+                            }), "data-ciridae-ui": "", children: content }) }) })] }) }));
+}

package/dist/components/page-frame.d.ts

@@ -0,0 +1,65 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type MenuItem } from "./menu.js";
+import type { ComponentProps } from "react";
+/**
+ * One step of a trail: its label, and where it leads, as an address (`href`), a router's link
+ * element (`render`, such as `<Link to="..." />`), or an action (`onSelect`).
+ */
+export type Crumb = {
+    label: string;
+    href?: string;
+    render?: ReactElement;
+    onSelect?: () => void;
+};
+export type BreadcrumbsProps = ComponentProps<"nav"> & {
+    crumbs: readonly Crumb[];
+    /**
+     * The page's own crumb as any node, such as a title with a status or a switcher; every crumb in
+     * `crumbs` is then a parent. Left out, the last crumb is the page's.
+     */
+    current?: ReactNode;
+};
+/** The page's trail: its parents, then the page itself as the trail's heading. */
+export declare function Breadcrumbs({ crumbs, current: ownCurrent, ...props }: BreadcrumbsProps): import("@types/react").JSX.Element;
+export type PageFrameProps = Omit<ComponentProps<"main">, "children"> & {
+    crumbs: readonly Crumb[];
+    /** The header's controls at its far edge, such as filters and the account menu. */
+    headerActions?: ReactNode;
+    children: ReactNode;
+};
+/** The main panel of a page: a header with its trail and actions, then the content. */
+export declare function PageFrame({ crumbs, headerActions, children, ...props }: PageFrameProps): import("@types/react").JSX.Element;
+export type PageHeadingProps = Omit<ComponentProps<"div">, "title"> & {
+    title: ReactNode;
+    /** Before the title, such as a record's avatar or a project's mark. */
+    leading?: ReactNode;
+    /** Beside the title, such as the record's status. */
+    badge?: ReactNode;
+    /** The muted line under the title, such as a `StatLine`, a subtitle or a record's number. */
+    meta?: ReactNode;
+    /** Menu items behind a "More actions" button, or the page's own controls, at the far edge. */
+    actions?: readonly MenuItem[] | ReactNode;
+    /** Whether the actions menu is open, for a host that opens it too, such as from a hotkey. */
+    actionsOpen?: boolean;
+    onActionsOpenChange?: (open: boolean) => void;
+    /** The title's outline level; 2 under a trail whose last crumb is the page's h1. */
+    level?: 1 | 2 | 3;
+    labels?: Partial<{
+        actions: string;
+    }>;
+};
+/**
+ * The title a page or a record opens with, the line under it, and its own actions: a node, or menu
+ * items behind an `OverflowMenu`.
+ */
+export declare function PageHeading({ title, leading, badge, meta, actions, actionsOpen, onActionsOpenChange, level, labels: ownLabels, className, ...props }: PageHeadingProps): import("@types/react").JSX.Element;
+/** One count: the value that reads, and its muted label, as an object or a `[value, label]` pair. */
+export type Stat = {
+    value: ReactNode;
+    label: ReactNode;
+    key?: string;
+} | readonly [value: ReactNode, label: ReactNode];
+/** A row of `value label` stats split by dots: the value reads, the label stays muted. */
+export declare function StatLine({ stats, className, ...props }: ComponentProps<"span"> & {
+    stats: readonly Stat[];
+}): import("@types/react").JSX.Element;

package/dist/components/page-frame.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * A page's frame and heading. `PageFrame` is the main panel: a header holding the page's trail
+ * of crumbs and its actions, then the scrolling content. `Breadcrumbs` is that trail: each parent
+ * crumb a link, a router link or a button, the last one the page's own heading; on a phone the
+ * parents fold into a menu so the page's own crumb keeps the room. `PageHeading` opens a page's or
+ * a record's content with the title, a meta line and its own actions; `StatLine` is a meta line of
+ * counts.
+ */
+import { DotsThreeIcon } from "@phosphor-icons/react";
+import { Fragment } from "react";
+import { css, cx } from "#primitives/css";
+import { icon } from "./icon.js";
+import { Cluster, Heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu, OverflowMenu } from "./menu.js";
+import { AppBreadcrumbButton, AppBreadcrumbCurrent, AppBreadcrumbParents, AppBreadcrumbs, AppBreadcrumbSeparator, AppContent, AppHeader, AppMain, } from "./shell.js";
+/** The page's trail: its parents, then the page itself as the trail's heading. */
+export function Breadcrumbs({ crumbs, current: ownCurrent, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const parents = ownCurrent === undefined ? crumbs.slice(0, -1) : crumbs;
+    const current = ownCurrent === undefined ? crumbs[crumbs.length - 1]?.label : ownCurrent;
+    return (_jsxs(AppBreadcrumbs, { ...props, children: [parents.length > 0 && (_jsx(AppBreadcrumbParents, { compact: _jsxs(_Fragment, { children: [_jsx(Menu, { align: "start", trigger: _jsx(AppBreadcrumbButton, { "aria-label": labels.shell.parentPages, children: _jsx(DotsThreeIcon, { className: icon({ size: "small" }), weight: "bold" }) }), items: parents.map((crumb) => ({
+                                label: crumb.label,
+                                href: crumb.href,
+                                render: crumb.render,
+                                onSelect: crumb.onSelect,
+                            })) }), _jsx(AppBreadcrumbSeparator, {})] }), children: parents.map((crumb, index) => (_jsxs(Fragment, { children: [_jsx(AppBreadcrumbButton, { href: crumb.href, render: crumb.render, onClick: crumb.onSelect, children: crumb.label }), _jsx(AppBreadcrumbSeparator, {})] }, `${index}-${crumb.label}`))) })), current !== undefined && _jsx(AppBreadcrumbCurrent, { children: current })] }));
+}
+/** The main panel of a page: a header with its trail and actions, then the content. */
+export function PageFrame({ crumbs, headerActions, children, ...props }) {
+    return (_jsxs(AppMain, { ...props, children: [_jsx(AppHeader, { actions: headerActions !== undefined && _jsx(Cluster, { gap: "4", children: headerActions }), children: _jsx(Breadcrumbs, { crumbs: crumbs }) }), _jsx(AppContent, { children: children })] }));
+}
+// The actions drop under the title once both no longer fit one line.
+const headingRow = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "layout.contentGap",
+    paddingInline: "layout.tightGap",
+    // One "more" button stays beside the title, however long the title runs.
+    "&[data-overflow-actions]": { flexWrap: "nowrap", alignItems: "flex-start" },
+});
+const identity = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    minWidth: "0",
+});
+const titleBlock = css({ display: "grid", gap: "control.iconGap", minWidth: "0" });
+const titleLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minWidth: "0",
+});
+const metaLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+function isMenuItems(value) {
+    return Array.isArray(value);
+}
+/**
+ * The title a page or a record opens with, the line under it, and its own actions: a node, or menu
+ * items behind an `OverflowMenu`.
+ */
+export function PageHeading({ title, leading, badge, meta, actions, actionsOpen, onActionsOpenChange, level = 2, labels: ownLabels, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("div", { ...props, className: cx(headingRow, className), "data-ciridae-ui": "", "data-overflow-actions": isMenuItems(actions) || undefined, children: [_jsxs("div", { className: identity, children: [leading, _jsxs("div", { className: titleBlock, children: [_jsxs("span", { className: titleLine, children: [_jsx(Heading, { level: level, size: "page", children: title }), badge] }), meta !== undefined && meta !== null && _jsx("div", { className: metaLine, children: meta })] })] }), isMenuItems(actions) ? (_jsx(OverflowMenu, { label: ownLabels?.actions ?? labels.common.moreActions, size: "large", items: actions, open: actionsOpen, onOpenChange: onActionsOpenChange })) : (actions !== undefined && _jsx(Cluster, { gap: "4", children: actions }))] }));
+}
+const statLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    "& b": { color: "fg.primary", fontWeight: "medium" },
+});
+/** A row of `value label` stats split by dots: the value reads, the label stays muted. */
+export function StatLine({ stats, className, ...props }) {
+    return (_jsx("span", { ...props, className: cx(statLine, className), "data-ciridae-ui": "", children: stats.map((stat, index) => {
+            const { value, label, key } = "value" in stat ? stat : { value: stat[0], label: stat[1], key: undefined };
+            return (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsxs("span", { children: [_jsx("b", { children: value }), " ", label] })] }, key ?? index));
+        }) }));
+}

package/dist/components/panel.d.ts

@@ -0,0 +1,24 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactNode } from "react";
+/** The card's surface as a style object, to merge into a `css()` call that adds layout. */
+export declare const cardSurface: import("../../../src/styled-system/types/index.js").SystemStyleObject;
+export type CardProps = useRender.ComponentProps<"div">;
+export declare function Card({ render, className, ...props }: CardProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export type PanelProps = useRender.ComponentProps<"section"> & {
+    /** `default` pads a group of rows; `compact` insets cards by a hairline; `none` runs flush. */
+    padding?: "none" | "compact" | "default";
+    /** `panel` is the translucent lift off the page; `outline` is the edge alone. */
+    tone?: "panel" | "outline";
+};
+export declare function Panel({ padding, tone, render, className, ...props }: PanelProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export type PanelHeaderProps = Omit<useRender.ComponentProps<"div">, "title"> & {
+    title: ReactNode;
+    /** Muted beside the title, such as a count or the period it covers. */
+    meta?: ReactNode;
+    /** At the row's end, such as a link to the full list. */
+    actions?: ReactNode;
+    /** The title's heading level; a plain line when left out. */
+    level?: 2 | 3 | 4;
+};
+/** A panel's top row: its title and meta, and its actions at the far edge. */
+export declare function PanelHeader({ title, meta, actions, level, render, className, ...props }: PanelHeaderProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;

package/dist/components/panel.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The two surfaces a page's sections are built from. A `Panel` is a section's frame, with the
+ * inset radius. Its `padding` is `default` for a group of rows or fields, `compact` for the
+ * hairline inset round the cards inside it under a `PanelHeader` row, or `none` for a list that
+ * runs edge to edge; its `tone` is the translucent `panel` lift or a bare `outline`. A `Card` is
+ * the action surface inside a panel, or on its own: a list, a preview pane, a stat; a faint glass
+ * wash in dark, near white in light. Both render any element through `render`, such as a `<ul>`.
+ */
+import { useRender } from "@base-ui/react/use-render";
+import { css, cva, cx } from "#primitives/css";
+/** The card's surface as a style object, to merge into a `css()` call that adds layout. */
+export const cardSurface = css.raw({
+    minWidth: "0",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "action",
+    background: "bg.hover",
+    _light: { background: "bg.card" },
+});
+const card = css(cardSurface);
+const panel = cva({
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        minWidth: "0",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderRadius: "inset",
+    },
+    variants: {
+        padding: {
+            none: { overflow: "hidden" },
+            // A `PanelHeader` on top is the panel's top inset; without one, the hairline runs round.
+            compact: {
+                paddingInline: "panel.hairline",
+                paddingBottom: "panel.hairline",
+                "&:not(:has(> [data-panel-header]:first-child))": { paddingTop: "panel.hairline" },
+            },
+            default: { gap: "layout.contentGap", padding: "panel.default" },
+        },
+        tone: {
+            panel: { borderColor: "border.panel", background: "bg.panel" },
+            outline: { borderColor: "border.control" },
+        },
+    },
+    defaultVariants: { padding: "default", tone: "panel" },
+});
+const panelHeader = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.tightGap",
+    height: "control.field",
+    flexShrink: "0",
+    paddingInline: "panel.comfortable",
+    fontSize: "body",
+    fontWeight: "medium",
+    // In a padded panel the header is one more row inside the padding.
+    "[data-panel-padding=default] > &": { height: "auto", paddingInline: "none" },
+});
+const panelHeaderTitle = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minWidth: "0",
+    margin: "none",
+    font: "inherit",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+const panelHeaderMeta = css({ color: "fg.subtle", fontSize: "code" });
+const panelHeaderActions = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
+export function Card({ render, className, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: { ...props, className: cx(card, className), "data-ciridae-ui": "" },
+    });
+}
+export function Panel({ padding = "default", tone, render, className, ...props }) {
+    return useRender({
+        defaultTagName: "section",
+        render,
+        props: {
+            ...props,
+            className: cx(panel({ padding, tone }), className),
+            "data-ciridae-ui": "",
+            "data-panel-padding": padding,
+        },
+    });
+}
+/** A panel's top row: its title and meta, and its actions at the far edge. */
+export function PanelHeader({ title, meta, actions, level, render, className, ...props }) {
+    const Title = level ? `h${level}` : "span";
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: {
+            ...props,
+            className: cx(panelHeader, className),
+            "data-ciridae-ui": "",
+            "data-panel-header": "",
+            children: (_jsxs(_Fragment, { children: [title !== undefined && title !== null && (_jsxs(Title, { className: panelHeaderTitle, children: [title, meta !== undefined && _jsx("span", { className: panelHeaderMeta, children: meta })] })), actions !== undefined && _jsx("span", { className: panelHeaderActions, children: actions })] })),
+        },
+    });
+}

package/dist/components/profile-header.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+export type ProfileHeaderProps = Omit<ComponentProps<"header">, "children" | "title"> & {
+    name: string;
+    kind?: "user" | "agent";
+    /** The photo; initials stand in without one. */
+    src?: string;
+    /** Their role, such as "Site lead". */
+    title?: string;
+    team?: string;
+    email?: string;
+    /** What they do here, under the rest. */
+    description?: ReactNode;
+    actions?: ReactNode;
+};
+export declare function ProfileHeader({ name, kind, src, title, team, email, description, actions, className, ...props }: ProfileHeaderProps): import("@types/react").JSX.Element;

package/dist/components/profile-header.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The head of a person's or an agent's page: a large avatar, the name, their title and team,
+ * their email with a copy control, a line on what they do, and actions at the end. The actions
+ * drop under the name once the header is narrow.
+ */
+import { css, cx } from "#primitives/css";
+import { CopyableText } from "./copyable-id.js";
+import { Avatar } from "./data-display.js";
+import { useCiridaeLocale } from "./locale.js";
+const header = css({ containerType: "inline-size" });
+const grid = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr) auto",
+    alignItems: "start",
+    columnGap: "layout.contentGap",
+    rowGap: "layout.controlGap",
+    paddingInline: "layout.tightGap",
+    "@container (max-width: 480px)": {
+        gridTemplateColumns: "auto minmax(0, 1fr)",
+        "& > [data-actions]": { gridColumn: "1 / -1" },
+    },
+});
+const text = css({ display: "grid", gap: "layout.tightGap", minWidth: "0" });
+const nameStyle = css({
+    margin: "none",
+    fontSize: "heading.page",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    overflowWrap: "anywhere",
+});
+const muted = css({ color: "fg.muted", fontSize: "caption", fontWeight: "medium" });
+const descriptionStyle = css({ margin: "none", color: "fg.secondary", fontSize: "body" });
+const actionsStyle = css({ display: "flex", flexWrap: "wrap", gap: "layout.controlGap" });
+export function ProfileHeader({ name, kind = "user", src, title, team, email, description, actions, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const meta = [title, team].filter(Boolean).join(" · ");
+    return (_jsx("header", { ...props, className: cx(header, className), "data-ciridae-ui": "", children: _jsxs("div", { className: grid, children: [_jsx(Avatar, { label: name, kind: kind, src: src, size: "large", "aria-hidden": "true" }), _jsxs("div", { className: text, children: [_jsx("h2", { className: nameStyle, children: name }), meta && _jsx("span", { className: muted, children: meta }), email && (_jsx("span", { className: muted, children: _jsx(CopyableText, { text: email, label: labels.profileHeader.email }) })), description && _jsx("p", { className: descriptionStyle, children: description })] }), actions && (_jsx("div", { className: actionsStyle, "data-actions": "", children: actions }))] }) }));
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function Progress({ value, label }: {
+    value: number;
+    label?: ReactNode;
+}): import("@types/react").JSX.Element;

package/dist/components/progress.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { css } from "#primitives/css";
+import { useCiridaeLocale } from "./locale.js";
+export function Progress({ value, label }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs(BaseProgress.Root, { value: value, className: css({ display: "flex", flexDirection: "column", gap: "layout.controlGap" }), "data-ciridae-ui": "", children: [_jsxs("span", { className: css({ display: "flex", justifyContent: "space-between" }), children: [_jsx(BaseProgress.Label, { children: label ?? labels.common.progress }), _jsx(BaseProgress.Value, {})] }), _jsx(BaseProgress.Track, { className: css({
+                    height: "progress.track",
+                    borderRadius: "pill",
+                    background: "border.control",
+                    overflow: "hidden",
+                }), children: _jsx(BaseProgress.Indicator, { className: css({
+                        height: "100%",
+                        background: "accent.green",
+                        transitionProperty: "width",
+                        transitionDuration: "default",
+                    }) }) })] }));
+}

package/dist/components/project-avatar.d.ts

@@ -0,0 +1,12 @@
+import { Avatar } from "./data-display.js";
+import type { ComponentProps } from "react";
+/**
+ * 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 declare function ProjectAvatar({ projectId, name, size, className, }: {
+    projectId: string;
+    name: string;
+    size?: ComponentProps<typeof Avatar>["size"];
+    className?: string;
+}): import("@types/react").JSX.Element;