@dxos/react-ui 0.1.25-next.3c6b542 → 0.1.26

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

@@ -1,15 +1,7 @@
-import { cloneElement } from 'react';
 import type { Profile } from '@dxos/client';
-import { InvitationResult } from '@dxos/react-client';
-import { JoinPanelMode } from '../JoinPanelProps';
 import { ViewStateProps } from './ViewState';
-export interface IdentityAddedProps extends ViewStateProps, DoneProps {
-    mode?: JoinPanelMode;
+export interface IdentityAddedProps extends ViewStateProps {
     addedIdentity?: Profile;
 }
-export interface DoneProps extends ViewStateProps {
-    doneActionParent?: Parameters<typeof cloneElement>[0];
-    onDone?: (result: InvitationResult | null) => void;
-}
-export declare const IdentityAdded: ({ mode, addedIdentity, onDone, doneActionParent, ...viewStateProps }: IdentityAddedProps) => JSX.Element;
+export declare const IdentityAdded: ({ addedIdentity, ...viewStateProps }: IdentityAddedProps) => JSX.Element;
 //# sourceMappingURL=IdentityAdded.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IdentityAdded.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentityAdded.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,SAAS;IACnE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD;AAuBD,eAAO,MAAM,aAAa,yEAMvB,kBAAkB,gBA+CpB,CAAC"}
+{"version":3,"file":"IdentityAdded.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentityAdded.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,yCAA0C,kBAAkB,gBA2CrF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"IdentityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentityInput.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,MAAM,EAAE,kBAAkB,GAAG,iBAAiB,CAAC;CAChD;AAED,eAAO,MAAM,aAAa,kCAAmC,oBAAoB,gBA8DhF,CAAC"}
+{"version":3,"file":"IdentityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentityInput.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,MAAM,EAAE,kBAAkB,GAAG,iBAAiB,CAAC;CAChD;AAED,eAAO,MAAM,aAAa,kCAAmC,oBAAoB,gBAuDhF,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { Profile } from '@dxos/client';
+import { Profile } from '../JoinPanelProps';
 import { ViewStateProps } from './ViewState';
 export interface IdentitySelectorProps extends ViewStateProps {
     availableIdentities: Profile[];

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

@@ -1 +1 @@
-{"version":3,"file":"IdentitySelector.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentitySelector.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,mBAAmB,EAAE,OAAO,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,+CAAgD,qBAAqB,gBAmFjG,CAAC"}
+{"version":3,"file":"IdentitySelector.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentitySelector.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,mBAAmB,EAAE,OAAO,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,+CAAgD,qBAAqB,gBAgFjG,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InvitationAccepted.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationAccepted.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAuB,MAAM,oBAAoB,CAAC;AAG3E,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD;AAkCD,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,gBAkBhE,CAAC"}
+{"version":3,"file":"InvitationAccepted.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationAccepted.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAuB,MAAM,oBAAoB,CAAC;AAG3E,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC7D,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD;AAiCD,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,gBAkBhE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InvitationAuthenticator.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuGD,eAAO,MAAM,uBAAuB,kDAIjC,4BAA4B,gBAgB9B,CAAC"}
+{"version":3,"file":"InvitationAuthenticator.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoGD,eAAO,MAAM,uBAAuB,kDAIjC,4BAA4B,gBAgB9B,CAAC"}

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":"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,gBAkD1F,CAAC"}

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,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;CAClC;AA0DD,eAAO,MAAM,iBAAiB,0CAA2C,wBAAwB,gBAqBhG,CAAC"}

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

@@ -1,5 +1,3 @@
-export * from './DevicesPanel';
 export * from './IdentityPanel';
 export * from './JoinPanel';
-export * from './SpacePanel';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}

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

@@ -1,4 +1,3 @@
-export * from './dialogStyles';
 export * from './panelStyles';
 export * from './invitationStatusStyles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC"}

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

@@ -4,9 +4,7 @@ export declare const os: {
     'sidebar label': string;
     'copy invitation code label': string;
     'open share panel label': string;
-    'joining heading': string;
     'join space heading': string;
-    'halo heading': string;
     'exit label': string;
     'identity selector title': string;
     'identity radio group title': string;
@@ -14,7 +12,6 @@ export declare const os: {
     'continue label': string;
     'back label': string;
     'next label': string;
-    'close label': string;
     'auth choices label': string;
     'create identity label': string;
     'create identity description': string;
@@ -44,15 +41,7 @@ export declare const os: {
     'cancel label': string;
     'done label': string;
     'reset label': string;
-    'auth code input label': string;
+    'pin input label': string;
     'invitation input label': string;
-    'create space invitation label': string;
-    'qr label': string;
-    'empty invitations message': string;
-    'show all spaces label': string;
-    'all spaces label': string;
-    'create space label': string;
-    'join space label': string;
-    'show current space label': 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDd,CAAC"}
+{"version":3,"file":"en-US.d.ts","sourceRoot":"","sources":["../../../../../src/translations/locales/en-US.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Cd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.25-next.3c6b542",
+  "version": "0.1.26",
   "description": "A React component library for DXOS’s OS experiences",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,14 +22,13 @@
     "debug": "^4.3.3",
     "qrcode.react": "^3.1.0",
     "url-join": "^5.0.0",
-    "@dxos/client": "0.1.25-next.3c6b542",
-    "@dxos/config": "0.1.25-next.3c6b542",
-    "@dxos/debug": "0.1.25-next.3c6b542",
-    "@dxos/keys": "0.1.25-next.3c6b542",
-    "@dxos/protocols": "0.1.25-next.3c6b542",
-    "@dxos/react-client": "0.1.25-next.3c6b542",
-    "@dxos/react-components": "0.1.25-next.3c6b542",
-    "@dxos/util": "0.1.25-next.3c6b542"
+    "@dxos/client": "0.1.26",
+    "@dxos/config": "0.1.26",
+    "@dxos/debug": "0.1.26",
+    "@dxos/keys": "0.1.26",
+    "@dxos/react-client": "0.1.26",
+    "@dxos/react-components": "0.1.26",
+    "@dxos/util": "0.1.26"
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
@@ -40,9 +39,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "4.0.4",
-    "@dxos/async": "0.1.25-next.3c6b542",
-    "@dxos/log": "0.1.25-next.3c6b542",
-    "@dxos/react-async": "0.1.25-next.3c6b542"
+    "@dxos/async": "0.1.26",
+    "@dxos/log": "0.1.26",
+    "@dxos/react-async": "0.1.26"
   },
   "peerDependencies": {
     "phosphor-react": "^1.4.1",

package/src/components/IdentityList/IdentityListItem.tsx

@@ -4,24 +4,12 @@
 import React from 'react';
 
 import { Profile, SpaceMember } from '@dxos/client';
-import { Avatar, mx, useTranslation } from '@dxos/react-components';
+import { Avatar, useTranslation } from '@dxos/react-components';
 
-export const IdentityListItem = ({
-  identity,
-  presence,
-  onClick
-}: {
-  identity: Profile;
-  presence?: SpaceMember['presence'];
-  onClick?: () => void;
-}) => {
+export const IdentityListItem = ({ identity, presence }: { identity: Profile; presence?: SpaceMember['presence'] }) => {
   const { t } = useTranslation('os');
   return (
-    <li
-      className={mx('flex gap-2 items-center', onClick && 'cursor-pointer')}
-      onClick={() => onClick?.()}
-      data-testid='identity-list-item'
-    >
+    <li className='flex gap-2 items-center'>
       <Avatar
         {...{
           variant: 'circle',

package/src/components/IdentityList/SpaceMemberList.tsx

@@ -9,22 +9,20 @@ import type { SpaceMember } from '@dxos/client';
 import { IdentityListItem } from './IdentityListItem';
 
 export interface SpaceMemberListProps {
-  members: SpaceMember[];
-  onSelect?: (member: SpaceMember) => void;
+  spaceMembers: SpaceMember[];
 }
 
-export const SpaceMemberList = ({ members, onSelect }: SpaceMemberListProps) => {
+export const SpaceMemberList = ({ spaceMembers }: SpaceMemberListProps) => {
   return (
     <ul className='flex flex-col gap-2'>
-      {members
-        .filter((member) => member.profile)
-        .map((member) => {
+      {spaceMembers
+        .filter((spaceMember) => spaceMember.profile)
+        .map((spaceMember) => {
           return (
             <IdentityListItem
-              key={member.identityKey.toHex()}
-              identity={member.profile!}
-              presence={member.presence}
-              onClick={onSelect && (() => onSelect(member))}
+              key={spaceMember.identityKey.toHex()}
+              identity={spaceMember.profile!}
+              presence={spaceMember.presence}
             />
           );
         })}

package/src/components/IdentityList/SpaceMemberListContainer.tsx

@@ -4,25 +4,24 @@
 import React, { useMemo } from 'react';
 
 import { PublicKey } from '@dxos/keys';
-import { SpaceMember, useClient, useMembers } from '@dxos/react-client';
+import { useClient, useMembers } from '@dxos/react-client';
 
 import { SpaceMemberList } from './SpaceMemberList';
 
 export interface SpaceMemberListContainerProps {
   spaceKey: PublicKey;
   includeSelf?: boolean;
-  onSelect?: (member: SpaceMember) => void;
 }
 
-export const SpaceMemberListContainer = ({ spaceKey, includeSelf, onSelect }: SpaceMemberListContainerProps) => {
+export const SpaceMemberListContainer = ({ spaceKey, includeSelf }: SpaceMemberListContainerProps) => {
   const client = useClient();
   const allUnsortedMembers = useMembers(spaceKey);
-  const members = useMemo(
+  const spaceMembers = useMemo(
     () =>
       includeSelf
         ? allUnsortedMembers.sort((a) => (a.identityKey.equals(client.halo.profile!.identityKey) ? -1 : 1))
         : allUnsortedMembers.filter((member) => !member.identityKey.equals(client.halo.profile!.identityKey)),
     [allUnsortedMembers]
   );
-  return <SpaceMemberList members={members} onSelect={onSelect} />;
+  return <SpaceMemberList spaceMembers={spaceMembers} />;
 };

package/src/components/IdentityList/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './DeviceList';
 export * from './IdentityListItem';
 export * from './SpaceMemberList';
 export * from './SpaceMemberListContainer';

package/src/components/InvitationList/InvitationList.tsx

@@ -5,7 +5,6 @@ import { Root as AccordionRoot } from '@radix-ui/react-accordion';
 import React from 'react';
 
 import type { CancellableInvitationObservable } from '@dxos/client';
-import { defaultDescription, mx, useTranslation } from '@dxos/react-components';
 
 import { InvitationListItem, InvitationListItemProps } from './InvitationListItem';
 
@@ -14,15 +13,12 @@ export interface InvitationListProps extends Omit<InvitationListItemProps, 'invi
 }
 
 export const InvitationList = ({ invitations, ...invitationProps }: InvitationListProps) => {
-  const { t } = useTranslation('os');
-  return invitations.length ? (
-    <AccordionRoot type='single' collapsible className='flex flex-col gap-1'>
+  return (
+    <AccordionRoot type='single' collapsible>
       {invitations.map((invitation, index) => {
         const value = invitation.invitation?.invitationId ?? `inv_${index}`;
         return <InvitationListItem key={value} value={value} invitation={invitation} {...invitationProps} />;
       })}
     </AccordionRoot>
-  ) : (
-    <p className={mx(defaultDescription, 'text-center p-2')}>{t('empty invitations message')}</p>
   );
 };

package/src/components/InvitationList/InvitationListItem.tsx

@@ -8,7 +8,7 @@ import React, { useCallback } from 'react';
 
 import { CancellableInvitationObservable } from '@dxos/client';
 import { useInvitationStatus } from '@dxos/react-client';
-import { Button, getSize, mx, useId, useTranslation } from '@dxos/react-components';
+import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
 
 import { invitationStatusValue } from '../../util';
 import { SharedInvitationListProps } from './InvitationListProps';
@@ -27,19 +27,18 @@ export const InvitationListItem = ({
   createInvitationUrl
 }: InvitationListItemProps) => {
   const { t } = useTranslation('os');
-  const qrLabel = useId('qrLabel');
 
   const { cancel, status, haltedAt, invitationCode, authenticationCode } = useInvitationStatus(invitation);
   const statusValue = invitationStatusValue.get(status) ?? 0;
 
   const isCancellable = statusValue < 4 && statusValue >= 0;
   const showShare = statusValue < 3 && statusValue >= 0;
-  const showAuthCode = statusValue === 3;
+  const showPin = statusValue === 3;
 
   const handleClickRemove = useCallback(() => onClickRemove(invitation), [invitation, onClickRemove]);
 
   const invitationUrl = invitationCode && createInvitationUrl(invitationCode);
-  const handleClickCopy = useCallback(() => {
+  const handleCLickCopy = useCallback(() => {
     if (invitationUrl) {
       void navigator.clipboard.writeText(invitationUrl);
     }
@@ -48,21 +47,15 @@ export const InvitationListItem = ({
   return (
     <AccordionPrimitive.Item value={value}>
       <AccordionPrimitive.Header className='flex gap-2 items-center'>
-        <InvitationStatusAvatar {...{ status, haltedAt, size: 8 }} />
+        <InvitationStatusAvatar {...{ status, haltedAt }} />
         {showShare && invitationUrl ? (
-          <>
-            <AccordionPrimitive.Trigger asChild>
-              <Button className='grow flex gap-1' data-testid='show-qrcode'>
-                <span>{t('open share panel label')}</span>
-                <QrCode className={getSize(4)} weight='bold' />
-              </Button>
-            </AccordionPrimitive.Trigger>
-            <Button className='flex gap-1' onClick={handleClickCopy} data-testid='copy-invitation'>
-              <span className='pli-1'>{t('copy invitation code label')}</span>
-              <Copy className={getSize(4)} weight='bold' />
+          <AccordionPrimitive.Trigger asChild>
+            <Button className='grow flex gap-1'>
+              <span>{t('open share panel label')}</span>
+              <QrCode className={getSize(4)} weight='bold' />
             </Button>
-          </>
-        ) : showAuthCode ? (
+          </AccordionPrimitive.Trigger>
+        ) : showPin ? (
           <p className='grow text-xl text-center text-success-500 dark:text-success-300 font-mono'>
             {authenticationCode}
           </p>
@@ -70,35 +63,31 @@ export const InvitationListItem = ({
           <span role='none' className='grow' />
         )}
         {isCancellable ? (
-          <Button variant='ghost' compact className='flex gap-1' onClick={cancel} data-testid='cancel-invitation'>
+          <Button variant='ghost' compact className='flex gap-1' onClick={cancel}>
             <span className='sr-only'>{t('cancel invitation label')}</span>
             <ProhibitInset className={getSize(4)} weight='bold' />
           </Button>
         ) : (
-          <Button
-            variant='ghost'
-            compact
-            className='flex gap-1'
-            onClick={handleClickRemove}
-            data-testid='remove-invitation'
-          >
+          <Button variant='ghost' compact className='flex gap-1' onClick={handleClickRemove}>
             <span className='sr-only'>{t('remove invitation label')}</span>
             <X className={getSize(4)} weight='bold' />
           </Button>
         )}
       </AccordionPrimitive.Header>
       {showShare && invitationUrl && (
-        <AccordionPrimitive.Content className='flex gap-2 is-full radix-state-open:p-1 items-center'>
-          <QRCodeSVG
-            bgColor='transparent'
-            fgColor='currentColor'
-            value={invitationUrl}
-            className={mx('grow-[2] aspect-square is-24 bs-auto')}
-            aria-labelledby={qrLabel}
-          />
-          <span className='pli-1 flex-1 font-system-normal text-sm text-center' id={qrLabel}>
-            {t('qr label')}
-          </span>
+        <AccordionPrimitive.Content>
+          <Button className='flex gap-2 is-full p-2' onClick={handleCLickCopy}>
+            <QRCodeSVG
+              bgColor='transparent'
+              fgColor='currentColor'
+              value={invitationUrl}
+              className={mx('grow aspect-square is-24 bs-auto')}
+            />
+            <span className='pli-1'>
+              {t('copy invitation code label')}
+              <Copy className={mx(getSize(4), 'inline mis-1')} weight='bold' />
+            </span>
+          </Button>
         </AccordionPrimitive.Content>
       )}
     </AccordionPrimitive.Item>

package/src/components/InvitationList/InvitationStatusAvatar.tsx

@@ -5,24 +5,19 @@
 import React, { ComponentPropsWithoutRef } from 'react';
 
 import { Invitation } from '@dxos/client';
-import { getSize, mx, Size } from '@dxos/react-components';
+import { getSize, Size } from '@dxos/react-components';
 
 import { inactiveStrokeColor, activeStrokeColor, resolvedStrokeColor } from '../../styles';
 import { invitationStatusValue } from '../../util';
 
-export interface InvitationStatusAvatarSlots {
-  svg?: ComponentPropsWithoutRef<'svg'>;
-}
-
 export interface InvitationStatusAvatarProps {
   size?: Size;
   status: Invitation.State;
   haltedAt?: Invitation.State;
-  slots?: InvitationStatusAvatarSlots;
 }
 
 const svgSize = 32;
-const strokeWidth = 5;
+const strokeWidth = 4;
 const radius = (svgSize - strokeWidth) / 2;
 const circumference = Math.PI * 2 * radius;
 const gap = circumference / 12;
@@ -36,17 +31,17 @@ const circleProps: ComponentPropsWithoutRef<'circle'> = {
   cx: svgSize / 2,
   cy: svgSize / 2,
   r: radius,
-  strokeWidth,
+  strokeWidth: 4,
   strokeDasharray: `${segment - gap} ${2 * segment + gap}`
 };
 
-export const InvitationStatusAvatar = ({ size = 10, status, haltedAt, slots = {} }: InvitationStatusAvatarProps) => {
+export const InvitationStatusAvatar = ({ size = 10, status, haltedAt }: InvitationStatusAvatarProps) => {
   const resolvedColor = resolvedStrokeColor(status);
   const halted =
     status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT || status === Invitation.State.ERROR;
   const cursor = invitationStatusValue.get(halted ? haltedAt! : status)!;
   return (
-    <svg {...slots.svg} viewBox={`0 0 ${svgSize} ${svgSize}`} className={mx(getSize(size), slots.svg?.className)}>
+    <svg viewBox={`0 0 ${svgSize} ${svgSize}`} className={getSize(size)}>
       {[...Array(nSegments)].map((_, index) => (
         <circle
           key={index}

package/src/components/index.ts

@@ -5,4 +5,3 @@
 export * from './IdentityList';
 export * from './InvitationList';
 export * from './PanelSeparator';
-export * from './SpaceList';

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

@@ -4,7 +4,7 @@
 
 import '@dxosTheme';
 
-import { StoryContext, StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Client, Invitation, InvitationEncoder } from '@dxos/client';
@@ -19,63 +19,62 @@ import { JoinDialog } from './JoinDialog';
 export default {
   component: JoinDialog
 };
-
-const JoinClientDecorator = (Story: StoryFn, { args }: StoryContext) => {
-  const n = 2;
-  const testBuilder = new TestBuilder();
-  const clients = useMemo(() => {
-    return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
-  }, []);
-
-  const [invitationCode, setInvitationCode] = useState<string>();
-
-  const onInvitationEvent = useCallback((invitation: Invitation) => {
-    if (!invitationCode) {
-      const nextInvitationCode = InvitationEncoder.encode(invitation);
-      log.info('[next invitation code]', { nextInvitationCode });
-      setInvitationCode(nextInvitationCode);
-    }
-  }, []);
-
-  useAsyncEffect(async () => {
-    await Promise.all(clients.map((client) => client.initialize()));
-    log.info('[initialized]');
-
-    await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
-
-    const space = await clients[0].echo.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,
-      onCancelled: (...args) => log.warn('[cancelled]', args),
-      onConnected: onInvitationEvent,
-      onConnecting: onInvitationEvent,
-      onError: onInvitationEvent,
-      onSuccess: onInvitationEvent,
-      onTimeout: (...args) => log.warn('[timeout]', args)
-    });
-
-    return () => {
-      void Promise.all(clients.map((client) => client.destroy()));
-    };
-  }, clients);
-
-  if (!invitationCode) {
-    return <Loading label='Setting things up…' />;
-  }
-
-  return (
-    <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
-      <Story args={{ initialInvitationCode: invitationCode, ...args }} />
-    </ClientProvider>
-  );
-};
-
 export const Default = {
-  decorators: [JoinClientDecorator]
+  decorators: [
+    (Story: StoryFn) => {
+      const n = 2;
+      const testBuilder = new TestBuilder();
+      const clients = useMemo(() => {
+        return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+      }, []);
+
+      const [invitationCode, setInvitationCode] = useState<string>();
+
+      const onInvitationEvent = useCallback((invitation: Invitation) => {
+        if (!invitationCode) {
+          const nextInvitationCode = InvitationEncoder.encode(invitation);
+          log.info('[next invitation code]', { nextInvitationCode });
+          setInvitationCode(nextInvitationCode);
+        }
+      }, []);
+
+      useAsyncEffect(async () => {
+        await Promise.all(clients.map((client) => client.initialize()));
+        log.info('[initialized]');
+
+        await clients[0].halo.createProfile({ displayName: 'Os Mutantes' });
+
+        const space = await clients[0].echo.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,
+          onCancelled: (...args) => log.warn('[cancelled]', args),
+          onConnected: onInvitationEvent,
+          onConnecting: onInvitationEvent,
+          onError: onInvitationEvent,
+          onSuccess: onInvitationEvent,
+          onTimeout: (...args) => log.warn('[timeout]', args)
+        });
+
+        return () => {
+          void Promise.all(clients.map((client) => client.destroy()));
+        };
+      }, clients);
+
+      if (!invitationCode) {
+        return <Loading label='Setting things up…' />;
+      }
+
+      return (
+        <ClientProvider client={clients[1]} fallback={() => <Loading label='Loading client…' />}>
+          <Story args={{ initialInvitationCode: invitationCode }} />
+        </ClientProvider>
+      );
+    }
+  ]
 };

package/src/composites/JoinDialog/JoinDialog.tsx

@@ -10,9 +10,7 @@ import { ThemeContext, useId } from '@dxos/react-components';
 import { PanelAlertDialog, PanelAlertDialogProps } from '../../layouts';
 import { JoinPanel, JoinPanelProps } from '../../panels';
 
-export interface JoinDialogProps
-  extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>,
-    Omit<JoinPanelProps, 'exitActionParent' | 'doneActionParent'> {}
+export interface JoinDialogProps extends Omit<PanelAlertDialogProps, 'titleId' | 'children'>, JoinPanelProps {}
 
 export const JoinDialog = ({ slots, ...joinPanelProps }: JoinDialogProps) => {
   const titleId = useId('joinDialog__title');

package/src/composites/index.ts

@@ -1,8 +1,5 @@
 //
 // Copyright 2022 DXOS.org
 //
-
 export * from './IdentityPopover';
 export * from './JoinDialog';
-export * from './Shell';
-export * from './SpaceDialog';