@dxos/plugin-space 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/ForeignKeys/ForeignKeys.tsx

@@ -5,7 +5,8 @@
 import React, { useCallback } from 'react';
 
 import { type Key } from '@dxos/echo';
-import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Listbox } from '@dxos/react-ui-list';
 
 import { meta } from '#meta';
 
@@ -17,11 +18,13 @@ export type ForeignKeysProps = {
 // TODO(wittjosiah): This is a clone of `TokenManager`. Consider a form variant for arrays of read-only objects.
 export const ForeignKeys = ({ keys, onDelete }: ForeignKeysProps) => {
   return (
-    <List classNames='flex flex-col gap-2'>
-      {keys.map((key) => (
-        <KeyItem key={key.id} forignKey={key} onDelete={onDelete} />
-      ))}
-    </List>
+    <Listbox.Root>
+      <Listbox.Content classNames='gap-2'>
+        {keys.map((key) => (
+          <KeyItem key={key.id} forignKey={key} onDelete={onDelete} />
+        ))}
+      </Listbox.Content>
+    </Listbox.Root>
   );
 };
 
@@ -31,27 +34,25 @@ type KeyItemProps = {
 };
 
 const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const handleDelete = useCallback(() => {
     onDelete?.(forignKey);
   }, [forignKey, onDelete]);
 
   return (
-    <ListItem.Root classNames='px-2'>
-      <ListItem.Heading classNames='flex flex-col grow truncate'>
+    <Listbox.Item id={forignKey.id} classNames='px-2 gap-2'>
+      <div className='flex flex-col grow truncate'>
         <div>{forignKey.source}</div>
         <div className='text-description text-sm truncate'>{forignKey.id}</div>
-      </ListItem.Heading>
-      <ListItem.Endcap>
-        <IconButton
-          iconOnly
-          icon='ph--x--regular'
-          variant='ghost'
-          label={t('delete-key.button')}
-          onClick={handleDelete}
-        />
-      </ListItem.Endcap>
-    </ListItem.Root>
+      </div>
+      <IconButton
+        iconOnly
+        icon='ph--x--regular'
+        variant='ghost'
+        label={t('delete-key.button')}
+        onClick={handleDelete}
+      />
+    </Listbox.Item>
   );
 };

package/src/components/index.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './AwaitingObject';
 export * from './CreateObjectPanel';
 export * from './ForeignKeys';
 export * from './SyncStatus';
 
-export const SpaceSettings: ComponentType<any> = lazy(() => import('./SpaceSettings'));
+// TODO(wittjosiah): Remove.
+export { RENAME_POPOVER } from '../constants';
+export type { RenameCallback, RenameSubject } from '../containers/RenamePopover';

package/src/constants.ts

@@ -6,9 +6,8 @@ import { DXN } from '@dxos/keys';
 
 import { meta } from '#meta';
 
-export const CREATE_OBJECT_DIALOG = DXN.make(`${meta.id}.createObjectDialog`);
-export const CREATE_SPACE_DIALOG = DXN.make(`${meta.id}.createSpaceDialog`);
-export const IMPORT_SPACE_DIALOG = DXN.make(`${meta.id}.importSpaceDialog`);
-export const JOIN_DIALOG = DXN.make(`${meta.id}.joinDialog`);
-export const ENTITY_RENAME_POPOVER = DXN.make(`${meta.id}.entityRenamePopover`);
-export const SPACE_RENAME_POPOVER = DXN.make(`${meta.id}.spaceRenamePopover`);
+export const CREATE_OBJECT_DIALOG = DXN.make(`${meta.profile.key}.createObjectDialog`);
+export const CREATE_SPACE_DIALOG = DXN.make(`${meta.profile.key}.createSpaceDialog`);
+export const IMPORT_SPACE_DIALOG = DXN.make(`${meta.profile.key}.importSpaceDialog`);
+export const JOIN_DIALOG = DXN.make(`${meta.profile.key}.joinDialog`);
+export const RENAME_POPOVER = DXN.make(`${meta.profile.key}.renamePopover`);

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -5,11 +5,11 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Collection, Obj } from '@dxos/echo';
 import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Toolbar } from '@dxos/react-ui';
+import { Card, Icon } from '@dxos/react-ui';
 import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { SearchPanel, useSearchListResults } from '@dxos/react-ui-search';
 import { getStyles } from '@dxos/ui-theme';
@@ -20,7 +20,7 @@ import { meta } from '#meta';
  * Article view for collections.
  */
 export const CollectionArticle = ({ subject, attendableId }: AppSurface.ObjectArticleProps<Collection.Collection>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { items, handleSearch } = useCollectionItems(subject, attendableId);
 
   return (
@@ -51,7 +51,7 @@ type ObjectItem = {
 };
 
 const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
 
   const typename = Obj.getTypename(item.object) ?? '';
@@ -68,7 +68,9 @@ const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
   return (
     <Card.Root fullWidth role='button' classNames='cursor-pointer' onClick={handleClick}>
       <Card.Header>
-        <Toolbar.IconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.fg} />
+        <Card.Block>
+          <Icon icon={item.icon} classNames={styles?.fg} />
+        </Card.Block>
         <Card.Title>{label}</Card.Title>
         <Card.Menu />
       </Card.Header>
@@ -89,7 +91,9 @@ const useCollectionItems = (collection: Collection.Collection, attendableId?: st
     () =>
       objects.map((obj) => {
         const iconAnnotation = Obj.getIcon(obj);
-        const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
+        const targetPath = attendableId
+          ? Paths.getCollectionObjectPath(attendableId, obj.id)
+          : Paths.getObjectPathFromObject(obj);
 
         return {
           id: Obj.getURI(obj),

package/src/containers/CollectionSection/CollectionSection.tsx

@@ -13,7 +13,7 @@ import { meta } from '#meta';
 export type CollectionSectionProps = AppSurface.ObjectSectionProps<Collection.Collection>;
 
 export const CollectionSection = ({ role, subject }: CollectionSectionProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   // TODO(wittjosiah): Better placeholder.
   return (

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -13,7 +13,7 @@ import { type Space } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
+import { type CreateObjectOption, CreateObjectPanel, type Metadata } from '#components';
 import { translations } from '#translations';
 
 const mockOptions: CreateObjectOption[] = [

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { Capability } from '@dxos/app-framework';
 import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
-import { allTypesQuery, getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSpace, LayoutOperation, TypeOptions } from '@dxos/app-toolkit';
 import { PluginRegistryButton, useLayout } from '@dxos/app-toolkit/ui';
 import { Operation } from '@dxos/compute';
 import { Annotation, Collection, Database, Obj, Type } from '@dxos/echo';
@@ -18,7 +18,7 @@ import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { ViewAnnotation } from '@dxos/schema';
+import { CollectionItemAnnotation, ViewAnnotation } from '@dxos/schema';
 
 import { makeCreateObjectEntryForDatabaseType } from '#capabilities';
 import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps } from '#components';
@@ -27,7 +27,7 @@ import { SpaceCapabilities } from '#types';
 
 import { getSpaceDisplayName } from '../../util';
 
-export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
+export const CREATE_OBJECT_DIALOG = `${meta.profile.key}.CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'initialFormValues'> & {
   views?: boolean;
@@ -45,7 +45,7 @@ export const CreateObjectDialog = ({
   shouldNavigate: _shouldNavigate,
   targetNodeId,
 }: CreateObjectDialogProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const manager = usePluginManager();
   const operationInvoker = useOperationInvoker();
   const { invoke } = operationInvoker;
@@ -57,12 +57,15 @@ export const CreateObjectDialog = ({
   const closeRef = useRef<HTMLButtonElement | null>(null);
 
   const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
-  const allTypes = useQuery(db, allTypesQuery);
+  const allTypes = useQuery(db, TypeOptions.allTypesQuery);
   const space = useMemo(() => spaces.find((s) => s.db === db), [spaces, db]);
   const spaceLabel = useMemo(
     () =>
       space &&
-      toLocalizedString(getSpaceDisplayName(space, { personal: space.id === getPersonalSpace(client)?.id }), t),
+      toLocalizedString(
+        getSpaceDisplayName(space, { personal: space.id === AppSpace.getPersonalSpace(client)?.id }),
+        t,
+      ),
     [space, client, t],
   );
 
@@ -86,7 +89,7 @@ export const CreateObjectDialog = ({
       for (const entry of contributions) {
         entries.push(entry);
         if (owningPlugin) {
-          pluginByEntryId.set(entry.id, owningPlugin.meta.name);
+          pluginByEntryId.set(entry.id, owningPlugin.meta.profile.name);
         }
       }
     }
@@ -123,10 +126,35 @@ export const CreateObjectDialog = ({
     return set;
   }, [typeByTypename]);
 
+  // Types eligible to live inside a collection: collections themselves, plus types carrying
+  // CollectionItemAnnotation. Used to filter the create dialog when targeting a collection.
+  const collectionItemTypenames = useMemo(() => {
+    const set = new Set<string>();
+    const collectionTypename = Type.getTypename(Collection.Collection);
+    for (const [name, type] of typeByTypename) {
+      if (
+        name === collectionTypename ||
+        CollectionItemAnnotation.get(Type.getSchema(type)).pipe(Option.getOrElse(() => false))
+      ) {
+        set.add(name);
+      }
+    }
+    return set;
+  }, [typeByTypename]);
+
+  // When creating into a collection, offer only collection-eligible types (mirrors the `views` filter).
+  const collectionTarget = Collection.isCollection(target);
+
   const options = useMemo<CreateObjectOption[]>(
     () =>
       createObjectEntries
-        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
+        .filter((entry) =>
+          views === true
+            ? viewTypenames.has(entry.id)
+            : collectionTarget
+              ? collectionItemTypenames.has(entry.id)
+              : true,
+        )
         .map((entry) => {
           const type = typeByTypename.get(entry.id);
           const schema = type && Type.getSchema(type);
@@ -143,7 +171,17 @@ export const CreateObjectDialog = ({
             description: isDatabase ? spaceLabel : undefined,
           };
         }),
-    [createObjectEntries, views, viewTypenames, typeByTypename, t, pluginNameByEntryId, spaceLabel],
+    [
+      createObjectEntries,
+      views,
+      viewTypenames,
+      collectionTarget,
+      collectionItemTypenames,
+      typeByTypename,
+      t,
+      pluginNameByEntryId,
+      spaceLabel,
+    ],
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
@@ -205,7 +243,7 @@ export const CreateObjectDialog = ({
           target={target}
           typename={typename}
           initialFormValues={initialFormValues}
-          defaultSpaceId={getPersonalSpace(client)?.id ?? client.spaces.get()[0]?.id}
+          defaultSpaceId={AppSpace.getPersonalSpace(client)?.id ?? client.spaces.get()[0]?.id}
           resolve={resolve}
           onCreateObject={handleCreateObject}
           onTargetChange={setTarget}

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -7,7 +7,7 @@ import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, getSpaceHomePath, getSpacePath } from '@dxos/app-toolkit';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { EffectEx } from '@dxos/effect';
 import { Column, Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
@@ -17,14 +17,14 @@ import { meta } from '#meta';
 import { SpaceOperation } from '#operations';
 import { SpaceForm } from '#types';
 
-export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.profile.key}.CreateSpaceDialog`;
 
 type FormValues = Schema.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
 
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
 
   const inputSurfaceLookup = useInputSurfaceLookup();
@@ -36,8 +36,8 @@ export const CreateSpaceDialog = () => {
         if (result?.space) {
           yield* Effect.promise(() =>
             invokePromise(LayoutOperation.Open, {
-              subject: [getSpaceHomePath(result.space.id)],
-              workspace: getSpacePath(result.space.id),
+              subject: [Paths.getSpaceHomePath(result.space.id)],
+              workspace: Paths.getSpacePath(result.space.id),
               navigation: 'immediate',
             }),
           );

package/src/containers/DefaultProperties/DefaultProperties.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { Surface, useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Operation } from '@dxos/compute';
+import { type Database, type Obj } from '@dxos/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { type CreateEntryOverride, ObjectProperties } from '@dxos/react-ui-form';
+
+import { SpaceCapabilities } from '#types';
+
+export type DefaultPropertiesProps = AppSurface.ObjectPropertiesProps<Obj.Unknown>;
+
+/**
+ * Generic object-properties companion rendered for any object: a schema-driven {@link ObjectProperties}
+ * form plus the `object-properties` surface, so plugins whose properties are plain editable fields need
+ * not register a bespoke surface (mirrors `DefaultSettings` for plugin settings).
+ */
+export const DefaultProperties = forwardRef<HTMLDivElement, DefaultPropertiesProps>(
+  ({ role, subject: object }, forwardedRef) => {
+    const manager = usePluginManager();
+    const operationInvoker = useOperationInvoker();
+    const createEntries = useCapabilities(SpaceCapabilities.CreateObjectEntry);
+    const data = useMemo<AppSurface.ObjectPropertiesData>(() => ({ subject: object }), [object]);
+
+    const resolveCreateEntry = useCallback(
+      (typename: string): CreateEntryOverride | undefined => {
+        const entry = createEntries.find((createEntry) => createEntry.id === typename);
+        if (!entry?.inputSchema && !entry?.createObject) {
+          return undefined;
+        }
+        return {
+          inputSchema: entry.inputSchema,
+          createObject: async (values: any, db: Database.Database): Promise<Obj.Unknown> => {
+            const result = await entry
+              .createObject(values, { db, target: db })
+              .pipe(
+                Effect.provideService(Capability.Service, manager.capabilities),
+                Effect.provideService(Operation.Service, operationInvoker),
+                Effect.runPromise,
+              );
+            return result.object;
+          },
+        };
+      },
+      [createEntries, manager, operationInvoker],
+    );
+
+    return (
+      <Panel.Root role={role} ref={forwardedRef}>
+        <Panel.Toolbar>
+          <Toolbar.Root className='dx-document' />
+        </Panel.Toolbar>
+        <Panel.Content>
+          <ObjectProperties object={object} resolveCreateEntry={resolveCreateEntry}>
+            {/* TODO(burdon): Ambiguous naming since providers only replace parts; can't update Toolbar, etc. Consider DefaultSettings pattern. */}
+            <Surface.Surface type={AppSurface.ObjectProperties} data={data} />
+          </ObjectProperties>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);

package/src/containers/DefaultProperties/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { DefaultProperties as default } from './DefaultProperties';

package/src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -6,14 +6,14 @@ import React, { useCallback } from 'react';
 import { FileUploader } from 'react-drag-drop-files';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
 import { SpaceOperation } from '#operations';
 
 export const ImportSpaceDialog = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
 
   const handleFile = useCallback(
@@ -24,7 +24,7 @@ export const ImportSpaceDialog = () => {
       });
       await invokePromise(LayoutOperation.UpdateDialog, { state: false });
       if (result?.space) {
-        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: Paths.getSpacePath(result.space.id) });
       }
     },
     [invokePromise],

package/src/containers/InlineSyncStatus/InlineSyncStatus.tsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { getSpacePath } from '@dxos/app-toolkit';
+import { Paths } from '@dxos/app-toolkit';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
@@ -27,8 +27,8 @@ const useEdgeStatus = (): EdgeStatus.ConnectionState => {
 };
 
 export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
-  const { t } = useTranslation(meta.id);
-  const qualifiedId = getSpacePath(space.id);
+  const { t } = useTranslation(meta.profile.key);
+  const qualifiedId = Paths.getSpacePath(space.id);
   const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);
   const attended = hasAttention || isRelated;
   const containsAttended = isAncestor && !open;

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -5,10 +5,8 @@
 import React, { useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { Trigger } from '@dxos/async';
-import { Graph } from '@dxos/plugin-graph';
 import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
@@ -19,7 +17,7 @@ import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+export const JOIN_DIALOG = `${meta.profile.key}.JoinDialog`;
 
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
@@ -28,8 +26,7 @@ export type JoinDialogProps = JoinPanelProps & {
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
   const { invokePromise } = useOperationInvoker();
   const client = useClient();
-  const { graph } = useAppGraph();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
@@ -40,10 +37,10 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
 
       await Promise.all([
         invokePromise(LayoutOperation.AddToast, {
-          id: `${meta.id}.join-success`,
+          id: `${meta.profile.key}.join-success`,
           duration: 5_000,
-          title: ['join-success.label', { ns: meta.id }],
-          closeLabel: ['dismiss.label', { ns: meta.id }],
+          title: ['join-success.label', { ns: meta.profile.key }],
+          closeLabel: ['dismiss.label', { ns: meta.profile.key }],
         }),
         invokePromise(LayoutOperation.UpdateDialog, { state: false }),
       ]);
@@ -61,21 +58,13 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         space = await trigger.wait();
       }
 
-      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(space.id) });
-
-      // TODO(wittjosiah): If navigableCollections is false and there's no target,
-      //   should try to navigate to the first object of the space replicates.
-      //   Potentially this could also be done on the inviters side to ensure there's always a target.
-      const target = result?.target || (navigableCollections ? space?.id : undefined);
-      if (target) {
-        // Wait before navigating to the target node.
-        // If the target has not yet replicated, this will trigger a loading toast.
-        await Graph.waitForPath(graph, { target }).catch(() => {});
-        await Promise.all([
-          invokePromise(LayoutOperation.Open, { subject: [target] }),
-          invokePromise(LayoutOperation.Expose, { subject: target }),
-        ]);
-      }
+      // TODO(wittjosiah): `result.target` is ignored so acceptance navigates to the space home
+      // immediately; revisit how to incorporate the target once immediate navigation is settled.
+      await invokePromise(LayoutOperation.Open, {
+        subject: [Paths.getSpaceHomePath(space.id)],
+        workspace: Paths.getSpacePath(space.id),
+        navigation: 'immediate',
+      });
 
       onDone?.(result);
 
@@ -88,7 +77,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         });
       }
     },
-    [invokePromise, client, graph, navigableCollections, onDone],
+    [invokePromise, client, navigableCollections, onDone],
   );
 
   // TODO(burdon): Move JoinHeading into Dialog.Heading.