@q9labsai/chalk-react-native 4.0.0

package/src/components/FaceAvatar.tsx

@@ -0,0 +1,120 @@
+import { getParticipantAvatarRecipe } from "../ui/participant-avatar";
+import type { ParticipantGradientPreference } from "../ui/native-types";
+import { FacehashNative } from "@q9labsai/facehash/react-native";
+import { memo, useMemo, useState } from "react";
+import { Image, StyleSheet, View } from "react-native";
+import { Theme } from "../ui/theme";
+import { GradientSurface } from "./GradientSurface";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type AvatarStatus = "online" | "away" | "busy" | "offline";
+
+const sizeMap: Record<AvatarSize, { size: number }> = {
+  xs: { size: 24 },
+  sm: { size: 32 },
+  md: { size: 48 },
+  lg: { size: 64 },
+  xl: { size: 96 },
+  "2xl": { size: 120 },
+};
+
+const statusColorMap: Record<AvatarStatus, string> = {
+  online: Theme.colors.success,
+  away: Theme.colors.warning,
+  busy: Theme.colors.error,
+  offline: Theme.colors.statusOffline,
+};
+
+export interface FaceAvatarProps {
+  name?: string;
+  src?: string;
+  size?: AvatarSize | number;
+  status?: AvatarStatus;
+  gradientPreference?: ParticipantGradientPreference;
+  audioLevel?: number;
+  textSize?: number;
+}
+
+function FaceAvatarBase({ name, src, size = "md", status, gradientPreference, audioLevel = 0 }: FaceAvatarProps): React.JSX.Element {
+  const [imageError, setImageError] = useState(false);
+  const hasUploadedImage = Boolean(src) && !imageError;
+
+  const { pxSize } = useMemo(() => {
+    if (typeof size === "number") {
+      return { pxSize: size };
+    }
+    const mapped = sizeMap[size];
+    return { pxSize: mapped.size };
+  }, [size]);
+
+  const avatarRecipe = useMemo(() => getParticipantAvatarRecipe(name || "unknown", gradientPreference), [gradientPreference, name]);
+
+  const wrapperStyle = useMemo(
+    () => ({
+      height: pxSize,
+      width: pxSize,
+      transform: [{ scale: 1 + Math.min(0.06, Math.max(0, audioLevel) * 0.04) }],
+    }),
+    [pxSize, audioLevel],
+  );
+
+  const avatarStyle = useMemo(
+    () => ({
+      borderRadius: pxSize / 2,
+      height: pxSize,
+      width: pxSize,
+    }),
+    [pxSize],
+  );
+
+  const statusSize = Math.max(8, pxSize / 4);
+
+  return (
+    <View style={[styles.wrapper, wrapperStyle]}>
+      <View style={[styles.avatar, avatarStyle]}>
+        {hasUploadedImage ? (
+          <Image source={{ uri: src }} style={{ width: pxSize, height: pxSize, borderRadius: pxSize / 2 }} onError={() => setImageError(true)} />
+        ) : (
+          <>
+            <GradientSurface variant="avatar" participantId={name} gradientPreference={gradientPreference} borderRadius={pxSize / 2} />
+            <View style={StyleSheet.absoluteFillObject}>
+              <FacehashNative colors={avatarRecipe.facehashColors} enableBlink interactive name={name || "guest"} size={pxSize} testID="native-facehash" />
+            </View>
+          </>
+        )}
+      </View>
+      {status && (
+        <View
+          style={[
+            styles.statusIndicator,
+            {
+              width: statusSize,
+              height: statusSize,
+              borderRadius: statusSize / 2,
+              backgroundColor: statusColorMap[status],
+              borderWidth: 2,
+              borderColor: Theme.colors.darkCanvas,
+            },
+          ]}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  avatar: {
+    overflow: "hidden",
+  },
+  statusIndicator: {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+  },
+});
+
+export const FaceAvatar = memo(FaceAvatarBase);

package/src/components/GradientSurface.tsx

@@ -0,0 +1,23 @@
+import { memo, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { getParticipantColor } from "../ui/participant-avatar";
+import type { ParticipantGradientPreference } from "../ui/native-types";
+
+export interface GradientSurfaceProps {
+  participantId?: string;
+  gradientPreference?: ParticipantGradientPreference;
+  borderRadius?: number;
+  /** @deprecated Kept for API compatibility; identity surfaces are now flat. */
+  angle?: "vertical" | "diagonal";
+  opacity?: number;
+  variant?: "surface" | "avatar";
+}
+
+function GradientSurfaceBase({ participantId, gradientPreference, borderRadius = 0, opacity = 1, variant = "surface" }: GradientSurfaceProps): React.JSX.Element {
+  const colors = useMemo(() => getParticipantColor(participantId, gradientPreference), [gradientPreference, participantId]);
+  const backgroundColor = variant === "avatar" ? colors.primary : colors.surface;
+
+  return <View pointerEvents="none" style={[StyleSheet.absoluteFillObject, { backgroundColor, borderRadius, opacity }]} />;
+}
+
+export const GradientSurface = memo(GradientSurfaceBase);

package/src/components/LogoElements.test.tsx

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import type { ReactElement, ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { renderHook } from "../test-support/test-renderer";
+
+vi.mock("react-native", () => {
+  class AnimatedValue {
+    interpolate(input: unknown): { readonly input: unknown } {
+      return { input };
+    }
+  }
+
+  return {
+    Animated: {
+      Value: AnimatedValue,
+      createAnimatedComponent: (component: unknown) => component,
+    },
+  };
+});
+vi.mock("react-native-svg", () => ({ Circle: "Circle", Ellipse: "Ellipse", G: "G", Path: "Path", Rect: "Rect", default: "Svg" }));
+vi.mock("./native-animation-controller", () => ({ createAnimationRefController: () => () => undefined }));
+
+import Svg from "react-native-svg";
+import { LogoElements } from "./LogoElements";
+
+describe("LogoElements", () => {
+  it("uses the requested size and keeps the complete canonical mark composition", () => {
+    const { result } = renderHook(() => LogoElements({ size: 96 }));
+    const tree = result.current;
+
+    expect(tree.type).toBe(Svg);
+    expect(tree.props).toMatchObject({ height: 96, viewBox: "0 0 64 64", width: 96 });
+    expect(findElements(tree, "Path")).toHaveLength(1);
+    expect(findElements(tree, "Circle")).toHaveLength(3);
+    expect(findElements(tree, "Rect")).toHaveLength(4);
+    expect(findElements(tree, "Ellipse")).toHaveLength(4);
+  });
+
+  it("preserves the brand palette across each logo bar and particle", () => {
+    const { result } = renderHook(() => LogoElements({}));
+    const tree = result.current;
+    const fills = findElements(tree, "Rect").map((element) => element.props.fill);
+    const particleFills = findElements(tree, "Circle").map((element) => element.props.fill);
+
+    expect(fills).toEqual(["#A8D5A2", "#F5D76E", "#7EC8E3", "#F0A0A0"]);
+    expect(particleFills).toEqual(["#A8D5A2", "#F5D76E", "#7EC8E3"]);
+  });
+});
+
+function findElements(node: ReactNode, type: string): ReactElement<{ readonly fill?: string }>[] {
+  if (!isElement(node)) return [];
+  const matches = node.type === type ? [node] : [];
+  const children = node.props.children;
+  return matches.concat((Array.isArray(children) ? children : [children]).flatMap((child) => findElements(child, type)));
+}
+
+function isElement(node: ReactNode): node is ReactElement<{ readonly children?: ReactNode; readonly fill?: string }> {
+  return typeof node === "object" && node !== null && "type" in node && "props" in node;
+}

package/src/components/LogoElements.tsx

@@ -0,0 +1,119 @@
+import { useRef } from "react";
+import { Animated } from "react-native";
+import Svg, { Circle, Ellipse, G, Path, Rect } from "react-native-svg";
+import { Theme } from "../ui/theme";
+import { createAnimationRefController, type AnimationRefCallback } from "./native-animation-controller";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface LogoElementsProps {
+  size?: number;
+}
+
+export function LogoElements({ size = 64 }: LogoElementsProps): React.JSX.Element {
+  const particle1 = useRef(new Animated.Value(0)).current;
+  const particle2 = useRef(new Animated.Value(0)).current;
+  const particle3 = useRef(new Animated.Value(0)).current;
+  const arcProgress = useRef(new Animated.Value(0)).current;
+
+  const animationRef = useRef<AnimationRefCallback<unknown> | null>(null);
+  const attachAnimations =
+    animationRef.current ??
+    (animationRef.current = createAnimationRefController<unknown>(() => {
+      const createParticleAnimation = (animation: Animated.Value, delay: number) =>
+        Animated.loop(
+          Animated.sequence([
+            Animated.delay(delay),
+            Animated.timing(animation, {
+              toValue: 1,
+              duration: 2500,
+              useNativeDriver: true,
+            }),
+          ]),
+        );
+
+      const particleAnimations = [createParticleAnimation(particle1, 0), createParticleAnimation(particle2, 800), createParticleAnimation(particle3, 1600)];
+      const arcAnimation = Animated.loop(
+        Animated.sequence([
+          Animated.timing(arcProgress, {
+            toValue: 1,
+            duration: 3500,
+            useNativeDriver: true,
+          }),
+          Animated.delay(2500),
+        ]),
+      );
+
+      return [...particleAnimations, arcAnimation];
+    }));
+
+  const createParticleProps = (animation: Animated.Value, xOffset: number) => ({
+    opacity: animation.interpolate({
+      inputRange: [0, 0.2, 0.8, 1],
+      outputRange: [0, 0.5, 0.5, 0],
+    }),
+    transform: [
+      {
+        translateY: animation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, -20],
+        }),
+      },
+      {
+        translateX: animation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, xOffset],
+        }),
+      },
+    ],
+  });
+
+  return (
+    <Svg ref={attachAnimations} width={size} height={size} viewBox="0 0 64 64" fill="none">
+      <AnimatedPath
+        d="M 12 16 Q 32 -2 52 16"
+        stroke={Theme.logo.arc}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        fill="none"
+        opacity={arcProgress.interpolate({
+          inputRange: [0, 0.2, 0.7, 1],
+          outputRange: [0, 1, 1, 0],
+        })}
+        transform={[
+          {
+            translateY: arcProgress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [4, -4],
+            }),
+          },
+        ]}
+      />
+
+      <AnimatedCircle cx="16" cy="12" r="1.5" fill={Theme.logo.mint} {...createParticleProps(particle1, -8)} />
+      <AnimatedCircle cx="28" cy="8" r="2" fill={Theme.logo.gold} {...createParticleProps(particle2, 4)} />
+      <AnimatedCircle cx="40" cy="6" r="1.5" fill={Theme.logo.sky} {...createParticleProps(particle3, 8)} />
+
+      <G transform="rotate(-20 16 48)">
+        <Rect x="8" y="16" width="12" height="40" rx="6" fill={Theme.logo.mint} />
+        <Ellipse cx="14" cy="16" rx="6" ry="3.5" fill={Theme.logo.mintDark} />
+      </G>
+
+      <G transform="rotate(-5 24 44)">
+        <Rect x="18" y="12" width="12" height="44" rx="6" fill={Theme.logo.gold} />
+        <Ellipse cx="24" cy="12" rx="6" ry="3.5" fill={Theme.logo.goldDark} />
+      </G>
+
+      <G transform="rotate(25 44 20)">
+        <Rect x="28" y="4" width="12" height="42" rx="6" fill={Theme.logo.sky} />
+        <Ellipse cx="34" cy="4" rx="6" ry="3.5" fill={Theme.logo.skyDark} />
+      </G>
+
+      <G transform="rotate(10 44 40)">
+        <Rect x="38" y="18" width="12" height="38" rx="6" fill={Theme.logo.coral} />
+        <Ellipse cx="44" cy="56" rx="6" ry="3.5" fill={Theme.logo.coralDark} />
+      </G>
+    </Svg>
+  );
+}

package/src/components/MediaView.tsx

@@ -0,0 +1,76 @@
+import type { NativeParticipant as Participant } from "../ui/native-types";
+import { createNativeMediaStream, type NativeMediaStreamTrack } from "../media/native-webrtc";
+import { useEffect, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Theme } from "../ui/theme";
+import { useNativeTheme } from "../ui/native-theme";
+import { shouldRenderNativeMediaTrack } from "./native-media-visibility";
+import { FaceAvatar } from "./FaceAvatar";
+import { GradientSurface } from "./GradientSurface";
+import { hasRtcVideoView, RtcVideoView } from "./RtcVideoView";
+import { observeNativeFrameNotObservable } from "./episode-diagnostic-render-observer";
+
+export interface MediaViewProps {
+  participant: Participant | null;
+  track: MediaStreamTrack | NativeMediaStreamTrack | null | undefined;
+  mediaKind?: "camera" | "screen-share";
+  label?: string;
+  mirror?: boolean;
+  objectFit?: "cover" | "contain";
+  emphasizeMuted?: boolean;
+  zOrder?: number;
+}
+
+export function MediaView({ participant, track, mediaKind = "camera", label, mirror = false, objectFit = "cover", zOrder = 0 }: MediaViewProps): React.JSX.Element {
+  const theme = useNativeTheme();
+  const shouldRenderVideo = shouldRenderNativeMediaTrack({ participant, track, mediaKind });
+  const canRenderPreview = hasRtcVideoView();
+  const stream = useMemo(() => {
+    if (!shouldRenderVideo || !track) {
+      return null;
+    }
+
+    return createNativeMediaStream(track);
+  }, [shouldRenderVideo, track]);
+
+  const name = participant?.displayName?.trim() || label || "Participant";
+  const showStream = Boolean(stream && canRenderPreview);
+  const streamURL = showStream && stream ? stream.toURL() : null;
+
+  useEffect(() => {
+    if (shouldRenderVideo && track) observeNativeFrameNotObservable(track);
+  }, [shouldRenderVideo, track]);
+
+  return (
+    <View style={[styles.surface, { backgroundColor: theme.colors.stageBackground }]}>
+      {streamURL ? <RtcVideoView mirror={mirror} objectFit={objectFit} streamURL={streamURL} style={StyleSheet.absoluteFillObject} zOrder={Math.max(1, zOrder)} /> : null}
+
+      {!showStream ? (
+        <View style={styles.fallback}>
+          <GradientSurface borderRadius={0} opacity={0.92} participantId={name} />
+          <FaceAvatar name={name} size={88} textSize={34} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  surface: {
+    flex: 1,
+    minHeight: 80,
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    backgroundColor: Theme.colors.stageBackground,
+    borderRadius: Theme.radius.md,
+    position: "relative",
+  },
+  fallback: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+  },
+});

package/src/components/ReactionPicker.test.tsx

@@ -0,0 +1,19 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./ReactionPicker.tsx", import.meta.url), "utf8");
+
+describe("ReactionPicker", () => {
+  it("covers the persistent dock while keeping the reaction card inset", () => {
+    expect(source).toContain("StyleSheet.absoluteFillObject");
+    expect(source).not.toContain("paddingBottom: 110");
+    expect(source).not.toContain("bottom: 94");
+  });
+
+  it("keeps close-button press feedback defined", () => {
+    expect(source).toContain("pressed && styles.pressed");
+    expect(source).toContain("pressed: {");
+    expect(source).toContain("opacity: 0.72");
+    expect(source).toContain("transform: [{ scale: 0.96 }]");
+  });
+});

package/src/components/ReactionPicker.tsx

@@ -0,0 +1,98 @@
+import { memo } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+
+import { Theme } from "../ui/theme";
+
+export interface ReactionPickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (emoji: string) => void;
+}
+
+export const DEFAULT_REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "🎉"] as const;
+
+function ReactionPickerBase({ isOpen, onClose, onSelect }: ReactionPickerProps): React.JSX.Element {
+  return (
+    <Modal animationType="fade" transparent={true} visible={isOpen} onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <Pressable accessibilityLabel="Close Reactions" onPress={onClose} style={styles.backdrop} />
+        <View style={styles.picker}>
+          <View style={styles.header}>
+            <Text accessibilityRole="header" style={styles.title}>
+              Reactions
+            </Text>
+            <Pressable accessibilityLabel="Close Reactions" accessibilityRole="button" onPress={onClose} style={({ pressed }) => [styles.closeButton, pressed && styles.pressed]}>
+              <Text style={styles.closeText}>×</Text>
+            </Pressable>
+          </View>
+          {DEFAULT_REACTIONS.map((emoji) => (
+            <Pressable
+              accessibilityLabel={`Send ${emoji} reaction`}
+              accessibilityRole="button"
+              key={emoji}
+              onPress={() => {
+                onSelect(emoji);
+                onClose();
+              }}
+              style={({ pressed }) => [styles.emojiButton, pressed && styles.emojiButtonPressed]}
+            >
+              <Text style={styles.emojiText}>{emoji}</Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: Theme.colors.darkOverlay30,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingBottom: 100,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: Theme.colors.darkOverlay30,
+  },
+  picker: {
+    flexDirection: "column",
+    backgroundColor: Theme.colors.insetSurface,
+    borderRadius: 28,
+    padding: 6,
+    gap: 4,
+    borderWidth: 1,
+    borderColor: Theme.colors.whiteOverlay08,
+    shadowColor: Theme.colors.darkCanvas,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.4,
+    shadowRadius: 16,
+    elevation: 12,
+  },
+  header: { alignItems: "center", flexDirection: "row", justifyContent: "space-between", minHeight: 46, paddingHorizontal: 8, width: "100%" },
+  title: { color: Theme.colors.foreground, fontSize: 16, fontWeight: "700" },
+  closeButton: { alignItems: "center", borderColor: Theme.colors.border, borderRadius: Theme.radius.full, borderWidth: 1, height: 36, justifyContent: "center", width: 36 },
+  closeText: { color: Theme.colors.foreground, fontSize: 23, fontWeight: "400", lineHeight: 24 },
+  emojiButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emojiButtonPressed: {
+    backgroundColor: Theme.colors.whiteOverlay12,
+    transform: [{ scale: 0.88 }],
+  },
+  pressed: {
+    opacity: 0.72,
+    transform: [{ scale: 0.96 }],
+  },
+  emojiText: {
+    fontSize: 26,
+  },
+});
+
+export const ReactionPicker = memo(ReactionPickerBase);

package/src/components/RtcVideoView.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("../media/native-webrtc", () => ({ RTCView: () => null }));
+
+describe("RtcVideoView", () => {
+  it("reports the availability of the RTC view", async () => {
+    const { hasRtcVideoView, RtcVideoView } = await import("./RtcVideoView");
+
+    expect(hasRtcVideoView()).toBe(true);
+    expect(RtcVideoView({ streamURL: "stream" })).toBeTruthy();
+  });
+});

package/src/components/RtcVideoView.tsx

@@ -0,0 +1,15 @@
+import { RTCView } from "../media/native-webrtc";
+import { canRenderRtcVideoView, type RtcVideoViewProps } from "./rtc-video-view-availability";
+
+export function hasRtcVideoView(): boolean {
+  return canRenderRtcVideoView(RTCView);
+}
+
+export function RtcVideoView(props: RtcVideoViewProps): React.JSX.Element | null {
+  if (!canRenderRtcVideoView(RTCView)) {
+    return null;
+  }
+
+  const RtcView = RTCView;
+  return <RtcView {...props} />;
+}

package/src/components/SpaceView.android.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("./SpaceView.shared", () => ({ SpaceViewShared: () => null }));
+
+describe("SpaceView.android", () => {
+  it("exposes the canonical platform component name", async () => {
+    const { SpaceViewAndroid } = await import("./SpaceView.android");
+
+    expect(SpaceViewAndroid).toBeTypeOf("function");
+  });
+});

package/src/components/SpaceView.android.tsx

@@ -0,0 +1 @@
+export { SpaceViewShared as SpaceViewAndroid, SpaceViewShared as SpaceView } from "./SpaceView.shared";

package/src/components/SpaceView.ios-pad.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("./SpaceView.shared", () => ({ SpaceViewShared: () => null }));
+
+describe("SpaceView.ios-pad", () => {
+  it("exposes the canonical platform component name", async () => {
+    const { SpaceViewIosPad } = await import("./SpaceView.ios-pad");
+
+    expect(SpaceViewIosPad).toBeTypeOf("function");
+  });
+});

package/src/components/SpaceView.ios-pad.tsx

@@ -0,0 +1 @@
+export { SpaceViewShared as SpaceViewIosPad, SpaceViewShared as SpaceView } from "./SpaceView.shared";

package/src/components/SpaceView.ios-phone.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("./SpaceView.shared", () => ({ SpaceViewShared: () => null }));
+
+describe("SpaceView.ios-phone", () => {
+  it("exposes the canonical platform component name", async () => {
+    const { SpaceViewIosPhone } = await import("./SpaceView.ios-phone");
+
+    expect(SpaceViewIosPhone).toBeTypeOf("function");
+  });
+});

package/src/components/SpaceView.ios-phone.tsx

@@ -0,0 +1 @@
+export { SpaceViewShared as SpaceViewIosPhone, SpaceViewShared as SpaceView } from "./SpaceView.shared";

package/src/components/SpaceView.macos.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("./SpaceView.shared", () => ({ SpaceViewShared: () => null }));
+
+describe("SpaceView.macos", () => {
+  it("exposes the canonical platform component name", async () => {
+    const { SpaceViewMacos } = await import("./SpaceView.macos");
+
+    expect(SpaceViewMacos).toBeTypeOf("function");
+  });
+});

package/src/components/SpaceView.macos.tsx

@@ -0,0 +1 @@
+export { SpaceViewShared as SpaceViewMacos, SpaceViewShared as SpaceView } from "./SpaceView.shared";