@crewlethq/ui 0.9.0 → 0.11.0

package/README.md

@@ -42,7 +42,7 @@ 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`, `CharacterPicker`, `HuePicker` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList` |
 | 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` |
@@ -191,6 +191,37 @@ 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.11.0
+
+0.11.0 adds the parts a dense editing form is built from.
+
+**`FactList`** draws facts a form shows and does not edit as 32px rows in one bordered box: the label on the left, the value on the right. A row with a `reason` carries a lock and says why in a tooltip on hover and to a screen reader after its value, in place of a caption under every value.
+
+**`AvatarPicker`** is an agent's badge that opens its own picker. Pressing it opens the characters and the hues in a popover, and each choice applies as it is made; a `disabled` one is the badge alone. It replaces a `CharacterPicker` and a `HuePicker` drawn open in a form.
+
+**`Tabs` take a `marker`** per item: `{ tone: 'danger', count, label }` for problems, or `{ tone: 'warning' | 'changed', label }` for a 6px dot. One per tab, the most urgent, and it stands in for the item's `count` while set; `label` is what a screen reader hears. `TabsMarker` is its type.
+
+**`FormField` takes `helperOnFocus`**: the helper is still in `aria-describedby`, and is drawn only while the field has focus, so a form whose every field carries a sentence reads as labels and values at rest. `ListInput` passes the same prop to its field.
+
+`@crewlethq/icons` adds `LockGlyph` (Lucide's `lock`), which `FactList` draws.
+
+What to change: nothing. Every addition is new.
+
+## 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.

package/dist/Accordion/index.js

@@ -1,6 +1,6 @@
-export { Accordion, AccordionItem } from '../chunk-RIAZM6L3.js';
-import '../chunk-FZVJDJFN.js';
-import '../chunk-BHHIIK3M.js';
+export { Accordion, AccordionItem } from '../chunk-G2AVKPSL.js';
+import '../chunk-ENJUPIND.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,6 +1,6 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-OVLJEVQS.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-7LD6P32I.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Avatar/Avatar.d.ts

@@ -1,7 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { type CrewletCharacterId } from '@crewlethq/icons/characters';
 import type { NodeHue } from '../utils/nodeHue.js';
-import type { Tone } from '../utils/tone.js';
 /**
  * WHAT THE BADGE STANDS FOR, drawn as its outline.
  *
@@ -37,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 = '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 AvatarRing = Exclude<Tone, 'neutral'>;
+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;
@@ -81,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".
@@ -164,7 +189,13 @@ export declare function avatarCorner(pixels: number): number;
  *
  * 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, character, hue, 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,7 +1,7 @@
 import type { HTMLAttributes } from 'react';
 import type { CrewletCharacterId } from '@crewlethq/icons/characters';
 import type { NodeHue } from '../utils/nodeHue.js';
-import { type AvatarKind, type AvatarRing, type AvatarSizeStep } from './Avatar.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. */
@@ -9,8 +9,6 @@ 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. */

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, 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,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-OAH4IEQJ.js';
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from '../chunk-UDW3DAP5.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-JAU77SHZ.css → Avatar-QHYOFID3.css}

@@ -10,8 +10,10 @@
  * 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.
  *
- * THE ONE HUE A BADGE CARRIES AS A LINE IS A STATE, as a ring round it, and the
- * ring is the component's only coloured line outside its own plate.
+ * 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
@@ -211,11 +213,12 @@
   color: var(--color-node-blue);
 }
 
-/* ── the state ring ────────────────────────────────────────────────────── */
+/* ── 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
@@ -223,42 +226,97 @@
  * 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; it is drawn in the system colour there, which is why the
- * state is always said in words beside the badge as well.
+ * need a boundary.
  *
- * LONGHANDS, so the tone rules below set the colour alone and cannot reset the
- * geometry, whichever order they are read in. Each fill is measured at 3:1 as
- * a mark on every opaque surface by @crewlethq/tokens, which is the floor a
- * boundary a reader has to see is held to.
+ * 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-info,
-.crewlet-avatar--ring-warning,
-.crewlet-avatar--ring-danger,
-.crewlet-avatar--ring-success,
 .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;
 }
 
-.crewlet-avatar--ring-info {
-  outline-color: var(--color-feedback-info);
+/*
+ * 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--ring-warning {
-  outline-color: var(--color-feedback-warning);
+.crewlet-avatar__status > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.crewlet-avatar--ring-danger {
-  outline-color: var(--color-feedback-danger);
+.crewlet-avatar__status--working {
+  background: var(--color-feedback-info);
 }
 
-.crewlet-avatar--ring-success {
-  outline-color: var(--color-feedback-success);
+.crewlet-avatar__status--needs {
+  background: var(--color-feedback-warning);
 }
 
-/* SELECTED, in the accent, which is what the accent means: where the reader
-   is. It is the only place a badge spends the accent. */
-.crewlet-avatar--ring-brand {
-  outline-color: var(--color-brand-accent);
+.crewlet-avatar__status--stopped {
+  background: var(--color-feedback-danger);
 }

package/dist/AvatarPicker/AvatarPicker.d.ts

@@ -0,0 +1,32 @@
+import { type CrewletCharacterId } from '@crewlethq/icons/characters';
+import { type AvatarSize } from '../Avatar/Avatar.js';
+import { type NodeHue } from '../utils/nodeHue.js';
+/** An agent's look: its character and the hue it is drawn in. */
+export interface AvatarPickerValue {
+    character: CrewletCharacterId;
+    hue: NodeHue;
+}
+export interface AvatarPickerProps {
+    value: AvatarPickerValue;
+    onChange: (next: AvatarPickerValue) => void;
+    /** The agent's name, for the button's accessible name. */
+    name: string;
+    /** The badge's size. 40px, the size a form's header draws an identity at. */
+    size?: AvatarSize | undefined;
+    /** The characters offered, in order. Every character, by default. */
+    characters?: readonly CrewletCharacterId[] | undefined;
+    /** The badge is drawn, and nothing opens. */
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * An agent's badge that opens its own picker: press it and the characters and
+ * the hues open in a popover beside it.
+ *
+ * THE BADGE IS THE CONTROL. The two pickers drawn open in a form took about
+ * 330px for a choice made once, so the form keeps one badge, marked with a
+ * pencil pip as the thing that changes it, and the grid opens on demand. A
+ * choice applies as it is made, as the pickers' own radios do; Escape or a
+ * press outside closes the popover.
+ */
+export declare function AvatarPicker({ value, onChange, name, size, characters, disabled, className, }: AvatarPickerProps): import("react").JSX.Element;

package/dist/AvatarPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './AvatarPicker.css';
+export { AvatarPicker } from './AvatarPicker.js';
+export type { AvatarPickerProps, AvatarPickerValue } from './AvatarPicker.js';

package/dist/AvatarPicker/index.js

@@ -0,0 +1,14 @@
+export { AvatarPicker } from '../chunk-HV6IZFBK.js';
+import '../chunk-K5Q2DK3P.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
+import '../chunk-PDUZO35I.js';
+import '../chunk-YXMCUKFI.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker-PREY36MG.css

@@ -0,0 +1,54 @@
+/*
+ * The badge as a button, with a pencil pip on its corner saying it changes
+ * the badge. No chrome of its own beyond the focus ring: the badge is the
+ * control's face.
+ */
+.crewlet-avatar-picker {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: none;
+  cursor: pointer;
+}
+
+button.crewlet-avatar-picker:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-avatar-picker__pip {
+  position: absolute;
+  right: calc(var(--spacing-1) * -1);
+  bottom: calc(var(--spacing-1) * -1);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+}
+
+button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
+  color: var(--color-text-primary);
+}
+
+.crewlet-avatar-picker__body {
+  display: grid;
+  gap: var(--spacing-2);
+  width: max-content;
+  max-width: 100%;
+  padding: var(--spacing-3);
+}
+
+.crewlet-avatar-picker__label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-VE6LD3KM.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-2PZBIHRV.js';
 import '../chunk-53DVJCVW.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Card/index.js

@@ -1,6 +1,6 @@
-export { Card } from '../chunk-CEOXFO3E.js';
+export { Card } from '../chunk-EG6NYWVK.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CharacterPicker/index.js

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

package/dist/CodeBlock/index.js

@@ -1,7 +1,7 @@
-export { CodeBlock } from '../chunk-MORLKUGM.js';
-import '../chunk-26SCUACK.js';
+export { CodeBlock } from '../chunk-KGTQ5CVD.js';
+import '../chunk-YACKC3K2.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,8 +1,8 @@
-export { Combobox } from '../chunk-UYK72NOS.js';
+export { Combobox } from '../chunk-ELZKOVEC.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.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-IGWPZZIB.js';
+export { CommandPalette } from '../chunk-6SDGRKQ7.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-BTHX2FS3.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-TEEJSTFG.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Copyable/index.js

@@ -1,6 +1,6 @@
-export { CopyButton, Copyable } from '../chunk-26SCUACK.js';
+export { CopyButton, Copyable } from '../chunk-YACKC3K2.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
-import '../chunk-LSB3EHBW.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-R4ZJB5YX.js';
+import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-BTHX2FS3.js';
+import '../chunk-TEEJSTFG.js';
+import '../chunk-5VNUYO76.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-5VNUYO76.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,25 +1,25 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-EUT7VBQG.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CIOKUMVC.js';
 import '../chunk-PGRPNDWM.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-HOXGBLEY.js';
+import '../chunk-JCNUQ3US.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-CVB7O3SZ.js';
-import '../chunk-LSB3EHBW.js';
+import '../chunk-R4ZJB5YX.js';
+import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-BTHX2FS3.js';
-import '../chunk-5I56UXBJ.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-TEEJSTFG.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-5VNUYO76.js';
-import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PDUZO35I.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-5I56UXBJ.js';
-import '../chunk-PDUZO35I.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JCNUQ3US.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PDUZO35I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Disclosure/index.js

@@ -1,6 +1,6 @@
-export { Disclosure } from '../chunk-MICH6QSJ.js';
-export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
-import '../chunk-BHHIIK3M.js';
+export { Disclosure } from '../chunk-S4RCG44T.js';
+export { DisclosureAnatomy } from '../chunk-ENJUPIND.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/EntityChip/index.js

@@ -1,4 +1,4 @@
-export { EntityChip } from '../chunk-Y2V3TSQC.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { EntityChip } from '../chunk-DDTDN5L2.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';