@crewlethq/ui 0.81.1 → 0.82.0

package/dist/AppShell/railShape.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Which shape the shell's rail is drawn in, for the pieces that stand in it
+ * and are also used outside a shell: the brand lockup and the account row.
+ *
+ * A CONTEXT OF ITS OWN, AND ONE THAT NEVER THROWS, because those pieces are
+ * drawn on screens with no shell at all (a sign-in page draws the lockup), and
+ * there the answer is simply the full shape. `useAppShell().rail` is the same
+ * answer for code that is always inside a shell.
+ */
+/**
+ * The rail's two shapes: `full`, the navigation's rows under their headings,
+ * and `compact`, the same places folded to a column of glyphs (`CompactNav`).
+ */
+export type AppShellRailShape = 'full' | 'compact';
+export declare const RailShapeContext: import("react").Context<AppShellRailShape>;
+/** The shape the rail around this component is drawn in now: `full` outside a shell, and in the drawer. */
+export declare function useRailShape(): AppShellRailShape;

package/dist/{AppShell-2IBUS4TH.css → AppShell-F7RID4P4.css}

@@ -133,6 +133,10 @@
  * run the height of the window parallel to it, eight pixels off.
  */
 .crewlet-app-shell__rail {
+  /* The fold control's containing block. Re-declared as `fixed` by the
+     narrow block below, which comes later at the same weight, so the drawer
+     keeps its layer. */
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -718,6 +722,24 @@
   height: 100%;
 }
 
+/*
+ * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
+ * its pad, its measure and its gap, and the scroller reserves no gutter, since
+ * nothing in it scrolls and a strip at its end would cut the screen's own
+ * edge. The column is the containing block for a `LayerHost` the screen
+ * keeps, so its layers fill the screen rather than the window.
+ */
+.crewlet-app-shell--fill-flush .crewlet-app-shell__main {
+  scrollbar-gutter: auto;
+}
+
+.crewlet-app-shell--fill-flush .crewlet-app-shell__content {
+  position: relative;
+  gap: 0;
+  max-width: none;
+  padding: 0;
+}
+
 /* Hidden by default, revealed by the breakpoint below: the wide layout has the
    rail on screen already, so the control that opens it has nothing to do. */
 .crewlet-app-shell__toggle {
@@ -867,6 +889,107 @@
   animation: crewlet-app-shell-aside-slide var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/*
+ * THE COMPACT RAIL: the same track, narrowed to the compact column. One
+ * variable is the rail's width for the grid, the aside's cap and the drawer
+ * alike, so folding the rail is this one declaration. The shell writes the
+ * attribute only where the layout is wide: the drawer under the step is
+ * always the full list.
+ */
+.crewlet-app-shell[data-rail='compact'] {
+  --crewlet-app-shell-rail: var(--size-shell-rail-compact);
+}
+
+/*
+ * THE FOLD CONTROL stands over the compact column's centre, in the row under
+ * the head, in both shapes, so it never moves under the pointer that pressed
+ * it. Quiet until the rail is pointed at: the tertiary ink, which holds 3:1
+ * on the frame, then the secondary, and the ghost's own primary under the
+ * pointer.
+ */
+.crewlet-app-shell__fold {
+  position: absolute;
+  top: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
+  left: calc((var(--size-shell-rail-compact) - var(--size-control-sm)) / 2);
+  z-index: 1;
+  display: inline-flex;
+}
+
+.crewlet-app-shell__fold > .crewlet-icon-btn {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-app-shell__rail:hover > .crewlet-app-shell__fold > .crewlet-icon-btn:not(:hover) {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes: centred over
+ * the compact column, in the head. Full, the name follows it; compact, the
+ * name is not drawn (the link keeps it as its name and title).
+ */
+.crewlet-app-shell--foldable .crewlet-app-shell__rail-head > .crewlet-brand,
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-head > .crewlet-brand {
+  padding-left: calc((var(--size-shell-rail-compact) - var(--crewlet-brand-mark)) / 2);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-brand__name,
+.crewlet-app-shell[data-rail='compact'] .crewlet-brand__context {
+  display: none;
+}
+
+/*
+ * FULL, THE FIELD STARTS AFTER THE FOLD CONTROL, a step off it, on the row
+ * the control stands in. The field holds its place at the top of the rail's
+ * middle while the rows scroll under it, on the frame's own ground, so the
+ * control beside it is always beside it.
+ */
+/* The middle is a stacking context of its own, so the field pinned in it
+   stands over the rows scrolling under it and the whole middle stands under
+   the fold control, which is painted a step above the rail. */
+.crewlet-app-shell--foldable .crewlet-app-shell__rail-body {
+  isolation: isolate;
+}
+
+.crewlet-app-shell--foldable[data-rail='full'] .crewlet-app-shell__rail-search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-left: calc((var(--size-shell-rail-compact) + var(--size-control-sm)) / 2 + var(--spacing-2));
+  background: var(--color-surface-frame);
+}
+
+/* COMPACT, THE FOLD CONTROL HAS A ROW OF ITS OWN under the mark, which the
+   head leaves room for, and the column of tiles starts under it. */
+.crewlet-app-shell--foldable[data-rail='compact'] .crewlet-app-shell__rail-head {
+  margin-bottom: var(--size-control-sm);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
+  padding: var(--spacing-1) 0;
+  scrollbar-width: thin;
+}
+
+/*
+ * The compact foot: what the full foot holds, centred in the column, a step
+ * apart: the status's dot, a Settings tile, the reader's face.
+ */
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot {
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) 0 var(--spacing-3);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-compact-nav {
+  align-self: stretch;
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-status {
+  justify-content: center;
+  min-width: 0;
+  margin: 0;
+}
+
 @media (width < 1024px) {
   .crewlet-app-shell {
     --crewlet-app-shell-beside: 0px;
@@ -1176,6 +1299,33 @@ button.crewlet-account-row__who:focus-visible {
   gap: var(--spacing-1);
 }
 
+/*
+ * THE COMPACT ACCOUNT: the reader's face alone, centred in the compact rail's
+ * foot, the face's own corner carrying the lift, the hover and the ring. It
+ * keeps the row's link and menu rules above (hover, current, ring), with no
+ * pad of its own, so the box is the face.
+ */
+.crewlet-account-row--compact {
+  justify-content: center;
+  padding: 0;
+}
+
+.crewlet-account-row__who--compact,
+.crewlet-app-shell__rail-foot .crewlet-account-row__who--compact {
+  flex: none;
+  width: auto;
+  min-height: 0;
+  padding: calc(var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+}
+
+/* The ring stands off the face, outside it: drawn inside, it would cover the
+   face's own edge and status. */
+.crewlet-account-row__who.crewlet-account-row__who--compact:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-account-row__who {
     transition: none;

package/dist/ArrangeFrame/index.js

@@ -1,5 +1,5 @@
-export { ArrangeFrame, useGridResize } from '../chunk-PLNJEDGI.js';
-import '../chunk-2G355KDJ.js';
+export { ArrangeFrame, useGridResize } from '../chunk-I4IO56EY.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeGroup/index.js

@@ -1,4 +1,4 @@
-export { ArrangeGroup } from '../chunk-CYYBE2MM.js';
-import '../chunk-MLDTLZAO.js';
+export { ArrangeGroup } from '../chunk-7U6PK242.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,13 +1,13 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TKUAGWNR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-WT3B76MG.js';
 import '../chunk-3XDT5ZWL.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/index.js

@@ -1,21 +1,21 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-EAIOXW2W.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-XY4O2XMR.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-GZVAZ3LL.js';
+import '../chunk-HCUECVZ3.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-AVL52EME.js';
 import '../chunk-CYQBDZ6M.js';
+import '../chunk-AVL52EME.js';
 import '../chunk-RSKW25Y5.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-3QQIGMY3.js';
+import '../chunk-YOJAGKTS.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard/index.js

@@ -1,23 +1,23 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-ZKLEAK7M.js';
-import '../chunk-BRLZXYPA.js';
-import '../chunk-N2BF272H.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-2H6YDUR5.js';
+import '../chunk-I4IUX3JF.js';
+import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-4AUTALJA.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-NHLNHH4J.js';
-import '../chunk-LMQG3VPG.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-ZB3E2Z4Y.js';
 import '../chunk-DOY3KC6I.js';
+import '../chunk-YQ7Q52XU.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-R45VM5EX.js';
-import '../chunk-BXCL6P5Z.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-MMV7NEAC.js';
+import '../chunk-I4PBFJGX.js';
 import '../chunk-RSKW25Y5.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactKindIllustration/index.js

@@ -1,3 +1,3 @@
-export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-NHLNHH4J.js';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-ZB3E2Z4Y.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactKinds-3EH4KR3F.css

@@ -0,0 +1,18 @@
+/*
+ * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
+ * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps, the ink a
+ * glyph is drawn in, and the Ground steps a card drawn ON the kind's colour
+ * reads (its ground, the ground under the pointer, the ground at its foot
+ * and the glow behind its drawing; ActionCard). Every surface that tints by
+ * kind reads these, so a kind glyph in a bar, a card's badge and a Make row's tile repaint together with
+ * the theme, and no surface spells a kind's colour of its own. A sheet of
+ * its own, imported by each surface that tints, because the glyph's module
+ * carries no stylesheet (a frame that draws one glyph takes nothing else).
+ */
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); --crewlet-kind-ground: var(--color-artifact-kind-doc-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-doc-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-doc-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-doc-glow); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); --crewlet-kind-ground: var(--color-artifact-kind-slides-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-slides-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-slides-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-slides-glow); }
+.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); --crewlet-kind-ground: var(--color-artifact-kind-design-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-design-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-design-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-design-glow); }
+.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); --crewlet-kind-ground: var(--color-artifact-kind-dashboard-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-dashboard-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-dashboard-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-dashboard-glow); }
+.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); --crewlet-kind-ground: var(--color-artifact-kind-html-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-html-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-html-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-html-glow); }
+.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); --crewlet-kind-ground: var(--color-artifact-kind-brand-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-brand-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-brand-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-brand-glow); }
+.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); --crewlet-kind-ground: var(--color-artifact-kind-sheet-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-sheet-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-sheet-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-sheet-glow); }

package/dist/ArtifactMakeRow/index.js

@@ -1,4 +1,4 @@
-export { ArtifactMakeRow } from '../chunk-37U3Z65B.js';
+export { ArtifactMakeRow } from '../chunk-MVMVMHYI.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';

package/dist/ArtifactNameCell/index.js

@@ -1,4 +1,4 @@
-export { ArtifactNameCell } from '../chunk-4MRFLHJC.js';
+export { ArtifactNameCell } from '../chunk-C46DDVTK.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel/index.js

@@ -1,11 +1,11 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-FFGEJUAP.js';
-import '../chunk-CLJGFOTV.js';
-import '../chunk-PQADV6P6.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-5ILRWUE7.js';
+import '../chunk-SKGOKLJD.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AttachmentChip/index.js

@@ -1,5 +1,5 @@
-export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-2PIH6JHJ.js';
-import '../chunk-VERJCAJ4.js';
+export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-ZXTDWTXS.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/AuthLayout/index.js

@@ -1,8 +1,9 @@
-export { AuthLayout } from '../chunk-WKKWF277.js';
-import '../chunk-7KBNFFM3.js';
-import '../chunk-4AUTALJA.js';
+export { AuthLayout } from '../chunk-6IOQWMYJ.js';
+import '../chunk-GVPUCEWH.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-ISQANI6Q.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Avatar/Avatar.d.ts

@@ -2,20 +2,16 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import { type CrewletCharacterId } from '@crewlethq/icons/characters';
 import type { NodeHue } from '../utils/nodeHue.js';
 /**
- * WHAT THE BADGE STANDS FOR, drawn as its outline.
- *
- * `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.
+ * WHAT THE BADGE STANDS FOR: an agent (the default), what the engine runs, or a
+ * human, a person.
+ *
+ * ONE SHAPE FOR BOTH. Every face is the same rounded square, its corner two
+ * ninths of the side between the xs and lg radius steps (`AVATAR_CORNER`). A
+ * person was a circle and an agent a squircle, so a row of people and agents
+ * changed shape from face to face; with one shape the face's contents say who
+ * it is. An agent's initials are set in the mono face and a person's in the
+ * sans face, an agent may be drawn as its character, and the name is always
+ * beside the face or in its accessible name, so the kind never rests on a hue.
  */
 export type AvatarKind = 'agent' | 'human';
 /**
@@ -82,20 +78,27 @@ export type AvatarSizeStep = keyof typeof AVATAR_SIZES;
  */
 export type AvatarSize = AvatarSizeStep | number | 'text';
 /**
- * An agent's corner, as a share of its box.
+ * Every face's corner, as a share of its box, held between two radius steps.
  *
- * 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.
+ * Two ninths of the side (8px on a 36px face): a corner that moves WITH the
+ * box rather than sitting on one radius step, which would read as a pill at
+ * the smallest face and as a plain box at the largest. It never drops under
+ * the xs radius (4px), where a 20px face would read as square, and never
+ * passes the lg radius (12px), where a large profile face would read as a
+ * circle.
  *
  * 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.
+ * with it. The ratio is restated in `Avatar.css`, which cannot import it, and
+ * the suite holds the two equal; the two steps are read from the radius
+ * tokens here and there alike.
  */
-export declare const AVATAR_CORNER_RATIO = 0.29;
+export declare const AVATAR_CORNER_RATIO: number;
+/** The least and the most a face's corner is drawn with, in px: the xs and lg radius steps. */
+export declare const AVATAR_CORNER_RANGE: {
+    readonly min: number;
+    readonly max: number;
+};
 export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     /** Image source. With one set the badge renders the image; otherwise the initials. */
     src?: string | undefined;
@@ -103,7 +106,7 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     name?: string | undefined;
     /** A step, a number of px, or `text` to be sized by the words around it. */
     size?: AvatarSize | undefined;
-    /** An agent (the default) is a squircle; a human is a circle. */
+    /** An agent (the default, its initials in the mono face) or a human (in the sans face). Both are one rounded square. */
     kind?: AvatarKind | undefined;
     tone?: AvatarTone | undefined;
     /**
@@ -141,7 +144,7 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
     /**
      * The Crewlet character an AGENT is drawn as, in place of its initials and
      * of any image. A person is never drawn as one: on a `human` badge this is
-     * ignored, and the circle and the initials stay.
+     * ignored, and the initials stay.
      */
     character?: CrewletCharacterId | undefined;
     /**
@@ -164,7 +167,7 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
  * dropped (`Agent CEO` gives CEO, `agent-cto` gives cto), and every other
  * name as it is.
  *
- * THE SHAPE ALREADY SAYS "AGENT". A company that names its seats for what
+ * THE BADGE ALREADY SAYS "AGENT". A company that names its seats for what
  * they are ("Agent CEO", "Agent CTO", "Agent PM") otherwise got AC, AC and
  * AP: the two seats a chart draws most were the same badge side by side. The
  * badge's accessible name keeps the whole name. A name that is nothing but
@@ -211,8 +214,7 @@ export declare const avatarTint: (seed: string) => number;
 /** The px a size prop means. */
 export declare function avatarPixels(size: AvatarSize): number;
 /**
- * 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 a face of this many pixels is drawn with, in px.
  *
  * 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

package/dist/Avatar/AvatarStack.d.ts

@@ -6,7 +6,7 @@ import { type AvatarKind, type AvatarSizeStep } from './Avatar.js';
 export interface AvatarStackMember {
     /** Who: the initials, and a word of the stack's accessible name. */
     name: string;
-    /** An agent (the default) is a squircle; a human is a circle. */
+    /** An agent (the default) or a human; both are drawn as one rounded square. */
     kind?: AvatarKind | undefined;
     src?: string | undefined;
     /** The Crewlet character an agent member is drawn as, as `Avatar` draws it. */
@@ -60,7 +60,7 @@ export interface AvatarStackProps extends Omit<HTMLAttributes<HTMLSpanElement>,
  *
  * THE KINDS ARE COUNTED, NOT ASSUMED. A stack of watchers holds people and
  * agents together, and "3 agents: Jane Founder, CTO, SWE" would call a person
- * an agent to the one reader who cannot see the circle that says otherwise.
+ * an agent to the one reader who cannot read the face that says otherwise.
  */
 export declare function avatarStackLabel(members: readonly AvatarStackMember[]): string;
 /**

package/dist/Avatar/index.d.ts

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

package/dist/Avatar/index.js

@@ -1,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-BT3GB7HC.js';
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-KTIQSSME.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-IRONPJB4.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RANGE, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';