@crewlethq/ui 0.81.2 → 0.83.0

package/dist/ArtifactBar/index.js

@@ -1,21 +1,23 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-EAIOXW2W.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-BXGBGYKH.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-I33UIUZD.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.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-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.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-QM3432PH.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-YQ7Q52XU.js';
 import '../chunk-DOY3KC6I.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-BN5FEJL5.js';
+import '../chunk-KXWJJWBD.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-JLOESTT2.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';

package/dist/{Avatar-VJSJGFRG.css → Avatar-MNE3WBZO.css}

@@ -6,9 +6,10 @@
  * same eight families it also spent on phases and event categories, so one
  * amber meant "the execute phase", "the decision category" and "the Analyst"
  * at once. A hash of a name carries no information: rename the seat and its
- * colour changes, which is the proof it never meant anything. Identity is the
- * OUTLINE (a squircle for an agent, a circle for a person), the monogram and
- * the name, and for an agent an operator gave one, its character and its hue.
+ * colour changes, which is the proof it never meant anything. Identity is
+ * what the face holds (a monogram set in the kind's face, a picture, or for an
+ * agent an operator gave one, its character and its hue) and the name beside
+ * it. Every face is ONE SHAPE, people and agents alike (see "the shape").
  *
  * 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
@@ -148,46 +149,40 @@
   font-size: var(--font-size-sm);
 }
 
-/* ── kinds ─────────────────────────────────────────────────────────────── */
+/* ── the shape ────────────────────────────────────────────────────────── */
 
 /*
- * AN AGENT IS A SQUIRCLE, set in the mono face: what the engine runs, named
- * the way a handle is written.
- *
- * THE CORNER MOVES WITH THE BOX, at 0.29 of it (`AVATAR_CORNER_RATIO` in the
- * component, which the suite holds equal to this number): the approved
- * design's 7px at 24 and 9px at 30, as one proportion. It is computed here from
- * the size property every step and every numeric size sets, so there is ONE
- * ladder. There used to be two, a step table here and a numeric table in the
- * component, and they disagreed: `size={80}` drew a squarer badge than
- * `size="lg"` at half its width.
+ * ONE FACE SHAPE FOR PEOPLE AND AGENTS: a square with rounded corners, the
+ * corner two ninths of the side (8px on a 36px face), never under the xs
+ * radius on the smallest faces and never over the lg radius on the largest.
+ * A person was a circle and an agent a squircle, so a row of people and
+ * agents changed shape from face to face, and a list of members read as two
+ * lists. One shape lines every face up on the same square and lets what the
+ * face holds say who it is: a character on its hue, a picture, or initials
+ * set in the kind's own face (below).
  *
- * WHERE THE BROWSER DRAWS A SQUIRCLE, IT IS A WHOLE ONE. `corner-shape:
- * squircle` is a superellipse of exponent 4, which at a given radius reaches
- * much closer to the box's corner than a circular arc does: at the 45 degree
- * point it stands 0.159 of the radius in from each edge, against 0.293 for an
- * arc. Kept at 0.29 of the box, that corner would stand 0.046 of the box in,
- * half the design's depth and a nearly square badge. At half the box it stands
- * 0.0795 of the box in, against the design's 0.0849 (0.13px at 24px), with the
- * continuous curvature a squircle is for. So the corner is the circle token
- * there, and the fallback above is what every other browser draws.
+ * THE CORNER MOVES WITH THE BOX, computed here from the size property every
+ * step and every numeric size sets, so there is ONE ladder: `AVATAR_CORNER`
+ * in the component states the same ratio and clamp for a caller that has to
+ * round something else to match a face (ImageUpload, PresenceStack), and the
+ * suite holds the two equal. No step rule sets a corner.
  */
-.crewlet-avatar--agent {
-  border-radius: calc(var(--crewlet-avatar-size) * 0.29);
-  font-family: var(--font-family-mono);
+.crewlet-avatar {
+  border-radius: clamp(var(--radius-xs), calc(var(--crewlet-avatar-size) * 2 / 9), var(--radius-lg));
 }
 
-@supports (corner-shape: squircle) {
-  .crewlet-avatar--agent {
-    corner-shape: squircle;
-    border-radius: var(--radius-circle);
-  }
+/* ── kinds ─────────────────────────────────────────────────────────────── */
+
+/*
+ * The kind is said by the monogram's face: an agent's initials are set in the
+ * mono face, the way a handle is written, and a person's in the sans face. A
+ * character or a picture says it on its own.
+ */
+.crewlet-avatar--agent {
+  font-family: var(--font-family-mono);
 }
 
-/* A PERSON IS A CIRCLE, set in the sans face, the round badge every member list
-   a reader has used already speaks. */
 .crewlet-avatar--human {
-  border-radius: var(--radius-circle);
   font-family: var(--font-family-sans);
 }
 
@@ -217,16 +212,22 @@
 
 /* ── tones ─────────────────────────────────────────────────────────────── */
 
+/*
+ * A FACE'S OWN OUTLINE IS THE HAIRLINE (`--color-edge-hairline`), whatever it
+ * holds: the neutral badge, a seeded tint, a character's plate. A row of faces
+ * then reads as faces rather than as a row of framed boxes, where the strong
+ * hairline and a hue's line drew each face as a tile. A reader who asked for
+ * more contrast gets the control edge here, as the edge scale promises.
+ */
 .crewlet-avatar--fallback {
-  border: 1px solid transparent;
+  border: 1px solid var(--color-edge-hairline);
 }
 
-/* The design's badge: the raised rung with the strong hairline round it and
-   the secondary ink, so a badge on a card reads as a mark standing on it
-   rather than as a hole in it. */
+/* The design's badge: the raised rung inside the face's hairline and the
+   secondary ink, so a badge on a card reads as a mark standing on it rather
+   than as a hole in it. */
 .crewlet-avatar--neutral {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-strong);
   color: var(--color-text-secondary);
 }
 
@@ -254,7 +255,7 @@
  * plate's sides, a tall one its top and its foot, and none touches the curve.
  */
 .crewlet-avatar--character {
-  border: 1px solid transparent;
+  border: 1px solid var(--color-edge-hairline);
 }
 
 .crewlet-avatar__character {
@@ -264,50 +265,44 @@
   height: 74%;
 }
 
-/* The plate an agent's hue is drawn on: the hue's fill, its line round the
-   badge and the hue itself as the character's ink. The fill is published as
+/* The plate an agent's hue is drawn on: the hue's fill inside the face's
+   hairline, and the hue itself as the character's ink. The fill is published as
    `--crewlet-avatar-plate` and painted from it, because it is a TINT (12% of
    the hue over whatever the badge stands on), and a stack has to lay it over
    its own ground rather than over the badge behind it (AvatarStack.css). */
 .crewlet-avatar--hue-purple {
   --crewlet-avatar-plate: var(--color-node-purple-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-purple-line);
   color: var(--color-node-purple);
 }
 
 .crewlet-avatar--hue-cyan {
   --crewlet-avatar-plate: var(--color-node-cyan-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-cyan-line);
   color: var(--color-node-cyan);
 }
 
 .crewlet-avatar--hue-green {
   --crewlet-avatar-plate: var(--color-node-green-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-green-line);
   color: var(--color-node-green);
 }
 
 .crewlet-avatar--hue-amber {
   --crewlet-avatar-plate: var(--color-node-amber-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-amber-line);
   color: var(--color-node-amber);
 }
 
 .crewlet-avatar--hue-rose {
   --crewlet-avatar-plate: var(--color-node-rose-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-rose-line);
   color: var(--color-node-rose);
 }
 
 .crewlet-avatar--hue-blue {
   --crewlet-avatar-plate: var(--color-node-blue-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-blue-line);
   color: var(--color-node-blue);
 }
 
@@ -321,7 +316,7 @@
  * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
  * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
  * design's gap is the card's own fill and cuts a card-coloured band into any
- * other ground. An outline follows the corner, the squircle's included, in
+ * other ground. An outline follows the corner, the face's clamp 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.
@@ -342,13 +337,20 @@
 /*
  * 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.
+ * it, and a row lays out the same either way.
+ *
+ * THE BADGE WHERE A READER LOOKS FOR PRESENCE: under a third of the face (0.3
+ * of the box), hanging a twentieth of the box past its bottom-right corner,
+ * with the notch (a gap of the ground round it) kept. At 36px that is an 11px
+ * badge set 2px past the corner, the size and place of a presence dot, where
+ * a badge at 0.42 of the box read as a second face. It never drops under
+ * 10px, where its glyph stops being a shape, and always hangs at least a
+ * pixel past the corner.
  */
 .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;
+  --crewlet-avatar-status-size: max(10px, calc(var(--crewlet-avatar-size) * 0.3));
+  --crewlet-avatar-status-overhang: max(1px, calc(var(--crewlet-avatar-size) * 0.05));
+  --crewlet-avatar-status-gap: 2px;
   position: relative;
   display: inline-flex;
   flex: none;

package/dist/AvatarPicker/index.js

@@ -1,21 +1,22 @@
-export { AvatarPicker } from '../chunk-LOWQK2PB.js';
-import '../chunk-HEA6TERQ.js';
-import '../chunk-KHJIEPZV.js';
+export { AvatarPicker } from '../chunk-22CU7V4J.js';
+import '../chunk-SHH7UD5U.js';
+import '../chunk-EC6EUIAD.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-I22MUEG7.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-LNQSNXGJ.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.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/{AvatarStack-7I3P7LCK.css → AvatarStack-KEHD3GWY.css}

@@ -6,7 +6,8 @@
  * badges standing in front of each other rather than as one blot. The ring is
  * a SHADOW rather than a border, because it has to fall outside the badge
  * without moving it, and it is decoration: forced-colors mode drops it and the
- * badges' own hairlines still separate them.
+ * badges' own borders, which that mode paints in the system ink, still
+ * separate them.
  *
  * THE GROUND IS A VARIABLE because a stack stands on whatever it is put on,
  * and a cut-out in the sheet's colour on a card is a band of the wrong grey
@@ -36,6 +37,17 @@
   box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
 }
 
+/*
+ * THE RING IS THE ONLY EDGE A STACKED FACE NEEDS. A face's own hairline inside
+ * the ring drew each face as a framed tile, two edges a pixel apart, so a
+ * stacked face (a member, or the face a member wraps) draws its border in no
+ * colour. The border keeps its width, so the face keeps its box.
+ */
+.crewlet-avatar-stack > .crewlet-avatar-stack__member.crewlet-avatar,
+.crewlet-avatar-stack > .crewlet-avatar-stack__member > .crewlet-avatar {
+  border-color: transparent;
+}
+
 /*
  * A BADGE IN FRONT HIDES THE ONE BEHIND IT. A hue's plate is a tint, 12% of
  * the hue over whatever the badge stands on, and in a stack that is partly
@@ -63,9 +75,9 @@
 }
 
 /*
- * THE COUNT OF THE REST. A PILL, where every badge is a squircle or a circle:
- * it is a number rather than somebody, and drawn in either kind's outline it
- * would read as one more agent or one more person. Otherwise it is the neutral
+ * THE COUNT OF THE REST. A PILL, where every face is a rounded square: it is
+ * a number rather than somebody, and drawn in a face's outline it would read
+ * as one more agent or one more person. Otherwise it is the neutral
  * badge exactly (the raised rung, the strong hairline, the secondary ink), in
  * the sans face with tabular figures so "+9" and "+12" sit alike.
  */

package/dist/BrandLockup/BrandLockup.d.ts

@@ -6,6 +6,8 @@ export interface BrandLinkProps {
     /** Present only when `href` was given; a router link takes its own target. */
     href?: string | undefined;
     'aria-label': string;
+    /** The name as the pointer's title, where the rail is compact and draws the mark alone. */
+    title?: string | undefined;
 }
 export interface BrandLockupProps {
     /** The product's name, and the name of the link. Required, for that reason. */
@@ -37,5 +39,9 @@ export interface BrandLockupProps {
  *
  * The mark is hidden from assistive technology: a logo beside its own name is
  * the definition of decoration.
+ *
+ * IN A COMPACT RAIL THE MARK STANDS ALONE (the shell's stylesheet stops
+ * drawing the name), so the link takes the name as its title too: the
+ * pointer is told what the mark is, and the link is still named by it.
  */
 export declare function BrandLockup({ name, mark, context, href, renderLink, className }: BrandLockupProps): import("react").JSX.Element;

package/dist/BrandLockup/index.js

@@ -1,2 +1,3 @@
-export { BrandLockup } from '../chunk-7KBNFFM3.js';
+export { BrandLockup } from '../chunk-KXWJJWBD.js';
+import '../chunk-JLOESTT2.js';
 import '../chunk-ODEQTPFM.js';