@crewlethq/ui 0.82.0 → 0.84.0

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

@@ -1,9 +1,9 @@
 import { Select } from './chunk-3IWZVEXA.js';
-import { Modal } from './chunk-XXDB6KPV.js';
+import { Modal } from './chunk-ZXXZESCD.js';
 import { CopyButton } from './chunk-T5GBTXNC.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { useMediaMatch } from './chunk-YJQXESOJ.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/{chunk-GZVAZ3LL.js → chunk-AZYE7NR4.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-HCUECVZ3.js';
+import { tabId } from './chunk-MVKUE4FI.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { Count } from './chunk-D2GT3CR4.js';

package/dist/{chunk-6IOQWMYJ.js → chunk-BN5FEJL5.js}

@@ -1,4 +1,4 @@
-import { BrandLockup } from './chunk-GVPUCEWH.js';
+import { BrandLockup } from './chunk-KXWJJWBD.js';
 import { Card } from './chunk-U2IQNDDR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AuthLayout-ODHBUPHQ.css';

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-MPVMB2DV.js → chunk-BVML4UVB.js}

@@ -1,3 +1,4 @@
+import { prefersReducedMotion } from './chunk-YJQXESOJ.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
 
@@ -24,7 +25,7 @@ function place(lists, key, list, index) {
   return next;
 }
 var SETTLE_MS = 200;
-var settleMs = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 20 : SETTLE_MS;
+var settleMs = () => prefersReducedMotion() ? 20 : SETTLE_MS;
 var now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
 function byRows(node, axis) {
   if (axis === "vertical") return true;
@@ -79,7 +80,7 @@ function useReorderLists({
     const last = before.current;
     before.current = /* @__PURE__ */ new Map();
     if (last.size === 0) return;
-    if (typeof window === "undefined" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    if (typeof window === "undefined" || prefersReducedMotion()) return;
     for (const [key, node] of nodes.current) {
       const was = last.get(key);
       if (!was) continue;

package/dist/{chunk-OAHRMR4U.js → chunk-C42XW5YP.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-GZVAZ3LL.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-HCXPRQVR.css';

package/dist/{chunk-2H6YDUR5.js → chunk-C4JTX25K.js}

@@ -3,13 +3,13 @@ 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 { ArtifactAccessGlyph } from './chunk-DOY3KC6I.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-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-HA2PL7PA.js → chunk-DRFOTWJE.js}

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

package/dist/{chunk-SM4P2SHB.js → chunk-EC6EUIAD.js}

@@ -1,3 +1,4 @@
+import { useComposedRef } from './chunk-L72URIHR.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer, focusables } from './chunk-TUEM2XIW.js';
 import { returnFocus } from './chunk-4ITETIGZ.js';
@@ -122,11 +123,13 @@ function Popover({
   }, [close, open, setOpen]);
   const triggerEl = trigger(open, toggle);
   const haspopup = role === "none" ? void 0 : role;
+  const anchorRef = useComposedRef(
+    anchor,
+    layer.insideRef,
+    triggerEl.props.ref
+  );
   const anchored = cloneElement(triggerEl, {
-    ref: (el) => {
-      anchor.current = el;
-      layer.insideRef(el);
-    },
+    ref: anchorRef,
     "aria-expanded": open,
     "aria-haspopup": triggerEl.props["aria-haspopup"] ?? haspopup,
     "aria-controls": open ? panelId : void 0

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-AMUXSJ2A.js → chunk-FPU7AA3X.js}

@@ -1,9 +1,10 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-SEKO6P3Y.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-NCUSI4ZU.js';
+import { useMediaMatch, REDUCED_MOTION_QUERY } from './chunk-YJQXESOJ.js';
 import { focusables } from './chunk-TUEM2XIW.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-5FPK4CII.css';
-import { useState, useRef, useMemo, useLayoutEffect, useCallback, useImperativeHandle, useId, useSyncExternalStore } from 'react';
+import { useState, useRef, useMemo, useLayoutEffect, useCallback, useImperativeHandle, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var ENTRANCE_STEP_MS = 60;
@@ -14,19 +15,7 @@ function entranceOrder(layout) {
   return [...layout.nodes].sort((a, b) => row(a) - row(b) || a.x - b.x || (a.id < b.id ? -1 : 1)).map((one) => one.id);
 }
 function useStillness() {
-  const query = "(prefers-reduced-motion: reduce)";
-  const subscribe = useCallback((notify) => {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
-    };
-    const list = window.matchMedia(query);
-    list.addEventListener("change", notify);
-    return () => list.removeEventListener("change", notify);
-  }, []);
-  const read = useCallback(
-    () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false,
-    []
-  );
-  return useSyncExternalStore(subscribe, read, () => false);
+  return useMediaMatch(REDUCED_MOTION_QUERY);
 }
 function useEntrance(layout, still) {
   const [shown, setShown] = useState(null);

package/dist/{chunk-KLAVEJIO.js → chunk-GLKQHN7G.js}

@@ -1,4 +1,4 @@
-import { useReorder } from './chunk-MPVMB2DV.js';
+import { useReorder } from './chunk-BVML4UVB.js';
 import { FormField, Textarea } from './chunk-O7N6W52M.js';
 import { characterCountState, CharacterCount, countCharacters } from './chunk-PGCLHYVP.js';
 import { Kbd } from './chunk-CMAZZY2I.js';

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-XY4O2XMR.js → chunk-HKUZ2GYX.js}

@@ -1,13 +1,13 @@
-import { SegmentedControl } from './chunk-GZVAZ3LL.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
 import { ArtifactIcon } from './chunk-AVL52EME.js';
-import { Tooltip } from './chunk-3QQIGMY3.js';
-import { Menu } from './chunk-YOJAGKTS.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
+import { Menu } from './chunk-TGGYSQRD.js';
 import { isApplePlatform, Kbd, ariaKeyshortcuts } from './chunk-CMAZZY2I.js';
 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-HTS5RJ7S.js

@@ -0,0 +1,6 @@
+// src/utils/tokenMs.ts
+function tokenMs(value) {
+  return Number.parseFloat(value);
+}
+
+export { tokenMs };

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-ISQANI6Q.js → chunk-JLOESTT2.js}

@@ -5,5 +5,6 @@ var RailShapeContext = createContext("full");
 function useRailShape() {
   return useContext(RailShapeContext);
 }
+var RailLeavingContext = createContext(false);
 
-export { RailShapeContext, useRailShape };
+export { RailLeavingContext, RailShapeContext, useRailShape };

package/dist/{chunk-C75WZMXG.js → chunk-K6RWEQ6P.js}

@@ -1,6 +1,6 @@
 import { Stepper } from './chunk-RJWO2PC5.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { useMediaMatch } from './chunk-YJQXESOJ.js';
 import { Disclosure } from './chunk-LVJGN5II.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-GVPUCEWH.js → chunk-KXWJJWBD.js}

@@ -1,4 +1,4 @@
-import { useRailShape } from './chunk-ISQANI6Q.js';
+import { useRailShape } from './chunk-JLOESTT2.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './BrandLockup-JKGXFCZF.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

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-2TOGGCDM.js → chunk-LT44RL62.js}

@@ -1,7 +1,7 @@
 import { heldHint } from './chunk-TDFLCUBE.js';
-import { emojiName } from './chunk-MPYRC3GO.js';
+import { emojiName } from './chunk-SPNTUQBV.js';
 import { Toolbar } from './chunk-NXFTCPF6.js';
-import { Tooltip } from './chunk-3QQIGMY3.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChatScale-L4SIHSKL.css';

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-HCUECVZ3.js → chunk-MVKUE4FI.js}

@@ -1,6 +1,6 @@
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { StatusDot } from './chunk-CYQBDZ6M.js';
-import { Menu } from './chunk-YOJAGKTS.js';
+import { Menu } from './chunk-TGGYSQRD.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { Count } from './chunk-D2GT3CR4.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-6YBBQAEM.js → chunk-MYAARF4Z.js}

@@ -1,4 +1,4 @@
-import { ConfirmModal } from './chunk-XXDB6KPV.js';
+import { ConfirmModal } from './chunk-ZXXZESCD.js';
 import { InlineCode } from './chunk-PLL7ZJHY.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import './LinkInterstitial-ET4MSVSV.css';

package/dist/{chunk-SEKO6P3Y.js → chunk-NCUSI4ZU.js}

@@ -1,5 +1,5 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
-import { Tooltip } from './chunk-3QQIGMY3.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
 import { Kbd } from './chunk-CMAZZY2I.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';

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 = {