@homebound/beam 3.90.1 → 3.91.0

package/dist/index.js

@@ -6139,6 +6139,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()})`;
 }
@@ -18902,50 +18905,91 @@ import { jsx as jsx107, jsxs as jsxs58 } from "react/jsx-runtime";
 function AiPanel(props) {
   const {
     rounded = false,
-    fullWidth = true,
+    padding = "sm",
     children,
     ...others
   } = props;
   const tid = useTestIds(others, "aiPanel");
   return /* @__PURE__ */ jsx107("div", { ...trussProps72({
-    width: "w100",
-    paddingLeft: "pl3",
-    paddingRight: "pr3",
-    paddingTop: "pt2",
-    paddingBottom: "pb2",
-    backgroundImage: "aiBackground",
-    ...rounded ? {
-      borderRadius: "br12"
-    } : {}
-  }), ...others, ...tid, children: /* @__PURE__ */ jsxs58("div", { ...trussProps72({
-    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__ */ jsxs58("div", { ...trussProps72({
+    ...{
+      display: "df",
+      flexDirection: "fdc",
+      alignItems: "aifs",
+      width: "w100",
+      ...!fullWidth ? {
+        width: "wfc",
+        maxWidth: "maxw100",
+        marginLeft: "mla",
+        marginRight: "mra"
+      } : {}
+    },
+    ...gapCss
   }), ...tid.column, children: [
-    /* @__PURE__ */ jsx107(BlueprintAiLogo, { height: 3 }),
+    /* @__PURE__ */ jsx107(BlueprintAiLogo, { height: logoHeight }),
     /* @__PURE__ */ jsx107("div", { ...trussProps72({
       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
 import { trussProps as trussProps73 } from "@homebound/truss/runtime";
@@ -18958,7 +19002,7 @@ function AiBanner(props) {
     secondaryAction
   } = props;
   const tid = useTestIds(props, "aiBanner");
-  return /* @__PURE__ */ jsx108(AiPanel, { ...tid, children: /* @__PURE__ */ jsxs59("div", { className: "df aic jcsb gap2 w100 fww", children: [
+  return /* @__PURE__ */ jsx108(AiPanel, { padding: "sm", ...tid, children: /* @__PURE__ */ jsx108(AiCard, { size: "sm", ...tid, children: /* @__PURE__ */ jsxs59("div", { className: "df aic jcsb gap2 w100 fww pt_12px pb2 pl2 pr2", children: [
     /* @__PURE__ */ jsxs59("div", { className: "df fdc gap_4px fg1 fb_0 mw_240px", children: [
       /* @__PURE__ */ jsx108("span", { className: "fw6 fz_14px lh_20px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       message && /* @__PURE__ */ jsx108("span", { ...trussProps73({
@@ -18974,7 +19018,7 @@ function AiBanner(props) {
       secondaryAction && /* @__PURE__ */ jsx108(Button, { ...secondaryAction, variant: "quaternary" }),
       primaryAction && /* @__PURE__ */ jsx108(Button, { ...primaryAction, variant: "ai" })
     ] })
-  ] }) });
+  ] }) }) });
 }
 
 // src/components/AiLoader.tsx
@@ -19036,7 +19080,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__ */ jsx110(AiPanel, { role: "status", "aria-busy": true, ...tid, children: /* @__PURE__ */ jsxs60("div", { className: "df fdc aic gap1 w100 pl1 pr1", children: [
+    /* @__PURE__ */ jsx110(AiPanel, { role: "status", "aria-busy": true, padding: "lg", ...tid, children: /* @__PURE__ */ jsx110(AiCard, { size: "lg", ...tid, children: /* @__PURE__ */ jsxs60("div", { className: "df fdc aic gap1 w100 pt2 pb2 pl3 pr3", children: [
       /* @__PURE__ */ jsx110(AiLoader, {}),
       /* @__PURE__ */ jsx110("span", { className: "fw6 fz_18px lh_28px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       /* @__PURE__ */ jsx110("span", { ...trussProps75({
@@ -19048,7 +19092,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.";
@@ -21252,6 +21296,7 @@ function ContentHeader(props) {
     actions,
     withAutoSave,
     level = 2,
+    aiMode = false,
     startAdornment,
     xss
   } = props;
@@ -21260,6 +21305,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;
   }
@@ -21289,7 +21344,7 @@ function ContentHeader(props) {
     /* @__PURE__ */ jsxs71("div", { className: "df aic jcsb mw0", children: [
       title ? /* @__PURE__ */ jsxs71("div", { className: "df aic gap1 mw0", children: [
         startAdornment,
-        /* @__PURE__ */ jsx146(Heading, { ...trussProps87(headingCss), ...tid.title, children: title })
+        /* @__PURE__ */ jsx146(Heading, { ...trussProps87(titleCss), ...tid.title, children: title })
       ] }) : descriptionEl,
       (withAutoSave || actions) && /* @__PURE__ */ jsxs71("div", { className: "df gap1 fs0", ...tid.actions, children: [
         withAutoSave && /* @__PURE__ */ jsx146(AutoSaveIndicator, {}),
@@ -27528,6 +27583,7 @@ function EnvironmentBannerLayout(props) {
 }
 
 // src/layouts/FormSectionLayout/FormSectionLayout.tsx
+import { trussProps as trussProps129 } from "@homebound/truss/runtime";
 import { jsx as jsx225, jsxs as jsxs117 } from "react/jsx-runtime";
 function FormSectionLayout(props) {
   const {
@@ -27536,16 +27592,28 @@ function FormSectionLayout(props) {
     actions,
     withAutoSave,
     initialFields,
-    sections
+    sections,
+    aiMode = false
   } = props;
   const tid = useTestIds(props, "formSectionLayout");
-  return /* @__PURE__ */ jsx225(CenteredLayout, { size: "sm", children: /* @__PURE__ */ jsxs117("div", { className: "df fdc gap8 pt4", children: [
+  const content = /* @__PURE__ */ jsxs117("div", { ...trussProps129({
+    display: "df",
+    flexDirection: "fdc",
+    gap: "gap8",
+    ...aiMode ? {
+      paddingTop: "pt3",
+      paddingBottom: "pb3",
+      paddingRight: "pr3",
+      paddingLeft: "pl3"
+    } : {}
+  }), children: [
     /* @__PURE__ */ jsxs117("div", { className: "df fdc gap3", children: [
-      /* @__PURE__ */ jsx225(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2 }),
+      /* @__PURE__ */ jsx225(ContentHeader, { ...tid, title, description, actions, withAutoSave, level: 2, aiMode }),
       initialFields
     ] }),
     sections && /* @__PURE__ */ jsx225("div", { className: "df fdc gap8", children: sections.map((section, i) => /* @__PURE__ */ jsx225(FormSection, { ...section }, defaultTestId(section.title) || i)) })
-  ] }) });
+  ] });
+  return /* @__PURE__ */ jsx225(CenteredLayout, { size: "sm", children: aiMode ? /* @__PURE__ */ jsx225(AiCard, { size: "lg", ...tid, children: content }) : content });
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
@@ -27745,7 +27813,7 @@ function NavbarLayout(props) {
 import { useCallback as useCallback41, useMemo as useMemo58, useRef as useRef69 } from "react";
 
 // src/components/Headers/BaseHeader.tsx
-import { trussProps as trussProps129 } from "@homebound/truss/runtime";
+import { trussProps as trussProps130 } from "@homebound/truss/runtime";
 import { jsx as jsx228, jsxs as jsxs119 } from "react/jsx-runtime";
 function BaseHeader(props) {
   const {
@@ -27758,7 +27826,7 @@ function BaseHeader(props) {
   } = props;
   const tid = useTestIds(otherProps, "header");
   useDocumentTitle(title, documentTitleSuffix);
-  return /* @__PURE__ */ jsxs119("header", { ...tid, ...trussProps129({
+  return /* @__PURE__ */ jsxs119("header", { ...tid, ...trussProps130({
     display: "df",
     flexDirection: "fdc",
     paddingTop: "pt3",
@@ -27772,7 +27840,7 @@ function BaseHeader(props) {
       "--backgroundColor": "var(--b-surface)"
     }]
   }), children: [
-    /* @__PURE__ */ jsxs119("div", { ...trussProps129({
+    /* @__PURE__ */ jsxs119("div", { ...trussProps130({
       ...{
         display: "df",
         justifyContent: "jcsb",
@@ -27788,7 +27856,7 @@ function BaseHeader(props) {
     }), children: [
       /* @__PURE__ */ jsxs119("div", { className: "mw0", children: [
         breadcrumbs && /* @__PURE__ */ jsx228(Breadcrumbs, { ...breadcrumbs }),
-        /* @__PURE__ */ jsx228("h1", { ...tid.title, ...trussProps129({
+        /* @__PURE__ */ jsx228("h1", { ...tid.title, ...trussProps130({
           fontWeight: "fw6",
           fontSize: "fz_20px",
           lineHeight: "lh_28px",
@@ -27804,7 +27872,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
-import { trussProps as trussProps130 } from "@homebound/truss/runtime";
+import { trussProps as trussProps131 } from "@homebound/truss/runtime";
 import { jsx as jsx229 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -27812,7 +27880,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx229(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx229("div", { ...trussProps130(pageContentPaddingX), children: /* @__PURE__ */ jsx229(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx229(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx229("div", { ...trussProps131(pageContentPaddingX), children: /* @__PURE__ */ jsx229(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -27962,20 +28030,22 @@ function WorkflowActions(props) {
     completeLabel,
     onComplete,
     onContinue,
-    primaryDisabled
+    primaryDisabled,
+    aiMode = false
   } = props;
+  const primaryVariant = aiMode ? "ai" : "primary";
   return /* @__PURE__ */ jsxs121("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ jsx233("div", { className: "df aic", children: !isFirstStep && isMobile && /* @__PURE__ */ jsx233(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
     /* @__PURE__ */ jsxs121("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ jsx233(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx233(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ jsx233(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx233(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
+      isLastStep ? /* @__PURE__ */ jsx233(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx233(Button, { label: "Continue", variant: primaryVariant, onClick: onContinue, disabled: primaryDisabled })
     ] })
   ] });
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { trussProps as trussProps131, mergeProps as mergeProps41, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
+import { trussProps as trussProps132, mergeProps as mergeProps41, maybeCssVar as maybeCssVar65 } from "@homebound/truss/runtime";
 import { jsx as jsx234, jsxs as jsxs122 } from "react/jsx-runtime";
 var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
@@ -27989,6 +28059,7 @@ function WorkflowLayout(props) {
     onComplete,
     onSaveAndExit,
     isDirty,
+    aiMode = false,
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({
@@ -28018,7 +28089,7 @@ function WorkflowLayout(props) {
   const isFirstStep = currentIndex <= 0;
   const isLastStep = currentIndex === stepTabs.length - 1;
   const activeStep = stepTabs[currentIndex];
-  const buttons = /* @__PURE__ */ jsx234(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(stepTabs[currentIndex - 1].value), onCancel: onCancelClick, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.isValid, onContinue: async () => {
+  const buttons = /* @__PURE__ */ jsx234(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();
@@ -28058,7 +28129,7 @@ function WorkflowLayout(props) {
       flexDirection: "fdc",
       width: "w100"
     }), ...tid, children: [
-      /* @__PURE__ */ jsx234("div", { ref: headerMetricsRef, ...trussProps131({
+      /* @__PURE__ */ jsx234("div", { ref: headerMetricsRef, ...trussProps132({
         position: "sticky",
         left: "left0",
         width: ["w_var", {
@@ -28071,14 +28142,29 @@ function WorkflowLayout(props) {
           "--top": maybeCssVar65(__maybeInc32(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
-      /* @__PURE__ */ jsx234("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
-      showFooter && /* @__PURE__ */ jsx234("div", { ...trussProps131({
+      /* @__PURE__ */ jsx234("div", { ...trussProps132({
+        ...{
+          display: "df",
+          flexDirection: "fdc",
+          flexGrow: "fg1",
+          minHeight: "mh0",
+          width: "w100",
+          paddingTop: "pt4 mdandup_pt6"
+        },
+        ...aiMode && {
+          backgroundImage: "aiBackground",
+          minHeight: ["mh_var", {
+            "--minHeight": maybeCssVar65(documentScrollBodyMinHeight())
+          }]
+        }
+      }), ...tid.body, children: activeStep?.content }),
+      showFooter && /* @__PURE__ */ jsx234("div", { ...trussProps132({
         flexShrink: "fs0",
         width: "w100",
         height: ["h_var", {
           "--height": `${mobileFooterHeightPx}px`
         }]
-      }), children: /* @__PURE__ */ jsx234("div", { ...trussProps131({
+      }), children: /* @__PURE__ */ jsx234("div", { ...trussProps132({
         ...{
           position: "fixed",
           bottom: "bottom0",
@@ -28122,6 +28208,7 @@ export {
   Accordion,
   AccordionList,
   AiBanner,
+  AiCard,
   AiLoader,
   AiLoadingPanel,
   AiPanel,
@@ -28364,6 +28451,7 @@ export {
   defaultRenderFn,
   defaultStyle,
   defaultTestId,
+  documentScrollBodyMinHeight,
   documentScrollChromeLeft,
   documentScrollChromeWidth,
   documentScrollContentLeft,