@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/media/ImageGallery.tsx

@@ -0,0 +1,224 @@
+import { useState } from "react";
+import { FlatList, Image, Modal, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconExternalLink, IconX } from "@tabler/icons-react-native";
+import { typeStyle } from "../controlStyles";
+import { IconButton } from "../IconButton";
+import { withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { imageAspect, imageGridTiles, imageViewerPage, MEDIA, type GalleryImage, type ImageGridTile } from "./imageGrid";
+
+export type ImageGalleryProps = {
+  images: GalleryImage[];
+  /** With it, the viewer has an "Open in browser" button that hands it the image's URL. */
+  onOpenImage?: (url: string) => void;
+  testID?: string;
+};
+
+/**
+ * The web `ImageGalleryPreview`: one image at its own shape (as wide as the
+ * column, at most 384 high), or up to a 2 x 2 grid of 4:3 tiles with "+N" on
+ * the fourth. A tap opens `ImageViewer` at that image. Images only; draw
+ * videos apart.
+ */
+export function ImageGallery({ images, onOpenImage, testID }: ImageGalleryProps) {
+  const [viewerIndex, setViewerIndex] = useState<number | null>(null);
+  const first = images[0];
+  if (!first) return null;
+  return (
+    <View testID={testID} className="w-full">
+      {images.length === 1 ? (
+        <SingleImage image={first} onOpen={() => setViewerIndex(0)} />
+      ) : (
+        <ImageGrid images={images} onOpen={setViewerIndex} />
+      )}
+      <ImageViewer
+        images={images}
+        index={viewerIndex}
+        onIndexChange={setViewerIndex}
+        onClose={() => setViewerIndex(null)}
+        onOpenImage={onOpenImage}
+      />
+    </View>
+  );
+}
+
+/** The hairline-ringed, rounded frame of a gallery image or grid. */
+function useMediaFrame() {
+  const scheme = useScheme();
+  return {
+    borderRadius: MEDIA.radius,
+    borderWidth: 1,
+    borderColor: MEDIA.outline[scheme],
+    overflow: "hidden" as const,
+    backgroundColor: tokens.color.surfaceSecondary[scheme],
+  };
+}
+
+/**
+ * A lone image, sized from the column and the image's own shape and capped
+ * at 384 high, so a tall capture keeps its shape instead of being cropped.
+ * Until both are known it holds a full-width 4:3 box.
+ */
+function SingleImage({ image, onOpen }: { image: GalleryImage; onOpen: () => void }) {
+  const frame = useMediaFrame();
+  const [columnWidth, setColumnWidth] = useState(0);
+  const [loadedSize, setLoadedSize] = useState<{ width: number; height: number } | null>(null);
+  const aspect = imageAspect(loadedSize);
+  const width = columnWidth > 0 ? Math.min(columnWidth, MEDIA.singleMaxHeight * aspect) : undefined;
+  return (
+    <View className="w-full" onLayout={(event) => setColumnWidth(event.nativeEvent.layout.width)}>
+      <Pressable
+        accessibilityRole="imagebutton"
+        accessibilityLabel={image.alt ?? "Image"}
+        accessibilityHint="Opens full screen"
+        onPress={onOpen}
+        className="active:opacity-90"
+        style={[frame, width === undefined ? { width: "100%", aspectRatio: aspect } : { width, height: width / aspect }]}
+      >
+        <Image
+          source={{ uri: image.url }}
+          resizeMode="cover"
+          style={{ width: "100%", height: "100%" }}
+          onLoad={(event) => setLoadedSize(event.nativeEvent.source)}
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+/**
+ * Two columns of 4:3 tiles, filled as the web grid's rows are: tiles 0 and 2
+ * on the left, 1 and 3 on the right. With three, the first fills the left
+ * column, as tall as the two on the right.
+ */
+function ImageGrid({ images, onOpen }: { images: GalleryImage[]; onOpen: (index: number) => void }) {
+  const frame = useMediaFrame();
+  const tiles = imageGridTiles(images.length);
+  const spans = tiles[0]?.spansColumn === true;
+  const left = spans ? tiles.slice(0, 1) : tiles.filter((tile) => tile.index % 2 === 0);
+  const right = spans ? tiles.slice(1) : tiles.filter((tile) => tile.index % 2 === 1);
+  const tileStyle = { width: "100%" as const, aspectRatio: MEDIA.tileAspect };
+  const cell = (tile: ImageGridTile) => {
+    const image = images[tile.index];
+    if (!image) return null;
+    const name = image.alt ?? `Image ${tile.index + 1}`;
+    return (
+      <Pressable
+        key={tile.index}
+        accessibilityRole="imagebutton"
+        accessibilityLabel={tile.overflow > 0 ? `${name}, ${tile.overflow} more` : name}
+        accessibilityHint="Opens full screen"
+        onPress={() => onOpen(tile.index)}
+        className="active:opacity-90"
+        style={tile.spansColumn ? { width: "100%", flex: 1 } : tileStyle}
+      >
+        <Image source={{ uri: image.url }} resizeMode="cover" style={{ width: "100%", height: "100%" }} />
+        {tile.overflow > 0 ? (
+          <View className="absolute inset-0 items-center justify-center" style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}>
+            <Text className="font-instrument-sans-semibold text-xl" style={[{ color: tokens.color.white }, typeStyle("semibold")]}>
+              {`+${tile.overflow}`}
+            </Text>
+          </View>
+        ) : null}
+      </Pressable>
+    );
+  };
+  return (
+    <View style={[frame, { flexDirection: "row", gap: MEDIA.gap }]}>
+      <View style={{ flex: 1, gap: MEDIA.gap }}>{left.map(cell)}</View>
+      <View style={{ flex: 1, gap: MEDIA.gap }}>{right.map(cell)}</View>
+    </View>
+  );
+}
+
+export type ImageViewerProps = {
+  images: GalleryImage[];
+  /** The image on screen; `null` while closed. */
+  index: number | null;
+  onIndexChange: (index: number) => void;
+  onClose: () => void;
+  /** With it, an "Open in browser" button hands it the image's URL. */
+  onOpenImage?: (url: string) => void;
+};
+
+/**
+ * The web `ImageLightbox` on a phone: the images full screen on black, one
+ * page each, swiped sideways (TalkBack and VoiceOver step with the adjustable
+ * actions). Close (X, or Android back) and "Open in browser" sit at the top,
+ * "2 / 5" at the bottom when there is more than one. No pinch zoom. It fades
+ * in, or appears at once with Reduce Motion.
+ */
+export function ImageViewer({ images, index, onIndexChange, onClose, onOpenImage }: ImageViewerProps) {
+  const reduceMotion = useReduceMotion();
+  if (index === null) return null;
+  return (
+    <Modal visible transparent statusBarTranslucent animationType={reduceMotion ? "none" : "fade"} onRequestClose={onClose}>
+      <ViewerPages images={images} index={index} onIndexChange={onIndexChange} onClose={onClose} onOpenImage={onOpenImage} />
+    </Modal>
+  );
+}
+
+function ViewerPages({ images, index, onIndexChange, onClose, onOpenImage }: Omit<ImageViewerProps, "index"> & { index: number }) {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const count = images.length;
+  const current = images[index];
+  const white = tokens.color.white;
+  return (
+    <View className="flex-1" style={{ backgroundColor: withAlpha(tokens.color.black, 0.92) }}>
+      <FlatList
+        data={images}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        initialScrollIndex={index}
+        getItemLayout={(_, item) => ({ length: width, offset: width * item, index: item })}
+        keyExtractor={(image, item) => `${item}:${image.url}`}
+        onMomentumScrollEnd={(event) => onIndexChange(imageViewerPage(event.nativeEvent.contentOffset.x, width, count))}
+        renderItem={({ item }) => (
+          <View style={{ width, height }} className="items-center justify-center">
+            <Image source={{ uri: item.url }} resizeMode="contain" style={{ width: "100%", height: "100%" }} accessibilityLabel={item.alt ?? "Image"} />
+          </View>
+        )}
+        accessibilityRole="adjustable"
+        accessibilityLabel={current?.alt ?? "Image"}
+        accessibilityValue={count > 1 ? { text: `${index + 1} of ${count}` } : undefined}
+        accessibilityActions={count > 1 ? [{ name: "increment" }, { name: "decrement" }] : undefined}
+        onAccessibilityAction={(event) => {
+          const next = event.nativeEvent.actionName === "increment" ? index + 1 : index - 1;
+          if (next >= 0 && next < count) onIndexChange(next);
+        }}
+      />
+      <View className="absolute left-0 right-0 flex-row items-center justify-between px-3" style={{ top: insets.top + 8 }}>
+        {onOpenImage && current ? (
+          <Pressable
+            accessibilityRole="link"
+            onPress={() => onOpenImage(current.url)}
+            className="min-h-11 flex-row items-center gap-1.5 rounded-full px-3 active:opacity-70"
+            style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}
+          >
+            <IconExternalLink size={16} color={white} />
+            <Text className="font-instrument-sans text-sm" style={{ color: white }}>
+              Open in browser
+            </Text>
+          </Pressable>
+        ) : (
+          <View />
+        )}
+        <IconButton icon={IconX} label="Close" variant="overlay" size="lg" onPress={onClose} />
+      </View>
+      {count > 1 ? (
+        <View className="absolute left-0 right-0 items-center" style={{ bottom: insets.bottom + 16 }} pointerEvents="none">
+          <View className="rounded-full px-3 py-1" style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}>
+            <Text className="font-instrument-sans text-sm" style={{ color: white, fontVariant: ["tabular-nums"] }}>
+              {`${index + 1} / ${count}`}
+            </Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/media/MediaCard.tsx

@@ -0,0 +1,100 @@
+import type { ComponentType, ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IconProps } from "@tabler/icons-react-native";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+export type MediaCardProps = {
+  icon: ComponentType<IconProps>;
+  title: string;
+  /** One muted line under the title. */
+  description?: string;
+  /** Makes the whole card one button. Then leave `action` out: a button cannot hold another. */
+  onPress?: () => void;
+  /** A control at the end, such as a delete button, for a card that is not itself a button. */
+  action?: ReactNode;
+  /** A glyph at the end of a pressable card, such as an open-in-browser arrow. Decorative. */
+  trailingIcon?: ComponentType<IconProps>;
+  /** Fill. Default `tokens.color.surface` (the web `bg-card`). */
+  backgroundColor?: string;
+  /** Title colour. Default the theme foreground. */
+  color?: string;
+  /** Icon and description colour. Default the theme muted. */
+  mutedColor?: string;
+  /** Names the pressable card. Default `title`. */
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+};
+
+/**
+ * A card for one thing a turn produced, such as a saved file or a report: an
+ * icon, a title and a muted line, on the surface fill at the surface radius
+ * (the web `Surface density="tight"`). It is at least 56 high. With `onPress`
+ * the whole card is a button that fades while pressed; otherwise `action`
+ * holds its control.
+ */
+export function MediaCard({
+  icon: Icon,
+  title,
+  description,
+  onPress,
+  action,
+  trailingIcon: Trailing,
+  backgroundColor,
+  color,
+  mutedColor,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+}: MediaCardProps) {
+  const scheme = useScheme();
+  const muted = mutedColor ?? tokens.color.muted[scheme];
+  const body = (
+    <>
+      <Icon size={18} color={muted} />
+      <View className="min-w-0 flex-1">
+        <Text
+          numberOfLines={1}
+          className="font-instrument-sans-medium"
+          style={[sizeStyle("text-sm"), typeStyle("medium"), color ? { color } : textStyle("foreground", scheme)]}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text numberOfLines={1} className="font-instrument-sans" style={[sizeStyle("text-xs"), { color: muted }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {Trailing ? <Trailing size={16} color={muted} /> : null}
+    </>
+  );
+  const frame = {
+    minHeight: 56,
+    borderRadius: tokens.radius.lg,
+    backgroundColor: backgroundColor ?? tokens.color.surface[scheme],
+  };
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityHint={accessibilityHint}
+        onPress={onPress}
+        className="flex-row items-center gap-3 p-3 active:opacity-70"
+        style={frame}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+  return (
+    <View testID={testID} className="flex-row items-center gap-3 p-3" style={frame}>
+      {body}
+      {action}
+    </View>
+  );
+}

package/src/media/imageGrid.ts

@@ -0,0 +1,51 @@
+import { tokens } from "../tokens";
+
+/** One image in a gallery or the full-screen viewer. */
+export type GalleryImage = { url: string; alt?: string };
+
+/**
+ * The web `ImageGalleryPreview` metrics: the surface radius, a 2 gap between
+ * tiles (`gap-0.5`), 4:3 tiles, a lone image at most 384 high (`max-h-96`) and
+ * the hairline ring (`ring-black/10`, `dark:ring-white/10`).
+ */
+export const MEDIA = {
+  radius: tokens.radius.lg,
+  gap: 2,
+  tileAspect: 4 / 3,
+  singleMaxHeight: 384,
+  outline: { light: "rgba(0, 0, 0, 0.1)", dark: "rgba(255, 255, 255, 0.1)" },
+} as const;
+
+/** One tile of the grid: which image, whether it fills the left column, and the "+N" it carries. */
+export type ImageGridTile = { index: number; spansColumn: boolean; overflow: number };
+
+/**
+ * The web gallery grid for `count` images: up to four tiles in two columns.
+ * With three, the first fills the left column. Past four, the fourth carries
+ * "+N" for the rest. One image is not a grid (see `ImageGallery`).
+ */
+export function imageGridTiles(count: number): ImageGridTile[] {
+  const shown = Math.min(count, 4);
+  const overflow = count - shown;
+  return Array.from({ length: shown }, (_, index) => ({
+    index,
+    spansColumn: count === 3 && index === 0,
+    overflow: index === shown - 1 ? overflow : 0,
+  }));
+}
+
+/**
+ * Width over height of a lone image, from its own size once loaded, kept
+ * between 1:2 and 3:1 so a very tall or wide capture still reads. 4:3 until
+ * the size is known.
+ */
+export function imageAspect(size: { width: number; height: number } | null): number {
+  if (!size || size.width <= 0 || size.height <= 0) return MEDIA.tileAspect;
+  return Math.min(3, Math.max(0.5, size.width / size.height));
+}
+
+/** The viewer's page for a scroll offset, kept in range. */
+export function imageViewerPage(offsetX: number, pageWidth: number, count: number): number {
+  if (pageWidth <= 0 || count <= 0) return 0;
+  return Math.min(count - 1, Math.max(0, Math.round(offsetX / pageWidth)));
+}

package/src/motion.ts

@@ -0,0 +1,33 @@
+import { Easing, ReduceMotion } from "react-native-reanimated";
+import { useReduceMotion } from "./useReduceMotion";
+
+// The kit's motion values, from the `animate-expo` tables, so every part
+// eases and springs in one family.
+
+/** Strong ease-out: things entering or leaving the screen. */
+export const EASE_OUT = Easing.bezier(0.23, 1, 0.32, 1);
+
+/** A sheet opened or closed by a tap: no finger, so no velocity and no bounce. */
+export const SHEET_SPRING = {
+  duration: 300,
+  dampingRatio: 1,
+  overshootClamping: true,
+  reduceMotion: ReduceMotion.System,
+} as const;
+
+/** A dragged sheet that springs home: a little bounce, as the finger applied force. Add the release `velocity`. */
+export const SHEET_SNAP_SPRING = {
+  duration: 300,
+  dampingRatio: 0.8,
+  reduceMotion: ReduceMotion.System,
+} as const;
+
+/**
+ * Press feedback on press-in, as a class for a `Pressable`: the 3% scale the
+ * `animate-expo` press recipe allows for something pressed this often (the
+ * web buttons and composer chips scale by 3-4%). With Reduce Motion, a dim
+ * instead of the scale.
+ */
+export function usePressFeedback(): string {
+  return useReduceMotion() ? "active:opacity-80" : "active:scale-[0.97]";
+}

package/src/pagerSwipe.ts

@@ -0,0 +1,102 @@
+/**
+ * The rules of a swiped `Pager`, as plain numbers, so they stay testable
+ * apart from the gesture. The pager's position is in pages: 0 is the first
+ * page, 1.5 is halfway between the second and the third. Distances are in
+ * points and velocities in points per second (the Gesture Handler units),
+ * positive to the right. Each rule is a worklet, so the drag runs it on the
+ * UI thread.
+ */
+
+/**
+ * Sideways travel (pt) before a drag takes the pager: twice a row swipe's
+ * (`SWIPE_ACTIVE_OFFSET_X`), so a swipeable row under the finger takes its
+ * own swipe first, and only a clearly sideways drag moves the pages.
+ */
+export const PAGER_ACTIVE_OFFSET_X = 24;
+
+/** Vertical travel (pt) that leaves the touch to the page's own scroll. */
+export const PAGER_FAIL_OFFSET_Y = 14;
+
+/** A sideways flick at this speed (pt/s) turns the page, however short the drag. */
+const FLICK_VELOCITY = 500;
+
+/** How far ahead (s) the release velocity carries the pages when deciding where they settle. */
+const PROJECTION_S = 0.2;
+
+/** How far the pages move past the first or last page: less and less the further the finger goes. */
+function rubberband(overshoot: number, dimension: number): number {
+  "worklet";
+  const constant = 0.55;
+  return (overshoot * dimension * constant) / (dimension + constant * overshoot);
+}
+
+/**
+ * Where the pages sit for a finger `dx` points from where the drag caught
+ * them at `start`: they follow the finger 1:1 (a drag left shows the next
+ * page), and past the first or last page they meet growing resistance.
+ */
+export function pagerPosition(start: number, dx: number, width: number, count: number): number {
+  "worklet";
+  if (width <= 0) return start;
+  const raw = start - dx / width;
+  const last = count - 1;
+  if (raw < 0) return -rubberband(-raw * width, width) / width;
+  if (raw > last) return last + rubberband((raw - last) * width, width) / width;
+  return raw;
+}
+
+/**
+ * The page a released drag settles on, from the page it started on
+ * (`from`), where it is (`position`) and the finger's speed (`vx`): a flick
+ * past `FLICK_VELOCITY` the way it moved turns one page; else the position
+ * carried on by its speed rounds to the nearest page. Never more than one
+ * page from `from`, and never past the ends.
+ */
+export function pagerSettle(position: number, vx: number, width: number, from: number, count: number): number {
+  "worklet";
+  const moved = position - from;
+  // A drag left (negative `vx`) moves toward the next page (a larger position).
+  const toward = -Math.sign(vx);
+  let target: number;
+  if (Math.abs(vx) >= FLICK_VELOCITY && moved !== 0 && toward === Math.sign(moved)) {
+    target = from + toward;
+  } else {
+    target = Math.round(width > 0 ? position - (vx * PROJECTION_S) / width : position);
+  }
+  return Math.min(count - 1, Math.max(0, Math.min(from + 1, Math.max(from - 1, target))));
+}
+
+/**
+ * Every page from `from` to `to`, both included: the pages a slide from
+ * outside (a tab press) passes, which the pager draws so it never crosses a
+ * blank page.
+ */
+export function pagesBetween(from: number, to: number): number[] {
+  const low = Math.min(from, to);
+  return Array.from({ length: Math.abs(to - from) + 1 }, (_, step) => low + step);
+}
+
+/**
+ * The scroll offset (pt) of a sideways tab row that centres the tab at
+ * `position` (in pages, as the pager's: 1.5 is halfway between the second
+ * and the third tab), given each tab's `x` and `width` in the row and the
+ * row's visible `viewport` width. Between two tabs it blends their centres;
+ * it never scrolls before the first tab or past the last.
+ */
+export function centredTabScroll(
+  tabs: ReadonlyArray<{ x: number; width: number }>,
+  position: number,
+  viewport: number,
+): number {
+  "worklet";
+  const last = tabs[tabs.length - 1];
+  if (!last || viewport <= 0) return 0;
+  const at = Math.min(tabs.length - 1, Math.max(0, position));
+  const below = Math.floor(at);
+  const left = tabs[below] ?? last;
+  const right = tabs[Math.min(tabs.length - 1, below + 1)] ?? last;
+  const share = at - below;
+  const centre = left.x + left.width / 2 + (right.x + right.width / 2 - (left.x + left.width / 2)) * share;
+  const end = Math.max(0, last.x + last.width - viewport);
+  return Math.min(end, Math.max(0, centre - viewport / 2));
+}

package/src/palette.ts

@@ -2,7 +2,7 @@
  * Web semantic colours for React Native, converted from `@vvedantb/ui`
  * `tokens.css` (oklch → sRGB hex, clipped to sRGB). `tokens.ts` holds the
  * neutrals the native app ships; these are the colours it lacks (primary,
- * danger, success, warning, overlay, segment, field placeholder, backdrop,
+ * danger, success, warning, overlay, segment, tab bar pill, field placeholder, backdrop,
  * dialog description).
  *
  * A test in this package converts `tokens.css` and fails when a value here
@@ -25,6 +25,13 @@ export const palette = {
   overlayForeground: { light: "#181818", dark: "#fcfcfc" },
   segment: { light: "#ffffff", dark: "#474747" },
   segmentForeground: { light: "#181818", dark: "#fcfcfc" },
+  /**
+   * The `FloatingTabBar` active pill: `--default` in light (it shows on the
+   * near-white glass bar) and `--segment` in dark. Its own key, so an app that
+   * themes `segment` for the segmented `Tabs` thumb keeps a pill that shows on
+   * the dark glass bar.
+   */
+  tabBarPill: { light: "#ebebeb", dark: "#474747" },
   surfaceTertiary: { light: "#eaeaea", dark: "#282627" },
   fieldPlaceholder: { light: "#727272", dark: "#a0a0a0" },
   backdrop: { light: "rgba(0, 0, 0, 0.5)", dark: "rgba(0, 0, 0, 0.6)" },

package/src/primitives/button.tsx

@@ -3,10 +3,11 @@ import { cn } from "../cn";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { Platform, Pressable } from "react-native";
+import { usePressFeedback } from "../motion";
 
 const buttonVariants = cva(
   cn(
-    "group flex-row items-center justify-center gap-2 shadow-none active:opacity-80",
+    "group flex-row items-center justify-center gap-2 shadow-none",
     Platform.select({
       web: "outline-none transition-all",
     }),
@@ -88,12 +89,14 @@ const Button = React.forwardRef<
   React.ElementRef<typeof Pressable>,
   ButtonProps
 >(({ className, variant, size, shape, ...props }, ref) => {
+  const pressed = usePressFeedback();
   return (
     <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
       <Pressable
         ref={ref}
         className={cn(
           buttonVariants({ variant, size, shape }),
+          pressed,
           props.disabled && "opacity-45",
           className,
         )}

package/src/primitives/keyboard-controller.tsx

@@ -0,0 +1,106 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Platform } from "react-native";
+import {
+  KeyboardAvoidingView,
+  KeyboardChatScrollView,
+  KeyboardGestureArea,
+  KeyboardStickyView,
+  useKeyboardHandler,
+} from "react-native-keyboard-controller";
+import { runOnJS } from "react-native-reanimated";
+import { COMPOSER_INPUT_ID, KeyboardPartsContext, type KeyboardParts } from "./keyboard-parts";
+
+// The keyboard parts on `react-native-keyboard-controller`: the keyboard's
+// real position, frame by frame, on the UI thread. No timing of our own, so
+// the composer can neither lag nor lead the keyboard; with Reduce Motion the
+// system shortens the keyboard's own motion and the parts follow it.
+
+/**
+ * A drag moves the keyboard on iOS (`keyboardDismissMode="interactive"`) and
+ * on Android 11+ (API 30, `WindowInsetsAnimation`). Android 10 and below has
+ * no interactive keyboard: `KeyboardGestureArea` then only renders its
+ * children, and the transcript keeps `on-drag`.
+ */
+const INTERACTIVE = Platform.OS === "ios" || (Platform.OS === "android" && Number(Platform.Version) >= 30);
+
+function AvoidingView(props: ComponentProps<KeyboardParts["AvoidingView"]>) {
+  return <KeyboardAvoidingView {...props} />;
+}
+
+function StickyView({ bottomOffset, ...props }: ComponentProps<KeyboardParts["StickyView"]>) {
+  return <KeyboardStickyView {...props} offset={{ opened: bottomOffset }} />;
+}
+
+/**
+ * `always`: the content rises with the keyboard wherever the reader is, so
+ * what sat on the composer stays there (the newest message, at the end).
+ * Inverted, the keyboard's space is the content's top inset, the visual
+ * bottom: iOS scrolls below offset 0 into it, so the end moves there; Android
+ * moves the content down by it instead, so offset 0 stays the end. While the
+ * keyboard moves, the list scrolls with it, through offsets that are not the
+ * end on either platform.
+ */
+function ChatScrollView({
+  bottomOffset,
+  inverted = false,
+  onInsetChange,
+  onKeyboardMove,
+  ...props
+}: ComponentProps<KeyboardParts["ChatScrollView"]>) {
+  useKeyboardHandler(
+    {
+      onStart: () => {
+        "worklet";
+        runOnJS(onKeyboardMove)(true);
+      },
+      onEnd: () => {
+        "worklet";
+        runOnJS(onKeyboardMove)(false);
+      },
+    },
+    [onKeyboardMove],
+  );
+  return (
+    <KeyboardChatScrollView
+      {...props}
+      inverted={inverted}
+      offset={bottomOffset}
+      keyboardLiftBehavior="always"
+      onContentInsetChange={(insets) =>
+        onInsetChange(inverted ? (Platform.OS === "ios" ? insets.top : 0) : insets.bottom)
+      }
+    />
+  );
+}
+
+/**
+ * `ios`: the keyboard follows once the finger reaches the composer, then 1:1,
+ * and a release carries the finger's velocity, on both platforms.
+ */
+function GestureArea({ offset, style, children }: ComponentProps<KeyboardParts["GestureArea"]>) {
+  return (
+    <KeyboardGestureArea interpolator="ios" offset={offset} textInputNativeID={COMPOSER_INPUT_ID} style={style}>
+      {children}
+    </KeyboardGestureArea>
+  );
+}
+
+const PARTS: KeyboardParts = {
+  AvoidingView,
+  StickyView,
+  ChatScrollView,
+  GestureArea,
+  interactive: INTERACTIVE,
+};
+
+/**
+ * Runs the kit's keyboard handling on `react-native-keyboard-controller`:
+ * the chat composer (`ConversationDock`), its scroll button and the
+ * transcript (`ConversationList`) follow the keyboard frame by frame, a drag
+ * on the transcript moves the keyboard with the finger, and `PromptInput`,
+ * `ChatThread`, the overlays and `KeyboardAvoidingView` pad frame by frame.
+ * Put it inside the app's `KeyboardProvider`.
+ */
+export function KeyboardControllerProvider({ children }: { children: ReactNode }) {
+  return <KeyboardPartsContext.Provider value={PARTS}>{children}</KeyboardPartsContext.Provider>;
+}