@oxy.so/bloom 4.22.2 → 4.23.0

package/lib/typescript/module/hooks/use-textarea-autosize.d.ts

@@ -0,0 +1,61 @@
+import { type RefObject } from 'react';
+import type { TextInput } from 'react-native';
+/**
+ * The web half of a composer's autosize: how tall its draft is, measured from
+ * the `<textarea>` react-native-web renders. Native reads
+ * `onContentSizeChange` and never calls this.
+ *
+ * `scrollHeight` never falls below the height already applied, so it reports
+ * growth exactly but cannot report shrinking. The old measurement collapsed the
+ * live field to `0px` before EVERY read and restored it after — and a
+ * collapsed field is a different page: each keystroke paid for laying the
+ * whole document out three times (collapse, read, restore), 23–27 ms a key
+ * beside a 1,000-message conversation, against 6–8 ms without the collapse.
+ *
+ * So the field is collapsed only when the draft could have got SHORTER:
+ *
+ *   - an edit that only INSERTED characters (typing, pasting, an IME
+ *     committing) cannot remove a line, so `scrollHeight` is read as it
+ *     stands: one layout, the same one the frame was going to do anyway.
+ *   - a field already at its floor cannot shrink, so it is never collapsed.
+ *   - anything else — a deletion, a replacement, a programmatic `value` such as
+ *     the clear after send, a change of floor — collapses, reads and restores
+ *     in the same task, so nothing is painted in between.
+ *
+ * The one thing insertion cannot promise is soft-wrap: inserting a character
+ * could in principle reflow a wrapped word onto fewer lines. The field then
+ * keeps one line too many until the next edit that deletes, which is the
+ * failure the old measurement would have fixed a keystroke earlier — not a
+ * clipped draft.
+ */
+export interface TextareaAutosizeOptions {
+    /** Measure at all — `IS_WEB`. Native measures through `onContentSizeChange`. */
+    enabled: boolean;
+    /** The height the field has now, as last applied by the caller. */
+    height: number;
+    /** The smallest height the field is drawn at; a field there cannot shrink. */
+    minHeight: number;
+    /** Receives the draft's content height, in px, whenever it is measured. */
+    onMeasure: (contentHeight: number) => void;
+}
+/** The DOM surface this reads and writes — `HTMLTextAreaElement`, narrowed. */
+export interface AutosizeNode {
+    style: {
+        height: string;
+    };
+    scrollHeight: number;
+}
+/**
+ * Whether `next` is `previous` with characters only INSERTED — at one place,
+ * nothing removed or replaced. A common prefix plus a common suffix that
+ * together cover all of `previous` means every old character survived.
+ */
+export declare function isPureInsertion(previous: string, next: string): boolean;
+/**
+ * The content height of `node`. With `collapse` it zeroes the height first so
+ * `scrollHeight` can report LESS than the field's current height, and puts the
+ * height back before returning.
+ */
+export declare function measureTextarea(node: AutosizeNode, collapse: boolean): number;
+export declare function useTextareaAutosize(ref: RefObject<TextInput | null>, text: string, { enabled, height, minHeight, onMeasure }: TextareaAutosizeOptions): void;
+//# sourceMappingURL=use-textarea-autosize.d.ts.map

package/lib/typescript/module/hooks/use-textarea-autosize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-textarea-autosize.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-textarea-autosize.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,uBAAuB;IACtC,gFAAgF;IAChF,OAAO,EAAE,OAAO,CAAC;IACjB,mEAAmE;IACnE,MAAM,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,SAAS,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAcvE;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAO7E;AAED,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,EAChC,IAAI,EAAE,MAAM,EACZ,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,uBAAuB,GACjE,IAAI,CAkBN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.22.2",
+  "version": "4.23.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",

package/src/chat-composer/ChatComposer.tsx

@@ -8,7 +8,7 @@
  * app owns drafts per conversation and a composer that kept its own would lose
  * them on every navigation.
  */
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   TextInput,
   View,
@@ -31,6 +31,7 @@ import { RiForbidLine } from '../icons/remix/RiForbidLine';
 import { RiMic2Line } from '../icons/remix/RiMic2Line';
 import { RiSendPlaneLine } from '../icons/remix/RiSendPlaneLine';
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -175,19 +176,16 @@ export function ChatComposer({
    *
    * They are not interchangeable: react-native-web reports `scrollHeight`,
    * which never falls below the height already applied, so a field grown to six
-   * lines and then emptied would stay six lines tall. Collapsing the node to
-   * zero first and restoring it in the same frame is what makes it SHRINK.
+   * lines and then emptied would stay six lines tall. `useTextareaAutosize`
+   * collapses the node to measure it only when the draft may have got SHORTER —
+   * collapsing on every keystroke re-laid-out the whole page three times a key.
    */
-  useLayoutEffect(() => {
-    if (!IS_WEB) return;
-    const node = localRef.current as unknown as HTMLTextAreaElement | null;
-    if (!node || typeof node.scrollHeight !== 'number' || !node.style) return;
-    const previous = node.style.height;
-    node.style.height = '0px';
-    const measured = node.scrollHeight;
-    node.style.height = previous;
-    if (measured > 0) setContentHeight(measured);
-  }, [text, minHeight]);
+  useTextareaAutosize(localRef, text, {
+    enabled: IS_WEB,
+    height,
+    minHeight,
+    onMeasure: setContentHeight,
+  });
 
   const onContentSizeChange = useCallback(
     (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {

package/src/composer-panel/ComposerPanelBase.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   TextInput,
   View,
@@ -17,6 +17,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography';
@@ -175,18 +176,15 @@ export function ComposerPanelBase({
   );
 
   // The prompt grows with its text, one 20px line at a time, up to 200 before it
-  // scrolls. Web measures the textarea from zero (so it also shrinks back);
-  // native reads the content size.
+  // scrolls. Web measures the textarea, collapsing it only when the draft may
+  // have got shorter (`useTextareaAutosize`); native reads the content size.
   const [height, setHeight] = useState(PROMPT_LINE);
-  useLayoutEffect(() => {
-    if (!IS_WEB) return;
-    const node = fieldRef.current as unknown as { style?: { height: string }; scrollHeight?: number } | null;
-    if (!node?.style || typeof node.scrollHeight !== 'number') return;
-    node.style.height = '0px';
-    const next = Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, node.scrollHeight));
-    node.style.height = `${next}px`;
-    setHeight(next);
-  }, [text]);
+  useTextareaAutosize(fieldRef, text, {
+    enabled: IS_WEB,
+    height,
+    minHeight: PROMPT_LINE,
+    onMeasure: (content) => setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, content))),
+  });
   const onContentSizeChange = useCallback(
     (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
       if (IS_WEB) return;

package/src/composer-panel/ComposerPillBase.tsx

@@ -16,6 +16,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RadioIndicator } from '../radio-indicator';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -459,6 +460,15 @@ export function ComposerPillBase({
   const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
   const [modelWidth, setModelWidth] = useState(0);
 
+  const fieldRef = useRef<TextInput | null>(null);
+  const setFieldRef = useCallback(
+    (node: TextInput | null) => {
+      fieldRef.current = node;
+      if (inputRef) (inputRef as React.MutableRefObject<TextInput | null>).current = node;
+    },
+    [inputRef],
+  );
+
   // The add control shares the canonical inset and hover surfaces.
   const addPalette: ComposerPalette = useMemo(() => {
     if (glass) return { ...palette, add: 'transparent', addHover: 'transparent' };
@@ -547,6 +557,22 @@ export function ComposerPillBase({
   const pillHeight = PILL_HEIGHT + (lines - 1) * LINE_HEIGHT;
   const multiLine = lines > 1;
 
+  /*
+   * On web the field is measured, not reported. react-native-web's
+   * `onContentSizeChange` reads `scrollHeight` on input only, and that never
+   * falls below the height already applied: a pill grown to four lines stayed
+   * four lines tall after the draft was deleted, and after send — a
+   * programmatic clear fires no input at all. `useTextareaAutosize` measures on
+   * every change of the draft and collapses the field only when it may have
+   * got shorter.
+   */
+  useTextareaAutosize(fieldRef, text, {
+    enabled: IS_WEB,
+    height: fieldHeight,
+    minHeight: LINE_HEIGHT,
+    onMeasure: setContentHeight,
+  });
+
   const pillStyle: WebCssStyle = {
     width: '100%',
     height: pillHeight,
@@ -593,7 +619,7 @@ export function ComposerPillBase({
 
       <View style={fieldStyle}>
         <TextInput
-          ref={inputRef}
+          ref={setFieldRef}
           {...dataHook('bloomComposerInput')}
           testID={testID ? `${testID}-input` : undefined}
           accessibilityLabel={labels.message}
@@ -609,7 +635,7 @@ export function ComposerPillBase({
           cursorColor={palette.accent500}
           returnKeyType="send"
           multiline
-          onContentSizeChange={(event) => setContentHeight(event.nativeEvent.contentSize.height)}
+          onContentSizeChange={IS_WEB ? undefined : (event) => setContentHeight(event.nativeEvent.contentSize.height)}
           style={{
             width: '100%',
             height: fieldHeight,

package/src/hooks/use-textarea-autosize.ts

@@ -0,0 +1,106 @@
+import { useLayoutEffect, useRef, type RefObject } from 'react';
+import type { TextInput } from 'react-native';
+
+/**
+ * The web half of a composer's autosize: how tall its draft is, measured from
+ * the `<textarea>` react-native-web renders. Native reads
+ * `onContentSizeChange` and never calls this.
+ *
+ * `scrollHeight` never falls below the height already applied, so it reports
+ * growth exactly but cannot report shrinking. The old measurement collapsed the
+ * live field to `0px` before EVERY read and restored it after — and a
+ * collapsed field is a different page: each keystroke paid for laying the
+ * whole document out three times (collapse, read, restore), 23–27 ms a key
+ * beside a 1,000-message conversation, against 6–8 ms without the collapse.
+ *
+ * So the field is collapsed only when the draft could have got SHORTER:
+ *
+ *   - an edit that only INSERTED characters (typing, pasting, an IME
+ *     committing) cannot remove a line, so `scrollHeight` is read as it
+ *     stands: one layout, the same one the frame was going to do anyway.
+ *   - a field already at its floor cannot shrink, so it is never collapsed.
+ *   - anything else — a deletion, a replacement, a programmatic `value` such as
+ *     the clear after send, a change of floor — collapses, reads and restores
+ *     in the same task, so nothing is painted in between.
+ *
+ * The one thing insertion cannot promise is soft-wrap: inserting a character
+ * could in principle reflow a wrapped word onto fewer lines. The field then
+ * keeps one line too many until the next edit that deletes, which is the
+ * failure the old measurement would have fixed a keystroke earlier — not a
+ * clipped draft.
+ */
+export interface TextareaAutosizeOptions {
+  /** Measure at all — `IS_WEB`. Native measures through `onContentSizeChange`. */
+  enabled: boolean;
+  /** The height the field has now, as last applied by the caller. */
+  height: number;
+  /** The smallest height the field is drawn at; a field there cannot shrink. */
+  minHeight: number;
+  /** Receives the draft's content height, in px, whenever it is measured. */
+  onMeasure: (contentHeight: number) => void;
+}
+
+/** The DOM surface this reads and writes — `HTMLTextAreaElement`, narrowed. */
+export interface AutosizeNode {
+  style: { height: string };
+  scrollHeight: number;
+}
+
+/**
+ * Whether `next` is `previous` with characters only INSERTED — at one place,
+ * nothing removed or replaced. A common prefix plus a common suffix that
+ * together cover all of `previous` means every old character survived.
+ */
+export function isPureInsertion(previous: string, next: string): boolean {
+  const length = previous.length;
+  if (next.length < length) return false;
+  let prefix = 0;
+  while (prefix < length && previous.charCodeAt(prefix) === next.charCodeAt(prefix)) prefix++;
+  if (prefix === length) return true;
+  let suffix = 0;
+  while (
+    suffix < length - prefix &&
+    previous.charCodeAt(length - 1 - suffix) === next.charCodeAt(next.length - 1 - suffix)
+  ) {
+    suffix++;
+  }
+  return prefix + suffix >= length;
+}
+
+/**
+ * The content height of `node`. With `collapse` it zeroes the height first so
+ * `scrollHeight` can report LESS than the field's current height, and puts the
+ * height back before returning.
+ */
+export function measureTextarea(node: AutosizeNode, collapse: boolean): number {
+  if (!collapse) return node.scrollHeight;
+  const previous = node.style.height;
+  node.style.height = '0px';
+  const measured = node.scrollHeight;
+  node.style.height = previous;
+  return measured;
+}
+
+export function useTextareaAutosize(
+  ref: RefObject<TextInput | null>,
+  text: string,
+  { enabled, height, minHeight, onMeasure }: TextareaAutosizeOptions,
+): void {
+  // What the field held at the last measurement, and the floor it was held to.
+  const last = useRef<{ text: string; minHeight: number } | null>(null);
+  const latest = useRef({ height, onMeasure });
+  latest.current = { height, onMeasure };
+
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const node = ref.current as unknown as AutosizeNode | null;
+    if (!node?.style || typeof node.scrollHeight !== 'number') return;
+    const previous = last.current;
+    last.current = { text, minHeight };
+    const onlyGrew =
+      previous !== null && previous.minHeight === minHeight && isPureInsertion(previous.text, text);
+    const collapse = !onlyGrew && latest.current.height > minHeight;
+    const measured = measureTextarea(node, collapse);
+    if (measured > 0) latest.current.onMeasure(measured);
+  }, [enabled, ref, text, minHeight]);
+}