@dxos/react-ui 0.1.31-next.ea8f0bc → 0.1.32-next.77d513e

package/dist/types/src/panels/JoinPanel/view-states/InvitationInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvitationInput.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationInput.tsx"],"names":[],"mappings":"AAWA,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,eAAe,0CAA2C,oBAAoB,gBAyD1F,CAAC"}
+{"version":3,"file":"InvitationInput.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationInput.tsx"],"names":[],"mappings":"AASA,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,kCAAmC,oBAAoB,gBA2DlF,CAAC"}

package/dist/types/src/panels/JoinPanel/view-states/InvitationRescuer.d.ts

@@ -1,6 +1,6 @@
 import { ViewStateProps } from './ViewState';
 export interface InvitationConnectorProps extends ViewStateProps {
-    invitationType: 'space' | 'halo';
+    Domain: 'Space' | 'Halo';
 }
-export declare const InvitationRescuer: ({ invitationType, ...viewStateProps }: InvitationConnectorProps) => JSX.Element;
+export declare const InvitationRescuer: ({ Domain, ...viewStateProps }: InvitationConnectorProps) => JSX.Element;
 //# sourceMappingURL=InvitationRescuer.d.ts.map

package/dist/types/src/panels/JoinPanel/view-states/InvitationRescuer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvitationRescuer.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationRescuer.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;CAClC;AA4DD,eAAO,MAAM,iBAAiB,0CAA2C,wBAAwB,gBAsBhG,CAAC"}
+{"version":3,"file":"InvitationRescuer.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationRescuer.tsx"],"names":[],"mappings":"AAWA,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAwED,eAAO,MAAM,iBAAiB,kCAAmC,wBAAwB,gBA2BxF,CAAC"}

package/dist/types/src/panels/JoinPanel/view-states/ViewState.d.ts

@@ -1,12 +1,10 @@
 import { ComponentProps, ComponentPropsWithoutRef } from 'react';
-import type { AuthenticatingInvitationObservable, Identity } from '@dxos/client';
-import { JoinDispatch } from '../JoinPanelProps';
+import { JoinSend, JoinState } from '../joinMachine';
 export interface ViewStateProps extends ComponentProps<'div'> {
     active: boolean;
-    dispatch: JoinDispatch;
-    selectedIdentity?: true | Identity;
-    activeInvitation?: true | AuthenticatingInvitationObservable;
+    joinSend: JoinSend;
+    joinState?: JoinState;
 }
 export declare const ViewStateHeading: ({ children, className, ...props }: ComponentPropsWithoutRef<'h2'>) => JSX.Element;
-export declare const ViewState: ({ active, children, className, dispatch, selectedIdentity, activeInvitation, ...props }: ViewStateProps) => JSX.Element;
+export declare const ViewState: ({ active, children, className, joinSend, joinState, ...props }: ViewStateProps) => JSX.Element;
 //# sourceMappingURL=ViewState.d.ts.map

package/dist/types/src/panels/JoinPanel/view-states/ViewState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewState.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/ViewState.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,cAAc,EAAE,wBAAwB,EAAsB,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,kCAAkC,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOjF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC;IACvB,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACnC,gBAAgB,CAAC,EAAE,IAAI,GAAG,kCAAkC,CAAC;CAC9D;AAID,eAAO,MAAM,gBAAgB,sCAAuC,yBAAyB,IAAI,CAAC,gBAMjG,CAAC;AA2GF,eAAO,MAAM,SAAS,4FAQnB,cAAc,gBAyDhB,CAAC"}
+{"version":3,"file":"ViewState.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/ViewState.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,cAAc,EAAE,wBAAwB,EAAsB,MAAM,OAAO,CAAC;AAS5F,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,sCAAuC,yBAAyB,IAAI,CAAC,gBAMjG,CAAC;AA4GF,eAAO,MAAM,SAAS,mEAAoE,cAAc,gBAcvG,CAAC"}

package/dist/types/src/panels/JoinPanel/view-states/index.d.ts

@@ -1,6 +1,5 @@
 export * from './AdditionMethodSelector';
 export * from './IdentityAdded';
-export * from './IdentitySelector';
 export * from './IdentityInput';
 export * from './InvitationAccepted';
 export * from './InvitationInput';

package/dist/types/src/panels/JoinPanel/view-states/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/index.ts"],"names":[],"mappings":"AAIA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/index.ts"],"names":[],"mappings":"AAIA,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

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;IAQzE,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;IAOzD,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,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"}

package/dist/types/src/translations/locales/en-US.d.ts

@@ -4,7 +4,7 @@ export declare const os: {
     'sidebar label': string;
     'copy invitation code label': string;
     'open share panel label': string;
-    'joining heading': string;
+    'joining space heading': string;
     'join space heading': string;
     'halo heading': string;
     'exit label': string;
@@ -59,5 +59,7 @@ export declare const os: {
     'toggle sidebar label': string;
     'open sidebar label': string;
     'close sidebar label': string;
+    'welcome message': string;
+    'selecting identity heading': string;
 };
 //# sourceMappingURL=en-US.d.ts.map

package/dist/types/src/translations/locales/en-US.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Dd,CAAC"}
+{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Dd,CAAC"}

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

@@ -1,2 +1,3 @@
 export * from './invitationStatusValue';
+export * from './toEmoji';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC"}

package/dist/types/src/util/toEmoji.d.ts

@@ -0,0 +1,2 @@
+export declare const toEmoji: (keyAsHex: string) => string;
+//# sourceMappingURL=toEmoji.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toEmoji.d.ts","sourceRoot":"","sources":["../../../../src/util/toEmoji.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,OAAO,aAAc,MAAM,WAAiD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.31-next.ea8f0bc",
+  "version": "0.1.32-next.77d513e",
   "description": "A React component library for DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,40 +14,44 @@
     "theme-extensions.js"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.0.1",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
-    "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-radio-group": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.2",
     "@react-hook/async": "^3.1.1",
+    "@xstate/react": "^3.2.1",
     "debug": "^4.3.3",
+    "lodash.toarray": "^4.4.0",
     "qrcode.react": "^3.1.0",
     "url-join": "^5.0.0",
-    "@dxos/client": "0.1.31-next.ea8f0bc",
-    "@dxos/config": "0.1.31-next.ea8f0bc",
-    "@dxos/debug": "0.1.31-next.ea8f0bc",
-    "@dxos/keys": "0.1.31-next.ea8f0bc",
-    "@dxos/protocols": "0.1.31-next.ea8f0bc",
-    "@dxos/react-client": "0.1.31-next.ea8f0bc",
-    "@dxos/react-components": "0.1.31-next.ea8f0bc",
-    "@dxos/util": "0.1.31-next.ea8f0bc"
+    "xstate": "^4.37.0",
+    "@dxos/client": "0.1.32-next.77d513e",
+    "@dxos/config": "0.1.32-next.77d513e",
+    "@dxos/debug": "0.1.32-next.77d513e",
+    "@dxos/keys": "0.1.32-next.77d513e",
+    "@dxos/protocols": "0.1.32-next.77d513e",
+    "@dxos/react-client": "0.1.32-next.77d513e",
+    "@dxos/react-components": "0.1.32-next.77d513e",
+    "@dxos/util": "0.1.32-next.77d513e"
   },
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
+    "@phosphor-icons/react": "^2.0.5",
     "@types/debug": "^4.1.7",
+    "@types/lodash.toarray": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^3.0.1",
-    "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "4.0.4",
-    "@dxos/async": "0.1.31-next.ea8f0bc",
-    "@dxos/client-services": "0.1.31-next.ea8f0bc",
-    "@dxos/log": "0.1.31-next.ea8f0bc",
-    "@dxos/react-async": "0.1.31-next.ea8f0bc"
+    "vite": "^4.2.0",
+    "@dxos/async": "0.1.32-next.77d513e",
+    "@dxos/client-services": "0.1.32-next.77d513e",
+    "@dxos/log": "0.1.32-next.77d513e",
+    "@dxos/react-async": "0.1.32-next.77d513e"
   },
   "peerDependencies": {
-    "phosphor-react": "^1.4.1",
+    "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/components/IdentityList/SpaceMemberListContainer.tsx

@@ -20,8 +20,12 @@ export const SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }: Sp
   const members = useMemo(
     () =>
       includeSelf
-        ? allUnsortedMembers.sort((a) => (a.identity.identityKey.equals(client.halo.identity!.identityKey) ? -1 : 1))
-        : allUnsortedMembers.filter((member) => !member.identity.identityKey.equals(client.halo.identity!.identityKey)),
+        ? allUnsortedMembers.sort((a) =>
+            a.identity.identityKey.equals(client.halo.identity.get()!.identityKey) ? -1 : 1
+          )
+        : allUnsortedMembers.filter(
+            (member) => !member.identity.identityKey.equals(client.halo.identity.get()!.identityKey)
+          ),
     [allUnsortedMembers]
   );
   return <SpaceMemberList members={members} onSelect={onSelect} />;

package/src/components/InvitationList/InvitationList.stories.tsx

@@ -37,7 +37,7 @@ export const Default = {
 
         await clients[0].halo.createIdentity({ displayName: 'Os Mutantes' });
 
-        const space = await clients[0].echo.createSpace();
+        const space = await clients[0].createSpace();
         log.info('[space created]', space);
         space.properties.name = 'Q3 2022 Planning';
         log.info('[space title set]', space?.properties.name);

package/src/components/InvitationList/InvitationListItem.tsx

@@ -1,8 +1,8 @@
 //
 // Copyright 2023 DXOS.org
 //
+import { Copy, ProhibitInset, QrCode, X } from '@phosphor-icons/react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Copy, ProhibitInset, QrCode, X } from 'phosphor-react';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useCallback } from 'react';
 

package/src/composites/DevicesDialog/DevicesDialog.tsx

@@ -5,7 +5,7 @@
 import { Close } from '@radix-ui/react-dialog';
 import React from 'react';
 
-import { ThemeContext, useId } from '@dxos/react-components';
+import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
 
 import { PanelDialog, PanelDialogProps } from '../../layouts';
 import { DevicesPanel, DevicesPanelProps } from '../../panels';
@@ -16,6 +16,7 @@ export interface DevicesDialogProps
 
 export const DevicesDialog = ({ slots, ...devicesDialogProps }: DevicesDialogProps) => {
   const titleId = useId('spaceDialog__title');
+  const themeContextValue = useThemeContext();
 
   return (
     <PanelDialog
@@ -24,7 +25,7 @@ export const DevicesDialog = ({ slots, ...devicesDialogProps }: DevicesDialogPro
         titleId
       }}
     >
-      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
         <DevicesPanel
           {...{
             ...devicesDialogProps,

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

@@ -35,6 +35,9 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
       log.info('[next invitation code]', { nextInvitationCode });
       setInvitationCode(nextInvitationCode);
     }
+    if (invitation.authenticationCode) {
+      log.info('[verification code]', invitation.authenticationCode);
+    }
   }, []);
 
   useAsyncEffect(async () => {
@@ -43,12 +46,11 @@ const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
 
     await clients[0].halo.createIdentity({ displayName: 'Os Mutantes' });
 
-    const space = await clients[0].echo.createSpace();
+    const space = await clients[0].createSpace();
     log.info('[space created]', space);
     space.properties.name = 'Q3 2022 Planning';
 
     const invitation = space.createInvitation({ type: Invitation.Type.INTERACTIVE });
-    log.info('[invitation created]', invitation);
 
     invitation.subscribe({
       onAuthenticating: onInvitationEvent,

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -5,7 +5,7 @@
 import { Action, Cancel } from '@radix-ui/react-alert-dialog';
 import React from 'react';
 
-import { ThemeContext, useId } from '@dxos/react-components';
+import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
 
 import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
 import { JoinPanel, JoinPanelProps } from '../../panels';
@@ -16,9 +16,11 @@ export interface JoinDialogProps
 
 export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
   const titleId = useId('joinDialog__title');
+  const themeContextValue = useThemeContext();
+
   return (
     <PanelAlertDialog {...{ slots, titleId }}>
-      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
         <JoinPanel
           {...{
             ...joinPanelProps,

package/src/composites/Shell/Shell.stories.tsx

@@ -4,13 +4,21 @@
 
 import '@dxosTheme';
 import { faker } from '@faker-js/faker';
-import { Intersect, Laptop, PlusCircle } from 'phosphor-react';
+import { Intersect, Laptop, PlusCircle } from '@phosphor-icons/react';
 import React, { useState } from 'react';
 
 import { PublicKey, ShellLayout } from '@dxos/client';
 import { useClient, useSpace, useSpaces } from '@dxos/react-client';
 import { ClientDecorator } from '@dxos/react-client/testing';
-import { Button, ButtonGroup, getSize, Group, Tooltip } from '@dxos/react-components';
+import {
+  Button,
+  ButtonGroup,
+  getSize,
+  Group,
+  TooltipRoot,
+  TooltipContent,
+  TooltipTrigger
+} from '@dxos/react-components';
 
 import { SpaceListItem } from '../../components';
 import { ShellProvider, useShell } from './ShellContext';
@@ -26,21 +34,30 @@ const ShellControls = () => {
 
   const controls = (
     <ButtonGroup className='mbe-4'>
-      <Tooltip content='Devices'>
-        <Button onClick={() => shell.setLayout(ShellLayout.DEVICE_INVITATIONS)}>
-          <Laptop weight='fill' className={getSize(6)} />
-        </Button>
-      </Tooltip>
-      <Tooltip content='Create Space'>
-        <Button onClick={() => client.echo.createSpace({ name: faker.animal.bird() })}>
-          <PlusCircle weight='fill' className={getSize(6)} />
-        </Button>
-      </Tooltip>
-      <Tooltip content='Join Space'>
-        <Button onClick={() => shell.setLayout(ShellLayout.JOIN_SPACE)}>
-          <Intersect weight='fill' className={getSize(6)} />
-        </Button>
-      </Tooltip>
+      <TooltipRoot>
+        <TooltipContent>Devices</TooltipContent>
+        <TooltipTrigger asChild>
+          <Button onClick={() => shell.setLayout(ShellLayout.DEVICE_INVITATIONS)}>
+            <Laptop weight='fill' className={getSize(6)} />
+          </Button>
+        </TooltipTrigger>
+      </TooltipRoot>
+      <TooltipRoot>
+        <TooltipContent>Create Space</TooltipContent>
+        <TooltipTrigger asChild>
+          <Button onClick={() => client.createSpace({ name: faker.animal.bird() })}>
+            <PlusCircle weight='fill' className={getSize(6)} />
+          </Button>
+        </TooltipTrigger>
+      </TooltipRoot>
+      <TooltipRoot>
+        <TooltipContent>Join Space</TooltipContent>
+        <TooltipTrigger asChild>
+          <Button onClick={() => shell.setLayout(ShellLayout.JOIN_SPACE)}>
+            <Intersect weight='fill' className={getSize(6)} />
+          </Button>
+        </TooltipTrigger>
+      </TooltipRoot>
     </ButtonGroup>
   );
 

package/src/composites/Shell/Shell.tsx

@@ -49,7 +49,7 @@ export const Shell = ({ runtime, origin }: { runtime: ShellRuntime; origin: stri
           initialInvitationCode={invitationCode}
           onDone={async () => {
             // TODO(wittjosiah): Is this app-specific?
-            spaces.length > 0 || (await client.echo.createSpace());
+            spaces.length > 0 || (await client.createSpace());
             await runtime.setAppContext({ display: ShellDisplay.NONE });
             runtime.setLayout(ShellLayout.DEFAULT);
           }}

package/src/composites/SpaceDialog/SpaceDialog.tsx

@@ -5,7 +5,7 @@
 import { Close } from '@radix-ui/react-dialog';
 import React from 'react';
 
-import { ThemeContext, useId } from '@dxos/react-components';
+import { ThemeContext, useId, useThemeContext } from '@dxos/react-components';
 
 import { PanelDialog, PanelDialogProps } from '../../layouts';
 import { SpacePanel, SpacePanelProps } from '../../panels';
@@ -16,6 +16,7 @@ export interface SpaceDialogProps
 
 export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) => {
   const titleId = useId('spaceDialog__title');
+  const themeContextValue = useThemeContext();
 
   return (
     <PanelDialog
@@ -24,7 +25,7 @@ export const SpaceDialog = ({ slots, ...spacePanelProps }: SpaceDialogProps) =>
         titleId
       }}
     >
-      <ThemeContext.Provider value={{ themeVariant: 'os' }}>
+      <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
         <SpacePanel
           {...{
             ...spacePanelProps,

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -2,11 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { UserPlus, X } from 'phosphor-react';
+import { UserPlus, X } from '@phosphor-icons/react';
 import React, { cloneElement, useReducer } from 'react';
 
 import { useClient, useDevices, useHaloInvitations, useIdentity } from '@dxos/react-client';
-import { Button, DensityProvider, getSize, mx, Tooltip, useTranslation } from '@dxos/react-components';
+import {
+  Button,
+  DensityProvider,
+  getSize,
+  mx,
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger,
+  useTranslation
+} from '@dxos/react-components';
 
 import { DeviceList, InvitationList, PanelSeparator } from '../../components';
 import { defaultSurface, subduedSurface } from '../../styles';
@@ -45,9 +54,12 @@ const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent
         <h2 id={titleId} className={mx('grow font-system-medium', !displayName && 'font-mono')}>
           {displayName ?? identity.identityKey.truncate()}
         </h2>
-        <Tooltip content={t('close label')} zIndex='z-50'>
-          {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
-        </Tooltip>
+        <TooltipRoot>
+          <TooltipContent className='z-50'>{t('close label')}</TooltipContent>
+          <TooltipTrigger asChild>
+            {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
+          </TooltipTrigger>
+        </TooltipRoot>
       </div>
       <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
         <InvitationList

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import type { Identity } from '@dxos/client';
 import { useClient } from '@dxos/react-client';
-import { Avatar, Button, ThemeContext, useTranslation } from '@dxos/react-components';
+import { Avatar, Button, DensityProvider, ThemeContext, useThemeContext, useTranslation } from '@dxos/react-components';
 
 export const IdentityPanel = ({
   identity,
@@ -16,24 +16,28 @@ export const IdentityPanel = ({
 }) => {
   const { t } = useTranslation('os');
   const client = useClient();
+  const themeContextValue = useThemeContext();
+
   const defaultManageProfile = () => {
     const remoteSource = new URL(client?.config.get('runtime.client.remoteSource') || 'https://halo.dxos.org');
     const tab = window.open(remoteSource.origin, '_blank');
     tab?.focus();
   };
   return (
-    <ThemeContext.Provider value={{ themeVariant: 'os', rootDensity: 'fine' }}>
-      <div className='flex flex-col gap-2 justify-center items-center'>
-        <Avatar
-          size={16}
-          variant='circle'
-          fallbackValue={identity.identityKey.toHex()}
-          label={identity.profile?.displayName ?? ''}
-        />
-        <Button onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
-          {t('manage profile label')}
-        </Button>
-      </div>
+    <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
+      <DensityProvider density='fine'>
+        <div className='flex flex-col gap-2 justify-center items-center'>
+          <Avatar
+            size={16}
+            variant='circle'
+            fallbackValue={identity.identityKey.toHex()}
+            label={identity.profile?.displayName ?? ''}
+          />
+          <Button onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
+            {t('manage profile label')}
+          </Button>
+        </div>
+      </DensityProvider>
     </ThemeContext.Provider>
   );
 };

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -1,20 +1,21 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { ProhibitInset } from 'phosphor-react';
+import { X } from '@phosphor-icons/react';
 import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
 
-import { AuthenticatingInvitationObservable } from '@dxos/client';
 import { useSpace } from '@dxos/react-client';
-import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
+import { Button, defaultDescription, getSize, Heading, mx, useId, useTranslation } from '@dxos/react-components';
 
-import { subduedSurface } from '../../styles';
+import { defaultSurface } from '../../styles';
+import { toEmoji } from '../../util';
 import { JoinPanelMode } from './JoinPanelProps';
+import { JoinState } from './joinMachine';
 
 export interface JoinSpaceHeadingProps {
   mode?: JoinPanelMode;
   titleId: string;
-  invitation?: AuthenticatingInvitationObservable;
+  joinState?: JoinState;
   onExit?: () => void;
   exitActionParent?: Parameters<typeof cloneElement>[0];
   preventExit?: boolean;
@@ -23,56 +24,57 @@ export interface JoinSpaceHeadingProps {
 // TODO(wittjosiah): Accesses the space properties directly which will trigger ECHO warnings without observer.
 export const JoinHeading = forwardRef(
   (
-    { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
+    { mode, titleId, joinState, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
     const { t } = useTranslation('os');
 
-    const space = useSpace(invitation?.invitation?.spaceKey);
-    const name = mode === 'halo-only' ? '(Unknown identity)' : space?.properties.name ?? '(Space name not available)';
+    const space = useSpace(joinState?.context.space.invitation?.spaceKey);
+    const name = space?.properties.name;
     const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
 
-    const invitationKey =
-      mode === 'halo-only'
-        ? invitation?.invitation?.identityKey?.toHex()
-        : invitation?.invitation?.identityKey?.toHex();
+    const invitationKey = joinState?.context[mode === 'halo-only' ? 'halo' : 'space'].invitation?.invitationId;
+    const invitationEmoji = invitationKey && toEmoji(invitationKey);
 
     const exitButton = (
-      <Button variant='ghost' {...(onExit && { onClick: onExit })} className='grow-0 shrink-0' data-testid='join-exit'>
-        <ProhibitInset className={getSize(5)} />
+      <Button
+        variant='ghost'
+        {...(onExit && { onClick: onExit })}
+        className={mx(defaultDescription, 'plb-0 pli-2 absolute block-start-1.5 inline-end-2 z-[1]')}
+        data-testid='join-exit'
+      >
+        <X weight='bold' className={getSize(4)} />
         <span className='sr-only'>{t('exit label')}</span>
       </Button>
     );
 
     return (
-      <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
-        <div role='group' className='flex items-center gap-2'>
-          {invitationKey ? (
-            <Avatar fallbackValue={invitationKey} labelId={nameId} />
-          ) : (
-            <span role='none' className={mx(getSize(10), 'bg-neutral-300 dark:bg-neutral-700 rounded-full')} />
+      <div role='none' className={mx(defaultSurface, 'pbs-3 pbe-1 rounded-bs-md relative')} ref={ref}>
+        {!preventExit &&
+          mode !== 'halo-only' &&
+          (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
+        <Heading
+          level={1}
+          className={mx(
+            defaultDescription,
+            'font-body font-system-normal text-center text-sm grow pbe-2',
+            mode === 'halo-only' && (preventExit ? 'sr-only' : 'opacity-0')
           )}
-          <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
-            {invitation ? (
-              <Trans
-                {...{
-                  defaults: t('joining heading'),
-                  components: {
-                    small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
-                    large: <span className='block leading-none' id={nameId} />
-                  },
-                  values: { name }
-                }}
-              />
-            ) : (
-              <span className='block leading-none font-system-medium text-sm'>
-                {mode === 'halo-only' ? t('halo heading') : t('join space heading')}
-              </span>
+          id={titleId}
+        >
+          {t(mode === 'halo-only' ? 'selecting identity heading' : 'joining space heading')}
+        </Heading>
+        <div role='group' className='flex items-center justify-center gap-2'>
+          <span
+            role='none'
+            className={mx(
+              getSize(12),
+              'bg-neutral-300 dark:bg-neutral-700 rounded-full text-center text-4xl leading-[3rem]'
             )}
-          </Heading>
-          {!preventExit &&
-            mode !== 'halo-only' &&
-            (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
+          >
+            {invitationEmoji}
+          </span>
+          {name && <p id={nameId}>{name}</p>}
         </div>
       </div>
     );