@crewlethq/ui 0.17.1 → 0.19.0

package/dist/Modal/Modal.d.ts

@@ -85,6 +85,18 @@ export interface ModalProps extends FrameAttributes {
      * one glance keeps its actions in the foot, where the eye ends up.
      */
     headerActions?: ReactNode;
+    /**
+     * A step back, drawn first in the head, before the title.
+     *
+     * For a surface reached FROM another one that stays the reader's place: a
+     * widget's options opened from a library of widgets, a record opened from a
+     * list in the same sheet. The way back belongs where the reader looks to
+     * learn where they are, beside the title, and not in a foot they have to
+     * scroll to. Closing is still the close control; this only goes back.
+     */
+    onBack?: (() => void) | undefined;
+    /** The back control's name, saying where it goes: "Back to widgets". */
+    backLabel?: string | undefined;
     children?: ReactNode;
     size?: ModalSize | undefined;
     variant?: ModalVariant | undefined;
@@ -99,6 +111,14 @@ export interface ModalProps extends FrameAttributes {
     dismissable?: boolean | undefined;
     /** A veil-only switch: the surface still closes on Escape and on its close control. */
     closeOnBackdrop?: boolean | undefined;
+    /**
+     * What the page behind looks like. `veil` dims and softens it, which is what
+     * a surface asking for the reader's whole attention wants. `clear` leaves it
+     * as it is, for a sheet whose changes ARE the page behind it (a page's
+     * customize sheet): a preview under a veil is a preview nobody can read. The
+     * surface is still modal; only the paint changes.
+     */
+    backdrop?: 'veil' | 'clear' | undefined;
     showCloseButton?: boolean | undefined;
     /** Stacks the body's children in a column with a gap, which most forms want. */
     stackBody?: boolean | undefined;

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-DEEVA6TV.js';
+export { ConfirmModal, Modal } from '../chunk-7IJARUIF.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-RQAYGG4L.css → Modal-XOSV6FAH.css}

@@ -57,6 +57,12 @@
 }
 
 /* Inside a LayerHost the overlay covers the host, not the window. */
+/* The page behind stays as it is: see `backdrop` in Modal.tsx. */
+.crewlet-modal-overlay--clear {
+  background: transparent;
+  backdrop-filter: none;
+}
+
 .crewlet-modal-overlay--in-host {
   position: absolute;
 }
@@ -376,6 +382,14 @@
   margin: calc(var(--spacing-1) * -1);
 }
 
+/* The step back leads the head, its glyph on the title's inline start, as
+   the close control's sits on the head's end. */
+.crewlet-modal__back {
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  margin-block: calc(var(--spacing-1) * -1);
+}
+
 .crewlet-modal__body {
   flex: 1 1 auto;
   min-height: 0;

package/dist/Note/Note.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { SurfaceTone } from '../ArrangeGroup/index.js';
+export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
+    /** The paper it is written on: one of the six hues, or the page's own. */
+    tone?: SurfaceTone | undefined;
+    align?: 'start' | 'center' | undefined;
+    /** `lg` for a line meant to be read across the room: a goal, a rule. */
+    size?: 'md' | 'lg' | undefined;
+    children: ReactNode;
+}
+/**
+ * Words a reader leaves on their own page: a team's goal this week, how to
+ * read the cards below it, a link to the runbook. A dashboard's note.
+ *
+ * THE TONE IS THE PAPER, and the ink keeps its contrast on every one: each
+ * hue's fill with that hue's ink, which the palette gate measures as a pair.
+ * A note is never coloured to mean a state; the hues here are the reader's
+ * labels, the same six a group's band takes.
+ *
+ * IT SCROLLS rather than clipping when the reader makes it shorter than its
+ * words.
+ */
+export declare const Note: import("react").ForwardRefExoticComponent<NoteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Note/index.d.ts

@@ -0,0 +1,3 @@
+import './Note.css';
+export { Note } from './Note.js';
+export type { NoteProps } from './Note.js';

package/dist/Note/index.js

@@ -0,0 +1,2 @@
+export { Note } from '../chunk-63WJLRB2.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Note-RT4L6VUT.css

@@ -0,0 +1,58 @@
+/*
+ * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
+ */
+
+.crewlet-note {
+  --crewlet-note-paper: var(--color-surface-subtle);
+  --crewlet-note-edge: var(--color-border-default);
+  --crewlet-note-ink: var(--color-text-primary);
+
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  border: 1px solid var(--crewlet-note-edge);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-note-paper);
+  color: var(--crewlet-note-ink);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-note--purple { --crewlet-note-paper: var(--color-node-purple-fill); --crewlet-note-edge: var(--color-node-purple-line); --crewlet-note-ink: var(--color-node-purple-ink); }
+.crewlet-note--cyan { --crewlet-note-paper: var(--color-node-cyan-fill); --crewlet-note-edge: var(--color-node-cyan-line); --crewlet-note-ink: var(--color-node-cyan-ink); }
+.crewlet-note--green { --crewlet-note-paper: var(--color-node-green-fill); --crewlet-note-edge: var(--color-node-green-line); --crewlet-note-ink: var(--color-node-green-ink); }
+.crewlet-note--amber { --crewlet-note-paper: var(--color-node-amber-fill); --crewlet-note-edge: var(--color-node-amber-line); --crewlet-note-ink: var(--color-node-amber-ink); }
+.crewlet-note--rose { --crewlet-note-paper: var(--color-node-rose-fill); --crewlet-note-edge: var(--color-node-rose-line); --crewlet-note-ink: var(--color-node-rose-ink); }
+.crewlet-note--blue { --crewlet-note-paper: var(--color-node-blue-fill); --crewlet-note-edge: var(--color-node-blue-line); --crewlet-note-ink: var(--color-node-blue-ink); }
+
+.crewlet-note--center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.crewlet-note--lg {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-tight);
+}
+
+/* Prose inside takes the note's ink, links included. */
+.crewlet-note :is(p, li, h2, h3, h4, strong, em) {
+  color: inherit;
+}
+.crewlet-note a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.crewlet-note > :first-child {
+  margin-top: 0;
+}
+.crewlet-note > :last-child {
+  margin-bottom: 0;
+}

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-L4ZLXYPO.js';
-import '../chunk-B2Z2CDM5.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-6A7P6II6.js';
+import '../chunk-T5TFZ2JB.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-AKEZ3G5V.js';
 import '../chunk-VYOKRN2I.js';
-import '../chunk-TROLVEZY.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-TROLVEZY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
-import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PinTile/PinTile.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ReorderHandleProps } from '../Reorder/index.js';
+export interface PinTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What was pinned, and the link's name. */
+    title: string;
+    /** Where it opens. */
+    href: string;
+    /** What kind of thing it is, before the facts: "Agent", "Project". */
+    kind?: string | undefined;
+    /** One line of what is true of it now: "Working on FAIR-1". */
+    meta?: ReactNode;
+    /** An avatar or glyph before the title. */
+    leading?: ReactNode;
+    /** A state mark (a dot, a tag) beside the title. */
+    status?: ReactNode;
+    /** One figure at the end: "14%", "3 open". */
+    figure?: ReactNode;
+    /** Unpin it; left out, the tile cannot be unpinned from here. */
+    onUnpin?: (() => void) | undefined;
+    /** The handle's props from `useReorder`; left out, the tile does not move. */
+    handle?: ReorderHandleProps | undefined;
+}
+/**
+ * Something a reader pinned, kept where they land: an agent, a project, a
+ * board, a page. A link with the one or two facts that make opening it
+ * unnecessary on most mornings.
+ *
+ * THE WHOLE TILE IS THE LINK'S TARGET, and the link is the title only. The
+ * tile's area is one stretched pseudo-element over the title's anchor, so a
+ * press anywhere opens it, a screen reader hears one link named by the title,
+ * and the unpin button and the handle are siblings of the anchor rather than
+ * buttons nested inside a link, which no browser can make operable.
+ *
+ * UNPIN IS ALWAYS THERE, quiet until the tile is hovered or focused. A
+ * control that appears only on hover is one a touch screen never shows.
+ */
+export declare const PinTile: import("react").ForwardRefExoticComponent<PinTileProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/PinTile/index.d.ts

@@ -0,0 +1,3 @@
+import './PinTile.css';
+export { PinTile } from './PinTile.js';
+export type { PinTileProps } from './PinTile.js';

package/dist/PinTile/index.js

@@ -0,0 +1,4 @@
+export { PinTile } from '../chunk-6MIXD6IW.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PinTile-IIA25MNZ.css

@@ -0,0 +1,141 @@
+/*
+ * PinTile: one pinned thing, a link with its facts.
+ *
+ * A raised row rather than a card with a header: a shelf holds six of them,
+ * and six headed cards are six sections where the reader wanted six links.
+ */
+
+.crewlet-pin-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  min-height: 56px;
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-pin-tile:hover {
+  border-color: var(--color-border-hover);
+  background: var(--color-surface-hover);
+}
+.crewlet-pin-tile:has(.crewlet-pin-tile__handle) {
+  padding-inline-start: var(--spacing-1);
+}
+
+.crewlet-pin-tile[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+}
+.crewlet-pin-tile[data-reorder='dragging'] > * {
+  opacity: 0.35;
+}
+
+.crewlet-pin-tile__handle {
+  position: relative;
+  z-index: var(--z-index-raised);
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-pin-tile__leading {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-pin-tile__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-pin-tile__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-pin-tile__link {
+  overflow: hidden;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The tile's whole area, as the link's. */
+.crewlet-pin-tile__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.crewlet-pin-tile__link:focus-visible {
+  outline: 2px solid transparent;
+}
+/* The tile's ring, over its own edge, for the link that is its target. */
+.crewlet-pin-tile:has(.crewlet-pin-tile__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+.crewlet-pin-tile__status {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.crewlet-pin-tile__meta {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.crewlet-pin-tile__kind {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-pin-tile__figure {
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+/* Above the stretched link, so it takes its own press. */
+.crewlet-pin-tile__unpin {
+  position: relative;
+  z-index: var(--z-index-raised);
+  flex-shrink: 0;
+  color: var(--color-brand-accent-ink);
+  opacity: 0.55;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-pin-tile:hover .crewlet-pin-tile__unpin,
+.crewlet-pin-tile:focus-within .crewlet-pin-tile__unpin {
+  opacity: 1;
+}
+@media (hover: none) {
+  .crewlet-pin-tile__unpin {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-pin-tile,
+  .crewlet-pin-tile__unpin {
+    transition: none;
+  }
+}

package/dist/PresenceModel/index.d.ts

@@ -0,0 +1,2 @@
+export { PRESENCE_ACTIVITIES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder, } from './presence.js';
+export type { PresenceActivity, PresenceKind, PresenceLabels, PresenceMember } from './presence.js';

package/dist/PresenceModel/index.js

@@ -0,0 +1,3 @@
+import '../chunk-CENOOTAV.js';
+export { PRESENCE_ACTIVITIES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder } from '../chunk-S35G6PNC.js';
+import '../chunk-AYKXMIOR.js';

package/dist/PresenceModel/presence.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Who is present in an artifact, as plain data: the order a roster is drawn
+ * in, the hue each collaborator's marks are drawn in, and the words a reader
+ * hears for both.
+ *
+ * FRAMEWORK FREE. Nothing here imports React or touches the document, because
+ * two renderers draw presence from it: the React components in this package,
+ * which the dashboard draws, and the artifact kit's custom elements, which an
+ * artifact page draws. A rule written once here cannot come to differ between
+ * the two.
+ *
+ * THE PRESENCE COLOUR IS THE NARROW EXCEPTION to colour carrying state. A
+ * collaborator's hue ties their cursor, their selection ring, their cell
+ * outline and their name flag to their name, and nothing else is drawn in it.
+ * An agent wears the hue an operator chose for it. A person is given one of
+ * the six node hues for the session, in join order, skipping the hues already
+ * in use in the room: never a hash of a name, and never stored on the person.
+ */
+import { type NodeHue } from '../utils/nodeHue.js';
+/** What a collaborator is doing: the engine's `artifacts.PresenceActivity`. */
+export type PresenceActivity = 'editing' | 'viewing' | 'idle';
+export declare const PRESENCE_ACTIVITIES: readonly ["editing", "viewing", "idle"];
+/** A person, or an agent seat whose turn has the artifact open. */
+export type PresenceKind = 'human' | 'agent';
+/** One collaborator present in an artifact. */
+export interface PresenceMember {
+    /** What tells two entries apart: a session, or a seat once tabs are collapsed. */
+    id: string;
+    /** The seat handle or principal the entry belongs to, so two tabs of one person collapse to one. */
+    seat?: string | undefined;
+    /** The display name, resolved by the host: the engine sends the seat handle only. */
+    name: string;
+    kind: PresenceKind;
+    activity: PresenceActivity;
+    /** The hue the collaborator's marks are drawn in. `assignPresenceHues` gives a person one. */
+    hue?: NodeHue | undefined;
+    /** An agent's Crewlet character, as `Avatar` draws it. */
+    character?: string | undefined;
+    /** A person's photo, as `Avatar` draws it. */
+    src?: string | undefined;
+    /** Where they are, in words: "Editing row Acme Corp", "Reading version 12 for ENG-412". */
+    location?: string | undefined;
+}
+export declare function presenceOrder<M extends Pick<PresenceMember, 'kind' | 'activity'>>(members: readonly M[]): M[];
+/**
+ * One entry per seat: two tabs of one person are one collaborator, and the
+ * most active tab speaks for them. Entries with no seat are kept as they are.
+ * The first tab's position in the list is kept, so collapsing never reorders.
+ */
+export declare function collapseSessions<M extends Pick<PresenceMember, 'id' | 'seat' | 'activity'>>(members: readonly M[]): M[];
+/**
+ * The hue each member's marks are drawn in.
+ *
+ * An agent with a chosen hue keeps it. Every other member keeps the hue it was
+ * given before (`held`, the previous answer) while it stays present, and a
+ * newcomer, in the order given, takes the first of the six hues nobody present
+ * wears; past six, the hue the fewest members wear, so hues repeat as evenly
+ * as they can and the name on the flag tells the two apart.
+ */
+export declare function assignPresenceHues(members: readonly Pick<PresenceMember, 'id' | 'kind' | 'hue'>[], held?: ReadonlyMap<string, NodeHue>): Map<string, NodeHue>;
+/** Every string presence says, overridable wherever it is drawn. */
+export interface PresenceLabels {
+    /** The activity word: "Editing", "Viewing", "Reading" for an agent viewing, "Idle". */
+    activity: (activity: PresenceActivity, kind: PresenceKind) => string;
+    /** The roster's accessible name. `others` counts everyone but the reader. */
+    here: (others: number, withSelf: boolean) => string;
+    /** One member, read out: "Maya Ortiz, editing row Acme Corp". */
+    member: (member: Pick<PresenceMember, 'name' | 'kind' | 'activity' | 'location'>) => string;
+    /** The members counted in the overflow chip: "3 more". */
+    more: (count: number) => string;
+    /** The flag on a cell somebody is editing: "Maya is editing". */
+    editing: (names: string) => string;
+    /** The words a focused cell gains when others are on it: "Jane Founder is also here." */
+    alsoHere: (names: readonly string[]) => string;
+}
+/** "Maya", "Maya and Jane", "Maya, Jane and 2 others". */
+export declare function joinNames(names: readonly string[], shown?: number): string;
+export declare const PRESENCE_LABELS: PresenceLabels;
+/** Labels with a caller's overrides applied, the one way every component merges them. */
+export declare function presenceLabels(overrides?: Partial<PresenceLabels>): PresenceLabels;

package/dist/PresenceRing/PresenceRing.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+/** A collaborator's hue, or `neutral` for a host that draws every collaborator alike. */
+export type PresenceHue = NodeHue | 'neutral';
+/** Active is a solid ring; idle is dashed, for a collaborator who has stepped away. */
+export type PresenceRingState = 'active' | 'idle';
+/**
+ * The class that sets `--crewlet-presence-hue` on an element, for a component
+ * that draws a presence mark of its own (a flag, a cursor, a badge's ring).
+ * One table of hues for every presence mark, so a hue cannot be spelt two ways.
+ */
+export declare function presenceHueClass(hue: PresenceHue): string;
+export interface PresenceRingProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    hue: PresenceHue;
+    state?: PresenceRingState | undefined;
+    /** How far inside the element's edge the ring is drawn, in px. 1 by default, inside a hairline. */
+    inset?: number | undefined;
+    children?: ReactNode;
+}
+/**
+ * A collaborator's outline round whatever they are on: a cell, a card, an
+ * element of a page.
+ *
+ * INSET, so it never doubles the element's own border: the element keeps its
+ * one edge and the ring is drawn inside it. DECORATIVE: it is a pseudo element
+ * nothing reads, because the same fact is said in words where presence is
+ * listed and in the focused element's description ("Jane Founder is also
+ * here"). The hue is the presence colour exception (D22), so it is only ever
+ * drawn beside the collaborator's name.
+ */
+export declare function PresenceRing({ hue, state, inset, className, style, children, ...rest }: PresenceRingProps): import("react").JSX.Element;

package/dist/PresenceRing/index.d.ts

@@ -0,0 +1,3 @@
+import './PresenceRing.css';
+export { PresenceRing, presenceHueClass } from './PresenceRing.js';
+export type { PresenceHue, PresenceRingProps, PresenceRingState } from './PresenceRing.js';

package/dist/PresenceRing/index.js

@@ -0,0 +1,2 @@
+export { PresenceRing, presenceHueClass } from '../chunk-I6POAB4V.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PresenceRing-M4C22Q6U.css

@@ -0,0 +1,68 @@
+/*
+ * The presence hues and the ring drawn in them (PresenceRing.tsx).
+ *
+ * ONE TABLE OF HUES for every presence mark: a ring, a flag, a cursor and a
+ * badge's ring each read `--crewlet-presence-hue` from the class
+ * `presenceHueClass` writes, so the six node hues are spelt once. The hue is
+ * the presence colour exception: it ties a mark to a name and is spent on
+ * nothing else.
+ */
+
+.crewlet-presence-hue--purple {
+  --crewlet-presence-hue: var(--color-node-purple);
+}
+
+.crewlet-presence-hue--cyan {
+  --crewlet-presence-hue: var(--color-node-cyan);
+}
+
+.crewlet-presence-hue--green {
+  --crewlet-presence-hue: var(--color-node-green);
+}
+
+.crewlet-presence-hue--amber {
+  --crewlet-presence-hue: var(--color-node-amber);
+}
+
+.crewlet-presence-hue--rose {
+  --crewlet-presence-hue: var(--color-node-rose);
+}
+
+.crewlet-presence-hue--blue {
+  --crewlet-presence-hue: var(--color-node-blue);
+}
+
+.crewlet-presence-hue--neutral {
+  --crewlet-presence-hue: var(--color-border-strong);
+}
+
+/*
+ * THE RING IS INSET and drawn on a pseudo element, so it never moves the
+ * content, never doubles the element's own border and is never read. 2px,
+ * the weight a selection ring is drawn at.
+ */
+.crewlet-presence-ring {
+  --crewlet-presence-ring-inset: 1px;
+  position: relative;
+  display: inline-block;
+}
+
+.crewlet-presence-ring::after {
+  position: absolute;
+  inset: var(--crewlet-presence-ring-inset);
+  z-index: var(--z-index-presence);
+  border: 2px solid var(--crewlet-presence-hue);
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+
+.crewlet-presence-ring--idle::after {
+  border-style: dashed;
+}
+
+@media (forced-colors: active) {
+  .crewlet-presence-ring::after {
+    border-color: Highlight;
+  }
+}

package/dist/PresenceStack/PresenceStack.d.ts

@@ -0,0 +1,36 @@
+import { type AvatarSizeStep } from '../Avatar/index.js';
+import { type PresenceLabels, type PresenceMember } from '../PresenceModel/index.js';
+export interface PresenceStackProps {
+    /** Everybody present but the reader, in the order they joined. The stack orders them by activity. */
+    members: readonly PresenceMember[];
+    /** Whether the reader is present too, which is what the accessible name counts from: "You and 3 others are here". */
+    self?: boolean | undefined;
+    /** How many badges are drawn before the rest are counted in a chip. Four by default. */
+    max?: number | undefined;
+    size?: AvatarSizeStep | undefined;
+    /**
+     * Makes each badge a button: a host opens its own menu from it ("Follow
+     * Maya", "Open turn"). Without it the stack is one image with one name.
+     */
+    onSelect?: ((member: PresenceMember) => void) | undefined;
+    /** The stack's accessible name, where the derived one is not what it means where it stands. */
+    label?: string | undefined;
+    labels?: Partial<PresenceLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * Who is here, at a glance: the badges of everybody present in an artifact,
+ * people editing first, then agents editing, people viewing, agents reading,
+ * and anybody idle last.
+ *
+ * A PRESENT BADGE WEARS A RING IN THE COLLABORATOR'S HUE, the same hue their
+ * cursor and cell outline are drawn in, which is how a reader matches a ring
+ * on a cell to a face in the stack. It is the presence colour exception (D22):
+ * the badge carries the name, and the ring is never the only carrier. An idle
+ * collaborator's badge loses its ring and fades, and says "Idle" in words.
+ *
+ * Built on the avatar stack's own geometry (the overlap, the cut-out ring in
+ * the ground's colour, the counted chip), so a presence stack and a stack of
+ * watchers beside it are one mark.
+ */
+export declare function PresenceStack({ members, self, max, size, onSelect, label, labels, className }: PresenceStackProps): import("react").JSX.Element | null;

package/dist/PresenceStack/index.d.ts

@@ -0,0 +1,3 @@
+import './PresenceStack.css';
+export { PresenceStack } from './PresenceStack.js';
+export type { PresenceStackProps } from './PresenceStack.js';

package/dist/PresenceStack/index.js

@@ -0,0 +1,9 @@
+export { PresenceStack } from '../chunk-YM3GJHGW.js';
+import '../chunk-CENOOTAV.js';
+import '../chunk-I6POAB4V.js';
+import '../chunk-S35G6PNC.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';