@dxos/react-ui 0.1.35 → 0.1.36

package/dist/types/src/panels/SpacePanel/SpacePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpacePanel.d.ts","sourceRoot":"","sources":["../../../../../src/panels/SpacePanel/SpacePanel.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,YAAY,EAAc,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAOrC,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,mBAAmB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,oBAAY,SAAS,GAAG,eAAe,CAAC;AAgDxC,eAAO,MAAM,UAAU,UAAW,eAAe,gBAmBhD,CAAC"}
+{"version":3,"file":"SpacePanel.d.ts","sourceRoot":"","sources":["../../../../../src/panels/SpacePanel/SpacePanel.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiC,KAAK,EAAE,MAAM,cAAc,CAAC;AAOpE,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,mBAAmB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,oBAAY,SAAS,GAAG,eAAe,CAAC;AA+DxC,eAAO,MAAM,UAAU,UAAW,eAAe,gBAmBhD,CAAC"}

package/dist/types/src/playwright/invitations-manager.d.ts

@@ -1,33 +1,24 @@
-import type { Browser, Page } from 'playwright';
-import type { InvitationsOptions } from '@dxos/client';
-import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
+import type { Browser } from 'playwright';
+import { ConnectionState, Invitation } from '@dxos/protocols/proto/dxos/client/services';
+import { ShellManager } from '../testing';
 export declare type PanelType = number | 'identity' | 'devices' | 'spaces' | 'join';
-export declare class InvitationsManager {
+export declare class InvitationsManager extends ShellManager {
     private readonly _browser;
-    page: Page;
     private _initialized;
     private _invitationCode;
-    private _authenticationCode;
+    private _authCode;
     constructor(_browser: Browser);
     init(): Promise<void>;
     getDisplayName(id: number): Promise<string | null>;
     getSpaceName(id: number, nth: number): Promise<string | null>;
-    authenticatorIsVisible(id: number, type: 'device' | 'space'): Promise<boolean>;
-    invitationFailed(id: number): Promise<boolean>;
     setConnectionState(id: number, state: ConnectionState): Promise<void>;
     openPanel(id: number, panel: PanelType): Promise<void>;
     createIdentity(id: number): Promise<void>;
     createSpace(id: number): Promise<void>;
-    createInvitation(id: number, type: 'device' | 'space', options?: InvitationsOptions): Promise<string>;
+    createInvitation(id: number, type: 'device' | 'space', options?: Partial<Invitation>): Promise<string>;
     acceptInvitation(id: number, type: 'device' | 'space', invitation: string): Promise<void>;
-    cancelInvitation(id: number, type: 'device' | 'space', kind: 'host' | 'guest'): Promise<void>;
-    invitationInputContinue(id: number, type: 'device' | 'space'): Promise<void>;
-    getAuthenticationCode(): Promise<string>;
-    authenticateInvitation(id: number, type: 'device' | 'space', authenticationCode: string): Promise<void>;
-    clearAuthenticationCode(id: number, type: 'device' | 'space'): Promise<void>;
-    resetInvitation(id: number): Promise<void>;
-    doneInvitation(id: number, type: 'device' | 'space'): Promise<void>;
-    private _peer;
+    getAuthCode(): Promise<string>;
+    peer(id: number): import("playwright").Locator;
     private _onConsoleMessage;
 }
 //# sourceMappingURL=invitations-manager.d.ts.map

package/dist/types/src/playwright/invitations-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"invitations-manager.d.ts","sourceRoot":"","sources":["../../../../src/playwright/invitations-manager.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAkB,IAAI,EAAE,MAAM,YAAY,CAAC;AAIhE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAO7E,oBAAY,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,qBAAa,kBAAkB;IAOjB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IANrC,IAAI,EAAG,IAAI,CAAC;IAEZ,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,mBAAmB,CAAyB;gBAEvB,QAAQ,EAAE,OAAO;IAExC,IAAI;IAiBJ,cAAc,CAAC,EAAE,EAAE,MAAM;IAKzB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAK1C,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO3D,gBAAgB,CAAC,EAAE,EAAE,MAAM;IAOrB,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe;IASrD,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS;IA2BtC,cAAc,CAAC,EAAE,EAAE,MAAM;IASzB,WAAW,CAAC,EAAE,EAAE,MAAM;IAItB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC;IAsBrG,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,UAAU,EAAE,MAAM;IAUzE,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO;IAO7E,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO5D,qBAAqB,IAAI,OAAO,CAAC,MAAM,CAAC;IAKxC,sBAAsB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,kBAAkB,EAAE,MAAM;IAOvF,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAO5D,eAAe,CAAC,EAAE,EAAE,MAAM;IAO1B,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IASzD,OAAO,CAAC,KAAK;YAIC,iBAAiB;CAUhC"}
+{"version":3,"file":"invitations-manager.d.ts","sourceRoot":"","sources":["../../../../src/playwright/invitations-manager.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAkB,MAAM,YAAY,CAAC;AAI1D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAM1C,oBAAY,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E,qBAAa,kBAAmB,SAAQ,YAAY;IAKtC,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAJrC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,SAAS,CAAyB;gBAEb,QAAQ,EAAE,OAAO;IAIxC,IAAI;IAiBJ,cAAc,CAAC,EAAE,EAAE,MAAM;IAKzB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAOpC,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe;IASrD,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS;IA2BtC,cAAc,CAAC,EAAE,EAAE,MAAM;IASzB,WAAW,CAAC,EAAE,EAAE,MAAM;IAItB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;IAsBtG,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,UAAU,EAAE,MAAM;IAUzE,WAAW,IAAI,OAAO,CAAC,MAAM,CAAC;IAKpC,IAAI,CAAC,EAAE,EAAE,MAAM;YAID,iBAAiB;CAUhC"}

package/dist/types/src/testing/index.d.ts

@@ -0,0 +1,2 @@
+export * from './shell-manager';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/dist/types/src/testing/shell-manager.d.ts

@@ -0,0 +1,16 @@
+import type { Locator, Page, FrameLocator } from 'playwright';
+declare type Scope = Locator | FrameLocator | Page;
+export declare class ShellManager {
+    page: Page;
+    authenticatorIsVisible(type: 'device' | 'space', scope?: Scope): Promise<boolean>;
+    invitationFailed(scope?: Scope): Promise<boolean>;
+    inputInvitation(type: 'device' | 'space', invitation: string, scope?: Scope): Promise<void>;
+    invitationInputContinue(type: 'device' | 'space', scope?: Scope): Promise<void>;
+    cancelInvitation(type: 'device' | 'space', kind: 'host' | 'guest', scope?: Scope): Promise<void>;
+    authenticateInvitation(type: 'device' | 'space', authCode: string, scope?: Scope): Promise<void>;
+    clearAuthCode(type: 'device' | 'space', scope?: Scope): Promise<void>;
+    resetInvitation(scope?: Scope): Promise<void>;
+    doneInvitation(type: 'device' | 'space', scope?: Scope): Promise<void>;
+}
+export {};
+//# sourceMappingURL=shell-manager.d.ts.map

package/dist/types/src/testing/shell-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-manager.d.ts","sourceRoot":"","sources":["../../../../src/testing/shell-manager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE9D,aAAK,KAAK,GAAG,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;AAE3C,qBAAa,YAAY;IACvB,IAAI,EAAG,IAAI,CAAC;IAEZ,sBAAsB,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK;IAI9D,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;IAIxB,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK;IAK3E,uBAAuB,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK;IAI/D,gBAAgB,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK;IAUhF,sBAAsB,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK;IAOhF,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK;IAMrD,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK;IAI7B,cAAc,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK;CAK7D"}

package/dist/types/src/util/invitationStatusValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"invitationStatusValue.d.ts","sourceRoot":"","sources":["../../../../src/util/invitationStatusValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,+BAShC,CAAC"}
+{"version":3,"file":"invitationStatusValue.d.ts","sourceRoot":"","sources":["../../../../src/util/invitationStatusValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,+BAUhC,CAAC"}

package/package.json

@@ -1,13 +1,24 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "A React component library for DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "main": "dist/lib/browser/index.mjs",
+  "exports": {
+    ".": "./dist/lib/browser/index.mjs",
+    "./testing": "./dist/lib/browser/testing/index.mjs",
+    "./theme-extensions": "./theme-extensions.js"
+  },
   "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "testing": [
+        "dist/types/src/testing/index.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "src",
@@ -25,14 +36,14 @@
     "qrcode.react": "^3.1.0",
     "url-join": "^5.0.0",
     "xstate": "^4.37.0",
-    "@dxos/client": "0.1.35",
-    "@dxos/config": "0.1.35",
-    "@dxos/debug": "0.1.35",
-    "@dxos/keys": "0.1.35",
-    "@dxos/protocols": "0.1.35",
-    "@dxos/react-client": "0.1.35",
-    "@dxos/react-components": "0.1.35",
-    "@dxos/util": "0.1.35"
+    "@dxos/client": "0.1.36",
+    "@dxos/config": "0.1.36",
+    "@dxos/debug": "0.1.36",
+    "@dxos/keys": "0.1.36",
+    "@dxos/protocols": "0.1.36",
+    "@dxos/react-client": "0.1.36",
+    "@dxos/react-components": "0.1.36",
+    "@dxos/util": "0.1.36"
   },
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
@@ -45,10 +56,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^4.2.0",
-    "@dxos/async": "0.1.35",
-    "@dxos/client-services": "0.1.35",
-    "@dxos/log": "0.1.35",
-    "@dxos/react-async": "0.1.35"
+    "@dxos/async": "0.1.36",
+    "@dxos/client-services": "0.1.36",
+    "@dxos/log": "0.1.36",
+    "@dxos/react-async": "0.1.36"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/InvitationList/InvitationList.tsx

@@ -20,8 +20,8 @@ export const InvitationList = ({ invitations, ...invitationProps }: InvitationLi
     <AccordionRoot type='single' collapsible className='flex flex-col gap-1'>
       <DensityProvider density='fine'>
         <ClipboardProvider>
-          {invitations.map((invitation, index) => {
-            const value = invitation.invitation?.invitationId ?? `inv_${index}`;
+          {invitations.map((invitation) => {
+            const value = invitation.get().invitationId;
             return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
           })}
         </ClipboardProvider>

package/src/components/InvitationList/InvitationListContainer.tsx

@@ -18,8 +18,9 @@ export const InvitationListContainer = ({ spaceKey, createInvitationUrl }: Invit
   const space = useSpace(spaceKey);
   const invitations = useSpaceInvitations(spaceKey);
   const onClickRemove = useCallback(
-    ({ invitation }: CancellableInvitationObservable) => {
-      invitation?.invitationId && space?.removeInvitation(invitation.invitationId);
+    (invitation: CancellableInvitationObservable) => {
+      const invitationId = invitation.get().invitationId;
+      invitationId && space?.removeInvitation(invitationId);
     },
     [space]
   );

package/src/components/InvitationList/InvitationListItem.tsx

@@ -30,10 +30,10 @@ export const InvitationListItem = ({
   const { t } = useTranslation('os');
   const qrLabel = useId('qrLabel');
 
-  const { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
+  const { cancel, status, haltedAt, invitationCode, authCode } = useInvitationStatus(invitation);
   const statusValue = invitationStatusValue.get(status) ?? 0;
 
-  const isCancellable = statusValue < 4 && statusValue >= 0;
+  const isCancellable = statusValue < 5 && statusValue >= 0;
   const showShare = statusValue < 3 && statusValue >= 0;
   const showAuthCode = statusValue === 3;
 
@@ -44,9 +44,7 @@ export const InvitationListItem = ({
   return (
     <AccordionPrimitive.Item value={value}>
       <AccordionPrimitive.Header className='flex gap-2 items-center'>
-        <InvitationStatusAvatar
-          {...{ status, haltedAt, size: 8, invitationId: invitation?.invitation?.invitationId }}
-        />
+        <InvitationStatusAvatar {...{ status, haltedAt, size: 8, invitationId: invitation?.get().invitationId }} />
         {showShare && invitationUrl ? (
           <>
             <AccordionPrimitive.Trigger asChild>
@@ -58,9 +56,7 @@ export const InvitationListItem = ({
             <CopyButton value={invitationUrl} />
           </>
         ) : showAuthCode ? (
-          <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>
-            {authenticationCode}
-          </p>
+          <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>{authCode}</p>
         ) : (
           <span role='none' className='grow' />
         )}

package/src/composites/JoinDialog/JoinDialog.stories.tsx

@@ -35,8 +35,8 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
       log.info('[next invitation code]', { nextInvitationCode });
       setInvitationCode(nextInvitationCode);
     }
-    if (invitation.authenticationCode) {
-      log.info('[verification code]', invitation.authenticationCode);
+    if (invitation.authCode) {
+      log.info('[verification code]', invitation.authCode);
     }
   }, []);
 
@@ -51,16 +51,7 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
     space.properties.name = 'Q3 2022 Planning';
 
     const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
-
-    invitation.subscribe({
-      onAuthenticating: onInvitationEvent,
-      onCancelled: (...args) => log.warn('[cancelled]', args),
-      onConnected: onInvitationEvent,
-      onConnecting: onInvitationEvent,
-      onError: onInvitationEvent,
-      onSuccess: onInvitationEvent,
-      onTimeout: (...args) => log.warn('[timeout]', args)
-    });
+    invitation.subscribe(onInvitationEvent, (err) => log.catch(err));
 
     return () => {
       void Promise.all(clients.map((client) => client.destroy()));

package/src/composites/Shell/Shell.tsx

@@ -47,11 +47,11 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
         <JoinDialog
           mode='halo-only'
           initialInvitationCode={invitationCode}
-          onDone={async () => {
-            // TODO(wittjosiah): Is this app-specific?
-            spaces.length > 0 || (await client.createSpace());
-            await runtime.setAppContext({ display: ShellDisplay.NONE });
+          onDone={() => {
+            void runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout(ShellLayout.DEFAULT);
+            // TODO(wittjosiah): Support this first-class inside client?
+            spaces.length > 0 || client.createSpace();
           }}
         />
       );

package/src/composites/Shell/ShellContext.tsx

@@ -62,6 +62,7 @@ export const useShell = (): {
 };
 export type ShellProviderProps = PropsWithChildren<{
   space?: Space;
+  // TODO(wittjosiah): `deviceInvitationCode`.
   haloInvitationCode?: string | null;
   spaceInvitationCode?: string | null;
   onJoinedSpace?: (spaceKey?: PublicKey) => void;
@@ -104,7 +105,7 @@ export const ShellProvider = ({
   );
 
   const shellRuntime = useMemo(() => {
-    if (client.config.get('runtime.app.env.DX_VAULT') === 'true') {
+    if (client.config.get('runtime.app.env.DX_VAULT') !== 'false') {
       return;
     }
 
@@ -115,10 +116,14 @@ export const ShellProvider = ({
       });
     }
 
-    return new MemoryShellRuntime({
-      layout: identity ? ShellLayout.DEFAULT : ShellLayout.INITIALIZE_IDENTITY,
-      invitationCode: haloInvitationCode ?? undefined
-    });
+    if (haloInvitationCode) {
+      return new MemoryShellRuntime({
+        layout: ShellLayout.INITIALIZE_IDENTITY,
+        invitationCode: haloInvitationCode
+      });
+    }
+
+    return new MemoryShellRuntime({ layout: identity ? ShellLayout.DEFAULT : ShellLayout.INITIALIZE_IDENTITY });
   }, [client, identity, spaceInvitationCode, haloInvitationCode]);
 
   const handleKeyDown = useCallback(
@@ -167,9 +172,7 @@ export const ShellProvider = ({
         </div>
       )}
 
-      <ShellContext.Provider value={{ runtime: shellRuntime, setDisplay }}>
-        {identity ? children : undefined}
-      </ShellContext.Provider>
+      <ShellContext.Provider value={{ runtime: shellRuntime, setDisplay }}>{children}</ShellContext.Provider>
     </>
   );
 };

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -64,7 +64,9 @@ const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent
       <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
         <InvitationList
           invitations={invitations}
-          onClickRemove={({ invitation }) => invitation && client.halo.removeInvitation(invitation.invitationId!)}
+          onClickRemove={(invitation) =>
+            invitation.get() && client.halo.removeInvitation(invitation.get().invitationId)
+          }
           createInvitationUrl={createInvitationUrl}
         />
         <Button

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -98,7 +98,7 @@ export const JoinPanel = ({
               active: joinState.matches({
                 choosingIdentity: { acceptingHaloInvitation: 'inputtingHaloInvitationCode' }
               }),
-              Domain: 'Halo'
+              Kind: 'Halo'
             }}
           />
           <InvitationRescuer
@@ -117,7 +117,7 @@ export const JoinPanel = ({
                   }
                 }
               ].some(joinState.matches),
-              Domain: 'Halo'
+              Kind: 'Halo'
             }}
           />
           <InvitationAuthenticator
@@ -143,7 +143,7 @@ export const JoinPanel = ({
                   }
                 }
               ].some(joinState.matches),
-              Domain: 'Halo',
+              Kind: 'Halo',
               ...(joinState.matches({
                 acceptingHaloInvitation: {
                   acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode'
@@ -163,7 +163,7 @@ export const JoinPanel = ({
                 },
                 'finishingJoiningHalo'
               ].some(joinState.matches),
-              Domain: 'Halo',
+              Kind: 'Halo',
               doneActionParent,
               onDone
             }}
@@ -187,7 +187,7 @@ export const JoinPanel = ({
               active: joinState.matches({
                 acceptingSpaceInvitation: 'inputtingSpaceInvitationCode'
               }),
-              Domain: 'Space'
+              Kind: 'Space'
             }}
           />
           <InvitationRescuer
@@ -202,7 +202,7 @@ export const JoinPanel = ({
                   acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'failingSpaceInvitation' }
                 }
               ].some(joinState.matches),
-              Domain: 'Space'
+              Kind: 'Space'
             }}
           />
           <InvitationAuthenticator
@@ -222,7 +222,7 @@ export const JoinPanel = ({
                   }
                 }
               ].some(joinState.matches),
-              Domain: 'Space',
+              Kind: 'Space',
               ...(joinState.matches({
                 acceptingSpaceInvitation: {
                   acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode'
@@ -235,7 +235,7 @@ export const JoinPanel = ({
               joinState,
               joinSend,
               active: joinState.matches('finishingJoiningSpace'),
-              Domain: 'Space',
+              Kind: 'Space',
               doneActionParent,
               onDone
             }}