@homebound/beam 3.99.3 → 3.101.0

package/dist/index.d.cts

@@ -3775,7 +3775,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         lineHeight: csstype.Property.LineHeight<string | 0> | undefined;
     }, S>;
-    /** Sets `fontWeight: 600; fontSize: "30px"; lineHeight: "36px"`. */
+    /** Sets `fontWeight: 600; fontSize: "24px"; lineHeight: "32px"`. */
     get xl2(): CssBuilder<T & {
         fontWeight: csstype.Property.FontWeight | undefined;
     } & {
@@ -5257,6 +5257,7 @@ declare class RowState<R extends Kinded> {
      * at which point this would become `"top" | "bottom"`.
      */
     pinned: boolean;
+    private _aiMode;
     /** Whether we are dragged over. */
     isDraggedOver: DraggedOver;
     /**
@@ -5284,6 +5285,8 @@ declare class RowState<R extends Kinded> {
     get row(): GridDataRow<R>;
     /** Accepts a new unstable row, i.e. each `createRows` creates a new row literal. */
     set row(row: GridDataRow<R>);
+    /** True when `row.aiMode` is true or its function returns true. */
+    get aiMode(): boolean;
     /**
      * Whether we match a client-side filter; true if no filter is in place.
      *
@@ -5448,6 +5451,8 @@ type GridDataRow<R extends Kinded> = {
     draggable?: boolean;
     /** Image src for the row, to be used for card view */
     imgSrc?: string;
+    /** Paints the row with `Tokens.AiFieldBg`. Use `() => boolean` to read MobX without rebuilding `rows`. */
+    aiMode?: MaybeFn<boolean>;
     /**
      * Full-width content rendered with this row (no separator between them).
      * Plain content / render fn defaults to `"trailing"`; use `{ position, content }` for `"leading"`.

package/dist/index.d.ts

@@ -3775,7 +3775,7 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     } & {
         lineHeight: csstype.Property.LineHeight<string | 0> | undefined;
     }, S>;
-    /** Sets `fontWeight: 600; fontSize: "30px"; lineHeight: "36px"`. */
+    /** Sets `fontWeight: 600; fontSize: "24px"; lineHeight: "32px"`. */
     get xl2(): CssBuilder<T & {
         fontWeight: csstype.Property.FontWeight | undefined;
     } & {
@@ -5257,6 +5257,7 @@ declare class RowState<R extends Kinded> {
      * at which point this would become `"top" | "bottom"`.
      */
     pinned: boolean;
+    private _aiMode;
     /** Whether we are dragged over. */
     isDraggedOver: DraggedOver;
     /**
@@ -5284,6 +5285,8 @@ declare class RowState<R extends Kinded> {
     get row(): GridDataRow<R>;
     /** Accepts a new unstable row, i.e. each `createRows` creates a new row literal. */
     set row(row: GridDataRow<R>);
+    /** True when `row.aiMode` is true or its function returns true. */
+    get aiMode(): boolean;
     /**
      * Whether we match a client-side filter; true if no filter is in place.
      *
@@ -5448,6 +5451,8 @@ type GridDataRow<R extends Kinded> = {
     draggable?: boolean;
     /** Image src for the row, to be used for card view */
     imgSrc?: string;
+    /** Paints the row with `Tokens.AiFieldBg`. Use `() => boolean` to read MobX without rebuilding `rows`. */
+    aiMode?: MaybeFn<boolean>;
     /**
      * Full-width content rendered with this row (no separator between them).
      * Plain content / render fn defaults to `"trailing"`; use `{ position, content }` for `"leading"`.

package/dist/index.js

@@ -3503,9 +3503,9 @@ var CssBuilder = class _CssBuilder {
   get xl() {
     return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px");
   }
-  /** Sets `fontWeight: 600; fontSize: "30px"; lineHeight: "36px"`. */
+  /** Sets `fontWeight: 600; fontSize: "24px"; lineHeight: "32px"`. */
   get xl2() {
-    return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px");
+    return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px");
   }
   // typography
   /** Sets `maxWidth: "30em"`. */
@@ -6710,6 +6710,7 @@ var RowState = class {
       {
         _row: false,
         _data: observable2.ref,
+        _aiMode: observable2.ref,
         isCalculatingDirectMatch: false
       },
       { name: `RowState@${row.id}` }
@@ -6739,6 +6740,7 @@ var RowState = class {
    * at which point this would become `"top" | "bottom"`.
    */
   pinned = false;
+  _aiMode;
   /** Whether we are dragged over. */
   isDraggedOver = 0 /* None */;
   /**
@@ -6769,6 +6771,11 @@ var RowState = class {
   set row(row) {
     this._row = row;
     this._data = row.data;
+    if (this._aiMode !== row.aiMode) this._aiMode = row.aiMode;
+  }
+  /** True when `row.aiMode` is true or its function returns true. */
+  get aiMode() {
+    return !!maybeApply(this._aiMode);
   }
   /**
    * Whether we match a client-side filter; true if no filter is in place.
@@ -8523,8 +8530,8 @@ var __typography = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 var insetSeparator = `inset 0 -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`;
@@ -9001,8 +9008,8 @@ var __typography2 = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 function maybeApplyFunction(row, maybeFn) {
@@ -9048,7 +9055,8 @@ function RowImpl(props) {
     isKept: isKeptRow,
     isLastKeptRow,
     pinned,
-    level
+    level,
+    aiMode
   } = rs;
   const isHeader = row.kind === HEADER;
   const isTotals = row.kind === TOTALS;
@@ -9074,7 +9082,7 @@ function RowImpl(props) {
       paddingBottom: "pb_25px"
     }
   };
-  const rowHoverBg = maybeCssVar(style.rowHoverColor !== void 0 && style.rowHoverColor !== "none" ? style.rowHoverColor : "--b-surface-hover" /* SurfaceHover */);
+  const rowHoverBg = maybeCssVar(aiMode && !reservedRowKinds.includes(row.kind) ? "rgba(237, 233, 254, 1)" /* Purple100 */ : style.rowHoverColor !== void 0 && style.rowHoverColor !== "none" ? style.rowHoverColor : "--b-surface-hover" /* SurfaceHover */);
   const rowCss = {
     ...!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss,
     ...isFirstBodyRow && style.firstBodyRowCss,
@@ -9264,6 +9272,12 @@ function RowImpl(props) {
       ...isLastKeptRow && style.keptLastRowCss,
       // Apply the blue highlight to every runtime-pinned row's cells (wins over `isActive`)
       ...pinned && style.pinnedRowCss,
+      // AI wash wins over pinned/active; reserved kinds never get it.
+      ...aiMode && !reservedRowKinds.includes(row.kind) && {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-ai-field-bg)"
+        }]
+      },
       // Apply cell highlight styles to active cell and hover
       ...{
         ...applyCellHighlight && isCellActive ? {
@@ -9468,8 +9482,8 @@ var __typography3 = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 function TextFieldBase(props) {
@@ -10155,8 +10169,8 @@ var __typography4 = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 function Avatar({
@@ -17346,6 +17360,7 @@ function RowGroup(props) {
 }
 
 // src/components/Table/components/TableCard.tsx
+import { observer as observer2 } from "mobx-react";
 import { useMemo as useMemo27 } from "react";
 import { useFocusRing as useFocusRing11 } from "react-aria";
 import { Link as Link4 } from "react-router-dom";
@@ -17507,7 +17522,7 @@ import { Fragment as Fragment24, jsx as jsx97, jsxs as jsxs51 } from "react/jsx-
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
-function TableCard(props) {
+function TableCardImpl(props) {
   const {
     rs,
     columns,
@@ -17564,8 +17579,9 @@ function TableCard(props) {
   }
   if (!title) return null;
   const onClick = rowStyle?.onClick;
-  return /* @__PURE__ */ jsx97(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, leftEyebrow, rightEyebrow, badge, badgeTags, status, data: dataBlocks, progress, interactiveFooter, to: rowStyle?.rowLink?.(rs.row), onClick: onClick ? () => onClick(rs.row, api) : void 0, height, imageFit });
+  return /* @__PURE__ */ jsx97(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, leftEyebrow, rightEyebrow, badge, badgeTags, status, data: dataBlocks, progress, interactiveFooter, to: rowStyle?.rowLink?.(rs.row), onClick: onClick ? () => onClick(rs.row, api) : void 0, height, imageFit, aiMode: rs.aiMode });
 }
+var TableCard = observer2(TableCardImpl);
 function TableCardView(props) {
   const {
     title,
@@ -17581,7 +17597,8 @@ function TableCardView(props) {
     to,
     onClick,
     height = 430,
-    imageFit = "cover"
+    imageFit = "cover",
+    aiMode = false
   } = props;
   const tid = useTestIds(props, "tableCardView");
   const action = to || onClick;
@@ -17731,7 +17748,7 @@ function TableCardView(props) {
         "--borderColor": "var(--b-field-border-default)"
       }],
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface-raised)"
+        "--backgroundColor": maybeCssVar31(aiMode ? "--b-ai-field-bg" /* AiFieldBg */ : "--b-surface-raised" /* SurfaceRaised */)
       }],
       height: ["h_var", {
         "--height": `${height}px`
@@ -19510,8 +19527,8 @@ function Modal(props) {
   const title = /* @__PURE__ */ jsx118("h1", { ...trussProps80({
     flexGrow: "fg1",
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px",
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px",
     ...aiMode ? {
       color: "purple700",
       backgroundImage: "aiBoldBg",
@@ -22139,7 +22156,7 @@ function PageHeader(props) {
     /* @__PURE__ */ jsxs79("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
       /* @__PURE__ */ jsxs79("div", { children: [
         breadCrumb && /* @__PURE__ */ jsx160(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-        /* @__PURE__ */ jsx160("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
+        /* @__PURE__ */ jsx160("h1", { className: "fw6 fz_24px lh_32px", ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ jsxs79("div", { className: "df gap1", children: [
         tertiaryAction && /* @__PURE__ */ jsx160(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
@@ -22318,7 +22335,7 @@ function useActiveSection(sectionsWithRefs) {
   });
   useEffect26(() => {
     if (!("IntersectionObserver" in window)) return;
-    const observer2 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
+    const observer3 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
       /**
        * Creating rules to determine when a section is "in view" is a real challenge given the section sizes
        * are unknown and will likely be mixed (optimizing for large sections makes tracking small sections
@@ -22334,7 +22351,7 @@ function useActiveSection(sectionsWithRefs) {
       ref
     }) => {
       if (ref.current) {
-        observer2.observe(ref.current);
+        observer3.observe(ref.current);
       }
     });
     return () => {
@@ -22342,7 +22359,7 @@ function useActiveSection(sectionsWithRefs) {
         ref
       }) => {
         if (ref.current) {
-          observer2.unobserve(ref.current);
+          observer3.unobserve(ref.current);
         }
       });
     };
@@ -24188,7 +24205,7 @@ function TableReviewLayout(props) {
       /* @__PURE__ */ jsxs94("div", { className: "df jcsb aic", children: [
         /* @__PURE__ */ jsxs94("div", { children: [
           breadCrumb && /* @__PURE__ */ jsx191(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-          /* @__PURE__ */ jsx191("h1", { className: "fw6 fz_30px lh_36px mt1 mb0", ...tid.pageTitle, children: pageTitle })
+          /* @__PURE__ */ jsx191("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
         ] }),
         /* @__PURE__ */ jsx191(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
@@ -27048,7 +27065,7 @@ function SuperDrawerHeader(props) {
   return createPortal8(/* @__PURE__ */ jsxs114("div", { className: "df aic jcsb gap3", ...tid, children: [
     isStructuredProps(props) ? /* @__PURE__ */ jsxs114("div", { className: "df jcsb aic gap2 fg1", children: [
       /* @__PURE__ */ jsxs114("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ jsx221("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+        /* @__PURE__ */ jsx221("h1", { className: "fw6 fz_24px lh_32px", children: props.title }),
         props.left
       ] }),
       props.right && /* @__PURE__ */ jsx221("div", { className: "fs0", children: props.right })