@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/app-frame.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The app's frame, composed from the shell's pieces: the sidebar that folds to a rail and then
+ * into the phone menu, its footer rows and account menu drawn for each width, and, given a
+ * `title`, the main panel's header too. `AccountMenu` is the signed-in account's menu: the app's
+ * own entries, the color theme and palette, and sign out. Auth stays with the host, which passes
+ * sign-out as an action. `AssistantLauncher` opens the app's assistant from the sidebar's foot.
+ */
+import { ArrowClockwiseIcon, CaretUpIcon, CircleHalfIcon, PaletteIcon, PulseIcon, SignOutIcon, } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { PALETTE_NAMES } from "../theme/index.js";
+import { AppNavigation } from "./app-navigation.js";
+import { Button, IconButton } from "./button.js";
+import { useColorTheme } from "./color-theme.js";
+import { icon } from "./icon.js";
+import { KeyboardShortcuts } from "./keyboard-shortcuts.js";
+import { ShortcutHint } from "./keycap.js";
+import { Link } from "./link.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { AppAccountButton, AppBreadcrumbs, AppContent, AppHeader, AppHeaderActions, AppHeaderCompact, AppMain, AppShell, AppSidebar, AppSidebarFooter, AppSidebarFootnote, AppSidebarGroup, AppSidebarNav, AppSidebarOnly, AppSidebarRail, } from "./shell.js";
+import { SidebarItem } from "./sidebar.js";
+import { useNewVersionAvailable } from "./use-new-version-available.js";
+/** The color theme submenu: system, light or dark. */
+export function useColorThemeMenuItem() {
+    const colorTheme = useColorTheme();
+    const { labels } = useCiridaeLocale();
+    const choices = [
+        { value: "system", label: labels.themeCustomizer.system },
+        { value: "light", label: labels.themeCustomizer.light },
+        { value: "dark", label: labels.themeCustomizer.dark },
+    ];
+    return {
+        label: labels.themeCustomizer.colorTheme,
+        icon: _jsx(CircleHalfIcon, { className: icon({ size: "small" }) }),
+        items: choices.map((choice) => ({
+            label: choice.label,
+            checked: colorTheme.preference === choice.value,
+            onSelect: () => colorTheme.setPreference(choice.value),
+        })),
+    };
+}
+/** The palette submenu over the kit's palettes. */
+export function usePaletteMenuItem(choice) {
+    return paletteMenuItem(choice, useCiridaeLocale().labels);
+}
+function paletteMenuItem({ value, onValueChange }, labels) {
+    const selected = value ?? "ciridae";
+    return {
+        label: labels.themeCustomizer.palette,
+        icon: _jsx(PaletteIcon, { className: icon({ size: "small" }) }),
+        items: PALETTE_NAMES.map((name) => ({
+            label: labels.themeCustomizer.paletteName(name),
+            checked: selected === name,
+            onSelect: () => onValueChange(name),
+        })),
+    };
+}
+/** The signed-in account's menu: the app's entries, the color theme and palette, then sign out. */
+export function AccountMenu({ avatar, name, detail, items = [], palette, signOut, compact = false, }) {
+    const { labels } = useCiridaeLocale();
+    const colorThemeItem = useColorThemeMenuItem();
+    return (_jsx(Menu
+    // In the sidebar the menu is as wide as the account row it opens from, as the design draws
+    // it, so it covers whatever sits above that row; the avatar alone opens a menu of its own width.
+    , { 
+        // In the sidebar the menu is as wide as the account row it opens from, as the design draws
+        // it, so it covers whatever sits above that row; the avatar alone opens a menu of its own width.
+        matchTriggerWidth: !compact, trigger: _jsx(AppAccountButton, { "aria-label": labels.accountMenu.menu, avatar: avatar, compact: compact, detail: detail, name: name, trailing: _jsx(CaretUpIcon, { className: icon({ size: "small" }) }) }), items: [
+            ...items,
+            colorThemeItem,
+            ...(palette ? [paletteMenuItem(palette, labels)] : []),
+            ...(signOut
+                ? [
+                    { separator: true },
+                    {
+                        ...signOut,
+                        label: labels.accountMenu.signOut,
+                        icon: _jsx(SignOutIcon, { className: icon({ size: "small" }) }),
+                        variant: "danger",
+                    },
+                ]
+                : []),
+        ] }));
+}
+// A raised pill on the canvas; in the rail, a round button with the same face.
+const assistantLauncher = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    width: "100%",
+    height: "control.default",
+    paddingInlineStart: "control.compactInline",
+    paddingInlineEnd: "control.launcherInlineEnd",
+    border: "1px solid token(colors.border.canvas)",
+    borderRadius: "shell",
+    background: "token(gradients.raised)",
+    color: "fg.primary",
+    font: "inherit",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    cursor: "pointer",
+    _hover: { background: "bg.raisedHover" },
+    "&[aria-pressed=true]": { background: "bg.field" },
+    _focusVisible: { focusRing: "outer" },
+    "& > [data-label]": { flex: "1", minWidth: "0", textAlign: "start" },
+    "&[data-compact]": {
+        justifyContent: "center",
+        width: "control.compact",
+        height: "control.compact",
+        padding: "none",
+        borderRadius: "round",
+    },
+});
+/** Opens the app's assistant from the sidebar's foot: a raised pill, or a round icon in the rail. */
+export function AssistantLauncher({ label, icon: launcherIcon, hotkey, compact = false, className, ...props }) {
+    return (_jsxs("button", { type: "button", "aria-label": compact ? label : undefined, ...props, className: cx(assistantLauncher, className), "data-ciridae-ui": "", "data-compact": compact || undefined, children: [launcherIcon, !compact && (_jsxs(_Fragment, { children: [_jsx("span", { "data-label": "", children: label }), hotkey && _jsx(ShortcutHint, { boxed: true, hotkey: hotkey })] }))] }));
+}
+/** The app's frame: the sidebar for every width, its footer and account, and the page. */
+export function AppFrame({ title, actions, sidebarTop, sidebarRail, navigation, sidebar, sidebarFooter, items = [], footnote, buildSha = null, statusUrl, railActions, compactActions, account, overlays, children, }) {
+    const { labels } = useCiridaeLocale();
+    const statusLink = statusUrl && (_jsx(IconButton, { "aria-label": labels.appFrame.status, nativeButton: false, render: _jsx("a", { href: statusUrl, target: "_blank", rel: "noreferrer" }), children: _jsx(PulseIcon, { className: icon() }) }));
+    const sidebarFoot = (_jsxs(_Fragment, { children: [(sidebarFooter || buildSha !== null || items.length > 0) && (_jsxs(AppSidebarOnly, { children: [sidebarFooter, buildSha !== null && _jsx(BuildUpdateButton, { buildSha: buildSha }), items.map((item) => (_jsx(SidebarItem, { "aria-pressed": item.pressed, icon: item.icon, onClick: item.onClick, children: item.label }, item.id)))] })), _jsxs(AppSidebarFootnote, { children: [footnote, statusUrl && (_jsxs(_Fragment, { children: [_jsx(Link, { external: true, tone: "muted", href: statusUrl, children: labels.appFrame.status }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" })] })), _jsx("code", { title: buildSha ?? undefined, children: buildSha ? buildSha.slice(0, 7) : labels.appFrame.localBuild })] }), (railActions || statusLink || items.length > 0) && (_jsxs(AppSidebarOnly, { rail: true, children: [items.map((item) => (_jsx(SidebarItem, { "aria-label": item.label, "aria-pressed": item.pressed, icon: item.icon, onClick: item.onClick }, item.id))), railActions, statusLink] })), account && (_jsxs(_Fragment, { children: [_jsx(AppSidebarOnly, { children: _jsx(AccountMenu, { ...account }) }), _jsx(AppSidebarOnly, { rail: true, children: _jsx(AccountMenu, { ...account, compact: true }) })] }))] }));
+    return (_jsxs(AppShell, { children: [_jsx(KeyboardShortcuts, {}), navigation ? (_jsx(AppNavigation, { ...navigation, header: sidebarTop, railHeader: sidebarRail, footer: sidebarFoot })) : (_jsxs(AppSidebar, { children: [_jsx(AppSidebarGroup, { children: sidebarTop }), _jsx(AppSidebarRail, { children: sidebarRail }), sidebar && _jsx(AppSidebarNav, { children: sidebar }), _jsx(AppSidebarFooter, { children: sidebarFoot })] })), title === undefined ? (children) : (_jsxs(AppMain, { children: [_jsx(AppHeader, { actions: _jsxs(AppHeaderActions, { children: [actions, _jsxs(AppHeaderCompact, { children: [compactActions, statusLink, items.map((item) => (_jsx(IconButton, { "aria-label": item.label, "aria-pressed": item.pressed, onClick: item.onClick, children: item.icon }, item.id))), account && _jsx(AccountMenu, { ...account, compact: true })] })] }), children: _jsx(AppBreadcrumbs, { children: title }) }), _jsx(AppContent, { children: children })] })), overlays] }));
+}
+/** Only mounted for a named build, so local previews do not need a query provider. */
+function BuildUpdateButton({ buildSha }) {
+    const hasNewVersion = useNewVersionAvailable(buildSha);
+    const { labels } = useCiridaeLocale();
+    if (!hasNewVersion)
+        return null;
+    return (_jsx(Button, { variant: "secondary", fullWidth: true, icon: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }), onClick: () => window.location.reload(), children: labels.appFrame.updateAvailable }));
+}

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

@@ -47,6 +47,10 @@ export type AppNavigationProps = Omit<ComponentProps<"aside">, "children"> & {
     footer?: ReactNode;
     /** Unfold every section while the sidebar has room for all of its rows. Defaults to true. */
     autoUnfold?: boolean;
+    /** Show the rail at any width, as the reader chose; the host keeps the choice. */
+    collapsed?: boolean;
+    /** With `collapsed`, a round button at the rail's foot that unfolds it. */
+    onExpand?: () => void;
     labels?: Partial<{
         more: string;
         less: string;
@@ -59,8 +63,31 @@ export type AppNavigationProps = Omit<ComponentProps<"aside">, "children"> & {
  * 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>;
+    navRef: import("react").RefObject<HTMLDivElement | null>;
+    footerRef: import("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;
+export declare function AppNavigation({ sections, activeId: ownActiveId, renderLink, header, railHeader, footer, autoUnfold, collapsed, onExpand, labels: ownLabels, ...props }: AppNavigationProps): import("react").JSX.Element;
+export type Workspace = {
+    id: string;
+    name: string;
+};
+export type WorkspaceMarkProps = {
+    name: string;
+    /** The workspace the reader is in; the others are drawn quieter. */
+    current?: boolean;
+    /** `small` for a row in the workspace menu. */
+    size?: "regular" | "small";
+    className?: string;
+};
+/** A workspace's mark: its name's first letter on a square tile. */
+export declare function WorkspaceMark({ name, current, size, className, }: WorkspaceMarkProps): import("react").JSX.Element;
+export type WorkspaceSwitcherProps = {
+    workspaces: readonly Workspace[];
+    currentId: string;
+    onSelect: (id: string) => void;
+    /** The mark alone, for the rail. */
+    compact?: boolean;
+};
+/** The current workspace, opening a menu of every workspace the reader belongs to, current checked. */
+export declare function WorkspaceSwitcher({ workspaces, currentId, onSelect, compact, }: WorkspaceSwitcherProps): import("react").JSX.Element;

package/dist/components/app-navigation.js

@@ -1,19 +1,31 @@
 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.
+ * expanded sidebar, and as the icon rail the shell shows under 1000px or while `collapsed`. 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.
+ * `WorkspaceSwitcher` heads the sidebar: the current workspace's mark and name, opening a menu of
+ * the others.
  */
-import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretLineRightIcon, CaretUpDownIcon, CaretUpIcon, } from "@phosphor-icons/react";
 import { Fragment, useLayoutEffect, useRef, useState, } from "react";
-import { css } from "#primitives/css";
+import { css, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
 import { icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.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" });
+import { SidebarItem, SidebarPanel, SidebarRailRule, SidebarSection } from "./sidebar.js";
+import { singleLineTextClass } from "./single-line-text.js";
+const navCount = css({ color: "fg.subtle", fontSize: "code", fontVariantNumeric: "tabular-nums" });
+// The rail's items, a section at a time: the sections stand apart by the rail's gap.
+const railSection = css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "layout.tightGap",
+});
 const sectionFooter = css({
     display: "grid",
     gap: "control.trackInset",
@@ -84,8 +96,9 @@ function sectionRuns(sections) {
     }
     return runs;
 }
-export function AppNavigation({ sections, activeId: ownActiveId = null, renderLink, header, railHeader, footer, autoUnfold = true, labels: ownLabels, ...props }) {
-    const labels = { ...useCiridaeLocale().labels.navigation, ...ownLabels };
+export function AppNavigation({ sections, activeId: ownActiveId = null, renderLink, header, railHeader, footer, autoUnfold = true, collapsed = false, onExpand, labels: ownLabels, ...props }) {
+    const locale = useCiridaeLocale();
+    const labels = { ...locale.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 +
@@ -95,8 +108,86 @@ export function AppNavigation({ sections, activeId: ownActiveId = null, renderLi
     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 })] }));
+    return (_jsxs(AppSidebar, { "aria-label": labels.navigation, collapsed: collapsed, ...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 && section.items.length > 0)
+                        .map((section) => (_jsxs("div", { className: railSection, children: [section.label && _jsx(SidebarRailRule, {}), 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)))] }, section.id)))] }), _jsxs(AppSidebarFooter, { ref: room.footerRef, children: [collapsed && onExpand && (_jsx(AppSidebarRail, { children: _jsx(IconButton, { "aria-label": locale.labels.common.expand, size: "medium", onClick: onExpand, children: _jsx(CaretLineRightIcon, { className: cx(icon({ size: "small" }), css({ _rtl: { transform: "scaleX(-1)" } })) }) }) })), footer] })] }));
+}
+/*
+ * A workspace's square mark with its initial: the primary face for the current one, the raised
+ * face with a quieter initial for the others. Its edge is a gradient, so it is drawn under the face
+ * through a transparent border.
+ */
+const workspaceMark = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "workspace.mark",
+    height: "workspace.mark",
+    border: "1px solid transparent",
+    borderRadius: "keycap",
+    background: "token(gradients.raised) padding-box, token(gradients.border.otherWorkspaceMark) border-box",
+    color: "fg.label",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "&[data-current]": {
+        background: "token(gradients.primary) padding-box, token(gradients.border.primary) border-box",
+        color: "bg.canvas",
+        _light: { color: "fg.onAccent" },
+    },
+    "&[data-size=small]": { width: "control.mark", height: "control.mark", borderRadius: "control" },
+});
+/** A workspace's mark: its name's first letter on a square tile. */
+export function WorkspaceMark({ name, current = false, size = "regular", className, }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cx(workspaceMark, className), "data-ciridae-ui": "", "data-current": current || undefined, "data-size": size, children: name.trim().charAt(0).toLocaleUpperCase() }));
+}
+// The sidebar's first row: hovered it takes the nav row's wash, open a grey well in the canvas's edge.
+const workspaceSwitcher = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    width: "100%",
+    height: "control.default",
+    padding: "control.compactBlock",
+    border: "0",
+    borderRadius: "keycap",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    textAlign: "start",
+    cursor: "pointer",
+    transitionProperty: "background",
+    transitionDuration: "fast",
+    _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
+    // Open, it keeps its open face under the pointer too.
+    "&[data-popup-open], &[data-popup-open]:hover": {
+        background: "bg.openTrigger",
+        _light: { background: "bg.openTrigger" },
+        boxShadow: "inset 0 0 0 1px token(colors.border.canvas)",
+    },
+    _focusVisible: { focusRing: "outer" },
+    "& > [data-name]": { flex: "1" },
+    "& > svg": { flexShrink: "0", color: "fg.muted" },
+    "&[data-compact]": {
+        justifyContent: "center",
+        width: "control.compact",
+        height: "control.compact",
+        padding: "none",
+    },
+});
+/** The current workspace, opening a menu of every workspace the reader belongs to, current checked. */
+export function WorkspaceSwitcher({ workspaces, currentId, onSelect, compact = false, }) {
+    const current = workspaces.find((workspace) => workspace.id === currentId);
+    const name = current?.name ?? "";
+    return (_jsx(Menu, { trigger: _jsxs("button", { type: "button", "aria-label": compact ? name : undefined, className: workspaceSwitcher, "data-ciridae-ui": "", "data-compact": compact || undefined, children: [_jsx(WorkspaceMark, { name: name, current: true }), !compact && (_jsxs(_Fragment, { children: [_jsx("span", { className: singleLineTextClass, "data-name": "", children: name }), _jsx(CaretUpDownIcon, { className: icon({ size: "small" }) })] }))] }), items: workspaces.map((workspace) => ({
+            label: workspace.name,
+            icon: (_jsx(WorkspaceMark, { name: workspace.name, current: workspace.id === currentId, size: "small" })),
+            checked: workspace.id === currentId,
+            onSelect: () => onSelect(workspace.id),
+        })), matchTriggerWidth: true }));
 }

package/dist/components/badge.d.ts

@@ -1,14 +1,39 @@
 import { useRender } from "@base-ui/react/use-render";
-import type { ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 /** What a color says, wherever color carries meaning. */
 export type Tone = "neutral" | "info" | "success" | "warning" | "danger";
+/** A badge's tone: one of the five, or `ink` for an outcome, which no other system uses. */
+export type BadgeTone = Tone | "ink";
 export type BadgeProps = Omit<useRender.ComponentProps<"span">, "children"> & {
-    tone?: Tone;
+    tone?: BadgeTone;
     /** `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";
+    /**
+     * `filled` by default; `outline` is the card's face in the tone's edge; `bare` drops the box:
+     * the icon and the words, muted, the tone on the icon alone.
+     */
+    appearance?: "filled" | "outline" | "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>>;
+export declare function Badge({ tone, shape, appearance, icon, children, render, className, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type BadgeGlyphKind = "notReached" | "hereNow" | "terminal" | "contested" | "noChange" | "check" | "stop";
+export type BadgeGlyphProps = Omit<ComponentProps<"svg">, "children"> & {
+    kind: BadgeGlyphKind;
+};
+/** A badge's drawn glyph: a lifecycle position, a contested verdict, an unchanged outcome. */
+export declare function BadgeGlyph({ kind, className, ...props }: BadgeGlyphProps): import("react").JSX.Element;
+/** How strongly a value has been checked: none, by a model, by a person, against the world. */
+export type AssuranceLevel = 0 | 1 | 2 | 3;
+export type AssuranceGlyphProps = Omit<ComponentProps<"svg">, "children"> & {
+    level: AssuranceLevel;
+};
+/** A three-bar meter, lit to the level, so a value's assurance reads without color. */
+export declare function AssuranceGlyph({ level, className, ...props }: AssuranceGlyphProps): import("react").JSX.Element;
+/** Where a record sits in its stages. The glyph is fixed per position; the words name the stage. */
+export type LifecycleState = "notReached" | "hereNow" | "done" | "blocked" | "agentWaiting" | "expired" | "terminal" | "awaiting";
+export type LifecycleBadgeProps = Omit<BadgeProps, "tone" | "shape" | "appearance" | "icon"> & {
+    state: LifecycleState;
+};
+/** A lifecycle pill: the state picks the glyph and the hue; the words are the stage's name. */
+export declare function LifecycleBadge({ state, ...props }: LifecycleBadgeProps): import("react").JSX.Element;

package/dist/components/badge.js

@@ -1,12 +1,21 @@
-import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } 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.
+ * their hue, `neutral` stays grey, and `ink` is the solid face of what a run actually did. 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. `LifecycleBadge` is the pill for where
+ * a record sits in its stages, and `BadgeGlyph` and `AssuranceGlyph` the small marks badges and
+ * fields put in their icon slot.
  */
 import { useRender } from "@base-ui/react/use-render";
-import { cva, cx } from "#primitives/css";
+import { CheckIcon, ClockIcon, HourglassIcon, SparkleIcon, StopIcon } from "@phosphor-icons/react";
+import { css, cva, cx } from "#primitives/css";
+/*
+ * A tinted pill is its hue's glass, falling from light to its hue, inside that hue's gradient
+ * hairline, which the `[data-edge="gradient"]` ring draws from `--edge`. Neutral is the raised
+ * glass, warning the tinted button's warm glass, and ink the primary face.
+ */
 const badge = cva({
     base: {
         display: "inline-flex",
@@ -29,16 +38,23 @@ const badge = cva({
     variants: {
         shape: {
             pill: { borderRadius: "pill" },
+            // The well of a form field in dark, the card's face in light, lettered in the label grey.
             square: {
                 borderRadius: "control",
                 borderColor: "border.control",
-                background: "bg.field",
-                _light: { borderColor: "border.mark", background: "bg.card" },
+                background: "bg.formField",
+                color: "fg.label",
+                _light: { background: "bg.card" },
             },
         },
-        // A fact told in passing: the icon and the words, muted, with no box; a tone tints the icon.
+        /*
+         * `filled` is the tone's glass; `outline` the card's face inside the tone's edge, as an
+         * outcome that changed nothing; `bare` a fact told in passing: the icon and the words, muted,
+         * with no box, the tone on the icon alone.
+         */
         appearance: {
             filled: {},
+            outline: {},
             bare: {
                 height: "auto",
                 gap: "layout.tightGap",
@@ -54,21 +70,80 @@ const badge = cva({
             neutral: {},
             info: { color: "accent.blue" },
             success: { color: "accent.green" },
-            warning: { color: "accent.yellow" },
+            warning: { color: "accent.yellow", "& svg": { color: "accent.yellowIcon" } },
             danger: { color: "accent.red" },
+            ink: { color: "fg.primary" },
         },
     },
     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: "neutral",
+            css: {
+                background: "token(gradients.raised)",
+                color: "fg.label",
+                "--edge": "token(gradients.border.raised)",
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "info",
+            css: {
+                background: "token(gradients.infoGlass)",
+                "--edge": "token(gradients.border.infoGlass)",
+            },
+        },
         {
             appearance: "filled",
             shape: "pill",
             tone: "success",
-            css: { background: "bg.successSubtle" },
+            css: {
+                background: "token(gradients.successGlass)",
+                "--edge": "token(gradients.border.successGlass)",
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "warning",
+            css: {
+                background: "token(gradients.tinted)",
+                "--edge": "token(gradients.border.raised)",
+                _light: { "--edge": "token(gradients.border.tinted)" },
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "danger",
+            css: {
+                background: "token(gradients.dangerGlass)",
+                "--edge": "token(gradients.border.dangerGlass)",
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "ink",
+            css: {
+                background: "token(gradients.primary)",
+                color: "bg.canvas",
+                "--edge": "token(gradients.border.primary)",
+                _light: { color: "fg.onAccent" },
+            },
+        },
+        {
+            appearance: "outline",
+            shape: "pill",
+            css: {
+                background: "token(gradients.raised)",
+                color: "fg.primary",
+                "--edge": "token(gradients.border.raised)",
+                _light: { background: "bg.card", "--edge": "token(gradients.border.primary)" },
+            },
         },
-        { appearance: "filled", shape: "pill", tone: "warning", css: { background: "bg.tinted" } },
-        { appearance: "filled", shape: "pill", tone: "danger", css: { background: "bg.errorSubtle" } },
         {
             appearance: "bare",
             tone: "info",
@@ -82,7 +157,7 @@ const badge = cva({
         {
             appearance: "bare",
             tone: "warning",
-            css: { color: "fg.muted", "& svg": { color: "accent.yellow" } },
+            css: { color: "fg.muted", "& svg": { color: "accent.yellowIcon" } },
         },
         {
             appearance: "bare",
@@ -100,8 +175,52 @@ export function Badge({ tone = "neutral", shape = "pill", appearance = "filled",
             ...props,
             className: cx(badge({ tone, shape, appearance }), className),
             "data-ciridae-ui": "",
-            "data-edge": shape === "pill" && appearance === "filled" ? "glass" : undefined,
+            "data-edge": shape === "pill" && appearance !== "bare" ? "gradient" : undefined,
             children: (_jsxs(_Fragment, { children: [icon, children] })),
         },
     });
 }
+/*
+ * The glyphs the kit draws itself, in a 14px box (12px for the progress step's check and stop),
+ * in the color of the badge's or field's label.
+ */
+const glyph = css({ flexShrink: "0", width: "1em", height: "1em", fontSize: "icon.small" });
+const smallGlyph = css({ flexShrink: "0", width: "1em", height: "1em", fontSize: "icon.compact" });
+/** A badge's drawn glyph: a lifecycle position, a contested verdict, an unchanged outcome. */
+export function BadgeGlyph({ kind, className, ...props }) {
+    const small = kind === "check" || kind === "stop";
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: small ? "0 0 12 12" : "0 0 14 14", fill: "none", ...props, className: cx(small ? smallGlyph : glyph, className), children: [kind === "notReached" && (_jsx("circle", { cx: "7", cy: "7", r: "3.875", stroke: "currentColor", strokeWidth: "1.25", strokeDasharray: "2 1.6" })), kind === "hereNow" && _jsx("circle", { cx: "7", cy: "7", r: "3", fill: "currentColor" }), kind === "terminal" && (_jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.5", fill: "currentColor" })), kind === "contested" && (_jsx("circle", { cx: "7", cy: "7", r: "3.875", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })), kind === "noChange" && (_jsx("circle", { cx: "7", cy: "7", r: "3.375", stroke: "currentColor", strokeWidth: "1.25" })), kind === "check" && (_jsx("path", { d: "M2.4 6.2 4.6 8.5 9.7 3.4", stroke: "currentColor", strokeWidth: "0.857", strokeLinecap: "round", strokeLinejoin: "round" })), kind === "stop" && (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "6", cy: "6", r: "3.95", stroke: "currentColor", strokeWidth: "0.857" }), _jsx("path", { d: "M4.1 6h3.8", stroke: "currentColor", strokeWidth: "0.857", strokeLinecap: "round" })] }))] }));
+}
+const ASSURANCE_BARS = [
+    { x: 2, y: 7.5, height: 5 },
+    { x: 5.8, y: 4.5, height: 8 },
+    { x: 9.5, y: 1.5, height: 11 },
+];
+/** A three-bar meter, lit to the level, so a value's assurance reads without color. */
+export function AssuranceGlyph({ level, className, ...props }) {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "currentColor", ...props, className: cx(glyph, className), children: ASSURANCE_BARS.map((bar, index) => (_jsx("rect", { x: bar.x, y: bar.y, width: "2.5", height: bar.height, rx: "0.75", opacity: index < level ? 1 : 0.28 }, bar.x))) }));
+}
+const LIFECYCLE_TONES = {
+    notReached: "neutral",
+    hereNow: "info",
+    done: "success",
+    blocked: "warning",
+    agentWaiting: "info",
+    expired: "neutral",
+    terminal: "neutral",
+    awaiting: "warning",
+};
+const LIFECYCLE_GLYPHS = {
+    notReached: _jsx(BadgeGlyph, { kind: "notReached" }),
+    hereNow: _jsx(BadgeGlyph, { kind: "hereNow" }),
+    done: _jsx(CheckIcon, { weight: "bold" }),
+    blocked: _jsx(StopIcon, { weight: "bold" }),
+    agentWaiting: _jsx(SparkleIcon, { weight: "fill" }),
+    expired: _jsx(ClockIcon, { weight: "bold" }),
+    terminal: _jsx(BadgeGlyph, { kind: "terminal" }),
+    awaiting: _jsx(HourglassIcon, { weight: "bold" }),
+};
+/** A lifecycle pill: the state picks the glyph and the hue; the words are the stage's name. */
+export function LifecycleBadge({ state, ...props }) {
+    return _jsx(Badge, { ...props, tone: LIFECYCLE_TONES[state], icon: LIFECYCLE_GLYPHS[state] });
+}

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

@@ -3,15 +3,15 @@ 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;
+export declare function GithubMarkIcon(props: SVGProps<SVGSVGElement>): import("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;
+}): import("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;
+}): import("react").JSX.Element;

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

@@ -12,4 +12,4 @@ export declare function BulkActionBar({ count, onClear, actions, onSelectAll, to
     /** Every row the list holds, as the Select all button counts it. */
     total?: string;
     labels?: Partial<CiridaeLabels["table"]>;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/bulk-action-bar.js

@@ -14,13 +14,13 @@ const bar = css({
     paddingBlock: "panel.compact",
     paddingInlineStart: "panel.comfortable",
     paddingInlineEnd: "panel.compact",
-    border: "1px solid token(colors.border.panel)",
+    border: "1px solid token(colors.border.divider)",
     borderRadius: "action",
-    background: "bg.hover",
+    background: "token(gradients.card)",
     fontSize: "body",
     fontWeight: "medium",
     letterSpacing: "compact",
-    _light: { background: "bg.card" },
+    lineHeight: "tight",
 });
 const leading = css({
     display: "flex",