@homebound/beam 3.102.0 → 3.104.0

package/dist/index.js

@@ -8163,6 +8163,34 @@ function InlineLabel({
   ] });
 }
 
+// src/components/ProposedValue.tsx
+import { trussProps as trussProps20 } from "@homebound/truss/runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+function ProposedValue(props) {
+  const {
+    original,
+    proposed
+  } = props;
+  const tid = useTestIds(props, "proposedValue");
+  return /* @__PURE__ */ jsxs13("span", { ...tid, children: [
+    original && /* @__PURE__ */ jsxs13(Fragment7, { children: [
+      /* @__PURE__ */ jsx27("span", { ...trussProps20({
+        textDecoration: "tdlt",
+        color: ["color_var", {
+          "--color": "var(--b-on-surface-muted)"
+        }]
+      }), ...tid.original, children: original }),
+      " "
+    ] }),
+    /* @__PURE__ */ jsx27("span", { ...trussProps20({
+      fontWeight: "fw6",
+      color: ["color_var", {
+        "--color": "var(--b-ai-field-fg)"
+      }]
+    }), ...tid.proposed, children: proposed })
+  ] });
+}
+
 // src/components/Table/components/Row.tsx
 import { observer } from "mobx-react";
 import React7, { useCallback as useCallback8, useContext as useContext12, useRef as useRef11 } from "react";
@@ -8171,10 +8199,10 @@ import { mergeProps as mergeProps5 } from "react-aria";
 // src/components/Table/components/cell.tsx
 import { Link as Link2 } from "react-router-dom";
 import { mergeProps as mergeProps4 } from "@homebound/truss/runtime";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ jsx27(Cell, { ...mergeProps4(classNames, void 0, {
+  return /* @__PURE__ */ jsx28(Cell, { ...mergeProps4(classNames, void 0, {
     ...css2,
     ...{
       cursor: "cursor_default"
@@ -8185,7 +8213,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ jsx27(Cell, { ...mergeProps4(classNames, void 0, {
+  return /* @__PURE__ */ jsx28(Cell, { ...mergeProps4(classNames, void 0, {
     ...css2
   }), ...as === "table" && {
     colSpan
@@ -8194,15 +8222,15 @@ var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyl
 var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
-    return /* @__PURE__ */ jsx27("td", { ...mergeProps4(classNames, void 0, {
+    return /* @__PURE__ */ jsx28("td", { ...mergeProps4(classNames, void 0, {
       ...css2
-    }), colSpan, children: /* @__PURE__ */ jsx27(Link2, { to, ...mergeProps4(navLink, void 0, {
+    }), colSpan, children: /* @__PURE__ */ jsx28(Link2, { to, ...mergeProps4(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset",
       display: "db"
     }), children: content }) }, key);
   }
-  return /* @__PURE__ */ jsx27(Link2, { to, ...mergeProps4(`${navLink} ${classNames}`, void 0, {
+  return /* @__PURE__ */ jsx28(Link2, { to, ...mergeProps4(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
       color: "color_unset"
@@ -8212,7 +8240,7 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ jsx27(Cell, { ...mergeProps4(classNames, void 0, {
+  return /* @__PURE__ */ jsx28(Cell, { ...mergeProps4(classNames, void 0, {
     ...css2
   }), onClick: (e) => {
     rowStyle.onClick(row, api);
@@ -8224,8 +8252,8 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 
 // src/components/Table/components/ColumnResizeHandle.tsx
 import { useCallback as useCallback7, useContext as useContext10, useEffect as useEffect7, useRef as useRef10, useState as useState11 } from "react";
-import { trussProps as trussProps20, maybeCssVar as maybeCssVar10 } from "@homebound/truss/runtime";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+import { trussProps as trussProps21, maybeCssVar as maybeCssVar10 } from "@homebound/truss/runtime";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function findScrollableParent(element) {
   if (!element) return null;
   let parent = element.parentElement;
@@ -8388,8 +8416,8 @@ function ColumnResizeHandle({
       document.body.style.userSelect = "";
     };
   }, []);
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    /* @__PURE__ */ jsx28("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...trussProps20({
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    /* @__PURE__ */ jsx29("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...trussProps21({
       position: "absolute",
       top: "top0",
       bottom: "bottom0",
@@ -8406,7 +8434,7 @@ function ColumnResizeHandle({
         }]
       } : {}
     }), ...tid.handle, "data-column-id": columnId, "data-column-index": columnIndex }),
-    isDragging && guideLineX !== null && /* @__PURE__ */ jsx28("div", { ...trussProps20({
+    isDragging && guideLineX !== null && /* @__PURE__ */ jsx29("div", { ...trussProps21({
       position: "fixed",
       top: ["top_var", {
         "--top": `${guideLineTop}px`
@@ -8432,8 +8460,8 @@ function ColumnResizeHandle({
 
 // src/components/Table/components/KeptGroupRow.tsx
 import { useContext as useContext11 } from "react";
-import { trussProps as trussProps21, maybeCssVar as maybeCssVar11 } from "@homebound/truss/runtime";
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { trussProps as trussProps22, maybeCssVar as maybeCssVar11 } from "@homebound/truss/runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -8451,7 +8479,7 @@ function KeptGroupRow(props) {
     tableState
   } = useContext11(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
-  return /* @__PURE__ */ jsx29(CellTag, { ...trussProps21({
+  return /* @__PURE__ */ jsx30(CellTag, { ...trussProps22({
     ...style.cellCss,
     ...style.betweenRowsCss,
     ...isLastBodyRow && style.lastRowCellCss,
@@ -8466,10 +8494,10 @@ function KeptGroupRow(props) {
     }
   }), ...as === "table" ? {
     colSpan
-  } : {}, children: /* @__PURE__ */ jsxs14("div", { className: "df aic gap_12px", children: [
-    /* @__PURE__ */ jsx29("div", { className: "w_38px df jcc", children: /* @__PURE__ */ jsx29(CollapseToggle, { row, compact: true }) }),
-    /* @__PURE__ */ jsxs14("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ jsx29(Icon, { icon: "infoCircle", inc: 2 }),
+  } : {}, children: /* @__PURE__ */ jsxs15("div", { className: "df aic gap_12px", children: [
+    /* @__PURE__ */ jsx30("div", { className: "w_38px df jcc", children: /* @__PURE__ */ jsx30(CollapseToggle, { row, compact: true }) }),
+    /* @__PURE__ */ jsxs15("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ jsx30(Icon, { icon: "infoCircle", inc: 2 }),
       `${numHiddenSelectedRows} selected ${pluralize(numHiddenSelectedRows, "row")} hidden due to filters`
     ] })
   ] }) });
@@ -8950,8 +8978,8 @@ function resolveStyles(style) {
 
 // src/components/Table/components/Row.tsx
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
-import { trussProps as trussProps22, mergeProps as mergeProps_12, maybeCssVar as maybeCssVar_12 } from "@homebound/truss/runtime";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { trussProps as trussProps23, mergeProps as mergeProps_12, maybeCssVar as maybeCssVar_12 } from "@homebound/truss/runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -9123,12 +9151,12 @@ function RowImpl(props) {
   const ref = useRef11(null);
   const dragOverCallback = useCallback8((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = useDebouncedCallback2(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ jsx30(RowTag, { ...mergeProps_12(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx30(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ jsx31(RowTag, { ...mergeProps_12(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx31(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
       expandColumnHidden = true;
-      return /* @__PURE__ */ jsx30(Fragment8, {});
+      return /* @__PURE__ */ jsx31(Fragment9, {});
     }
     const numExpandedColumns = isExpanded ? tableState.numberOfExpandedChildren(maybeExpandedColumn.id) ? (
       // Subtract 1 if the column is hidden on expand, since we're not rendering it.
@@ -9309,24 +9337,24 @@ function RowImpl(props) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
-      const cellElementWithHandle = React7.cloneElement(cellElement, mergeProps5(cellElement.props, trussProps22({
+      const cellElementWithHandle = React7.cloneElement(cellElement, mergeProps5(cellElement.props, trussProps23({
         ...!maybeSticky && {
           position: "relative"
         }
       }), {
-        children: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+        children: /* @__PURE__ */ jsxs16(Fragment9, { children: [
           cellElement.props.children,
-          /* @__PURE__ */ jsx30(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
+          /* @__PURE__ */ jsx31(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
         ] })
       }));
       return cellElementWithHandle;
     }
     return cellElement;
   }) });
-  return row.draggable ? /* @__PURE__ */ jsx30(
+  return row.draggable ? /* @__PURE__ */ jsx31(
     "div",
     {
-      ...trussProps22(containerCss),
+      ...trussProps23(containerCss),
       onDrop: (evt) => onDrop?.(row, evt),
       onDragEnter: (evt) => onDragEnter?.(row, evt),
       onDragOver: (evt) => {
@@ -9335,7 +9363,7 @@ function RowImpl(props) {
       },
       children: RowContent()
     }
-  ) : /* @__PURE__ */ jsx30(Fragment8, { children: RowContent() });
+  ) : /* @__PURE__ */ jsx31(Fragment9, { children: RowContent() });
 }
 var Row = observer(RowImpl);
 var BorderHoverParent = "beam-bhp";
@@ -9365,8 +9393,8 @@ function useLabelSuffix(required, readOnly) {
 
 // src/inputs/ErrorMessage.tsx
 import { VisuallyHidden as VisuallyHidden2 } from "react-aria";
-import { trussProps as trussProps23 } from "@homebound/truss/runtime";
-import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { trussProps as trussProps24 } from "@homebound/truss/runtime";
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function ErrorMessage(props) {
   const {
     id,
@@ -9374,7 +9402,7 @@ function ErrorMessage(props) {
     hidden = false,
     ...others
   } = props;
-  const errorEl = errorMsg ? /* @__PURE__ */ jsxs16("div", { ...trussProps23({
+  const errorEl = errorMsg ? /* @__PURE__ */ jsxs17("div", { ...trussProps24({
     color: ["color_var", {
       "--color": "var(--b-danger)"
     }],
@@ -9384,38 +9412,10 @@ function ErrorMessage(props) {
     display: "df",
     marginTop: "mt_4px"
   }), children: [
-    /* @__PURE__ */ jsx31("span", { className: "fs0", children: /* @__PURE__ */ jsx31(Icon, { icon: "error" }) }),
-    /* @__PURE__ */ jsx31("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
-  ] }) : /* @__PURE__ */ jsx31(Fragment9, {});
-  return hidden ? /* @__PURE__ */ jsx31(VisuallyHidden2, { children: errorEl }) : errorEl;
-}
-
-// src/inputs/internal/ProposedValue.tsx
-import { trussProps as trussProps24 } from "@homebound/truss/runtime";
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
-function ProposedValue(props) {
-  const {
-    original,
-    proposed
-  } = props;
-  const tid = useTestIds(props, "proposedValue");
-  return /* @__PURE__ */ jsxs17("span", { ...tid, children: [
-    original && /* @__PURE__ */ jsxs17(Fragment10, { children: [
-      /* @__PURE__ */ jsx32("span", { ...trussProps24({
-        textDecoration: "tdlt",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface-muted)"
-        }]
-      }), ...tid.original, children: original }),
-      " "
-    ] }),
-    /* @__PURE__ */ jsx32("span", { ...trussProps24({
-      fontWeight: "fw6",
-      color: ["color_var", {
-        "--color": "var(--b-ai-field-fg)"
-      }]
-    }), ...tid.proposed, children: proposed })
-  ] });
+    /* @__PURE__ */ jsx32("span", { className: "fs0", children: /* @__PURE__ */ jsx32(Icon, { icon: "error" }) }),
+    /* @__PURE__ */ jsx32("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
+  ] }) : /* @__PURE__ */ jsx32(Fragment10, {});
+  return hidden ? /* @__PURE__ */ jsx32(VisuallyHidden2, { children: errorEl }) : errorEl;
 }
 
 // src/inputs/utils.ts
@@ -17601,6 +17601,7 @@ function TableCardView(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "tableCardView");
+  const titleText = typeof title === "string" ? title : title.proposed;
   const action = to || onClick;
   const progressValue = useMemo27(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
   const shownFooter = shownInteractiveFooter(interactiveFooter);
@@ -17613,7 +17614,7 @@ function TableCardView(props) {
   } = useFocusRing11();
   const actionAttrs = {
     ...tid.action,
-    "aria-label": title,
+    "aria-label": titleText,
     // `getButtonOrLink` renders its `<button>` without a type, which would default to submit inside a form.
     type: typeof action === "string" ? void 0 : "button",
     ...trussProps63(contentStyles),
@@ -17627,7 +17628,7 @@ function TableCardView(props) {
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: "bbw_1px",
       borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-default)"
+        "--borderColor": maybeCssVar31(aiMode ? "--b-ai-field-bg" /* AiFieldBg */ : "--b-field-border-default" /* FieldBorderDefault */)
       }],
       overflow: "oh",
       borderRadius: "borderRadius_12px_12px_0_0"
@@ -17638,7 +17639,7 @@ function TableCardView(props) {
         objectFit: ["objectFit_var", {
           "--objectFit": maybeCssVar31(imageFit)
         }]
-      }), src: imgSrc, alt: title, loading: "lazy", ...tid.image }),
+      }), src: imgSrc, alt: titleText, loading: "lazy", ...tid.image }),
       status && /* @__PURE__ */ jsx97("div", { className: "absolute top1 left1 df", ...tid.status, children: /* @__PURE__ */ jsx97(Tag, { ...status }) })
     ] }),
     /* @__PURE__ */ jsxs51("div", { ...trussProps63({
@@ -17662,8 +17663,8 @@ function TableCardView(props) {
           "--color": "var(--b-on-surface)"
         }]
       }), ...tid.eyebrow, children: [
-        /* @__PURE__ */ jsx97("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: leftEyebrow }),
-        rightEyebrow && /* @__PURE__ */ jsx97("span", { className: "fs0", ...tid.rightEyebrow, children: rightEyebrow })
+        /* @__PURE__ */ jsx97("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: renderMaybeProposed(leftEyebrow, tid.leftEyebrowProposal) }),
+        rightEyebrow && /* @__PURE__ */ jsx97("span", { className: "fs0", ...tid.rightEyebrow, children: renderMaybeProposed(rightEyebrow, tid.rightEyebrowProposal) })
       ] }),
       /* @__PURE__ */ jsxs51("div", { className: "dif w100 jcsb aic", children: [
         /* @__PURE__ */ jsx97("h4", { ...trussProps63({
@@ -17678,7 +17679,7 @@ function TableCardView(props) {
           color: ["color_var", {
             "--color": "var(--b-on-surface)"
           }]
-        }), ...tid.title, children: title }),
+        }), ...tid.title, children: renderMaybeProposed(title, tid.titleProposal) }),
         (badge || badgeTags?.length) && /* @__PURE__ */ jsxs51("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
           badge && /* @__PURE__ */ jsx97("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
           badgeTags?.map((tag) => /* @__PURE__ */ jsx97(Tag, { ...tag }, tag.text))
@@ -17697,19 +17698,19 @@ function TableCardView(props) {
       } : {}
     }), children: [
       data.length > 0 && /* @__PURE__ */ jsxs51("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
-        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1", children: col1.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ jsxs51("dt", { children: [
+        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ jsxs51("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ jsx97("dd", { children: d.value })
+          /* @__PURE__ */ jsx97("dd", { className: "mw0", children: d.value })
         ] }, d.label)) }),
-        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1", children: col2.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ jsxs51("dt", { children: [
+        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ jsxs51("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ jsx97("dd", { children: d.value })
+          /* @__PURE__ */ jsx97("dd", { className: "mw0", children: d.value })
         ] }, d.label)) })
       ] }),
       progress !== void 0 && /* @__PURE__ */ jsxs51("div", { className: "df aic gap1 fs_10px lh_14px", children: [
@@ -17718,16 +17719,16 @@ function TableCardView(props) {
           height: "h_8px",
           borderRadius: "br4",
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": "var(--b-surface-subtle)"
+            "--backgroundColor": maybeCssVar31(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
           }]
-        }), children: /* @__PURE__ */ jsx97("div", { ...trussProps63({
+        }), ...tid.progressTrack, children: /* @__PURE__ */ jsx97("div", { ...trussProps63({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
             "--width": maybeCssVar31(__maybeInc13(`${progressValue}%`))
           }]
-        }) }) }),
+        }), ...tid.progressFill }) }),
         /* @__PURE__ */ jsxs51("span", { ...tid.progressValue, children: [
           progressValue,
           "%"
@@ -17760,6 +17761,13 @@ function TableCardView(props) {
       boxShadow: "bshFocus",
       borderStyle: "bss",
       borderWidth: "bw1"
+    } : {},
+    // Must follow the focus ring, whose `ba` would reset the AI border back to 1px.
+    ...aiMode ? {
+      borderWidth: "bw2",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-ai-field-fg)"
+      }]
     } : {}
   }), ...tid, children: [
     action ? getButtonOrLink(content, action, actionAttrs) : (
@@ -17821,6 +17829,9 @@ function Thumbnail(props) {
     pointerEvents: "after_a_pointerEvents_none"
   }), children: /* @__PURE__ */ jsx97("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ jsx97("img", { className: "w100 h100 objectFit_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
+function renderMaybeProposed(value, tid) {
+  return typeof value === "string" || value === void 0 ? value : /* @__PURE__ */ jsx97(ProposedValue, { ...value, ...tid });
+}
 function clampProgress(value) {
   if (process.env.NODE_ENV !== "production" && (value < 0 || value > 100)) {
     console.warn(`[TableCard] progress value ${value} is outside the expected range [0, 100] and will be clamped.`);
@@ -27923,8 +27934,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,
@@ -27933,10 +28008,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",
@@ -27948,20 +28036,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) {
@@ -27971,15 +28072,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;
@@ -28052,16 +28153,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;
@@ -28069,18 +28170,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) {
@@ -28108,10 +28209,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))
       }]
     }
   ) : (
@@ -28120,10 +28221,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"
     }
@@ -28132,20 +28233,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 })
   ] }) }) }) });
 }
 
@@ -28153,8 +28254,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,
@@ -28166,7 +28267,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",
@@ -28180,7 +28281,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs122("div", { ...trussProps134({
+    /* @__PURE__ */ jsxs122("div", { ...trussProps135({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28195,8 +28296,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",
@@ -28205,15 +28306,15 @@ 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 { Fragment as Fragment51, jsx as jsx233, jsxs as jsxs123 } 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,
@@ -28222,10 +28323,10 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx233(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs123(Fragment51, { children: [
+  return /* @__PURE__ */ jsx234(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs123(Fragment51, { children: [
     rightSlot,
-    actions && actions.length > 0 && /* @__PURE__ */ jsx233(HeaderActions, { actions, collapseOnSm: true })
-  ] }), bottomSlot: tabs && /* @__PURE__ */ jsx233("div", { ...trussProps135(pageContentPaddingX), children: /* @__PURE__ */ jsx233(Tabs, { ...tabs, ...tid.tabs }) }) });
+    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
@@ -28234,9 +28335,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 jsxs124 } 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) {
@@ -28266,103 +28367,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__ */ jsxs124("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";
 
@@ -28457,9 +28501,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps137, mergeProps as mergeProps41, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
+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 __maybeInc34 = (inc) => {
+var __maybeInc35 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -28517,13 +28561,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({
@@ -28538,7 +28582,7 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar69(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar70(documentScrollBodyMinHeight())
           }]
         }
       }), ...tid.body, children }),
@@ -28553,13 +28597,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",
@@ -28582,37 +28626,25 @@ function WorkflowPageLayout(props) {
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-import { jsx as jsx240, jsxs as jsxs127 } 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__ */ jsxs127("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
@@ -28798,6 +28830,7 @@ export {
   PinToggle,
   PresentationProvider,
   PreventBrowserScroll,
+  ProposedValue,
   RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField,
   ResponsiveGrid,