@dxos/plugin-space 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

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,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/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

@@ -16,6 +16,7 @@ import {
   type Size,
   type ThemedClassName,
   Tooltip,
+  Popover,
   useTranslation,
   List,
   ListItem,
@@ -115,28 +116,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 +144,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 +161,9 @@ export const FullPresence = (props: MemberPresenceProps) => {
                   </ListItem.Root>
                 ))}
               </List>
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       )}
     </div>
   );
@@ -251,21 +249,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;

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -49,21 +49,13 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
 
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <AttentionGlyph
-          syncing={syncing}
-          attended={isAttended}
-          containsAttended={containsAttended}
-          classNames='self-center mie-1'
-        />
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
-          <span>{t('syncing label')}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
+      <AttentionGlyph
+        syncing={syncing}
+        attended={isAttended}
+        containsAttended={containsAttended}
+        classNames='self-center mie-1'
+      />
+    </Tooltip.Trigger>
   );
 };

package/src/components/index.ts

@@ -11,11 +11,9 @@ export * from './MembersContainer';
 export * from './MenuFooter';
 export * from './ObjectSettings';
 export * from './PersistenceStatus';
-export * from './PopoverAddSpace';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
 export * from './SchemaContainer';
-export * from './ShareSpaceButton';
 export * from './SpacePresence';
 export * from './SpacePluginSettings';
 export * from './SpaceSettings';

package/src/hooks/useInputSurfaceLookup.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema as S } from 'effect';
+import { type Schema } from 'effect';
 import React, { useCallback } from 'react';
 
 import { usePluginManager, isSurfaceAvailable, Surface } from '@dxos/app-framework';
@@ -18,7 +18,7 @@ export const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
   const pluginManager = usePluginManager();
 
   return useCallback(
-    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps }) => {
+    ({ prop, schema, inputProps }: { prop: string; schema: Schema.Schema<any>; inputProps: InputProps }) => {
       const composedData = { prop, schema, ...baseData };
       if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
         return undefined;

package/src/translations.ts

@@ -15,7 +15,6 @@ export default [
       [SPACE_PLUGIN]: {
         'plugin name': 'Spaces',
         'first run message': 'Nothing selected.',
-        'add space label': 'Create or join a space',
         'create space label': 'Create space',
         'join space label': 'Join space',
         'empty space message': 'No documents',

package/src/types/collection.ts

@@ -2,15 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { Expando, Ref, TypedObject } from '@dxos/echo-schema';
 
 export class CollectionType extends TypedObject({ typename: 'dxos.org/type/Collection', version: '0.1.0' })({
-  name: S.optional(S.String),
-  objects: S.mutable(S.Array(Ref(Expando))),
+  name: Schema.optional(Schema.String),
+  objects: Schema.mutable(Schema.Array(Ref(Expando))),
   // Key is schema typename and value is reference to a view object of the associated schema.
   // Having collection reference the views rather than vice versa ensures that the state converges to a single view per key (i.e. type).
   // This also leaves open a future where this key could be changed to allow for multiple stack views per section.
   // TODO(wittjosiah): Any way to make this more type safe?
   // TODO(wittjosiah): Should the views be separate objects or just be schemas for view data in this record?
-  views: S.mutable(S.Record({ key: S.String, value: Ref(Expando) })),
+  views: Schema.mutable(Schema.Record({ key: Schema.String, value: Ref(Expando) })),
 }) {}

package/src/types/thread.ts

@@ -2,23 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
-import { MessageType } from '@dxos/schema';
+import { Schema } from 'effect';
+
+import { Expando, Ref, TypedObject } from '@dxos/echo-schema';
+import { DataType } from '@dxos/schema';
 
 // TODO(wittjosiah): These types were placed here rather than in @dxos/plugin-thread
 //   in order to avoid a circular dependency between threads and other objects that use threads.
 
-export const ThreadStatus = S.Union(S.Literal('staged'), S.Literal('active'), S.Literal('resolved'));
+export const ThreadStatus = Schema.Union(
+  Schema.Literal('staged'),
+  Schema.Literal('active'),
+  Schema.Literal('resolved'),
+);
 
 export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread', version: '0.1.0' })({
-  name: S.optional(S.String),
+  name: Schema.optional(Schema.String),
   /** AM cursor-range: 'from:to'. */
-  anchor: S.optional(S.String),
-  status: S.optional(ThreadStatus),
-  messages: S.mutable(S.Array(Ref(MessageType))),
+  anchor: Schema.optional(Schema.String),
+  status: Schema.optional(ThreadStatus),
+  messages: Schema.mutable(Schema.Array(Ref(DataType.Message))),
 }) {}
 
 export class ChannelType extends TypedObject({ typename: 'dxos.org/type/Channel', version: '0.1.0' })({
-  name: S.optional(S.String),
+  name: Schema.optional(Schema.String),
   queue: Ref(Expando),
 }) {}