@crewlethq/ui 0.82.0 → 0.84.0

package/dist/{chunk-T4IEESXN.js → chunk-ORONAXSF.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,7 +12,7 @@ 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-NX5HCD4O.css';
 import './ResizeHandle-2UNSZ4ZQ.css';
 import { createContext, forwardRef, useContext, useSyncExternalStore, useCallback, useId, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
@@ -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);
@@ -229,6 +246,7 @@ function AppShell({
   const narrow = useMediaMatch(NARROW);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [scroller, setScroller] = useState(null);
+  const [gauge, setGauge] = useState(null);
   const [drawerZ, setDrawerZ] = useState(null);
   const rail = useRef(null);
   const closeDrawer = useCallback(() => setDrawerOpen(false), []);
@@ -246,16 +264,30 @@ 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));
+    const ruler = gauge ?? scroller;
+    if (!ruler) return void 0;
+    const measure = () => setGutter(Math.max(0, ruler.offsetWidth - ruler.clientWidth));
     measure();
     if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(measure);
-    observer.observe(scroller);
-    return () => observer.disconnect();
-  }, [scroller]);
+    const observer = new ResizeObserver(unlessRailMoving(measure));
+    observer.observe(ruler);
+    const held = heldMeasures.current;
+    return () => {
+      observer.disconnect();
+      held.delete(measure);
+    };
+  }, [gauge, scroller, unlessRailMoving]);
   const root = useRef(null);
   const sheet = useRef(null);
   const asideColumn = hasAside && asideShape === "column";
@@ -270,11 +302,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 +319,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 +387,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,14 +427,15 @@ 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,
         /* @__PURE__ */ jsxs("div", { ref: sheet, className: "crewlet-app-shell__sheet", children: [
           topbar,
           banner ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__banner", children: banner }) : null,
+          fill === true ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__gauge", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { ref: setGauge, className: "crewlet-app-shell__gauge-ruler" }) }) : null,
           /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__body", children: [
             /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { ref: content, className: "crewlet-app-shell__content", children: /* @__PURE__ */ jsx(ScreenWidthContext.Provider, { value: screenWidth, children }) }) }),
             hasPeek ? /* @__PURE__ */ jsx(PeekContext.Provider, { value: { shape: peekShape }, children: peek }) : null
@@ -558,6 +624,7 @@ function RailFold({
           variant: "ghost",
           icon: compact ? /* @__PURE__ */ jsx(ChevronsRightGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ChevronsLeftGlyph, { size: "sm" }),
           "aria-controls": railId,
+          "aria-expanded": !compact,
           "aria-keyshortcuts": keys ? ariaKeyshortcuts(keys, apple) : void 0,
           onClick: () => onRailChange?.(compact ? "full" : "compact")
         }
@@ -567,20 +634,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-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-GP5TNTZH.js → chunk-QWRAWKB2.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';
@@ -7,7 +8,7 @@ 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 { useState, useRef, useId, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { motion } from '@crewlethq/tokens';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -52,7 +53,7 @@ function CompactNavItem({
 }) {
   const figure = badge ?? count;
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tile, { icon, figure, attention: badge !== void 0 }),
+    /* @__PURE__ */ jsx(Tile, { icon, figure, attention: calling(badge) }),
     /* @__PURE__ */ jsx(TileLabel, { label, figures: [count, badge].filter((f) => f !== void 0).map(figureWords).join(""), locked })
   ] });
   const shown = title ?? titleOf({ label, badge, count, locked });
@@ -110,8 +111,11 @@ function figureNumber(value) {
   if (!match) return null;
   return { n: Number(match[1].replaceAll(",", "")), more: match[2] === "+" };
 }
+function calling(badge) {
+  return badge !== void 0 && badge.tone !== "quiet";
+}
 function groupBadge(links) {
-  const badges = links.flatMap((link) => link.badge ? [link.badge] : []);
+  const badges = links.flatMap((link) => calling(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));
@@ -126,11 +130,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);
@@ -143,7 +144,7 @@ function CompactNavGroup({ label, icon, links, renderLink, className }) {
   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 spoken = links.filter((link) => calling(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;
@@ -156,14 +157,36 @@ function CompactNavGroup({ label, icon, links, renderLink, className }) {
     },
     [clear]
   );
+  const restHeld = useRef(null);
+  const releaseRest = useCallback(() => {
+    restHeld.current?.();
+    restHeld.current = null;
+  }, []);
+  const holdRest = useCallback(() => {
+    releaseRest();
+    const away = (event) => {
+      if (!tile.current?.contains(event.target)) releaseRest();
+    };
+    document.addEventListener("pointermove", away);
+    restHeld.current = () => document.removeEventListener("pointermove", away);
+  }, [releaseRest]);
+  useEffect(() => releaseRest, [releaseRest]);
+  const settling = useRef(null);
+  useEffect(
+    () => () => {
+      if (settling.current !== null) cancelAnimationFrame(settling.current);
+    },
+    []
+  );
   const show = useCallback(
     (by, first) => {
       clear();
+      releaseRest();
       opener.current = by;
       focusFirst.current = first;
       setOpen(true);
     },
-    [clear]
+    [clear, releaseRest]
   );
   const popup = usePopupLayer({
     open,
@@ -256,7 +279,7 @@ function CompactNavGroup({ label, icon, links, renderLink, className }) {
   const onPointerEnter = (event) => {
     if (event.pointerType !== "mouse") return;
     clear();
-    if (!open) timer.current = setTimeout(() => show("pointer", false), OPEN_DELAY);
+    if (!open && restHeld.current === null) timer.current = setTimeout(() => show("pointer", false), OPEN_DELAY);
   };
   const onPointerLeave = (event) => {
     if (event.pointerType !== "mouse") return;
@@ -265,7 +288,20 @@ function CompactNavGroup({ label, icon, links, renderLink, className }) {
   };
   const choose = (link) => (event) => {
     link.onClick?.(event);
-    close(panel.current?.contains(document.activeElement) === true && event.detail === 0);
+    const held = panel.current?.contains(document.activeElement) === true;
+    holdRest();
+    if (link.href === void 0) {
+      close(held);
+      return;
+    }
+    close(false);
+    if (!held) return;
+    if (settling.current !== null) cancelAnimationFrame(settling.current);
+    settling.current = requestAnimationFrame(() => {
+      settling.current = null;
+      const now = tile.current?.ownerDocument.activeElement;
+      if (now === null || now === void 0 || now === tile.current?.ownerDocument.body) returnFocus(tile.current);
+    });
   };
   const flyout = open ? /* @__PURE__ */ jsxs(
     "div",
@@ -299,7 +335,7 @@ function CompactNavGroup({ label, icon, links, renderLink, className }) {
             figure ? /* @__PURE__ */ jsx(
               "span",
               {
-                className: cx("crewlet-compact-nav__link-figure", link.badge && "crewlet-compact-nav__link-figure--badge"),
+                className: cx("crewlet-compact-nav__link-figure", calling(link.badge) && "crewlet-compact-nav__link-figure--badge"),
                 "aria-hidden": true,
                 children: figure.value
               }
@@ -362,7 +398,10 @@ function CompactNavGroup({ label, icon, links, renderLink, className }) {
         },
         onKeyDown: onTileKeyDown,
         onPointerEnter,
-        onPointerLeave,
+        onPointerLeave: (event) => {
+          if (event.pointerType === "mouse") releaseRest();
+          onPointerLeave(event);
+        },
         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 })

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-SRDNGGZE.js → chunk-RKIJAXQA.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DirectoryList-XZOWYOA3.css';
+import './DirectoryList-IXQIMNFS.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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';

package/dist/{chunk-YOJAGKTS.js → chunk-TGGYSQRD.js}

@@ -1,3 +1,4 @@
+import { useComposedRef } from './chunk-L72URIHR.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-TUEM2XIW.js';
@@ -77,6 +78,7 @@ function Menu({
     open,
     onDismiss: (reason) => close(reason !== "outside")
   });
+  const sharedRef = useComposedRef(triggerRef, popup.insideRef);
   const entries = () => menu.current ? [...menu.current.querySelectorAll(ITEM_SELECTOR)] : [];
   useLayoutEffect(() => {
     if (!open) return;
@@ -262,10 +264,7 @@ function Menu({
     }
   ) : null;
   const shared = {
-    ref: (el) => {
-      triggerRef.current = el;
-      popup.insideRef(el);
-    },
+    ref: sharedRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
     "aria-controls": open ? menuId : void 0,

package/dist/{chunk-2KJCUCVE.js → chunk-TQKQRS2J.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NXFTCPF6.js';
-import { SegmentedControl } from './chunk-GZVAZ3LL.js';
-import { tabId } from './chunk-HCUECVZ3.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
+import { tabId } from './chunk-MVKUE4FI.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-BLCJRGDC.css';

package/dist/{chunk-ONNXUS5Y.js → chunk-VB3FVKNI.js}

@@ -1,5 +1,5 @@
 import { changeText, sheetLabels } from './chunk-LFSIKGRQ.js';
-import { Tooltip } from './chunk-3QQIGMY3.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChangeMark-KFDGBF6G.css';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-JHQGNFN3.js → chunk-VONEKR3J.js}

@@ -1,4 +1,4 @@
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { useMediaMatch, REDUCED_MOTION_QUERY } from './chunk-YJQXESOJ.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
@@ -16,7 +16,7 @@ var ChatThread = forwardRef(function ChatThread2({ label, busy = false, follow =
   const labels = overrides ? { ...CHAT_THREAD_LABELS, ...overrides } : CHAT_THREAD_LABELS;
   const scroller = useRef(null);
   const items = useRef(null);
-  const reduced = useMediaMatch("(prefers-reduced-motion: reduce)");
+  const reduced = useMediaMatch(REDUCED_MOTION_QUERY);
   const count = Children.toArray(children).length;
   const atEnd = useRef(true);
   const jumping = useRef(false);

package/dist/{chunk-P6F3PE4V.js → chunk-WANKINXG.js}

@@ -1,9 +1,9 @@
-import { Modal } from './chunk-XXDB6KPV.js';
+import { Modal } from './chunk-ZXXZESCD.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
-import { Menu } from './chunk-YOJAGKTS.js';
+import { Menu } from './chunk-TGGYSQRD.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-PXLS6JKL.js → chunk-WMO722J2.js}

@@ -1,5 +1,5 @@
 import { ContrastLevelTag } from './chunk-2ZSCHQOA.js';
-import { Popover } from './chunk-SM4P2SHB.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastHelp-MZCAW5WQ.css';

package/dist/{chunk-SYVQXMLO.js → chunk-XRWHDW6F.js}

@@ -1,12 +1,12 @@
 import { PageHeader } from './chunk-FPDIHEM4.js';
 import { FilterPill } from './chunk-K4LZXSKZ.js';
-import { DateTimePicker } from './chunk-XGLMPPDW.js';
-import { DataTable } from './chunk-P6F3PE4V.js';
+import { DateTimePicker } from './chunk-7K6LVM5I.js';
+import { DataTable } from './chunk-WANKINXG.js';
 import { useListbox, useOptionKeys } from './chunk-YGRTX67J.js';
 import { Toolbar } from './chunk-NXFTCPF6.js';
-import { Popover } from './chunk-SM4P2SHB.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
-import { Menu } from './chunk-YOJAGKTS.js';
+import { Menu } from './chunk-TGGYSQRD.js';
 import { Input } from './chunk-O7N6W52M.js';
 import { Kbd } from './chunk-CMAZZY2I.js';
 import { Button } from './chunk-DGXZ635L.js';