@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/ui/native-appearance-context.tsx

@@ -1,74 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, type PropsWithChildren } from "react";
-import { StyleSheet, View } from "react-native";
-
-import { resolveNativeAppearance, type NativeAppearance, type ThemeAppearance, type ThemePalette, type ThemeTexture } from "./appearance";
-
-interface NativeAppearanceContextValue {
-  readonly appearance: NativeAppearance;
-  readonly setPalette: (palette: ThemePalette) => void;
-  readonly setTexture: (texture: ThemeTexture) => void;
-}
-
-const NativeAppearanceContext = createContext<NativeAppearanceContextValue | null>(null);
-
-interface NativeAppearanceProviderProps extends PropsWithChildren {
-  readonly initialAppearance?: Partial<ThemeAppearance>;
-}
-
-export function NativeAppearanceProvider({ children, initialAppearance }: NativeAppearanceProviderProps): React.JSX.Element {
-  const [selection, setSelection] = useState<ThemeAppearance>({ palette: initialAppearance?.palette ?? "light", texture: initialAppearance?.texture ?? "none" });
-  useEffect(() => {
-    if (initialAppearance?.palette === undefined && initialAppearance?.texture === undefined) return;
-    setSelection((current) => {
-      const next = {
-        palette: initialAppearance?.palette ?? current.palette,
-        texture: initialAppearance?.texture ?? current.texture,
-      } satisfies ThemeAppearance;
-      return next.palette === current.palette && next.texture === current.texture ? current : next;
-    });
-  }, [initialAppearance?.palette, initialAppearance?.texture]);
-  const appearance = useMemo(() => resolveNativeAppearance(selection), [selection]);
-
-  const updateSelection = useCallback((next: ThemeAppearance) => {
-    setSelection(next);
-  }, []);
-
-  const value = useMemo<NativeAppearanceContextValue>(
-    () => ({
-      appearance,
-      setPalette: (palette) => updateSelection({ ...selection, palette }),
-      setTexture: (texture) => updateSelection({ ...selection, texture }),
-    }),
-    [appearance, selection, updateSelection],
-  );
-
-  return <NativeAppearanceContext.Provider value={value}>{children}</NativeAppearanceContext.Provider>;
-}
-
-export function useNativeAppearance(): NativeAppearanceContextValue {
-  const value = useContext(NativeAppearanceContext);
-  if (!value) throw new Error("useNativeAppearance must be used inside NativeAppearanceProvider");
-  return value;
-}
-
-export function NativeTextureOverlay(): React.JSX.Element | null {
-  const { appearance } = useNativeAppearance();
-  const descriptor = appearance.textureDescriptor;
-  if (descriptor.kind === "none") return null;
-
-  const marks = descriptor.kind === "paper-grain" ? 44 : 26;
-  return (
-    <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" pointerEvents="none" style={[StyleSheet.absoluteFill, styles.overlay, { opacity: descriptor.opacity }]}>
-      {Array.from({ length: marks }, (_, index) => {
-        const size = descriptor.kind === "paper-grain" ? 1 + (index % 2) : 1;
-        return <View key={index} style={[styles.mark, descriptor.kind === "slate" && styles.slateMark, { backgroundColor: appearance.tokens.text, height: size, left: `${(index * 37) % 97}%`, top: `${(index * 53) % 96}%`, width: descriptor.kind === "slate" ? 38 : size }]} />;
-      })}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  overlay: { overflow: "hidden" },
-  mark: { borderRadius: 2, position: "absolute" },
-  slateMark: { opacity: 0.48, transform: [{ rotate: "7deg" }] },
-});

package/src/ui/native-theme.tsx

@@ -1,54 +0,0 @@
-import { createContext, useContext, useMemo, type ReactNode } from "react";
-
-import type { NativeAppearance } from "./appearance";
-import { createNativeTheme, Theme, type NativeColorScheme, type NativeTheme } from "./theme";
-import { DEFAULT_CHALK_THEME_TOKENS, LIGHT_CHALK_THEME_TOKENS, type ChalkThemeTokenValues } from "./theme-tokens";
-
-export interface NativeThemeInput {
-  readonly colorScheme?: NativeColorScheme;
-  readonly accent?: string;
-  readonly tokens?: Partial<ChalkThemeTokenValues>;
-}
-
-const NativeThemeContext = createContext<NativeTheme>(Theme);
-
-export function resolveNativeTheme(input?: NativeThemeInput, appearance?: NativeAppearance): NativeTheme {
-  const colorScheme = input?.colorScheme ?? appearance?.mode ?? "dark";
-  const base = appearance ? themeTokensFromAppearance(appearance) : colorScheme === "light" ? LIGHT_CHALK_THEME_TOKENS : DEFAULT_CHALK_THEME_TOKENS;
-  const accent = input?.accent;
-  return createNativeTheme(
-    {
-      ...base,
-      ...input?.tokens,
-      ...(accent ? { accent, focus: accent } : {}),
-    },
-    colorScheme,
-  );
-}
-
-export function NativeThemeProvider({ appearance, children, theme }: { readonly appearance?: NativeAppearance; readonly children: ReactNode; readonly theme?: NativeThemeInput }): React.JSX.Element {
-  const value = useMemo(() => resolveNativeTheme(theme, appearance), [appearance, theme?.accent, theme?.colorScheme, theme?.tokens]);
-  return <NativeThemeContext.Provider value={value}>{children}</NativeThemeContext.Provider>;
-}
-
-export function useNativeTheme(): NativeTheme {
-  return useContext(NativeThemeContext);
-}
-
-function themeTokensFromAppearance(appearance: NativeAppearance): ChalkThemeTokenValues {
-  const tokens = appearance.tokens;
-  const base = appearance.mode === "light" ? LIGHT_CHALK_THEME_TOKENS : DEFAULT_CHALK_THEME_TOKENS;
-  return {
-    ...base,
-    canvas: tokens.canvas,
-    chrome: tokens.panel,
-    surface: tokens.panel,
-    stage: tokens.stage,
-    text: tokens.text,
-    mutedText: tokens.textMuted,
-    line: tokens.line,
-    focus: tokens.controlActiveLine,
-    accent: tokens.controlPrimary,
-    accentText: tokens.messageLocalText,
-  };
-}

package/src/ui/native-types.ts

@@ -1,40 +0,0 @@
-import type { ChatAttachment, ChatReadReceipt, Participant, Reaction } from "@q9labsai/chalk-client";
-
-export type Layout = "grid" | "focus" | "presentation";
-export type NativePanel = "chat" | "participants" | "whiteboard" | null;
-export type ParticipantGradientPreference = "auto" | "subtle" | "vivid" | "mono";
-
-export type NativeParticipant = Participant & {
-  readonly id: string;
-  readonly audioEnabled: boolean;
-  readonly videoEnabled: boolean;
-  readonly audioTrack: MediaStreamTrack | null;
-  readonly videoTrack: MediaStreamTrack | null;
-  readonly screenShareTrack: MediaStreamTrack | null;
-};
-
-export type NativeParticipantState = {
-  readonly participants: readonly NativeParticipant[];
-  readonly localParticipant: NativeParticipant | null;
-  readonly activeSpeaker: NativeParticipant | null;
-  readonly count: number;
-};
-
-export type NativeChatMessage = {
-  readonly id: string;
-  readonly sequence: string;
-  readonly senderId: string;
-  readonly senderName: string;
-  readonly text: string;
-  readonly content: string;
-  readonly attachments: readonly ChatAttachment[];
-  readonly readBy: readonly (ChatReadReceipt & { readonly displayName: string })[];
-  readonly timestamp: number;
-};
-
-export type NativeReaction = {
-  readonly id: string;
-  readonly emoji: Reaction;
-  readonly participantId: string;
-  readonly participantName: string;
-};

package/src/ui/participant-avatar.ts

@@ -1,47 +0,0 @@
-import type { ParticipantGradientPreference } from "./native-types";
-import { Theme } from "./theme";
-
-const palettes = Theme.avatarPalettes;
-
-export interface ParticipantColor {
-  readonly primary: string;
-  readonly gradientEnd: string;
-  readonly surface: string;
-}
-
-export const PARTICIPANT_AVATAR_PALETTE = palettes.map(([primary, , surface]) => ({ primary, surface })) as readonly { readonly primary: string; readonly surface: string }[];
-
-export function getParticipantInitials(name?: string): string {
-  const parts = (name ?? "").trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) return "?";
-  return `${parts[0]?.[0] ?? "?"}${parts[1]?.[0] ?? ""}`.toUpperCase();
-}
-
-export function getParticipantColor(seed = "guest", _preference?: ParticipantGradientPreference): ParticipantColor {
-  const palette = palettes[hashString(seed) % palettes.length] ?? palettes[0];
-  return {
-    primary: palette[0],
-    gradientEnd: palette[0],
-    surface: palette[2],
-  };
-}
-
-export function getParticipantAvatarRecipe(seed = "guest", preference?: ParticipantGradientPreference) {
-  const colors = getParticipantColor(seed, preference);
-  return {
-    colors,
-    gradientStops: [
-      { color: colors.primary, offset: "0%" },
-      { color: colors.primary, offset: "100%" },
-    ],
-    facehashColors: [colors.primary, colors.primary, colors.primary],
-  };
-}
-
-function hashString(value: string): number {
-  let hash = 0;
-  for (let index = 0; index < value.length; index += 1) {
-    hash = (hash * 31 + value.charCodeAt(index)) >>> 0;
-  }
-  return hash;
-}

package/src/ui/theme-tokens.ts

@@ -1,41 +0,0 @@
-/**
- * The one default token set shared by the public Chalk theme and native styles.
- * Components consume semantic aliases from `Theme`, never raw color literals.
- */
-export const DEFAULT_CHALK_THEME_TOKENS = {
-  canvas: "#0a0a0b",
-  chrome: "#141418",
-  surface: "#141418",
-  stage: "#101314",
-  text: "#fbffff",
-  mutedText: "#71717a",
-  line: "#1c1c1f",
-  accent: "#1bb6a6",
-  accentText: "#ffffff",
-  positive: "#22c55e",
-  danger: "#ef4444",
-  dangerSurface: "#7f1d1d",
-  focus: "#1bb6a6",
-  shadow: "#000000",
-} as const;
-
-/** Light-mode defaults for the same public token contract. */
-export const LIGHT_CHALK_THEME_TOKENS: ChalkThemeTokenValues = {
-  canvas: "#f8fafc",
-  chrome: "#ffffff",
-  surface: "#f1f5f9",
-  stage: "#e2e8f0",
-  text: "#0f172a",
-  mutedText: "#475569",
-  line: "#cbd5e1",
-  accent: "#0f766e",
-  accentText: "#ffffff",
-  positive: "#15803d",
-  danger: "#b91c1c",
-  dangerSurface: "#fee2e2",
-  focus: "#0f766e",
-  shadow: "#0f172a",
-};
-
-export type ChalkThemeTokenName = keyof typeof DEFAULT_CHALK_THEME_TOKENS;
-export type ChalkThemeTokenValues = Readonly<Record<ChalkThemeTokenName, string>>;

package/src/ui/theme.ts

@@ -1,214 +0,0 @@
-import { DEFAULT_CHALK_THEME_TOKENS, type ChalkThemeTokenValues } from "./theme-tokens";
-
-const tokens = DEFAULT_CHALK_THEME_TOKENS;
-
-export type NativeColorScheme = "dark" | "light";
-
-export function createNativeTheme(themeTokens: ChalkThemeTokenValues = tokens, colorScheme: NativeColorScheme = "dark") {
-  const tokens = themeTokens;
-
-  return {
-    colorScheme,
-    colors: {
-      // Stable aliases keep the progressive native surfaces on the same
-      // light/dark token set as the canonical Space renderer.
-      paper: tokens.canvas,
-      paper2: tokens.chrome,
-      surfaceMuted: tokens.surface,
-      ink: tokens.text,
-      ink2: tokens.mutedText,
-      ink3: tokens.mutedText,
-      inkSecondary: tokens.mutedText,
-      inkTertiary: tokens.mutedText,
-      line: tokens.line,
-      lineStrong: tokens.line,
-      chalkGreen: tokens.positive,
-      washGreen: tokens.chrome,
-      chalkYellow: tokens.accent,
-      washYellow: tokens.chrome,
-      chalkBlue: tokens.accent,
-      washBlue: tokens.chrome,
-      chalkPink: tokens.danger,
-      washPink: tokens.dangerSurface,
-      successBackground: tokens.chrome,
-      warningBackground: tokens.chrome,
-      information: tokens.accent,
-      informationBackground: tokens.chrome,
-      dangerBackground: tokens.dangerSurface,
-      background: tokens.canvas,
-      foreground: tokens.text,
-      card: tokens.chrome,
-      cardForeground: tokens.text,
-      surface: tokens.surface,
-      popover: tokens.surface,
-      popoverForeground: tokens.text,
-      primary: tokens.accent,
-      primaryForeground: tokens.accentText,
-      secondary: tokens.chrome,
-      secondaryForeground: tokens.text,
-      muted: tokens.chrome,
-      mutedForeground: tokens.mutedText,
-      accent: tokens.chrome,
-      accentForeground: tokens.text,
-      destructive: tokens.dangerSurface,
-      destructiveForeground: tokens.danger,
-      border: tokens.line,
-      input: tokens.line,
-      ring: tokens.focus,
-      success: tokens.positive,
-      danger: tokens.danger,
-      error: tokens.danger,
-      stageBackground: tokens.stage,
-      stageAccent: tokens.positive,
-      tileBackground: tokens.chrome,
-      controlsBackground: tokens.chrome,
-      glassSurface: tokens.surface,
-      transparent: "transparent",
-      onDark: tokens.text,
-      darkCanvas: tokens.canvas,
-      raisedSurface: tokens.chrome,
-      insetSurface: tokens.surface,
-      elevatedSurface: tokens.chrome,
-      nearDarkSurface: tokens.stage,
-      lightSurface: tokens.chrome,
-      lightText: tokens.text,
-      lightMutedText: tokens.mutedText,
-      lightSubtleText: tokens.mutedText,
-      info: tokens.accent,
-      dangerStrong: tokens.danger,
-      warning: tokens.positive,
-      placeholder: tokens.mutedText,
-      brandTeal: tokens.accent,
-      brandCyan: tokens.accent,
-      statusOffline: tokens.mutedText,
-      speakingAccent: tokens.positive,
-      whiteOverlay04: "rgba(255,255,255,0.04)",
-      whiteOverlay05: "rgba(255,255,255,0.05)",
-      whiteOverlay06: "rgba(255,255,255,0.06)",
-      whiteOverlay08: "rgba(255,255,255,0.08)",
-      whiteOverlay10: "rgba(255,255,255,0.1)",
-      whiteOverlay12: "rgba(255,255,255,0.12)",
-      whiteOverlay16: "rgba(255,255,255,0.16)",
-      whiteOverlay20: "rgba(255,255,255,0.2)",
-      whiteOverlay25: "rgba(255,255,255,0.25)",
-      whiteOverlay40: "rgba(255,255,255,0.4)",
-      whiteOverlay50: "rgba(255,255,255,0.5)",
-      whiteOverlay60: "rgba(255,255,255,0.6)",
-      whiteOverlay68: "rgba(255,255,255,0.68)",
-      whiteOverlay72: "rgba(255,255,255,0.72)",
-      darkOverlay16: "rgba(0,0,0,0.16)",
-      darkOverlay22: "rgba(12,14,18,0.22)",
-      darkOverlay30: "rgba(0,0,0,0.3)",
-      darkOverlay40: "rgba(0,0,0,0.4)",
-      darkOverlay45: "rgba(0,0,0,0.45)",
-      darkOverlay50: "rgba(0,0,0,0.5)",
-      darkOverlay55: "rgba(0,0,0,0.55)",
-      canvasOverlay85: "rgba(10,10,10,0.85)",
-      chromeOverlay82: "rgba(10,10,12,0.82)",
-      accentOverlay04: "rgba(27,182,166,0.04)",
-      dangerSurfaceOverlay94: "rgba(127,29,29,0.94)",
-    },
-    avatarPalettes: [
-      ["#14b8a6", "#0f766e", "#99f6e4"],
-      ["#f59e0b", "#b45309", "#fde68a"],
-      ["#ec4899", "#be185d", "#fbcfe8"],
-      ["#8b5cf6", "#6d28d9", "#ddd6fe"],
-      ["#06b6d4", "#0e7490", "#cffafe"],
-      ["#22c55e", "#15803d", "#bbf7d0"],
-    ] as const,
-    logo: {
-      arc: "#7EC8E3",
-      mint: "#A8D5A2",
-      mintDark: "#8BC585",
-      gold: "#F5D76E",
-      goldDark: "#E8C85A",
-      sky: "#7EC8E3",
-      skyDark: "#5FB8D9",
-      coral: "#F0A0A0",
-      coralDark: "#E88888",
-    },
-    radius: {
-      xs: 4,
-      sm: 8,
-      md: 10,
-      lg: 12,
-      xl: 16,
-      "2xl": 24,
-      full: 9999,
-    },
-    spacing: {
-      xs: 4,
-      sm: 8,
-      md: 12,
-      lg: 16,
-      xl: 20,
-      "2xl": 24,
-      "3xl": 32,
-      "4xl": 40,
-      "5xl": 48,
-      "6xl": 64,
-    },
-    typography: {
-      eyebrow: {
-        fontSize: 12,
-        fontWeight: "700" as const,
-        textTransform: "uppercase" as const,
-        letterSpacing: 1.2,
-      },
-      title: {
-        fontSize: 32,
-        fontWeight: "800" as const,
-        lineHeight: 40,
-      },
-      heading: {
-        fontSize: 22,
-        fontWeight: "700" as const,
-        lineHeight: 28,
-      },
-      subheading: {
-        fontSize: 18,
-        fontWeight: "700" as const,
-        lineHeight: 24,
-      },
-      body: {
-        fontSize: 15,
-        lineHeight: 22,
-      },
-      label: {
-        fontSize: 14,
-        fontWeight: "600" as const,
-      },
-      meta: {
-        fontSize: 13,
-        lineHeight: 18,
-      },
-    },
-    shadows: {
-      sm: {
-        shadowColor: tokens.shadow,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.1,
-        shadowRadius: 2,
-        elevation: 2,
-      },
-      md: {
-        shadowColor: tokens.shadow,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.2,
-        shadowRadius: 8,
-        elevation: 4,
-      },
-      lg: {
-        shadowColor: tokens.shadow,
-        shadowOffset: { width: 0, height: 12 },
-        shadowOpacity: 0.3,
-        shadowRadius: 24,
-        elevation: 8,
-      },
-    },
-  };
-}
-
-export type NativeTheme = ReturnType<typeof createNativeTheme>;
-
-export const Theme = createNativeTheme();

package/src/utils/native-space-layout.ts

@@ -1,135 +0,0 @@
-import type { NativeParticipantState } from "../ui/native-types";
-
-type SpaceParticipant = NativeParticipantState["participants"][number];
-
-export const NATIVE_COMPACT_VIEWPORT_MAX_WIDTH = 768;
-export const NATIVE_COMPACT_GRID_PAGE_SIZE = 4;
-
-export type SpacePrimaryContent = "grid" | "screen-share" | "screen-share-placeholder" | "whiteboard" | "split";
-
-export interface NativeScreenShareStateLike {
-  isActive: boolean;
-  isLocalSharing: boolean;
-  sharerParticipantId: string | null;
-  videoTrack: MediaStreamTrack | null;
-}
-
-export interface ResolveNativeSpaceLayoutOptions {
-  participants: readonly SpaceParticipant[];
-  localParticipant: SpaceParticipant | null;
-  screenShare: NativeScreenShareStateLike;
-  isWhiteboardOpen: boolean;
-  isCompactViewport: boolean;
-}
-
-export interface ResolvedNativeSpaceLayout {
-  allParticipants: readonly SpaceParticipant[];
-  gridPages: readonly (readonly SpaceParticipant[])[];
-  primaryContent: SpacePrimaryContent;
-  isStageMode: boolean;
-  isSplit: boolean;
-  showScreenShare: boolean;
-  isCompactViewport: boolean;
-  screenSharer: SpaceParticipant | null;
-  screenShareTrack: MediaStreamTrack | null;
-  isLocalScreenShare: boolean;
-}
-
-function isSameParticipant(a: SpaceParticipant | null, b: SpaceParticipant | null): boolean {
-  return Boolean(a && b && a.id === b.id);
-}
-
-export function isRenderableTrack(track: MediaStreamTrack | null | undefined): track is MediaStreamTrack {
-  if (!track) {
-    return false;
-  }
-
-  const readyState = "readyState" in track ? track.readyState : undefined;
-  return readyState == null || readyState === "live";
-}
-
-export function normalizeStageParticipants(participants: readonly SpaceParticipant[], localParticipant: SpaceParticipant | null): SpaceParticipant[] {
-  const seen = new Set<string>();
-  const normalized: SpaceParticipant[] = [];
-
-  if (localParticipant) {
-    normalized.push(localParticipant);
-    seen.add(localParticipant.id);
-  }
-
-  for (const participant of participants) {
-    if (seen.has(participant.id)) {
-      continue;
-    }
-
-    normalized.push(participant);
-    seen.add(participant.id);
-  }
-
-  return normalized;
-}
-
-export function buildCompactParticipantPages(participants: readonly SpaceParticipant[], pageSize = NATIVE_COMPACT_GRID_PAGE_SIZE): SpaceParticipant[][] {
-  if (participants.length === 0) {
-    return [];
-  }
-
-  const pages: SpaceParticipant[][] = [];
-  for (let index = 0; index < participants.length; index += pageSize) {
-    pages.push(participants.slice(index, index + pageSize));
-  }
-  return pages;
-}
-
-export function resolveScreenShareSource(
-  participants: readonly SpaceParticipant[],
-  localParticipant: SpaceParticipant | null,
-  screenShare: NativeScreenShareStateLike,
-): {
-  screenSharer: SpaceParticipant | null;
-  screenShareTrack: MediaStreamTrack | null;
-  isLocalScreenShare: boolean;
-  showScreenShare: boolean;
-} {
-  const sharerById = screenShare.sharerParticipantId ? (participants.find((participant) => participant.id === screenShare.sharerParticipantId) ?? (localParticipant?.id === screenShare.sharerParticipantId ? localParticipant : null)) : null;
-  const localIsSharer = screenShare.isLocalSharing || isSameParticipant(sharerById, localParticipant);
-  const fallbackTrack = sharerById?.screenShareTrack ?? null;
-  const screenShareTrack = isRenderableTrack(screenShare.videoTrack) ? screenShare.videoTrack : isRenderableTrack(fallbackTrack) ? fallbackTrack : null;
-  const screenSharer = sharerById ?? (localIsSharer ? localParticipant : null);
-
-  return {
-    screenSharer,
-    screenShareTrack,
-    isLocalScreenShare: Boolean(localIsSharer && screenShareTrack),
-    showScreenShare: Boolean(screenShare.isActive && screenShareTrack),
-  };
-}
-
-export function resolveNativeSpaceLayout({ participants, localParticipant, screenShare, isWhiteboardOpen, isCompactViewport }: ResolveNativeSpaceLayoutOptions): ResolvedNativeSpaceLayout {
-  const allParticipants = normalizeStageParticipants(participants, localParticipant);
-  const gridPages = buildCompactParticipantPages(allParticipants);
-  const { screenSharer, screenShareTrack, isLocalScreenShare, showScreenShare } = resolveScreenShareSource(participants, localParticipant, screenShare);
-  const isSplit = !isCompactViewport && isWhiteboardOpen && showScreenShare;
-
-  let primaryContent: SpacePrimaryContent = "grid";
-  if (isSplit) {
-    primaryContent = "split";
-  } else if (isWhiteboardOpen) {
-    primaryContent = "whiteboard";
-  } else if (showScreenShare) {
-    primaryContent = isLocalScreenShare ? "screen-share-placeholder" : "screen-share";
-  }
-
-  return {
-    allParticipants,
-    gridPages,
-    primaryContent,
-    isStageMode: primaryContent !== "grid",
-    isSplit,
-    showScreenShare,
-    isCompactViewport,
-    screenSharer,
-    screenShareTrack,
-    isLocalScreenShare,
-  };
-}