@q9labsai/chalk-react-native 4.1.11 → 4.1.13

package/dist/{chunk-LZ67SXGB.js → chunk-MK6OO4V7.js}

@@ -362,6 +362,7 @@ function createMediaClient(apiBaseURL, input, fetch, observePeerConnection, jour
     });
     return createRTKConnectionMediaClient(client2);
   }
+  const replaceMediaConnection = input.replaceMediaConnection;
   const client = new CloudflareSFUClient({
     bootstrap: input.access.media.clientPayload,
     participantId: subject.participantId,
@@ -374,6 +375,11 @@ function createMediaClient(apiBaseURL, input, fetch, observePeerConnection, jour
       participantId: subject.participantId,
       fetch
     }),
+    replaceMediaConnection: replaceMediaConnection ? async () => {
+      const replacement = await replaceMediaConnection();
+      if (replacement.provider !== "cloudflare_sfu") throw new TypeError("The Cloudflare SFU adapter requires a Cloudflare SFU access grant");
+      return replacement.clientPayload;
+    } : void 0,
     peerConnectionFactory: (configuration) => {
       const connection = new RTCPeerConnection(configuration);
       observePeerConnection?.(connection);

package/dist/client.js

@@ -1,6 +1,6 @@
 import {
   createNativeSpaceClient
-} from "./chunk-LZ67SXGB.js";
+} from "./chunk-MK6OO4V7.js";
 export {
   createNativeSpaceClient
 };

package/dist/components/Entrance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Entrance.d.ts","sourceRoot":"","sources":["../../src/components/Entrance.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE,CAAC;AAEF,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAczJ"}
+{"version":3,"file":"Entrance.d.ts","sourceRoot":"","sources":["../../src/components/Entrance.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE,CAAC;AAEF,gFAAgF;AAChF,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAczJ"}

package/dist/components/logo/Logo.d.ts

@@ -0,0 +1,11 @@
+export type LogoMotion = "orbit-burst" | "none";
+export type LogoVariant = "mark" | "wordmark";
+export interface LogoProps {
+    readonly accessibilityLabel?: string | null;
+    readonly color?: string;
+    readonly height?: number;
+    readonly motion?: LogoMotion;
+    readonly variant?: LogoVariant;
+}
+export declare function Logo({ accessibilityLabel, color, height, motion, variant }: LogoProps): React.JSX.Element;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/components/logo/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/components/logo/Logo.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,MAAM,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;CAChC;AAoLD,wBAAgB,IAAI,CAAC,EAAE,kBAA4B,EAAE,KAAqB,EAAE,MAAuB,EAAE,MAAuB,EAAE,OAAyB,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiHvL"}

package/dist/components/native-space-view/SpaceTopBar.android.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpaceTopBar.android.d.ts","sourceRoot":"","sources":["../../../src/components/native-space-view/SpaceTopBar.android.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoBnI;AAED,OAAO,EAAE,kBAAkB,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SpaceTopBar.android.d.ts","sourceRoot":"","sources":["../../../src/components/native-space-view/SpaceTopBar.android.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoBnI;AAED,OAAO,EAAE,kBAAkB,IAAI,WAAW,EAAE,CAAC"}

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { Chalk } from "./components/Chalk";
 export type { ChalkFeatures, ChalkProps, ChalkTheme, ChalkThemeTokens, SpaceLayout } from "./components/Chalk";
 export { Entrance } from "./components/Entrance";
 export type { EntranceProps, EntranceSettings } from "./components/Entrance";
+export { Logo } from "./components/logo/Logo";
+export type { LogoMotion, LogoProps, LogoVariant } from "./components/logo/Logo";
 export { ChalkProvider, useSpaceClient } from "./context/space-client-context";
 export type { ChalkProviderProps } from "./context/space-client-context";
 export { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useSelf, useWhiteboard } from "./hooks/space-hooks";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC/E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACtI,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAC3G,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC5H,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC/E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACtI,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAC3G,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC5H,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -2,6 +2,7 @@ import {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   buildChalkInviteLink,
   useCan,
   useChat,
@@ -12,7 +13,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-MMBE2BVK.js";
+} from "./chunk-4NLA35HE.js";
 import {
   THEME_PALETTES,
   THEME_TEXTURES,
@@ -24,7 +25,7 @@ import {
   Theme,
   createNativeTheme
 } from "./chunk-JB4LNWVP.js";
-import "./chunk-LZ67SXGB.js";
+import "./chunk-MK6OO4V7.js";
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
@@ -34,6 +35,7 @@ export {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   THEME_PALETTES,
   THEME_TEXTURES,
   Theme,

package/dist/ios-pad.js

@@ -2,6 +2,7 @@ import {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   buildChalkInviteLink,
   useCan,
   useChat,
@@ -12,7 +13,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-MMBE2BVK.js";
+} from "./chunk-4NLA35HE.js";
 import {
   THEME_PALETTES,
   THEME_TEXTURES,
@@ -24,7 +25,7 @@ import {
   Theme,
   createNativeTheme
 } from "./chunk-JB4LNWVP.js";
-import "./chunk-LZ67SXGB.js";
+import "./chunk-MK6OO4V7.js";
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
@@ -34,6 +35,7 @@ export {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   THEME_PALETTES,
   THEME_TEXTURES,
   Theme,

package/dist/ios-phone.js

@@ -2,6 +2,7 @@ import {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   buildChalkInviteLink,
   useCan,
   useChat,
@@ -12,7 +13,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-MMBE2BVK.js";
+} from "./chunk-4NLA35HE.js";
 import {
   THEME_PALETTES,
   THEME_TEXTURES,
@@ -24,7 +25,7 @@ import {
   Theme,
   createNativeTheme
 } from "./chunk-JB4LNWVP.js";
-import "./chunk-LZ67SXGB.js";
+import "./chunk-MK6OO4V7.js";
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
@@ -34,6 +35,7 @@ export {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   THEME_PALETTES,
   THEME_TEXTURES,
   Theme,

package/dist/ios.js

@@ -2,6 +2,7 @@ import {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   buildChalkInviteLink,
   useCan,
   useChat,
@@ -12,7 +13,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-MMBE2BVK.js";
+} from "./chunk-4NLA35HE.js";
 import {
   THEME_PALETTES,
   THEME_TEXTURES,
@@ -24,7 +25,7 @@ import {
   Theme,
   createNativeTheme
 } from "./chunk-JB4LNWVP.js";
-import "./chunk-LZ67SXGB.js";
+import "./chunk-MK6OO4V7.js";
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
@@ -34,6 +35,7 @@ export {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   THEME_PALETTES,
   THEME_TEXTURES,
   Theme,

package/dist/macos.js

@@ -2,6 +2,7 @@ import {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   buildChalkInviteLink,
   useCan,
   useChat,
@@ -12,7 +13,7 @@ import {
   useSelf,
   useSpaceClient,
   useWhiteboard
-} from "./chunk-MMBE2BVK.js";
+} from "./chunk-4NLA35HE.js";
 import {
   THEME_PALETTES,
   THEME_TEXTURES,
@@ -24,7 +25,7 @@ import {
   Theme,
   createNativeTheme
 } from "./chunk-JB4LNWVP.js";
-import "./chunk-LZ67SXGB.js";
+import "./chunk-MK6OO4V7.js";
 import {
   extractSpaceInviteFromLink,
   getClipboardInviteSuggestion,
@@ -34,6 +35,7 @@ export {
   Chalk,
   ChalkProvider,
   Entrance,
+  Logo,
   THEME_PALETTES,
   THEME_TEXTURES,
   Theme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react-native",
-  "version": "4.1.11",
+  "version": "4.1.13",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -150,9 +150,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@q9labsai/chalk-client": "^4.1.11",
-    "@q9labsai/chalk-whiteboard": "^4.1.11",
-    "@q9labsai/facehash": "^4.1.11"
+    "@q9labsai/chalk-client": "^4.1.13",
+    "@q9labsai/chalk-whiteboard": "^4.1.13",
+    "@q9labsai/facehash": "^4.1.13"
   },
   "devDependencies": {
     "@types/node": "^26.2.0",

package/src/callkit/callkit.test.ts

@@ -2,23 +2,17 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const addListener = vi.fn();
 const configure = vi.fn(async () => ({ isSupported: true }));
-const endAllCalls = vi.fn(async () => undefined);
 const endCall = vi.fn(async () => undefined);
 const reportConnected = vi.fn(async () => undefined);
-const reportIncomingCall = vi.fn(async () => ({ callUUID: "incoming-uuid" }));
 const startCall = vi.fn(async () => ({ callUUID: "outgoing-uuid" }));
-const updateCall = vi.fn(async () => undefined);
 
 const nativeModule = {
   configure,
-  endAllCalls,
   endCall,
   eventName: "ChalkCallKitEvent",
   isSupported: true,
   reportConnected,
-  reportIncomingCall,
   startCall,
-  updateCall,
 };
 
 const eventEmitter = {
@@ -45,12 +39,9 @@ describe("callKit", () => {
     nativeModule.isSupported = true;
     addListener.mockReset();
     configure.mockClear();
-    endAllCalls.mockClear();
     endCall.mockClear();
     reportConnected.mockClear();
-    reportIncomingCall.mockClear();
     startCall.mockClear();
-    updateCall.mockClear();
   });
 
   it("uses the native event emitter when the iOS module is available", async () => {
@@ -79,17 +70,28 @@ describe("callKit", () => {
     expect(startCall).not.toHaveBeenCalled();
   });
 
-  it("passes configuration through to the native bridge", async () => {
+  it("forwards controller-facing calls and preserves native failures", async () => {
     const { callKit } = await import("./callkit");
+    const callOptions = { callUUID: "call-uuid", displayName: "Space", handle: "space-123", hasVideo: true };
 
     await callKit.configure({
       appName: "Chalk",
       includesCallsInRecents: false,
     });
+    await expect(callKit.startCall(callOptions)).resolves.toEqual({ callUUID: "outgoing-uuid" });
+    await callKit.reportConnected({ callUUID: "outgoing-uuid" });
+    await callKit.endCall({ callUUID: "outgoing-uuid", reason: "remoteEnded" });
 
     expect(configure).toHaveBeenCalledWith({
       appName: "Chalk",
       includesCallsInRecents: false,
     });
+    expect(startCall).toHaveBeenCalledWith(callOptions);
+    expect(reportConnected).toHaveBeenCalledWith({ callUUID: "outgoing-uuid" });
+    expect(endCall).toHaveBeenCalledWith({ callUUID: "outgoing-uuid", reason: "remoteEnded" });
+
+    const nativeFailure = new Error("CallKit unavailable");
+    startCall.mockRejectedValueOnce(nativeFailure);
+    await expect(callKit.startCall(callOptions)).rejects.toBe(nativeFailure);
   });
 });

package/src/components/Entrance.tsx

@@ -1,5 +1,6 @@
 import { EntranceView } from "./EntranceView";
 import { Image } from "react-native";
+import { Logo } from "./logo/Logo";
 
 export type EntranceDefaults = {
   readonly microphone?: boolean;
@@ -31,7 +32,7 @@ export function Entrance({ spaceName, logoUrl, defaultDisplayName, defaults, err
       initialAudioEnabled={defaults?.microphone ?? true}
       initialVideoEnabled={defaults?.camera ?? true}
       joinDisabled={joining}
-      logo={logoUrl ? <Image accessibilityLabel="Chalk" source={{ uri: logoUrl }} style={{ height: 32, width: 120 }} /> : undefined}
+      logo={logoUrl ? <Image accessibilityLabel="Chalk" source={{ uri: logoUrl }} style={{ height: 32, width: 120 }} /> : <Logo height={32} variant="wordmark" />}
       onCancel={onCancel}
       onJoin={({ displayName, microphoneEnabled, cameraEnabled }) => void onJoin({ displayName, microphone: microphoneEnabled, camera: cameraEnabled })}
       spaceName={spaceName}

package/src/components/logo/Logo.tsx

@@ -0,0 +1,309 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { AccessibilityInfo, Animated, Pressable } from "react-native";
+import Svg, { Defs, Ellipse, G, LinearGradient, Path, Stop, Text as SvgText } from "react-native-svg";
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+
+export type LogoMotion = "orbit-burst" | "none";
+export type LogoVariant = "mark" | "wordmark";
+
+export interface LogoProps {
+  readonly accessibilityLabel?: string | null;
+  readonly color?: string;
+  readonly height?: number;
+  readonly motion?: LogoMotion;
+  readonly variant?: LogoVariant;
+}
+
+interface InteractionState {
+  readonly focus: boolean;
+  readonly hover: boolean;
+  readonly press: boolean;
+}
+
+interface StickAnimationValues {
+  readonly rotation: Animated.Value;
+  readonly scaleX: Animated.Value;
+  readonly scaleY: Animated.Value;
+  readonly translateX: Animated.Value;
+  readonly translateY: Animated.Value;
+}
+
+type StickAnimationValuesTuple = readonly [StickAnimationValues, StickAnimationValues, StickAnimationValues, StickAnimationValues];
+
+interface StickMotion {
+  readonly burstRotation: number;
+  readonly burstScale: number;
+  readonly burstSettleRotation: number;
+  readonly burstSettleScale: number;
+  readonly burstSettleX: number;
+  readonly burstSettleY: number;
+  readonly burstX: number;
+  readonly burstY: number;
+  readonly orbitRotation: readonly [number, number, number, number];
+  readonly orbitX: readonly [number, number, number, number];
+  readonly orbitY: readonly [number, number, number, number];
+  readonly originX: number;
+  readonly originY: number;
+  readonly transform: string;
+}
+
+const STICK_MOTIONS: readonly [StickMotion, StickMotion, StickMotion, StickMotion] = [
+  {
+    transform: "rotate(-15 20 60)",
+    originX: 15,
+    originY: 42,
+    orbitRotation: [0, -5, 0, 0],
+    orbitX: [0, -4, 0, 0],
+    orbitY: [0, 3, 0, 0],
+    burstRotation: -8,
+    burstScale: 1.14,
+    burstSettleRotation: 2,
+    burstSettleScale: 0.98,
+    burstSettleX: -2,
+    burstSettleY: 2,
+    burstX: -14,
+    burstY: -9,
+  },
+  {
+    transform: "rotate(-8 32 55)",
+    originX: 29,
+    originY: 38,
+    orbitRotation: [0, 4, 0, 0],
+    orbitX: [0, 3, 0, 0],
+    orbitY: [0, -4, 0, 0],
+    burstRotation: -4,
+    burstScale: 1.14,
+    burstSettleRotation: 1,
+    burstSettleScale: 0.98,
+    burstSettleX: 1,
+    burstSettleY: 1,
+    burstX: -4,
+    burstY: -14,
+  },
+  {
+    transform: "rotate(12 60 30)",
+    originX: 42,
+    originY: 32,
+    orbitRotation: [0, 5, 0, 0],
+    orbitX: [0, 5, 0, 0],
+    orbitY: [0, 2, 0, 0],
+    burstRotation: 8,
+    burstScale: 1.16,
+    burstSettleRotation: -2,
+    burstSettleScale: 0.98,
+    burstSettleX: 2,
+    burstSettleY: 1,
+    burstX: 14,
+    burstY: -6,
+  },
+  {
+    transform: "rotate(5 55 50)",
+    originX: 55,
+    originY: 50,
+    orbitRotation: [0, -4, 0, 0],
+    orbitX: [0, -3, 0, 0],
+    orbitY: [0, -3, 0, 0],
+    burstRotation: 7,
+    burstScale: 1.13,
+    burstSettleRotation: -1,
+    burstSettleScale: 0.98,
+    burstSettleX: 1,
+    burstSettleY: -1,
+    burstX: 11,
+    burstY: 12,
+  },
+];
+
+const ORBIT_DURATION = 4800;
+const BURST_DURATION = 1100;
+const DEFAULT_COLOR = "#1A332B";
+const DEFAULT_HEIGHT = 32;
+const DEFAULT_MOTION: LogoMotion = "orbit-burst";
+const DEFAULT_VARIANT: LogoVariant = "wordmark";
+const WORDMARK_VIEW_BOX = "0 0 200 80";
+const MARK_VIEW_BOX = "0 0 68 80";
+
+function createStickAnimationValues(): StickAnimationValuesTuple {
+  return [
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+    { rotation: new Animated.Value(0), scaleX: new Animated.Value(1), scaleY: new Animated.Value(1), translateX: new Animated.Value(0), translateY: new Animated.Value(0) },
+  ];
+}
+
+function createOrbitAnimation(stick: StickAnimationValues, motion: StickMotion, index: number): Animated.CompositeAnimation {
+  const keyframes = [
+    Animated.parallel([
+      Animated.timing(stick.rotation, { duration: ORBIT_DURATION / 2, toValue: motion.orbitRotation[1], useNativeDriver: true }),
+      Animated.timing(stick.translateX, { duration: ORBIT_DURATION / 2, toValue: motion.orbitX[1], useNativeDriver: true }),
+      Animated.timing(stick.translateY, { duration: ORBIT_DURATION / 2, toValue: motion.orbitY[1], useNativeDriver: true }),
+    ]),
+    Animated.parallel([
+      Animated.timing(stick.rotation, { duration: ORBIT_DURATION / 2, toValue: motion.orbitRotation[2], useNativeDriver: true }),
+      Animated.timing(stick.translateX, { duration: ORBIT_DURATION / 2, toValue: motion.orbitX[2], useNativeDriver: true }),
+      Animated.timing(stick.translateY, { duration: ORBIT_DURATION / 2, toValue: motion.orbitY[2], useNativeDriver: true }),
+    ]),
+  ];
+
+  return Animated.sequence([Animated.delay(index * 90), Animated.loop(Animated.sequence(keyframes))]);
+}
+
+function createBurstAnimation(stick: StickAnimationValues, motion: StickMotion): Animated.CompositeAnimation {
+  return Animated.loop(
+    Animated.sequence([
+      Animated.parallel([
+        Animated.timing(stick.rotation, { duration: BURST_DURATION * 0.24, toValue: motion.burstRotation, useNativeDriver: true }),
+        Animated.timing(stick.scaleX, { duration: BURST_DURATION * 0.24, toValue: motion.burstScale, useNativeDriver: true }),
+        Animated.timing(stick.scaleY, { duration: BURST_DURATION * 0.24, toValue: motion.burstScale, useNativeDriver: true }),
+        Animated.timing(stick.translateX, { duration: BURST_DURATION * 0.24, toValue: motion.burstX, useNativeDriver: true }),
+        Animated.timing(stick.translateY, { duration: BURST_DURATION * 0.24, toValue: motion.burstY, useNativeDriver: true }),
+      ]),
+      Animated.parallel([
+        Animated.timing(stick.rotation, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleRotation, useNativeDriver: true }),
+        Animated.timing(stick.scaleX, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleScale, useNativeDriver: true }),
+        Animated.timing(stick.scaleY, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleScale, useNativeDriver: true }),
+        Animated.timing(stick.translateX, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleX, useNativeDriver: true }),
+        Animated.timing(stick.translateY, { duration: BURST_DURATION * 0.25, toValue: motion.burstSettleY, useNativeDriver: true }),
+      ]),
+      Animated.parallel([
+        Animated.timing(stick.rotation, { duration: BURST_DURATION * 0.33, toValue: 0, useNativeDriver: true }),
+        Animated.timing(stick.scaleX, { duration: BURST_DURATION * 0.33, toValue: 1, useNativeDriver: true }),
+        Animated.timing(stick.scaleY, { duration: BURST_DURATION * 0.33, toValue: 1, useNativeDriver: true }),
+        Animated.timing(stick.translateX, { duration: BURST_DURATION * 0.33, toValue: 0, useNativeDriver: true }),
+        Animated.timing(stick.translateY, { duration: BURST_DURATION * 0.33, toValue: 0, useNativeDriver: true }),
+      ]),
+    ]),
+  );
+}
+
+function resetStickAnimationValues(values: readonly StickAnimationValues[]): void {
+  for (const stick of values) {
+    stick.rotation.stopAnimation();
+    stick.scaleX.stopAnimation();
+    stick.scaleY.stopAnimation();
+    stick.translateX.stopAnimation();
+    stick.translateY.stopAnimation();
+    stick.rotation.setValue(0);
+    stick.scaleX.setValue(1);
+    stick.scaleY.setValue(1);
+    stick.translateX.setValue(0);
+    stick.translateY.setValue(0);
+  }
+}
+
+export function Logo({ accessibilityLabel = "Chalk", color = DEFAULT_COLOR, height = DEFAULT_HEIGHT, motion = DEFAULT_MOTION, variant = DEFAULT_VARIANT }: LogoProps): React.JSX.Element {
+  const [reducedMotion, setReducedMotion] = useState<boolean | null>(null);
+  const [interaction, setInteraction] = useState<InteractionState>({ focus: false, hover: false, press: false });
+  const idPrefix = `chalk-logo-${useId().replace(/[^a-zA-Z0-9_-]/gu, "")}`;
+  const animationValues = useRef<StickAnimationValuesTuple | null>(null);
+  if (animationValues.current === null) {
+    animationValues.current = createStickAnimationValues();
+  }
+
+  const sticks = animationValues.current;
+  const interactionActive = interaction.focus || interaction.hover || interaction.press;
+  const animate = motion === "orbit-burst" && reducedMotion === false;
+
+  useEffect(() => {
+    let cancelled = false;
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReducedMotion);
+
+    void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+      if (!cancelled) {
+        setReducedMotion(enabled);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      subscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!animate) {
+      resetStickAnimationValues(sticks);
+      return;
+    }
+
+    const animations = interactionActive
+      ? [createBurstAnimation(sticks[0], STICK_MOTIONS[0]), createBurstAnimation(sticks[1], STICK_MOTIONS[1]), createBurstAnimation(sticks[2], STICK_MOTIONS[2]), createBurstAnimation(sticks[3], STICK_MOTIONS[3])]
+      : [createOrbitAnimation(sticks[0], STICK_MOTIONS[0], 0), createOrbitAnimation(sticks[1], STICK_MOTIONS[1], 1), createOrbitAnimation(sticks[2], STICK_MOTIONS[2], 2), createOrbitAnimation(sticks[3], STICK_MOTIONS[3], 3)];
+    const animation = Animated.parallel(animations);
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [animate, interactionActive, sticks]);
+
+  const setInteractionFlag = (key: keyof InteractionState, value: boolean): void => {
+    setInteraction((current) => (current[key] === value ? current : { ...current, [key]: value }));
+  };
+  const width = variant === "wordmark" ? height * 2.5 : height * (68 / 80);
+  const viewBox = variant === "wordmark" ? WORDMARK_VIEW_BOX : MARK_VIEW_BOX;
+  const accessible = accessibilityLabel !== null;
+
+  return (
+    <Pressable
+      accessible={false}
+      onBlur={() => setInteractionFlag("focus", false)}
+      onFocus={() => setInteractionFlag("focus", true)}
+      onHoverIn={() => setInteractionFlag("hover", true)}
+      onHoverOut={() => setInteractionFlag("hover", false)}
+      onPressIn={() => setInteractionFlag("press", true)}
+      onPressOut={() => setInteractionFlag("press", false)}
+    >
+      <Svg accessibilityLabel={accessible ? (accessibilityLabel ?? undefined) : undefined} accessible={accessible} color={color} fill="none" focusable={false} height={height} viewBox={viewBox} width={width}>
+        <Defs>
+          <LinearGradient id={`${idPrefix}-green`} x1="0%" x2="100%" y1="0%" y2="0%">
+            <Stop offset="0%" stopColor="#C5E5C0" />
+            <Stop offset="100%" stopColor="#80B879" />
+          </LinearGradient>
+          <LinearGradient id={`${idPrefix}-yellow`} x1="0%" x2="100%" y1="0%" y2="0%">
+            <Stop offset="0%" stopColor="#FCEAB3" />
+            <Stop offset="100%" stopColor="#D9B641" />
+          </LinearGradient>
+          <LinearGradient id={`${idPrefix}-blue`} x1="0%" x2="100%" y1="0%" y2="0%">
+            <Stop offset="0%" stopColor="#B2E0F0" />
+            <Stop offset="100%" stopColor="#55AAC9" />
+          </LinearGradient>
+          <LinearGradient id={`${idPrefix}-pink`} x1="0%" x2="100%" y1="0%" y2="0%">
+            <Stop offset="0%" stopColor="#F8CACA" />
+            <Stop offset="100%" stopColor="#D67B7B" />
+          </LinearGradient>
+        </Defs>
+
+        <G transform="translate(2, 2) scale(0.95)">
+          <AnimatedG originX={STICK_MOTIONS[0].originX} originY={STICK_MOTIONS[0].originY} rotation={sticks[0].rotation} scaleX={sticks[0].scaleX} scaleY={sticks[0].scaleY} transform={STICK_MOTIONS[0].transform} translateX={sticks[0].translateX} translateY={sticks[0].translateY}>
+            <Path d="M9,20 L21,20 L22,63 A7,7 0 0 1 8,63 Z" fill={`url(#${idPrefix}-green)`} />
+            <Ellipse cx="15" cy="20" fill="#D8ECD4" rx="6" ry="2.5" />
+          </AnimatedG>
+
+          <AnimatedG originX={STICK_MOTIONS[1].originX} originY={STICK_MOTIONS[1].originY} rotation={sticks[1].rotation} scaleX={sticks[1].scaleX} scaleY={sticks[1].scaleY} transform={STICK_MOTIONS[1].transform} translateX={sticks[1].translateX} translateY={sticks[1].translateY}>
+            <Path d="M23,15 L35,15 L36,60 A7,7 0 0 1 22,60 Z" fill={`url(#${idPrefix}-yellow)`} />
+            <Ellipse cx="29" cy="15" fill="#FEF3D1" rx="6" ry="2.5" />
+          </AnimatedG>
+
+          <AnimatedG originX={STICK_MOTIONS[2].originX} originY={STICK_MOTIONS[2].originY} rotation={sticks[2].rotation} scaleX={sticks[2].scaleX} scaleY={sticks[2].scaleY} transform={STICK_MOTIONS[2].transform} translateX={sticks[2].translateX} translateY={sticks[2].translateY}>
+            <Path d="M36,8 L48,8 L49,56 A7,7 0 0 1 35,56 Z" fill={`url(#${idPrefix}-blue)`} />
+            <Ellipse cx="42" cy="8" fill="#D0EDF8" rx="6" ry="2.5" />
+          </AnimatedG>
+
+          <AnimatedG originX={STICK_MOTIONS[3].originX} originY={STICK_MOTIONS[3].originY} rotation={sticks[3].rotation} scaleX={sticks[3].scaleX} scaleY={sticks[3].scaleY} transform={STICK_MOTIONS[3].transform} translateX={sticks[3].translateX} translateY={sticks[3].translateY}>
+            <Path d="M49,70 L61,70 L62,29 A7,7 0 0 0 48,29 Z" fill={`url(#${idPrefix}-pink)`} />
+            <Ellipse cx="55" cy="70" fill="#FBE4E4" rx="6" ry="2.5" />
+          </AnimatedG>
+        </G>
+
+        {variant === "wordmark" ? (
+          <SvgText fill="currentColor" fontFamily="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" fontSize="38" fontWeight="600" letterSpacing="-0.02em" x="90" y="52">
+            chalk
+          </SvgText>
+        ) : null}
+      </Svg>
+    </Pressable>
+  );
+}