@crewlethq/ui 0.9.0 → 0.10.0

package/README.md

@@ -191,6 +191,21 @@ 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.

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/CharacterPicker/index.js

@@ -1,4 +1,4 @@
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-IKH3Y4MP.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-UO5UK7V2.js';
 import '../chunk-CBOICT64.js';
-import '../chunk-UDW3DAP5.js';
+import '../chunk-HI6Q2UXQ.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';

package/dist/ImageUpload/index.js

@@ -1,4 +1,4 @@
-export { ImageUpload } from '../chunk-E3HDS4F7.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { ImageUpload } from '../chunk-LAQK4V3Z.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
-export { OrgLabel } from '../chunk-J3IS2TOA.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { OrgLabel } from '../chunk-6OF2DBKY.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-K7OS4O2U.js';
-import '../chunk-J3IS2TOA.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IHGKPEEV.js';
+import '../chunk-6OF2DBKY.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-JB6AN4ZC.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-7FFDJQ23.js';
 import '../chunk-SX2DFTQV.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-J3IS2TOA.js';
+import '../chunk-6OF2DBKY.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-74WGARJE.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-OAH4IEQJ.js → chunk-3UK4VFSK.js}

@@ -1,6 +1,6 @@
-import { AVATAR_SIZES, Avatar } from './chunk-UDW3DAP5.js';
+import { AVATAR_SIZES, Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-JAU77SHZ.css';
+import './Avatar-QHYOFID3.css';
 import './AvatarStack-GEJBNV7E.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -48,7 +48,6 @@ function AvatarStack({
             name: member.name,
             kind: member.kind,
             src: member.src,
-            ring: member.ring,
             character: member.character,
             hue: member.hue,
             size,

package/dist/{chunk-J3IS2TOA.js → chunk-6OF2DBKY.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-UDW3DAP5.js';
+import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgLabel-6WSKJQOT.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-JB6AN4ZC.js → chunk-7FFDJQ23.js}

@@ -1,6 +1,6 @@
 import { TreeGrid } from './chunk-SX2DFTQV.js';
 import { createTreeModel, treeParent } from './chunk-S3BCVWTU.js';
-import { OrgLabel } from './chunk-J3IS2TOA.js';
+import { OrgLabel } from './chunk-6OF2DBKY.js';
 import { AddPill } from './chunk-74WGARJE.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-Y2V3TSQC.js → chunk-DDTDN5L2.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-UDW3DAP5.js';
+import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityChip-LUCPZBBG.css';
 import { Children, isValidElement, cloneElement } from 'react';

package/dist/chunk-HI6Q2UXQ.js

@@ -0,0 +1,169 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import { useState, useEffect } from 'react';
+import { CrewletCharacter } from '@crewlethq/icons/characters';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AVATAR_STATUSES = ["working", "needs", "stopped"];
+var AVATAR_STATUS_LABELS = {
+  working: "working",
+  needs: "needs you",
+  stopped: "stopped"
+};
+var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
+var AVATAR_CORNER_RATIO = 0.29;
+var AVATAR_CHARACTER_FULL_DETAIL = 56;
+var getInitials = (name) => {
+  if (!name) return "?";
+  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
+  if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";
+  const word = words[0];
+  const humps = word.split(/(?<=\p{Ll})(?=\p{Lu})/u);
+  if (humps.length >= 2) return humps.slice(0, 2).map(first).join("");
+  return Array.from(word).slice(0, 2).map((character) => character.toUpperCase()).join("") || "?";
+};
+var TINT_COUNT = 10;
+var avatarTint = (seed) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return hash % TINT_COUNT;
+};
+function avatarPixels(size) {
+  return typeof size === "number" ? size : AVATAR_SIZES[size];
+}
+function avatarCorner(pixels) {
+  return pixels * AVATAR_CORNER_RATIO;
+}
+var Avatar = ({
+  src,
+  name,
+  size = "md",
+  kind = "agent",
+  tone = "neutral",
+  ring,
+  status,
+  decorative = false,
+  colorSeed,
+  character,
+  hue,
+  className,
+  style,
+  ...rest
+}) => {
+  const [imageFailed, setImageFailed] = useState(false);
+  useEffect(() => {
+    setImageFailed(false);
+  }, [src]);
+  const step = typeof size === "number" ? null : size;
+  const pixels = avatarPixels(size);
+  const measured = step === null ? {
+    "--crewlet-avatar-size": `${pixels}px`,
+    fontSize: Math.max(9, Math.round(pixels * 0.36))
+  } : {};
+  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
+  const framed = status !== void 0;
+  const label = name ? `${name} avatar` : "Avatar";
+  const spoken = framed ? `${label}, ${AVATAR_STATUS_LABELS[status]}` : label;
+  const classes = cx(
+    "crewlet-avatar",
+    `crewlet-avatar--${kind}`,
+    step === null ? null : `crewlet-avatar--${step}`,
+    framed ? "crewlet-avatar--notched" : null,
+    ring === void 0 || framed ? null : `crewlet-avatar--ring-${ring}`,
+    framed ? null : className
+  );
+  const faceStyle = framed ? measured : { ...measured, ...style };
+  function drawFace() {
+    if (character !== void 0 && kind === "agent") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...rest,
+          className: cx(
+            classes,
+            "crewlet-avatar--character",
+            hue === void 0 ? "crewlet-avatar--neutral" : `crewlet-avatar--hue-${hue}`
+          ),
+          style: faceStyle,
+          role: decorative ? void 0 : "img",
+          "aria-hidden": decorative ? true : void 0,
+          "aria-label": decorative ? void 0 : spoken,
+          children: /* @__PURE__ */ jsx(
+            CrewletCharacter,
+            {
+              className: "crewlet-avatar__character",
+              character,
+              detail: pixels >= AVATAR_CHARACTER_FULL_DETAIL ? "full" : "compact"
+            }
+          )
+        }
+      );
+    }
+    if (src && !imageFailed) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          ...rest,
+          className: cx(classes, "crewlet-avatar--image"),
+          style: faceStyle,
+          src,
+          alt: decorative ? "" : framed ? `${name ?? ""}, ${AVATAR_STATUS_LABELS[status]}` : name ?? "",
+          "aria-hidden": decorative ? true : void 0,
+          onError: () => setImageFailed(true)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        className: cx(
+          classes,
+          "crewlet-avatar--fallback",
+          `crewlet-avatar--${tone}`,
+          seeded === null ? null : `crewlet-avatar--tint-${seeded}`
+        ),
+        style: faceStyle,
+        role: decorative ? void 0 : "img",
+        "aria-hidden": decorative ? true : void 0,
+        "aria-label": decorative ? void 0 : spoken,
+        children: getInitials(name)
+      }
+    );
+  }
+  const face = drawFace();
+  if (!framed) return face;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx("crewlet-avatar-frame", className),
+      style: { "--crewlet-avatar-size": `${pixels}px`, ...style },
+      children: [
+        face,
+        /* @__PURE__ */ jsx("span", { className: `crewlet-avatar__status crewlet-avatar__status--${status}`, "aria-hidden": "true", children: STATUS_GLYPHS[status] })
+      ]
+    }
+  );
+};
+var STATUS_GLYPHS = {
+  working: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M5.4 3.9 10.2 7l-4.8 3.1z", fill: "currentColor" }) }),
+  needs: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 14 14", focusable: "false", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.1 5.3a1.9 1.9 0 1 1 2.7 1.7c-.55.27-.8.62-.8 1.15v.3",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "10.45", r: ".85", fill: "currentColor" })
+  ] }),
+  stopped: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", focusable: "false", children: /* @__PURE__ */ jsx("rect", { x: "4.6", y: "4.6", width: "4.8", height: "4.8", rx: ".7", fill: "currentColor" }) })
+};
+
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials };

package/dist/{chunk-K7OS4O2U.js → chunk-IHGKPEEV.js}

@@ -1,4 +1,4 @@
-import { OrgLabel } from './chunk-J3IS2TOA.js';
+import { OrgLabel } from './chunk-6OF2DBKY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgNode-TCHJH5FO.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-E3HDS4F7.js → chunk-LAQK4V3Z.js}

@@ -1,4 +1,4 @@
-import { avatarCorner, Avatar } from './chunk-UDW3DAP5.js';
+import { avatarCorner, Avatar } from './chunk-HI6Q2UXQ.js';
 import './ImageUpload-L2GE4JUM.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-IKH3Y4MP.js → chunk-UO5UK7V2.js}

@@ -1,5 +1,5 @@
 import { useRoving, tabStop } from './chunk-CBOICT64.js';
-import { Avatar } from './chunk-UDW3DAP5.js';
+import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CharacterPicker-ZEYIKUNQ.css';
 import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';

package/dist/generated/index.js

@@ -26,11 +26,11 @@ export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { Select } from '../chunk-SEFMO2EV.js';
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-K7OS4O2U.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-JB6AN4ZC.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IHGKPEEV.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-7FFDJQ23.js';
 export { TreeGrid } from '../chunk-SX2DFTQV.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from '../chunk-S3BCVWTU.js';
-export { OrgLabel } from '../chunk-J3IS2TOA.js';
+export { OrgLabel } from '../chunk-6OF2DBKY.js';
 export { PricingCard } from '../chunk-UCYIRDND.js';
 export { Tag } from '../chunk-LOECRMHA.js';
 export { StatusDot } from '../chunk-WIATRXEJ.js';
@@ -45,13 +45,13 @@ export { HuePicker } from '../chunk-26TXVHN2.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { SegmentedControl } from '../chunk-LPHHDCN3.js';
 export { TabPanel, Tabs, tabId } from '../chunk-HEOVQZL7.js';
+export { ImageUpload } from '../chunk-LAQK4V3Z.js';
 export { InlineCode } from '../chunk-NN62JQLR.js';
-export { ImageUpload } from '../chunk-E3HDS4F7.js';
 export { DescriptionList, DescriptionListItem } from '../chunk-XN4JBAN3.js';
 export { DIFF_LIST_LABELS, DiffList } from '../chunk-LFHCXZO5.js';
 export { Disclosure } from '../chunk-MICH6QSJ.js';
 export { EmptyState } from '../chunk-RA2ULG6H.js';
-export { EntityChip } from '../chunk-Y2V3TSQC.js';
+export { EntityChip } from '../chunk-DDTDN5L2.js';
 export { ErrorBoundary } from '../chunk-XX2VQE55.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.js';
 export { Combobox } from '../chunk-UYK72NOS.js';
@@ -76,7 +76,7 @@ export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS
 import '../chunk-53DVJCVW.js';
 export { Card } from '../chunk-CEOXFO3E.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-IKH3Y4MP.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-UO5UK7V2.js';
 import '../chunk-CBOICT64.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-4WNNEDKO.js';
 export { Checkbox } from '../chunk-YCTMKKRA.js';
@@ -93,8 +93,8 @@ export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-7RPGY3JE.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 export { IconButton } from '../chunk-4FQT6ZAY.js';
-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';
 export { BrandLockup } from '../chunk-7KBNFFM3.js';
 export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
 export { VisuallyHidden } from '../chunk-BZFWDIV6.js';

package/dist/index.js

@@ -26,11 +26,11 @@ export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { Select } from './chunk-SEFMO2EV.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-K7OS4O2U.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-JB6AN4ZC.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-IHGKPEEV.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-7FFDJQ23.js';
 export { TreeGrid } from './chunk-SX2DFTQV.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-S3BCVWTU.js';
-export { OrgLabel } from './chunk-J3IS2TOA.js';
+export { OrgLabel } from './chunk-6OF2DBKY.js';
 export { PricingCard } from './chunk-UCYIRDND.js';
 export { Tag } from './chunk-LOECRMHA.js';
 export { StatusDot } from './chunk-WIATRXEJ.js';
@@ -45,13 +45,13 @@ export { HuePicker } from './chunk-26TXVHN2.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
 export { SegmentedControl } from './chunk-LPHHDCN3.js';
 export { TabPanel, Tabs, tabId } from './chunk-HEOVQZL7.js';
+export { ImageUpload } from './chunk-LAQK4V3Z.js';
 export { InlineCode } from './chunk-NN62JQLR.js';
-export { ImageUpload } from './chunk-E3HDS4F7.js';
 export { DescriptionList, DescriptionListItem } from './chunk-XN4JBAN3.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.js';
 export { Disclosure } from './chunk-MICH6QSJ.js';
 export { EmptyState } from './chunk-RA2ULG6H.js';
-export { EntityChip } from './chunk-Y2V3TSQC.js';
+export { EntityChip } from './chunk-DDTDN5L2.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
 export { Combobox } from './chunk-UYK72NOS.js';
@@ -76,7 +76,7 @@ export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS
 import './chunk-53DVJCVW.js';
 export { Card } from './chunk-CEOXFO3E.js';
 export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-IKH3Y4MP.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-UO5UK7V2.js';
 import './chunk-CBOICT64.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-4WNNEDKO.js';
 export { Checkbox } from './chunk-YCTMKKRA.js';
@@ -93,8 +93,8 @@ export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-7RPGY3JE.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';
 export { IconButton } from './chunk-4FQT6ZAY.js';
-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';
 export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
 export { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/styles.css

@@ -1088,7 +1088,7 @@
 }
 
 
-/* Avatar-JAU77SHZ.css */
+/* Avatar-QHYOFID3.css */
 /*
  * The identity badge.
  *
@@ -1101,8 +1101,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
@@ -1302,11 +1304,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
@@ -1314,44 +1317,99 @@
  * 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.
- *
- * 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.
- */
-.crewlet-avatar--ring-info,
-.crewlet-avatar--ring-warning,
-.crewlet-avatar--ring-danger,
-.crewlet-avatar--ring-success,
+ * 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);
 }
 
-.crewlet-avatar--ring-info {
-  outline-color: var(--color-feedback-info);
+/* ── 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-warning {
-  outline-color: var(--color-feedback-warning);
+/*
+ * 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)
+  );
 }
 
-.crewlet-avatar--ring-danger {
-  outline-color: var(--color-feedback-danger);
+/*
+ * 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--ring-success {
-  outline-color: var(--color-feedback-success);
+.crewlet-avatar__status--working {
+  background: var(--color-feedback-info);
 }
 
-/* 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--needs {
+  background: var(--color-feedback-warning);
+}
+
+.crewlet-avatar__status--stopped {
+  background: var(--color-feedback-danger);
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.9.0",
-    "@crewlethq/tokens": "0.9.0"
+    "@crewlethq/icons": "0.10.0",
+    "@crewlethq/tokens": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/chunk-UDW3DAP5.js

@@ -1,125 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import { useState, useEffect } from 'react';
-import { CrewletCharacter } from '@crewlethq/icons/characters';
-import { jsx } from 'react/jsx-runtime';
-
-var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
-var AVATAR_CORNER_RATIO = 0.29;
-var AVATAR_CHARACTER_FULL_DETAIL = 56;
-var getInitials = (name) => {
-  if (!name) return "?";
-  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
-  if (words.length === 0) return "?";
-  const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
-  if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";
-  const word = words[0];
-  const humps = word.split(/(?<=\p{Ll})(?=\p{Lu})/u);
-  if (humps.length >= 2) return humps.slice(0, 2).map(first).join("");
-  return Array.from(word).slice(0, 2).map((character) => character.toUpperCase()).join("") || "?";
-};
-var TINT_COUNT = 10;
-var avatarTint = (seed) => {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
-  }
-  return hash % TINT_COUNT;
-};
-function avatarPixels(size) {
-  return typeof size === "number" ? size : AVATAR_SIZES[size];
-}
-function avatarCorner(pixels) {
-  return pixels * AVATAR_CORNER_RATIO;
-}
-var Avatar = ({
-  src,
-  name,
-  size = "md",
-  kind = "agent",
-  tone = "neutral",
-  ring,
-  decorative = false,
-  colorSeed,
-  character,
-  hue,
-  className,
-  style,
-  ...rest
-}) => {
-  const [imageFailed, setImageFailed] = useState(false);
-  useEffect(() => {
-    setImageFailed(false);
-  }, [src]);
-  const step = typeof size === "number" ? null : size;
-  const pixels = avatarPixels(size);
-  const measured = step === null ? {
-    "--crewlet-avatar-size": `${pixels}px`,
-    fontSize: Math.max(9, Math.round(pixels * 0.36))
-  } : {};
-  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
-  const classes = cx(
-    "crewlet-avatar",
-    `crewlet-avatar--${kind}`,
-    step === null ? null : `crewlet-avatar--${step}`,
-    ring === void 0 ? null : `crewlet-avatar--ring-${ring}`,
-    className
-  );
-  if (character !== void 0 && kind === "agent") {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...rest,
-        className: cx(
-          classes,
-          "crewlet-avatar--character",
-          hue === void 0 ? "crewlet-avatar--neutral" : `crewlet-avatar--hue-${hue}`
-        ),
-        style: { ...measured, ...style },
-        role: decorative ? void 0 : "img",
-        "aria-hidden": decorative ? true : void 0,
-        "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
-        children: /* @__PURE__ */ jsx(
-          CrewletCharacter,
-          {
-            className: "crewlet-avatar__character",
-            character,
-            detail: pixels >= AVATAR_CHARACTER_FULL_DETAIL ? "full" : "compact"
-          }
-        )
-      }
-    );
-  }
-  if (src && !imageFailed) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        ...rest,
-        className: cx(classes, "crewlet-avatar--image"),
-        style: { ...measured, ...style },
-        src,
-        alt: decorative ? "" : name ?? "",
-        "aria-hidden": decorative ? true : void 0,
-        onError: () => setImageFailed(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...rest,
-      className: cx(
-        classes,
-        "crewlet-avatar--fallback",
-        `crewlet-avatar--${tone}`,
-        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
-      ),
-      style: { ...measured, ...style },
-      role: decorative ? void 0 : "img",
-      "aria-hidden": decorative ? true : void 0,
-      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
-      children: getInitials(name)
-    }
-  );
-};
-
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials };