@q9labsai/chalk-react-native 4.0.0

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

@@ -0,0 +1,41 @@
+// @vitest-environment happy-dom
+
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { act, renderHook } from "../test-support/test-renderer";
+
+vi.mock("react-native", () => ({
+  StyleSheet: { absoluteFill: {}, create: (styles: unknown) => styles },
+  View: ({ children }: { readonly children?: ReactNode }) => children,
+}));
+
+import { NativeAppearanceProvider, useNativeAppearance } from "./native-appearance-context";
+
+describe("NativeAppearanceProvider controlled initial appearance", () => {
+  it("updates palette and texture without replacing its child", () => {
+    let initialAppearance = { palette: "light" as const, texture: "none" as const };
+    const wrapper = ({ children }: { readonly children?: ReactNode }): React.JSX.Element => <NativeAppearanceProvider initialAppearance={initialAppearance}>{children}</NativeAppearanceProvider>;
+    const { result, rerender } = renderHook(() => useNativeAppearance(), { wrapper });
+
+    expect(result.current.appearance.palette).toBe("light");
+    expect(result.current.appearance.texture).toBe("none");
+
+    initialAppearance = { palette: "warm-porcelain", texture: "paper" };
+    rerender();
+
+    expect(result.current.appearance.palette).toBe("warm-porcelain");
+    expect(result.current.appearance.texture).toBe("paper");
+  });
+
+  it("updates appearance when controls change", () => {
+    const wrapper = ({ children }: { readonly children?: ReactNode }): React.JSX.Element => <NativeAppearanceProvider>{children}</NativeAppearanceProvider>;
+    const { result } = renderHook(() => useNativeAppearance(), { wrapper });
+
+    act(() => result.current.setPalette("warm-porcelain"));
+    act(() => result.current.setTexture("paper"));
+
+    expect(result.current.appearance.palette).toBe("warm-porcelain");
+    expect(result.current.appearance.texture).toBe("paper");
+  });
+});

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

@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./native-appearance-context.tsx", import.meta.url), "utf8");
+
+describe("NativeAppearanceProvider", () => {
+  it("resolves local selections and renders inert textures", () => {
+    expect(source).toContain("resolveNativeAppearance(selection)");
+    expect(source).toContain("setPalette:");
+    expect(source).toContain("setTexture:");
+    expect(source).toContain('pointerEvents="none"');
+    expect(source).toContain("must be used inside NativeAppearanceProvider");
+  });
+});

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

@@ -0,0 +1,74 @@
+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.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { resolveNativeAppearance } from "./appearance";
+import { resolveNativeTheme } from "./native-theme";
+
+describe("resolveNativeTheme", () => {
+  it("resolves the public color scheme, accent, and token overrides into semantic colors", () => {
+    const theme = resolveNativeTheme({
+      colorScheme: "light",
+      accent: "#7c3aed",
+      tokens: { canvas: "#fefce8", text: "#1c1917" },
+    });
+
+    expect(theme.colorScheme).toBe("light");
+    expect(theme.colors).toMatchObject({
+      background: "#fefce8",
+      foreground: "#1c1917",
+      primary: "#7c3aed",
+      ring: "#7c3aed",
+      stageBackground: "#e2e8f0",
+    });
+  });
+
+  it("projects the selected native palette into rendered theme colors", () => {
+    const appearance = resolveNativeAppearance({ palette: "warm-porcelain", texture: "paper" });
+    const theme = resolveNativeTheme(undefined, appearance);
+
+    expect(theme.colorScheme).toBe("light");
+    expect(theme.colors.background).toBe(appearance.tokens.canvas);
+    expect(theme.colors.foreground).toBe(appearance.tokens.text);
+    expect(theme.colors.stageBackground).toBe(appearance.tokens.stage);
+    expect(theme.colors.primary).toBe(appearance.tokens.controlPrimary);
+  });
+});

package/src/ui/native-theme.test.tsx

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { resolveNativeTheme } from "./native-theme";
+
+describe("resolveNativeTheme", () => {
+  it("uses dark defaults while allowing semantic token overrides", () => {
+    const theme = resolveNativeTheme({ tokens: { focus: "#f59e0b", positive: "#15803d" } });
+
+    expect(theme.colorScheme).toBe("dark");
+    expect(theme.colors.darkCanvas).toBe("#0a0a0b");
+    expect(theme.colors.ring).toBe("#f59e0b");
+    expect(theme.colors.success).toBe("#15803d");
+  });
+});

package/src/ui/native-theme.tsx

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

@@ -0,0 +1,40 @@
+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.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { getParticipantAvatarRecipe, getParticipantColor, getParticipantInitials, PARTICIPANT_AVATAR_PALETTE } from "./participant-avatar";
+
+describe("participant identity colors", () => {
+  it("chooses one approved flat identity color deterministically", () => {
+    const first = getParticipantColor("Avery Chen");
+    const second = getParticipantColor("Avery Chen");
+
+    expect(first).toEqual(second);
+    expect(PARTICIPANT_AVATAR_PALETTE.map(({ primary }) => primary)).toContain(first.primary);
+    expect(first.gradientEnd).toBe(first.primary);
+  });
+
+  it("keeps avatar recipes flat for compatibility consumers", () => {
+    const recipe = getParticipantAvatarRecipe("Avery Chen");
+
+    expect(recipe.gradientStops).toEqual([
+      { color: recipe.colors.primary, offset: "0%" },
+      { color: recipe.colors.primary, offset: "100%" },
+    ]);
+    expect(recipe.facehashColors).toEqual([recipe.colors.primary, recipe.colors.primary, recipe.colors.primary]);
+  });
+
+  it("returns one or two initials without making identity noun assumptions", () => {
+    expect(getParticipantInitials("Avery Chen")).toBe("AC");
+    expect(getParticipantInitials("Avery")).toBe("A");
+    expect(getParticipantInitials()).toBe("?");
+  });
+});

package/src/ui/participant-avatar.ts

@@ -0,0 +1,47 @@
+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.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_CHALK_THEME_TOKENS, LIGHT_CHALK_THEME_TOKENS } from "./theme-tokens";
+
+describe("Chalk theme tokens", () => {
+  it("keeps dark and light themes on the same semantic token contract", () => {
+    const tokenNames = ["canvas", "chrome", "surface", "stage", "text", "mutedText", "line", "accent", "accentText", "positive", "danger", "dangerSurface", "focus", "shadow"];
+
+    expect(Object.keys(DEFAULT_CHALK_THEME_TOKENS)).toEqual(tokenNames);
+    expect(Object.keys(LIGHT_CHALK_THEME_TOKENS)).toEqual(tokenNames);
+    expect(DEFAULT_CHALK_THEME_TOKENS.canvas).not.toBe(LIGHT_CHALK_THEME_TOKENS.canvas);
+    expect(DEFAULT_CHALK_THEME_TOKENS.accent).not.toBe(LIGHT_CHALK_THEME_TOKENS.accent);
+  });
+});

package/src/ui/theme-tokens.ts

@@ -0,0 +1,41 @@
+/**
+ * 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.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { createNativeTheme, Theme } from "./theme";
+
+describe("native theme aliases", () => {
+  it("keeps progressive surfaces on the active token set", () => {
+    expect(Theme.colors.paper).toBe(Theme.colors.background);
+    expect(Theme.colors.ink).toBe(Theme.colors.foreground);
+    expect(Theme.colors.lineStrong).toBe(Theme.colors.border);
+    expect(Theme.colors.chalkGreen).toBe(Theme.colors.success);
+  });
+
+  it("resolves the same aliases for light mode", () => {
+    const light = createNativeTheme(
+      {
+        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",
+      },
+      "light",
+    );
+    expect(light.colors.paper).toBe(light.colors.background);
+    expect(light.colors.ink).toBe(light.colors.foreground);
+    expect(light.colors.primary).toBe("#0f766e");
+  });
+});

package/src/ui/theme.ts

@@ -0,0 +1,214 @@
+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/build-chalk-invite-link.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { buildChalkInviteLink } from "./build-chalk-invite-link";
+
+describe("buildChalkInviteLink", () => {
+  it("builds a Chalk invite link with the public host", () => {
+    expect(buildChalkInviteLink("join-token-123")).toBe("https://chalkmeet.com/j/join-token-123");
+  });
+
+  it("normalizes trailing slashes on custom origins", () => {
+    expect(buildChalkInviteLink("join-token-123", "https://chalk.q9labs.ai/")).toBe("https://chalk.q9labs.ai/j/join-token-123");
+  });
+});