@crewlethq/ui 0.86.0 → 0.87.0

package/dist/ArtifactCard/index.js

@@ -1,12 +1,12 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-7IWZN5Q2.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-CWCQCOIG.js';
 import '../chunk-I4IUX3JF.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-U2IQNDDR.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
+import '../chunk-U2IQNDDR.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-J5T5TDM2.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-DOY3KC6I.js';

package/dist/DeliveryReceipt/DeliveryReceipt.d.ts

@@ -0,0 +1,85 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One seat a message reached, or will reach. */
+export interface DeliveryReceiptRecipient {
+    /** A stable key for the seat: its handle. */
+    id: string;
+    /** How the reader knows the seat: "pm", "Product Manager". */
+    name: string;
+    /**
+     * Why the message reached the seat, in the caller's words, drawn in
+     * brackets after the seats that share it: "every message". Leave it out
+     * where the reason needs no note (a mention, a reply to their thread).
+     */
+    reason?: string | undefined;
+    /** The seat has answered: it replied in the thread, or in the conversation. */
+    answered?: boolean | undefined;
+}
+/**
+ * `sent` is a receipt under a message that was posted ("Reached pm"); `draft`
+ * is the composer's word on what a post will do before it is sent ("Will
+ * reach pm").
+ */
+export type DeliveryReceiptTense = "sent" | "draft";
+export interface DeliveryReceiptLabels {
+    /** The reach of a posted message: "Reached pm; qa, sre (every message)". */
+    reached: (who: string) => string;
+    /** The reach of a draft: "Will reach pm". */
+    reaches: (who: string) => string;
+    /** A posted message that reached no agent. */
+    none: string;
+    /** A draft that will reach no agent. */
+    noneDraft: string;
+    /** The seats that answered: "pm answered". */
+    answered: (who: string) => string;
+    /** The seats in one reason's group: "qa, sre". */
+    list: (names: readonly string[]) => string;
+    /** One reason's note: "(every message)". */
+    reason: (words: string) => string;
+    /** The groups of different reasons, joined: "pm; qa, sre (every message)". */
+    groups: (groups: readonly string[]) => string;
+    /** A routing cap left seats out. */
+    truncated: string;
+}
+export declare const DELIVERY_RECEIPT_LABELS: DeliveryReceiptLabels;
+export interface DeliveryReceiptProps extends Omit<HTMLAttributes<HTMLElement>, "role" | "children"> {
+    /** The seats, in the order the routing reached them. Empty is "no agent". */
+    recipients: readonly DeliveryReceiptRecipient[];
+    /** `sent` (the default) under a message, `draft` over a composer. */
+    tense?: DeliveryReceiptTense | undefined;
+    /**
+     * A routing cap left seats out (a whole-room address in a very large
+     * room), so the list is not everybody the message named.
+     */
+    truncated?: boolean | undefined;
+    /**
+     * A short sentence after a "no agent" line, saying why or what to do:
+     * "This room has no agent members. Mention one to ask it."
+     */
+    hint?: ReactNode;
+    /**
+     * Whether the line is its own polite live region (false by default). A
+     * composer's draft line that changes as a mention is typed is announced
+     * by passing true; a receipt in a transcript is not, since a log that
+     * announced every receipt would talk over the conversation.
+     */
+    announce?: boolean | undefined;
+    labels?: Partial<DeliveryReceiptLabels> | undefined;
+}
+/**
+ * Who a person's message reached, and who answered: "Reached pm", then "pm
+ * answered"; "Reached qa, sre (every message)"; "Reached no agent". Over a
+ * composer, the same line in the future tense says who a post WILL reach
+ * before it is sent.
+ *
+ * QUIET BY DESIGN. It sits in a message's footer at the compact step in the
+ * tertiary ink, because it is a fact a person checks rather than reads: the
+ * one tone it raises is the warning on a message that reached no agent, the
+ * case where a person would otherwise wait for an answer nobody was asked
+ * for. Colour is never alone: the mark and the words say it.
+ *
+ * ONE STOP TO A SCREEN READER: the parts are spans in one paragraph, so a
+ * reader moving through the log hears "Reached pm. pm answered" at once. The
+ * middle dot the eye reads between the parts is hidden from it, and a full
+ * stop only it hears stands in its place; the marks are hidden too.
+ */
+export declare function DeliveryReceipt({ recipients, tense, truncated, hint, announce, labels: overrides, className, ...rest }: DeliveryReceiptProps): import("react").JSX.Element;

package/dist/DeliveryReceipt/index.d.ts

@@ -0,0 +1,4 @@
+import "../ChatMessage/ChatScale.css";
+import "./DeliveryReceipt.css";
+export { DELIVERY_RECEIPT_LABELS, DeliveryReceipt } from "./DeliveryReceipt.js";
+export type { DeliveryReceiptLabels, DeliveryReceiptProps, DeliveryReceiptRecipient, DeliveryReceiptTense, } from "./DeliveryReceipt.js";

package/dist/DeliveryReceipt/index.js

@@ -0,0 +1,3 @@
+export { DELIVERY_RECEIPT_LABELS, DeliveryReceipt } from '../chunk-NGJWRR7E.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DeliveryReceipt-RMZW2DMT.css

@@ -0,0 +1,46 @@
+/*
+ * Who a person's message reached and who answered, under its words; and the
+ * same line over a composer, before the message is sent.
+ */
+
+.crewlet-delivery-receipt {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--spacing-1);
+  max-width: 100%;
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-delivery-receipt__part {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-delivery-receipt__mark {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-delivery-receipt__answered {
+  color: var(--color-text-secondary);
+}
+
+/* The one raised tone: a message nobody was asked to answer. Its mark takes
+   the warning ink, its words the secondary ink; the hint stays quiet. */
+.crewlet-delivery-receipt--none {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-delivery-receipt--none .crewlet-delivery-receipt__mark {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-delivery-receipt__hint {
+  color: var(--color-text-tertiary);
+}

package/dist/InboxList/InboxList.d.ts

@@ -73,13 +73,23 @@ export type InboxRowTone = 'default' | 'danger';
 export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'onClick' | 'title'> {
     /** Who the row is from: a seat's or a person's name. */
     title: ReactNode;
-    /** A word after the name where the row is not a plain question or update: "coding run", "stopped". */
+    /**
+     * After the name, in the quiet ink: a word where the row is not a plain
+     * question or update ("coding run", "stopped"), or what the person did
+     * ("replied to a thread in Design"). The name and the qualifier read as one
+     * run of words that wraps to a second line before it stops, so a long
+     * qualifier never hides the name.
+     */
     qualifier?: ReactNode;
     /** `danger` sets the qualifier in the danger ink, for a seat that has stopped. */
     qualifierTone?: InboxRowTone | undefined;
     /** At the end of the first line: when it arrived. */
     meta?: ReactNode;
-    /** Before the words: an avatar, drawn at the target size. */
+    /**
+     * Before the words: an avatar or a mark, at the target size. Its slot is at
+     * least a target square and grows to fit a larger mark, such as a 32px face,
+     * with the name's line beside its top.
+     */
     leading?: ReactNode;
     /** What the row says, in up to three lines. */
     children?: ReactNode;
@@ -159,7 +169,8 @@ export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
  * caller names in the head (`status`): every word stays legible, and the
  * state is never carried by a decoration alone.
  *
- * NOTHING IS CUT AT THE EDGE. The name ellipsizes, the time never wraps, and
+ * NOTHING IS CUT AT THE EDGE. The name and its qualifier wrap to two lines
+ * before they stop, the time keeps a column of its own and never wraps, and
  * the words take up to three lines before they stop, so a row says what it is
  * rather than its first few words.
  */

package/dist/InboxList/index.js

@@ -1,4 +1,4 @@
-export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-F6ZUM66S.js';
+export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-VKNZQB2G.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-6C7GQOBV.js';
 import '../chunk-PCAT2EFB.js';

package/dist/{InboxList-X5Q5WWAI.css → InboxList-NVPIL3WU.css}

@@ -223,19 +223,36 @@
 }
 
 /*
- * The avatar is centred on the head's line, the name it belongs to: its box
- * is one line tall and the avatar, a target taller than the line, overflows
- * it evenly into the control's top pad. Hung from the line's top by a pixel
- * it stood 3.6px under the name's middle, its top a step further from the
- * row's edge than its side.
+ * THE LEADING SLOT FITS WHAT IT HOLDS. It is at least a target square (and at
+ * least a line tall), with its mark centred in it, and it grows to a larger
+ * mark, such as a 32px face, rather than letting it spill: a fixed one-line
+ * box let a 32px face overflow it by 8px, up and to the left, until it all but
+ * touched the row's edge.
+ *
+ * THE NAME'S LINE IS CENTRED ON A TARGET-SIZED MARK by moving the words down
+ * rather than the mark up: the words start half the difference between the
+ * target and a line lower, and the control's top pad is that much shorter, so
+ * a row with a target-sized avatar keeps its height and its name where they
+ * were, with the avatar inside the control instead of over its pad. A larger
+ * mark hangs from the same top, beside the name's line and the one under it.
  */
+.crewlet-inbox-row__control--leading {
+  --crewlet-inbox-row-lift: max(0px, (var(--size-target-min) - 1lh) / 2);
+
+  padding-top: calc(var(--spacing-2) + var(--spacing-1) / 2 - var(--crewlet-inbox-row-lift));
+}
+
+.crewlet-inbox-row__control--leading > .crewlet-inbox-row__main {
+  padding-top: var(--crewlet-inbox-row-lift);
+}
+
 .crewlet-inbox-row__leading {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--size-target-min);
-  height: 1lh;
+  min-width: var(--size-target-min);
+  min-height: max(var(--size-target-min), 1lh);
 }
 
 .crewlet-inbox-row__main {
@@ -245,24 +262,49 @@
   min-width: 0;
 }
 
+/*
+ * THE HEAD IS ONE RUN OF WORDS: who, then what they did, wrapping as words do
+ * and stopping at two lines with an ellipsis. The name comes first, so it is
+ * the last thing a long qualifier can push out of sight. As one line of boxes
+ * the name was the only one allowed to shrink, so a qualifier longer than a
+ * word ("replied to a thread in Product Manager") squeezed the name to
+ * nothing and pushed the time past the row's edge.
+ *
+ * THE TIME FLOATS AT THE END OF THE FIRST LINE, so only that line gives up
+ * room to it and the second runs the row's full width: "replied to a thread
+ * in #engineering" keeps the room's name, the part of the line most worth
+ * reading, where a column of its own took the time's width from both lines.
+ * The float sits in a block of its own inside the clamp, which is where every
+ * engine lays a float out and still counts the clamped lines.
+ */
 .crewlet-inbox-row__head {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-1);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   min-width: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
 }
 
-.crewlet-inbox-row__title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.crewlet-inbox-row__head-text {
+  display: block;
+}
+
+/* The time (and any status), in the head's own line box, so the time sits on the name's baseline. */
+.crewlet-inbox-row__head-end {
+  float: inline-end;
+  margin-inline-start: var(--spacing-2);
   white-space: nowrap;
+}
+
+.crewlet-inbox-row__title {
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
 }
 
 .crewlet-inbox-row__qualifier {
-  flex: none;
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
@@ -272,8 +314,6 @@
 }
 
 .crewlet-inbox-row__meta {
-  flex: none;
-  margin-inline-start: auto;
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -321,21 +361,12 @@
   color: var(--color-text-secondary);
 }
 
+/* At the end of the first line, before the time when the row has both. */
 .crewlet-inbox-row__status {
   display: inline-flex;
-  flex: none;
   align-items: center;
 }
 
-/* With a status, the time stays at the end and the status sits beside it. */
-.crewlet-inbox-row__status + .crewlet-inbox-row__meta {
-  margin-inline-start: 0;
-}
-
-.crewlet-inbox-row__head > .crewlet-inbox-row__status {
-  margin-inline-start: auto;
-}
-
 /*
  * What came of the row: a glyph in the tone's ink, then words in the
  * secondary ink, on one line that wraps rather than cuts.
@@ -391,7 +422,9 @@
 
 /*
  * The task, under the words and lined up with them: the control's start pad,
- * the leading slot and the gap after it.
+ * a target-sized leading slot and the gap after it. The task sits outside the
+ * control, so it lines up with the words for a mark of the target size, the
+ * size `leading` asks for.
  */
 .crewlet-inbox-row__aside {
   min-width: 0;

package/dist/ListDetail/index.js

@@ -1,2 +1,2 @@
-export { ListDetail } from '../chunk-SNJM5KPV.js';
+export { ListDetail } from '../chunk-P33VNG7Q.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ListDetail-Q7SFVKSO.css → ListDetail-WXBCLONL.css}

@@ -65,6 +65,12 @@
   min-height: 0;
 }
 
+/* A LIST THAT GROWS SCROLLS IN ITS OWN COLUMN, whatever it holds. The pane
+   left the scrolling to its content, which a DirectoryList does for its
+   groups and an InboxList does not: an activity list taller than the screen
+   ran past the pane's end, where the screen clipped its later rows and its
+   "older" link, with nothing to scroll them into view. A list that scrolls
+   itself fills the pane and never makes it overflow. */
 .crewlet-list-detail__list {
   display: flex;
   flex-direction: column;
@@ -72,6 +78,7 @@
   min-height: 0;
   padding-right: var(--crewlet-list-detail-gutter);
   border-right: 1px solid var(--color-border-default);
+  overflow-y: auto;
 }
 
 /* A DIRECTORY RUNS TO THE HAIRLINE. A DirectoryList is navigation: its lines
@@ -106,7 +113,6 @@
   .crewlet-list-detail__list {
     padding-right: 0;
     border-right: 0;
-    overflow-y: auto;
   }
 
   /* The list is the pane that scrolls now, and takes the detail's end where

package/dist/PresenterView/index.js

@@ -1,6 +1,6 @@
-export { PresenterView, formatStopwatch } from '../chunk-WCJTOKTY.js';
-import '../chunk-O6EV6GKI.js';
+export { PresenterView, formatStopwatch } from '../chunk-LMEMH6DO.js';
 import '../chunk-5AJR6X75.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/RailList/index.js

@@ -1,6 +1,6 @@
-export { RAIL_LIST_LABELS, RailList } from '../chunk-REWKR3S4.js';
-import '../chunk-BRK3HXGZ.js';
+export { RAIL_LIST_LABELS, RailList } from '../chunk-M576OESX.js';
 import '../chunk-3IWZVEXA.js';
+import '../chunk-BRK3HXGZ.js';
 import '../chunk-O5CEG7TQ.js';
 import '../chunk-YGRTX67J.js';
 import '../chunk-TEV5REGB.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-3AMWXJQX.js';
+export { RichEditor, preloadRichEditor } from '../chunk-AUSFKGKL.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-KBZO4B33.js';

package/dist/SetupWizard/index.js

@@ -1,6 +1,6 @@
-export { SetupWizard } from '../chunk-WRZPO4YL.js';
-import '../chunk-TMML7BHT.js';
+export { SetupWizard } from '../chunk-3BVNNQZY.js';
 import '../chunk-FPDIHEM4.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-NAHA62WD.js';

package/dist/{chunk-3AMWXJQX.js → chunk-AUSFKGKL.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-VGNB35NJ.js').then(
+  loading ??= import('./Editor-5D5Z3LBQ.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/chunk-NGJWRR7E.js

@@ -0,0 +1,106 @@
+import { VisuallyHidden } from './chunk-UT6CW3C7.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChatScale-L4SIHSKL.css';
+import './DeliveryReceipt-RMZW2DMT.css';
+import { CheckGlyph, TriangleAlertGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DELIVERY_RECEIPT_LABELS = {
+  reached: (who) => `Reached ${who}`,
+  reaches: (who) => `Will reach ${who}`,
+  none: "Reached no agent",
+  noneDraft: "Will reach no agent",
+  answered: (who) => `${who} answered`,
+  list: (names) => names.join(", "),
+  reason: (words) => `(${words})`,
+  groups: (groups) => groups.join("; "),
+  truncated: "Some seats were not reached"
+};
+function reachOf(recipients, labels) {
+  const order = [];
+  const byReason = /* @__PURE__ */ new Map();
+  for (const r of recipients) {
+    const key = r.reason ?? "";
+    const names = byReason.get(key);
+    if (names) {
+      names.push(r.name);
+    } else {
+      order.push(key);
+      byReason.set(key, [r.name]);
+    }
+  }
+  return labels.groups(
+    order.map((key) => {
+      const list = labels.list(byReason.get(key) ?? []);
+      return key ? `${list} ${labels.reason(key)}` : list;
+    })
+  );
+}
+function DeliveryReceipt({
+  recipients,
+  tense = "sent",
+  truncated = false,
+  hint,
+  announce = false,
+  labels: overrides,
+  className,
+  ...rest
+}) {
+  const labels = overrides ? { ...DELIVERY_RECEIPT_LABELS, ...overrides } : DELIVERY_RECEIPT_LABELS;
+  const none = recipients.length === 0;
+  const answered = tense === "sent" ? recipients.filter((r) => r.answered).map((r) => r.name) : [];
+  const reach = none ? tense === "draft" ? labels.noneDraft : labels.none : (tense === "draft" ? labels.reaches : labels.reached)(
+    reachOf(recipients, labels)
+  );
+  const parts = [
+    {
+      key: "reach",
+      mark: none ? /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "xs" }) : void 0,
+      words: reach
+    }
+  ];
+  if (truncated && !none)
+    parts.push({ key: "truncated", words: labels.truncated });
+  if (answered.length > 0) {
+    parts.push({
+      key: "answered",
+      className: "crewlet-delivery-receipt__answered",
+      mark: /* @__PURE__ */ jsx(CheckGlyph, { size: "xs" }),
+      words: labels.answered(labels.list(answered))
+    });
+  }
+  if (none && hint)
+    parts.push({
+      key: "hint",
+      className: "crewlet-delivery-receipt__hint",
+      words: hint
+    });
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...rest,
+      role: announce ? "status" : void 0,
+      "data-tense": tense,
+      className: cx(
+        "crewlet-delivery-receipt",
+        none && "crewlet-delivery-receipt--none",
+        className
+      ),
+      children: parts.map((part, i) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cx("crewlet-delivery-receipt__part", part.className),
+          children: [
+            i > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-delivery-receipt__dot", "aria-hidden": "true", children: "\xB7" }) : null,
+            part.mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-delivery-receipt__mark", "aria-hidden": "true", children: part.mark }) : null,
+            /* @__PURE__ */ jsx("span", { children: part.words }),
+            i < parts.length - 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: ". " }) : null
+          ]
+        },
+        part.key
+      ))
+    }
+  );
+}
+
+export { DELIVERY_RECEIPT_LABELS, DeliveryReceipt };

package/dist/{chunk-SNJM5KPV.js → chunk-P33VNG7Q.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './ListDetail-Q7SFVKSO.css';
+import './ListDetail-WXBCLONL.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function ListDetail({ list, children, showing = "list", className, ...rest }) {

package/dist/{chunk-F6ZUM66S.js → chunk-VKNZQB2G.js}

@@ -4,7 +4,7 @@ import { usePresence, releaseFocus } from './chunk-PCAT2EFB.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './InboxList-X5Q5WWAI.css';
+import './InboxList-NVPIL3WU.css';
 import { useId, useState, useRef, useLayoutEffect, useEffect, useCallback, cloneElement, Children, isValidElement } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -222,60 +222,81 @@ function InboxRow({
     told.current = true;
     onLeft?.();
   }, [gone, onLeft]);
+  const ids = useId();
+  const part = (name) => `${ids}-${name}`;
+  const hasQualifier = qualifier !== void 0;
+  const hasStatus = status !== void 0 && status !== null;
+  const hasMeta = meta !== void 0;
+  const hasOutcome = outcome !== void 0 && outcome !== null;
+  const labelledBy = [
+    leading === void 0 ? null : part("leading"),
+    part("title"),
+    hasQualifier ? part("qualifier") : null,
+    hasStatus || hasMeta ? part("end") : null,
+    part("text"),
+    hasOutcome ? part("outcome") : null,
+    unread ? part("unread") : null,
+    done ? part("done") : null
+  ].filter(Boolean).join(" ");
   const contents = /* @__PURE__ */ jsxs(Fragment, { children: [
     leading === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__leading", children: leading }),
+      /* @__PURE__ */ jsx("span", { id: part("leading"), className: "crewlet-inbox-row__leading", children: leading }),
       " "
     ] }),
     /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__main", children: [
-      /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__head", children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__title", children: title }),
-        qualifier === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__head", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__head-text", children: [
+        hasStatus || hasMeta ? /* @__PURE__ */ jsxs("span", { id: part("end"), className: "crewlet-inbox-row__head-end", children: [
+          hasStatus ? /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__status", children: status }) : null,
+          hasStatus && hasMeta ? " " : null,
+          hasMeta ? /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__meta", children: meta }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { id: part("title"), className: "crewlet-inbox-row__title", children: title }),
+        hasQualifier ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " ",
-          /* @__PURE__ */ jsx("span", { className: cx("crewlet-inbox-row__qualifier", qualifierTone === "danger" && "crewlet-inbox-row__qualifier--danger"), children: qualifier })
-        ] }),
-        status === void 0 || status === null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__status", children: status })
-        ] }),
-        meta === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__meta", children: meta })
-        ] })
-      ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: part("qualifier"),
+              className: cx("crewlet-inbox-row__qualifier", qualifierTone === "danger" && "crewlet-inbox-row__qualifier--danger"),
+              children: qualifier
+            }
+          )
+        ] }) : null
+      ] }) }),
       " ",
-      /* @__PURE__ */ jsxs("span", { className: "crewlet-inbox-row__text", children: [
+      /* @__PURE__ */ jsxs("span", { id: part("text"), className: "crewlet-inbox-row__text", children: [
         children,
         excerpt === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
           " ",
           /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__excerpt", children: excerpt })
         ] })
       ] }),
-      outcome === void 0 || outcome === null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasOutcome ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
-        /* @__PURE__ */ jsxs("span", { className: cx("crewlet-inbox-row__outcome", `crewlet-inbox-row__outcome--${outcomeTone}`), children: [
+        /* @__PURE__ */ jsxs("span", { id: part("outcome"), className: cx("crewlet-inbox-row__outcome", `crewlet-inbox-row__outcome--${outcomeTone}`), children: [
           outcomeIcon === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "crewlet-inbox-row__outcome-icon", children: outcomeIcon }),
           /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__outcome-text", children: outcome })
         ] })
-      ] }),
+      ] }) : null,
       unread ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: unreadLabel })
+        /* @__PURE__ */ jsx(VisuallyHidden, { id: part("unread"), children: unreadLabel })
       ] }) : null,
       done ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: doneLabel })
+        /* @__PURE__ */ jsx(VisuallyHidden, { id: part("done"), children: doneLabel })
       ] }) : null
     ] })
   ] });
   const controlClass = cx(
     "crewlet-inbox-row__control",
+    leading !== void 0 && "crewlet-inbox-row__control--leading",
     unread && "crewlet-inbox-row__control--unread",
     actionable && "crewlet-inbox-row__control--actionable",
     done && "crewlet-inbox-row__control--done"
   );
   const current = selected ? "true" : void 0;
-  const control = href !== void 0 ? /* @__PURE__ */ jsx("a", { className: controlClass, href, "aria-current": current, onClick, children: contents }) : /* @__PURE__ */ jsx("button", { type: "button", className: controlClass, "aria-current": current, onClick, children: contents });
+  const control = href !== void 0 ? /* @__PURE__ */ jsx("a", { className: controlClass, href, "aria-current": current, "aria-labelledby": labelledBy, onClick, children: contents }) : /* @__PURE__ */ jsx("button", { type: "button", className: controlClass, "aria-current": current, "aria-labelledby": labelledBy, onClick, children: contents });
   if (gone) return null;
   return /* @__PURE__ */ jsx(
     "li",