@dxos/plugin-space 0.7.4 → 0.7.5-feature-compute.4d9d99a

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { type MetadataResolver } from '@dxos/app-framework';
-import { type AbstractTypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
+import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
+import { type TypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
 import { type SpaceId, type Space, isSpace } from '@dxos/react-client/echo';
 import { Icon, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Form, InputHeader } from '@dxos/react-ui-form';
+import { Form, InputHeader, type InputProps } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { nonNullable, type MaybePromise } from '@dxos/util';
 
@@ -17,20 +17,43 @@ import { type CollectionType } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
 export type CreateObjectPanelProps = {
-  schemas: AbstractTypedObject[];
+  schemas: TypedObject[];
   spaces: Space[];
   typename?: string;
   target?: Space | CollectionType;
   name?: string;
   defaultSpaceId?: SpaceId;
-  resolve?: MetadataResolver;
+  resolve?: (typename: string) => Record<string, any>;
   onCreateObject?: (params: {
-    schema: AbstractTypedObject;
+    schema: TypedObject;
     target: Space | CollectionType;
-    name?: string;
+    data: Record<string, any>;
   }) => MaybePromise<void>;
 };
 
+// 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<any> }) => {
+      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 const CreateObjectPanel = ({
   schemas,
   spaces,
@@ -51,19 +74,25 @@ export const CreateObjectPanel = ({
   const handleClearTarget = useCallback(() => setTarget(undefined), []);
 
   const handleCreateObject = useCallback(
-    async ({ name }: { name?: string }) => {
+    async (props: Record<string, any>) => {
       if (!schema || !target) {
         return;
       }
-
-      await onCreateObject?.({ schema, target, name });
+      await onCreateObject?.({ schema, target, data: props });
     },
     [onCreateObject, schema, target],
   );
 
+  const metadata = useMemo(() => {
+    if (!typename) {
+      return;
+    }
+    return resolve?.(typename);
+  }, [resolve, typename]);
+
   // TODO(wittjosiah): All of these inputs should be rolled into a `Form` once it supports the necessary variants.
   const schemaInput = (
-    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
         data-testid='create-object-form.schema-input'
@@ -89,7 +118,7 @@ export const CreateObjectPanel = ({
   );
 
   const spaceInput = (
-    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
         data-testid='create-object-form.space-input'
@@ -113,20 +142,28 @@ export const CreateObjectPanel = ({
     </SearchList.Root>
   );
 
-  const form = (
-    <Form
-      autoFocus
-      values={{ name: initialName }}
-      schema={S.Struct({ name: S.optional(S.String) })}
-      testId='create-object-form'
-      onSave={handleCreateObject}
-    />
-  );
+  const inputSurfaceLookup = useInputSurfaceLookup({ target });
+
+  const form = useMemo(() => {
+    // TODO(ZaymonFC): Move this default object creation schema somewhere?
+    const schema = (metadata?.creationSchema ?? S.Struct({ name: S.optional(S.String) })) as S.Schema<any>;
+
+    return (
+      <Form
+        autoFocus
+        values={{ name: initialName }}
+        schema={schema}
+        testId='create-object-form'
+        onSave={handleCreateObject}
+        lookupComponent={inputSurfaceLookup}
+      />
+    );
+  }, [initialName, handleCreateObject, metadata]);
 
   return (
     <div role='form' className='flex flex-col gap-2'>
       {target && (
-        <div role='none' className='px-2'>
+        <div role='none'>
           <Input.Root>
             <InputHeader>
               <Input.Label>
@@ -148,7 +185,7 @@ export const CreateObjectPanel = ({
         </div>
       )}
       {schema && (
-        <div role='none' className='px-2'>
+        <div role='none'>
           <Input.Root>
             <InputHeader>
               <Input.Label>{t('creating object type label')}</Input.Label>

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -4,13 +4,15 @@
 
 import React, { useCallback, useRef } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, 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';
 
-import { SPACE_PLUGIN, SpaceAction } from '../../meta';
-import { SpaceForm } from '../../types';
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceAction, SpaceForm } from '../../types';
+
+export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
 
 type FormValues = S.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
@@ -18,20 +20,14 @@ const initialValues: FormValues = { edgeReplication: true };
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
-      const result = await dispatch({
-        action: SpaceAction.CREATE,
-        data,
-      });
-      const target = result?.data.space;
+      const result = await dispatch(createIntent(SpaceAction.Create, data));
+      const target = result.data?.space;
       if (target) {
-        await dispatch({
-          action: SpaceAction.OPEN_CREATE_OBJECT,
-          data: { target },
-        });
+        await dispatch(createIntent(SpaceAction.OpenCreateObject, { target }));
       }
     },
     [dispatch],
@@ -41,7 +37,7 @@ export const CreateSpaceDialog = () => {
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
     <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>

package/src/components/JoinDialog.tsx

@@ -4,9 +4,9 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
-import { ObservabilityAction } from '@dxos/plugin-observability/meta';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useSpaces } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
@@ -14,13 +14,15 @@ import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
+
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const spaces = useSpaces();
   const { graph } = useGraph();
 
@@ -28,9 +30,8 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
     async (result: InvitationResult | null) => {
       if (result?.spaceKey) {
         await Promise.all([
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
+          dispatch(
+            createIntent(LayoutAction.SetLayout, {
               element: 'toast',
               subject: {
                 id: `${SPACE_PLUGIN}/join-success`,
@@ -38,15 +39,14 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
                 title: t('join success label'),
                 closeLabel: t('dismiss label'),
               },
-            },
-          }),
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
+            }),
+          ),
+          dispatch(
+            createIntent(LayoutAction.SetLayout, {
               element: 'dialog',
               state: false,
-            },
-          }),
+            }),
+          ),
         ]);
       }
 
@@ -60,33 +60,17 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         // If the target has not yet replicated, this will trigger a loading toast.
         await graph.waitForPath({ target }).catch(() => {});
         await Promise.all([
-          dispatch({
-            action: NavigationAction.OPEN,
-            data: {
-              activeParts: { main: [target] },
-            },
-          }),
-          dispatch({
-            action: NavigationAction.EXPOSE,
-            data: {
-              id: target,
-            },
-          }),
+          dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [target] } })),
+          dispatch(createIntent(NavigationAction.Expose, { id: target })),
         ]);
       }
 
       await onDone?.(result);
 
       if (space) {
-        await dispatch({
-          action: ObservabilityAction.SEND_EVENT,
-          data: {
-            name: 'space.join',
-            properties: {
-              spaceId: space.id,
-            },
-          },
-        });
+        await dispatch(
+          createIntent(ObservabilityAction.SendEvent, { name: 'space.join', properties: { spaceId: space.id } }),
+        );
       }
     },
     [dispatch, spaces],

package/src/components/PersistenceStatus.tsx

@@ -76,7 +76,7 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
             )}
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content classNames='z-10'>
+            <Tooltip.Content>
               {t('persisted locally message')}
               <Tooltip.Arrow />
             </Tooltip.Content>

package/src/components/PopoverRenameObject.tsx

@@ -10,6 +10,8 @@ import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
+
 export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);

package/src/components/PopoverRenameSpace.tsx

@@ -9,6 +9,8 @@ import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
+
 export const PopoverRenameSpace = ({ space }: { space: Space }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);

package/src/components/ShareSpaceButton.tsx

@@ -4,16 +4,17 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN, SpaceAction } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
 
 export const ShareSpaceButton = ({ space }: { space: Space }) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  return <ShareSpaceButtonImpl onClick={() => dispatch({ action: SpaceAction.SHARE, data: { space } })} />;
+  return <ShareSpaceButtonImpl onClick={() => dispatch(createIntent(SpaceAction.Share, { space }))} />;
 };
 
 // TODO(wittjosiah): Better way to name pure/impure components?

package/src/components/SpacePluginSettings.tsx

@@ -4,30 +4,19 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
-import { SpaceAction, SPACE_PLUGIN } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
 import { type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
 
   return (
     <>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
-        <Input.Switch
-          checked={settings.showHidden}
-          onCheckedChange={(checked) =>
-            dispatch({
-              plugin: SPACE_PLUGIN,
-              action: SpaceAction.TOGGLE_HIDDEN,
-              data: { state: !!checked },
-            })
-          }
-        />
+        <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
       </DeprecatedFormInput>
     </>
   );

package/src/components/SpacePresence.stories.tsx

@@ -61,30 +61,38 @@ export const Full = (props: MemberPresenceProps) => {
   );
 };
 
-export const Small = (props: MemberPresenceProps) => {
-  const p: MemberPresenceProps = {
-    ...props,
-  };
-
+export const Small = () => {
   return (
     <div className='p-4'>
-      <div className='p-3'>
-        <SmallPresence count={0} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={0} />
+        <SmallPresence count={0} attended />
+        <SmallPresence count={0} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={1} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={1} />
+        <SmallPresence count={1} attended />
+        <SmallPresence count={1} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={2} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={2} />
+        <SmallPresence count={2} attended />
+        <SmallPresence count={2} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={3} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={3} />
+        <SmallPresence count={3} attended />
+        <SmallPresence count={3} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={4} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={4} />
+        <SmallPresence count={4} attended />
+        <SmallPresence count={4} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={5} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={5} />
+        <SmallPresence count={5} attended />
+        <SmallPresence count={5} containsAttended />
       </div>
     </div>
   );

package/src/components/SpacePresence.tsx

@@ -4,9 +4,10 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { usePlugin } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
 import { type Expando } from '@dxos/echo-schema';
+import { useGraph } from '@dxos/plugin-graph';
 import { PublicKey, useClient } from '@dxos/react-client';
 import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
@@ -22,11 +23,13 @@ import {
   ListItem,
   useDefaultValue,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
+import { SpaceCapabilities } from '../capabilities';
+import { usePath } from '../hooks';
 import { SPACE_PLUGIN } from '../meta';
-import type { ObjectViewerProps, SpacePluginProvides } from '../types';
+import type { ObjectViewerProps } from '../types';
 
 // TODO(thure): Get/derive these values from protocol
 const REFRESH_INTERVAL = 5000;
@@ -39,7 +42,8 @@ const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 
 export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?: PublicKey }) => {
-  const spacePlugin = usePlugin<SpacePluginProvides>(SPACE_PLUGIN);
+  // TODO(wittjosiah): Doesn't need to be mutable but readonly type messes with ComplexMap.
+  const spaceState = useCapability(SpaceCapabilities.MutableState);
   const client = useClient();
   const identity = useIdentity();
   const space = spaceKey ? client.spaces.get(spaceKey) : getSpace(object);
@@ -61,11 +65,10 @@ export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?
 
   // TODO(thure): Could it be a smell to return early when there are interactions with `deepSignal` later, since it
   //  prevents reactivity?
-  if (!identity || !spacePlugin || !space) {
+  if (!identity || !spaceState || !space) {
     return null;
   }
 
-  const spaceState = spacePlugin.provides.space;
   const currentObjectViewers = spaceState.viewersByObject[fullyQualifiedId(object)] ?? noViewers;
 
   const membersForObject = spaceMembers
@@ -194,16 +197,30 @@ const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: P
   );
 };
 
-export const SmallPresenceLive = ({
-  id,
-  viewers,
-}: {
+export type SmallPresenceLiveProps = {
   id?: string;
+  open?: boolean;
   viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
-}) => {
+};
+
+export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const isAttended = hasAttention || isAncestor || isRelated;
+
+  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
+  //   this will result in an empty path until the graph is connected.
+  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
+  const { graph } = useGraph();
+  const attended = useAttended();
+  const startOfAttention = attended.at(-1);
+  const path = usePath(graph, startOfAttention);
+  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
-    return Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION);
+    return Array.from<ObjectViewerProps>(viewers.values()).filter(
+      (viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION,
+    );
   };
 
   const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
@@ -218,24 +235,28 @@ export const SmallPresenceLive = ({
     }
   }, [viewers]);
 
-  return <SmallPresence id={id} count={activeViewers.length} />;
+  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
 };
 
-export const SmallPresence = ({ id, count }: { id?: string; count: number }) => {
+export type SmallPresenceProps = {
+  count?: number;
+} & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
+
+export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const attention = hasAttention || isAncestor || isRelated;
 
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        {/* TODO(wittjosiah): Don't depend on data attribute just pass prop to AttentionGlyph. */}
-        <div role='none' className='flex' data-attention={attention}>
-          <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
-        </div>
+        <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' classNames='z-[70]'>
+        <Tooltip.Content side='bottom'>
           <span>{t('presence label', { count })}</span>
           <Tooltip.Arrow />
         </Tooltip.Content>

package/src/components/SpaceSettings/SpaceSettingsDialog.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -16,8 +16,7 @@ import { SpaceSettingsDialog, type SpaceSettingsDialogProps } from './SpaceSetti
 import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsDialogProps>) => {
-  const { space } = useStoryClientData();
-
+  const { space } = useClientProvider();
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -13,6 +13,8 @@ import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSetting
 import { SPACE_PLUGIN } from '../../meta';
 import { COMPOSER_SPACE_LOCK, getSpaceDisplayName } from '../../util';
 
+export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
+
 export type SpaceSettingsTab = 'members' | 'settings';
 
 export type SpaceSettingsDialogProps = {
@@ -39,7 +41,7 @@ export const SpaceSettingsDialog = ({
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
     <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title
           onClick={() => setTabsActivePart('list')}
           aria-description={t('click to return to tablist description')}

package/src/components/SpaceSettings/SpaceSettingsPanel.stories.tsx

@@ -7,16 +7,15 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
 import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsPanelProps>) => {
-  const { space } = useStoryClientData();
-
-  return <SpaceSettingsPanel {...args} space={space!} />;
+  const { space } = useClientProvider();
+  return <SpaceSettingsPanel {...args} space={space!} classNames='p-2 border border-primary-500 rounded' />;
 };
 
 const meta: Meta = {
@@ -24,7 +23,10 @@ const meta: Meta = {
   component: SpaceSettingsPanel,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
-  parameters: { translations },
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
 };
 
 export default meta;