@ciridae/ui 1.0.3 → 1.0.4

package/dist/chat/conversation-source.d.ts

@@ -1,4 +1,4 @@
-import type { ChatAttachment } from "../components/chat.js";
+import type { ChatAttachment, ChatSource, ChatStep } from "../components/chat.js";
 import type { ResolveFileUrl } from "../components/resolved-file-url.js";
 import type { ReactNode } from "react";
 /**
@@ -27,6 +27,20 @@ export type ChatConversationItem = {
         message?: string;
         retry: () => void;
     };
+    /** Sources the reply cites beyond its Markdown's, such as the values it read, as cards. */
+    sources?: readonly ChatSource[];
+    /** Buttons under the reply for what it suggests doing on the page. */
+    suggestedActions?: ReactNode;
+    /** A closing line under the reply, such as what it read. */
+    footnote?: ReactNode;
+}
+/**
+ * A step the agent took on its way to a reply. The thread folds a run of them into one line,
+ * and draws the newest one of the running turn as what the agent is doing.
+ */
+ | {
+    kind: "step";
+    step: Omit<ChatStep, "id">;
 }
 /** A line about the conversation, such as how an earlier turn ended. */
  | {

package/dist/chat/describe-tool-call.d.ts

@@ -1,5 +1,5 @@
 /**
- * What a tool call waiting for approval asks to do, read from a tool name that starts with its
- * verb: `search_invoices` is "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
+ * What a tool call does, read from a tool name that starts with its verb: `search_invoices` is
+ * "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
  */
-export declare function describeApprovalRequest(toolName: string): string;
+export declare function describeToolCall(toolName: string): string;

package/dist/chat/describe-tool-call.js

@@ -12,10 +12,10 @@ const singleWordVerbs = new Set([
     "write",
 ]);
 /**
- * What a tool call waiting for approval asks to do, read from a tool name that starts with its
- * verb: `search_invoices` is "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
+ * What a tool call does, read from a tool name that starts with its verb: `search_invoices` is
+ * "Search invoices", and a one-word noun like `webfetch` "Use webfetch".
  */
-export function describeApprovalRequest(toolName) {
+export function describeToolCall(toolName) {
     const [verb = toolName, ...rest] = splitIdentifierWords(toolName).map((word) => word.toLowerCase());
     const object = rest.join(" ");
     if (!object && !singleWordVerbs.has(verb))

package/dist/chat/message-text.js

@@ -6,10 +6,10 @@ import { parseMentions } from "./contract.js";
 /* TanStack owns Markdown parsing/rendering; the adapter adds our mention chips and bare URLs.
  * Raw HTML stays text. Source definitions are lifted out separately for the reply's source row.
  */
-// Sized by the bubble it sits in.
+// Sized by the bubble it sits in; its paragraphs, lists and tables 12px apart.
 const text = css({
     display: "grid",
-    gap: "control.iconGap",
+    gap: "layout.contentGap",
     minWidth: "0",
     overflowWrap: "anywhere",
     "& :is(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6, hr)": { margin: "none" },

package/dist/ciridae.css

@@ -37,11 +37,18 @@
 	}
 }
 
-/* [data-edge] paints a hairline inside the element's own box, so bordered elements
-   keep a 1px transparent border for layout and borderless groups get an inset ring. */
+/* [data-edge] paints a hairline inside the element's own box. The design counts that stroke in
+   the layout, so an edged element keeps a 1px transparent border under the ring. A border the
+   element sets itself wins: a native button resetting the browser's sets `1px solid transparent`,
+   and a face the design lays its edge over, such as a text button, sets `border: 0`. */
 [data-ciridae-ui][data-edge] {
 	position: relative;
 }
+@layer base {
+	:where([data-ciridae-ui][data-edge]) {
+		border: 1px solid transparent;
+	}
+}
 [data-ciridae-ui][data-edge]::before {
 	content: "";
 	position: absolute;
@@ -64,8 +71,13 @@
 [data-ciridae-ui][data-edge="control"]::before {
 	background: var(--colors-border\.control);
 }
-[data-ciridae-ui][data-edge="toolbar"]::before {
-	background: var(--colors-border\.toolbar);
+/* data-edge="gradient" draws the gradient its element sets in --edge, such as
+   token(gradients.border.infoGlass). In the base layer, so a component's own
+   ::before background still wins. */
+@layer base {
+	:where([data-ciridae-ui][data-edge="gradient"])::before {
+		background: var(--edge, none);
+	}
 }
 /* An open trigger draws its own border in the text color, so the ring steps aside. */
 [data-ciridae-ui][data-edge][data-popup-open]::before {

package/dist/components/activity-feed.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode, type RefObject } from "react";
 import { type CiridaeLabels } from "./locale.js";
 import { type UserChipProps } from "./user-chip.js";
+export { LogActor, LogEntry, LogGroupHeader, type LogActorProps, type LogEntryProps, type LogGroupHeaderProps, } from "./log-entry.js";
 export type ActivityFeedActor = Pick<UserChipProps, "name" | "kind" | "src" | "icon" | "profile">;
 export type ActivityFeedUpdate = {
     kind: "update";

package/dist/components/activity-feed.js

@@ -14,6 +14,7 @@ import { Toolbar } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 import { MentionChip, openMentionPicker, readMentions, } from "./mention-input.js";
 import { UserName } from "./user-chip.js";
+export { LogActor, LogEntry, LogGroupHeader, } from "./log-entry.js";
 const FILTERS = [
     { value: "all", label: "all", empty: "noActivity" },
     { value: "comments", label: "comments", empty: "noComments" },

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

@@ -1,7 +1,8 @@
 import { type PaletteName } from "../theme/index.js";
 import { type AppNavigationProps } from "./app-navigation.js";
+import { type HotkeyChord } from "./hotkeys.js";
 import { type MenuItem } from "./menu.js";
-import type { ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 /** The palette the reader shows, which the host keeps, such as in storage, for `ThemeProvider`. */
 export type PaletteChoice = {
     /** `undefined` is the stylesheet's own palette, `ciridae`. */
@@ -31,6 +32,17 @@ export type AccountMenuProps = {
 };
 /** The signed-in account's menu: the app's entries, the color theme and palette, then sign out. */
 export declare function AccountMenu({ avatar, name, detail, items, palette, signOut, compact, }: AccountMenuProps): import("react").JSX.Element;
+export type AssistantLauncherProps = Omit<ComponentProps<"button">, "children"> & {
+    /** Such as "Ask Ciridae"; the rail's button is named by it. */
+    label: string;
+    icon: ReactNode;
+    /** The hotkey that opens the assistant, shown at the end; the host binds it. */
+    hotkey?: HotkeyChord;
+    /** The icon alone, round, for the rail. */
+    compact?: boolean;
+};
+/** Opens the app's assistant from the sidebar's foot: a raised pill, or a round icon in the rail. */
+export declare function AssistantLauncher({ label, icon: launcherIcon, hotkey, compact, className, ...props }: AssistantLauncherProps): import("react").JSX.Element;
 /** A footer control drawn for every width: a sidebar row, a rail icon and a phone-header icon. */
 export type AppFrameItem = {
     id: string;

package/dist/components/app-frame.js

@@ -1,18 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
+ * 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";
@@ -58,7 +60,13 @@ function paletteMenuItem({ value, onValueChange }, labels) {
 export function AccountMenu({ avatar, name, detail, items = [], palette, signOut, compact = false, }) {
     const { labels } = useCiridaeLocale();
     const colorThemeItem = useColorThemeMenuItem();
-    return (_jsx(Menu, { trigger: _jsx(AppAccountButton, { "aria-label": labels.accountMenu.menu, avatar: avatar, compact: compact, detail: detail, name: name, trailing: _jsx(CaretUpIcon, { className: icon({ size: "tiny" }) }) }), items: [
+    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)] : []),
@@ -75,6 +83,40 @@ export function AccountMenu({ avatar, name, detail, items = [], palette, signOut
                 : []),
         ] }));
 }
+// 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();

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;
@@ -63,4 +67,27 @@ export declare function useSidebarRoom(foldedRows: number): {
     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("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("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;