@homebound/beam 4.24.0 → 4.25.0

package/dist/index.cjs

@@ -163,6 +163,7 @@ __export(index_exports, {
   NavbarLayout: () => NavbarLayout,
   NumberField: () => NumberField,
   OpenModal: () => OpenModal,
+  PageBanner: () => PageBanner,
   PageHeaderLayout: () => PageHeaderLayout,
   Pagination: () => Pagination,
   Palette: () => Palette,
@@ -233,19 +234,20 @@ __export(index_exports, {
   actionColumn: () => actionColumn,
   applyRowFn: () => applyRowFn,
   assignDefaultColumnIds: () => assignDefaultColumnIds,
-  bannerAndNavbarChromeTop: () => bannerAndNavbarChromeTop,
   beamEnvironmentBannerLayoutHeightVar: () => beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar: () => beamFloatingRightOffsetVar,
   beamLayoutContentPaddingXVar: () => beamLayoutContentPaddingXVar,
   beamLayoutViewportHeightVar: () => beamLayoutViewportHeightVar,
   beamLayoutViewportWidthVar: () => beamLayoutViewportWidthVar,
   beamNavbarLayoutHeightVar: () => beamNavbarLayoutHeightVar,
+  beamPageBannerHeightVar: () => beamPageBannerHeightVar,
   beamPageHeaderLayoutHeightVar: () => beamPageHeaderLayoutHeightVar,
   beamRightPaneContentMinVar: () => beamRightPaneContentMinVar,
   beamRightPaneWidthVar: () => beamRightPaneWidthVar,
   beamSideNavLayoutWidthVar: () => beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar: () => beamTableActionsHeightVar,
   beamWorkflowLayoutFooterHeightVar: () => beamWorkflowLayoutFooterHeightVar,
+  belowNavbarOffset: () => belowNavbarOffset,
   booleanFilter: () => booleanFilter,
   boundCheckboxField: () => boundCheckboxField,
   boundCheckboxGroupField: () => boundCheckboxGroupField,
@@ -359,6 +361,7 @@ __export(index_exports, {
   nonKindGridColumnKeys: () => nonKindGridColumnKeys,
   numberRangeFilter: () => numberRangeFilter,
   numericColumn: () => numericColumn,
+  pageBannerOffset: () => pageBannerOffset,
   pageContentGutterPx: () => pageContentGutterPx,
   pageContentPaddingX: () => pageContentPaddingX,
   parseDate: () => parseDate,
@@ -422,6 +425,7 @@ __export(index_exports, {
   useHasSideNavLayoutProvider: () => useHasSideNavLayoutProvider,
   useHover: () => useHover2,
   useModal: () => useModal,
+  usePageBanner: () => usePageBanner,
   usePersistedFilter: () => usePersistedFilter,
   useQueryState: () => useQueryState,
   useResponsiveGrid: () => useResponsiveGrid,
@@ -7377,17 +7381,17 @@ function useComputed(fn, deps) {
     hasRan: false
   });
   (0, import_react9.useMemo)(() => {
-    const { current } = ref;
-    if (current.runner) {
-      current.runner();
+    const { current: current2 } = ref;
+    if (current2.runner) {
+      current2.runner();
     }
-    current.hasRan = false;
-    current.runner = (0, import_mobx2.autorun)(() => {
-      const { value: oldValue, hasRan } = current;
+    current2.hasRan = false;
+    current2.runner = (0, import_mobx2.autorun)(() => {
+      const { value: oldValue, hasRan } = current2;
       const newValue = fn(oldValue);
       if (hasRan && shallowEqual(newValue, oldValue)) return;
-      current.value = newValue;
-      current.hasRan = true;
+      current2.value = newValue;
+      current2.hasRan = true;
       if (hasRan) {
         setTick((tick) => tick + 1);
       }
@@ -7413,6 +7417,7 @@ function useHover2(props) {
 var beamEnvironmentBannerLayoutHeightVar = "--beam-environment-banner-height";
 var beamNavbarLayoutHeightVar = "--beam-navbar-layout-height";
 var beamPageHeaderLayoutHeightVar = "--beam-page-header-layout-height";
+var beamPageBannerHeightVar = "--beam-page-banner-height";
 var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
@@ -7446,24 +7451,27 @@ function documentScrollBodyMinHeight() {
 function documentScrollRightPaneWidthCss(maxPx) {
   return `min(${maxPx}px, ${documentScrollChromeWidth()})`;
 }
-function bannerAndNavbarChromeTop() {
+function belowNavbarOffset() {
   return `calc(var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px))`;
 }
+function pageBannerOffset() {
+  return `calc(var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
+}
 function stickyNavAndHeaderOffset(basePx = 0) {
-  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
+  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamPageBannerHeightVar}, 0px))`;
 }
 function stickyNavAndHeaderOffsetPx(el) {
   const styles = getComputedStyle(el);
   const read = (name) => parseFloat(styles.getPropertyValue(name)) || 0;
-  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar);
+  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar) + read(beamPageBannerHeightVar);
 }
 function stickyTableHeaderOffsetPx(el) {
   const styles = getComputedStyle(el);
   const read = (name) => parseFloat(styles.getPropertyValue(name)) || 0;
-  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar) + read(beamTableActionsHeightVar);
+  return read(beamEnvironmentBannerLayoutHeightVar) + read(beamNavbarLayoutHeightVar) + read(beamPageHeaderLayoutHeightVar) + read(beamPageBannerHeightVar) + read(beamTableActionsHeightVar);
 }
 function stickyTableHeaderOffset(basePx = 0) {
-  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
+  return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamPageBannerHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
 }
 function getFloatingBottomOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
@@ -7493,6 +7501,9 @@ var zIndices = {
   rightPane: 60,
   // Workflow floating right-pane triggers — above the pane, below sticky headers.
   rightPaneTriggers: 65,
+  // Stay-pinned page banner under the header — above the floating triggers it pins above, and below
+  // pageStickyHeader so the auto-hiding header paints over it during the slide.
+  pageBanner: 68,
   pageStickyHeader: 70,
   // Sticky mobile action footer (workflow layouts) — same tier as pageStickyHeader; header and footer never overlap on screen.
   pageStickyFooter: 70,
@@ -7646,8 +7657,8 @@ function SortHeader(props) {
   const {
     tableState
   } = (0, import_react11.useContext)(TableStateContext);
-  const current = useComputed(() => tableState.sortState?.current, [tableState]);
-  const sorted = sortKey === current?.columnId ? current?.direction : void 0;
+  const current2 = useComputed(() => tableState.sortState?.current, [tableState]);
+  const sorted = sortKey === current2?.columnId ? current2?.direction : void 0;
   const toggleSort = (0, import_react11.useCallback)(() => tableState.setSortKey(sortKey), [sortKey, tableState]);
   const sortVisible = isHovered || sorted !== void 0;
   const tid = useTestIds(props, "sortHeader");
@@ -8840,8 +8851,8 @@ function sortRows(columns, rows, sortState, caseSensitive) {
   return sorted;
 }
 function sortFn(columns, sortState, caseSensitive) {
-  const { current, persistent } = sortState ?? {};
-  const { columnId, direction } = current ?? {};
+  const { current: current2, persistent } = sortState ?? {};
+  const { columnId, direction } = current2 ?? {};
   const { columnId: persistentSortColumnId, direction: persistentSortDirection } = persistent ?? {};
   const column2 = columns.find((c) => c.id === columnId);
   const invert = direction === "DESC";
@@ -20402,18 +20413,18 @@ function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetL
   } else {
     const {
       options,
-      current
+      current: current2
     } = optionsOrLoad;
     if (options) {
       userOptions.push(...options);
     }
-    if (current) {
-      const toCheck = Array.isArray(current) ? current : [current];
-      toCheck.forEach((current2) => {
-        const value = getOptionValue(current2);
+    if (current2) {
+      const toCheck = Array.isArray(current2) ? current2 : [current2];
+      toCheck.forEach((current3) => {
+        const value = getOptionValue(current3);
         const found = options && options.find((o) => getOptionValue(o) === value);
         if (!found) {
-          userOptions.push(current2);
+          userOptions.push(current3);
         }
       });
     }
@@ -30026,7 +30037,7 @@ function SideNavLayoutContent(props) {
   const collapsed = navState === "collapse";
   const showRail = navState !== "hidden" && !showMobileSubNav;
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
-  const navTop = bannerAndNavbarChromeTop();
+  const navTop = belowNavbarOffset();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
   const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)("div", { ...(0, import_runtime153.trussProps)({
     ...{
@@ -30348,14 +30359,14 @@ function useActiveJumpLink(sectionIds) {
       const first = ids.map((id) => document.getElementById(id)).find((el) => el !== null);
       if (!first) return;
       const headerOffset = stickyNavAndHeaderOffsetPx(first);
-      let current = ids[0];
+      let current2 = ids[0];
       for (const id of ids) {
         const el = document.getElementById(id);
         if (el && el.getBoundingClientRect().top - headerOffset <= activationLeadPx) {
-          current = id;
+          current2 = id;
         }
       }
-      setActiveId(current);
+      setActiveId(current2);
     };
     update();
     window.addEventListener("scroll", update, { passive: true });
@@ -30442,12 +30453,66 @@ function FormSectionLayout(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: body });
 }
 
+// src/layouts/PageBanner/usePageBanner.tsx
+var import_react163 = require("react");
+
+// src/layouts/PageBanner/pageBannerStore.ts
+var current;
+var listeners = /* @__PURE__ */ new Set();
+var pageBannerStore = {
+  subscribe: (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  getSnapshot: () => current?.banner
+};
+function notify() {
+  listeners.forEach((listener) => listener());
+}
+function hasPageBannerSubscriber() {
+  return listeners.size > 0;
+}
+function setPageBanner(id, banner) {
+  const previous = current;
+  if (previous?.id === id && previous.banner === banner) return;
+  if (previous && previous.id !== id && process.env.NODE_ENV !== "production") {
+    console.warn("[usePageBanner] A second page banner replaced the first; a layout shows one at a time.");
+  }
+  current = { id, banner };
+  notify();
+}
+function clearPageBanner(id) {
+  if (current?.id !== id) return;
+  current = void 0;
+  notify();
+}
+
+// src/layouts/PageBanner/usePageBanner.tsx
+function usePageBanner(banner) {
+  const id = (0, import_react163.useId)();
+  (0, import_react163.useLayoutEffect)(() => {
+    if (!banner) return;
+    setPageBanner(id, banner);
+    return () => clearPageBanner(id);
+  }, [id, banner]);
+  (0, import_react163.useEffect)(() => {
+    if (!banner || hasPageBannerSubscriber() || process.env.NODE_ENV === "production") return;
+    console.warn("[usePageBanner] No page layout above this component; the banner will not render.");
+  }, [banner]);
+}
+function PageBanner(props) {
+  usePageBanner(props);
+  return null;
+}
+
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_react167 = require("react");
+var import_react168 = require("react");
 var import_runtime160 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
-var import_react163 = require("react");
+var import_react164 = require("react");
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -30457,13 +30522,13 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = (0, import_react163.useState)(initial);
-  const stateRef = (0, import_react163.useRef)(initial);
-  const getTopOffsetRef = (0, import_react163.useRef)(getTopOffset);
+  const [state, setState] = (0, import_react164.useState)(initial);
+  const stateRef = (0, import_react164.useRef)(initial);
+  const getTopOffsetRef = (0, import_react164.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = (0, import_react163.useRef)(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = (0, import_react163.useRef)(0);
-  (0, import_react163.useLayoutEffect)(() => {
+  const lastScrollY = (0, import_react164.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = (0, import_react164.useRef)(0);
+  (0, import_react164.useLayoutEffect)(() => {
     if (!enabled) {
       stateRef.current = "resting";
       lastScrollY.current = Number.POSITIVE_INFINITY;
@@ -30529,25 +30594,25 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 
 // src/layouts/useMeasuredHeight.ts
 var import_utils50 = require("@react-aria/utils");
-var import_react164 = require("react");
+var import_react165 = require("react");
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = (0, import_react164.useState)(0);
-  const syncElementHeight = (0, import_react164.useCallback)(() => {
+  const [height, setHeight] = (0, import_react165.useState)(0);
+  const syncElementHeight = (0, import_react165.useCallback)(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
   (0, import_utils50.useResizeObserver)({ ref, onResize: syncElementHeight });
-  (0, import_react164.useLayoutEffect)(() => {
+  (0, import_react165.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/useTransitionAfterPaint.ts
-var import_react165 = require("react");
+var import_react166 = require("react");
 function useTransitionAfterPaint(ref, transition) {
-  (0, import_react165.useLayoutEffect)(() => {
+  (0, import_react166.useLayoutEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const id = requestAnimationFrame(() => {
@@ -30558,14 +30623,14 @@ function useTransitionAfterPaint(ref, transition) {
 }
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
-var import_react166 = require("react");
+var import_react167 = require("react");
 var import_jsx_runtime243 = require("react/jsx-runtime");
-var NavbarLayoutHeightContext = (0, import_react166.createContext)(0);
+var NavbarLayoutHeightContext = (0, import_react167.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
-  return (0, import_react166.useContext)(NavbarLayoutHeightContext);
+  return (0, import_react167.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
@@ -30579,8 +30644,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = (0, import_react167.useRef)(null);
-  const spacerRef = (0, import_react167.useRef)(null);
+  const navMetricsRef = (0, import_react168.useRef)(null);
+  const spacerRef = (0, import_react168.useRef)(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState
@@ -30606,7 +30671,7 @@ function NavbarLayout(props) {
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
   };
-  const navbarEl = (0, import_react167.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Navbar, { ...navbar }), [navbar]);
+  const navbarEl = (0, import_react168.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Navbar, { ...navbar }), [navbar]);
   return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)("div", { ...(0, import_runtime160.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
@@ -30624,14 +30689,14 @@ function NavbarLayout(props) {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_react169 = require("react");
+var import_react171 = require("react");
 
 // src/hooks/useDocumentTitle.tsx
-var import_react168 = require("react");
+var import_react169 = require("react");
 function useDocumentTitle(...titleSegments) {
   const config = useDocumentTitleConfig();
   const pageTitle = joinDocumentTitleSegments(...titleSegments);
-  (0, import_react168.useLayoutEffect)(() => {
+  (0, import_react169.useLayoutEffect)(() => {
     if (!config || !pageTitle || typeof document === "undefined") {
       return;
     }
@@ -30736,94 +30801,162 @@ function PageHeader2(props) {
   ] }) });
 }
 
+// src/layouts/PageBanner/internal/usePageBannerSlot.tsx
+var import_react170 = require("react");
+
+// src/layouts/PageBanner/internal/PageBannerSlot.tsx
+var import_runtime163 = require("@homebound/truss/runtime");
+var import_jsx_runtime247 = require("react/jsx-runtime");
+var __maybeInc34 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function PageBannerSlot(props) {
+  const {
+    banner,
+    metricsRef
+  } = props;
+  const tid = useTestIds(props, "pageBannerSlot");
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { ref: metricsRef, ...(0, import_runtime163.trussProps)({
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": (0, import_runtime163.maybeCssVar)(__maybeInc34(`min(100%, ${documentScrollChromeWidth()})`))
+    }],
+    transition: "transitionTop",
+    position: "sticky",
+    top: ["top_var", {
+      "--top": (0, import_runtime163.maybeCssVar)(__maybeInc34(pageBannerOffset()))
+    }],
+    left: ["left_var", {
+      "--left": (0, import_runtime163.maybeCssVar)(__maybeInc34(documentScrollChromeLeft()))
+    }],
+    zIndex: ["z_var", {
+      "--zIndex": (0, import_runtime163.maybeCssVar)(zIndices.pageBanner)
+    }]
+  }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StatusBanner, { ...banner, sticky: true, ...tid.banner }) });
+}
+
+// src/layouts/PageBanner/internal/usePageBannerSlot.tsx
+var import_jsx_runtime248 = require("react/jsx-runtime");
+function usePageBannerSlot(bannerProp, testIds) {
+  const publishedBanner = usePublishedPageBanner();
+  const banner = publishedBanner ?? bannerProp;
+  const metricsRef = (0, import_react170.useRef)(null);
+  const height = useMeasuredHeight(metricsRef, banner != null);
+  const slot = banner ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(PageBannerSlot, { ...testIds, banner, metricsRef }) : null;
+  return { slot, height };
+}
+function usePublishedPageBanner() {
+  const [banner, setBanner] = (0, import_react170.useState)(pageBannerStore.getSnapshot);
+  const sync = (0, import_react170.useCallback)(() => {
+    const next = pageBannerStore.getSnapshot();
+    setBanner((prev) => prev === next ? prev : next);
+  }, []);
+  (0, import_react170.useLayoutEffect)(() => {
+    sync();
+    return pageBannerStore.subscribe(sync);
+  }, [sync]);
+  return banner;
+}
+
 // src/layouts/useBannerAndNavbarHeight.ts
 function useBannerAndNavbarHeight() {
   return useEnvironmentBannerLayoutHeight() + useNavbarLayoutHeight();
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime163 = require("@homebound/truss/runtime");
-var import_jsx_runtime247 = require("react/jsx-runtime");
-var __maybeInc34 = (inc) => {
+var import_runtime164 = require("@homebound/truss/runtime");
+var import_jsx_runtime249 = require("react/jsx-runtime");
+var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
   const {
     pageHeader,
+    banner: bannerProp,
     children
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
+  const {
+    slot: bannerSlot,
+    height: bannerHeight
+  } = usePageBannerSlot(bannerProp, tid);
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = (0, import_react169.useRef)(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = (0, import_react171.useRef)(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = (0, import_react169.useCallback)(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = (0, import_react169.useRef)(null);
-  const spacerRef = (0, import_react169.useRef)(null);
+  const getBannerAndNavbarHeight = (0, import_react171.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react171.useRef)(null);
+  const spacerRef = (0, import_react171.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState
   } = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
   const headerOccupiesPosition = autoHideState !== "hidden";
-  const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
-    [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
-  } : void 0;
+  const cssVars = {};
+  if (headerHeight > 0 && headerOccupiesPosition) {
+    cssVars[beamPageHeaderLayoutHeightVar] = `${headerHeight}px`;
+  }
+  if (bannerHeight > 0) {
+    cssVars[beamPageBannerHeightVar] = `${bannerHeight}px`;
+  }
+  const style = Object.keys(cssVars).length > 0 ? cssVars : void 0;
   const headerLeft = documentScrollChromeLeft();
   const headerWidth = documentScrollChromeWidth();
-  const outerTop = bannerAndNavbarChromeTop();
+  const outerTop = belowNavbarOffset();
   const innerCss = {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime163.maybeCssVar)(__maybeInc34(headerLeft))
+      "--left": (0, import_runtime164.maybeCssVar)(__maybeInc35(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime163.maybeCssVar)(__maybeInc34(headerWidth))
+      "--width": (0, import_runtime164.maybeCssVar)(__maybeInc35(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime163.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime164.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   };
   useTransitionAfterPaint(headerMetricsRef, "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
-  const pageHeaderEl = (0, import_react169.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)("div", { ...(0, import_runtime163.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react171.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)("div", { ...(0, import_runtime164.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { ref: spacerRef, ...(0, import_runtime163.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { ref: spacerRef, ...(0, import_runtime164.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime163.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime164.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    bannerSlot,
+    /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { className: "df fdc fg1 mh0 w100 n_has_data_self_top_spaced_first_child_pt3", ...tid.body, children })
   ] }) });
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-var import_react172 = require("react");
+var import_react174 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
-var import_jsx_runtime248 = require("react/jsx-runtime");
+var import_jsx_runtime250 = require("react/jsx-runtime");
 function WorkflowHeader(props) {
   const { stepperTabs, ...otherProps } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
     BaseHeader,
     {
       ...otherProps,
-      bottomSlot: stepperTabs ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
+      bottomSlot: stepperTabs ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) : void 0
     }
   );
 }
 
 // src/layouts/Workflow/RightPaneTriggers.tsx
-var import_react170 = require("react");
-var import_runtime164 = require("@homebound/truss/runtime");
-var import_jsx_runtime249 = require("react/jsx-runtime");
-var __maybeInc35 = (inc) => {
+var import_react172 = require("react");
+var import_runtime165 = require("@homebound/truss/runtime");
+var import_jsx_runtime251 = require("react/jsx-runtime");
+var __maybeInc36 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowPageRightPaneTriggers(props) {
@@ -30841,14 +30974,14 @@ function WorkflowPageRightPaneTriggers(props) {
   } = useRightPaneActions();
   const tid = useTestIds(props, "rightPaneTriggers");
   const pageTriggerInsetPx = 24;
-  const onClick = (0, import_react170.useCallback)((trigger) => {
+  const onClick = (0, import_react172.useCallback)((trigger) => {
     openRightPane({
-      content: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(RightPanePanel, { title: trigger.label, children: trigger.content })
+      content: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(RightPanePanel, { title: trigger.label, children: trigger.content })
     });
   }, [openRightPane]);
-  return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { ...tid, "aria-hidden": isRightPaneOpen, ...isRightPaneOpen ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("div", { ...tid, "aria-hidden": isRightPaneOpen, ...isRightPaneOpen ? {
     inert: true
-  } : {}, ...(0, import_runtime164.trussProps)({
+  } : {}, ...(0, import_runtime165.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -30862,40 +30995,40 @@ function WorkflowPageRightPaneTriggers(props) {
     ...!isMobile && {
       position: "fixed",
       top: ["top_var", {
-        "--top": (0, import_runtime164.maybeCssVar)(__maybeInc35(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
+        "--top": (0, import_runtime165.maybeCssVar)(__maybeInc36(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
       }],
       right: ["right_var", {
         "--right": `${pageTriggerInsetPx}px`
       }],
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime164.maybeCssVar)(zIndices.rightPaneTriggers)
+        "--zIndex": (0, import_runtime165.maybeCssVar)(zIndices.rightPaneTriggers)
       }]
     },
     // Desktop only — on `sm` the full-bleed pane covers the header slot.
     ...!isMobile && (isRightPaneOpen ? {
       transform: ["transform_var", {
-        "--transform": (0, import_runtime164.maybeCssVar)(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
+        "--transform": (0, import_runtime165.maybeCssVar)(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
       }],
       pointerEvents: "pen"
     } : {
       transform: "tf_translateX_0"
     })
-  }), children: triggers.map((trigger) => /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(IconButton, { icon: trigger.icon, label: trigger.label, variant: "circle", compact: isMobile, onClick: () => onClick(trigger), ...tid[trigger.icon] }, trigger.label)) });
+  }), children: triggers.map((trigger) => /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(IconButton, { icon: trigger.icon, label: trigger.label, variant: "circle", compact: isMobile, onClick: () => onClick(trigger), ...tid[trigger.icon] }, trigger.label)) });
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-var import_react171 = require("react");
+var import_react173 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
-var import_jsx_runtime250 = require("react/jsx-runtime");
+var import_jsx_runtime252 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, allowNavigation, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react171.useRef)(isDirty);
+  const isDirtyRef = (0, import_react173.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  const allowNavigationRef = (0, import_react171.useRef)(allowNavigation);
+  const allowNavigationRef = (0, import_react173.useRef)(allowNavigation);
   allowNavigationRef.current = allowNavigation;
-  const allowCancelNavigationRef = (0, import_react171.useRef)(false);
-  (0, import_react171.useEffect)(() => {
+  const allowCancelNavigationRef = (0, import_react173.useRef)(false);
+  (0, import_react173.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -30922,7 +31055,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -30931,10 +31064,10 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react171.useEffect)(() => {
+  (0, import_react173.useEffect)(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -30942,7 +31075,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-var import_jsx_runtime251 = require("react/jsx-runtime");
+var import_jsx_runtime253 = require("react/jsx-runtime");
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -30960,12 +31093,12 @@ function WorkflowActions(props) {
     sm: isMobile
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
-  return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)("div", { className: "df aic g_1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime253.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)("div", { className: "df aic g_1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
     ] })
@@ -30973,9 +31106,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-var import_runtime165 = require("@homebound/truss/runtime");
-var import_jsx_runtime252 = require("react/jsx-runtime");
-var __maybeInc36 = (inc) => {
+var import_runtime166 = require("@homebound/truss/runtime");
+var import_jsx_runtime254 = require("react/jsx-runtime");
+var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -30991,9 +31124,14 @@ function WorkflowPageLayout(props) {
     breadcrumbs,
     onCancel,
     rightPaneTriggers,
+    banner: bannerProp,
     ...actionProps
   } = props;
   const tid = useTestIds(props, "workflowPageLayout");
+  const {
+    slot: bannerSlot,
+    height: bannerHeight
+  } = usePageBannerSlot(bannerProp, tid);
   const {
     sm: isMobile
   } = useBreakpoint();
@@ -31005,18 +31143,23 @@ function WorkflowPageLayout(props) {
     allowNavigation,
     onCancel
   });
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
   const triggers = rightPaneTriggers ?? [];
-  const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
-  const headerMetricsRef = (0, import_react172.useRef)(null);
+  const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
+  const headerMetricsRef = (0, import_react174.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
-  const outerTop = bannerAndNavbarChromeTop();
-  const cssVars = headerHeight > 0 ? {
-    [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
-  } : void 0;
+  const outerTop = belowNavbarOffset();
+  const cssVars = {};
+  if (headerHeight > 0) {
+    cssVars[beamPageHeaderLayoutHeightVar] = `${headerHeight}px`;
+  }
+  if (bannerHeight > 0) {
+    cssVars[beamPageBannerHeightVar] = `${bannerHeight}px`;
+  }
+  const style = Object.keys(cssVars).length > 0 ? cssVars : void 0;
   const showFooter = isMobile;
-  (0, import_react172.useLayoutEffect)(() => {
+  (0, import_react174.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -31028,32 +31171,33 @@ function WorkflowPageLayout(props) {
       }
     };
   }, [showFooter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)("div", { ...(0, import_runtime165.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)("div", { ...(0, import_runtime166.mergeProps)(void 0, style, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { ...(0, import_runtime165.mergeProps)(void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)("div", { ...(0, import_runtime166.mergeProps)(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
         width: "w100"
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime165.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime166.trussProps)({
         position: "fixed",
         left: "l_0",
         width: ["w_var", {
-          "--width": (0, import_runtime165.maybeCssVar)(__maybeInc36(headerWidth))
+          "--width": (0, import_runtime166.maybeCssVar)(__maybeInc37(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime165.maybeCssVar)(zIndices.pageStickyHeader)
+          "--zIndex": (0, import_runtime166.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime165.maybeCssVar)(__maybeInc36(outerTop))
+          "--top": (0, import_runtime166.maybeCssVar)(__maybeInc37(outerTop))
         }],
         transition: "transitionAll"
-      }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { ...(0, import_runtime165.trussProps)({
+      }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
+      bannerSlot,
+      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)("div", { ...(0, import_runtime166.trussProps)({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -31065,29 +31209,29 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": (0, import_runtime165.maybeCssVar)(documentScrollBodyMinHeight())
+            "--minHeight": (0, import_runtime166.maybeCssVar)(documentScrollBodyMinHeight())
           }]
         }
-      }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
+      }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
       !isMobile && pageTriggers,
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { ...(0, import_runtime165.trussProps)({
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)("div", { ...(0, import_runtime166.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { ...(0, import_runtime165.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)("div", { ...(0, import_runtime166.trussProps)({
         ...{
           position: "fixed",
           bottom: "bot_0",
           width: ["w_var", {
-            "--width": (0, import_runtime165.maybeCssVar)(__maybeInc36(headerWidth))
+            "--width": (0, import_runtime166.maybeCssVar)(__maybeInc37(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": (0, import_runtime165.maybeCssVar)(zIndices.pageStickyFooter)
+            "--zIndex": (0, import_runtime166.maybeCssVar)(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -31105,12 +31249,12 @@ function WorkflowPageLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-var import_jsx_runtime253 = require("react/jsx-runtime");
+var import_jsx_runtime255 = require("react/jsx-runtime");
 function FocusedFormLayout(props) {
   const {
     onCancel,
@@ -31122,15 +31266,17 @@ function FocusedFormLayout(props) {
     allowNavigation,
     aiMode,
     rightPaneTriggers,
+    banner,
     children,
     ...headerProps
   } = props;
   const tid = useTestIds(props, "focusedFormLayout");
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
     WorkflowPageLayout,
     {
       ...tid,
       ...headerProps,
+      banner,
       aiMode,
       isDirty,
       allowNavigation,
@@ -31146,8 +31292,8 @@ function FocusedFormLayout(props) {
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-var import_react173 = require("react");
-var import_jsx_runtime254 = require("react/jsx-runtime");
+var import_react175 = require("react");
+var import_jsx_runtime256 = require("react/jsx-runtime");
 function StepperLayout(props) {
   const {
     steps,
@@ -31159,10 +31305,11 @@ function StepperLayout(props) {
     isDirty,
     allowNavigation,
     aiMode,
+    banner,
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
-  const [currentStep, setCurrentStep] = (0, import_react173.useState)(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react175.useState)(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
   const { closeRightPane } = useRightPaneActions();
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
@@ -31174,11 +31321,12 @@ function StepperLayout(props) {
     closeRightPane();
     setCurrentStep(value);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
     WorkflowPageLayout,
     {
       ...tid,
       ...headerProps,
+      banner,
       aiMode,
       stepperTabs: { steps: stepTabs, currentStep, onChange: goToStep },
       isDirty,
@@ -31217,7 +31365,7 @@ function getInitialStep(steps, defaultStep) {
 
 // src/forms/BoundChipSelectField.tsx
 var import_mobx_react23 = require("mobx-react");
-var import_jsx_runtime255 = require("react/jsx-runtime");
+var import_jsx_runtime257 = require("react/jsx-runtime");
 function BoundChipSelectField(props) {
   const {
     field,
@@ -31233,7 +31381,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_mobx_react23.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(import_mobx_react23.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
     ChipSelectField,
     {
       label,
@@ -31263,12 +31411,12 @@ function BoundChipSelectField(props) {
 }
 
 // src/forms/BoundSelectAndTextField.tsx
-var import_jsx_runtime256 = require("react/jsx-runtime");
+var import_jsx_runtime258 = require("react/jsx-runtime");
 function BoundSelectAndTextField(props) {
   const { selectFieldProps, textFieldProps, compact = true } = props;
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(CompoundField, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(CompoundField, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
       BoundSelectField,
       {
         ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
@@ -31277,7 +31425,7 @@ function BoundSelectAndTextField(props) {
         compact
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
       BoundTextField,
       {
         ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
@@ -31289,8 +31437,8 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-var import_runtime166 = require("@homebound/truss/runtime");
-var import_jsx_runtime257 = (
+var import_runtime167 = require("@homebound/truss/runtime");
+var import_jsx_runtime259 = (
   // Add space before the heading, but only if it's not first.
   require("react/jsx-runtime")
 );
@@ -31301,7 +31449,7 @@ function FormHeading(props) {
     isFirst = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("h3", { ...(0, import_runtime166.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("h3", { ...(0, import_runtime167.trussProps)({
     ...{
       fontWeight: "fw4",
       fontSize: "fz_16px",
@@ -31317,8 +31465,8 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 var import_utils51 = require("@react-aria/utils");
-var import_runtime167 = require("@homebound/truss/runtime");
-var import_jsx_runtime258 = require("react/jsx-runtime");
+var import_runtime168 = require("@homebound/truss/runtime");
+var import_jsx_runtime260 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
     fieldProps
@@ -31331,14 +31479,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = (0, import_utils51.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)("div", { ...(0, import_runtime167.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)("div", { ...(0, import_runtime168.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime258.jsx)("label", { ...(0, import_runtime167.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("label", { ...(0, import_runtime168.trussProps)({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -31348,7 +31496,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime258.jsx)("div", { id, ...(0, import_runtime167.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("div", { id, ...(0, import_runtime168.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -31365,9 +31513,9 @@ function StaticField(props) {
 }
 
 // src/hooks/useFilter.ts
-var import_react174 = require("react");
+var import_react176 = require("react");
 function useFilter4({ filterDefs }) {
-  const [filter, setFilter] = (0, import_react174.useState)(
+  const [filter, setFilter] = (0, import_react176.useState)(
     Object.fromEntries(
       safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     )
@@ -31376,10 +31524,10 @@ function useFilter4({ filterDefs }) {
 }
 
 // src/inputs/Autocomplete.tsx
-var import_react175 = require("react");
+var import_react177 = require("react");
 var import_react_aria69 = require("react-aria");
 var import_react_stately18 = require("react-stately");
-var import_jsx_runtime259 = require("react/jsx-runtime");
+var import_jsx_runtime261 = require("react/jsx-runtime");
 function Autocomplete(props) {
   const {
     onSelect,
@@ -31396,8 +31544,8 @@ function Autocomplete(props) {
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = (0, import_react175.useCallback)(
-    (item) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+  const comboBoxChildren = (0, import_react177.useCallback)(
+    (item) => /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
   const comboBoxProps = {
@@ -31421,10 +31569,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = (0, import_react_stately18.useComboBoxState)(comboBoxProps);
-  const inputWrapRef = (0, import_react175.useRef)(null);
-  const inputRef = (0, import_react175.useRef)(null);
-  const listBoxRef = (0, import_react175.useRef)(null);
-  const popoverRef = (0, import_react175.useRef)(null);
+  const inputWrapRef = (0, import_react177.useRef)(null);
+  const inputRef = (0, import_react177.useRef)(null);
+  const listBoxRef = (0, import_react177.useRef)(null);
+  const popoverRef = (0, import_react177.useRef)(null);
   const { inputProps, listBoxProps, labelProps } = (0, import_react_aria69.useComboBox)(
     {
       ...comboBoxProps,
@@ -31450,8 +31598,8 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(import_jsx_runtime259.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(import_jsx_runtime261.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
       TextFieldBase,
       {
         inputRef,
@@ -31461,11 +31609,11 @@ function Autocomplete(props) {
         onChange: onInputChange,
         ...proposalProps,
         clearable: true,
-        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Icon, { icon: "search" }),
+        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Icon, { icon: "search" }),
         ...others
       }
     ),
-    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
       Popover,
       {
         triggerRef: inputRef,
@@ -31474,7 +31622,7 @@ function Autocomplete(props) {
         onClose: () => state.close(),
         isOpen: state.isOpen,
         minWidth: 200,
-        children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
           ListBox,
           {
             ...listBoxProps,
@@ -31492,11 +31640,11 @@ function Autocomplete(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-var import_react176 = require("react");
+var import_react178 = require("react");
 var import_react_aria70 = require("react-aria");
 var import_react_stately19 = require("react-stately");
-var import_runtime168 = require("@homebound/truss/runtime");
-var import_jsx_runtime260 = require("react/jsx-runtime");
+var import_runtime169 = require("@homebound/truss/runtime");
+var import_jsx_runtime262 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -31507,7 +31655,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react176.useState)(false);
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react178.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -31526,8 +31674,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = (0, import_react176.useRef)(null);
-  const ref = (0, import_react176.useRef)(null);
+  const labelRef = (0, import_react178.useRef)(null);
+  const ref = (0, import_react178.useRef)(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -31560,7 +31708,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime168.trussProps)({
+    ...(0, import_runtime169.trussProps)({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",
@@ -31600,10 +31748,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Icon, { icon }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(import_react_aria70.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(import_react_aria70.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }
@@ -31755,6 +31903,7 @@ var togglePressStyles = {
   NavbarLayout,
   NumberField,
   OpenModal,
+  PageBanner,
   PageHeaderLayout,
   Pagination,
   Palette,
@@ -31825,19 +31974,20 @@ var togglePressStyles = {
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
-  bannerAndNavbarChromeTop,
   beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar,
   beamLayoutContentPaddingXVar,
   beamLayoutViewportHeightVar,
   beamLayoutViewportWidthVar,
   beamNavbarLayoutHeightVar,
+  beamPageBannerHeightVar,
   beamPageHeaderLayoutHeightVar,
   beamRightPaneContentMinVar,
   beamRightPaneWidthVar,
   beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar,
   beamWorkflowLayoutFooterHeightVar,
+  belowNavbarOffset,
   booleanFilter,
   boundCheckboxField,
   boundCheckboxGroupField,
@@ -31951,6 +32101,7 @@ var togglePressStyles = {
   nonKindGridColumnKeys,
   numberRangeFilter,
   numericColumn,
+  pageBannerOffset,
   pageContentGutterPx,
   pageContentPaddingX,
   parseDate,
@@ -32014,6 +32165,7 @@ var togglePressStyles = {
   useHasSideNavLayoutProvider,
   useHover,
   useModal,
+  usePageBanner,
   usePersistedFilter,
   useQueryState,
   useResponsiveGrid,