@crewlethq/ui 0.84.2 → 0.86.0

package/dist/{ChoiceList-JN4PPNFW.css → ChoiceList-ZQMZTEZX.css}

@@ -6,8 +6,14 @@
  * which is the focus ring's colour.
  */
 .crewlet-choice-list {
-  /* The platform's radio, sized here so a panel can line up with the text beside it. */
-  --crewlet-choice-list-radio-size: 13px;
+  /*
+   * THE COMPACT CONTROL STEP, the box a compact Checkbox draws beside the same
+   * 13px words: a control takes the step of the text it sits beside (16px
+   * beside 14px, 14px beside 13px), and at 13px this radio matched no other
+   * control in the kit, so a list nested under a card's 16px radio, or beside
+   * a compact checkbox, drew a third size.
+   */
+  --crewlet-choice-list-radio-size: 14px;
   /* The step between two answers. Every row's pointer target reaches half of it. */
   --crewlet-choice-list-gap: var(--spacing-1);
   /*
@@ -133,7 +139,8 @@
   box-sizing: border-box;
   width: var(--crewlet-choice-list-radio-size);
   height: var(--crewlet-choice-list-radio-size);
-  margin: 3px 0 0;
+  /* Centred on the label's first line: its 13px in the body's leading. */
+  margin: calc((var(--font-size-compact) * var(--font-line-height-body) - var(--crewlet-choice-list-radio-size)) / 2) 0 0;
   border: 1px solid var(--color-border-control);
   border-radius: 50%;
   background: transparent;
@@ -175,28 +182,37 @@
   overflow-wrap: anywhere;
 }
 
-/* Why a disabled choice cannot be made, after its detail on the same line, in the warning ink. */
+/*
+ * WHY A DISABLED CHOICE CANNOT BE MADE, on a line of its own under the
+ * detail, in the warning ink, as a ChoiceCards card puts it on its own row.
+ * Run on after the detail, it read as the detail's next clause, and in a
+ * narrow column it wrapped wherever the detail happened to end.
+ */
 .crewlet-choice-list__reason {
+  display: block;
   color: var(--color-feedback-warning-ink);
 }
 
-.crewlet-choice-list__detail > .crewlet-choice-list__reason:not(:first-child) {
-  margin-inline-start: var(--spacing-2);
-}
-
-/* A tag says something ABOUT an answer ("Suggested"), so it is set in the
-   tertiary ink: in the accent ink it was a second accent mark on the chosen
-   row, beside the radio and the fill that already say which one is chosen. */
+/* A tag says something ABOUT an answer ("Recommended"), so it is set in a
+   quiet ink: in the accent ink it was a second accent mark on the chosen row,
+   beside the radio and the fill that already say which one is chosen. It is
+   the pill a ChoiceCards card draws its tag in, so one word beside a choice's
+   name reads the same in a list as on a card in the same step, where it was an
+   11px capital label here and a pill there. It stands on the label's line. */
 .crewlet-choice-list__tag {
-  padding-top: 2px;
-  font-size: var(--font-size-2xs);
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--color-text-tertiary);
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
   white-space: nowrap;
 }
 
+/* On the selected fill the default edge all but vanishes in light, so the tag takes the strong one, as a chosen card's does. */
+.crewlet-choice-list__row.is-checked .crewlet-choice-list__tag {
+  border-color: var(--color-border-strong);
+}
+
 /* A SELECTED CHOICE'S PANEL is part of the choice: it continues the row's
    fill under it, and its content starts where the label does, not under the
    radio. */

package/dist/CodeBlock/index.js

@@ -1,5 +1,5 @@
-export { CodeBlock } from '../chunk-QSWQJX27.js';
-import '../chunk-T5GBTXNC.js';
+export { CodeBlock } from '../chunk-4ME4J3YY.js';
+import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-DGXZ635L.js';

package/dist/ColorSwatch/index.js

@@ -1,5 +1,5 @@
-export { ColorSwatch } from '../chunk-6FBPFG3C.js';
-import '../chunk-T5GBTXNC.js';
+export { ColorSwatch } from '../chunk-6EZX26BD.js';
+import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7W3LYIOC.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-2ZSCHQOA.js';
-import '../chunk-LBGKLYBY.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-WMSXPF7T.js';
 import '../chunk-7W3LYIOC.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,8 +1,8 @@
-export { ContrastHelp } from '../chunk-WMO722J2.js';
-import '../chunk-2ZSCHQOA.js';
+export { ContrastHelp } from '../chunk-TBQFZV4H.js';
+import '../chunk-WMSXPF7T.js';
+import '../chunk-7W3LYIOC.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EC6EUIAD.js';
-import '../chunk-7W3LYIOC.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';

package/dist/Copyable/index.js

@@ -1,4 +1,4 @@
-export { CopyButton, Copyable } from '../chunk-T5GBTXNC.js';
+export { CopyButton, Copyable } from '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-DGXZ635L.js';

package/dist/{Copyable-IS3MHMPL.css → Copyable-P5AMRHFX.css}

@@ -78,11 +78,15 @@
 
 /* ---- inline ------------------------------------------------------------ */
 
+/* INLINE TAKES THE ROW'S OWN REGISTER: in a detail row it is one of the
+   row's values, so it is their size and ink, in the mono face. At a fixed
+   12px in the secondary ink, an address was the one value in its list a step
+   smaller and quieter than the values around it. */
 .crewlet-copyable--inline .crewlet-copyable__value {
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   background: transparent;
   padding: 0;
-  color: var(--color-text-secondary);
+  color: inherit;
 }
 
 /* ---- block ------------------------------------------------------------- */
@@ -103,13 +107,23 @@
   padding: var(--spacing-2) var(--spacing-3);
 }
 
+/*
+ * A BLOCK SHOWS ITS VALUE WHOLE, wrapped at any character and with every
+ * space kept: it is the variant for an address a reader must allowlist or a
+ * command they must check before running it. Held to one line, it scrolled
+ * past a phone's width behind an ellipsis, with no scrollbar to say there was
+ * more, and the reader saw "https://example.com/webho…" of the address they
+ * were asked to copy into a vendor's form.
+ */
 .crewlet-copyable--block .crewlet-copyable__value {
   font-size: var(--font-size-compact);
   color: var(--color-text-primary);
   background: transparent;
   padding: 0;
-  white-space: nowrap;
-  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
   flex: 1;
 }
 

package/dist/DataGrid/index.js

@@ -1,4 +1,4 @@
-export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-ABRWL5FJ.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-L2QRKIL4.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-PPUR46MK.js';

package/dist/{DataGrid-Q26F2V5Q.css → DataGrid-SAHEL4SN.css}

@@ -665,6 +665,63 @@ button.crewlet-data-grid__row-link {
   overflow-wrap: anywhere;
 }
 
+/* A VALUE THAT LEADS WITH A PICTURE IS NAMED ON ITS WORDS' LINE. The name
+   stands on the value's first baseline, and a row of a mark beside two lines
+   (a vendor's mark beside a name and its host) reads its baseline off its
+   first item, the picture, whose baseline is its bottom edge: the name stood
+   on the second line. The words after the picture take part in baseline
+   alignment instead, so the row's baseline is theirs; beside a picture no
+   taller than they are, they keep the place they had.
+   ONLY A PICTURE WITH NO WORDS OF ITS OWN: an svg or an img, or a box that
+   holds nothing but one. A monogram avatar or an avatar stack has its
+   initials' baseline already, and its name stood on its line; matched by its
+   role, the shorter words beside it rose to the top of the row, off the
+   picture's centre. */
+:where(.crewlet-data-grid[data-stacked])
+  .crewlet-data-grid__cell
+  > *
+  > :is(svg, img, :has(> :is(svg, img)):not(:has(> :not(svg, img)))):first-child
+  + * {
+  align-self: baseline;
+}
+
+/* THE ROW'S ACTIONS STAND ON ITS FIRST LINE, at its end, as a card's head
+   carries its menu. On a line of their own after every value they sat alone
+   under the names, with nothing beside them to say whose they were. */
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: var(--spacing-2);
+}
+
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action)
+  > .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action) {
+  grid-column: 1;
+}
+
+/* ONLY THE FIRST LINE SHARES ITS WIDTH WITH THE ACTIONS. Their track is sized
+   to them, and a line held to the other track gave that width up with nothing
+   beside it: every line of a card ended a third of a phone's row short of its
+   edge, and its value wrapped. Every line after the first (a value with
+   nothing in it draws none) spans the row. */
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action)
+  > .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action):not(:empty)
+  ~ .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action) {
+  grid-column: 1 / -1;
+}
+
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row
+  > .crewlet-data-grid__cell--action {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+}
+
 /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
    TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
    breaks once: the lead cells first, a zero-height full-width `::after`

package/dist/DataView/index.js

@@ -4,11 +4,11 @@ import '../chunk-K4LZXSKZ.js';
 import '../chunk-7K6LVM5I.js';
 import '../chunk-WANKINXG.js';
 import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
-import '../chunk-EE3DJMSQ.js';
 import '../chunk-NXFTCPF6.js';
+import '../chunk-EE3DJMSQ.js';
 import '../chunk-EC6EUIAD.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';

package/dist/DeepWorkCard/index.js

@@ -1,5 +1,5 @@
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-CV2LU2T2.js';
-import '../chunk-RJWO2PC5.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-35CKF77R.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-ZWCK4N4L.js';
 import '../chunk-RQFRRPV6.js';
 import '../chunk-FLW5U7YS.js';
@@ -7,7 +7,7 @@ import '../chunk-LBGKLYBY.js';
 import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ULYHDP7U.js';

package/dist/Disclosure/Disclosure.d.ts

@@ -35,6 +35,15 @@ export interface DisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     lazy?: boolean | undefined;
     variant?: DisclosureVariant | undefined;
     size?: DisclosureSize | undefined;
+    /**
+     * Its chevron and its panel start on the line its box starts on: the
+     * trigger's inset is taken back at the start, so only its hover ground and
+     * ring reach past the line, and the panel takes no inset of its own. For a
+     * section opened under a line of text (a request's arguments under the
+     * sentence that asks for it), whose chevron and content then stand on the
+     * words' own edge, as a flush Button does.
+     */
+    flush?: boolean | undefined;
     /**
      * The heading the trigger is wrapped in. Defaults to the level the
      * surrounding surface declares, so the same section is an `h3` on a page
@@ -53,4 +62,4 @@ export interface DisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  * controls outside its summary. Two expanders that behave the same and look
  * different is the specific thing a component library exists to stop.
  */
-export declare function Disclosure({ title, meta, count, mono, actions, open: controlledOpen, defaultOpen, onOpenChange, lazy, variant, size, headingLevel, className, children, ...rest }: DisclosureProps): import("react").JSX.Element;
+export declare function Disclosure({ title, meta, count, mono, actions, open: controlledOpen, defaultOpen, onOpenChange, lazy, variant, size, flush, headingLevel, className, children, ...rest }: DisclosureProps): import("react").JSX.Element;

package/dist/Disclosure/index.js

@@ -1,4 +1,4 @@
-export { Disclosure } from '../chunk-LVJGN5II.js';
+export { Disclosure } from '../chunk-NAHA62WD.js';
 export { DisclosureAnatomy } from '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Disclosure-D727FN5X.css → Disclosure-RJSKKO7Z.css}

@@ -217,6 +217,26 @@
   padding: var(--spacing-1) var(--spacing-2);
 }
 
+/*
+ * FLUSH: the chevron and the panel start on the line the words around the
+ * section start on. The trigger's start inset is taken back (its hover ground
+ * and its inset ring reach into the gutter instead, as a flush Button's do),
+ * and the panel keeps no inset of either side. Inset, a section opened under
+ * a sentence put its chevron and its content a step in from that sentence.
+ */
+.crewlet-disclosure--flush .crewlet-disclosure__trigger {
+  margin-inline-start: calc(-1 * var(--spacing-2));
+  width: calc(100% + var(--spacing-2));
+}
+
+.crewlet-disclosure--flush .crewlet-disclosure__bar > .crewlet-disclosure__trigger {
+  width: auto;
+}
+
+.crewlet-disclosure--flush .crewlet-disclosure__panel {
+  padding-inline: 0;
+}
+
 /*
  * An aside: what was considered, not what was decided. The rule down its edge
  * is what lets a reader skip the block by its shape.

package/dist/KeyValueRows/KeyValueRows.d.ts

@@ -0,0 +1,125 @@
+import { type ReactNode } from 'react';
+/** One key and its value: a header and what it carries, a variable and what it is set to. */
+export interface KeyValueRow {
+    /**
+     * Stable across edits, and unique in the list: the row's identity while its
+     * key is typed, emptied or repeated. Two rows may share a key; never an id.
+     */
+    id: string;
+    key: string;
+    value: string;
+}
+/** Every word the rows say, beyond the names of their two columns. */
+export interface KeyValueRowsLabels {
+    /** Names a row's key field: "Header 2". */
+    key: (position: number) => string;
+    /** Names a row's value field by its key: "Value for Authorization", or "Value for header 2" before one is typed. */
+    value: (key: string, position: number) => string;
+    /** Names a row's remove button: "Remove Authorization". */
+    remove: (key: string, position: number) => string;
+    /** The add action's words: "Add header". */
+    add: string;
+    /** Said once a row is removed, since the row's going is otherwise silent: "Removed Authorization". */
+    removed: (key: string, position: number) => string;
+}
+/**
+ * The rows' words in English, made from the two column names: `Header` and
+ * `Value` give "Header 2", "Value for Authorization", "Remove Authorization"
+ * and "Add header". A caller whose key column is an acronym (`URL`) or not in
+ * English passes its own `labels`.
+ */
+export declare function keyValueRowsLabels(keyLabel: string, valueLabel?: string): KeyValueRowsLabels;
+interface KeyValueRowsBaseProps<T extends KeyValueRow> {
+    /**
+     * What the list is: "Headers", "Environment variables". The group's legend,
+     * read on entering it.
+     */
+    label: string;
+    /**
+     * The legend is kept for assistive technology and drawn for nobody, where
+     * the column head or a heading right above already names the list.
+     */
+    hideLabel?: boolean | undefined;
+    /** The key column's head, and the name each key field is called by: "Header", "Variable". */
+    keyLabel: string;
+    /** The value column's head. "Value" by default. */
+    valueLabel?: string | undefined;
+    value: readonly T[];
+    onChange: (next: T[]) => void;
+    keyPlaceholder?: string | undefined;
+    /** The value field's placeholder, the same for every row or per row (a stored secret says so). */
+    valuePlaceholder?: string | ((row: T) => string | undefined) | undefined;
+    /**
+     * The values are secrets (a token, a password): each value field hides what
+     * is typed, and no browser offers a saved password for it.
+     */
+    secret?: boolean | undefined;
+    /**
+     * A row whose key may not change, such as one already saved: its key field
+     * is read only, and its value and its remove button still work.
+     */
+    keyReadOnly?: ((row: T) => boolean) | undefined;
+    /** Why a row's key was refused, said under that key and linked to it. */
+    keyError?: ((row: T, index: number) => ReactNode) | undefined;
+    /** Why a row's value was refused, said under that value and linked to it. */
+    valueError?: ((row: T, index: number) => ReactNode) | undefined;
+    /**
+     * What the list says while it holds no row, in place of the rows. Left out,
+     * an empty list is its legend and its add action.
+     */
+    empty?: ReactNode;
+    /** Where the keys come from, or what shape they take, under the add action. */
+    helper?: ReactNode;
+    /** Why the list as a whole was refused. */
+    error?: ReactNode;
+    disabled?: boolean | undefined;
+    /** Words in place of the ones `keyValueRowsLabels` makes from `keyLabel` and `valueLabel`. */
+    labels?: Partial<KeyValueRowsLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A blank row for the add action. Optional while a row is nothing but its id,
+ * key and value, when the list makes `{ id, key: '', value: '' }` itself;
+ * required once the caller's rows carry a field of their own that a blank row
+ * must set.
+ *
+ * AN EMPTY LIST NAMES NO ROW TYPE. `value={[]}` infers `never`, which no row
+ * is assignable to, so a test of assignability alone asked an empty list for
+ * a `createRow` it has no use for. A list whose row type was never inferred
+ * makes its own blank rows too.
+ */
+type RowMaker<T extends KeyValueRow> = [T] extends [never] ? {
+    createRow?: (() => T) | undefined;
+} : KeyValueRow extends T ? {
+    createRow?: (() => T) | undefined;
+} : {
+    createRow: () => T;
+};
+export type KeyValueRowsProps<T extends KeyValueRow = KeyValueRow> = KeyValueRowsBaseProps<T> & RowMaker<T>;
+/**
+ * Keys and their values, edited as rows under one column head: request
+ * headers, environment variables, any list of names and what each is set to.
+ *
+ * ONE HEAD OVER THE COLUMNS, SO EVERY ROW IS THE SAME ROW. The key and value
+ * columns are named once, above the first row, and each field's own name is
+ * read rather than drawn ("Header 2", "Value for Authorization"). A label
+ * drawn on the first row only stood that row taller than the rest, and the
+ * value and the remove button beside it lost the line they shared.
+ *
+ * AN ERROR MOVES NOTHING BESIDE IT. Every row stands on its fields' top edge,
+ * so a refused key grows its own cell downward and the value and the remove
+ * button stay level with the key's field.
+ *
+ * THE REMOVE BUTTON IS THE FIELDS' HEIGHT, a square at the control step, so a
+ * row is one line of three controls. Add is a flush quiet action under the
+ * rows, its words on the fields' own edge.
+ *
+ * FOCUS NEVER FALLS TO THE PAGE. Add puts it in the new row's key; Remove
+ * moves it to the row that took that row's place, else the one before, else
+ * Add, and says what went.
+ *
+ * Controlled: the rows are the caller's, and every edit hands back a new
+ * list with each untouched row as it was.
+ */
+export declare function KeyValueRows<T extends KeyValueRow = KeyValueRow>(props: KeyValueRowsProps<T>): import("react").JSX.Element;
+export {};

package/dist/KeyValueRows/index.d.ts

@@ -0,0 +1,3 @@
+import './KeyValueRows.css';
+export { KeyValueRows, keyValueRowsLabels } from './KeyValueRows.js';
+export type { KeyValueRow, KeyValueRowsLabels, KeyValueRowsProps } from './KeyValueRows.js';

package/dist/KeyValueRows/index.js

@@ -0,0 +1,12 @@
+export { KeyValueRows, keyValueRowsLabels } from '../chunk-TRZS7DLB.js';
+import '../chunk-O7N6W52M.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/KeyValueRows-US5KW7JK.css

@@ -0,0 +1,44 @@
+/*
+ * KeyValueRows: keys and their values as rows under one column head
+ * (KeyValueRows.tsx).
+ */
+
+/* The rows, then Add under them, a row's gap apart. */
+.crewlet-key-value-rows__body,
+.crewlet-key-value-rows__table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * EVERY ROW STANDS ON ITS FIELDS' TOP EDGE, so a key's error grows its own
+ * cell downward and nothing beside it moves. The last track is the remove
+ * button's, a square the fields' height, and the head keeps it empty so the
+ * value's name stands over the value column.
+ */
+.crewlet-key-value-rows__head,
+.crewlet-key-value-rows__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--size-control-md);
+  align-items: start;
+  gap: var(--spacing-2);
+}
+
+/* The head stands over the first row at a field label's distance from its field. */
+.crewlet-key-value-rows__head {
+  margin-block-end: calc(var(--spacing-1) - var(--spacing-2));
+}
+
+.crewlet-key-value-rows__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+/* Add hugs its words, on the fields' start edge, rather than spanning the list. */
+.crewlet-key-value-rows__add {
+  display: flex;
+}

package/dist/LogoSlot/index.js

@@ -1,8 +1,8 @@
-export { LogoSlot, LogoSlotGroup } from '../chunk-6SFDL4QH.js';
+export { LogoSlot, LogoSlotGroup } from '../chunk-P3LNA6G4.js';
 import '../chunk-KQWJWTED.js';
-import '../chunk-2ZSCHQOA.js';
-import '../chunk-LBGKLYBY.js';
+import '../chunk-WMSXPF7T.js';
 import '../chunk-7W3LYIOC.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/MarkdownEditor/index.js

@@ -1,6 +1,6 @@
 export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-TQKQRS2J.js';
 import '../chunk-NXFTCPF6.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/MemberPicker/MemberPicker.d.ts

@@ -0,0 +1,86 @@
+import { type ReactNode } from 'react';
+/** One member a group holds: an agent, a person. */
+export interface MemberPickerMember {
+    /** Stable identity, and what the value names. */
+    key: string;
+    /** The member's name: its checkbox's name. */
+    name: string;
+    /** One quiet line under the name: what it does, its role. */
+    detail?: ReactNode;
+    /** Its face, decorative beside the name: an avatar. */
+    avatar?: ReactNode;
+}
+/** A group of members granted as one: a team, whose grant reaches members who join it later. */
+export interface MemberPickerGroup {
+    key: string;
+    /** The group's name: its checkbox's name. */
+    label: string;
+    members: readonly MemberPickerMember[];
+}
+/**
+ * What is chosen: whole groups, members on their own, and members left out of
+ * a chosen group. A member is in when its group is chosen and it is not left
+ * out, or when it is chosen on its own.
+ */
+export interface MemberPickerValue {
+    groups: readonly string[];
+    members: readonly string[];
+    except: readonly string[];
+}
+export interface MemberPickerLabels {
+    /** Under a chosen group's name. */
+    later: string;
+    /** A member's mark while its group reaches it: "Through Product". */
+    through: (group: string) => string;
+    /** A member's mark once left out of its chosen group. */
+    leftOut: string;
+    /** The live count: "4 of 6 agents". */
+    summary: (chosen: number, total: number) => string;
+    /** A group's member count: "6 agents". */
+    count: (n: number) => string;
+    /** The expand control's name: "Show the agents in Product". */
+    expand: (group: string) => string;
+}
+export declare const MEMBER_PICKER_LABELS: MemberPickerLabels;
+export interface MemberPickerProps {
+    /** Names the picker for a screen reader: "Who gets Sentry". */
+    label: string;
+    groups: readonly MemberPickerGroup[];
+    /** Members in no group, listed after the groups. */
+    ungrouped?: readonly MemberPickerMember[] | undefined;
+    value: MemberPickerValue;
+    onChange: (value: MemberPickerValue) => void;
+    /** Groups open at first; every group with a member chosen on its own or left out opens too. */
+    defaultOpen?: readonly string[] | undefined;
+    labels?: Partial<MemberPickerLabels> | undefined;
+    className?: string | undefined;
+}
+/** Every member the value reaches, each once. */
+export declare function chosenMembers(groups: readonly MemberPickerGroup[], ungrouped: readonly MemberPickerMember[], value: MemberPickerValue): Set<string>;
+/**
+ * Who gets something, as one list: each group a row with a three-state box,
+ * its member count and, once chosen, that it reaches members who join later;
+ * each group opens to its members, every member a row with its face, its name
+ * and one quiet line. A member a chosen group reaches says so ("Through
+ * Product"), and unticking it leaves it out of that group's grant rather than
+ * dropping the group; a member of an unchosen group is chosen on its own. The
+ * count of everyone reached stays at the top as the choice moves.
+ *
+ * GROUP FIRST, MEMBERS AS OVERRIDES, because a group's grant is the one that
+ * survives the organization changing: it reaches whoever joins, where a list
+ * of names reaches only the names. So choosing a group clears the overrides
+ * inside it, and unchoosing it drops them too, leaving no stale exception.
+ *
+ * A GROUP'S BOX SAYS WHETHER THE GROUP ITSELF IS CHOSEN: ticked when it is
+ * and it reaches every member, mixed when it is chosen with members left out,
+ * or when only some of its members are chosen on their own (even all of them,
+ * since a member who joins later would not be), and empty when nobody in it
+ * is reached. Ticking a mixed group chooses it whole.
+ *
+ * NATIVE CHECKBOXES, a group's partly chosen state set as the DOM's own
+ * `indeterminate`, so a screen reader says "mixed" and Space toggles as the
+ * platform does. The open control is the kit's IconButton with
+ * `aria-expanded`. Ids come from positions, never keys, since a key may hold
+ * a space and an id reference list splits on whitespace.
+ */
+export declare function MemberPicker({ label, groups, ungrouped, value, onChange, defaultOpen, labels: overrides, className, }: MemberPickerProps): import("react").JSX.Element;

package/dist/MemberPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './MemberPicker.css';
+export { MemberPicker, MEMBER_PICKER_LABELS, chosenMembers } from './MemberPicker.js';
+export type { MemberPickerGroup, MemberPickerLabels, MemberPickerMember, MemberPickerProps, MemberPickerValue, } from './MemberPicker.js';

package/dist/MemberPicker/index.js

@@ -0,0 +1,11 @@
+export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers } from '../chunk-KA4RBKQV.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-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';