@crewlethq/ui 0.81.1 → 0.82.0

package/dist/chunk-GP5TNTZH.js

@@ -0,0 +1,386 @@
+import { LockedLabel } from './chunk-TEV5REGB.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 };
+}
+function ms(value) {
+  return Number.parseFloat(value);
+}
+var OPEN_DELAY = ms(motion.duration.fast);
+var CLOSE_DELAY = ms(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-7KBNFFM3.js → chunk-GVPUCEWH.js}

@@ -1,8 +1,10 @@
+import { useRailShape } from './chunk-ISQANI6Q.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-6R334YT3.js → chunk-GZVAZ3LL.js}

@@ -1,7 +1,7 @@
-import { tabId } from './chunk-2IIHMJMZ.js';
+import { tabId } from './chunk-HCUECVZ3.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
-import { Count } from './chunk-MLDTLZAO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
+import { Count } from './chunk-D2GT3CR4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { useState, useId } from 'react';

package/dist/{chunk-KL6A7JGH.js → chunk-HA2PL7PA.js}

@@ -1,5 +1,5 @@
-import { Toolbar } from './chunk-NR4CPM4T.js';
-import { ShortcutTip } from './chunk-OBPINJNO.js';
+import { Toolbar } from './chunk-NXFTCPF6.js';
+import { ShortcutTip } from './chunk-SEKO6P3Y.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasToolbar-EM5EVZED.css';

package/dist/{chunk-2IIHMJMZ.js → chunk-HCUECVZ3.js}

@@ -1,8 +1,8 @@
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { StatusDot } from './chunk-CYQBDZ6M.js';
-import { Count } from './chunk-MLDTLZAO.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Menu } from './chunk-YOJAGKTS.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
+import { Count } from './chunk-D2GT3CR4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';

package/dist/{chunk-N2BF272H.js → chunk-HF5L56YQ.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-KTIQSSME.js';
+import { Avatar } from './chunk-XZY6S3UC.js';
 import { UsersGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-Q2T4L6ML.js → chunk-HFOTRZFU.js}

@@ -1,12 +1,12 @@
-import { Select } from './chunk-VK45YJLH.js';
-import { Modal } from './chunk-C667GCU7.js';
+import { Select } from './chunk-3IWZVEXA.js';
+import { Modal } from './chunk-XXDB6KPV.js';
 import { CopyButton } from './chunk-T5GBTXNC.js';
 import { Callout } from './chunk-BPCY7ZID.js';
-import { PrincipalAvatar } from './chunk-N2BF272H.js';
-import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ShareDialog-72VTMM4K.css';
 import { useState, useId } from 'react';

package/dist/{chunk-2STOSJT3.js → chunk-HQFOZJQ4.js}

@@ -1,17 +1,17 @@
 import { TagGroup } from './chunk-UEOEBOBR.js';
 import { CursorFlag } from './chunk-MMCYH5LB.js';
 import { presenceHueClass } from './chunk-EFX2YC5T.js';
-import { ChangeMark } from './chunk-Z2MZTI3H.js';
+import { ChangeMark } from './chunk-ONNXUS5Y.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-LFSIKGRQ.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
-import { Popover } from './chunk-KHJIEPZV.js';
-import { Tag } from './chunk-VERJCAJ4.js';
-import { Tooltip } from './chunk-I33UIUZD.js';
+import { Popover } from './chunk-SM4P2SHB.js';
+import { Tag } from './chunk-LBGKLYBY.js';
+import { Avatar } from './chunk-XZY6S3UC.js';
 import { StatusDot } from './chunk-CYQBDZ6M.js';
-import { Avatar } from './chunk-KTIQSSME.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Tooltip } from './chunk-3QQIGMY3.js';
+import { Menu } from './chunk-YOJAGKTS.js';
 import { Button } from './chunk-DGXZ635L.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { isComposing } from './chunk-TUEM2XIW.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-HTBTAIH6.js

@@ -0,0 +1,37 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactKinds-3EH4KR3F.css';
+import './ActionCard-47WSZ2O5.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ACTION_CARD_GROUND = {
+  purple: "design",
+  blue: "doc",
+  amber: "slides",
+  green: "sheet",
+  teal: "dashboard",
+  magenta: "brand",
+  rose: "html"
+};
+function ActionCard({ title, tone, art, onSelect, onClick, className, type = "button", ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cx("crewlet-action-card", `crewlet-kind--${ACTION_CARD_GROUND[tone]}`, className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onSelect();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-action-card__title", children: title }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-action-card__art", "aria-hidden": "true", children: art })
+      ]
+    }
+  );
+}
+function ActionCardRow({ label, children, className }) {
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: cx("crewlet-action-cards", className), children });
+}
+
+export { ACTION_CARD_GROUND, ActionCard, ActionCardRow };

package/dist/{chunk-BRLZXYPA.js → chunk-I4IUX3JF.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Skeleton-7ZA5ETJM.css';
+import './Skeleton-GIXV3KK5.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var range = (n) => Array.from({ length: Math.max(0, n) }, (_, i) => i);

package/dist/{chunk-BXCL6P5Z.js → chunk-I4PBFJGX.js}

@@ -1,4 +1,4 @@
-import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { useFocusModality } from './chunk-4ITETIGZ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Document-M6JYGLWV.css';
 import { forwardRef, useRef, useCallback, useLayoutEffect, useEffect } from 'react';

package/dist/{chunk-ADGNISEI.js → chunk-IAP7APOX.js}

@@ -1,11 +1,11 @@
-import { PrincipalAvatar } from './chunk-N2BF272H.js';
+import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-EJNJMHQG.js';
-import { Document } from './chunk-BXCL6P5Z.js';
-import { Composer } from './chunk-E35HYQMK.js';
-import { Count } from './chunk-MLDTLZAO.js';
-import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { Document } from './chunk-I4PBFJGX.js';
+import { Composer } from './chunk-EBVZHVPD.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { Count } from './chunk-D2GT3CR4.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CommentThread-FRXTDNV6.css';
 import { useState, useRef, useId, useMemo } from 'react';

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-ISQANI6Q.js

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