@homebound/beam 4.10.0 → 4.11.0

package/dist/index.cjs

@@ -6055,13 +6055,14 @@ function IconButton(props) {
   const isCircle = variant === "circle";
   const isOutline = variant === "outline";
   const styles = (0, import_react8.useMemo)(() => {
-    const variantKey = isCircle ? "circle" : isOutline ? "outline" : compact ? "compact" : "default";
     const {
       base,
       hover,
       focus,
       pressed
-    } = variantStyles[variantKey];
+    } = variantStyles(variant, {
+      compact
+    });
     return {
       ...iconButtonStylesReset,
       ...base,
@@ -6075,7 +6076,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,
@@ -6112,36 +6113,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", {
@@ -6158,71 +6216,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
 var import_mobx8 = require("mobx");
@@ -6439,6 +6434,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,
@@ -24045,50 +24042,65 @@ function DocumentScrollRightPane({
     height: paneBounds.heightPx,
     maxHeight: paneBounds.heightPx
   } : void 0;
-  const pane = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_framer_motion3.motion.div, { ref: paneRef, ...{
-    [rightPaneContentDataAttribute]: true
-  }, ...tid, ...(0, import_runtime111.mergeProps)(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": (0, import_runtime111.maybeCssVar)(zIndices.rightPaneMobile)
-    }]
-  } : {
-    position: "fixed",
-    right: "right0",
-    overflowY: "oya",
-    width: ["w_var", {
-      "--width": (0, import_runtime111.maybeCssVar)(__maybeInc20(paneWidthCss))
-    }],
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface)"
-    }],
-    zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime111.maybeCssVar)(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__ */ (0, import_jsx_runtime168.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    import_framer_motion3.motion.div,
+    {
+      ref: paneRef,
+      ...{
+        [rightPaneContentDataAttribute]: true
+      },
+      ...tid,
+      ...(0, import_runtime111.mergeProps)(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": (0, import_runtime111.maybeCssVar)(zIndices.rightPaneMobile)
+        }]
+      } : {
+        position: "fixed",
+        right: "right0",
+        overflowY: "oya",
+        width: ["w_var", {
+          "--width": (0, import_runtime111.maybeCssVar)(__maybeInc20(paneWidthCss))
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": (0, import_runtime111.maybeCssVar)(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 (0, import_react_dom6.createPortal)(pane, document.body);
 }
 
@@ -24186,7 +24198,8 @@ function DocumentScrollOverlayRightPaneLayout({
       }, {
         flexShrink: "fs0",
         flexGrow: "fg0",
-        height: "h1"
+        height: "h1",
+        transition: "transitionWidth"
       }), ...tid.spacer })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
@@ -24211,26 +24224,24 @@ function DocumentScrollOverlayRightPaneHost(props) {
     return waitForRightPaneExit(() => setKeepOverlayChrome(false));
   }, [isRightPaneOpen]);
   (0, import_react124.useLayoutEffect)(() => {
-    const layoutRoot = anchorRef.current;
     const spacer = spacerRef.current;
+    if (!spacer) return;
+    spacer.style.width = isRightPaneOpen ? paneWidthCss : "0px";
+  }, [isRightPaneOpen, paneWidthCss, spacerRef]);
+  (0, import_react124.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime170.jsx)(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
 }
 
@@ -24865,7 +24876,7 @@ function RightPaneLayout(props) {
         width: ["w_var", {
           "--width": (0, import_runtime118.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
         }],
-        transition: "tsn_width_2s_linear",
+        transition: "transitionWidth",
         height: "h100",
         marginRight: "mr3",
         overflowX: "oxa"
@@ -24928,13 +24939,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
           },
@@ -24978,7 +24989,7 @@ function RightPanePanel(props) {
       flexShrink: "fs0"
     }), ...tid.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: "fw6 fz_16px lh_24px", children: title }),
-      withClose && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconButton, { icon: "x", label: "Close", onClick: closeRightPane, ...tid.close })
+      withClose && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: "fg1 mh0 oya pt2 pb2 pr2 pl2", ...tid.body, children })
   ] });
@@ -29389,7 +29400,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-var import_react168 = require("react");
+var import_react169 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
 var import_jsx_runtime236 = require("react/jsx-runtime");
@@ -29405,19 +29416,83 @@ function WorkflowHeader(props) {
   );
 }
 
-// src/layouts/Workflow/useUnsavedChangesGuard.tsx
+// src/layouts/Workflow/RightPaneTriggers.tsx
 var import_react167 = require("react");
-var import_react_router_dom9 = require("react-router-dom");
+var import_runtime157 = require("@homebound/truss/runtime");
 var import_jsx_runtime237 = require("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 = (0, import_react167.useCallback)((trigger) => {
+    openRightPane({
+      content: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(RightPanePanel, { title: trigger.label, children: trigger.content })
+    });
+  }, [openRightPane]);
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { ...tid, "aria-hidden": isRightPaneOpen, ...isRightPaneOpen ? {
+    inert: true
+  } : {}, ...(0, import_runtime157.trussProps)({
+    ...{
+      display: "df",
+      alignItems: "aic",
+      gap: "gap2",
+      flexShrink: "fs0",
+      ...!isMobile ? {
+        transition: "transitionTransform",
+        flexDirection: "fdc"
+      } : {}
+    },
+    ...!isMobile && {
+      position: "fixed",
+      top: ["top_var", {
+        "--top": (0, import_runtime157.maybeCssVar)(__maybeInc36(stickyNavAndHeaderOffset(pageTriggerInsetPx)))
+      }],
+      right: ["right_var", {
+        "--right": `${pageTriggerInsetPx}px`
+      }],
+      zIndex: ["z_var", {
+        "--zIndex": (0, import_runtime157.maybeCssVar)(zIndices.rightPaneTriggers)
+      }]
+    },
+    // Desktop only — on `sm` the full-bleed pane covers the header slot.
+    ...!isMobile && (isRightPaneOpen ? {
+      transform: ["transform_var", {
+        "--transform": (0, import_runtime157.maybeCssVar)(`translateX(calc(100% + ${pageTriggerInsetPx}px))`)
+      }],
+      pointerEvents: "pe_none"
+    } : {
+      transform: "tf_translateX_0"
+    })
+  }), children: triggers.map((trigger) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(IconButton, { icon: trigger.icon, label: trigger.label, variant: "circle", compact: isMobile, onClick: () => onClick(trigger), ...tid[trigger.icon] }, trigger.label)) });
+}
+
+// src/layouts/Workflow/useUnsavedChangesGuard.tsx
+var import_react168 = require("react");
+var import_react_router_dom9 = require("react-router-dom");
+var import_jsx_runtime238 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, allowNavigation, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react167.useRef)(isDirty);
+  const isDirtyRef = (0, import_react168.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  const allowNavigationRef = (0, import_react167.useRef)(allowNavigation);
+  const allowNavigationRef = (0, import_react168.useRef)(allowNavigation);
   allowNavigationRef.current = allowNavigation;
-  const allowCancelNavigationRef = (0, import_react167.useRef)(false);
-  (0, import_react167.useEffect)(() => {
+  const allowCancelNavigationRef = (0, import_react168.useRef)(false);
+  (0, import_react168.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -29444,7 +29519,7 @@ function useUnsavedChangesGuard(options) {
     }
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
@@ -29453,10 +29528,10 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react167.useEffect)(() => {
+  (0, import_react168.useEffect)(() => {
     openModal({
       allowClosing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
+      content: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
     });
     return () => closeModal();
   }, []);
@@ -29464,7 +29539,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-var import_jsx_runtime238 = require("react/jsx-runtime");
+var import_jsx_runtime239 = require("react/jsx-runtime");
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -29482,12 +29557,12 @@ function WorkflowActions(props) {
     sm: isMobile
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
-      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
     ] })
@@ -29495,9 +29570,9 @@ function WorkflowActions(props) {
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-var import_runtime157 = require("@homebound/truss/runtime");
-var import_jsx_runtime239 = require("react/jsx-runtime");
-var __maybeInc36 = (inc) => {
+var import_runtime158 = require("@homebound/truss/runtime");
+var import_jsx_runtime240 = require("react/jsx-runtime");
+var __maybeInc37 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var mobileFooterHeightPx = 80;
@@ -29512,6 +29587,7 @@ function WorkflowPageLayout(props) {
     documentTitleSuffix,
     breadcrumbs,
     onCancel,
+    rightPaneTriggers,
     ...actionProps
   } = props;
   const tid = useTestIds(props, "workflowPageLayout");
@@ -29526,8 +29602,10 @@ function WorkflowPageLayout(props) {
     allowNavigation,
     onCancel
   });
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
-  const headerMetricsRef = (0, import_react168.useRef)(null);
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const triggers = rightPaneTriggers ?? [];
+  const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
+  const headerMetricsRef = (0, import_react169.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
@@ -29535,7 +29613,7 @@ function WorkflowPageLayout(props) {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
   const showFooter = isMobile;
-  (0, import_react168.useLayoutEffect)(() => {
+  (0, import_react169.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -29547,32 +29625,32 @@ function WorkflowPageLayout(props) {
       }
     };
   }, [showFooter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)("div", { ...(0, import_runtime157.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)("div", { ...(0, import_runtime158.mergeProps)(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ...(0, import_runtime157.mergeProps)(void 0, {
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ...(0, import_runtime158.mergeProps)(void 0, {
         height: headerHeight
       }, {
         flexShrink: "fs0",
         width: "w100"
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime157.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime158.trussProps)({
         position: "fixed",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime157.maybeCssVar)(__maybeInc36(headerWidth))
+          "--width": (0, import_runtime158.maybeCssVar)(__maybeInc37(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime157.maybeCssVar)(zIndices.pageStickyHeader)
+          "--zIndex": (0, import_runtime158.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime157.maybeCssVar)(__maybeInc36(outerTop))
+          "--top": (0, import_runtime158.maybeCssVar)(__maybeInc37(outerTop))
         }],
         transition: "transitionAll"
-      }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? void 0 : actions, stepperTabs }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ...(0, import_runtime157.trussProps)({
+      }), ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(WorkflowHeader, { title, documentTitleSuffix, breadcrumbs, rightSlot: isMobile ? pageTriggers : actions, stepperTabs }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ...(0, import_runtime158.trussProps)({
         ...{
           display: "df",
           flexDirection: "fdc",
@@ -29584,28 +29662,29 @@ function WorkflowPageLayout(props) {
         ...aiMode && {
           backgroundImage: "aiBackground",
           minHeight: ["mh_var", {
-            "--minHeight": (0, import_runtime157.maybeCssVar)(documentScrollBodyMinHeight())
+            "--minHeight": (0, import_runtime158.maybeCssVar)(documentScrollBodyMinHeight())
           }]
         }
-      }), ...tid.body, children }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ...(0, import_runtime157.trussProps)({
+      }), ...tid.body, children: triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(DocumentScrollOverlayRightPaneLayout, { children }) : children }),
+      !isMobile && pageTriggers,
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ...(0, import_runtime158.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { ...(0, import_runtime157.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)("div", { ...(0, import_runtime158.trussProps)({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime157.maybeCssVar)(__maybeInc36(headerWidth))
+            "--width": (0, import_runtime158.maybeCssVar)(__maybeInc37(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": (0, import_runtime157.maybeCssVar)(zIndices.pageStickyFooter)
+            "--zIndex": (0, import_runtime158.maybeCssVar)(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -29623,12 +29702,12 @@ function WorkflowPageLayout(props) {
         ...pageContentPaddingX
       }), ...tid.footer, children: actions }) })
     ] }),
-    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
+    navigationBlocker && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(UnsavedChangesNavigationModal, { ...navigationBlocker })
   ] });
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-var import_jsx_runtime240 = require("react/jsx-runtime");
+var import_jsx_runtime241 = require("react/jsx-runtime");
 function FocusedFormLayout(props) {
   const {
     onCancel,
@@ -29639,11 +29718,12 @@ function FocusedFormLayout(props) {
     isDirty,
     allowNavigation,
     aiMode,
+    rightPaneTriggers,
     children,
     ...headerProps
   } = props;
   const tid = useTestIds(props, "focusedFormLayout");
-  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
     WorkflowPageLayout,
     {
       ...tid,
@@ -29656,14 +29736,15 @@ function FocusedFormLayout(props) {
       completeLabel,
       onComplete,
       primaryDisabled,
+      rightPaneTriggers,
       children
     }
   );
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-var import_react169 = require("react");
-var import_jsx_runtime241 = require("react/jsx-runtime");
+var import_react170 = require("react");
+var import_jsx_runtime242 = require("react/jsx-runtime");
 function StepperLayout(props) {
   const {
     steps,
@@ -29678,32 +29759,39 @@ function StepperLayout(props) {
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
-  const [currentStep, setCurrentStep] = (0, import_react169.useState)(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react170.useState)(() => 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__ */ (0, import_jsx_runtime241.jsx)(
+  function goToStep(value) {
+    if (value === currentStep) return;
+    closeRightPane();
+    setCurrentStep(value);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
     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) {
@@ -29711,7 +29799,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
     }
@@ -29726,7 +29814,7 @@ function getInitialStep(steps, defaultStep) {
 
 // src/forms/BoundChipSelectField.tsx
 var import_mobx_react23 = require("mobx-react");
-var import_jsx_runtime242 = require("react/jsx-runtime");
+var import_jsx_runtime243 = require("react/jsx-runtime");
 function BoundChipSelectField(props) {
   const {
     field,
@@ -29742,7 +29830,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(import_mobx_react23.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(import_mobx_react23.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
     ChipSelectField,
     {
       label,
@@ -29772,12 +29860,12 @@ function BoundChipSelectField(props) {
 }
 
 // src/forms/BoundSelectAndTextField.tsx
-var import_jsx_runtime243 = require("react/jsx-runtime");
+var import_jsx_runtime244 = require("react/jsx-runtime");
 function BoundSelectAndTextField(props) {
   const { selectFieldProps, textFieldProps, compact = true } = props;
   const tid = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(CompoundField, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(CompoundField, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
       BoundSelectField,
       {
         ...tid[defaultTestId(selectFieldProps.label ?? selectFieldProps.field.key)],
@@ -29786,7 +29874,7 @@ function BoundSelectAndTextField(props) {
         compact
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
       BoundTextField,
       {
         ...tid[defaultTestId(textFieldProps.label ?? textFieldProps.field.key)],
@@ -29798,8 +29886,8 @@ function BoundSelectAndTextField(props) {
 }
 
 // src/forms/FormHeading.tsx
-var import_runtime158 = require("@homebound/truss/runtime");
-var import_jsx_runtime244 = (
+var import_runtime159 = require("@homebound/truss/runtime");
+var import_jsx_runtime245 = (
   // Add space before the heading, but only if it's not first.
   require("react/jsx-runtime")
 );
@@ -29810,7 +29898,7 @@ function FormHeading(props) {
     isFirst = false,
     ...others
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("h3", { ...(0, import_runtime158.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)("h3", { ...(0, import_runtime159.trussProps)({
     ...{
       fontWeight: "fw4",
       fontSize: "fz_16px",
@@ -29826,8 +29914,8 @@ FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
 var import_utils49 = require("@react-aria/utils");
-var import_runtime159 = require("@homebound/truss/runtime");
-var import_jsx_runtime245 = require("react/jsx-runtime");
+var import_runtime160 = require("@homebound/truss/runtime");
+var import_jsx_runtime246 = require("react/jsx-runtime");
 function StaticField(props) {
   const {
     fieldProps
@@ -29840,14 +29928,14 @@ function StaticField(props) {
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
   const id = (0, import_utils49.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)("div", { ...(0, import_runtime159.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)("div", { ...(0, import_runtime160.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
       justifyContent: "jcsb",
       maxWidth: "maxw100"
     } : {}
   }), ...tid.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime245.jsx)("label", { ...(0, import_runtime159.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime246.jsx)("label", { ...(0, import_runtime160.trussProps)({
       display: "db",
       fontWeight: "fw4",
       fontSize: "fz_14px",
@@ -29857,7 +29945,7 @@ function StaticField(props) {
       }],
       marginBottom: "mb_4px"
     }), htmlFor: id, ...tid.label, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime245.jsx)("div", { id, ...(0, import_runtime159.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime246.jsx)("div", { id, ...(0, import_runtime160.trussProps)({
       fontWeight: "fw4",
       fontSize: "fz_14px",
       lineHeight: "lh_20px",
@@ -29874,9 +29962,9 @@ function StaticField(props) {
 }
 
 // src/hooks/useFilter.ts
-var import_react170 = require("react");
+var import_react171 = require("react");
 function useFilter4({ filterDefs }) {
-  const [filter, setFilter] = (0, import_react170.useState)(
+  const [filter, setFilter] = (0, import_react171.useState)(
     Object.fromEntries(
       safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     )
@@ -29885,10 +29973,10 @@ function useFilter4({ filterDefs }) {
 }
 
 // src/inputs/Autocomplete.tsx
-var import_react171 = require("react");
+var import_react172 = require("react");
 var import_react_aria66 = require("react-aria");
 var import_react_stately18 = require("react-stately");
-var import_jsx_runtime246 = require("react/jsx-runtime");
+var import_jsx_runtime247 = require("react/jsx-runtime");
 function Autocomplete(props) {
   const {
     onSelect,
@@ -29905,8 +29993,8 @@ function Autocomplete(props) {
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = (0, import_react171.useCallback)(
-    (item) => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+  const comboBoxChildren = (0, import_react172.useCallback)(
+    (item) => /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
   const comboBoxProps = {
@@ -29930,10 +30018,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = (0, import_react_stately18.useComboBoxState)(comboBoxProps);
-  const inputWrapRef = (0, import_react171.useRef)(null);
-  const inputRef = (0, import_react171.useRef)(null);
-  const listBoxRef = (0, import_react171.useRef)(null);
-  const popoverRef = (0, import_react171.useRef)(null);
+  const inputWrapRef = (0, import_react172.useRef)(null);
+  const inputRef = (0, import_react172.useRef)(null);
+  const listBoxRef = (0, import_react172.useRef)(null);
+  const popoverRef = (0, import_react172.useRef)(null);
   const { inputProps, listBoxProps, labelProps } = (0, import_react_aria66.useComboBox)(
     {
       ...comboBoxProps,
@@ -29959,8 +30047,8 @@ function Autocomplete(props) {
     // Ensures the menu never gets too small.
     minWidth: 200
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(import_jsx_runtime246.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_jsx_runtime247.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
       TextFieldBase,
       {
         inputRef,
@@ -29970,11 +30058,11 @@ function Autocomplete(props) {
         onChange: onInputChange,
         ...proposalProps,
         clearable: true,
-        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Icon, { icon: "search" }),
+        startAdornment: "startAdornment" in props ? props.startAdornment : /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { icon: "search" }),
         ...others
       }
     ),
-    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
       Popover,
       {
         triggerRef: inputRef,
@@ -29983,7 +30071,7 @@ function Autocomplete(props) {
         onClose: () => state.close(),
         isOpen: state.isOpen,
         minWidth: 200,
-        children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
           ListBox,
           {
             ...listBoxProps,
@@ -30001,11 +30089,11 @@ function Autocomplete(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-var import_react172 = require("react");
+var import_react173 = require("react");
 var import_react_aria67 = require("react-aria");
 var import_react_stately19 = require("react-stately");
-var import_runtime160 = require("@homebound/truss/runtime");
-var import_jsx_runtime247 = require("react/jsx-runtime");
+var import_runtime161 = require("@homebound/truss/runtime");
+var import_jsx_runtime248 = require("react/jsx-runtime");
 function ToggleButton(props) {
   const {
     selected: isSelected = false,
@@ -30016,7 +30104,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react172.useState)(false);
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react173.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -30035,8 +30123,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = (0, import_react172.useRef)(null);
-  const ref = (0, import_react172.useRef)(null);
+  const labelRef = (0, import_react173.useRef)(null);
+  const ref = (0, import_react173.useRef)(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -30069,7 +30157,7 @@ function ToggleButton(props) {
     ...focusProps,
     ...hoverProps,
     ...pressProps,
-    ...(0, import_runtime160.trussProps)({
+    ...(0, import_runtime161.trussProps)({
       // Gray500 off-state has no semantic match — keep palette (OnSurfaceMuted is Gray700).
       ...{
         borderRadius: "br4",
@@ -30109,10 +30197,10 @@ function ToggleButton(props) {
   return maybeTooltip({
     title: tooltip,
     placement: "top",
-    children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)("label", { ...labelAttrs, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { icon }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)("label", { ...labelAttrs, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon, { icon }),
       label,
-      /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_aria67.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("input", { ref, ...inputProps, ...tid.value }) })
+      /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_aria67.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)("input", { ref, ...inputProps, ...tid.value }) })
     ] })
   });
 }