@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/native-space-view/AppearanceSettings.tsx

@@ -1,114 +0,0 @@
-import CheckmarkCircle01Icon from "@hugeicons/core-free-icons/dist/esm/CheckmarkCircle01Icon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-
-import { THEME_PALETTES, THEME_TEXTURES, type ThemeMode } from "../../ui/appearance";
-import { useNativeAppearance } from "../../ui/native-appearance-context";
-import { useNativeTheme } from "../../ui/native-theme";
-import { Theme } from "../../ui/theme";
-
-export function AppearanceSettings(): React.JSX.Element {
-  const { appearance, setPalette, setTexture } = useNativeAppearance();
-  const theme = useNativeTheme();
-  return (
-    <View style={styles.section}>
-      <Text style={[styles.intro, { color: theme.colors.ink2 }]}>Choose a complete color family, then layer in a material texture. Every combination is available on mobile.</Text>
-      {(["light", "dark"] as const).map((mode) => (
-        <PaletteGroup key={mode} mode={mode} selectedPalette={appearance.palette} theme={theme} onSelect={setPalette} />
-      ))}
-      <View style={styles.textureSection}>
-        <Text style={styles.groupLabel}>Texture</Text>
-        <View style={styles.textureGrid}>
-          {THEME_TEXTURES.map((texture) => {
-            const selected = texture.value === appearance.texture;
-            return (
-              <Pressable
-                accessibilityLabel={`Use ${texture.label} texture`}
-                accessibilityRole="button"
-                accessibilityState={{ selected }}
-                key={texture.value}
-                onPress={() => setTexture(texture.value)}
-                style={({ pressed }) => [styles.texture, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles.selected, { borderColor: theme.colors.primary }], pressed && styles.pressed]}
-              >
-                <TexturePreview kind={texture.value} background={appearance.tokens.stage} foreground={appearance.tokens.textMuted} />
-                <Text numberOfLines={1} style={[styles.textureLabel, { color: theme.colors.ink }]}>
-                  {texture.label}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </View>
-      </View>
-    </View>
-  );
-}
-
-function PaletteGroup({ mode, selectedPalette, theme, onSelect }: { readonly mode: ThemeMode; readonly selectedPalette: string; readonly theme: ReturnType<typeof useNativeTheme>; readonly onSelect: (palette: (typeof THEME_PALETTES)[number]["value"]) => void }): React.JSX.Element {
-  return (
-    <View style={styles.group}>
-      <Text style={styles.groupLabel}>{mode === "light" ? "Light palettes" : "Dark palettes"}</Text>
-      <View style={styles.paletteGrid}>
-        {THEME_PALETTES.filter((palette) => palette.mode === mode).map((palette) => {
-          const selected = palette.value === selectedPalette;
-          return (
-            <Pressable
-              accessibilityLabel={`Use ${palette.label} palette`}
-              accessibilityRole="button"
-              accessibilityState={{ selected }}
-              key={palette.value}
-              onPress={() => onSelect(palette.value)}
-              style={({ pressed }) => [styles.palette, { backgroundColor: theme.colors.surfaceMuted, borderColor: theme.colors.line }, selected && [styles.selected, { borderColor: theme.colors.primary }], pressed && styles.pressed]}
-            >
-              <View style={styles.swatches}>
-                {palette.swatch.map((color) => (
-                  <View key={color} style={[styles.swatch, { backgroundColor: color }]} />
-                ))}
-              </View>
-              <View style={styles.paletteCopy}>
-                <Text numberOfLines={1} style={[styles.paletteLabel, { color: theme.colors.ink }]}>
-                  {palette.label}
-                </Text>
-                <Text numberOfLines={1} style={[styles.family, { color: theme.colors.ink3 }]}>
-                  {palette.family}
-                </Text>
-              </View>
-              {selected ? <HugeiconsIcon color={theme.colors.success} icon={CheckmarkCircle01Icon} size={18} /> : null}
-            </Pressable>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-function TexturePreview({ background, foreground, kind }: { readonly background: string; readonly foreground: string; readonly kind: "none" | "paper" | "slate" }): React.JSX.Element {
-  return (
-    <View style={[styles.texturePreview, { backgroundColor: background }]}>
-      {kind === "paper" ? Array.from({ length: 11 }, (_, index) => <View key={index} style={[styles.grain, { backgroundColor: foreground, left: `${(index * 29) % 91}%`, top: `${(index * 43) % 88}%` }]} />) : null}
-      {kind === "slate" ? Array.from({ length: 5 }, (_, index) => <View key={index} style={[styles.slateLine, { backgroundColor: foreground, top: 4 + index * 8 }]} />) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  section: { gap: Theme.spacing.xl },
-  intro: { color: Theme.colors.ink2, fontSize: 14, lineHeight: 20 },
-  group: { gap: Theme.spacing.sm },
-  groupLabel: { color: Theme.colors.ink3, fontSize: 11, fontWeight: "800", letterSpacing: 1, textTransform: "uppercase" },
-  paletteGrid: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.sm },
-  palette: { alignItems: "center", backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: 9, minHeight: 66, padding: 9, width: "48.6%" },
-  selected: { borderColor: Theme.colors.chalkBlue, borderWidth: 2, padding: 8 },
-  swatches: { borderColor: Theme.colors.line, borderRadius: 7, borderWidth: 1, height: 42, overflow: "hidden", width: 42 },
-  swatch: { flex: 1 },
-  paletteCopy: { flex: 1, minWidth: 0 },
-  paletteLabel: { color: Theme.colors.ink, fontSize: 13, fontWeight: "700" },
-  family: { color: Theme.colors.ink3, fontSize: 11, marginTop: 2 },
-  textureSection: { gap: Theme.spacing.sm },
-  textureGrid: { flexDirection: "row", gap: Theme.spacing.sm },
-  texture: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flex: 1, overflow: "hidden", padding: 9 },
-  texturePreview: { borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, height: 44, overflow: "hidden", position: "relative" },
-  textureLabel: { color: Theme.colors.ink, fontSize: 12, fontWeight: "700", marginTop: 7, textAlign: "center" },
-  grain: { borderRadius: 1, height: 2, opacity: 0.18, position: "absolute", width: 2 },
-  slateLine: { height: 1, left: -5, opacity: 0.15, position: "absolute", transform: [{ rotate: "7deg" }], width: "120%" },
-  pressed: { opacity: 0.7, transform: [{ scale: 0.98 }] },
-});

package/src/components/native-space-view/FeedbackSheet.tsx

@@ -1,296 +0,0 @@
-import type { FeedbackCategory, FeedbackEvidenceInput, FeedbackPrepared, FeedbackScreenshotCapture, FeedbackScreenshotUnavailable, SpaceClient } from "@q9labsai/chalk-client";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
-
-import { useNativeTheme } from "../../ui/native-theme";
-import { Theme } from "../../ui/theme";
-import { createNativeFeedbackEvidence } from "../../feedback/native-evidence";
-import { captureNativeFeedbackView, type FeedbackCaptureSize, type FeedbackCaptureTarget } from "../../feedback/native-capture";
-
-type FeedbackScreenshot = FeedbackScreenshotCapture | FeedbackScreenshotUnavailable;
-
-export interface FeedbackSheetProps {
-  readonly client: SpaceClient;
-  readonly requested: boolean;
-  readonly captureTarget: FeedbackCaptureTarget;
-  readonly captureSize: FeedbackCaptureSize;
-  readonly feedbackEvidence?: Partial<FeedbackEvidenceInput>;
-  readonly onClose: () => void;
-}
-
-const categories: readonly FeedbackCategory[] = ["bug", "feature_request", "other"];
-
-export function FeedbackSheet({ client, requested, captureTarget, captureSize, feedbackEvidence, onClose }: FeedbackSheetProps): React.JSX.Element {
-  const theme = useNativeTheme();
-  const [visible, setVisible] = useState(false);
-  const [preparing, setPreparing] = useState(false);
-  const [sending, setSending] = useState(false);
-  const [category, setCategory] = useState<FeedbackCategory>("bug");
-  const [message, setMessage] = useState("");
-  const [screenshot, setScreenshot] = useState<FeedbackScreenshot>({ state: "unavailable", failure_code: "capture_failed" });
-  const [prepared, setPrepared] = useState<FeedbackPrepared | undefined>();
-  const [error, setError] = useState<string | undefined>();
-  const [receiptId, setReceiptId] = useState<string | undefined>();
-  const evidence = useMemo(() => ({ ...createNativeFeedbackEvidence(), ...feedbackEvidence }), [feedbackEvidence]);
-  const prepareScreenshot = useCallback((nextScreenshot: FeedbackScreenshot) => client.feedback.prepare({ evidence, screenshot_provider: () => nextScreenshot }), [client.feedback, evidence]);
-
-  useEffect(() => {
-    if (!requested) {
-      setVisible(false);
-      return;
-    }
-
-    let active = true;
-    setPreparing(true);
-    setSending(false);
-    setCategory("bug");
-    setMessage("");
-    setError(undefined);
-    setReceiptId(undefined);
-    setPrepared(undefined);
-
-    const prepare = async (): Promise<void> => {
-      let captured: FeedbackScreenshot;
-      try {
-        captured = await captureNativeFeedbackView(captureTarget, captureSize);
-      } catch {
-        captured = { state: "unavailable", failure_code: "capture_failed" };
-      }
-      if (!active) return;
-      setScreenshot(captured);
-      try {
-        const nextPrepared = await prepareScreenshot(captured);
-        if (!active) return;
-        setPrepared(nextPrepared);
-      } catch (cause) {
-        if (!active) return;
-        setError(errorMessage(cause));
-      } finally {
-        if (active) {
-          setPreparing(false);
-          setVisible(true);
-        }
-      }
-    };
-
-    void prepare();
-    return () => {
-      active = false;
-    };
-  }, [captureSize, captureTarget, prepareScreenshot, requested]);
-
-  const close = useCallback(() => {
-    setVisible(false);
-    onClose();
-  }, [onClose]);
-
-  const refresh = useCallback(async () => {
-    if (preparing || sending) return;
-    setPreparing(true);
-    setPrepared(undefined);
-    setError(undefined);
-    let captured: FeedbackScreenshot;
-    try {
-      captured = await captureNativeFeedbackView(captureTarget, captureSize);
-    } catch {
-      captured = { state: "unavailable", failure_code: "capture_failed" };
-    }
-    setScreenshot(captured);
-    try {
-      setPrepared(await prepareScreenshot(captured));
-    } catch (cause) {
-      setError(errorMessage(cause));
-    } finally {
-      setPreparing(false);
-    }
-  }, [captureSize, captureTarget, prepareScreenshot, preparing, sending]);
-
-  const removeScreenshot = useCallback(async () => {
-    if (preparing || sending) return;
-    const removed: FeedbackScreenshot = { state: "removed" };
-    setPreparing(true);
-    setPrepared(undefined);
-    setScreenshot(removed);
-    setError(undefined);
-    try {
-      setPrepared(await prepareScreenshot(removed));
-    } catch (cause) {
-      setError(errorMessage(cause));
-    } finally {
-      setPreparing(false);
-    }
-  }, [prepareScreenshot, preparing, sending]);
-
-  const submit = useCallback(async () => {
-    if (sending || !message.trim()) return;
-    setSending(true);
-    setError(undefined);
-    try {
-      const request = prepared ?? (await prepareScreenshot(screenshot));
-      setPrepared(request);
-      const receipt = await request.send({ category, message });
-      setReceiptId(receipt.id);
-    } catch (cause) {
-      setError(errorMessage(cause));
-    } finally {
-      setSending(false);
-    }
-  }, [category, message, prepareScreenshot, prepared, screenshot, sending]);
-
-  const selectCategory = useCallback((nextCategory: FeedbackCategory) => {
-    setCategory(nextCategory);
-    setPrepared(undefined);
-  }, []);
-
-  const updateMessage = useCallback((nextMessage: string) => {
-    setMessage(nextMessage);
-    setPrepared(undefined);
-  }, []);
-
-  const screenshotUri = screenshotDataUri(screenshot);
-  const canSubmit = message.trim().length > 0 && !sending && !preparing && !receiptId;
-
-  return (
-    <Modal animationType="slide" onRequestClose={close} transparent visible={visible}>
-      <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.overlay}>
-        <Pressable accessibilityLabel="Close Feedback" onPress={close} style={styles.backdrop} />
-        <View style={[styles.sheet, { backgroundColor: theme.colors.background }]}>
-          <View style={styles.header}>
-            <View style={styles.headerCopy}>
-              <Text accessibilityRole="header" style={[styles.title, { color: theme.colors.foreground }]}>
-                Feedback
-              </Text>
-              <Text style={[styles.subtitle, { color: theme.colors.mutedForeground }]}>Tell Chalk what happened. We receive this report with safe diagnostic context.</Text>
-            </View>
-            <Pressable accessibilityLabel="Close Feedback" accessibilityRole="button" disabled={sending} onPress={close} style={styles.closeButton}>
-              <Text style={[styles.closeText, { color: theme.colors.foreground }]}>×</Text>
-            </Pressable>
-          </View>
-
-          {receiptId ? (
-            <View style={styles.success}>
-              <Text style={[styles.successTitle, { color: theme.colors.foreground }]}>Feedback sent to Chalk</Text>
-              <Text style={[styles.subtitle, { color: theme.colors.mutedForeground }]}>Thanks. Chalk received your report.</Text>
-              <Pressable accessibilityRole="button" onPress={close} style={[styles.primaryButton, { backgroundColor: theme.colors.primary }]}>
-                <Text style={[styles.primaryButtonText, { color: theme.colors.primaryForeground }]}>Done</Text>
-              </Pressable>
-            </View>
-          ) : (
-            <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
-              <Text style={[styles.label, { color: theme.colors.foreground }]}>Category</Text>
-              <View style={styles.categoryRow}>
-                {categories.map((option) => (
-                  <Pressable
-                    accessibilityRole="button"
-                    accessibilityState={{ selected: category === option }}
-                    key={option}
-                    onPress={() => selectCategory(option)}
-                    style={[styles.categoryButton, { borderColor: theme.colors.border }, category === option && { backgroundColor: theme.colors.primary, borderColor: theme.colors.primary }]}
-                  >
-                    <Text style={[styles.categoryText, { color: category === option ? theme.colors.primaryForeground : theme.colors.foreground }]}>{categoryLabel(option)}</Text>
-                  </Pressable>
-                ))}
-              </View>
-
-              <Text style={[styles.label, { color: theme.colors.foreground }]}>Message</Text>
-              <TextInput
-                accessibilityLabel="Feedback message"
-                editable={!sending}
-                maxLength={8_000}
-                multiline
-                onChangeText={updateMessage}
-                placeholder={category === "bug" ? "What went wrong?" : category === "feature_request" ? "What would help?" : "What should Chalk know?"}
-                placeholderTextColor={theme.colors.placeholder}
-                style={[styles.messageInput, { borderColor: theme.colors.border, color: theme.colors.foreground }]}
-                textAlignVertical="top"
-                value={message}
-              />
-
-              <Text style={[styles.label, { color: theme.colors.foreground }]}>Screenshot</Text>
-              {screenshotUri ? (
-                <View style={styles.thumbnailFrame}>
-                  <Image accessibilityLabel="Feedback screenshot preview" source={{ uri: screenshotUri }} style={styles.thumbnail} />
-                  <View style={styles.thumbnailActions}>
-                    <Pressable accessibilityRole="button" disabled={preparing || sending} onPress={() => void refresh()} style={styles.smallButton}>
-                      <Text style={[styles.smallButtonText, { color: theme.colors.primary }]}>Refresh</Text>
-                    </Pressable>
-                    <Pressable accessibilityRole="button" disabled={preparing || sending} onPress={() => void removeScreenshot()} style={styles.smallButton}>
-                      <Text style={[styles.smallButtonText, { color: theme.colors.error }]}>Remove</Text>
-                    </Pressable>
-                  </View>
-                </View>
-              ) : (
-                <View style={[styles.unavailable, { borderColor: theme.colors.border }]}>
-                  <Text style={[styles.unavailableText, { color: theme.colors.mutedForeground }]}>Screenshot unavailable. You can still send Feedback.</Text>
-                  <Pressable accessibilityRole="button" disabled={preparing || sending} onPress={() => void refresh()} style={styles.smallButton}>
-                    <Text style={[styles.smallButtonText, { color: theme.colors.primary }]}>Refresh</Text>
-                  </Pressable>
-                </View>
-              )}
-              {screenshot.state === "partial" ? <Text style={[styles.notice, { color: theme.colors.mutedForeground }]}>Some protected content may be missing from this screenshot.</Text> : null}
-              {preparing ? <Text style={[styles.notice, { color: theme.colors.mutedForeground }]}>Preparing Feedback…</Text> : null}
-              {error ? (
-                <Text accessibilityLiveRegion="polite" style={[styles.error, { color: theme.colors.error }]}>
-                  {error}
-                </Text>
-              ) : null}
-
-              <Pressable accessibilityRole="button" disabled={!canSubmit} onPress={() => void submit()} style={[styles.primaryButton, { backgroundColor: theme.colors.primary }, !canSubmit && styles.disabledButton]}>
-                <Text style={[styles.primaryButtonText, { color: theme.colors.primaryForeground }]}>{sending ? "Sending…" : "Send Feedback"}</Text>
-              </Pressable>
-              <Text style={[styles.footer, { color: theme.colors.mutedForeground }]}>Chalk includes safe Space state, journey, and diagnostic details. It never includes credentials, names, or message content outside this report. There is no reply channel.</Text>
-            </ScrollView>
-          )}
-        </View>
-      </KeyboardAvoidingView>
-    </Modal>
-  );
-}
-
-function screenshotDataUri(screenshot: FeedbackScreenshot): string | undefined {
-  if (screenshot.state !== "captured" && screenshot.state !== "partial") return undefined;
-  return `data:${screenshot.mime_type};base64,${screenshot.data_base64}`;
-}
-
-function categoryLabel(category: FeedbackCategory): string {
-  if (category === "feature_request") return "Feature request";
-  if (category === "bug") return "Bug";
-  return "Other";
-}
-
-function errorMessage(cause: unknown): string {
-  return cause instanceof Error ? cause.message : "Chalk could not send Feedback.";
-}
-
-const styles = StyleSheet.create({
-  overlay: { flex: 1, justifyContent: "flex-end", backgroundColor: Theme.colors.darkOverlay55 },
-  backdrop: { ...StyleSheet.absoluteFillObject },
-  sheet: { maxHeight: "92%", borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 36 },
-  header: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 20 },
-  headerCopy: { flex: 1, gap: 4 },
-  title: { ...Theme.typography.heading },
-  subtitle: { ...Theme.typography.body },
-  closeButton: { alignItems: "center", borderColor: Theme.colors.border, borderRadius: Theme.radius.full, borderWidth: 1, height: 36, justifyContent: "center", width: 36 },
-  closeText: { fontSize: 24, lineHeight: 26 },
-  content: { gap: 12, paddingBottom: 8 },
-  label: { ...Theme.typography.label, marginTop: 4 },
-  categoryRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
-  categoryButton: { borderRadius: 14, borderWidth: 1, paddingHorizontal: 13, paddingVertical: 10 },
-  categoryText: { fontSize: 14, fontWeight: "700" },
-  messageInput: { minHeight: 116, borderRadius: 14, borderWidth: 1, padding: 14, fontSize: 15, lineHeight: 21 },
-  thumbnailFrame: { borderRadius: 16, overflow: "hidden", borderWidth: 1, borderColor: Theme.colors.border },
-  thumbnail: { width: "100%", height: 170, backgroundColor: Theme.colors.surfaceMuted },
-  thumbnailActions: { flexDirection: "row", gap: 16, paddingHorizontal: 12, paddingVertical: 8 },
-  unavailable: { borderRadius: 14, borderWidth: 1, padding: 14, gap: 4 },
-  unavailableText: { ...Theme.typography.body },
-  smallButton: { alignSelf: "flex-start", paddingVertical: 6, paddingHorizontal: 2 },
-  smallButtonText: { fontSize: 14, fontWeight: "700" },
-  notice: { ...Theme.typography.meta },
-  error: { ...Theme.typography.meta, fontWeight: "700" },
-  primaryButton: { alignItems: "center", borderRadius: 14, justifyContent: "center", minHeight: 50, marginTop: 8, paddingHorizontal: 16 },
-  primaryButtonText: { fontSize: 16, fontWeight: "800" },
-  disabledButton: { opacity: 0.45 },
-  footer: { ...Theme.typography.meta, marginTop: 4 },
-  success: { gap: 12, paddingVertical: 28 },
-  successTitle: { ...Theme.typography.subheading },
-});

package/src/components/native-space-view/ParticipantActionSheet.tsx

@@ -1,99 +0,0 @@
-import CancelCircleIcon from "@hugeicons/core-free-icons/dist/esm/CancelCircleIcon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import UserIcon from "@hugeicons/core-free-icons/dist/esm/UserIcon";
-import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { buildParticipantActionDescriptors, type ParticipantActionDescriptor } from "./space-progressive-surface-helpers";
-import { CloseButton, IconTile, InitialsAvatar } from "./SpaceSurfacePrimitives";
-import type { SpaceController } from "./space-progressive-surface-types";
-
-interface ParticipantActionSheetProps {
-  readonly controller: SpaceController;
-  readonly participantId: string | null;
-  readonly onClose: () => void;
-}
-
-export function ParticipantActionSheet({ controller, participantId, onClose }: ParticipantActionSheetProps): React.JSX.Element {
-  const participant = participantId ? controller.participants.participants.find((item) => item.id === participantId) : undefined;
-  const descriptors = buildParticipantActionDescriptors({
-    canMuteParticipants: controller.canMuteParticipants,
-    canRequestMedia: controller.canRequestMedia,
-    canStopParticipantCamera: controller.canStopParticipantCamera,
-    canStopParticipantScreenShare: controller.canStopParticipantScreenShare,
-    canRemoveParticipants: controller.canRemoveParticipants,
-  });
-
-  const run = (descriptor: ParticipantActionDescriptor) => {
-    if (!participantId) return;
-    onClose();
-    if (descriptor.kind === "mute") controller.muteParticipant(participantId);
-    if (descriptor.kind === "requestUnmute") controller.requestUnmuteParticipant(participantId);
-    if (descriptor.kind === "requestCamera") controller.requestStartParticipantCamera(participantId);
-    if (descriptor.kind === "stopCamera") controller.stopParticipantCamera(participantId);
-    if (descriptor.kind === "stopScreenShare") controller.stopParticipantScreenShare(participantId);
-    if (descriptor.kind === "remove") controller.removeParticipant(participantId);
-  };
-
-  return (
-    <Modal animationType="fade" onRequestClose={onClose} transparent visible={participantId !== null}>
-      <View style={styles.modalRoot}>
-        <Pressable accessibilityLabel="Close Participant actions" onPress={onClose} style={styles.backdrop} />
-        <View style={styles.card}>
-          <View style={styles.cardHeader}>
-            {participant ? <InitialsAvatar name={participant.displayName} size={44} /> : <IconTile icon={UserIcon} />}
-            <View style={styles.headerCopy}>
-              <Text numberOfLines={1} style={styles.name}>
-                {participant?.displayName ?? "Participant"}
-              </Text>
-            </View>
-            <CloseButton label="Close Participant actions" onPress={onClose} />
-          </View>
-          <View style={styles.actions}>
-            {descriptors
-              .filter((descriptor) => !descriptor.destructive)
-              .map((descriptor) => (
-                <ParticipantActionRow descriptor={descriptor} key={descriptor.kind} onPress={() => run(descriptor)} />
-              ))}
-            {descriptors.some((descriptor) => descriptor.destructive) ? <View style={styles.divider} /> : null}
-            {descriptors
-              .filter((descriptor) => descriptor.destructive)
-              .map((descriptor) => (
-                <ParticipantActionRow descriptor={descriptor} key={descriptor.kind} onPress={() => run(descriptor)} />
-              ))}
-          </View>
-          {!descriptors.length ? <Text style={styles.emptyText}>No actions are available for this Participant.</Text> : null}
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-function ParticipantActionRow({ descriptor, onPress }: { readonly descriptor: ParticipantActionDescriptor; readonly onPress: () => void }): React.JSX.Element {
-  const icon = descriptor.kind === "mute" || descriptor.kind === "requestUnmute" ? MicOff01Icon : descriptor.kind === "requestCamera" || descriptor.kind === "stopCamera" ? Video01Icon : CancelCircleIcon;
-  return (
-    <Pressable accessibilityLabel={descriptor.label} accessibilityRole="button" onPress={onPress} style={({ pressed }) => [styles.actionRow, descriptor.destructive && styles.destructiveRow, pressed && styles.pressed]}>
-      <HugeiconsIcon color={descriptor.destructive ? Theme.colors.error : Theme.colors.ink} icon={icon} size={21} />
-      <Text style={[styles.actionLabel, descriptor.destructive && styles.destructiveText]}>{descriptor.label}</Text>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalRoot: { alignItems: "center", flex: 1, justifyContent: "flex-end", paddingBottom: Platform.OS === "ios" ? Theme.spacing["2xl"] : Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingTop: Theme.spacing.lg },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
-  card: { backgroundColor: Theme.colors.surface, borderColor: Theme.colors.line, borderRadius: Theme.radius.lg, elevation: 8, maxHeight: "78%", overflow: "hidden", shadowColor: Theme.colors.ink, shadowOffset: { height: 4, width: 0 }, shadowOpacity: 0.14, shadowRadius: 20, width: "100%" },
-  cardHeader: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 78, paddingHorizontal: Theme.spacing.md },
-  headerCopy: { flex: 1, minWidth: 0 },
-  name: { color: Theme.colors.ink, fontSize: 17, fontWeight: "700" },
-  actions: { padding: Theme.spacing.sm },
-  actionRow: { alignItems: "center", borderRadius: Theme.radius.sm, flexDirection: "row", gap: Theme.spacing.md, minHeight: 52, paddingHorizontal: Theme.spacing.md },
-  actionLabel: { color: Theme.colors.ink, flex: 1, fontSize: 15 },
-  destructiveRow: { backgroundColor: Theme.colors.washPink, marginTop: Theme.spacing.xs },
-  destructiveText: { color: Theme.colors.error, fontWeight: "700" },
-  divider: { backgroundColor: Theme.colors.line, height: 1, marginHorizontal: Theme.spacing.md, marginVertical: Theme.spacing.xs },
-  emptyText: { color: Theme.colors.ink2, fontSize: 14, padding: Theme.spacing.lg },
-  pressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
-});