@dxos/plugin-space 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/capabilities/app-graph-serializer.ts

@@ -2,19 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, contributes, createIntent, type PluginsContext } from '@dxos/app-framework';
 import { isSpace } from '@dxos/client/echo';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 
 import { SPACE_PLUGIN } from '../meta';
 import translations from '../translations';
-import { CollectionType, SpaceAction, SPACE_TYPE } from '../types';
-import { SPACES } from '../util';
+import { CollectionType, SpaceAction } from '../types';
+import { SPACES, SPACE_TYPE } from '../util';
 
 // https://stackoverflow.com/a/19016910
 const DIRECTORY_TYPE = 'text/directory';
 
-export default (context: PluginContext) =>
+export default (context: PluginsContext) =>
   contributes(Capabilities.AppGraphSerializer, [
     {
       inputType: SPACES,
@@ -37,7 +37,7 @@ export default (context: PluginContext) =>
         type: DIRECTORY_TYPE,
       }),
       deserialize: async (data) => {
-        const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
         const result = await dispatch(createIntent(SpaceAction.Create, { name: data.name, edgeReplication: true }));
         return result.data?.space;
       },
@@ -59,11 +59,11 @@ export default (context: PluginContext) =>
           return;
         }
 
-        const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
         const result = await dispatch(
           createIntent(SpaceAction.AddObject, {
             target: collection,
-            object: live(CollectionType, { name: data.name, objects: [], views: {} }),
+            object: create(CollectionType, { name: data.name, objects: [], views: {} }),
           }),
         );
 

package/src/capabilities/identity-created.ts

@@ -2,22 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginContext, Capabilities } from '@dxos/app-framework';
-import { live, makeRef } from '@dxos/live-object';
+import { contributes, type PluginsContext, Capabilities } from '@dxos/app-framework';
+import { create, makeRef } from '@dxos/live-object';
 import { Migrations } from '@dxos/migrations';
 import { ClientCapabilities } from '@dxos/plugin-client';
 
 import { CollectionType } from '../types';
 
-export default async (context: PluginContext) => {
-  const client = context.getCapability(ClientCapabilities.Client);
+export default async (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
   await client.spaces.waitUntilReady();
 
   const defaultSpace = client.spaces.default;
   await defaultSpace.waitUntilReady();
 
   // Create root collection structure.
-  defaultSpace.properties[CollectionType.typename] = makeRef(live(CollectionType, { objects: [], views: {} }));
+  defaultSpace.properties[CollectionType.typename] = makeRef(create(CollectionType, { objects: [], views: {} }));
   if (Migrations.versionProperty) {
     defaultSpace.properties[Migrations.versionProperty] = Migrations.targetVersion;
   }

package/src/capabilities/index.ts

@@ -10,8 +10,8 @@ export const IdentityCreated = lazy(() => import('./identity-created'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactRoot = lazy(() => import('./react-root'));
 export const ReactSurface = lazy(() => import('./react-surface'));
-export const SchemaDefs = lazy(() => import('./schema-defs'));
-export const SchemaTools = lazy(() => import('./schema-tools'));
+export const Schema = lazy(() => import('./schema'));
+export const Tools = lazy(() => import('./schema-tools'));
 export const SpaceSettings = lazy(() => import('./settings'));
 export const SpaceState = lazy(() => import('./state'));
 export const SpacesReady = lazy(() => import('./spaces-ready'));

package/src/capabilities/intent-resolver.ts

@@ -2,26 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Effect } from 'effect';
+import { pipe } from 'effect';
 
 import {
   Capabilities,
+  chain,
   contributes,
   createIntent,
   createResolver,
   LayoutAction,
-  type PluginContext,
+  type PluginsContext,
 } from '@dxos/app-framework';
 import { type Expando, getTypename, type HasId } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { live, makeRef, type Live } from '@dxos/live-object';
+import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
 import { Migrations } from '@dxos/migrations';
 import { ClientCapabilities } from '@dxos/plugin-client';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { isSpace, getSpace, SpaceState, fullyQualifiedId, isEchoObject } from '@dxos/react-client/echo';
-import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { isSpace, getSpace, SpaceState, type Space, fullyQualifiedId, isEchoObject } from '@dxos/react-client/echo';
 
 import { SpaceCapabilities } from './capabilities';
 import {
@@ -32,6 +32,7 @@ import {
   CREATE_OBJECT_DIALOG,
   type CreateObjectDialogProps,
   POPOVER_RENAME_OBJECT,
+  POPOVER_ADD_SPACE,
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
 import { CollectionAction, CollectionType, SpaceAction } from '../types';
@@ -41,14 +42,13 @@ import { cloneObject, COMPOSER_SPACE_LOCK, getNestedObjects } from '../util';
 const SPACE_MAX_OBJECTS = 500;
 
 type IntentResolverOptions = {
-  context: PluginContext;
-  createInvitationUrl: (invitationCode: string) => string;
+  context: PluginsContext;
   observability?: boolean;
 };
 
-export default ({ context, observability, createInvitationUrl }: IntentResolverOptions) => {
+export default ({ context, observability }: IntentResolverOptions) => {
   const resolve = (typename: string) =>
-    context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};
+    context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};
 
   return contributes(Capabilities.IntentResolver, [
     createResolver({
@@ -67,14 +67,14 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
     }),
     createResolver({
       intent: SpaceAction.Create,
-      resolve: async ({ name, hue, icon, edgeReplication }) => {
-        const client = context.getCapability(ClientCapabilities.Client);
-        const space = await client.spaces.create({ name, hue, icon });
+      resolve: async ({ name, edgeReplication }) => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const space = await client.spaces.create({ name });
         if (edgeReplication) {
           await space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED);
         }
         await space.waitUntilReady();
-        const collection = live(CollectionType, { objects: [], views: {} });
+        const collection = create(CollectionType, { objects: [], views: {} });
         space.properties[CollectionType.typename] = makeRef(collection);
 
         if (Migrations.versionProperty) {
@@ -120,74 +120,52 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
         ],
       }),
     }),
-    createResolver({
-      intent: SpaceAction.OpenMembers,
-      resolve: ({ space }) => ({
-        intents: [
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [`members-settings${ATTENDABLE_PATH_SEPARATOR}${space.id}`],
-            options: {
-              workspace: space.id,
-            },
-          }),
-        ],
-      }),
-    }),
     createResolver({
       intent: SpaceAction.Share,
-      resolve: ({ space, type, authMethod, multiUse, target }) => {
-        const invitation = space.share({ type, authMethod, multiUse, target });
+      filter: (data): data is { space: Space } => !data.space.properties[COMPOSER_SPACE_LOCK],
+      resolve: ({ space }) => {
+        const layout = context.requestCapability(Capabilities.Layout);
+        const id = `${space.id}${ATTENDABLE_PATH_SEPARATOR}members`;
+        if (layout.active.includes(id)) {
+          return {
+            intents: [
+              createIntent(LayoutAction.ScrollIntoView, {
+                part: 'current',
+                subject: id,
+              }),
+            ],
+          };
+        }
+
         return {
-          data: invitation,
-          intents: observability
-            ? [
-                createIntent(ObservabilityAction.SendEvent, {
-                  name: 'space.share',
-                  properties: {
-                    spaceId: space.id,
-                  },
-                }),
-              ]
-            : [],
+          intents: [
+            pipe(
+              createIntent(LayoutAction.SwitchWorkspace, {
+                part: 'workspace',
+                subject: space.id,
+              }),
+              chain(LayoutAction.Open, {
+                part: 'main',
+                subject: [space.id],
+                options: {
+                  variant: 'members',
+                },
+              }),
+            ),
+            ...(observability
+              ? [
+                  createIntent(ObservabilityAction.SendEvent, {
+                    name: 'space.share',
+                    properties: {
+                      spaceId: space.id,
+                    },
+                  }),
+                ]
+              : []),
+          ],
         };
       },
     }),
-    createResolver({
-      intent: SpaceAction.GetShareLink,
-      resolve: ({ space, target, copyToClipboard }) =>
-        Effect.gen(function* () {
-          const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-          const invitation = yield* dispatch(
-            createIntent(SpaceAction.Share, {
-              space,
-              type: Invitation.Type.DELEGATED,
-              authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
-              multiUse: true,
-              target,
-            }),
-          );
-
-          // TODO(wittjosiah): Better api to for this.
-          // NOTE: Delegated invitations are invalid until the connecting state when keys are filled in.
-          const invitationCode = yield* Effect.tryPromise(
-            () =>
-              new Promise<string>((resolve) => {
-                invitation.subscribe((invitation) => {
-                  if (invitation.state === Invitation.State.CONNECTING) {
-                    resolve(InvitationEncoder.encode(invitation));
-                  }
-                });
-              }),
-          );
-          const url = createInvitationUrl(invitationCode);
-          if (copyToClipboard) {
-            yield* Effect.tryPromise(() => navigator.clipboard.writeText(url));
-          }
-
-          return { data: url };
-        }),
-    }),
     createResolver({
       intent: SpaceAction.Lock,
       resolve: ({ space }) => {
@@ -245,19 +223,57 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
         };
       },
     }),
+    createResolver({
+      intent: SpaceAction.AddSpace,
+      resolve: () => {
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdatePopover, {
+              part: 'popover',
+              subject: POPOVER_ADD_SPACE,
+              options: {
+                anchorId: SpaceAction.AddSpace._tag,
+                side: 'right',
+              },
+            }),
+          ],
+        };
+      },
+    }),
     createResolver({
       intent: SpaceAction.OpenSettings,
-      resolve: ({ space }) => ({
-        intents: [
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [`properties-settings${ATTENDABLE_PATH_SEPARATOR}${space.id}`],
-            options: {
-              workspace: space.id,
-            },
-          }),
-        ],
-      }),
+      resolve: ({ space }) => {
+        const layout = context.requestCapability(Capabilities.Layout);
+        const id = `${space.id}${ATTENDABLE_PATH_SEPARATOR}settings`;
+        if (layout.active.includes(id)) {
+          return {
+            intents: [
+              createIntent(LayoutAction.ScrollIntoView, {
+                part: 'current',
+                subject: id,
+              }),
+            ],
+          };
+        }
+
+        return {
+          intents: [
+            pipe(
+              createIntent(LayoutAction.SwitchWorkspace, {
+                part: 'workspace',
+                subject: space.id,
+              }),
+              chain(LayoutAction.Open, {
+                part: 'main',
+                subject: [space.id],
+                options: {
+                  variant: 'settings',
+                },
+              }),
+            ),
+          ],
+        };
+      },
     }),
     createResolver({
       intent: SpaceAction.Open,
@@ -274,7 +290,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
     createResolver({
       intent: SpaceAction.Migrate,
       resolve: async ({ space, version: targetVersion }) => {
-        const state = context.getCapability(SpaceCapabilities.MutableState);
+        const state = context.requestCapability(SpaceCapabilities.MutableState);
 
         if (space.state.get() === SpaceState.SPACE_REQUIRES_MIGRATION) {
           state.sdkMigrationRunning[space.id] = true;
@@ -305,7 +321,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
     createResolver({
       intent: SpaceAction.OpenCreateObject,
       resolve: ({ target, navigable = true }) => {
-        const state = context.getCapability(SpaceCapabilities.State);
+        const state = context.requestCapability(SpaceCapabilities.State);
 
         return {
           intents: [
@@ -317,7 +333,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
                 props: {
                   target,
                   shouldNavigate: navigable
-                    ? (object: Live<any>) => !(object instanceof CollectionType) || state.navigableCollections
+                    ? (object: ReactiveObject<any>) => !(object instanceof CollectionType) || state.navigableCollections
                     : () => false,
                 } satisfies Partial<CreateObjectDialogProps>,
               },
@@ -374,7 +390,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
             collection.objects.push(makeRef(object as HasId));
           } else {
             // TODO(wittjosiah): Can't add non-echo objects by including in a collection because of types.
-            const collection = live(CollectionType, { objects: [makeRef(object as HasId)], views: {} });
+            const collection = create(CollectionType, { objects: [makeRef(object as HasId)], views: {} });
             space.properties[CollectionType.typename] = makeRef(collection);
           }
         }
@@ -405,7 +421,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
     createResolver({
       intent: SpaceAction.RemoveObjects,
       resolve: async ({ objects, target, deletionData }, undo) => {
-        const layout = context.getCapability(Capabilities.Layout);
+        const layout = context.requestCapability(Capabilities.Layout);
 
         // All objects must be a member of the same space.
         const space = getSpace(objects[0]);
@@ -534,14 +550,14 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
     createResolver({
       intent: SpaceAction.WaitForObject,
       resolve: async ({ id }) => {
-        const state = context.getCapability(SpaceCapabilities.MutableState);
+        const state = context.requestCapability(SpaceCapabilities.MutableState);
         state.awaiting = id;
       },
     }),
     createResolver({
       intent: CollectionAction.Create,
       resolve: async ({ name }) => ({
-        data: { object: live(CollectionType, { name, objects: [], views: {} }) },
+        data: { object: create(CollectionType, { name, objects: [], views: {} }) },
       }),
     }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -2,27 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { Capabilities, contributes, createSurface, Surface, useCapability, useLayout } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface, Surface, useCapability } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
-import { findAnnotation } from '@dxos/effect';
 import { SettingsStore } from '@dxos/local-storage';
 import {
   getSpace,
   isEchoObject,
-  isLiveObject,
+  isReactiveObject,
   isSpace,
-  parseId,
   SpaceState,
-  useSpace,
-  type AnyLiveObject,
+  type ReactiveEchoObject,
   type Space,
 } from '@dxos/react-client/echo';
-import { Input } from '@dxos/react-ui';
-import { type InputProps } from '@dxos/react-ui-form';
-import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { SpaceCapabilities } from './capabilities';
@@ -36,23 +29,25 @@ import {
   InlineSyncStatus,
   JOIN_DIALOG,
   JoinDialog,
-  MembersContainer,
   MenuFooter,
-  ObjectSettingsContainer,
   POPOVER_RENAME_OBJECT,
   POPOVER_RENAME_SPACE,
   PopoverRenameObject,
   PopoverRenameSpace,
-  SchemaContainer,
   SmallPresenceLive,
   SpacePluginSettings,
   SpacePresence,
-  SpaceSettingsContainer,
   SyncStatus,
   type CreateObjectDialogProps,
+  POPOVER_ADD_SPACE,
+  PopoverAddSpace,
+  SpaceSettingsContainer,
+  SpacePropertiesForm,
+  MembersContainer,
+  ObjectSettingsContainer,
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, HueAnnotationId, IconAnnotationId, type SpaceSettingsProps } from '../types';
+import { CollectionType, type SpaceSettingsProps } from '../types';
 
 type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
@@ -82,64 +77,33 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       component: ({ data }) => <CollectionMain collection={data.subject} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/plugin-settings`,
+      id: `${SPACE_PLUGIN}/members`,
       role: 'article',
-      filter: (data): data is { subject: SettingsStore<SpaceSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === SPACE_PLUGIN,
-      component: ({ data: { subject } }) => <SpacePluginSettings settings={subject.value} />,
+      position: 'hoist',
+      filter: (data): data is { subject: Space; variant: 'members' } =>
+        isSpace(data.subject) && data.variant === 'members',
+      component: ({ data }) => <MembersContainer space={data.subject} createInvitationUrl={createInvitationUrl} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/companion/object-settings`,
+      id: `${SPACE_PLUGIN}/settings`,
       role: 'article',
-      filter: (data): data is { companionTo: AnyLiveObject<any> } =>
-        isEchoObject(data.companionTo) && data.subject === 'settings',
-      component: ({ data, role }) => <ObjectSettingsContainer object={data.companionTo} role={role} />,
+      position: 'hoist',
+      filter: (data): data is { subject: Space; variant: 'settings' } =>
+        isSpace(data.subject) && data.variant === 'settings',
+      component: ({ data }) => <SpaceSettingsContainer space={data.subject} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/space-settings-properties`,
+      id: `${SPACE_PLUGIN}/companion/object-settings`,
       role: 'article',
-      filter: (data): data is { subject: string } => data.subject === `${SPACE_PLUGIN}/properties`,
-      component: () => {
-        const layout = useLayout();
-        const { spaceId } = parseId(layout.workspace);
-        const space = useSpace(spaceId);
-        if (!space || !spaceId) {
-          return null;
-        }
-
-        return <SpaceSettingsContainer space={space} />;
-      },
+      filter: (data): data is { companionTo: ReactiveEchoObject<any> } =>
+        isEchoObject(data.companionTo) && data.subject === 'settings',
+      component: ({ data, role }) => <ObjectSettingsContainer object={data.companionTo} role={role} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/space-settings-members`,
-      role: 'article',
-      position: 'hoist',
-      filter: (data): data is { subject: string } => data.subject === `${SPACE_PLUGIN}/members`,
-      component: () => {
-        const layout = useLayout();
-        const { spaceId } = parseId(layout.workspace);
-        const space = useSpace(spaceId);
-        if (!space || !spaceId) {
-          return null;
-        }
-
-        return <MembersContainer space={space} createInvitationUrl={createInvitationUrl} />;
-      },
-    }),
-    createSurface({
-      id: `${SPACE_PLUGIN}/space-settings-schema`,
-      role: 'article',
-      filter: (data): data is { subject: string } => data.subject === `${SPACE_PLUGIN}/schema`,
-      component: () => {
-        const layout = useLayout();
-        const { spaceId } = parseId(layout.workspace);
-        const space = useSpace(spaceId);
-        if (!space || !spaceId) {
-          return null;
-        }
-
-        return <SchemaContainer space={space} />;
-      },
+      id: `${SPACE_PLUGIN}/space-settings--properties`,
+      role: 'space-settings--properties',
+      filter: (data): data is { subject: Space } => isSpace(data.subject),
+      component: ({ data }) => <SpacePropertiesForm space={data.subject} />,
     }),
     createSurface({
       id: JOIN_DIALOG,
@@ -159,44 +123,6 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is { props: CreateObjectDialogProps } => data.component === CREATE_OBJECT_DIALOG,
       component: ({ data }) => <CreateObjectDialog {...data.props} />,
     }),
-    createSurface({
-      id: `${SPACE_PLUGIN}/create-initial-space-form-[hue]`,
-      role: 'form-input',
-      filter: (data): data is { prop: string; schema: Schema.Schema<any> } => {
-        const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, HueAnnotationId);
-        return !!annotation;
-      },
-      component: ({ data: _, ...inputProps }) => {
-        const { label, disabled, type, getValue, onValueChange } = inputProps as any as InputProps;
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange]);
-        return (
-          <Input.Root>
-            <Input.Label>{label}</Input.Label>
-            <HuePicker disabled={disabled} value={getValue() ?? ''} onChange={handleChange} onReset={handleReset} />
-          </Input.Root>
-        );
-      },
-    }),
-    createSurface({
-      id: `${SPACE_PLUGIN}/create-initial-space-form-[icon]`,
-      role: 'form-input',
-      filter: (data): data is { prop: string; schema: Schema.Schema<any> } => {
-        const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, IconAnnotationId);
-        return !!annotation;
-      },
-      component: ({ data: _, ...inputProps }) => {
-        const { label, disabled, type, getValue, onValueChange } = inputProps as any as InputProps;
-        const handleChange = useCallback((nextIcon: string) => onValueChange(type, nextIcon), [onValueChange]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange]);
-        return (
-          <Input.Root>
-            <Input.Label>{label}</Input.Label>
-            <IconPicker disabled={disabled} value={getValue() ?? ''} onChange={handleChange} onReset={handleReset} />
-          </Input.Root>
-        );
-      },
-    }),
     createSurface({
       id: POPOVER_RENAME_SPACE,
       role: 'popover',
@@ -206,20 +132,20 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: POPOVER_RENAME_OBJECT,
       role: 'popover',
-      filter: (data): data is { props: AnyLiveObject<any> } =>
-        data.component === POPOVER_RENAME_OBJECT && isLiveObject(data.props),
+      filter: (data): data is { props: ReactiveEchoObject<any> } =>
+        data.component === POPOVER_RENAME_OBJECT && isReactiveObject(data.props),
       component: ({ data }) => <PopoverRenameObject object={data.props} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/menu-footer`,
-      role: 'menu-footer',
-      filter: (data): data is { subject: AnyLiveObject<any> } => isEchoObject(data.subject),
-      component: ({ data }) => <MenuFooter object={data.subject} />,
+      id: POPOVER_ADD_SPACE,
+      role: 'popover',
+      filter: (data): data is any => data.component === POPOVER_ADD_SPACE,
+      component: () => <PopoverAddSpace />,
     }),
     createSurface({
       id: `${SPACE_PLUGIN}/navtree-presence`,
       role: 'navtree-item-end',
-      filter: (data): data is { id: string; subject: AnyLiveObject<any>; open?: boolean } =>
+      filter: (data): data is { id: string; subject: ReactiveEchoObject<any>; open?: boolean } =>
         typeof data.id === 'string' && isEchoObject(data.subject),
       component: ({ data }) => {
         // TODO(wittjosiah): Doesn't need to be mutable but readonly type messes with ComplexMap.
@@ -246,7 +172,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       id: `${SPACE_PLUGIN}/navbar-presence`,
       role: 'navbar-end',
       position: 'hoist',
-      filter: (data): data is { subject: Space | AnyLiveObject<any> } =>
+      filter: (data): data is { subject: Space | ReactiveEchoObject<any> } =>
         isSpace(data.subject) || isEchoObject(data.subject),
       component: ({ data }) => {
         const space = isSpace(data.subject) ? data.subject : getSpace(data.subject);
@@ -265,6 +191,19 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is { subject: CollectionType } => isInstanceOf(CollectionType, data.subject),
       component: ({ data }) => <CollectionSection collection={data.subject} />,
     }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/plugin-settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<SpaceSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === SPACE_PLUGIN,
+      component: ({ data: { subject } }) => <SpacePluginSettings settings={subject.value} />,
+    }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/menu-footer`,
+      role: 'menu-footer',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+      component: ({ data }) => <MenuFooter object={data.subject} />,
+    }),
     createSurface({
       id: `${SPACE_PLUGIN}/status`,
       role: 'status',