@dxos/plugin-space 0.8.1 → 0.8.2-main.2f9c567

package/src/components/MembersContainer.tsx

@@ -3,15 +3,16 @@
 //
 
 import { Check, X } from '@phosphor-icons/react';
-import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';
+import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 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 { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
+import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import {
@@ -27,7 +28,8 @@ import {
 import { hexToEmoji } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType } from '../types';
+import { CollectionType, SpaceAction } from '../types';
+import { COMPOSER_SPACE_LOCK } from '../util';
 
 // TODO(wittjosiah): Copied from Shell.
 const activeActionKey = 'dxos:react-shell/space-manager/active-action';
@@ -47,8 +49,9 @@ export const MembersContainer = ({
   space: Space;
   createInvitationUrl: (invitationCode: string) => string;
 }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(SPACE_PLUGIN);
   const config = useConfig();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const invitations = useSpaceInvitations(space.key);
   const visibleInvitations = invitations?.filter(
     (invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state),
@@ -64,20 +67,28 @@ export const MembersContainer = ({
   // TODO(wittjosiah): Track which was the most recently viewed object.
   const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
 
+  const locked = space.properties[COMPOSER_SPACE_LOCK];
+  const handleChangeLocked = useCallback(() => {
+    space.properties[COMPOSER_SPACE_LOCK] = !locked;
+  }, [locked, space]);
+
   const inviteActions = useMemo(
     (): Record<string, ActionMenuItem> => ({
       inviteOne: {
-        label: t('invite one label'),
-        description: t('invite one description'),
+        label: t('invite one label', { ns: 'os' }),
+        description: t('invite one description', { ns: 'os' }),
         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),
-          });
+        onClick: async () => {
+          const { data: invitation } = await dispatch(
+            createIntent(SpaceAction.Share, {
+              space,
+              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),
@@ -86,17 +97,20 @@ export const MembersContainer = ({
         },
       },
       inviteMany: {
-        label: t('invite many label'),
-        description: t('invite many description'),
+        label: t('invite many label', { ns: 'os' }),
+        description: t('invite many description', { ns: 'os' }),
         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),
-          });
+        onClick: async () => {
+          const { data: invitation } = await dispatch(
+            createIntent(SpaceAction.Share, {
+              space,
+              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),
@@ -118,38 +132,50 @@ export const MembersContainer = ({
 
   return (
     <Clipboard.Provider>
-      <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'
-                  />
-                </>
+      <StackItem.Content classNames='block overflow-y-auto'>
+        <ControlPage>
+          <ControlSection title={t('members verbose label')} description={t('members description')}>
+            <ControlFrame>
+              <ControlFrameItem title={t('members label')}>
+                <SpaceMemberList spaceKey={space.key} includeSelf />
+              </ControlFrameItem>
+              {locked && (
+                <ControlFrameItem title={t('invitations label')}>
+                  <p className='text-description mbe-2'>{t('locked space description')}</p>
+                </ControlFrameItem>
+              )}
+              {!locked && (
+                <ControlFrameItem title={t('invitations label')}>
+                  {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
+                  {!selectedInvitation && (
+                    <>
+                      <p className='text-description mbe-2'>{t('space invitation description')}</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>
               )}
-            </ControlFrameItem>
-          </ControlFrame>
-        </ControlSection>
+            </ControlFrame>
+            {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
+            <div className='justify-center gap-4 p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+              <ControlItemInput title={t('space locked label')} description={t('space locked description')}>
+                <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
+              </ControlItemInput>
+            </div>
+          </ControlSection>
+        </ControlPage>
       </StackItem.Content>
     </Clipboard.Provider>
   );

package/src/components/MenuFooter.tsx

@@ -5,14 +5,14 @@
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
-import { type ReactiveEchoObject, getSpace } from '@dxos/client/echo';
+import { type AnyLiveObject, getSpace } from '@dxos/client/echo';
 import { useClient } from '@dxos/react-client';
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { getSpaceDisplayName } from '../util';
 
-export const MenuFooter = ({ object }: { object: ReactiveEchoObject<any> }) => {
+export const MenuFooter = ({ object }: { object: AnyLiveObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const space = getSpace(object);

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

@@ -5,7 +5,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 { getMeta, type AnyLiveObject } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -18,7 +18,7 @@ const initialValues = {
 };
 
 export type AdvancedObjectSettingsProps = {
-  object: ReactiveEchoObject<any>;
+  object: AnyLiveObject<any>;
 };
 
 export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {

package/src/components/{ObjectSettingsContainer → ObjectSettings}/BaseObjectSettings.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, useRef } from 'react';
 
-import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { type AnyLiveObject } from '@dxos/react-client/echo';
 import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -12,7 +12,7 @@ import { meta } from '../../meta';
 
 export type BaseObjectSettingsProps = ThemedClassName<
   PropsWithChildren<{
-    object: ReactiveEchoObject<any>;
+    object: AnyLiveObject<any>;
   }>
 >;
 

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

@@ -5,7 +5,7 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { type AnyLiveObject } from '@dxos/react-client/echo';
 import { Clipboard } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
@@ -13,7 +13,7 @@ import { AdvancedObjectSettings } from './AdvancedObjectSettings';
 import { BaseObjectSettings } from './BaseObjectSettings';
 
 export type ObjectSettingsContainerProps = {
-  object: ReactiveEchoObject<any>;
+  object: AnyLiveObject<any>;
   role: string;
 };
 

package/src/components/PopoverAddSpace.tsx

@@ -16,7 +16,7 @@ export const PopoverAddSpace = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   return (
-    <div role='none' className='grid grid-cols-1 gap-1 [&>button]:justify-start'>
+    <div role='none' className='p-1 grid grid-cols-1 gap-1 [&>button]:justify-start'>
       <IconButton
         variant='ghost'
         label={t('create space label')}
@@ -24,7 +24,10 @@ export const PopoverAddSpace = () => {
         onClick={() => {
           void dispatch(createIntent(SpaceAction.OpenCreateSpace));
           void dispatch(
-            createIntent(LayoutAction.UpdatePopover, { part: 'popover', options: { anchorId: '', state: false } }),
+            createIntent(LayoutAction.UpdatePopover, {
+              part: 'popover',
+              options: { variant: 'react', anchorId: '', state: false },
+            }),
           );
         }}
         data-testid='spacePlugin.createSpace'
@@ -36,7 +39,10 @@ export const PopoverAddSpace = () => {
         onClick={() => {
           void dispatch(createIntent(SpaceAction.Join));
           void dispatch(
-            createIntent(LayoutAction.UpdatePopover, { part: 'popover', options: { anchorId: '', state: false } }),
+            createIntent(LayoutAction.UpdatePopover, {
+              part: 'popover',
+              options: { variant: 'react', anchorId: '', state: false },
+            }),
           );
         }}
         data-testid='spacePlugin.joinSpace'

package/src/components/PopoverRenameObject.tsx

@@ -4,21 +4,23 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { type ReactiveObject } from '@dxos/live-object';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
-import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
+import { Button, Input, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
 export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
 
-export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<any> }) => {
+export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);
   // TODO(wittjosiah): Use schema here.
   const object = obj as any;
   // TODO(burdon): Field should not be hardcoded field.
   const [name, setName] = useState(object.name || object.title || '');
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     try {
@@ -30,6 +32,12 @@ export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<an
         log.error('Failed to rename object', { err });
       }
     }
+    void dispatch(
+      createIntent(LayoutAction.UpdatePopover, {
+        part: 'popover',
+        options: { variant: 'react', anchorId: '', state: false },
+      }),
+    );
   }, [object, name]);
 
   return (
@@ -46,11 +54,9 @@ export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<an
           />
         </Input.Root>
       </div>
-      <Popover.Close asChild>
-        <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-          {t('done label', { ns: 'os' })}
-        </Button>
-      </Popover.Close>
+      <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
+        {t('done label', { ns: 'os' })}
+      </Button>
     </div>
   );
 };

package/src/components/PopoverRenameSpace.tsx

@@ -4,6 +4,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
@@ -15,9 +16,16 @@ export const PopoverRenameSpace = ({ space }: { space: Space }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);
   const [name, setName] = useState(space.properties.name ?? '');
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     space.properties.name = name;
+    void dispatch(
+      createIntent(LayoutAction.UpdatePopover, {
+        part: 'popover',
+        options: { variant: 'react', anchorId: '', state: false },
+      }),
+    );
   }, [space, name]);
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?

package/src/components/SchemaContainer.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useState, useEffect } from 'react';
+
+import { type EchoSchema } from '@dxos/echo-schema';
+import { type Space } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { controlItemClasses, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { SPACE_PLUGIN } from '../meta';
+
+type SchemaPanelProps = { space: Space };
+
+// TODO(ZaymonFC):
+//   - Support deleting Schema. This should tie in to some sort of
+//     'DangerZone™️' / 'Are you really sure?' / 'this might have consequences' component.
+
+/**
+ * Subscribe to and retrieve all schemas from a space's schema registry.
+ */
+export const useQuerySpaceSchemas = (space: Space): EchoSchema[] => {
+  const [schemas, setSchemas] = useState<EchoSchema[]>([]);
+
+  useEffect(() => {
+    const query = space.db.schemaRegistry.query();
+    const initialResults = query.runSync();
+    setSchemas(initialResults);
+
+    const unsubscribe = query.subscribe(() => setSchemas(query.results));
+    return () => unsubscribe();
+  }, [space]);
+
+  return schemas;
+};
+
+export const SchemaContainer = ({ space }: SchemaPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const schemas = useQuerySpaceSchemas(space);
+
+  return (
+    <StackItem.Content classNames='block overflow-y-auto'>
+      <ControlPage>
+        <ControlSection title={t('schema verbose label')} description={t('schema description')}>
+          <div role='none' className={controlItemClasses}>
+            {schemas.length === 0 && <div className='text-center plb-4'>{t('no schemas found message')}</div>}
+            {schemas.map((schema) => (
+              <div key={schema.id}>
+                <div>{schema.typename}</div>
+              </div>
+            ))}
+          </div>
+        </ControlSection>
+      </ControlPage>
+    </StackItem.Content>
+  );
+};

package/src/components/SpacePluginSettings.tsx

@@ -4,20 +4,45 @@
 
 import React from 'react';
 
-import { Input, useTranslation } from '@dxos/react-ui';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useClient } from '@dxos/react-client';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Input, toLocalizedString, useTranslation, List, ListItem, Button } from '@dxos/react-ui';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
-import { type SpaceSettingsProps } from '../types';
+import { SpaceAction, type SpaceSettingsProps } from '../types';
+import { getSpaceDisplayName } from '../util';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const client = useClient();
+  const spaces = useSpaces({ all: settings.showHidden });
 
+  // TODO(wittjosiah): Migrate to new form container.
   return (
     <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
         <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
       </DeprecatedFormInput>
+      <div role='none'>
+        <h2 className='text-xl my-4'>Space Settings</h2>
+        <List classNames='max-w-md mx-auto'>
+          {spaces.map((space) => (
+            <ListItem.Root key={space.id}>
+              <ListItem.Heading classNames='flex flex-col grow truncate mbe-2'>
+                {toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t)}
+              </ListItem.Heading>
+              <ListItem.Endcap>
+                <Button onClick={() => dispatch(createIntent(SpaceAction.OpenSettings, { space }))}>
+                  {t('open space settings label')}
+                </Button>
+              </ListItem.Endcap>
+            </ListItem.Root>
+          ))}
+        </List>
+      </div>
     </DeprecatedFormContainer>
   );
 };

package/src/components/SpacePresence.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
@@ -20,6 +20,7 @@ import {
   List,
   ListItem,
   useDefaultValue,
+  type DxAvatar,
 } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
@@ -115,8 +116,8 @@ export const FullPresence = (props: MemberPresenceProps) => {
     <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
+          <Tooltip.Trigger className='grid focus:outline-none'>
+            <PresenceAvatar
               identity={member.identity}
               match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
               index={members.length - i}
@@ -135,13 +136,14 @@ export const FullPresence = (props: MemberPresenceProps) => {
 
       {members.length > 3 && (
         <Tooltip.Root>
-          <Tooltip.Trigger>
+          <Tooltip.Trigger className='grid focus:outline-none'>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
                 status='inactive'
                 style={{ zIndex: members.length - 4 }}
                 fallback={`+${members.length - 3}`}
+                size={size}
               />
             </Avatar.Root>
           </Tooltip.Trigger>
@@ -157,7 +159,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} size={size} showName match={member.currentlyAttended} />
+                    <PresenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
                   </ListItem.Root>
                 ))}
               </List>
@@ -177,26 +179,28 @@ type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
   onClick?: () => void;
 };
 
-const PrensenceAvatar = ({ identity, showName, match, index, onClick, size }: PresenceAvatarProps) => {
-  const status = match ? 'current' : 'active';
-  const fallbackValue = keyToFallback(identity.identityKey);
-  return (
-    <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?.()}
-        fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
-      />
-      <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
-    </Avatar.Root>
-  );
-};
+const PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(
+  ({ identity, showName, match, index, onClick, size }, forwardedRef) => {
+    const status = match ? 'current' : 'active';
+    const fallbackValue = keyToFallback(identity.identityKey);
+    return (
+      <Avatar.Root>
+        <Avatar.Content
+          status={status}
+          hue={identity.profile?.data?.hue || fallbackValue.hue}
+          data-testid='spacePlugin.presence.member'
+          data-status={status}
+          size={size}
+          {...(index ? { style: { zIndex: index } } : {})}
+          onClick={onClick}
+          fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+          ref={forwardedRef}
+        />
+        <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+      </Avatar.Root>
+    );
+  },
+);
 
 export type SmallPresenceLiveProps = {
   id?: string;

package/src/components/SpaceSettings/{SpacePropertiesForm.stories.tsx → SpaceSettingsContainer.stories.tsx}

@@ -10,21 +10,21 @@ import React from 'react';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { SpacePropertiesForm, type SpacePropertiesFormProps } from './SpacePropertiesForm';
+import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
 import translations from '../../translations';
 
-const Story = (args: Partial<SpacePropertiesFormProps>) => {
+const Story = (args: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpacePropertiesForm {...args} space={space!} />
+      <SpaceSettingsContainer {...args} space={space!} />
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-space/SpacePropertiesForm',
-  component: SpacePropertiesForm,
+  title: 'plugins/plugin-space/SpaceSettingsContainer',
+  component: SpaceSettingsContainer,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
   parameters: {
@@ -35,4 +35,4 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: StoryObj<typeof SpacePropertiesForm> = {};
+export const Default: StoryObj<typeof SpaceSettingsContainer> = {};