@expokit/cli 0.0.0-stage → 0.2.0

package/registry/toast/files/src/components/ui/toast.tsx

@@ -0,0 +1,1284 @@
+import * as Haptics from 'expo-haptics';
+import React, { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit, type Colors } from '@/lib/kit';
+
+// ─── Store ────────────────────────────────────────────────────────────────────
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
+
+export interface ToastAction {
+  label: string;
+  onPress: () => void;
+}
+
+export interface ToastOptions {
+  /** Reuse an id to update a toast in place (e.g. loading → success). */
+  id?: string;
+  description?: string;
+  /** Milliseconds before it auto-dismisses. `Infinity` keeps it until dismissed. */
+  duration?: number;
+  action?: ToastAction;
+  /** Replace the type icon (or `false` for none). */
+  icon?: React.ReactNode | false;
+  /** Send to the `<Toaster id="…">` with this id. Toasts without one go to the Toaster without an id. */
+  toaster?: string;
+}
+
+export interface ToastData extends ToastOptions {
+  id: string;
+  type: ToastType;
+  title: string;
+  /** Bumped on every update, restarts the timer. */
+  updatedAt: number;
+  dismissed?: boolean;
+}
+
+type Message<T> = string | ((value: T) => string);
+
+export type ToastApi = ((title: string, opts?: ToastOptions) => string) & {
+  success: (title: string, opts?: ToastOptions) => string;
+  error: (title: string, opts?: ToastOptions) => string;
+  warning: (title: string, opts?: ToastOptions) => string;
+  info: (title: string, opts?: ToastOptions) => string;
+  loading: (title: string, opts?: ToastOptions) => string;
+  promise: <T>(
+    promise: Promise<T> | (() => Promise<T>),
+    msgs: { loading: string; success: Message<T>; error: Message<unknown> },
+    opts?: ToastOptions,
+  ) => Promise<T>;
+  dismiss: (id?: string) => void;
+};
+
+interface ToastStore {
+  subscribe: (listener: () => void) => () => void;
+  snapshot: () => ToastData[];
+  toast: ToastApi;
+  remove: (id: string) => void;
+}
+
+function createToastStore(): ToastStore {
+  let toasts: ToastData[] = [];
+  let counter = 0;
+  const listeners = new Set<() => void>();
+
+  const emit = () => listeners.forEach((l) => l());
+  const subscribe = (l: () => void) => {
+    listeners.add(l);
+    return () => {
+      listeners.delete(l);
+    };
+  };
+  const snapshot = () => toasts;
+
+  function upsert(type: ToastType, title: string, opts: ToastOptions = {}) {
+    const id = opts.id ?? `t${++counter}`;
+    const next: ToastData = { ...opts, id, type, title, updatedAt: Date.now() + Math.random(), dismissed: false };
+    const exists = toasts.some((t) => t.id === id);
+    toasts = exists ? toasts.map((t) => (t.id === id ? { ...t, ...next } : t)) : [next, ...toasts];
+    emit();
+    return id;
+  }
+
+  function remove(id: string) {
+    if (!toasts.some((t) => t.id === id)) return;
+    toasts = toasts.filter((t) => t.id !== id);
+    emit();
+  }
+
+  const toastApi = Object.assign((title: string, opts?: ToastOptions) => upsert('default', title, opts), {
+    success: (title: string, opts?: ToastOptions) => upsert('success', title, opts),
+    error: (title: string, opts?: ToastOptions) => upsert('error', title, opts),
+    warning: (title: string, opts?: ToastOptions) => upsert('warning', title, opts),
+    info: (title: string, opts?: ToastOptions) => upsert('info', title, opts),
+    loading: (title: string, opts?: ToastOptions) => upsert('loading', title, opts),
+    promise<T>(
+      promise: Promise<T> | (() => Promise<T>),
+      msgs: { loading: string; success: Message<T>; error: Message<unknown> },
+      opts?: ToastOptions,
+    ): Promise<T> {
+      const id = upsert('loading', msgs.loading, opts);
+      const p = typeof promise === 'function' ? promise() : promise;
+      p.then(
+        (v) => upsert('success', typeof msgs.success === 'function' ? msgs.success(v) : msgs.success, { ...opts, id }),
+        (e) => upsert('error', typeof msgs.error === 'function' ? msgs.error(e) : msgs.error, { ...opts, id }),
+      );
+      return p;
+    },
+    dismiss(id?: string) {
+      toasts = toasts.map((t) => (id === undefined || t.id === id ? { ...t, dismissed: true } : t));
+      emit();
+    },
+  }) as ToastApi;
+
+  return { subscribe, snapshot, toast: toastApi, remove };
+}
+
+const globalStore = createToastStore();
+
+/**
+ * Show a toast from anywhere — no hooks. Render one `<Toaster />` near the root.
+ * Prefer `useToast()` inside a `<ToastProvider>` when you need an isolated stack (e.g. demos).
+ *
+ *   toast('Event created')
+ *   toast.success('Saved', { description: 'All changes synced.' })
+ *   toast.promise(upload(), { loading: 'Uploading…', success: 'Uploaded', error: 'Upload failed' })
+ */
+export const toast = globalStore.toast;
+
+const ToastStoreContext = createContext<ToastStore | null>(null);
+
+/** Scoped toast queue — nest a `<Toaster />` (and `useToast()`) inside so demos / sheets don't share the global store. */
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const store = useMemo(() => createToastStore(), []);
+  return <ToastStoreContext.Provider value={store}>{children}</ToastStoreContext.Provider>;
+}
+
+/** Toast API for the nearest `ToastProvider`, or the global `toast` if none. */
+export function useToast(): ToastApi {
+  return useContext(ToastStoreContext)?.toast ?? globalStore.toast;
+}
+
+function useToastStore(): ToastStore {
+  return useContext(ToastStoreContext) ?? globalStore;
+}
+
+// ─── Shared behaviour ─────────────────────────────────────────────────────────
+
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+const HAPTIC: Partial<Record<ToastType, Haptics.NotificationFeedbackType>> = {
+  success: Haptics.NotificationFeedbackType.Success,
+  warning: Haptics.NotificationFeedbackType.Warning,
+  error: Haptics.NotificationFeedbackType.Error,
+};
+
+/** One notification tap when a toast appears or changes tone. After a spinner, it lands as the circle closes. */
+function useToneHaptic(id: string | undefined, type: ToastType | undefined, enabled: boolean) {
+  const prev = useRef<{ id?: string; type?: ToastType }>({});
+  useEffect(() => {
+    const from = prev.current;
+    prev.current = { id, type };
+    if (!enabled || !id || !type || (from.id === id && from.type === type)) return;
+    const kind = HAPTIC[type];
+    if (kind === undefined) return;
+    const t = setTimeout(
+      () => Haptics.notificationAsync(kind).catch(() => {}),
+      from.id === id && from.type === 'loading' ? 380 : 0,
+    );
+    return () => clearTimeout(t);
+  }, [id, type, enabled]);
+}
+
+/**
+ * Auto-dismiss clock. Drives a native-driven 1 → 0 `life` value (the drain bar) and fires `onDone`.
+ * Both freeze while `paused` and resume where they stopped.
+ */
+function useLifetime(key: number | undefined, duration: number, running: boolean, onDone: () => void) {
+  const life = useRef(new Animated.Value(1)).current;
+  const remaining = useRef(duration);
+  const done = useRef(onDone);
+  useEffect(() => {
+    done.current = onDone;
+  });
+  useEffect(() => {
+    remaining.current = duration;
+    life.setValue(1);
+  }, [key, duration, life]);
+  useEffect(() => {
+    if (!running || !Number.isFinite(duration) || duration <= 0) return;
+    const startedAt = Date.now();
+    life.setValue(Math.max(0, remaining.current / duration));
+    Animated.timing(life, {
+      toValue: 0,
+      duration: Math.max(0, remaining.current),
+      easing: Easing.linear,
+      useNativeDriver: true,
+    }).start();
+    const timer = setTimeout(() => done.current(), Math.max(0, remaining.current));
+    return () => {
+      clearTimeout(timer);
+      life.stopAnimation();
+      remaining.current -= Date.now() - startedAt;
+      life.setValue(Math.max(0, remaining.current / duration));
+    };
+  }, [key, duration, running, life]);
+  return life;
+}
+
+// ─── Toaster ──────────────────────────────────────────────────────────────────
+
+export type ToasterPosition = 'top' | 'bottom';
+export type ToasterVariant = 'default' | 'rich' | 'minimal' | 'island';
+
+export interface ToasterProps {
+  /** Only show toasts sent with `{ toaster: id }`. */
+  id?: string;
+  /** Edge the stack sits on. Ignored by `variant="island"`, which always lives at the top centre. */
+  position?: ToasterPosition;
+  /**
+   * 'default' cards with a tone glow · 'rich' cards filled with the tone · 'minimal' compact inverted pills
+   * (a second line for the description when there is one) ·
+   * 'island' a black capsule at the top centre that springs open like the iPhone Dynamic Island.
+   */
+  variant?: ToasterVariant;
+  /** Default auto-dismiss time in ms (default 4000). */
+  duration?: number;
+  /** How many cards peek out of the stack (default 3). */
+  visibleToasts?: number;
+  /** Always show the stack fanned out instead of collapsed. */
+  expand?: boolean;
+  /**
+   * Distance from the top / bottom edge (default 16, island 10). There is no safe-area dependency:
+   * pass `insets.top + 8` (react-native-safe-area-context) to sit the island below a notch.
+   */
+  offset?: number;
+  /** Space between fanned-out cards (default 10). */
+  gap?: number;
+  /** Show a ✕ on every toast. */
+  closeButton?: boolean;
+  /** Success / warning / error toasts tap the matching notification haptic (default true). */
+  haptics?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const PEEK = 12;
+const GUESS_HEIGHT = 64;
+
+/**
+ * Hosts the toasts. It fills its parent absolutely (touches pass through), so drop it at the
+ * root of your app — or inside any container to scope it there. Toasts stack like cards, fan out
+ * when tapped, swipe away sideways or toward the edge, and pause their timers (and the draining
+ * time line) while you touch them. `variant="island"` turns it into a Dynamic Island.
+ */
+export function Toaster({
+  id,
+  position = 'bottom',
+  variant = 'default',
+  duration = 4000,
+  visibleToasts = 3,
+  expand = false,
+  offset,
+  gap = 10,
+  closeButton = false,
+  haptics = true,
+  style,
+}: ToasterProps) {
+  const store = useToastStore();
+  const all = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
+  // Inside ToastProvider, show the whole scoped stack (id filter is for the global store only).
+  const mine = store === globalStore ? all.filter((t) => t.toaster === id) : all;
+  const reduceMotion = useReduceMotion();
+
+  const active = mine.filter((t) => !t.dismissed);
+  const [heights, setHeights] = useState<Record<string, number>>({});
+  const [open, setOpen] = useState(false);
+  const expanded = expand || (open && active.length > 1);
+  const s = position === 'bottom' ? -1 : 1; // direction the stack grows in
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- collapse once the stack is down to one card
+    if (active.length <= 1 && open) setOpen(false);
+  }, [active.length, open]);
+
+  if (variant === 'island') {
+    return (
+      <IslandToaster
+        store={store}
+        toasts={mine}
+        duration={duration}
+        offset={offset ?? 10}
+        haptics={haptics}
+        reduceMotion={reduceMotion}
+        style={style}
+      />
+    );
+  }
+
+  const frontH = heights[active[0]?.id] ?? GUESS_HEIGHT;
+  const layout: Record<string, StackLayout> = {};
+  let acc = 0;
+  active.forEach((t, i) => {
+    const h = heights[t.id] ?? GUESS_HEIGHT;
+    if (expanded) {
+      layout[t.id] = { y: s * acc, scale: 1, hidden: i >= visibleToasts, faded: false };
+    } else {
+      const clamped = Math.min(h, frontH);
+      layout[t.id] = {
+        // Line up the far edges, then let each older card peek out a little further.
+        y: s * (frontH - clamped + PEEK * i),
+        scale: 1 - 0.05 * i,
+        hidden: i >= visibleToasts,
+        clamp: i > 0 ? frontH : undefined,
+        faded: i > 0,
+      };
+    }
+    acc += h + gap;
+  });
+
+  return (
+    <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host, style]}>
+      {[...mine].reverse().map((t) => (
+        <ToastItem
+          key={t.id}
+          data={t}
+          layout={layout[t.id]}
+          edge={position}
+          edgeOffset={offset ?? 16}
+          variant={variant}
+          duration={t.duration ?? (t.type === 'loading' ? Infinity : duration)}
+          paused={expanded}
+          closeButton={closeButton}
+          haptics={haptics}
+          reduceMotion={reduceMotion}
+          onHeight={(h) => setHeights((prev) => (prev[t.id] === h ? prev : { ...prev, [t.id]: h }))}
+          onPress={() => active.length > 1 && !expand && setOpen((o) => !o)}
+          onRemoved={() => {
+            store.remove(t.id);
+            setHeights(({ [t.id]: _, ...rest }) => rest);
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+// ─── Toast card ───────────────────────────────────────────────────────────────
+
+interface StackLayout {
+  y: number;
+  scale: number;
+  hidden: boolean;
+  clamp?: number;
+  faded: boolean;
+}
+
+interface ToastItemProps {
+  data: ToastData;
+  /** Undefined while the toast is leaving. */
+  layout?: StackLayout;
+  edge: ToasterPosition;
+  edgeOffset: number;
+  variant: Exclude<ToasterVariant, 'island'>;
+  duration: number;
+  paused: boolean;
+  closeButton: boolean;
+  haptics: boolean;
+  reduceMotion: boolean;
+  onHeight: (h: number) => void;
+  onPress: () => void;
+  onRemoved: () => void;
+}
+
+function rubber(d: number) {
+  return (d * 40) / (40 + d);
+}
+
+function ToastItem({
+  data,
+  layout,
+  edge,
+  edgeOffset,
+  variant,
+  duration,
+  paused,
+  closeButton,
+  haptics,
+  reduceMotion,
+  onHeight,
+  onPress,
+  onRemoved,
+}: ToastItemProps) {
+  const toast = useToast();
+  const { colors, radius, dark } = useKit();
+  const toward = edge === 'bottom' ? 1 : -1; // swipe direction that dismisses toward the edge
+  const last = useRef(layout ?? { y: 0, scale: 1, hidden: false, faded: false });
+  if (layout) last.current = layout;
+  const L = last.current;
+
+  // Every value here is native-driven: they all end up in transform / opacity.
+  const enter = useRef(new Animated.Value(0)).current;
+  const y = useRef(new Animated.Value(L.y)).current;
+  const scale = useRef(new Animated.Value(L.scale)).current;
+  const vis = useRef(new Animated.Value(L.hidden ? 0 : 1)).current;
+  const content = useRef(new Animated.Value(L.faded ? 0 : 1)).current;
+  const dragX = useRef(new Animated.Value(0)).current;
+  const dragY = useRef(new Animated.Value(0)).current;
+  const [touching, setTouching] = useState(false);
+  const gone = useRef(false);
+
+  useToneHaptic(data.id, data.type, haptics && !data.dismissed);
+
+  useEffect(() => {
+    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [enter]);
+
+  const target = layout ?? L;
+  useEffect(() => {
+    if (!layout || data.dismissed) return;
+    Animated.parallel([
+      Animated.spring(y, { toValue: target.y, useNativeDriver: true, ...motion.snappy }),
+      Animated.spring(scale, { toValue: target.scale, useNativeDriver: true, ...motion.snappy }),
+      Animated.timing(vis, { toValue: target.hidden ? 0 : 1, duration: 200, useNativeDriver: true }),
+      Animated.timing(content, { toValue: target.faded ? 0 : 1, duration: 200, useNativeDriver: true }),
+    ]).start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- re-run on the numbers, not the object identity
+  }, [target.y, target.scale, target.hidden, target.faded, data.dismissed]);
+
+  // Leave: fade + slide toward the edge, then drop out of the store.
+  useEffect(() => {
+    if (!data.dismissed || gone.current) return;
+    gone.current = true;
+    Animated.timing(enter, { toValue: 0, duration: 200, easing: Easing.in(Easing.quad), useNativeDriver: true }).start(onRemoved);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.dismissed]);
+
+  // Auto-dismiss timer + drain line; both pause while the stack is open or a finger is down.
+  const life = useLifetime(data.updatedAt, duration, !data.dismissed && !paused && !touching, () => toast.dismiss(data.id));
+
+  const flyOut = (axis: 'x' | 'y', to: number) => {
+    gone.current = true;
+    Animated.parallel([
+      Animated.timing(axis === 'x' ? dragX : dragY, {
+        toValue: to,
+        duration: 180,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }),
+      Animated.timing(enter, { toValue: 0, duration: 180, useNativeDriver: true }),
+    ]).start(onRemoved);
+  };
+
+  const pan = useRef(
+    (() => {
+      const gesture = { axis: null as 'x' | 'y' | null };
+      return PanResponder.create({
+        onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 6 || Math.abs(g.dy) > 6,
+        onPanResponderGrant: () => {
+          gesture.axis = null;
+          setTouching(true);
+        },
+        onPanResponderMove: (_, g) => {
+          if (!gesture.axis) gesture.axis = Math.abs(g.dx) > Math.abs(g.dy) ? 'x' : 'y';
+          if (gesture.axis === 'x') dragX.setValue(g.dx);
+          else {
+            const d = g.dy * toward;
+            dragY.setValue(d >= 0 ? g.dy : -toward * rubber(-d));
+          }
+        },
+        onPanResponderRelease: (_, g) => {
+          setTouching(false);
+          const { axis } = gesture;
+          if (axis === 'x' && (Math.abs(g.dx) > 90 || Math.abs(g.vx) > 0.7)) return flyOut('x', Math.sign(g.dx || g.vx) * 520);
+          if (axis === 'y' && (g.dy * toward > 36 || g.vy * toward > 0.6)) return flyOut('y', toward * 140);
+          Animated.parallel([
+            Animated.spring(dragX, { toValue: 0, useNativeDriver: true, ...motion.snappy }),
+            Animated.spring(dragY, { toValue: 0, useNativeDriver: true, ...motion.snappy }),
+          ]).start();
+        },
+        onPanResponderTerminate: () => {
+          setTouching(false);
+          Animated.spring(dragX, { toValue: 0, useNativeDriver: true }).start();
+          Animated.spring(dragY, { toValue: 0, useNativeDriver: true }).start();
+        },
+      });
+    })(),
+  ).current;
+
+  const look = theme(variant, data.type, colors, dark);
+  const minimal = variant === 'minimal';
+  // A one-line pill stays a capsule; with a description it becomes a soft rounded card.
+  const r = minimal ? (data.description ? radius.scale(20) : radius.capsule(44)) : radius.lg;
+
+  const opacity = Animated.multiply(
+    Animated.multiply(enter, vis),
+    dragX.interpolate({ inputRange: [-260, 0, 260], outputRange: [0, 1, 0], extrapolate: 'clamp' }),
+  );
+  const translateY = Animated.add(
+    Animated.add(y, dragY),
+    enter.interpolate({ inputRange: [0, 1], outputRange: [toward * 28, 0] }),
+  );
+  const s = Animated.multiply(scale, enter.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }));
+
+  const typed = data.type !== 'default';
+  const icon =
+    data.icon === false ? null : (data.icon ??
+      (typed ? <LivingIcon type={data.type} color={look.icon} halo={!minimal} reduceMotion={reduceMotion} /> : null));
+  const showGlow = !minimal && typed && data.icon !== false && look.glow > 0;
+  const showBar = !minimal && Number.isFinite(duration);
+
+  return (
+    <Animated.View
+      pointerEvents="box-none"
+      style={[
+        styles.lane,
+        edge === 'bottom' ? { bottom: edgeOffset } : { top: edgeOffset },
+        {
+          opacity,
+          transform: [{ translateY }, { translateX: dragX }, { scale: s }],
+          transformOrigin: edge === 'bottom' ? 'center top' : 'center bottom',
+        },
+      ]}
+    >
+      {/* Shadow layer (unclipped) */}
+      <View
+        {...pan.panHandlers}
+        style={[
+          minimal ? styles.cardMinimal : styles.cardFull,
+          { borderRadius: r, backgroundColor: look.bg, maxHeight: L.clamp, boxShadow: shadowFor(dark, minimal) },
+        ]}
+      >
+        {/* Surface (clips the glow and drain line to the corners) */}
+        <View style={[styles.clip, { borderRadius: r, borderColor: look.border, maxHeight: L.clamp }]}>
+          <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { opacity: content }]}>
+            {showGlow ? <Glow color={look.glowColor} strength={look.glow} x={32} y={32} /> : null}
+          </Animated.View>
+          <Pressable
+            onPress={onPress}
+            onPressIn={() => setTouching(true)}
+            onPressOut={() => setTouching(false)}
+            accessibilityRole="alert"
+            accessibilityLiveRegion="polite"
+            accessibilityLabel={[data.title, data.description].filter(Boolean).join('. ')}
+            onLayout={(e) => onHeight(Math.round(e.nativeEvent.layout.height))}
+          >
+            <Animated.View style={[styles.row, minimal ? styles.padMinimal : icon ? styles.padIcon : styles.pad, { opacity: content }]}>
+              {icon ? <View style={!minimal && data.description ? styles.iconTop : null}>{icon}</View> : null}
+              <View style={minimal ? styles.textMinimal : styles.text}>
+                <Text numberOfLines={minimal ? 1 : 3} style={[styles.title, { color: look.title }]}>
+                  {data.title}
+                </Text>
+                {data.description ? (
+                  <Text numberOfLines={minimal ? 2 : 4} style={[styles.desc, minimal && styles.descMinimal, { color: look.desc }]}>
+                    {data.description}
+                  </Text>
+                ) : null}
+              </View>
+              {data.action ? (
+                <Pressable
+                  accessibilityRole="button"
+                  hitSlop={8}
+                  onPress={() => {
+                    data.action?.onPress();
+                    toast.dismiss(data.id);
+                  }}
+                  style={({ pressed }) => [
+                    styles.action,
+                    { borderRadius: radius.capsule(32), backgroundColor: look.actionBg, opacity: pressed ? 0.7 : 1 },
+                  ]}
+                >
+                  <Text style={[styles.actionText, { color: look.actionFg }]}>{data.action.label}</Text>
+                </Pressable>
+              ) : null}
+              {closeButton ? (
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel="Dismiss"
+                  hitSlop={12}
+                  onPress={() => toast.dismiss(data.id)}
+                  style={styles.close}
+                >
+                  <Svg width={14} height={14} viewBox="0 0 24 24">
+                    <Path d="M6 6l12 12M18 6L6 18" stroke={look.desc} strokeWidth={2.4} strokeLinecap="round" />
+                  </Svg>
+                </Pressable>
+              ) : null}
+            </Animated.View>
+          </Pressable>
+          {showBar ? (
+            <Animated.View
+              pointerEvents="none"
+              style={[styles.bar, { backgroundColor: look.bar, opacity: content, transform: [{ scaleX: life }] }]}
+            />
+          ) : null}
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+// ─── Island ───────────────────────────────────────────────────────────────────
+
+const CAP_W = 124;
+const CAP_H = 36;
+type Stage = 'hidden' | 'capsule' | 'open';
+
+interface IslandToasterProps {
+  store: ToastStore;
+  toasts: ToastData[];
+  duration: number;
+  offset: number;
+  haptics: boolean;
+  reduceMotion: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Dynamic-Island host: one black capsule at the top centre. It widens, then grows taller into a card,
+ * holds, and folds back into the capsule. A newer toast squashes the island and swaps its content in place.
+ *
+ * Drivers: `w` / `h` (size, corner) are JS-driven on `frame` + `clip`; presence, squash, drag and content
+ * fade are native-driven on their own wrapper views.
+ */
+function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion, style }: IslandToasterProps) {
+  const { colors, radius, dark } = useKit();
+  const active = toasts.filter((t) => !t.dismissed);
+  const front = active[0];
+
+  const [stage, setStageState] = useState<Stage>('hidden');
+  const stageRef = useRef<Stage>('hidden');
+  const [shownId, setShownIdState] = useState<string | null>(null);
+  const shownRef = useRef<string | null>(null);
+  const lastShown = useRef<ToastData | null>(null);
+  const [laneW, setLaneW] = useState(0);
+  const [contentH, setContentH] = useState(0);
+  const [expanded, setExpanded] = useState(false);
+  const [touching, setTouching] = useState(false);
+
+  const live = shownId ? toasts.find((t) => t.id === shownId) : undefined;
+  useEffect(() => {
+    if (live) lastShown.current = live;
+  });
+  const shown = live ?? (shownId ? lastShown.current : null);
+
+  // JS-driven (layout)
+  const w = useRef(new Animated.Value(CAP_W)).current;
+  const h = useRef(new Animated.Value(CAP_H)).current;
+  // Native-driven (transform / opacity)
+  const presence = useRef(new Animated.Value(0)).current;
+  const sqX = useRef(new Animated.Value(1)).current;
+  const sqY = useRef(new Animated.Value(1)).current;
+  const dragY = useRef(new Animated.Value(0)).current;
+  const content = useRef(new Animated.Value(0)).current;
+
+  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const later = (ms: number, fn: () => void) => {
+    timers.current.push(setTimeout(fn, ms));
+  };
+  const clearLater = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  };
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+
+  const setStage = (s: Stage) => {
+    stageRef.current = s;
+    setStageState(s);
+  };
+  const setShown = (id: string | null) => {
+    shownRef.current = id;
+    setShownIdState(id);
+  };
+
+  const squash = () => {
+    if (reduceMotion) return;
+    Animated.sequence([
+      Animated.parallel([
+        Animated.timing(sqX, { toValue: 1.05, duration: 90, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+        Animated.timing(sqY, { toValue: 0.9, duration: 90, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+      ]),
+      Animated.parallel([
+        Animated.spring(sqX, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
+        Animated.spring(sqY, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
+      ]),
+    ]).start();
+  };
+
+  // Lifecycle: react to the front toast changing.
+  useEffect(() => {
+    const current = shownRef.current;
+    if (front) {
+      if (!current || stageRef.current === 'hidden') {
+        clearLater();
+        dragY.setValue(0);
+        setShown(front.id);
+        setExpanded(false);
+        setStage('capsule');
+        later(reduceMotion ? 0 : 140, () => setStage('open'));
+      } else if (front.id !== current) {
+        clearLater();
+        // Replace in place: older toasts are superseded.
+        toasts.forEach((t) => t.id !== front.id && store.remove(t.id));
+        if (stageRef.current === 'open') {
+          Animated.timing(content, { toValue: 0, duration: 90, useNativeDriver: true }).start(() => {
+            setShown(front.id);
+            setExpanded(false);
+            squash();
+            Animated.timing(content, { toValue: 1, duration: 200, delay: 30, useNativeDriver: true }).start();
+          });
+        } else {
+          setShown(front.id);
+          setExpanded(false);
+          setStage('open');
+        }
+      } else if (stageRef.current !== 'open') {
+        clearLater();
+        setStage('open');
+      }
+    } else if (current && stageRef.current !== 'hidden') {
+      // Fold back into the capsule, then vanish.
+      clearLater();
+      setExpanded(false);
+      setStage('capsule');
+      later(reduceMotion ? 120 : 360, () => setStage('hidden'));
+      later(reduceMotion ? 300 : 620, () => {
+        setShown(null);
+        store.remove(current);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- driven by the front toast only
+  }, [front?.id]);
+
+  // Same toast, new tone (loading → success): a small squash as the icon morphs.
+  const shownType = shown?.type;
+  const prevType = useRef(shownType);
+  useEffect(() => {
+    if (prevType.current && shownType && prevType.current !== shownType && stageRef.current === 'open') squash();
+    prevType.current = shownType;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shownType]);
+
+  // Declarative size / presence per stage.
+  const openW = laneW ? Math.min(laneW - 24, 380) : CAP_W;
+  useEffect(() => {
+    const isOpen = stage === 'open';
+    const tw = isOpen ? openW : CAP_W;
+    const th = isOpen ? Math.max(CAP_H, contentH || 64) : CAP_H;
+    const wA = Animated.spring(w, { toValue: tw, useNativeDriver: false, ...(isOpen ? motion.bouncy : motion.snappy) });
+    const hA = Animated.spring(h, { toValue: th, useNativeDriver: false, ...motion.snappy });
+    Animated.spring(presence, { toValue: stage === 'hidden' ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
+    if (isOpen) {
+      Animated.stagger(reduceMotion ? 0 : 90, [wA, hA]).start();
+      Animated.timing(content, { toValue: 1, duration: 220, delay: reduceMotion ? 0 : 160, useNativeDriver: true }).start();
+    } else {
+      Animated.timing(content, { toValue: 0, duration: 110, useNativeDriver: true }).start();
+      Animated.stagger(reduceMotion ? 0 : 70, [hA, wA]).start();
+    }
+  }, [stage, openW, contentH, reduceMotion, w, h, presence, content]);
+
+  useToneHaptic(shown?.id, shown?.type, haptics && stage === 'open' && !shown?.dismissed);
+
+  const dur = shown ? (shown.duration ?? (shown.type === 'loading' ? Infinity : duration)) : Infinity;
+  const life = useLifetime(
+    shown ? shown.updatedAt : undefined,
+    dur,
+    !!shown && !shown.dismissed && stage === 'open' && !touching && !expanded,
+    () => shownRef.current && store.toast.dismiss(shownRef.current),
+  );
+
+  // Swipe up to dismiss.
+  const pan = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dy) > 6 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderGrant: () => setTouching(true),
+      onPanResponderMove: (_, g) => dragY.setValue(g.dy < 0 ? g.dy : rubber(g.dy)),
+      onPanResponderRelease: (_, g) => {
+        setTouching(false);
+        const id = shownRef.current;
+        if (id && (g.dy < -28 || g.vy < -0.5)) {
+          clearLater();
+          Animated.parallel([
+            Animated.timing(dragY, { toValue: -90, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+            Animated.timing(presence, { toValue: 0, duration: 160, useNativeDriver: true }),
+            Animated.timing(content, { toValue: 0, duration: 100, useNativeDriver: true }),
+          ]).start(() => {
+            w.setValue(CAP_W);
+            h.setValue(CAP_H);
+            dragY.setValue(0);
+            setExpanded(false);
+            setStage('hidden');
+            setShown(null);
+            store.remove(id);
+          });
+          return;
+        }
+        Animated.spring(dragY, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
+      },
+      onPanResponderTerminate: () => {
+        setTouching(false);
+        Animated.spring(dragY, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
+      },
+    }),
+  ).current;
+
+  const bg = dark ? mix('#000000', colors.foreground, 0.05) : '#000000';
+  const fg = readableOn(bg);
+  const tone = !shown || shown.type === 'default' || shown.type === 'loading' ? mix(fg, bg, 0.25) : toneOf(shown.type, colors, true);
+  const capR = radius.capsule(CAP_H);
+  const cardR = Math.max(capR, radius.scale(30));
+  const corner = h.interpolate({ inputRange: [CAP_H, CAP_H + 28], outputRange: [capR, cardR], extrapolate: 'clamp' });
+  const left = Animated.multiply(Animated.subtract(w, openW), 0.5);
+  const pScale = presence.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] });
+  const typed = !!shown && shown.type !== 'default';
+  const icon =
+    !shown || shown.icon === false
+      ? null
+      : (shown.icon ?? (typed ? <LivingIcon type={shown.type} color={tone} reduceMotion={reduceMotion} /> : null));
+  const showBar = Number.isFinite(dur);
+
+  return (
+    <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host, style]}>
+      <View
+        pointerEvents="box-none"
+        style={[styles.islandLane, { top: offset }]}
+        onLayout={(e) => setLaneW(Math.round(e.nativeEvent.layout.width))}
+      >
+        {shown ? (
+          <Animated.View
+            {...pan.panHandlers}
+            style={{
+              opacity: presence,
+              transform: [{ translateY: dragY }, { scaleX: Animated.multiply(pScale, sqX) }, { scaleY: Animated.multiply(pScale, sqY) }],
+              transformOrigin: 'center top',
+            }}
+          >
+            <Animated.View
+              style={{
+                width: w,
+                height: h,
+                borderRadius: corner,
+                backgroundColor: bg,
+                boxShadow: dark
+                  ? '0 0 0 1px rgba(255,255,255,0.08), 0 10px 30px -6px rgba(0,0,0,0.6)'
+                  : '0 2px 6px rgba(0,0,0,0.12), 0 14px 36px -8px rgba(0,0,0,0.35)',
+              }}
+            >
+              <Animated.View style={[styles.islandClip, { borderRadius: corner }]}>
+                <Animated.View style={[styles.islandPlace, { width: openW, left }]}>
+                  <Animated.View
+                    style={{
+                      opacity: content,
+                      transform: [{ scale: content.interpolate({ inputRange: [0, 1], outputRange: [0.92, 1] }) }],
+                    }}
+                    onLayout={(e) => setContentH(Math.round(e.nativeEvent.layout.height))}
+                  >
+                    {typed && shown.icon !== false ? <Glow color={tone} strength={0.3} x={33} y={32} /> : null}
+                    <Pressable
+                      onPress={() => setExpanded((x) => !x)}
+                      onPressIn={() => setTouching(true)}
+                      onPressOut={() => setTouching(false)}
+                      accessibilityRole="alert"
+                      accessibilityLiveRegion="polite"
+                      accessibilityLabel={[shown.title, shown.description].filter(Boolean).join('. ')}
+                      accessibilityHint={shown.description || shown.action ? (expanded ? 'Collapses the notification' : 'Expands the notification') : undefined}
+                      accessibilityState={{ expanded }}
+                      style={[styles.row, icon ? styles.islandPadIcon : styles.islandPad]}
+                    >
+                      {icon ? <View style={expanded && shown.description ? styles.iconTop : null}>{icon}</View> : null}
+                      <View style={styles.text}>
+                        <Text numberOfLines={expanded ? 3 : 1} style={[styles.title, { color: fg }]}>
+                          {shown.title}
+                        </Text>
+                        {shown.description ? (
+                          <Text numberOfLines={expanded ? undefined : 1} style={[styles.desc, { color: alpha(fg, 0.62) }]}>
+                            {shown.description}
+                          </Text>
+                        ) : null}
+                      </View>
+                      {!expanded && shown.action ? (
+                        <View style={[styles.islandChip, { borderRadius: radius.capsule(24), backgroundColor: alpha(fg, 0.14) }]}>
+                          <Text style={[styles.islandChipText, { color: fg }]}>{shown.action.label}</Text>
+                        </View>
+                      ) : null}
+                    </Pressable>
+                    {expanded && shown.action ? (
+                      <View style={styles.islandActions}>
+                        <Pressable
+                          accessibilityRole="button"
+                          onPress={() => {
+                            shown.action?.onPress();
+                            store.toast.dismiss(shown.id);
+                          }}
+                          style={({ pressed }) => [
+                            styles.islandAction,
+                            { borderRadius: radius.capsule(44), backgroundColor: alpha(fg, pressed ? 0.24 : 0.16) },
+                          ]}
+                        >
+                          <Text style={[styles.title, { color: fg }]}>{shown.action.label}</Text>
+                        </Pressable>
+                      </View>
+                    ) : null}
+                    {showBar ? (
+                      <View style={[styles.islandTrack, { backgroundColor: alpha(fg, 0.1) }]}>
+                        <Animated.View
+                          style={[styles.islandFill, { backgroundColor: typed ? tone : alpha(fg, 0.5), transform: [{ scaleX: life }] }]}
+                        />
+                      </View>
+                    ) : null}
+                  </Animated.View>
+                </Animated.View>
+              </Animated.View>
+            </Animated.View>
+          </Animated.View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+// ─── Look ─────────────────────────────────────────────────────────────────────
+
+function hex6(h: string) {
+  return h.length === 4 ? '#' + [...h.slice(1)].map((c) => c + c).join('') : h;
+}
+
+function rgb(h: string) {
+  const n = parseInt(hex6(h).slice(1, 7), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function toHex(v: number[]) {
+  return '#' + v.map((x) => Math.round(Math.max(0, Math.min(255, x))).toString(16).padStart(2, '0')).join('');
+}
+
+/** Opaque blend of two #rrggbb colours (stacked cards must not see through each other). */
+function mix(a: string, b: string, t: number) {
+  if (!a.startsWith('#') || !b.startsWith('#')) return a;
+  const [x, y] = [rgb(a), rgb(b)];
+  return toHex(x.map((v, i) => v + (y[i] - v) * t));
+}
+
+function toneOf(type: ToastType, c: Colors, dark: boolean) {
+  const tones: Record<ToastType, string> = {
+    default: c.foreground,
+    loading: c.mutedForeground,
+    success: c.success,
+    error: c.danger,
+    warning: c.warning,
+    info: dark ? '#60a5fa' : '#2563eb',
+  };
+  return tones[type];
+}
+
+function shadowFor(dark: boolean, minimal: boolean) {
+  if (minimal) return dark ? '0 6px 20px -4px rgba(0,0,0,0.6)' : '0 6px 20px -6px rgba(0,0,0,0.3)';
+  return dark
+    ? '0 1px 2px rgba(0,0,0,0.5), 0 8px 20px -6px rgba(0,0,0,0.55), 0 24px 48px -16px rgba(0,0,0,0.6)'
+    : '0 1px 2px rgba(0,0,0,0.05), 0 6px 14px -4px rgba(0,0,0,0.08), 0 22px 44px -14px rgba(0,0,0,0.18)';
+}
+
+interface Look {
+  bg: string;
+  border: string;
+  title: string;
+  desc: string;
+  icon: string;
+  glowColor: string;
+  glow: number;
+  bar: string;
+  actionBg: string;
+  actionFg: string;
+}
+
+function theme(variant: Exclude<ToasterVariant, 'island'>, type: ToastType, c: Colors, dark: boolean): Look {
+  const tone = toneOf(type, c, dark);
+  if (variant === 'minimal') {
+    return {
+      bg: c.foreground,
+      border: c.foreground,
+      title: c.background,
+      desc: alpha(c.background, 0.7),
+      icon: type === 'default' || type === 'loading' ? c.background : tone,
+      glowColor: tone,
+      glow: 0,
+      bar: 'transparent',
+      actionBg: alpha(c.background, 0.16),
+      actionFg: c.background,
+    };
+  }
+  if (variant === 'rich' && type !== 'default' && type !== 'loading') {
+    // Filled: the solid tone with readable text on it; no second hue and no light-leak.
+    const fg = readableOn(tone);
+    return {
+      bg: tone,
+      border: alpha(fg, 0.12),
+      title: fg,
+      desc: alpha(fg, 0.78),
+      icon: fg,
+      glowColor: tone,
+      glow: 0,
+      bar: alpha(fg, 0.5),
+      actionBg: alpha(fg, 0.18),
+      actionFg: fg,
+    };
+  }
+  return {
+    bg: c.popover,
+    border: alpha(c.foreground, dark ? 0.1 : 0.08),
+    title: c.foreground,
+    desc: c.mutedForeground,
+    icon: tone,
+    glowColor: tone,
+    glow: dark ? 0.18 : 0.12,
+    bar: type === 'default' || type === 'loading' ? alpha(c.foreground, 0.22) : alpha(tone, 0.6),
+    actionBg: c.primary,
+    actionFg: c.primaryForeground,
+  };
+}
+
+/** Light leak: a radial tone glow centred on (x, y) that spills across the top-left of the surface. */
+function Glow({ color, strength, x, y }: { color: string; strength: number; x: number; y: number }) {
+  const id = 'gl' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const W = 320;
+  const H = 200;
+  return (
+    <Svg pointerEvents="none" width={W} height={H} style={{ position: 'absolute', left: x - W / 2, top: y - H / 2 }}>
+      <Defs>
+        <RadialGradient id={id} cx="50%" cy="50%" rx="50%" ry="50%">
+          <Stop offset="0" stopColor={color} stopOpacity={strength} />
+          <Stop offset="0.35" stopColor={color} stopOpacity={strength * 0.45} />
+          <Stop offset="1" stopColor={color} stopOpacity={0} />
+        </RadialGradient>
+      </Defs>
+      <Rect width={W} height={H} fill={`url(#${id})`} />
+    </Svg>
+  );
+}
+
+// ─── Living icon ──────────────────────────────────────────────────────────────
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+const ICON = 20;
+const HALO = 30;
+const HALO_OUT = 38;
+const RING = 2 * Math.PI * 9; // r = 9
+const TRIANGLE = 57; // perimeter of the rounded warning triangle
+const ARC = 0.28; // spinner arc as a fraction of the ring
+
+const TRIANGLE_D = 'M10.3 4.2a2 2 0 0 1 3.4 0l7.1 12.6a2 2 0 0 1-1.7 3H4.9a2 2 0 0 1-1.7-3z';
+
+/**
+ * Tone icon that draws itself: the outline strokes in, then the glyph draws and springs. A loading
+ * spinner's arc keeps turning while it closes into the success / error circle, then the mark draws in.
+ */
+function LivingIcon({
+  type,
+  color,
+  halo = true,
+  reduceMotion = false,
+}: {
+  type: ToastType;
+  color: string;
+  halo?: boolean;
+  reduceMotion?: boolean;
+}) {
+  const { radius } = useKit();
+  // JS-driven SVG props
+  const outline = useRef(new Animated.Value(0)).current;
+  const draw = useRef(new Animated.Value(0)).current;
+  // Native-driven transforms / opacity (separate views)
+  const pop = useRef(new Animated.Value(0.5)).current;
+  const spin = useRef(new Animated.Value(0)).current;
+  const ripple = useRef(new Animated.Value(1)).current;
+  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+  const prev = useRef<ToastType | null>(null);
+
+  useEffect(() => {
+    const from = prev.current;
+    prev.current = type;
+    const stopSpin = () => {
+      loopRef.current?.stop();
+      loopRef.current = null;
+    };
+
+    if (type === 'loading') {
+      if (!loopRef.current) {
+        spin.setValue(0);
+        loopRef.current = Animated.loop(
+          Animated.timing(spin, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }),
+        );
+        loopRef.current.start();
+      }
+      draw.setValue(0);
+      if (reduceMotion) outline.setValue(ARC);
+      else Animated.timing(outline, { toValue: ARC, duration: 300, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();
+      return;
+    }
+
+    if (reduceMotion) {
+      stopSpin();
+      outline.setValue(1);
+      draw.setValue(1);
+      pop.setValue(1);
+      return;
+    }
+
+    const morph = from === 'loading';
+    if (!morph) outline.setValue(0);
+    draw.setValue(0);
+    pop.setValue(0.5);
+    // The arc keeps spinning while it closes; a full ring looks the same at any angle, so it stops invisibly.
+    Animated.timing(outline, {
+      toValue: 1,
+      duration: morph ? 380 : 420,
+      easing: morph ? Easing.inOut(Easing.cubic) : Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start(({ finished }) => {
+      if (!finished) return;
+      stopSpin();
+      ripple.setValue(0);
+      Animated.parallel([
+        Animated.timing(draw, { toValue: 1, duration: 280, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+        Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
+        Animated.timing(ripple, { toValue: 1, duration: 700, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+      ]).start();
+    });
+  }, [type, reduceMotion, outline, draw, pop, spin, ripple]);
+
+  useEffect(() => () => loopRef.current?.stop(), []);
+
+  const stroke = { stroke: color, strokeWidth: 2.2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
+  const dash = (len: number, from = 0, to = 1) => ({
+    strokeDasharray: [len, len],
+    strokeDashoffset: draw.interpolate({ inputRange: [from, to], outputRange: [len, 0], extrapolate: 'clamp' }),
+  });
+  const dot = draw.interpolate({ inputRange: [0, 0.6, 1], outputRange: [0, 0, 1] });
+  const triangle = type === 'warning';
+  const per = triangle ? TRIANGLE : RING;
+  const box = halo ? HALO_OUT : ICON;
+  const inset = (box - ICON) / 2;
+  const circle = (d: number) => ({ width: d, height: d, borderRadius: radius.full, left: (box - d) / 2, top: (box - d) / 2 });
+
+  return (
+    <View style={{ width: box, height: box }} importantForAccessibility="no-hide-descendants">
+      {halo ? (
+        <>
+          <View style={[styles.abs, circle(HALO_OUT), { backgroundColor: alpha(color, 0.08) }]} />
+          <View style={[styles.abs, circle(HALO), { backgroundColor: alpha(color, 0.14) }]} />
+          <Animated.View
+            style={[
+              styles.abs,
+              circle(HALO_OUT),
+              {
+                borderWidth: 1.5,
+                borderColor: alpha(color, 0.35),
+                opacity: ripple.interpolate({ inputRange: [0, 1], outputRange: [0.9, 0] }),
+                transform: [{ scale: ripple.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1.55] }) }],
+              },
+            ]}
+          />
+        </>
+      ) : null}
+      <Animated.View
+        style={[
+          styles.abs,
+          { left: inset, top: inset },
+          { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) }] },
+        ]}
+      >
+        <Svg width={ICON} height={ICON} viewBox="0 0 24 24">
+          {triangle ? (
+            <AnimatedPath
+              d={TRIANGLE_D}
+              {...stroke}
+              strokeDasharray={[per, per]}
+              strokeDashoffset={outline.interpolate({ inputRange: [0, 1], outputRange: [per, 0] })}
+            />
+          ) : (
+            <>
+              {type === 'loading' ? <Circle cx={12} cy={12} r={9} {...stroke} stroke={alpha(color, 0.2)} /> : null}
+              <AnimatedCircle
+                cx={12}
+                cy={12}
+                r={9}
+                {...stroke}
+                rotation={-90}
+                origin="12, 12"
+                strokeDasharray={[per, per]}
+                strokeDashoffset={outline.interpolate({ inputRange: [0, 1], outputRange: [per, 0] })}
+              />
+            </>
+          )}
+        </Svg>
+      </Animated.View>
+      {type !== 'loading' ? (
+        <Animated.View style={[styles.abs, { left: inset, top: inset, transform: [{ scale: pop }] }]}>
+          <Svg width={ICON} height={ICON} viewBox="0 0 24 24">
+            {type === 'success' ? <AnimatedPath d="M8 12.4l2.7 2.7L16.2 9.4" {...stroke} {...dash(12)} /> : null}
+            {type === 'error' ? (
+              <>
+                <AnimatedPath d="M9.2 9.2l5.6 5.6" {...stroke} {...dash(8, 0, 0.55)} />
+                <AnimatedPath d="M14.8 9.2l-5.6 5.6" {...stroke} {...dash(8, 0.45, 1)} />
+              </>
+            ) : null}
+            {type === 'warning' ? (
+              <>
+                <AnimatedPath d="M12 9.5v4" {...stroke} {...dash(4.2)} />
+                <AnimatedCircle cx={12} cy={16.6} r={1.25} fill={color} opacity={dot} />
+              </>
+            ) : null}
+            {type === 'info' ? (
+              <>
+                <AnimatedCircle cx={12} cy={7.9} r={1.25} fill={color} opacity={dot} />
+                <AnimatedPath d="M12 11v5" {...stroke} {...dash(5.2)} />
+              </>
+            ) : null}
+          </Svg>
+        </Animated.View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: { zIndex: 1000, elevation: 1000 },
+  lane: { position: 'absolute', left: 0, right: 0, alignItems: 'center', paddingHorizontal: 16 },
+  cardFull: { width: '100%', maxWidth: 420 },
+  cardMinimal: { maxWidth: 360 },
+  clip: { overflow: 'hidden', borderWidth: StyleSheet.hairlineWidth * 2 },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+  pad: { paddingVertical: 14, paddingHorizontal: 16 },
+  padIcon: { paddingVertical: 12, paddingLeft: 12, paddingRight: 16 },
+  padMinimal: { paddingVertical: 10, paddingLeft: 14, paddingRight: 16, gap: 10 },
+  iconTop: { alignSelf: 'flex-start' },
+  text: { flex: 1, gap: 2 },
+  textMinimal: { flexShrink: 1 },
+  title: { fontSize: 14.5, fontWeight: '400', lineHeight: 20, letterSpacing: -0.1 },
+  desc: { fontSize: 13.5, fontWeight: '400', lineHeight: 19 },
+  descMinimal: { fontSize: 13, lineHeight: 17 },
+  action: { paddingHorizontal: 12, height: 32, alignItems: 'center', justifyContent: 'center' },
+  actionText: { fontSize: 13, fontWeight: '400' },
+  close: { alignSelf: 'flex-start', padding: 2, marginRight: -4 },
+  bar: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, transformOrigin: 'left' },
+  abs: { position: 'absolute' },
+  islandLane: { position: 'absolute', left: 0, right: 0, alignItems: 'center' },
+  islandClip: { flex: 1, overflow: 'hidden' },
+  islandPlace: { position: 'absolute', top: 0 },
+  islandPad: { paddingVertical: 14, paddingHorizontal: 20 },
+  islandPadIcon: { paddingTop: 13, paddingBottom: 15, paddingLeft: 14, paddingRight: 18 },
+  islandChip: { paddingHorizontal: 10, height: 24, justifyContent: 'center' },
+  islandChipText: { fontSize: 12.5, fontWeight: '400' },
+  islandActions: { paddingHorizontal: 14, paddingBottom: 16, marginTop: -2 },
+  islandAction: { height: 44, alignItems: 'center', justifyContent: 'center' },
+  islandTrack: { position: 'absolute', left: 28, right: 28, bottom: 6, height: 2, borderRadius: 1, overflow: 'hidden' },
+  islandFill: { flex: 1, transformOrigin: 'left' },
+});