@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/FaceAvatar.tsx

@@ -1,120 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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/MediaView.tsx

@@ -1,76 +0,0 @@
-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.tsx

@@ -1,98 +0,0 @@
-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/SpaceView.android.tsx

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

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

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

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

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

package/src/components/SpaceView.macos.tsx

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

package/src/components/SpaceView.shared.tsx

@@ -1,98 +0,0 @@
-import { useRef, useState } from "react";
-import { Alert, StyleSheet, Text, View } from "react-native";
-
-import { useSpaceClient } from "../context/space-client-context";
-import { Theme } from "../ui/theme";
-import { useNativeTheme } from "../ui/native-theme";
-import { getIosSimulatorMediaMessage } from "../utils/ios-simulator";
-import { ReactionPicker } from "./ReactionPicker";
-import type { SpaceViewProps } from "./SpaceView";
-import { SpaceGridAndroid } from "./native-space-view/SpaceGrid.android";
-import { SpaceBottomDockAndroid } from "./native-space-view/SpaceBottomDock.android";
-import { SpaceActionMenu, selectSpaceReaction } from "./native-space-view/SpaceActionMenu";
-import { FeedbackSheet } from "./native-space-view/FeedbackSheet";
-import type { FeedbackCaptureSize } from "../feedback/native-capture";
-import { SpaceStageAndroid } from "./native-space-view/SpaceStage.android";
-import { SpaceTopBarAndroid } from "./native-space-view/SpaceTopBar.android";
-import { SpaceWhiteboardSurface } from "./native-space-view/SpaceWhiteboardSurface";
-import { SettingsSheet } from "./native-space-view/SettingsSheet";
-import { SpacePanelSheet } from "./native-space-view/SpacePanelSheet";
-import { useSpaceViewController } from "./native-space-view/useSpaceViewController";
-
-export function SpaceViewShared(props: SpaceViewProps): React.JSX.Element {
-  const controller = useSpaceViewController(props);
-  const client = useSpaceClient();
-  const theme = useNativeTheme();
-  const captureTarget = useRef<View>(null);
-  const [captureSize, setCaptureSize] = useState<FeedbackCaptureSize>({ width: 0, height: 0 });
-  const [feedbackRequested, setFeedbackRequested] = useState(false);
-  const toggleMedia = (action: () => void) => {
-    if (controller.simulatorMediaDisabled) {
-      Alert.alert("Media unavailable", getIosSimulatorMediaMessage());
-      return;
-    }
-    action();
-  };
-
-  return (
-    <>
-      <View collapsable={false} onLayout={(event) => setCaptureSize({ width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height })} ref={captureTarget} style={[styles.space, { backgroundColor: theme.colors.darkCanvas }]}>
-        <SpaceTopBarAndroid recording={controller.recording} formattedDuration={controller.formattedDuration} logoUrl={props.logoUrl} participantCount={controller.participantCount} spaceName={controller.spaceName} />
-        {props.reconnecting ? (
-          <View accessibilityLiveRegion="polite" style={[styles.recovery, { backgroundColor: theme.colors.primary }]}>
-            <Text style={[styles.recoveryText, { color: theme.colors.primaryForeground }]}>Reconnecting… controls will resume shortly.</Text>
-          </View>
-        ) : null}
-        <View style={styles.stage}>
-          {controller.whiteboard.isOpen ? (
-            <SpaceWhiteboardSurface whiteboard={controller.whiteboard} />
-          ) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? (
-            <SpaceStageAndroid
-              activeReactions={controller.activeReactions}
-              handRaised={controller.handRaised}
-              isCompactViewport={controller.derived.isCompactViewport}
-              isMuted={controller.isMuted}
-              layoutMode={controller.layout.layout}
-              primaryContent={controller.derived.primaryContent}
-              raisedHandCount={controller.raisedHandCount}
-              screenShareTrack={controller.derived.screenShareTrack}
-              screenSharer={controller.derived.screenSharer}
-              selfName={controller.selfName}
-              stripParticipants={controller.derived.allParticipants}
-              whiteboard={{
-                isOpen: controller.whiteboard.isOpen,
-                canDraw: controller.whiteboard.canDraw,
-                elementCount: controller.whiteboard.elements.length,
-                participantCount: controller.whiteboard.openParticipants.length,
-              }}
-            />
-          ) : (
-            <SpaceGridAndroid gridPages={controller.derived.gridPages} participants={controller.derived.allParticipants} />
-          )}
-        </View>
-        <SpaceBottomDockAndroid
-          isCameraOff={controller.isCameraOff}
-          isMuted={controller.isMuted}
-          onLeave={controller.handleLeave}
-          onOpenChat={controller.canChat ? () => controller.openPanel("chat") : undefined}
-          onOpenMore={() => controller.setActionsOpen(true)}
-          onToggleAudio={() => toggleMedia(controller.toggleAudio)}
-          onToggleVideo={() => toggleMedia(controller.toggleVideo)}
-          simulatorMediaDisabled={controller.simulatorMediaDisabled}
-          unreadChatCount={controller.chat.unreadCount}
-        />
-        <SpaceActionMenu controller={controller} onOpenDiagnostics={props.onOpenDiagnostics} onOpenFeedback={() => setFeedbackRequested(true)} />
-        {controller.panel === "settings" ? <SettingsSheet controller={controller} isOpen onClose={controller.closePanel} /> : <SpacePanelSheet controller={controller} />}
-        <ReactionPicker isOpen={controller.reactionPickerOpen} onClose={() => controller.setReactionPickerOpen(false)} onSelect={(reaction) => selectSpaceReaction(controller, reaction)} />
-      </View>
-      <FeedbackSheet client={client} captureSize={captureSize} captureTarget={captureTarget} feedbackEvidence={props.feedbackEvidence} onClose={() => setFeedbackRequested(false)} requested={feedbackRequested} />
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  space: { flex: 1, backgroundColor: Theme.colors.darkCanvas },
-  stage: { flex: 1, width: "100%", overflow: "hidden", justifyContent: "center" },
-  recovery: { alignItems: "center", paddingHorizontal: 16, paddingVertical: 8 },
-  recoveryText: { fontSize: 13, fontWeight: "700" },
-});

package/src/components/SpaceView.tsx

@@ -1,54 +0,0 @@
-import type { ChatUploadFile, FeedbackEvidenceInput } from "@q9labsai/chalk-client";
-import { resolvePlatformVariant } from "../platform/platform";
-import type { Layout } from "../ui/native-types";
-import { SpaceViewAndroid } from "./SpaceView.android";
-import { SpaceViewIosPad } from "./SpaceView.ios-pad";
-import { SpaceViewIosPhone } from "./SpaceView.ios-phone";
-import { SpaceViewMacos } from "./SpaceView.macos";
-import type { SpaceViewDiagnosticsSnapshot } from "./native-space-view/diagnostics";
-
-export interface SpaceViewFeatures {
-  chat?: boolean;
-  participants?: boolean;
-  admission?: boolean;
-  screenShare?: boolean;
-  reactions?: boolean;
-  handRaise?: boolean;
-  whiteboard?: boolean;
-  info?: boolean;
-  settings?: boolean;
-}
-
-export interface SpaceViewProps {
-  spaceName?: string;
-  inviteLink?: string;
-  logoUrl?: string;
-  reconnecting?: boolean;
-  layout?: Layout;
-  onLayoutChange?: (layout: Layout) => void;
-  features?: SpaceViewFeatures;
-  onLeave: () => void | Promise<void>;
-  onEndEpisode?: () => void | Promise<void>;
-  onOpenDiagnostics?: () => void;
-  feedbackEvidence?: Partial<FeedbackEvidenceInput>;
-  onDiagnosticsChange?: (snapshot: SpaceViewDiagnosticsSnapshot) => void;
-  /** Selects files; the SDK owns bounds, upload, and send sequencing. */
-  pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
-}
-
-export type { SpaceViewDiagnosticsSnapshot };
-
-export function SpaceView(props: SpaceViewProps): React.JSX.Element {
-  switch (resolvePlatformVariant()) {
-    case "ios-pad":
-      return <SpaceViewIosPad {...props} />;
-    case "ios-phone":
-      return <SpaceViewIosPhone {...props} />;
-    case "macos":
-      return <SpaceViewMacos {...props} />;
-    case "tvos":
-    case "android":
-    default:
-      return <SpaceViewAndroid {...props} />;
-  }
-}

package/src/components/episode-diagnostic-render-observer.ts

@@ -1,12 +0,0 @@
-const REGISTRY = Symbol.for("@chalk/private/episode-diagnostic-render-registry/v1");
-
-type RenderReporter = (observation: "first_frame" | "not_observable") => void;
-type DiagnosticGlobal = typeof globalThis & { [REGISTRY]?: WeakMap<object, RenderReporter> };
-
-export function observeNativeFrameNotObservable(track: object): void {
-  try {
-    (globalThis as DiagnosticGlobal)[REGISTRY]?.get(track)?.("not_observable");
-  } catch {
-    // Native rendering stays independent from diagnostic observation.
-  }
-}