@dxos/plugin-space 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
-import { getObjectAnnotation, type ObjectAnnotation, type S } from '@dxos/echo-schema';
+import { getTypeAnnotation, type TypeAnnotation, type S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type SpaceId, type Space } from '@dxos/react-client/echo';
 import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -69,9 +69,9 @@ export const CreateObjectPanel = ({
   const { t } = useTranslation(SPACE_PLUGIN);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
-  const form = forms.find((form) => getObjectAnnotation(form.objectSchema)?.typename === typename);
-  const options: ObjectAnnotation[] = forms
-    .map((form) => getObjectAnnotation(form.objectSchema))
+  const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
+  const options: TypeAnnotation[] = forms
+    .map((form) => getTypeAnnotation(form.objectSchema))
     .filter(isNonNullable)
     .sort((a, b) => {
       const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
@@ -92,7 +92,7 @@ export const CreateObjectPanel = ({
   const handleSetTypename = useCallback(
     async (typename: string) => {
       invariant(target, 'target is required');
-      const form = forms.find((form) => getObjectAnnotation(form.objectSchema)?.typename === typename);
+      const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
       if (form && !form.formSchema) {
         await onCreateObject?.({ form, target });
       } else {
@@ -170,7 +170,7 @@ const SelectSchema = ({
   resolve,
   onChange,
 }: {
-  options: ObjectAnnotation[];
+  options: TypeAnnotation[];
   onChange: (type: string) => void;
 } & Pick<CreateObjectPanelProps, 'resolve'>) => {
   const { t } = useTranslation(SPACE_PLUGIN);

package/src/components/JoinDialog.tsx

@@ -5,9 +5,10 @@
 import React, { useCallback } from 'react';
 
 import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { log } from '@dxos/log';
+import { Trigger } from '@dxos/async';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
@@ -28,34 +29,44 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
-      if (result?.spaceKey) {
-        await Promise.all([
-          dispatch(
-            createIntent(LayoutAction.AddToast, {
-              part: 'toast',
-              subject: {
-                id: `${SPACE_PLUGIN}/join-success`,
-                duration: 5_000,
-                title: ['join success label', { ns: SPACE_PLUGIN }],
-                closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
-              },
-            }),
-          ),
-          dispatch(
-            createIntent(LayoutAction.UpdateDialog, {
-              part: 'dialog',
-              options: {
-                state: false,
-              },
-            }),
-          ),
-        ]);
+      const spaceKey = result?.spaceKey;
+      if (!spaceKey) {
+        return;
       }
 
-      const space = result?.spaceKey ? client.spaces.get(result.spaceKey) : undefined;
+      await Promise.all([
+        dispatch(
+          createIntent(LayoutAction.AddToast, {
+            part: 'toast',
+            subject: {
+              id: `${SPACE_PLUGIN}/join-success`,
+              duration: 5_000,
+              title: ['join success label', { ns: SPACE_PLUGIN }],
+              closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
+            },
+          }),
+        ),
+        dispatch(
+          createIntent(LayoutAction.UpdateDialog, {
+            part: 'dialog',
+            options: {
+              state: false,
+            },
+          }),
+        ),
+      ]);
+
+      let space = client.spaces.get(spaceKey);
       if (!space) {
-        log.warn('Space not found', result?.spaceKey);
-        return;
+        // TODO(wittjosiah): Add api to wait for a space.
+        const trigger = new Trigger<Space>();
+        client.spaces.subscribe(() => {
+          const space = client.spaces.get(spaceKey);
+          if (space) {
+            trigger.wake(space);
+          }
+        });
+        space = await trigger.wait();
       }
 
       await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
@@ -78,7 +89,12 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
 
       if (space) {
         await dispatch(
-          createIntent(ObservabilityAction.SendEvent, { name: 'space.join', properties: { spaceId: space.id } }),
+          createIntent(ObservabilityAction.SendEvent, {
+            name: 'space.join',
+            properties: {
+              spaceId: space.id,
+            },
+          }),
         );
       }
     },

package/src/components/MembersContainer.stories.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { osTranslations } from '@dxos/shell/react';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { MembersContainer } from './MembersContainer';
+import translations from '../translations';
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/MembersContainer',
+  component: MembersContainer,
+  decorators: [
+    withClientProvider({ createIdentity: true, createSpace: true }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, osTranslations],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MembersContainer>;
+
+export const Default: Story = {};

package/src/components/MembersContainer.tsx

@@ -0,0 +1,255 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Check, X } from '@phosphor-icons/react';
+import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';
+import { QR } from 'react-qr-rounded';
+
+import { log } from '@dxos/log';
+import { useConfig } from '@dxos/react-client';
+import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
+import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+import { Button, Clipboard, Icon, useId, useTranslation } from '@dxos/react-ui';
+import { ControlSection, ControlFrame, ControlFrameItem } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import {
+  type ActionMenuItem,
+  AuthCode,
+  BifurcatedAction,
+  Centered,
+  Emoji,
+  InvitationList,
+  SpaceMemberList,
+  Viewport,
+} from '@dxos/shell/react';
+import { hexToEmoji } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../meta';
+import { CollectionType } from '../types';
+
+// TODO(wittjosiah): Copied from Shell.
+const activeActionKey = 'dxos:react-shell/space-manager/active-action';
+
+const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservable.Subscription) => {
+  const invitationCode = InvitationEncoder.encode(invitation);
+  if (invitation.state === Invitation.State.CONNECTING) {
+    log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+    subscription.unsubscribe();
+  }
+};
+
+export const MembersContainer = ({
+  space,
+  createInvitationUrl,
+}: {
+  space: Space;
+  createInvitationUrl: (invitationCode: string) => string;
+}) => {
+  const { t } = useTranslation('os');
+  const config = useConfig();
+  const invitations = useSpaceInvitations(space.key);
+  const visibleInvitations = invitations?.filter(
+    (invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state),
+  );
+
+  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteMany');
+
+  const setActiveAction = (nextAction: string) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+
+  // TODO(wittjosiah): Track which was the most recently viewed object.
+  const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
+
+  const inviteActions = useMemo(
+    (): Record<string, ActionMenuItem> => ({
+      inviteOne: {
+        label: t('invite one label'),
+        description: t('invite one description'),
+        icon: () => <Icon icon='ph--user-plus--regular' size={5} />,
+        testId: 'membersContainer.inviteOne',
+        onClick: () => {
+          const invitation = space.share?.({
+            type: Invitation.Type.INTERACTIVE,
+            authMethod: Invitation.AuthMethod.SHARED_SECRET,
+            multiUse: false,
+            target: target && fullyQualifiedId(target),
+          });
+          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+            const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
+              handleInvitationEvent(invitation, subscription),
+            );
+          }
+        },
+      },
+      inviteMany: {
+        label: t('invite many label'),
+        description: t('invite many description'),
+        icon: () => <Icon icon='ph--users-three--regular' size={5} />,
+        testId: 'membersContainer.inviteMany',
+        onClick: () => {
+          const invitation = space.share?.({
+            type: Invitation.Type.DELEGATED,
+            authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+            multiUse: true,
+            target: target && fullyQualifiedId(target),
+          });
+          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+            const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
+              handleInvitationEvent(invitation, subscription),
+            );
+          }
+        },
+      },
+    }),
+    [t, space, target],
+  );
+
+  const [selectedInvitation, setSelectedInvitation] = useState<CancellableInvitationObservable | null>(null);
+  const handleSend = (event: { type: 'selectInvitation'; invitation: CancellableInvitationObservable }) => {
+    setSelectedInvitation(event.invitation);
+  };
+  const handleBack = () => {
+    setSelectedInvitation(null);
+  };
+
+  return (
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <ControlSection
+        title={t('members verbose label', { ns: SPACE_PLUGIN })}
+        description={t('members description', { ns: SPACE_PLUGIN })}
+      >
+        <ControlFrame>
+          <ControlFrameItem title={t('members label', { ns: SPACE_PLUGIN })}>
+            <SpaceMemberList spaceKey={space.key} includeSelf />
+          </ControlFrameItem>
+          <ControlFrameItem title={t('invitations label', { ns: SPACE_PLUGIN })}>
+            {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
+            {!selectedInvitation && (
+              <>
+                <p className='text-description mbe-2'>{t('space invitation description', { ns: SPACE_PLUGIN })}</p>
+                <InvitationList
+                  className='mb-2'
+                  send={handleSend}
+                  invitations={visibleInvitations ?? []}
+                  onClickRemove={(invitation) => invitation.cancel()}
+                  createInvitationUrl={createInvitationUrl}
+                />
+                <BifurcatedAction
+                  actions={inviteActions}
+                  activeAction={activeAction}
+                  onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
+                  data-testid='membersContainer.createInvitation'
+                />
+              </>
+            )}
+          </ControlFrameItem>
+        </ControlFrame>
+      </ControlSection>
+    </StackItem.Content>
+  );
+};
+
+// TODO(wittjosiah): Reconcile the below components with DevicesContainer in @dxos/plugin-client.
+
+type InvitationComponentProps = Partial<
+  Pick<Invitation, 'authCode' | 'invitationId'> & {
+    state: Invitation.State;
+    url: string;
+    onBack: () => void;
+  }
+>;
+
+const InvitationSection = ({
+  state = Invitation.State.INIT,
+  authCode,
+  invitationId = 'never',
+  url = 'never',
+  onBack,
+}: InvitationComponentProps) => {
+  const activeView =
+    state < 0
+      ? 'init'
+      : state >= Invitation.State.CANCELLED
+        ? 'complete'
+        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
+          ? 'auth-code'
+          : 'qr-code';
+  return (
+    <Viewport.Root activeView={activeView}>
+      <Viewport.Views>
+        <Viewport.View id='init'>
+          {/* This view intentionally left blank while conditionally rendering the viewport. */}
+        </Viewport.View>
+        <Viewport.View id='complete'>
+          <InvitationComplete statusValue={state} />
+        </Viewport.View>
+        <Viewport.View id='auth-code'>
+          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onBack} />
+        </Viewport.View>
+        <Viewport.View id='qr-code'>
+          <InvitationQR id={invitationId} url={url} onCancel={onBack} />
+        </Viewport.View>
+      </Viewport.Views>
+    </Viewport.Root>
+  );
+};
+
+const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel?: () => void }) => {
+  const { t } = useTranslation('os');
+  const qrLabel = useId('members-container__qr-code');
+  const emoji = hexToEmoji(id);
+  return (
+    <Clipboard.Provider>
+      <p className='text-description'>{t('qr code description', { ns: SPACE_PLUGIN })}</p>
+      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
+        <div role='none' className='is-full aspect-square relative text-description'>
+          <QR
+            rounding={100}
+            backgroundColor='transparent'
+            color='currentColor'
+            aria-labelledby={qrLabel}
+            errorCorrectionLevel='Q'
+            cutout={true}
+          >
+            {url ?? 'never'}
+          </QR>
+          <Centered>
+            <Emoji text={emoji} />
+          </Centered>
+        </div>
+        <span id={qrLabel} className='sr-only'>
+          {t('qr label')}
+        </span>
+        <Clipboard.Button value={url ?? 'never'} />
+      </div>
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </Clipboard.Provider>
+  );
+};
+
+const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel?: () => void }) => {
+  const { t } = useTranslation('os');
+  const emoji = hexToEmoji(id);
+
+  return (
+    <>
+      <p className='text-description'>{t('auth other device emoji message')}</p>
+      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
+      <p className='text-description'>{t('auth code message')}</p>
+      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </>
+  );
+};
+
+const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
+  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+};

package/src/components/{AdvancedObjectSettings → ObjectSettingsContainer}/AdvancedObjectSettings.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useState } from 'react';
 
 import { type ForeignKey, ForeignKeySchema } from '@dxos/echo-schema';
 import { getMeta, type ReactiveEchoObject } from '@dxos/react-client/echo';
-import { IconButton, useTranslation, Separator } from '@dxos/react-ui';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
 import { ForeignKeys } from './ForeignKeys';
@@ -51,7 +51,6 @@ export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps)
   // TODO(wittjosiah): This should be wrapped in an "Advanced" accordion.
   return (
     <>
-      <Separator />
       <div className='p-2 flex flex-col gap-4'>
         <h2>{t('advanced settings label')}</h2>
         <div className='flex items-center'>
@@ -66,6 +65,7 @@ export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps)
         </div>
         {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
       </div>
+
       {adding && <Form schema={ForeignKeySchema} values={initialValues} onSave={handleSave} onCancel={handleCancel} />}
     </>
   );

package/src/components/ObjectSettingsContainer/BaseObjectSettings.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, useRef } from 'react';
+
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { meta } from '../../meta';
+
+export type BaseObjectSettingsProps = ThemedClassName<
+  PropsWithChildren<{
+    object: ReactiveEchoObject<any>;
+  }>
+>;
+
+export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // TODO(wittjosiah): This should be a form based on the schema of the object.
+  //  The form should only include fields with a specific settings annotation.
+  //  Perhaps also including the field of the title annotation as well.
+  return (
+    <form className={mx('flex flex-col p-2 gap-2', classNames)}>
+      <Input.Root>
+        <Input.Label>{t('name label')}</Input.Label>
+        <Input.TextInput
+          ref={inputRef}
+          placeholder={t('name placeholder')}
+          value={object.name ?? ''}
+          onChange={(event) => {
+            object.name = event.target.value;
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              inputRef.current?.blur();
+            }
+          }}
+        />
+      </Input.Root>
+      {children}
+    </form>
+  );
+};

package/src/components/ObjectSettingsContainer/ObjectSettingsContainer.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { Clipboard } from '@dxos/react-ui';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { AdvancedObjectSettings } from './AdvancedObjectSettings';
+import { BaseObjectSettings } from './BaseObjectSettings';
+
+export type ObjectSettingsContainerProps = {
+  object: ReactiveEchoObject<any>;
+  role: string;
+};
+
+export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContainerProps) => {
+  const data = useMemo(() => ({ subject: object }), [object]);
+
+  return (
+    <Clipboard.Provider>
+      <StackItem.Content toolbar={false} role={role}>
+        <div className='flex flex-col overflow-y-auto divide-y divide-separator'>
+          <BaseObjectSettings object={object}>
+            <Surface role='base-object-settings' data={data} />
+          </BaseObjectSettings>
+          <Surface role='object-settings' data={data} />
+          <AdvancedObjectSettings object={object} />
+        </div>
+      </StackItem.Content>
+    </Clipboard.Provider>
+  );
+};

package/src/components/ObjectSettingsContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ObjectSettingsContainer';

package/src/components/PopoverRenameObject.tsx

@@ -38,7 +38,7 @@ export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<an
         <Input.Root>
           <Input.Label srOnly>{t('object name label')}</Input.Label>
           <Input.TextInput
-            placeholder={t('object title placeholder')}
+            placeholder={t('object placeholder')}
             value={name}
             data-testid='spacePlugin.renameObject.input'
             onChange={({ target: { value } }) => setName(value)}

package/src/components/SpacePresence.tsx

@@ -12,8 +12,7 @@ import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import {
   Avatar,
-  AvatarGroup,
-  AvatarGroupItem,
+  type AvatarContentProps,
   type Size,
   type ThemedClassName,
   Tooltip,
@@ -113,16 +112,16 @@ export const FullPresence = (props: MemberPresenceProps) => {
   }
 
   return (
-    <AvatarGroup.Root size={size} classNames='mbs-2 mie-4' data-testid='spacePlugin.presence'>
+    <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
         <Tooltip.Root key={member.identity.identityKey.toHex()}>
           <Tooltip.Trigger>
             <PrensenceAvatar
               identity={member.identity}
-              group
               match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
               index={members.length - i}
               onClick={() => onMemberClick?.(member)}
+              size={size}
             />
           </Tooltip.Trigger>
           <Tooltip.Portal>
@@ -137,12 +136,14 @@ export const FullPresence = (props: MemberPresenceProps) => {
       {members.length > 3 && (
         <Tooltip.Root>
           <Tooltip.Trigger>
-            <AvatarGroupItem.Root status='inactive'>
-              <Avatar.Frame style={{ zIndex: members.length - 4 }}>
-                {/* TODO(wittjosiah): Make text fit. */}
-                <Avatar.Fallback text={`+${members.length - 3}`} />
-              </Avatar.Frame>
-            </AvatarGroupItem.Root>
+            <Avatar.Root>
+              {/* TODO(wittjosiah): Make text fit. */}
+              <Avatar.Content
+                status='inactive'
+                style={{ zIndex: members.length - 4 }}
+                fallback={`+${members.length - 3}`}
+              />
+            </Avatar.Root>
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content side='bottom'>
@@ -156,7 +157,7 @@ export const FullPresence = (props: MemberPresenceProps) => {
                     data-testid='identity-list-item'
                   >
                     {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                    <PrensenceAvatar identity={member.identity} showName match={member.currentlyAttended} />
+                    <PrensenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
                   </ListItem.Root>
                 ))}
               </List>
@@ -164,35 +165,36 @@ export const FullPresence = (props: MemberPresenceProps) => {
           </Tooltip.Portal>
         </Tooltip.Root>
       )}
-    </AvatarGroup.Root>
+    </div>
   );
 };
 
-type PresenceAvatarProps = {
+type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
   identity: Identity;
   showName?: boolean;
   match?: boolean;
-  group?: boolean;
   index?: number;
   onClick?: () => void;
 };
 
-const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: PresenceAvatarProps) => {
-  const Root = group ? AvatarGroupItem.Root : Avatar.Root;
+const PrensenceAvatar = ({ identity, showName, match, index, onClick, size }: PresenceAvatarProps) => {
   const status = match ? 'current' : 'active';
   const fallbackValue = keyToFallback(identity.identityKey);
   return (
-    <Root status={status} hue={identity.profile?.data?.hue || fallbackValue.hue}>
-      <Avatar.Frame
+    <Avatar.Root>
+      <Avatar.Content
+        status={status}
+        hue={identity.profile?.data?.hue || fallbackValue.hue}
         data-testid='spacePlugin.presence.member'
         data-status={status}
+        size={size}
+        classNames='mbs-2 mie-4'
         {...(index ? { style: { zIndex: index } } : {})}
         onClick={() => onClick?.()}
-      >
-        <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
-      </Avatar.Frame>
-      {showName && <Avatar.Label classNames='text-sm truncate pli-2'>{getName(identity)}</Avatar.Label>}
-    </Root>
+        fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+      />
+      <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+    </Avatar.Root>
   );
 };