@dxos/plugin-space 0.7.5-feature-compute.4d9d99a → 0.7.5-labs.401163d

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -5,32 +5,18 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
-import { type TypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
-import { type SpaceId, type Space, isSpace } from '@dxos/react-client/echo';
-import { Icon, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Form, InputHeader, type InputProps } from '@dxos/react-ui-form';
+import { type TypedObject, getObjectAnnotation, type ObjectAnnotation, S } from '@dxos/echo-schema';
+import { type SpaceId, type Space } from '@dxos/react-client/echo';
+import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, type InputProps } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
-import { nonNullable, type MaybePromise } from '@dxos/util';
+import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable, type MaybePromise } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../../meta';
 import { type CollectionType } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
-export type CreateObjectPanelProps = {
-  schemas: TypedObject[];
-  spaces: Space[];
-  typename?: string;
-  target?: Space | CollectionType;
-  name?: string;
-  defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Record<string, any>;
-  onCreateObject?: (params: {
-    schema: TypedObject;
-    target: Space | CollectionType;
-    data: Record<string, any>;
-  }) => MaybePromise<void>;
-};
-
 // TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.
 /**
  * Creates a surface input component based on plugin context.
@@ -41,9 +27,8 @@ const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
   const pluginManager = usePluginManager();
 
   return useCallback(
-    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps<any> }) => {
+    ({ prop, schema, inputProps }: { prop: string; schema: S.Schema<any>; inputProps: InputProps }) => {
       const composedData = { prop, schema, ...baseData };
-
       if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
         return undefined;
       }
@@ -54,7 +39,23 @@ const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
   );
 };
 
+export type CreateObjectPanelProps = ThemedClassName<{
+  schemas: TypedObject[];
+  spaces: Space[];
+  typename?: string;
+  target?: Space | CollectionType;
+  name?: string;
+  defaultSpaceId?: SpaceId;
+  resolve?: (typename: string) => Record<string, any>;
+  onCreateObject?: (params: {
+    schema: TypedObject;
+    target: Space | CollectionType;
+    data: Record<string, any>;
+  }) => MaybePromise<void>;
+}>;
+
 export const CreateObjectPanel = ({
+  classNames,
   schemas,
   spaces,
   typename: initialTypename,
@@ -68,10 +69,14 @@ export const CreateObjectPanel = ({
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
   const schema = schemas.find((schema) => getObjectAnnotation(schema)?.typename === typename);
-  const options = schemas.map(getObjectAnnotation).filter(nonNullable);
-
-  const handleClearSchema = useCallback(() => setTypename(undefined), []);
-  const handleClearTarget = useCallback(() => setTarget(undefined), []);
+  const options: ObjectAnnotation[] = schemas
+    .map(getObjectAnnotation)
+    .filter(isNonNullable)
+    .sort((a, b) => {
+      const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
+      const nameB = t('typename label', { ns: b.typename, defaultValue: b.typename });
+      return nameA.localeCompare(nameB);
+    });
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
@@ -90,117 +95,111 @@ export const CreateObjectPanel = ({
     return resolve?.(typename);
   }, [resolve, typename]);
 
-  // TODO(wittjosiah): All of these inputs should be rolled into a `Form` once it supports the necessary variants.
-  const schemaInput = (
-    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
+  const inputSurfaceLookup = useInputSurfaceLookup({ target });
+
+  const form = useMemo(() => {
+    // TODO(ZaymonFC): Move this default object creation schema somewhere?
+    const schema = (metadata?.creationSchema ?? S.Struct({ name: S.optional(S.String) })) as S.Schema<any>;
+
+    return (
+      <Form
+        classNames='!p-0'
+        autoFocus
+        values={{ name: initialName }}
+        schema={schema}
+        testId='create-object-form'
+        onSave={handleCreateObject}
+        lookupComponent={inputSurfaceLookup}
+      />
+    );
+  }, [initialName, handleCreateObject, metadata]);
+
+  // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
+  return (
+    <div role='form' className={mx('flex flex-col gap-2', classNames)}>
+      {!schema ? (
+        <SelectSchema options={options} resolve={resolve} onChange={setTypename} />
+      ) : !target ? (
+        <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={setTarget} />
+      ) : (
+        form
+      )}
+    </div>
+  );
+};
+
+const SelectSpace = ({
+  spaces,
+  defaultSpaceId,
+  onChange,
+}: { onChange: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  return (
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
-        data-testid='create-object-form.schema-input'
-        placeholder={t('schema input placeholder')}
+        data-testid='create-object-form.space-input'
+        placeholder={t('space input placeholder')}
         classNames='px-1 my-2'
       />
       <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
-        {options.map((option) => (
-          <SearchList.Item
-            key={option.typename}
-            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            onSelect={() => setTypename(option.typename)}
-            classNames='flex items-center gap-2'
-          >
-            <span className='flex gap-2 items-center grow truncate'>
-              <Icon icon={resolve?.(option.typename).icon ?? 'ph--placeholder--regular'} size={5} />
-              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            </span>
-          </SearchList.Item>
-        ))}
+        {spaces
+          .sort((a, b) => {
+            const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
+            const bName = toLocalizedString(getSpaceDisplayName(b, { personal: b.id === defaultSpaceId }), t);
+            return aName.localeCompare(bName);
+          })
+          .map((space) => (
+            <SearchList.Item
+              key={space.id}
+              value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+              onSelect={() => onChange(space)}
+              classNames='flex items-center gap-2'
+            >
+              <span className='grow truncate'>
+                {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+              </span>
+            </SearchList.Item>
+          ))}
       </SearchList.Content>
     </SearchList.Root>
   );
+};
 
-  const spaceInput = (
-    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
+const SelectSchema = ({
+  options,
+  resolve,
+  onChange,
+}: {
+  options: ObjectAnnotation[];
+  onChange: (type: string) => void;
+} & Pick<CreateObjectPanelProps, 'resolve'>) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  return (
+    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
-        data-testid='create-object-form.space-input'
-        placeholder={t('space input placeholder')}
+        data-testid='create-object-form.schema-input'
+        placeholder={t('schema input placeholder')}
         classNames='px-1 my-2'
       />
       <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
-        {spaces.map((space) => (
+        {options.map((option) => (
           <SearchList.Item
-            key={space.id}
-            value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-            onSelect={() => setTarget(space)}
+            key={option.typename}
+            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
+            onSelect={() => onChange(option.typename)}
             classNames='flex items-center gap-2'
           >
-            <span className='grow truncate'>
-              {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            <span className='flex gap-2 items-center grow truncate'>
+              <Icon icon={resolve?.(option.typename).icon ?? 'ph--placeholder--regular'} size={5} />
+              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
             </span>
           </SearchList.Item>
         ))}
       </SearchList.Content>
     </SearchList.Root>
   );
-
-  const inputSurfaceLookup = useInputSurfaceLookup({ target });
-
-  const form = useMemo(() => {
-    // TODO(ZaymonFC): Move this default object creation schema somewhere?
-    const schema = (metadata?.creationSchema ?? S.Struct({ name: S.optional(S.String) })) as S.Schema<any>;
-
-    return (
-      <Form
-        autoFocus
-        values={{ name: initialName }}
-        schema={schema}
-        testId='create-object-form'
-        onSave={handleCreateObject}
-        lookupComponent={inputSurfaceLookup}
-      />
-    );
-  }, [initialName, handleCreateObject, metadata]);
-
-  return (
-    <div role='form' className='flex flex-col gap-2'>
-      {target && (
-        <div role='none'>
-          <Input.Root>
-            <InputHeader>
-              <Input.Label>
-                {t(isSpace(target) ? 'creating in space label' : 'creating in collection label')}
-              </Input.Label>
-            </InputHeader>
-            <div role='none' className='flex gap-2'>
-              <Input.TextInput
-                disabled
-                value={
-                  isSpace(target)
-                    ? toLocalizedString(getSpaceDisplayName(target, { personal: target.id === defaultSpaceId }), t)
-                    : target.name || t('unnamed collection label')
-                }
-              />
-              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearTarget} />
-            </div>
-          </Input.Root>
-        </div>
-      )}
-      {schema && (
-        <div role='none'>
-          <Input.Root>
-            <InputHeader>
-              <Input.Label>{t('creating object type label')}</Input.Label>
-            </InputHeader>
-            <div role='none' className='flex gap-2'>
-              <Input.TextInput
-                disabled
-                value={t('typename label', { ns: schema.typename, defaultValue: schema.typename })}
-              />
-              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearSchema} />
-            </div>
-          </Input.Root>
-        </div>
-      )}
-      {!schema ? schemaInput : !target ? spaceInput : form}
-    </div>
-  );
 };

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -2,9 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Effect } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type S } from '@dxos/echo-schema';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
@@ -20,15 +21,16 @@ const initialValues: FormValues = { edgeReplication: true };
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { dispatch } = useIntentDispatcher();
 
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
-      const result = await dispatch(createIntent(SpaceAction.Create, data));
-      const target = result.data?.space;
-      if (target) {
-        await dispatch(createIntent(SpaceAction.OpenCreateObject, { target }));
-      }
+      const program = Effect.gen(function* () {
+        const { space } = yield* dispatch(createIntent(SpaceAction.Create, data));
+        yield* dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+        yield* dispatch(createIntent(SpaceAction.OpenCreateObject, { target: space }));
+      });
+      await Effect.runPromise(program);
     },
     [dispatch],
   );
@@ -36,7 +38,7 @@ export const CreateSpaceDialog = () => {
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+    <Dialog.Content classNames='p-0 bs-content min-bs-[16rem] max-bs-full md:max-is-[32rem] overflow-hidden'>
       <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
@@ -46,7 +48,14 @@ export const CreateSpaceDialog = () => {
         </Dialog.Close>
       </div>
       <div className='p-4'>
-        <Form testId='create-space-form' values={initialValues} schema={SpaceForm} onSave={handleCreateSpace} />
+        <Form
+          testId='create-space-form'
+          classNames='!p-0'
+          autoFocus
+          values={initialValues}
+          schema={SpaceForm}
+          onSave={handleCreateSpace}
+        />
       </div>
     </Dialog.Content>
   );

package/src/components/JoinDialog.tsx

@@ -4,12 +4,12 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
-import { useGraph } from '@dxos/plugin-graph';
+import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { log } from '@dxos/log';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { useSpaces } from '@dxos/react-client/echo';
+import { useClient } from '@dxos/react-client';
 import { type InvitationResult } from '@dxos/react-client/invitations';
-import { Dialog, useTranslation } from '@dxos/react-ui';
+import { Dialog } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
 import { SPACE_PLUGIN } from '../meta';
@@ -21,47 +21,55 @@ export type JoinDialogProps = JoinPanelProps & {
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const spaces = useSpaces();
-  const { graph } = useGraph();
+  const client = useClient();
+  const { graph } = useAppGraph();
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
       if (result?.spaceKey) {
         await Promise.all([
           dispatch(
-            createIntent(LayoutAction.SetLayout, {
-              element: 'toast',
+            createIntent(LayoutAction.AddToast, {
+              part: 'toast',
               subject: {
                 id: `${SPACE_PLUGIN}/join-success`,
                 duration: 5_000,
-                title: t('join success label'),
-                closeLabel: t('dismiss label'),
+                title: ['join success label', { ns: SPACE_PLUGIN }],
+                closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
               },
             }),
           ),
           dispatch(
-            createIntent(LayoutAction.SetLayout, {
-              element: 'dialog',
-              state: false,
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              options: {
+                state: false,
+              },
             }),
           ),
         ]);
       }
 
-      const space = spaces.find(({ key }) => result?.spaceKey?.equals(key));
+      const space = result?.spaceKey ? client.spaces.get(result.spaceKey) : undefined;
+      if (!space) {
+        log.warn('Space not found', result?.spaceKey);
+        return;
+      }
+
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+
       // TODO(wittjosiah): If navigableCollections is false and there's no target,
       //   should try to navigate to the first object of the space replicates.
       //   Potentially this could also be done on the inviters side to ensure there's always a target.
       const target = result?.target || (navigableCollections ? space?.id : undefined);
       if (target) {
-        // Wait for up to 1 second before navigating to the target node.
+        // Wait before navigating to the target node.
         // If the target has not yet replicated, this will trigger a loading toast.
         await graph.waitForPath({ target }).catch(() => {});
         await Promise.all([
-          dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [target] } })),
-          dispatch(createIntent(NavigationAction.Expose, { id: target })),
+          dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [target] })),
+          dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: target })),
         ]);
       }
 
@@ -73,7 +81,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         );
       }
     },
-    [dispatch, spaces],
+    [dispatch, client, graph],
   );
 
   return (

package/src/components/SpacePluginSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
 import { type SpaceSettingsProps } from '../types';
@@ -14,10 +14,10 @@ export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
         <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/SpacePresence.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { PublicKey } from '@dxos/keys';
+import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -17,7 +17,7 @@ import translations from '../translations';
 const nViewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
-    identity: { identityKey: PublicKey.random() },
+    identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
     presence: SpaceMember.PresenceState.ONLINE,
     lastSeen: Date.now(),
     currentlyAttended,

package/src/components/SpacePresence.tsx

@@ -4,10 +4,9 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
 import { type Expando } from '@dxos/echo-schema';
-import { useGraph } from '@dxos/plugin-graph';
 import { PublicKey, useClient } from '@dxos/react-client';
 import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
@@ -210,7 +209,7 @@ export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps)
   // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
   //   this will result in an empty path until the graph is connected.
   // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -2,14 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
+import { Surface, useCapabilities } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Button, Clipboard, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs, type TabsRootProps, type TabsActivePart } from '@dxos/react-ui-tabs';
 import { SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
+import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
 import { COMPOSER_SPACE_LOCK, getSpaceDisplayName } from '../../util';
 
@@ -36,6 +38,8 @@ export const SpaceSettingsDialog = ({
   const [selected, setSelected] = useState<SpaceSettingsTab>(initialTab);
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const name = getSpaceDisplayName(space, { personal: client.spaces.default === space, namesCache });
+  const panels = useCapabilities(SpaceCapabilities.SettingsPanel);
+  const data = useMemo(() => ({ subject: space }), [space]);
 
   return (
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
@@ -84,6 +88,11 @@ export const SpaceSettingsDialog = ({
                 <Tabs.Tab value='members' disabled={locked}>
                   {t('members tab label')}
                 </Tabs.Tab>
+                {panels.map((panel) => (
+                  <Tabs.Tab key={panel.id} value={panel.id}>
+                    {toLocalizedString(panel.label, t)}
+                  </Tabs.Tab>
+                ))}
               </div>
             </Tabs.Tablist>
           </div>
@@ -98,6 +107,12 @@ export const SpaceSettingsDialog = ({
               <SpacePanel space={space} hideHeading target={target} createInvitationUrl={createInvitationUrl} />
             </Clipboard.Provider>
           </Tabs.Tabpanel>
+
+          {panels.map((panel) => (
+            <Tabs.Tabpanel key={panel.id} value={panel.id} classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
+              <Surface role={`space-settings--${panel.id}`} data={data} />
+            </Tabs.Tabpanel>
+          ))}
         </Tabs.Viewport>
       </Tabs.Root>
     </Dialog.Content>

package/src/components/SpaceSettings/SpaceSettingsPanel.stories.tsx

@@ -15,7 +15,11 @@ import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsPanelProps>) => {
   const { space } = useClientProvider();
-  return <SpaceSettingsPanel {...args} space={space!} classNames='p-2 border border-primary-500 rounded' />;
+  return (
+    <div role='none' className='p-2 border border-primary-500 rounded'>
+      <SpaceSettingsPanel {...args} space={space!} />
+    </div>
+  );
 };
 
 const meta: Meta = {

package/src/components/SpaceSettings/SpaceSettingsPanel.tsx

@@ -8,17 +8,17 @@ import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { type ThemedClassName, Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
-import { mx } from '@dxos/react-ui-theme';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { HuePickerBlock } from '@dxos/react-ui-pickers';
 
 import { SPACE_PLUGIN } from '../../meta';
 
-export type SpaceSettingsPanelProps = ThemedClassName<{
+export type SpaceSettingsPanelProps = {
   space: Space;
-}>;
+};
 
-export const SpaceSettingsPanel = ({ classNames, space }: SpaceSettingsPanelProps) => {
+export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   const client = useClient();
@@ -41,7 +41,7 @@ export const SpaceSettingsPanel = ({ classNames, space }: SpaceSettingsPanelProp
   );
 
   return (
-    <div role='form' className={mx('flex flex-col', classNames)}>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('name label')}>
         <Input.TextInput
           placeholder={t('unnamed space label')}
@@ -51,11 +51,18 @@ export const SpaceSettingsPanel = ({ classNames, space }: SpaceSettingsPanelProp
           }}
         />
       </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('hue label')}>
+        <HuePickerBlock
+          hue={space.properties.hue}
+          onChangeHue={(nextHue) => (space.properties.hue = nextHue)}
+          onClickClear={() => (space.properties.hue = undefined)}
+        />
+      </DeprecatedFormInput>
       {edgeEnabled && (
         <DeprecatedFormInput label={t('edge replication label')}>
           <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
         </DeprecatedFormInput>
       )}
-    </div>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { useGraph } from '@dxos/plugin-graph';
+import { useAppGraph } from '@dxos/app-framework';
 import { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
@@ -38,7 +38,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
   //   this will result in an empty path until the graph is connected.
   // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);

package/src/components/SyncStatus/SyncStatus.tsx

@@ -66,8 +66,9 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
           <StatusBar.Button title={title}>{icon}</StatusBar.Button>
         </Popover.Trigger>
         <Popover.Portal>
-          <Popover.Content sideOffset={16}>
+          <Popover.Content>
             <SyncStatusDetail state={state} summary={summary} debug={false} />
+            <Popover.Arrow />
           </Popover.Content>
         </Popover.Portal>
       </Popover.Root>