@homebound/beam 4.59.0 → 4.60.0

package/dist/index.js

@@ -20100,9 +20100,20 @@ function useMenuSelectField(props) {
     () => menuTree ? menuTree.orderedKeys.filter((key) => disabledKeySet.has(menuTree.nodes.get(key).valueKey)) : disabledKeys,
     [menuTree, disabledKeySet, disabledKeys]
   );
+  const rememberedSelectedRef = useRef36(/* @__PURE__ */ new Map());
+  syncRememberedOptions(rememberedSelectedRef.current, values, optionsByKey);
   const selectedOptions = useMemo28(
-    () => menuTree ? selectedTreeOptions(menuTree, selectedKeys) : values.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0),
-    [menuTree, selectedKeys, values, optionsByKey]
+    () => resolveSelectedOptions(
+      values,
+      menuTree,
+      selectedKeys,
+      optionsByKey,
+      rememberedSelectedRef.current,
+      getOptionValue
+    ),
+    // getOptionValue is typically an inline lambda
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [values, optionsByKey, menuTree, selectedKeys]
   );
   const dottedKeys = useMemo28(
     () => new Set(mixedValues?.map(valueToKey).filter((key) => optionsByKey.has(key) && !selectedKeys.has(key))),
@@ -20144,9 +20155,8 @@ function useMenuSelectField(props) {
       const valueKey = key === void 0 ? void 0 : menuTree.nodes.get(key)?.valueKey;
       if (valueKey === void 0) return;
       const next2 = toggleTreeSelection(menuTree, selectedKeys, valueKey, added !== void 0, disabledKeySet);
-      const nextOptions = selectedTreeOptions(menuTree, next2);
       proposalProps.onUserEdit?.();
-      onCommit(nextOptions.map(getOptionValue), nextOptions);
+      commitTree(next2);
       return;
     }
     if (!multiple) {
@@ -20161,16 +20171,17 @@ function useMenuSelectField(props) {
       close({ restoreFocus: true });
       return;
     }
-    const next = values.filter((v) => keys.has(valueToKey(v)));
+    const next = values.filter((value) => {
+      const key = valueToKey(value);
+      if (!optionsByKey.has(key)) return true;
+      return keys.has(key);
+    });
     for (const k of keys) {
       const opt = optionsByKey.get(String(k));
       if (opt !== void 0 && !selectedKeys.has(String(k))) next.push(getOptionValue(opt));
     }
     proposalProps.onUserEdit?.();
-    onCommit(
-      next,
-      next.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0)
-    );
+    onCommit(next, optionsForValues(next));
   }
   const collectionItems = useMemo28(() => {
     if (treeRows) {
@@ -20382,14 +20393,35 @@ function useMenuSelectField(props) {
     proposalProps.onUserEdit?.();
     if (menuTree) {
       const toggledKeys = toggleTreeSelection(menuTree, selectedKeys, key, false, disabledKeySet);
-      const toggledOptions = selectedTreeOptions(menuTree, toggledKeys);
-      onCommit(toggledOptions.map(getOptionValue), toggledOptions);
+      commitTree(toggledKeys, key);
       return;
     }
     const next = values.filter((value) => valueToKey(value) !== key);
+    onCommit(next, optionsForValues(next));
+  }
+  function optionsForValues(next) {
+    return next.flatMap((value) => {
+      const option = optionForKey(valueToKey(value), optionsByKey, rememberedSelectedRef.current);
+      return option ? [option] : [];
+    });
+  }
+  function commitTree(nextKeys, clearedKey) {
+    if (!menuTree) return;
+    const selectedInTree = selectedTreeOptions(menuTree, nextKeys);
+    const valueKeysInTree = new Set(menuTree.orderedKeys.map((rowKey) => menuTree.nodes.get(rowKey).valueKey));
+    const seen = /* @__PURE__ */ new Set();
+    const keptSelections = values.flatMap((value) => {
+      const key = valueToKey(value);
+      if (valueKeysInTree.has(key) || key === clearedKey || seen.has(key)) return [];
+      const option = optionForKey(key, optionsByKey, rememberedSelectedRef.current);
+      if (!option) return [];
+      seen.add(key);
+      return [option];
+    });
+    const nextOptions = [...selectedInTree, ...keptSelections];
     onCommit(
-      next,
-      next.map((value) => optionsByKey.get(valueToKey(value))).filter((option) => option !== void 0)
+      nextOptions.map((option) => getOptionValue(option)),
+      nextOptions
     );
   }
   const triggerProps = {
@@ -20455,6 +20487,41 @@ function useMenuSelectField(props) {
     }
   };
 }
+function syncRememberedOptions(remembered, values, optionsByKey) {
+  const selected = /* @__PURE__ */ new Set();
+  for (const value of values) {
+    const key = valueToKey(value);
+    selected.add(key);
+    const option = optionsByKey.get(key);
+    if (option) remembered.set(key, option);
+  }
+  for (const key of remembered.keys()) {
+    if (!selected.has(key)) remembered.delete(key);
+  }
+}
+function optionForKey(key, optionsByKey, remembered) {
+  return optionsByKey.get(key) ?? remembered.get(key);
+}
+function resolveSelectedOptions(values, menuTree, selectedKeys, optionsByKey, remembered, getOptionValue) {
+  if (!menuTree) {
+    return values.flatMap((value) => {
+      const option = optionForKey(valueToKey(value), optionsByKey, remembered);
+      return option ? [option] : [];
+    });
+  }
+  const selectedInTree = selectedTreeOptions(menuTree, selectedKeys);
+  const seen = new Set(selectedInTree.map((option) => valueToKey(getOptionValue(option))));
+  const keptSelections = [];
+  for (const value of values) {
+    const key = valueToKey(value);
+    if (seen.has(key)) continue;
+    const option = optionForKey(key, optionsByKey, remembered);
+    if (!option) continue;
+    seen.add(key);
+    keptSelections.push(option);
+  }
+  return [...selectedInTree, ...keptSelections];
+}
 function labelsFor(values, options, getOptionValue, getOptionLabel) {
   const keys = new Set(values.map(valueToKey));
   const seen = /* @__PURE__ */ new Set();
@@ -27295,7 +27362,7 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-import React17, { useCallback as useCallback37, useEffect as useEffect29, useMemo as useMemo50, useRef as useRef66, useState as useState55 } from "react";
+import React17, { useCallback as useCallback37, useEffect as useEffect29, useMemo as useMemo50, useRef as useRef67, useState as useState56 } from "react";
 
 // src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
 import { memo as memo2, useMemo as useMemo46, useState as useState48 } from "react";
@@ -27836,7 +27903,7 @@ function SelectionSummaryAction(props) {
 
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
 import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
-import { useCallback as useCallback33, useLayoutEffect as useLayoutEffect14, useRef as useRef64 } from "react";
+import { useCallback as useCallback33, useImperativeHandle, useLayoutEffect as useLayoutEffect15, useRef as useRef65 } from "react";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
 import { useContext as useContext23, useEffect as useEffect27, useLayoutEffect as useLayoutEffect13, useRef as useRef63, useState as useState51 } from "react";
@@ -28308,6 +28375,132 @@ function ModalFullBleed({
   }));
 }
 
+// src/layouts/useAutoHideOnScroll.ts
+import { useLayoutEffect as useLayoutEffect14, useRef as useRef64, useState as useState52 } from "react";
+var THRESHOLD = 80;
+var HOLD_QUIET_MS = 150;
+var cancelActiveHold;
+var holdReleaseListeners = /* @__PURE__ */ new Set();
+var userScrollEvents = ["wheel", "touchstart"];
+function holdAutoHideWhile(scroll) {
+  cancelActiveHold?.();
+  let quietTimer;
+  const restartQuietTimer = () => {
+    clearTimeout(quietTimer);
+    quietTimer = setTimeout(release, HOLD_QUIET_MS);
+  };
+  const cancel = () => {
+    clearTimeout(quietTimer);
+    window.removeEventListener("scroll", restartQuietTimer);
+    for (const event of userScrollEvents) window.removeEventListener(event, release);
+    window.removeEventListener("scrollend", release);
+    cancelActiveHold = void 0;
+  };
+  function release() {
+    cancel();
+    holdReleaseListeners.forEach((listener) => listener());
+  }
+  window.addEventListener("scroll", restartQuietTimer, { passive: true });
+  for (const event of userScrollEvents) window.addEventListener(event, release, { passive: true });
+  window.addEventListener("scrollend", release);
+  cancelActiveHold = cancel;
+  restartQuietTimer();
+  scroll();
+}
+function getInitialAutoHideState() {
+  if (typeof window === "undefined" || window.scrollY <= 0) {
+    return "resting";
+  }
+  return "hidden";
+}
+function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
+  const initial = getInitialAutoHideState();
+  const [state, setState] = useState52(initial);
+  const stateRef = useRef64(initial);
+  const getTopOffsetRef = useRef64(getTopOffset);
+  getTopOffsetRef.current = getTopOffset;
+  const lastScrollY = useRef64(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = useRef64(0);
+  useLayoutEffect14(() => {
+    if (!enabled) {
+      stateRef.current = "resting";
+      lastScrollY.current = Number.POSITIVE_INFINITY;
+      lastScrollHeight.current = 0;
+      setState("resting");
+      return;
+    }
+    const commit = (nextState) => {
+      if (nextState !== stateRef.current) {
+        stateRef.current = nextState;
+        setState(nextState);
+      }
+    };
+    const autoHideStateOnLayoutChange = (rect, topOffset) => {
+      const nextAtTop = rect.top >= topOffset;
+      let next = stateRef.current;
+      if (nextAtTop) {
+        next = "resting";
+      } else if (rect.bottom < -THRESHOLD && next !== "revealed") {
+        next = "hidden";
+      }
+      return next;
+    };
+    const updateAutoHideState = () => {
+      const el = spacerRef.current;
+      if (!el) return;
+      const doc = document.documentElement;
+      const currentScrollHeight = doc.scrollHeight;
+      const scrollHeightChanged = lastScrollHeight.current !== 0 && currentScrollHeight !== lastScrollHeight.current;
+      lastScrollHeight.current = currentScrollHeight;
+      if (window.scrollY <= 0) {
+        lastScrollY.current = 0;
+        commit("resting");
+        return;
+      }
+      const currentY = window.scrollY;
+      if (cancelActiveHold) {
+        lastScrollY.current = currentY;
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const topOffset = getTopOffsetRef.current?.() ?? 0;
+      if (scrollHeightChanged) {
+        lastScrollY.current = currentY;
+        commit(autoHideStateOnLayoutChange(rect, topOffset));
+        return;
+      }
+      const dy = currentY - lastScrollY.current;
+      lastScrollY.current = currentY;
+      const atBottom = currentY >= doc.scrollHeight - doc.clientHeight;
+      const nextAtTop = rect.top >= topOffset;
+      let next = stateRef.current;
+      if (nextAtTop) {
+        next = "resting";
+      } else if (rect.bottom < -THRESHOLD) {
+        if (dy < 0 && !atBottom) next = "revealed";
+        else if (dy > 0) next = "hidden";
+      }
+      commit(next);
+    };
+    const onHoldRelease = () => {
+      const el = spacerRef.current;
+      if (!el) return;
+      lastScrollY.current = window.scrollY;
+      lastScrollHeight.current = document.documentElement.scrollHeight;
+      if (window.scrollY <= 0) return commit("resting");
+      commit(autoHideStateOnLayoutChange(el.getBoundingClientRect(), getTopOffsetRef.current?.() ?? 0));
+    };
+    updateAutoHideState();
+    window.addEventListener("scroll", updateAutoHideState, { passive: true });
+    holdReleaseListeners.add(onHoldRelease);
+    return () => {
+      window.removeEventListener("scroll", updateAutoHideState);
+      holdReleaseListeners.delete(onHoldRelease);
+    };
+  }, [enabled, spacerRef]);
+  return { state };
+}
+
 // src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
 import { trussProps as trussProps118, maybeCssVar as maybeCssVar55 } from "@homebound/truss/runtime";
 import { jsx as jsx206, jsxs as jsxs108 } from "react/jsx-runtime";
@@ -28321,12 +28514,33 @@ function GridTableLayoutHost(props) {
     rightPane,
     isVirtualized,
     testIds,
+    scrollToTopRef,
     children
   } = props;
-  const tableWrapperRef = useRef64(null);
-  const tableActionsRef = useRef64(null);
+  const tableWrapperRef = useRef65(null);
+  const tableActionsRef = useRef65(null);
   const hasActions = actions !== void 0;
+  const {
+    scrollableEl
+  } = useScrollableParent();
   useSetTableActionsHeight(tableWrapperRef, tableActionsRef, host.kind !== "scrollable-parent" && hasActions);
+  useImperativeHandle(scrollToTopRef, () => () => {
+    const scrollableParent = host.kind === "scrollable-parent" ? scrollableEl?.parentElement : void 0;
+    if (scrollableParent) {
+      scrollableParent.scrollTo?.({
+        top: 0,
+        behavior: "smooth"
+      });
+    } else {
+      const scrollToWrapper = () => tableWrapperRef.current?.scrollIntoView?.({
+        behavior: "smooth",
+        block: "start",
+        inline: "start"
+      });
+      if (host.kind === "modal") scrollToWrapper();
+      else holdAutoHideWhile(scrollToWrapper);
+    }
+  }, [host.kind, scrollableEl]);
   const shared = {
     actions,
     tableWrapperRef,
@@ -28380,29 +28594,49 @@ function DocumentScrollHost(props) {
       "--minWidth": maybeCssVar55(documentScrollRightPaneContentMinCss())
     }]
   }), children }) }) : children;
-  return /* @__PURE__ */ jsxs108("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
-    /* @__PURE__ */ jsx206(ActionsBar, { actionsRef: tableActionsRef, xss: {
-      transition: "transitionTop",
-      position: "sticky",
-      top: ["top_var", {
-        "--top": maybeCssVar55(__maybeInc21(stickyNavAndHeaderOffset()))
-      }],
-      left: ["left_var", {
-        "--left": maybeCssVar55(__maybeInc21(documentScrollChromeLeft()))
-      }],
-      width: ["w_var", {
-        "--width": maybeCssVar55(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
-      }],
-      contain: "ctn_inline_size",
-      zIndex: ["z_var", {
-        "--zIndex": maybeCssVar55(zIndices.tableActions)
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface)"
-      }]
-    }, testIds, children: actions }),
-    tableBody
-  ] });
+  return /* @__PURE__ */ jsxs108(
+    "div",
+    {
+      ref: tableWrapperRef,
+      ...trussProps118({
+        display: "df",
+        flexDirection: "fdc",
+        width: "wfc",
+        minWidth: "mw100",
+        scrollMarginTop: ["scrollMarginTop_var", {
+          "--scrollMarginTop": maybeCssVar55(stickyNavAndHeaderOffset())
+        }],
+        scrollMarginLeft: ["scrollMarginLeft_var", {
+          "--scrollMarginLeft": maybeCssVar55(documentScrollContentLeft())
+        }]
+      }),
+      ...actions !== void 0 ? selfTopSpaced : {},
+      ...testIds.tableWrapper,
+      children: [
+        /* @__PURE__ */ jsx206(ActionsBar, { actionsRef: tableActionsRef, xss: {
+          transition: "transitionTop",
+          position: "sticky",
+          top: ["top_var", {
+            "--top": maybeCssVar55(__maybeInc21(stickyNavAndHeaderOffset()))
+          }],
+          left: ["left_var", {
+            "--left": maybeCssVar55(__maybeInc21(documentScrollChromeLeft()))
+          }],
+          width: ["w_var", {
+            "--width": maybeCssVar55(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
+          }],
+          contain: "ctn_inline_size",
+          zIndex: ["z_var", {
+            "--zIndex": maybeCssVar55(zIndices.tableActions)
+          }],
+          backgroundColor: ["bgColor_var", {
+            "--backgroundColor": "var(--b-surface)"
+          }]
+        }, testIds, children: actions }),
+        tableBody
+      ]
+    }
+  );
 }
 function ScrollableParentHost(props) {
   const {
@@ -28446,7 +28680,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
     ref: tableActionsRef,
     onResize: enabled ? syncHeightVar : noop
   });
-  useLayoutEffect14(() => {
+  useLayoutEffect15(() => {
     syncHeightVar();
     const tableWrapper = tableWrapperRef.current;
     return () => {
@@ -28492,10 +28726,10 @@ function useGridTableLayoutHost() {
 }
 
 // src/components/Layout/GridTableLayout/usePersistedTableView.ts
-import { useCallback as useCallback34, useState as useState52 } from "react";
+import { useCallback as useCallback34, useState as useState53 } from "react";
 function usePersistedTableView(defaultView, persist) {
   const storageKey = persist ? getGridTableViewStorageKey(window.location.pathname) : void 0;
-  const [view, setView] = useState52(() => {
+  const [view, setView] = useState53(() => {
     if (!storageKey) return defaultView;
     try {
       return parseStoredTableView(localStorage.getItem(storageKey)) ?? defaultView;
@@ -28530,7 +28764,7 @@ function isGridTableProps(props) {
 }
 
 // src/hooks/useGroupBy.ts
-import { useMemo as useMemo48, useState as useState53 } from "react";
+import { useMemo as useMemo48, useState as useState54 } from "react";
 
 // src/hooks/useQueryState.ts
 import { useCallback as useCallback35 } from "react";
@@ -28551,7 +28785,7 @@ function useGroupBy(opts) {
     []
   );
   const [queryValue, setQueryValue] = useQueryState("groupBy", options[0].id);
-  const [localValue, setLocalValue] = useState53(options[0].id);
+  const [localValue, setLocalValue] = useState54(options[0].id);
   return {
     value: inModal ? localValue : queryValue,
     setValue: inModal ? setLocalValue : setQueryValue,
@@ -28560,17 +28794,17 @@ function useGroupBy(opts) {
 }
 
 // src/hooks/usePersistedFilter.ts
-import { useEffect as useEffect28, useMemo as useMemo49, useRef as useRef65 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo49, useRef as useRef66 } from "react";
 
 // src/hooks/useSessionStorage.ts
-import { useCallback as useCallback36, useState as useState54 } from "react";
+import { useCallback as useCallback36, useState as useState55 } from "react";
 function useSessionStorage(key, defaultValue) {
   let hasSessionStorage = false;
   try {
     hasSessionStorage = !!window.sessionStorage;
   } catch (e) {
   }
-  const [state, setState] = useState54(() => {
+  const [state, setState] = useState55(() => {
     if (!hasSessionStorage) {
       return defaultValue;
     }
@@ -28697,8 +28931,8 @@ function parseSerializedValue(value) {
   return value === void 0 ? void 0 : JSON.parse(value);
 }
 function useStableValue(value) {
-  const stableValue = useRef65(value);
-  const stableKey = useRef65(JSON.stringify(value));
+  const stableValue = useRef66(value);
+  const stableKey = useRef66(JSON.stringify(value));
   const nextKey = JSON.stringify(value);
   if (stableKey.current !== nextKey) {
     stableValue.current = value;
@@ -28721,7 +28955,8 @@ function GridTableLayoutComponent(props) {
     withCardView,
     defaultView = "list",
     emptyFallback: layoutEmptyFallback,
-    withRightPane
+    withRightPane,
+    scrollToTopOnFilterChange = false
   } = props;
   const tid = useTestIds(props);
   const host = useGridTableLayoutHost();
@@ -28753,11 +28988,18 @@ function GridTableLayoutComponent(props) {
     () => layoutState?.search ? { onSearch: layoutState.setSearchString } : void 0,
     [layoutState?.search, layoutState?.setSearchString]
   );
-  const searchApiRef = useRef66(void 0);
+  const searchApiRef = useRef67(void 0);
   const clearFilters = useCallback37(() => {
     layoutState?.clearFilters();
     searchApiRef.current?.clear();
   }, [layoutState]);
+  const scrollToTopRef = useRef67(void 0);
+  useScrollToTopOnFilterChange({
+    enabled: scrollToTopOnFilterChange,
+    layoutState,
+    loading: isGridTableProps(tableProps) ? !!tableProps.loading : tableProps.query.loading,
+    scrollToTopRef
+  });
   const emptyState = useMemo50(
     () => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters),
     [layoutEmptyFallback, layoutState, tableProps, clearFilters]
@@ -28823,11 +29065,25 @@ function GridTableLayoutComponent(props) {
       rightPane: withRightPane,
       isVirtualized,
       testIds: tid,
+      scrollToTopRef,
       children: tableBody
     }
   );
 }
 var GridTableLayout = React17.memo(GridTableLayoutComponent);
+function useScrollToTopOnFilterChange(opts) {
+  const { enabled, layoutState, loading, scrollToTopRef } = opts;
+  const { filter, searchString } = layoutState ?? {};
+  const currentFiltersRef = useRef67({ filter, searchString });
+  useEffect29(() => {
+    const scrolledFor = currentFiltersRef.current;
+    if (scrolledFor.filter === filter && scrolledFor.searchString === searchString) return;
+    if (!enabled) return void (currentFiltersRef.current = { filter, searchString });
+    if (loading) return;
+    currentFiltersRef.current = { filter, searchString };
+    scrollToTopRef.current?.();
+  }, [enabled, filter, searchString, loading, scrollToTopRef]);
+}
 function getDefaultStyle(style, insetHandled) {
   if (style !== void 0 && !isGridStyleDef(style)) return style;
   return { allWhite: true, ...!insetHandled && { bordered: "top" }, ...style };
@@ -28848,7 +29104,7 @@ function useGridTableLayoutState({
   const filterFallback = { filterDefs: {}, storageKey: "unset-filter" };
   const { filter, setFilter } = usePersistedFilter(persistedFilter ?? filterFallback);
   const groupBy = useGroupBy(maybeGroupBy ?? { none: "none" });
-  const [searchString, setSearchString] = useState55("");
+  const [searchString, setSearchString] = useState56("");
   const columnsFallback = "unset-columns";
   const [visibleColumnIds, setVisibleColumnIds] = useSessionStorage(
     persistedColumns?.storageKey ?? columnsFallback,
@@ -29010,12 +29266,12 @@ function RightPaneLayout(props) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPanePanel.tsx
-import { createContext as createContext14, useContext as useContext24, useEffect as useEffect31, useState as useState57 } from "react";
+import { createContext as createContext14, useContext as useContext24, useEffect as useEffect31, useState as useState58 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
 import { useResizeObserver as useResizeObserver11 } from "@react-aria/utils";
-import { useRef as useRef67, useState as useState56 } from "react";
+import { useRef as useRef68, useState as useState57 } from "react";
 import { trussProps as trussProps120 } from "@homebound/truss/runtime";
 import { jsx as jsx211, jsxs as jsxs111 } from "react/jsx-runtime";
 function MaybeDeleteAction(props) {
@@ -29032,9 +29288,9 @@ function BulkDeleteAction(props) {
     count,
     ...buttonProps
   } = props;
-  const containerRef = useRef67(null);
-  const contentRef = useRef67(null);
-  const [overflows, setOverflows] = useState56(false);
+  const containerRef = useRef68(null);
+  const contentRef = useRef68(null);
+  const [overflows, setOverflows] = useState57(false);
   const onResize = () => {
     if (!containerRef.current || !contentRef.current) return;
     setOverflows(contentRef.current.offsetWidth > containerRef.current.clientWidth);
@@ -29101,7 +29357,7 @@ function RightPanePanel(props) {
   const {
     closeRightPane
   } = useRightPaneActions();
-  const [bannerSlot, setBannerSlot] = useState57(null);
+  const [bannerSlot, setBannerSlot] = useState58(null);
   const {
     openModal
   } = useModal();
@@ -29188,7 +29444,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect32, useState as useState58 } from "react";
+import { useEffect as useEffect32, useState as useState59 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx214, jsxs as jsxs113 } from "react/jsx-runtime";
@@ -29228,7 +29484,7 @@ function TableReviewLayout(props) {
     rightPaneWidth = defaultRightPaneWidth
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
-  const [isPanelVisible, setIsPanelVisible] = useState58(!!panelContent);
+  const [isPanelVisible, setIsPanelVisible] = useState59(!!panelContent);
   useEffect32(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
@@ -29388,18 +29644,18 @@ function HomeboundLogo(props) {
 }
 
 // src/components/MaxLines.tsx
-import { useLayoutEffect as useLayoutEffect15, useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
-import { useCallback as useCallback38, useEffect as useEffect33, useRef as useRef68, useState as useState59 } from "react";
+import { useLayoutEffect as useLayoutEffect16, useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
+import { useCallback as useCallback38, useEffect as useEffect33, useRef as useRef69, useState as useState60 } from "react";
 import { trussProps as trussProps125, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx218, jsxs as jsxs116 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef68(null);
-  const [hasMore, setHasMore] = useState59(false);
-  const [expanded, setExpanded] = useState59(false);
-  useLayoutEffect15(() => {
+  const elRef = useRef69(null);
+  const [hasMore, setHasMore] = useState60(false);
+  const [expanded, setExpanded] = useState60(false);
+  useLayoutEffect16(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
@@ -29521,7 +29777,7 @@ function toPageNumberSize(page) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver13 } from "@react-aria/utils";
-import { useCallback as useCallback39, useMemo as useMemo51, useRef as useRef69, useState as useState60 } from "react";
+import { useCallback as useCallback39, useMemo as useMemo51, useRef as useRef70, useState as useState61 } from "react";
 import { trussProps as trussProps127, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { jsx as jsx220, jsxs as jsxs118 } from "react/jsx-runtime";
 function ScrollShadows(props) {
@@ -29539,9 +29795,9 @@ function ScrollShadows(props) {
   if (!bgColor.includes("rgba")) {
     throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
   }
-  const [showStartShadow, setShowStartShadow] = useState60(false);
-  const [showEndShadow, setShowEndShadow] = useState60(false);
-  const scrollRef = useRef69(null);
+  const [showStartShadow, setShowStartShadow] = useState61(false);
+  const [showEndShadow, setShowEndShadow] = useState61(false);
+  const scrollRef = useRef70(null);
   const [startShadowStyles, endShadowStyles] = useMemo51(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
@@ -29662,10 +29918,10 @@ import { camelCase as camelCase7 } from "change-case";
 // src/components/AppNav/AppNavGroup.tsx
 import { useResizeObserver as useResizeObserver14 } from "@react-aria/utils";
 import { camelCase as camelCase6, kebabCase } from "change-case";
-import { useCallback as useCallback41, useEffect as useEffect34, useMemo as useMemo53, useState as useState62 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect34, useMemo as useMemo53, useState as useState63 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
-import { useMemo as useMemo52, useRef as useRef70 } from "react";
+import { useMemo as useMemo52, useRef as useRef71 } from "react";
 import { mergeProps as mergeProps35, useButton as useButton11, useFocusRing as useFocusRing17, useHover as useHover22 } from "react-aria";
 import { trussProps as trussProps128, mergeProps as mergeProps_15 } from "@homebound/truss/runtime";
 import { jsx as jsx221, jsxs as jsxs119 } from "react/jsx-runtime";
@@ -29678,7 +29934,7 @@ function AppNavGroupTrigger(props) {
     active = false
   } = props;
   const tid = useTestIds(props, "trigger");
-  const ref = useRef70(null);
+  const ref = useRef71(null);
   const {
     buttonProps,
     isPressed
@@ -29837,7 +30093,7 @@ function entryHasIcons(item) {
 }
 
 // src/components/AppNav/useAppNavGroupExpanded.ts
-import { useCallback as useCallback40, useState as useState61 } from "react";
+import { useCallback as useCallback40, useState as useState62 } from "react";
 var APP_NAV_EXPANDED_LINK_GROUPS_STORAGE_KEY = "beam.appNav.expandedLinkGroups";
 function loadStored() {
   try {
@@ -29856,7 +30112,7 @@ function persistLabel(label, expanded) {
 }
 function useAppNavGroupExpanded(linkGroup) {
   const { label } = linkGroup;
-  const [userExpanded, setUserExpanded] = useState61(() => {
+  const [userExpanded, setUserExpanded] = useState62(() => {
     const stored = loadStored();
     return label in stored ? stored[label] : null;
   });
@@ -29897,11 +30153,11 @@ function AppNavGroupDisclosure(props) {
   } = useAppNavGroupExpanded(linkGroup);
   const tid = useTestIds(props, "linkGroup");
   const navGroupId = `nav-group-${kebabCase(linkGroup.label)}`;
-  const [contentEl, setContentEl] = useState62(null);
+  const [contentEl, setContentEl] = useState63(null);
   const contentRef = useMemo53(() => ({
     current: contentEl
   }), [contentEl]);
-  const [contentHeight, setContentHeight] = useState62(expanded ? "auto" : "0");
+  const [contentHeight, setContentHeight] = useState63(expanded ? "auto" : "0");
   useEffect34(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
@@ -30057,8 +30313,8 @@ import {
   useContext as useContext25,
   useEffect as useEffect35,
   useMemo as useMemo54,
-  useRef as useRef71,
-  useState as useState63
+  useRef as useRef72,
+  useState as useState64
 } from "react";
 import { jsx as jsx226 } from "react/jsx-runtime";
 var SIDE_NAV_LAYOUT_STATE_STORAGE_KEY = "beam.sideNavLayout.navState";
@@ -30084,11 +30340,11 @@ function resolveInitialNavState(defaultNavState) {
 }
 var SideNavLayoutContext = createContext15(void 0);
 function SideNavLayoutProvider(props) {
-  const [navState, setNavStateInternal] = useState63(
+  const [navState, setNavStateInternal] = useState64(
     () => resolveInitialNavState(props.defaultNavState)
   );
   const bp = useBreakpoint();
-  const prevMdAndUp = useRef71(bp.mdAndUp);
+  const prevMdAndUp = useRef72(bp.mdAndUp);
   useEffect35(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
@@ -30176,7 +30432,7 @@ function SideNav(props) {
 }
 
 // src/components/Stepper.tsx
-import { useRef as useRef72 } from "react";
+import { useRef as useRef73 } from "react";
 import { useButton as useButton12, useFocusRing as useFocusRing18, useHover as useHover23 } from "react-aria";
 import { trussProps as trussProps132, maybeCssVar as maybeCssVar63 } from "@homebound/truss/runtime";
 import { jsx as jsx228, jsxs as jsxs123 } from "react/jsx-runtime";
@@ -30258,7 +30514,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef72(null);
+  const ref = useRef73(null);
   const {
     buttonProps,
     isPressed
@@ -30368,7 +30624,7 @@ function StepIcon({
 }
 
 // src/components/StepperTabs/StepperTab.tsx
-import { useRef as useRef73 } from "react";
+import { useRef as useRef74 } from "react";
 import { mergeProps as mergeProps36, useButton as useButton13, useFocusRing as useFocusRing19, useHover as useHover24, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { trussProps as trussProps133 } from "@homebound/truss/runtime";
 import { Fragment as Fragment49, jsx as jsx229, jsxs as jsxs124 } from "react/jsx-runtime";
@@ -30387,7 +30643,7 @@ function StepperTab(props) {
     onPress: () => onClick(value),
     isDisabled: disabled || collapsed
   };
-  const ref = useRef73(null);
+  const ref = useRef74(null);
   const {
     buttonProps
   } = useButton13(ariaProps, ref);
@@ -30788,7 +31044,7 @@ function segmentWidth(count, total) {
 }
 
 // src/components/TableSummary/TableSummary.tsx
-import { useRef as useRef74 } from "react";
+import { useRef as useRef75 } from "react";
 import { mergeProps as mergeProps38, useButton as useButton14, useFocusRing as useFocusRing20, useHover as useHover25 } from "react-aria";
 import { trussProps as trussProps138, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 import { jsx as jsx235, jsxs as jsxs129 } from "react/jsx-runtime";
@@ -30848,7 +31104,7 @@ function MetricButton(props) {
     metric,
     divider
   } = props;
-  const ref = useRef74(null);
+  const ref = useRef75(null);
   const {
     buttonProps
   } = useButton14({
@@ -30925,7 +31181,7 @@ function MetricButton(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback43, useEffect as useEffect36, useRef as useRef75 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect36, useRef as useRef76 } from "react";
 
 // src/utils/inlineStyles.ts
 function isInlineStyleValue(value) {
@@ -30975,13 +31231,13 @@ function DnDGrid(props) {
     activeItemStyles,
     lockAxis
   } = props;
-  const gridEl = useRef75(null);
-  const dragEl = useRef75(void 0);
-  const cloneEl = useRef75(void 0);
-  const initialOrder = useRef75(void 0);
-  const styleSnapshot = useRef75(void 0);
-  const reorderViaKeyboard = useRef75(false);
-  const transformFrom = useRef75({
+  const gridEl = useRef76(null);
+  const dragEl = useRef76(void 0);
+  const cloneEl = useRef76(void 0);
+  const initialOrder = useRef76(void 0);
+  const styleSnapshot = useRef76(void 0);
+  const reorderViaKeyboard = useRef76(false);
+  const transformFrom = useRef76({
     x: 0,
     y: 0
   });
@@ -32010,17 +32266,17 @@ function OpenModal(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence6, motion as motion7 } from "framer-motion";
-import { useEffect as useEffect39, useState as useState65 } from "react";
+import { useEffect as useEffect39, useState as useState66 } from "react";
 import { FocusScope as FocusScope7, usePreventScroll as usePreventScroll4 } from "react-aria";
 import { createPortal as createPortal11 } from "react-dom";
 import { useLocation } from "react-router-dom";
 
 // src/layouts/NavbarLayout/MobileSubNavContext.tsx
-import { createContext as createContext18, useContext as useContext29, useLayoutEffect as useLayoutEffect16, useMemo as useMemo60, useState as useState64 } from "react";
+import { createContext as createContext18, useContext as useContext29, useLayoutEffect as useLayoutEffect17, useMemo as useMemo60, useState as useState65 } from "react";
 import { jsx as jsx251 } from "react/jsx-runtime";
 var MobileSubNavContext = createContext18(void 0);
 function MobileSubNavProvider(props) {
-  const [mobileSubNav, setMobileSubNav] = useState64(null);
+  const [mobileSubNav, setMobileSubNav] = useState65(null);
   const value = useMemo60(() => ({ mobileSubNav, setMobileSubNav }), [mobileSubNav]);
   return /* @__PURE__ */ jsx251(MobileSubNavContext.Provider, { value, children: props.children });
 }
@@ -32032,11 +32288,11 @@ function useRegisterMobileSubNav(content2) {
   const setMobileSubNav = ctx?.setMobileSubNav;
   const enabled = !useBreakpoint().mdAndUp;
   const { top, items, footer } = content2;
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     if (!setMobileSubNav || !enabled) return;
     setMobileSubNav({ top, items, footer });
   }, [setMobileSubNav, enabled, top, items, footer]);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     if (!setMobileSubNav || !enabled) return;
     return () => setMobileSubNav(null);
   }, [setMobileSubNav, enabled]);
@@ -32051,8 +32307,8 @@ function NavbarMobileMenu(props) {
     items
   } = props;
   const tid = useTestIds(props, "navbar");
-  const [isOpen2, setIsOpen] = useState65(false);
-  const [level, setLevel] = useState65("sub");
+  const [isOpen2, setIsOpen] = useState66(false);
+  const [level, setLevel] = useState66("sub");
   const {
     pathname,
     search
@@ -32211,11 +32467,11 @@ function NavbarMobileDrawer({
 }
 
 // src/hooks/useContentOverflow.ts
-import { useCallback as useCallback44, useLayoutEffect as useLayoutEffect17, useRef as useRef76, useState as useState66 } from "react";
+import { useCallback as useCallback44, useLayoutEffect as useLayoutEffect18, useRef as useRef77, useState as useState67 } from "react";
 function useContentOverflow(enabled = true) {
-  const containerRef = useRef76(null);
-  const contentRef = useRef76(null);
-  const [overflows, setOverflows] = useState66(false);
+  const containerRef = useRef77(null);
+  const contentRef = useRef77(null);
+  const [overflows, setOverflows] = useState67(false);
   const checkContentOverflow = useCallback44(() => {
     const container = containerRef.current;
     const content2 = contentRef.current;
@@ -32225,7 +32481,7 @@ function useContentOverflow(enabled = true) {
     }
     setOverflows(content2.offsetWidth > container.clientWidth);
   }, [enabled]);
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     checkContentOverflow();
     window.addEventListener("resize", checkContentOverflow);
     return () => window.removeEventListener("resize", checkContentOverflow);
@@ -32411,7 +32667,7 @@ function simpleDataRows(data = []) {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase8 } from "change-case";
-import { useEffect as useEffect41, useMemo as useMemo61, useRef as useRef77, useState as useState67 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo61, useRef as useRef78, useState as useState68 } from "react";
 import { mergeProps as mergeProps42, useFocusRing as useFocusRing22, useHover as useHover27 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
@@ -32491,8 +32747,8 @@ function Tabs(props) {
     focusProps
   } = useFocusRing22();
   const tid = useTestIds(others, "tabs");
-  const [active, setActive] = useState67(selected);
-  const ref = useRef77(null);
+  const [active, setActive] = useState68(selected);
+  const ref = useRef78(null);
   useEffect41(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -33003,7 +33259,7 @@ import { useCheckboxGroupState as useCheckboxGroupState4, useRadioGroupState as
 import { trussProps as trussProps151, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
 
 // src/forms/FormSection/FormSectionChild.tsx
-import { useRef as useRef78 } from "react";
+import { useRef as useRef79 } from "react";
 import { mergeProps as mergeProps46, useCheckboxGroupItem as useCheckboxGroupItem4, useFocusRing as useFocusRing23, useRadio as useRadio3, VisuallyHidden as VisuallyHidden11 } from "react-aria";
 import { trussProps as trussProps150 } from "@homebound/truss/runtime";
 import { Fragment as Fragment56, jsx as jsx260, jsxs as jsxs141 } from "react/jsx-runtime";
@@ -33020,7 +33276,7 @@ function FormSectionChild(props) {
     group
   } = props;
   const tid = useTestIds(props, "formSectionChild");
-  const itemRef = useRef78(null);
+  const itemRef = useRef79(null);
   const isDraggable = !!orderField;
   const {
     dragItemProps,
@@ -33062,7 +33318,7 @@ function FormSectionChildRadio(props) {
     value,
     label
   } = props;
-  const ref = useRef78(null);
+  const ref = useRef79(null);
   const {
     inputProps,
     isDisabled,
@@ -33088,7 +33344,7 @@ function FormSectionChildCheckbox(props) {
     value,
     label
   } = props;
-  const ref = useRef78(null);
+  const ref = useRef79(null);
   const {
     inputProps,
     isDisabled,
@@ -33281,12 +33537,12 @@ var railAndShellPx = centeredShellMaxPx.sm + jumpLinksRailWidthPx;
 var jumpLinksRailReservation = `clamp(0px, 100% - ${railAndShellPx}px, ${jumpLinksRailWidthPx}px)`;
 
 // src/layouts/FormSectionLayout/useActiveJumpLink.ts
-import { useLayoutEffect as useLayoutEffect18, useState as useState68 } from "react";
+import { useLayoutEffect as useLayoutEffect19, useState as useState69 } from "react";
 var activationLeadPx = 120;
 function useActiveJumpLink(sectionIds) {
   const idsKey = sectionIds.join("\0");
-  const [activeId, setActiveId] = useState68(sectionIds[0]);
-  useLayoutEffect18(() => {
+  const [activeId, setActiveId] = useState69(sectionIds[0]);
+  useLayoutEffect19(() => {
     const ids = idsKey.length === 0 ? [] : idsKey.split("\0");
     if (ids.length === 0) return;
     const update = () => {
@@ -33387,7 +33643,7 @@ function FormSectionLayout(props) {
 }
 
 // src/layouts/PageBanner/usePageBanner.tsx
-import { useEffect as useEffect42, useId as useId5, useLayoutEffect as useLayoutEffect19 } from "react";
+import { useEffect as useEffect42, useId as useId5, useLayoutEffect as useLayoutEffect20 } from "react";
 
 // src/layouts/PageBanner/pageBannerStore.ts
 var current;
@@ -33425,7 +33681,7 @@ function clearPageBanner(id) {
 // src/layouts/PageBanner/usePageBanner.tsx
 function usePageBanner(banner) {
   const id = useId5();
-  useLayoutEffect19(() => {
+  useLayoutEffect20(() => {
     if (!banner) return;
     setPageBanner(id, banner);
     return () => clearPageBanner(id);
@@ -33444,87 +33700,6 @@ function PageBanner(props) {
 import { useMemo as useMemo62, useRef as useRef80 } from "react";
 import { mergeProps as mergeProps47, maybeCssVar as maybeCssVar74 } from "@homebound/truss/runtime";
 
-// src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect20, useRef as useRef79, useState as useState69 } from "react";
-var THRESHOLD = 80;
-function getInitialAutoHideState() {
-  if (typeof window === "undefined" || window.scrollY <= 0) {
-    return "resting";
-  }
-  return "hidden";
-}
-function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
-  const initial = getInitialAutoHideState();
-  const [state, setState] = useState69(initial);
-  const stateRef = useRef79(initial);
-  const getTopOffsetRef = useRef79(getTopOffset);
-  getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = useRef79(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = useRef79(0);
-  useLayoutEffect20(() => {
-    if (!enabled) {
-      stateRef.current = "resting";
-      lastScrollY.current = Number.POSITIVE_INFINITY;
-      lastScrollHeight.current = 0;
-      setState("resting");
-      return;
-    }
-    const commit = (nextState) => {
-      if (nextState !== stateRef.current) {
-        stateRef.current = nextState;
-        setState(nextState);
-      }
-    };
-    const autoHideStateOnLayoutChange = (rect, topOffset) => {
-      const nextAtTop = rect.top >= topOffset;
-      let next = stateRef.current;
-      if (nextAtTop) {
-        next = "resting";
-      } else if (rect.bottom < -THRESHOLD && next !== "revealed") {
-        next = "hidden";
-      }
-      return next;
-    };
-    const updateAutoHideState = () => {
-      const el = spacerRef.current;
-      if (!el) return;
-      const doc = document.documentElement;
-      const currentScrollHeight = doc.scrollHeight;
-      const scrollHeightChanged = lastScrollHeight.current !== 0 && currentScrollHeight !== lastScrollHeight.current;
-      lastScrollHeight.current = currentScrollHeight;
-      if (window.scrollY <= 0) {
-        lastScrollY.current = 0;
-        commit("resting");
-        return;
-      }
-      const currentY = window.scrollY;
-      const rect = el.getBoundingClientRect();
-      const topOffset = getTopOffsetRef.current?.() ?? 0;
-      if (scrollHeightChanged) {
-        lastScrollY.current = currentY;
-        commit(autoHideStateOnLayoutChange(rect, topOffset));
-        return;
-      }
-      const dy = currentY - lastScrollY.current;
-      lastScrollY.current = currentY;
-      const atBottom = currentY >= doc.scrollHeight - doc.clientHeight;
-      const nextAtTop = rect.top >= topOffset;
-      let next = stateRef.current;
-      if (nextAtTop) {
-        next = "resting";
-      } else if (rect.bottom < -THRESHOLD) {
-        if (dy < 0 && !atBottom) next = "revealed";
-        else if (dy > 0) next = "hidden";
-      }
-      commit(next);
-    };
-    updateAutoHideState();
-    window.addEventListener("scroll", updateAutoHideState, { passive: true });
-    return () => window.removeEventListener("scroll", updateAutoHideState);
-  }, [enabled, spacerRef]);
-  return { state };
-}
-
 // src/layouts/useMeasuredHeight.ts
 import { useResizeObserver as useResizeObserver15 } from "@react-aria/utils";
 import { useCallback as useCallback47, useLayoutEffect as useLayoutEffect21, useState as useState70 } from "react";