@crewlethq/ui 0.64.0 → 0.65.0

package/dist/MarkdownEditor/index.js

@@ -1,18 +1,18 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-SELUJSTZ.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-VTGIDEI5.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-OOC7Q67K.js';
-import '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+import '../chunk-25AZQ3GZ.js';
+import '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-5KRRJNQO.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-MLDTLZAO.js';
+import '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{MarkdownEditor-WOKV7CLK.css → MarkdownEditor-BLCJRGDC.css}

@@ -69,6 +69,13 @@
   border-inline-start: 1px solid var(--color-border-default);
 }
 
+/* A group that starts a line of a wrapped bar draws none (MarkdownEditor.tsx
+   marks it), since there it would part the group from nothing. Only the ink
+   goes: the group keeps its width, so the bar breaks where it did. */
+.crewlet-markdown-editor__group[data-wrapped] {
+  border-inline-start-color: transparent;
+}
+
 .crewlet-markdown-editor__spacer {
   flex: 1;
 }
@@ -128,12 +135,15 @@
   color: var(--color-text-tertiary);
 }
 
+/* The strip's words start on the source's text edge, the field's and the
+   preview's side inset, so the count reads as the foot of the text above it
+   rather than 4px out of line with it. */
 .crewlet-markdown-editor__footer {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-1) var(--spacing-3);
-  padding: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-1) var(--spacing-4);
   border-block-start: 1px solid var(--color-border-default);
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;

package/dist/Menu/index.js

@@ -1,9 +1,9 @@
-export { Menu } from '../chunk-LODRX4FU.js';
+export { Menu } from '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Menu-KEKAD3BZ.css → Menu-OLUGHX56.css}

@@ -85,7 +85,7 @@
    * hold a row at its content. Once the menu is long enough to scroll, the
    * free space goes negative and the rows shrink to that floor first.
    *
-   * A plain row survives it by accident — one nowrap line is 19.5px, under the
+   * A plain row survives it by accident: one nowrap line is 19.5px, under the
    * floor, so there is nothing to shrink. A `--described` row does not: it
    * adds `padding-block` and stacks a label over a wrapping description, which
    * is ~52px squeezed into 28px and drawn over the rows either side.
@@ -107,11 +107,29 @@
 /*
  * The rows that carry a second line, and only those. The row height alone
  * would hold a label and a description in the space meant for one line.
+ *
+ * THEIR MARKS SIT ON THE LABEL'S LINE, not across both lines. Centred on the
+ * pair, a glyph floated between the label and the description, 10px under the
+ * line it names and belonging to neither. So the row aligns to its top, the
+ * check and the glyph stand in a box one label line tall (`1lh`, measured in
+ * the row's own font), and a hint shares the label's baseline: the answer a
+ * dialog's head gives the mark beside a title with a subtitle (Modal.css).
  */
 .crewlet-menu__item--described {
+  align-items: flex-start;
   padding-block: var(--spacing-2);
 }
 
+.crewlet-menu__item--described > .crewlet-menu__check,
+.crewlet-menu__item--described > .crewlet-menu__icon {
+  height: 1lh;
+}
+
+.crewlet-menu__item--described > .crewlet-menu__text,
+.crewlet-menu__item--described > .crewlet-menu__hint {
+  align-self: baseline;
+}
+
 /* Neutral, because the accent means "where the reader is" and in a menu that
    is what focus already says. */
 .crewlet-menu__item:hover:not(.is-disabled) {

package/dist/MergeConflicts/index.js

@@ -1,17 +1,17 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-IJIC4COR.js';
-import '../chunk-OOC7Q67K.js';
-import '../chunk-F7VBYCW2.js';
-import '../chunk-27JCHL64.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-6MI2GMYG.js';
+import '../chunk-25AZQ3GZ.js';
+import '../chunk-W6UVBBNH.js';
+import '../chunk-PVZOP3QK.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-5KRRJNQO.js';
-import '../chunk-LODRX4FU.js';
+import '../chunk-MLDTLZAO.js';
+import '../chunk-T73DMDU4.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{MergeConflicts-O44ESH4T.css → MergeConflicts-HCXPRQVR.css}

@@ -17,6 +17,13 @@
   color: var(--color-text-primary);
 }
 
+/* Focus lands here when the block opens, and a heading is not a control, so
+   its ring is drawn a step off the words as a document's headings draw theirs
+   (Document.css) rather than at the 2px a control's ring keeps. */
+.crewlet-merge-conflicts__title:focus-visible {
+  outline-offset: var(--spacing-1);
+}
+
 .crewlet-merge-conflicts__note {
   margin: 0;
   font-size: var(--font-size-xs);
@@ -69,9 +76,13 @@
   white-space: pre-wrap;
 }
 
+/* The foot settles every clash, so it stands as far from the last one as the
+   clashes stand from each other. At the block's own gap it sat 4px nearer,
+   and Apply read as the last clash's control. */
 .crewlet-merge-conflicts__foot {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-2);
+  margin-block-start: calc(var(--spacing-4) - var(--spacing-3));
 }

package/dist/MessageBubble/index.js

@@ -1,2 +1,2 @@
-export { MessageBubble } from '../chunk-C3FX7ZSU.js';
+export { MessageBubble } from '../chunk-KAQ2L74F.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{MessageBubble-GKO6X3QG.css → MessageBubble-AHTXBO3X.css}

@@ -20,9 +20,20 @@
   align-items: flex-start;
 }
 
+/*
+ * EITHER SIDE IS THE SAME BOX. The reader's own bubble draws no edge, so its
+ * hairline is transparent rather than absent, and the inset is measured from
+ * the bubble's outside, the hairline included: a line from either side is as
+ * tall as the other and its words as far from the bubble's edge, where
+ * anybody else's stood 2px larger with its words a pixel further in. The
+ * reader's own keeps the box it always had, so none of its lines rewraps.
+ * Forced colours paints the transparent edge, which keeps the bubble's shape
+ * where its ground is taken away.
+ */
 .crewlet-message__bubble {
   max-width: 100%;
-  padding: var(--spacing-2) var(--spacing-3);
+  padding: calc(var(--spacing-2) - 1px) calc(var(--spacing-3) - 1px);
+  border: 1px solid transparent;
   font-size: var(--font-size-compact);
   line-height: var(--font-line-height-normal);
   color: var(--color-text-primary);
@@ -38,7 +49,7 @@
 
 /* Anybody else's: the card ground inside a hairline, the tail at the start corner. */
 .crewlet-message--other .crewlet-message__bubble {
-  border: 1px solid var(--color-border-default);
+  border-color: var(--color-border-default);
   border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
   background: var(--color-surface-subtle);
 }

package/dist/Modal/index.js

@@ -1,10 +1,10 @@
-export { ConfirmModal, Modal } from '../chunk-KVWZDCTQ.js';
+export { ConfirmModal, Modal } from '../chunk-I24FI46B.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-3HMP7WAZ.css → Modal-FYQYEI3N.css}

@@ -303,6 +303,16 @@
  * belonging to the pair rather than to the first line of it.
  */
 .crewlet-modal__header {
+  /*
+   * How far an icon button's glyph stands in from the edge of its square (the
+   * medium square draws its glyph at --font-size-sm, see IconButton.css). The
+   * step back and the close control are pulled out by exactly this, so their
+   * glyphs stand on the head's inline edges at every density. It relies on the
+   * head's own inline padding: a head narrowed below this inset plus the focus
+   * ring's 4px reach stands the control against the frame, which clips the ring.
+   */
+  --crewlet-modal-glyph-inset: calc((var(--size-control-md) - var(--font-size-sm)) / 2);
+
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
@@ -438,16 +448,23 @@
   color: var(--color-text-secondary);
 }
 
+/*
+ * Pulled out on its inline end by the glyph's own inset, as the step back is
+ * on its start, so the X stands on the line the body's fields and the foot's
+ * last button end on. Pulled by a single 4px step, it stood 4px inside that
+ * line in every dialog and every sheet.
+ */
 .crewlet-modal__close {
   flex-shrink: 0;
   margin: calc(var(--spacing-1) * -1);
+  margin-inline-end: calc(var(--crewlet-modal-glyph-inset) * -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-inline-start: calc(var(--crewlet-modal-glyph-inset) * -1);
   margin-block: calc(var(--spacing-1) * -1);
 }
 

package/dist/ObjectHeader/index.js

@@ -1,4 +1,4 @@
-export { FactLine, ObjectHeader, SetByLine } from '../chunk-4MC2EEGO.js';
-import '../chunk-HOP3J622.js';
+export { FactLine, ObjectHeader, SetByLine } from '../chunk-S7WG53JB.js';
+import '../chunk-QF5UNP4T.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OpenInAppCard/index.js

@@ -1,13 +1,13 @@
-export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-CT6I36FH.js';
+export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-ZFN4IBVC.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-3LI4TRUR.js';
-import '../chunk-NLI7OVO2.js';
-import '../chunk-WW4E5EUS.js';
-import '../chunk-KYIAFNU7.js';
+import '../chunk-M25IV5MH.js';
+import '../chunk-G4234OIG.js';
+import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-MKKX6N7C.js';
+import '../chunk-7XKDPTZ5.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5KRRJNQO.js';
+import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
 export { OrgLabel } from '../chunk-ONQKKHON.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-YA3AWELW.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-RUBKDJAQ.js';
 import '../chunk-ONQKKHON.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{OrgNode-TCHJH5FO.css → OrgNode-6OCBAIBK.css}

@@ -43,6 +43,9 @@
  * the dash is what says a place is waiting rather than a frame round a value.
  */
 .crewlet-org-node-lead {
+  /* How far the pill stands inside the chart card's outer edge: the card's
+     hairline, then this strip's own padding. */
+  --crewlet-org-node-lead-inset: calc(1px + var(--spacing-1));
   position: relative;
   display: flex;
   align-items: center;
@@ -55,6 +58,11 @@
  * to this unit rather than as a second caption. RAISED, on the step a chip
  * with no boundary of its own takes (the palette suite holds it off the card
  * on both themes), so it is found by its ground rather than by a frame.
+ *
+ * ITS CORNER RUNS CONCENTRIC WITH THE CARD'S: the chart card's corner
+ * (`TreeCanvas.css`) less the inset the pill stands at, which is where its
+ * bottom corners sit. At the small radius step they bulged toward the card's
+ * corner, leaving the gap there narrower than the 5px along the card's sides.
  */
 .crewlet-org-node-lead__pill {
   display: flex;
@@ -70,7 +78,7 @@
   line-height: var(--font-line-height-tight);
   color: var(--color-text-secondary);
   background: var(--color-surface-elevated);
-  border-radius: var(--radius-sm);
+  border-radius: calc(var(--radius-lg) - var(--crewlet-org-node-lead-inset));
 }
 
 /*

package/dist/OrgTable/index.js

@@ -1,14 +1,14 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-PGKETYGL.js';
-import '../chunk-Q4DNAO3O.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-FWUX3F6Q.js';
+import '../chunk-IL3XLDW7.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-ONQKKHON.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-QC2DEQCN.js';
+import '../chunk-CVKANYHD.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PageHeader/index.js

@@ -1,3 +1,3 @@
-export { PageHeader } from '../chunk-DKB73KZI.js';
+export { PageHeader } from '../chunk-FPDIHEM4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PageHeader-KMT63D56.css → PageHeader-ES5RN55V.css}

@@ -10,9 +10,18 @@
  * leaves the content the largest thing on the page.
  */
 
+/*
+ * THE ACTIONS STAND ON THE TITLE'S LINE, as ObjectHeader's do: aligned to the
+ * block's foot they sat 25.5px under the title's middle and 3px over the
+ * sentence's, level with neither. The actions take one title line's band and
+ * centre in it (below), so a sentence or a wrapped title under it moves
+ * nothing.
+ */
 .crewlet-page-header {
+  --crewlet-page-header-title-line: calc(var(--font-size-xl) * var(--font-line-height-normal));
+
   display: flex;
-  align-items: flex-end;
+  align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-3);
   flex-wrap: wrap;
@@ -93,4 +102,5 @@
   align-items: center;
   gap: var(--spacing-1);
   flex-wrap: wrap;
+  min-height: var(--crewlet-page-header-title-line);
 }

package/dist/PeekRail/index.js

@@ -1,8 +1,8 @@
-export { PEEK_RAIL_LABELS, PEEK_RAIL_MAX_WIDTH, PEEK_RAIL_MIN_WIDTH, PEEK_RAIL_WIDTH, PeekHost, PeekNeighbours, PeekRail, isPlainPress, peekClickHandler, peekRowActivation, usePeekNeighbours, usePeekOrder, usePeekStep } from '../chunk-VBO2GYWX.js';
+export { PEEK_RAIL_LABELS, PEEK_RAIL_MAX_WIDTH, PEEK_RAIL_MIN_WIDTH, PEEK_RAIL_WIDTH, PeekHost, PeekNeighbours, PeekRail, isPlainPress, peekClickHandler, peekRowActivation, usePeekNeighbours, usePeekOrder, usePeekStep } from '../chunk-CWYU7DNT.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PeopleRail/index.js

@@ -1,12 +1,12 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-EFIURN3U.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-OFABBAUR.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-2XWFWNDT.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PeopleRail-SZGHZXVT.css → PeopleRail-MRUSDGCZ.css}

@@ -26,6 +26,13 @@
   gap: var(--spacing-2);
 }
 
+/* THE CLOSE GLYPH ENDS WHERE THE ROWS DO. Pulled out by the glyph's own inset
+   in its button, as a dialog's close is: by its box it stood 7px inside the
+   line the Follow buttons under it end on. */
+.crewlet-people-rail__head > .crewlet-icon-btn {
+  margin-inline-end: calc((var(--size-control-sm) - var(--font-size-xs)) / -2);
+}
+
 .crewlet-people-rail__title {
   margin: 0;
   color: var(--color-text-primary);
@@ -42,9 +49,12 @@
   list-style: none;
 }
 
+/* THE BADGE AND THE CONTROLS SIT ON THE NAME'S LINE, never centred on the
+   row: when what a person is doing ran to a second line, the badge and Follow
+   stood 19.5px under the name they belong to, level with nothing. */
 .crewlet-people-rail__person {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-2);
   min-width: 0;
 }

package/dist/PinTile/index.js

@@ -1,4 +1,4 @@
-export { PinTile } from '../chunk-GWPWLVN3.js';
-import '../chunk-2XWFWNDT.js';
+export { PinTile } from '../chunk-LJ3KWQLP.js';
+import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PinTile-IIA25MNZ.css → PinTile-OWS7JTHD.css}

@@ -12,7 +12,7 @@
   gap: var(--spacing-3);
   min-width: 0;
   min-height: 56px;
-  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
   background: var(--color-surface-elevated);
@@ -23,10 +23,21 @@
   border-color: var(--color-border-hover);
   background: var(--color-surface-hover);
 }
+/*
+ * AN ICON BUTTON AT EITHER END TAKES THE SMALL STEP, so its glyph, inset by
+ * the button's own padding, stands about where the words stand at the other
+ * end. The end used to keep that step whether or not the unpin button was
+ * there: its glyph stood 15px in against the 12px of the glyph or name at the
+ * start, and a tile with no unpin button put its figure 8px from the edge.
+ */
 .crewlet-pin-tile:has(.crewlet-pin-tile__handle) {
   padding-inline-start: var(--spacing-1);
 }
 
+.crewlet-pin-tile:has(> .crewlet-pin-tile__unpin) {
+  padding-inline-end: var(--spacing-1);
+}
+
 .crewlet-pin-tile[data-reorder='dragging'] {
   border-style: dashed;
   border-color: var(--color-brand-accent);

package/dist/PresenceRing/index.js

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

package/dist/{PresenceRing-M4C22Q6U.css → PresenceRing-ZMVVTYMH.css}

@@ -40,29 +40,39 @@
  * 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.
+ *
+ * IT IS THE PSEUDO ELEMENT'S OUTLINE, pulled inside by a negative offset,
+ * because an outline's curve shrinks with its offset and a border's does not.
+ * Drawn as a border on a box inset from the element, the ring took the
+ * element's own outer corner 2px inside it (4px at an inset of 3), so its
+ * corners stood further from the element's edge than its sides did: 1.8px
+ * against 1px round a hairline cell. Only the element's own hairline is left
+ * unaccounted for, since a stylesheet cannot read another box's border.
  */
 .crewlet-presence-ring {
   --crewlet-presence-ring-inset: 1px;
+  --crewlet-presence-ring-weight: 2px;
   position: relative;
   display: inline-block;
 }
 
 .crewlet-presence-ring::after {
   position: absolute;
-  inset: var(--crewlet-presence-ring-inset);
+  inset: 0;
   z-index: var(--z-index-presence);
-  border: 2px solid var(--crewlet-presence-hue);
   border-radius: inherit;
+  outline: var(--crewlet-presence-ring-weight) solid var(--crewlet-presence-hue);
+  outline-offset: calc((var(--crewlet-presence-ring-inset) + var(--crewlet-presence-ring-weight)) * -1);
   content: '';
   pointer-events: none;
 }
 
 .crewlet-presence-ring--idle::after {
-  border-style: dashed;
+  outline-style: dashed;
 }
 
 @media (forced-colors: active) {
   .crewlet-presence-ring::after {
-    border-color: Highlight;
+    outline-color: Highlight;
   }
 }

package/dist/PresenceStack/index.js

@@ -1,9 +1,9 @@
-export { PresenceStack } from '../chunk-FGRJXZUU.js';
+export { PresenceStack } from '../chunk-EVXXY75R.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-I6POAB4V.js';
+import '../chunk-EFX2YC5T.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5AQBPHZD.js';
+import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenceStack-ZV67BH4V.css

@@ -0,0 +1,108 @@
+/*
+ * Who is here (PresenceStack.tsx), on the avatar stack's own geometry: the
+ * overlap and the counted chip are the stack's, the overlap stepped out by
+ * the ring's reach. What this adds is the ring in each present collaborator's
+ * hue, outside the cut-out, and the idle fade.
+ */
+
+/* HOW FAR THE RING REACHES past each badge: the cut-out, then the hue. The
+   ring is drawn outside the stack's own box, so a container that places the
+   stack flush to an edge (or clips) keeps this much clear round it. */
+.crewlet-presence-stack {
+  --crewlet-presence-stack-cutout: 2px;
+  --crewlet-presence-stack-reach: calc(var(--crewlet-presence-stack-cutout) * 2);
+}
+
+/* The wrapper (a span, or a button when badges select) carries no edge of its
+   own: the cut-out and the hue ring are drawn on the badge inside it, which
+   has the badge's own outline to follow. */
+.crewlet-presence-stack > .crewlet-presence-stack__member {
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+}
+
+.crewlet-presence-stack > .crewlet-presence-stack__member--human {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-presence-stack > .crewlet-presence-stack__member--agent {
+  border-radius: var(--radius-sm);
+}
+
+button.crewlet-presence-stack__member {
+  cursor: pointer;
+}
+
+/* THE FOCUSED BADGE STANDS IN FRONT, so its focus ring is drawn whole: every
+   badge is drawn over the one before it, and the next one covered the far
+   side of the ring drawn round this one. */
+button.crewlet-presence-stack__member:focus-visible {
+  position: relative;
+  z-index: var(--z-index-raised);
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-presence-stack .crewlet-presence-stack__badge {
+  box-shadow: 0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground);
+}
+
+/*
+ * The hue ring sits outside the cut-out, so it reads as a ring round the
+ * badge rather than a stroke on it.
+ *
+ * AND IT IS CUT OUT OF THE BADGE BEHIND IT, by a second band of the ground
+ * outside the hue, as a plain badge is cut out of its neighbour by its own.
+ * Without it the next badge's ring was drawn straight across the face before
+ * it, through the initials, which is the blot the stack's cut-out is there to
+ * prevent.
+ */
+.crewlet-presence-stack .crewlet-presence-stack__badge--present {
+  box-shadow:
+    0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground),
+    0 0 0 var(--crewlet-presence-stack-reach) var(--crewlet-presence-hue),
+    0 0 0 calc(var(--crewlet-presence-stack-reach) + var(--crewlet-presence-stack-cutout))
+      var(--crewlet-avatar-stack-ground);
+}
+
+/*
+ * THE STEP GROWS BY THE RING'S REACH, so a badge hides as much of the one
+ * behind it as a plain stack's badge does: the stack's own 6px overlap and
+ * 2px cut-out (AvatarStack.css), 8px of a 26px face. At the plain stack's
+ * step a ringed badge hid 10px, and with its outer cut-out it would hide 12,
+ * which left "MO" an M. The stack's overlap stands and each member stands
+ * the next off by the reach, so the pitch is even whether a badge wears a
+ * ring, has gone idle or is the count, and the last member adds no room.
+ */
+.crewlet-presence-stack > .crewlet-avatar-stack__member:has(+ .crewlet-avatar-stack__member) {
+  margin-inline-end: var(--crewlet-presence-stack-reach);
+}
+
+.crewlet-presence-stack .crewlet-presence-stack__badge--idle {
+  opacity: 0.5;
+}
+
+/*
+ * A FADED BADGE STILL HIDES THE ONE BEHIND IT. The fade is an opacity, which
+ * takes the badge's plate and cut-out with it, so the ring of the badge before
+ * an idle one showed through its face at half strength. Its wrapper lays the
+ * ground under it, the cut-out's width included, so the badge fades toward the
+ * ground the stack stands on, exactly as it does standing alone.
+ */
+.crewlet-presence-stack > .crewlet-presence-stack__member:has(> .crewlet-presence-stack__badge--idle) {
+  background: var(--crewlet-avatar-stack-ground);
+  box-shadow: 0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground);
+}
+
+@media (forced-colors: active) {
+  .crewlet-presence-stack .crewlet-presence-stack__badge--present {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}