@blario/react-native 0.0.0 → 0.1.1

package/src/agent-mode/timers.ts

@@ -0,0 +1,11 @@
+export interface Timers {
+  set: (callback: () => void, milliseconds: number) => unknown;
+  clear: (handle: unknown) => void;
+  now: () => number;
+}
+
+export const SYSTEM_TIMERS: Timers = {
+  set: (callback, milliseconds) => setTimeout(callback, milliseconds),
+  clear: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>),
+  now: () => Date.now(),
+};

package/src/agent-mode/ui/AgentDock.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Keyboard, type LayoutRectangle, StyleSheet, View } from 'react-native';
+
+import type { Band, Rect } from '../../host/rect.ts';
+import type { UiStrings } from '../../ui/strings.ts';
+import { chooseDock, freeBand, messageCap, type PanelDock, STACK_GAP } from '../panel-geometry.ts';
+import type { SpotlightSnapshot } from '../spotlight-controller.ts';
+import { type ActiveSpotlight, AgentPanel, panelChrome } from './AgentPanel.tsx';
+import { StatusCard, type StatusCorners } from './StatusCard.tsx';
+
+export interface DockActions {
+  place: (id: number, band: Band) => void | Promise<void>;
+  approve: () => void;
+  cancel: () => void;
+  skip: () => void;
+}
+
+export interface DockStatus {
+  status: string;
+  queued: string | null;
+  stopLabel: string;
+  pulse: number;
+  cleared: boolean;
+  onStop: () => void;
+}
+
+export interface DockLayout {
+  width: number;
+  height: number;
+  cardWidth: number;
+  bottom: number;
+  safeTop: number;
+}
+
+export interface AgentDockProps {
+  spotlight: SpotlightSnapshot;
+  actions: DockActions;
+  card: DockStatus;
+  strings: UiStrings;
+  color: string;
+  reduceMotion: boolean;
+  nudge: number;
+  layout: DockLayout;
+  onCardFrame: (frame: Rect) => void;
+}
+
+const OPEN_MS = 260;
+const CLOSE_MS = 200;
+const REDUCED_MS = 150;
+const STACK_FADE_MS = 150;
+const STACK_SWAP_PAUSE_MS = 60;
+const STACK_RETURN_PAUSE_MS = 140;
+const STACK_RETURN_MS = 200;
+const ENTER_SHIFT = 16;
+const NUDGE_STEP_MS = 80;
+
+const OPEN = Easing.bezier(0.22, 1, 0.36, 1);
+const CLOSE = Easing.bezier(0.4, 0, 1, 1);
+
+function animate(value: Animated.Value, toValue: number, duration: number, easing: (value: number) => number): Animated.CompositeAnimation {
+  return Animated.timing(value, { toValue, duration, easing, useNativeDriver: true });
+}
+
+function keyboardTop(height: number): number {
+  return Keyboard.metrics()?.screenY ?? height;
+}
+
+export function AgentDock({ spotlight, actions, card, strings, color, reduceMotion, nudge, layout, onCardFrame }: AgentDockProps): React.JSX.Element {
+  const { width, height, cardWidth, bottom, safeTop } = layout;
+  const [presented, setPresented] = useState<ActiveSpotlight | null>(null);
+  const [dock, setDock] = useState<PanelDock>('bottom');
+  const [atTop, setAtTop] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [cardLayout, setCardLayout] = useState<LayoutRectangle | null>(null);
+  const [stackY, setStackY] = useState(0);
+  const [panelHeight, setPanelHeight] = useState(0);
+
+  const panelOpacity = useRef(new Animated.Value(0)).current;
+  const panelShift = useRef(new Animated.Value(ENTER_SHIFT)).current;
+  const stackOpacity = useRef(new Animated.Value(1)).current;
+  const stackShift = useRef(new Animated.Value(0)).current;
+  const nudgeShift = useRef(new Animated.Value(0)).current;
+
+  const presentedId = useRef<number | null>(null);
+  const placedId = useRef<number | null>(null);
+  const openRef = useRef(false);
+  const dockRef = useRef<PanelDock>('bottom');
+  const pending = useRef<Array<ReturnType<typeof setTimeout>>>([]);
+
+  const later = (callback: () => void, milliseconds: number): void => {
+    pending.current.push(setTimeout(callback, milliseconds));
+  };
+
+  const rest = (): void => {
+    pending.current.forEach(clearTimeout);
+    pending.current = [];
+    [panelOpacity, panelShift, stackOpacity, stackShift].forEach((value) => value.stopAnimation());
+    panelOpacity.setValue(0);
+    panelShift.setValue(ENTER_SHIFT);
+    stackOpacity.setValue(1);
+    stackShift.setValue(0);
+    openRef.current = false;
+    dockRef.current = 'bottom';
+    placedId.current = null;
+    setOpen(false);
+    setDock('bottom');
+    setAtTop(false);
+    setPanelHeight(0);
+  };
+
+  const leave = (): void => {
+    presentedId.current = null;
+    if (!openRef.current) {
+      rest();
+      setPresented(null);
+      return;
+    }
+    const duration = reduceMotion ? REDUCED_MS : CLOSE_MS;
+    const easing = reduceMotion ? Easing.linear : CLOSE;
+    if (dockRef.current === 'bottom') {
+      Animated.parallel([animate(panelOpacity, 0, duration, easing), animate(panelShift, reduceMotion ? 0 : ENTER_SHIFT, duration, easing)]).start(() => {
+        if (presentedId.current === null) {
+          rest();
+          setPresented(null);
+        }
+      });
+      return;
+    }
+    Animated.parallel([animate(stackOpacity, 0, duration, easing), animate(stackShift, reduceMotion ? 0 : -ENTER_SHIFT, duration, easing)]).start(() => {
+      if (presentedId.current !== null) {
+        return;
+      }
+      rest();
+      stackOpacity.setValue(0);
+      setPresented(null);
+      later(() => animate(stackOpacity, 1, STACK_RETURN_MS, Easing.out(Easing.ease)).start(), STACK_RETURN_PAUSE_MS);
+    });
+  };
+
+  useEffect(() => {
+    if (spotlight.kind === 'none') {
+      if (presentedId.current !== null) {
+        leave();
+      }
+      return;
+    }
+    if (presentedId.current !== spotlight.id) {
+      rest();
+      presentedId.current = spotlight.id;
+    }
+    setPresented(spotlight);
+  }, [spotlight]);
+
+  useEffect(() => () => pending.current.forEach(clearTimeout), []);
+
+  const cardHeight = cardLayout?.height ?? 0;
+  const cardBottom = height - bottom;
+  const keyboard = keyboardTop(height);
+
+  useEffect(() => {
+    if (presented === null || presented.shown || placedId.current === presented.id || panelHeight === 0 || cardHeight === 0) {
+      return;
+    }
+    placedId.current = presented.id;
+    const stackTop = cardBottom - cardHeight - panelHeight;
+    void actions.place(presented.id, freeBand(safeTop, stackTop, keyboard));
+  }, [presented, panelHeight, cardHeight, cardBottom, safeTop, keyboard, actions]);
+
+  useEffect(() => {
+    if (presented === null || !presented.shown || openRef.current) {
+      return;
+    }
+    openRef.current = true;
+    const left = (width - cardWidth) / 2;
+    const stackTop = cardBottom - cardHeight - panelHeight;
+    const chosen =
+      presented.target === null
+        ? 'bottom'
+        : chooseDock(
+            presented.target,
+            { x: left, y: stackTop - STACK_GAP, width: cardWidth, height: cardBottom - stackTop + STACK_GAP },
+            { x: left, y: safeTop + STACK_GAP, width: cardWidth, height: cardHeight + panelHeight + STACK_GAP },
+          );
+    dockRef.current = chosen;
+    setDock(chosen);
+    const duration = reduceMotion ? REDUCED_MS : OPEN_MS;
+    const easing = reduceMotion ? Easing.linear : OPEN;
+    if (chosen === 'bottom') {
+      setOpen(true);
+      if (reduceMotion) {
+        panelShift.setValue(0);
+      }
+      Animated.parallel([animate(panelOpacity, 1, duration, easing), animate(panelShift, 0, duration, easing)]).start();
+      return;
+    }
+    animate(stackOpacity, 0, STACK_FADE_MS, Easing.out(Easing.ease)).start(() => {
+      later(() => {
+        if (presentedId.current !== presented.id) {
+          return;
+        }
+        setAtTop(true);
+        setOpen(true);
+        panelOpacity.setValue(1);
+        panelShift.setValue(0);
+        stackShift.setValue(reduceMotion ? 0 : -ENTER_SHIFT);
+        Animated.parallel([animate(stackOpacity, 1, duration, easing), animate(stackShift, 0, duration, easing)]).start();
+      }, STACK_SWAP_PAUSE_MS);
+    });
+  }, [presented]);
+
+  useEffect(() => {
+    if (nudge === 0 || reduceMotion) {
+      return;
+    }
+    const step = (toValue: number): Animated.CompositeAnimation => animate(nudgeShift, toValue, NUDGE_STEP_MS, Easing.out(Easing.ease));
+    Animated.sequence([step(-6), step(0), step(-3), step(0)]).start();
+  }, [nudge, reduceMotion, nudgeShift]);
+
+  useEffect(() => {
+    if (cardLayout !== null) {
+      onCardFrame({ x: (width - cardWidth) / 2, y: stackY + cardLayout.y, width: cardWidth, height: cardLayout.height });
+    }
+  }, [cardLayout, stackY, width, cardWidth, onCardFrame]);
+
+  const confirming = presented?.kind === 'confirming';
+  const corners: StatusCorners = !open ? 'round' : atTop ? 'square-bottom' : 'square-top';
+  const room = Math.min(cardBottom - cardHeight - (presented === null ? 0 : panelChrome(presented)), keyboard) - safeTop - STACK_GAP * 2;
+
+  const statusCard = (
+    <View onLayout={(event) => setCardLayout(event.nativeEvent.layout)}>
+      <StatusCard
+        status={confirming ? strings.confirmationTitle : card.status}
+        queued={card.queued}
+        stopLabel={card.stopLabel}
+        color={color}
+        stopHidden={confirming}
+        corners={corners}
+        pulse={card.pulse}
+        cleared={card.cleared}
+        onStop={card.onStop}
+      />
+    </View>
+  );
+
+  const panel =
+    presented === null ? null : (
+      <Animated.View
+        pointerEvents={open ? 'auto' : 'none'}
+        onLayout={(event) => setPanelHeight(event.nativeEvent.layout.height)}
+        style={{ opacity: panelOpacity, transform: [{ translateY: panelShift }] }}
+      >
+        <AgentPanel
+          spotlight={presented}
+          dock={dock}
+          strings={strings}
+          color={color}
+          messageMaxHeight={messageCap(room)}
+          onConfirm={() => actions.approve()}
+          onStop={() => actions.cancel()}
+          onSkip={() => actions.skip()}
+        />
+      </Animated.View>
+    );
+
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      onLayout={(event) => setStackY(event.nativeEvent.layout.y)}
+      style={[
+        styles.stack,
+        { left: (width - cardWidth) / 2, width: cardWidth },
+        atTop ? { top: safeTop + STACK_GAP } : { bottom },
+        { opacity: stackOpacity, transform: [{ translateY: Animated.add(stackShift, nudgeShift) }] },
+      ]}
+    >
+      {atTop ? statusCard : null}
+      {panel}
+      {atTop ? null : statusCard}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stack: { position: 'absolute' },
+});

package/src/agent-mode/ui/AgentLayer.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { intersects, type Rect } from '../../host/rect.ts';
+import type { UiStrings } from '../../ui/strings.ts';
+import { useInsets } from '../../ui/useInsets.ts';
+import type { AgentModeSnapshot } from '../controller.ts';
+import type { CursorSnapshot } from '../cursor.ts';
+import type { SpotlightSnapshot } from '../spotlight-controller.ts';
+import type { AgentStatus } from '../status.ts';
+import { AgentDock, type DockActions } from './AgentDock.tsx';
+import { AgentTap } from './AgentTap.tsx';
+import { MessageBubbles } from './MessageBubbles.tsx';
+import { PendingOverlay } from './PendingOverlay.tsx';
+import { SpotlightLayer } from './SpotlightLayer.tsx';
+import { TouchShield } from './TouchShield.tsx';
+
+export interface AgentLayerProps {
+  snapshot: AgentModeSnapshot;
+  strings: UiStrings;
+  color: string;
+  spotlight: SpotlightSnapshot;
+  spotlightActions: DockActions;
+  cursor: CursorSnapshot;
+  reduceMotion: boolean;
+  onCursorAttach: () => void;
+  onCursorDetach: () => void;
+  onStop: () => void;
+}
+
+const CARD_MAX_WIDTH = 380;
+const CARD_MARGIN = 16;
+const CARD_BOTTOM = 20;
+const BUBBLES_BOTTOM = 96;
+const TOAST_BOTTOM = 100;
+const TOAST_MS = 2_000;
+
+function statusText(status: AgentStatus, strings: UiStrings): string {
+  switch (status.kind) {
+    case 'thinking':
+      return strings.agentThinking;
+    case 'executing':
+      return strings.agentExecuting;
+    case 'text':
+      return status.text;
+  }
+}
+
+function useBlockedTap(): { toast: boolean; pulse: number; block: () => void } {
+  const [toast, setToast] = useState(false);
+  const [pulse, setPulse] = useState(0);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (timer.current !== null) {
+        clearTimeout(timer.current);
+      }
+    },
+    [],
+  );
+  const block = (): void => {
+    setToast(true);
+    setPulse((count) => count + 1);
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => setToast(false), TOAST_MS);
+  };
+  return { toast, pulse, block };
+}
+
+export function AgentLayer({ snapshot, strings, color, spotlight, spotlightActions, cursor, reduceMotion, onCursorAttach, onCursorDetach, onStop }: AgentLayerProps): React.JSX.Element {
+  const insets = useInsets();
+  const { width, height } = useWindowDimensions();
+  const { toast, pulse, block } = useBlockedTap();
+  const [cardFrame, setCardFrame] = useState<Rect | null>(null);
+  const [nudge, setNudge] = useState(0);
+  if (snapshot.phase === 'pending') {
+    return <PendingOverlay text={strings.agentTakingControl} />;
+  }
+  const cardWidth = Math.min(CARD_MAX_WIDTH, width - CARD_MARGIN * 2);
+  const tapUnderCard = cursor.target !== null && cardFrame !== null && intersects(cursor.target, cardFrame);
+  const queued = snapshot.queued === null ? null : (snapshot.queued.message ?? strings.agentQueued);
+  const answering = spotlight.kind === 'confirming' && spotlight.shown;
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {answering ? null : <TouchShield onBlockedTap={block} />}
+      {spotlight.kind === 'none' ? (
+        <MessageBubbles bubbles={snapshot.bubbles} width={cardWidth} bottom={BUBBLES_BOTTOM + insets.bottom} linkColor={color} />
+      ) : null}
+      {toast ? (
+        <View pointerEvents="none" style={[styles.toast, { bottom: TOAST_BOTTOM + insets.bottom }]}>
+          <Text style={styles.toastText}>{strings.agentTapStopToControl}</Text>
+        </View>
+      ) : null}
+      <SpotlightLayer spotlight={spotlight} color={color} reduceMotion={reduceMotion} onBackdropPress={() => setNudge((count) => count + 1)} />
+      <AgentDock
+        spotlight={spotlight}
+        actions={spotlightActions}
+        card={{ status: statusText(snapshot.status, strings), queued, stopLabel: strings.agentStop, pulse, cleared: tapUnderCard, onStop }}
+        strings={strings}
+        color={color}
+        reduceMotion={reduceMotion}
+        nudge={nudge}
+        layout={{ width, height, cardWidth, bottom: CARD_BOTTOM + insets.bottom, safeTop: insets.top }}
+        onCardFrame={setCardFrame}
+      />
+      <AgentTap snapshot={cursor} color={color} reduceMotion={reduceMotion} onAttach={onCursorAttach} onDetach={onCursorDetach} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    position: 'absolute',
+    alignSelf: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderRadius: 8,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  toastText: { color: '#ffffff', fontSize: 14 },
+});

package/src/agent-mode/ui/AgentLayerHost.tsx

@@ -0,0 +1,37 @@
+import React, { type ReactNode } from 'react';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
+
+import { loadFullWindowOverlay } from './full-window-overlay.ts';
+import { chooseLayerHost } from './layer-host.ts';
+
+export interface AgentLayerHostProps {
+  visible: boolean;
+  generation: number;
+  onRequestClose: () => void;
+  children: ReactNode;
+}
+
+const FULL_WINDOW_OVERLAY = Platform.OS === 'ios' ? loadFullWindowOverlay() : null;
+const HOST = chooseLayerHost(Platform.OS, FULL_WINDOW_OVERLAY !== null);
+
+export function AgentLayerHost({ visible, generation, onRequestClose, children }: AgentLayerHostProps): React.JSX.Element | null {
+  if (!visible) {
+    return null;
+  }
+  if (HOST === 'modal') {
+    return (
+      <Modal key={generation} visible transparent animationType="none" hardwareAccelerated onRequestClose={onRequestClose}>
+        {children}
+      </Modal>
+    );
+  }
+  const content = (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {children}
+    </View>
+  );
+  if (HOST === 'full-window-overlay' && FULL_WINDOW_OVERLAY !== null) {
+    return <FULL_WINDOW_OVERLAY>{content}</FULL_WINDOW_OVERLAY>;
+  }
+  return content;
+}

package/src/agent-mode/ui/AgentPanel.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useRef } from 'react';
+import { AccessibilityInfo, Animated, Easing, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import type { UiStrings } from '../../ui/strings.ts';
+import { describeAction } from '../action-description.ts';
+import { luminance, onColor } from '../colors.ts';
+import { plainText } from '../markdown.ts';
+import type { PanelDock } from '../panel-geometry.ts';
+import type { SpotlightSnapshot } from '../spotlight-controller.ts';
+import { MarkdownText } from './MarkdownText.tsx';
+import { WarningIcon } from './WarningIcon.tsx';
+
+export type ActiveSpotlight = Exclude<SpotlightSnapshot, { kind: 'none' }>;
+
+export interface AgentPanelProps {
+  spotlight: ActiveSpotlight;
+  dock: PanelDock;
+  strings: UiStrings;
+  color: string;
+  messageMaxHeight: number;
+  onConfirm: () => void;
+  onStop: () => void;
+  onSkip: () => void;
+}
+
+const DESTRUCTIVE = '#dc2626';
+const WARNING_TEXT = '#92400e';
+const WARNING_BACKGROUND = '#fef3c7';
+const INK = '#1f2937';
+
+const PADDING = 18;
+const BUTTON_HEIGHT = 48;
+const SKIP_HEIGHT = 44;
+const WARNING_HEIGHT = 42;
+const CONFIRM_GAP = 16;
+const DESTRUCTIVE_GAP = 12;
+const READING_GAP = 10;
+const READING_BOTTOM = 6;
+
+export function panelChrome(spotlight: ActiveSpotlight): number {
+  if (spotlight.kind === 'reading') {
+    return PADDING + READING_GAP + SKIP_HEIGHT + READING_BOTTOM;
+  }
+  if (spotlight.request.riskLevel === 'destructive') {
+    return PADDING + DESTRUCTIVE_GAP + WARNING_HEIGHT + DESTRUCTIVE_GAP + 4 + BUTTON_HEIGHT + PADDING;
+  }
+  return PADDING + CONFIRM_GAP + BUTTON_HEIGHT + PADDING;
+}
+
+function messageOf(spotlight: ActiveSpotlight, strings: UiStrings): string {
+  if (spotlight.kind === 'reading') {
+    return spotlight.text ?? strings.actionFallback;
+  }
+  return spotlight.request.explanation?.trim() || describeAction(spotlight.request.action, strings);
+}
+
+function barColor(color: string): string {
+  return 1.05 / ((luminance(color) ?? 0) + 0.05) < 1.5 ? INK : color;
+}
+
+function Progress({ durationMs, running, color }: { durationMs: number; running: boolean; color: string }): React.JSX.Element {
+  const progress = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (running) {
+      Animated.timing(progress, { toValue: 1, duration: durationMs, easing: Easing.linear, useNativeDriver: true }).start();
+    }
+  }, [running, durationMs, progress]);
+  return (
+    <View style={styles.track}>
+      <Animated.View style={[styles.bar, { backgroundColor: barColor(color), transform: [{ scaleX: progress }] }]} />
+    </View>
+  );
+}
+
+export function AgentPanel({ spotlight, dock, strings, color, messageMaxHeight, onConfirm, onStop, onSkip }: AgentPanelProps): React.JSX.Element {
+  const message = messageOf(spotlight, strings);
+  const confirming = spotlight.kind === 'confirming';
+  const destructive = confirming && spotlight.request.riskLevel === 'destructive';
+
+  useEffect(() => {
+    if (confirming && spotlight.shown) {
+      AccessibilityInfo.announceForAccessibility(plainText(message));
+    }
+  }, [confirming, spotlight.shown, message]);
+
+  const body = (
+    <ScrollView style={{ maxHeight: messageMaxHeight }} bounces={false} nestedScrollEnabled>
+      <View style={spotlight.kind === 'reading' ? styles.readingMessage : null}>
+        <MarkdownText source={message} linkColor={color} textStyle={styles.message} />
+      </View>
+    </ScrollView>
+  );
+
+  return (
+    <View
+      accessibilityViewIsModal={confirming}
+      style={[
+        styles.panel,
+        dock === 'bottom' ? styles.bottom : styles.top,
+        confirming ? (destructive ? styles.destructive : styles.confirm) : styles.reading,
+      ]}
+    >
+      {body}
+      {spotlight.kind === 'reading' ? (
+        <View style={styles.progressRow}>
+          <Progress durationMs={spotlight.durationMs} running={spotlight.shown} color={color} />
+          <Pressable accessibilityRole="button" onPress={onSkip} style={styles.skip}>
+            <Text style={styles.skipText}>{strings.readingSkip}</Text>
+          </Pressable>
+        </View>
+      ) : (
+        <>
+          {destructive ? (
+            <View style={styles.warning}>
+              <WarningIcon color={WARNING_TEXT} background={WARNING_BACKGROUND} />
+              <Text style={styles.warningText}>{strings.confirmCannotBeUndone}</Text>
+            </View>
+          ) : null}
+          <View style={[styles.buttons, destructive ? styles.destructiveButtons : null]}>
+            <Pressable accessibilityRole="button" onPress={onStop} style={[styles.button, styles.stop]}>
+              <Text style={[styles.buttonText, { color: INK }]}>{strings.confirmStop}</Text>
+            </Pressable>
+            <Pressable
+              accessibilityRole="button"
+              onPress={onConfirm}
+              style={[styles.button, destructive ? { backgroundColor: DESTRUCTIVE } : [styles.confirmButton, { backgroundColor: color }]]}
+            >
+              <Text style={[styles.buttonText, { color: destructive ? '#ffffff' : onColor(color) }]}>
+                {destructive ? strings.confirmProceedDestructive : strings.confirmProceed}
+              </Text>
+            </Pressable>
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    backgroundColor: '#ffffff',
+    shadowColor: '#000000',
+    elevation: 12,
+  },
+  bottom: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    shadowOffset: { width: 0, height: -6 },
+    shadowOpacity: 0.14,
+    shadowRadius: 9,
+  },
+  top: {
+    borderBottomLeftRadius: 16,
+    borderBottomRightRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.18,
+    shadowRadius: 10,
+  },
+  confirm: { padding: PADDING, gap: CONFIRM_GAP },
+  destructive: { padding: PADDING, gap: DESTRUCTIVE_GAP },
+  reading: { paddingTop: PADDING, paddingRight: 12, paddingBottom: READING_BOTTOM, paddingLeft: PADDING, gap: READING_GAP },
+  message: { fontSize: 16, lineHeight: 23, color: INK },
+  readingMessage: { paddingRight: 6 },
+  warning: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    minHeight: WARNING_HEIGHT,
+    paddingHorizontal: 12,
+    borderWidth: 1,
+    borderColor: '#f59e0b',
+    borderRadius: 10,
+    backgroundColor: WARNING_BACKGROUND,
+  },
+  warningText: { flex: 1, fontSize: 14, color: WARNING_TEXT },
+  buttons: { flexDirection: 'row', gap: 10 },
+  destructiveButtons: { marginTop: 4 },
+  button: { flex: 1, height: BUTTON_HEIGHT, borderRadius: 12, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 12 },
+  stop: { backgroundColor: '#eef0f3' },
+  confirmButton: { borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0.1)' },
+  buttonText: { fontSize: 16, fontWeight: '600' },
+  progressRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  track: { flex: 1, height: 4, borderRadius: 2, overflow: 'hidden', backgroundColor: 'rgba(0, 0, 0, 0.08)' },
+  bar: { height: '100%', width: '100%', transformOrigin: 'left' },
+  skip: { height: SKIP_HEIGHT, paddingHorizontal: 12, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
+  skipText: { fontSize: 15, fontWeight: '600', color: '#4b5563' },
+});