@crewlethq/ui 0.83.0 → 0.84.1

package/dist/SidebarNav/SidebarNav.d.ts

@@ -36,6 +36,7 @@
  * own prop types, so one list of places feeds both shapes.
  */
 import { type MouseEventHandler, type ReactNode } from 'react';
+import type { CountTone } from '../Count/index.js';
 export interface SidebarNavProps {
     /**
      * Names the navigation region. A page with two of them ("Sections" and
@@ -148,6 +149,20 @@ export interface NavFigure {
      */
     label: string;
 }
+/**
+ * A figure of what waits on the reader, and how loudly it asks.
+ *
+ * `attention` (the default) is the accent's filled pill, the one hue in the
+ * chrome: what the reader is asked to act on, the unread in an inbox.
+ * `quiet` keeps the pill's round shape and its place at the row's end, in
+ * the quiet count's grey: work that is the reader's own and is waiting, but
+ * not calling (the open tasks assigned to them). The vocabulary is `Count`'s
+ * own (`CountTone`), so a figure is quiet or calling in the same words
+ * wherever it stands.
+ */
+export interface NavBadge extends NavFigure {
+    tone?: CountTone | undefined;
+}
 /** A quiet figure: how many of something the destination holds. */
 export interface NavCount extends NavFigure {
     /**
@@ -180,9 +195,10 @@ export interface NavItemProps {
      * of what is waiting on the reader is the one thing in the rail that asks
      * them to act, which is what the accent means; it is a FILL carrying a
      * figure rather than a figure in a hue, so it still reads to somebody who
-     * cannot separate the hue. Anything else is a `count`.
+     * cannot separate the hue. Anything else is a `count`. `tone: 'quiet'`
+     * keeps the pill and draws it in the quiet count's grey (`NavBadge`).
      */
-    badge?: NavFigure | undefined;
+    badge?: NavBadge | undefined;
     href?: string | undefined;
     /** Whether this row is the screen the reader is on. */
     current?: boolean | undefined;

package/dist/SidebarNav/index.d.ts

@@ -1,4 +1,4 @@
 import '../HitArea/HitArea.css';
 import './SidebarNav.css';
 export { NavGroup, NavItem, SidebarNav } from './SidebarNav.js';
-export type { NavCount, NavFigure, NavGroupAction, NavGroupProps, NavItemProps, NavLinkProps, SidebarNavProps, } from './SidebarNav.js';
+export type { NavBadge, NavCount, NavFigure, NavGroupAction, NavGroupProps, NavItemProps, NavLinkProps, SidebarNavProps, } from './SidebarNav.js';

package/dist/SidebarNav/index.js

@@ -1,4 +1,4 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-25JQNHTC.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-BRK3HXGZ.js';
 import '../chunk-TEV5REGB.js';
 import '../chunk-HBDA76EZ.js';
 import '../chunk-2YTOOH3A.js';

package/dist/{SidebarNav-E7PZGGA6.css → SidebarNav-IKBKGXW4.css}

@@ -415,6 +415,26 @@
   line-height: 1;
 }
 
+/*
+ * A QUIET BADGE keeps the pill, its size and its place at the row's end, and
+ * takes the quiet count's grey: a neutral wash (`--color-fill-soft`, the
+ * ground of a quiet label at rest) carrying the secondary ink, for work that
+ * is the reader's own and waiting, but not calling. The secondary ink rather
+ * than the count's tertiary, because on a wash over a hovered row the
+ * tertiary measured 4.41:1 in light; it is the ink the compact rail's quiet
+ * figure takes, so the two shapes draw the same grey. On the reader's own row
+ * its ink lifts to the row's, as the count's does; the suite measures the
+ * pair on every ground a row can have.
+ */
+.crewlet-nav-item__badge--quiet {
+  background: var(--color-fill-soft);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__badge--quiet {
+  color: inherit;
+}
+
 /* Beside a count the badge is the second figure, not a second push to the
    end: two auto margins would split the room between them and float the
    count into the middle of the row. */

package/dist/TableCells/index.js

@@ -3,7 +3,7 @@ import '../chunk-QF5UNP4T.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-UT6CW3C7.js';

package/dist/ThreadSummary/index.js

@@ -1,6 +1,6 @@
-export { THREAD_SUMMARY_LABELS, ThreadSummary } from '../chunk-YP2FS6SH.js';
+export { THREAD_SUMMARY_LABELS, ThreadSummary } from '../chunk-QPYGJ7R7.js';
 import '../chunk-LBGKLYBY.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionTimeline/index.js

@@ -2,7 +2,7 @@ export { VersionTimeline } from '../chunk-L5VU3LZT.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-IRONPJB4.js';
+import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-DGXZ635L.js';

package/dist/{chunk-Q7N2ATMC.js → chunk-64JNKLLP.js}

@@ -1,8 +1,9 @@
 import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ReadingPane-VLYOWMCM.css';
-import { createContext, useId, useContext } from 'react';
+import './ReadingPane-VFTRDPC5.css';
+import { createContext, useId, useRef, useState, useEffect, useLayoutEffect, createElement, useContext } from 'react';
 import { ClockGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -12,19 +13,62 @@ function usePane(part) {
   if (pane === null) throw new Error(`${part} must be drawn inside a ReadingPane.`);
   return pane;
 }
-function ReadingPane({ headingLevel, className, children, ...rest }) {
+var READING_PANE_ENTER = { animations: ["crewlet-reading-pane-enter"] };
+function ReadingPane({ headingLevel, contentKey, focusTarget, className, children, ...rest }) {
   const titleId = useId();
   const outer = useHeadingLevel();
   const level = headingLevel ?? outer;
   const named = rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
-  return /* @__PURE__ */ jsx("div", { className: "crewlet-reading-pane", children: /* @__PURE__ */ jsx(
+  const pane = useRef(null);
+  const column = useRef(null);
+  const [drawnKey, setDrawnKey] = useState(contentKey);
+  const [moved, setMoved] = useState(false);
+  if (drawnKey !== contentKey) {
+    setDrawnKey(contentKey);
+    setMoved(true);
+  }
+  const owned = useRef(false);
+  useEffect(() => {
+    const root = pane.current;
+    if (!root) return void 0;
+    const doc = root.ownerDocument;
+    const inside = (node) => node instanceof Node && root.contains(node);
+    const focusIn = () => {
+      owned.current = true;
+    };
+    const focusOut = (event) => {
+      if (event.relatedTarget !== null && !inside(event.relatedTarget)) owned.current = false;
+    };
+    const press = (event) => {
+      owned.current = inside(event.target);
+    };
+    root.addEventListener("focusin", focusIn);
+    root.addEventListener("focusout", focusOut);
+    doc.addEventListener("pointerdown", press, true);
+    return () => {
+      root.removeEventListener("focusin", focusIn);
+      root.removeEventListener("focusout", focusOut);
+      doc.removeEventListener("pointerdown", press, true);
+    };
+  }, []);
+  const settled = useRef(contentKey);
+  useLayoutEffect(() => {
+    if (contentKey === settled.current) return;
+    settled.current = contentKey;
+    if (!owned.current) return;
+    const target = focusTarget?.() ?? column.current?.querySelector(".crewlet-reading-pane__title");
+    returnFocus(target, { preventScroll: true });
+  }, [contentKey, focusTarget]);
+  return /* @__PURE__ */ jsx("div", { ref: pane, className: "crewlet-reading-pane", children: /* @__PURE__ */ createElement(
     "article",
     {
       ...rest,
+      key: contentKey,
+      ref: column,
       "aria-labelledby": named ? rest["aria-labelledby"] : titleId,
-      className: cx("crewlet-reading-pane__column", className),
-      children: /* @__PURE__ */ jsx(ReadingPaneContext.Provider, { value: { titleId, level }, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children }) })
-    }
+      className: cx("crewlet-reading-pane__column", moved && "crewlet-reading-pane__column--entering", className)
+    },
+    /* @__PURE__ */ jsx(ReadingPaneContext.Provider, { value: { titleId, level }, children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(level), children }) })
   ) });
 }
 function ReadingPaneByline({ start, leading, note, className, children, ...rest }) {
@@ -46,7 +90,11 @@ function ReadingPaneByline({ start, leading, note, className, children, ...rest
 function ReadingPaneTitle({ className, children, ...rest }) {
   const { titleId, level } = usePane("ReadingPane.Title");
   const Heading = headingTag(level);
-  return /* @__PURE__ */ jsx(Heading, { id: titleId, ...rest, className: cx("crewlet-reading-pane__title", className), children });
+  return (
+    // Focusable from code alone, for the pane to hand focus to when its item
+    // changes; never a tab stop.
+    /* @__PURE__ */ jsx(Heading, { id: titleId, tabIndex: -1, ...rest, className: cx("crewlet-reading-pane__title", className), children })
+  );
 }
 function ReadingPaneLead({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-reading-pane__lead", className), children });
@@ -109,4 +157,4 @@ ReadingPane.Reasoning = ReadingPaneReasoning;
 ReadingPane.Outcome = ReadingPaneOutcome;
 ReadingPane.Section = ReadingPaneSection;
 
-export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle };
+export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle };

package/dist/chunk-6C7GQOBV.js

@@ -0,0 +1,10 @@
+// src/utils/developing.ts
+function developing() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+
+export { developing };

package/dist/{chunk-YRNNUCQP.js → chunk-7BDBO2NP.js}

@@ -1,4 +1,4 @@
-import { SidebarNav } from './chunk-25JQNHTC.js';
+import { SidebarNav } from './chunk-BRK3HXGZ.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SectionFrame-M62UUVFQ.css';

package/dist/{chunk-QM3432PH.js → chunk-7IWZN5Q2.js}

@@ -2,14 +2,14 @@ import { Skeleton } from './chunk-I4IUX3JF.js';
 import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Card } from './chunk-U2IQNDDR.js';
-import { AvatarStack } from './chunk-IRONPJB4.js';
-import { ArtifactKindGround } from './chunk-ZB3E2Z4Y.js';
+import { AvatarStack } from './chunk-YTLWOHOY.js';
+import { ArtifactKindGround } from './chunk-J5T5TDM2.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
 import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-3EH4KR3F.css';
+import './ArtifactKinds-27TE3KJL.css';
 import './ArtifactCard-B2QE5CVL.css';
 import { useId } from 'react';
 import { PinGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-25JQNHTC.js → chunk-BRK3HXGZ.js}

@@ -4,7 +4,7 @@ import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './SidebarNav-E7PZGGA6.css';
+import './SidebarNav-IKBKGXW4.css';
 import { createContext, useId, useState, useContext } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -136,7 +136,13 @@ function NavItem({
       count || badge || state ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `${spoken([count, badge])}${state}` }) : null
     ] }),
     count ? /* @__PURE__ */ jsx(Figure, { figure: count, mark: count.mark, className: "crewlet-nav-item__count" }) : null,
-    badge ? /* @__PURE__ */ jsx(Figure, { figure: badge, className: "crewlet-nav-item__badge" }) : null
+    badge ? /* @__PURE__ */ jsx(
+      Figure,
+      {
+        figure: badge,
+        className: cx("crewlet-nav-item__badge", badge.tone === "quiet" && "crewlet-nav-item__badge--quiet")
+      }
+    ) : null
   ] });
   const rowClass = cx("crewlet-nav-item__row", HIT_AREA_CLASS);
   let row;

package/dist/{chunk-QE4OIE3Q.js → chunk-DJIWCW5Z.js}

@@ -1,8 +1,9 @@
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CatalogTile-6VF36JWA.css';
+import './CatalogTile-TMOSGSV3.css';
 import { useId } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 function CatalogTile({
   as: Element = "article",
@@ -22,6 +23,7 @@ function CatalogTile({
   const Heading = headingTag(headingLevel ?? level);
   const titleId = useId();
   const foot = meta !== void 0 || action !== void 0;
+  const state = status ? /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__status", children: /* @__PURE__ */ jsx(StatusDot, { tone: status.tone, children: status.label }) }) : null;
   if (density === "compact") {
     return /* @__PURE__ */ jsxs(
       Element,
@@ -39,7 +41,7 @@ function CatalogTile({
             /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__mark", "aria-hidden": "true", children: mark }),
             /* @__PURE__ */ jsxs("span", { className: "crewlet-catalog-tile__title", children: [
               /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-catalog-tile__name", children: title }),
-              status === void 0 || status === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__status", children: status }),
+              state,
               meta === void 0 || meta === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__meta", children: meta })
             ] }),
             action === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__action", children: action })
@@ -67,7 +69,7 @@ function CatalogTile({
           /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__mark", "aria-hidden": "true", children: mark }),
           /* @__PURE__ */ jsxs("span", { className: "crewlet-catalog-tile__title", children: [
             /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-catalog-tile__name", children: title }),
-            status === void 0 || status === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__status", children: status })
+            state
           ] })
         ] }),
         description === void 0 ? null : /* @__PURE__ */ jsx("p", { className: "crewlet-catalog-tile__description", children: description }),

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

@@ -1,15 +1,108 @@
 import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { developing } from './chunk-6C7GQOBV.js';
+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-OFGSX5IH.css';
-import { useId, useState } from 'react';
+import './InboxList-X5Q5WWAI.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';
 
 function InboxList({ label, className, children, ...rest }) {
   return /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": label, className: cx("crewlet-inbox-list", className), children });
 }
+var INBOX_ROW_LEAVE = { transitions: ["grid-template-rows"] };
+function rowsOf(children) {
+  const given = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child)) given.push(child.key !== null);
+  });
+  return Children.toArray(children).filter((child) => isValidElement(child)).map((element, index) => ({
+    key: String(element.key),
+    element,
+    keyed: given[index] === true,
+    component: typeof element.type !== "string"
+  }));
+}
+function sameKeys(a, b) {
+  return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+function keepPlaces(previous, next, kept) {
+  const placed = new Set(next);
+  const order = [...next];
+  previous.forEach((key, index) => {
+    if (placed.has(key) || !kept.has(key)) return;
+    let at = 0;
+    for (let back = index - 1; back >= 0; back -= 1) {
+      if (placed.has(previous[back])) {
+        at = order.indexOf(previous[back]) + 1;
+        break;
+      }
+    }
+    order.splice(at, 0, key);
+    placed.add(key);
+  });
+  return order;
+}
+function useLeavingRows(children) {
+  const rows = rowsOf(children);
+  const keys = rows.map((row) => row.key);
+  const [shown, setRows] = useState(() => ({
+    keys,
+    order: keys,
+    leaving: /* @__PURE__ */ new Map()
+  }));
+  const drawn = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    drawn.current = new Map(rows.map((row) => [row.key, row]));
+  });
+  let now = shown;
+  if (!sameKeys(shown.keys, keys)) {
+    const present = new Set(keys);
+    const leaving = new Map([...shown.leaving].filter(([key]) => !present.has(key)));
+    for (const key of shown.keys) {
+      if (present.has(key)) continue;
+      const last = drawn.current.get(key);
+      if (last?.keyed && last.component) leaving.set(key, last.element);
+    }
+    now = { keys, order: keepPlaces(shown.order, keys, new Set(leaving.keys())), leaving };
+    setRows(now);
+  }
+  const warned = useRef(false);
+  useEffect(() => {
+    if (warned.current || !developing()) return;
+    if (rows.some((row) => row.component && !row.keyed)) {
+      warned.current = true;
+      console.warn(
+        "[crewlet] InboxGroup was handed a row without a key of its own. Give each row a stable key, such as its id: a row without one is told apart by its position, and is not kept while it leaves."
+      );
+    }
+  });
+  const drop = useCallback((key) => {
+    setRows((was) => {
+      if (!was.leaving.has(key)) return was;
+      const leaving = new Map(was.leaving);
+      leaving.delete(key);
+      return { ...was, leaving, order: was.order.filter((each) => each !== key) };
+    });
+  }, []);
+  if (now.leaving.size === 0) return rows.map((row) => row.element);
+  const live = new Map(rows.map((row) => [row.key, row.element]));
+  return now.order.map((key) => {
+    const row = live.get(key);
+    if (row) return row;
+    const last = now.leaving.get(key);
+    if (!last) return null;
+    return cloneElement(last, {
+      leaving: true,
+      onLeft: () => {
+        last.props.onLeft?.();
+        drop(key);
+      }
+    });
+  });
+}
 function InboxGroup({
   label,
   hideLabel = false,
@@ -19,10 +112,12 @@ function InboxGroup({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
+  arrived,
   className,
   children,
   ...rest
 }) {
+  const rows = useLeavingRows(children);
   const level = useHeadingLevel();
   const Heading = headingTag(headingLevel ?? level);
   const labelId = useId();
@@ -40,6 +135,7 @@ function InboxGroup({
     " ",
     /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-list__count", children: count })
   ] });
+  const arrival = arrived === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "crewlet-inbox-list__arrival" }, arrived);
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -54,27 +150,31 @@ function InboxGroup({
           // A DISCLOSURE INSIDE THE HEADING, never a heading inside a button: a
           // reader moving by heading still lands on the group, and the button
           // in it says whether the rows are shown.
-          /* @__PURE__ */ jsx(Heading, { className: "crewlet-inbox-list__label", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              id: labelId,
-              className: "crewlet-inbox-list__disclosure",
-              "aria-expanded": open,
-              "aria-controls": rowsId,
-              onClick: toggle,
-              children: [
-                /* @__PURE__ */ jsx(ChevronDownGlyph, { "aria-hidden": true, size: "sm", className: "crewlet-inbox-list__chevron" }),
-                /* @__PURE__ */ jsx(Eyebrow, { children: label }),
-                counted
-              ]
-            }
-          ) })
+          /* @__PURE__ */ jsxs(Heading, { className: "crewlet-inbox-list__label", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: labelId,
+                className: "crewlet-inbox-list__disclosure",
+                "aria-expanded": open,
+                "aria-controls": rowsId,
+                onClick: toggle,
+                children: [
+                  /* @__PURE__ */ jsx(ChevronDownGlyph, { "aria-hidden": true, size: "sm", className: "crewlet-inbox-list__chevron" }),
+                  /* @__PURE__ */ jsx(Eyebrow, { children: label }),
+                  counted
+                ]
+              }
+            ),
+            arrival
+          ] })
         ) : /* @__PURE__ */ jsxs(Heading, { id: labelId, className: "crewlet-inbox-list__label", children: [
           /* @__PURE__ */ jsx(Eyebrow, { children: label }),
-          counted
+          counted,
+          arrival
         ] }),
-        /* @__PURE__ */ jsx("ul", { id: rowsId, className: "crewlet-inbox-list__rows", hidden: !open, children })
+        /* @__PURE__ */ jsx("ul", { id: rowsId, className: "crewlet-inbox-list__rows", hidden: !open, children: rows })
       ]
     }
   );
@@ -99,10 +199,29 @@ function InboxRow({
   outcomeTone = "neutral",
   href,
   onClick,
+  leaving = false,
+  onLeft,
+  arrived = false,
   className,
   children,
   ...rest
 }) {
+  const self = useRef(null);
+  const presence = usePresence(!leaving, self, INBOX_ROW_LEAVE);
+  const gone = !presence.present;
+  useLayoutEffect(() => {
+    if (presence.leaving) releaseFocus(self.current);
+  }, [presence.leaving]);
+  const told = useRef(false);
+  useEffect(() => {
+    if (!gone) {
+      told.current = false;
+      return;
+    }
+    if (told.current) return;
+    told.current = true;
+    onLeft?.();
+  }, [gone, onLeft]);
   const contents = /* @__PURE__ */ jsxs(Fragment, { children: [
     leading === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "crewlet-inbox-row__leading", children: leading }),
@@ -157,10 +276,26 @@ function InboxRow({
   );
   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 });
-  return /* @__PURE__ */ jsxs("li", { ...rest, className: cx("crewlet-inbox-row", selected && "crewlet-inbox-row--selected", className), children: [
-    control,
-    aside === void 0 || aside === null || aside === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-inbox-row__aside", children: aside })
-  ] });
+  if (gone) return null;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...rest,
+      ref: self,
+      inert: presence.leaving,
+      className: cx(
+        "crewlet-inbox-row",
+        selected && "crewlet-inbox-row--selected",
+        arrived && "crewlet-inbox-row--arrived",
+        presence.leaving && "crewlet-inbox-row--leaving",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-inbox-row__body", children: [
+        control,
+        aside === void 0 || aside === null || aside === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-inbox-row__aside", children: aside })
+      ] })
+    }
+  );
 }
 function InboxMore({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-inbox-list__more", className), children });
@@ -173,4 +308,4 @@ InboxList.Row = InboxRow;
 InboxList.More = InboxMore;
 InboxList.Toggle = InboxToggle;
 
-export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle };
+export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle };

package/dist/{chunk-MVMVMHYI.js → chunk-HDEKHP65.js}

@@ -3,7 +3,7 @@ import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './ArtifactKinds-3EH4KR3F.css';
+import './ArtifactKinds-27TE3KJL.css';
 import './ArtifactMakeRow-6UX2LTF7.css';
 import { useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-BXGBGYKH.js → chunk-HKUZ2GYX.js}

@@ -7,7 +7,7 @@ import { Button } from './chunk-DGXZ635L.js';
 import { returnFocus } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-3EH4KR3F.css';
+import './ArtifactKinds-27TE3KJL.css';
 import './ArtifactBar-X46WJNW7.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-ZB3E2Z4Y.js → chunk-J5T5TDM2.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-3EH4KR3F.css';
+import './ArtifactKinds-27TE3KJL.css';
 import './ArtifactKindIllustration-D2J3HJMJ.css';
 import { useId } from 'react';
 import { CheckGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-C46DDVTK.js → chunk-LTD7KLOU.js}

@@ -1,7 +1,7 @@
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-3EH4KR3F.css';
+import './ArtifactKinds-27TE3KJL.css';
 import './ArtifactNameCell-3AHLUSE5.css';
 import { FolderGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-YBC2CYPD.js → chunk-O4VTQMEF.js}

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

package/dist/{chunk-HTBTAIH6.js → chunk-OM2LABPS.js}

@@ -1,6 +1,6 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactKinds-3EH4KR3F.css';
-import './ActionCard-47WSZ2O5.css';
+import './ArtifactKinds-27TE3KJL.css';
+import './ActionCard-YZKL3CKR.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ACTION_CARD_GROUND = {