@dxos/plugin-space 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -7,20 +7,21 @@ 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 { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
 import { useLayout } from '@dxos/app-toolkit/ui';
-import { Collection, Database, Obj, Type } from '@dxos/echo';
+import { Operation } from '@dxos/compute';
+import { Annotation, 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';
 import { ViewAnnotation } from '@dxos/schema';
 
-import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from '#components';
+import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps } from '#components';
 import { meta } from '#meta';
+import { SpaceCapabilities } from '#types';
 
 export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
 
@@ -54,20 +55,17 @@ export const CreateObjectDialog = ({
   // TODO(wittjosiah): Support database schemas.
   const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
 
+  const createObjectEntries = useCapabilities(SpaceCapabilities.CreateObjectEntry);
+
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (id) => {
-      const metadata = manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .find(({ id: entryId }) => entryId === id)?.metadata;
-      return metadata?.createObject ? (metadata as Metadata) : undefined;
-    },
-    [manager],
+    (id) => createObjectEntries.find((entry) => entry.id === id),
+    [createObjectEntries],
   );
 
   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));
       }
     }
@@ -76,16 +74,18 @@ export const CreateObjectDialog = ({
 
   const options = useMemo<CreateObjectOption[]>(
     () =>
-      manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .filter((entry) => entry.metadata?.createObject)
+      createObjectEntries
         .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
-        .map((entry) => ({
-          id: entry.id,
-          label: t('typename.label', { ns: entry.id, defaultValue: entry.id }),
-          icon: entry.metadata?.icon,
-        })),
-    [manager, views, viewTypenames, t],
+        .map((entry) => {
+          const schema = schemas?.find((s) => Type.getTypename(s) === entry.id);
+          const iconAnnotation = schema ? Annotation.IconAnnotation.get(schema).pipe(Option.getOrUndefined) : undefined;
+          return {
+            id: entry.id,
+            label: t('typename.label', { ns: entry.id, defaultValue: entry.id }),
+            icon: iconAnnotation?.icon,
+          };
+        }),
+    [createObjectEntries, views, viewTypenames, schemas, t],
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(

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

@@ -7,11 +7,12 @@ import React from 'react';
 
 import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 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/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+import { FileUploader } from 'react-drag-drop-files';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+
+export const ImportSpaceDialog = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      const contents = new Uint8Array(await file.arrayBuffer());
+      const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {
+        archive: { filename: file.name, contents },
+      });
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      if (result?.space) {
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });
+      }
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('import-space-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p className='my-4'>{t('import-space-dialog.description')}</p>
+        <FileUploader
+          types={['json', 'tar']}
+          classes='block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer'
+          dropMessageStyle={{ border: 'none', backgroundColor: '#EEE' }}
+          handleChange={(file: File) => {
+            void handleFile(file);
+          }}
+        >
+          <Icon icon='ph--file-plus--duotone' size={8} />
+          <span>{t('import-space-dialog.upload.label')}</span>
+        </FileUploader>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button variant='primary'>{t('cancel.label')}</Button>
+        </Dialog.Close>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

package/src/containers/ImportSpaceDialog/index.ts

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

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

@@ -6,11 +6,12 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 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/JoinDialog/JoinDialog.tsx

@@ -9,7 +9,7 @@ import { LayoutOperation, getSpacePath } 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/operations';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';

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);
@@ -209,7 +209,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
     <>
       <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content] my-2 gap-2'>
-        <div role='none' className='w-full aspect-square relative text-description'>
+        <div className='w-full aspect-square relative text-description'>
           <QR
             rounding={100}
             backgroundColor='transparent'

package/src/containers/ObjectCardStack/ObjectCardStack.tsx

@@ -4,16 +4,15 @@
 
 import React, { forwardRef, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { type View } from '@dxos/echo';
-import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, Obj, type View } from '@dxos/echo';
+import { useQuery, useSchema } from '@dxos/react-client/echo';
 import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useSelected } from '@dxos/react-ui-attention';
+import { ObjectForm } from '@dxos/react-ui-form';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 import { getTypenameFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { ObjectForm } from '#components';
 import { meta } from '#meta';
 
 export type ObjectCardStackProps = {

package/src/containers/ObjectProperties/ObjectProperties.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { type Obj } from '@dxos/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { ObjectProperties as NaturalObjectProperties } from '@dxos/react-ui-form';
+
+export type ObjectPropertiesProps = AppSurface.ObjectPropertiesProps<Obj.Unknown>;
+
+export const ObjectProperties = forwardRef<HTMLDivElement, ObjectPropertiesProps>(
+  ({ role, subject: object }, forwardedRef) => {
+    const data = useMemo<AppSurface.ObjectPropertiesData>(() => ({ subject: object }), [object]);
+
+    return (
+      <Panel.Root role={role} className='dx-document' ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <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 });
     }
@@ -31,8 +31,8 @@ export const ObjectRenamePopover = ({ object }: { object: Obj.Unknown }) => {
   }, [object, name, invokePromise]);
 
   return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
+    <div className='p-2 flex gap-2'>
+      <div className='flex-1'>
         <Input.Root>
           <Input.Label srOnly>{t('object-name.label')}</Input.Label>
           <Input.TextInput

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

@@ -9,16 +9,18 @@ import React from 'react';
 import { Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
+import { Filter } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 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,12 +37,12 @@ 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>
 
             {/* TODO(burdon): Only show label if surface exists? */}
-            <div role='none' className='flex flex-col gap-form-gap'>
+            <div className='flex flex-col gap-form-gap'>
               <Input.Root>
                 <Input.Label>{t('related-actions.label')}</Input.Label>
               </Input.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);
 
@@ -22,7 +21,6 @@ export const SchemaContainer = ({ space }: SchemaPanelProps) => {
     <Settings.Viewport>
       <Settings.Section title={t('schema-verbose.label')} description={t('schema.description')}>
         <div
-          role='none'
           className={mx([
             'grid md:col-span-2 grid-cols-subgrid gap-trim-sm items-center',
             '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
@@ -31,9 +29,7 @@ export const SchemaContainer = ({ space }: SchemaPanelProps) => {
         >
           {schemas.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
           {schemas.map((schema) => (
-            <div role='none' key={schema.id}>
-              {schema.typename}
-            </div>
+            <div key={schema.id}>{schema.typename}</div>
           ))}
         </div>
       </Settings.Section>

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 });
@@ -30,8 +30,8 @@ export const SpaceRenamePopover = ({ space }: { space: Space }) => {
 
   // TODO(thure): Why does the input value need to be uncontrolled to work?
   return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
+    <div className='p-2 flex gap-2'>
+      <div className='flex-1'>
         <Input.Root>
           <Input.Label srOnly>{t('space-name.label')}</Input.Label>
           <Input.TextInput

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.stories.tsx

@@ -7,19 +7,21 @@ import React from 'react';
 
 import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+import { translations } from '#translations';
 
-const Story = (props: Partial<SpaceSettingsContainerProps>) => {
+import { SpaceSettingsContainer } from './SpaceSettingsContainer';
+
+const Story = (props: Partial<AppSurface.SpaceArticleProps>) => {
   const { space } = useClientStory();
   if (!space) {
     return <Loading />;
   }
 
-  return <SpaceSettingsContainer {...props} space={space} />;
+  return <SpaceSettingsContainer role='article' attendableId={space.id} {...props} space={space} />;
 };
 
 const meta = {

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -7,12 +7,14 @@ import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
 import { getPersonalSpace, getSpacePath, isPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
+import { SpaceArchive } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import { SpaceState } from '@dxos/react-client/echo';
+import { Button, DropdownMenu, Icon, IconButton, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
 import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 
@@ -28,12 +30,8 @@ const SpaceFormSchema = SpaceForm.pipe(
   ),
 );
 
-export type SpaceSettingsContainerProps = {
-  space: Space;
-};
-
 // TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
+export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const client = useClient();
@@ -62,7 +60,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       }
 
       if (changed['name'] || changed['icon'] || changed['hue']) {
-        Obj.change(space.properties, (obj) => {
+        Obj.update(space.properties, (obj) => {
           if (changed['name'] && newValues.name !== undefined) {
             obj.name = newValues.name;
           }
@@ -174,11 +172,12 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
     [t, space, personal],
   );
 
-  const download = useFileDownload();
-  const handleBackup = useCallback(async () => {
-    const archive = await space.internal.export();
-    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-  }, [space, download]);
+  const handleBackupBinary = useCallback(async () => {
+    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.BINARY });
+  }, [space, invokePromise]);
+  const handleBackupJson = useCallback(async () => {
+    await invokePromise(SpaceOperation.ExportSpace, { space, format: SpaceArchive.Format.JSON });
+  }, [space, invokePromise]);
 
   const repairs = useCapabilities(SpaceCapabilities.Repair);
   const handleRepair = useCallback(async () => {
@@ -201,9 +200,38 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
           <Form.FieldSet />
         </Form.Root>
       </Settings.Section>
+
       <Settings.Section title={t('space-controls.title')} description={t('space-controls.description')}>
+        <Settings.Item title={t('space-key.title')} description={t('space-key.description')}>
+          <div className='flex items-center gap-2'>
+            <Input.Root>
+              <Input.TextInput value={space.key.toHex()} disabled classNames='flex-1 font-mono text-xs' />
+            </Input.Root>
+            <IconButton
+              icon='ph--copy--regular'
+              iconOnly
+              label={t('copy-space-key.label')}
+              onClick={() => {
+                void navigator.clipboard.writeText(space.key.toHex());
+              }}
+            />
+          </div>
+        </Settings.Item>
         <Settings.Item title={t('backup-space.title')} description={t('backup-space.description')}>
-          <Button onClick={handleBackup}>{t('download-backup.label')}</Button>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button>
+                {t('download-backup.label')}
+                <Icon icon='ph--caret-down--regular' size={4} classNames='mis-2' />
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <DropdownMenu.Viewport>
+                <DropdownMenu.Item onClick={handleBackupBinary}>{t('download-backup-binary.label')}</DropdownMenu.Item>
+                <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>
+              </DropdownMenu.Viewport>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
         </Settings.Item>
         <Settings.Item title={t('repair-space.title')} description={t('repair-space.description')}>
           <Button onClick={handleRepair}>{t('repair-space.label')}</Button>

package/src/containers/SyncStatus/SyncStatus.stories.tsx

@@ -7,7 +7,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { SyncStatusIndicator } from './SyncStatus';
 
 const meta = {

package/src/containers/SyncStatus/SyncStatus.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { StatusBar } from '@dxos/plugin-status-bar';
+import { StatusBar } from '@dxos/plugin-status-bar/components';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { useClient } from '@dxos/react-client';