@homebound/beam 3.101.1 → 3.103.0

package/dist/index.js

@@ -21474,9 +21474,20 @@ import { jsx as jsx149 } from "react/jsx-runtime";
 function HeaderActions(props) {
   const {
     actions,
+    collapseOnSm = false,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "headerActions");
+  const {
+    sm
+  } = useBreakpoint();
+  const collapse = collapseOnSm && sm && actions.length > 1;
+  if (collapse) {
+    return /* @__PURE__ */ jsx149("div", { className: "df aic gap1 fs0", ...tid, children: /* @__PURE__ */ jsx149(ButtonMenu, { trigger: {
+      icon: "verticalDots",
+      variant: "outline"
+    }, items: toMenuItems(actions) }) });
+  }
   return /* @__PURE__ */ jsx149("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
     const key = headerActionKey(action, i);
     if (action.kind === "icon") {
@@ -21496,7 +21507,38 @@ function HeaderActions(props) {
 function headerActionKey(action, index) {
   if (action.kind === "icon") return `${action.icon}-${index}`;
   if (action.kind === "menu") return `menu-${index}`;
-  return `${String(action.label)}-${index}`;
+  return `${action.label}-${index}`;
+}
+function toMenuItems(actions) {
+  return actions.flatMap((action) => {
+    if (action.kind === "menu") return action.items;
+    const {
+      label,
+      onClick,
+      disabled
+    } = action;
+    const itemOnClick = typeof onClick === "string" ? onClick : () => void onClick({});
+    if (action.kind === "icon") {
+      return [{
+        label,
+        onClick: itemOnClick,
+        disabled,
+        icon: action.icon
+      }];
+    }
+    return [{
+      label,
+      onClick: itemOnClick,
+      disabled,
+      // Buttons can opt out of their default icon with `icon: null`, which menu items can't render.
+      ...action.icon ? {
+        icon: action.icon
+      } : {},
+      ...action.variant === "danger" ? {
+        destructive: true
+      } : {}
+    }];
+  });
 }
 
 // src/components/Headers/ContentHeader.tsx
@@ -27881,8 +27923,72 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
-import { trussProps as trussProps133 } from "@homebound/truss/runtime";
-import { jsx as jsx229, jsxs as jsxs120 } from "react/jsx-runtime";
+import { trussProps as trussProps134, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
+
+// src/layouts/FormSectionLayout/JumpLinksRail.tsx
+import { trussProps as trussProps133, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
+import { jsx as jsx229 } from "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__ */ jsx229("nav", { ...trussProps133({
+    display: "df",
+    flexDirection: "fdc",
+    flexShrink: "fs0",
+    width: ["w_var", {
+      "--width": `${jumpLinksRailWidthPx}px`
+    }],
+    position: "sticky",
+    alignSelf: "asfs",
+    top: ["top_var", {
+      "--top": maybeCssVar66(__maybeInc31(stickyNavAndHeaderOffset()))
+    }]
+  }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx229(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
+import { useLayoutEffect as useLayoutEffect12, useState as useState61 } from "react";
+var activationLeadPx = 120;
+function useActiveJumpLink(sectionIds) {
+  const idsKey = sectionIds.join("\0");
+  const [activeId, setActiveId] = useState61(sectionIds[0]);
+  useLayoutEffect12(() => {
+    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
+import { jsx as jsx230, jsxs as jsxs120 } from "react/jsx-runtime";
+var __maybeInc32 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function FormSectionLayout(props) {
   const {
     title,
@@ -27891,10 +27997,23 @@ function FormSectionLayout(props) {
     withAutoSave,
     initialFields,
     sections,
-    aiMode = false
+    aiMode = false,
+    withJumpLinks = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  const content = /* @__PURE__ */ jsxs120("div", { ...trussProps133({
+  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__ */ jsxs120("div", { ...trussProps134({
     display: "df",
     flexDirection: "fdc",
     gap: "gap8",
@@ -27906,20 +28025,33 @@ function FormSectionLayout(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ jsxs120("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ jsx229(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
+      /* @__PURE__ */ jsx230(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
-    sections && /* @__PURE__ */ jsx229("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ jsx229(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+    sections && /* @__PURE__ */ jsx230("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ jsx230(FormSection, { ...section }, defaultTestId(section.title) || i)) })
+  ] });
+  const form = /* @__PURE__ */ jsx230(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx230(AiCard, { size: "lg", ...tid, children: content }) : content });
+  if (!showRail) {
+    return /* @__PURE__ */ jsx230("div", { className: "mb4", children: form });
+  }
+  return /* @__PURE__ */ jsxs120("div", { className: "df w100 mb4", children: [
+    /* @__PURE__ */ jsx230(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
+    /* @__PURE__ */ jsx230("div", { ...trussProps134({
+      flexGrow: "fg1",
+      minWidth: "mw0",
+      marginRight: ["mr_var", {
+        "--marginRight": maybeCssVar67(__maybeInc32(jumpLinksRailReservation))
+      }]
+    }), ...tid.column, children: form })
   ] });
-  return /* @__PURE__ */ jsx229(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx229(AiCard, { size: "lg", ...tid, children: content }) : content });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { useMemo as useMemo57, useRef as useRef69 } from "react";
-import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar66 } from "@homebound/truss/runtime";
+import { mergeProps as mergeProps39, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
 
 // src/layouts/useAutoHideOnScroll.ts
-import { useLayoutEffect as useLayoutEffect12, useRef as useRef68, useState as useState61 } from "react";
+import { useLayoutEffect as useLayoutEffect13, useRef as useRef68, useState as useState62 } from "react";
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
@@ -27929,15 +28061,15 @@ function getInitialAutoHideState() {
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = useState61(initial.state);
+  const [state, setState] = useState62(initial.state);
   const stateRef = useRef68(initial.state);
-  const [atTop, setAtTop] = useState61(initial.atTop);
+  const [atTop, setAtTop] = useState62(initial.atTop);
   const atTopRef = useRef68(initial.atTop);
   const getTopOffsetRef = useRef68(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
   const lastScrollY = useRef68(Number.POSITIVE_INFINITY);
   const lastScrollHeight = useRef68(0);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
@@ -28010,16 +28142,16 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 
 // src/layouts/useMeasuredHeight.ts
 import { useResizeObserver as useResizeObserver12 } from "@react-aria/utils";
-import { useCallback as useCallback41, useLayoutEffect as useLayoutEffect13, useState as useState62 } from "react";
+import { useCallback as useCallback41, useLayoutEffect as useLayoutEffect14, useState as useState63 } from "react";
 function useMeasuredHeight(ref, enabled) {
-  const [height, setHeight] = useState62(0);
+  const [height, setHeight] = useState63(0);
   const syncElementHeight = useCallback41(() => {
     const el = ref.current;
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
   useResizeObserver12({ ref, onResize: syncElementHeight });
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
   return height;
@@ -28027,18 +28159,18 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 import { createContext as createContext16, useContext as useContext28 } from "react";
-import { jsx as jsx230 } from "react/jsx-runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
 var NavbarLayoutHeightContext = createContext16(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ jsx230(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx231(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return useContext28(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-import { jsx as jsx231, jsxs as jsxs121 } from "react/jsx-runtime";
-var __maybeInc31 = (inc) => {
+import { jsx as jsx232, jsxs as jsxs121 } from "react/jsx-runtime";
+var __maybeInc33 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -28066,10 +28198,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar66(zIndices.navbar)
+        "--zIndex": maybeCssVar68(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar66(__maybeInc31(innerWidth))
+        "--width": maybeCssVar68(__maybeInc33(innerWidth))
       }]
     }
   ) : (
@@ -28078,10 +28210,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": maybeCssVar66(zIndices.navbar)
+        "--zIndex": maybeCssVar68(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar66(__maybeInc31(innerWidth))
+        "--width": maybeCssVar68(__maybeInc33(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -28090,20 +28222,20 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = useMemo57(() => /* @__PURE__ */ jsx231(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ jsx231(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx231(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx231(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs121("div", { ...mergeProps39(void 0, cssVars, {
+  const navbarEl = useMemo57(() => /* @__PURE__ */ jsx232(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ jsx232(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsx232(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ jsx232(MobileSubNavProvider, { children: /* @__PURE__ */ jsxs121("div", { ...mergeProps39(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx231("div", { ref: spacerRef, ...mergeProps39(void 0, {
+    /* @__PURE__ */ jsx232("div", { ref: spacerRef, ...mergeProps39(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx231("div", { ref: navMetricsRef, ...mergeProps39(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ jsx231("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx232("div", { ref: navMetricsRef, ...mergeProps39(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ jsx232("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
 
@@ -28111,8 +28243,8 @@ function NavbarLayout(props) {
 import { useCallback as useCallback42, useMemo as useMemo58, useRef as useRef70 } from "react";
 
 // src/components/Headers/BaseHeader.tsx
-import { trussProps as trussProps134 } from "@homebound/truss/runtime";
-import { jsx as jsx232, jsxs as jsxs122 } from "react/jsx-runtime";
+import { trussProps as trussProps135 } from "@homebound/truss/runtime";
+import { jsx as jsx233, jsxs as jsxs122 } from "react/jsx-runtime";
 function BaseHeader(props) {
   const {
     title,
@@ -28124,7 +28256,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs122("header", { ...tid, ...trussProps134({
+  return /* @__PURE__ */ jsxs122("header", { ...tid, ...trussProps135({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -28138,7 +28270,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs122("div", { ...trussProps134({
+    /* @__PURE__ */ jsxs122("div", { ...trussProps135({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28153,8 +28285,8 @@ function BaseHeader(props) {
       }
     }), children: [
       /* @__PURE__ */ jsxs122("div", { className: "mw0", children: [
-        breadcrumbs && /* @__PURE__ */ jsx232(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx232("h1", { ...tid.title, ...trussProps134({
+        breadcrumbs && /* @__PURE__ */ jsx233(Breadcrumbs, { ...breadcrumbs }),
+        /* @__PURE__ */ jsx233("h1", { ...tid.title, ...trussProps135({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -28163,22 +28295,27 @@ function BaseHeader(props) {
           }]
         }), children: title })
       ] }),
-      /* @__PURE__ */ jsx232("div", { className: "fs0", children: rightSlot })
+      /* @__PURE__ */ jsx233("div", { className: "fs0", children: rightSlot })
     ] }),
     bottomSlot
   ] });
 }
 
 // src/components/Headers/PageHeader.tsx
-import { trussProps as trussProps135 } from "@homebound/truss/runtime";
-import { jsx as jsx233 } from "react/jsx-runtime";
+import { trussProps as trussProps136 } from "@homebound/truss/runtime";
+import { Fragment as Fragment51, jsx as jsx234, jsxs as jsxs123 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
+    actions,
+    rightSlot,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx233(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx233("div", { ...trussProps135(pageContentPaddingX), children: /* @__PURE__ */ jsx233(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx234(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs123(Fragment51, { children: [
+    rightSlot,
+    actions && actions.length > 0 && /* @__PURE__ */ jsx234(HeaderActions, { actions, collapseOnSm: true })
+  ] }), bottomSlot: tabs && /* @__PURE__ */ jsx234("div", { ...trussProps136(pageContentPaddingX), children: /* @__PURE__ */ jsx234(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28187,9 +28324,9 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
-import { jsx as jsx234, jsxs as jsxs123 } from "react/jsx-runtime";
-var __maybeInc32 = (inc) => {
+import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+import { jsx as jsx235, jsxs as jsxs124 } from "react/jsx-runtime";
+var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -28219,103 +28356,46 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar67(__maybeInc32(headerLeft))
+      "--left": maybeCssVar69(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar67(__maybeInc32(headerWidth))
+      "--width": maybeCssVar69(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar69(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar67(__maybeInc32(headerLeft))
+      "--left": maybeCssVar69(__maybeInc34(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar67(__maybeInc32(headerWidth))
+      "--width": maybeCssVar69(__maybeInc34(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": maybeCssVar67(zIndices.pageStickyHeader)
+      "--zIndex": maybeCssVar69(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = useMemo58(() => /* @__PURE__ */ jsx234(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx234(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs123("div", { ...mergeProps40(void 0, cssVars, {
+  const pageHeaderEl = useMemo58(() => /* @__PURE__ */ jsx235(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ jsx235(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs124("div", { ...mergeProps40(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ jsx234("div", { ref: spacerRef, ...mergeProps40(void 0, {
+    /* @__PURE__ */ jsx235("div", { ref: spacerRef, ...mergeProps40(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ jsx234("div", { ref: headerMetricsRef, ...mergeProps40(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx234("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ jsx235("div", { ref: headerMetricsRef, ...mergeProps40(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ jsx235("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 
-// src/layouts/Workflow/JumpLinksRail.tsx
-import { trussProps as trussProps136, maybeCssVar as maybeCssVar68 } from "@homebound/truss/runtime";
-import { jsx as jsx235 } from "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__ */ jsx235("nav", { ...trussProps136({
-    display: "df",
-    flexDirection: "fdc",
-    flexShrink: "fs0",
-    width: ["w_var", {
-      "--width": `${jumpLinksRailWidthPx}px`
-    }],
-    position: "sticky",
-    alignSelf: "asfs",
-    top: ["top_var", {
-      "--top": maybeCssVar68(__maybeInc33(stickyNavAndHeaderOffset()))
-    }]
-  }), ...tid, children: links.map((link) => /* @__PURE__ */ jsx235(JumpLink, { label: link.label, href: `#${link.id}`, active: link.id === activeId, ...tid.link }, link.id)) });
-}
-
-// src/layouts/Workflow/useActiveJumpLink.ts
-import { useLayoutEffect as useLayoutEffect14, useState as useState63 } from "react";
-var activationLeadPx = 120;
-function useActiveJumpLink(sectionIds) {
-  const idsKey = sectionIds.join("\0");
-  const [activeId, setActiveId] = useState63(sectionIds[0]);
-  useLayoutEffect14(() => {
-    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
 import { useLayoutEffect as useLayoutEffect15, useRef as useRef72 } from "react";
 
@@ -28379,7 +28459,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-import { jsx as jsx238, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs125 } from "react/jsx-runtime";
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -28397,9 +28477,9 @@ function WorkflowActions(props) {
     sm: isMobile
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
-  return /* @__PURE__ */ jsxs124("div", { className: "df aic jcsb sm_w100", children: [
+  return /* @__PURE__ */ jsxs125("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ jsx238("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx238(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ jsxs124("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ jsxs125("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ jsx238(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx238(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
       isLastStep ? /* @__PURE__ */ jsx238(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx238(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
@@ -28410,9 +28490,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps137, mergeProps as mergeProps41, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
-import { jsx as jsx239, jsxs as jsxs125 } from "react/jsx-runtime";
-var __maybeInc34 = (inc) => {
+import { trussProps as trussProps137, mergeProps as mergeProps41, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
+import { jsx as jsx239, jsxs as jsxs126 } from "react/jsx-runtime";
+var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -28460,8 +28540,8 @@ function WorkflowPageLayout(props) {
       }
     };
   }, [showFooter]);
-  return /* @__PURE__ */ jsxs125(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs125("div", { ...mergeProps41(void 0, cssVars, {
+  return /* @__PURE__ */ jsxs126(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ jsxs126("div", { ...mergeProps41(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
@@ -28470,13 +28550,13 @@ function WorkflowPageLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar69(__maybeInc34(headerWidth))
+          "--width": maybeCssVar70(__maybeInc35(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar69(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar70(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar69(__maybeInc34(outerTop))
+          "--top": maybeCssVar70(__maybeInc35(outerTop))
         }]
       }), ...tid.header, children: /* @__PURE__ */ jsx239(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }),
       /* @__PURE__ */ jsx239("div", { ...trussProps137({
@@ -28491,7 +28571,7 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar69(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar70(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children }),
@@ -28506,13 +28586,13 @@ function WorkflowPageLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar69(__maybeInc34(headerWidth))
+            "--width": maybeCssVar70(__maybeInc35(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar69(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar70(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -28535,37 +28615,25 @@ function WorkflowPageLayout(props) {
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-import { jsx as jsx240, jsxs as jsxs126 } from "react/jsx-runtime";
+import { jsx as jsx240 } from "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__ */ jsx240(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ jsxs126("div", { className: "df w100", children: [
-    showRail && /* @__PURE__ */ jsx240(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
-    /* @__PURE__ */ jsx240("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ jsx240(FormSectionLayout, { ...form, aiMode }) })
-  ] }) });
+  return /* @__PURE__ */ jsx240(
+    WorkflowPageLayout,
+    {
+      ...tid,
+      ...headerProps,
+      aiMode,
+      isDirty,
+      onCancel,
+      onSaveAndExit,
+      completeLabel,
+      onComplete,
+      primaryDisabled: !isValid,
+      children
+    }
+  );
 }
 
 // src/layouts/Workflow/StepperLayout.tsx