@dxos/plugin-space 0.8.1 → 0.8.2-main.12df754

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-space",
-  "version": "0.8.1",
+  "version": "0.8.2-main.12df754",
   "description": "DXOS Surface plugin for DXOS ECHO Spaces",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -41,42 +41,43 @@
     "react-drag-drop-files": "^2.3.8",
     "react-is": "~18.2.0",
     "react-qr-rounded": "^1.0.0",
-    "@dxos/app-framework": "0.8.1",
-    "@dxos/async": "0.8.1",
-    "@dxos/artifact": "0.8.1",
-    "@dxos/client": "0.8.1",
-    "@dxos/automerge": "0.8.1",
-    "@dxos/context": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/display-name": "0.8.1",
-    "@dxos/echo-signals": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/keys": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/plugin-attention": "0.8.1",
-    "@dxos/migrations": "0.8.1",
-    "@dxos/local-storage": "0.8.1",
-    "@dxos/plugin-deck": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/plugin-observability": "0.8.1",
-    "@dxos/plugin-status-bar": "0.8.1",
-    "@dxos/protocols": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/react-ui-form": "0.8.1",
-    "@dxos/react-ui-attention": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/react-ui-pickers": "0.8.1",
-    "@dxos/react-ui-searchlist": "0.8.1",
-    "@dxos/react-ui-editor": "0.8.1",
-    "@dxos/react-ui-list": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/react-ui-syntax-highlighter": "0.8.1",
-    "@dxos/react-ui-tabs": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/shell": "0.8.1",
-    "@dxos/util": "0.8.1",
-    "@dxos/schema": "0.8.1"
+    "@dxos/app-framework": "0.8.2-main.12df754",
+    "@dxos/automerge": "0.8.2-main.12df754",
+    "@dxos/client": "0.8.2-main.12df754",
+    "@dxos/artifact": "0.8.2-main.12df754",
+    "@dxos/async": "0.8.2-main.12df754",
+    "@dxos/context": "0.8.2-main.12df754",
+    "@dxos/display-name": "0.8.2-main.12df754",
+    "@dxos/echo-signals": "0.8.2-main.12df754",
+    "@dxos/effect": "0.8.2-main.12df754",
+    "@dxos/echo-schema": "0.8.2-main.12df754",
+    "@dxos/invariant": "0.8.2-main.12df754",
+    "@dxos/keys": "0.8.2-main.12df754",
+    "@dxos/live-object": "0.8.2-main.12df754",
+    "@dxos/local-storage": "0.8.2-main.12df754",
+    "@dxos/log": "0.8.2-main.12df754",
+    "@dxos/migrations": "0.8.2-main.12df754",
+    "@dxos/plugin-attention": "0.8.2-main.12df754",
+    "@dxos/plugin-client": "0.8.2-main.12df754",
+    "@dxos/plugin-deck": "0.8.2-main.12df754",
+    "@dxos/plugin-graph": "0.8.2-main.12df754",
+    "@dxos/plugin-observability": "0.8.2-main.12df754",
+    "@dxos/plugin-status-bar": "0.8.2-main.12df754",
+    "@dxos/protocols": "0.8.2-main.12df754",
+    "@dxos/react-client": "0.8.2-main.12df754",
+    "@dxos/react-ui-attention": "0.8.2-main.12df754",
+    "@dxos/react-ui-editor": "0.8.2-main.12df754",
+    "@dxos/react-ui-form": "0.8.2-main.12df754",
+    "@dxos/react-ui-list": "0.8.2-main.12df754",
+    "@dxos/react-ui-pickers": "0.8.2-main.12df754",
+    "@dxos/react-ui-searchlist": "0.8.2-main.12df754",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.12df754",
+    "@dxos/react-ui-tabs": "0.8.2-main.12df754",
+    "@dxos/react-ui-theme": "0.8.2-main.12df754",
+    "@dxos/react-ui-stack": "0.8.2-main.12df754",
+    "@dxos/schema": "0.8.2-main.12df754",
+    "@dxos/util": "0.8.2-main.12df754",
+    "@dxos/shell": "0.8.2-main.12df754"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -87,17 +88,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.12df754",
+    "@dxos/react-ui-theme": "0.8.2-main.12df754",
+    "@dxos/storybook-utils": "0.8.2-main.12df754",
+    "@dxos/random": "0.8.2-main.12df754"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/react-ui": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.12df754",
+    "@dxos/react-ui-theme": "0.8.2-main.12df754"
   },
   "publishConfig": {
     "access": "public"

package/src/SpacePlugin.tsx

@@ -33,7 +33,7 @@ import {
   SpaceState,
 } from './capabilities';
 import { SpaceEvents } from './events';
-import { meta, SPACE_PLUGIN } from './meta';
+import { meta } from './meta';
 import translations from './translations';
 import { CollectionAction, CollectionType, defineObjectForm } from './types';
 
@@ -57,7 +57,7 @@ export type SpacePluginOptions = {
 export const SpacePlugin = ({
   invitationUrl = window.location.origin,
   invitationParam = 'spaceInvitationCode',
-  observability = true,
+  observability = false,
 }: SpacePluginOptions = {}) => {
   const createInvitationUrl = (invitationCode: string) => {
     const baseUrl = new URL(invitationUrl);
@@ -112,16 +112,6 @@ export const SpacePlugin = ({
           }),
         ),
     }),
-    defineModule({
-      id: `${meta.id}/module/space-settings`,
-      activatesOn: SpaceEvents.SetupSettingsPanel,
-      activate: () =>
-        contributes(SpaceCapabilities.SettingsSection, {
-          id: 'properties',
-          label: ['space settings properties label', { ns: SPACE_PLUGIN }],
-          position: 'hoist',
-        }),
-    }),
     defineModule({
       id: `${meta.id}/module/schema`,
       activatesOn: ClientEvents.ClientReady,

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

@@ -9,12 +9,12 @@ import {
   FQ_ID_LENGTH,
   getSpace,
   isEchoObject,
-  isSpace,
   OBJECT_ID_LENGTH,
   type ReactiveEchoObject,
   SPACE_ID_LENGTH,
   SpaceState,
   type Space,
+  parseId,
 } from '@dxos/client/echo';
 import { isDeleted } from '@dxos/live-object';
 import { log } from '@dxos/log';
@@ -25,7 +25,7 @@ import { isNonNullable } from '@dxos/util';
 
 import { SpaceCapabilities } from './capabilities';
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, SpaceAction, type SpaceSettingsProps } from '../types';
+import { CollectionType, SPACE_TYPE, SpaceAction, type SpaceSettingsProps } from '../types';
 import {
   constructObjectActions,
   constructSpaceActions,
@@ -98,6 +98,45 @@ export default (context: PluginsContext) => {
             position: 'fallback',
           },
         },
+        {
+          id: SpaceAction.Share._tag,
+          data: async () => {
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            const layout = context.requestCapability(Capabilities.Layout);
+            const client = context.requestCapability(ClientCapabilities.Client);
+            const { spaceId } = parseId(layout.workspace);
+            const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
+            await dispatch(createIntent(SpaceAction.Share, { space }));
+          },
+          properties: {
+            label: ['share space label', { ns: SPACE_PLUGIN }],
+            icon: 'ph--users--regular',
+            testId: 'spacePlugin.shareSpace',
+            keyBinding: {
+              macos: 'meta+.',
+              windows: 'alt+.',
+            },
+          },
+        },
+        {
+          id: SpaceAction.OpenSettings._tag,
+          data: async () => {
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            const layout = context.requestCapability(Capabilities.Layout);
+            const client = context.requestCapability(ClientCapabilities.Client);
+            const { spaceId } = parseId(layout.workspace);
+            const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
+            await dispatch(createIntent(SpaceAction.OpenSettings, { space }));
+          },
+          properties: {
+            label: ['open current space settings label', { ns: SPACE_PLUGIN }],
+            icon: 'ph--faders--regular',
+            keyBinding: {
+              macos: 'meta+shift+,',
+              windows: 'ctrl+shift+,',
+            },
+          },
+        },
       ],
     }),
 
@@ -203,7 +242,7 @@ export default (context: PluginsContext) => {
     // Create space actions.
     createExtension({
       id: `${SPACE_PLUGIN}/actions`,
-      filter: (node): node is Node<Space> => isSpace(node.data),
+      filter: (node): node is Node<Space> => node.type === SPACE_TYPE,
       actions: ({ node }) => {
         const space = node.data;
         const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
@@ -221,7 +260,7 @@ export default (context: PluginsContext) => {
     // Create nodes for objects in the root collection of a space.
     createExtension({
       id: `${SPACE_PLUGIN}/root-collection`,
-      filter: (node): node is Node<Space> => isSpace(node.data),
+      filter: (node): node is Node<Space> => node.type === SPACE_TYPE,
       connector: ({ node }) => {
         const space = node.data;
         const spaceState = toSignal(

package/src/capabilities/app-graph-serializer.ts

@@ -4,12 +4,12 @@
 
 import { Capabilities, contributes, createIntent, type PluginsContext } from '@dxos/app-framework';
 import { isSpace } from '@dxos/client/echo';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { SPACE_PLUGIN } from '../meta';
 import translations from '../translations';
-import { CollectionType, SpaceAction } from '../types';
-import { SPACES, SPACE_TYPE } from '../util';
+import { CollectionType, SpaceAction, SPACE_TYPE } from '../types';
+import { SPACES } from '../util';
 
 // https://stackoverflow.com/a/19016910
 const DIRECTORY_TYPE = 'text/directory';
@@ -63,7 +63,7 @@ export default (context: PluginsContext) =>
         const result = await dispatch(
           createIntent(SpaceAction.AddObject, {
             target: collection,
-            object: create(CollectionType, { name: data.name, objects: [], views: {} }),
+            object: live(CollectionType, { name: data.name, objects: [], views: {} }),
           }),
         );
 

package/src/capabilities/identity-created.ts

@@ -3,7 +3,7 @@
 //
 
 import { contributes, type PluginsContext, Capabilities } from '@dxos/app-framework';
-import { create, makeRef } from '@dxos/live-object';
+import { live, makeRef } from '@dxos/live-object';
 import { Migrations } from '@dxos/migrations';
 import { ClientCapabilities } from '@dxos/plugin-client';
 
@@ -17,7 +17,7 @@ export default async (context: PluginsContext) => {
   await defaultSpace.waitUntilReady();
 
   // Create root collection structure.
-  defaultSpace.properties[CollectionType.typename] = makeRef(create(CollectionType, { objects: [], views: {} }));
+  defaultSpace.properties[CollectionType.typename] = makeRef(live(CollectionType, { objects: [], views: {} }));
   if (Migrations.versionProperty) {
     defaultSpace.properties[Migrations.versionProperty] = Migrations.targetVersion;
   }

package/src/capabilities/intent-resolver.ts

@@ -15,13 +15,13 @@ import {
 } from '@dxos/app-framework';
 import { type Expando, getTypename, type HasId } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
+import { live, makeRef, type Live } from '@dxos/live-object';
 import { Migrations } from '@dxos/migrations';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { isSpace, getSpace, SpaceState, type Space, fullyQualifiedId, isEchoObject } from '@dxos/react-client/echo';
+import { isSpace, getSpace, SpaceState, fullyQualifiedId, isEchoObject } from '@dxos/react-client/echo';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
 
 import { SpaceCapabilities } from './capabilities';
 import {
@@ -67,14 +67,14 @@ export default ({ context, observability }: IntentResolverOptions) => {
     }),
     createResolver({
       intent: SpaceAction.Create,
-      resolve: async ({ name, edgeReplication }) => {
+      resolve: async ({ name, hue, icon, edgeReplication }) => {
         const client = context.requestCapability(ClientCapabilities.Client);
-        const space = await client.spaces.create({ name });
+        const space = await client.spaces.create({ name, hue, icon });
         if (edgeReplication) {
           await space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED);
         }
         await space.waitUntilReady();
-        const collection = create(CollectionType, { objects: [], views: {} });
+        const collection = live(CollectionType, { objects: [], views: {} });
         space.properties[CollectionType.typename] = makeRef(collection);
 
         if (Migrations.versionProperty) {
@@ -122,10 +122,9 @@ export default ({ context, observability }: IntentResolverOptions) => {
     }),
     createResolver({
       intent: SpaceAction.Share,
-      filter: (data): data is { space: Space } => !data.space.properties[COMPOSER_SPACE_LOCK],
       resolve: ({ space }) => {
         const layout = context.requestCapability(Capabilities.Layout);
-        const id = `${space.id}${ATTENDABLE_PATH_SEPARATOR}members`;
+        const id = `members-settings${ATTENDABLE_PATH_SEPARATOR}${space.id}`;
         if (layout.active.includes(id)) {
           return {
             intents: [
@@ -146,10 +145,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
               }),
               chain(LayoutAction.Open, {
                 part: 'main',
-                subject: [space.id],
-                options: {
-                  variant: 'members',
-                },
+                subject: [id],
               }),
             ),
             ...(observability
@@ -232,6 +228,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
               part: 'popover',
               subject: POPOVER_ADD_SPACE,
               options: {
+                variant: 'react',
                 anchorId: SpaceAction.AddSpace._tag,
                 side: 'right',
               },
@@ -244,7 +241,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
       intent: SpaceAction.OpenSettings,
       resolve: ({ space }) => {
         const layout = context.requestCapability(Capabilities.Layout);
-        const id = `${space.id}${ATTENDABLE_PATH_SEPARATOR}settings`;
+        const id = `properties-settings${ATTENDABLE_PATH_SEPARATOR}${space.id}`;
         if (layout.active.includes(id)) {
           return {
             intents: [
@@ -265,10 +262,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
               }),
               chain(LayoutAction.Open, {
                 part: 'main',
-                subject: [space.id],
-                options: {
-                  variant: 'settings',
-                },
+                subject: [id],
               }),
             ),
           ],
@@ -333,7 +327,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
                 props: {
                   target,
                   shouldNavigate: navigable
-                    ? (object: ReactiveObject<any>) => !(object instanceof CollectionType) || state.navigableCollections
+                    ? (object: Live<any>) => !(object instanceof CollectionType) || state.navigableCollections
                     : () => false,
                 } satisfies Partial<CreateObjectDialogProps>,
               },
@@ -390,7 +384,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
             collection.objects.push(makeRef(object as HasId));
           } else {
             // TODO(wittjosiah): Can't add non-echo objects by including in a collection because of types.
-            const collection = create(CollectionType, { objects: [makeRef(object as HasId)], views: {} });
+            const collection = live(CollectionType, { objects: [makeRef(object as HasId)], views: {} });
             space.properties[CollectionType.typename] = makeRef(collection);
           }
         }
@@ -557,7 +551,7 @@ export default ({ context, observability }: IntentResolverOptions) => {
     createResolver({
       intent: CollectionAction.Create,
       resolve: async ({ name }) => ({
-        data: { object: create(CollectionType, { name, objects: [], views: {} }) },
+        data: { object: live(CollectionType, { name, objects: [], views: {} }) },
       }),
     }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -2,20 +2,27 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import { type Schema as S } from 'effect';
+import React, { useCallback } from 'react';
 
-import { Capabilities, contributes, createSurface, Surface, useCapability } from '@dxos/app-framework';
-import { isInstanceOf } from '@dxos/echo-schema';
+import { Capabilities, contributes, createSurface, Surface, useCapability, useLayout } from '@dxos/app-framework';
+import { getSchema, isInstanceOf } from '@dxos/echo-schema';
+import { findAnnotation } from '@dxos/effect';
 import { SettingsStore } from '@dxos/local-storage';
 import {
   getSpace,
   isEchoObject,
-  isReactiveObject,
+  isLiveObject,
   isSpace,
+  parseId,
   SpaceState,
+  useSpace,
   type ReactiveEchoObject,
   type Space,
 } from '@dxos/react-client/echo';
+import { Input } from '@dxos/react-ui';
+import { Form, type InputProps } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { SpaceCapabilities } from './capabilities';
@@ -41,13 +48,13 @@ import {
   type CreateObjectDialogProps,
   POPOVER_ADD_SPACE,
   PopoverAddSpace,
-  SpaceSettingsContainer,
-  SpacePropertiesForm,
   MembersContainer,
   ObjectSettingsContainer,
+  SpaceSettingsContainer,
+  SchemaContainer,
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, type SpaceSettingsProps } from '../types';
+import { CollectionType, HueAnnotationId, IconAnnotationId, type SpaceSettingsProps } from '../types';
 
 type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
@@ -77,20 +84,11 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       component: ({ data }) => <CollectionMain collection={data.subject} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/members`,
-      role: 'article',
-      position: 'hoist',
-      filter: (data): data is { subject: Space; variant: 'members' } =>
-        isSpace(data.subject) && data.variant === 'members',
-      component: ({ data }) => <MembersContainer space={data.subject} createInvitationUrl={createInvitationUrl} />,
-    }),
-    createSurface({
-      id: `${SPACE_PLUGIN}/settings`,
+      id: `${SPACE_PLUGIN}/plugin-settings`,
       role: 'article',
-      position: 'hoist',
-      filter: (data): data is { subject: Space; variant: 'settings' } =>
-        isSpace(data.subject) && data.variant === 'settings',
-      component: ({ data }) => <SpaceSettingsContainer space={data.subject} />,
+      filter: (data): data is { subject: SettingsStore<SpaceSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === SPACE_PLUGIN,
+      component: ({ data: { subject } }) => <SpacePluginSettings settings={subject.value} />,
     }),
     createSurface({
       id: `${SPACE_PLUGIN}/companion/object-settings`,
@@ -100,10 +98,50 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       component: ({ data, role }) => <ObjectSettingsContainer object={data.companionTo} role={role} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/space-settings--properties`,
-      role: 'space-settings--properties',
-      filter: (data): data is { subject: Space } => isSpace(data.subject),
-      component: ({ data }) => <SpacePropertiesForm space={data.subject} />,
+      id: `${SPACE_PLUGIN}/space-settings-properties`,
+      role: 'article',
+      filter: (data): data is { subject: string } => data.subject === `${SPACE_PLUGIN}/properties`,
+      component: () => {
+        const layout = useLayout();
+        const { spaceId } = parseId(layout.workspace);
+        const space = useSpace(spaceId);
+        if (!space || !spaceId) {
+          return null;
+        }
+
+        return <SpaceSettingsContainer space={space} />;
+      },
+    }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/space-settings-members`,
+      role: 'article',
+      position: 'hoist',
+      filter: (data): data is { subject: string } => data.subject === `${SPACE_PLUGIN}/members`,
+      component: () => {
+        const layout = useLayout();
+        const { spaceId } = parseId(layout.workspace);
+        const space = useSpace(spaceId);
+        if (!space || !spaceId) {
+          return null;
+        }
+
+        return <MembersContainer space={space} createInvitationUrl={createInvitationUrl} />;
+      },
+    }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/space-settings-schema`,
+      role: 'article',
+      filter: (data): data is { subject: string } => data.subject === `${SPACE_PLUGIN}/schema`,
+      component: () => {
+        const layout = useLayout();
+        const { spaceId } = parseId(layout.workspace);
+        const space = useSpace(spaceId);
+        if (!space || !spaceId) {
+          return null;
+        }
+
+        return <SchemaContainer space={space} />;
+      },
     }),
     createSurface({
       id: JOIN_DIALOG,
@@ -123,6 +161,57 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is { props: CreateObjectDialogProps } => data.component === CREATE_OBJECT_DIALOG,
       component: ({ data }) => <CreateObjectDialog {...data.props} />,
     }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/create-initial-space-form-[hue]`,
+      role: 'form-input',
+      filter: (data): data is { prop: string; schema: S.Schema<any> } => {
+        const annotation = findAnnotation<boolean>((data.schema as S.Schema.All).ast, HueAnnotationId);
+        return !!annotation;
+      },
+      component: ({ data: _, ...inputProps }) => {
+        const { label, disabled, type, getValue, onValueChange } = inputProps as any as InputProps;
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange]);
+        return (
+          <Input.Root>
+            <Input.Label>{label}</Input.Label>
+            <HuePicker disabled={disabled} value={getValue() ?? ''} onChange={handleChange} onReset={handleReset} />
+          </Input.Root>
+        );
+      },
+    }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/create-initial-space-form-[icon]`,
+      role: 'form-input',
+      filter: (data): data is { prop: string; schema: S.Schema<any> } => {
+        const annotation = findAnnotation<boolean>((data.schema as S.Schema.All).ast, IconAnnotationId);
+        return !!annotation;
+      },
+      component: ({ data: _, ...inputProps }) => {
+        const { label, disabled, type, getValue, onValueChange } = inputProps as any as InputProps;
+        const handleChange = useCallback((nextIcon: string) => onValueChange(type, nextIcon), [onValueChange]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange]);
+        return (
+          <Input.Root>
+            <Input.Label>{label}</Input.Label>
+            <IconPicker disabled={disabled} value={getValue() ?? ''} onChange={handleChange} onReset={handleReset} />
+          </Input.Root>
+        );
+      },
+    }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/preview-popover`,
+      role: 'popover',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+      component: ({ data }) => {
+        const schema = getSchema(data.subject);
+        if (!schema) {
+          return null;
+        }
+
+        return <Form schema={schema} values={data.subject} readonly />;
+      },
+    }),
     createSurface({
       id: POPOVER_RENAME_SPACE,
       role: 'popover',
@@ -133,7 +222,7 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       id: POPOVER_RENAME_OBJECT,
       role: 'popover',
       filter: (data): data is { props: ReactiveEchoObject<any> } =>
-        data.component === POPOVER_RENAME_OBJECT && isReactiveObject(data.props),
+        data.component === POPOVER_RENAME_OBJECT && isLiveObject(data.props),
       component: ({ data }) => <PopoverRenameObject object={data.props} />,
     }),
     createSurface({
@@ -142,6 +231,12 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is any => data.component === POPOVER_ADD_SPACE,
       component: () => <PopoverAddSpace />,
     }),
+    createSurface({
+      id: `${SPACE_PLUGIN}/menu-footer`,
+      role: 'menu-footer',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+      component: ({ data }) => <MenuFooter object={data.subject} />,
+    }),
     createSurface({
       id: `${SPACE_PLUGIN}/navtree-presence`,
       role: 'navtree-item-end',
@@ -191,19 +286,6 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       filter: (data): data is { subject: CollectionType } => isInstanceOf(CollectionType, data.subject),
       component: ({ data }) => <CollectionSection collection={data.subject} />,
     }),
-    createSurface({
-      id: `${SPACE_PLUGIN}/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<SpaceSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === SPACE_PLUGIN,
-      component: ({ data: { subject } }) => <SpacePluginSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${SPACE_PLUGIN}/menu-footer`,
-      role: 'menu-footer',
-      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
-      component: ({ data }) => <MenuFooter object={data.subject} />,
-    }),
     createSurface({
       id: `${SPACE_PLUGIN}/status`,
       role: 'status',

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { SPACE_PLUGIN } from '../meta';
 import { type SpaceSettingsProps, SpaceSettingsSchema } from '../types';
 
 export default () => {
-  const settings = create<SpaceSettingsProps>({
+  const settings = live<SpaceSettingsProps>({
     showHidden: false,
   });
 

package/src/capabilities/spaces-ready.ts

@@ -6,7 +6,7 @@ import { contributes, createIntent, type PluginsContext, Capabilities, LayoutAct
 import { SubscriptionList } from '@dxos/async';
 import { Expando } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { ClientCapabilities } from '@dxos/plugin-client';
@@ -53,7 +53,7 @@ export default async (context: PluginsContext) => {
   if (!spacesOrder) {
     // TODO(wittjosiah): Cannot be a Folder because Spaces are not TypedObjects so can't be saved in the database.
     //  Instead, we store order as an array of space ids.
-    defaultSpace.db.add(create({ key: SHARED, order: [] }));
+    defaultSpace.db.add(live({ key: SHARED, order: [] }));
   }
 
   // Await missing objects.