@dxos/plugin-space 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/src/capabilities/spaces-ready.ts

@@ -6,7 +6,13 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { AppCapabilities, LayoutOperation, getPersonalSpace, getSpacePath, setPersonalSpace } from '@dxos/app-toolkit';
+import {
+  AppCapabilities,
+  LayoutOperation,
+  getSpacePath,
+  resolvePersonalSpace,
+  setPersonalSpace,
+} from '@dxos/app-toolkit';
 import { SubscriptionList } from '@dxos/async';
 import { Filter, Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
@@ -30,34 +36,6 @@ const WAIT_FOR_OBJECT_TIMEOUT = 5_000;
 // E.g., dxn:echo:BA25QRC2FEWCSAMRP4RZL65LWJ7352CKE:01J00J9B45YHYSGZQTQMSKMGJ6
 const ECHO_DXN_LENGTH = 3 + 1 + 4 + 1 + 33 + 1 + 26;
 
-/**
- * Resolve the personal space, migrating from legacy DefaultSpace credential if needed.
- * Returns undefined for new users who haven't created an identity yet.
- */
-const resolvePersonalSpace = (client: {
-  spaces: { get(): Space[]; get(id: any): Space | undefined };
-  halo: { queryCredentials(options: { type: string }): any[] };
-}): { space: Space; fromCredential: boolean } | undefined => {
-  // Check for personal space via tags or __DEFAULT__ property.
-  const found = getPersonalSpace(client);
-  if (found) {
-    return { space: found, fromCredential: false };
-  }
-
-  // Migration: read the legacy DefaultSpace credential from HALO.
-  const defaultSpaceCredential = client.halo.queryCredentials({
-    type: 'dxos.halo.credentials.DefaultSpace',
-  })[0];
-  if (!defaultSpaceCredential) {
-    // New user — no credential, no personal space yet.
-    return undefined;
-  }
-
-  const defaultSpaceId = defaultSpaceCredential.subject.assertion.spaceId;
-  const space = client.spaces.get(defaultSpaceId);
-  return space ? { space, fromCredential: true } : undefined;
-};
-
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const subscriptions = new SubscriptionList();
@@ -81,12 +59,11 @@ export default Capability.makeModule(
       if (personalSpaceInitialized) {
         return;
       }
+      // Set before any await so concurrent subscribe callbacks don't start a second initialization.
+      personalSpaceInitialized = true;
 
       await personalSpace.waitUntilReady();
-      personalSpaceInitialized = true;
 
-      // Only set the __DEFAULT__ property when migrating from the legacy credential.
-      // Spaces created with the personal tag don't need it.
       if (fromCredential) {
         setPersonalSpace(personalSpace);
       }
@@ -168,10 +145,12 @@ export default Capability.makeModule(
     subscriptions.add(
       client.spaces.subscribe(async (spaces) => {
         // TODO(wittjosiah): Remove. This is a hack to be able to migrate the personal space properties.
-        const resolved = resolvePersonalSpace(client);
-        if (resolved?.space && resolved.space.state.get() === SpaceState.SPACE_REQUIRES_MIGRATION) {
-          const personalSpace = resolved.space;
-          await personalSpace.internal.migrate();
+        const personalSpaceForMigration = resolvePersonalSpace(client);
+        if (
+          personalSpaceForMigration?.space &&
+          personalSpaceForMigration.space.state.get() === SpaceState.SPACE_REQUIRES_MIGRATION
+        ) {
+          await personalSpaceForMigration.space.internal.migrate();
         }
 
         spaces

package/src/capabilities/state.ts

@@ -44,7 +44,7 @@ export default Capability.makeModule(
     const updateNavigableCollections = () => {
       const enabled =
         manager.getEnabled().includes('org.dxos.plugin.stack') ||
-        manager.getEnabled().includes('org.dxos.plugin.simple-layout');
+        manager.getEnabled().includes('org.dxos.plugin.simpleLayout');
       const current = registry.get(ephemeralAtom);
       if (enabled !== current.navigableCollections) {
         registry.update(ephemeralAtom, (c) => ({ ...c, navigableCollections: enabled }));

package/src/{cli/commands → commands}/database/add.ts

@@ -15,11 +15,11 @@ import { type Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppCapabilities } from '@dxos/app-toolkit';
 import { CommandConfig, Common, flushAndSync, print, spaceLayer } from '@dxos/cli-util';
 import { SpaceProperties } from '@dxos/client/echo';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Operation } from '@dxos/compute';
 import { Database, Filter, Obj, Type } from '@dxos/echo';
 import { Collection } from '@dxos/echo';
 import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
-// eslint-disable-next-line unused-imports/no-unused-imports
-import type { Operation } from '@dxos/operation';
 
 import { type CreateObject } from '#types';
 

package/src/{cli/commands → commands}/space/create/create.ts

@@ -22,7 +22,7 @@ export const handler = Effect.fn(function* ({ name }: { name: Option.Option<stri
   yield* Effect.tryPromise(() => space.waitUntilReady());
 
   if (Option.isSome(name)) {
-    Obj.change(space.properties, (obj) => {
+    Obj.update(space.properties, (obj) => {
       obj.name = Option.getOrUndefined(name);
     });
   }

package/src/{cli/commands → commands}/space/info/info.test.ts

@@ -19,7 +19,7 @@ describe('space info', () => {
       yield* Effect.tryPromise(() => client.halo.createIdentity());
       const space = yield* Effect.tryPromise(() => client.spaces.create());
       yield* Effect.tryPromise(() => space.waitUntilReady());
-      yield* handler({ spaceId: Option.some(space.id) });
+      yield* handler({ spaceId: Option.some(space.id), wait: Option.none() });
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;
       expect(logs).toHaveLength(1);

package/src/{cli/commands → commands}/space/info/info.ts

@@ -6,20 +6,27 @@ import * as Command from '@effect/cli/Command';
 import * as Options from '@effect/cli/Options';
 import * as Console from 'effect/Console';
 import * as Effect from 'effect/Effect';
-import type * as Option from 'effect/Option';
+import * as Option from 'effect/Option';
 
 import { CommandConfig, Common, formatSpace, getSpace, print, printSpace, spaceIdWithDefault } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
 import { type Key } from '@dxos/echo';
 
-export const handler = Effect.fn(function* ({ spaceId }: { spaceId: Option.Option<string> }) {
+export const handler = Effect.fn(function* ({
+  spaceId,
+  wait,
+}: {
+  spaceId: Option.Option<string>;
+  wait: Option.Option<number>;
+}) {
   const { json } = yield* CommandConfig;
   const client = yield* ClientService;
 
   const resolvedSpaceId = yield* spaceIdWithDefault(spaceId as Option.Option<Key.SpaceId>);
   const space = yield* getSpace(resolvedSpaceId);
 
-  const formatted = yield* formatSpace(space);
+  const waitSeconds = Option.getOrElse(wait, () => 0);
+  const formatted = yield* formatSpace(space, { waitSeconds });
 
   if (json) {
     yield* Console.log(JSON.stringify(formatted, null, 2));
@@ -32,6 +39,12 @@ export const info = Command.make(
   'info',
   {
     spaceId: Common.spaceId.pipe(Options.optional),
+    wait: Options.integer('wait').pipe(
+      Options.withDescription(
+        'Wait up to this many seconds for the space to reach SPACE_READY. Default 0 — read whatever state is available immediately.',
+      ),
+      Options.optional,
+    ),
   },
   handler,
 ).pipe(Command.withDescription('Show space info.'));

package/src/{cli/commands → commands}/space/list/list.test.ts

@@ -4,6 +4,7 @@
 
 import { describe, expect, it } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
 import { TestConsole, TestLayer } from '@dxos/cli-util/testing';
 import { ClientService } from '@dxos/client';
@@ -14,7 +15,7 @@ import { handler } from './list';
 describe('spaces list', () => {
   it('should list empty space list', () =>
     Effect.gen(function* () {
-      yield* handler();
+      yield* handler({ wait: Option.none() });
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;
       expect(logs).toHaveLength(1);
@@ -26,11 +27,11 @@ describe('spaces list', () => {
       const client = yield* ClientService;
       yield* Effect.tryPromise(() => client.halo.createIdentity());
       yield* Effect.tryPromise(() => client.spaces.create());
-      yield* handler();
+      yield* handler({ wait: Option.none() });
       const logger = yield* TestConsole.TestConsole;
       const logs = logger.logs;
       expect(logs).toHaveLength(1);
       const formattedSpaces = TestConsole.parseJson(logs[0]);
-      expect(formattedSpaces).toHaveLength(2);
+      expect(formattedSpaces).toHaveLength(1);
     }).pipe(Effect.provide(TestLayer), Effect.scoped, runAndForwardErrors));
 });

package/src/commands/space/list/list.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Command from '@effect/cli/Command';
+import * as Options from '@effect/cli/Options';
+import * as Console from 'effect/Console';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { CommandConfig, formatSpace, printSpace } from '@dxos/cli-util';
+import { printList } from '@dxos/cli-util';
+import { ClientService } from '@dxos/client';
+
+// TODO(burdon): Move handler inline and test separate functions.
+export const handler = Effect.fn(function* ({ wait }: { wait: Option.Option<number> }) {
+  const { json } = yield* CommandConfig;
+  const client = yield* ClientService;
+  const spaces = client.spaces.get();
+  const waitSeconds = Option.getOrElse(wait, () => 0);
+  const formattedSpaces = yield* Effect.all(spaces.map((space) => formatSpace(space, { waitSeconds })));
+
+  if (json) {
+    yield* Console.log(JSON.stringify(formattedSpaces, null, 2));
+  } else {
+    const formatted = formattedSpaces.map(printSpace);
+    yield* Console.log(printList(formatted));
+  }
+});
+
+export const list = Command.make(
+  'list',
+  {
+    wait: Options.integer('wait').pipe(
+      Options.withDescription(
+        'Wait up to this many seconds for each space to reach SPACE_READY before reading. Default 0 — print whatever state is available immediately so a stuck space cannot hang the command.',
+      ),
+      Options.optional,
+    ),
+  },
+  handler,
+).pipe(Command.withDescription('List all spaces available on this device.'));

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -141,24 +141,23 @@ const SelectType = ({ options, onChange }: SelectTypeProps) => {
 
   return (
     <SearchList.Root onSearch={handleSearch}>
-      <SearchList.Content classNames='gap-form-gap'>
-        <SearchList.Input
-          autoFocus
-          data-testid='create-object-form.schema-input'
-          placeholder={t('schema-input.placeholder')}
-        />
-        <SearchList.Viewport>
-          {results.map((option) => (
-            <SearchList.Item
-              key={option.id}
-              value={option.id}
-              label={option.label}
-              icon={option.icon ?? 'ph--placeholder--regular'}
-              onSelect={() => onChange(option.id)}
-            />
-          ))}
-        </SearchList.Viewport>
-      </SearchList.Content>
+      <SearchList.Input
+        classNames='mb-form-gap'
+        autoFocus
+        data-testid='create-object-form.schema-input'
+        placeholder={t('schema-input.placeholder')}
+      />
+      <SearchList.Viewport>
+        {results.map((option) => (
+          <SearchList.Item
+            key={option.id}
+            value={option.id}
+            label={option.label}
+            icon={option.icon ?? 'ph--placeholder--regular'}
+            onSelect={() => onChange(option.id)}
+          />
+        ))}
+      </SearchList.Viewport>
     </SearchList.Root>
   );
 };
@@ -203,25 +202,24 @@ const SelectSpace = ({ spaces, defaultSpaceId, onChange }: SelectSpaceProps) =>
 
   return (
     <SearchList.Root onSearch={handleSearch}>
-      <SearchList.Content>
-        <SearchList.Input
-          autoFocus
-          data-testid='create-object-form.space-input'
-          placeholder={t('space-input.placeholder')}
-        />
-        <SearchList.Viewport>
-          {results.map((space) => {
-            return (
-              <SearchList.Item
-                key={space.id}
-                value={space.id}
-                label={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-                onSelect={() => onChange?.(space.db)}
-              />
-            );
-          })}
-        </SearchList.Viewport>
-      </SearchList.Content>
+      <SearchList.Input
+        classNames='mb-form-gap'
+        autoFocus
+        data-testid='create-object-form.space-input'
+        placeholder={t('space-input.placeholder')}
+      />
+      <SearchList.Viewport>
+        {results.map((space) => {
+          return (
+            <SearchList.Item
+              key={space.id}
+              value={space.id}
+              label={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+              onSelect={() => onChange?.(space.db)}
+            />
+          );
+        })}
+      </SearchList.Viewport>
     </SearchList.Root>
   );
 };

package/src/components/{SpacePluginSettings/SpacePluginSettings.stories.tsx → SpaceSettings/SpaceSettings.stories.tsx}

@@ -6,19 +6,20 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
-import { SpacePluginSettings } from './SpacePluginSettings';
+import { translations } from '#translations';
+
+import { SpaceSettings } from './SpaceSettings';
 
 const meta = {
-  title: 'plugins/plugin-space/components/SpacePluginSettings',
-  component: SpacePluginSettings,
+  title: 'plugins/plugin-space/components/SpaceSettings',
+  component: SpaceSettings,
   tags: ['settings'],
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof SpacePluginSettings>;
+} satisfies Meta<typeof SpaceSettings>;
 
 export default meta;
 

package/src/components/{SpacePluginSettings/SpacePluginSettings.tsx → SpaceSettings/SpaceSettings.tsx}

@@ -15,7 +15,7 @@ import { type Settings } from '#types';
 
 import { getSpaceDisplayName } from '../../util';
 
-export type SpacePluginSettingsProps = AppSurface.SettingsArticleProps<
+export type SpaceSettingsProps = AppSurface.SettingsArticleProps<
   Settings.Settings,
   {
     spaces?: Space[];
@@ -23,12 +23,7 @@ export type SpacePluginSettingsProps = AppSurface.SettingsArticleProps<
   }
 >;
 
-export const SpacePluginSettings = ({
-  settings,
-  onSettingsChange,
-  spaces,
-  onOpenSpaceSettings,
-}: SpacePluginSettingsProps) => {
+export const SpaceSettings = ({ settings, onSettingsChange, spaces, onOpenSpaceSettings }: SpaceSettingsProps) => {
   const { t } = useTranslation(meta.id);
 
   return (

package/src/components/SpaceSettings/index.ts

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

package/src/components/index.ts

@@ -9,4 +9,4 @@ export * from './CreateDialog';
 export * from './ForeignKeys';
 export * from './SyncStatus';
 
-export const SpacePluginSettings: ComponentType<any> = lazy(() => import('./SpacePluginSettings'));
+export const SpaceSettings: ComponentType<any> = lazy(() => import('./SpaceSettings'));

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

@@ -14,8 +14,7 @@ import { Dialog } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
-
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 const mockOptions: CreateObjectOption[] = [
   { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -3,17 +3,16 @@
 //
 
 import * as Effect from 'effect/Effect';
-import * as Option from 'effect/Option';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { Capability } from '@dxos/app-framework';
 import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
 import { AppCapabilities, getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
 import { useLayout } from '@dxos/app-toolkit/ui';
+import { Operation } from '@dxos/compute';
 import { Collection, Database, Obj, Type } from '@dxos/echo';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
 import { Dialog, useTranslation } from '@dxos/react-ui';
@@ -67,7 +66,7 @@ export const CreateObjectDialog = ({
   const viewTypenames = useMemo(() => {
     const set = new Set<string>();
     for (const schema of schemas ?? []) {
-      if (ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+      if (ViewAnnotation.has(schema)) {
         set.add(Type.getTypename(schema));
       }
     }

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.stories.tsx

@@ -11,7 +11,8 @@ import { ClientPlugin } from '@dxos/plugin-client';
 import { Dialog } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { CreateSpaceDialog } from './CreateSpaceDialog';
 
 const DefaultStory = () => (

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -10,7 +10,8 @@ import { ClientPlugin } from '@dxos/plugin-client';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Dialog } from '@dxos/react-ui';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { JoinDialog } from './JoinDialog';
 
 const DefaultStory = () => (

package/src/containers/MembersContainer/MembersContainer.tsx

@@ -6,10 +6,11 @@ import React, { type Dispatch, type SetStateAction, useMemo, useState } from 're
 import { QR } from 'react-qr-rounded';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Collection, Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
-import { type Space, useSpaceInvitations } from '@dxos/react-client/echo';
+import { useSpaceInvitations } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { Button, Clipboard, Icon, useId, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
@@ -40,10 +41,9 @@ const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservab
   }
 };
 
-export type MembersContainerProps = {
-  space: Space;
+export type MembersContainerProps = AppSurface.SpaceArticleProps<{
   createInvitationUrl: (invitationCode: string) => string;
-};
+}>;
 
 export const MembersContainer = ({ space, createInvitationUrl }: MembersContainerProps) => {
   const { t } = useTranslation(meta.id);

package/src/containers/{ObjectDetails/ObjectDetails.tsx → ObjectProperties/ObjectProperties.tsx}

@@ -5,14 +5,14 @@
 import React, { forwardRef, useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type Obj } from '@dxos/echo';
 import { Panel, Toolbar } from '@dxos/react-ui';
-import { ObjectProperties } from '@dxos/react-ui-form';
+import { ObjectProperties as NaturalObjectProperties } from '@dxos/react-ui-form';
 
-export type ObjectDetailsProps = AppSurface.ObjectPropertiesProps<Obj.Unknown>;
+export type ObjectPropertiesProps = AppSurface.ObjectPropertiesProps<Obj.Unknown>;
 
-export const ObjectDetails = forwardRef<HTMLDivElement, ObjectDetailsProps>(
+export const ObjectProperties = forwardRef<HTMLDivElement, ObjectPropertiesProps>(
   ({ role, subject: object }, forwardedRef) => {
     const data = useMemo<AppSurface.ObjectPropertiesData>(() => ({ subject: object }), [object]);
 
@@ -22,9 +22,9 @@ export const ObjectDetails = forwardRef<HTMLDivElement, ObjectDetailsProps>(
           <Toolbar.Root />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <ObjectProperties object={object}>
-            <Surface.Surface role='object-properties' data={data} />
-          </ObjectProperties>
+          <NaturalObjectProperties object={object}>
+            <Surface.Surface type={AppSurface.ObjectProperties} data={data} />
+          </NaturalObjectProperties>
         </Panel.Content>
       </Panel.Root>
     );

package/src/containers/ObjectProperties/index.ts

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

package/src/containers/ObjectRenamePopover/ObjectRenamePopover.tsx

@@ -23,7 +23,7 @@ export const ObjectRenamePopover = ({ object }: { object: Obj.Unknown }) => {
 
   const handleDone = useCallback(() => {
     try {
-      name && Obj.change(object, () => Obj.setLabel(object, name));
+      name && Obj.update(object, () => Obj.setLabel(object, name));
     } catch (err) {
       log.error('Failed to rename object', { err });
     }

package/src/containers/RecordArticle/RecordArticle.stories.tsx

@@ -18,7 +18,8 @@ import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { RecordArticle } from './RecordArticle';
 
 random.seed(0);

package/src/containers/RecordArticle/RecordArticle.tsx

@@ -7,7 +7,7 @@ import * as Option from 'effect/Option';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Annotation, Obj } from '@dxos/echo';
 import { Card, Input, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 
@@ -37,7 +37,7 @@ export const RecordArticle = ({ role, subject }: AppSurface.ObjectArticleProps)
                 <Card.Title>{Obj.getLabel(subject)}</Card.Title>
               </Card.Toolbar>
               <Card.Content>
-                <Surface.Surface role='card--content' data={{ subject }} limit={1} />
+                <Surface.Surface type={AppSurface.Card} data={{ subject }} limit={1} />
               </Card.Content>
             </Card.Root>
 

package/src/containers/RelatedArticle/RelatedArticle.tsx

@@ -7,7 +7,7 @@ import * as Option from 'effect/Option';
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useObjectMenuItems, type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Annotation, Entity, Obj } from '@dxos/echo';
 import { Card, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
@@ -33,7 +33,9 @@ export const RelatedArticle = ({ role, companionTo }: RelatedArticleProps) => {
           <Toolbar.Root />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <Masonry.Content classNames='p-2' centered items={items} />
+          <Masonry.Content classNames='p-2' centered>
+            <Masonry.Viewport items={items} />
+          </Masonry.Content>
         </Panel.Content>
       </Panel.Root>
     </Masonry.Root>
@@ -45,7 +47,7 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
   const { t } = useTranslation(meta.id);
   const data = useMemo(() => ({ subject }), [subject]);
   const icon = Function.pipe(
-    Obj.getSchema(subject),
+    Entity.getSchema(subject),
     Option.fromNullable,
     Option.flatMap(Annotation.IconAnnotation.get),
     Option.map(({ icon }) => icon),
@@ -72,7 +74,7 @@ const ObjectCard = ({ data: subject, classNames }: { data: Entity.Unknown; class
           <Menu.Content items={menuItems} />
         </Card.Toolbar>
         <Card.Content>
-          <Surface.Surface role='card--content' data={data} limit={1} />
+          <Surface.Surface type={AppSurface.Card} data={data} limit={1} />
         </Card.Content>
       </Card.Root>
     </Menu.Root>

package/src/containers/SchemaContainer/SchemaContainer.tsx

@@ -4,6 +4,7 @@
 
 import React, { useEffect, useState } from 'react';
 
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
@@ -12,9 +13,7 @@ import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-type SchemaPanelProps = { space: Space };
-
-export const SchemaContainer = ({ space }: SchemaPanelProps) => {
+export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const { t } = useTranslation(meta.id);
   const schemas = useQuerySpaceSchemas(space);
 

package/src/containers/SpacePresence/SpacePresence.stories.tsx

@@ -9,7 +9,8 @@ import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
 
 const viewers = (n: number, currentlyAttended = true): Member[] =>

package/src/containers/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -22,7 +22,7 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
   const { invokePromise } = useOperationInvoker();
 
   const handleDone = useCallback(() => {
-    Obj.change(space.properties, (obj) => {
+    Obj.update(space.properties, (obj) => {
       obj.name = name;
     });
     void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });