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

package/src/capabilities/react-surface.tsx

@@ -2,27 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema as S } 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 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';
@@ -48,13 +41,13 @@ import {
   type CreateObjectDialogProps,
   POPOVER_ADD_SPACE,
   PopoverAddSpace,
+  SpaceSettingsContainer,
+  SpacePropertiesForm,
   MembersContainer,
   ObjectSettingsContainer,
-  SpaceSettingsContainer,
-  SchemaContainer,
 } 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;
@@ -84,11 +77,20 @@ 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}/settings`,
+      role: 'article',
+      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}/companion/object-settings`,
@@ -98,50 +100,10 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       component: ({ data, role }) => <ObjectSettingsContainer object={data.companionTo} role={role} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/space-settings-properties`,
-      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} />;
-      },
-    }),
-    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,
@@ -161,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: S.Schema<any> } => {
-        const annotation = findAnnotation<boolean>((data.schema as S.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: S.Schema<any> } => {
-        const annotation = findAnnotation<boolean>((data.schema as S.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',
@@ -209,7 +133,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       id: POPOVER_RENAME_OBJECT,
       role: 'popover',
       filter: (data): data is { props: ReactiveEchoObject<any> } =>
-        data.component === POPOVER_RENAME_OBJECT && isLiveObject(data.props),
+        data.component === POPOVER_RENAME_OBJECT && isReactiveObject(data.props),
       component: ({ data }) => <PopoverRenameObject object={data.props} />,
     }),
     createSurface({
@@ -218,12 +142,6 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is any => data.component === POPOVER_ADD_SPACE,
       component: () => <PopoverAddSpace />,
     }),
-    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}/navtree-presence`,
       role: 'navtree-item-end',
@@ -273,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',

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 
 import { SPACE_PLUGIN } from '../meta';
 import { type SpaceSettingsProps, SpaceSettingsSchema } from '../types';
 
 export default () => {
-  const settings = live<SpaceSettingsProps>({
+  const settings = create<SpaceSettingsProps>({
     showHidden: false,
   });
 

package/src/capabilities/spaces-ready.ts

@@ -6,7 +6,7 @@ import { contributes, createIntent, type PluginsContext, Capabilities, LayoutAct
 import { SubscriptionList } from '@dxos/async';
 import { Expando } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { ClientCapabilities } from '@dxos/plugin-client';
@@ -53,7 +53,7 @@ export default async (context: PluginsContext) => {
   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.
-    defaultSpace.db.add(live({ key: SHARED, order: [] }));
+    defaultSpace.db.add(create({ key: SHARED, order: [] }));
   }
 
   // Await missing objects.

package/src/capabilities/state.ts

@@ -14,9 +14,11 @@ import { SPACE_PLUGIN } from '../meta';
 import { type PluginState } from '../types';
 
 export default (context: PluginsContext) => {
+  const sections = context.requestCapabilities(SpaceCapabilities.SettingsSection);
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
+    spaceSettingsOpenSections: sections.map((section) => section.id),
     viewersByObject: {},
     // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap(PublicKey.hash),

package/src/components/CollectionMain.tsx

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect } from 'react';
 
-import { live, Filter, useQuery, useSpace } from '@dxos/react-client/echo';
+import { create, Filter, useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/shell/react';
@@ -70,7 +70,7 @@ export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
 
     useEffect(() => {
       if (space) {
-        space.db.add(live(CollectionType, { name: 'My Collection', objects: [], views: {} }));
+        space.db.add(create(CollectionType, { name: 'My Collection', objects: [], views: {} }));
       }
     }, [space]);
 

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -16,7 +16,7 @@ import {
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { getSpace, isLiveObject, isSpace, type Live, useSpaces } from '@dxos/react-client/echo';
+import { getSpace, isReactiveObject, isSpace, type ReactiveObject, useSpaces } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 
 import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
@@ -27,7 +27,7 @@ import { type ObjectForm, SpaceAction } from '../../types';
 export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'name'> & {
-  shouldNavigate?: (object: Live<any>) => boolean;
+  shouldNavigate?: (object: ReactiveObject<any>) => boolean;
 };
 
 export const CreateObjectDialog = ({
@@ -72,7 +72,7 @@ export const CreateObjectDialog = ({
       invariant(space, 'Missing space');
       const result = await dispatch(form.getIntent(data, { space }));
       const object = result.data?.object;
-      if (isLiveObject(object)) {
+      if (isReactiveObject(object)) {
         const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden: form.hidden });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (shouldNavigate(object)) {

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -4,20 +4,42 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { getTypeAnnotation, type TypeAnnotation } from '@dxos/echo-schema';
+import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
+import { getTypeAnnotation, type TypeAnnotation, type S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type SpaceId, type Space } from '@dxos/react-client/echo';
 import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
+import { Form, type InputProps } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { mx } from '@dxos/react-ui-theme';
 import { isNonNullable, type MaybePromise } from '@dxos/util';
 
-import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
 import { type ObjectForm, type CollectionType } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
+// TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.
+/**
+ * Creates a surface input component based on plugin context.
+ * @param baseData Additional data that will be merged with form data and passed to the surface.
+ * This allows providing more context to the surface than what's available from the form itself.
+ */
+const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
+  const pluginManager = usePluginManager();
+
+  return useCallback(
+    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps }) => {
+      const composedData = { prop, schema, ...baseData };
+      if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
+        return undefined;
+      }
+
+      return <Surface role='form-input' data={composedData} {...inputProps} />;
+    },
+    [pluginManager, baseData],
+  );
+};
+
 export type CreateObjectPanelProps = ThemedClassName<{
   forms: ObjectForm[];
   spaces: Space[];

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -10,7 +10,6 @@ import { type S } from '@dxos/echo-schema';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
 import { SpaceAction, SpaceForm } from '../../types';
 
@@ -24,8 +23,6 @@ export const CreateSpaceDialog = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const { dispatch } = useIntentDispatcher();
 
-  const inputSurfaceLookup = useInputSurfaceLookup();
-
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
       const program = Effect.gen(function* () {
@@ -57,7 +54,6 @@ export const CreateSpaceDialog = () => {
           autoFocus
           values={initialValues}
           schema={SpaceForm}
-          lookupComponent={inputSurfaceLookup}
           onSave={handleCreateSpace}
         />
       </div>

package/src/components/MembersContainer.tsx

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

package/src/components/PopoverAddSpace.tsx

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