@crewlethq/ui 0.15.1 → 0.17.0

package/README.md

@@ -40,17 +40,17 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 
 | Area | Components |
 | ---- | ---------- |
-| Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `Kbd` |
-| Content and text | `Text` (the eight registers), `Prose`, `Document` and `DocumentTitle`, `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor` |
-| Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `Skeleton`, `Eyebrow` |
+| Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
+| Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Document` and `DocumentTitle`, `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor` |
+| Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
-| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
+| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `safeFilename`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
-| Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar` and `useAppShell`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
+| Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences` |
 
 Storybook stories live under `apps/storybook/src/stories`.
@@ -198,6 +198,36 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.17.0
+
+**`Avatar` takes `mark`**, a glyph on the lower-right corner that says how a principal is present rather than what it is doing: a seat's badge acting through an API token keeps its own initials and wears a key there. It sits in the notch a status uses, drawn quiet in the neutral badge's raised fill, strong hairline and secondary ink, and a `status` wins over it. **`markLabel`** is said after the name by a badge that names itself (`Miles avatar, signed in with an API token`); a decorative one says nothing. A marked badge, like one with a status, is drawn inside a `.crewlet-avatar-frame` and draws no ring. What to change: nothing.
+
+## Changes in 0.16.0
+
+0.16.0 adds the pieces the engine console's sign-in, Account and People & access screens were drawing on their own, so every one of them is the package's now.
+
+**`QrCode`** draws a value as inline SVG from the `uqr` encoder: one path of run rectangles on one plate, four modules of quiet zone, error-correction level M, named by `label`, and nothing for a value too long to encode. Nothing is fetched and no markup is injected, so it works under a strict Content-Security-Policy. Its inks are the new **`color.qr.dark` and `color.qr.light` tokens** in `@crewlethq/tokens`, black and white in every palette, because a code inverted for a dark theme is one some authenticator apps cannot read. `@crewlethq/ui` now depends on `uqr` 0.1.3.
+
+**`DownloadButton`** hands text to the reader as a file and says whether the browser took it, under the name it offered: "Downloading", and "download started: {name}" to a screen reader. **`useDownload`** is its hook, and **`downloadText`** is the same save for a control that cannot speak for itself, such as a menu item. **`safeFilename`** decides the name once: separators and invisibles become a hyphen in any script, the extension survives, and the stem is cut to 120 bytes on whole code points. `CopyButton` and `DownloadButton` share **`useOutcome`**, one state machine whose status message is keyed on the attempt, so a second identical outcome is still announced.
+
+**`AuthLayout`** is the page a sign-in screen is drawn on, outside the application shell: a main landmark, the product's `BrandLockup` with the Crewlet mark inline, and one card named by the page's only `h1`, with its description and a body that stacks a form one field step apart.
+
+**`ObjectHeader`, `FactLine` and `SetByLine`** are the header of an object on its page, in a peek and in a hover card: the eyebrow with its kind, glyph and key, a two-line level-two title beside the object's state and actions, and the facts as label-over-value cells on a 7.5rem track. A value gets two lines before it is cut, a `token` keeps one line across two tracks, a `set` of chips is never clamped, and a fact's note and by-line follow its own value. `SetByLine` says provenance in one wording, "set by ada · 2h ago · turn", with the turn as a link.
+
+**`CheckboxGroup`** is several checkboxes under one legend, in the field label's register, with the group's help and error on the fieldset and an `emptyMessage` for a group with nothing to offer.
+
+**`ConfirmField`** is the field a gesture that cannot be undone asks the reader to type a value back into: a `FormField` labelled "Type {phrase} to confirm", with spelling checks off, and **`confirmMatches`** to decide when the gesture may go ahead. Inline code inside a field label now keeps its case, so the phrase reads as the value the field accepts.
+
+**`AppShell.AccountRow`** is the signed-in reader at the foot of the rail: their badge, name and detail as the link to their account, ending in a chevron at rest, marked current on the account page, with the row's controls beside it.
+
+**`Avatar` takes `icon`**, a glyph drawn in place of the initials for a principal whose initials mean nothing, such as an API token or a service account. **An agent's initials skip a leading "agent" word**, which its squircle already says: Agent CEO and Agent CTO draw CE and CT rather than AC twice. The accessible name keeps the whole name. `avatarInitialsName` is exported.
+
+**`InlineCode` takes `whole`**, for a short token that must not break across lines. **`Text` takes `variant="inherit"`**, which keeps the register of the words around it, for a mono literal inside a caption or a chip.
+
+**A `Callout`'s title is a line of its own** above the message, rather than a bold lead-in that read as one run-on sentence with it.
+
+What to change: a `CopyButton` refusal now holds until the next press by default, as `ClipboardOptions.failedResetMs` recommends; pass `failedResetMs` a number to give it a clock again. A callout written with a `title` that read as the start of its sentence may want its body reworded. An `AvatarStack` member or an `Avatar` handed a pre-shortened agent name can be handed the whole name. Everything else is new.
+
 ## Changes in 0.15.1
 
 `@crewlethq/icons`: every Crewlet character is centred on its optical centre rather than its bounding box, and its face and holes are cut into its own paths rather than masked, so a slit shows the badge's plate in every hue and theme, and inside `OrgLabel` or `AddPill` no longer fills with ink. The page's fold is drawn at full detail only, as the keyline is. What to change: nothing.

package/dist/AppShell/AccountRow.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+export interface AccountRowProps {
+    /** The reader's badge, drawn decorative: the name beside it says who it is. */
+    avatar: ReactNode;
+    /** Who the reader is. */
+    name: ReactNode;
+    /** The line under the name: a login, a seat. Left out where it would repeat the name. */
+    detail?: ReactNode;
+    /** The reader's account page. Without it the row states who is signed in and goes nowhere. */
+    href?: string | undefined;
+    /** Whether the reader is on that page, which marks the row as the rail marks its current row. */
+    current?: boolean | undefined;
+    /** What the link opens, as its tooltip. */
+    title?: string | undefined;
+    /**
+     * Said after the name to a screen reader, so the link names its target as
+     * well as its owner. Defaults to ", your account".
+     */
+    linkSuffix?: string | undefined;
+    /** Controls at the row's end: a theme toggle, the trigger of a preferences panel. */
+    actions?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * The signed-in reader at the foot of the rail: their badge, their name and
+ * the line under it, as the way to their own account, with the row's
+ * controls beside it.
+ *
+ * THE LINK ENDS IN A CHEVRON AT REST. A name says nothing about being the way
+ * to a password and a second factor, and a row that drew no mark until it was
+ * hovered was one nobody found.
+ *
+ * WHERE THE READER IS, as the rail says it: on the account page the row wears
+ * the lift and hairline the rail's current row wears, with no hue, and an
+ * outline rather than a shadow so forced colours keep it.
+ *
+ * The controls are siblings of the link, never inside it, so each keeps its
+ * own name and the link's name stays the reader's.
+ */
+export declare function AccountRow({ avatar, name, detail, href, current, title, linkSuffix, actions, className, }: AccountRowProps): import("react").JSX.Element;

package/dist/AppShell/AppShell.d.ts

@@ -105,6 +105,7 @@ export declare namespace AppShell {
     var RailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
     var Topbar: typeof AppShellTopbar;
     var Toggle: typeof AppShellToggle;
+    var AccountRow: typeof import("./AccountRow.js").AccountRow;
 }
 export interface AppShellRailProps {
     /** The head of the rail, drawn at the top bar's own height. */

package/dist/AppShell/index.d.ts

@@ -1,3 +1,5 @@
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
+export { AccountRow } from './AccountRow.js';
+export type { AccountRowProps } from './AccountRow.js';
 export type { ActionRailRowProps, AppShellContextValue, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, } from './AppShell.js';

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-H3XOMT7W.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-OYOQU7O5.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';

package/dist/{AppShell-6QUD7NWM.css → AppShell-RUNVM4WH.css}

@@ -621,3 +621,96 @@
     transition: none;
   }
 }
+
+/* ── the account row ───────────────────────────────────────────────────── */
+
+/*
+ * The signed-in reader at the foot of the rail, with the row's controls at
+ * its end. The link takes the room, so a long name is cut rather than pushing
+ * the controls off the rail.
+ */
+.crewlet-account-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-1) 0;
+}
+
+.crewlet-account-row__who {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: var(--spacing-1);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  /* The fill eases under the pointer, as the rail's rows do. */
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+a.crewlet-account-row__who:hover {
+  background: var(--color-surface-hover);
+}
+
+/* After :hover, so the current row shows the lift rather than the overlay. */
+a.crewlet-account-row__who[aria-current='page'] {
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+}
+
+a.crewlet-account-row__who:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-account-row__avatar {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-account-row__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-account-row__name,
+.crewlet-account-row__detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-account-row__name {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-account-row__detail {
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-account-row__go {
+  flex: none;
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-account-row__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-account-row__who {
+    transition: none;
+  }
+}

package/dist/AuthLayout/AuthLayout.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+export interface AuthLayoutProps {
+    /** What this screen is: "Sign in", "Set your password". The page's one `h1`. */
+    title: ReactNode;
+    /** One or two sentences under the title saying what the screen is for. */
+    description?: ReactNode;
+    /** The product's name beside its mark. */
+    productName?: string | undefined;
+    /** The mark. Defaults to the Crewlet mark; decoration, since the name says it. */
+    mark?: ReactNode;
+    /** Home, for a screen a reader can leave. Without it the lockup is not a link. */
+    homeHref?: string | undefined;
+    /** The form, or the message and its one action. */
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * The page a sign-in screen is drawn on: the product's lockup, and one card.
+ *
+ * OUTSIDE THE APPLICATION SHELL, deliberately. A browser here holds no
+ * session, so a rail, a top bar and their rows would be chrome over questions
+ * the server will refuse, and a row offering a workspace to somebody who has
+ * not said who they are is a promise the next click breaks.
+ *
+ * ONE COLUMN, NARROW, AT THE TOP. The column is a sentence's measure wide and
+ * starts near the top of the window rather than its middle, so the form does
+ * not jump when an error line appears under a field. The card is a section
+ * named by its title, which is the page's `h1`; the description is its lede,
+ * and the body stacks the form's parts one field step apart.
+ *
+ * The mark is the design system's own drawing, inline, through
+ * [BrandLockup], so nothing is fetched and the lockup reads as it does at the
+ * head of the rail.
+ */
+export declare function AuthLayout({ title, description, productName, mark, homeHref, children, className, }: AuthLayoutProps): import("react").JSX.Element;

package/dist/AuthLayout/index.d.ts

@@ -0,0 +1,3 @@
+import './AuthLayout.css';
+export { AuthLayout } from './AuthLayout.js';
+export type { AuthLayoutProps } from './AuthLayout.js';

package/dist/AuthLayout/index.js

@@ -0,0 +1,8 @@
+export { AuthLayout } from '../chunk-7QFAORCY.js';
+import '../chunk-7KBNFFM3.js';
+import '../chunk-EG6NYWVK.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AuthLayout-ODHBUPHQ.css

@@ -0,0 +1,54 @@
+/*
+ * The sign-in page: one narrow column near the top of the window.
+ *
+ * THE PAGE SCROLLS ITSELF, at the viewport's dynamic height, because it is
+ * drawn outside any shell that would: on a phone with the keyboard up, a form
+ * taller than what is left of the window has to scroll, not be cut off.
+ */
+.crewlet-auth-layout {
+  display: flex;
+  justify-content: center;
+  height: 100dvh;
+  overflow-y: auto;
+  padding: var(--spacing-8) var(--spacing-4);
+  background: var(--color-surface-background);
+}
+
+/* A sentence's measure wide, and held at the top: the form does not jump when
+   an error line appears under a field. */
+.crewlet-auth-layout__column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  width: 100%;
+  max-width: 52ch;
+  margin-block-end: auto;
+}
+
+/* The lockup is centred over the card, and takes none of the rail's inset,
+   which is what its own padding is for. */
+.crewlet-auth-layout__brand {
+  align-self: center;
+  padding: 0;
+}
+
+/* The form's parts stand one field step apart, under the title and lede. */
+.crewlet-auth-layout__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+/* A submit does not stretch: every button here states one gesture, and a
+   full-width bar reads as the page's edge rather than a control. */
+.crewlet-auth-layout__body > form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.crewlet-auth-layout__body > form > button,
+.crewlet-auth-layout__body > button {
+  align-self: flex-start;
+}

package/dist/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { type CrewletCharacterId } from '@crewlethq/icons/characters';
 import type { NodeHue } from '../utils/nodeHue.js';
 /**
@@ -108,6 +108,21 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     ring?: AvatarRing | undefined;
     /** What the agent is doing, as a corner badge; none is idle. */
     status?: AvatarStatus | undefined;
+    /**
+     * A glyph on the corner saying HOW a principal is present rather than what
+     * it is doing: a person's or a seat's badge acting through an API token
+     * wears a key there, so the face stays theirs and the credential is still
+     * shown. It sits where a status sits, cut into the same notch, in the
+     * neutral badge's raised fill, and a `status` wins over it. A component,
+     * drawn at the corner's own scale.
+     */
+    mark?: ReactNode;
+    /**
+     * What the mark means, said after the name by a badge that names itself
+     * ("Miles avatar, signed in with an API token"). A decorative badge says
+     * nothing, as it says nothing of a status.
+     */
+    markLabel?: string | undefined;
     /**
      * The name is already printed beside this badge, so the badge itself says
      * nothing. Without it a row reads "Carlos Diaz avatar, Carlos Diaz".
@@ -130,7 +145,27 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
      * neutral badge's ink, on its plate.
      */
     hue?: NodeHue | undefined;
+    /**
+     * A glyph drawn in place of the initials, for a principal that is not a
+     * person or an agent and whose name's initials would mean nothing: an API
+     * token, a service account. "TO" from `token:reader` reads as somebody's
+     * initials. A component, not a name; it is drawn at the badge's own scale.
+     * An image or an agent's character still wins over it.
+     */
+    icon?: ReactNode;
 }
+/**
+ * The name an agent's initials are drawn from: its leading "agent" word
+ * dropped (`Agent CEO` gives CEO, `agent-cto` gives cto), and every other
+ * name as it is.
+ *
+ * THE SHAPE ALREADY SAYS "AGENT". A company that names its seats for what
+ * they are ("Agent CEO", "Agent CTO", "Agent PM") otherwise got AC, AC and
+ * AP: the two seats a chart draws most were the same badge side by side. The
+ * badge's accessible name keeps the whole name. A name that is nothing but
+ * the word keeps it, since an empty one draws the anonymous badge.
+ */
+export declare function avatarInitialsName(name: string | undefined, kind: AvatarKind): string | undefined;
 /**
  * The smallest badge, in px, a character is drawn at full detail: its keyline
  * and its visor gap. Under it both are hairlines finer than a pixel, which a
@@ -198,4 +233,4 @@ export declare function avatarCorner(pixels: number): number;
  * knowing what colour that ground is. The frame takes the caller's class and
  * style, which is where a layout reaches for the badge.
  */
-export declare const Avatar: ({ src, name, size, kind, tone, ring, status, decorative, colorSeed, character, hue, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;
+export declare const Avatar: ({ src, name, size, kind, tone, ring, status, mark, markLabel, decorative, colorSeed, character, hue, icon, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;

package/dist/Avatar/index.d.ts

@@ -1,6 +1,6 @@
 import './Avatar.css';
 import './AvatarStack.css';
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUS_LABELS, AVATAR_STATUSES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials, } from './Avatar.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUS_LABELS, AVATAR_STATUSES, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials, } from './Avatar.js';
 export type { AvatarKind, AvatarProps, AvatarRing, AvatarSize, AvatarSizeStep, AvatarStatus, AvatarTone, } from './Avatar.js';
 export { AvatarStack, avatarStackLabel } from './AvatarStack.js';
 export type { AvatarStackMember, AvatarStackProps } from './AvatarStack.js';

package/dist/Avatar/index.js

@@ -1,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-ZPWUVVIB.js';
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from '../chunk-HI6Q2UXQ.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-UAN5NE7M.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Avatar-I4NFP3WQ.css → Avatar-3C2H2WA4.css}

@@ -126,6 +126,25 @@
   object-fit: cover;
 }
 
+/*
+ * A GLYPH IN PLACE OF THE INITIALS, for a principal whose name's initials
+ * mean nothing (an API token, a service account). It takes a little over half
+ * the box, the share the initials' cap height and width take, so a key badge
+ * beside a person's badge reads as the same size of mark.
+ */
+.crewlet-avatar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 55%;
+  height: 55%;
+}
+
+.crewlet-avatar__icon > * {
+  width: 100%;
+  height: 100%;
+}
+
 /* ── tones ─────────────────────────────────────────────────────────────── */
 
 .crewlet-avatar--fallback {
@@ -320,3 +339,18 @@
 .crewlet-avatar__status--stopped {
   background: var(--color-feedback-danger);
 }
+
+/*
+ * A MARK (`mark`): how a principal is present, not a state, so it is drawn
+ * quiet rather than in a state's fill: the neutral badge's raised rung, its
+ * strong hairline and its secondary ink. The hairline is the corner's own
+ * outline, inset by its width, so it keeps the corner's size and survives
+ * forced colours.
+ */
+.crewlet-avatar__status--mark {
+  padding: 1px;
+  background: var(--color-surface-elevated);
+  outline-color: var(--color-border-strong);
+  outline-offset: -1px;
+  color: var(--color-text-secondary);
+}

package/dist/AvatarPicker/index.js

@@ -1,14 +1,14 @@
-export { AvatarPicker } from '../chunk-EFNHOVC2.js';
+export { AvatarPicker } from '../chunk-HENOTGUV.js';
 import '../chunk-NXDEPUVG.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-BWRGFKJP.js';
-import '../chunk-YXMCUKFI.js';
+import '../chunk-5PSXBL73.js';
 import '../chunk-CBOICT64.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
-import '../chunk-HI6Q2UXQ.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Callout/Callout.d.ts

@@ -18,7 +18,13 @@ export type CalloutVariant = Exclude<Tone, 'brand'>;
 export type CalloutLayout = 'card' | 'banner';
 export interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     variant?: CalloutVariant | undefined;
-    /** A bold lead-in before the message. */
+    /**
+     * The callout's heading, drawn in bold on its own line above the message.
+     *
+     * A LINE OF ITS OWN, not a lead-in. Run on the same line as the body, the
+     * title and the first sentence read as one run-on sentence ("You were signed
+     * out Your session ended"), and the reader had to find where one stopped.
+     */
     title?: ReactNode;
     /** A glyph replacing the variant's own. A component, not a name. */
     icon?: ReactNode;

package/dist/Callout/index.js

@@ -1,2 +1,2 @@
-export { Callout } from '../chunk-R6FBDTP3.js';
+export { Callout } from '../chunk-SVSCLHHI.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Callout-S7QDWHDL.css → Callout-SXXK4B5R.css}

@@ -52,8 +52,10 @@
 }
 
 .crewlet-callout__title {
+  /* A LINE OF ITS OWN above the message, so the heading and the first
+     sentence are never read as one run-on sentence. */
+  display: block;
   font-weight: var(--font-weight-semibold);
-  margin-right: var(--spacing-2);
 }
 
 .crewlet-callout__action {

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-YXMCUKFI.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-5PSXBL73.js';
 import '../chunk-CBOICT64.js';
-import '../chunk-HI6Q2UXQ.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+export interface CheckboxGroupProps {
+    /** What the boxes choose between, read as the group's name: "Access". */
+    legend: ReactNode;
+    /** A sentence about the whole group, read when a reader enters it. */
+    helper?: ReactNode;
+    /** Why the last choice was refused. */
+    error?: ReactNode;
+    /**
+     * What the group says when it has no box to offer, in place of an empty
+     * fieldset that reads as a missing control.
+     */
+    emptyMessage?: ReactNode;
+    /** The boxes: `Checkbox` elements, one per choice. */
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * Several checkboxes that answer one question, named by a legend.
+ *
+ * A FIELDSET, because a `for` attribute names one element and a group is not
+ * one: a screen reader entering the group hears the legend once, and then each
+ * box by its own label. The legend wears the field label's register, so the
+ * group reads as one field among the others on the form, and the boxes stand
+ * one step apart, the rhythm a field's own parts keep.
+ *
+ * The group's help line and error are attached to the fieldset itself rather
+ * than to each box, so neither is read again on every box in it.
+ */
+export declare function CheckboxGroup({ legend, helper, error, emptyMessage, children, className }: CheckboxGroupProps): import("react").JSX.Element;

package/dist/Checkbox/index.d.ts

@@ -1,3 +1,5 @@
 import './Checkbox.css';
 export { Checkbox } from './Checkbox.js';
 export type { CheckboxProps } from './Checkbox.js';
+export { CheckboxGroup } from './CheckboxGroup.js';
+export type { CheckboxGroupProps } from './CheckboxGroup.js';

package/dist/Checkbox/index.js

@@ -1,2 +1,6 @@
-export { Checkbox } from '../chunk-YCTMKKRA.js';
+export { Checkbox, CheckboxGroup } from '../chunk-75CLJNDQ.js';
+import '../chunk-4GB57WIT.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Checkbox-UE7TEPAM.css → Checkbox-KT7RS6QQ.css}

@@ -117,3 +117,19 @@
   outline: 2px solid var(--color-focus);
   outline-offset: 0;
 }
+
+/*
+ * A group of boxes under one legend. The boxes keep a field's inner rhythm,
+ * one step apart, so the group reads as one field and its boxes as its parts.
+ */
+.crewlet-checkbox-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-checkbox-group__empty {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}

package/dist/CodeBlock/index.js

@@ -1,6 +1,7 @@
-export { CodeBlock } from '../chunk-KGTQ5CVD.js';
-import '../chunk-YACKC3K2.js';
-import '../chunk-5VNUYO76.js';
+export { CodeBlock } from '../chunk-GDDE4UM7.js';
+import '../chunk-W46LPU4R.js';
+import '../chunk-STJ7QBC3.js';
+import '../chunk-DTIW4CHZ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Combobox/index.js

@@ -1,8 +1,8 @@
-export { Combobox } from '../chunk-4Y7WKXAW.js';
+export { Combobox } from '../chunk-ZFH7H7GS.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-FTEJPHBI.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4GB57WIT.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-IYZZL3MZ.js';
-import '../chunk-K4VORB64.js';
+export { CommandPalette } from '../chunk-PQ63NLFC.js';
+import '../chunk-DEEVA6TV.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-FTEJPHBI.js';
+import '../chunk-4GB57WIT.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Composer/index.js

@@ -1,7 +1,7 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-QSLIN64M.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-6NIMZ5XC.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-FTEJPHBI.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4GB57WIT.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';