@dxos/plugin-space 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/cli/plugin.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { Tag } from '@dxos/echo';
 import { ClientEvents } from '@dxos/plugin-client/types';
 import { Collection, DataTypes } from '@dxos/schema';
@@ -17,7 +18,7 @@ import {
   HasSubject,
   Organization,
   Person,
-  Project,
+  Pipeline,
   Task,
 } from '@dxos/types';
 
@@ -31,10 +32,19 @@ import { database, queue, space } from './commands';
 
 export const SpacePlugin = Plugin.define<SpacePluginOptions>(meta).pipe(
   // TODO(wittjosiah): Could some of these commands make use of operations?
-  Common.Plugin.addCommandModule({
+  AppPlugin.addCommandModule({
     commands: [database, queue, space],
   }),
-  Common.Plugin.addSchemaModule({
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Collection.Collection.typename,
+      metadata: {
+        createObject: ((props) => Effect.sync(() => Collection.make(props))) satisfies CreateObject,
+        addToCollectionOnCreate: true,
+      },
+    },
+  }),
+  AppPlugin.addSchemaModule({
     schema: [
       ...DataTypes,
       AnchoredTo.AnchoredTo,
@@ -45,33 +55,30 @@ export const SpacePlugin = Plugin.define<SpacePluginOptions>(meta).pipe(
       HasSubject.HasSubject,
       Organization.Organization,
       Person.Person,
-      Project.Project,
+      Pipeline.Pipeline,
       Tag.Tag,
       Task.Task,
     ],
   }),
-  Common.Plugin.addMetadataModule({
-    metadata: {
-      id: Collection.Collection.typename,
-      metadata: {
-        createObject: ((props) => Effect.sync(() => Collection.make(props))) satisfies CreateObject,
-        addToCollectionOnCreate: true,
-      },
-    },
-  }),
-  Plugin.addModule(({ invitationUrl = 'http://localhost:5173', invitationProp = 'spaceInvitationCode' }) => {
-    const createInvitationUrl = (invitationCode: string) => {
-      const baseUrl = new URL(invitationUrl);
-      baseUrl.searchParams.set(invitationProp, invitationCode);
-      return baseUrl.toString();
-    };
+  Plugin.addModule(
+    ({
+      shareableLinkOrigin = 'http://localhost:5173',
+      invitationPath = '/',
+      invitationProp = 'spaceInvitationCode',
+    }) => {
+      const createInvitationUrl = (invitationCode: string) => {
+        const baseUrl = new URL(invitationPath || '/', shareableLinkOrigin);
+        baseUrl.searchParams.set(invitationProp, invitationCode);
+        return baseUrl.toString();
+      };
 
-    return {
-      id: Capability.getModuleTag(OperationResolver),
-      activatesOn: Common.ActivationEvent.SetupOperationResolver,
-      activate: () => OperationResolver({ createInvitationUrl, observability: false }),
-    };
-  }),
+      return {
+        id: Capability.getModuleTag(OperationResolver),
+        activatesOn: ActivationEvents.SetupOperationResolver,
+        activate: () => OperationResolver({ createInvitationUrl, observability: false }),
+      };
+    },
+  ),
   Plugin.addModule({
     activatesOn: ClientEvents.IdentityCreated,
     activatesAfter: [SpaceEvents.DefaultSpaceReady],

package/src/components/AwaitingObject.tsx

@@ -4,8 +4,9 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useLayout, useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
 import { Filter, useQuery } from '@dxos/react-client/echo';
@@ -53,7 +54,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   );
 
   const handleNavigate = useCallback(() => {
-    void invokePromise(Common.LayoutOperation.Open, { subject: [id] });
+    void invokePromise(LayoutOperation.Open, { subject: [id] });
     void handleClose();
   }, [id, handleClose, invokePromise]);
 

package/src/components/CollectionArticle.tsx

@@ -2,27 +2,37 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { type SurfaceComponentProps, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Filter, Obj } from '@dxos/echo';
-import { Graph, Node, useActionRunner, useConnections } from '@dxos/plugin-graph';
 import { useClient } from '@dxos/react-client';
 import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Layout, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+import { Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
 import { Collection } from '@dxos/schema';
+import { getStyles } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
 
 /**
- *
+ * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
+ */
+const useMetadataResolver = () => {
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
+  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
+};
+
+/**
+ * Article view for collections.
  */
 export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection | Collection.Managed>) => {
   const { t } = useTranslation(meta.id);
-  const { items, handleSearch } = useCollectionItems(subject);
+  const resolveMetadata = useMetadataResolver();
+  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata);
 
   return (
     <Layout.Main toolbar>
@@ -32,9 +42,11 @@ export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.
         </Toolbar.Root>
         <SearchList.Content>
           <Mosaic.Container asChild>
-            <Mosaic.Viewport padding>
-              <Mosaic.Stack items={items} getId={(node) => node.id} Tile={NodeTile} />
-            </Mosaic.Viewport>
+            <ScrollArea.Root orientation='vertical'>
+              <ScrollArea.Viewport classNames='p-2'>
+                <Mosaic.Stack items={items} getId={(item) => item.id} Tile={ObjectTile} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
           </Mosaic.Container>
         </SearchList.Content>
       </SearchList.Root>
@@ -42,32 +54,32 @@ export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.
   );
 };
 
-const NodeTile: StackTileComponent<Node.Node> = ({ data: node }) => {
+type ObjectItem = {
+  id: string;
+  object: Obj.Unknown;
+  icon: string;
+  iconHue?: string;
+};
+
+const ObjectTile: MosaicStackTileComponent<ObjectItem> = (props) => {
+  const item = props.data;
   const { t } = useTranslation(meta.id);
-  const { graph } = useAppGraph();
   const { invokeSync } = useOperationInvoker();
-  const runAction = useActionRunner();
 
-  const label = toLocalizedString(node.properties.label, t);
-  const icon = node.properties.icon ?? 'ph--placeholder--regular';
+  const typename = Obj.getTypename(item.object) ?? '';
+  const label =
+    Obj.getLabel(item.object) ??
+    toLocalizedString(['object name placeholder', { ns: typename, defaultValue: item.id }], t);
+  const styles = item.iconHue ? getStyles(item.iconHue) : undefined;
 
   const handleClick = () => {
-    if (Node.isAction(node)) {
-      // Run action if this is an action node.
-      const [parent] = Graph.getConnections(graph, node.id, 'inbound');
-      if (parent) {
-        void runAction(node, { parent });
-      }
-    } else {
-      // Navigate to the node.
-      invokeSync(Common.LayoutOperation.Open, { subject: [node.id] });
-    }
+    invokeSync(LayoutOperation.Open, { subject: [item.id] });
   };
 
   return (
     <Card.Root fullWidth>
       <Card.Toolbar>
-        <Card.ToolbarIconButton variant='ghost' label={label} icon={icon} />
+        <Card.ToolbarIconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.icon} />
         <Card.Title onClick={handleClick}>{label}</Card.Title>
         <Card.Menu />
       </Card.Toolbar>
@@ -78,32 +90,19 @@ const NodeTile: StackTileComponent<Node.Node> = ({ data: node }) => {
 export default CollectionArticle;
 
 /**
- * Hook to get items from a regular collection using graph connections.
+ * Hook to get items from a regular collection.
  */
-const useRegularCollectionItems = (collection: Collection.Collection) => {
-  const { graph } = useAppGraph();
-  const collectionId = Obj.getDXN(collection).toString();
-  const children = useConnections(graph, collectionId, 'outbound');
-
-  // Filter children to those which are objects or actions with disposition 'item'.
+const useRegularCollectionItems = (collection: Collection.Collection): Obj.Unknown[] => {
   return useMemo(
-    () =>
-      children.filter((node) => {
-        // Include regular objects.
-        if (Obj.isObject(node.data)) {
-          return true;
-        }
-        // Include actions with disposition 'item'.
-        return Node.isAction(node) && node.properties.disposition === 'item';
-      }),
-    [children],
+    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
+    [collection.objects],
   );
 };
 
 /**
  * Hook to get items from a managed collection by querying the space.
  */
-const useManagedCollectionItems = (collection: Collection.Managed) => {
+const useManagedCollectionItems = (collection: Collection.Managed): Obj.Unknown[] => {
   const client = useClient();
   const space = getSpace(collection);
 
@@ -112,46 +111,46 @@ const useManagedCollectionItems = (collection: Collection.Managed) => {
     [client, collection],
   );
 
-  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
-
-  // Convert objects to node-like items for consistent rendering.
-  return useMemo(
-    () =>
-      objects.map(
-        (obj) =>
-          ({
-            id: Obj.getDXN(obj).toString(),
-            type: 'managed-object',
-            data: obj,
-            properties: {
-              label: Obj.getLabel(obj) ?? obj.id,
-              icon: 'ph--placeholder--regular',
-            },
-          }) as Node.Node,
-      ),
-    [objects],
-  );
+  return useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
 };
 
+type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
+
 /**
  * Combined hook to get collection items with search/filter support.
  */
-const useCollectionItems = (collection: Collection.Collection | Collection.Managed) => {
+const useCollectionItems = (
+  collection: Collection.Collection | Collection.Managed,
+  resolveMetadata: MetadataResolver,
+) => {
   const isManaged = Obj.instanceOf(Collection.Managed, collection);
 
   // Call both hooks unconditionally to satisfy React's rules of hooks.
-  const regularItems = useRegularCollectionItems(collection as Collection.Collection);
-  const managedItems = useManagedCollectionItems(collection as Collection.Managed);
+  const regularObjects = useRegularCollectionItems(collection as Collection.Collection);
+  const managedObjects = useManagedCollectionItems(collection as Collection.Managed);
 
-  const items = isManaged ? managedItems : regularItems;
+  const objects = isManaged ? managedObjects : regularObjects;
+
+  // Convert objects to items with resolved metadata.
+  const items = useMemo(
+    () =>
+      objects.map((obj) => {
+        const typename = Obj.getTypename(obj);
+        const metadata = typename ? resolveMetadata(typename) : {};
+        return {
+          id: Obj.getDXN(obj).toString(),
+          object: obj,
+          icon: metadata.icon ?? 'ph--placeholder--regular',
+          iconHue: metadata.iconHue,
+        } satisfies ObjectItem;
+      }),
+    [objects, resolveMetadata],
+  );
 
   // Use searchlist results for filtering.
   const { results, handleSearch } = useSearchListResults({
     items,
-    extract: (node) => {
-      const label = node.properties.label;
-      return typeof label === 'string' ? label : (label?.en ?? node.id);
-    },
+    extract: (item) => Obj.getLabel(item.object) ?? item.id,
   });
 
   return { items: results, handleSearch };

package/src/components/CollectionSection.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { useTranslation } from '@dxos/react-ui';
 import { type Collection } from '@dxos/schema';
 

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -35,7 +35,7 @@ const meta = {
   component: CreateObjectDialog,
   render: DefaultStory,
   decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withTheme(), // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({
       plugins: [RuntimePlugin(), OperationPlugin()],
     }),

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -5,8 +5,9 @@
 import * as Effect from 'effect/Effect';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/react';
+import { Capability } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { Database, Obj, Type } from '@dxos/echo';
 import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
 import { runAndForwardErrors } from '@dxos/effect';
@@ -52,7 +53,7 @@ export const CreateObjectDialog = ({
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
     (typename) => {
       const metadata = manager.capabilities
-        .getAll(Common.Capability.Metadata)
+        .getAll(AppCapabilities.Metadata)
         .find(({ id }) => id === typename)?.metadata;
       return metadata?.createObject ? (metadata as Metadata) : undefined;
     },
@@ -95,7 +96,7 @@ export const CreateObjectDialog = ({
           const shouldNavigate = _shouldNavigate ?? (() => true);
           if (shouldNavigate(object)) {
             yield* Effect.promise(() =>
-              operationInvoker.invokePromise(Common.LayoutOperation.Open, {
+              operationInvoker.invokePromise(LayoutOperation.Open, {
                 subject: [Obj.getDXN(object).toString()],
               }),
             );
@@ -126,19 +127,21 @@ export const CreateObjectDialog = ({
           <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
-      <CreateObjectPanel
-        schemas={userSchemas}
-        spaces={spaces}
-        target={target}
-        views={views}
-        typename={typename}
-        initialFormValues={initialFormValues}
-        defaultSpaceId={client.spaces.default.id}
-        resolve={resolve}
-        onTargetChange={setTarget}
-        onTypenameChange={setTypename}
-        onCreateObject={handleCreateObject}
-      />
+      <Dialog.Body>
+        <CreateObjectPanel
+          schemas={userSchemas}
+          spaces={spaces}
+          target={target}
+          views={views}
+          typename={typename}
+          initialFormValues={initialFormValues}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+          onCreateObject={handleCreateObject}
+        />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -128,6 +128,8 @@ export const CreateObjectPanel = ({
   ) : null;
 };
 
+CreateObjectPanel.displayName = 'CreateObjectPanel';
+
 const SelectSpace = ({
   spaces,
   defaultSpaceId,
@@ -166,33 +168,32 @@ const SelectSpace = ({
       ),
   });
 
+  // TODO(burdon): Replace with Combobox.
   return (
     <SearchList.Root onSearch={handleSearch}>
-      <div aria-label={t('space input label')} role='combobox' aria-expanded='true'>
+      <SearchList.Content>
         <SearchList.Input
           autoFocus
           data-testid='create-object-form.space-input'
           placeholder={t('space input placeholder')}
         />
-        <SearchList.Content>
-          <SearchList.Viewport>
-            {results.map((space) => (
-              <SearchList.Item
-                key={space.id}
-                value={space.id}
-                label={toLocalizedString(
-                  getSpaceDisplayName(space, {
-                    personal: space.id === defaultSpaceId,
-                  }),
-                  t,
-                )}
-                onSelect={() => onChange?.(space.db)}
-                classNames='flex items-center gap-2'
-              />
-            ))}
-          </SearchList.Viewport>
-        </SearchList.Content>
-      </div>
+        <SearchList.Viewport>
+          {results.map((space) => (
+            <SearchList.Item
+              key={space.id}
+              value={space.id}
+              label={toLocalizedString(
+                getSpaceDisplayName(space, {
+                  personal: space.id === defaultSpaceId,
+                }),
+                t,
+              )}
+              onSelect={() => onChange?.(space.db)}
+              classNames='flex items-center gap-2'
+            />
+          ))}
+        </SearchList.Viewport>
+      </SearchList.Content>
     </SearchList.Root>
   );
 };
@@ -218,30 +219,28 @@ const SelectSchema = ({
 
   return (
     <SearchList.Root onSearch={handleSearch}>
-      <div aria-label={t('schema input label')} role='combobox' aria-expanded='true'>
+      <SearchList.Content>
         <SearchList.Input
           autoFocus
           data-testid='create-object-form.schema-input'
           placeholder={t('schema input placeholder')}
         />
-        <SearchList.Content>
-          <SearchList.Viewport>
-            {results.map((option) => (
-              <SearchList.Item
-                key={option.typename}
-                value={option.typename}
-                label={t('typename label', {
-                  ns: option.typename,
-                  defaultValue: option.typename,
-                })}
-                icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'}
-                onSelect={() => onChange(option.typename)}
-                classNames='flex items-center gap-2'
-              />
-            ))}
-          </SearchList.Viewport>
-        </SearchList.Content>
-      </div>
+        <SearchList.Viewport>
+          {results.map((option) => (
+            <SearchList.Item
+              key={option.typename}
+              value={option.typename}
+              label={t('typename label', {
+                ns: option.typename,
+                defaultValue: option.typename,
+              })}
+              icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'}
+              onSelect={() => onChange(option.typename)}
+              classNames='flex items-center gap-2'
+            />
+          ))}
+        </SearchList.Viewport>
+      </SearchList.Content>
     </SearchList.Root>
   );
 };

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { runAndForwardErrors } from '@dxos/effect';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
@@ -33,10 +33,8 @@ export const CreateSpaceDialog = () => {
       const program = Effect.gen(function* () {
         const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
         if (result?.space) {
-          yield* Effect.promise(() =>
-            invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: result.space.id }),
-          );
-          yield* Effect.promise(() => invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }));
+          yield* Effect.promise(() => invokePromise(LayoutOperation.SwitchWorkspace, { subject: result.space.id }));
+          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
         }
       });
       await runAndForwardErrors(program);
@@ -52,21 +50,23 @@ export const CreateSpaceDialog = () => {
           <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
-      <Form.Root
-        testId='create-space-form'
-        autoFocus
-        schema={SpaceForm}
-        values={initialValues}
-        fieldProvider={inputSurfaceLookup}
-        onSave={handleCreateSpace}
-      >
-        <Form.Viewport>
-          <Form.Content>
-            <Form.FieldSet />
-            <Form.Submit />
-          </Form.Content>
-        </Form.Viewport>
-      </Form.Root>
+      <Dialog.Body>
+        <Form.Root
+          testId='create-space-form'
+          autoFocus
+          schema={SpaceForm}
+          values={initialValues}
+          fieldProvider={inputSurfaceLookup}
+          onSave={handleCreateSpace}
+        >
+          <Form.Viewport>
+            <Form.Content>
+              <Form.FieldSet />
+              <Form.Submit />
+            </Form.Content>
+          </Form.Viewport>
+        </Form.Root>
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/components/JoinDialog/JoinDialog.tsx

@@ -4,8 +4,9 @@
 
 import React, { useCallback } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Trigger } from '@dxos/async';
 import { Graph } from '@dxos/plugin-graph';
 import { ObservabilityOperation } from '@dxos/plugin-observability/types';
@@ -38,13 +39,13 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       }
 
       await Promise.all([
-        invokePromise(Common.LayoutOperation.AddToast, {
+        invokePromise(LayoutOperation.AddToast, {
           id: `${meta.id}/join-success`,
           duration: 5_000,
           title: ['join success label', { ns: meta.id }],
           closeLabel: ['dismiss label', { ns: meta.id }],
         }),
-        invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }),
+        invokePromise(LayoutOperation.UpdateDialog, { state: false }),
       ]);
 
       let space = client.spaces.get(spaceKey);
@@ -60,7 +61,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         space = await trigger.wait();
       }
 
-      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: space.id });
+      await invokePromise(LayoutOperation.SwitchWorkspace, { subject: 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.
@@ -71,8 +72,8 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         // If the target has not yet replicated, this will trigger a loading toast.
         await Graph.waitForPath(graph, { target }).catch(() => {});
         await Promise.all([
-          invokePromise(Common.LayoutOperation.Open, { subject: [target] }),
-          invokePromise(Common.LayoutOperation.Expose, { subject: target }),
+          invokePromise(LayoutOperation.Open, { subject: [target] }),
+          invokePromise(LayoutOperation.Expose, { subject: target }),
         ]);
       }
 

package/src/components/MembersContainer/MembersContainer.stories.tsx

@@ -36,7 +36,7 @@ const meta = {
   component: MembersContainer as any,
   render: render(DefaultStory),
   decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withTheme(), // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({ plugins: [OperationPlugin()] }),
     withClientProvider({
       createIdentity: true,