@homebound/beam 3.90.1 → 3.91.0

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   Accordion: () => Accordion,
   AccordionList: () => AccordionList,
   AiBanner: () => AiBanner,
+  AiCard: () => AiCard,
   AiLoader: () => AiLoader,
   AiLoadingPanel: () => AiLoadingPanel,
   AiPanel: () => AiPanel,
@@ -276,6 +277,7 @@ __export(index_exports, {
   defaultRenderFn: () => defaultRenderFn,
   defaultStyle: () => defaultStyle,
   defaultTestId: () => defaultTestId,
+  documentScrollBodyMinHeight: () => documentScrollBodyMinHeight,
   documentScrollChromeLeft: () => documentScrollChromeLeft,
   documentScrollChromeWidth: () => documentScrollChromeWidth,
   documentScrollContentLeft: () => documentScrollContentLeft,
@@ -6638,6 +6640,9 @@ function documentScrollContentWidth() {
 function documentScrollRightPaneHeight() {
   return `calc(var(${beamLayoutViewportHeightVar}, 100vh) - ${stickyTableHeaderOffset()})`;
 }
+function documentScrollBodyMinHeight() {
+  return `calc(var(${beamLayoutViewportHeightVar}, 100vh) - ${stickyNavAndHeaderOffset()} - var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
+}
 function documentScrollRightPaneWidth(maxPx) {
   return `min(${maxPx}px, ${documentScrollChromeWidth()})`;
 }
@@ -19401,50 +19406,91 @@ var import_jsx_runtime107 = require("react/jsx-runtime");
 function AiPanel(props) {
   const {
     rounded = false,
-    fullWidth = true,
+    padding = "sm",
     children,
     ...others
   } = props;
   const tid = useTestIds(others, "aiPanel");
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { ...(0, import_runtime80.trussProps)({
-    width: "w100",
-    paddingLeft: "pl3",
-    paddingRight: "pr3",
-    paddingTop: "pt2",
-    paddingBottom: "pb2",
-    backgroundImage: "aiBackground",
-    ...rounded ? {
-      borderRadius: "br12"
-    } : {}
-  }), ...others, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { ...(0, import_runtime80.trussProps)({
-    display: "df",
-    flexDirection: "fdc",
-    alignItems: "aifs",
-    gap: "gap1",
-    width: "w100",
-    ...!fullWidth ? {
-      width: "wfc",
-      marginLeft: "mla",
-      marginRight: "mra"
-    } : {}
+    ...{
+      width: "w100",
+      backgroundImage: "aiBackground",
+      ...rounded ? {
+        borderRadius: "br12"
+      } : {}
+    },
+    ...aiBackgroundPaddingCss[padding]
+  }), ...others, ...tid, children });
+}
+function AiCard(props) {
+  const {
+    fullWidth = true,
+    size = "lg",
+    children,
+    ...others
+  } = props;
+  const {
+    logoHeight,
+    gapCss
+  } = aiCardChrome[size];
+  const tid = useTestIds(others, "aiCard");
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { ...(0, import_runtime80.trussProps)({
+    ...{
+      display: "df",
+      flexDirection: "fdc",
+      alignItems: "aifs",
+      width: "w100",
+      ...!fullWidth ? {
+        width: "wfc",
+        maxWidth: "maxw100",
+        marginLeft: "mla",
+        marginRight: "mra"
+      } : {}
+    },
+    ...gapCss
   }), ...tid.column, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(BlueprintAiLogo, { height: 3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(BlueprintAiLogo, { height: logoHeight }),
     /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { ...(0, import_runtime80.trussProps)({
       display: "df",
       flexDirection: "fdc",
       width: "w100",
+      minWidth: "mw0",
       borderRadius: "br12",
-      paddingTop: "pt_12px",
-      paddingLeft: "pl2",
-      paddingRight: "pr2",
-      paddingBottom: "pb2",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
       }],
       boxShadow: "bshBasic"
     }), ...tid.card, children })
-  ] }) });
+  ] });
 }
+var aiBackgroundPaddingCss = {
+  lg: {
+    paddingTop: "pt3",
+    paddingBottom: "pb3",
+    paddingRight: "pr3",
+    paddingLeft: "pl3"
+  },
+  sm: {
+    paddingLeft: "pl3",
+    paddingRight: "pr3",
+    paddingTop: "pt2",
+    paddingBottom: "pb2"
+  }
+};
+var aiCardChrome = {
+  lg: {
+    logoHeight: 3,
+    gapCss: {
+      gap: "gap2"
+    }
+  },
+  sm: {
+    logoHeight: 2,
+    gapCss: {
+      gap: "gap_4px"
+    }
+  }
+};
 
 // src/components/AiBanner.tsx
 var import_runtime81 = require("@homebound/truss/runtime");
@@ -19457,7 +19503,7 @@ function AiBanner(props) {
     secondaryAction
   } = props;
   const tid = useTestIds(props, "aiBanner");
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AiPanel, { ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "df aic jcsb gap2 w100 fww", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AiPanel, { padding: "sm", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(AiCard, { size: "sm", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "df aic jcsb gap2 w100 fww pt_12px pb2 pl2 pr2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "df fdc gap_4px fg1 fb_0 mw_240px", children: [
       /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "fw6 fz_14px lh_20px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       message && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { ...(0, import_runtime81.trussProps)({
@@ -19473,7 +19519,7 @@ function AiBanner(props) {
       secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Button, { ...secondaryAction, variant: "quaternary" }),
       primaryAction && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Button, { ...primaryAction, variant: "ai" })
     ] })
-  ] }) });
+  ] }) }) });
 }
 
 // src/components/AiLoader.tsx
@@ -19535,7 +19581,7 @@ function AiLoadingPanel(props) {
   return (
     // `status` rather than `alert` so assistive tech waits for a pause instead of interrupting, and
     // `aria-busy` so it knows the surrounding content is still settling.
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiPanel, { role: "status", "aria-busy": true, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df fdc aic gap1 w100 pl1 pr1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiPanel, { role: "status", "aria-busy": true, padding: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiCard, { size: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df fdc aic gap1 w100 pt2 pb2 pl3 pr3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiLoader, {}),
       /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "fw6 fz_18px lh_28px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { ...(0, import_runtime83.trussProps)({
@@ -19547,7 +19593,7 @@ function AiLoadingPanel(props) {
         }],
         textAlign: "tac"
       }), ...tid.message, children: message })
-    ] }) })
+    ] }) }) })
   );
 }
 var defaultMessage = "This process can take a few minutes. Feel free to keep working in another tab. Once imported, you may edit or add to content before saving.";
@@ -21751,6 +21797,7 @@ function ContentHeader(props) {
     actions,
     withAutoSave,
     level = 2,
+    aiMode = false,
     startAdornment,
     xss
   } = props;
@@ -21759,6 +21806,16 @@ function ContentHeader(props) {
     tag: Heading,
     css: headingCss
   } = headingByLevel[level];
+  const titleCss = aiMode ? {
+    ...headingCss,
+    ...{
+      color: "purple700",
+      backgroundImage: "aiBoldBg",
+      backgroundClip: "bgcl_text",
+      WebkitBackgroundClip: "WebkitBackgroundClip_text",
+      WebkitTextFillColor: "wktfc_transparent"
+    }
+  } : headingCss;
   if (!title && !description && !actions && !withAutoSave) {
     return null;
   }
@@ -21788,7 +21845,7 @@ function ContentHeader(props) {
     /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "df aic jcsb mw0", children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "df aic gap1 mw0", children: [
         startAdornment,
-        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Heading, { ...(0, import_runtime95.trussProps)(headingCss), ...tid.title, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Heading, { ...(0, import_runtime95.trussProps)(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
       (withAutoSave || actions) && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "df gap1 fs0", ...tid.actions, children: [
         withAutoSave && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(AutoSaveIndicator, {}),
@@ -28019,6 +28076,7 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
+var import_runtime143 = require("@homebound/truss/runtime");
 var import_jsx_runtime225 = require("react/jsx-runtime");
 function FormSectionLayout(props) {
   const {
@@ -28027,21 +28085,33 @@ function FormSectionLayout(props) {
     actions,
     withAutoSave,
     initialFields,
-    sections
+    sections,
+    aiMode = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(CenteredLayout, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { className: "df fdc gap8 pt4", children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ...(0, import_runtime143.trussProps)({
+    display: "df",
+    flexDirection: "fdc",
+    gap: "gap8",
+    ...aiMode ? {
+      paddingTop: "pt3",
+      paddingBottom: "pb3",
+      paddingRight: "pr3",
+      paddingLeft: "pl3"
+    } : {}
+  }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
     sections && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(FormSection, { ...section }, defaultTestId(section.title) || i)) })
-  ] }) });
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(AiCard, { size: "lg", ...tid, children: content }) : content });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_react160 = require("react");
-var import_runtime143 = require("@homebound/truss/runtime");
+var import_runtime144 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
 var import_react157 = require("react");
@@ -28191,10 +28261,10 @@ function NavbarLayout(props) {
       position: "sticky",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime143.maybeCssVar)(__maybeInc30(innerWidth))
+        "--width": (0, import_runtime144.maybeCssVar)(__maybeInc30(innerWidth))
       }]
     }
   ) : (
@@ -28203,10 +28273,10 @@ function NavbarLayout(props) {
       position: "fixed",
       left: "left0",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime143.maybeCssVar)(zIndices.navbar)
+        "--zIndex": (0, import_runtime144.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime143.maybeCssVar)(__maybeInc30(innerWidth))
+        "--width": (0, import_runtime144.maybeCssVar)(__maybeInc30(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -28216,18 +28286,18 @@ function NavbarLayout(props) {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
   const navbarEl = (0, import_react160.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ...(0, import_runtime143.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ...(0, import_runtime144.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: spacerRef, ...(0, import_runtime143.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: spacerRef, ...(0, import_runtime144.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime143.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime144.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) }) });
 }
@@ -28236,7 +28306,7 @@ function NavbarLayout(props) {
 var import_react161 = require("react");
 
 // src/components/Headers/BaseHeader.tsx
-var import_runtime144 = require("@homebound/truss/runtime");
+var import_runtime145 = require("@homebound/truss/runtime");
 var import_jsx_runtime228 = require("react/jsx-runtime");
 function BaseHeader(props) {
   const {
@@ -28249,7 +28319,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("header", { ...tid, ...(0, import_runtime144.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("header", { ...tid, ...(0, import_runtime145.trussProps)({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -28263,7 +28333,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime144.trussProps)({
+    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { ...(0, import_runtime145.trussProps)({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -28279,7 +28349,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("h1", { ...tid.title, ...(0, import_runtime144.trussProps)({
+        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("h1", { ...tid.title, ...(0, import_runtime145.trussProps)({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -28295,7 +28365,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-var import_runtime145 = require("@homebound/truss/runtime");
+var import_runtime146 = require("@homebound/truss/runtime");
 var import_jsx_runtime229 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
@@ -28303,7 +28373,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { ...(0, import_runtime145.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", { ...(0, import_runtime146.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28312,7 +28382,7 @@ function useBannerAndNavbarHeight() {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_runtime146 = require("@homebound/truss/runtime");
+var import_runtime147 = require("@homebound/truss/runtime");
 var import_jsx_runtime230 = require("react/jsx-runtime");
 var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28344,24 +28414,24 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime146.maybeCssVar)(__maybeInc31(headerLeft))
+      "--left": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime146.maybeCssVar)(__maybeInc31(headerWidth))
+      "--width": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime146.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.pageStickyHeader)
     }]
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime146.maybeCssVar)(__maybeInc31(headerLeft))
+      "--left": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime146.maybeCssVar)(__maybeInc31(headerWidth))
+      "--width": (0, import_runtime147.maybeCssVar)(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
-      "--zIndex": (0, import_runtime146.maybeCssVar)(zIndices.pageStickyHeader)
+      "--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.pageStickyHeader)
     }],
     transition: "transitionTop"
   };
@@ -28369,17 +28439,17 @@ function PageHeaderLayout(props) {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
   const pageHeaderEl = (0, import_react161.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime146.mergeProps)(void 0, cssVars, {
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)("div", { ...(0, import_runtime147.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: spacerRef, ...(0, import_runtime146.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: spacerRef, ...(0, import_runtime147.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime146.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime147.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
     /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
@@ -28453,20 +28523,22 @@ function WorkflowActions(props) {
     completeLabel,
     onComplete,
     onContinue,
-    primaryDisabled
+    primaryDisabled,
+    aiMode = false
   } = props;
+  const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
     /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
+      isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Button, { label: "Continue", variant: primaryVariant, onClick: onContinue, disabled: primaryDisabled })
     ] })
   ] });
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-var import_runtime147 = require("@homebound/truss/runtime");
+var import_runtime148 = require("@homebound/truss/runtime");
 var import_jsx_runtime234 = require("react/jsx-runtime");
 var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -28480,6 +28552,7 @@ function WorkflowLayout(props) {
     onComplete,
     onSaveAndExit,
     isDirty,
+    aiMode = false,
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({
@@ -28509,7 +28582,7 @@ function WorkflowLayout(props) {
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex === stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
-  const buttons = /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
+  const buttons = /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, aiMode, onContinue: async () => {
     const onContinue = activeStep?.onContinue;
     if (onContinue) {
       const allowed = await onContinue();
@@ -28544,43 +28617,58 @@ function WorkflowLayout(props) {
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { ...(0, import_runtime147.mergeProps)(void 0, cssVars, {
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { ...(0, import_runtime148.mergeProps)(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime147.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime148.trussProps)({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime147.maybeCssVar)(__maybeInc32(headerWidth))
+          "--width": (0, import_runtime148.maybeCssVar)(__maybeInc32(headerWidth))
         }],
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.pageStickyHeader)
+          "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime147.maybeCssVar)(__maybeInc32(outerTop))
+          "--top": (0, import_runtime148.maybeCssVar)(__maybeInc32(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime147.trussProps)({
+      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime148.trussProps)({
+        ...{
+          display: "df",
+          flexDirection: "fdc",
+          flexGrow: "fg1",
+          minHeight: "mh0",
+          width: "w100",
+          paddingTop: "pt4 mdandup_pt6"
+        },
+        ...aiMode && {
+          backgroundImage: "aiBackground",
+          minHeight: ["mh_var", {
+            "--minHeight": (0, import_runtime148.maybeCssVar)(documentScrollBodyMinHeight())
+          }]
+        }
+      }), ...tid.body, children: activeStep?.content }),
+      showFooter && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime148.trussProps)({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime147.trussProps)({
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { ...(0, import_runtime148.trussProps)({
         ...{
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime147.maybeCssVar)(__maybeInc32(headerWidth))
+            "--width": (0, import_runtime148.maybeCssVar)(__maybeInc32(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
           }],
           zIndex: ["z_var", {
-            "--zIndex": (0, import_runtime147.maybeCssVar)(zIndices.pageStickyFooter)
+            "--zIndex": (0, import_runtime148.maybeCssVar)(zIndices.pageStickyFooter)
           }],
           display: "df",
           alignItems: "aic",
@@ -28614,6 +28702,7 @@ function getInitialStep(steps, defaultStep) {
   Accordion,
   AccordionList,
   AiBanner,
+  AiCard,
   AiLoader,
   AiLoadingPanel,
   AiPanel,
@@ -28856,6 +28945,7 @@ function getInitialStep(steps, defaultStep) {
   defaultRenderFn,
   defaultStyle,
   defaultTestId,
+  documentScrollBodyMinHeight,
   documentScrollChromeLeft,
   documentScrollChromeWidth,
   documentScrollContentLeft,