@crewlethq/ui 0.82.0 → 0.83.0

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

@@ -1,7 +1,7 @@
-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';

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

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

package/dist/{chunk-GP5TNTZH.js → chunk-ICE3D63E.js}

@@ -1,4 +1,5 @@
 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';
@@ -126,11 +127,8 @@ function placeFlyout(tile, railEnd, size, bounds, lift = 0) {
   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);
+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);

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

@@ -0,0 +1,104 @@
+import { useMediaMatch, REDUCED_MOTION_QUERY } from './chunk-YJQXESOJ.js';
+import { tokenMs } from './chunk-HTS5RJ7S.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
+import { useState, useLayoutEffect } from 'react';
+import { motion } from '@crewlethq/tokens';
+
+var MOTION_MARGIN_MS = tokenMs(motion.duration.fast);
+function transitionProperty(animation) {
+  const property = animation.transitionProperty;
+  return typeof property === "string" ? property : null;
+}
+function animationName(animation) {
+  const name = animation.animationName;
+  return typeof name === "string" ? name : null;
+}
+function targetOf(animation) {
+  const effect = animation.effect;
+  return effect && "target" in effect ? effect.target : null;
+}
+function runningMotion(element, owned = {}) {
+  if (typeof element.getAnimations !== "function") return [];
+  const names = owned.animations ?? [];
+  return element.getAnimations({ subtree: names.length > 0 }).filter((animation) => {
+    if (animation.playState !== "running") return false;
+    const end = animation.effect?.getComputedTiming().endTime;
+    if (typeof end !== "number" || !Number.isFinite(end)) return false;
+    const property = transitionProperty(animation);
+    if (property !== null) {
+      return targetOf(animation) === element && (owned.transitions?.includes(property) ?? true);
+    }
+    const name = animationName(animation);
+    return name !== null && names.includes(name);
+  });
+}
+function remainingMs(running) {
+  return Math.max(
+    0,
+    ...running.map((animation) => {
+      const end = Number(animation.effect?.getComputedTiming().endTime ?? 0);
+      const now = typeof animation.currentTime === "number" ? animation.currentTime : 0;
+      return end - now;
+    })
+  );
+}
+function afterMotion(element, done, owned = {}) {
+  let live = true;
+  let bound;
+  const stop = () => {
+    live = false;
+    if (bound !== void 0) clearTimeout(bound);
+  };
+  const finish = () => {
+    if (!live) return;
+    stop();
+    done();
+  };
+  const wait = () => {
+    if (!live) return;
+    const running = element ? runningMotion(element, owned) : [];
+    if (running.length === 0) {
+      finish();
+      return;
+    }
+    if (bound !== void 0) clearTimeout(bound);
+    bound = setTimeout(finish, remainingMs(running) + MOTION_MARGIN_MS);
+    void Promise.allSettled(running.map((animation) => animation.finished)).then(wait);
+  };
+  wait();
+  return stop;
+}
+function releaseFocus(container, target) {
+  const held = container?.ownerDocument.activeElement;
+  if (!container || !(held instanceof HTMLElement) || !container.contains(held)) return;
+  if (target?.isConnected && !container.contains(target) && returnFocus(target)) return;
+  held.blur();
+}
+function usePresence(shown, motion, { transitions, animations, instant = false } = {}) {
+  const still = useMediaMatch(REDUCED_MOTION_QUERY) || instant;
+  const [state, setState] = useState({ shown, leaving: false, entering: false, returning: false });
+  let current = state;
+  if (state.shown !== shown) {
+    current = { shown, leaving: !shown && !still, entering: shown && !still, returning: shown && !still && state.leaving };
+  }
+  if (still && (current.leaving || current.entering)) current = { ...current, leaving: false, entering: false, returning: false };
+  if (current !== state) setState(current);
+  const { leaving, entering, returning } = current;
+  const moving = leaving || entering;
+  const ownTransitions = transitions?.join(" ");
+  const ownAnimations = animations?.join(" ");
+  useLayoutEffect(() => {
+    if (!moving) return void 0;
+    return afterMotion(
+      motion.current,
+      () => setState((now) => now.shown === shown ? { ...now, leaving: false, entering: false, returning: false } : now),
+      {
+        transitions: ownTransitions === void 0 ? void 0 : ownTransitions.split(" ").filter(Boolean),
+        animations: ownAnimations === void 0 ? void 0 : ownAnimations.split(" ").filter(Boolean)
+      }
+    );
+  }, [moving, shown, motion, ownTransitions, ownAnimations]);
+  return { present: shown || leaving, leaving, entering, returning };
+}
+
+export { afterMotion, releaseFocus, runningMotion, usePresence };

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

@@ -1,7 +1,8 @@
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { useRailShape, RailShapeContext } from './chunk-ISQANI6Q.js';
-import { Tooltip } from './chunk-3QQIGMY3.js';
-import { Menu } from './chunk-YOJAGKTS.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';
@@ -11,11 +12,11 @@ import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-F7RID4P4.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, ChevronsRightGlyph, ChevronsLeftGlyph, 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({
@@ -183,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);
@@ -246,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";
@@ -270,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(() => {
@@ -283,16 +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 railShape = hasRail && railChoice === "compact" && !narrow ? "compact" : "full";
+  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,
@@ -323,6 +385,7 @@ function AppShell({
       "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`,
@@ -362,8 +425,8 @@ function AppShell({
             "aria-modal": drawerOpen || void 0,
             "aria-label": drawerOpen ? toggleLabel : void 0,
             children: [
-              foldable ? /* @__PURE__ */ jsx(RailFold, { rail: railShape, onRailChange, keys: railFoldKeys, labels: railFoldLabels, railId }) : null,
-              /* @__PURE__ */ jsx(RailShapeContext.Provider, { value: railShape, children: sidebar })
+              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,
@@ -556,8 +619,9 @@ function RailFold({
           label,
           size: "sm",
           variant: "ghost",
-          icon: compact ? /* @__PURE__ */ jsx(ChevronsRightGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ChevronsLeftGlyph, { size: "sm" }),
+          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")
         }
@@ -567,20 +631,19 @@ function RailFold({
 }
 function AppShellRail({ header, search, status, footer, className, children }) {
   const compact = useRailShape() === "compact";
-  const statusSlot = status ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-status", children: status }) : null;
+  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 && !compact ? /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-head", children: [
       header,
       compact ? null : statusSlot
     ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", children: [
+    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 || status && compact ? /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-foot", children: [
-      compact ? statusSlot : null,
-      footer
-    ] }) : null
+    footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", inert: leaving, children: footer }) : null
   ] });
 }
 function countWords(count) {

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

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-AOFVXE6V.js';
-import { SegmentedControl } from './chunk-GZVAZ3LL.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-B3X4DHRB.js → chunk-RDIQB5ZE.js}

@@ -1,5 +1,5 @@
-import { useReorder } from './chunk-MPVMB2DV.js';
-import { Menu } from './chunk-YOJAGKTS.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';

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

@@ -1,6 +1,6 @@
 import { SlideStage } from './chunk-O6EV6GKI.js';
-import { useReorder } from './chunk-MPVMB2DV.js';
-import { Menu } from './chunk-YOJAGKTS.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';

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

@@ -1,9 +1,9 @@
 import { Select } from './chunk-3IWZVEXA.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
-import { HueSwatch } from './chunk-LSOR77RZ.js';
+import { HueSwatch } from './chunk-SHH7UD5U.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
-import { Menu } from './chunk-YOJAGKTS.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';

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

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

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

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

package/dist/{chunk-MPYRC3GO.js → chunk-SPNTUQBV.js}

@@ -1,5 +1,5 @@
-import { Popover } from './chunk-SM4P2SHB.js';
-import { Tooltip } from './chunk-3QQIGMY3.js';
+import { Popover } from './chunk-EC6EUIAD.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
 import { Input } from './chunk-O7N6W52M.js';
 import { isComposing } from './chunk-TUEM2XIW.js';
 import './EmojiPicker-FMWYN2WX.css';

package/dist/{chunk-YM77TZ7Q.js → chunk-T3S3D4FC.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-3IWZVEXA.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-EE3DJMSQ.js';
-import { Popover } from './chunk-SM4P2SHB.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { Input } from './chunk-O7N6W52M.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { isComposing } from './chunk-TUEM2XIW.js';