@crewlethq/ui 0.81.2 → 0.83.0

package/dist/chunk-ICE3D63E.js

@@ -0,0 +1,384 @@
+import { LockedLabel } from './chunk-TEV5REGB.js';
+import { tokenMs } from './chunk-HTS5RJ7S.js';
+import { LAYER_GAP, useLayerContainer, viewportBounds, anchorGone, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
+import { usePopupLayer } from './chunk-TUEM2XIW.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
+import { VisuallyHidden } from './chunk-UT6CW3C7.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './HitArea-QUOS6ZDJ.css';
+import './CompactNav-CU2AQXBC.css';
+import { useState, useRef, useId, useCallback, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion } from '@crewlethq/tokens';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function CompactNav({ label, className, children }) {
+  return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-compact-nav", className), "aria-label": label, children: /* @__PURE__ */ jsx("ul", { className: "crewlet-compact-nav__list", children }) });
+}
+function figureWords(figure) {
+  return `, ${String(figure.value)} ${figure.label}`;
+}
+function titleOf(place) {
+  const figure = place.badge ?? place.count;
+  const named = figure ? `${place.label}${figureWords(figure)}` : place.label;
+  return place.locked ? `${named}. ${place.locked}` : named;
+}
+function Tile({ icon, figure, attention }) {
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-compact-nav__tile", "aria-hidden": true, children: [
+    icon,
+    figure ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-compact-nav__figure", attention && "crewlet-compact-nav__figure--badge"), children: figure.value }) : null
+  ] });
+}
+function TileLabel({ label, figures, locked }) {
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-compact-nav__label", children: [
+    /* @__PURE__ */ jsx(LockedLabel, { reason: locked, children: label }),
+    figures ? /* @__PURE__ */ jsx(VisuallyHidden, { children: figures }) : null
+  ] });
+}
+function CompactNavItem({
+  label,
+  icon,
+  href,
+  current = false,
+  badge,
+  count,
+  locked,
+  onPrefetch,
+  title,
+  keyshortcuts,
+  onClick,
+  renderLink,
+  className
+}) {
+  const figure = badge ?? count;
+  const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tile, { icon, figure, attention: badge !== void 0 }),
+    /* @__PURE__ */ jsx(TileLabel, { label, figures: [count, badge].filter((f) => f !== void 0).map(figureWords).join(""), locked })
+  ] });
+  const shown = title ?? titleOf({ label, badge, count, locked });
+  const itemClass = cx("crewlet-compact-nav__item", HIT_AREA_CLASS, locked && "crewlet-compact-nav__item--locked");
+  let item;
+  if (renderLink) {
+    item = renderLink({
+      className: itemClass,
+      children: inside,
+      ...href === void 0 ? {} : { href },
+      ...current ? { "aria-current": "page" } : {},
+      ...onClick === void 0 ? {} : { onClick },
+      title: shown,
+      ...onPrefetch === void 0 ? {} : { onPointerEnter: onPrefetch, onFocus: onPrefetch }
+    });
+  } else if (href !== void 0) {
+    item = /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: itemClass,
+        href,
+        "aria-current": current ? "page" : void 0,
+        "aria-keyshortcuts": keyshortcuts,
+        title: shown,
+        onClick,
+        onPointerEnter: onPrefetch,
+        onFocus: onPrefetch,
+        children: inside
+      }
+    );
+  } else {
+    item = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: itemClass,
+        "aria-current": current ? "page" : void 0,
+        "aria-keyshortcuts": keyshortcuts,
+        title: shown,
+        onClick,
+        onPointerEnter: onPrefetch,
+        onFocus: onPrefetch,
+        children: inside
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("li", { className: cx("crewlet-compact-nav__entry", className), children: item });
+}
+function CompactNavSeparator({ label }) {
+  return /* @__PURE__ */ jsx("li", { className: "crewlet-compact-nav__separator", children: /* @__PURE__ */ jsx("span", { className: "crewlet-compact-nav__rule", role: "separator", "aria-label": label }) });
+}
+function figureNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? { n: value, more: false } : null;
+  const match = /^(\d[\d,]*)(\+?)$/.exec(value.trim());
+  if (!match) return null;
+  return { n: Number(match[1].replaceAll(",", "")), more: match[2] === "+" };
+}
+function groupBadge(links) {
+  const badges = links.flatMap((link) => link.badge ? [link.badge] : []);
+  if (badges.length === 0) return void 0;
+  if (badges.length === 1) return badges[0].value;
+  const read = badges.map((badge) => figureNumber(badge.value));
+  if (read.some((figure) => figure === null)) return `${String(badges[0].value)}+`;
+  const total = read.reduce((sum, figure) => sum + figure.n, 0);
+  return read.some((figure) => figure.more) ? `${total}+` : total;
+}
+function placeFlyout(tile, railEnd, size, bounds, lift = 0) {
+  const maxTop = bounds.y + bounds.height - size.height;
+  const top = Math.max(bounds.y, Math.min(tile.y - lift, maxTop));
+  const maxLeft = bounds.x + bounds.width - size.width;
+  const left = Math.max(bounds.x, Math.min(railEnd + LAYER_GAP, maxLeft));
+  return { left, top };
+}
+var OPEN_DELAY = tokenMs(motion.duration.fast);
+var CLOSE_DELAY = tokenMs(motion.duration.moderate);
+function CompactNavGroup({ label, icon, links, renderLink, className }) {
+  const [open, setOpen] = useState(false);
+  const [place, setPlace] = useState(null);
+  const tile = useRef(null);
+  const panel = useRef(null);
+  const timer = useRef(void 0);
+  const opener = useRef("pointer");
+  const focusFirst = useRef(false);
+  const id = useId();
+  const container = useLayerContainer();
+  const current = links.some((link) => link.current);
+  const badge = groupBadge(links);
+  const spoken = links.filter((link) => link.badge).map((link) => `${link.label} ${String(link.badge.value)} ${link.badge.label}`).join(", ");
+  const clear = useCallback(() => {
+    if (timer.current !== void 0) clearTimeout(timer.current);
+    timer.current = void 0;
+  }, []);
+  const close = useCallback(
+    (refocus) => {
+      clear();
+      setOpen(false);
+      if (refocus) returnFocus(tile.current);
+    },
+    [clear]
+  );
+  const show = useCallback(
+    (by, first) => {
+      clear();
+      opener.current = by;
+      focusFirst.current = first;
+      setOpen(true);
+    },
+    [clear]
+  );
+  const popup = usePopupLayer({
+    open,
+    // Escape hands focus back to the tile; a press elsewhere leaves it where
+    // the reader put it.
+    onDismiss: (reason) => close(reason === "escape" && panel.current?.contains(document.activeElement) === true)
+  });
+  const position = useCallback(() => {
+    const at = tile.current;
+    const box = panel.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    if (anchorGone(rect, host, inHost)) {
+      close(false);
+      return;
+    }
+    const rail = at.closest(".crewlet-compact-nav")?.getBoundingClientRect() ?? rect;
+    const own = box.getBoundingClientRect();
+    const head = box.querySelector(".crewlet-compact-nav__flyout-head");
+    const spot = placeFlyout(
+      { x: rect.x - (inHost ? host.x : 0), y: rect.y - (inHost ? host.y : 0), width: rect.width, height: rect.height },
+      rail.right - (inHost ? host.x : 0),
+      { width: own.width, height: own.height },
+      { x: LAYER_GAP, y: LAYER_GAP, width: host.width - 2 * LAYER_GAP, height: host.height - 2 * LAYER_GAP },
+      // The flyout's HEAD stands level with the tile: the group's name beside
+      // the group's tile, and its places running down from there. The panel's
+      // own edge and inset go above the tile's top.
+      head ? head.offsetTop + box.clientTop : 0
+    );
+    setPlace((was) => was && was.left === spot.left && was.top === spot.top ? was : spot);
+  }, [close, container]);
+  useLayoutEffect(() => {
+    if (!open) return void 0;
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  useLayoutEffect(() => {
+    if (!place || !focusFirst.current) return;
+    focusFirst.current = false;
+    panel.current?.querySelector('[role="menuitem"]')?.focus();
+  }, [place]);
+  useEffect(() => {
+    if (!open) setPlace(null);
+  }, [open]);
+  useEffect(() => clear, [clear]);
+  const items = () => [...panel.current?.querySelectorAll('[role="menuitem"]') ?? []];
+  const onTileKeyDown = (event) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      if (open) items()[0]?.focus();
+      else show("keys", true);
+    }
+  };
+  const onPanelKeyDown = (event) => {
+    const all = items();
+    const at = all.indexOf(document.activeElement);
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        event.preventDefault();
+        const step = event.key === "ArrowDown" ? 1 : -1;
+        all[(at + step + all.length) % all.length]?.focus();
+        break;
+      }
+      case "Home":
+      case "End":
+        event.preventDefault();
+        (event.key === "Home" ? all[0] : all.at(-1))?.focus();
+        break;
+      case "ArrowLeft":
+      case "Escape":
+        event.preventDefault();
+        close(true);
+        break;
+      case "Tab":
+        close(true);
+        break;
+    }
+  };
+  const onPointerEnter = (event) => {
+    if (event.pointerType !== "mouse") return;
+    clear();
+    if (!open) timer.current = setTimeout(() => show("pointer", false), OPEN_DELAY);
+  };
+  const onPointerLeave = (event) => {
+    if (event.pointerType !== "mouse") return;
+    clear();
+    if (opener.current === "pointer") timer.current = setTimeout(() => setOpen(false), CLOSE_DELAY);
+  };
+  const choose = (link) => (event) => {
+    link.onClick?.(event);
+    close(panel.current?.contains(document.activeElement) === true && event.detail === 0);
+  };
+  const flyout = open ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+        popup.panelRef(el);
+      },
+      id: `${id}-flyout`,
+      role: "menu",
+      "aria-label": label,
+      tabIndex: -1,
+      className: cx(
+        "crewlet-compact-nav__flyout",
+        container !== null && container !== document.body && "crewlet-compact-nav__flyout--in-host"
+      ),
+      style: place ? { left: place.left, top: place.top, zIndex: popup.zIndex } : { visibility: "hidden" },
+      onKeyDown: onPanelKeyDown,
+      onPointerEnter: (event) => event.pointerType === "mouse" && clear(),
+      onPointerLeave,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-compact-nav__flyout-head", "aria-hidden": true, children: label }),
+        links.map((link) => {
+          const figure = link.badge ?? link.count;
+          const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-compact-nav__link-icon", "aria-hidden": true, children: link.icon }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-compact-nav__link-label", children: [
+              /* @__PURE__ */ jsx(LockedLabel, { reason: link.locked, children: link.label }),
+              figure ? /* @__PURE__ */ jsx(VisuallyHidden, { children: [link.count, link.badge].filter((f) => f !== void 0).map(figureWords).join("") }) : null
+            ] }),
+            figure ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx("crewlet-compact-nav__link-figure", link.badge && "crewlet-compact-nav__link-figure--badge"),
+                "aria-hidden": true,
+                children: figure.value
+              }
+            ) : null
+          ] });
+          const linkClass = cx("crewlet-compact-nav__link", link.locked && "crewlet-compact-nav__link--locked");
+          const onClick = choose(link);
+          if (renderLink) {
+            return /* @__PURE__ */ jsx(MenuLink, { children: renderLink({
+              className: linkClass,
+              children: inside,
+              ...link.href === void 0 ? {} : { href: link.href },
+              ...link.current ? { "aria-current": "page" } : {},
+              onClick,
+              ...link.onPrefetch === void 0 ? {} : { onPointerEnter: link.onPrefetch, onFocus: link.onPrefetch }
+            }) }, link.key);
+          }
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: linkClass,
+              href: link.href,
+              role: "menuitem",
+              tabIndex: -1,
+              "aria-current": link.current ? "page" : void 0,
+              onClick,
+              onPointerEnter: link.onPrefetch,
+              onFocus: link.onPrefetch,
+              children: inside
+            },
+            link.key
+          );
+        })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-compact-nav__entry", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (el) => {
+          tile.current = el;
+          popup.insideRef(el);
+        },
+        type: "button",
+        className: cx("crewlet-compact-nav__item", HIT_AREA_CLASS),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? `${id}-flyout` : void 0,
+        "aria-current": current ? "true" : void 0,
+        title: spoken ? `${label}, ${spoken}` : label,
+        "data-open": open || void 0,
+        onClick: (event) => {
+          if (open && opener.current === "pointer" && event.detail !== 0) {
+            opener.current = "press";
+            return;
+          }
+          if (open) close(false);
+          else show(event.detail === 0 ? "keys" : "press", event.detail === 0);
+        },
+        onKeyDown: onTileKeyDown,
+        onPointerEnter,
+        onPointerLeave,
+        children: [
+          /* @__PURE__ */ jsx(Tile, { icon, figure: badge === void 0 ? void 0 : { value: badge, label: "" }, attention: true }),
+          /* @__PURE__ */ jsx(TileLabel, { label, figures: spoken ? `, ${spoken}` : "", locked: void 0 })
+        ]
+      }
+    ),
+    flyout && container ? createPortal(flyout, container) : null
+  ] });
+}
+function MenuLink({ children }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const element = ref.current?.firstElementChild;
+    if (!(element instanceof HTMLElement)) return;
+    element.setAttribute("role", "menuitem");
+    element.tabIndex = -1;
+  });
+  return /* @__PURE__ */ jsx("span", { ref, className: "crewlet-compact-nav__link-slot", children });
+}
+
+export { CompactNav, CompactNavGroup, CompactNavItem, CompactNavSeparator, groupBadge, placeFlyout };

package/dist/{chunk-BT3GB7HC.js → chunk-IRONPJB4.js}

@@ -1,7 +1,7 @@
-import { AVATAR_SIZES, Avatar } from './chunk-KTIQSSME.js';
+import { AVATAR_SIZES, Avatar } from './chunk-XZY6S3UC.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-VJSJGFRG.css';
-import './AvatarStack-7I3P7LCK.css';
+import './Avatar-MNE3WBZO.css';
+import './AvatarStack-KEHD3GWY.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function counted(count, one, many) {

package/dist/chunk-IUBOLGHG.js

@@ -0,0 +1,140 @@
+import { Button } from './chunk-DGXZ635L.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChatScale-L4SIHSKL.css';
+import './ChatMessage-FH7VRVCH.css';
+import { forwardRef, useState, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CHAT_MESSAGE_CLASS = "crewlet-chat-message";
+function scrollerOf(element) {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node);
+    if (overflowY === "auto" || overflowY === "scroll") return node;
+  }
+  return null;
+}
+var ChatMessage = forwardRef(function ChatMessage2({
+  id,
+  label,
+  avatar,
+  author,
+  badges,
+  time,
+  timeTitle,
+  dateTime,
+  gutterTime,
+  continuation = false,
+  highlight = null,
+  pending,
+  active = false,
+  flash = false,
+  editing = false,
+  actions,
+  actionsPlacement = "auto",
+  footer,
+  children,
+  className,
+  onKeyDown,
+  onPointerEnter,
+  onFocus,
+  ...rest
+}, ref) {
+  const tray = editing ? null : actions;
+  const hasTray = tray !== null && tray !== void 0 && tray !== false;
+  const [inside, setInside] = useState(false);
+  const measure = useCallback(
+    (row) => {
+      if (actionsPlacement !== "auto") return;
+      const bar = row.querySelector(":scope > .crewlet-chat-message__actions");
+      if (!bar) return;
+      const edge = scrollerOf(row)?.getBoundingClientRect().top ?? 0;
+      const need = bar.offsetHeight - (Number.parseFloat(getComputedStyle(row).paddingTop) || 0);
+      const next = row.getBoundingClientRect().top - edge < need;
+      setInside((was) => was === next ? was : next);
+    },
+    [actionsPlacement]
+  );
+  function keys(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget) return;
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+    const row = event.currentTarget;
+    const within = row.closest('[role="log"]') ?? row.parentElement;
+    if (!within) return;
+    const rows = [...within.querySelectorAll(`.${CHAT_MESSAGE_CLASS}`)];
+    const next = rows[rows.indexOf(row) + (event.key === "ArrowUp" ? -1 : 1)];
+    if (!next) return;
+    event.preventDefault();
+    next.focus();
+  }
+  return (
+    // A row is an article a reader can land on (a tap, a jump, the arrows)
+    // and step from, as the items of a feed are: the keys it takes walk
+    // between rows, and the pointer only measures where its toolbar stands.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- see above
+    /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ...rest,
+        ref,
+        className: cx(
+          CHAT_MESSAGE_CLASS,
+          continuation && "is-continuation",
+          highlight && `is-${highlight}`,
+          pending && `is-${pending}`,
+          active && "is-active",
+          flash && "is-flash",
+          editing && "is-editing",
+          hasTray && (actionsPlacement === "inside" || inside) && "has-actions-inside",
+          className
+        ),
+        "aria-label": label,
+        "data-message-id": id,
+        tabIndex: -1,
+        onKeyDown: keys,
+        onPointerEnter: (event) => {
+          if (hasTray) measure(event.currentTarget);
+          onPointerEnter?.(event);
+        },
+        onFocus: (event) => {
+          if (hasTray) measure(event.currentTarget);
+          onFocus?.(event);
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-chat-message__gutter", children: continuation ? /* @__PURE__ */ jsx("time", { className: "crewlet-chat-message__gutter-time", dateTime, title: timeTitle, children: gutterTime ?? time }) : avatar }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-chat-message__main", children: [
+            continuation ? null : /* @__PURE__ */ jsxs("div", { className: "crewlet-chat-message__head", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-chat-message__author", children: author }),
+              badges,
+              /* @__PURE__ */ jsx("time", { className: "crewlet-chat-message__time", dateTime, title: timeTitle, children: time })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "crewlet-chat-message__body", children }),
+            footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-chat-message__footer", children: footer }) : null
+          ] }),
+          hasTray ? /* @__PURE__ */ jsx("div", { className: "crewlet-chat-message__actions", children: tray }) : null
+        ]
+      }
+    )
+  );
+});
+var CHAT_MESSAGE_FAILURE_LABELS = {
+  notSent: "Not sent.",
+  retry: "Retry",
+  discard: "Discard"
+};
+function ChatMessageFailure({ reason, onRetry, onDiscard, labels: overrides, className, ...rest }) {
+  const labels = overrides ? { ...CHAT_MESSAGE_FAILURE_LABELS, ...overrides } : CHAT_MESSAGE_FAILURE_LABELS;
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-chat-message-failure", className), role: "status", children: [
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-chat-message-failure__words", children: [
+      labels.notSent,
+      reason ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        reason
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onRetry, children: labels.retry }),
+    /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDiscard, children: labels.discard })
+  ] });
+}
+
+export { CHAT_MESSAGE_CLASS, CHAT_MESSAGE_FAILURE_LABELS, ChatMessage, ChatMessageFailure };

package/dist/chunk-JLOESTT2.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+// src/AppShell/railShape.ts
+var RailShapeContext = createContext("full");
+function useRailShape() {
+  return useContext(RailShapeContext);
+}
+var RailLeavingContext = createContext(false);
+
+export { RailLeavingContext, RailShapeContext, useRailShape };

package/dist/{chunk-5EFLA6BW.js → chunk-K6RWEQ6P.js}

@@ -1,8 +1,8 @@
 import { Stepper } from './chunk-RJWO2PC5.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
-import { Disclosure } from './chunk-222VILSP.js';
+import { useMediaMatch } from './chunk-YJQXESOJ.js';
+import { Disclosure } from './chunk-LVJGN5II.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SetupWizard-Y2PFPBCZ.css';
 import { useId, useRef, useState, useEffect, useCallback, createElement } from 'react';

package/dist/{chunk-ZQEJSEPS.js → chunk-K6Y6CDEZ.js}

@@ -1,6 +1,6 @@
-import { avatarCorner, Avatar } from './chunk-KTIQSSME.js';
+import { avatarCorner, Avatar } from './chunk-XZY6S3UC.js';
 import { Spinner } from './chunk-XSPCITPN.js';
-import './ImageUpload-OWI7CCG7.css';
+import './ImageUpload-IFXZROFZ.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/chunk-K774LUN3.js

@@ -0,0 +1,20 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChatScale-L4SIHSKL.css';
+import './ChatDivider-7ZNDL2PZ.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ChatDivider({ variant, label, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "separator",
+      "aria-label": label,
+      "data-divider": variant,
+      className: cx("crewlet-chat-divider", `crewlet-chat-divider--${variant}`, className),
+      children: /* @__PURE__ */ jsx("span", { className: "crewlet-chat-divider__label", "aria-hidden": "true", children: label })
+    }
+  );
+}
+
+export { ChatDivider };

package/dist/{chunk-7KBNFFM3.js → chunk-KXWJJWBD.js}

@@ -1,8 +1,10 @@
+import { useRailShape } from './chunk-JLOESTT2.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './BrandLockup-JKGXFCZF.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function BrandLockup({ name, mark, context, href, renderLink, className }) {
+  const title = useRailShape() === "compact" ? name : void 0;
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
     mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand__mark", "aria-hidden": true, children: mark }) : null,
     /* @__PURE__ */ jsx("span", { className: "crewlet-brand__name", children: name })
@@ -11,15 +13,16 @@ function BrandLockup({ name, mark, context, href, renderLink, className }) {
     className: "crewlet-brand__home",
     children: inside,
     "aria-label": name,
-    ...href === void 0 ? {} : { href }
+    ...href === void 0 ? {} : { href },
+    ...title === void 0 ? {} : { title }
   };
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-brand", className), children: [
     renderLink ? renderLink(linkProps) : href === void 0 ? (
       // Not a link, because it goes nowhere. An anchor with no href is
       // announced as text anyway, and one with href="#" navigates the page
       // it is meant to be the way out of.
-      /* @__PURE__ */ jsx("span", { className: "crewlet-brand__home", children: inside })
-    ) : /* @__PURE__ */ jsx("a", { className: "crewlet-brand__home", href, "aria-label": name, children: inside }),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-brand__home", title, children: inside })
+    ) : /* @__PURE__ */ jsx("a", { className: "crewlet-brand__home", href, "aria-label": name, title, children: inside }),
     context ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand__context", children: context }) : null
   ] });
 }

package/dist/{chunk-53J2YNQA.js → chunk-L5VU3LZT.js}

@@ -1,4 +1,4 @@
-import { PrincipalAvatar } from './chunk-N2BF272H.js';
+import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Timeline } from './chunk-4MJN2KN6.js';
 import { Button } from './chunk-DGXZ635L.js';

package/dist/chunk-L72URIHR.js

@@ -0,0 +1,36 @@
+import { useRef } from 'react';
+
+// src/utils/composedRef.ts
+function attachRef(ref, element) {
+  if (typeof ref === "function") {
+    const release = ref(element);
+    return typeof release === "function" ? release : () => void ref(null);
+  }
+  if (!ref) return () => {
+  };
+  const box = ref;
+  box.current = element;
+  return () => {
+    box.current = null;
+  };
+}
+function composeRefs(...refs) {
+  return (element) => {
+    const releases = refs.map((ref) => attachRef(ref, element));
+    return () => {
+      for (const release of releases) release();
+    };
+  };
+}
+function sameRefs(a, b) {
+  return a.length === b.length && a.every((ref, index) => ref === b[index]);
+}
+function useComposedRef(...refs) {
+  const joined = useRef(null);
+  if (!joined.current || !sameRefs(joined.current.refs, refs)) {
+    joined.current = { refs, callback: composeRefs(...refs) };
+  }
+  return joined.current.callback;
+}
+
+export { attachRef, composeRefs, useComposedRef };

package/dist/{chunk-VERJCAJ4.js → chunk-LBGKLYBY.js}

@@ -1,6 +1,6 @@
 import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-JTJVZM2D.css';
+import './Tag-WLDOROB5.css';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';