@50arms/ui 0.0.0-stage → 35.1.0

package/dist/types/components/board/recipe.d.ts

@@ -0,0 +1,97 @@
+export declare const board: import("tailwind-variants").TVReturnType<{
+    overWip: {
+        true: {
+            header: string;
+            label: string;
+            glyph: string;
+        };
+        false: {};
+    };
+    accented: {
+        true: {
+            column: string;
+            header: string;
+        };
+        false: {
+            column: string;
+        };
+    };
+}, {
+    column: string;
+    header: string[];
+    title: string;
+    glyph: string;
+    trailing: string;
+    label: string;
+    list: string;
+    empty: string;
+    handleCluster: string;
+    menuTrigger: string[];
+    reorderLocked: string[];
+    laneDrop: string[];
+    rejection: string[];
+}, undefined, {
+    overWip: {
+        true: {
+            header: string;
+            label: string;
+            glyph: string;
+        };
+        false: {};
+    };
+    accented: {
+        true: {
+            column: string;
+            header: string;
+        };
+        false: {
+            column: string;
+        };
+    };
+}, {
+    column: string;
+    header: string[];
+    title: string;
+    glyph: string;
+    trailing: string;
+    label: string;
+    list: string;
+    empty: string;
+    handleCluster: string;
+    menuTrigger: string[];
+    reorderLocked: string[];
+    laneDrop: string[];
+    rejection: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    overWip: {
+        true: {
+            header: string;
+            label: string;
+            glyph: string;
+        };
+        false: {};
+    };
+    accented: {
+        true: {
+            column: string;
+            header: string;
+        };
+        false: {
+            column: string;
+        };
+    };
+}, {
+    column: string;
+    header: string[];
+    title: string;
+    glyph: string;
+    trailing: string;
+    label: string;
+    list: string;
+    empty: string;
+    handleCluster: string;
+    menuTrigger: string[];
+    reorderLocked: string[];
+    laneDrop: string[];
+    rejection: string[];
+}>>;

package/dist/types/components/calendar/CalendarMonth.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { addDays, startOfMonth, type PlainDate, type TimeZone } from "@/lib/time";
+import type { CalendarEvent } from "@/lib/calendar/types";
+export interface CalendarMonthProps {
+    /** Any day in the month to display. */
+    month: PlainDate;
+    /** The zone every timed event is interpreted in. Required — there is no default. */
+    zone: TimeZone;
+    events: readonly CalendarEvent[];
+    /** 0 = Sunday. No default anywhere up the stack — see `startOfWeek`. */
+    weekStartsOn?: number;
+    /** Today, for the highlight. Omit in tests so snapshots do not rot. */
+    today?: PlainDate;
+    selectedDate?: PlainDate;
+    onSelectDate?: (day: PlainDate) => void;
+    onSelectEvent?: (event: CalendarEvent) => void;
+    /** Fired when navigation or paging leaves the displayed month. */
+    onMonthChange?: (month: PlainDate) => void;
+    /**
+     * Most bar rows a cell may show, INCLUDING the row the "+N more" link takes.
+     * See `packBand`; the affordance is counted so it cannot be drawn over an event.
+     */
+    maxEventRows?: number;
+    /** Replace a chip's contents. The chip itself — button, label, colour — stays ours. */
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+    className?: string;
+    /** Accessible name for the grid. Omit for the built-in one. */
+    label?: string;
+}
+export declare function CalendarMonth({ month: monthProp, zone, events, weekStartsOn, today, selectedDate, onSelectDate, onSelectEvent, onMonthChange, maxEventRows, renderEvent, className, label, }: CalendarMonthProps): import("react").JSX.Element;
+/** The first day of the month `date` falls in — re-exported for consumers paging. */
+export { startOfMonth, addDays };

package/dist/types/components/calendar/CalendarTimeGrid.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from "react";
+import { type PlainDate, type TimeZone } from "@/lib/time";
+import type { CalendarEvent } from "@/lib/calendar/types";
+import type { Instant } from "@/lib/time";
+export interface CalendarTimeGridProps {
+    /** The days to show. One for Day view, seven for Week. */
+    days: readonly PlainDate[];
+    zone: TimeZone;
+    events: readonly CalendarEvent[];
+    today?: PlainDate;
+    onSelectEvent?: (event: CalendarEvent) => void;
+    /** Minutes per rail. 60 by default — see `snapMinutes` for why they differ. */
+    slotMinutes?: number;
+    /** Pixel height of one rail. The column's total height is derived from it. */
+    slotHeightPx?: number;
+    /**
+     * Hour the grid scrolls to on load. 8 by default.
+     *
+     * Applied on the RANGE's identity, not on every render. react-big-calendar
+     * re-runs its scroll effect on render, so selecting an event snaps the user
+     * back to 8am — an open issue, and a genuinely maddening one.
+     */
+    scrollToHour?: number;
+    /**
+     * Rows the all-day band may show before it scrolls internally.
+     *
+     * REQUIRED TO BE FINITE. An uncapped band eats the container and makes the
+     * time grid unreachable — an open FullCalendar bug, and react-big-calendar's
+     * default is literally `Infinity`.
+     */
+    maxAllDayRows?: number;
+    /** Most lanes a batch of overlapping events may divide into. */
+    maxLanes?: number;
+    /** `cascade` is the Google look and the default. */
+    overlapMode?: "cascade" | "split";
+    /** Fix the now-indicator for a screenshot. */
+    nowInstant?: number;
+    /**
+     * Minutes a drag snaps to. DELIBERATELY INDEPENDENT of `slotMinutes`.
+     *
+     * FullCalendar, react-big-calendar and Schedule-X all couple snap to the rail
+     * spacing; Google and Mobiscroll do not, and Google is 15-minute snap on
+     * 60-minute rails — the combination that feels right. Retrofitting the split
+     * is a rewrite, so the two are separate values.
+     */
+    snapMinutes?: number;
+    /** Commit a move or a resize. Omit to make the grid read-only. */
+    onEventChange?: (event: CalendarEvent, next: CalendarEvent) => void;
+    /** Commit a drag-to-create. Omit to disable creating. */
+    onCreate?: (range: {
+        start: Instant;
+        endExclusive: Instant;
+    }) => void;
+    /** Announcements for the live region. The grid renders its own if omitted. */
+    onAnnounce?: (message: string) => void;
+    /**
+     * Whether clicking an editable event opens the move/resize action menu.
+     *
+     * ON BY DEFAULT WHEN THE GRID IS EDITABLE, AND TURNING IT OFF FAILS WCAG 2.2
+     * SC 2.5.7 unless you provide an equivalent. That criterion asks for a
+     * single-pointer, NON-DRAGGING route to every outcome a drag can produce, and
+     * it is assessed independently of keyboard access — a keyboard equivalent does
+     * not satisfy it. This menu is that route. See `EventActions` for why the
+     * pointer path is tier one and the keyboard is not.
+     *
+     * Set false ONLY when your `onSelectEvent` opens something that offers the
+     * same three outcomes: a new day, a new start, a new length.
+     */
+    eventActions?: boolean;
+    renderEvent?: (event: CalendarEvent) => ReactNode;
+    className?: string;
+    label?: string;
+}
+export declare function CalendarTimeGrid({ days, zone, events, today, onSelectEvent, slotMinutes, slotHeightPx, scrollToHour, maxAllDayRows, maxLanes, overlapMode, nowInstant, snapMinutes, onEventChange, onCreate, onAnnounce, eventActions, renderEvent, className, label, }: CalendarTimeGridProps): import("react").JSX.Element;

package/dist/types/components/calendar/EventActions.d.ts

@@ -0,0 +1,16 @@
+import { type PlainDate, type TimeZone } from "@/lib/time";
+import type { TimedEvent } from "@/lib/calendar/types";
+export interface EventActionsProps {
+    event: TimedEvent;
+    zone: TimeZone;
+    /** The days the view is showing — the destinations "Move to" offers. */
+    days: readonly PlainDate[];
+    /** Same step the drag snaps to, so the two paths reach the same positions. */
+    snapMinutes?: number;
+    /** Longest duration offered, in minutes. */
+    maxDurationMinutes?: number;
+    onApply: (next: TimedEvent) => void;
+    onClose?: () => void;
+    className?: string;
+}
+export declare function EventActions({ event, zone, days, snapMinutes, maxDurationMinutes, onApply, onClose, className, }: EventActionsProps): import("react").JSX.Element;

package/dist/types/components/calendar/format.d.ts

@@ -0,0 +1,42 @@
+import { type Instant, type PlainDate, type TimeZone } from "@/lib/time";
+import type { CalendarEvent } from "@/lib/calendar/types";
+import type { CalendarStrings } from "@/lib/i18n/areas/dates";
+/** `Monday` / `Mon` / `M`, in the viewer's locale. */
+export declare function weekdayName(date: PlainDate, width: "long" | "short" | "narrow", locale: string): string;
+/** `15` — the number in the cell. */
+export declare function dayNumber(date: PlainDate, locale: string): string;
+/** `June 2026` — the view's title. */
+export declare function monthTitle(date: PlainDate, locale: string): string;
+/** `Monday, 15 June 2026` — a cell's accessible name starts with this. */
+export declare function longDate(date: PlainDate, locale: string): string;
+/** `9:30 AM` in the calendar's zone — never the host's. */
+export declare function timeOfDay(instant: Instant, zone: TimeZone, locale: string, withMinutes?: boolean): string;
+/** `GMT−6` — the label above the hour gutter. */
+export declare function zoneLabel(zone: TimeZone, at: Instant, locale: string): string;
+/**
+ * The human range of an event: `15–17 June`, `9:30 – 10:30 AM`, `All day`.
+ *
+ * THE ONLY PLACE THE EXCLUSIVE END BECOMES AN INCLUSIVE ONE. An all-day event
+ * stored 15th → 16th is ONE day and reads "15 June"; stored 15th → 18th it
+ * reads "15 – 17 June". Getting this wrong in the other direction is the
+ * most-reported bug in calendar interoperability, so it happens once, here,
+ * where a test can point at it.
+ */
+export declare function formatDateRange(event: CalendarEvent, zone: TimeZone, locale: string, strings: CalendarStrings): string;
+/**
+ * A cell's accessible name: `Monday, 15 June 2026, 3 events`.
+ *
+ * THE COUNT IS PART OF THE NAME, and that is the difference between a grid a
+ * screen-reader user can skim and one they must enter cell by cell to discover
+ * is empty. Arrowing across a month hearing "14. 15. 16." tells them nothing
+ * about where the work is.
+ */
+export declare function cellLabel(date: PlainDate, eventCount: number, locale: string, strings: CalendarStrings): string;
+/**
+ * An event chip's accessible name.
+ *
+ * Title, then the range, then the calendar's colour LABEL — the last so that
+ * two identically-titled events on different calendars are distinguishable
+ * without seeing the colour.
+ */
+export declare function eventLabel(event: CalendarEvent, zone: TimeZone, paletteLabel: string | undefined, locale: string, strings: CalendarStrings): string;

package/dist/types/components/calendar/palette.d.ts

@@ -0,0 +1,17 @@
+import type { EventPalette, PaletteEntry } from "@/lib/calendar/types";
+export declare const EVENT_PALETTE: EventPalette;
+export declare const DEFAULT_PALETTE_KEY = "iris";
+/**
+ * The swatch for a key, falling back to the default for an unknown one.
+ *
+ * A FALLBACK RATHER THAN A THROW, deliberately, and this is the one place in
+ * the calendar where that is the right call. Event data arrives from a server
+ * and an unrecognised colour key is a data problem, not a programming error —
+ * refusing to render the whole month because one event has a stale key would
+ * turn a cosmetic mismatch into an outage. The event still renders, still
+ * carries its title and time, and is still reachable; only its colour is
+ * generic.
+ */
+export declare function paletteFor(key: string | undefined): PaletteEntry;
+/** Whether a key names a real swatch — for a consumer validating its own data. */
+export declare function isPaletteKey(key: string): boolean;

package/dist/types/components/calendar/use-calendar-drag.d.ts

@@ -0,0 +1,53 @@
+import { type ColumnRect } from "@/lib/calendar/drag";
+import type { CalendarEvent, DragKind, EventDraft, TimedEvent } from "@/lib/calendar/types";
+import type { Instant, PlainDate, TimeZone } from "@/lib/time";
+export interface CalendarDragOptions {
+    readonly zone: TimeZone;
+    readonly days: readonly PlainDate[];
+    readonly snapMinutes: number;
+    /** Measure the day columns. Called at activation and on every scroll. */
+    readonly measure: () => ColumnRect[];
+    /** Commit. Not called for a gesture that changed nothing. */
+    readonly onCommit?: (event: CalendarEvent, next: TimedEvent) => void;
+    /** Commit a drag-to-create. */
+    readonly onCreate?: (range: {
+        start: Instant;
+        endExclusive: Instant;
+        day: PlainDate;
+    }) => void;
+    /** Fired on every committed slot change, for the live region. */
+    readonly onAnnounce?: (message: string) => void;
+    readonly disabled?: boolean;
+}
+export interface CalendarDragState {
+    /** The gesture in flight, or null. */
+    readonly draft: EventDraft | null;
+    /** The rubber-band range while creating, or null. */
+    readonly creating: {
+        start: Instant;
+        endExclusive: Instant;
+        day: PlainDate;
+    } | null;
+    /** True while a resize would be refused — the view dims the preview. */
+    readonly invalid: boolean;
+    /** Wire an event chip. `kind` decides which edge, if any, is being moved. */
+    readonly bindEvent: (event: TimedEvent, kind: DragKind) => (node: HTMLElement | null) => void;
+    /** Wire the empty area of a day column, for drag-to-create. */
+    readonly bindCanvas: () => (node: HTMLElement | null) => void;
+    /** The event as it would be if dropped now — for the live preview. */
+    readonly preview: (event: TimedEvent) => TimedEvent;
+    /**
+     * The two questions the edge auto-scroll loop asks. Passed straight to
+     * `attachEdgeAutoScroll` — see its `AutoScrollDriver` for why re-feeding the
+     * point on scroll is the whole reason the second one exists.
+     */
+    readonly getPoint: () => {
+        x: number;
+        y: number;
+    } | null;
+    readonly onScrolled: (point: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare function useCalendarDrag(options: CalendarDragOptions): CalendarDragState;

package/dist/types/components/calendar/use-event-keyboard.d.ts

@@ -0,0 +1,23 @@
+import { type KeyboardEvent } from "react";
+import { type CalendarDuration, type PlainDate, type TimeZone } from "@/lib/time";
+import type { TimedEvent } from "@/lib/calendar/types";
+export interface EventKeyboardOptions {
+    readonly zone: TimeZone;
+    /** Same step the drag snaps to, so both paths reach the same positions. */
+    readonly snapMinutes: number;
+    /** Days in view, for the day-change bounds and for the announcement. */
+    readonly days: readonly PlainDate[];
+    readonly onCommit: (event: TimedEvent, next: TimedEvent) => void;
+    readonly onAnnounce?: (message: string) => void;
+}
+export interface EventKeyboardState {
+    /** The event currently held, or null. */
+    readonly grabbedId: string | null;
+    /** The pending delta while held. */
+    readonly delta: CalendarDuration;
+    /** Attach to an event chip. */
+    readonly onKeyDown: (event: TimedEvent, e: KeyboardEvent<HTMLElement>) => void;
+    /** The event as it would be if dropped now. */
+    readonly preview: (event: TimedEvent) => TimedEvent;
+}
+export declare function useEventKeyboard(options: EventKeyboardOptions): EventKeyboardState;

package/dist/types/components/calendar/use-grid-navigation.d.ts

@@ -0,0 +1,47 @@
+import { type KeyboardEvent } from "react";
+import { comparePlainDate, type PlainDate } from "@/lib/time";
+export interface GridNavigationOptions {
+    /** Any day in the displayed month. Used to clamp paging. */
+    readonly month: PlainDate;
+    readonly weekStartsOn: number;
+    /** Called when navigation lands outside the displayed month. */
+    readonly onMonthChange?: (month: PlainDate) => void;
+}
+export interface GridNavigation {
+    /** The day that currently holds `tabIndex={0}`. Exactly one, always. */
+    readonly focusedDay: PlainDate;
+    readonly setFocusedDay: (day: PlainDate) => void;
+    /** True while the user is INSIDE a cell, interacting with its events. */
+    readonly insideCell: boolean;
+    readonly enterCell: () => void;
+    readonly leaveCell: () => void;
+    /** Attach to the table. Returns true when it consumed the event. */
+    readonly onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Which day a key moves to, or `null` when the key is not ours.
+ *
+ * PURE, AND EXPORTED, so the whole key map is testable without a DOM. Every
+ * binding below is APG-normative; the file header records the two it
+ * deliberately does not use.
+ */
+export declare function nextDayForKey(key: string, current: PlainDate, weekStartsOn: number, modifiers: {
+    ctrl: boolean;
+    shift: boolean;
+    meta: boolean;
+}): PlainDate | null;
+export declare function useGridNavigation(initialDay: PlainDate, options: GridNavigationOptions): GridNavigation;
+/**
+ * The day that should carry `tabIndex={0}` when the grid has never been used.
+ *
+ * EXACTLY ONE CELL IS TABBABLE, ALWAYS — that is the roving-tabindex contract
+ * and the thing a probe should assert after every keypress. Preference order:
+ * the selected day, else today if the month contains it, else the 1st. Landing
+ * on today is what a user expects; landing on the 1st of a month they paged to
+ * is what they expect there.
+ */
+export declare function initialFocusDay(days: readonly PlainDate[], month: PlainDate, today: PlainDate | undefined, selected: PlainDate | undefined): PlainDate;
+/** Whether `day` belongs to the displayed month rather than a neighbour. */
+export declare function isInMonth(day: PlainDate, month: PlainDate): boolean;
+/** Ordering helper for consumers rendering their own event lists. */
+export { comparePlainDate };

package/dist/types/components/calendar/use-now.d.ts

@@ -0,0 +1,20 @@
+export interface UseNowOptions {
+    /**
+     * How often the value should change, in ms. 60,000 for a minute-resolution
+     * indicator.
+     */
+    readonly resolutionMs?: number;
+    /** Set false to freeze the value — for tests and visual baselines. */
+    readonly enabled?: boolean;
+    /** A fixed instant to report instead of the clock. Overrides `enabled`. */
+    readonly fixed?: number;
+}
+/**
+ * `Date.now()`, re-read on each boundary of `resolutionMs`.
+ *
+ * `fixed` exists because every visual baseline in this package is a screenshot:
+ * a now-indicator driven by the real clock moves a few pixels every minute and
+ * re-records itself forever, so the demo and the preview pass a fixed instant
+ * and the gate keeps gating.
+ */
+export declare function useNow(options?: UseNowOptions): number;

package/dist/types/components/card-face/AcRingGlyph.d.ts

@@ -0,0 +1,20 @@
+import { type CriterionState } from "./vocabulary";
+export interface AcRingItem {
+    title: string;
+    status: CriterionState;
+}
+export interface AcRingGlyphProps {
+    /** How many criteria the card has: the ring's denominator. */
+    total: number;
+    /** How many criteria are in each state: the ring's arcs and, without `items`, the tooltip's rows. */
+    byStatus: Readonly<Record<CriterionState, number>>;
+    /** Each criterion's title and state, when the caller has them: the tooltip then names each one. */
+    items?: readonly AcRingItem[];
+    /** Each state's name ("Passing"), for the arcs and the count rows. */
+    stateLabels: Readonly<Record<CriterionState, string>>;
+    /** The tooltip's heading, e.g. "Acceptance criteria: 3 of 5 passing, 1 failing". */
+    summary: string;
+    /** The ring's accessible name. */
+    label: string;
+}
+export declare function AcRingGlyph({ total, byStatus, items, stateLabels, summary, label }: AcRingGlyphProps): import("react").JSX.Element | null;

package/dist/types/components/card-face/BoardCardAgentSlot.d.ts

@@ -0,0 +1,19 @@
+export type BoardCardAgent = {
+    kind: "children";
+    /** One sentence naming each child and the agent on it. */
+    tooltip: string;
+    /** The agents, each with a stable key and the name its avatar's initials come from. */
+    agents: readonly {
+        key: string;
+        name: string;
+    }[];
+} | {
+    kind: "gate";
+    /** "Gate review in progress: Code quality". */
+    tooltip: string;
+    /** The gate's name, printed in the pill. */
+    label: string;
+};
+export declare function BoardCardAgentSlot({ agent }: {
+    agent: BoardCardAgent;
+}): import("react").JSX.Element;

package/dist/types/components/card-face/CardFace.d.ts

@@ -0,0 +1,106 @@
+import { type ReactNode } from "react";
+import { type CountBadgeTone } from "../CountBadge";
+import { type IconName } from "../Icon";
+import { type AcRingGlyphProps } from "./AcRingGlyph";
+import { type BoardCardAgent } from "./BoardCardAgentSlot";
+import { type CardFaceType } from "./CardTypeBadge";
+import { type EffortBadgeProps } from "./EffortBadge";
+import { type GateRingGlyphProps } from "./GateRingGlyph";
+import { type PriorityTier } from "./vocabulary";
+/** A mark the face draws from a fact: what its tooltip says and what a screen reader calls it. */
+export interface CardFaceMark {
+    tooltip: ReactNode;
+    label: string;
+}
+/** A counted mark (children, comments): the count, then what it says. */
+export interface CardFaceCount extends CardFaceMark {
+    count: number;
+}
+/** DX-6446: the comments mark: a count whose badge is gray while nothing waits on it (the default) and `danger` red while some comment is unread to the viewer. */
+export interface CardFaceComments extends CardFaceCount {
+    tone?: CountBadgeTone;
+}
+/**
+ * One hold — something that makes a human act on the card (it needs a person's answer; it is snoozed). Holds are the
+ * activity row's PINNED part: a crowded row shortens a hold's pill to its tone-coloured icon but never tucks it away.
+ */
+export interface CardFaceHold {
+    /** Stable across renders; also the mark's `data-testid`. */
+    id: string;
+    tone: "danger" | "warning" | "info" | "neutral";
+    icon: IconName;
+    /** The count the pill prints beside its icon; `null` for a hold with nothing to count. */
+    count: number | null;
+    /** What a screen reader is told, whichever form is drawn. */
+    sentence: string;
+    tooltip: ReactNode;
+}
+/** A slot in the activity row: the host's drawing, full or short, and what it says (the row restarts when that changes). */
+export interface CardFaceSlot {
+    render: (compact: boolean) => ReactNode;
+    contentKey: string;
+}
+/**
+ * The card's facts, every word already resolved. A fact the card does not have is `null` (no effort override, no gates
+ * in a phase, no comments): the mark is then not drawn, never drawn empty.
+ */
+export interface CardFaceModel {
+    priority: CardFaceMark & {
+        tier: PriorityTier;
+    };
+    type: CardFaceMark & {
+        type: CardFaceType;
+    };
+    holds: readonly CardFaceHold[];
+    effort: EffortBadgeProps | null;
+    planGates: Omit<GateRingGlyphProps, "phase"> | null;
+    ac: AcRingGlyphProps | null;
+    codeGates: Omit<GateRingGlyphProps, "phase"> | null;
+    children: CardFaceCount | null;
+    comments: CardFaceComments | null;
+    retro: CardFaceMark | null;
+    pullRequest: CardFaceMark | null;
+    agent: BoardCardAgent | null;
+}
+export interface CardFaceProps {
+    card: CardFaceModel;
+    /** The title, as the host's link (or plain text). `className` is the face's title style; `describedBy` names the identity row. */
+    renderTitle: (props: {
+        className: string;
+        describedBy: string;
+    }) => ReactNode;
+    /** The card's reference (its id), as the host draws it: a link in an app, plain text on a static page. */
+    reference: ReactNode;
+    /** The card's parent: its reference as the host draws it, and the glyph's tooltip and name. Omitted for a card with no parent, or one drawn inside its parent's box. */
+    parent?: CardFaceMark & {
+        reference: ReactNode;
+    };
+    /** The card's list or status mark, when the host names it (a lane that IS the card's list does not). */
+    status?: ReactNode;
+    /** A control at the identity row's end (a board's move menu). */
+    trailing?: ReactNode;
+    /** A cover above the header, in a fixed 16:9 frame; no frame exists without it. */
+    cover?: ReactNode;
+    /** The work-state control, which leads the pinned part of the activity row: who holds the card and what holds it back. */
+    workState?: CardFaceSlot;
+    /** The triage score. */
+    triage?: CardFaceSlot;
+    /** The card's token usage. */
+    usage?: CardFaceSlot;
+    /** The latest dispatch's runtime. */
+    runtime?: CardFaceSlot;
+    /** When the card was made and last touched. */
+    age?: CardFaceSlot;
+    /** DX-5422 — the age never leaves the row for the `+N` popover (a card drawn inside its parent's box); it may still shorten. */
+    keepAge?: boolean;
+}
+/**
+ * DX-6446: the comment glyph with its count as the library's corner badge (`CountBadge`), the look every comment count has where the mark is not a button of its own: a card face, a tile that is a link.
+ * The badge sits on the glyph's top-right corner, outside its box, so the right margin reserves its width and keeps it clear of the next mark. `aria-hidden` is the badge's: the owner's label says the count.
+ */
+export declare function CommentCountMark({ count, tone, icon }: {
+    count: number;
+    tone: CountBadgeTone;
+    icon: IconName;
+}): import("react").JSX.Element;
+export declare function CardFace({ card, renderTitle, reference, parent, status, trailing, cover, workState, triage, usage, runtime, age, keepAge, }: CardFaceProps): import("react").JSX.Element;

package/dist/types/components/card-face/CardTypeBadge.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { PaletteKey } from "../../lib/calendar/types";
+import { type IconName } from "../Icon";
+export interface CardFaceType {
+    label: string;
+    icon: IconName;
+    hue: PaletteKey;
+}
+/** The badge alone, for a row that is itself a link: no tooltip anchor nested inside it. */
+export declare function CardTypeChip({ type }: {
+    type: CardFaceType;
+}): import("react").JSX.Element;
+export interface CardTypeBadgeProps {
+    type: CardFaceType;
+    tooltip: ReactNode;
+    /** The accessible name, e.g. "Type: Story". */
+    label: string;
+    testId?: string;
+}
+/** The badge as a mark that explains itself: a tap or hover shows `tooltip`, and never opens the card behind it. */
+export declare function CardTypeBadge({ type, tooltip, label, testId }: CardTypeBadgeProps): import("react").JSX.Element;

package/dist/types/components/card-face/EffortBadge.d.ts

@@ -0,0 +1,9 @@
+import { type EffortRung } from "./vocabulary";
+export interface EffortBadgeProps {
+    effort: EffortRung;
+    /** The full sentence, e.g. "Effort: High". */
+    tooltip: string;
+    /** The accessible name, e.g. "Effort High". */
+    label: string;
+}
+export declare function EffortBadge({ effort, tooltip, label }: EffortBadgeProps): import("react").JSX.Element;

package/dist/types/components/card-face/GateRingGlyph.d.ts

@@ -0,0 +1,22 @@
+import { type GateVerdict } from "./vocabulary";
+export type GatePhase = "plan" | "code";
+export interface GateRingEntry {
+    /** The gate's stable id. */
+    key: string;
+    /** The gate's name, in words. */
+    label: string;
+    verdict: GateVerdict;
+}
+export interface GateRingGlyphProps {
+    /** Which kind of gate the ring stands for: it picks the centre icon. */
+    phase: GatePhase;
+    /** The phase's gates: the ring's arcs and the tooltip's rows. */
+    gates: readonly GateRingEntry[];
+    /** Each verdict's name ("Passed"), for the arcs and the rows. */
+    verdictLabels: Readonly<Record<GateVerdict, string>>;
+    /** The tooltip's heading, e.g. "Plan quality gates: 2 of 3 passed, 1 failed". */
+    summary: string;
+    /** The ring's accessible name. */
+    label: string;
+}
+export declare function GateRingGlyph({ phase, gates, verdictLabels, summary, label }: GateRingGlyphProps): import("react").JSX.Element | null;