@oxy.so/bloom 4.8.0 → 4.9.0

package/docs/adoption-matrix.mdx

@@ -278,7 +278,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 | `segmented-control` | `@oxy.so/bloom/segmented-control` + barrel | universal | `segmented-control.mdx` | yes | 4 | reads |  |  |  |
 | `select` | `@oxy.so/bloom/select` + barrel | web fork | `select.mdx` | yes | 7 | reads |  | reads |  |
 | `settings-list` | `@oxy.so/bloom/settings-list` + barrel | universal | `settings-list.mdx` | yes | 5 |  |  |  |  |
-| `settings-modal` | `@oxy.so/bloom/settings-modal` + barrel | universal | `settings-modal.mdx` | yes | 2 |  |  |  | reads |
+| `settings-modal` | `@oxy.so/bloom/settings-modal` + barrel | universal | `settings-modal.mdx` | yes | 3 |  |  |  | reads |
 | `shipment-request` | `@oxy.so/bloom/shipment-request` + barrel | universal | `shipment-request.mdx` | yes | 1 | **adaptation** |  |  |  |
 | `sidebar` | `@oxy.so/bloom/sidebar` + barrel | universal | `sidebar.mdx` | yes | 6 | n/a¹ |  |  | reads |
 | `skeleton` | `@oxy.so/bloom/skeleton` + barrel | universal | `skeleton.mdx` | yes | 1 |  |  |  |  |
@@ -304,7 +304,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 | `tenancy` | `@oxy.so/bloom/tenancy` + barrel | universal | `tenancy.mdx` | yes | 3 |  | n/a¹ |  |  |
 | `text-field` | `@oxy.so/bloom/text-field` + barrel | universal | `text-field.mdx` | yes | 13 | reads | reads |  |  |
 | `textarea` | `@oxy.so/bloom/textarea` + barrel | universal | `textarea.mdx` | yes | 4 | reads | reads |  | n/a¹ |
-| `theme` | `@oxy.so/bloom/theme` + barrel | web fork | `theme.mdx` | yes | 294 |  |  | n/a¹ | reads |
+| `theme` | `@oxy.so/bloom/theme` + barrel | web fork | `theme.mdx` | yes | 295 |  |  | n/a¹ | reads |
 | `theme-toggle` | `@oxy.so/bloom/theme-toggle` + barrel | universal | `theme-toggle.mdx` | yes | 1 | n/a¹ |  |  |  |
 | `toast` | `@oxy.so/bloom/toast` + barrel | universal | `toast.mdx` | yes | 17 |  |  |  |  |
 | `tooltip` | `@oxy.so/bloom/tooltip` + barrel | web fork | `tooltip.mdx` | yes | 1 |  |  |  |  |

package/docs/ai-chat.mdx

@@ -95,6 +95,27 @@ The thread scrolls with a thin scrollbar, px 16 / pt 16, turns 12 apart, and is
 
 **Hazard (web):** react-native-web gives every view `min-height: 0`, so the usual `flexGrow: 1` + `justifyContent: 'flex-end'` content container stays the viewport's height and its children overflow it instead of scrolling — and `onContentSizeChange` never sees the growth. The thread floors its container at `minHeight: '100%'` on web instead.
 
+### Floating chrome
+
+`<AiChatContainer floatingChrome>` keeps every part and changes the geometry: the conversation fills the **whole card** and scrolls **behind** the header and **behind** the composer. Use it when the transcript is the screen — a full-height chat where two opaque bands would each take a strip of it, or where a `background` layer should run edge to edge under everything. Leave it off (the default, and what the AI Chat template uses) for the stacked layout above.
+
+| Layer | Geometry |
+|---|---|
+| card | unchanged: radius 24, background-secondary (or `surface={false}`), clipped; `background` still fills it under everything |
+| `children` | fill the card's full height — nothing is in flow above or below them |
+| header block | the `header` slot (`AiChatMobileHeader`) + the breadcrumb row, absolute at the top, transparent — no band of its own |
+| footer block | `AgentThinking` + `composer`, absolute at the bottom; pt **24** (instead of 12), px 10 / pb 10, gap 10 |
+| top fade | the page-header edge scrim in the card surface, opaque at the top edge, ending 55% of the header block's height below it; fades in over the first **16px** scrolled (the gap it closes) |
+| bottom fade | a 24px scrim ramp across the footer's top padding, then solid surface behind the composer; fades in over the first **24px** of transcript below the fold |
+
+Both blocks are `pointerEvents="box-none"`, so the transcript under their empty space still scrolls and takes clicks. Both fades are decorative (hidden from assistive tech) and exist **only while turns are actually under that edge** — at rest, with the thread followed to the end, the bottom is clear and a `background` layer shows untinted.
+
+**Insets.** The container measures both blocks (`onLayout`) and hands the heights to its children through context. An `AiChatThread` pads its **content** by them — pt = header block + 16, pb = footer block — and sets matching iOS `scrollIndicatorInsets`, so at rest the first and last turns sit exactly where the stacked layout puts them relative to the chrome, and in motion pass under it. The `ScrollView` stays the only scroller; `autoFollow`, `followThreshold`, `onStartReached`, `maintainStartPosition` and the ref work unchanged. A resize that is **exactly** the chrome's (the composer growing, `AgentThinking` appearing, the header measuring in on mount) is not a new turn: a reader at the end stays at the end without an animated follow, and a reader mid-thread keeps their turn in place. Any other child reads the same numbers from `useAiChatChromeInsets()` (`{ top, bottom }`, or `null` outside a floating container) to keep an empty state or a scroller of its own clear of the chrome.
+
+**Why a fade, not a frost.** `AgentChat` frosts its overlaid header (white/black 20%, a 20px backdrop blur on web) once the transcript reaches it. Here the chrome has no band, and a frosted rectangle is one: it ends at its own bottom edge, and that edge is a line across the transcript. A one-colour opacity ramp is identical on native and web and needs no blur.
+
+**Limits.** The fades are background-secondary. With `surface={false}` there is no known colour to fade to, so the chrome floats **without** fades — the composer's own surface is then what covers the text under it. Over an opaque `background` layer the fades are the card surface, not the layer.
+
 ## Turns
 
 - **User** — pushed right with a 6px bleed past the column, as wide as its text up to half the column + 6; radius 16, background-primary, px 12 / py 11, shadow-card.

package/lib/commonjs/ai-chat/AiChatContainer.js

@@ -7,12 +7,17 @@ exports.AiChatContainer = AiChatContainer;
 exports.AiChatThread = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _index = require("../agent-thinking/index.js");
 var _index2 = require("../breadcrumb/index.js");
 var _RiFolderLine = require("../icons/remix/RiFolderLine.js");
 var _RiMoreFill = require("../icons/remix/RiMoreFill.js");
 var _RiShare2Line = require("../icons/remix/RiShare2Line.js");
+var _EdgeScrim = require("../page-header/EdgeScrim.js");
+var _colorUtils = require("../theme/color-utils.js");
+var _useIsomorphicLayoutEffect = require("../theme/use-isomorphic-layout-effect.js");
 var _AiChatControls = require("./AiChatControls.js");
+var _context = require("./context.js");
 var _shared = require("./shared.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -22,6 +27,22 @@ const DEFAULT_LABELS = {
   more: 'More options'
 };
 
+/** The thread's own top padding: the gap between the header and the first turn. */
+const THREAD_PAD_TOP = 16;
+/**
+ * `floatingChrome`: the footer's fade strip, px — the footer's top padding, so
+ * the last turn at rest ends where the fade begins, and the distance over which
+ * the bottom fade ramps in as the transcript slides under it.
+ */
+const FOOTER_FADE = 24;
+/** Below this many px of overlap an edge counts as clear (sub-pixel scroll noise). */
+const EDGE_THRESHOLD = 1;
+const HIDDEN_FROM_A11Y = {
+  'aria-hidden': true,
+  accessibilityElementsHidden: true,
+  importantForAccessibility: 'no-hide-descendants'
+};
+
 /**
  * The AI chat's centre column: the centre column of the AI chat template.
  *
@@ -39,6 +60,22 @@ const DEFAULT_LABELS = {
  *
  * `project` is optional: without one the breadcrumb is the chat's own crumb
  * alone, since a chat that belongs to nothing must not have to invent a folder.
+ *
+ * `floatingChrome` changes the geometry, not the parts:
+ *
+ *   thread    the `children` fill the whole card, under everything below
+ *   header    the `header` slot + breadcrumb row, absolute at the top, no band;
+ *             an edge scrim of the surface (opaque at the top, gone
+ *             `SCRIM_TAIL_RATIO` below the block) fades in over the first 16px
+ *             of transcript scrolled under it
+ *   footer    absolute at the bottom, pt 24 instead of 12: the 24px strip is a
+ *             scrim ramp and the rest is solid surface, faded in over the first
+ *             24px of transcript below the fold
+ *
+ * Both blocks are `pointerEvents="box-none"`, so the transcript under their
+ * empty space still scrolls and takes clicks. The measured heights reach an
+ * `AiChatThread` child through context (its content padding) and any other
+ * child through `useAiChatChromeInsets()`.
  */
 function AiChatContainer({
   project,
@@ -55,6 +92,7 @@ function AiChatContainer({
   workingLabel,
   background,
   surface = true,
+  floatingChrome = false,
   labels,
   style,
   testID
@@ -65,76 +103,104 @@ function AiChatContainer({
     ...DEFAULT_LABELS,
     ...labels
   }), [labels]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    testID: testID,
-    style: [{
-      height: '100%',
-      minWidth: 0,
-      flex: 1,
-      flexDirection: 'column',
-      overflow: 'hidden',
-      borderRadius: _shared.CONTAINER_RADIUS,
-      backgroundColor: surface ? palette.secondary : 'transparent'
-    }, style],
-    children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
+  const hasCrumbRow = title != null || project != null || onShare || onMore || actions != null;
+  const crumbRow = hasCrumbRow ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    pointerEvents: "box-none",
+    style: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+      paddingTop: 16
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "box-none",
       style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
+        minWidth: 0,
+        flex: 1
       },
-      children: background
-    }) : null, header, title != null || project != null || onShare || onMore || actions != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: title != null || project != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.Breadcrumb, {
+        accessibilityLabel: l.breadcrumb,
+        children: [project === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.BreadcrumbItem, {
+          icon: projectIcon,
+          onPress: onProjectPress,
+          children: project
+        }), title == null ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.BreadcrumbItem, {
+          current: true,
+          children: title
+        })]
+      }) : null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        width: '100%',
+        flexShrink: 0,
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 8,
-        paddingLeft: 16,
-        paddingRight: 16,
-        paddingTop: 16
+        gap: 8
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          minWidth: 0,
-          flex: 1
-        },
-        children: title != null || project != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.Breadcrumb, {
-          accessibilityLabel: l.breadcrumb,
-          children: [project === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.BreadcrumbItem, {
-            icon: projectIcon,
-            onPress: onProjectPress,
-            children: project
-          }), title == null ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.BreadcrumbItem, {
-            current: true,
-            children: title
-          })]
-        }) : null
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          flexShrink: 0,
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 8
-        },
-        children: actions ?? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [onShare ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiChatControls.GlyphAction, {
-            icon: _RiShare2Line.RiShare2Line,
-            label: l.share,
-            onPress: onShare,
-            palette: palette
-          }) : null, onMore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiChatControls.GlyphAction, {
-            icon: _RiMoreFill.RiMoreFill,
-            label: l.more,
-            onPress: onMore,
-            palette: palette
-          }) : null]
-        })
-      })]
-    }) : null, children, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: actions ?? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [onShare ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiChatControls.GlyphAction, {
+          icon: _RiShare2Line.RiShare2Line,
+          label: l.share,
+          onPress: onShare,
+          palette: palette
+        }) : null, onMore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiChatControls.GlyphAction, {
+          icon: _RiMoreFill.RiMoreFill,
+          label: l.more,
+          onPress: onMore,
+          palette: palette
+        }) : null]
+      })
+    })]
+  }) : null;
+  const footerBody = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [working ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AgentThinking, {
+      variant: "infinity",
+      label: workingLabel,
+      style: {
+        paddingLeft: 6,
+        paddingRight: 6
+      }
+    }) : null, composer]
+  });
+  const backgroundLayer = background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: background
+  }) : null;
+  const rootStyle = [{
+    height: '100%',
+    minWidth: 0,
+    flex: 1,
+    flexDirection: 'column',
+    overflow: 'hidden',
+    borderRadius: _shared.CONTAINER_RADIUS,
+    backgroundColor: surface ? palette.secondary : 'transparent'
+  }, style];
+  if (floatingChrome) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingChrome, {
+      testID: testID,
+      rootStyle: rootStyle,
+      backgroundLayer: backgroundLayer,
+      header: header,
+      crumbRow: crumbRow,
+      footerBody: footerBody,
+      fadeColor: surface ? palette.secondary : null,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: rootStyle,
+    children: [backgroundLayer, header, crumbRow, children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         width: '100%',
         flexDirection: 'column',
@@ -144,14 +210,171 @@ function AiChatContainer({
         paddingTop: 12,
         paddingBottom: 10
       },
-      children: [working ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AgentThinking, {
-        variant: "infinity",
-        label: workingLabel,
+      children: footerBody
+    })]
+  });
+}
+/**
+ * `AiChatContainer floatingChrome`: the same parts, the chrome floated over the
+ * transcript. Everything it measures lives here, so the stacked path above
+ * carries none of the state.
+ *
+ * The edge opacities are shared values written from the thread's scroll
+ * reports, so a scroll frame re-renders nothing; the booleans only mount and
+ * unmount the scrims, and change once per crossing. Same model as the
+ * sidebar's `SidebarScrollArea`, whose scrim this reuses.
+ */
+function FloatingChrome({
+  testID,
+  rootStyle,
+  backgroundLayer,
+  header,
+  crumbRow,
+  footerBody,
+  fadeColor,
+  children
+}) {
+  const [insets, setInsets] = (0, _react.useState)({
+    top: 0,
+    bottom: 0
+  });
+  const [edges, setEdges] = (0, _react.useState)({
+    top: false,
+    bottom: false
+  });
+  const topFade = (0, _reactNativeReanimated.useSharedValue)(0);
+  const bottomFade = (0, _reactNativeReanimated.useSharedValue)(0);
+  const onHeaderLayout = (0, _react.useCallback)(event => {
+    const top = Math.round(event.nativeEvent.layout.height);
+    setInsets(previous => previous.top === top ? previous : {
+      ...previous,
+      top
+    });
+  }, []);
+  const onFooterLayout = (0, _react.useCallback)(event => {
+    const bottom = Math.round(event.nativeEvent.layout.height);
+    setInsets(previous => previous.bottom === bottom ? previous : {
+      ...previous,
+      bottom
+    });
+  }, []);
+  const reportScroll = (0, _react.useCallback)(({
+    offset,
+    viewport,
+    content
+  }) => {
+    const range = Math.max(0, content - viewport);
+    const y = Math.max(0, Math.min(offset, range));
+    const overflow = viewport > 0 && range > EDGE_THRESHOLD;
+    // The first turn rests THREAD_PAD_TOP below the header and the last one
+    // right on the footer's fade strip, so the overlap starts at the first px
+    // scrolled and each ramp spans the gap it is closing.
+    const top = overflow && y > EDGE_THRESHOLD;
+    const bottom = overflow && range - y > EDGE_THRESHOLD;
+    topFade.value = overflow ? Math.min(1, y / THREAD_PAD_TOP) : 0;
+    bottomFade.value = overflow ? Math.min(1, (range - y) / FOOTER_FADE) : 0;
+    setEdges(previous => previous.top === top && previous.bottom === bottom ? previous : {
+      top,
+      bottom
+    });
+  }, [topFade, bottomFade]);
+  const chrome = (0, _react.useMemo)(() => ({
+    insets,
+    reportScroll
+  }), [insets, reportScroll]);
+
+  // SVG never receives alpha inside stopColor; it travels on the containing view.
+  const parsed = fadeColor ? (0, _colorUtils.parseRgba)(fadeColor) : null;
+  const solid = parsed ? `rgb(${parsed.r}, ${parsed.g}, ${parsed.b})` : fadeColor;
+  const alpha = parsed?.a ?? 1;
+  const topStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: topFade.value * alpha
+  }), [topFade, alpha]);
+  const bottomStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: bottomFade.value * alpha
+  }), [bottomFade, alpha]);
+  const prefix = testID ?? 'ai-chat';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [rootStyle, {
+      position: 'relative'
+    }],
+    children: [backgroundLayer, /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.AiChatFloatingChromeContext.Provider, {
+      value: chrome,
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: `${prefix}-chrome-top`,
+      pointerEvents: "box-none",
+      onLayout: onHeaderLayout,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0
+      },
+      children: [solid && edges.top && insets.top > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        testID: `${prefix}-fade-top`,
+        pointerEvents: "none",
+        ...HIDDEN_FROM_A11Y,
+        style: [{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          // Past the block's own bottom: a ramp that ends where the layout
+          // does is a line across the transcript again.
+          height: Math.round(insets.top * (1 + _EdgeScrim.SCRIM_TAIL_RATIO))
+        }, topStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EdgeScrim.EdgeScrim, {
+          color: solid
+        })
+      }) : null, header, crumbRow]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: `${prefix}-chrome-bottom`,
+      pointerEvents: "box-none",
+      onLayout: onFooterLayout,
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: [solid && edges.bottom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+        testID: `${prefix}-fade-bottom`,
+        pointerEvents: "none",
+        ...HIDDEN_FROM_A11Y,
+        style: [_reactNative.StyleSheet.absoluteFill, {
+          flexDirection: 'column'
+        }, bottomStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            height: FOOTER_FADE,
+            transform: [{
+              rotate: '180deg'
+            }]
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EdgeScrim.EdgeScrim, {
+            color: solid
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flex: 1,
+            backgroundColor: solid
+          }
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "box-none",
         style: {
-          paddingLeft: 6,
-          paddingRight: 6
-        }
-      }) : null, composer]
+          width: '100%',
+          flexDirection: 'column',
+          gap: 10,
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: FOOTER_FADE,
+          paddingBottom: 10
+        },
+        children: footerBody
+      })]
     })]
   });
 }
@@ -177,6 +400,13 @@ function AiChatContainer({
  *
  * There is no virtualization and no `scrollToIndex`: a host jumping to a turn
  * measures its row (`onLayout`) and calls `scrollToOffset`.
+ *
+ * Inside `AiChatContainer floatingChrome` the thread still fills its parent —
+ * the whole card — and pads its CONTENT by the chrome the container measured:
+ * pt = header block + 16, pb = footer block. At rest the first and last turns
+ * sit exactly where the stacked layout puts them relative to the chrome; in
+ * motion they pass under it. It also reports its position so the container
+ * knows when to fade each edge. Anywhere else nothing of this exists.
  */
 const AiChatThread = exports.AiChatThread = /*#__PURE__*/(0, _react.forwardRef)(function AiChatThread({
   children,
@@ -191,14 +421,45 @@ const AiChatThread = exports.AiChatThread = /*#__PURE__*/(0, _react.forwardRef)(
   style,
   testID
 }, ref) {
+  const chrome = (0, _react.useContext)(_context.AiChatFloatingChromeContext);
   const scrollRef = (0, _react.useRef)(null);
   const lastHeight = (0, _react.useRef)(0);
+  /**
+   * The latest content height from ANY source, for the chrome report only.
+   * `lastHeight` must change solely in `onContentSizeChange`: a scroll event
+   * carrying the new size first would otherwise hide the growth from the follow.
+   */
+  const contentHeight = (0, _react.useRef)(0);
   const offset = (0, _react.useRef)(0);
   const viewport = (0, _react.useRef)(0);
   /** An `onStartReached` is out and its page has not landed yet. */
   const pageOut = (0, _react.useRef)(false);
   /** The reader has left the top zone, so the next approach may fire again. */
   const startArmed = (0, _react.useRef)(true);
+
+  // The chrome's padding changing is not a new turn: it is recorded here,
+  // before the resize it causes, so `onContentSizeChange` can tell the two apart.
+  const insetTop = chrome?.insets.top ?? 0;
+  const insetBottom = chrome?.insets.bottom ?? 0;
+  const appliedInsets = (0, _react.useRef)({
+    top: insetTop,
+    bottom: insetBottom
+  });
+  const insetShift = (0, _react.useRef)({
+    top: 0,
+    bottom: 0
+  });
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
+    const applied = appliedInsets.current;
+    insetShift.current = {
+      top: insetShift.current.top + insetTop - applied.top,
+      bottom: insetShift.current.bottom + insetBottom - applied.bottom
+    };
+    appliedInsets.current = {
+      top: insetTop,
+      bottom: insetBottom
+    };
+  }, [insetTop, insetBottom]);
   (0, _react.useImperativeHandle)(ref, () => ({
     scrollToEnd: options => scrollRef.current?.scrollToEnd({
       animated: options?.animated ?? true
@@ -212,14 +473,24 @@ const AiChatThread = exports.AiChatThread = /*#__PURE__*/(0, _react.forwardRef)(
     }),
     getScrollView: () => scrollRef.current
   }), []);
-  const listening = !!onScroll || !!onStartReached || followThreshold !== undefined || maintainStartPosition;
+  const listening = !!chrome || !!onScroll || !!onStartReached || followThreshold !== undefined || maintainStartPosition;
+  const report = (0, _react.useCallback)(() => {
+    chrome?.reportScroll({
+      offset: offset.current,
+      viewport: viewport.current,
+      content: contentHeight.current
+    });
+  }, [chrome]);
   const handleScroll = (0, _react.useCallback)(event => {
     const {
       contentOffset,
-      layoutMeasurement
+      layoutMeasurement,
+      contentSize
     } = event.nativeEvent;
     offset.current = contentOffset.y;
     viewport.current = layoutMeasurement.height;
+    if (contentSize?.height) contentHeight.current = contentSize.height;
+    report();
     if (onStartReached) {
       if (contentOffset.y <= onStartReachedThreshold) {
         if (startArmed.current) {
@@ -232,16 +503,45 @@ const AiChatThread = exports.AiChatThread = /*#__PURE__*/(0, _react.forwardRef)(
       }
     }
     onScroll?.(event);
-  }, [onScroll, onStartReached, onStartReachedThreshold]);
+  }, [onScroll, onStartReached, onStartReachedThreshold, report]);
   const onLayout = (0, _react.useCallback)(event => {
     viewport.current = event.nativeEvent.layout.height;
-  }, []);
+    report();
+  }, [report]);
   const onContentSizeChange = (0, _react.useCallback)((_width, height) => {
     const previous = lastHeight.current;
     const grew = height > previous + 0.5;
     const first = previous === 0;
     lastHeight.current = height;
-    if (!grew || first) return;
+    contentHeight.current = height;
+    const shift = insetShift.current;
+    insetShift.current = {
+      top: 0,
+      bottom: 0
+    };
+    report();
+    if (first) return;
+
+    // Exactly the chrome's padding changed (a composer growing, the header
+    // measuring in): hold the reader still instead of following. At the end
+    // they stay at the end, unanimated; mid-thread, a top shift is absorbed
+    // into the offset so the turn they are on does not move.
+    const chromeShift = shift.top + shift.bottom;
+    if (chromeShift !== 0 && Math.abs(height - previous - chromeShift) < 1) {
+      const fromBottom = previous - offset.current - viewport.current;
+      if (fromBottom <= EDGE_THRESHOLD) {
+        scrollRef.current?.scrollToEnd({
+          animated: false
+        });
+      } else if (offset.current > 0 && shift.top !== 0) {
+        scrollRef.current?.scrollTo({
+          y: offset.current + shift.top,
+          animated: false
+        });
+      }
+      return;
+    }
+    if (!grew) return;
 
     // A page landing above the reader: keep the turn they are on where it is.
     if (maintainStartPosition && pageOut.current) {
@@ -292,8 +592,15 @@ const AiChatThread = exports.AiChatThread = /*#__PURE__*/(0, _react.forwardRef)(
       gap: 12,
       paddingLeft: 16,
       paddingRight: 16,
-      paddingTop: 16
+      paddingTop: THREAD_PAD_TOP + (chrome ? chrome.insets.top : 0),
+      ...(chrome ? {
+        paddingBottom: chrome.insets.bottom
+      } : null)
     },
+    scrollIndicatorInsets: chrome ? {
+      top: chrome.insets.top,
+      bottom: chrome.insets.bottom
+    } : undefined,
     children: children
   });
 });