@crewlethq/ui 0.81.2 → 0.83.0

package/dist/{chunk-UY3FWQWG.js → chunk-PGBKZSSQ.js}

@@ -1,18 +1,22 @@
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { releaseFocus, usePresence } from './chunk-PCAT2EFB.js';
+import { useRailShape, RailShapeContext, RailLeavingContext } from './chunk-JLOESTT2.js';
+import { useMediaMatch } from './chunk-YJQXESOJ.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
+import { Menu } from './chunk-TGGYSQRD.js';
 import { PeekContext, AsideContext, ResizeHandle, clampSize } from './chunk-PIYJNCN7.js';
+import { isApplePlatform, ariaKeyshortcuts, Kbd } from './chunk-CMAZZY2I.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
-import { focusables, useModalLayer, isComposing, layerCount } from './chunk-H5XTJ7GJ.js';
+import { focusables, useModalLayer, isComposing, layerCount } from './chunk-TUEM2XIW.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-2IBUS4TH.css';
+import './AppShell-U7D2MUUF.css';
 import './ResizeHandle-2UNSZ4ZQ.css';
 import { createContext, forwardRef, useContext, useSyncExternalStore, useCallback, useId, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
-import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, PlusGlyph, MinusGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function AccountRow({
@@ -25,8 +29,11 @@ function AccountRow({
   title,
   linkSuffix = ", your account",
   actions,
+  compact: compactProp,
   className
 }) {
+  const railShape = useRailShape();
+  const compact = compactProp ?? railShape === "compact";
   const who = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "crewlet-account-row__avatar", children: avatar }),
     /* @__PURE__ */ jsxs("span", { className: "crewlet-account-row__text", children: [
@@ -38,6 +45,7 @@ function AccountRow({
       ] }) : null
     ] })
   ] });
+  if (compact) return /* @__PURE__ */ jsx(CompactAccount, { avatar, name, detail, href, menu, current, linkSuffix, className });
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-account-row", className), children: [
     menu ? /* @__PURE__ */ jsx(
       Menu,
@@ -79,6 +87,60 @@ function AccountRow({
     actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-account-row__actions", children: actions }) : null
   ] });
 }
+function CompactAccount({
+  avatar,
+  name,
+  detail,
+  href,
+  menu,
+  current,
+  linkSuffix,
+  className
+}) {
+  const words = (suffix) => /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+    name,
+    detail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      ", ",
+      detail
+    ] }) : null,
+    suffix
+  ] });
+  const tip = /* @__PURE__ */ jsxs(Fragment, { children: [
+    name,
+    detail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " \xB7 ",
+      detail
+    ] }) : null
+  ] });
+  const face = /* @__PURE__ */ jsx("span", { className: "crewlet-account-row__avatar", "aria-hidden": true, children: avatar });
+  const shape = cx("crewlet-account-row__who", "crewlet-account-row__who--compact", HIT_AREA_CLASS);
+  let control;
+  if (menu) {
+    control = /* @__PURE__ */ jsx(
+      Menu,
+      {
+        label: menu.label ?? "Your account",
+        items: menu.items,
+        header: menu.header,
+        renderTrigger: (trigger) => /* @__PURE__ */ jsx(Tooltip, { content: tip, children: /* @__PURE__ */ jsxs("button", { type: "button", className: shape, "data-current": current ? "" : void 0, ...trigger, children: [
+          face,
+          words(linkSuffix)
+        ] }) })
+      }
+    );
+  } else if (href === void 0) {
+    control = /* @__PURE__ */ jsx(Tooltip, { content: tip, children: /* @__PURE__ */ jsxs("span", { className: "crewlet-account-row__who crewlet-account-row__who--compact", children: [
+      face,
+      words("")
+    ] }) });
+  } else {
+    control = /* @__PURE__ */ jsx(Tooltip, { content: tip, children: /* @__PURE__ */ jsxs("a", { className: shape, href, "aria-current": current ? "page" : void 0, children: [
+      face,
+      words(linkSuffix)
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-account-row", "crewlet-account-row--compact", className), children: control });
+}
 function createScreenWidthStore() {
   let width = null;
   const listeners = /* @__PURE__ */ new Set();
@@ -122,6 +184,22 @@ function useScreenBelow(width) {
   const measured = useSyncExternalStore(store ? store.subscribe : noSubscription, read, () => null);
   return measured ?? window2;
 }
+var RAIL_MOTION = {
+  transitions: ["width"],
+  animations: ["crewlet-app-shell-rail-unfold", "crewlet-app-shell-rail-settle"]
+};
+function useRailMotion(target, moves, rail) {
+  const [moved, setMoved] = useState(moves);
+  if (moved !== moves) setMoved(moves);
+  const instant = !moves || !moved;
+  const full = usePresence(target === "full", rail, { ...RAIL_MOTION, instant });
+  const compact = usePresence(target === "compact" && !full.leaving, rail, { ...RAIL_MOTION, instant });
+  let motion = null;
+  if (full.leaving) motion = "fold";
+  else if (full.entering) motion = full.returning ? "reverse" : "unfold";
+  else if (compact.entering) motion = "folded";
+  return { drawn: full.present ? "full" : "compact", motion, leaving: full.leaving };
+}
 var APP_SHELL_ASIDE_WIDTH = 420;
 var NARROW = `(width < ${breakpoint.shell})`;
 var AppShellContext = createContext(null);
@@ -141,6 +219,10 @@ function AppShell({
   navigationKey,
   toggleLabel = "Sections",
   skipLabel = "Skip to content",
+  rail: railChoice = "full",
+  onRailChange,
+  railFoldKeys,
+  railFoldLabels,
   aside,
   asideWidth = APP_SHELL_ASIDE_WIDTH,
   asideReserve,
@@ -181,16 +263,29 @@ function AppShell({
     },
     [mainRef]
   );
+  const railMoving = useRef(false);
+  const heldMeasures = useRef(/* @__PURE__ */ new Set());
+  const unlessRailMoving = useCallback(
+    (measure) => () => {
+      if (railMoving.current) heldMeasures.current.add(measure);
+      else measure();
+    },
+    []
+  );
   const [gutter, setGutter] = useState(0);
   useLayoutEffect(() => {
     if (!scroller) return void 0;
     const measure = () => setGutter(Math.max(0, scroller.offsetWidth - scroller.clientWidth));
     measure();
     if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(unlessRailMoving(measure));
     observer.observe(scroller);
-    return () => observer.disconnect();
-  }, [scroller]);
+    const held = heldMeasures.current;
+    return () => {
+      observer.disconnect();
+      held.delete(measure);
+    };
+  }, [scroller, unlessRailMoving]);
   const root = useRef(null);
   const sheet = useRef(null);
   const asideColumn = hasAside && asideShape === "column";
@@ -205,11 +300,15 @@ function AppShell({
     const measure = () => setOccupied(Math.max(0, Math.round(frame.getBoundingClientRect().right - page.getBoundingClientRect().right)));
     measure();
     if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(unlessRailMoving(measure));
     observer.observe(page);
     observer.observe(frame);
-    return () => observer.disconnect();
-  }, [asideColumn]);
+    const held = heldMeasures.current;
+    return () => {
+      observer.disconnect();
+      held.delete(measure);
+    };
+  }, [asideColumn, unlessRailMoving]);
   const content = useRef(null);
   const [screenWidth] = useState(createScreenWidthStore);
   useLayoutEffect(() => {
@@ -218,13 +317,44 @@ function AppShell({
     const measure = () => screenWidth.set(contentInlineSize(column));
     measure();
     if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(unlessRailMoving(measure));
     observer.observe(column);
+    const held = heldMeasures.current;
     return () => {
       observer.disconnect();
+      held.delete(measure);
       screenWidth.set(null);
     };
-  }, [screenWidth]);
+  }, [screenWidth, unlessRailMoving]);
+  const hasRail = sidebar !== void 0 && sidebar !== null;
+  const railTarget = hasRail && railChoice === "compact" && !narrow ? "compact" : "full";
+  const { drawn: railShape, motion: railMotion, leaving: railLeaving } = useRailMotion(railTarget, hasRail && !narrow, rail);
+  const foldable = hasRail && onRailChange !== void 0 && !narrow;
+  railMoving.current = railMotion !== null;
+  useLayoutEffect(() => {
+    if (railMotion !== null) return;
+    const held = [...heldMeasures.current];
+    heldMeasures.current.clear();
+    for (const measure of held) measure();
+  }, [railMotion]);
+  const refocusFolded = useRef(false);
+  useLayoutEffect(() => {
+    const aside2 = rail.current;
+    if (!aside2) return;
+    if (railLeaving) {
+      const held2 = aside2.ownerDocument.activeElement;
+      const leavingPart = held2 instanceof HTMLElement ? held2.closest("[inert]") : null;
+      if (!leavingPart || !aside2.contains(leavingPart)) return;
+      const live = focusables(aside2).find((element) => !element.closest("[inert]")) ?? null;
+      releaseFocus(leavingPart, live);
+      refocusFolded.current = live === null;
+      return;
+    }
+    if (!refocusFolded.current) return;
+    refocusFolded.current = false;
+    const held = aside2.ownerDocument.activeElement;
+    if (held === null || held === aside2.ownerDocument.body) focusables(aside2)[0]?.focus();
+  }, [railLeaving]);
   const shell = {
     narrow,
     drawerOpen,
@@ -234,7 +364,8 @@ function AppShell({
     scroller,
     railId,
     toggleLabel,
-    hasRail: sidebar !== void 0 && sidebar !== null
+    hasRail,
+    rail: railShape
   };
   return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: shell, children: /* @__PURE__ */ jsxs(
     "div",
@@ -244,13 +375,17 @@ function AppShell({
       className: cx(
         "crewlet-app-shell",
         fill && "crewlet-app-shell--fill",
+        fill === "flush" && "crewlet-app-shell--fill-flush",
         // Named on the root rather than read off the tree by a selector,
         // because a shell with no rail is one column whatever else it holds.
         !shell.hasRail && "crewlet-app-shell--no-rail",
+        foldable && "crewlet-app-shell--foldable",
         className
       ),
       "data-aside": hasAside ? asideShape : void 0,
       "data-peek": hasPeek ? peekShape : void 0,
+      "data-rail": hasRail ? railShape : void 0,
+      "data-rail-motion": railMotion ?? void 0,
       style: {
         ...style,
         ["--crewlet-app-shell-gutter"]: `${gutter}px`,
@@ -279,7 +414,7 @@ function AppShell({
           }
         ),
         drawerOpen ? /* @__PURE__ */ jsx(ShellDrawer, { rail, onClose: closeDrawer, onZIndex: setDrawerZ }) : null,
-        shell.hasRail ? /* @__PURE__ */ jsx(
+        shell.hasRail ? /* @__PURE__ */ jsxs(
           "aside",
           {
             ref: rail,
@@ -289,7 +424,10 @@ function AppShell({
             role: drawerOpen ? "dialog" : void 0,
             "aria-modal": drawerOpen || void 0,
             "aria-label": drawerOpen ? toggleLabel : void 0,
-            children: sidebar
+            children: [
+              foldable ? /* @__PURE__ */ jsx(RailFold, { rail: railTarget, onRailChange, keys: railFoldKeys, labels: railFoldLabels, railId }) : null,
+              /* @__PURE__ */ jsx(RailShapeContext.Provider, { value: railShape, children: /* @__PURE__ */ jsx(RailLeavingContext.Provider, { value: railLeaving, children: sidebar }) })
+            ]
           }
         ) : null,
         /* @__PURE__ */ jsxs("div", { ref: sheet, className: "crewlet-app-shell__sheet", children: [
@@ -454,17 +592,58 @@ function ShellDrawer({
     }
   );
 }
+function RailFold({
+  rail,
+  onRailChange,
+  keys,
+  labels,
+  railId
+}) {
+  const compact = rail === "compact";
+  const label = compact ? labels?.expand ?? "Expand the sidebar" : labels?.collapse ?? "Collapse the sidebar";
+  const apple = isApplePlatform();
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__fold", children: /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      placement: "bottom",
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        label,
+        keys ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx(Kbd, { keys, subtle: true, apple })
+        ] }) : null
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label,
+          size: "sm",
+          variant: "ghost",
+          icon: compact ? /* @__PURE__ */ jsx(PlusGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(MinusGlyph, { size: "sm" }),
+          "aria-controls": railId,
+          "aria-expanded": !compact,
+          "aria-keyshortcuts": keys ? ariaKeyshortcuts(keys, apple) : void 0,
+          onClick: () => onRailChange?.(compact ? "full" : "compact")
+        }
+      )
+    }
+  ) });
+}
 function AppShellRail({ header, search, status, footer, className, children }) {
+  const compact = useRailShape() === "compact";
+  const leaving = useContext(RailLeavingContext) || void 0;
+  const statusSlot = status ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-status", inert: leaving, children: status }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-app-shell__rail-inner", className), children: [
-    header || status ? /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-head", children: [
+    header || status && !compact ? /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-head", children: [
       header,
-      status ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-status", children: status }) : null
+      compact ? null : statusSlot
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", children: [
-      search ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-search", children: search }) : null,
+    compact ? statusSlot : null,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", inert: leaving, children: [
+      search && !compact ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-search", children: search }) : null,
       children
     ] }),
-    footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
+    footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", inert: leaving, children: footer }) : null
   ] });
 }
 function countWords(count) {

package/dist/{chunk-4TMBAOXK.js → chunk-PW57R4BN.js}

@@ -1,4 +1,4 @@
-import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { useFocusModality } from './chunk-4ITETIGZ.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SourceEditor-SMQ44O76.css';

package/dist/chunk-PX5BOALQ.js

@@ -0,0 +1,13 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './MentionChip-W7MZZVRZ.css';
+import { jsx } from 'react/jsx-runtime';
+
+function MentionChip({ children, tone = "other", onPress, className, ...rest }) {
+  const classes = cx("crewlet-mention-chip", `crewlet-mention-chip--${tone}`, className);
+  if (!onPress) {
+    return /* @__PURE__ */ jsx("span", { ...rest, className: classes, children });
+  }
+  return /* @__PURE__ */ jsx("button", { ...rest, type: "button", className: classes, onClick: onPress, children });
+}
+
+export { MentionChip };

package/dist/{chunk-CFTBESST.js → chunk-Q6TCUSQA.js}

@@ -1,5 +1,5 @@
-import { Combobox } from './chunk-6EWNMSS4.js';
-import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-N2BF272H.js';
+import { Combobox } from './chunk-NNZRTR5M.js';
+import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-P6UYHDJR.css';
 import { useState, useId, useMemo } from 'react';

package/dist/{chunk-ZWXHTXZO.js → chunk-QGEDXYLB.js}

@@ -1,8 +1,8 @@
 import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-Z7JYG5TF.js';
-import { Avatar } from './chunk-KTIQSSME.js';
-import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
+import { Avatar } from './chunk-XZY6S3UC.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PeopleRail-MRUSDGCZ.css';
 import { useId } from 'react';

package/dist/{chunk-ZKLEAK7M.js → chunk-QM3432PH.js}

@@ -1,15 +1,15 @@
-import { Skeleton } from './chunk-BRLZXYPA.js';
-import { PrincipalAvatar } from './chunk-N2BF272H.js';
+import { Skeleton } from './chunk-I4IUX3JF.js';
+import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
-import { Card } from './chunk-4AUTALJA.js';
-import { AvatarStack } from './chunk-BT3GB7HC.js';
-import { ArtifactKindGround } from './chunk-NHLNHH4J.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
+import { Card } from './chunk-U2IQNDDR.js';
+import { AvatarStack } from './chunk-IRONPJB4.js';
+import { ArtifactKindGround } from './chunk-ZB3E2Z4Y.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-O3CALPVX.css';
+import './ArtifactKinds-3EH4KR3F.css';
 import './ArtifactCard-B2QE5CVL.css';
 import { useId } from 'react';
 import { PinGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-WTXCK46H.js → chunk-R2QBQ6NO.js}

@@ -1,4 +1,4 @@
-import { Card } from './chunk-4AUTALJA.js';
+import { Card } from './chunk-U2IQNDDR.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FolderTile-NM7CRTVH.css';

package/dist/{chunk-Z6JKZI4E.js → chunk-RBQRTGXX.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-AOFVXE6V.js';
-import { SegmentedControl } from './chunk-6R334YT3.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-TJIBTHWJ.js → chunk-RDIQB5ZE.js}

@@ -1,6 +1,6 @@
-import { useReorder } from './chunk-MPVMB2DV.js';
-import { Input } from './chunk-FB3TCNQP.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { useReorder } from './chunk-BVML4UVB.js';
+import { Menu } from './chunk-TGGYSQRD.js';
+import { Input } from './chunk-O7N6W52M.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-TPCBPGSB.js → chunk-RO5JU6SN.js}

@@ -1,7 +1,7 @@
-import { SlideStage } from './chunk-RMEBFYL7.js';
-import { useReorder } from './chunk-MPVMB2DV.js';
-import { Kbd, isApplePlatform } from './chunk-ANTAQAR4.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { SlideStage } from './chunk-O6EV6GKI.js';
+import { useReorder } from './chunk-BVML4UVB.js';
+import { Menu } from './chunk-TGGYSQRD.js';
+import { Kbd, isApplePlatform } from './chunk-CMAZZY2I.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideFilmstrip-BLGBCLEU.css';

package/dist/{chunk-O222F2IX.js → chunk-SGMWLUYQ.js}

@@ -1,11 +1,11 @@
-import { Select } from './chunk-VK45YJLH.js';
+import { Select } from './chunk-3IWZVEXA.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
-import { HueSwatch } from './chunk-HEA6TERQ.js';
+import { HueSwatch } from './chunk-SHH7UD5U.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
-import { FormField, Input } from './chunk-FB3TCNQP.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Checkbox } from './chunk-YQ7Q52XU.js';
+import { Menu } from './chunk-TGGYSQRD.js';
+import { FormField, Input } from './chunk-O7N6W52M.js';
+import { Kbd } from './chunk-CMAZZY2I.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-HEA6TERQ.js → chunk-SHH7UD5U.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-6R334YT3.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-CLJGFOTV.js → chunk-SKGOKLJD.js}

@@ -1,11 +1,11 @@
-import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useAppShellAside, ResizeHandle } from './chunk-PIYJNCN7.js';
-import { useModalLayer } from './chunk-H5XTJ7GJ.js';
+import { useModalLayer } from './chunk-TUEM2XIW.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { createContext, useId, useRef, useContext, useLayoutEffect, useEffect, useMemo } from 'react';
 import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var SidePanelFrameContext = createContext(null);
 function part(name, alias) {
@@ -14,6 +14,7 @@ function part(name, alias) {
 function SidePanelBase({
   alias,
   title,
+  subtitle,
   icon,
   onClose,
   closeLabel,
@@ -39,6 +40,7 @@ function SidePanelBase({
   children
 }) {
   const titleId = useId();
+  const subtitled = subtitle !== void 0 && subtitle !== null && subtitle !== false && !hideTitle;
   const panelId = useId();
   const root = useRef(null);
   const heading = useRef(null);
@@ -79,6 +81,20 @@ function SidePanelBase({
   }, []);
   const sized = !inShell && !expanded && width !== void 0;
   const grip = resizable && !inShell && !expanded && (shape === null || shape === "column") && width !== void 0 && onWidthChange;
+  const headingNode = /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ref: heading,
+      id: titleId,
+      className: cx(
+        part("title", alias),
+        !ringHeading && "crewlet-side-panel__title--quiet",
+        hideTitle && "crewlet-side-panel__title--hidden"
+      ),
+      tabIndex: -1,
+      children: title
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -106,22 +122,17 @@ function SidePanelBase({
               edge: "left"
             }
           ) : null,
-          /* @__PURE__ */ jsxs("div", { className: part("head", alias), children: [
+          /* @__PURE__ */ jsxs("div", { className: cx(part("head", alias), subtitled && "crewlet-side-panel__head--subtitled"), children: [
             icon ? /* @__PURE__ */ jsx("span", { className: part("icon", alias), "aria-hidden": true, children: icon }) : null,
-            /* @__PURE__ */ jsx(
-              "h2",
-              {
-                ref: heading,
-                id: titleId,
-                className: cx(
-                  part("title", alias),
-                  !ringHeading && "crewlet-side-panel__title--quiet",
-                  hideTitle && "crewlet-side-panel__title--hidden"
-                ),
-                tabIndex: -1,
-                children: title
-              }
-            ),
+            subtitled ? (
+              /* THE TITLE AND WHAT IT IS ABOUT, on one baseline ("Thread" and the
+                 room it is in), the second dropping under the first when the two
+                 do not fit, and the title ellipsised on its own line. */
+              /* @__PURE__ */ jsxs("div", { className: part("heading", alias), children: [
+                headingNode,
+                /* @__PURE__ */ jsx("span", { className: part("subtitle", alias), children: subtitle })
+              ] })
+            ) : headingNode,
             /* @__PURE__ */ jsxs("span", { className: part("actions", alias), children: [
               actions,
               onExpandedChange ? /* @__PURE__ */ jsx(
@@ -163,6 +174,7 @@ var SIDE_PANEL_LABELS = {
 };
 function SidePanel({
   title,
+  subtitle,
   icon,
   hideTitle,
   onClose,
@@ -186,6 +198,7 @@ function SidePanel({
     SidePanelBase,
     {
       title,
+      subtitle,
       icon,
       hideTitle,
       onClose,

package/dist/{chunk-CSXJIIO4.js → chunk-SNQ7PH3D.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from './chunk-I33UIUZD.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FactList-QEOHLHX3.css';