{"slug":"image-generation","name":"Image Generation","description":"A dot field you can steer while the image forms.","group":"AI agents","detail_url":"https://beui.dev/native/r/image-generation","page_url":"https://beui.dev/react-native/image-generation","expo_go_url":"exp://u.expo.dev/93a3a95c-6dc2-4adb-b57c-efbecf859f25/--/image-generation?runtime-version=exposdk%3A57.0.0&channel-name=production","source_url":"https://github.com/starc007/beui-native/tree/main/src/components/image-generation","libraries":["@shopify/react-native-skia","react","react-native","react-native-gesture-handler","react-native-reanimated","react-native-svg","react-native-worklets","uniwind"],"install":["npx expo install @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets","npm install uniwind tailwindcss"],"setup":["Quickest: run `npx beui-native add <slug>` from the app's root. It writes the files below and installs the libraries.","Copy the files into the app and keep their folder layout: components import the shared files by relative path.","Add the theme tokens once, imported after Tailwind and Uniwind in the CSS file Uniwind reads.","Wrap the app in GestureHandlerRootView if it uses react-native-gesture-handler and isn't already.","Works in Expo and in bare React Native. Every component honors the system Reduce Motion setting."],"files":[{"path":"src/components/image-generation/dither-field.tsx","content":"import {\n  Canvas,\n  createPicture,\n  Picture,\n  Skia,\n} from \"@shopify/react-native-skia\";\nimport { useState } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\nimport { Gesture, GestureDetector } from \"react-native-gesture-handler\";\nimport {\n  useDerivedValue,\n  useFrameCallback,\n  useSharedValue,\n  withSpring,\n} from \"react-native-reanimated\";\nimport { SPRING_SWAP } from \"../../styles/motion\";\n\nconst GAP = 10;\nconst WANDER_FOLLOW = 0.045;\nconst FINGER_FOLLOW = 0.16;\n\n/**\n * A lattice of dots with a soft lens that wanders across it: dots inside the\n * lens grow, brighten and push outward. Drag a finger and the lens follows it,\n * swelling under your touch.\n */\nexport function DitherField({\n  color,\n  animate,\n  interactive,\n}: {\n  color: string;\n  animate: boolean;\n  interactive: boolean;\n}) {\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const time = useSharedValue(0);\n  const x = useSharedValue(-1);\n  const y = useSharedValue(-1);\n  const targetX = useSharedValue(0);\n  const targetY = useSharedValue(0);\n  const touching = useSharedValue(false);\n  const swell = useSharedValue(1);\n  const width = useSharedValue(0);\n  const height = useSharedValue(0);\n  const dot = Skia.Color(color);\n\n  useFrameCallback((frame) => {\n    const dt = Math.min(0.05, (frame.timeSincePreviousFrame ?? 16) / 1000);\n    time.value += dt * 1000;\n    const w = width.value;\n    const h = height.value;\n    if (!touching.value) {\n      targetX.value = w / 2 + Math.sin(time.value / 1700) * w * 0.12;\n      targetY.value = h / 2 + Math.cos(time.value / 2100) * h * 0.1;\n    }\n    if (x.value < 0) {\n      x.value = targetX.value;\n      y.value = targetY.value;\n    }\n    // Frame-rate independent easing toward the target.\n    const base = touching.value ? FINGER_FOLLOW : WANDER_FOLLOW;\n    const follow = 1 - (1 - base) ** (dt * 60);\n    x.value += (targetX.value - x.value) * follow;\n    y.value += (targetY.value - y.value) * follow;\n  }, animate);\n\n  const picture = useDerivedValue(() => {\n    const w = width.value;\n    const h = height.value;\n    const cx = x.value < 0 ? w / 2 : x.value;\n    const cy = y.value < 0 ? h / 2 : y.value;\n    return createPicture((canvas) => {\n      const paint = Skia.Paint();\n      paint.setColor(dot);\n      const radius = Math.min(w, h) * 0.38 * swell.value;\n      const columns = Math.ceil(w / GAP) + 1;\n      const rows = Math.ceil(h / GAP) + 1;\n      const offsetX = (w - (columns - 1) * GAP) / 2;\n      const offsetY = (h - (rows - 1) * GAP) / 2;\n      for (let row = 0; row < rows; row++) {\n        for (let column = 0; column < columns; column++) {\n          const anchorX = offsetX + column * GAP;\n          const anchorY = offsetY + row * GAP;\n          const dX = anchorX - cx;\n          const dY = anchorY - cy;\n          const distance = Math.hypot(dX, dY);\n          const proximity = Math.max(0, 1 - distance / radius);\n          const influence = proximity * proximity * (3 - 2 * proximity);\n          const push = influence * influence * 9;\n          const px = distance > 0 ? anchorX + (dX / distance) * push : anchorX;\n          const py = distance > 0 ? anchorY + (dY / distance) * push : anchorY;\n          paint.setAlphaf(0.17 + influence * 0.72);\n          canvas.drawCircle(px, py, 0.65 + influence * 0.85, paint);\n        }\n      }\n    });\n  });\n\n  const steer = Gesture.Pan()\n    .enabled(interactive)\n    .minDistance(0)\n    .onBegin((event) => {\n      touching.value = true;\n      targetX.value = event.x;\n      targetY.value = event.y;\n      swell.value = withSpring(1.25, SPRING_SWAP);\n    })\n    .onUpdate((event) => {\n      targetX.value = event.x;\n      targetY.value = event.y;\n    })\n    .onFinalize(() => {\n      touching.value = false;\n      swell.value = withSpring(1, SPRING_SWAP);\n    });\n\n  return (\n    <GestureDetector gesture={steer}>\n      <View\n        style={StyleSheet.absoluteFill}\n        onLayout={({ nativeEvent }) => {\n          const next = {\n            width: nativeEvent.layout.width,\n            height: nativeEvent.layout.height,\n          };\n          width.value = next.width;\n          height.value = next.height;\n          setSize(next);\n        }}\n      >\n        {size.width > 0 ? (\n          <Canvas style={StyleSheet.absoluteFill}>\n            <Picture picture={picture} />\n          </Canvas>\n        ) : null}\n      </View>\n    </GestureDetector>\n  );\n}\n","type":"component"},{"path":"src/components/image-generation/image-generation.tsx","content":"import { type ReactNode, useEffect, useState } from \"react\";\nimport {\n  Pressable,\n  type PressableProps,\n  StyleSheet,\n  Text,\n  View,\n  type ViewProps,\n} from \"react-native\";\nimport Animated, {\n  cancelAnimation,\n  ReduceMotion,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n  withSequence,\n  withSpring,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\nimport { useResolveClassNames } from \"uniwind\";\nimport { useReducedMotionPreference } from \"../../hooks/use-reduced-motion\";\nimport {\n  AlertGlyph,\n  CheckGlyph,\n  RetryGlyph,\n} from \"../../primitives/agent-icons\";\nimport { RollText } from \"../../primitives/roll-text\";\nimport { EASE_IN_OUT, EASE_OUT, SPRING_PRESS } from \"../../styles/motion\";\nimport { DitherField } from \"./dither-field\";\n\nexport type ImageGenerationStatus =\n  | \"queued\"\n  | \"generating\"\n  | \"refining\"\n  | \"complete\"\n  | \"error\";\n\nconst STATUS_TEXT: Record<ImageGenerationStatus, string> = {\n  queued: \"Waiting to generate\",\n  generating: \"Generating image\",\n  refining: \"Refining details\",\n  complete: \"Image ready\",\n  error: \"Generation failed\",\n};\n// The finished media shows through as the image comes into focus.\nconst MEDIA: Record<ImageGenerationStatus, { opacity: number; scale: number }> =\n  {\n    queued: { opacity: 0, scale: 1.02 },\n    generating: { opacity: 0, scale: 1.015 },\n    refining: { opacity: 0.62, scale: 1.005 },\n    complete: { opacity: 1, scale: 1 },\n    error: { opacity: 0.28, scale: 1 },\n  };\nconst OVERLAY: Record<ImageGenerationStatus, number> = {\n  queued: 1,\n  generating: 1,\n  refining: 0.48,\n  complete: 0,\n  error: 0,\n};\nconst SETTLE = { duration: 400, easing: EASE_OUT };\n\n/** A 2×2 glyph that turns while the image generates. */\nfunction Mark({\n  status,\n  reduce,\n  color,\n}: {\n  status: ImageGenerationStatus;\n  reduce: boolean;\n  color: unknown;\n}) {\n  const turn = useSharedValue(0);\n  const active = status !== \"complete\" && status !== \"error\";\n  useEffect(() => {\n    if (!active || reduce) {\n      cancelAnimation(turn);\n      turn.value = 0;\n      return;\n    }\n    turn.value = 0;\n    turn.value = withRepeat(\n      withTiming(1, {\n        duration: 2400,\n        easing: EASE_IN_OUT,\n        reduceMotion: ReduceMotion.Never,\n      }),\n      -1,\n      false,\n    );\n    return () => cancelAnimation(turn);\n  }, [active, reduce, turn]);\n  const style = useAnimatedStyle(() => ({\n    transform: [{ rotate: `${turn.value * 360}deg` }],\n  }));\n  if (status === \"complete\")\n    return <CheckGlyph size={14} color={color as string} />;\n  if (status === \"error\")\n    return <AlertGlyph size={14} color={color as string} />;\n  return (\n    <Animated.View style={[styles.mark, style]}>\n      {[1, 0.55, 0.55, 1].map((opacity, index) => (\n        <View\n          // Diagonal pairs, so the turn reads at a glance.\n          key={`${index}-${opacity}`}\n          style={[\n            styles.markCell,\n            { opacity, backgroundColor: color as string },\n          ]}\n        />\n      ))}\n    </Animated.View>\n  );\n}\n\nexport type ImageGenerationProps = Omit<ViewProps, \"children\"> & {\n  /** The finished media, such as an Image. It stays mounted and comes into focus. */\n  children?: ReactNode;\n  /** Defaults to \"generating\". */\n  status?: ImageGenerationStatus;\n  /** Spoken description. Defaults to the status and prompt. */\n  label?: string;\n  prompt?: string;\n  /** A badge in the corner. Defaults to \"1024 × 1024\". */\n  resolution?: string;\n  /** Width over height, reserved before the media exists. Defaults to 1. */\n  aspectRatio?: number;\n  /** \"compact\" caps the width at 208 points; \"fluid\" fills. Defaults to \"compact\". */\n  size?: \"compact\" | \"fluid\";\n  /** Lets a finger steer the placeholder's lens. Defaults to true. */\n  interactive?: boolean;\n  statusText?: string;\n  /** Defaults to true. */\n  showStatus?: boolean;\n  /** Shows \"Try again\" after an error. */\n  onRetry?: () => void;\n  /** Long-press the finished image, such as to save or share it. */\n  onLongPress?: PressableProps[\"onLongPress\"];\n  className?: string;\n  disableAnimation?: boolean;\n};\n\n/**\n * An image being generated: a dot lattice with a wandering lens fills the\n * frame, the finished media comes into focus through it, and the status rolls\n * along underneath. Drag across the placeholder and the lens follows.\n */\nexport function ImageGeneration({\n  children,\n  status = \"generating\",\n  label,\n  prompt,\n  resolution = \"1024 × 1024\",\n  aspectRatio = 1,\n  size = \"compact\",\n  interactive = true,\n  statusText,\n  showStatus = true,\n  onRetry,\n  onLongPress,\n  className = \"\",\n  disableAnimation = false,\n  ...props\n}: ImageGenerationProps) {\n  const reducedMotion = useReducedMotionPreference();\n  const reduce = reducedMotion || disableAnimation;\n  const active =\n    status === \"queued\" || status === \"generating\" || status === \"refining\";\n  const text = statusText ?? STATUS_TEXT[status];\n  const spoken = label ?? (prompt ? `${text}: ${prompt}` : text);\n  const [ditherMounted, setDitherMounted] = useState(active);\n  const mediaOpacity = useSharedValue(MEDIA[status].opacity);\n  const mediaScale = useSharedValue(MEDIA[status].scale);\n  const overlay = useSharedValue(OVERLAY[status]);\n  const lift = useSharedValue(1);\n  const retryScale = useSharedValue(1);\n  const { color: foreground } = useResolveClassNames(\"text-foreground\");\n  const { color: destructive } = useResolveClassNames(\"text-destructive\");\n\n  if (active && !ditherMounted) setDitherMounted(true);\n  const unmountDither = () => setDitherMounted(false);\n\n  useEffect(() => {\n    const media = MEDIA[status];\n    mediaOpacity.value = withTiming(\n      media.opacity,\n      reduce ? { duration: 0 } : SETTLE,\n    );\n    mediaScale.value = reduce ? 1 : withTiming(media.scale, SETTLE);\n    overlay.value = withTiming(\n      OVERLAY[status],\n      reduce ? { duration: 0 } : SETTLE,\n      (done) => {\n        if (done && OVERLAY[status] === 0) scheduleOnRN(unmountDither);\n      },\n    );\n  }, [mediaOpacity, mediaScale, overlay, reduce, status]);\n\n  const mediaStyle = useAnimatedStyle(() => ({\n    opacity: mediaOpacity.value,\n    transform: [{ scale: mediaScale.value }],\n  }));\n  const overlayStyle = useAnimatedStyle(() => ({ opacity: overlay.value }));\n  const liftStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: lift.value }],\n  }));\n  const retryStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: retryScale.value }],\n  }));\n\n  return (\n    <View\n      accessibilityState={{ busy: active }}\n      className={`w-full ${className}`}\n      {...props}\n    >\n      <View style={size === \"compact\" ? styles.compact : undefined}>\n        <Pressable\n          accessibilityRole=\"image\"\n          accessibilityLabel={spoken}\n          disabled={!onLongPress || status !== \"complete\"}\n          onLongPress={(event) => {\n            if (!reduce)\n              lift.value = withSequence(\n                withSpring(1.03, SPRING_PRESS),\n                withSpring(1, SPRING_PRESS),\n              );\n            onLongPress?.(event);\n          }}\n        >\n          <Animated.View\n            style={[{ aspectRatio }, liftStyle]}\n            className=\"w-full overflow-hidden rounded-xl bg-surface\"\n          >\n            <Animated.View\n              style={[StyleSheet.absoluteFill, mediaStyle]}\n              accessibilityElementsHidden\n              importantForAccessibility=\"no-hide-descendants\"\n            >\n              {children}\n            </Animated.View>\n            {ditherMounted ? (\n              <Animated.View\n                style={[StyleSheet.absoluteFill, overlayStyle]}\n                className=\"bg-surface\"\n              >\n                <DitherField\n                  color={String(foreground ?? \"#000\")}\n                  animate={!reduce && active}\n                  interactive={interactive && active && !reduce}\n                />\n              </Animated.View>\n            ) : null}\n            {resolution ? (\n              <View\n                pointerEvents=\"none\"\n                style={styles.badge}\n                className=\"rounded-full bg-background/75 px-2 py-0.5\"\n              >\n                <Text\n                  className=\"font-mono text-[10px] text-muted\"\n                  style={styles.tabular}\n                >\n                  {resolution}\n                </Text>\n              </View>\n            ) : null}\n          </Animated.View>\n        </Pressable>\n        {showStatus || prompt ? (\n          <View className=\"mt-3\">\n            {showStatus ? (\n              <View accessibilityLiveRegion=\"polite\" style={styles.status}>\n                <Mark\n                  status={status}\n                  reduce={reduce}\n                  color={status === \"error\" ? destructive : foreground}\n                />\n                <RollText\n                  text={text}\n                  className={`text-sm font-medium ${status === \"error\" ? \"text-destructive\" : \"text-foreground\"}`}\n                  reduce={reduce}\n                />\n              </View>\n            ) : null}\n            {prompt ? (\n              <Text numberOfLines={1} className=\"mt-0.5 text-xs text-muted\">\n                “{prompt}”\n              </Text>\n            ) : null}\n          </View>\n        ) : null}\n        {status === \"error\" && onRetry ? (\n          <Pressable\n            accessibilityRole=\"button\"\n            onPress={onRetry}\n            onPressIn={() => {\n              if (!reduce) retryScale.value = withSpring(0.96, SPRING_PRESS);\n            }}\n            onPressOut={() => {\n              retryScale.value = withSpring(1, SPRING_PRESS);\n            }}\n          >\n            <Animated.View\n              style={[styles.retry, retryStyle]}\n              className=\"mt-3 rounded-full px-3\"\n            >\n              <RetryGlyph size={16} color={foreground} />\n              <Text className=\"text-sm font-medium text-foreground\">\n                Try again\n              </Text>\n            </Animated.View>\n          </Pressable>\n        ) : null}\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  compact: { width: \"100%\", maxWidth: 208, alignSelf: \"center\" },\n  badge: { position: \"absolute\", top: 8, right: 8 },\n  status: { flexDirection: \"row\", alignItems: \"center\", gap: 8, minHeight: 20 },\n  mark: {\n    width: 14,\n    height: 14,\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: 2,\n    padding: 1,\n  },\n  markCell: { width: 4, height: 4, borderRadius: 1 },\n  retry: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    gap: 8,\n    minHeight: 40,\n    alignSelf: \"flex-start\",\n  },\n  tabular: { fontVariant: [\"tabular-nums\"] },\n});\n","type":"component"},{"path":"src/components/image-generation/index.ts","content":"export type {\n  ImageGenerationProps,\n  ImageGenerationStatus,\n} from \"./image-generation\";\nexport { ImageGeneration } from \"./image-generation\";\n","type":"component"},{"path":"src/hooks/use-presence.ts","content":"import { useEffect, useRef, useState } from \"react\";\n\nexport type PresenceItem<T> = {\n  key: string;\n  value: T;\n  /** False for the item present on first render, so it does not animate in. */\n  appear: boolean;\n  exiting: boolean;\n};\n\n/**\n * Keeps replaced items mounted while they animate out, like AnimatePresence.\n * A key that returns while exiting is revived in place.\n */\nexport function usePresence<T>(\n  key: string | null,\n  value: T,\n  exitDuration: (value: T) => number,\n) {\n  const [items, setItems] = useState<PresenceItem<T>[]>(() =>\n    key === null ? [] : [{ key, value, appear: false, exiting: false }],\n  );\n  const [currentKey, setCurrentKey] = useState(key);\n  const exitDurationRef = useRef(exitDuration);\n  exitDurationRef.current = exitDuration;\n\n  // Adjust during render so the new item and the exits start in the same frame.\n  if (key !== currentKey) {\n    setCurrentKey(key);\n    setItems((previous) => {\n      const next = previous.map((item) =>\n        item.key === key\n          ? { ...item, value, exiting: false }\n          : { ...item, exiting: true },\n      );\n      if (key !== null && !previous.some((item) => item.key === key)) {\n        next.push({ key, value, appear: true, exiting: false });\n      }\n      return next;\n    });\n  }\n\n  const exitingKeys = items\n    .filter((item) => item.exiting)\n    .map((item) => item.key)\n    .join(\"\\n\");\n\n  useEffect(() => {\n    if (!exitingKeys) return;\n    const timers = items\n      .filter((item) => item.exiting)\n      .map((item) =>\n        setTimeout(() => {\n          setItems((previous) =>\n            previous.filter(\n              (candidate) => !(candidate.key === item.key && candidate.exiting),\n            ),\n          );\n        }, exitDurationRef.current(item.value)),\n      );\n    return () => {\n      for (const timer of timers) clearTimeout(timer);\n    };\n    // Restart removal timers only when the set of exiting items changes.\n  }, [exitingKeys]);\n\n  return items;\n}\n","type":"shared"},{"path":"src/hooks/use-reduced-motion.ts","content":"import { useEffect, useState } from \"react\";\nimport { AccessibilityInfo } from \"react-native\";\nimport { useReducedMotion } from \"react-native-reanimated\";\n\n/** Reanimated supplies a synchronous initial value; native events keep it current. */\nexport function useReducedMotionPreference() {\n  const initialValue = useReducedMotion();\n  const [reducedMotion, setReducedMotion] = useState(initialValue);\n\n  useEffect(() => {\n    let active = true;\n    let receivedEvent = false;\n    const subscription = AccessibilityInfo.addEventListener(\n      \"reduceMotionChanged\",\n      (value) => {\n        receivedEvent = true;\n        setReducedMotion(value);\n      },\n    );\n    void AccessibilityInfo.isReduceMotionEnabled().then((value) => {\n      if (active && !receivedEvent) setReducedMotion(value);\n    });\n    return () => {\n      active = false;\n      subscription.remove();\n    };\n  }, []);\n\n  return reducedMotion;\n}\n","type":"shared"},{"path":"src/primitives/agent-icons.tsx","content":"import type { ReactNode } from \"react\";\nimport type { ColorValue } from \"react-native\";\nimport Svg, { Circle, Path, Rect } from \"react-native-svg\";\n\ntype GlyphProps = { size?: number; color?: ColorValue; strokeWidth?: number };\n\nfunction Glyph({\n  size = 16,\n  color = \"currentColor\",\n  strokeWidth = 2,\n  children,\n}: GlyphProps & { children: ReactNode }) {\n  return (\n    <Svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke={color}\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      {children}\n    </Svg>\n  );\n}\n\n// Simple 24-unit stroke glyphs shared by the agent components.\n\nexport function ChevronDownGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M6 9l6 6 6-6\" />\n    </Glyph>\n  );\n}\n\nexport function ArrowUpGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 19V5M5.5 11.5L12 5l6.5 6.5\" />\n    </Glyph>\n  );\n}\n\nexport function PlusGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 5v14M5 12h14\" />\n    </Glyph>\n  );\n}\n\nexport function StopGlyph({ size = 12, color }: GlyphProps) {\n  return (\n    <Svg width={size} height={size} viewBox=\"0 0 12 12\">\n      <Rect x={1} y={1} width={10} height={10} rx={2.5} fill={color} />\n    </Svg>\n  );\n}\n\nexport function CheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M5 12.5l4.5 4.5L19 7\" />\n    </Glyph>\n  );\n}\n\nexport function CopyGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={8.5} y={8.5} width={12} height={12} rx={2.5} />\n      <Path d=\"M15.5 5.5v-.5A2 2 0 0 0 13.5 3h-8.5A2 2 0 0 0 3 5v8.5a2 2 0 0 0 2 2h.5\" />\n    </Glyph>\n  );\n}\n\nexport function RetryGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5\" />\n      <Path d=\"M3.5 3.5v5h5\" />\n    </Glyph>\n  );\n}\n\nexport function ThumbGlyph({\n  down = false,\n  ...props\n}: GlyphProps & { down?: boolean }) {\n  return (\n    <Glyph {...props}>\n      <Path\n        d=\"M7.5 10.5v10M7.5 10.5L11 3.5a2.5 2.5 0 0 1 2.5 2.5v3.5h5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 17.3 20.5H4.5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z\"\n        transform={down ? \"rotate(180 12 12)\" : undefined}\n      />\n    </Glyph>\n  );\n}\n\nexport function SearchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={11} cy={11} r={6.5} />\n      <Path d=\"M16 16l4 4\" />\n    </Glyph>\n  );\n}\n\nexport function GlobeGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M3.5 12h17M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5s1.1-6 3.5-8.5z\" />\n    </Glyph>\n  );\n}\n\nexport function FileGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z\" />\n      <Path d=\"M14 3.5V8h4.5M9 13h6M9 16.5h4\" />\n    </Glyph>\n  );\n}\n\nexport function PencilGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z\" />\n      <Path d=\"M13.5 6.5l4 4M14 20h6\" />\n    </Glyph>\n  );\n}\n\nexport function TerminalGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />\n      <Path d=\"M7.5 10l2.5 2-2.5 2M12.5 15h4\" />\n    </Glyph>\n  );\n}\n\nexport function WrenchGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M14.5 6.5a4 4 0 0 0 5 5l-8.8 8.8a2.1 2.1 0 0 1-3-3l8.8-8.8a4 4 0 0 1-2-2z\" />\n    </Glyph>\n  );\n}\n\nexport function SparkleGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 4l1.8 4.6L18.5 10.5l-4.7 1.9L12 17l-1.8-4.6-4.7-1.9 4.7-1.9z\" />\n      <Path d=\"M18.5 16.5v3M17 18h3\" />\n    </Glyph>\n  );\n}\n\nexport function MessageGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20 14.5a2 2 0 0 1-2 2H8.5L4 20V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z\" />\n    </Glyph>\n  );\n}\n\nexport function ImageGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />\n      <Circle cx={9} cy={10} r={1.5} />\n      <Path d=\"M20.5 15.5l-4.5-4.5-9 8.5\" />\n    </Glyph>\n  );\n}\n\nexport function ShieldGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 3.5l7 2.5v5.5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z\" />\n      <Path d=\"M9 12l2 2 4-4\" />\n    </Glyph>\n  );\n}\n\nexport function AlertGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M12 8v4.5M12 16h.01\" />\n    </Glyph>\n  );\n}\n\nexport function CrossGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M6.5 6.5l11 11M17.5 6.5l-11 11\" />\n    </Glyph>\n  );\n}\n\nexport function HelpGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.5M12 16.8h.01\" />\n    </Glyph>\n  );\n}\n\nexport function ArrowGlyph({\n  back = false,\n  ...props\n}: GlyphProps & { back?: boolean }) {\n  return (\n    <Glyph {...props}>\n      <Path\n        d=\"M5 12h14M13 6l6 6-6 6\"\n        transform={back ? \"rotate(180 12 12)\" : undefined}\n      />\n    </Glyph>\n  );\n}\n\nexport function BracesGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M8.5 4H8a2 2 0 0 0-2 2v3.5A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5V18a2 2 0 0 0 2 2h.5M15.5 4h.5a2 2 0 0 1 2 2v3.5a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5V18a2 2 0 0 1-2 2h-.5\" />\n    </Glyph>\n  );\n}\n\nexport function BanGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M6 6l12 12\" />\n    </Glyph>\n  );\n}\n\nexport function CircleCheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M8.5 12.2l2.4 2.4 4.6-4.8\" />\n    </Glyph>\n  );\n}\n\nexport function CircleCrossGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M9.5 9.5l5 5M14.5 9.5l-5 5\" />\n    </Glyph>\n  );\n}\n\nexport function ListGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 6.5l1.5 1.5L8 5.5M4 13l1.5 1.5L8 12M11.5 7h8.5M11.5 13.5h8.5M11.5 19h8.5M4.5 19h2\" />\n    </Glyph>\n  );\n}\n\n/** An open ring, spun by SpinGlyph. */\nexport function RingGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M20.5 12a8.5 8.5 0 1 1-6-8.1\" />\n    </Glyph>\n  );\n}\n\nexport function ReplyGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M9.5 7L4.5 12l5 5M4.5 12h10a5 5 0 0 1 5 5v1\" />\n    </Glyph>\n  );\n}\n\nexport function WrapGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M4 6.5h16M4 12h12.5a3.25 3.25 0 0 1 0 6.5H12M4 18.5h4.5M14 16.5l-2 2 2 2\" />\n    </Glyph>\n  );\n}\n\nexport function BookGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M12 6.5c-1.6-1.3-4-2-7.5-2v13c3.5 0 5.9.7 7.5 2 1.6-1.3 4-2 7.5-2v-13c-3.5 0-5.9.7-7.5 2zM12 6.5v13\" />\n    </Glyph>\n  );\n}\n\nexport function ExternalGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4\" />\n    </Glyph>\n  );\n}\n\nexport function DoubleCheckGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Path d=\"M2.5 12.5l4.5 4.5 9-9.5M12 16.5l.5.5 9-9.5\" />\n    </Glyph>\n  );\n}\n\nexport function ClockGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Circle cx={12} cy={12} r={8.5} />\n      <Path d=\"M12 7.5V12l3 2\" />\n    </Glyph>\n  );\n}\n\nexport function MicGlyph(props: GlyphProps) {\n  return (\n    <Glyph {...props}>\n      <Rect x={9} y={3.5} width={6} height={11} rx={3} />\n      <Path d=\"M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v3\" />\n    </Glyph>\n  );\n}\n","type":"shared"},{"path":"src/primitives/roll-text.tsx","content":"import { useEffect, useState } from \"react\";\nimport { StyleSheet, Text, View } from \"react-native\";\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { usePresence } from \"../hooks/use-presence\";\nimport { EASE_OUT, SPRING_SWAP } from \"../styles/motion\";\n\nconst EXIT = { duration: 140, easing: EASE_OUT };\nconst TRAVEL = 0.9;\n\n/** Progress runs 0 (below) → 1 (resting) → 2 (rolled away above). */\nfunction Layer({\n  text,\n  appear,\n  exiting,\n  reduce,\n  height,\n  className,\n  lines,\n}: {\n  text: string;\n  appear: boolean;\n  exiting: boolean;\n  reduce: boolean;\n  height: number;\n  className: string;\n  lines?: number;\n}) {\n  const progress = useSharedValue(appear && !reduce ? 0 : 1);\n\n  useEffect(() => {\n    if (reduce) {\n      progress.value = exiting ? 2 : 1;\n      return;\n    }\n    progress.value = exiting ? withTiming(2, EXIT) : withSpring(1, SPRING_SWAP);\n  }, [exiting, progress, reduce]);\n\n  const style = useAnimatedStyle(() => {\n    const p = progress.value;\n    return {\n      opacity: Math.max(0, Math.min(1, p <= 1 ? p : 2 - p)),\n      transform: [{ translateY: (1 - p) * height * TRAVEL }],\n    };\n  }, [height]);\n\n  return (\n    <Animated.View style={[styles.layer, style]}>\n      <Text numberOfLines={lines} className={className}>\n        {text}\n      </Text>\n    </Animated.View>\n  );\n}\n\nexport type RollTextProps = {\n  /** Changing the value rolls the new text in; defaults to the text itself. */\n  value?: string;\n  text: string;\n  className: string;\n  reduce: boolean;\n  /** Lines before truncating. Defaults to 1; pass 0 to wrap freely. */\n  numberOfLines?: number;\n};\n\n/**\n * Text that rolls up when it changes: the new line rises in from below as the\n * old one rolls up and away. Clipped to its own lines, so only the text moves.\n */\nexport function RollText({\n  value,\n  text,\n  className,\n  reduce,\n  numberOfLines = 1,\n}: RollTextProps) {\n  const lines = numberOfLines === 0 ? undefined : numberOfLines;\n  const [height, setHeight] = useState(16);\n  const items = usePresence(value ?? text, text, () =>\n    reduce ? 0 : EXIT.duration + 40,\n  );\n\n  return (\n    <View style={styles.slot}>\n      {/* Sizes the slot to the current text. */}\n      <Text\n        numberOfLines={lines}\n        className={className}\n        style={styles.sizer}\n        onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}\n      >\n        {text}\n      </Text>\n      {items.map((item) => (\n        <Layer\n          key={item.key}\n          text={item.value}\n          appear={item.appear}\n          exiting={item.exiting}\n          reduce={reduce}\n          height={height}\n          className={className}\n          lines={lines}\n        />\n      ))}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  slot: { overflow: \"hidden\", flexShrink: 1, minWidth: 0 },\n  sizer: { opacity: 0 },\n  layer: { position: \"absolute\", left: 0, right: 0, top: 0 },\n});\n","type":"shared"},{"path":"src/styles/motion.ts","content":"import { Easing, ReduceMotion } from \"react-native-reanimated\";\n\n// Mirrors beUI's lib/ease.ts so native motion matches the web library.\n\nexport const EASE_OUT = Easing.bezier(0.16, 1, 0.3, 1);\nexport const EASE_IN_OUT = Easing.bezier(0.77, 0, 0.175, 1);\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n  stiffness: 500,\n  damping: 30,\n  mass: 0.6,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\n/** Content swaps: label and icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n  stiffness: 460,\n  damping: 30,\n  mass: 0.55,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\n/** Shared-layout glides: pills, indicators and panels moving between positions. */\nexport const SPRING_LAYOUT = {\n  stiffness: 360,\n  damping: 32,\n  mass: 0.6,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\n/** Dragged handles and fills; critically damped so values never rebound off an end. */\nexport const SPRING_GLIDE = {\n  stiffness: 700,\n  damping: 50,\n  mass: 0.5,\n  reduceMotion: ReduceMotion.System,\n} as const;\n\nexport const motion = {\n  press: SPRING_PRESS,\n  swap: SPRING_SWAP,\n  layout: SPRING_LAYOUT,\n  glide: SPRING_GLIDE,\n  exit: { duration: 160, easing: EASE_OUT, reduceMotion: ReduceMotion.System },\n  fade: { duration: 150, reduceMotion: ReduceMotion.System },\n} as const;\n","type":"shared"},{"path":"src/styles/theme.css","content":"/* Matches the default beUI palette in ui-components/lib/themes.ts.\n   Native surface maps to card; muted maps to muted-foreground. */\n@layer theme {\n  :root {\n    @variant light {\n      --color-background: oklch(99% 0 0);\n      --color-surface: oklch(97% 0 0);\n      --color-foreground: oklch(15% 0 0);\n      --color-muted: oklch(50% 0 0);\n      --color-border: oklch(15% 0 0 / 0.06);\n      --color-border-strong: oklch(15% 0 0 / 0.16);\n      --color-primary: #0285f7;\n      --color-on-primary: #ffffff;\n      --color-destructive: #dc2626;\n      --color-success: #059669;\n      --color-warning: #d97706;\n    }\n  }\n\n  :root {\n    @variant dark {\n      --color-background: #151515;\n      --color-surface: #1c1c1c;\n      --color-foreground: oklch(96% 0 0);\n      --color-muted: oklch(62% 0 0);\n      --color-border: rgb(255 255 255 / 0.05);\n      --color-border-strong: rgb(255 255 255 / 0.14);\n      --color-primary: #0285f7;\n      --color-on-primary: #ffffff;\n      --color-destructive: #f87171;\n      --color-success: #34d399;\n      --color-warning: #fbbf24;\n    }\n  }\n\n  /* Tailwind's default monospace stack isn't a font React Native can load. */\n  :root {\n    @variant ios {\n      --font-mono: Menlo;\n    }\n  }\n\n  :root {\n    @variant android {\n      --font-mono: monospace;\n    }\n  }\n}\n","type":"theme"}]}