panelui-native 0.75.0 → 0.76.0

package/src/components/ai-input/index.tsx

@@ -0,0 +1,1937 @@
+/**
+ * AIInput — the composer a person types a prompt into.
+ *
+ * ```tsx
+ * <AIInput value={value} onValueChange={setValue} onSubmit={send}>
+ *   <AIInput.Field placeholder="Chat with the model" />
+ *   <AIInput.Toolbar>
+ *     <AIInput.Action label="Add" icon={<PlusIcon />} onPress={openSheet} />
+ *     <AIInput.Pill label="Sonnet 4.6" detail="High" onPress={openModels} />
+ *     <AIInput.Action label="Dictate" icon={<MicIcon />} onPress={record} />
+ *     <AIInput.Submit />
+ *   </AIInput.Toolbar>
+ * </AIInput>
+ * ```
+ *
+ * ## The field grows, and then it stops
+ *
+ * It opens one line tall and follows what is typed into it up to `maxRows`,
+ * after which it holds that height and scrolls its own content. Five rows is
+ * the default because a composer that keeps growing eventually pushes its own
+ * send button off the bottom of the screen, and the row that carries the
+ * actions stays pinned to the bottom of the box either way.
+ *
+ * ## It does not record anything
+ *
+ * There is a recording state, and it draws a live meter, but nothing here
+ * touches the microphone. The app owns the recorder — the permission prompt,
+ * the session, the platform quirks — and passes back a `level` between 0 and 1
+ * along with a `status`. Pass a Reanimated shared value and a recorder
+ * reporting every 30ms never re-renders anything above this component.
+ *
+ * That division is what keeps the composer free of an audio dependency.
+ *
+ * ## Glass is iOS 26 and above
+ *
+ * The surfaces ask for the system material and get it where it exists. Below
+ * iOS 26, on Android, and for anyone with Reduce Transparency switched on,
+ * they are drawn as solid token surfaces instead. Both are finished looks; see
+ * `Glass` for why nothing is faked on the platforms without it.
+ *
+ * ## Where the props come from
+ *
+ * The root takes `ViewProps`. `Field` takes `TextInputProps`, so
+ * `keyboardType`, `maxLength`, `autoFocus` and the rest work as they always
+ * do. Every part takes `className`.
+ */
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  Pressable,
+  TextInput,
+  View,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+  type TextInputProps,
+  type ViewProps,
+} from 'react-native';
+import Animated, {
+  Easing,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  type EntryExitAnimationFunction,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { useDirection } from '../../hooks/use-direction';
+import {
+  AudioLinesIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  IconColorProvider,
+  MicIcon,
+  SendArrowIcon,
+  XIcon,
+} from '../../icons';
+import { hasNativeUI } from '../../native';
+import { AnimatedPressable } from '../../primitives/animated-pressable';
+import { Glass } from '../../primitives/glass';
+import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+import { BottomSheet } from '../bottom-sheet';
+import { Button } from '../button';
+import { Soundwave } from '../soundwave';
+import { Switch } from '../switch';
+import { AI_INPUT_METRICS, growthBounds, type AIInputSize } from './ai-input-growth';
+
+/** What the app is doing, which is what the trailing button offers to do next. */
+export type AIInputStatus = 'ready' | 'recording' | 'submitted' | 'streaming';
+
+/** Corner radius per size, in points. The material rounds itself to these. */
+const RADIUS = { sm: 22, md: 26, lg: 30 } as const;
+
+/**
+ * Circular control diameter per size.
+ *
+ * Deliberately under the 44pt touch minimum: these sit in a row inside a card
+ * with padding around it, and the card's own padding carries the target the
+ * finger actually gets. A 44pt circle here makes a toolbar that is taller than
+ * the field above it.
+ */
+const CONTROL = { sm: 26, md: 30, lg: 34 } as const;
+
+/**
+ * The row a platform-drawn control needs, and the space kept under it.
+ *
+ * `Button` frames a native icon button at 44pt — the number that ends the
+ * measurement chain rather than one that sets a look. A row shorter than that
+ * is a row its controls hang out of, over whatever is above them, and a row
+ * with no definite height at all is one they never lay out against: a hosted
+ * view only measures where something above it is fixed on both axes.
+ *
+ * The drawn controls are smaller and are laid out by the row itself, so this
+ * applies only when the controls have been handed over.
+ */
+const NATIVE_ROW_HEIGHT = 48;
+const NATIVE_ROW_FOOT = 4;
+
+const EASE = Easing.out(Easing.cubic);
+const HEIGHT_DURATION = 240;
+const ENTER_DURATION = 220;
+const EXIT_DURATION = 140;
+
+/**
+ * How far a pushed screen travels in, as a fraction of the sheet's width.
+ *
+ * A third rather than the whole width: the sheet is not a screen, and a slide
+ * the full width of it reads as the app navigating rather than as this surface
+ * going one level deeper.
+ */
+const SLIDE_FRACTION = 0.33;
+
+const aiInputVariants = tv({
+  slots: {
+    root: 'w-full',
+    field: 'w-full bg-transparent px-4 font-normal text-foreground',
+    // On one line the field is what takes up the slack between the controls,
+    // and the row's own padding already stands it off the edge.
+    fieldInline: 'flex-1 bg-transparent px-2 font-normal text-foreground',
+    /*
+     * Centred, not bottom-aligned.
+     *
+     * The stacked toolbar sits under the field, so it aligns to the bottom.
+     * Here the field is *between* the controls, and its box is not the height
+     * this component computes: a multiline TextInput carries a vertical inset
+     * of the platform's own on top of any padding given to it. Bottom-aligning
+     * a box whose real height is unknown puts its text below the controls
+     * beside it by however much that inset is — which is what kept happening.
+     *
+     * Centring does not need to know the height. Whatever the field's box
+     * turns out to be, its middle lines up with theirs, and the text sits in
+     * the middle of it.
+     */
+    row: 'w-full flex-row items-center gap-1.5 p-2',
+    toolbar: 'w-full flex-row items-center gap-2 px-2 pb-2',
+    spacer: 'flex-1',
+    pill: 'flex-row items-center gap-1.5 px-3',
+    recording: 'w-full flex-row items-center gap-3 px-2 pb-2',
+    meter: 'flex-1',
+  },
+  variants: {
+    size: {
+      sm: { toolbar: 'gap-1.5' },
+      md: {},
+      lg: { toolbar: 'gap-2.5' },
+    },
+    disabled: {
+      true: { root: 'opacity-60' },
+      false: {},
+    },
+  },
+  defaultVariants: { size: 'md', disabled: false },
+});
+
+/* -------------------------------------------------------------------------- */
+/* Root                                                                       */
+/* -------------------------------------------------------------------------- */
+
+interface AIInputContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  status: AIInputStatus;
+  size: AIInputSize;
+  level?: number | SharedValue<number>;
+  disabled: boolean;
+  native: boolean;
+  minRows: number;
+  maxRows: number;
+  focused: boolean;
+  setFocused: (focused: boolean) => void;
+  submit: () => void;
+  stop: () => void;
+  canVoice: boolean;
+  canStop: boolean;
+  recordCancel: () => void;
+  recordConfirm: () => void;
+  voice: () => void;
+}
+
+const AIInputContext = createContext<AIInputContextValue | null>(null);
+
+function useAIInput(component: string): AIInputContextValue {
+  const context = useContext(AIInputContext);
+  if (!context) throw new Error(`${component} must be used within an <AIInput>`);
+  return context;
+}
+
+/**
+ * The composer's context if there is one, and nothing if there is not.
+ *
+ * The controls that only want a size and an enabled state work anywhere — a
+ * sheet header, a voice-mode toolbar, a row of their own. Those surfaces
+ * render through a portal or as their own screen, so a root wrapped around the
+ * composer is not above them, and demanding one would make a button throw for
+ * being used where it was designed to be used.
+ */
+function useAIInputOptional(): AIInputContextValue | null {
+  return useContext(AIInputContext);
+}
+
+export interface AIInputProps extends Omit<ViewProps, 'children'> {
+  children?: ReactNode;
+  className?: string;
+  /** The prompt, when the app owns it. */
+  value?: string;
+  /** Called on every keystroke. */
+  onValueChange?: (value: string) => void;
+  /** The prompt to start with, when the composer owns it. */
+  defaultValue?: string;
+  /**
+   * What the app is doing. `ready` offers to send, `streaming` offers to stop,
+   * and `recording` swaps the toolbar for the meter and its two decisions.
+   */
+  status?: AIInputStatus;
+  /** Called with the prompt when it is sent. The composer does not clear itself. */
+  onSubmit?: (value: string) => void;
+  /** Called when the trailing button is pressed while `streaming`. */
+  onStop?: () => void;
+  /** Called when the voice button is pressed on an empty composer. */
+  onVoice?: () => void;
+  /** Called when a recording is thrown away. */
+  onRecordCancel?: () => void;
+  /** Called when a recording is accepted. */
+  onRecordConfirm?: () => void;
+  /**
+   * Input level, 0–1, from the app's own recorder. Pass a shared value to keep
+   * metering off the JS thread entirely. Omitted, the meter animates plausible
+   * motion so a screen can be built before any audio exists.
+   */
+  level?: number | SharedValue<number>;
+  /** Type scale and control size. */
+  size?: AIInputSize;
+  /** Nothing can be typed, pressed or sent. */
+  disabled?: boolean;
+  /**
+   * Draw the toolbar's controls as the platform's own buttons, in the system
+   * material — Liquid Glass on iOS 26, the platform's ordinary button style
+   * below it and on Android.
+   *
+   * The platform owns their colour, metrics and shape when this is on, so
+   * `className` and the theme tokens no longer reach them. The card behind
+   * them is still ours, and still glass. Needs the optional `@expo/ui`;
+   * without it the drawn controls are used and nothing breaks.
+   */
+  native?: boolean;
+  /** Rows the empty field is tall. */
+  minRows?: number;
+  /** Rows the field grows to before it holds that height and scrolls. */
+  maxRows?: number;
+  /** Lift the composer clear of the software keyboard. */
+  avoidKeyboard?: boolean;
+  /** How far above the bottom edge the composer already sits. */
+  keyboardBottomInset?: number;
+  /**
+   * Gap to leave between the composer and the top of the keyboard. A composer
+   * resting directly on the keys reads as part of them.
+   */
+  keyboardGap?: number;
+}
+
+function AIInputRoot({
+  children,
+  className,
+  value: valueProp,
+  onValueChange,
+  defaultValue = '',
+  status = 'ready',
+  onSubmit,
+  onStop,
+  onVoice,
+  onRecordCancel,
+  onRecordConfirm,
+  level,
+  size = 'md',
+  disabled = false,
+  native = false,
+  minRows = 1,
+  maxRows = 5,
+  avoidKeyboard = true,
+  keyboardBottomInset = 0,
+  keyboardGap = 8,
+  style,
+  ...props
+}: AIInputProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = valueProp !== undefined;
+  const value = isControlled ? valueProp : internalValue;
+  const [focused, setFocused] = useState(false);
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+
+  const submit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit?.(value);
+  }, [onSubmit, value]);
+
+  /*
+   * Whether the controls can actually be handed over.
+   *
+   * `native` is a request, not a fact: the toolkit is an optional peer, and
+   * without it `Button` quietly draws its own control instead — at the size
+   * *it* uses, which is not the size this row is built around. Asking for a
+   * platform control and getting a 44pt drawn one in a row shaped for a 30pt
+   * one is how the buttons ended up over the field.
+   *
+   * So the request is resolved against what is installed, once, and every part
+   * reads the answer rather than the ask.
+   */
+  const platformControls = native && hasNativeUI();
+
+  const context = useMemo<AIInputContextValue>(
+    () => ({
+      value,
+      setValue,
+      status,
+      size,
+      level,
+      disabled,
+      native: platformControls,
+      minRows,
+      maxRows,
+      focused,
+      setFocused,
+      submit,
+      canVoice: onVoice !== undefined,
+      canStop: onStop !== undefined,
+      stop: () => onStop?.(),
+      recordCancel: () => onRecordCancel?.(),
+      recordConfirm: () => onRecordConfirm?.(),
+      voice: () => onVoice?.(),
+    }),
+    [
+      value,
+      setValue,
+      status,
+      size,
+      level,
+      disabled,
+      platformControls,
+      minRows,
+      maxRows,
+      focused,
+      submit,
+      onStop,
+      onVoice,
+      onRecordCancel,
+      onRecordConfirm,
+      onVoice,
+    ]
+  );
+
+  const slots = aiInputVariants({ size, disabled });
+
+  /*
+   * Whether the card has to keep room at its foot for a row it does not lay
+   * out.
+   *
+   * A handed-over control is a hosted native view, and a hosted view settles
+   * where the platform puts it rather than where the row it is in ends up —
+   * which, in a card that is also sizing itself to the field above, is over
+   * that field. Reserving the row's height here and pinning the row into the
+   * reservation takes the question away: the field's box stops where the
+   * reservation starts, so a control that draws itself somewhere unexpected
+   * has nothing above it left to cover.
+   *
+   * Read from the children rather than tracked in state, so the card and the
+   * row agree on the first render instead of the second.
+   */
+  const hasNativeRow =
+    platformControls &&
+    Children.toArray(children).some(
+      (child) =>
+        isValidElement(child) &&
+        (child.type === AIInputToolbar || child.type === AIInputRecording)
+    );
+
+  const surface = (
+    <Glass
+      radius={RADIUS[size]}
+      fallbackClassName="border border-border bg-card"
+      {...props}
+      className={slots.root({ className })}
+      style={[hasNativeRow ? { paddingBottom: NATIVE_ROW_HEIGHT } : null, style]}
+    >
+      {children}
+    </Glass>
+  );
+
+  /*
+   * The keyboard hook stays behind a component boundary rather than an
+   * `enabled` flag. Calling it at all has global consequences — without the
+   * keyboard controller installed it falls back to Reanimated's
+   * useAnimatedKeyboard, which switches Android out of adjustResize for the
+   * whole app. A composer that was told not to avoid the keyboard must not do
+   * that to every other screen in the app.
+   */
+  return (
+    <AIInputContext.Provider value={context}>
+      {avoidKeyboard ? (
+        <KeyboardAvoider
+          active={focused}
+          mode="dock"
+          // Docking travels the composer up by the keyboard's height less the
+          // inset it already sits above. Claiming to sit a little lower than it
+          // does is what leaves a gap once it arrives.
+          bottomInset={keyboardBottomInset - keyboardGap}
+          className="w-full"
+        >
+          {surface}
+        </KeyboardAvoider>
+      ) : (
+        surface
+      )}
+    </AIInputContext.Provider>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Field                                                                      */
+/* -------------------------------------------------------------------------- */
+
+export interface AIInputFieldProps
+  extends Omit<TextInputProps, 'value' | 'onChangeText' | 'multiline'> {
+  className?: string;
+}
+
+function AIInputField({
+  className,
+  placeholder = 'Ask anything',
+  onFocus,
+  onBlur,
+  style,
+  ...props
+}: AIInputFieldProps) {
+  const context = useAIInput('AIInput.Field');
+  const { value, setValue, size, disabled, minRows, maxRows, setFocused } = context;
+  const metrics = AI_INPUT_METRICS[size];
+  const placeholderColor = useCSSVariable('--color-muted-foreground');
+  const bounds = growthBounds(metrics, minRows, maxRows);
+  const inline = useContext(AIInputInlineContext);
+
+  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(
+    (event) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus, setFocused]
+  );
+
+  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(
+    (event) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur, setFocused]
+  );
+
+  /*
+   * Type metrics go through `style` rather than through classes, because the
+   * height is computed from them and a line height set in two places is a line
+   * height that will disagree with itself.
+   */
+  /*
+   * On one line the field's first row has to be exactly as tall as the buttons
+   * beside it.
+   *
+   * The row aligns to the bottom, so that a field which has grown keeps its
+   * controls at the foot of the box rather than floating them beside the
+   * middle of the text. That alignment is only correct if an *ungrown* field
+   * is the same height as the controls — otherwise its extra padding pushes
+   * the whole row down inside the card, which is a composer whose contents sit
+   * low in it. So the padding is whatever centres one line in a control.
+   */
+  /*
+   * On one line the field states no line height at all.
+   *
+   * A line height above the font's own exists to separate lines from each
+   * other, and iOS spends the surplus *above* the glyphs rather than splitting
+   * it — so a single line set to 22 over 16pt type sits several points below
+   * the buttons beside it, placeholder and value alike. With none set, the
+   * platform lays the text out in the font's own line box, which sits where a
+   * line of that font is supposed to.
+   *
+   * The box is then exactly one control tall with the natural line centred in
+   * it. `NATURAL_LEADING` is what a line of a given size actually occupies —
+   * it only has to be close, since it decides a padding either side rather
+   * than the height itself.
+   */
+  const lineHeight = inline ? undefined : metrics.lineHeight;
+  const padding = inline ? 0 : metrics.padding;
+
+  const boxStyle = useMemo(
+    () => ({
+      /*
+       * A floor and a ceiling, and no height. The field sizes itself to its
+       * own content between them, which the layout engine does without anyone
+       * measuring anything — and once it reaches the ceiling, a multiline
+       * field scrolls its content instead of growing.
+       *
+       * Deriving a height from `onContentSizeChange` instead is a loop whose
+       * answer differs by platform: one reports the height of the text, the
+       * other the height of the box that was just set from it, and on that one
+       * the field can never grow past the height it opened at.
+       */
+      minHeight: inline ? undefined : bounds.minHeight,
+      maxHeight: bounds.maxHeight,
+      fontSize: metrics.fontSize,
+      lineHeight,
+      paddingTop: padding,
+      paddingBottom: padding,
+      /*
+       * Android puts the caret in the middle of a multiline box unless told
+       * otherwise, which is wrong for a field that grows downward — and right
+       * for one that is a single line between two buttons.
+       */
+      textAlignVertical: inline ? ('center' as const) : ('top' as const),
+    }),
+    [bounds.minHeight, bounds.maxHeight, inline, lineHeight, metrics.fontSize, padding]
+  );
+
+  const slots = aiInputVariants({ size });
+
+  return (
+    <TextInput
+      {...props}
+      multiline
+      value={value}
+      onChangeText={setValue}
+      placeholder={placeholder}
+      placeholderTextColor={typeof placeholderColor === 'string' ? placeholderColor : undefined}
+      editable={!disabled}
+      /*
+       * `scrollEnabled` is deliberately left alone.
+       *
+       * Driving it from the measurement is a loop: switching it on changes
+       * what the platform reports as the content size, which changes the
+       * answer to whether it should be on, and the field resizes for ever. A
+       * multiline field scrolls once its height is fixed anyway, so there is
+       * nothing to drive — the clamp below is the whole mechanism.
+       */
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      className={inline ? slots.fieldInline({ className }) : slots.field({ className })}
+      style={[boxStyle, style]}
+    />
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Toolbar and its controls                                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * True inside `AIInput.Row` — the parts that lay out differently on one line
+ * read it rather than taking a prop each, so a caller rearranges the composer
+ * by moving one component instead of setting a flag on three.
+ */
+const AIInputInlineContext = createContext(false);
+
+export interface AIInputRowProps extends ViewProps {
+  className?: string;
+}
+
+/**
+ * The field and its controls on a single line.
+ *
+ * The composer at its smallest: one pill above the keyboard with the field
+ * between the controls rather than above them. It suits a bar that is always
+ * on screen, where the stacked composer suits one that is the focus of it.
+ *
+ * The field still grows — it just grows the row.
+ *
+ * ```tsx
+ * <AIInput>
+ *   <AIInput.Row>
+ *     <AIInput.Action label="Add" icon={<PlusIcon />} />
+ *     <AIInput.Field placeholder="Ask anything" />
+ *     <AIInput.Action label="Dictate" icon={<MicIcon />} />
+ *     <AIInput.Submit />
+ *   </AIInput.Row>
+ * </AIInput>
+ * ```
+ */
+function AIInputRow({ className, children, ...props }: AIInputRowProps) {
+  const { size } = useAIInput('AIInput.Row');
+  const slots = aiInputVariants({ size });
+  return (
+    <AIInputInlineContext.Provider value>
+      <View {...props} className={slots.row({ className })}>
+        {children}
+      </View>
+    </AIInputInlineContext.Provider>
+  );
+}
+
+export interface AIInputToolbarProps extends ViewProps {
+  className?: string;
+}
+
+function AIInputToolbar({ className, children, style, ...props }: AIInputToolbarProps) {
+  const { size, native } = useAIInput('AIInput.Toolbar');
+  const slots = aiInputVariants({ size });
+  return (
+    <View
+      {...props}
+      accessibilityRole="toolbar"
+      className={cn(slots.toolbar({ className }), native && 'absolute inset-x-0 bottom-0')}
+      style={[
+        native ? { height: NATIVE_ROW_HEIGHT, paddingBottom: NATIVE_ROW_FOOT } : null,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+/** Pushes everything after it to the trailing end of the toolbar. */
+function AIInputSpacer({ className, ...props }: ViewProps) {
+  return <View {...props} className={cn('flex-1', className)} />;
+}
+
+export interface AIInputActionProps
+  extends Omit<ViewProps, 'children'>,
+    Pick<ViewProps, 'accessibilityHint'> {
+  className?: string;
+  /** Names the control. It is a circle with a glyph in it; nothing else says what it does. */
+  label: string;
+  icon: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  /** Control size. Inherited from the composer when it is inside one. */
+  size?: AIInputSize;
+  /**
+   * Draw it as the platform's own button, in the system material. Inherited
+   * from the composer when it is inside one. The platform owns its colour and
+   * shape, so `className` stops reaching it.
+   */
+  native?: boolean;
+}
+
+function AIInputAction({
+  className,
+  label,
+  icon,
+  onPress,
+  disabled,
+  size: sizeProp,
+  native,
+  ...props
+}: AIInputActionProps) {
+  const context = useAIInputOptional();
+  const scale = sizeProp ?? context?.size ?? 'md';
+  const size = CONTROL[scale];
+  const isDisabled = disabled ?? context?.disabled ?? false;
+  const isNative = (native ?? context?.native ?? false) && hasNativeUI();
+
+  /*
+   * The platform's own button, in its own material. `Button` already knows how
+   * to ask for that — the circular border shape, the glass style, and the
+   * hosting an icon inside a native control needs — so this is a handoff
+   * rather than a second implementation of it.
+   */
+  if (isNative) {
+    return (
+      <View {...props} className={className}>
+        <Button
+          native
+          glass
+          variant="secondary"
+          size="icon"
+          accessibilityLabel={label}
+          disabled={isDisabled}
+          onPress={onPress}
+        >
+          {icon}
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <Glass
+      variant="clear"
+      radius={size / 2}
+      fallbackClassName="bg-muted"
+      {...props}
+      className={className}
+      style={{ width: size, height: size }}
+    >
+      <AnimatedPressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={onPress}
+        // The dim goes on the content rather than on the material. Fading a
+        // system material degrades it, and at zero it stops drawing entirely.
+        className={cn('h-full w-full items-center justify-center', isDisabled && 'opacity-40')}
+      >
+        {icon}
+      </AnimatedPressable>
+    </Glass>
+  );
+}
+
+export interface AIInputPillProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /** The current value — a model name, a mode, a project. */
+  label: ReactNode;
+  /** A second, quieter value beside it. */
+  detail?: ReactNode;
+  /** A glyph after the labels, for a pill that opens a list. */
+  indicator?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  /** Names the control when the label alone does not say what changing it does. */
+  accessibilityLabel?: string;
+  /** Control size. Inherited from the composer when it is inside one. */
+  size?: AIInputSize;
+  /**
+   * Draw it as the platform's own button, in the system material. Only a
+   * string `label` can be handed over — a hosted view inside a native button
+   * has no width anything can resolve — so a pill given elements is drawn
+   * here whatever this says.
+   */
+  native?: boolean;
+}
+
+function AIInputPill({
+  className,
+  label,
+  detail,
+  indicator,
+  onPress,
+  disabled,
+  accessibilityLabel,
+  size: sizeProp,
+  native,
+  ...props
+}: AIInputPillProps) {
+  const context = useAIInputOptional();
+  const size = sizeProp ?? context?.size ?? 'md';
+  const height = CONTROL[size];
+  const isDisabled = disabled ?? context?.disabled ?? false;
+  const slots = aiInputVariants({ size });
+
+  /*
+   * Only a plain string goes to the platform. Passing elements makes it host
+   * them, and a hosted view inside a labelled button leaves the width
+   * unresolved — which is not an exception anything here could catch but a
+   * crash in native code. A pill with a `detail` or an `indicator` is drawn.
+   */
+  const isNative =
+    (native ?? context?.native ?? false) &&
+    hasNativeUI() &&
+    typeof label === 'string' &&
+    detail === undefined &&
+    indicator === undefined;
+
+  if (isNative) {
+    return (
+      <View {...props} className={className}>
+        <Button
+          native
+          glass
+          variant="secondary"
+          size="sm"
+          accessibilityLabel={accessibilityLabel}
+          disabled={isDisabled}
+          onPress={onPress}
+        >
+          {label as string}
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <Glass
+      variant="clear"
+      radius={height / 2}
+      fallbackClassName="bg-muted"
+      {...props}
+      className={className}
+      style={{ height }}
+    >
+      <AnimatedPressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={onPress}
+        className={slots.pill({ className: cn('h-full', isDisabled && 'opacity-40') })}
+      >
+        {typeof label === 'string' ? (
+          <Text size="sm" weight="medium">
+            {label}
+          </Text>
+        ) : (
+          label
+        )}
+        {typeof detail === 'string' ? (
+          <Text size="sm" muted>
+            {detail}
+          </Text>
+        ) : (
+          detail
+        )}
+        {indicator}
+      </AnimatedPressable>
+    </Glass>
+  );
+}
+
+export interface AIInputSubmitProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /** Names the button in its send state. */
+  sendLabel?: string;
+  /** Names it in its voice state, which is what an empty composer offers. */
+  voiceLabel?: string;
+  /** Names it while the model is answering. */
+  stopLabel?: string;
+  /** Draw it as the platform's own button, in the system material. */
+  native?: boolean;
+}
+
+/**
+ * The trailing button, which is three buttons wearing one shape.
+ *
+ * Empty and ready, it opens voice mode; with something typed, it sends; while
+ * the model is answering, it stops. One control rather than three because only
+ * one of them is ever the thing to do, and a row of dimmed siblings is a row
+ * of things that look broken.
+ */
+function AIInputSubmit({
+  className,
+  sendLabel = 'Send',
+  voiceLabel = 'Voice mode',
+  stopLabel = 'Stop',
+  native,
+  ...props
+}: AIInputSubmitProps) {
+  const context = useAIInput('AIInput.Submit');
+  const { value, status, size, disabled, submit, stop, voice, canVoice, canStop } = context;
+  const diameter = CONTROL[size] + 2;
+  const streaming = status === 'streaming' || status === 'submitted';
+  const hasText = value.trim().length > 0;
+
+  const onSurface = useCSSVariable('--color-primary-foreground');
+  const onSolid = useCSSVariable('--color-background');
+
+  const mode = streaming ? 'stop' : hasText ? 'send' : 'voice';
+  const label = mode === 'stop' ? stopLabel : mode === 'send' ? sendLabel : voiceLabel;
+  const onPress = mode === 'stop' ? stop : mode === 'send' ? submit : voice;
+  const isNative = (native ?? context.native) && hasNativeUI();
+
+  /*
+   * Nothing to send is not something to press.
+   *
+   * Empty, the button offers voice mode — but only if the app took `onVoice`;
+   * with nothing wired to it, it is a live-looking control that does nothing.
+   * Same for stop. So the button is disabled whenever the thing it is offering
+   * cannot happen, which for an empty composer with no voice mode means it
+   * stays inert until something is typed.
+   */
+  const inert =
+    disabled ||
+    (mode === 'send' ? !hasText : mode === 'stop' ? !canStop : !canVoice);
+
+  const glyph =
+    mode === 'send' ? (
+      <SendArrowIcon size={18} />
+    ) : mode === 'stop' ? (
+      <View className="rounded-sm bg-primary-foreground" style={{ width: 11, height: 11 }} />
+    ) : (
+      <AudioLinesIcon size={18} />
+    );
+
+  /*
+   * The platform's own button, tinted. `Button` maps a primary variant onto
+   * `glassProminent`, which is the one that keeps an accent fill — drawing the
+   * material by hand over a plain button throws that fill away, and this is
+   * the one control in the row that is supposed to be filled.
+   */
+  if (isNative) {
+    return (
+      <View {...props} className={className}>
+        <Button
+          native
+          glass
+          variant="primary"
+          size="icon"
+          accessibilityLabel={label}
+          disabled={inert}
+          onPress={onPress}
+        >
+          {glyph}
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      {...props}
+      className={cn(
+        'overflow-hidden rounded-full',
+        mode === 'voice' ? 'bg-foreground' : 'bg-primary',
+        className
+      )}
+      style={{ width: diameter, height: diameter }}
+    >
+      <AnimatedPressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ disabled: inert }}
+        disabled={inert}
+        onPress={onPress}
+        className={cn('h-full w-full items-center justify-center', inert && 'opacity-40')}
+      >
+        <IconColorProvider
+          color={
+            mode === 'voice'
+              ? typeof onSolid === 'string'
+                ? onSolid
+                : undefined
+              : typeof onSurface === 'string'
+                ? onSurface
+                : undefined
+          }
+        >
+          {glyph}
+        </IconColorProvider>
+      </AnimatedPressable>
+    </View>
+  );
+}
+
+export interface AIInputRecordingProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  /** Draw the two decisions as the platform's own buttons. */
+  native?: boolean;
+}
+
+/**
+ * What the toolbar becomes while a recording is running: throw it away, watch
+ * it, or keep it. Render it in place of `AIInput.Toolbar` when `status` is
+ * `recording`.
+ */
+function AIInputRecording({
+  className,
+  cancelLabel = 'Discard recording',
+  confirmLabel = 'Use recording',
+  native,
+  ...props
+}: AIInputRecordingProps) {
+  const context = useAIInput('AIInput.Recording');
+  const { size, level, recordCancel, recordConfirm, native: contextNative } = context;
+  const control = CONTROL[size];
+  const slots = aiInputVariants({ size });
+  const onPrimary = useCSSVariable('--color-primary-foreground');
+  const isNative = (native ?? contextNative) && hasNativeUI();
+
+  const meter = (
+    <View className={slots.meter()}>
+      <Soundwave
+        variant="bars"
+        mode="scrolling"
+        state="listening"
+        level={level}
+        centered
+        barWidth={2.5}
+        height={control}
+      />
+    </View>
+  );
+
+  if (isNative) {
+    return (
+      <View
+        {...props}
+        className={cn(slots.recording({ className }), 'absolute inset-x-0 bottom-0')}
+        style={{ height: NATIVE_ROW_HEIGHT, paddingBottom: NATIVE_ROW_FOOT }}
+      >
+        <Button
+          native
+          glass
+          variant="secondary"
+          size="icon"
+          accessibilityLabel={cancelLabel}
+          onPress={recordCancel}
+        >
+          <XIcon size={16} />
+        </Button>
+        {meter}
+        <Button
+          native
+          glass
+          variant="primary"
+          size="icon"
+          accessibilityLabel={confirmLabel}
+          onPress={recordConfirm}
+        >
+          <CheckIcon size={16} />
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <View {...props} className={slots.recording({ className })}>
+      <Glass
+        variant="clear"
+        radius={control / 2}
+        fallbackClassName="bg-muted"
+        style={{ width: control, height: control }}
+      >
+        <AnimatedPressable
+          accessibilityRole="button"
+          accessibilityLabel={cancelLabel}
+          onPress={recordCancel}
+          className="h-full w-full items-center justify-center"
+        >
+          <XIcon size={16} />
+        </AnimatedPressable>
+      </Glass>
+
+      {meter}
+
+      <View
+        className="overflow-hidden rounded-full bg-primary"
+        style={{ width: control + 4, height: control + 4 }}
+      >
+        <AnimatedPressable
+          accessibilityRole="button"
+          accessibilityLabel={confirmLabel}
+          onPress={recordConfirm}
+          className="h-full w-full items-center justify-center"
+        >
+          <CheckIcon
+            size={18}
+            color={typeof onPrimary === 'string' ? onPrimary : undefined}
+          />
+        </AnimatedPressable>
+      </View>
+    </View>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sheet                                                                      */
+/* -------------------------------------------------------------------------- */
+
+interface AIInputSheetContextValue {
+  /** Screen ids, root first. The last one is what is on screen. */
+  stack: string[];
+  push: (id: string) => void;
+  pop: () => void;
+  close: () => void;
+}
+
+const AIInputSheetContext = createContext<AIInputSheetContextValue | null>(null);
+
+function useAIInputSheet(component: string): AIInputSheetContextValue {
+  const context = useContext(AIInputSheetContext);
+  if (!context) throw new Error(`${component} must be used within an <AIInput.Sheet>`);
+  return context;
+}
+
+export interface AIInputSheetScreenProps extends ViewProps {
+  className?: string;
+  /** Names this screen. `AIInput.Sheet.Row`'s `to` pushes the screen with this id. */
+  id: string;
+  /** Centred in the header, and the first thing a screen reader reaches. */
+  title?: ReactNode;
+  /**
+   * A control at the trailing end of the header — a second action the screen
+   * offers. The leading end is the sheet's, and is a close button on the root
+   * screen and a back button on every screen pushed onto it.
+   */
+  trailing?: ReactNode;
+}
+
+function AIInputSheetScreen({ className, id, title, trailing, children, ...props }: AIInputSheetScreenProps) {
+  void id;
+  void title;
+  void trailing;
+  return (
+    <View {...props} className={cn('gap-4 pb-2', className)}>
+      {children}
+    </View>
+  );
+}
+
+type ScreenElement = ReactElement<AIInputSheetScreenProps>;
+
+function screensOf(children: ReactNode): ScreenElement[] {
+  return Children.toArray(children).filter(
+    (child): child is ScreenElement =>
+      isValidElement(child) && child.type === AIInputSheetScreen
+  );
+}
+
+export interface AIInputSheetProps {
+  children?: ReactNode;
+  className?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  /** Which screen opens first. Defaults to the first one given. */
+  initialScreen?: string;
+  /** Called whenever the screen on top changes, pushed or popped. */
+  onScreenChange?: (id: string) => void;
+  /** Frost the screen behind the sheet instead of dimming it. */
+  blur?: boolean;
+  /** How tall the sheet opens. `auto` sizes to the screen currently on top. */
+  size?: 'auto' | 'half' | 'full';
+  /**
+   * Float the sheet clear of the screen edges instead of docking it to the
+   * bottom. On by default: the surface is a material, and a material reads as
+   * laid over the app when there is app visible around all four of its edges.
+   * Docked, its bottom edge is the screen's, and there is nothing behind it
+   * there to refract.
+   */
+  detached?: boolean;
+}
+
+/**
+ * The sheet the composer's controls open, and the screens it goes on to.
+ *
+ * A row that leads somewhere pushes a screen onto this sheet rather than
+ * opening a second one over it. The sheet stays where it is, the header's
+ * close button becomes a back button, and the body slides — which is what
+ * makes going one level deeper feel like the same surface rather than another
+ * one landing on top of it.
+ *
+ * ```tsx
+ * <AIInput.Sheet open={open} onOpenChange={setOpen}>
+ *   <AIInput.Sheet.Screen id="root" title="Add to chat">
+ *     <AIInput.Sheet.Group>
+ *       <AIInput.Sheet.Row label="Add to project" value="None" to="project" />
+ *       <AIInput.Sheet.Toggle label="Web search" value={web} onValueChange={setWeb} />
+ *     </AIInput.Sheet.Group>
+ *   </AIInput.Sheet.Screen>
+ *   <AIInput.Sheet.Screen id="project" title="Add to project">…</AIInput.Sheet.Screen>
+ * </AIInput.Sheet>
+ * ```
+ */
+function AIInputSheet({
+  children,
+  className,
+  open: openProp,
+  onOpenChange,
+  defaultOpen = false,
+  initialScreen,
+  onScreenChange,
+  blur = false,
+  size = 'auto',
+  detached = true,
+}: AIInputSheetProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : internalOpen;
+
+  const screens = screensOf(children);
+  const rootId = initialScreen ?? screens[0]?.props.id ?? '';
+  const [stack, setStack] = useState<string[]>(rootId ? [rootId] : []);
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  /*
+   * A closed sheet forgets where it was. Reopening onto a screen somebody
+   * pushed and then dismissed is a sheet that answers a question nobody asked
+   * again. Done on the way out rather than the way in, where the reset would
+   * be visible for a frame before the sheet arrived.
+   */
+  useEffect(() => {
+    if (!open && rootId) setStack([rootId]);
+  }, [open, rootId]);
+
+  const push = useCallback(
+    (id: string) => {
+      setStack((current) => (current[current.length - 1] === id ? current : [...current, id]));
+      onScreenChange?.(id);
+    },
+    [onScreenChange]
+  );
+
+  const pop = useCallback(() => {
+    setStack((current) => {
+      if (current.length <= 1) return current;
+      const next = current.slice(0, -1);
+      const top = next[next.length - 1];
+      if (top) onScreenChange?.(top);
+      return next;
+    });
+  }, [onScreenChange]);
+
+  const close = useCallback(() => setOpen(false), [setOpen]);
+
+  const context = useMemo<AIInputSheetContextValue>(
+    () => ({ stack, push, pop, close }),
+    [stack, push, pop, close]
+  );
+
+  const activeId = stack[stack.length - 1];
+  const active = screens.find((screen) => screen.props.id === activeId) ?? screens[0];
+  const depth = stack.length;
+
+  const insets = useSafeAreaInsets();
+
+  // A sheet with no screens has nothing to show and no title to head it with.
+  // Below every hook, so the count does not change with the children.
+  if (!active) return null;
+
+  return (
+    <BottomSheet open={open} onOpenChange={setOpen}>
+      <BottomSheet.Content
+        blur={blur}
+        size={size}
+        detached={detached}
+        showClose={false}
+        showGrabber={false}
+        className="border-0 bg-transparent px-0 pt-0 shadow-none"
+        // The sheet's own bottom padding would sit outside the material and
+        // leave a band of backdrop under it. The glass takes the inset instead.
+        style={{ paddingBottom: 0 }}
+      >
+        {/*
+         * Inside the content, not around the sheet. `BottomSheet.Content`
+         * renders through a portal, so everything below it mounts under the
+         * portal host rather than here — a provider wrapped around the sheet
+         * is not an ancestor of the header that reads it.
+         */}
+        <AIInputSheetContext.Provider value={context}>
+          {/*
+           * A solid surface, not a material.
+           *
+           * A sheet covers most of the screen, so there is almost nothing
+           * behind it left to refract — the material reads as a grey wash over
+           * a blur of nothing rather than as glass, and the controls sitting on
+           * it lose their own material to it. The composer keeps the glass,
+           * because a bar floating over a page is the case the material is for.
+           *
+           * Four rounded corners when it floats, two when it is docked: the
+           * bottom edge of a docked sheet is the screen's edge, and rounding a
+           * corner there rounds nothing.
+           */}
+          <View
+            className={cn(
+              'overflow-hidden border border-border bg-popover px-4 pt-2',
+              detached ? 'rounded-3xl' : 'rounded-t-3xl border-b-0'
+            )}
+            // A floating sheet's own bottom margin already clears the home
+            // indicator, so it takes plain padding rather than stacking the
+            // inset on top of the gap.
+            style={{ paddingBottom: detached ? 16 : Math.max(insets.bottom, 16) }}
+          >
+            <View className="mb-2 self-center">
+              <View className="h-1 w-10 rounded-full bg-muted-foreground/40" />
+            </View>
+            <AIInputSheetHeader
+              depth={depth}
+              title={active.props.title}
+              trailing={active.props.trailing}
+            />
+            <AIInputSheetBody activeId={activeId} depth={depth} className={className}>
+              {active}
+            </AIInputSheetBody>
+          </View>
+        </AIInputSheetContext.Provider>
+      </BottomSheet.Content>
+    </BottomSheet>
+  );
+}
+
+function AIInputSheetHeader({
+  depth,
+  title,
+  trailing,
+}: {
+  depth: number;
+  title?: ReactNode;
+  trailing?: ReactNode;
+}) {
+  const { pop, close } = useAIInputSheet('AIInput.Sheet');
+  const rtl = useDirection() === 'rtl';
+  const nested = depth > 1;
+  const Back = rtl ? ChevronRightIcon : ChevronLeftIcon;
+
+  return (
+    <View className="h-11 flex-row items-center">
+      <Glass
+        variant="clear"
+        radius={17}
+        fallbackClassName="bg-muted"
+        style={{ width: 34, height: 34 }}
+      >
+        <AnimatedPressable
+          accessibilityRole="button"
+          accessibilityLabel={nested ? 'Back' : 'Close'}
+          onPress={nested ? pop : close}
+          className="h-full w-full items-center justify-center"
+        >
+          {nested ? <Back size={20} /> : <XIcon size={18} />}
+        </AnimatedPressable>
+      </Glass>
+
+      {/*
+       * Centred against the sheet rather than against what is left over, so the
+       * title does not shift when the trailing action appears on one screen and
+       * not the next. It takes no touches, so it cannot bury the buttons at
+       * either end the way an absolutely positioned full-width title would.
+       */}
+      <View pointerEvents="none" className="absolute inset-x-0 items-center">
+        {typeof title === 'string' ? (
+          <Text size="xl" weight="semibold" numberOfLines={1}>
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
+      </View>
+
+      <View className="flex-1" />
+      {trailing}
+    </View>
+  );
+}
+
+function AIInputSheetBody({
+  activeId,
+  depth,
+  className,
+  children,
+}: {
+  activeId?: string;
+  depth: number;
+  className?: string;
+  children: ReactNode;
+}) {
+  const { width } = useWindowDimensions();
+  const height = useSharedValue(-1);
+  const paneRef = useRef<View>(null);
+
+  /*
+   * Whether the screen is lifted out of the flow onto its own layer.
+   *
+   * Not on the first layout, which is what a wizard inside a fixed frame can
+   * afford. A sheet sized to its content is still sliding up while its first
+   * screen measures, and switching the screen to absolute mid-flight takes the
+   * height out from under the sheet and puts it back a frame later — which is
+   * the sheet arriving with a stutter in it.
+   *
+   * So the first screen stays in the flow and the sheet opens around a real
+   * height. The layer is only needed once two screens have to overlap, which
+   * is the moment somebody navigates, and by then the height below is already
+   * recorded to travel from.
+   */
+  const [layered, setLayered] = useState(false);
+
+  /*
+   * Which way the screen slides, worked out from the move rather than from
+   * whatever caused it — a row, a back button and a caller pushing directly
+   * are the same move to the reader, and only the change in depth says which
+   * way it went.
+   *
+   * Read during render, not in an effect: the arriving screen's animation is
+   * fixed when it mounts, and an effect runs after that, which would leave
+   * every transition playing the direction of the one before it.
+   */
+  const previousDepth = useRef(depth);
+  const direction: 1 | -1 = depth >= previousDepth.current ? 1 : -1;
+  const navigated = useRef(false);
+
+  useEffect(() => {
+    if (depth !== previousDepth.current) {
+      previousDepth.current = depth;
+      navigated.current = true;
+    }
+  }, [depth]);
+
+  // The first navigation is what needs two screens on top of each other.
+  useEffect(() => {
+    if (navigated.current) setLayered(true);
+  }, [activeId]);
+
+  // Move the reader onto the screen that just arrived, rather than leaving
+  // focus on the row that is no longer there.
+  useEffect(() => {
+    if (!navigated.current) return;
+    const node = paneRef.current;
+    if (!node) return;
+    const tag = findNodeHandle(node);
+    if (tag != null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [activeId]);
+
+  /*
+   * Until the first screen has been measured the pane stays in the flow, so a
+   * sheet sized to its content has a real height on the first pass. Absolute
+   * from the start would measure zero — the container's only child would
+   * contribute nothing — and the sheet would open around a screen nobody can
+   * see.
+   */
+  const onPaneLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const next = event.nativeEvent.layout.height;
+      if (next <= 0) return;
+      // Recorded whether or not it is being used yet, so the first push has a
+      // height to travel from rather than growing out of nothing.
+      if (layered) {
+        height.value = withTiming(next, { duration: HEIGHT_DURATION, easing: EASE });
+        return;
+      }
+      height.value = next;
+    },
+    [layered, height]
+  );
+
+  const heightStyle = useAnimatedStyle(() =>
+    height.value < 0 ? {} : { height: height.value }
+  );
+
+  /*
+   * Written out rather than taken from the stock builders, which carry an
+   * initial opacity and nothing else — the distance is the part worth
+   * controlling here, and none of them lets it be set.
+   */
+  const offset = width > 0 ? width * SLIDE_FRACTION : 60;
+  const entering = useCallback<EntryExitAnimationFunction>(() => {
+    'worklet';
+    return {
+      initialValues: { opacity: 0, transform: [{ translateX: direction * offset }] },
+      animations: {
+        opacity: withTiming(1, { duration: ENTER_DURATION, easing: EASE }),
+        transform: [{ translateX: withTiming(0, { duration: ENTER_DURATION, easing: EASE }) }],
+      },
+    };
+  }, [direction, offset]);
+
+  return (
+    <Animated.View
+      style={layered ? heightStyle : undefined}
+      className={cn('w-full overflow-hidden', className)}
+    >
+      <Animated.View
+        key={activeId ?? '__empty__'}
+        entering={layered ? entering : undefined}
+        exiting={FadeOut.duration(EXIT_DURATION)}
+        className={layered ? 'absolute inset-x-0 top-0' : 'w-full'}
+      >
+        <View ref={paneRef} onLayout={onPaneLayout} className="w-full pt-2">
+          {children}
+        </View>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sheet content                                                              */
+/* -------------------------------------------------------------------------- */
+
+export interface AIInputSheetGroupProps extends ViewProps {
+  className?: string;
+  /** A line under the group, for what the rows in it mean. */
+  footnote?: ReactNode;
+}
+
+/** A card of related rows, with a hairline between each pair. */
+function AIInputSheetGroup({ className, footnote, children, ...props }: AIInputSheetGroupProps) {
+  const rows = Children.toArray(children);
+  return (
+    <View className="gap-2">
+      <View {...props} className={cn('overflow-hidden rounded-[20px] bg-muted/50', className)}>
+        {rows.map((row, index) => (
+          <View key={index}>
+            {index > 0 ? <View className="ms-4 h-px bg-border" /> : null}
+            {row}
+          </View>
+        ))}
+      </View>
+      {typeof footnote === 'string' ? (
+        <Text size="sm" muted className="px-2">
+          {footnote}
+        </Text>
+      ) : (
+        footnote
+      )}
+    </View>
+  );
+}
+
+export interface AIInputSheetRowProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  label: ReactNode;
+  /** A quieter line under the label. */
+  description?: ReactNode;
+  /** A glyph at the leading end. */
+  icon?: ReactNode;
+  /** The current setting, shown at the trailing end. */
+  value?: ReactNode;
+  /**
+   * Push the screen with this id when the row is pressed. A row with one shows
+   * a chevron, because a row that leads somewhere should say so before it is
+   * pressed.
+   */
+  to?: string;
+  onPress?: () => void;
+  disabled?: boolean;
+}
+
+function AIInputSheetRow({
+  className,
+  label,
+  description,
+  icon,
+  value,
+  to,
+  onPress,
+  disabled = false,
+  ...props
+}: AIInputSheetRowProps) {
+  const { push } = useAIInputSheet('AIInput.Sheet.Row');
+  const rtl = useDirection() === 'rtl';
+  const Chevron = rtl ? ChevronLeftIcon : ChevronRightIcon;
+
+  const handlePress = useCallback(() => {
+    onPress?.();
+    if (to) push(to);
+  }, [onPress, push, to]);
+
+  const body = (
+    <>
+      {icon}
+      <View className="flex-1 gap-0.5">
+        {typeof label === 'string' ? <Text size="base">{label}</Text> : label}
+        {typeof description === 'string' ? (
+          <Text size="sm" muted>
+            {description}
+          </Text>
+        ) : (
+          description
+        )}
+      </View>
+      {typeof value === 'string' ? (
+        <Text size="base" muted>
+          {value}
+        </Text>
+      ) : (
+        value
+      )}
+      {to ? <Chevron size={18} /> : null}
+    </>
+  );
+
+  const interactive = Boolean(to || onPress);
+  if (!interactive) {
+    return (
+      <View {...props} className={cn('flex-row items-center gap-3 px-4 py-4', className)}>
+        {body}
+      </View>
+    );
+  }
+
+  return (
+    <AnimatedPressable
+      pressScale={1}
+      pressOpacity={0.6}
+      {...props}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={handlePress}
+      className={cn('flex-row items-center gap-3 px-4 py-4', disabled && 'opacity-40', className)}
+    >
+      {body}
+    </AnimatedPressable>
+  );
+}
+
+export interface AIInputSheetToggleProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  label: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+function AIInputSheetToggle({
+  className,
+  label,
+  description,
+  icon,
+  value,
+  onValueChange,
+  disabled = false,
+  ...props
+}: AIInputSheetToggleProps) {
+  return (
+    <View {...props} className={cn('flex-row items-center gap-3 px-4 py-2.5', className)}>
+      {icon}
+      <View className="flex-1 gap-0.5">
+        {typeof label === 'string' ? <Text size="base">{label}</Text> : label}
+        {typeof description === 'string' ? (
+          <Text size="sm" muted>
+            {description}
+          </Text>
+        ) : (
+          description
+        )}
+      </View>
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        label={typeof label === 'string' ? label : undefined}
+      />
+    </View>
+  );
+}
+
+export interface AIInputSheetChoiceProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  label: ReactNode;
+  description?: ReactNode;
+  /** A pill beside the label — what the choice costs, or what it needs. */
+  badge?: ReactNode;
+  selected?: boolean;
+  onPress?: () => void;
+  disabled?: boolean;
+}
+
+/** One of a set, with a tick on the one in force. */
+function AIInputSheetChoice({
+  className,
+  label,
+  description,
+  badge,
+  selected = false,
+  onPress,
+  disabled = false,
+  ...props
+}: AIInputSheetChoiceProps) {
+  const tint = useCSSVariable('--color-primary');
+
+  return (
+    <AnimatedPressable
+      pressScale={1}
+      pressOpacity={0.6}
+      {...props}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected, disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      className={cn(
+        'flex-row items-start gap-3 px-4 py-4',
+        disabled && 'opacity-40',
+        className
+      )}
+    >
+      <View className="flex-1 gap-0.5">
+        <View className="flex-row items-center gap-2">
+          {typeof label === 'string' ? (
+            <Text size="lg" weight="medium">
+              {label}
+            </Text>
+          ) : (
+            label
+          )}
+          {badge}
+        </View>
+        {typeof description === 'string' ? (
+          <Text size="sm" muted>
+            {description}
+          </Text>
+        ) : (
+          description
+        )}
+      </View>
+      {selected ? (
+        <CheckIcon size={20} color={typeof tint === 'string' ? tint : undefined} />
+      ) : null}
+    </AnimatedPressable>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Voice mode                                                                 */
+/* -------------------------------------------------------------------------- */
+
+export interface AIInputVoiceModeProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /** The controls in the bottom row, before the close button. */
+  children?: ReactNode;
+  /** What the app is doing, which is what the wave behind everything shows. */
+  state?: 'idle' | 'listening' | 'thinking' | 'speaking';
+  /** Input level, 0–1. A shared value keeps metering off the JS thread. */
+  level?: number | SharedValue<number>;
+  /** A line above the microphone — a greeting, or what it is waiting for. */
+  title?: ReactNode;
+  onMicPress?: () => void;
+  micLabel?: string;
+  onClose?: () => void;
+  closeLabel?: string;
+  /** Type scale for the controls in the bottom row. */
+  size?: AIInputSize;
+  /** Draw the bottom row's controls as the platform's own, in its material. */
+  native?: boolean;
+}
+
+/**
+ * The screen a voice conversation happens on: no field, no keyboard, one
+ * microphone and a way out.
+ *
+ * It is a surface rather than an overlay — render it as its own route or
+ * inside a modal of your own. It provides the composer's context, so
+ * `AIInput.Action` and `AIInput.Pill` work in the bottom row without an
+ * `AIInput` around them.
+ */
+function AIInputVoiceMode({
+  className,
+  children,
+  state = 'listening',
+  level,
+  title,
+  onMicPress,
+  micLabel = 'Mute',
+  onClose,
+  closeLabel = 'End voice mode',
+  size = 'md',
+  native = false,
+  ...props
+}: AIInputVoiceModeProps) {
+  const insets = useSafeAreaInsets();
+  const onSolid = useCSSVariable('--color-background');
+  const control = CONTROL[size] + 4;
+
+  const context = useMemo<AIInputContextValue>(
+    () => ({
+      value: '',
+      setValue: () => {},
+      status: 'ready',
+      size,
+      level,
+      disabled: false,
+      native: native && hasNativeUI(),
+      minRows: 1,
+      maxRows: 5,
+      focused: false,
+      setFocused: () => {},
+      submit: () => {},
+      stop: () => {},
+      canVoice: false,
+      canStop: false,
+      recordCancel: () => {},
+      recordConfirm: () => {},
+      voice: () => {},
+    }),
+    [level, native, size]
+  );
+
+  return (
+    <AIInputContext.Provider value={context}>
+      <View {...props} className={cn('flex-1 bg-background', className)}>
+        {/* Behind everything, and taking no touches: the wash that says the
+            screen is listening without putting a control in the way of it. */}
+        <Soundwave
+          variant="ambient"
+          state={state}
+          level={level}
+          pointerEvents="none"
+          className="absolute inset-0"
+        />
+
+        <View className="flex-1 items-center justify-center gap-8 px-6">
+          {typeof title === 'string' ? (
+            <Text size="xl" className="text-center">
+              {title}
+            </Text>
+          ) : (
+            title
+          )}
+
+          <View className="items-center gap-5">
+            <Soundwave variant="pills" state={state} level={level} height={28} />
+            <Glass
+              variant="clear"
+              radius={44}
+              fallbackClassName="border border-border bg-muted"
+              style={{ width: 88, height: 88 }}
+            >
+              <AnimatedPressable
+                accessibilityRole="button"
+                accessibilityLabel={micLabel}
+                onPress={onMicPress}
+                className="h-full w-full items-center justify-center"
+              >
+                <MicIcon size={32} />
+              </AnimatedPressable>
+            </Glass>
+          </View>
+        </View>
+
+        <View
+          className="flex-row items-center gap-3 px-5"
+          style={{ paddingBottom: Math.max(insets.bottom, 20) }}
+        >
+          {children}
+          <View className="flex-1" />
+          {native && hasNativeUI() ? (
+            <Button
+              native
+              glass
+              variant="primary"
+              size="icon"
+              accessibilityLabel={closeLabel}
+              onPress={onClose}
+            >
+              <XIcon size={16} />
+            </Button>
+          ) : (
+            <View
+              className="overflow-hidden rounded-full bg-foreground"
+              style={{ width: control, height: control }}
+            >
+              <AnimatedPressable
+                accessibilityRole="button"
+                accessibilityLabel={closeLabel}
+                onPress={onClose}
+                className="h-full w-full items-center justify-center"
+              >
+                <XIcon size={18} color={typeof onSolid === 'string' ? onSolid : undefined} />
+              </AnimatedPressable>
+            </View>
+          )}
+        </View>
+      </View>
+    </AIInputContext.Provider>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+
+AIInputRoot.displayName = 'AIInput';
+AIInputField.displayName = 'AIInput.Field';
+AIInputRow.displayName = 'AIInput.Row';
+AIInputToolbar.displayName = 'AIInput.Toolbar';
+AIInputSpacer.displayName = 'AIInput.Spacer';
+AIInputAction.displayName = 'AIInput.Action';
+AIInputPill.displayName = 'AIInput.Pill';
+AIInputSubmit.displayName = 'AIInput.Submit';
+AIInputRecording.displayName = 'AIInput.Recording';
+AIInputSheetScreen.displayName = 'AIInput.Sheet.Screen';
+AIInputSheetGroup.displayName = 'AIInput.Sheet.Group';
+AIInputSheetRow.displayName = 'AIInput.Sheet.Row';
+AIInputSheetToggle.displayName = 'AIInput.Sheet.Toggle';
+AIInputSheetChoice.displayName = 'AIInput.Sheet.Choice';
+AIInputSheet.displayName = 'AIInput.Sheet';
+AIInputVoiceMode.displayName = 'AIInput.VoiceMode';
+
+const Sheet = Object.assign(AIInputSheet, {
+  Screen: AIInputSheetScreen,
+  Group: AIInputSheetGroup,
+  Row: AIInputSheetRow,
+  Toggle: AIInputSheetToggle,
+  Choice: AIInputSheetChoice,
+});
+
+export const AIInput = Object.assign(AIInputRoot, {
+  Field: AIInputField,
+  Row: AIInputRow,
+  Toolbar: AIInputToolbar,
+  Spacer: AIInputSpacer,
+  Action: AIInputAction,
+  Pill: AIInputPill,
+  Submit: AIInputSubmit,
+  Recording: AIInputRecording,
+  Sheet,
+  VoiceMode: AIInputVoiceMode,
+});