@homebound/beam 4.9.2 → 4.11.0

package/dist/index.js

@@ -5580,13 +5580,14 @@ function IconButton(props) {
   const isCircle = variant === "circle";
   const isOutline = variant === "outline";
   const styles = useMemo4(() => {
-    const variantKey = isCircle ? "circle" : isOutline ? "outline" : compact ? "compact" : "default";
     const {
       base,
       hover,
       focus,
       pressed
-    } = variantStyles[variantKey];
+    } = variantStyles(variant, {
+      compact
+    });
     return {
       ...iconButtonStylesReset,
       ...base,
@@ -5600,7 +5601,7 @@ function IconButton(props) {
         }]
       }
     };
-  }, [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, isPressing, bgColor, forceFocusStyles]);
+  }, [isHovered, isFocusVisible, isDisabled, compact, variant, isPressing, bgColor, forceFocusStyles]);
   const iconColor = isCircle ? circleIconColor : defaultIconColor;
   const buttonAttrs = {
     ...testIds,
@@ -5637,36 +5638,93 @@ var iconButtonStylesDisabled = {
     "--backgroundColor": "var(--b-surface-disabled)"
   }]
 };
-var variantStyles = {
-  default: {
-    base: {
-      height: "h_28px",
-      width: "w_28px",
-      borderRadius: "br8",
-      borderWidth: "bw2"
-    },
-    hover: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
-      }]
-    },
-    focus: {
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-focus)"
-      }]
-    },
-    pressed: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
-      }]
-    }
-  },
-  compact: {
-    base: {
+function variantStyles(variant, {
+  compact
+}) {
+  if (variant === "circle") {
+    return {
+      base: {
+        borderRadius: "br100",
+        height: ["sq_var", {
+          "--height": `${compact ? 32 : 48}px`
+        }],
+        width: ["sq_var", {
+          "--width": `${compact ? 32 : 48}px`
+        }],
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-default)"
+        }],
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        display: "df",
+        justifyContent: "jcc",
+        alignItems: "aic",
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface-raised)"
+        }]
+      },
+      hover: {
+        backgroundColor: "bgBlue100",
+        borderColor: "bcBlue200"
+      },
+      focus: {
+        backgroundColor: "bgBlue100",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-focus)"
+        }]
+      },
+      pressed: {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-neutral-fill-pressed)"
+        }],
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-neutral-fill-pressed)"
+        }]
+      }
+    };
+  }
+  if (variant === "outline") {
+    return {
+      base: {
+        borderRadius: "br8",
+        width: "w_42px",
+        height: "h_40px",
+        borderColor: "bcGray300",
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        display: "df",
+        justifyContent: "jcc",
+        alignItems: "aic",
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface-raised)"
+        }]
+      },
+      hover: {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface-raised-hover)"
+        }]
+      },
+      focus: {
+        boxShadow: "bshFocus"
+      },
+      pressed: {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface-raised-pressed)"
+        }]
+      }
+    };
+  }
+  return {
+    base: compact ? {
       height: "h_18px",
       width: "w_18px",
       borderRadius: "br4",
       borderWidth: "bw1"
+    } : {
+      height: "h_28px",
+      width: "w_28px",
+      borderRadius: "br8",
+      borderWidth: "bw2"
     },
     hover: {
       backgroundColor: ["bgColor_var", {
@@ -5683,71 +5741,8 @@ var variantStyles = {
         "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
       }]
     }
-  },
-  circle: {
-    // Blue100/200 hover fills have no semantic tokens — keep palette for those.
-    base: {
-      borderRadius: "br100",
-      height: "h_48px",
-      width: "w_48px",
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-default)"
-      }],
-      borderStyle: "bss",
-      borderWidth: "bw1",
-      display: "df",
-      justifyContent: "jcc",
-      alignItems: "aic"
-    },
-    hover: {
-      backgroundColor: "bgBlue100",
-      borderColor: "bcBlue200"
-    },
-    focus: {
-      backgroundColor: "bgBlue100",
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-focus)"
-      }]
-    },
-    pressed: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-neutral-fill-pressed)"
-      }],
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-neutral-fill-pressed)"
-      }]
-    }
-  },
-  outline: {
-    base: {
-      borderRadius: "br8",
-      width: "w_42px",
-      height: "h_40px",
-      borderColor: "bcGray300",
-      borderStyle: "bss",
-      borderWidth: "bw1",
-      display: "df",
-      justifyContent: "jcc",
-      alignItems: "aic",
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface-raised)"
-      }]
-    },
-    hover: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface-raised-hover)"
-      }]
-    },
-    focus: {
-      boxShadow: "bshFocus"
-    },
-    pressed: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface-raised-pressed)"
-      }]
-    }
-  }
-};
+  };
+}
 
 // src/components/Table/utils/TableState.ts
 import { makeAutoObservable as makeAutoObservable4, observableRef as observableRef3, reaction as reaction4 } from "mobx";
@@ -5964,6 +5959,8 @@ var zIndices = {
   scrollShadow: 50,
   // Document-scroll detail pane (DocumentScrollOverlayRightPaneLayout) — above table sticky chrome, below page sticky headers.
   rightPane: 60,
+  // Workflow floating right-pane triggers — above the pane, below sticky headers.
+  rightPaneTriggers: 65,
   pageStickyHeader: 70,
   // Sticky mobile action footer (workflow layouts) — same tier as pageStickyHeader; header and footer never overlap on screen.
   pageStickyFooter: 70,
@@ -10714,6 +10711,8 @@ function TextFieldBase(props) {
   const compactFieldHeight = 32;
   const showProposal = proposedValue !== void 0;
   const showOriginal = originalValue !== void 0 && originalValue !== "";
+  const originalBelow = showOriginal && !inputProps.readOnly && !compound ? originalValue : void 0;
+  const showErrorAndHelper = alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly;
   const [bgColor, hoverBgColor, disabledBgColor] = showProposal ? ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */] : inputStylePalette ? getInputStylePalette(inputStylePalette) : borderOnHover ? (
     // Use transparent backgrounds to blend with the table row hover color
     ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */]
@@ -11039,21 +11038,6 @@ function TextFieldBase(props) {
             children: [
               labelStyle === "inline" && label && /* @__PURE__ */ jsx36(InlineLabel, { multiline, labelProps, label, ...tid.label }),
               startAdornment && /* @__PURE__ */ jsx36("span", { className: "df aic asc fs0 br4 pr1", children: startAdornment }),
-              showOriginal && /* @__PURE__ */ jsx36("span", { ...trussProps24({
-                display: "df",
-                alignItems: "aic",
-                flexShrink: "fs0",
-                paddingRight: "pr1",
-                textDecoration: "tdlt",
-                color: ["color_var", {
-                  "--color": "var(--b-on-surface-muted)"
-                }],
-                ...multiline ? {
-                  alignSelf: "asfs",
-                  paddingTop: "pt_11px",
-                  paddingBottom: "pb_11px"
-                } : {}
-              }), ...tid.originalValue, children: originalValue }),
               unfocusedPlaceholder && /* @__PURE__ */ jsx36(
                 "div",
                 {
@@ -11103,18 +11087,40 @@ function TextFieldBase(props) {
           }
         )
       }),
-      labelStyle !== "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly) && /* @__PURE__ */ jsxs20(Fragment13, { children: [
-        errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-        helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+      labelStyle !== "left" && /* @__PURE__ */ jsxs20(Fragment13, { children: [
+        originalBelow && /* @__PURE__ */ jsx36(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+        showErrorAndHelper && /* @__PURE__ */ jsxs20(Fragment13, { children: [
+          errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+          helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+        ] })
       ] })
     ] }),
-    labelStyle === "left" && (alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
+    labelStyle === "left" && (originalBelow || alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly && (errorMsg && !errorInTooltip || helperText)) && // Reduces the margin between the error/helper text and input field
     /* @__PURE__ */ jsxs20("div", { className: "mt_neg8px", children: [
-      errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
-      helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+      originalBelow && /* @__PURE__ */ jsx36(OriginalValue, { originalValue: originalBelow, ...tid.originalValue }),
+      showErrorAndHelper && /* @__PURE__ */ jsxs20(Fragment13, { children: [
+        errorMsg && !errorInTooltip && /* @__PURE__ */ jsx36(ErrorMessage, { id: errorMessageId, errorMsg, hidden: hideErrorMessage, ...tid.errorMsg }),
+        helperText && /* @__PURE__ */ jsx36(HelperText, { helperText, ...tid.helperText })
+      ] })
     ] })
   ] });
 }
+function OriginalValue(props) {
+  const {
+    originalValue,
+    ...others
+  } = props;
+  return /* @__PURE__ */ jsx36("div", { ...trussProps24({
+    color: ["color_var", {
+      "--color": "var(--b-text-helper)"
+    }],
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    marginTop: "mt_4px",
+    textDecoration: "tdlt"
+  }), ...others, children: originalValue });
+}
 function getInputStylePalette(inputStylePalette) {
   switch (inputStylePalette) {
     case "success":
@@ -23567,50 +23573,65 @@ function DocumentScrollRightPane({
     height: paneBounds.heightPx,
     maxHeight: paneBounds.heightPx
   } : void 0;
-  const pane = /* @__PURE__ */ jsx168(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx168(motion3.div, { ref: paneRef, ...{
-    [rightPaneContentDataAttribute]: true
-  }, ...tid, ...mergeProps27(void 0, paneStyle, mobile ? {
-    position: "fixed",
-    right: "right0",
-    bottom: "bottom0",
-    left: "left0",
-    overflowY: "oya",
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }],
-    zIndex: ["z_var", {
-      "--zIndex": maybeCssVar47(zIndices.rightPaneMobile)
-    }]
-  } : {
-    position: "fixed",
-    right: "right0",
-    overflowY: "oya",
-    width: ["w_var", {
-      "--width": maybeCssVar47(__maybeInc20(paneWidthCss))
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }],
-    zIndex: ["z_var", {
-      "--zIndex": maybeCssVar47(zIndices.rightPane)
-    }],
-    borderLeftStyle: "bls_solid",
-    borderLeftWidth: "blw_1px",
-    borderColor: ["bc_var", {
-      "--borderColor": "var(--b-surface-separator)"
-    }]
-  }), initial: {
-    x: slideX
-  }, animate: {
-    x: 0
-  }, exit: {
-    x: slideX
-  }, transition: {
-    ease: "linear",
-    duration: 0.2
-  }, onAnimationComplete: (definition) => {
-    if (definition.x !== 0 && definition.x !== void 0) releaseAfterExit();
-  }, children: rightPaneContent }, "documentScrollRightPane") });
+  const pane = /* @__PURE__ */ jsx168(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx168(
+    motion3.div,
+    {
+      ref: paneRef,
+      ...{
+        [rightPaneContentDataAttribute]: true
+      },
+      ...tid,
+      ...mergeProps27(void 0, paneStyle, mobile ? {
+        position: "fixed",
+        right: "right0",
+        bottom: "bottom0",
+        left: "left0",
+        overflowY: "oya",
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": maybeCssVar47(zIndices.rightPaneMobile)
+        }]
+      } : {
+        position: "fixed",
+        right: "right0",
+        overflowY: "oya",
+        width: ["w_var", {
+          "--width": maybeCssVar47(__maybeInc20(paneWidthCss))
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": maybeCssVar47(zIndices.rightPane)
+        }],
+        borderLeftStyle: "bls_solid",
+        borderLeftWidth: "blw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }]
+      }),
+      initial: {
+        x: slideX
+      },
+      animate: {
+        x: 0
+      },
+      exit: {
+        x: slideX
+      },
+      transition: {
+        duration: 0.2,
+        ease: [0.4, 0, 0.2, 1]
+      },
+      onAnimationComplete: (definition) => {
+        if (definition.x !== 0 && definition.x !== void 0) releaseAfterExit();
+      },
+      children: rightPaneContent
+    },
+    "documentScrollRightPane"
+  ) });
   return createPortal6(pane, document.body);
 }
 
@@ -23708,7 +23729,8 @@ function DocumentScrollOverlayRightPaneLayout({
       }, {
         flexShrink: "fs0",
         flexGrow: "fg0",
-        height: "h1"
+        height: "h1",
+        transition: "transitionWidth"
       }), ...tid.spacer })
     ] }),
     /* @__PURE__ */ jsx170(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
@@ -23733,26 +23755,24 @@ function DocumentScrollOverlayRightPaneHost(props) {
     return waitForRightPaneExit(() => setKeepOverlayChrome(false));
   }, [isRightPaneOpen]);
   useLayoutEffect8(() => {
-    const layoutRoot = anchorRef.current;
     const spacer = spacerRef.current;
+    if (!spacer) return;
+    spacer.style.width = isRightPaneOpen ? paneWidthCss : "0px";
+  }, [isRightPaneOpen, paneWidthCss, spacerRef]);
+  useLayoutEffect8(() => {
+    const layoutRoot = anchorRef.current;
     if (!layoutRoot) return;
     const openPaneWidth = keepOverlayChrome ? paneWidthCss : "0px";
     const contentMin = keepOverlayChrome ? `${minDocumentScrollContentWidthPx}px` : "0px";
     layoutRoot.style.setProperty(beamRightPaneWidthVar, openPaneWidth);
     layoutRoot.style.setProperty(beamRightPaneContentMinVar, contentMin);
     document.documentElement.style.setProperty(beamFloatingRightOffsetVar, openPaneWidth);
-    if (spacer) {
-      spacer.style.width = openPaneWidth;
-    }
     return () => {
       layoutRoot.style.setProperty(beamRightPaneWidthVar, "0px");
       layoutRoot.style.setProperty(beamRightPaneContentMinVar, "0px");
       document.documentElement.style.setProperty(beamFloatingRightOffsetVar, "0px");
-      if (spacer) {
-        spacer.style.width = "0px";
-      }
     };
-  }, [anchorRef, keepOverlayChrome, paneWidthCss, spacerRef]);
+  }, [anchorRef, keepOverlayChrome, paneWidthCss]);
   return /* @__PURE__ */ jsx170(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
 }
 
@@ -24387,7 +24407,7 @@ function RightPaneLayout(props) {
         width: ["w_var", {
           "--width": maybeCssVar49(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
-        transition: "tsn_width_2s_linear",
+        transition: "transitionWidth",
         height: "h100",
         marginRight: "mr3",
         overflowX: "oxa"
@@ -24450,13 +24470,13 @@ function RightPaneLayout(props) {
             x: 0
           },
           transition: {
-            ease: "linear",
-            duration: 0.2
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1]
           },
           exit: {
             transition: {
-              ease: "linear",
-              duration: 0.2
+              duration: 0.2,
+              ease: [0.4, 0, 0.2, 1]
             },
             x: paneWidth
           },
@@ -24500,7 +24520,7 @@ function RightPanePanel(props) {
       flexShrink: "fs0"
     }), ...tid.header, children: [
       /* @__PURE__ */ jsx180("div", { className: "fw6 fz_16px lh_24px", children: title }),
-      withClose && /* @__PURE__ */ jsx180(IconButton, { icon: "x", label: "Close", onClick: closeRightPane, ...tid.close })
+      withClose && /* @__PURE__ */ jsx180(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
     ] }),
     /* @__PURE__ */ jsx180("div", { className: "fg1 mh0 oya pt2 pb2 pr2 pl2", ...tid.body, children })
   ] });
@@ -28935,10 +28955,74 @@ function WorkflowHeader(props) {
   );
 }
 
+// src/layouts/Workflow/RightPaneTriggers.tsx
+import { useCallback as useCallback44 } from "react";
+import { trussProps as trussProps137, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
+import { jsx as jsx237 } from "react/jsx-runtime";
+var __maybeInc36 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function WorkflowPageRightPaneTriggers(props) {
+  const {
+    triggers
+  } = props;
+  const {
+    sm: isMobile
+  } = useBreakpoint();
+  const {
+    isRightPaneOpen
+  } = useRightPane();
+  const {
+    openRightPane
+  } = useRightPaneActions();
+  const tid = useTestIds(props, "rightPaneTriggers");
+  const pageTriggerInsetPx = 24;
+  const onClick = useCallback44((trigger) => {
+    openRightPane({
+      content: /* @__PURE__ */ jsx237(RightPanePanel, { title: trigger.label, children: trigger.content })
+    });
+  }, [openRightPane]);
+  return /* @__PURE__ */ jsx237("div", { ...tid, "aria-hidden": isRightPaneOpen, ...isRightPaneOpen ? {
+    inert: true
+  } : {}, ...trussProps137({
+    ...{
+      display: "df",
+      alignItems: "aic",
+      gap: "gap2",
+      flexShrink: "fs0",
+      ...!isMobile ? {
+        transition: "transitionTransform",
+        flexDirection: "fdc"
+      } : {}
+    },
+    ...!isMobile && {
+      position: "fixed",
+      top: ["top_var", {
+        "--top": maybeCssVar70(__maybeInc36(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
+      }],
+      right: ["right_var", {
+        "--right": `${pageTriggerInsetPx}px`
+      }],
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar70(zIndices.rightPaneTriggers)
+      }]
+    },
+    // Desktop only — on `sm` the full-bleed pane covers the header slot.
+    ...!isMobile && (isRightPaneOpen ? {
+      transform: ["transform_var", {
+        "--transform": maybeCssVar70(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
+      }],
+      pointerEvents: "pe_none"
+    } : {
+      transform: "tf_translateX_0"
+    })
+  }), children: triggers.map((trigger) => /* @__PURE__ */ jsx237(IconButton, { icon: trigger.icon, label: trigger.label, variant: "circle", compact: isMobile, onClick: () => onClick(trigger), ...tid[trigger.icon] }, trigger.label)) });
+}
+
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
 import { useEffect as useEffect40, useRef as useRef74 } from "react";
 import { useBlocker } from "react-router-dom";
-import { jsx as jsx237 } from "react/jsx-runtime";
+import { jsx as jsx238 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
   const { isDirty, allowNavigation, onCancel } = options;
   const { openModal } = useModal();
@@ -28974,7 +29058,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx237(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
+      content: /* @__PURE__ */ jsx238(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -28986,7 +29070,7 @@ function UnsavedChangesNavigationModal(props) {
   useEffect40(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ jsx237(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ jsx238(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -28994,7 +29078,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-import { jsx as jsx238, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs128 } from "react/jsx-runtime";
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -29013,11 +29097,11 @@ function WorkflowActions(props) {
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ jsxs128("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__ */ jsx239("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx239(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
     /* @__PURE__ */ jsxs128("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 () => {
+      /* @__PURE__ */ jsx239(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ jsx239(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ jsx239(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx239(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
     ] })
@@ -29025,9 +29109,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-import { trussProps as trussProps137, mergeProps as mergeProps43, maybeCssVar as maybeCssVar70 } from "@homebound/truss/runtime";
-import { jsx as jsx239, jsxs as jsxs129 } from "react/jsx-runtime";
-var __maybeInc36 = (inc) => {
+import { trussProps as trussProps138, mergeProps as mergeProps43, maybeCssVar as maybeCssVar71 } from "@homebound/truss/runtime";
+import { jsx as jsx240, jsxs as jsxs129 } from "react/jsx-runtime";
+var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -29042,6 +29126,7 @@ function WorkflowPageLayout(props) {
     documentTitleSuffix,
     breadcrumbs,
     onCancel,
+    rightPaneTriggers,
     ...actionProps
   } = props;
   const tid = useTestIds(props, "workflowPageLayout");
@@ -29056,7 +29141,9 @@ function WorkflowPageLayout(props) {
     allowNavigation,
     onCancel
   });
-  const actions = /* @__PURE__ */ jsx239(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const actions = /* @__PURE__ */ jsx240(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const triggers = rightPaneTriggers ?? [];
+  const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ jsx240(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
   const headerMetricsRef = useRef75(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
@@ -29083,26 +29170,26 @@ function WorkflowPageLayout(props) {
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx239("div", { ...mergeProps43(void 0, {
+      /* @__PURE__ */ jsx240("div", { ...mergeProps43(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
         width: "w100"
-      }), children: /* @__PURE__ */ jsx239("div", { ref: headerMetricsRef, ...trussProps137({
+      }), children: /* @__PURE__ */ jsx240("div", { ref: headerMetricsRef, ...trussProps138({
         position: "fixed",
         left: "left0",
         width: ["w_var", {
-          "--width": maybeCssVar70(__maybeInc36(headerWidth))
+          "--width": maybeCssVar71(__maybeInc37(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": maybeCssVar70(zIndices.pageStickyHeader)
+          "--zIndex": maybeCssVar71(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": maybeCssVar70(__maybeInc36(outerTop))
+          "--top": maybeCssVar71(__maybeInc37(outerTop))
         }],
         transition: "transitionAll"
-      }), ...tid.header, children: /* @__PURE__ */ jsx239(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }) }),
-      /* @__PURE__ */ jsx239("div", { ...trussProps137({
+      }), ...tid.header, children: /* @__PURE__ */ jsx240(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
+      /* @__PURE__ */ jsx240("div", { ...trussProps138({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -29114,28 +29201,29 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": maybeCssVar70(documentScrollBodyMinHeight())
+            "--minHeight": maybeCssVar71(documentScrollBodyMinHeight())
           }]
         }
-      }), ...tid.body, children }),
-      showFooter && /* @__PURE__ */ jsx239("div", { ...trussProps137({
+      }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ jsx240(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
+      !isMobile && pageTriggers,
+      showFooter && /* @__PURE__ */ jsx240("div", { ...trussProps138({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx239("div", { ...trussProps137({
+      }), children: /* @__PURE__ */ jsx240("div", { ...trussProps138({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": maybeCssVar70(__maybeInc36(headerWidth))
+            "--width": maybeCssVar71(__maybeInc37(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": maybeCssVar70(zIndices.pageStickyFooter)
+            "--zIndex": maybeCssVar71(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -29153,12 +29241,12 @@ function WorkflowPageLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ jsx239(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ jsx240(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-import { jsx as jsx240 } from "react/jsx-runtime";
+import { jsx as jsx241 } from "react/jsx-runtime";
 function FocusedFormLayout(props) {
   const {
     onCancel,
@@ -29169,11 +29257,12 @@ function FocusedFormLayout(props) {
     isDirty,
     allowNavigation,
     aiMode,
+    rightPaneTriggers,
     children,
     ...headerProps
   } = props;
   const tid = useTestIds(props, "focusedFormLayout");
-  return /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsx241(
     WorkflowPageLayout,
     {
       ...tid,
@@ -29186,6 +29275,7 @@ function FocusedFormLayout(props) {
       completeLabel,
       onComplete,
       primaryDisabled,
+      rightPaneTriggers,
       children
     }
   );
@@ -29193,7 +29283,7 @@ function FocusedFormLayout(props) {
 
 // src/layouts/Workflow/StepperLayout.tsx
 import { useState as useState64 } from "react";
-import { jsx as jsx241 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 function StepperLayout(props) {
   const {
     steps,
@@ -29210,30 +29300,37 @@ function StepperLayout(props) {
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
   const [currentStep, setCurrentStep] = useState64(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
+  const { closeRightPane } = useRightPaneActions();
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex >= stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
-  return /* @__PURE__ */ jsx241(
+  function goToStep(value) {
+    if (value === currentStep) return;
+    closeRightPane();
+    setCurrentStep(value);
+  }
+  return /* @__PURE__ */ jsx242(
     WorkflowPageLayout,
     {
       ...tid,
       ...headerProps,
       aiMode,
-      stepperTabs: { steps: stepTabs, currentStep, onChange: setCurrentStep },
+      stepperTabs: { steps: stepTabs, currentStep, onChange: goToStep },
       isDirty,
       allowNavigation,
       isFirstStep,
       isLastStep,
       onBack: () => {
         const prev = stepTabs[currentIndex - 1];
-        if (prev) setCurrentStep(prev.value);
+        if (prev) goToStep(prev.value);
       },
       onCancel,
       onSaveAndExit,
       completeLabel,
       onComplete,
       primaryDisabled: activeStep?.primaryDisabled,
+      rightPaneTriggers: activeStep?.rightPaneTriggers,
       onContinue: async () => {
         const onContinue = activeStep?.onContinue;
         if (onContinue) {
@@ -29241,7 +29338,7 @@ function StepperLayout(props) {
           if (allowed === false) return;
         }
         const next = stepTabs[currentIndex + 1];
-        if (next) setCurrentStep(next.value);
+        if (next) goToStep(next.value);
       },
       children: activeStep?.content
     }
@@ -29256,7 +29353,7 @@ function getInitialStep(steps, defaultStep) {
 
 // src/forms/BoundChipSelectField.tsx
 import { Observer as Observer19 } from "mobx-react";
-import { jsx as jsx242 } from "react/jsx-runtime";
+import { jsx as jsx243 } from "react/jsx-runtime";
 function BoundChipSelectField(props) {
   const {
     field,
@@ -29272,7 +29369,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ jsx242(Observer19, { children: () => /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsx243(Observer19, { children: () => /* @__PURE__ */ jsx243(
     ChipSelectField,
     {
       label,
@@ -29302,12 +29399,12 @@ function BoundChipSelectField(props) {
 }
 
 // src/forms/BoundSelectAndTextField.tsx
-import { jsx as jsx243, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx244, jsxs as jsxs130 } from "react/jsx-runtime";
 function BoundSelectAndTextField(props) {
   const { selectFieldProps, textFieldProps, compact = true } = props;
   const tid = useTestIds(props);
   return /* @__PURE__ */ jsxs130(CompoundField, { children: [
-    /* @__PURE__ */ jsx243(
+    /* @__PURE__ */ jsx244(
       BoundSelectField,
       {
         ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
@@ -29316,7 +29413,7 @@ function BoundSelectAndTextField(props) {
         compact
       }
     ),
-    /* @__PURE__ */ jsx243(
+    /* @__PURE__ */ jsx244(
       BoundTextField,
       {
         ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
@@ -29328,8 +29425,8 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-import { trussProps as trussProps138 } from "@homebound/truss/runtime";
-import { jsx as jsx244 } from "react/jsx-runtime";
+import { trussProps as trussProps139 } from "@homebound/truss/runtime";
+import { jsx as jsx245 } from "react/jsx-runtime";
 function FormHeading(props) {
   const {
     title,
@@ -29339,7 +29436,7 @@ function FormHeading(props) {
   } = props;
   return (
     // Add space before the heading, but only if it's not first.
-    /* @__PURE__ */ jsx244("h3", { ...trussProps138({
+    /* @__PURE__ */ jsx245("h3", { ...trussProps139({
       ...{
         fontWeight: "fw4",
         fontSize: "fz_16px",
@@ -29356,8 +29453,8 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 import { useId as useId3 } from "@react-aria/utils";
-import { trussProps as trussProps139 } from "@homebound/truss/runtime";
-import { jsx as jsx245, jsxs as jsxs131 } from "react/jsx-runtime";
+import { trussProps as trussProps140 } from "@homebound/truss/runtime";
+import { jsx as jsx246, jsxs as jsxs131 } from "react/jsx-runtime";
 function StaticField(props) {
   const {
     fieldProps
@@ -29370,14 +29467,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = useId3();
-  return /* @__PURE__ */ jsxs131("div", { ...trussProps139({
+  return /* @__PURE__ */ jsxs131("div", { ...trussProps140({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ jsx245("label", { ...trussProps139({
+    /* @__PURE__ */ jsx246("label", { ...trussProps140({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -29387,7 +29484,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ jsx245("div", { id, ...trussProps139({
+    /* @__PURE__ */ jsx246("div", { id, ...trussProps140({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -29415,10 +29512,10 @@ function useFilter4({ filterDefs }) {
 }
 
 // src/inputs/Autocomplete.tsx
-import { useCallback as useCallback44, useRef as useRef76 } from "react";
+import { useCallback as useCallback45, useRef as useRef76 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition6 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
-import { Fragment as Fragment53, jsx as jsx246, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx247, jsxs as jsxs132 } from "react/jsx-runtime";
 function Autocomplete(props) {
   const {
     onSelect,
@@ -29435,8 +29532,8 @@ function Autocomplete(props) {
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = useCallback44(
-    (item) => /* @__PURE__ */ jsx246(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+  const comboBoxChildren = useCallback45(
+    (item) => /* @__PURE__ */ jsx247(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
   const comboBoxProps = {
@@ -29490,7 +29587,7 @@ function Autocomplete(props) {
     minWidth: 200
   };
   return /* @__PURE__ */ jsxs132(Fragment53, { children: [
-    /* @__PURE__ */ jsx246(
+    /* @__PURE__ */ jsx247(
       TextFieldBase,
       {
         inputRef,
@@ -29500,11 +29597,11 @@ function Autocomplete(props) {
         onChange: onInputChange,
         ...proposalProps,
         clearable: true,
-        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ jsx246(Icon, { icon: "search" }),
+        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ jsx247(Icon, { icon: "search" }),
         ...others
       }
     ),
-    state.isOpen && /* @__PURE__ */ jsx246(
+    state.isOpen && /* @__PURE__ */ jsx247(
       Popover,
       {
         triggerRef: inputRef,
@@ -29513,7 +29610,7 @@ function Autocomplete(props) {
         onClose: () => state.close(),
         isOpen: state.isOpen,
         minWidth: 200,
-        children: /* @__PURE__ */ jsx246(
+        children: /* @__PURE__ */ jsx247(
           ListBox,
           {
             ...listBoxProps,
@@ -29534,8 +29631,8 @@ function Autocomplete(props) {
 import { useRef as useRef77, useState as useState66 } from "react";
 import { useFocusRing as useFocusRing21, useHover as useHover24, usePress as usePress2, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden10 } from "react-aria";
 import { useToggleState as useToggleState2 } from "react-stately";
-import { trussProps as trussProps140 } from "@homebound/truss/runtime";
-import { jsx as jsx247, jsxs as jsxs133 } from "react/jsx-runtime";
+import { trussProps as trussProps141 } from "@homebound/truss/runtime";
+import { jsx as jsx248, jsxs as jsxs133 } from "react/jsx-runtime";
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -29599,7 +29696,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...trussProps140({
+    ...trussProps141({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",
@@ -29640,9 +29737,9 @@ function ToggleButton(props) {
     title: tooltip,
     placement: "top",
     children: /* @__PURE__ */ jsxs133("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ jsx247(Icon, { icon }),
+      icon && /* @__PURE__ */ jsx248(Icon, { icon }),
       label,
-      /* @__PURE__ */ jsx247(VisuallyHidden10, { children: /* @__PURE__ */ jsx247("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ jsx248(VisuallyHidden10, { children: /* @__PURE__ */ jsx248("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }