panelui-native 0.75.0 → 0.76.0

package/lib/module/components/ai-input/index.js

@@ -0,0 +1,1568 @@
+"use strict";
+
+/**
+ * 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 } from 'react';
+import { AccessibilityInfo, findNodeHandle, TextInput, View, useWindowDimensions } from 'react-native';
+import Animated, { Easing, FadeOut, useAnimatedStyle, useSharedValue, withTiming } 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.js";
+import { AudioLinesIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, IconColorProvider, MicIcon, SendArrowIcon, XIcon } from "../../icons/index.js";
+import { hasNativeUI } from "../../native/index.js";
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Glass } from "../../primitives/glass.js";
+import { KeyboardAvoider } from "../../primitives/keyboard-avoider.js";
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { BottomSheet } from "../bottom-sheet/index.js";
+import { Button } from "../button/index.js";
+import { Soundwave } from "../soundwave/index.js";
+import { Switch } from "../switch/index.js";
+import { AI_INPUT_METRICS, growthBounds } from "./ai-input-growth.js";
+
+/** What the app is doing, which is what the trailing button offers to do next. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Corner radius per size, in points. The material rounds itself to these. */
+const RADIUS = {
+  sm: 22,
+  md: 26,
+  lg: 30
+};
+
+/**
+ * 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
+};
+
+/**
+ * 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                                                                       */
+/* -------------------------------------------------------------------------- */
+
+const AIInputContext = /*#__PURE__*/createContext(null);
+function useAIInput(component) {
+  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() {
+  return useContext(AIInputContext);
+}
+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
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = valueProp !== undefined;
+  const value = isControlled ? valueProp : internalValue;
+  const [focused, setFocused] = useState(false);
+  const setValue = useCallback(next => {
+    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(() => ({
+    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 => /*#__PURE__*/isValidElement(child) && (child.type === AIInputToolbar || child.type === AIInputRecording));
+  const surface = /*#__PURE__*/_jsx(Glass, {
+    radius: RADIUS[size],
+    fallbackClassName: "border border-border bg-card",
+    ...props,
+    className: slots.root({
+      className
+    }),
+    style: [hasNativeRow ? {
+      paddingBottom: NATIVE_ROW_HEIGHT
+    } : null, style],
+    children: children
+  });
+
+  /*
+   * 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 /*#__PURE__*/_jsx(AIInputContext.Provider, {
+    value: context,
+    children: avoidKeyboard ? /*#__PURE__*/_jsx(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",
+      children: surface
+    }) : surface
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Field                                                                      */
+/* -------------------------------------------------------------------------- */
+
+function AIInputField({
+  className,
+  placeholder = 'Ask anything',
+  onFocus,
+  onBlur,
+  style,
+  ...props
+}) {
+  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(event => {
+    setFocused(true);
+    onFocus?.(event);
+  }, [onFocus, setFocused]);
+  const handleBlur = useCallback(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' : 'top'
+  }), [bounds.minHeight, bounds.maxHeight, inline, lineHeight, metrics.fontSize, padding]);
+  const slots = aiInputVariants({
+    size
+  });
+  return /*#__PURE__*/_jsx(TextInput, {
+    ...props,
+    multiline: true,
+    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 = /*#__PURE__*/createContext(false);
+/**
+ * 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
+}) {
+  const {
+    size
+  } = useAIInput('AIInput.Row');
+  const slots = aiInputVariants({
+    size
+  });
+  return /*#__PURE__*/_jsx(AIInputInlineContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/_jsx(View, {
+      ...props,
+      className: slots.row({
+        className
+      }),
+      children: children
+    })
+  });
+}
+function AIInputToolbar({
+  className,
+  children,
+  style,
+  ...props
+}) {
+  const {
+    size,
+    native
+  } = useAIInput('AIInput.Toolbar');
+  const slots = aiInputVariants({
+    size
+  });
+  return /*#__PURE__*/_jsx(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: children
+  });
+}
+
+/** Pushes everything after it to the trailing end of the toolbar. */
+function AIInputSpacer({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    className: cn('flex-1', className)
+  });
+}
+function AIInputAction({
+  className,
+  label,
+  icon,
+  onPress,
+  disabled,
+  size: sizeProp,
+  native,
+  ...props
+}) {
+  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 /*#__PURE__*/_jsx(View, {
+      ...props,
+      className: className,
+      children: /*#__PURE__*/_jsx(Button, {
+        native: true,
+        glass: true,
+        variant: "secondary",
+        size: "icon",
+        accessibilityLabel: label,
+        disabled: isDisabled,
+        onPress: onPress,
+        children: icon
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Glass, {
+    variant: "clear",
+    radius: size / 2,
+    fallbackClassName: "bg-muted",
+    ...props,
+    className: className,
+    style: {
+      width: size,
+      height: size
+    },
+    children: /*#__PURE__*/_jsx(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'),
+      children: icon
+    })
+  });
+}
+function AIInputPill({
+  className,
+  label,
+  detail,
+  indicator,
+  onPress,
+  disabled,
+  accessibilityLabel,
+  size: sizeProp,
+  native,
+  ...props
+}) {
+  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 /*#__PURE__*/_jsx(View, {
+      ...props,
+      className: className,
+      children: /*#__PURE__*/_jsx(Button, {
+        native: true,
+        glass: true,
+        variant: "secondary",
+        size: "sm",
+        accessibilityLabel: accessibilityLabel,
+        disabled: isDisabled,
+        onPress: onPress,
+        children: label
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Glass, {
+    variant: "clear",
+    radius: height / 2,
+    fallbackClassName: "bg-muted",
+    ...props,
+    className: className,
+    style: {
+      height
+    },
+    children: /*#__PURE__*/_jsxs(AnimatedPressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      disabled: isDisabled,
+      onPress: onPress,
+      className: slots.pill({
+        className: cn('h-full', isDisabled && 'opacity-40')
+      }),
+      children: [typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        weight: "medium",
+        children: label
+      }) : label, typeof detail === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        children: detail
+      }) : detail, indicator]
+    })
+  });
+}
+/**
+ * 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
+}) {
+  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' ? /*#__PURE__*/_jsx(SendArrowIcon, {
+    size: 18
+  }) : mode === 'stop' ? /*#__PURE__*/_jsx(View, {
+    className: "rounded-sm bg-primary-foreground",
+    style: {
+      width: 11,
+      height: 11
+    }
+  }) : /*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(View, {
+      ...props,
+      className: className,
+      children: /*#__PURE__*/_jsx(Button, {
+        native: true,
+        glass: true,
+        variant: "primary",
+        size: "icon",
+        accessibilityLabel: label,
+        disabled: inert,
+        onPress: onPress,
+        children: glyph
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    className: cn('overflow-hidden rounded-full', mode === 'voice' ? 'bg-foreground' : 'bg-primary', className),
+    style: {
+      width: diameter,
+      height: diameter
+    },
+    children: /*#__PURE__*/_jsx(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'),
+      children: /*#__PURE__*/_jsx(IconColorProvider, {
+        color: mode === 'voice' ? typeof onSolid === 'string' ? onSolid : undefined : typeof onSurface === 'string' ? onSurface : undefined,
+        children: glyph
+      })
+    })
+  });
+}
+/**
+ * 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
+}) {
+  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 = /*#__PURE__*/_jsx(View, {
+    className: slots.meter(),
+    children: /*#__PURE__*/_jsx(Soundwave, {
+      variant: "bars",
+      mode: "scrolling",
+      state: "listening",
+      level: level,
+      centered: true,
+      barWidth: 2.5,
+      height: control
+    })
+  });
+  if (isNative) {
+    return /*#__PURE__*/_jsxs(View, {
+      ...props,
+      className: cn(slots.recording({
+        className
+      }), 'absolute inset-x-0 bottom-0'),
+      style: {
+        height: NATIVE_ROW_HEIGHT,
+        paddingBottom: NATIVE_ROW_FOOT
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        native: true,
+        glass: true,
+        variant: "secondary",
+        size: "icon",
+        accessibilityLabel: cancelLabel,
+        onPress: recordCancel,
+        children: /*#__PURE__*/_jsx(XIcon, {
+          size: 16
+        })
+      }), meter, /*#__PURE__*/_jsx(Button, {
+        native: true,
+        glass: true,
+        variant: "primary",
+        size: "icon",
+        accessibilityLabel: confirmLabel,
+        onPress: recordConfirm,
+        children: /*#__PURE__*/_jsx(CheckIcon, {
+          size: 16
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    className: slots.recording({
+      className
+    }),
+    children: [/*#__PURE__*/_jsx(Glass, {
+      variant: "clear",
+      radius: control / 2,
+      fallbackClassName: "bg-muted",
+      style: {
+        width: control,
+        height: control
+      },
+      children: /*#__PURE__*/_jsx(AnimatedPressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        onPress: recordCancel,
+        className: "h-full w-full items-center justify-center",
+        children: /*#__PURE__*/_jsx(XIcon, {
+          size: 16
+        })
+      })
+    }), meter, /*#__PURE__*/_jsx(View, {
+      className: "overflow-hidden rounded-full bg-primary",
+      style: {
+        width: control + 4,
+        height: control + 4
+      },
+      children: /*#__PURE__*/_jsx(AnimatedPressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        onPress: recordConfirm,
+        className: "h-full w-full items-center justify-center",
+        children: /*#__PURE__*/_jsx(CheckIcon, {
+          size: 18,
+          color: typeof onPrimary === 'string' ? onPrimary : undefined
+        })
+      })
+    })]
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sheet                                                                      */
+/* -------------------------------------------------------------------------- */
+
+const AIInputSheetContext = /*#__PURE__*/createContext(null);
+function useAIInputSheet(component) {
+  const context = useContext(AIInputSheetContext);
+  if (!context) throw new Error(`${component} must be used within an <AIInput.Sheet>`);
+  return context;
+}
+function AIInputSheetScreen({
+  className,
+  id,
+  title,
+  trailing,
+  children,
+  ...props
+}) {
+  void id;
+  void title;
+  void trailing;
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    className: cn('gap-4 pb-2', className),
+    children: children
+  });
+}
+function screensOf(children) {
+  return Children.toArray(children).filter(child => /*#__PURE__*/isValidElement(child) && child.type === AIInputSheetScreen);
+}
+/**
+ * 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
+}) {
+  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(rootId ? [rootId] : []);
+  const setOpen = useCallback(next => {
+    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 => {
+    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(() => ({
+    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 /*#__PURE__*/_jsx(BottomSheet, {
+    open: open,
+    onOpenChange: setOpen,
+    children: /*#__PURE__*/_jsx(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
+      },
+      children: /*#__PURE__*/_jsx(AIInputSheetContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/_jsxs(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)
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            className: "mb-2 self-center",
+            children: /*#__PURE__*/_jsx(View, {
+              className: "h-1 w-10 rounded-full bg-muted-foreground/40"
+            })
+          }), /*#__PURE__*/_jsx(AIInputSheetHeader, {
+            depth: depth,
+            title: active.props.title,
+            trailing: active.props.trailing
+          }), /*#__PURE__*/_jsx(AIInputSheetBody, {
+            activeId: activeId,
+            depth: depth,
+            className: className,
+            children: active
+          })]
+        })
+      })
+    })
+  });
+}
+function AIInputSheetHeader({
+  depth,
+  title,
+  trailing
+}) {
+  const {
+    pop,
+    close
+  } = useAIInputSheet('AIInput.Sheet');
+  const rtl = useDirection() === 'rtl';
+  const nested = depth > 1;
+  const Back = rtl ? ChevronRightIcon : ChevronLeftIcon;
+  return /*#__PURE__*/_jsxs(View, {
+    className: "h-11 flex-row items-center",
+    children: [/*#__PURE__*/_jsx(Glass, {
+      variant: "clear",
+      radius: 17,
+      fallbackClassName: "bg-muted",
+      style: {
+        width: 34,
+        height: 34
+      },
+      children: /*#__PURE__*/_jsx(AnimatedPressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: nested ? 'Back' : 'Close',
+        onPress: nested ? pop : close,
+        className: "h-full w-full items-center justify-center",
+        children: nested ? /*#__PURE__*/_jsx(Back, {
+          size: 20
+        }) : /*#__PURE__*/_jsx(XIcon, {
+          size: 18
+        })
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      className: "absolute inset-x-0 items-center",
+      children: typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "xl",
+        weight: "semibold",
+        numberOfLines: 1,
+        children: title
+      }) : title
+    }), /*#__PURE__*/_jsx(View, {
+      className: "flex-1"
+    }), trailing]
+  });
+}
+function AIInputSheetBody({
+  activeId,
+  depth,
+  className,
+  children
+}) {
+  const {
+    width
+  } = useWindowDimensions();
+  const height = useSharedValue(-1);
+  const paneRef = useRef(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 = 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 => {
+    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(() => {
+    '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 /*#__PURE__*/_jsx(Animated.View, {
+    style: layered ? heightStyle : undefined,
+    className: cn('w-full overflow-hidden', className),
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      entering: layered ? entering : undefined,
+      exiting: FadeOut.duration(EXIT_DURATION),
+      className: layered ? 'absolute inset-x-0 top-0' : 'w-full',
+      children: /*#__PURE__*/_jsx(View, {
+        ref: paneRef,
+        onLayout: onPaneLayout,
+        className: "w-full pt-2",
+        children: children
+      })
+    }, activeId ?? '__empty__')
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Sheet content                                                              */
+/* -------------------------------------------------------------------------- */
+
+/** A card of related rows, with a hairline between each pair. */
+function AIInputSheetGroup({
+  className,
+  footnote,
+  children,
+  ...props
+}) {
+  const rows = Children.toArray(children);
+  return /*#__PURE__*/_jsxs(View, {
+    className: "gap-2",
+    children: [/*#__PURE__*/_jsx(View, {
+      ...props,
+      className: cn('overflow-hidden rounded-[20px] bg-muted/50', className),
+      children: rows.map((row, index) => /*#__PURE__*/_jsxs(View, {
+        children: [index > 0 ? /*#__PURE__*/_jsx(View, {
+          className: "ms-4 h-px bg-border"
+        }) : null, row]
+      }, index))
+    }), typeof footnote === 'string' ? /*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      muted: true,
+      className: "px-2",
+      children: footnote
+    }) : footnote]
+  });
+}
+function AIInputSheetRow({
+  className,
+  label,
+  description,
+  icon,
+  value,
+  to,
+  onPress,
+  disabled = false,
+  ...props
+}) {
+  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 = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon, /*#__PURE__*/_jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "base",
+        children: label
+      }) : label, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        children: description
+      }) : description]
+    }), typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
+      size: "base",
+      muted: true,
+      children: value
+    }) : value, to ? /*#__PURE__*/_jsx(Chevron, {
+      size: 18
+    }) : null]
+  });
+  const interactive = Boolean(to || onPress);
+  if (!interactive) {
+    return /*#__PURE__*/_jsx(View, {
+      ...props,
+      className: cn('flex-row items-center gap-3 px-4 py-4', className),
+      children: body
+    });
+  }
+  return /*#__PURE__*/_jsx(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),
+    children: body
+  });
+}
+function AIInputSheetToggle({
+  className,
+  label,
+  description,
+  icon,
+  value,
+  onValueChange,
+  disabled = false,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    className: cn('flex-row items-center gap-3 px-4 py-2.5', className),
+    children: [icon, /*#__PURE__*/_jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "base",
+        children: label
+      }) : label, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        children: description
+      }) : description]
+    }), /*#__PURE__*/_jsx(Switch, {
+      value: value,
+      onValueChange: onValueChange,
+      disabled: disabled,
+      label: typeof label === 'string' ? label : undefined
+    })]
+  });
+}
+/** One of a set, with a tick on the one in force. */
+function AIInputSheetChoice({
+  className,
+  label,
+  description,
+  badge,
+  selected = false,
+  onPress,
+  disabled = false,
+  ...props
+}) {
+  const tint = useCSSVariable('--color-primary');
+  return /*#__PURE__*/_jsxs(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),
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-2",
+        children: [typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+          size: "lg",
+          weight: "medium",
+          children: label
+        }) : label, badge]
+      }), typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        children: description
+      }) : description]
+    }), selected ? /*#__PURE__*/_jsx(CheckIcon, {
+      size: 20,
+      color: typeof tint === 'string' ? tint : undefined
+    }) : null]
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Voice mode                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * 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
+}) {
+  const insets = useSafeAreaInsets();
+  const onSolid = useCSSVariable('--color-background');
+  const control = CONTROL[size] + 4;
+  const context = useMemo(() => ({
+    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 /*#__PURE__*/_jsx(AIInputContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(View, {
+      ...props,
+      className: cn('flex-1 bg-background', className),
+      children: [/*#__PURE__*/_jsx(Soundwave, {
+        variant: "ambient",
+        state: state,
+        level: level,
+        pointerEvents: "none",
+        className: "absolute inset-0"
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-1 items-center justify-center gap-8 px-6",
+        children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          size: "xl",
+          className: "text-center",
+          children: title
+        }) : title, /*#__PURE__*/_jsxs(View, {
+          className: "items-center gap-5",
+          children: [/*#__PURE__*/_jsx(Soundwave, {
+            variant: "pills",
+            state: state,
+            level: level,
+            height: 28
+          }), /*#__PURE__*/_jsx(Glass, {
+            variant: "clear",
+            radius: 44,
+            fallbackClassName: "border border-border bg-muted",
+            style: {
+              width: 88,
+              height: 88
+            },
+            children: /*#__PURE__*/_jsx(AnimatedPressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: micLabel,
+              onPress: onMicPress,
+              className: "h-full w-full items-center justify-center",
+              children: /*#__PURE__*/_jsx(MicIcon, {
+                size: 32
+              })
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-3 px-5",
+        style: {
+          paddingBottom: Math.max(insets.bottom, 20)
+        },
+        children: [children, /*#__PURE__*/_jsx(View, {
+          className: "flex-1"
+        }), native && hasNativeUI() ? /*#__PURE__*/_jsx(Button, {
+          native: true,
+          glass: true,
+          variant: "primary",
+          size: "icon",
+          accessibilityLabel: closeLabel,
+          onPress: onClose,
+          children: /*#__PURE__*/_jsx(XIcon, {
+            size: 16
+          })
+        }) : /*#__PURE__*/_jsx(View, {
+          className: "overflow-hidden rounded-full bg-foreground",
+          style: {
+            width: control,
+            height: control
+          },
+          children: /*#__PURE__*/_jsx(AnimatedPressable, {
+            accessibilityRole: "button",
+            accessibilityLabel: closeLabel,
+            onPress: onClose,
+            className: "h-full w-full items-center justify-center",
+            children: /*#__PURE__*/_jsx(XIcon, {
+              size: 18,
+              color: typeof onSolid === 'string' ? onSolid : undefined
+            })
+          })
+        })]
+      })]
+    })
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+
+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
+});
+//# sourceMappingURL=index.js.map