@crewlethq/ui 0.8.1 → 0.10.0

package/README.md

@@ -42,13 +42,13 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | ---- | ---------- |
 | 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`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker` |
 | Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `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`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx` |
+| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure` |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar` and `useAppShell`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences` |
@@ -191,6 +191,31 @@ 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.
 
+## Breaking changes in 0.10.0
+
+0.10.0 moves an agent's state off the ring round its badge and onto a small badge on its corner.
+
+**A state is a status, never a ring.** `Avatar` takes `status`: `working`, `needs` (waiting on a person) or `stopped`, and none for idle. It draws a round badge on the lower-right corner, the state's fill carrying a glyph whose shape says it (play, a question mark, a square) in `--color-text-inverse`, which the tokens' palette suite now holds at 3:1 on each fill (`MARK_ON_FILL`). The badge sits in a notch cut out of the face with a mask, so it reads on any ground without knowing its colour. A badge with a status is drawn inside a `.crewlet-avatar-frame` of the face's own size, which takes your `className` and `style`; a badge that names itself appends the state to its accessible name (`Software Engineer avatar, stopped`), and a decorative one says nothing, so say the state in words beside it. `AVATAR_STATUSES` and `AVATAR_STATUS_LABELS` list the statuses and their words. A ring of a state's hue round a plate in the agent's own hue put two colours on one small mark, and framed what the agent was doing louder than who it is.
+
+| Was | Is |
+|---|---|
+| `<Avatar ring="info">`, `ring="warning"`, `ring="danger"` for what a seat is doing | `status="working"`, `status="needs"`, `status="stopped"` |
+| `<Avatar ring="success">` | no status; say a finished state in words beside the badge |
+| `AvatarRing` naming `info`, `warning`, `danger` or `success` | `AvatarRing` is `'brand'` alone, the selected ring; a state is an `AvatarStatus` |
+| an `AvatarStack` member's `ring` | nothing: each member overlaps the one before it, so a corner badge would be hidden; say what the members are doing beside the stack |
+| a stylesheet of your own reading `.crewlet-avatar--ring-info`, `-warning`, `-danger` or `-success` | `.crewlet-avatar__status--working`, `--needs` or `--stopped` |
+| a `ring="brand"` and a `status` on one badge | the status alone; the notch is cut from the outline the ring would follow, so a badge with a status draws no ring |
+
+## Changes in 0.9.0
+
+0.9.0 gives an agent a face of its own: one of the thirty Crewlet characters in `@crewlethq/icons/characters`, drawn in one of the six node hues an operator chooses for it.
+
+**An agent's badge can be its character.** `Avatar` takes `character` and `hue`. An agent badge with a `character` draws that character, centred, on a plate of its hue (the hue's `-fill`, its `-line` round the badge and the hue itself as the ink), in place of its initials and of any image. A badge of `AVATAR_CHARACTER_FULL_DETAIL` (56px) and up draws the character's keyline and visor gap; a smaller one draws it compact, where a hairline would be a blur. A `human` badge ignores both and keeps its circle and initials, and what any badge says to a screen reader is unchanged. An `AvatarStack` member takes the same two fields, for a stack of agents drawn as themselves. What to change: nothing; a badge with neither prop draws as it did.
+
+**The node hues are one exported set.** `NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue` and the `NodeHue` type name the six hues an entity is told apart by, where somebody chose one. `TreeCardTone` (and so `OrgTableTone`) is now `NodeHue`, so an agent's card, row and badge are drawn from one list. What to change: nothing; the six names are the same.
+
+**Two pickers choose them.** `CharacterPicker` is a radio group of every character, laid out in rows of six (`CHARACTER_PICKER_COLUMNS`), each drawn as the badge it would make in the agent's hue; Left and Right walk the characters, Up and Down move a whole row, and the chosen badge carries the kit's selected ring. `HuePicker` is a `SegmentedControl` radio row of the six hues, each a swatch and the hue's name. Both take `disabled`, which keeps the choice shown and lets nothing in the group take focus or a press. Wrap either in `FormField as="fieldset"` for a labelled field.
+
 ## Changes in 0.7.0
 
 0.7.0 draws the org surfaces (`TreeCanvas`'s `node` appearance, `OrgTable`,

package/dist/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import type { Tone } from '../utils/tone.js';
+import { type CrewletCharacterId } from '@crewlethq/icons/characters';
+import type { NodeHue } from '../utils/nodeHue.js';
 /**
  * WHAT THE BADGE STANDS FOR, drawn as its outline.
  *
@@ -35,16 +36,37 @@ export type AvatarKind = 'agent' | 'human';
  */
 export type AvatarTone = 'neutral' | 'seeded';
 /**
- * The STATE ring: a 1.5px line 2px outside the badge, in one of the state
- * fills or the accent.
- *
- * `info`, `warning`, `danger` and `success` are what the thing is DOING, and
- * `brand` is SELECTED. Which state each one means is the consumer's to decide,
- * and to SAY in words beside the badge: the ring is never the only carrier of
- * a state, because in forced-colors mode every ring is the same system colour.
- * No ring at all is the resting state.
+ * The SELECTED ring: a 1.5px line 2px outside the badge, in the accent.
+ *
+ * It is the one ring there is. A ring used to carry a state too (`info`,
+ * `warning`, `danger`, `success`), and on a character plate that already
+ * wears its own hue it put a second colour round a 32px mark, framing what
+ * the agent was doing louder than who it is. A state is a [AvatarStatus]
+ * now, a small badge on the corner whose SHAPE says it.
  */
-export type AvatarRing = Exclude<Tone, 'neutral'>;
+export type AvatarRing = 'brand';
+/**
+ * WHAT AN AGENT IS DOING, drawn as a small round badge on the lower-right
+ * corner: `working`, `needs` (it is waiting on a person) or `stopped`. An idle
+ * badge carries none, because a mark that means "nothing is happening" is one
+ * a reader learns to skip.
+ *
+ * SHAPE FIRST, colour second. Each badge is a state's fill step carrying a
+ * glyph, play for working, a question for needs and a square for stopped, so
+ * it reads to somebody who cannot separate the hues and in forced-colors mode,
+ * where every fill is one system colour. The glyph is in the inverse ink,
+ * which the tokens' palette suite holds at 3:1 on each fill (`MARK_ON_FILL`).
+ *
+ * THE BADGE IS NOT THE ONLY CARRIER. A row that draws a badge with a status
+ * says the state in words as well; a badge drawn alone (a breadcrumb, a stack)
+ * is the case the glyph exists for. A badge that names itself appends the
+ * state to its accessible name.
+ */
+export type AvatarStatus = 'working' | 'needs' | 'stopped';
+/** Every status, in the order a legend lists them. */
+export declare const AVATAR_STATUSES: readonly ["working", "needs", "stopped"];
+/** What each status is called in a sentence: the accessible name's last words. */
+export declare const AVATAR_STATUS_LABELS: Readonly<Record<AvatarStatus, string>>;
 /** The four steps, in px. A number is accepted for anything outside them. */
 export declare const AVATAR_SIZES: {
     readonly xs: 20;
@@ -79,8 +101,13 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     /** An agent (the default) is a squircle; a human is a circle. */
     kind?: AvatarKind | undefined;
     tone?: AvatarTone | undefined;
-    /** A state ring, or none. `brand` is selected. */
+    /**
+     * The selected ring, or none. Not drawn on a badge with a `status`: the
+     * corner badge is cut out of the outline the ring would follow.
+     */
     ring?: AvatarRing | undefined;
+    /** What the agent is doing, as a corner badge; none is idle. */
+    status?: AvatarStatus | 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".
@@ -91,7 +118,26 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
      * outlives a rename, so the colour does too. Only read with `tone="seeded"`.
      */
     colorSeed?: string | undefined;
+    /**
+     * The Crewlet character an AGENT is drawn as, in place of its initials and
+     * of any image. A person is never drawn as one: on a `human` badge this is
+     * ignored, and the circle and the initials stay.
+     */
+    character?: CrewletCharacterId | undefined;
+    /**
+     * The hue the agent's character is drawn in, on a plate of the same hue.
+     * Read only with `character`; a character with no hue is drawn in the
+     * neutral badge's ink, on its plate.
+     */
+    hue?: NodeHue | 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
+ * screen draws as a blur round the body, so the character is drawn compact
+ * (see `CrewletCharacterDetail`).
+ */
+export declare const AVATAR_CHARACTER_FULL_DETAIL = 56;
 /**
  * Two uppercase initials, or one where the name has only one letter to give.
  *
@@ -139,11 +185,17 @@ export declare function avatarPixels(size: AvatarSize): number;
  */
 export declare function avatarCorner(pixels: number): number;
 /**
- * An identity badge: an image, or the initials behind it.
+ * An identity badge: an agent's character, an image, or the initials behind it.
  *
  * If the image fails to load (a stale CDN URL, an expired signature) it
  * degrades to the initials rather than to a broken-image glyph. Either way it
- * keeps its kind's outline and its ring: whether somebody has uploaded a photo
- * says nothing about what they are or what they are doing.
+ * keeps its kind's outline, its ring and its status: whether somebody has
+ * uploaded a photo says nothing about what they are or what they are doing.
+ *
+ * A BADGE WITH A STATUS IS FRAMED: the face (character, image or initials)
+ * stands in a box of its own size beside the corner badge, and the face has a
+ * notch cut where the badge sits, so the badge reads on any ground without
+ * 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, decorative, colorSeed, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;
+export declare const Avatar: ({ src, name, size, kind, tone, ring, status, decorative, colorSeed, character, hue, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;

package/dist/Avatar/AvatarStack.d.ts

@@ -1,5 +1,7 @@
 import type { HTMLAttributes } from 'react';
-import { type AvatarKind, type AvatarRing, type AvatarSizeStep } from './Avatar.js';
+import type { CrewletCharacterId } from '@crewlethq/icons/characters';
+import type { NodeHue } from '../utils/nodeHue.js';
+import { type AvatarKind, type AvatarSizeStep } from './Avatar.js';
 /** One badge in a stack. */
 export interface AvatarStackMember {
     /** Who: the initials, and a word of the stack's accessible name. */
@@ -7,8 +9,10 @@ export interface AvatarStackMember {
     /** An agent (the default) is a squircle; a human is a circle. */
     kind?: AvatarKind | undefined;
     src?: string | undefined;
-    /** A state ring on this badge, as `Avatar` draws it. */
-    ring?: AvatarRing | undefined;
+    /** The Crewlet character an agent member is drawn as, as `Avatar` draws it. */
+    character?: CrewletCharacterId | undefined;
+    /** The hue an agent member's character is drawn in, as `Avatar` draws it. */
+    hue?: NodeHue | undefined;
     /**
      * What tells two members apart when their names do not (a seat's handle, a
      * person's id), unique within the stack. The name is used when it is absent.

package/dist/Avatar/index.d.ts

@@ -1,6 +1,6 @@
 import './Avatar.css';
 import './AvatarStack.css';
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials, } from './Avatar.js';
-export type { AvatarKind, AvatarProps, AvatarRing, AvatarSize, AvatarSizeStep, AvatarTone } from './Avatar.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUS_LABELS, AVATAR_STATUSES, Avatar, avatarCorner, 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,2 +1,3 @@
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from '../chunk-IA232OTU.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-3UK4VFSK.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';
 import '../chunk-ODEQTPFM.js';

package/dist/Avatar-QHYOFID3.css

@@ -0,0 +1,322 @@
+/*
+ * The identity badge.
+ *
+ * IT IS NEUTRAL UNLESS SOMEBODY CHOSE OTHERWISE, and a hash never chooses. The
+ * system this replaces coloured a seat by `PALETTE[hash(name) % 8]`, over the
+ * same eight families it also spent on phases and event categories, so one
+ * amber meant "the execute phase", "the decision category" and "the Analyst"
+ * at once. A hash of a name carries no information: rename the seat and its
+ * colour changes, which is the proof it never meant anything. Identity is the
+ * OUTLINE (a squircle for an agent, a circle for a person), the monogram and
+ * the name, and for an agent an operator gave one, its character and its hue.
+ *
+ * A STATE IS A CORNER BADGE, NEVER A LINE ROUND THE PLATE. A ring in a state's
+ * hue round a plate in the agent's own hue put two colours on a 32px mark and
+ * framed what the agent was doing louder than who it is. The one ring left is
+ * SELECTED, in the accent.
+ *
+ * The seeded tints stay for the one case that earns them, a roster somebody
+ * scans, and their grounds are TOKENS: measured under white initials and held
+ * at 4.5:1 by the palette suite. Spelled as literals, five of the ten sat
+ * under that floor while the suite measured ten values nothing painted with.
+ *
+ * AN AGENT'S OWN HUE IS NOT A HASH. An agent an operator gave a Crewlet
+ * character and a hue is drawn as that character, in that hue, on a plate of
+ * it: the hue was chosen for the seat and survives a rename, which a hash of
+ * the name never did. It is one of the six node hues (`NodeHue`), each a
+ * measured set of steps rather than a colour with alphas applied here.
+ */
+
+.crewlet-avatar {
+  --crewlet-avatar-size: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--crewlet-avatar-size);
+  height: var(--crewlet-avatar-size);
+  overflow: hidden;
+  object-fit: cover;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-wide);
+  /* The document's own leading rather than a tight step of the badge's own.
+     The box is a fixed square that centres whatever line it holds, so the ink
+     lands in the same place either way; what the tight step bought was one
+     more number in a component that already sets four. */
+  line-height: var(--font-line-height-body);
+  text-transform: uppercase;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/*
+ * The four steps. Each pairs its box with a type step, so two initials sit
+ * inside the outline at every one of them. A numeric size sets the same
+ * `--crewlet-avatar-size` inline and computes its own type, because nothing in
+ * the scale can answer for an arbitrary box; everything else it takes from the
+ * rules below exactly as a step does.
+ */
+.crewlet-avatar--xs {
+  --crewlet-avatar-size: 20px;
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-avatar--sm {
+  --crewlet-avatar-size: 26px;
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-avatar--md {
+  --crewlet-avatar-size: 32px;
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-avatar--lg {
+  --crewlet-avatar-size: 40px;
+  font-size: var(--font-size-sm);
+}
+
+/* ── kinds ─────────────────────────────────────────────────────────────── */
+
+/*
+ * AN AGENT IS A SQUIRCLE, set in the mono face: what the engine runs, named
+ * the way a handle is written.
+ *
+ * THE CORNER MOVES WITH THE BOX, at 0.29 of it (`AVATAR_CORNER_RATIO` in the
+ * component, which the suite holds equal to this number): the approved
+ * design's 7px at 24 and 9px at 30, as one proportion. It is computed here from
+ * the size property every step and every numeric size sets, so there is ONE
+ * ladder. There used to be two, a step table here and a numeric table in the
+ * component, and they disagreed: `size={80}` drew a squarer badge than
+ * `size="lg"` at half its width.
+ *
+ * WHERE THE BROWSER DRAWS A SQUIRCLE, IT IS A WHOLE ONE. `corner-shape:
+ * squircle` is a superellipse of exponent 4, which at a given radius reaches
+ * much closer to the box's corner than a circular arc does: at the 45 degree
+ * point it stands 0.159 of the radius in from each edge, against 0.293 for an
+ * arc. Kept at 0.29 of the box, that corner would stand 0.046 of the box in,
+ * half the design's depth and a nearly square badge. At half the box it stands
+ * 0.0795 of the box in, against the design's 0.0849 (0.13px at 24px), with the
+ * continuous curvature a squircle is for. So the corner is the circle token
+ * there, and the fallback above is what every other browser draws.
+ */
+.crewlet-avatar--agent {
+  border-radius: calc(var(--crewlet-avatar-size) * 0.29);
+  font-family: var(--font-family-mono);
+}
+
+@supports (corner-shape: squircle) {
+  .crewlet-avatar--agent {
+    corner-shape: squircle;
+    border-radius: var(--radius-circle);
+  }
+}
+
+/* A PERSON IS A CIRCLE, set in the sans face, the round badge every member list
+   a reader has used already speaks. */
+.crewlet-avatar--human {
+  border-radius: var(--radius-circle);
+  font-family: var(--font-family-sans);
+}
+
+.crewlet-avatar--image {
+  display: block;
+  object-fit: cover;
+}
+
+/* ── tones ─────────────────────────────────────────────────────────────── */
+
+.crewlet-avatar--fallback {
+  border: 1px solid transparent;
+}
+
+/* The design's badge: the raised rung with the strong hairline round it and
+   the secondary ink, so a badge on a card reads as a mark standing on it
+   rather than as a hole in it. */
+.crewlet-avatar--neutral {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-avatar--seeded {
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-avatar--tint-0 { background: var(--color-avatar-tint-0); }
+.crewlet-avatar--tint-1 { background: var(--color-avatar-tint-1); }
+.crewlet-avatar--tint-2 { background: var(--color-avatar-tint-2); }
+.crewlet-avatar--tint-3 { background: var(--color-avatar-tint-3); }
+.crewlet-avatar--tint-4 { background: var(--color-avatar-tint-4); }
+.crewlet-avatar--tint-5 { background: var(--color-avatar-tint-5); }
+.crewlet-avatar--tint-6 { background: var(--color-avatar-tint-6); }
+.crewlet-avatar--tint-7 { background: var(--color-avatar-tint-7); }
+.crewlet-avatar--tint-8 { background: var(--color-avatar-tint-8); }
+.crewlet-avatar--tint-9 { background: var(--color-avatar-tint-9); }
+
+/* ── an agent's character ─────────────────────────────────────────────── */
+
+/*
+ * THE CHARACTER FILLS MOST OF THE PLATE, centred by its own frame (it frames
+ * every silhouette square on what it draws), with the plate's corner clear of
+ * it: a wide character such as the original Crewlet reaches the plate's
+ * sides, a tall one its top and its foot, and none touches the curve.
+ */
+.crewlet-avatar--character {
+  border: 1px solid transparent;
+}
+
+.crewlet-avatar__character {
+  display: block;
+  flex: none;
+  width: 74%;
+  height: 74%;
+}
+
+/* The plate an agent's hue is drawn on: the hue's fill, its line round the
+   badge and the hue itself as the character's ink. */
+.crewlet-avatar--hue-purple {
+  background: var(--color-node-purple-fill);
+  border-color: var(--color-node-purple-line);
+  color: var(--color-node-purple);
+}
+
+.crewlet-avatar--hue-cyan {
+  background: var(--color-node-cyan-fill);
+  border-color: var(--color-node-cyan-line);
+  color: var(--color-node-cyan);
+}
+
+.crewlet-avatar--hue-green {
+  background: var(--color-node-green-fill);
+  border-color: var(--color-node-green-line);
+  color: var(--color-node-green);
+}
+
+.crewlet-avatar--hue-amber {
+  background: var(--color-node-amber-fill);
+  border-color: var(--color-node-amber-line);
+  color: var(--color-node-amber);
+}
+
+.crewlet-avatar--hue-rose {
+  background: var(--color-node-rose-fill);
+  border-color: var(--color-node-rose-line);
+  color: var(--color-node-rose);
+}
+
+.crewlet-avatar--hue-blue {
+  background: var(--color-node-blue-fill);
+  border-color: var(--color-node-blue-line);
+  color: var(--color-node-blue);
+}
+
+/* ── the selected ring ────────────────────────────────────────────────── */
+
+/*
+ * A 1.5px LINE 2px OUTSIDE THE BADGE, which is the design's ring: it draws a
+ * 3.5px shadow over a 2px one in the card's colour, and 3.5 less 2 is 1.5.
+ * Longhands, so nothing else that sets an outline resets the ring's geometry.
+ *
+ * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
+ * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
+ * design's gap is the card's own fill and cuts a card-coloured band into any
+ * other ground. An outline follows the corner, the squircle's included, in
+ * every engine this package supports. And forced-colors mode keeps an outline
+ * and drops every shadow, so the ring is still drawn for the readers who most
+ * need a boundary.
+ *
+ * SELECTED, in the accent, which is what the accent means: where the reader
+ * is. It is the only place a badge spends the accent, and the accent is
+ * measured at 3:1 as a mark on every opaque surface by @crewlethq/tokens.
+ */
+.crewlet-avatar--ring-brand {
+  outline-style: solid;
+  outline-width: 1.5px;
+  outline-offset: 2px;
+  outline-color: var(--color-brand-accent);
+}
+
+/* ── the status badge ─────────────────────────────────────────────────── */
+
+/*
+ * THE FRAME is the face's own box, so a badge with a status takes exactly the
+ * room one without takes: the corner badge hangs past it rather than growing
+ * it, and a row lays out the same either way. The badge is 0.42 of the box,
+ * never under 10px, which is the size its glyph stays a shape at.
+ */
+.crewlet-avatar-frame {
+  --crewlet-avatar-status-size: max(10px, calc(var(--crewlet-avatar-size) * 0.42));
+  --crewlet-avatar-status-overhang: 2px;
+  --crewlet-avatar-status-gap: 1.5px;
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: var(--crewlet-avatar-size);
+  height: var(--crewlet-avatar-size);
+  vertical-align: middle;
+}
+
+/*
+ * THE NOTCH: the face is masked by a circle a gap wider than the badge, centred
+ * where the badge sits, so the gap shows whatever the badge stands on. A ring
+ * of the ground's colour would need to know that ground, and a badge on a card,
+ * a hovered row and the page would each need a different one. A mask reads only
+ * alpha, so its black is opacity rather than a colour.
+ */
+.crewlet-avatar--notched {
+  --crewlet-avatar-status-centre: calc(
+    100% + var(--crewlet-avatar-status-overhang) - var(--crewlet-avatar-status-size) / 2
+  );
+  --crewlet-avatar-status-cut: calc(var(--crewlet-avatar-status-size) / 2 + var(--crewlet-avatar-status-gap));
+  -webkit-mask-image: radial-gradient(
+    circle at var(--crewlet-avatar-status-centre) var(--crewlet-avatar-status-centre),
+    transparent var(--crewlet-avatar-status-cut),
+    #000 calc(var(--crewlet-avatar-status-cut) + 0.5px)
+  );
+  mask-image: radial-gradient(
+    circle at var(--crewlet-avatar-status-centre) var(--crewlet-avatar-status-centre),
+    transparent var(--crewlet-avatar-status-cut),
+    #000 calc(var(--crewlet-avatar-status-cut) + 0.5px)
+  );
+}
+
+/*
+ * THE BADGE: a state's fill step carrying its glyph in the inverse ink, which
+ * the tokens' palette suite holds at 3:1 on each fill (`MARK_ON_FILL`). The
+ * transparent outline is drawn only in forced-colors mode, where the fill
+ * becomes the page's own colour and the outline is what keeps a boundary.
+ */
+.crewlet-avatar__status {
+  position: absolute;
+  right: calc(var(--crewlet-avatar-status-overhang) * -1);
+  bottom: calc(var(--crewlet-avatar-status-overhang) * -1);
+  display: grid;
+  place-items: center;
+  width: var(--crewlet-avatar-status-size);
+  height: var(--crewlet-avatar-status-size);
+  border-radius: var(--radius-circle);
+  outline: 1px solid transparent;
+  color: var(--color-text-inverse);
+  pointer-events: none;
+}
+
+.crewlet-avatar__status > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.crewlet-avatar__status--working {
+  background: var(--color-feedback-info);
+}
+
+.crewlet-avatar__status--needs {
+  background: var(--color-feedback-warning);
+}
+
+.crewlet-avatar__status--stopped {
+  background: var(--color-feedback-danger);
+}

package/dist/CharacterPicker/CharacterPicker.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react';
+import { type CrewletCharacterId } from '@crewlethq/icons/characters';
+import type { NodeHue } from '../utils/nodeHue.js';
+/**
+ * How many characters a row of the grid holds. Thirty characters make five
+ * full rows, and a grid that wraps by width would leave the arrow keys
+ * guessing which option sits above which.
+ */
+export declare const CHARACTER_PICKER_COLUMNS = 6;
+export interface CharacterPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** The group's name, said on entering it: "Character". */
+    label: string;
+    /** The chosen character. */
+    value: CrewletCharacterId;
+    onValueChange: (character: CrewletCharacterId) => void;
+    /** The hue every option is shown in, so the grid previews the agent it will be. */
+    hue?: NodeHue | undefined;
+    /** The characters offered, in order. Every character, by default. */
+    characters?: readonly CrewletCharacterId[] | undefined;
+    /** Nothing can be chosen, and the grid says so. */
+    disabled?: boolean | undefined;
+}
+/**
+ * The choice of an agent's Crewlet character: a grid of the characters, each
+ * drawn as the badge it would make, in the agent's own hue.
+ *
+ * A RADIO GROUP, because a character is a setting and exactly one is chosen:
+ * the grid is one tab stop, the arrows move through it and choose as they
+ * move, as the platform's own radio group does. Left and Right walk the
+ * options in reading order and Up and Down move a whole row, because the
+ * options are laid out in rows and an arrow that ignored that would move
+ * somewhere the reader is not looking.
+ *
+ * THE CHOSEN OPTION IS SAID THE WAY THE KIT SAYS SELECTED, with the badge's
+ * own `brand` ring, rather than a frame the grid draws round a tile: one
+ * badge, one line round it, and the line means "this one".
+ */
+export declare function CharacterPicker({ label, value, onValueChange, hue, characters, disabled, className, ...rest }: CharacterPickerProps): import("react").JSX.Element;

package/dist/CharacterPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './CharacterPicker.css';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './CharacterPicker.js';
+export type { CharacterPickerProps } from './CharacterPicker.js';

package/dist/CharacterPicker/index.js

@@ -0,0 +1,4 @@
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-UO5UK7V2.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-HI6Q2UXQ.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CharacterPicker-ZEYIKUNQ.css

@@ -0,0 +1,42 @@
+/*
+ * The grid of characters.
+ *
+ * SIX COLUMNS, ALWAYS, and the tiles share the width: the arrow keys move a
+ * whole row on Up and Down, so a row has to hold the same options at every
+ * width (`CHARACTER_PICKER_COLUMNS`). A tile is a target the size of the
+ * badge it holds and the gap round it, never smaller than the kit's control
+ * floor.
+ */
+
+.crewlet-character-picker {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--spacing-1);
+  justify-items: center;
+}
+
+.crewlet-character-picker__option {
+  display: grid;
+  place-items: center;
+  min-width: var(--size-control-lg);
+  min-height: var(--size-control-lg);
+  padding: var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  cursor: pointer;
+}
+
+.crewlet-character-picker__option:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-character-picker__option:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-character-picker__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-BXPLX7YU.js';
+export { CommandPalette } from '../chunk-IGWPZZIB.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-BTHX2FS3.js';
 import '../chunk-6MU7HNB4.js';
 import '../chunk-ZGX2DP7F.js';
+import '../chunk-BTHX2FS3.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-KTIEJ5Q5.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BTHX2FS3.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5VNUYO76.js';
 import '../chunk-YCTMKKRA.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';