@dxos/plugin-space 0.6.14-main.8b352a0 → 0.6.14-staging.3e2eaca

package/src/SpacePlugin.tsx

@@ -6,18 +6,22 @@ import { signal } from '@preact/signals-core';
 import React from 'react';
 
 import {
+  type GraphProvides,
   type IntentDispatcher,
   type IntentPluginProvides,
   LayoutAction,
+  type LayoutProvides,
   type LocationProvides,
   NavigationAction,
   type Plugin,
   type PluginDefinition,
   Surface,
+  findPlugin,
   firstIdInPart,
   openIds,
   parseGraphPlugin,
   parseIntentPlugin,
+  parseLayoutPlugin,
   parseMetadataResolverPlugin,
   parseNavigationPlugin,
   resolvePlugin,
@@ -25,6 +29,7 @@ import {
 import { EventSubscriptions, type Trigger, type UnsubscribeCallback } from '@dxos/async';
 import { type HasId, isReactiveObject } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
+import { invariant } from '@dxos/invariant';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { Migrations } from '@dxos/migrations';
@@ -48,9 +53,9 @@ import {
   isSpace,
   loadObjectReferences,
   parseId,
+  FQ_ID_LENGTH,
 } from '@dxos/react-client/echo';
-import { Dialog } from '@dxos/react-ui';
-import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
+import { type JoinPanelProps, osTranslations } from '@dxos/shell/react';
 import { ComplexMap, nonNullable, reduceGroupBy } from '@dxos/util';
 
 import {
@@ -58,18 +63,19 @@ import {
   CollectionMain,
   CollectionSection,
   DefaultObjectSettings,
+  JoinDialog,
   MenuFooter,
-  MissingObject,
   PopoverRenameObject,
   PopoverRenameSpace,
-  SaveStatus,
   ShareSpaceButton,
   SmallPresence,
   SmallPresenceLive,
   SpacePresence,
-  SpaceSettings,
+  SpacePluginSettings,
   SpaceSettingsPanel,
   SyncStatus,
+  SpaceSettingsDialog,
+  type SpaceSettingsDialogProps,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
 import translations from './translations';
@@ -91,7 +97,7 @@ import {
 } from './util';
 
 const ACTIVE_NODE_BROADCAST_INTERVAL = 30_000;
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
+const WAIT_FOR_OBJECT_TIMEOUT = 1000;
 const SPACE_MAX_OBJECTS = 500;
 // https://stackoverflow.com/a/19016910
 const DIRECTORY_TYPE = 'text/directory';
@@ -100,6 +106,16 @@ export const parseSpacePlugin = (plugin?: Plugin) =>
   Array.isArray((plugin?.provides as any).space?.enabled) ? (plugin as Plugin<SpacePluginProvides>) : undefined;
 
 export type SpacePluginOptions = {
+  /**
+   * Base URL for the invitation link.
+   */
+  invitationUrl?: string;
+
+  /**
+   * Query parameter for the invitation code.
+   */
+  invitationParam?: string;
+
   /**
    * Fired when first run logic should be executed.
    *
@@ -119,6 +135,8 @@ export type SpacePluginOptions = {
 };
 
 export const SpacePlugin = ({
+  invitationUrl = window.location.origin,
+  invitationParam = 'spaceInvitationCode',
   firstRun,
   onFirstRun,
 }: SpacePluginOptions = {}): PluginDefinition<SpacePluginProvides> => {
@@ -132,23 +150,35 @@ export const SpacePlugin = ({
     // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap(PublicKey.hash),
     sdkMigrationRunning: {},
+    navigableCollections: false,
   });
   const subscriptions = new EventSubscriptions();
   const spaceSubscriptions = new EventSubscriptions();
   const graphSubscriptions = new Map<string, UnsubscribeCallback>();
 
   let clientPlugin: Plugin<ClientPluginProvides> | undefined;
+  let graphPlugin: Plugin<GraphProvides> | undefined;
   let intentPlugin: Plugin<IntentPluginProvides> | undefined;
+  let layoutPlugin: Plugin<LayoutProvides> | undefined;
   let navigationPlugin: Plugin<LocationProvides> | undefined;
   let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
 
+  const createSpaceInvitationUrl = (invitationCode: string) => {
+    const baseUrl = new URL(invitationUrl);
+    baseUrl.searchParams.set(invitationParam, invitationCode);
+    return baseUrl.toString();
+  };
+
   const onSpaceReady = async () => {
-    if (!clientPlugin || !navigationPlugin || !attentionPlugin) {
+    if (!clientPlugin || !intentPlugin || !graphPlugin || !navigationPlugin || !layoutPlugin || !attentionPlugin) {
       return;
     }
 
     const client = clientPlugin.provides.client;
+    const dispatch = intentPlugin.provides.intent.dispatch;
+    const graph = graphPlugin.provides.graph;
     const location = navigationPlugin.provides.location;
+    const layout = layoutPlugin.provides.layout;
     const attention = attentionPlugin.provides.attention;
     const defaultSpace = client.spaces.default;
 
@@ -166,6 +196,37 @@ export const SpacePlugin = ({
       defaultSpace.db.add(create({ key: SHARED, order: [] }));
     }
 
+    // Await missing objects.
+    subscriptions.add(
+      scheduledEffect(
+        () => ({
+          layoutMode: layout.layoutMode,
+          soloPart: location.active.solo?.[0],
+        }),
+        ({ layoutMode, soloPart }) => {
+          if (layoutMode !== 'solo' || !soloPart) {
+            return;
+          }
+
+          const node = graph.findNode(soloPart.id);
+          if (!node && soloPart.id.length === FQ_ID_LENGTH) {
+            const timeout = setTimeout(async () => {
+              const node = graph.findNode(soloPart.id);
+              if (!node) {
+                await dispatch({
+                  plugin: SPACE_PLUGIN,
+                  action: SpaceAction.WAIT_FOR_OBJECT,
+                  data: { id: soloPart.id },
+                });
+              }
+            }, WAIT_FOR_OBJECT_TIMEOUT);
+
+            return () => clearTimeout(timeout);
+          }
+        },
+      ),
+    );
+
     // Cache space names.
     subscriptions.add(
       client.spaces.subscribe(async (spaces) => {
@@ -289,6 +350,14 @@ export const SpacePlugin = ({
       settings.prop({ key: 'showHidden', type: LocalStorageStore.bool({ allowUndefined: true }) });
       state.prop({ key: 'spaceNames', type: LocalStorageStore.json<Record<string, string>>() });
 
+      // TODO(wittjosiah): Hardcoded due to circular dependency.
+      //   Should be based on a provides interface.
+      if (findPlugin(plugins, 'dxos.org/plugin/stack')) {
+        state.values.navigableCollections = true;
+      }
+
+      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      layoutPlugin = resolvePlugin(plugins, parseLayoutPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
@@ -311,19 +380,20 @@ export const SpacePlugin = ({
         await onFirstRun?.({ client, dispatch });
       };
 
-      // No need to unsubscribe because this observable completes when spaces are ready.
-      client.spaces.isReady.subscribe(async (ready) => {
-        if (ready) {
-          await clientPlugin?.provides.client.spaces.default.waitUntilReady();
-          if (firstRun) {
-            void firstRun?.wait().then(handleFirstRun);
-          } else {
-            await handleFirstRun();
-          }
+      subscriptions.add(
+        client.spaces.isReady.subscribe(async (ready) => {
+          if (ready) {
+            await clientPlugin?.provides.client.spaces.default.waitUntilReady();
+            if (firstRun) {
+              void firstRun?.wait().then(handleFirstRun);
+            } else {
+              await handleFirstRun();
+            }
 
-          await onSpaceReady();
-        }
-      });
+            await onSpaceReady();
+          }
+        }).unsubscribe,
+      );
     },
     unload: async () => {
       settings.close();
@@ -336,6 +406,11 @@ export const SpacePlugin = ({
       space: state.values,
       settings: settings.values,
       translations: [...translations, osTranslations],
+      complementary: {
+        panels: [
+          { id: 'settings', label: ['open settings panel label', { ns: SPACE_PLUGIN }], icon: 'ph--gear--regular' },
+        ],
+      },
       root: () => (state.values.awaiting ? <AwaitingObject id={state.values.awaiting} /> : null),
       metadata: {
         records: {
@@ -356,24 +431,20 @@ export const SpacePlugin = ({
       },
       surface: {
         component: ({ data, role, ...rest }) => {
-          const primary = data.active ?? data.object;
           switch (role) {
             case 'article':
-            case 'main':
               // TODO(wittjosiah): Need to avoid shotgun parsing space state everywhere.
-              return isSpace(primary) && primary.state.get() === SpaceState.SPACE_READY ? (
+              return isSpace(data.object) && data.object.state.get() === SpaceState.SPACE_READY ? (
                 <Surface
-                  data={{ active: primary.properties[CollectionType.typename], id: primary.id }}
+                  data={{ object: data.object.properties[CollectionType.typename], id: data.object.id }}
                   role={role}
                   {...rest}
                 />
-              ) : primary instanceof CollectionType ? (
+              ) : data.object instanceof CollectionType ? (
                 {
-                  node: <CollectionMain collection={primary} />,
+                  node: <CollectionMain collection={data.object} />,
                   disposition: 'fallback',
                 }
-              ) : typeof primary === 'string' && primary.length === OBJECT_ID_LENGTH ? (
-                <MissingObject id={primary} />
               ) : null;
             case 'complementary--settings':
               return isSpace(data.subject) ? (
@@ -382,14 +453,15 @@ export const SpacePlugin = ({
                 { node: <DefaultObjectSettings object={data.subject} />, disposition: 'fallback' }
               ) : null;
             case 'dialog':
-              if (data.component === 'dxos.org/plugin/space/InvitationManagerDialog') {
+              if (data.component === 'dxos.org/plugin/space/SpaceSettingsDialog') {
                 return (
-                  <Dialog.Content>
-                    <ClipboardProvider>
-                      <InvitationManager active {...(data.subject as InvitationManagerProps)} />
-                    </ClipboardProvider>
-                  </Dialog.Content>
+                  <SpaceSettingsDialog
+                    {...(data.subject as SpaceSettingsDialogProps)}
+                    createInvitationUrl={createSpaceInvitationUrl}
+                  />
                 );
+              } else if (data.component === 'dxos.org/plugin/space/JoinDialog') {
+                return <JoinDialog {...(data.subject as JoinPanelProps)} />;
               }
               return null;
             case 'popover': {
@@ -432,7 +504,7 @@ export const SpacePlugin = ({
                     node: (
                       <>
                         <SpacePresence object={object} />
-                        {space.properties[COMPOSER_SPACE_LOCK] ? null : <ShareSpaceButton spaceId={space.id} />}
+                        {space.properties[COMPOSER_SPACE_LOCK] ? null : <ShareSpaceButton space={space} />}
                       </>
                     ),
                     disposition: 'hoist',
@@ -442,7 +514,7 @@ export const SpacePlugin = ({
             case 'section':
               return data.object instanceof CollectionType ? <CollectionSection collection={data.object} /> : null;
             case 'settings':
-              return data.plugin === meta.id ? <SpaceSettings settings={settings.values} /> : null;
+              return data.plugin === meta.id ? <SpacePluginSettings settings={settings.values} /> : null;
             case 'menu-footer':
               if (isEchoObject(data.object)) {
                 return <MenuFooter object={data.object} />;
@@ -450,12 +522,7 @@ export const SpacePlugin = ({
                 return null;
               }
             case 'status': {
-              return (
-                <>
-                  <SyncStatus />
-                  <SaveStatus />
-                </>
-              );
+              return <SyncStatus />;
             }
             default:
               return null;
@@ -508,6 +575,7 @@ export const SpacePlugin = ({
                       label: ['spaces label', { ns: SPACE_PLUGIN }],
                       testId: 'spacePlugin.spaces',
                       role: 'branch',
+                      disabled: true,
                       childrenPersistenceClass: 'echo',
                       onRearrangeChildren: async (nextOrder: Space[]) => {
                         // NOTE: This is needed to ensure order is updated by next animation frame.
@@ -542,43 +610,32 @@ export const SpacePlugin = ({
                 {
                   id: SpaceAction.CREATE,
                   data: async () => {
-                    await dispatch([
-                      {
-                        plugin: SPACE_PLUGIN,
-                        action: SpaceAction.CREATE,
-                      },
-                      {
-                        action: NavigationAction.OPEN,
-                      },
-                    ]);
+                    await dispatch({
+                      plugin: SPACE_PLUGIN,
+                      action: SpaceAction.CREATE,
+                    });
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
                     icon: 'ph--plus--regular',
                     disposition: 'item',
                     testId: 'spacePlugin.createSpace',
-                    className: 'pbs-4',
+                    className: 'border-t border-separator',
                   },
                 },
                 {
                   id: SpaceAction.JOIN,
                   data: async () => {
-                    await dispatch([
-                      {
-                        plugin: SPACE_PLUGIN,
-                        action: SpaceAction.JOIN,
-                      },
-                      {
-                        action: NavigationAction.OPEN,
-                      },
-                    ]);
+                    await dispatch({
+                      plugin: SPACE_PLUGIN,
+                      action: SpaceAction.JOIN,
+                    });
                   },
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
                     icon: 'ph--sign-in--regular',
                     disposition: 'item',
                     testId: 'spacePlugin.joinSpace',
-                    className: 'pbe-4',
                   },
                 },
               ],
@@ -597,26 +654,30 @@ export const SpacePlugin = ({
                   return;
                 }
 
-                const [spacesOrder] = memoizeQuery(client.spaces.default, Filter.schema(Expando, { key: SHARED }));
-                const order: string[] = spacesOrder?.order ?? [];
-                const orderMap = new Map(order.map((id, index) => [id, index]));
-                return [
-                  ...spaces
-                    .filter((space) => orderMap.has(space.id))
-                    .sort((a, b) => orderMap.get(a.id)! - orderMap.get(b.id)!),
-                  ...spaces.filter((space) => !orderMap.has(space.id)),
-                ]
-                  .filter((space) =>
-                    settings.values.showHidden ? true : space.state.get() !== SpaceState.SPACE_INACTIVE,
-                  )
-                  .map((space) =>
-                    constructSpaceNode({
-                      space,
-                      personal: space === client.spaces.default,
-                      namesCache: state.values.spaceNames,
-                      resolve,
-                    }),
-                  );
+                // TODO(wittjosiah): During client reset, accessing default space throws.
+                try {
+                  const [spacesOrder] = memoizeQuery(client.spaces.default, Filter.schema(Expando, { key: SHARED }));
+                  const order: string[] = spacesOrder?.order ?? [];
+                  const orderMap = new Map(order.map((id, index) => [id, index]));
+                  return [
+                    ...spaces
+                      .filter((space) => orderMap.has(space.id))
+                      .sort((a, b) => orderMap.get(a.id)! - orderMap.get(b.id)!),
+                    ...spaces.filter((space) => !orderMap.has(space.id)),
+                  ]
+                    .filter((space) =>
+                      settings.values.showHidden ? true : space.state.get() !== SpaceState.SPACE_INACTIVE,
+                    )
+                    .map((space) =>
+                      constructSpaceNode({
+                        space,
+                        navigable: state.values.navigableCollections,
+                        personal: space === client.spaces.default,
+                        namesCache: state.values.spaceNames,
+                        resolve,
+                      }),
+                    );
+                } catch {}
               },
             }),
 
@@ -630,12 +691,12 @@ export const SpacePlugin = ({
                   return;
                 }
 
-                const state = toSignal(
+                const spaceState = toSignal(
                   (onChange) => space.state.subscribe(() => onChange()).unsubscribe,
                   () => space.state.get(),
                   space.id,
                 );
-                if (state !== SpaceState.SPACE_READY) {
+                if (spaceState !== SpaceState.SPACE_READY) {
                   return;
                 }
 
@@ -650,7 +711,7 @@ export const SpacePlugin = ({
                   return;
                 }
 
-                return createObjectNode({ object, space, resolve });
+                return createObjectNode({ object, space, resolve, navigable: state.values.navigableCollections });
               },
             }),
 
@@ -658,7 +719,12 @@ export const SpacePlugin = ({
             createExtension({
               id: `${SPACE_PLUGIN}/actions`,
               filter: (node): node is Node<Space> => isSpace(node.data),
-              actionGroups: ({ node }) => constructSpaceActionGroups({ space: node.data, dispatch }),
+              actionGroups: ({ node }) =>
+                constructSpaceActionGroups({
+                  space: node.data,
+                  dispatch,
+                  navigable: state.values.navigableCollections,
+                }),
               actions: ({ node }) => {
                 const space = node.data;
                 return constructSpaceActions({
@@ -676,12 +742,12 @@ export const SpacePlugin = ({
               filter: (node): node is Node<Space> => isSpace(node.data),
               connector: ({ node }) => {
                 const space = node.data;
-                const state = toSignal(
+                const spaceState = toSignal(
                   (onChange) => space.state.subscribe(() => onChange()).unsubscribe,
                   () => space.state.get(),
                   space.id,
                 );
-                if (state !== SpaceState.SPACE_READY) {
+                if (spaceState !== SpaceState.SPACE_READY) {
                   return;
                 }
 
@@ -692,7 +758,9 @@ export const SpacePlugin = ({
 
                 return collection.objects
                   .filter(nonNullable)
-                  .map((object) => createObjectNode({ object, space, resolve }))
+                  .map((object) =>
+                    createObjectNode({ object, space, resolve, navigable: state.values.navigableCollections }),
+                  )
                   .filter(nonNullable);
               },
             }),
@@ -701,7 +769,12 @@ export const SpacePlugin = ({
             createExtension({
               id: `${SPACE_PLUGIN}/object-actions`,
               filter: (node): node is Node<EchoReactiveObject<any>> => isEchoObject(node.data),
-              actionGroups: ({ node }) => constructObjectActionGroups({ object: node.data, dispatch }),
+              actionGroups: ({ node }) =>
+                constructObjectActionGroups({
+                  object: node.data,
+                  dispatch,
+                  navigable: state.values.navigableCollections,
+                }),
               actions: ({ node }) => constructObjectActions({ node, dispatch }),
             }),
 
@@ -718,7 +791,9 @@ export const SpacePlugin = ({
 
                 return collection.objects
                   .filter(nonNullable)
-                  .map((object) => createObjectNode({ object, space, resolve }))
+                  .map((object) =>
+                    createObjectNode({ object, space, resolve, navigable: state.values.navigableCollections }),
+                  )
                   .filter(nonNullable);
               },
             }),
@@ -898,6 +973,7 @@ export const SpacePlugin = ({
                         [
                           { action: settings.values.onSpaceCreate, data: { space } },
                           { action: SpaceAction.ADD_OBJECT, data: { target: space } },
+                          { action: NavigationAction.OPEN },
                           { action: NavigationAction.EXPOSE },
                         ],
                       ]
@@ -918,69 +994,60 @@ export const SpacePlugin = ({
             }
 
             case SpaceAction.JOIN: {
-              if (client) {
-                const { space } = await client.shell.joinSpace({ invitationCode: intent.data?.invitationCode });
-                if (space) {
-                  return {
-                    data: {
-                      space,
-                      id: space.id,
-                      activeParts: { main: [space.id] },
+              return {
+                data: true,
+                intents: [
+                  [
+                    {
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        component: 'dxos.org/plugin/space/JoinDialog',
+                        dialogBlockAlign: 'start',
+                        subject: {
+                          initialInvitationCode: intent.data?.invitationCode,
+                        } satisfies Partial<JoinPanelProps>,
+                      },
                     },
-                    intents: [
-                      [
-                        {
-                          action: LayoutAction.SET_LAYOUT,
-                          data: {
-                            element: 'toast',
-                            subject: {
-                              id: `${SPACE_PLUGIN}/join-success`,
-                              duration: 10_000,
-                              title: translations[0]['en-US'][SPACE_PLUGIN]['join success label'],
-                              closeLabel: translations[0]['en-US'][SPACE_PLUGIN]['dismiss label'],
-                            },
-                          },
-                        },
-                      ],
-                      [
-                        {
-                          action: ObservabilityAction.SEND_EVENT,
-                          data: {
-                            name: 'space.join',
-                            properties: {
-                              spaceId: space.id,
-                            },
-                          },
-                        },
-                      ],
-                    ],
-                  };
-                }
-              }
+                  ],
+                ],
+              };
               break;
             }
 
             case SpaceAction.SHARE: {
-              const spaceId = intent.data?.spaceId;
-              if (clientPlugin && typeof spaceId === 'string') {
-                if (!navigationPlugin?.provides.location.active) {
-                  return;
-                }
-                const target = firstIdInPart(navigationPlugin?.provides.location.active, 'main');
-                const result = await clientPlugin.provides.client.shell.shareSpace({ spaceId, target });
+              const space = intent.data?.space;
+              if (isSpace(space) && !space.properties[COMPOSER_SPACE_LOCK]) {
+                const active = navigationPlugin?.provides.location.active;
+                const mode = layoutPlugin?.provides.layout.layoutMode;
+                const target = active ? firstIdInPart(active, mode === 'solo' ? 'solo' : 'main') : undefined;
+
                 return {
-                  data: result,
+                  data: true,
                   intents: [
+                    [
+                      {
+                        action: LayoutAction.SET_LAYOUT,
+                        data: {
+                          element: 'dialog',
+                          component: 'dxos.org/plugin/space/SpaceSettingsDialog',
+                          dialogBlockAlign: 'start',
+                          subject: {
+                            space,
+                            target,
+                            initialTab: 'members',
+                            createInvitationUrl: createSpaceInvitationUrl,
+                          } satisfies Partial<SpaceSettingsDialogProps>,
+                        },
+                      },
+                    ],
                     [
                       {
                         action: ObservabilityAction.SEND_EVENT,
                         data: {
                           name: 'space.share',
                           properties: {
-                            spaceId,
-                            members: result.members?.length,
-                            error: result.error?.message,
-                            cancelled: result.cancelled,
+                            space: space.id,
                           },
                         },
                       },
@@ -1061,6 +1128,33 @@ export const SpacePlugin = ({
               break;
             }
 
+            case SpaceAction.OPEN_SETTINGS: {
+              const space = intent.data?.space;
+              if (isSpace(space)) {
+                return {
+                  data: true,
+                  intents: [
+                    [
+                      {
+                        action: LayoutAction.SET_LAYOUT,
+                        data: {
+                          element: 'dialog',
+                          component: 'dxos.org/plugin/space/SpaceSettingsDialog',
+                          dialogBlockAlign: 'start',
+                          subject: {
+                            space,
+                            initialTab: 'settings',
+                            createInvitationUrl: createSpaceInvitationUrl,
+                          } satisfies Partial<SpaceSettingsDialogProps>,
+                        },
+                      },
+                    ],
+                  ],
+                };
+              }
+              break;
+            }
+
             case SpaceAction.OPEN: {
               const space = intent.data?.space;
               if (isSpace(space)) {
@@ -1192,10 +1286,13 @@ export const SpacePlugin = ({
               };
             }
 
-            case SpaceAction.REMOVE_OBJECT: {
-              const object = intent.data?.object ?? intent.data?.result;
-              const space = getSpace(object);
-              if (!(isEchoObject(object) && space)) {
+            case SpaceAction.REMOVE_OBJECTS: {
+              const objects = intent.data?.objects ?? intent.data?.result;
+              invariant(Array.isArray(objects));
+
+              // All objects must be a member of the same space.
+              const space = getSpace(objects[0]);
+              if (!space || !objects.every((obj) => isEchoObject(obj) && getSpace(obj) === space)) {
                 return;
               }
 
@@ -1204,23 +1301,22 @@ export const SpacePlugin = ({
               const openObjectIds = new Set<string>(openIds(activeParts ?? {}));
 
               if (!intent.undo && resolve) {
-                // Capture the current state for undo.
                 const parentCollection = intent.data?.collection ?? space.properties[CollectionType.typename];
-                const nestedObjects = await getNestedObjects(object, resolve);
+                const nestedObjectsList = await Promise.all(objects.map((obj) => getNestedObjects(obj, resolve)));
+
                 const deletionData = {
-                  object,
+                  objects,
                   parentCollection,
-                  index:
-                    parentCollection instanceof CollectionType
-                      ? parentCollection.objects.indexOf(object as Expando)
-                      : -1,
-                  nestedObjects,
-                  wasActive: [object, ...nestedObjects]
+                  indices: objects.map((obj) =>
+                    parentCollection instanceof CollectionType ? parentCollection.objects.indexOf(obj as Expando) : -1,
+                  ),
+                  nestedObjectsList,
+                  wasActive: objects
+                    .flatMap((obj, i) => [obj, ...nestedObjectsList[i]])
                     .map((obj) => fullyQualifiedId(obj))
                     .filter((id) => openObjectIds.has(id)),
                 };
 
-                // If the item is active, navigate to "nowhere" to avoid navigating to a removed item.
                 if (deletionData.wasActive.length > 0) {
                   await intentPlugin?.provides.intent.dispatch({
                     action: NavigationAction.CLOSE,
@@ -1233,48 +1329,56 @@ export const SpacePlugin = ({
                   });
                 }
 
-                if (parentCollection instanceof CollectionType) {
-                  // TODO(Zan): Is there a nicer way to do this without casting to Expando?
-                  const index = parentCollection.objects.indexOf(object as Expando);
-                  if (index !== -1) {
-                    parentCollection.objects.splice(index, 1);
-                  }
+                if (deletionData.parentCollection instanceof CollectionType) {
+                  [...deletionData.indices]
+                    .sort((a, b) => b - a)
+                    .forEach((index: number) => {
+                      if (index !== -1) {
+                        deletionData.parentCollection.objects.splice(index, 1);
+                      }
+                    });
                 }
 
-                // If the object is a collection, also delete its nested objects.
-                deletionData.nestedObjects.forEach((obj) => {
+                deletionData.nestedObjectsList.flat().forEach((obj) => {
                   space.db.remove(obj);
                 });
-                space.db.remove(object);
+                objects.forEach((obj) => space.db.remove(obj));
 
-                const undoMessageKey =
-                  object instanceof CollectionType ? 'collection deleted label' : 'object deleted label';
+                const undoMessageKey = objects.some((obj) => obj instanceof CollectionType)
+                  ? 'collection deleted label'
+                  : objects.length > 1
+                    ? 'objects deleted label'
+                    : 'object deleted label';
 
                 return {
                   data: true,
                   undoable: {
-                    // Consider using a translation key here.
+                    // TODO(ZaymonFC): Pluralize if more than one object.
                     message: translations[0]['en-US'][SPACE_PLUGIN][undoMessageKey],
                     data: deletionData,
                   },
                 };
               } else {
                 const undoData = intent.data;
-                if (undoData && isEchoObject(undoData.object) && undoData.parentCollection instanceof CollectionType) {
+                if (
+                  undoData?.objects?.length &&
+                  undoData.objects.every(isEchoObject) &&
+                  undoData.parentCollection instanceof CollectionType
+                ) {
                   // Restore the object to the space.
-                  const restoredObject = space.db.add(undoData.object);
+                  const restoredObjects = undoData.objects.map((obj: Expando) => space.db.add(obj));
 
-                  // Restore nested objects if the object was a collection.
-                  undoData.nestedObjects.forEach((obj: Expando) => {
+                  // Restore nested objects to the space.
+                  undoData.nestedObjectsList.flat().forEach((obj: Expando) => {
                     space.db.add(obj);
                   });
 
-                  // Restore the object to its original position in the collection.
-                  if (undoData.index !== -1) {
-                    undoData.parentCollection.objects.splice(undoData.index, 0, restoredObject as Expando);
-                  }
+                  undoData.indices.forEach((index: number, i: number) => {
+                    if (index !== -1) {
+                      undoData.parentCollection.objects.splice(index, 0, restoredObjects[i] as Expando);
+                    }
+                  });
 
-                  // Restore active state if it was active before removal.
                   if (undoData.wasActive.length > 0) {
                     await intentPlugin?.provides.intent.dispatch({
                       action: NavigationAction.OPEN,