@dxos/plugin-space 0.9.0 → 0.9.1-main.c7dcc2e112

package/src/capabilities/app-graph-builder/extensions/spaces.ts

@@ -5,14 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import {
-  AppCapabilities,
-  AppNodeMatcher,
-  getActiveSpace,
-  getPersonalSpace,
-  isExemplarSpace,
-  isPersonalSpace,
-} from '@dxos/app-toolkit';
+import { AppCapabilities, AppNode, AppNodeMatcher, AppSpace, Paths } from '@dxos/app-toolkit';
 import { type Space, SpaceState } from '@dxos/client/echo';
 import { Operation } from '@dxos/compute';
 import { Filter, Obj } from '@dxos/echo';
@@ -24,11 +17,10 @@ import { Expando } from '@dxos/schema';
 
 import { meta } from '#meta';
 import { SpaceOperation } from '#operations';
-import { SPACE_TYPE, SpaceCapabilities } from '#types';
+import { SPACE_HOME_NODE_TYPE, SPACE_TYPE, SpaceCapabilities } from '#types';
 
 import { SHARED, getSpaceDisplayName } from '../../../util';
 import {
-  CACHEABLE_PROPS,
   CAN_DROP_SPACE,
   CREATE_OBJECT_IN_SPACE_LABEL,
   MIGRATE_SPACE_LABEL,
@@ -42,11 +34,39 @@ import {
 // Extension Factory
 //
 
-/** Creates space-related extensions: primary actions, space nodes, and space actions. */
+// The label tuple must be a module-level singleton: connectors re-evaluate whenever the matched
+// node emits, and a tuple rebuilt inline each time creates a new array reference, causing the graph
+// to re-emit the node and remount the Home article on every evaluation.
+const SPACE_HOME_NODE_LABEL = ['space-home-node.label', { ns: meta.profile.key }] as const;
+
+/** Creates space-related extensions: primary actions, space nodes, space actions, and the Home node. */
 export const createSpaceExtensions = Effect.fnUntraced(function* () {
   const capabilities = yield* Capability.Service;
 
   return yield* Effect.all([
+    GraphBuilder.createExtension({
+      id: 'spaceHome',
+      position: 'first',
+      match: AppNodeMatcher.whenSpace,
+      connector: (space) =>
+        Effect.succeed([
+          {
+            id: Paths.SPACE_HOME_SEGMENT,
+            type: SPACE_HOME_NODE_TYPE,
+            data: SPACE_HOME_NODE_TYPE,
+            properties: {
+              label: SPACE_HOME_NODE_LABEL,
+              icon: 'ph--house--regular',
+              iconHue: 'cyan',
+              position: 'first',
+              draggable: false,
+              droppable: false,
+              space,
+            },
+          } satisfies Node.NodeArg<typeof SPACE_HOME_NODE_TYPE>,
+        ]),
+    }),
+
     GraphBuilder.createExtension({
       id: 'primaryActions',
       position: 'first',
@@ -57,7 +77,7 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: SpaceOperation.OpenCreateSpace.meta.key,
             data: () => Operation.invoke(SpaceOperation.OpenCreateSpace),
             properties: {
-              label: ['create-space.label', { ns: meta.id }],
+              label: ['create-space.label', { ns: meta.profile.key }],
               icon: 'ph--plus--regular',
               testId: 'spacePlugin.createSpace',
               disposition: 'menu',
@@ -67,7 +87,7 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: SpaceOperation.Join.meta.key,
             data: () => Operation.invoke(SpaceOperation.Join, {}),
             properties: {
-              label: ['join-space.label', { ns: meta.id }],
+              label: ['join-space.label', { ns: meta.profile.key }],
               icon: 'ph--sign-in--regular',
               testId: 'spacePlugin.joinSpace',
               disposition: 'menu',
@@ -77,7 +97,7 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: SpaceOperation.OpenImportSpace.meta.key,
             data: () => Operation.invoke(SpaceOperation.OpenImportSpace),
             properties: {
-              label: ['import-space.label', { ns: meta.id }],
+              label: ['import-space.label', { ns: meta.profile.key }],
               icon: 'ph--upload--regular',
               testId: 'spacePlugin.importSpace',
             },
@@ -86,13 +106,13 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: `${SpaceOperation.ExportSpace.meta.key}.binary`,
             data: Effect.fnUntraced(function* () {
               const client = yield* Capability.get(ClientCapabilities.Client);
-              const space = getActiveSpace(client, capabilities) ?? getPersonalSpace(client);
+              const space = AppSpace.getActiveSpace(client, capabilities) ?? AppSpace.getPersonalSpace(client);
               if (space) {
                 yield* Operation.invoke(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.BINARY });
               }
             }),
             properties: {
-              label: ['export-space-binary.label', { ns: meta.id }],
+              label: ['export-space-binary.label', { ns: meta.profile.key }],
               icon: 'ph--download--regular',
               testId: 'spacePlugin.exportSpaceBinary',
             },
@@ -101,13 +121,13 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: `${SpaceOperation.ExportSpace.meta.key}.json`,
             data: Effect.fnUntraced(function* () {
               const client = yield* Capability.get(ClientCapabilities.Client);
-              const space = getActiveSpace(client, capabilities) ?? getPersonalSpace(client);
+              const space = AppSpace.getActiveSpace(client, capabilities) ?? AppSpace.getPersonalSpace(client);
               if (space) {
                 yield* Operation.invoke(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.JSON });
               }
             }),
             properties: {
-              label: ['export-space-json.label', { ns: meta.id }],
+              label: ['export-space-json.label', { ns: meta.profile.key }],
               icon: 'ph--download--regular',
               testId: 'spacePlugin.exportSpaceJson',
             },
@@ -116,13 +136,13 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: SpaceOperation.OpenMembers.meta.key,
             data: Effect.fnUntraced(function* () {
               const client = yield* Capability.get(ClientCapabilities.Client);
-              const space = getActiveSpace(client, capabilities) ?? getPersonalSpace(client);
+              const space = AppSpace.getActiveSpace(client, capabilities) ?? AppSpace.getPersonalSpace(client);
               if (space) {
                 yield* Operation.invoke(SpaceOperation.OpenMembers, { space });
               }
             }),
             properties: {
-              label: ['share-space.label', { ns: meta.id }],
+              label: ['share-space.label', { ns: meta.profile.key }],
               icon: 'ph--users--regular',
               testId: 'spacePlugin.shareSpace',
               keyBinding: {
@@ -135,13 +155,13 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
             id: SpaceOperation.OpenSettings.meta.key,
             data: Effect.fnUntraced(function* () {
               const client = yield* Capability.get(ClientCapabilities.Client);
-              const space = getActiveSpace(client, capabilities) ?? getPersonalSpace(client);
+              const space = AppSpace.getActiveSpace(client, capabilities) ?? AppSpace.getPersonalSpace(client);
               if (space) {
                 yield* Operation.invoke(SpaceOperation.OpenSettings, { space });
               }
             }),
             properties: {
-              label: ['open-current-space-settings.label', { ns: meta.id }],
+              label: ['open-current-space-settings.label', { ns: meta.profile.key }],
               icon: 'ph--faders--regular',
               keyBinding: {
                 macos: 'meta+shift+,',
@@ -162,7 +182,7 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
         const spacesAtom = CreateAtom.fromObservable(client.spaces);
 
         const spaces = get(spacesAtom);
-        const personalSpace = getPersonalSpace(client);
+        const personalSpace = AppSpace.getPersonalSpace(client);
 
         if (!spaces || !personalSpace) {
           return Effect.succeed([]);
@@ -197,12 +217,15 @@ export const createSpaceExtensions = Effect.fnUntraced(function* () {
               ...spaces.filter((space) => !orderMap.has(space.id)),
             ]
               .filter((space, idx) => spaceStates[idx] !== SpaceState.SPACE_INACTIVE)
-              .filter((space) => space.tags.length === 0 || isPersonalSpace(space) || isExemplarSpace(space))
+              .filter(
+                (space) =>
+                  space.tags.length === 0 || AppSpace.isPersonalSpace(space) || AppSpace.isExemplarSpace(space),
+              )
               .map((space) =>
                 constructSpaceNode({
                   space,
                   navigable: ephemeralState.navigableCollections,
-                  personal: isPersonalSpace(space),
+                  personal: AppSpace.isPersonalSpace(space),
                   namesCache: state.spaceNames,
                   graph,
                   spacesOrder,
@@ -291,7 +314,7 @@ const constructSpaceNode = ({
   return Node.make({
     id: space.id,
     type: SPACE_TYPE,
-    cacheable: CACHEABLE_PROPS,
+    cacheable: AppNode.CACHEABLE_PROPS,
     data: space,
     properties: {
       label: getSpaceDisplayName(space, { personal, namesCache }),

package/src/capabilities/identity-created.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import { PERSONAL_SPACE_TAG, RootCollectionAnnotation } from '@dxos/app-toolkit';
+import { AppAnnotation, AppSpace } from '@dxos/app-toolkit';
 import { Annotation, Collection, Obj, Ref } from '@dxos/echo';
 import { MigrationVersionAnnotation, Migrations } from '@dxos/migrations';
 import { ClientCapabilities } from '@dxos/plugin-client';
@@ -17,14 +17,14 @@ export default Capability.makeModule(
     const client = yield* Capability.get(ClientCapabilities.Client);
 
     const personalSpace = yield* Effect.tryPromise(() =>
-      client.spaces.create({}, { tags: [PERSONAL_SPACE_TAG], membershipPolicy: MembershipPolicy.LOCKED }),
+      client.spaces.create({}, { tags: [AppSpace.PERSONAL_SPACE_TAG], membershipPolicy: MembershipPolicy.LOCKED }),
     );
     yield* Effect.tryPromise(() => personalSpace.waitUntilReady());
 
     // Create root collection structure.
     yield* Effect.tryPromise(() => personalSpace.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED));
     Obj.update(personalSpace.properties, (properties) => {
-      Annotation.set(properties, RootCollectionAnnotation, Ref.make(Collection.make()));
+      Annotation.set(properties, AppAnnotation.RootCollectionAnnotation, Ref.make(Collection.make()));
       if (Migrations.targetVersion) {
         Annotation.set(properties, MigrationVersionAnnotation, Migrations.targetVersion);
       }

package/src/capabilities/index.ts

@@ -8,7 +8,6 @@ import { OperationHandlerSet } from '@dxos/compute';
 export * from './app-graph-builder';
 export { makeCreateObjectEntryForDatabaseType } from '../util';
 
-export const AppGraphSerializer = Capability.lazy('AppGraphSerializer', () => import('./app-graph-serializer'));
 export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
 export const IdentityCreated = Capability.lazy('IdentityCreated', () => import('./identity-created'));
 export { NavigationHandler } from './navigation-handler';

package/src/capabilities/navigation-resolver.ts

@@ -6,18 +6,11 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capability } from '@dxos/app-framework';
-import {
-  AppCapabilities,
-  getActiveSpace,
-  getObjectPath,
-  getSpaceIdFromPath,
-  getSpacePath,
-  type AppCapabilities as AppCaps,
-} from '@dxos/app-toolkit';
+import { AppCapabilities, AppSpace, Paths, type AppCapabilities as AppCaps } from '@dxos/app-toolkit';
 import { Database, Entity, Key } from '@dxos/echo';
 import { EID } from '@dxos/keys';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { SETTINGS_ID, SETTINGS_KEY } from '@dxos/plugin-settings';
+import { getPluginSettingsSectionPath } from '@dxos/plugin-settings';
 
 import { meta } from '#meta';
 
@@ -32,7 +25,7 @@ export default Capability.makeModule(
         if (!query?.dxn) {
           return [
             {
-              path: `${getSpacePath(SETTINGS_ID)}/${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
+              path: getPluginSettingsSectionPath(meta.profile.key),
               label: 'Spaces settings',
               type: 'settings',
             },
@@ -58,7 +51,7 @@ export default Capability.makeModule(
 
         return [
           {
-            path: getObjectPath(db.spaceId, typename, object.id),
+            path: Paths.getObjectPath(db.spaceId, typename, object.id),
             label: Entity.getLabel(object) ?? '',
             type: typename,
           },
@@ -71,7 +64,7 @@ export default Capability.makeModule(
     // is the first segment and the object id the last.
     const pathResolver: AppCaps.NavigationPathResolver = (qualifiedPath) => {
       const segments = qualifiedPath.split('/');
-      const spaceId = getSpaceIdFromPath(qualifiedPath);
+      const spaceId = Paths.getSpaceIdFromPath(qualifiedPath);
       const objectId = segments[segments.length - 1];
       if (!spaceId || !objectId || !Key.EntityId.isValid(objectId)) {
         return Effect.succeed(Option.none());
@@ -85,7 +78,7 @@ export default Capability.makeModule(
       if (path.includes('/') || !Key.EntityId.isValid(path)) {
         return Effect.succeed(Option.none());
       }
-      const space = getActiveSpace(client, capabilities);
+      const space = AppSpace.getActiveSpace(client, capabilities);
       if (!space) {
         return Effect.succeed(Option.none());
       }

package/src/capabilities/react-root.tsx

@@ -15,7 +15,7 @@ import { SpaceCapabilities } from '#types';
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactRoot, {
-      id: meta.id,
+      id: meta.profile.key,
       root: () => {
         const ephemeral = useAtomCapability(SpaceCapabilities.EphemeralState);
         return ephemeral.awaiting ? <AwaitingObject id={ephemeral.awaiting} /> : null;

package/src/capabilities/react-surface.tsx

@@ -4,19 +4,17 @@
 
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
-import type * as Schema from 'effect/Schema';
-import * as SchemaAST from 'effect/SchemaAST';
 import React, { type ComponentProps, useCallback } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface, useAtomCapability, useOperationInvoker } from '@dxos/app-framework/ui';
-import { RootCollectionAnnotation } from '@dxos/app-toolkit';
+import { AppAnnotation } from '@dxos/app-toolkit';
 import { AppSurface, useActiveSpace, useTypeOptions } from '@dxos/app-toolkit/ui';
 import { Annotation, Collection, Database, Entity, Obj, Type } from '@dxos/echo';
 import { SchemaEx } from '@dxos/effect';
 import { type Space, SpaceState, getSpace, isSpace, useSpaces } from '@dxos/react-client/echo';
 import { Input } from '@dxos/react-ui';
-import { type FormFieldComponentProps, SelectField } from '@dxos/react-ui-form';
+import { type FormFieldRendererProps, SelectField } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { ViewAnnotation } from '@dxos/schema';
 
@@ -31,15 +29,16 @@ import {
   JoinDialog,
   MembersContainer,
   MenuFooter,
-  EntityRenamePopover,
   ObjectCardStack,
   ObjectProperties,
   RecordArticle,
   RelatedArticle,
+  RenamePopover,
   SchemaContainer,
   SmallPresenceLive,
+  SpaceHomeArticle,
+  SpaceHomeRecent,
   SpacePresence,
-  SpaceRenamePopover,
   SpaceSettingsContainer,
   SyncStatus,
   ViewEditor,
@@ -50,6 +49,8 @@ import {
   HueAnnotationId,
   IconAnnotationId,
   SpaceCapabilities,
+  SpaceHomeContent,
+  SPACE_HOME_NODE_TYPE,
   type TypeInputOptions,
   TypeInputOptionsAnnotationId,
 } from '#types';
@@ -59,8 +60,7 @@ import {
   CREATE_SPACE_DIALOG,
   IMPORT_SPACE_DIALOG,
   JOIN_DIALOG,
-  ENTITY_RENAME_POPOVER,
-  SPACE_RENAME_POPOVER,
+  RENAME_POPOVER,
 } from '../constants';
 
 type ReactSurfaceOptions = {
@@ -70,6 +70,18 @@ type ReactSurfaceOptions = {
 export default Capability.makeModule(
   Effect.fnUntraced(function* ({ createInvitationUrl }: ReactSurfaceOptions) {
     return Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'spaceHome',
+        filter: AppSurface.literal(AppSurface.Article, SPACE_HOME_NODE_TYPE),
+        component: ({ data, role }) => (
+          <SpaceHomeArticle role={role} attendableId={data.attendableId} space={data.properties?.space} />
+        ),
+      }),
+      Surface.create({
+        id: 'spaceHomeRecent',
+        filter: Surface.makeFilter(SpaceHomeContent),
+        component: ({ data }) => <SpaceHomeRecent space={data.space} />,
+      }),
       Surface.create({
         id: 'collectionFallback',
         position: 'last',
@@ -84,7 +96,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'pluginSettings',
-        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        filter: AppSurface.settings(AppSurface.Article, meta.profile.key),
         component: () => {
           const spaces = useSpaces();
           const { invokePromise } = useOperationInvoker();
@@ -114,7 +126,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'spaceSettingsProperties',
-        filter: AppSurface.literal(AppSurface.Article, `${meta.id}.general`),
+        filter: AppSurface.literal(AppSurface.Article, `${meta.profile.key}.general`),
         component: ({ ref }) => {
           const space = useActiveSpace();
           if (!space) {
@@ -127,7 +139,7 @@ export default Capability.makeModule(
       Surface.create({
         id: 'spaceSettingsMembers',
         position: 'first',
-        filter: AppSurface.literal(AppSurface.Article, `${meta.id}.members`),
+        filter: AppSurface.literal(AppSurface.Article, `${meta.profile.key}.members`),
         component: () => {
           const space = useActiveSpace();
           if (!space) {
@@ -139,7 +151,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'spaceSettingsSchema',
-        filter: AppSurface.literal(AppSurface.Article, `${meta.id}.schema`),
+        filter: AppSurface.literal(AppSurface.Article, `${meta.profile.key}.schema`),
         component: () => {
           const space = useActiveSpace();
           if (!space) {
@@ -151,19 +163,10 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'selectedObjects',
-        role: 'article',
-        filter: (data): data is { companionTo: Obj.Unknown; subject: 'selected-objects' } => {
-          if (data.subject !== 'selected-objects' || !Obj.isObject(data.companionTo)) {
-            return false;
-          }
-
-          const type = Obj.getType(data.companionTo);
-          const path = type
-            ? Option.getOrElse(ViewAnnotation.get(Type.getSchema(type)), () => [] as readonly string[])
-            : [];
-          const viewTarget = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.companionTo, path) : undefined;
-          return !!viewTarget;
-        },
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'selected-objects'),
+          AppSurface.companion(AppSurface.Article, Obj.isObject),
+        ),
         // TODO(burdon): Replace with mosaic.
         component: ({ data, ref }) => {
           const type = Obj.getType(data.companionTo);
@@ -210,18 +213,14 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'createInitialSpaceFormHue',
-        role: 'form-input',
-        filter: (data): data is { prop: string; schema: Schema.Schema<any>; fieldPropertyAst?: SchemaAST.AST } => {
-          const annotation = SchemaEx.findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, HueAnnotationId);
-          return !!annotation;
-        },
+        filter: AppSurface.formInputBySchema((ast) => !!SchemaEx.findAnnotation<boolean>(ast, HueAnnotationId)),
         component: ({ data, ...inputProps }) => {
           const ast = data.fieldPropertyAst;
           if (!ast) {
             return null;
           }
 
-          const { label, readonly, getValue, onValueChange } = inputProps as any as FormFieldComponentProps;
+          const { label, readonly, getValue, onValueChange } = inputProps as any as FormFieldRendererProps;
           const handleChange = useCallback((nextHue: string) => onValueChange(ast, nextHue), [ast, onValueChange]);
           const handleReset = useCallback(() => onValueChange(ast, undefined), [ast, onValueChange]);
           return (
@@ -234,18 +233,14 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'createInitialSpaceFormIcon',
-        role: 'form-input',
-        filter: (data): data is { prop: string; schema: Schema.Schema<any>; fieldPropertyAst?: SchemaAST.AST } => {
-          const annotation = SchemaEx.findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, IconAnnotationId);
-          return !!annotation;
-        },
+        filter: AppSurface.formInputBySchema((ast) => !!SchemaEx.findAnnotation<boolean>(ast, IconAnnotationId)),
         component: ({ data, ...inputProps }) => {
           const ast = data.fieldPropertyAst;
           if (!ast) {
             return null;
           }
 
-          const { label, readonly, getValue, onValueChange } = inputProps as any as FormFieldComponentProps;
+          const { label, readonly, getValue, onValueChange } = inputProps as any as FormFieldRendererProps;
           const handleChange = useCallback((nextIcon: string) => onValueChange(ast, nextIcon), [ast, onValueChange]);
           const handleReset = useCallback(() => onValueChange(ast, undefined), [ast, onValueChange]);
           return (
@@ -263,34 +258,20 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'typenameFormInput',
-        role: 'form-input',
-        filter: (
-          data,
-        ): data is {
-          prop: string;
-          schema: Schema.Schema.Any;
-          target: Database.Database | Collection.Collection | undefined;
-          fieldPropertyAst?: SchemaAST.AST;
-        } => {
-          if (data.prop !== 'typename') {
-            return false;
-          }
-
-          const annotation = SchemaEx.findAnnotation(
-            (data.schema as Schema.Schema.All).ast,
-            TypeInputOptionsAnnotationId,
-          );
-          return !!annotation;
-        },
-        component: ({ data: { schema, target, fieldPropertyAst }, ...inputProps }) => {
-          const ast = fieldPropertyAst;
+        filter: AppSurface.formInput(
+          (data) =>
+            data.prop === 'typename' && !!SchemaEx.findAnnotation(data.schema.ast, TypeInputOptionsAnnotationId),
+        ),
+        component: ({ data, ...inputProps }) => {
+          const ast = data.fieldPropertyAst;
           if (!ast) {
             return null;
           }
 
-          const props = { ...inputProps, type: ast } as any as FormFieldComponentProps;
-          const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
-          const annotation = SchemaEx.findAnnotation<TypeInputOptions>(schema.ast, TypeInputOptionsAnnotationId)!;
+          const props = { ...inputProps, type: ast } as any as FormFieldRendererProps;
+          const target = data.target;
+          const db = Database.isDatabase(target) ? target : Obj.isObject(target) ? Obj.getDatabase(target) : undefined;
+          const annotation = SchemaEx.findAnnotation<TypeInputOptions>(data.schema.ast, TypeInputOptionsAnnotationId)!;
           const options = useTypeOptions({ db, annotation });
 
           return <SelectField {...props} options={options} />;
@@ -298,26 +279,23 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'objectProperties',
-        role: 'object-properties',
-        filter: (data): data is { subject: Obj.Unknown } => {
+        filter: Surface.makeFilter(AppSurface.ObjectProperties, (data) => {
           if (!Obj.isObject(data.subject)) {
             return false;
           }
-
           const type = Obj.getType(data.subject);
           const path = type
             ? Option.getOrElse(ViewAnnotation.get(Type.getSchema(type)), () => [] as readonly string[])
             : [];
           const viewTarget = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.subject, path) : undefined;
           return !!viewTarget;
-        },
+        }),
         component: ({ data }) => {
           const type = Obj.getType(data.subject);
           const path = type
             ? Option.getOrElse(ViewAnnotation.get(Type.getSchema(type)), () => [] as readonly string[])
             : [];
           const view = path.length > 0 ? ViewAnnotation.tryGetTargetAlongPath(data.subject, path) : undefined;
-
           if (!view) {
             return null;
           }
@@ -326,17 +304,9 @@ export default Capability.makeModule(
         },
       }),
       Surface.create({
-        id: SPACE_RENAME_POPOVER,
-        role: 'popover',
-        filter: (data): data is { props: Space } => data.component === SPACE_RENAME_POPOVER && isSpace(data.props),
-        component: ({ data }) => <SpaceRenamePopover space={data.props} />,
-      }),
-      Surface.create({
-        id: ENTITY_RENAME_POPOVER,
-        role: 'popover',
-        filter: (data): data is { props: Entity.Unknown } =>
-          data.component === ENTITY_RENAME_POPOVER && Entity.isEntity(data.props),
-        component: ({ data }) => <EntityRenamePopover entity={data.props} />,
+        id: RENAME_POPOVER,
+        filter: AppSurface.component<Space | Entity.Unknown>(AppSurface.Popover, RENAME_POPOVER),
+        component: ({ data }) => <RenamePopover subject={data.props} />,
       }),
       Surface.create({
         id: 'menuFooter',
@@ -345,9 +315,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'navtreePresence',
-        role: 'navtree-item-end',
-        filter: (data): data is { id: string; subject: Obj.Unknown; open?: boolean } =>
-          typeof data.id === 'string' && Obj.isObject(data.subject),
+        filter: AppSurface.subject(AppSurface.NavtreeItemEnd, Obj.isObject),
         component: ({ data }) => {
           const ephemeral = useAtomCapability(SpaceCapabilities.EphemeralState);
           return <SmallPresenceLive id={data.id} open={data.open} viewers={ephemeral.viewersByObject[data.id]} />;
@@ -356,28 +324,30 @@ export default Capability.makeModule(
       // TODO(wittjosiah): Attention glyph for non-echo items should be handled elsewhere.
       Surface.create({
         id: 'navtreePresenceFallback',
-        role: 'navtree-item-end',
         position: 'last',
-        filter: (data): data is { id: string; open?: boolean } => typeof data.id === 'string',
+        filter: Surface.makeFilter(AppSurface.NavtreeItemEnd),
         component: ({ data }) => <SmallPresenceLive id={data.id} open={data.open} />,
       }),
       // TODO(wittjosiah): Broken?
       Surface.create({
         id: 'navtreeSyncStatus',
-        role: 'navtree-item-end',
-        filter: (data): data is { subject: Space; open?: boolean } => isSpace(data.subject),
+        filter: AppSurface.subject(AppSurface.NavtreeItemEnd, isSpace),
         component: ({ data }) => <InlineSyncStatus space={data.subject} open={data.open} />,
       }),
       Surface.create({
         id: 'navbarPresence',
-        role: 'navbar-end',
         position: 'first',
-        filter: (data): data is { subject: Space | Obj.Unknown } => isSpace(data.subject) || Obj.isObject(data.subject),
+        filter: AppSurface.subject(
+          AppSurface.NavbarEnd,
+          (value): value is Space | Obj.Unknown => isSpace(value) || Obj.isObject(value),
+        ),
         component: ({ data }) => {
           const space = isSpace(data.subject) ? data.subject : getSpace(data.subject);
           const object = isSpace(data.subject)
             ? data.subject.state.get() === SpaceState.SPACE_READY
-              ? space && Annotation.get(space.properties, RootCollectionAnnotation).pipe(Option.getOrUndefined)?.target
+              ? space &&
+                Annotation.get(space.properties, AppAnnotation.RootCollectionAnnotation).pipe(Option.getOrUndefined)
+                  ?.target
               : undefined
             : data.subject;
 
@@ -391,7 +361,7 @@ export default Capability.makeModule(
       }),
       Surface.create({
         id: 'syncStatus',
-        role: 'status-indicator',
+        filter: Surface.makeFilter(AppSurface.StatusIndicator),
         component: () => <SyncStatus />,
       }),
     ]);

package/src/capabilities/repair.ts

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capability } from '@dxos/app-framework';
-import { RootCollectionAnnotation } from '@dxos/app-toolkit';
+import { AppAnnotation } from '@dxos/app-toolkit';
 import { Annotation, Collection, Obj, Ref } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 
@@ -24,7 +24,9 @@ export default Capability.makeModule(() =>
  * Remove all existing query collections from the root collection.
  */
 const removeQueryCollections = async (space: Space) => {
-  const rootCollectionRef = Annotation.get(space.properties, RootCollectionAnnotation).pipe(Option.getOrUndefined);
+  const rootCollectionRef = Annotation.get(space.properties, AppAnnotation.RootCollectionAnnotation).pipe(
+    Option.getOrUndefined,
+  );
   const rootCollection: Collection.Collection | undefined = await rootCollectionRef?.load();
   if (!rootCollection) {
     return;

package/src/capabilities/settings.ts

@@ -14,7 +14,7 @@ import { Settings, SpaceCapabilities } from '#types';
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
-      key: meta.id,
+      key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => ({}),
     });
@@ -22,7 +22,7 @@ export default Capability.makeModule(() =>
     return [
       Capability.contributes(SpaceCapabilities.Settings, settingsAtom),
       Capability.contributes(AppCapabilities.Settings, {
-        prefix: meta.id,
+        prefix: meta.profile.key,
         schema: Settings.Settings,
         atom: settingsAtom,
       }),