@crewlethq/ui 0.87.0 → 0.89.0

package/dist/ActivityLine/ActivityLine.d.ts

@@ -14,6 +14,13 @@ export interface ActivityLineProps extends Omit<HTMLAttributes<HTMLDivElement>,
      * `working` by default.
      */
     workingLabel?: string | undefined;
+    /**
+     * The agent has not started on it yet: the request waits behind something
+     * it is already doing, and `working` says so ("Product Manager is queued
+     * behind its current task"). Drawn as a queued `ThinkingIndicator`, still,
+     * until the work starts.
+     */
+    queued?: boolean | undefined;
 }
 /**
  * Who is typing and which agent is working, in one quiet line under a
@@ -24,4 +31,4 @@ export interface ActivityLineProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * `ThinkingIndicator`, which announces its label once and keeps its changing
  * steps to the eye.
  */
-export declare function ActivityLine({ typing, working, workingLabel, className, ...rest }: ActivityLineProps): import("react").JSX.Element;
+export declare function ActivityLine({ typing, working, workingLabel, queued, className, ...rest }: ActivityLineProps): import("react").JSX.Element;

package/dist/ActivityLine/index.js

@@ -1,4 +1,4 @@
-export { ActivityLine } from '../chunk-C4256UXE.js';
-import '../chunk-ED4A6Q24.js';
+export { ActivityLine } from '../chunk-V7N5XWZ6.js';
+import '../chunk-3OIVYHAA.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,5 +1,5 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-XTJHMP3W.js';
-import '../chunk-3XDT5ZWL.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-75EGNXPZ.js';
+import '../chunk-3N3XK2G5.js';
 import '../chunk-BVML4UVB.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-YJQXESOJ.js';

package/dist/ArtifactCard/index.js

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

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-K2HEYQJL.js';
+export { AvatarPicker } from '../chunk-22CU7V4J.js';
 import '../chunk-SHH7UD5U.js';
 import '../chunk-EC6EUIAD.js';
-import '../chunk-LNQSNXGJ.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-LNQSNXGJ.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';

package/dist/List/List.d.ts

@@ -72,6 +72,19 @@ export interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
     leading?: ReactNode;
     /** Drawn after it: a time, a count, a chevron. */
     trailing?: ReactNode;
+    /**
+     * A control of its own at the row's end (Join, a switch), drawn BESIDE the
+     * row's link or button rather than inside it: a control inside another is
+     * one a keyboard cannot reach and a screen reader announces as part of the
+     * row's name. Not part of the row's hover or its name.
+     */
+    action?: ReactNode;
+    /**
+     * A line under the row, across its whole width: what pressing `action` came
+     * to when that needs saying (a refusal, a next step). Not part of the row's
+     * name either.
+     */
+    note?: ReactNode;
     tone?: ListItemTone | undefined;
     /** Read in place of the danger rail, so colour is never the only signal. */
     dangerLabel?: string | undefined;
@@ -93,4 +106,4 @@ export interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
  * it, which is what stops a keyboard reader seeing a ring around a row they
  * cannot activate.
  */
-export declare function ListItem({ href, onClick, leading, trailing, tone, dangerLabel, selected, asChild, className, children, ...rest }: ListItemProps): import("react").JSX.Element;
+export declare function ListItem({ href, onClick, leading, trailing, action, note, tone, dangerLabel, selected, asChild, className, children, ...rest }: ListItemProps): import("react").JSX.Element;

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-PS5ZYIA6.js';
+export { List, ListItem } from '../chunk-A7UOYLK3.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-JOELBLTU.css → List-ZZF6ZHRT.css}

@@ -210,6 +210,38 @@
   max-inline-size: var(--size-measure-wide);
 }
 
+/*
+ * A ROW WITH A CONTROL OF ITS OWN (`action`) or a line under it (`note`): the
+ * row's link or button takes the room and the action stands beside it, at the
+ * row's end and on its middle, so the two are two controls and the action is
+ * never inside the row's hover or its name. The note wraps under both, at the
+ * row's own inset.
+ */
+.crewlet-list__item--split {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--spacing-2);
+}
+
+.crewlet-list__item--split > .crewlet-list__row {
+  flex: 1 1 0;
+}
+
+.crewlet-list__action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-inline-end: var(--spacing-3);
+}
+
+.crewlet-list__note {
+  flex-basis: 100%;
+  min-width: 0;
+  padding: 0 var(--spacing-3) var(--spacing-2);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*

package/dist/MentionMenu/index.js

@@ -1,3 +1,3 @@
-export { MENTION_MENU_LABELS, MentionMenu, mentionQuery } from '../chunk-3BRXEMYT.js';
-import '../chunk-EALRMP7N.js';
+export { MENTION_MENU_LABELS, MentionMenu, mentionQuery } from '../chunk-G7SAFRSJ.js';
+import '../chunk-6TD2PCZB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PersonRow/PersonRow.d.ts

@@ -36,6 +36,13 @@ export interface PersonRowButtonProps extends PersonRowLook, Omit<ButtonHTMLAttr
     selected?: boolean | undefined;
     /** Pressing the row. */
     onSelect?: (() => void) | undefined;
+    /**
+     * A control of the row's own at its end (a `Switch` that sets how this
+     * member follows a room), drawn BESIDE the row's button rather than inside
+     * it: a control inside a button cannot be reached by Tab, and is read as
+     * part of the row's name. Pressing the row still does what `onSelect` says.
+     */
+    action?: ReactNode;
 }
 export interface PersonRowOptionProps extends PersonRowLook, Omit<LiHTMLAttributes<HTMLLIElement>, 'children'> {
     /**

package/dist/PersonRow/index.js

@@ -1,2 +1,2 @@
-export { PersonRow } from '../chunk-EALRMP7N.js';
+export { PersonRow } from '../chunk-6TD2PCZB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PersonRow-V5GTPNVP.css → PersonRow-ZR6US2QJ.css}

@@ -147,6 +147,31 @@
   color: var(--color-text-on-accent);
 }
 
+/*
+ * A ROW WITH A CONTROL OF ITS OWN (`action`): the row's button takes the room
+ * and the control stands after it on the row's middle, outside the button's
+ * hover, so the two read as two controls.
+ */
+.crewlet-person-row-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-person-row-group > .crewlet-person-row {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.crewlet-person-row__action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-inline-end: var(--spacing-2);
+}
+
 /*
  * FORCED COLORS repaints every background to Canvas, which took the chosen
  * tint and the arrows' row with it. An outline is the one mark the mode

package/dist/RoomRow/RoomRow.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import { type ListItemProps } from '../List/index.js';
+export interface RoomRowProps extends Omit<ListItemProps, 'children' | 'href' | 'onClick' | 'asChild' | 'leading' | 'trailing' | 'tone' | 'dangerLabel'> {
+    /** The room's own address: the whole row opens it. */
+    href: string;
+    /**
+     * The room's kind, as its glyph at the small step (a hash, a lock, a team's
+     * mark). Decorative: the name says which room it is, and a kind that matters
+     * to the reader is said in `tags` or `facts`.
+     */
+    mark: ReactNode;
+    /** The room's name. A long one wraps rather than running under the action. */
+    name: ReactNode;
+    /** Small labels after the name: `Tag`s such as "Joined" or "Archived". */
+    tags?: ReactNode;
+    /** What the room is about now. One line, cut with an ellipsis. */
+    topic?: ReactNode;
+    /**
+     * The quiet facts under it, in order: how many are in it, when it last
+     * spoke, a sentence about who may join. Joined with a middle dot that a
+     * screen reader skips; an empty or missing fact is left out.
+     */
+    facts?: readonly ReactNode[] | undefined;
+}
+/**
+ * A room as a directory of rooms lists it: its kind's mark and its name with
+ * its state, what it is about, a line of facts, and one control at the row's
+ * end (Join, Open) beside the row's own link.
+ *
+ * A LIST ROW, NOT A CARD. It is `List.Item` with its words arranged for a
+ * room, so a list of rooms is drawn by `List` (`variant="divided"`) and takes
+ * the list's hairlines, hover and focus ring, and a row is the same height as
+ * every other list in the product.
+ *
+ * TWO CONTROLS, NEVER ONE INSIDE THE OTHER. The whole row is a link to the
+ * room; the action stands beside it (`List.Item`'s `action`), so Tab reaches
+ * each and the link's name is the room's words without "Join" in it. What
+ * pressing the action came to, when it needs saying, is the row's `note`,
+ * under both.
+ */
+export declare function RoomRow({ href, mark, name, tags, topic, facts, className, ...rest }: RoomRowProps): import("react").JSX.Element;

package/dist/RoomRow/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './RoomRow.css';
+export { RoomRow } from './RoomRow.js';
+export type { RoomRowProps } from './RoomRow.js';

package/dist/RoomRow/index.js

@@ -0,0 +1,4 @@
+export { RoomRow } from '../chunk-Z34W5TM6.js';
+import '../chunk-A7UOYLK3.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/RoomRow-3OTEY6GK.css

@@ -0,0 +1,55 @@
+/*
+ * RoomRow: a room as a directory of rooms lists it, on List.Item.
+ *
+ * The row's words stack: the name line, the topic, the facts. They take the
+ * conversation's own scale (ChatScale.css), so a room's name in a directory
+ * is the size it is in the room's header and its messages.
+ */
+
+.crewlet-room-row > .crewlet-list__row > .crewlet-list__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+/* A room's name wraps rather than pushing past the row: one unbroken name (a
+   slug with no hyphen) otherwise runs over its own tag and into the action. */
+.crewlet-room-row__name {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--spacing-5);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--crewlet-chat-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-room-row__mark {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-room-row__title {
+  min-width: 0;
+}
+
+.crewlet-room-row__topic {
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--crewlet-chat-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-room-row__facts {
+  color: var(--color-text-secondary);
+  font-size: var(--crewlet-chat-meta);
+}
+
+.crewlet-room-row__sep {
+  color: var(--color-text-tertiary);
+}

package/dist/SetupWizard/index.js

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

package/dist/Switch/Switch.d.ts

@@ -8,6 +8,20 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     framed?: boolean;
     /** The new state, for a caller that does not want to read it off an event. */
     onCheckedChange?: (checked: boolean) => void;
+    /**
+     * The label stays the switch's name and is not drawn: for a switch at the
+     * end of a row whose own words already say what it sets (a member's row in
+     * a room, "Answers when named"). The track alone is drawn.
+     */
+    labelHidden?: boolean | undefined;
+    /**
+     * Why the switch cannot be moved, as a sentence. It is drawn dimmed and
+     * does not move, and stays a tab stop whose reason is read after its name
+     * (`aria-describedby`), where a natively disabled control is skipped by Tab
+     * and says nothing. Pair it with a `Tooltip` to show the sentence to a
+     * pointer. Leave it out for a switch that can move.
+     */
+    disabledReason?: string | undefined;
 }
 /**
  * A setting that is on or off, and takes effect as it is switched.

package/dist/Switch/index.js

@@ -1,2 +1,3 @@
-export { Switch } from '../chunk-3XDT5ZWL.js';
+export { Switch } from '../chunk-3N3XK2G5.js';
+import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Switch-AUYLQLTN.css → Switch-XJE34BZH.css}

@@ -172,6 +172,21 @@
   border-radius: var(--radius-lg);
 }
 
+/*
+ * THE TRACK ALONE, for a switch whose label is its name and not drawn: no
+ * gap after it and no padding to centre a line of text that is not there, so
+ * it stands on the middle of the row it ends.
+ */
+.crewlet-switch--label-hidden {
+  align-items: center;
+  gap: 0;
+  padding-block: 0;
+}
+
+.crewlet-switch--label-hidden .crewlet-switch__track {
+  margin-block: 0;
+}
+
 .crewlet-switch.is-disabled,
 .crewlet-switch.is-disabled .crewlet-switch__control {
   cursor: not-allowed;

package/dist/ThinkingIndicator/ThinkingIndicator.d.ts

@@ -8,10 +8,20 @@ export interface ThinkingIndicatorProps extends Omit<HTMLAttributes<HTMLDivEleme
     status?: string | undefined;
     /**
      * What a screen reader is told, once, when the indicator appears.
-     * "Thinking" by default. It never changes with `status`, so a reader is not
-     * told every step the assistant takes while they read.
+     * "Thinking" by default, and "Queued" while `queued`. It never changes with
+     * `status`, so a reader is not told every step the assistant takes while
+     * they read.
      */
     label?: string | undefined;
+    /**
+     * The work has not started: the request is waiting behind something the
+     * agent is already doing ("is queued behind its current task"). The mark
+     * rests in its idle pose and the line is drawn without its shimmer, so a
+     * person can tell a reply that is being written from one that is waiting
+     * its turn. When the work starts, drop it and the indicator moves again in
+     * place, with nothing else on the page moving.
+     */
+    queued?: boolean | undefined;
 }
 /**
  * Ask Crewlet at work, drawn where its answer will be: the Ask Crewlet mark
@@ -36,5 +46,11 @@ export interface ThinkingIndicatorProps extends Omit<HTMLAttributes<HTMLDivEleme
  * tucked, the companion dimmed) and the line is drawn in the secondary ink
  * without the shimmer: the mark and the words still say that work is under
  * way.
+ *
+ * QUEUED, NOTHING MOVES. A request waiting behind the agent's current task is
+ * drawn with the mark in its idle pose and the line in the secondary ink, at
+ * the same height, so the moment the work starts is the moment the mark
+ * starts to turn. Motion means work under way, and a queued request has none
+ * yet.
  */
-export declare function ThinkingIndicator({ status, label, className, ...rest }: ThinkingIndicatorProps): import("react").JSX.Element;
+export declare function ThinkingIndicator({ status, label, queued, className, ...rest }: ThinkingIndicatorProps): import("react").JSX.Element;

package/dist/ThinkingIndicator/index.js

@@ -1,3 +1,3 @@
-export { ThinkingIndicator } from '../chunk-ED4A6Q24.js';
+export { ThinkingIndicator } from '../chunk-3OIVYHAA.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ThinkingIndicator-S7ZL2C77.css → ThinkingIndicator-G72NYYAM.css}

@@ -192,6 +192,33 @@
   }
 }
 
+/*
+ * QUEUED, THE MARK RESTS AND THE LINE IS STILL. Work has not started, so
+ * nothing moves: both parts of the mark stop in the idle pose (the spark at
+ * full size and upright, the companion at full strength), which is the pose
+ * the working loop rests in for half of every period, and the line drops its
+ * shimmer for the secondary ink. The same height, so the indicator starts
+ * moving in place when the work begins.
+ */
+.crewlet-thinking--queued .crewlet-thinking__mark [data-motion='turn'],
+.crewlet-thinking--queued .crewlet-thinking__mark [data-motion='twinkle'] {
+  animation: none;
+  transform: none;
+  opacity: 1;
+}
+
+.crewlet-thinking--queued .crewlet-thinking__status {
+  background-image: none;
+  color: var(--color-text-secondary);
+  animation: crewlet-thinking-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-thinking--queued .crewlet-thinking__status {
+    animation: none;
+  }
+}
+
 /* The system's own ink: a gradient clipped to text is dropped there. */
 @media (forced-colors: active) {
   .crewlet-thinking__status {

package/dist/{chunk-3XDT5ZWL.js → chunk-3N3XK2G5.js}

@@ -1,5 +1,6 @@
+import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Switch-AUYLQLTN.css';
+import './Switch-XJE34BZH.css';
 import { forwardRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -9,6 +10,9 @@ var Switch = forwardRef(function Switch2({
   framed = false,
   onCheckedChange,
   onChange,
+  onClick,
+  labelHidden = false,
+  disabledReason,
   className = "",
   disabled,
   id,
@@ -19,13 +23,20 @@ var Switch = forwardRef(function Switch2({
   const inputId = id ?? generatedId;
   const labelId = `${inputId}-label`;
   const descriptionId = description ? `${inputId}-description` : void 0;
+  const reasonId = disabledReason ? `${inputId}-reason` : void 0;
+  const inert = disabledReason !== void 0 && disabledReason !== "";
+  const text = /* @__PURE__ */ jsxs("span", { className: "crewlet-switch__text", children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-switch__label", id: labelId, children: label }),
+    description ? /* @__PURE__ */ jsx("span", { className: "crewlet-switch__description", id: descriptionId, children: description }) : null
+  ] });
   return /* @__PURE__ */ jsxs(
     "label",
     {
       className: cx(
         "crewlet-switch",
         framed && "crewlet-switch--framed",
-        disabled && "is-disabled",
+        labelHidden && "crewlet-switch--label-hidden",
+        (disabled || inert) && "is-disabled",
         className
       ),
       children: [
@@ -40,20 +51,27 @@ var Switch = forwardRef(function Switch2({
               className: "crewlet-switch__control",
               disabled,
               "aria-labelledby": labelId,
-              "aria-describedby": cx(descriptionId, describedBy) || void 0,
+              "aria-describedby": cx(descriptionId, reasonId, describedBy) || void 0,
+              "aria-disabled": inert || void 0,
+              ...rest,
+              onClick: (event) => {
+                if (inert) {
+                  if (rest.checked === void 0) event.preventDefault();
+                  return;
+                }
+                onClick?.(event);
+              },
               onChange: (event) => {
+                if (inert) return;
                 onChange?.(event);
                 onCheckedChange?.(event.target.checked);
-              },
-              ...rest
+              }
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "crewlet-switch__thumb", "aria-hidden": "true" })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-switch__text", children: [
-          /* @__PURE__ */ jsx("span", { className: "crewlet-switch__label", id: labelId, children: label }),
-          description ? /* @__PURE__ */ jsx("span", { className: "crewlet-switch__description", id: descriptionId, children: description }) : null
-        ] })
+        labelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: text }) : text,
+        inert ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason }) : null
       ]
     }
   );

package/dist/{chunk-ED4A6Q24.js → chunk-3OIVYHAA.js}

@@ -1,18 +1,19 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ThinkingIndicator-S7ZL2C77.css';
+import './ThinkingIndicator-G72NYYAM.css';
 import { ProductMark } from '@crewlethq/icons/product-mark';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function ThinkingIndicator({ status, label = "Thinking", className, ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-thinking", className), children: [
+function ThinkingIndicator({ status, label, queued = false, className, ...rest }) {
+  const announced = label ?? (queued ? "Queued" : "Thinking");
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-thinking", queued && "crewlet-thinking--queued", className), children: [
     /* @__PURE__ */ jsx(ProductMark, { product: "assistant", size: "md", className: "crewlet-thinking__mark" }),
     status === void 0 || status === "" ? null : (
       // Keyed by its words, so a new step's line fades in rather than
       // swapping in place mid shimmer.
       /* @__PURE__ */ jsx("span", { className: "crewlet-thinking__status", "aria-hidden": "true", children: status }, status)
     ),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: label }) })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: announced }) })
   ] });
 }
 

package/dist/{chunk-EALRMP7N.js → chunk-6TD2PCZB.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './PersonRow-V5GTPNVP.css';
+import './PersonRow-ZR6US2QJ.css';
 import { forwardRef } from 'react';
 import { CheckGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -48,8 +48,8 @@ var PersonRow = forwardRef(function PersonRow2(props, ref) {
       }
     );
   }
-  const { as: _as, avatar, name, tag, detail, meta, mark, density = "default", selected, onSelect, onClick, className, type = "button", ...rest } = props;
-  return /* @__PURE__ */ jsx(
+  const { as: _as, avatar, name, tag, detail, meta, mark, density = "default", selected, onSelect, onClick, action, className, type = "button", ...rest } = props;
+  const row = /* @__PURE__ */ jsx(
     "button",
     {
       ...rest,
@@ -64,6 +64,11 @@ var PersonRow = forwardRef(function PersonRow2(props, ref) {
       children: /* @__PURE__ */ jsx(PersonRowBody, { avatar, name, tag, detail, meta, mark, density, selected })
     }
   );
+  if (action === void 0 || action === null) return row;
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-person-row-group", `crewlet-person-row-group--${density}`), children: [
+    row,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-person-row__action", children: action })
+  ] });
 });
 
 export { PersonRow };

package/dist/{chunk-XTJHMP3W.js → chunk-75EGNXPZ.js}

@@ -1,4 +1,4 @@
-import { Switch } from './chunk-3XDT5ZWL.js';
+import { Switch } from './chunk-3N3XK2G5.js';
 import { useReorder } from './chunk-BVML4UVB.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
 import { IconButton } from './chunk-UAUP6XGK.js';

package/dist/{chunk-PS5ZYIA6.js → chunk-A7UOYLK3.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './List-JOELBLTU.css';
+import './List-ZZF6ZHRT.css';
 import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';
 import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -40,6 +40,8 @@ function ListItem({
   onClick,
   leading,
   trailing,
+  action,
+  note,
   tone = "default",
   dangerLabel = "Failed",
   selected = false,
@@ -98,7 +100,9 @@ function ListItem({
   } else {
     row = /* @__PURE__ */ jsx("span", { className: rowClass, children: contents(children) });
   }
-  return /* @__PURE__ */ jsx(
+  const hasAction = action !== void 0 && action !== null;
+  const hasNote = note !== void 0 && note !== null;
+  return /* @__PURE__ */ jsxs(
     "li",
     {
       ...rest,
@@ -106,10 +110,15 @@ function ListItem({
         "crewlet-list__item",
         tone === "danger" && "crewlet-list__item--danger",
         selected && "crewlet-list__item--selected",
+        (hasAction || hasNote) && "crewlet-list__item--split",
         className
       ),
       "aria-current": interactive ? void 0 : current,
-      children: row
+      children: [
+        row,
+        hasAction ? /* @__PURE__ */ jsx("span", { className: "crewlet-list__action", children: action }) : null,
+        hasNote ? /* @__PURE__ */ jsx("div", { className: "crewlet-list__note", children: note }) : null
+      ]
     }
   );
 }

package/dist/{chunk-3BRXEMYT.js → chunk-G7SAFRSJ.js}

@@ -1,6 +1,6 @@
-import { PersonRow } from './chunk-EALRMP7N.js';
+import { PersonRow } from './chunk-6TD2PCZB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './PersonRow-V5GTPNVP.css';
+import './PersonRow-ZR6US2QJ.css';
 import './MentionMenu-4NAQ45S4.css';
 import { jsx, jsxs } from 'react/jsx-runtime';