@homebound/beam 3.102.0 → 3.103.0

package/dist/index.cjs

@@ -28422,8 +28422,72 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
+var import_runtime148 = require("@homebound/truss/runtime");
+
+// src/layouts/FormSectionLayout/JumpLinksRail.tsx
 var import_runtime147 = require("@homebound/truss/runtime");
 var import_jsx_runtime229 = require("react/jsx-runtime");
+var __maybeInc31 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function JumpLinksRail(props) {
+  const {
+    links,
+    activeId
+  } = props;
+  const tid = useTestIds(props, "jumpLinks");
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("nav", { ...(0, import_runtime147.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": `${jumpLinksRailWidthPx}px`
+    }],
+    position: "sticky",
+    alignSelf: "asfs",
+    top: ["top_var", {
+      "--top": (0, import_runtime147.maybeCssVar)(__maybeInc31(stickyNavAndHeaderOffset()))
+    }]
+  }), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
+}
+var jumpLinksRailWidthPx = 192;
+var railAndShellPx = centeredShellMaxPx.sm + jumpLinksRailWidthPx;
+var jumpLinksRailReservation = `clamp(0px, 100% - ${railAndShellPx}px, ${jumpLinksRailWidthPx}px)`;
+
+// src/layouts/FormSectionLayout/useActiveJumpLink.ts
+var import_react158 = require("react");
+var activationLeadPx = 120;
+function useActiveJumpLink(sectionIds) {
+  const idsKey = sectionIds.join("\0");
+  const [activeId, setActiveId] = (0, import_react158.useState)(sectionIds[0]);
+  (0, import_react158.useLayoutEffect)(() => {
+    const ids = idsKey.length === 0 ? [] : idsKey.split("\0");
+    if (ids.length === 0) return;
+    const update = () => {
+      const first = ids.map((id) => document.getElementById(id)).find((el) => el !== null);
+      if (!first) return;
+      const headerOffset = stickyNavAndHeaderOffsetPx(first);
+      let current = ids[0];
+      for (const id of ids) {
+        const el = document.getElementById(id);
+        if (el && el.getBoundingClientRect().top - headerOffset <= activationLeadPx) {
+          current = id;
+        }
+      }
+      setActiveId(current);
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, [idsKey]);
+  return sectionIds.includes(activeId ?? "") ? activeId : sectionIds[0];
+}
+
+// src/layouts/FormSectionLayout/FormSectionLayout.tsx
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var __maybeInc32 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function FormSectionLayout(props) {
   const {
     title,
@@ -28432,10 +28496,23 @@ function FormSectionLayout(props) {
     withAutoSave,
     initialFields,
     sections,
-    aiMode = false
+    aiMode = false,
+    withJumpLinks = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  const content = /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)("div", { ...(0, import_runtime147.trussProps)({
+  const {
+    sm: isMobile
+  } = useBreakpoint();
+  const jumpLinks = (sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
+    const id = defaultTestId(section.title);
+    return {
+      id,
+      label: section.title
+    };
+  });
+  const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
+  const activeId = useActiveJumpLink(showRail ? jumpLinks.map((link) => link.id) : []);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime148.trussProps)({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -28446,21 +28523,34 @@ function FormSectionLayout(props) {
       paddingLeft: "pl3"
     } : {}
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "df fdc gap3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+  ] });
+  const form = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(AiCard, { size: "lg", ...tid, children: content }) : content });
+  if (!showRail) {
+    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "mb4", children: form });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { className: "df w100 mb4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ...(0, import_runtime148.trussProps)({
+      flexGrow: "fg1",
+      minWidth: "mw0",
+      marginRight: ["mr_var", {
+        "--marginRight": (0, import_runtime148.maybeCssVar)(__maybeInc32(jumpLinksRailReservation))
+      }]
+    }), ...tid.column, children: form })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(AiCard, { size: "lg", ...tid, children: content }) : content });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_react161 = require("react");
-var import_runtime148 = require("@homebound/truss/runtime");
+var import_react162 = require("react");
+var import_runtime149 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
-var import_react158 = require("react");
+var import_react159 = require("react");
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -28470,15 +28560,15 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = (0, import_react158.useState)(initial.state);
-  const stateRef = (0, import_react158.useRef)(initial.state);
-  const [atTop, setAtTop] = (0, import_react158.useState)(initial.atTop);
-  const atTopRef = (0, import_react158.useRef)(initial.atTop);
-  const getTopOffsetRef = (0, import_react158.useRef)(getTopOffset);
+  const [state, setState] = (0, import_react159.useState)(initial.state);
+  const stateRef = (0, import_react159.useRef)(initial.state);
+  const [atTop, setAtTop] = (0, import_react159.useState)(initial.atTop);
+  const atTopRef = (0, import_react159.useRef)(initial.atTop);
+  const getTopOffsetRef = (0, import_react159.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
-  const lastScrollY = (0, import_react158.useRef)(Number.POSITIVE_INFINITY);
-  const lastScrollHeight = (0, import_react158.useRef)(0);
-  (0, import_react158.useLayoutEffect)(() => {
+  const lastScrollY = (0, import_react159.useRef)(Number.POSITIVE_INFINITY);
+  const lastScrollHeight = (0, import_react159.useRef)(0);
+  (0, import_react159.useLayoutEffect)(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
@@ -28550,36 +28640,36 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils193 = require("@react-aria/utils");
-var import_react159 = require("react");
+var import_utils194 = require("@react-aria/utils");
+var import_react160 = require("react");
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = (0, import_react159.useState)(0);
-  const syncElementHeight = (0, import_react159.useCallback)(() => {
+  const [height, setHeight] = (0, import_react160.useState)(0);
+  const syncElementHeight = (0, import_react160.useCallback)(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils193.useResizeObserver)({ ref, onResize: syncElementHeight });
-  (0, import_react159.useLayoutEffect)(() => {
+  (0, import_utils194.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_react160.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
 }
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
-var import_react160 = require("react");
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var NavbarLayoutHeightContext = (0, import_react160.createContext)(0);
+var import_react161 = require("react");
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var NavbarLayoutHeightContext = (0, import_react161.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
-  return (0, import_react160.useContext)(NavbarLayoutHeightContext);
+  return (0, import_react161.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var __maybeInc31 = (inc) => {
+var import_jsx_runtime232 = require("react/jsx-runtime");
+var __maybeInc33 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -28588,8 +28678,8 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = (0, import_react161.useRef)(null);
-  const spacerRef = (0, import_react161.useRef)(null);
+  const navMetricsRef = (0, import_react162.useRef)(null);
+  const spacerRef = (0, import_react162.useRef)(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
     state: autoHideState,
@@ -28607,10 +28697,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime149.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime148.maybeCssVar)(__maybeInc31(innerWidth))
+        "--width": (0, import_runtime149.maybeCssVar)(__maybeInc33(innerWidth))
       }]
     }
   ) : (
@@ -28619,10 +28709,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime149.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime148.maybeCssVar)(__maybeInc31(innerWidth))
+        "--width": (0, import_runtime149.maybeCssVar)(__maybeInc33(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -28631,29 +28721,29 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react161.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)("div", { ...(0, import_runtime148.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react162.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ...(0, import_runtime149.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ref: spacerRef, ...(0, import_runtime148.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ref: spacerRef, ...(0, import_runtime149.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime148.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime149.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_react162 = require("react");
+var import_react163 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime149 = require("@homebound/truss/runtime");
-var import_jsx_runtime232 = require("react/jsx-runtime");
+var import_runtime150 = require("@homebound/truss/runtime");
+var import_jsx_runtime233 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
     title,
@@ -28665,7 +28755,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("header", { ...tid, ...(0, import_runtime149.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("header", { ...tid, ...(0, import_runtime150.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -28679,7 +28769,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ...(0, import_runtime149.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { ...(0, import_runtime150.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28693,9 +28783,9 @@ function BaseHeader(props) {
         } : {}
       }
     }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("h1", { ...tid.title, ...(0, import_runtime149.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "mw0", children: [
+        breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("h1", { ...tid.title, ...(0, import_runtime150.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -28704,15 +28794,15 @@ function BaseHeader(props) {
           }]
         }), children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { className: "fs0", children: rightSlot })
     ] }),
     bottomSlot
   ] });
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime150 = require("@homebound/truss/runtime");
-var import_jsx_runtime233 = require("react/jsx-runtime");
+var import_runtime151 = require("@homebound/truss/runtime");
+var import_jsx_runtime234 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
     tabs,
@@ -28721,10 +28811,10 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(import_jsx_runtime233.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
     rightSlot,
-    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(HeaderActions, { actions, collapseOnSm: true })
-  ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ...(0, import_runtime150.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(HeaderActions, { actions, collapseOnSm: true })
+  ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime151.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28733,9 +28823,9 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime151 = require("@homebound/truss/runtime");
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var __maybeInc32 = (inc) => {
+var import_runtime152 = require("@homebound/truss/runtime");
+var import_jsx_runtime235 = require("react/jsx-runtime");
+var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -28745,11 +28835,11 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = (0, import_react162.useRef)(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = (0, import_react163.useRef)(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = (0, import_react162.useCallback)(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = (0, import_react162.useRef)(null);
-  const spacerRef = (0, import_react162.useRef)(null);
+  const getBannerAndNavbarHeight = (0, import_react163.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react163.useRef)(null);
+  const spacerRef = (0, import_react163.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
     state: autoHideState,
@@ -28765,103 +28855,46 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerLeft))
+      "--left": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerWidth))
+      "--width": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime151.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime152.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerLeft))
+      "--left": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime151.maybeCssVar)(__maybeInc32(headerWidth))
+      "--width": (0, import_runtime152.maybeCssVar)(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime151.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime152.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react162.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { ...(0, import_runtime151.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react163.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)("div", { ...(0, import_runtime152.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: spacerRef, ...(0, import_runtime151.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ref: spacerRef, ...(0, import_runtime152.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime151.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime152.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
-// src/layouts/Workflow/JumpLinksRail.tsx
-var import_runtime152 = require("@homebound/truss/runtime");
-var import_jsx_runtime235 = require("react/jsx-runtime");
-var __maybeInc33 = (inc) => {
-  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
-};
-var jumpLinksRailWidthPx = 180;
-function JumpLinksRail(props) {
-  const {
-    links,
-    activeId
-  } = props;
-  const tid = useTestIds(props, "jumpLinks");
-  return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("nav", { ...(0, import_runtime152.trussProps)({
-    display: "df",
-    flexDirection: "fdc",
-    flexShrink: "fs0",
-    width: ["w_var", {
-      "--width": `${jumpLinksRailWidthPx}px`
-    }],
-    position: "sticky",
-    alignSelf: "asfs",
-    top: ["top_var", {
-      "--top": (0, import_runtime152.maybeCssVar)(__maybeInc33(stickyNavAndHeaderOffset()))
-    }]
-  }), ...tid, children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
-}
-
-// src/layouts/Workflow/useActiveJumpLink.ts
-var import_react163 = require("react");
-var activationLeadPx = 120;
-function useActiveJumpLink(sectionIds) {
-  const idsKey = sectionIds.join("\0");
-  const [activeId, setActiveId] = (0, import_react163.useState)(sectionIds[0]);
-  (0, import_react163.useLayoutEffect)(() => {
-    const ids = idsKey.length === 0 ? [] : idsKey.split("\0");
-    if (ids.length === 0) return;
-    const update = () => {
-      const first = ids.map((id) => document.getElementById(id)).find((el) => el !== null);
-      if (!first) return;
-      const headerOffset = stickyNavAndHeaderOffsetPx(first);
-      let current = ids[0];
-      for (const id of ids) {
-        const el = document.getElementById(id);
-        if (el && el.getBoundingClientRect().top - headerOffset <= activationLeadPx) {
-          current = id;
-        }
-      }
-      setActiveId(current);
-    };
-    update();
-    window.addEventListener("scroll", update, { passive: true });
-    return () => window.removeEventListener("scroll", update);
-  }, [idsKey]);
-  return sectionIds.includes(activeId ?? "") ? activeId : sectionIds[0];
-}
-
 // src/layouts/Workflow/WorkflowPageLayout.tsx
 var import_react165 = require("react");
 
@@ -28958,7 +28991,7 @@ function WorkflowActions(props) {
 // src/layouts/Workflow/WorkflowPageLayout.tsx
 var import_runtime153 = require("@homebound/truss/runtime");
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var __maybeInc34 = (inc) => {
+var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -29016,13 +29049,13 @@ function WorkflowPageLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime153.maybeCssVar)(__maybeInc34(headerWidth))
+          "--width": (0, import_runtime153.maybeCssVar)(__maybeInc35(headerWidth))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime153.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime153.maybeCssVar)(__maybeInc34(outerTop))
+          "--top": (0, import_runtime153.maybeCssVar)(__maybeInc35(outerTop))
         }]
       }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
       /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ...(0, import_runtime153.trussProps)({
@@ -29052,7 +29085,7 @@ function WorkflowPageLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime153.maybeCssVar)(__maybeInc34(headerWidth))
+            "--width": (0, import_runtime153.maybeCssVar)(__maybeInc35(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
@@ -29083,35 +29116,23 @@ function WorkflowPageLayout(props) {
 // src/layouts/Workflow/FocusedFormLayout.tsx
 var import_jsx_runtime240 = require("react/jsx-runtime");
 function FocusedFormLayout(props) {
-  const {
-    onCancel,
-    completeLabel,
-    onComplete,
-    onSaveAndExit,
-    isValid,
-    isDirty,
-    withJumpLinks = true,
-    aiMode,
-    form,
-    ...headerProps
-  } = props;
+  const { onCancel, completeLabel, onComplete, onSaveAndExit, isValid, isDirty, aiMode, children, ...headerProps } = props;
   const tid = useTestIds(props, "focusedFormLayout");
-  const {
-    sm: isMobile
-  } = useBreakpoint();
-  const jumpLinks = (form.sections ?? []).filter((section) => !section.excludeJumpLink).map((section) => {
-    const id = defaultTestId(section.title);
-    return {
-      id,
-      label: section.title
-    };
-  });
-  const activeId = useActiveJumpLink(jumpLinks.map((link) => link.id));
-  const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)("div", { className: "df w100", children: [
-    showRail && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
-    /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(FormSectionLayout, { ...form, aiMode }) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+    WorkflowPageLayout,
+    {
+      ...tid,
+      ...headerProps,
+      aiMode,
+      isDirty,
+      onCancel,
+      onSaveAndExit,
+      completeLabel,
+      onComplete,
+      primaryDisabled: !isValid,
+      children
+    }
+  );
 }
 
 // src/layouts/Workflow/StepperLayout.tsx