@crewlethq/ui 0.4.4 → 0.5.0

package/dist/Accordion/index.js

@@ -1,5 +1,5 @@
-export { Accordion, AccordionItem } from '../chunk-7FZ53WDJ.js';
-import '../chunk-5KPQ6D7N.js';
+export { Accordion, AccordionItem } from '../chunk-RIAZM6L3.js';
+import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';

package/dist/AddPill/index.js

@@ -1,3 +1,3 @@
-export { ADD_PILL_MS, AddPill } from '../chunk-S4GZWSKR.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-OM5E3TTK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AddPill-DFWXYLIQ.css → AddPill-IJQYCY6C.css}

@@ -402,6 +402,15 @@
      `currentcolor` under that root then resolves to THAT: the fill was
      overridden and landed on the same purple it started from. */
   color: inherit;
+}
+
+/* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
+   inside of a Lucide glyph turns every closed shape in it solid and every
+   open one into a smear, so a `.crewlet-glyph` keeps the fill its own frame
+   decides and takes the ink through its stroke, which is `currentColor`. */
+.crewlet-add-pill__section svg:not(.crewlet-glyph),
+.crewlet-add-pill__section svg:not(.crewlet-glyph) g,
+.crewlet-add-pill__section svg:not(.crewlet-glyph) path {
   fill: currentcolor;
 }
 

package/dist/AppShell/AppShell.d.ts

@@ -1,5 +1,6 @@
 /**
- * The application frame: a rail, a top bar, and ONE scroll container.
+ * The application frame: a rail on the frame, and beside it a floating sheet
+ * holding a top bar and ONE scroll container.
  *
  * WHY THE SHELL OWNS THE GRID NOW. It used to be passive: the slots positioned
  * themselves with `position: fixed` and the shell only reserved a matching
@@ -9,6 +10,14 @@
  * grid is sized from `--size-shell-rail` and `--size-shell-topbar` here, and
  * the slots simply fill their cells.
  *
+ * THE SCREEN FLOATS ON A SHEET. The rail stands on the frame, the lowest rung,
+ * and everything the reader reads (the bar, a banner, the screen, a footer) is
+ * one sheet a rung above it, held off the frame's edges by `--size-shell-inset`
+ * and rounded at `--radius-sheet`. It is one element rather than a background
+ * the bar and the scroller each paint, because the corner has to clip both and
+ * the hairline has to run round both: two surfaces that each drew half of it
+ * would meet in a seam under the bar.
+ *
  * THE DOCUMENT DOES NOT SCROLL. `100dvh` with `overflow: hidden` on the root,
  * and one scroller inside it, which is what lets a router restore a scroll
  * position per history entry: a page with three independent scrollers has
@@ -21,7 +30,8 @@
  * and `main` is a focusable target for the skip link that precedes everything.
  *
  * NARROW IS A DIFFERENT SHAPE, NOT A SMALLER ONE. Below the shell breakpoint
- * the rail is a modal drawer on the shared layer stack: it takes Escape, traps
+ * the sheet is the whole window, its inset, corner and hairline collapsed to
+ * nothing, and the rail is a modal drawer on the shared layer stack: it takes Escape, traps
  * Tab, hands focus back to the toggle, and closes on a navigation and when the
  * layout it belongs to ends. Hidden rather than merely moved off screen, too,
  * because a rail translated out of view keeps every link in the tab order and
@@ -64,7 +74,7 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      * while the screen scrolls under it.
      */
     banner?: ReactNode;
-    /** A strip under the screen, in the content column and outside `main`. */
+    /** A strip under the screen, on the sheet and outside `main`. */
     footer?: ReactNode;
     /** The id of the `main` element, which the skip link points at. */
     mainId?: string | undefined;
@@ -117,8 +127,19 @@ interface RailRowContent {
      * vertical line as every nav glyph above it.
      */
     icon?: ReactNode;
-    /** A value at the end of the row: a count, a tag, a time. */
+    /**
+     * A value at the end of the row: a count, a tag, a time. It stands beside
+     * the words while both fit on the rail, and drops under them when they do
+     * not, so it never takes the room the words need.
+     */
     trailing?: ReactNode;
+    /**
+     * A second line under the row's words: "3 nodes · config epoch 42" under
+     * "Engine healthy". Given one, the row is the design's STATUS BLOCK, drawn
+     * on the card rung inside a hairline, its words in the primary ink over this
+     * line in the quiet one.
+     */
+    detail?: ReactNode;
     className?: string | undefined;
     /** What the row says. */
     children?: ReactNode;
@@ -163,7 +184,7 @@ export type AppShellRailRowProps = StaticRailRowProps | ActionRailRowProps;
  * toolbar's inset. This is still the one to reach for, because it is also the
  * thing that decides whether the row is a control at all.
  */
-export declare function AppShellRailRow({ icon, trailing, onClick, label, className, children }: AppShellRailRowProps): import("react").JSX.Element;
+export declare function AppShellRailRow({ icon, trailing, detail, onClick, label, className, children }: AppShellRailRowProps): import("react").JSX.Element;
 export interface AppShellToggleProps {
     className?: string | undefined;
 }

package/dist/AppShell/index.js

@@ -1,6 +1,6 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-MNAXYY3R.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-WUVZDFHS.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AppShell-NVE6LHNI.css → AppShell-XARELGIH.css}

@@ -1,14 +1,26 @@
 /*
- * The application frame.
+ * The application frame: a rail on the FRAME, and the screen on a SHEET that
+ * floats beside it.
  *
  * The rail's width and the bar's height are read from the token layer through
  * two component variables, so an application with a narrower rail sets ONE
  * value rather than repeating a number in its own stylesheet, which is what
  * every consumer of the passive shell had to do.
  *
+ * THE SHEET IS INSET FROM THE FRAME, rounded, and drawn round with the plain
+ * hairline, which is the approved design's frame: the rail stands on the
+ * lowest rung and the screen a rung above it, so where the navigation ends
+ * and the page begins is a difference of ground, a line and a corner rather
+ * than a divider the rail draws. The inset is --size-shell-inset on the
+ * sheet's top, right and bottom; the rail is the gap on its left. The sheet clips what it holds to its corner, and the ONE scroller is
+ * inside it, so a screen scrolls under the bar and never past the corner.
+ *
  * The breakpoint is written out because a media query cannot read a custom
  * property. It is the shell step from @crewlethq/tokens, and the CSS check
- * compares the literal against the token.
+ * compares the literal against the token. The query is STRICTLY UNDER it,
+ * (width < 1024px): the step is the rail, the inset and the sheet's floor
+ * added up, so at exactly that width the rail still fits, and the component's
+ * own matchMedia asks the same question.
  */
 
 .crewlet-app-shell {
@@ -20,15 +32,34 @@
   --crewlet-app-shell-drawer-z: var(--z-index-overlay);
   display: grid;
   grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr);
+  /* One row, the viewport's height less nothing: the sheet's own margin is
+     what holds it off the frame's edges, and a row sized by its content would
+     let a tall screen push the sheet's bottom edge off the window. */
+  grid-template-rows: minmax(0, 1fr);
   /* THE DOCUMENT DOES NOT SCROLL: exactly the viewport, and nothing may grow
      past it. A page that can also scroll as a whole carries the rail off the
      top of the window. */
   height: 100dvh;
   overflow: hidden;
-  background: var(--color-surface-background);
+  /* The FRAME, the lowest rung: what the rail stands on and what shows round
+     the sheet's inset. */
+  background: var(--color-surface-frame);
   color: var(--color-text-primary);
 }
 
+/*
+ * A shell with no rail is one column, and the sheet is inset on its left as
+ * well, from the frame's edge rather than from a rail. The inset is
+ * the ROOT's padding rather than a second margin rule on the sheet, so the
+ * narrow block below takes it back with a rule of the same weight declared
+ * after this one; a margin here would have needed two classes, and would have
+ * beaten the narrow block's one.
+ */
+.crewlet-app-shell--no-rail {
+  grid-template-columns: minmax(0, 1fr);
+  padding-left: var(--size-shell-inset);
+}
+
 /* The skip link, drawn only while it holds focus, over everything. */
 .crewlet-app-shell__skip {
   position: fixed;
@@ -53,13 +84,22 @@
   outline-offset: 2px;
 }
 
+/*
+ * The rail stands on the FRAME, the application ground, and the screen beside
+ * it on the sheet: the two lowest rungs, which are what separate the chrome a
+ * reader navigates with from the page they are reading.
+ *
+ * AND IT DRAWS NO EDGE OF ITS OWN in the wide layout. It carried a right
+ * border when the screen beside it was flush against it; the sheet draws its
+ * own hairline now, an inset away, and a second line at the rail's edge would
+ * run the height of the window parallel to it, eight pixels off.
+ */
 .crewlet-app-shell__rail {
   display: flex;
   flex-direction: column;
   min-height: 0;
   min-width: 0;
-  background: var(--color-surface-topbar);
-  border-right: 1px solid var(--color-border-default);
+  background: var(--color-surface-frame);
 }
 
 .crewlet-app-shell__rail-inner {
@@ -70,8 +110,13 @@
 }
 
 /*
- * The head sits at the top bar's own height, so the first nav row starts level
- * with the top of the screen beside it.
+ * The head stands BESIDE the top bar: the inset the sheet is held off the
+ * frame by, then the bar's own height, so what the head holds (the lockup) is
+ * centred on the same line as the screen's title in the bar beside it, and the
+ * first nav row starts level with the top of the screen under the bar. The
+ * box is sized as a border box whatever the document says, because the height
+ * is written as the inset plus the bar and the padding is the inset: counted
+ * outside the height, the head would stand an inset taller than the bar.
  *
  * AND IT DRAWS NO LINE OF ITS OWN. It carried a bottom border, which put a
  * divider across the rail at the same height as the bar's, and the two read as
@@ -84,7 +129,9 @@
   display: flex;
   align-items: center;
   flex: none;
-  min-height: var(--crewlet-app-shell-topbar);
+  box-sizing: border-box;
+  min-height: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
+  padding-top: var(--size-shell-inset);
 }
 
 .crewlet-app-shell__rail-body {
@@ -118,7 +165,7 @@
  * AND SO DOES WHATEVER ELSE LANDS THERE. `AppShell.RailRow` is the row this
  * package draws, but the slot takes a control from anywhere and an application
  * that already has a status button reaches for that one: the engine drops a
- * tertiary Button into the foot, which arrived centred in a 263px rail on a
+ * ghost Button into the foot, which arrived centred in a 263px rail on a
  * toolbar's inset. The foot claims a direct child instead, which is the same
  * move the nav's badge slot makes on whatever a caller puts in it, and there
  * is no second idea of what a row in this rail is.
@@ -171,17 +218,17 @@
   color: var(--color-text-primary);
 }
 
-/* A row in the foot fills the rail, so its label takes whatever the glyph and
-   the trailing slot leave it and truncates rather than pushing them off the
-   end: a status line says what a node is doing, and what it says is as long as
-   the sentence the application wrote. */
+/* A row in the foot fills the rail, so its label takes whatever the glyph
+   leaves it and WRAPS rather than ending in an ellipsis: a status line says
+   what a node is doing, and what it says is as long as the sentence the
+   application wrote. Cut, it kept the half that said nothing ("engine
+   conn…"). */
 .crewlet-app-shell__rail-foot > .crewlet-btn > .crewlet-btn__label {
   display: block;
   flex: 1 1 auto;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 /*
@@ -202,27 +249,102 @@
   flex: none;
 }
 
-.crewlet-app-shell__rail-row-label {
+/*
+ * THE WORDS AND THE TRAILING VALUE SHARE ONE WRAPPING LINE, and the words are
+ * never cut.
+ *
+ * The words take their own width up to the whole line (`flex-basis: auto`
+ * with `max-width: 100%`), so the line breaks BEFORE the value exactly when
+ * the words and the value together are wider than the rail: the value stands
+ * at the end of the words' line while both fit, and at the start of a line
+ * of its own under them when they do not. The words grow into what is left
+ * on their line, which is what puts a value that fits at the row's end
+ * without a margin that would also push a wrapped one to the far side. And
+ * words wider than the rail wrap, at any character if they must, rather than
+ * end in an ellipsis: they are the part of the row that was the point.
+ */
+.crewlet-app-shell__rail-row-body {
+  display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-/* Pushed to the end of the row whatever the label's length. */
+.crewlet-app-shell__rail-row-text {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.crewlet-app-shell__rail-row-label,
+.crewlet-app-shell__rail-row-detail {
+  overflow-wrap: anywhere;
+}
+
 .crewlet-app-shell__rail-row-trailing {
   display: inline-flex;
   align-items: center;
   flex: none;
-  margin-left: auto;
 }
 
-.crewlet-app-shell__column {
+/*
+ * THE STATUS BLOCK: a row given a `detail` is the approved design's engine
+ * status, its words over a second line, on the card rung inside the plain
+ * hairline, so the one row in the foot that reports on the fleet stands off
+ * the rows that only go somewhere. The words step up to the primary ink at the
+ * medium weight, since they are the state, and the detail keeps the row's
+ * quiet ink a step smaller. Both are set on the snug leading, where the
+ * design's two lines sit as one block rather than as two rows.
+ *
+ * It keeps the row's own inline pad and its transparent-border arithmetic, so
+ * its mark still lands on the line every nav glyph above it sits on; the block
+ * inset grows by a pixel for the second line, the design's 10px around the
+ * words with the border counted in.
+ */
+.crewlet-app-shell__rail-row--block {
+  padding-block: calc(var(--spacing-2) + 1px);
+  border-color: var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-app-shell__rail-row--block .crewlet-app-shell__rail-row-label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-app-shell__rail-row-detail {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+}
+
+/*
+ * THE SHEET: the bar, a banner, the one scroller and a footer, floated on the
+ * frame. It stands on --color-surface-background, the sheet rung, inside the
+ * plain hairline and at the sheet's own corner, a step rounder than every
+ * card drawn inside it. It clips to that corner, which is what lets the bar
+ * and the scroller run square to its edges and still be rounded by it.
+ *
+ * Physical margins, as every other edge in this file is physical: the drawer
+ * slides in from the left and the rail's column is the grid's first, so the
+ * shell is drawn left to right throughout, and one logical margin in it would
+ * be a promise about a direction nothing else here keeps.
+ */
+.crewlet-app-shell__sheet {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
+  margin: var(--size-shell-inset) var(--size-shell-inset) var(--size-shell-inset) 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sheet);
+  background: var(--color-surface-background);
+  overflow: hidden;
 }
 
 .crewlet-app-shell__topbar {
@@ -233,7 +355,7 @@
   height: var(--crewlet-app-shell-topbar);
   padding: 0 var(--spacing-4);
   border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-surface-topbar);
+  background: var(--color-surface-background);
 }
 
 .crewlet-app-shell__title {
@@ -339,17 +461,48 @@
   background: var(--color-surface-scrim);
 }
 
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-app-shell {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .crewlet-app-shell--no-rail {
+    padding-left: 0;
+  }
+
+  /*
+   * FULL BLEED. Under the step the rail is not beside the sheet, so there is
+   * nothing for the sheet to be held off: the inset, the corner and the
+   * hairline all collapse to nothing, and the sheet is the window. A corner
+   * kept here would round the screen into the viewport's own corners, and a
+   * hairline would draw a line round the window's edge.
+   */
+  .crewlet-app-shell__sheet {
+    margin: 0;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* Beside a full-bleed sheet the bar starts at the window's top, and so does
+     the drawer's head. */
+  .crewlet-app-shell__rail-head {
+    min-height: var(--crewlet-app-shell-topbar);
+    padding-top: 0;
+  }
+
+  /*
+   * The drawer draws the edge the wide rail does not: it slides over the
+   * screen rather than standing beside a sheet that draws its own, and in
+   * light the frame and the sheet it covers are close enough that the shadow
+   * alone does not say where the drawer ends.
+   */
   .crewlet-app-shell__rail {
     position: fixed;
     inset: 0 auto 0 0;
     width: var(--crewlet-app-shell-rail);
     max-width: 100%;
     transform: translateX(-100%);
+    border-right: 1px solid var(--color-border-default);
     box-shadow: var(--shadow-xl);
     /*
      * HIDDEN, not only moved. A rail translated off screen keeps every link

package/dist/Avatar/Avatar.d.ts

@@ -1,38 +1,50 @@
 import type { HTMLAttributes } from 'react';
+import type { Tone } from '../utils/tone.js';
 /**
- * Round, or a rounded square.
+ * WHAT THE BADGE STANDS FOR, drawn as its outline.
  *
- * `square` IS THE DEFAULT. The engine's identity mark is a rounded square, and
- * it is what a reader sees in every seat chip, every list row and every header
- * on that product; a design system with two identity marks has two looks.
- * `circle` stays for a PERSON in a member list, where the round badge is the
- * platform convention that surface already speaks.
+ * `agent` is the default: a SQUIRCLE with the initials in the mono face, which
+ * is what the engine runs and what nearly every badge on that product is.
+ * `human` is a CIRCLE with the initials in the sans face: a person.
+ *
+ * ONE STRUCTURAL CUE, where there used to be two. The badge took a `shape`
+ * (square or circle) and a `variant` (solid, or `dashed` for a human seat), and
+ * the two could disagree: a dashed square and a solid circle were both
+ * reachable and meant nothing. The approved design draws a person as a circle
+ * and an agent as a squircle, and that outline is the whole of the difference,
+ * so it is the one prop. It is a SHAPE rather than a hue, which leaves every
+ * hue meaning only a state, and it reads to somebody who cannot separate hues
+ * at all.
  */
-export type AvatarShape = 'circle' | 'square';
+export type AvatarKind = 'agent' | 'human';
 /**
  * How much colour a badge spends on WHO something is.
  *
- * `neutral` is the default, and the change from 0.2.0. A hash of a name
- * carries no information: rename the seat and its colour changes, which is the
- * proof it never meant anything. Worse, the eight families a hash spreads over
- * are the same eight the product spends on states and phases, so one amber
- * meant "the execute phase", "needs a person" and "the Analyst" at once.
- * Identity is the monogram and the name beside it.
+ * `neutral` is the default. 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, the monogram and the name beside it.
+ *
+ * `seeded` is for a roster where a stable per-identity tint genuinely helps a
+ * reader scan, a member list being the case it was built for. Each seeded
+ * ground is a token measured at 4.5:1 under white initials.
  *
- * `brand` is for the one badge that is the reader themselves, and `seeded` for
- * a roster where a stable per-identity tint genuinely helps a reader scan, a
- * member list being the case it was built for. Each seeded ground is a token
- * measured at 4.5:1 under white initials.
+ * THERE IS NO `brand` TONE ANY MORE. The accent means "here", "the primary
+ * action" and "focus"; a badge filled with it was identity drawn in the
+ * reader's-position colour. A badge that is SELECTED says so with
+ * `ring="brand"`, which is the design's own selected badge.
  */
-export type AvatarTone = 'neutral' | 'brand' | 'seeded';
+export type AvatarTone = 'neutral' | 'seeded';
 /**
- * Filled, or drawn.
+ * The STATE ring: a 1.5px line 2px outside the badge, in one of the state
+ * fills or the accent.
  *
- * `dashed` is a HUMAN seat: the engine does not run it. That is a structural
- * fact rather than a status, so it is carried by the edge rather than by a
- * hue, which is what leaves the status hues meaning only what they mean.
+ * `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.
  */
-export type AvatarVariant = 'solid' | 'dashed';
+export type AvatarRing = Exclude<Tone, 'neutral'>;
 /** The four steps, in px. A number is accepted for anything outside them. */
 export declare const AVATAR_SIZES: {
     readonly xs: 20;
@@ -42,6 +54,21 @@ export declare const AVATAR_SIZES: {
 };
 export type AvatarSizeStep = keyof typeof AVATAR_SIZES;
 export type AvatarSize = AvatarSizeStep | number;
+/**
+ * An agent's corner, as a share of its box.
+ *
+ * The approved design draws 7px at 24 and 9px at 30 (and 5 at 18, 6 at 20, 8
+ * at 26 and 28, 13 at 44): a corner that moves WITH the box rather than
+ * sitting on one radius step, which would read as a pill at the smallest badge
+ * and as a plain box at the largest. 0.29 is that ladder as one number, and
+ * every size the design draws lands within 0.62px of it.
+ *
+ * THE STYLESHEET COMPUTES IT, from `--crewlet-avatar-size`, for a step and for
+ * a numeric size alike, so there is one ladder and nothing to keep in step
+ * with it. The number is restated in `Avatar.css`, which cannot import it, and
+ * the suite holds the two equal.
+ */
+export declare const AVATAR_CORNER_RATIO = 0.29;
 export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     /** Image source. With one set the badge renders the image; otherwise the initials. */
     src?: string | undefined;
@@ -49,9 +76,11 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     name?: string | undefined;
     /** A step, or a number of px. */
     size?: AvatarSize | undefined;
-    shape?: AvatarShape | undefined;
+    /** An agent (the default) is a squircle; a human is a circle. */
+    kind?: AvatarKind | undefined;
     tone?: AvatarTone | undefined;
-    variant?: AvatarVariant | undefined;
+    /** A state ring, or none. `brand` is selected. */
+    ring?: AvatarRing | 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".
@@ -64,12 +93,26 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     colorSeed?: string | undefined;
 }
 /**
- * Up to two uppercase initials.
+ * Two uppercase initials, or one where the name has only one letter to give.
  *
  * SPLIT ON WHITESPACE, HYPHEN, UNDERSCORE AND DOT, because half the names this
  * draws are handles rather than names: `backend-engineer` gives BE,
  * `sre_lead` gives SL and `carlos.diaz` gives CD, where splitting on spaces
  * alone gives B, S and C and a roster of identical badges.
+ *
+ * A SINGLE WORD STILL GIVES TWO LETTERS, because the seats an org chart names
+ * in one word are the ones it draws most (CEO, SWE, PM, DevRel), and a badge
+ * of one letter each made the CEO and the CTO the same `C`. The word is read
+ * in two ways, in order:
+ *
+ * 1. Where its case says it is two words run together (a lower-case letter
+ *    followed by a capital, as in `DevRel` or `McCall`), the first letter of
+ *    each of the first two: DR, MC.
+ * 2. Otherwise its first two characters: `CEO` gives CE, `SWE` SW, `PM` PM
+ *    and `Acme` AC. An acronym is not split at its capitals, since every
+ *    letter of it is one and the first two are its start.
+ *
+ * A one-character word is its one character.
  */
 export declare const getInitials: (name?: string) => string;
 /**
@@ -80,25 +123,27 @@ export declare const avatarTint: (seed: string) => number;
 /** The px a size prop means. */
 export declare function avatarPixels(size: AvatarSize): number;
 /**
- * The corner a square badge of this many pixels takes.
+ * The corner an agent's badge of this many pixels is drawn with, in px, where
+ * the browser draws a circular corner (`Avatar.css` has the squircle).
  *
- * THE CORNER MOVES WITH THE BOX, which is the rule the steps are drawn to:
- * 4px at 20, 8px at 26 and 32, 12px at 40. A numeric size has to obey the same
- * rule or it contradicts it, and it did: every arbitrary box took the middle
- * step, so `size={80}` rendered an 8px corner where `size="lg"` at half the
- * width renders 12px, a bigger badge drawn squarer than a smaller one. The
- * bands are the steps' own midpoints, so a number lands on the corner of the
- * step nearest it and the ladder is one ladder rather than two.
+ * The same arithmetic the stylesheet does, for a caller that has to round
+ * something ELSE to match a badge: `ImageUpload`'s trigger and overlay sit
+ * over the picture, and a corner of their own would show the badge's corners
+ * through them at every size but one.
  *
- * The values are spelled in full rather than composed from the step name: the
- * package's variable check reads `var(--radius-${name})` as a reference to a
- * token called `--radius-`, which nothing emits.
+ * NOT ROUNDED, because the stylesheet cannot round: a whole-pixel corner there
+ * would take `round()` with a literal length, which the package's literal
+ * check refuses in a radius, and a rounded number here would then disagree
+ * with the badge under it by up to half a pixel. A fractional corner is
+ * anti-aliased like any other curve.
  */
-export declare function avatarSquareCorner(pixels: number): string;
+export declare function avatarCorner(pixels: number): number;
 /**
  * An identity badge: 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.
+ * 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.
  */
-export declare const Avatar: ({ src, name, size, shape, tone, variant, decorative, colorSeed, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;
+export declare const Avatar: ({ src, name, size, kind, tone, ring, decorative, colorSeed, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;