@dxos/plugin-space 0.8.3 → 0.8.4-main.2e9d522

package/src/capabilities/intent-resolver.ts

@@ -21,7 +21,7 @@ import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata
 import { isSpace, getSpace, SpaceState, fullyQualifiedId } from '@dxos/react-client/echo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-import { DataType } from '@dxos/schema';
+import { DataType, ProjectionModel } from '@dxos/schema';
 
 import { SpaceCapabilities } from './capabilities';
 import {
@@ -75,17 +75,27 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
           await space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED);
         }
         await space.waitUntilReady();
+
+        // Create root collection.
         const collection = Obj.make(DataType.Collection, { objects: [] });
-        space.properties[Type.getTypename(DataType.Collection)] = Ref.make(collection);
+        space.properties[DataType.Collection.typename] = Ref.make(collection);
 
+        // Set current migration version.
         if (Migrations.versionProperty) {
           space.properties[Migrations.versionProperty] = Migrations.targetVersion;
         }
 
+        // Create records smart collection.
+        const records = Obj.make(DataType.QueryCollection, {
+          query: { typename: DataType.StoredSchema.typename },
+        });
+        collection.objects.push(Ref.make(records));
+
+        // Allow other plugins to add default content.
         await context.activatePromise(SpaceEvents.SpaceCreated);
         const onSpaceCreatedCallbacks = context.getCapabilities(SpaceCapabilities.OnSpaceCreated);
-        await Promise.all(
-          onSpaceCreatedCallbacks.map((onSpaceCreated) => onSpaceCreated({ space, rootCollection: collection })),
+        const spaceCreatedIntents = onSpaceCreatedCallbacks.map((onSpaceCreated) =>
+          onSpaceCreated({ space, rootCollection: collection }),
         );
 
         return {
@@ -95,6 +105,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
             space,
           },
           intents: [
+            ...spaceCreatedIntents,
             ...(observability
               ? [
                   createIntent(ObservabilityAction.SendEvent, {
@@ -309,9 +320,106 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
         };
       },
     }),
+    createResolver({
+      intent: SpaceAction.UseStaticSchema,
+      resolve: async ({ space, typename }) => {
+        const client = context.getCapability(ClientCapabilities.Client);
+        const schema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
+        invariant(schema, `Schema not found: ${typename}`);
+
+        if (!space.properties.staticRecords) {
+          space.properties.staticRecords = [];
+        }
+
+        if (!space.properties.staticRecords.includes(typename)) {
+          space.properties.staticRecords.push(typename);
+        }
+
+        await context.activatePromise(SpaceEvents.SchemaAdded);
+        const onSchemaAdded = context.getCapabilities(SpaceCapabilities.OnSchemaAdded);
+        const schemaAddedIntents = onSchemaAdded.map((onSchemaAdded) => onSchemaAdded({ space, schema }));
+
+        return {
+          data: {},
+          intents: [
+            ...schemaAddedIntents,
+            ...(observability
+              ? [
+                  createIntent(ObservabilityAction.SendEvent, {
+                    name: 'space.schema.use',
+                    properties: {
+                      spaceId: space.id,
+                      typename: Type.getTypename(schema),
+                    },
+                  }),
+                ]
+              : []),
+          ],
+        };
+      },
+    }),
+    createResolver({
+      intent: SpaceAction.AddSchema,
+      resolve: async ({ space, name, schema: schemaInput }) => {
+        const [schema] = await space.db.schemaRegistry.register([schemaInput]);
+        if (name) {
+          schema.storedSchema.name = name;
+        }
+
+        await context.activatePromise(SpaceEvents.SchemaAdded);
+        const onSchemaAdded = context.getCapabilities(SpaceCapabilities.OnSchemaAdded);
+        const schemaAddedIntents = onSchemaAdded.map((onSchemaAdded) => onSchemaAdded({ space, schema }));
+
+        return {
+          data: {
+            id: schema.id,
+            object: schema.storedSchema,
+            schema,
+          },
+          intents: [
+            ...schemaAddedIntents,
+            ...(observability
+              ? [
+                  createIntent(ObservabilityAction.SendEvent, {
+                    name: 'space.schema.add',
+                    properties: {
+                      spaceId: space.id,
+                      objectId: schema.id,
+                      typename: schema.typename,
+                    },
+                  }),
+                ]
+              : []),
+          ],
+        };
+      },
+    }),
+    createResolver({
+      intent: SpaceAction.DeleteField,
+      resolve: async ({ view, fieldId, deletionData }, undo) => {
+        const space = getSpace(view);
+        invariant(space);
+        invariant(view.query.typename);
+        const schema = await space.db.schemaRegistry.query({ typename: view.query.typename }).firstOrUndefined();
+        invariant(schema);
+        const projection = new ProjectionModel(schema.jsonSchema, view.projection);
+        if (!undo) {
+          const { deleted, index } = projection.deleteFieldProjection(fieldId);
+          return {
+            undoable: {
+              message: ['field deleted label', { ns: SPACE_PLUGIN }],
+              data: { deletionData: { ...deleted, index } },
+            },
+          };
+        } else if (undo && deletionData) {
+          const { field, props, index } = deletionData;
+          projection.setFieldProjection({ field, props }, index);
+        }
+      },
+    }),
     createResolver({
       intent: SpaceAction.OpenCreateObject,
-      resolve: ({ target, typename, navigable = true }) => {
+      resolve: ({ target, typename, navigable = true, onCreateObject }) => {
         const state = context.getCapability(SpaceCapabilities.State);
 
         return {
@@ -324,6 +432,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
                 props: {
                   target,
                   typename,
+                  onCreateObject,
                   shouldNavigate: navigable
                     ? (object: Obj.Any) => {
                         const isCollection = Obj.instanceOf(DataType.Collection, object);
@@ -381,13 +490,13 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
         } else if (isSpace(target) && hidden) {
           space.db.add(object);
         } else if (isSpace(target)) {
-          const collection = space.properties[Type.getTypename(DataType.Collection)]?.target;
+          const collection = space.properties[DataType.Collection.typename]?.target;
           if (Obj.instanceOf(DataType.Collection, collection)) {
             collection.objects.push(Ref.make(object));
           } else {
             // TODO(wittjosiah): Can't add non-echo objects by including in a collection because of types.
             const collection = Obj.make(DataType.Collection, { objects: [Ref.make(object)] });
-            space.properties[Type.getTypename(DataType.Collection)] = Ref.make(collection);
+            space.properties[DataType.Collection.typename] = Ref.make(collection);
           }
         }
 
@@ -444,7 +553,7 @@ export default ({ context, observability, createInvitationUrl }: IntentResolverO
 
         if (!undo) {
           const parentCollection: DataType.Collection =
-            target ?? space.properties[Type.getTypename(DataType.Collection)]?.target;
+            target ?? space.properties[DataType.Collection.typename]?.target;
           const nestedObjectsList = await Promise.all(objects.map((obj) => getNestedObjects(obj, resolve)));
 
           const deletionData = {

package/src/capabilities/react-surface.tsx

@@ -19,7 +19,16 @@ import { findAnnotation } from '@dxos/effect';
 import { SettingsStore } from '@dxos/local-storage';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { useClient } from '@dxos/react-client';
-import { getSpace, isLiveObject, isSpace, parseId, SpaceState, useSpace, type Space } from '@dxos/react-client/echo';
+import {
+  fullyQualifiedId,
+  getSpace,
+  isLiveObject,
+  isSpace,
+  parseId,
+  SpaceState,
+  useSpace,
+  type Space,
+} from '@dxos/react-client/echo';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { type InputProps, SelectInput } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
@@ -39,6 +48,7 @@ import {
   JoinDialog,
   MembersContainer,
   MenuFooter,
+  ObjectDetailsPanel,
   ObjectSettingsContainer,
   POPOVER_RENAME_OBJECT,
   POPOVER_RENAME_SPACE,
@@ -50,6 +60,7 @@ import {
   SpacePresence,
   SpaceSettingsContainer,
   SyncStatus,
+  ViewEditor,
   type CreateObjectDialogProps,
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
@@ -59,7 +70,7 @@ type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
 };
 
-const OMIT = [Type.getTypename(DataType.Collection), Type.getTypename(DataType.QueryCollection)];
+const OMIT = [DataType.Collection.typename, DataType.QueryCollection.typename];
 
 export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
   contributes(Capabilities.ReactSurface, [
@@ -73,7 +84,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         <Surface
           data={{
             id: data.subject.id,
-            subject: data.subject.properties[Type.getTypename(DataType.Collection)]?.target,
+            subject: data.subject.properties[DataType.Collection.typename]?.target,
           }}
           role={role}
           {...rest}
@@ -146,6 +157,19 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         return <SchemaContainer space={space} />;
       },
     }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/selected-objects`,
+      role: 'article',
+      filter: (data): data is { companionTo: DataType.View; subject: 'selected-objects' } =>
+        Obj.instanceOf(DataType.View, data.companionTo) && data.subject === 'selected-objects',
+      component: ({ data }) => (
+        <ObjectDetailsPanel
+          key={fullyQualifiedId(data.companionTo)}
+          objectId={fullyQualifiedId(data.companionTo)}
+          view={data.companionTo}
+        />
+      ),
+    }),
     createSurface({
       id: JOIN_DIALOG,
       role: 'dialog',
@@ -228,7 +252,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
 
         const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
         const whitelistedTypenames = useMemo(
-          () => new Set(schemaWhitelists.flatMap((typeArray) => typeArray.map((type) => type.typename))),
+          () => new Set(schemaWhitelists.flatMap((typeArray) => typeArray.map((type) => Type.getTypename(type)))),
           [schemaWhitelists],
         );
 
@@ -239,7 +263,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
               objectForms
                 .map((form) => Type.getTypename(form.objectSchema))
                 // TODO(wittjosiah): Remove.
-                .filter((typename) => !OMIT.includes(typename)),
+                .filter((typename) => !OMIT.includes(typename) && !typename.endsWith('View')),
             ),
           [objectForms],
         );
@@ -247,13 +271,18 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         const fixed = client.graph.schemaRegistry.schemas.filter((schema) => {
           const limitedStatic =
             annotation.includes('limited-static') && whitelistedTypenames.has(Type.getTypename(schema));
+          const unusedStatic =
+            annotation.includes('unused-static') &&
+            whitelistedTypenames.has(Type.getTypename(schema)) &&
+            !space.properties.staticRecords?.includes(Type.getTypename(schema));
           const objectForm = annotation.includes('object-form') && objectFormTypenames.has(Type.getTypename(schema));
-          return annotation.includes('static') || limitedStatic || objectForm;
+          return annotation.includes('static') || limitedStatic || unusedStatic || objectForm;
         });
         const dynamic = space?.db.schemaRegistry.query().runSync();
         const typenames = Array.from(
           new Set<string>([
             ...(annotation.includes('limited-static') ||
+            annotation.includes('unused-static') ||
             annotation.includes('static') ||
             annotation.includes('object-form')
               ? fixed.map((schema) => Type.getTypename(schema))
@@ -264,25 +293,33 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
 
         const options = useMemo(
           () =>
-            typenames.map((typename) => ({
-              value: typename,
-              label: t('typename label', { ns: typename, defaultValue: typename }),
-            })),
+            typenames
+              .map((typename) => ({
+                value: typename,
+                label: t('typename label', { ns: typename, defaultValue: typename }),
+              }))
+              .toSorted((a, b) => a.label.localeCompare(b.label)),
           [t, typenames],
         );
 
         return <SelectInput {...props} options={options} />;
       },
     }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/object-settings`,
+      role: 'object-settings',
+      filter: (data): data is { subject: DataType.View } => Obj.instanceOf(DataType.View, data.subject),
+      component: ({ data }) => <ViewEditor view={data.subject} />,
+    }),
     createSurface({
       id: POPOVER_RENAME_SPACE,
-      role: 'popover',
+      role: 'card--popover',
       filter: (data): data is { props: Space } => data.component === POPOVER_RENAME_SPACE && isSpace(data.props),
       component: ({ data }) => <PopoverRenameSpace space={data.props} />,
     }),
     createSurface({
       id: POPOVER_RENAME_OBJECT,
-      role: 'popover',
+      role: 'card--popover',
       filter: (data): data is { props: Obj.Any } =>
         data.component === POPOVER_RENAME_OBJECT && isLiveObject(data.props),
       component: ({ data }) => <PopoverRenameObject object={data.props} />,
@@ -328,7 +365,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         const space = isSpace(data.subject) ? data.subject : getSpace(data.subject);
         const object = isSpace(data.subject)
           ? data.subject.state.get() === SpaceState.SPACE_READY
-            ? (space?.properties[Type.getTypename(DataType.Collection)]?.target as DataType.Collection)
+            ? (space?.properties[DataType.Collection.typename]?.target as DataType.Collection)
             : undefined
           : data.subject;
 

package/src/components/AwaitingObject.tsx

@@ -2,14 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
-import { Button, Toast, useTranslation } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { SpaceAction } from '../types';
@@ -66,17 +64,17 @@ export const AwaitingObject = ({ id }: { id: string }) => {
         <Toast.Title classNames='flex items-center gap-2'>
           {found ? (
             <>
-              <CheckCircle className={getSize(5)} />
+              <Icon icon='ph--check-circle--regular' size={5} />
               <span>{t('found object label')}</span>
             </>
           ) : waiting ? (
             <>
-              <CircleNotch className={mx(getSize(5), 'animate-spin')} />
+              <Icon icon='ph--circle-notch--regular' size={5} classNames='animate-spin' />
               <span>{t('waiting for object label')}</span>
             </>
           ) : (
             <>
-              <CircleDashed className={getSize(5)} />
+              <Icon icon='ph--circle-dashed--regular' size={5} />
               <span>{t('object not found label')}</span>
             </>
           )}

package/src/components/CollectionMain.tsx

@@ -28,3 +28,5 @@ export const CollectionMain = ({ collection }: { collection: DataType.Collection
     </div>
   );
 };
+
+export default CollectionMain;

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
 import { Filter, Obj, Type } from '@dxos/echo';
@@ -12,11 +12,11 @@ import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
-import { osTranslations } from '@dxos/shell/react';
+import { translations as shellTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
-import translations from '../../translations';
+import { translations } from '../../translations';
 
 const Story = (args: CreateObjectDialogProps) => {
   return (
@@ -39,7 +39,7 @@ const meta: Meta<typeof CreateObjectDialog> = {
     withLayout(),
   ],
   parameters: {
-    translations: [...translations, osTranslations],
+    translations: [...translations, ...shellTranslations],
   },
   args: {},
 };

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Effect, pipe } from 'effect';
 import React, { useCallback, useRef, useState } from 'react';
 
 import {
@@ -14,7 +14,7 @@ import {
   useIntentDispatcher,
   usePluginManager,
 } from '@dxos/app-framework';
-import { Query, Type, type Obj } from '@dxos/echo';
+import { Obj, Query, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { getSpace, isLiveObject, isSpace, type Space, useQuery, useSpaces } from '@dxos/react-client/echo';
@@ -31,6 +31,7 @@ import { SpaceAction } from '../../types';
 export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'name'> & {
+  onCreateObject?: (object: Obj.Any) => void;
   shouldNavigate?: (object: Obj.Any) => boolean;
 };
 
@@ -38,6 +39,7 @@ export const CreateObjectDialog = ({
   target: initialTarget,
   typename: initialTypename,
   name,
+  onCreateObject,
   shouldNavigate: _shouldNavigate,
 }: CreateObjectDialogProps) => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
@@ -45,7 +47,7 @@ export const CreateObjectDialog = ({
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const spaces = useSpaces();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { dispatch } = useIntentDispatcher();
   const forms = useCapabilities(SpaceCapabilities.ObjectForm);
   const [target, setTarget] = useState<Space | DataType.Collection | undefined>(initialTarget);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
@@ -60,31 +62,33 @@ export const CreateObjectDialog = ({
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    async ({ form, data = {} }) => {
-      if (!target) {
-        // TODO(wittjosiah): UI feedback.
-        return;
-      }
+    ({ form, data = {} }) =>
+      Effect.gen(function* () {
+        if (!target) {
+          // TODO(wittjosiah): UI feedback.
+          return;
+        }
+
+        // NOTE: Must close before navigating or attention won't follow object.
+        closeRef.current?.click();
 
-      // NOTE: Must close before navigating or attention won't follow object.
-      closeRef.current?.click();
+        const space = isSpace(target) ? target : getSpace(target);
+        invariant(space, 'Missing space');
+        const { object } = yield* dispatch(form.getIntent(data, { space }));
+        if (isLiveObject(object) && !Obj.instanceOf(DataType.StoredSchema, object)) {
+          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
+          const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
+          const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
+          const shouldNavigate = _shouldNavigate ?? (() => true);
+          if (shouldNavigate(object)) {
+            yield* dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
+          } else {
+            yield* dispatch(addObjectIntent);
+          }
 
-      const space = isSpace(target) ? target : getSpace(target);
-      invariant(space, 'Missing space');
-      const result = await dispatch(form.getIntent(data, { space }));
-      const object = result.data?.object;
-      if (isLiveObject(object)) {
-        // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-        const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
-        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden });
-        const shouldNavigate = _shouldNavigate ?? (() => true);
-        if (shouldNavigate(object)) {
-          await dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
-        } else {
-          await dispatch(addObjectIntent);
+          onCreateObject?.(object);
         }
-      }
-    },
+      }).pipe(Effect.runPromise),
     [dispatch, target, resolve, hiddenTypenames, _shouldNavigate],
   );
 

package/src/components/MembersContainer.stories.tsx

@@ -4,14 +4,14 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 
 import { withClientProvider } from '@dxos/react-client/testing';
-import { osTranslations } from '@dxos/shell/react';
+import { translations as shellTranslations } from '@dxos/shell/react';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { MembersContainer } from './MembersContainer';
-import translations from '../translations';
+import { translations } from '../translations';
 
 const meta: Meta = {
   title: 'plugins/plugin-space/MembersContainer',
@@ -19,7 +19,7 @@ const meta: Meta = {
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
   parameters: {
     layout: 'fullscreen',
-    translations: [...translations, osTranslations],
+    translations: [...translations, ...shellTranslations],
   },
 };
 

package/src/components/MembersContainer.tsx

@@ -2,12 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Check, X } from '@phosphor-icons/react';
 import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
@@ -15,7 +13,6 @@ import { type CancellableInvitationObservable, Invitation, InvitationEncoder } f
 import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
 import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
 import {
   type ActionMenuItem,
@@ -67,7 +64,7 @@ export const MembersContainer = ({
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[Type.getTypename(DataType.Collection)]?.target?.objects[0]?.target;
+  const target = space.properties[DataType.Collection.typename]?.target?.objects[0]?.target;
 
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const handleChangeLocked = useCallback(() => {
@@ -281,5 +278,9 @@ const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string;
 };
 
 const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
-  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+  return statusValue > 0 ? (
+    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />
+  ) : (
+    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />
+  );
 };

package/src/components/MenuFooter.tsx

@@ -2,13 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
 import { getSpace } from '@dxos/client/echo';
 import { type Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
-import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { getSpaceDisplayName } from '../util';
@@ -25,7 +24,7 @@ export const MenuFooter = ({ object }: { object: Obj.Any }) => {
       <dl className='pis-2 mbe-2 text-xs grid grid-cols-[max-content_1fr] gap-2'>
         <dt className='uppercase text-[.75em] tracking-wide font-medium mbs-px self-start'>{t('location label')}</dt>
         <dd className='line-clamp-3'>
-          <Planet className='inline-block mie-1' />
+          <Icon icon='ph--planet--regular' classNames='inline-block mie-1' />
           {toLocalizedString(spaceName, t)}
         </dd>
       </dl>