fix(app): keep composer layout stable across chat and workspace screens (#4973)

* fix(app): dock the New workspace composer like a chat on phones Only the composer is bounded by the viewport; the setup fields sit above it in a bottom-anchored stack that moves up as the draft grows. The keyboard reservation is retained on every screen, so the composer keeps one height across keyboard transitions. Removes the per-screen reserve policy. * fix(app): share composer docking across mobile hosts Extract chat's retained capacity and platform keyboard motion so chat, workspace drafts, and New workspace share one sizing and dismissal boundary. Keep the native drivers and settled portal reconciliation unchanged. * fix(app): preserve overlays in centered composer docks Honor the optional overlay child in both layouts so changing dock placement does not silently discard part of its content. * test(app): resolve keyboard controller through its web entry The shared keyboard entry point makes stream tests load the provider. Keep its real ESM dependencies inside the Vitest resolver so CommonJS does not bypass the React Native web alias and parse native Flow sources. * fix(app): keep native chat scrolling responsive Place keyboard dismissal behind scrollable content so an idle Android Fabric JS responder cannot intercept native drags. Keep decorative form padding transparent to iOS hit testing and exercise idle native scrolling after submission from every composer host.
2026-11-06 16:34:36 +00:00 · 2026-09-16 23:43:15 +02:00
parent c7db3c5a8c
commit 6830c46e9a
39 changed files with 1054 additions and 544 deletions
@@ -0,0 +1,150 @@
+import { ComposerDockBackground } from "./internal/background";
+export { ComposerDockBackground } from "./internal/background";
+import { ScrollView } from "@/components/ui/scroll-view";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { HEADER_INNER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { KeyboardTranslateView } from "@/keyboard/shift";
+import { createContext, useCallback, useContext, type ReactNode } from "react";
+import { View, type LayoutChangeEvent, type ViewProps, StyleSheet } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  useDerivedValue,
+  useAnimatedReaction,
+  type SharedValue,
+} from "react-native-reanimated";
+import { useKeyboardShift } from "@/keyboard/shift";
+import { updateComposerCapacity, type ComposerCapacity } from "./internal/capacity";
+
+const ViewportCapacity = createContext<SharedValue<number | undefined> | null>(null);
+
+interface ComposerViewportProps extends ViewProps {
+  bottomInset?: number;
+  centered?: boolean;
+}
+
+/** Measure the stationary space below the header, outside keyboard translation. */
+function ComposerViewport({
+  children,
+  onLayout,
+  bottomInset = 0,
+  centered = false,
+  ...props
+}: ComposerViewportProps) {
+  const measuredHeight = useSharedValue(0);
+  const sizing = useSharedValue<ComposerCapacity | undefined>(undefined);
+  const { layoutShift } = useKeyboardShift();
+  useAnimatedReaction(
+    () => ({
+      height: measuredHeight.value,
+      bottomInset,
+      keyboardShift: layoutShift.value,
+      centered,
+    }),
+    (geometry) => {
+      if (geometry.height <= 0) return;
+      sizing.value = updateComposerCapacity(sizing.value, geometry);
+    },
+    [],
+  );
+  const capacity = useDerivedValue(() => sizing.value?.capacity);
+  const measureViewport = useCallback(
+    (event: LayoutChangeEvent) => {
+      measuredHeight.value = event.nativeEvent.layout.height;
+      onLayout?.(event);
+    },
+    [measuredHeight, onLayout],
+  );
+
+  return (
+    <View testID="composer-viewport" {...props} onLayout={measureViewport} collapsable={false}>
+      <ViewportCapacity.Provider value={capacity}>{children}</ViewportCapacity.Provider>
+    </View>
+  );
+}
+
+/** Bound the complete composer (including its controls), not just the text input. */
+function ComposerViewportContent({ style, ...props }: ViewProps) {
+  const capacity = useContext(ViewportCapacity);
+  if (!capacity) throw new Error("ComposerViewportContent requires ComposerViewport");
+  const constraint = useAnimatedStyle(() => ({
+    // Only viewport changes and keyboard start/end events trigger layout. Motion
+    // stays in KeyboardTranslateView and never changes this constraint per frame.
+    maxHeight: capacity.value,
+  }));
+
+  return (
+    <Animated.View testID="composer-viewport-content" {...props} style={[style, constraint]} />
+  );
+}
+
+interface ComposerDockProps {
+  children: [ReactNode, ReactNode, ReactNode?];
+  centered?: boolean;
+}
+
+/** The stationary viewport, translated surface, and bounded composer are one owner. */
+export function ComposerDock({
+  children: [content, composer, overlay],
+  centered = false,
+}: ComposerDockProps) {
+  const insets = useSafeAreaInsets();
+  // Preserve the existing centered form's visual balance on tablets.
+  const bottomInset = centered ? HEADER_INNER_HEIGHT + 24 : 0;
+  if (centered) {
+    return (
+      <ComposerViewport
+        style={[dockStyles.centeredViewport, { paddingBottom: bottomInset }]}
+        bottomInset={bottomInset}
+        centered
+      >
+        <KeyboardTranslateView style={dockStyles.centered}>
+          <ComposerViewportContent style={dockStyles.composer}>
+            <ScrollView style={dockStyles.setup} keyboardShouldPersistTaps="handled">
+              {content}
+            </ScrollView>
+            <ComposerViewportContent style={dockStyles.centeredComposer}>
+              {composer}
+            </ComposerViewportContent>
+          </ComposerViewportContent>
+          {overlay}
+        </KeyboardTranslateView>
+      </ComposerViewport>
+    );
+  }
+  return (
+    <ComposerViewport style={dockStyles.viewport}>
+      <KeyboardTranslateView style={dockStyles.surface}>
+        <View
+          testID="composer-dock-content"
+          collapsable={false}
+          style={dockStyles.content}
+          pointerEvents="box-none"
+        >
+          {/* A responder ancestor intercepts native scroll drags on Android Fabric.
+              Only unclaimed background touches may reach this sibling. */}
+          <ComposerDockBackground style={StyleSheet.absoluteFill} />
+          <View style={dockStyles.content} pointerEvents="box-none">
+            {content}
+          </View>
+        </View>
+        <ComposerViewportContent style={dockStyles.composer}>
+          <View style={[dockStyles.composer, { paddingBottom: insets.bottom }]}>{composer}</View>
+        </ComposerViewportContent>
+        {overlay}
+      </KeyboardTranslateView>
+    </ComposerViewport>
+  );
+}
+
+const dockStyles = StyleSheet.create({
+  viewport: { flex: 1, overflow: "hidden" },
+  surface: { flex: 1 },
+  content: { flex: 1, justifyContent: "flex-end" },
+  composer: { width: "100%", flexShrink: 1 },
+  centeredViewport: { flex: 1, alignItems: "center", justifyContent: "center" },
+  centered: { flexShrink: 1, width: "100%", maxWidth: MAX_CONTENT_WIDTH },
+  // Reserve the composer's own capped height before the setup scroll view shrinks.
+  centeredComposer: { width: "100%", flexShrink: 0 },
+  setup: { flexGrow: 0, flexShrink: 1, minHeight: 0 },
+});
@@ -0,0 +1,51 @@
+export { ComposerDockBackground } from "./internal/background";
+import { ScrollView } from "@/components/ui/scroll-view";
+import type { ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
+import { HEADER_INNER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+
+interface ComposerDockProps {
+  children: [ReactNode, ReactNode, ReactNode?];
+  centered?: boolean;
+}
+
+export function ComposerDock({
+  children: [content, composer, overlay],
+  centered = false,
+}: ComposerDockProps) {
+  if (centered) {
+    return (
+      <View style={styles.centered}>
+        <View style={styles.form}>
+          <ScrollView style={styles.setup} keyboardShouldPersistTaps="handled">
+            {content}
+          </ScrollView>
+          <View style={styles.centeredComposer}>{composer}</View>
+          {overlay}
+        </View>
+      </View>
+    );
+  }
+  return (
+    <View style={styles.surface}>
+      <View style={styles.content}>{content}</View>
+      <View style={styles.composer}>{composer}</View>
+      {overlay}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  surface: { flex: 1, overflow: "hidden" },
+  content: { flex: 1, justifyContent: "flex-end" },
+  composer: { width: "100%", flexShrink: 1 },
+  centered: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingBottom: HEADER_INNER_HEIGHT + 24,
+  },
+  form: { flexShrink: 1, width: "100%", maxWidth: MAX_CONTENT_WIDTH },
+  centeredComposer: { flexShrink: 0 },
+  setup: { flexGrow: 0, flexShrink: 1, minHeight: 0 },
+});
@@ -0,0 +1,6 @@
+import { Keyboard, Pressable, type ViewProps } from "react-native";
+
+/** Use behind scrollable content as a sibling, never as its responder ancestor. */
+export function ComposerDockBackground(props: ViewProps) {
+  return <Pressable {...props} accessible={false} onPress={Keyboard.dismiss} />;
+}
@@ -0,0 +1,5 @@
+import { View, type ViewProps } from "react-native";
+
+export function ComposerDockBackground(props: ViewProps) {
+  return <View {...props} />;
+}
@@ -2,47 +2,37 @@ import { describe, expect, it } from "vitest";
 import { resolveComposerCapacity, updateComposerCapacity } from "./capacity";

 describe("composer viewport", () => {
-  it("preserves the editing capacity when the keyboard closes on a docked composer", () => {
+  it("preserves the editing capacity when the keyboard closes", () => {
    const viewport = { height: 582, bottomInset: 24, centered: false };
-    const open = updateComposerCapacity(undefined, { ...viewport, keyboardShift: 308 }, "retain");
-    const closed = updateComposerCapacity(open, { ...viewport, keyboardShift: 0 }, "retain");
+    const open = updateComposerCapacity(undefined, { ...viewport, keyboardShift: 308 });
+    const closed = updateComposerCapacity(open, { ...viewport, keyboardShift: 0 });
    expect(open.capacity).toBe(245);
    expect(closed.capacity).toBe(open.capacity);
-    expect(
-      updateComposerCapacity(closed, { ...viewport, keyboardShift: 250 }, "retain").capacity,
-    ).toBe(303);
-  });
-
-  it("releases the whole viewport when the keyboard closes on a form", () => {
-    const viewport = { height: 582, bottomInset: 24, centered: false };
-    const open = updateComposerCapacity(undefined, { ...viewport, keyboardShift: 308 }, "release");
-    const closed = updateComposerCapacity(open, { ...viewport, keyboardShift: 0 }, "release");
-    expect(open.capacity).toBe(245);
-    expect(closed.capacity).toBe(553);
-    expect(
-      updateComposerCapacity(closed, { ...viewport, keyboardShift: 308 }, "release").capacity,
-    ).toBe(245);
+    expect(updateComposerCapacity(closed, { ...viewport, keyboardShift: 250 }).capacity).toBe(303);
  });

  it("remeasures the viewport without forgetting the keyboard reservation", () => {
-    const open = updateComposerCapacity(
-      undefined,
-      { height: 582, bottomInset: 24, centered: false, keyboardShift: 308 },
-      "retain",
-    );
+    const open = updateComposerCapacity(undefined, {
+      height: 582,
+      bottomInset: 24,
+      centered: false,
+      keyboardShift: 308,
+    });
    expect(
-      updateComposerCapacity(
-        open,
-        { height: 650, bottomInset: 24, centered: false, keyboardShift: 0 },
-        "retain",
-      ).capacity,
+      updateComposerCapacity(open, {
+        height: 650,
+        bottomInset: 24,
+        centered: false,
+        keyboardShift: 0,
+      }).capacity,
    ).toBe(313);
    expect(
-      updateComposerCapacity(
-        open,
-        { height: 0, bottomInset: 24, centered: false, keyboardShift: 0 },
-        "retain",
-      ),
+      updateComposerCapacity(open, {
+        height: 0,
+        bottomInset: 24,
+        centered: false,
+        keyboardShift: 0,
+      }),
    ).toEqual(open);
  });
  it("leaves five points below the header for a bottom-anchored composer", () => {
@@ -10,14 +10,6 @@ export interface ComposerCapacity {
  capacity: number;
 }

-/**
- * What the closed keyboard leaves behind. A docked chat composer retains its last
- * editing reservation so a capped draft does not expand over the stream. A form
- * that scrolls inside the constrained space releases it so the whole form is
- * visible again once the keyboard is gone.
- */
-export type KeyboardReservePolicy = "retain" | "release";
-
 export function resolveComposerCapacity(input: ComposerGeometry): number {
  "worklet";
  // A centered form grows upward by half its height. Reserve both halves so
@@ -30,15 +22,13 @@ export function resolveComposerCapacity(input: ComposerGeometry): number {
 export function updateComposerCapacity(
  previous: ComposerCapacity | undefined,
  input: ComposerGeometry,
-  policy: KeyboardReservePolicy,
 ): ComposerCapacity {
  "worklet";
  if (input.height <= 0 && previous) return previous;
-  // A subsequent keyboard opening always supplies the next reservation.
+  // Closing the keyboard moves the composer; it does not enlarge its editing
+  // capacity. A subsequent keyboard opening supplies the next reservation.
  const keyboardReserve =
-    input.keyboardShift > 0 || policy === "release"
-      ? input.keyboardShift
-      : (previous?.keyboardReserve ?? 0);
+    input.keyboardShift > 0 ? input.keyboardShift : (previous?.keyboardReserve ?? 0);
  return {
    keyboardReserve,
    capacity: resolveComposerCapacity({ ...input, keyboardShift: keyboardReserve }),
@@ -2,9 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Keyboard, ScrollView, StyleSheet as RNStyleSheet, Text, View } from "react-native";
 import { useTranslation } from "react-i18next";
 import { StyleSheet } from "react-native-unistyles";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { KeyboardTranslateView } from "@/components/keyboard-translate-view";
-import { ComposerViewport, ComposerViewportContent } from "@/composer/viewport";
+import { ComposerDock } from "@/composer/dock";
 import { useContainerWidthBelow } from "@/hooks/use-container-width";
 import invariant from "tiny-invariant";
 import { Composer } from "@/composer";
@@ -329,7 +327,6 @@ export function WorkspaceDraftAgentTab({
  onOpenImportSheet,
 }: WorkspaceDraftAgentTabProps) {
  const { t } = useTranslation();
-  const insets = useSafeAreaInsets();
  const client = useHostRuntimeClient(serverId);
  const workspaceFields = useWorkspaceFields(serverId, workspaceId, (w) => ({
    workspaceDirectory: w.workspaceDirectory,
@@ -612,11 +609,6 @@ export function WorkspaceDraftAgentTab({
    focusInputRef.current = focus;
  }, []);

-  const inputAreaWrapperStyle = useMemo(
-    () => [animatedStaticStyles.inputAreaWrapper, { paddingBottom: insets.bottom }],
-    [insets.bottom],
-  );
-
  const handleDropdownCloseFocus = useCallback(() => {
    focusInputRef.current?.();
  }, []);
@@ -629,77 +621,74 @@ export function WorkspaceDraftAgentTab({
    }),
    [composerState.agentControls, handleDropdownCloseFocus, isSubmitting],
  );
-  return (
-    <ComposerViewport style={styles.container} bottomInset={insets.bottom} keyboardReserve="retain">
-      <FileDropZone style={styles.container}>
-        <View style={styles.contentContainer}>
-          {isSubmitting && draftAgent ? (
-            <View style={styles.streamContainer}>
-              <AgentStreamView
-                agentId={tabId}
-                serverId={serverId}
-                context={draftAgent}
-                streamItems={submittedStreamItems}
-                pendingMessageSubmissions={pendingMessageSubmissions}
-                turnPresentation={turnPresentation}
-                pendingPermissions={EMPTY_PENDING_PERMISSIONS}
-                onOpenWorkspaceFile={onOpenWorkspaceFile}
-              />
-            </View>
-          ) : (
-            <ScrollView
-              style={styles.scrollView}
-              contentContainerStyle={styles.configScrollContent}
-            >
-              <View style={styles.configSection}>
-                {formErrorMessage ? (
-                  <View style={styles.errorContainer}>
-                    <Text style={styles.errorText}>{formErrorMessage}</Text>
-                  </View>
-                ) : null}
-              </View>
-            </ScrollView>
-          )}
+  const dockContent = (
+    <View style={styles.contentContainer}>
+      {isSubmitting && draftAgent ? (
+        <View style={styles.streamContainer}>
+          <AgentStreamView
+            agentId={tabId}
+            serverId={serverId}
+            context={draftAgent}
+            streamItems={submittedStreamItems}
+            pendingMessageSubmissions={pendingMessageSubmissions}
+            turnPresentation={turnPresentation}
+            pendingPermissions={EMPTY_PENDING_PERMISSIONS}
+            onOpenWorkspaceFile={onOpenWorkspaceFile}
+          />
        </View>
-
-        <KeyboardTranslateView style={inputAreaWrapperStyle} onLayout={onInputAreaLayout}>
-          <ComposerViewportContent style={animatedStaticStyles.inputAreaWrapper}>
-            {importPillPress ? (
-              <View style={styles.importPillRow}>
-                <View style={styles.importPillContent}>
-                  <ComposerImportPill onPress={importPillPress} />
-                </View>
+      ) : (
+        <ScrollView style={styles.scrollView} contentContainerStyle={styles.configScrollContent}>
+          <View style={styles.configSection}>
+            {formErrorMessage ? (
+              <View style={styles.errorContainer}>
+                <Text style={styles.errorText}>{formErrorMessage}</Text>
              </View>
            ) : null}
-            <Composer
-              agentId={tabId}
-              serverId={serverId}
-              workspaceId={workspaceId}
-              externalKeyboardShift
-              isPaneFocused={isPaneFocused}
-              onSubmitMessage={handleCreateFromInput}
-              isSubmitLoading={isSubmitting}
-              blurOnSubmit={true}
-              textSource={draftInput.textSource}
-              onChangeText={draftInput.editText}
-              textReplacement={draftInput.textReplacement}
-              attachments={draftInput.attachments}
-              attachmentScopeKeys={attachmentScopeKeys}
-              onOpenWorkspaceAttachment={handleOpenWorkspaceAttachment}
-              onChangeAttachments={draftInput.setAttachments}
-              cwd={composerState.workingDir}
-              clearDraft={draftInput.clear}
-              autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
-              autoFocusKey={String(draftInput.attachmentFocusRequestId)}
-              onFocusInput={handleFocusInputCallback}
-              commandDraftConfig={composerState.commandDraftConfig}
-              agentControls={composerAgentControls}
-              isCompactLayout={isCompactComposerLayout}
-            />
-          </ComposerViewportContent>
-        </KeyboardTranslateView>
-      </FileDropZone>
-    </ComposerViewport>
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+
+  return (
+    <FileDropZone style={styles.container}>
+      <ComposerDock>
+        {dockContent}
+        <View style={animatedStaticStyles.inputAreaWrapper} onLayout={onInputAreaLayout}>
+          {importPillPress ? (
+            <View style={styles.importPillRow}>
+              <View style={styles.importPillContent}>
+                <ComposerImportPill onPress={importPillPress} />
+              </View>
+            </View>
+          ) : null}
+          <Composer
+            agentId={tabId}
+            serverId={serverId}
+            workspaceId={workspaceId}
+            isPaneFocused={isPaneFocused}
+            onSubmitMessage={handleCreateFromInput}
+            isSubmitLoading={isSubmitting}
+            blurOnSubmit={true}
+            textSource={draftInput.textSource}
+            onChangeText={draftInput.editText}
+            textReplacement={draftInput.textReplacement}
+            attachments={draftInput.attachments}
+            attachmentScopeKeys={attachmentScopeKeys}
+            onOpenWorkspaceAttachment={handleOpenWorkspaceAttachment}
+            onChangeAttachments={draftInput.setAttachments}
+            cwd={composerState.workingDir}
+            clearDraft={draftInput.clear}
+            autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
+            autoFocusKey={String(draftInput.attachmentFocusRequestId)}
+            onFocusInput={handleFocusInputCallback}
+            commandDraftConfig={composerState.commandDraftConfig}
+            agentControls={composerAgentControls}
+            isCompactLayout={isCompactComposerLayout}
+          />
+        </View>
+      </ComposerDock>
+    </FileDropZone>
  );
 }

@@ -48,7 +48,6 @@ import {
  type DraftAgentControlsProps,
 } from "@/composer/agent-controls";
 import { ContextWindowMeter } from "@/components/context-window-meter";
-import { KeyboardTranslateView } from "@/components/keyboard-translate-view";
 import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
 import { selectAgentTurnPresentation, useSessionStore } from "@/stores/session-store";
 import { useFilePicker } from "@/hooks/use-file-picker";
@@ -989,8 +988,6 @@ interface ComposerProps {
  agentControls?: DraftAgentControlsProps;
  /** Extra styles merged onto the message input wrapper (e.g. elevated background). */
  inputWrapperStyle?: import("react-native").ViewStyle;
-  /** When true, a parent wrapper owns the keyboard shift, so the composer skips its own. */
-  externalKeyboardShift?: boolean;
  /** Optional panel/container layout breakpoint. Defaults to the screen breakpoint. */
  isCompactLayout?: boolean;
  /**
@@ -1278,7 +1275,6 @@ function ComposerContentImpl({
  onAttentionPromptSend,
  agentControls,
  inputWrapperStyle,
-  externalKeyboardShift,
  isCompactLayout: isCompactLayoutOverride,
  inputMode = "chat",
  readOnly = false,
@@ -2415,10 +2411,7 @@ function ComposerContentImpl({
        focusMessageInputForKeyboardAction={focusMessageInputForKeyboardAction}
        isMessageInputFocused={isMessageInputFocused}
      />
-      <KeyboardTranslateView
-        style={animatedStaticStyles.container}
-        enabled={!externalKeyboardShift}
-      >
+      <View style={animatedStaticStyles.container}>
        <AttachmentLightbox source={lightboxSource} onClose={handleLightboxClose} />
        {/* Input area */}
        <View style={inputAreaContainerStyle}>
@@ -2516,7 +2509,7 @@ function ComposerContentImpl({
            </View>
          </View>
        </View>
-      </KeyboardTranslateView>
+      </View>
    </>
  );
 }
@@ -1,79 +0,0 @@
-import { createContext, useCallback, useContext } from "react";
-import { View, type LayoutChangeEvent, type ViewProps } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  useDerivedValue,
-  useAnimatedReaction,
-  type SharedValue,
-} from "react-native-reanimated";
-import { useKeyboardShift } from "@/hooks/keyboard-shift-context";
-import {
-  updateComposerCapacity,
-  type ComposerCapacity,
-  type KeyboardReservePolicy,
-} from "./capacity";
-
-const ViewportCapacity = createContext<SharedValue<number | undefined> | null>(null);
-
-interface ComposerViewportProps extends ViewProps {
-  bottomInset?: number;
-  centered?: boolean;
-  keyboardReserve?: KeyboardReservePolicy;
-}
-
-/** Measure the stationary space below the header, outside keyboard translation. */
-export function ComposerViewport({
-  children,
-  onLayout,
-  bottomInset = 0,
-  centered = false,
-  keyboardReserve = "release",
-  ...props
-}: ComposerViewportProps) {
-  const measuredHeight = useSharedValue(0);
-  const sizing = useSharedValue<ComposerCapacity | undefined>(undefined);
-  const { layoutShift } = useKeyboardShift();
-  useAnimatedReaction(
-    () => ({
-      height: measuredHeight.value,
-      bottomInset,
-      keyboardShift: layoutShift.value,
-      centered,
-    }),
-    (geometry) => {
-      if (geometry.height <= 0) return;
-      sizing.value = updateComposerCapacity(sizing.value, geometry, keyboardReserve);
-    },
-    [keyboardReserve],
-  );
-  const capacity = useDerivedValue(() => sizing.value?.capacity);
-  const measureViewport = useCallback(
-    (event: LayoutChangeEvent) => {
-      measuredHeight.value = event.nativeEvent.layout.height;
-      onLayout?.(event);
-    },
-    [measuredHeight, onLayout],
-  );
-
-  return (
-    <View testID="composer-viewport" {...props} onLayout={measureViewport} collapsable={false}>
-      <ViewportCapacity.Provider value={capacity}>{children}</ViewportCapacity.Provider>
-    </View>
-  );
-}
-
-/** Bound the complete composer (including its controls), not just the text input. */
-export function ComposerViewportContent({ style, ...props }: ViewProps) {
-  const capacity = useContext(ViewportCapacity);
-  if (!capacity) throw new Error("ComposerViewportContent requires ComposerViewport");
-  const constraint = useAnimatedStyle(() => ({
-    // Only viewport changes and keyboard start/end events trigger layout. Motion
-    // stays in KeyboardTranslateView and never changes this constraint per frame.
-    maxHeight: capacity.value,
-  }));
-
-  return (
-    <Animated.View testID="composer-viewport-content" {...props} style={[style, constraint]} />
-  );
-}
@@ -1,20 +0,0 @@
-import { View, type ViewProps } from "react-native";
-
-interface ComposerViewportProps extends ViewProps {
-  bottomInset?: number;
-  centered?: boolean;
-  keyboardReserve?: "retain" | "release";
-}
-
-export function ComposerViewport({
-  bottomInset: _bottomInset,
-  centered: _centered,
-  keyboardReserve: _keyboardReserve,
-  ...props
-}: ComposerViewportProps) {
-  return <View {...props} />;
-}
-
-export function ComposerViewportContent(props: ViewProps) {
-  return <View {...props} />;
-}