@homebound/beam 3.103.0 → 3.104.0

package/dist/index.cjs

@@ -162,6 +162,7 @@ __export(index_exports, {
   PinToggle: () => PinToggle,
   PresentationProvider: () => PresentationProvider,
   PreventBrowserScroll: () => PreventBrowserScroll,
+  ProposedValue: () => ProposedValue,
   RIGHT_SIDEBAR_MIN_WIDTH: () => RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField: () => RadioGroupField,
   ResponsiveGrid: () => ResponsiveGrid,
@@ -8670,6 +8671,34 @@ function InlineLabel({
   ] });
 }
 
+// src/components/ProposedValue.tsx
+var import_runtime21 = require("@homebound/truss/runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ProposedValue(props) {
+  const {
+    original,
+    proposed
+  } = props;
+  const tid = useTestIds(props, "proposedValue");
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { ...tid, children: [
+    original && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { ...(0, import_runtime21.trussProps)({
+        textDecoration: "tdlt",
+        color: ["color_var", {
+          "--color": "var(--b-on-surface-muted)"
+        }]
+      }), ...tid.original, children: original }),
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { ...(0, import_runtime21.trussProps)({
+      fontWeight: "fw6",
+      color: ["color_var", {
+        "--color": "var(--b-ai-field-fg)"
+      }]
+    }), ...tid.proposed, children: proposed })
+  ] });
+}
+
 // src/components/Table/components/Row.tsx
 var import_mobx_react = require("mobx-react");
 var import_react33 = __toESM(require("react"), 1);
@@ -8677,11 +8706,11 @@ var import_react_aria6 = require("react-aria");
 
 // src/components/Table/components/cell.tsx
 var import_react_router_dom2 = require("react-router-dom");
-var import_runtime21 = require("@homebound/truss/runtime");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_runtime22 = require("@homebound/truss/runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Cell, { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
     ...css2,
     ...{
       cursor: "cursor_default"
@@ -8692,7 +8721,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Cell, { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
     ...css2
   }), ...as === "table" && {
     colSpan
@@ -8701,15 +8730,15 @@ var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyl
 var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("td", { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
       ...css2
-    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime21.mergeProps)(navLink, void 0, {
+    }), colSpan, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime22.mergeProps)(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset",
       display: "db"
     }), children: content }) }, key);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime21.mergeProps)(`${navLink} ${classNames}`, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom2.Link, { to, ...(0, import_runtime22.mergeProps)(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
       color: "color_unset"
@@ -8719,7 +8748,7 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Cell, { ...(0, import_runtime22.mergeProps)(classNames, void 0, {
     ...css2
   }), onClick: (e) => {
     rowStyle.onClick(row, api);
@@ -8731,8 +8760,8 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 
 // src/components/Table/components/ColumnResizeHandle.tsx
 var import_react31 = require("react");
-var import_runtime22 = require("@homebound/truss/runtime");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_runtime23 = require("@homebound/truss/runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function findScrollableParent(element) {
   if (!element) return null;
   let parent = element.parentElement;
@@ -8895,8 +8924,8 @@ function ColumnResizeHandle({
       document.body.style.userSelect = "";
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime22.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...(0, import_runtime23.trussProps)({
       position: "absolute",
       top: "top0",
       bottom: "bottom0",
@@ -8913,7 +8942,7 @@ function ColumnResizeHandle({
         }]
       } : {}
     }), ...tid.handle, "data-column-id": columnId, "data-column-index": columnIndex }),
-    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ...(0, import_runtime22.trussProps)({
+    isDragging && guideLineX !== null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ...(0, import_runtime23.trussProps)({
       position: "fixed",
       top: ["top_var", {
         "--top": `${guideLineTop}px`
@@ -8930,7 +8959,7 @@ function ColumnResizeHandle({
       }],
       pointerEvents: "pointerEvents_none",
       zIndex: ["z_var", {
-        "--zIndex": (0, import_runtime22.maybeCssVar)(zIndices.dragHandle)
+        "--zIndex": (0, import_runtime23.maybeCssVar)(zIndices.dragHandle)
       }],
       transform: "transform_translateX_50"
     }), ...tid.guideLine })
@@ -8939,8 +8968,8 @@ function ColumnResizeHandle({
 
 // src/components/Table/components/KeptGroupRow.tsx
 var import_react32 = require("react");
-var import_runtime23 = require("@homebound/truss/runtime");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_runtime24 = require("@homebound/truss/runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -8958,7 +8987,7 @@ function KeptGroupRow(props) {
     tableState
   } = (0, import_react32.useContext)(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CellTag, { ...(0, import_runtime23.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CellTag, { ...(0, import_runtime24.trussProps)({
     ...style.cellCss,
     ...style.betweenRowsCss,
     ...isLastBodyRow && style.lastRowCellCss,
@@ -8968,22 +8997,22 @@ function KeptGroupRow(props) {
     ...{
       paddingLeft: "pl0",
       width: ["w_var", {
-        "--width": (0, import_runtime23.maybeCssVar)(__maybeInc5(`calc(${columnSizes.join(" + ")})`))
+        "--width": (0, import_runtime24.maybeCssVar)(__maybeInc5(`calc(${columnSizes.join(" + ")})`))
       }]
     }
   }), ...as === "table" ? {
     colSpan
-  } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "df aic gap_12px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w_38px df jcc", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CollapseToggle, { row, compact: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: "infoCircle", inc: 2 }),
+  } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "df aic gap_12px", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w_38px df jcc", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CollapseToggle, { row, compact: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "infoCircle", inc: 2 }),
       `${numHiddenSelectedRows} selected ${pluralize(numHiddenSelectedRows, "row")} hidden due to filters`
     ] })
   ] }) });
 }
 
 // src/components/Table/TableStyles.tsx
-var import_runtime24 = require("@homebound/truss/runtime");
+var import_runtime25 = require("@homebound/truss/runtime");
 var __typography = {
   xs2: {
     fontWeight: "fw4",
@@ -9076,7 +9105,7 @@ function memoizedTableStyles() {
                 "--backgroundColor": "var(--b-surface-hover)"
               }],
               boxShadow: ["boxShadow_var", {
-                "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparator)
+                "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparator)
               }]
             },
             ...allWhite && {
@@ -9216,14 +9245,14 @@ function memoizedTableStyles() {
           paddingTop: "pt0",
           paddingBottom: "pb0",
           boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparator)
+            "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparator)
           }]
         },
         // Draw a 1px divider inside the cell on the right edge and bottom edge.
         // Using `inset` keeps the line inside the cell so it doesn't change layout.
         expandableHeaderNonLastColumnCss: {
           boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparatorCorner)
+            "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparatorCorner)
           }]
         },
         cellCss: {
@@ -9236,12 +9265,12 @@ function memoizedTableStyles() {
               "--backgroundColor": "var(--b-surface)"
             }],
             alignItems: ["ai_var", {
-              "--alignItems": (0, import_runtime24.maybeCssVar)(alignItems)
+              "--alignItems": (0, import_runtime25.maybeCssVar)(alignItems)
             }],
             paddingLeft: "pl_12px",
             paddingRight: "pr_12px",
             boxShadow: ["boxShadow_var", {
-              "--boxShadow": (0, import_runtime24.maybeCssVar)(insetSeparator)
+              "--boxShadow": (0, import_runtime25.maybeCssVar)(insetSeparator)
             }]
           },
           ...rowHeight === "flexible" ? {
@@ -9337,7 +9366,7 @@ function memoizedTableStyles() {
         // Pinned rows keep Blue50 until a selection-surface token exists.
         pinnedRowCss: {
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": (0, import_runtime24.maybeCssVar)("rgba(239, 246, 255, 1)" /* Blue50 */)
+            "--backgroundColor": (0, import_runtime25.maybeCssVar)("rgba(239, 246, 255, 1)" /* Blue50 */)
           }]
         }
       };
@@ -9457,8 +9486,8 @@ function resolveStyles(style) {
 
 // src/components/Table/components/Row.tsx
 var import_use_debounce2 = require("use-debounce");
-var import_runtime25 = require("@homebound/truss/runtime");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_runtime26 = require("@homebound/truss/runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -9630,12 +9659,12 @@ function RowImpl(props) {
   const ref = (0, import_react33.useRef)(null);
   const dragOverCallback = (0, import_react33.useCallback)((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = (0, import_use_debounce2.useDebouncedCallback)(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RowTag, { ...(0, import_runtime25.mergeProps)(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RowTag, { ...(0, import_runtime26.mergeProps)(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
       expandColumnHidden = true;
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {});
     }
     const numExpandedColumns = isExpanded ? tableState.numberOfExpandedChildren(maybeExpandedColumn.id) ? (
       // Subtract 1 if the column is hidden on expand, since we're not rendering it.
@@ -9681,7 +9710,7 @@ function RowImpl(props) {
       ...{
         position: "sticky",
         zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime25.maybeCssVar)(zIndices.tableStickyColumn)
+          "--zIndex": (0, import_runtime26.maybeCssVar)(zIndices.tableStickyColumn)
         }],
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -9689,13 +9718,13 @@ function RowImpl(props) {
       },
       ...maybeSticky === "left" ? {
         left: ["left_var", {
-          "--left": (0, import_runtime25.maybeCssVar)(__maybeInc6(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
+          "--left": (0, import_runtime26.maybeCssVar)(__maybeInc6(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
         }]
       } : {},
       // Offset by the open right pane so sticky-right cells pin to the clear edge, not under it (0 when closed).
       ...maybeSticky === "right" ? {
         right: ["right_var", {
-          "--right": (0, import_runtime25.maybeCssVar)(__maybeInc6(columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))`))
+          "--right": (0, import_runtime26.maybeCssVar)(__maybeInc6(columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))`))
         }]
       } : {}
     } : {};
@@ -9741,7 +9770,7 @@ function RowImpl(props) {
       ...isTotals && style.totalsCellCss,
       ...isTotals && hasExpandableHeader && {
         boxShadow: ["boxShadow_var", {
-          "--boxShadow": (0, import_runtime25.maybeCssVar)(`inset 0 -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
+          "--boxShadow": (0, import_runtime26.maybeCssVar)(`inset 0 -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
         }]
       },
       // Then apply any expandable header specific override
@@ -9752,7 +9781,7 @@ function RowImpl(props) {
       // Only apply if not the last column in the table AND when this column is the last column in the group of expandable column or not expanded AND
       ...hasExpandableHeader && columnIndex + currentColspan < columns.length && (isHeader || isTotals) && currentExpandedColumnCount === 0 && {
         boxShadow: ["boxShadow_var", {
-          "--boxShadow": (0, import_runtime25.maybeCssVar)(`inset -1px -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
+          "--boxShadow": (0, import_runtime26.maybeCssVar)(`inset -1px -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`)
         }]
       },
       // Or level-specific styling
@@ -9766,7 +9795,7 @@ function RowImpl(props) {
       // Active/pinned blue selection fills have no semantic token yet — keep Blue50 default.
       ...isActive ? {
         backgroundColor: ["bgColor_var", {
-          "--backgroundColor": (0, import_runtime25.maybeCssVar)(style.activeBgColor ?? "rgba(239, 246, 255, 1)" /* Blue50 */)
+          "--backgroundColor": (0, import_runtime26.maybeCssVar)(style.activeBgColor ?? "rgba(239, 246, 255, 1)" /* Blue50 */)
         }]
       } : {},
       // Add any cell specific style overrides
@@ -9790,7 +9819,7 @@ function RowImpl(props) {
         ...applyCellHighlight && isCellActive ? {
           borderRadius: "br4",
           boxShadow: ["boxShadow_var", {
-            "--boxShadow": (0, import_runtime25.maybeCssVar)(`inset 0 0 0 1px ${maybeCssVar("--b-focus-ring-inset" /* FocusRingInset */)}`)
+            "--boxShadow": (0, import_runtime26.maybeCssVar)(`inset 0 0 0 1px ${maybeCssVar("--b-focus-ring-inset" /* FocusRingInset */)}`)
           }]
         } : {}
       },
@@ -9798,7 +9827,7 @@ function RowImpl(props) {
       // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly.
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime25.maybeCssVar)(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
+          "--width": (0, import_runtime26.maybeCssVar)(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
         }]
       },
       // Gutter columns are budgeted at pageContentGutterPx; strip cell padding so flex min-content does not exceed that width.
@@ -9816,24 +9845,24 @@ function RowImpl(props) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
-      const cellElementWithHandle = import_react33.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime25.trussProps)({
+      const cellElementWithHandle = import_react33.default.cloneElement(cellElement, (0, import_react_aria6.mergeProps)(cellElement.props, (0, import_runtime26.trussProps)({
         ...!maybeSticky && {
           position: "relative"
         }
       }), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
           cellElement.props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
         ] })
       }));
       return cellElementWithHandle;
     }
     return cellElement;
   }) });
-  return row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
-      ...(0, import_runtime25.trussProps)(containerCss),
+      ...(0, import_runtime26.trussProps)(containerCss),
       onDrop: (evt) => onDrop?.(row, evt),
       onDragEnter: (evt) => onDragEnter?.(row, evt),
       onDragOver: (evt) => {
@@ -9842,7 +9871,7 @@ function RowImpl(props) {
       },
       children: RowContent()
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: RowContent() });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: RowContent() });
 }
 var Row = (0, import_mobx_react.observer)(RowImpl);
 var BorderHoverParent = "beam-bhp";
@@ -9872,8 +9901,8 @@ function useLabelSuffix(required, readOnly) {
 
 // src/inputs/ErrorMessage.tsx
 var import_react_aria7 = require("react-aria");
-var import_runtime26 = require("@homebound/truss/runtime");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_runtime27 = require("@homebound/truss/runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ErrorMessage(props) {
   const {
     id,
@@ -9881,7 +9910,7 @@ function ErrorMessage(props) {
     hidden = false,
     ...others
   } = props;
-  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...(0, import_runtime26.trussProps)({
+  const errorEl = errorMsg ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...(0, import_runtime27.trussProps)({
     color: ["color_var", {
       "--color": "var(--b-danger)"
     }],
@@ -9891,38 +9920,10 @@ function ErrorMessage(props) {
     display: "df",
     marginTop: "mt_4px"
   }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: "error" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, {});
-  return hidden ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria7.VisuallyHidden, { children: errorEl }) : errorEl;
-}
-
-// src/inputs/internal/ProposedValue.tsx
-var import_runtime27 = require("@homebound/truss/runtime");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function ProposedValue(props) {
-  const {
-    original,
-    proposed
-  } = props;
-  const tid = useTestIds(props, "proposedValue");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { ...tid, children: [
-    original && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ...(0, import_runtime27.trussProps)({
-        textDecoration: "tdlt",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface-muted)"
-        }]
-      }), ...tid.original, children: original }),
-      " "
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ...(0, import_runtime27.trussProps)({
-      fontWeight: "fw6",
-      color: ["color_var", {
-        "--color": "var(--b-ai-field-fg)"
-      }]
-    }), ...tid.proposed, children: proposed })
-  ] });
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { icon: "error" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, {});
+  return hidden ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria7.VisuallyHidden, { children: errorEl }) : errorEl;
 }
 
 // src/inputs/utils.ts
@@ -18108,6 +18109,7 @@ function TableCardView(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "tableCardView");
+  const titleText = typeof title === "string" ? title : title.proposed;
   const action = to || onClick;
   const progressValue = (0, import_react89.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
   const shownFooter = shownInteractiveFooter(interactiveFooter);
@@ -18120,7 +18122,7 @@ function TableCardView(props) {
   } = (0, import_react_aria48.useFocusRing)();
   const actionAttrs = {
     ...tid.action,
-    "aria-label": title,
+    "aria-label": titleText,
     // `getButtonOrLink` renders its `<button>` without a type, which would default to submit inside a form.
     type: typeof action === "string" ? void 0 : "button",
     ...(0, import_runtime71.trussProps)(contentStyles),
@@ -18134,7 +18136,7 @@ function TableCardView(props) {
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: "bbw_1px",
       borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-default)"
+        "--borderColor": (0, import_runtime71.maybeCssVar)(aiMode ? "--b-ai-field-bg" /* AiFieldBg */ : "--b-field-border-default" /* FieldBorderDefault */)
       }],
       overflow: "oh",
       borderRadius: "borderRadius_12px_12px_0_0"
@@ -18145,7 +18147,7 @@ function TableCardView(props) {
         objectFit: ["objectFit_var", {
           "--objectFit": (0, import_runtime71.maybeCssVar)(imageFit)
         }]
-      }), src: imgSrc, alt: title, loading: "lazy", ...tid.image }),
+      }), src: imgSrc, alt: titleText, loading: "lazy", ...tid.image }),
       status && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "absolute top1 left1 df", ...tid.status, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Tag, { ...status }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { ...(0, import_runtime71.trussProps)({
@@ -18169,8 +18171,8 @@ function TableCardView(props) {
           "--color": "var(--b-on-surface)"
         }]
       }), ...tid.eyebrow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: leftEyebrow }),
-        rightEyebrow && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "fs0", ...tid.rightEyebrow, children: rightEyebrow })
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: renderMaybeProposed(leftEyebrow, tid.leftEyebrowProposal) }),
+        rightEyebrow && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "fs0", ...tid.rightEyebrow, children: renderMaybeProposed(rightEyebrow, tid.rightEyebrowProposal) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "dif w100 jcsb aic", children: [
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("h4", { ...(0, import_runtime71.trussProps)({
@@ -18185,7 +18187,7 @@ function TableCardView(props) {
           color: ["color_var", {
             "--color": "var(--b-on-surface)"
           }]
-        }), ...tid.title, children: title }),
+        }), ...tid.title, children: renderMaybeProposed(title, tid.titleProposal) }),
         (badge || badgeTags?.length) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
           badge && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
           badgeTags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Tag, { ...tag }, tag.text))
@@ -18204,19 +18206,19 @@ function TableCardView(props) {
       } : {}
     }), children: [
       data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { children: d.value })
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { className: "mw0", children: d.value })
         ] }, d.label)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { children: d.value })
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("dd", { className: "mw0", children: d.value })
         ] }, d.label)) })
       ] }),
       progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
@@ -18225,16 +18227,16 @@ function TableCardView(props) {
           height: "h_8px",
           borderRadius: "br4",
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": "var(--b-surface-subtle)"
+            "--backgroundColor": (0, import_runtime71.maybeCssVar)(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
           }]
-        }), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...(0, import_runtime71.trussProps)({
+        }), ...tid.progressTrack, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...(0, import_runtime71.trussProps)({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
             "--width": (0, import_runtime71.maybeCssVar)(__maybeInc13(`${progressValue}%`))
           }]
-        }) }) }),
+        }), ...tid.progressFill }) }),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { ...tid.progressValue, children: [
           progressValue,
           "%"
@@ -18267,6 +18269,13 @@ function TableCardView(props) {
       boxShadow: "bshFocus",
       borderStyle: "bss",
       borderWidth: "bw1"
+    } : {},
+    // Must follow the focus ring, whose `ba` would reset the AI border back to 1px.
+    ...aiMode ? {
+      borderWidth: "bw2",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-ai-field-fg)"
+      }]
     } : {}
   }), ...tid, children: [
     action ? getButtonOrLink(content, action, actionAttrs) : (
@@ -18328,6 +18337,9 @@ function Thumbnail(props) {
     pointerEvents: "after_a_pointerEvents_none"
   }), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("img", { className: "w100 h100 objectFit_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
+function renderMaybeProposed(value, tid) {
+  return typeof value === "string" || value === void 0 ? value : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ProposedValue, { ...value, ...tid });
+}
 function clampProgress(value) {
   if (process.env.NODE_ENV !== "production" && (value < 0 || value > 100)) {
     console.warn(`[TableCard] progress value ${value} is outside the expected range [0, 100] and will be clamped.`);
@@ -29319,6 +29331,7 @@ function getInitialStep(steps, defaultStep) {
   PinToggle,
   PresentationProvider,
   PreventBrowserScroll,
+  ProposedValue,
   RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField,
   ResponsiveGrid,