@dxos/plugin-space 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

package/src/capabilities/spaces-ready.ts

@@ -2,7 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, createIntent, type PluginsContext, Capabilities, LayoutAction } from '@dxos/app-framework';
+import { Option } from 'effect';
+
+import { contributes, createIntent, type PluginContext, Capabilities, LayoutAction } from '@dxos/app-framework';
 import { SubscriptionList } from '@dxos/async';
 import { Expando } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
@@ -23,17 +25,17 @@ import { COMPOSER_SPACE_LOCK, SHARED } from '../util';
 const ACTIVE_NODE_BROADCAST_INTERVAL = 30_000;
 const WAIT_FOR_OBJECT_TIMEOUT = 1000;
 
-export default async (context: PluginsContext) => {
+export default async (context: PluginContext) => {
   const subscriptions = new SubscriptionList();
   const spaceSubscriptions = new SubscriptionList();
 
-  const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-  const { graph } = context.requestCapability(Capabilities.AppGraph);
-  const layout = context.requestCapability(Capabilities.Layout);
-  const deck = context.requestCapability(DeckCapabilities.DeckState);
-  const attention = context.requestCapability(AttentionCapabilities.Attention);
-  const state = context.requestCapability(SpaceCapabilities.MutableState);
-  const client = context.requestCapability(ClientCapabilities.Client);
+  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+  const { graph } = context.getCapability(Capabilities.AppGraph);
+  const layout = context.getCapability(Capabilities.Layout);
+  const deck = context.getCapability(DeckCapabilities.DeckState);
+  const attention = context.getCapability(AttentionCapabilities.Attention);
+  const state = context.getCapability(SpaceCapabilities.MutableState);
+  const client = context.getCapability(ClientCapabilities.Client);
 
   const defaultSpace = client.spaces.default;
   await defaultSpace.waitUntilReady();
@@ -49,7 +51,7 @@ export default async (context: PluginsContext) => {
 
   const {
     objects: [spacesOrder],
-  } = await defaultSpace.db.query(Filter.schema(Expando, { key: SHARED })).run();
+  } = await defaultSpace.db.query(Filter.type(Expando, { key: SHARED })).run();
   if (!spacesOrder) {
     // TODO(wittjosiah): Cannot be a Folder because Spaces are not TypedObjects so can't be saved in the database.
     //  Instead, we store order as an array of space ids.
@@ -65,10 +67,10 @@ export default async (context: PluginsContext) => {
           return;
         }
 
-        const node = graph.findNode(active[0]);
+        const node = graph.getNode(active[0]).pipe(Option.getOrNull);
         if (!node && active[0].length === FQ_ID_LENGTH) {
           const timeout = setTimeout(async () => {
-            const node = graph.findNode(active[0]);
+            const node = graph.getNode(active[0]).pipe(Option.getOrNull);
             if (!node) {
               await dispatch(createIntent(SpaceAction.WaitForObject, { id: active[0] }));
             }

package/src/capabilities/state.ts

@@ -4,7 +4,7 @@
 
 import { effect } from '@preact/signals-core';
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
 import { PublicKey } from '@dxos/keys';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { ComplexMap } from '@dxos/util';
@@ -13,7 +13,7 @@ import { SpaceCapabilities } from './capabilities';
 import { SPACE_PLUGIN } from '../meta';
 import { type PluginState } from '../types';
 
-export default (context: PluginsContext) => {
+export default (context: PluginContext) => {
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
@@ -29,7 +29,7 @@ export default (context: PluginsContext) => {
     .prop({ key: 'spaceNames', type: LocalStorageStore.json<Record<string, string>>() })
     .prop({ key: 'enabledEdgeReplication', type: LocalStorageStore.bool() });
 
-  const manager = context.requestCapability(Capabilities.PluginManager);
+  const manager = context.getCapability(Capabilities.PluginManager);
   const unsubscribe = effect(() => {
     // TODO(wittjosiah): Find a way to make this capability-based.
     const enabled = manager.enabled.includes('dxos.org/plugin/stack');

package/src/components/AwaitingObject.tsx

@@ -26,7 +26,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   const layout = useLayout();
 
   const client = useClient();
-  const objects = useQuery(client.spaces, Filter.all());
+  const objects = useQuery(client.spaces, Filter.everything());
 
   useEffect(() => {
     if (!id) {

package/src/components/CollectionMain.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
-import { baseSurface, descriptionText, mx } from '@dxos/react-ui-theme';
+import { baseSurface, descriptionMessage, mx } from '@dxos/react-ui-theme';
 
 import { SPACE_PLUGIN } from '../meta';
 import type { CollectionType } from '../types';
@@ -21,10 +21,7 @@ export const CollectionMain = ({ collection }: { collection: CollectionType }) =
     >
       <p
         role='alert'
-        className={mx(
-          descriptionText,
-          'border border-dashed border-neutral-400/50 rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words',
-        )}
+        className={mx(descriptionMessage, 'rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words')}
       >
         {collection.name ?? t('unnamed collection label')}
       </p>

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -35,7 +35,7 @@ const meta: Meta<typeof CreateObjectDialog> = {
   decorators: [
     withClientProvider({ createIdentity: true, createSpace: true, types: [CollectionType] }),
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout(),
   ],
   parameters: {
     translations: [...translations, osTranslations],
@@ -66,7 +66,7 @@ export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
 export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
   render: (args) => {
     const space = useSpace();
-    const [collection] = useQuery(space, Filter.schema(CollectionType));
+    const [collection] = useQuery(space, Filter.type(CollectionType));
 
     useEffect(() => {
       if (space) {

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -46,7 +46,7 @@ export const CreateObjectDialog = ({
 
   const resolve = useCallback(
     (typename: string) =>
-      manager.context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
+      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
     [manager],
   );
 

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -2,11 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect } from 'effect';
+import { Effect, type Schema } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { type S } from '@dxos/echo-schema';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -16,7 +15,7 @@ import { SpaceAction, SpaceForm } from '../../types';
 
 export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
 
-type FormValues = S.Schema.Type<typeof SpaceForm>;
+type FormValues = Schema.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
 
 export const CreateSpaceDialog = () => {

package/src/components/MembersContainer.stories.tsx

@@ -16,11 +16,7 @@ import translations from '../translations';
 const meta: Meta = {
   title: 'plugins/plugin-space/MembersContainer',
   component: MembersContainer,
-  decorators: [
-    withClientProvider({ createIdentity: true, createSpace: true }),
-    withTheme,
-    withLayout({ tooltips: true }),
-  ],
+  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
   parameters: {
     layout: 'fullscreen',
     translations: [...translations, osTranslations],

package/src/components/MembersContainer.tsx

@@ -6,6 +6,7 @@ import { Check, X } from '@phosphor-icons/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';
@@ -27,7 +28,7 @@ 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.
@@ -50,6 +51,7 @@ export const MembersContainer = ({
 }) => {
   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),
@@ -77,13 +79,16 @@ export const MembersContainer = ({
         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),
@@ -96,13 +101,16 @@ export const MembersContainer = ({
         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),

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/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/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/ObjectSettings/ObjectSettingsContainer.tsx

@@ -5,15 +5,14 @@
 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';
 
-import { AdvancedObjectSettings } from './AdvancedObjectSettings';
 import { BaseObjectSettings } from './BaseObjectSettings';
 
 export type ObjectSettingsContainerProps = {
-  object: ReactiveEchoObject<any>;
+  object: AnyLiveObject<any>;
   role: string;
 };
 
@@ -28,7 +27,8 @@ export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContaine
             <Surface role='base-object-settings' data={data} />
           </BaseObjectSettings>
           <Surface role='object-settings' data={data} />
-          <AdvancedObjectSettings object={object} />
+          {/* TODO(wittjosiah): Remove? */}
+          {/* <AdvancedObjectSettings object={object} /> */}
         </div>
       </StackItem.Content>
     </Clipboard.Provider>

package/src/components/PersistenceStatus.tsx

@@ -68,20 +68,17 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
     case Status.PERSISTED_LOCALLY:
     default:
       return (
-        <Tooltip.Root delayDuration={400}>
-          <Tooltip.Trigger role='status' className='flex items-center'>
-            <CheckCircle className={mx(getSize(4), 'me-1')} />
-            {displayMessage && (
-              <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
-            )}
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content>
-              {t('persisted locally message')}
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        <Tooltip.Trigger
+          delayDuration={400}
+          role='status'
+          content={t('persisted locally message')}
+          className='flex items-center'
+        >
+          <CheckCircle className={mx(getSize(4), 'me-1')} />
+          {displayMessage && (
+            <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
+          )}
+        </Tooltip.Trigger>
       );
   }
 };

package/src/components/PopoverRenameObject.tsx

@@ -4,9 +4,10 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
+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';
 
@@ -19,6 +20,7 @@ export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
   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: Live<any> }) => {
         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: Live<any> }) => {
           />
         </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/SpacePresence.stories.tsx

@@ -100,7 +100,7 @@ export const Small = () => {
 
 const meta: Meta = {
   title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: { translations },
 };
 

package/src/components/SpacePresence.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Option } from 'effect';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
@@ -16,6 +17,7 @@ import {
   type Size,
   type ThemedClassName,
   Tooltip,
+  Popover,
   useTranslation,
   List,
   ListItem,
@@ -115,28 +117,25 @@ export const FullPresence = (props: MemberPresenceProps) => {
   return (
     <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 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}
-              onClick={() => onMemberClick?.(member)}
-              size={size}
-            />
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content side='bottom'>
-              <span>{getName(member.identity)}</span>
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        <Tooltip.Trigger
+          key={member.identity.identityKey.toHex()}
+          side='bottom'
+          content={getName(member.identity)}
+          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}
+            onClick={() => onMemberClick?.(member)}
+            size={size}
+          />
+        </Tooltip.Trigger>
       ))}
 
       {members.length > 3 && (
-        <Tooltip.Root>
-          <Tooltip.Trigger className='grid focus:outline-none'>
+        <Popover.Root>
+          <Popover.Trigger className='grid focus:outline-none'>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
@@ -146,10 +145,10 @@ export const FullPresence = (props: MemberPresenceProps) => {
                 size={size}
               />
             </Avatar.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content side='bottom'>
-              <Tooltip.Arrow />
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content side='bottom'>
+              <Popover.Arrow />
               <List classNames='max-h-56 overflow-y-auto'>
                 {members.map((member) => (
                   <ListItem.Root
@@ -163,9 +162,9 @@ export const FullPresence = (props: MemberPresenceProps) => {
                   </ListItem.Root>
                 ))}
               </List>
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       )}
     </div>
   );
@@ -219,7 +218,7 @@ export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps)
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
@@ -251,21 +250,13 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <AttentionGlyph
-          attended={attended}
-          containsAttended={containsAttended}
-          presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
-          classNames='self-center mie-1'
-        />
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom'>
-          <span>{t('presence label', { count })}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>
+      <AttentionGlyph
+        attended={attended}
+        containsAttended={containsAttended}
+        presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
+        classNames='self-center mie-1'
+      />
+    </Tooltip.Trigger>
   );
 };

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema as S } from 'effect';
+import { pipe, Schema } from 'effect';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
@@ -25,7 +25,9 @@ import { StackItem } from '@dxos/react-ui-stack';
 import { SPACE_PLUGIN } from '../../meta';
 import { SpaceAction, SpaceForm } from '../../types';
 
-const FormSchema = SpaceForm.pipe(S.extend(S.Struct({ archived: S.Boolean.annotations({ title: 'Archive space' }) })));
+const FormSchema = SpaceForm.pipe(
+  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
+);
 
 export type SpaceSettingsContainerProps = {
   space: Space;
@@ -54,7 +56,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
   );
 
   const handleSave = useCallback(
-    (properties: S.Schema.Type<typeof FormSchema>) => {
+    (properties: Schema.Schema.Type<typeof FormSchema>) => {
       void toggleEdgeReplication(properties.edgeReplication);
       if (properties.name !== space.properties.name) {
         space.properties.name = properties.name;