@dxos/plugin-space 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/components/MembersContainer.tsx

@@ -0,0 +1,257 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Check, X } from '@phosphor-icons/react';
+import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';
+import { QR } from 'react-qr-rounded';
+
+import { log } from '@dxos/log';
+import { useConfig } from '@dxos/react-client';
+import { fullyQualifiedId, useSpaceInvitations, type Space } 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 { ControlSection, ControlFrame, ControlFrameItem } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import {
+  type ActionMenuItem,
+  AuthCode,
+  BifurcatedAction,
+  Centered,
+  Emoji,
+  InvitationList,
+  SpaceMemberList,
+  Viewport,
+} from '@dxos/shell/react';
+import { hexToEmoji } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../meta';
+import { CollectionType } from '../types';
+
+// TODO(wittjosiah): Copied from Shell.
+const activeActionKey = 'dxos:react-shell/space-manager/active-action';
+
+const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservable.Subscription) => {
+  const invitationCode = InvitationEncoder.encode(invitation);
+  if (invitation.state === Invitation.State.CONNECTING) {
+    log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+    subscription.unsubscribe();
+  }
+};
+
+export const MembersContainer = ({
+  space,
+  createInvitationUrl,
+}: {
+  space: Space;
+  createInvitationUrl: (invitationCode: string) => string;
+}) => {
+  const { t } = useTranslation('os');
+  const config = useConfig();
+  const invitations = useSpaceInvitations(space.key);
+  const visibleInvitations = invitations?.filter(
+    (invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state),
+  );
+
+  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteMany');
+
+  const setActiveAction = (nextAction: string) => {
+    setInternalActiveAction(nextAction);
+    localStorage.setItem(activeActionKey, nextAction);
+  };
+
+  // TODO(wittjosiah): Track which was the most recently viewed object.
+  const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
+
+  const inviteActions = useMemo(
+    (): Record<string, ActionMenuItem> => ({
+      inviteOne: {
+        label: t('invite one label'),
+        description: t('invite one description'),
+        icon: () => <Icon icon='ph--user-plus--regular' size={5} />,
+        testId: 'membersContainer.inviteOne',
+        onClick: () => {
+          const invitation = space.share?.({
+            type: Invitation.Type.INTERACTIVE,
+            authMethod: Invitation.AuthMethod.SHARED_SECRET,
+            multiUse: false,
+            target: target && fullyQualifiedId(target),
+          });
+          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+            const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
+              handleInvitationEvent(invitation, subscription),
+            );
+          }
+        },
+      },
+      inviteMany: {
+        label: t('invite many label'),
+        description: t('invite many description'),
+        icon: () => <Icon icon='ph--users-three--regular' size={5} />,
+        testId: 'membersContainer.inviteMany',
+        onClick: () => {
+          const invitation = space.share?.({
+            type: Invitation.Type.DELEGATED,
+            authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
+            multiUse: true,
+            target: target && fullyQualifiedId(target),
+          });
+          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+            const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
+              handleInvitationEvent(invitation, subscription),
+            );
+          }
+        },
+      },
+    }),
+    [t, space, target],
+  );
+
+  const [selectedInvitation, setSelectedInvitation] = useState<CancellableInvitationObservable | null>(null);
+  const handleSend = (event: { type: 'selectInvitation'; invitation: CancellableInvitationObservable }) => {
+    setSelectedInvitation(event.invitation);
+  };
+  const handleBack = () => {
+    setSelectedInvitation(null);
+  };
+
+  return (
+    <Clipboard.Provider>
+      <StackItem.Content classNames='p-2 block overflow-y-auto'>
+        <ControlSection
+          title={t('members verbose label', { ns: SPACE_PLUGIN })}
+          description={t('members description', { ns: SPACE_PLUGIN })}
+        >
+          <ControlFrame>
+            <ControlFrameItem title={t('members label', { ns: SPACE_PLUGIN })}>
+              <SpaceMemberList spaceKey={space.key} includeSelf />
+            </ControlFrameItem>
+            <ControlFrameItem title={t('invitations label', { ns: SPACE_PLUGIN })}>
+              {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
+              {!selectedInvitation && (
+                <>
+                  <p className='text-description mbe-2'>{t('space invitation description', { ns: SPACE_PLUGIN })}</p>
+                  <InvitationList
+                    className='mb-2'
+                    send={handleSend}
+                    invitations={visibleInvitations ?? []}
+                    onClickRemove={(invitation) => invitation.cancel()}
+                    createInvitationUrl={createInvitationUrl}
+                  />
+                  <BifurcatedAction
+                    actions={inviteActions}
+                    activeAction={activeAction}
+                    onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
+                    data-testid='membersContainer.createInvitation'
+                  />
+                </>
+              )}
+            </ControlFrameItem>
+          </ControlFrame>
+        </ControlSection>
+      </StackItem.Content>
+    </Clipboard.Provider>
+  );
+};
+
+// TODO(wittjosiah): Reconcile the below components with DevicesContainer in @dxos/plugin-client.
+
+type InvitationComponentProps = Partial<
+  Pick<Invitation, 'authCode' | 'invitationId'> & {
+    state: Invitation.State;
+    url: string;
+    onBack: () => void;
+  }
+>;
+
+const InvitationSection = ({
+  state = Invitation.State.INIT,
+  authCode,
+  invitationId = 'never',
+  url = 'never',
+  onBack,
+}: InvitationComponentProps) => {
+  const activeView =
+    state < 0
+      ? 'init'
+      : state >= Invitation.State.CANCELLED
+        ? 'complete'
+        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
+          ? 'auth-code'
+          : 'qr-code';
+  return (
+    <Viewport.Root activeView={activeView}>
+      <Viewport.Views>
+        <Viewport.View id='init'>
+          {/* This view intentionally left blank while conditionally rendering the viewport. */}
+        </Viewport.View>
+        <Viewport.View id='complete'>
+          <InvitationComplete statusValue={state} />
+        </Viewport.View>
+        <Viewport.View id='auth-code'>
+          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onBack} />
+        </Viewport.View>
+        <Viewport.View id='qr-code'>
+          <InvitationQR id={invitationId} url={url} onCancel={onBack} />
+        </Viewport.View>
+      </Viewport.Views>
+    </Viewport.Root>
+  );
+};
+
+const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel?: () => void }) => {
+  const { t } = useTranslation('os');
+  const qrLabel = useId('members-container__qr-code');
+  const emoji = hexToEmoji(id);
+  return (
+    <>
+      <p className='text-description'>{t('qr code description', { ns: SPACE_PLUGIN })}</p>
+      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
+        <div role='none' className='is-full aspect-square relative text-description'>
+          <QR
+            rounding={100}
+            backgroundColor='transparent'
+            color='currentColor'
+            aria-labelledby={qrLabel}
+            errorCorrectionLevel='Q'
+            cutout={true}
+          >
+            {url ?? 'never'}
+          </QR>
+          <Centered>
+            <Emoji text={emoji} />
+          </Centered>
+        </div>
+        <span id={qrLabel} className='sr-only'>
+          {t('qr label')}
+        </span>
+        <Clipboard.Button value={url ?? 'never'} />
+      </div>
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </>
+  );
+};
+
+const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel?: () => void }) => {
+  const { t } = useTranslation('os');
+  const emoji = hexToEmoji(id);
+
+  return (
+    <>
+      <p className='text-description'>{t('auth other device emoji message')}</p>
+      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
+      <p className='text-description'>{t('auth code message')}</p>
+      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </>
+  );
+};
+
+const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
+  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+};

package/src/components/{AdvancedObjectSettings → ObjectSettingsContainer}/AdvancedObjectSettings.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useState } from 'react';
 
 import { type ForeignKey, ForeignKeySchema } from '@dxos/echo-schema';
 import { getMeta, type ReactiveEchoObject } from '@dxos/react-client/echo';
-import { IconButton, useTranslation, Separator } from '@dxos/react-ui';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
 import { ForeignKeys } from './ForeignKeys';
@@ -51,7 +51,6 @@ export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps)
   // TODO(wittjosiah): This should be wrapped in an "Advanced" accordion.
   return (
     <>
-      <Separator />
       <div className='p-2 flex flex-col gap-4'>
         <h2>{t('advanced settings label')}</h2>
         <div className='flex items-center'>
@@ -66,6 +65,7 @@ export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps)
         </div>
         {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
       </div>
+
       {adding && <Form schema={ForeignKeySchema} values={initialValues} onSave={handleSave} onCancel={handleCancel} />}
     </>
   );

package/src/components/ObjectSettingsContainer/BaseObjectSettings.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, useRef } from 'react';
+
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { meta } from '../../meta';
+
+export type BaseObjectSettingsProps = ThemedClassName<
+  PropsWithChildren<{
+    object: ReactiveEchoObject<any>;
+  }>
+>;
+
+export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // TODO(wittjosiah): This should be a form based on the schema of the object.
+  //  The form should only include fields with a specific settings annotation.
+  //  Perhaps also including the field of the title annotation as well.
+  return (
+    <form className={mx('flex flex-col p-2 gap-2', classNames)}>
+      <Input.Root>
+        <Input.Label>{t('name label')}</Input.Label>
+        <Input.TextInput
+          ref={inputRef}
+          placeholder={t('name placeholder')}
+          value={object.name ?? ''}
+          onChange={(event) => {
+            object.name = event.target.value;
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              inputRef.current?.blur();
+            }
+          }}
+        />
+      </Input.Root>
+      {children}
+    </form>
+  );
+};

package/src/components/ObjectSettingsContainer/ObjectSettingsContainer.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { Clipboard } from '@dxos/react-ui';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { AdvancedObjectSettings } from './AdvancedObjectSettings';
+import { BaseObjectSettings } from './BaseObjectSettings';
+
+export type ObjectSettingsContainerProps = {
+  object: ReactiveEchoObject<any>;
+  role: string;
+};
+
+export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContainerProps) => {
+  const data = useMemo(() => ({ subject: object }), [object]);
+
+  return (
+    <Clipboard.Provider>
+      <StackItem.Content toolbar={false} role={role}>
+        <div className='flex flex-col overflow-y-auto divide-y divide-separator'>
+          <BaseObjectSettings object={object}>
+            <Surface role='base-object-settings' data={data} />
+          </BaseObjectSettings>
+          <Surface role='object-settings' data={data} />
+          <AdvancedObjectSettings object={object} />
+        </div>
+      </StackItem.Content>
+    </Clipboard.Provider>
+  );
+};

package/src/components/ObjectSettingsContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ObjectSettingsContainer';

package/src/components/PopoverRenameObject.tsx

@@ -38,7 +38,7 @@ export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<an
         <Input.Root>
           <Input.Label srOnly>{t('object name label')}</Input.Label>
           <Input.TextInput
-            placeholder={t('object title placeholder')}
+            placeholder={t('object placeholder')}
             value={name}
             data-testid='spacePlugin.renameObject.input'
             onChange={({ target: { value } }) => setName(value)}

package/src/components/SpacePresence.tsx

@@ -12,8 +12,7 @@ import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import {
   Avatar,
-  AvatarGroup,
-  AvatarGroupItem,
+  type AvatarContentProps,
   type Size,
   type ThemedClassName,
   Tooltip,
@@ -113,16 +112,16 @@ export const FullPresence = (props: MemberPresenceProps) => {
   }
 
   return (
-    <AvatarGroup.Root size={size} classNames='mbs-2 mie-4' data-testid='spacePlugin.presence'>
+    <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
         <Tooltip.Root key={member.identity.identityKey.toHex()}>
           <Tooltip.Trigger>
             <PrensenceAvatar
               identity={member.identity}
-              group
               match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
               index={members.length - i}
               onClick={() => onMemberClick?.(member)}
+              size={size}
             />
           </Tooltip.Trigger>
           <Tooltip.Portal>
@@ -137,12 +136,14 @@ export const FullPresence = (props: MemberPresenceProps) => {
       {members.length > 3 && (
         <Tooltip.Root>
           <Tooltip.Trigger>
-            <AvatarGroupItem.Root status='inactive'>
-              <Avatar.Frame style={{ zIndex: members.length - 4 }}>
-                {/* TODO(wittjosiah): Make text fit. */}
-                <Avatar.Fallback text={`+${members.length - 3}`} />
-              </Avatar.Frame>
-            </AvatarGroupItem.Root>
+            <Avatar.Root>
+              {/* TODO(wittjosiah): Make text fit. */}
+              <Avatar.Content
+                status='inactive'
+                style={{ zIndex: members.length - 4 }}
+                fallback={`+${members.length - 3}`}
+              />
+            </Avatar.Root>
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content side='bottom'>
@@ -156,7 +157,7 @@ export const FullPresence = (props: MemberPresenceProps) => {
                     data-testid='identity-list-item'
                   >
                     {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                    <PrensenceAvatar identity={member.identity} showName match={member.currentlyAttended} />
+                    <PrensenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
                   </ListItem.Root>
                 ))}
               </List>
@@ -164,35 +165,36 @@ export const FullPresence = (props: MemberPresenceProps) => {
           </Tooltip.Portal>
         </Tooltip.Root>
       )}
-    </AvatarGroup.Root>
+    </div>
   );
 };
 
-type PresenceAvatarProps = {
+type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
   identity: Identity;
   showName?: boolean;
   match?: boolean;
-  group?: boolean;
   index?: number;
   onClick?: () => void;
 };
 
-const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: PresenceAvatarProps) => {
-  const Root = group ? AvatarGroupItem.Root : Avatar.Root;
+const PrensenceAvatar = ({ identity, showName, match, index, onClick, size }: PresenceAvatarProps) => {
   const status = match ? 'current' : 'active';
   const fallbackValue = keyToFallback(identity.identityKey);
   return (
-    <Root status={status} hue={identity.profile?.data?.hue || fallbackValue.hue}>
-      <Avatar.Frame
+    <Avatar.Root>
+      <Avatar.Content
+        status={status}
+        hue={identity.profile?.data?.hue || fallbackValue.hue}
         data-testid='spacePlugin.presence.member'
         data-status={status}
+        size={size}
+        classNames='mbs-2 mie-4'
         {...(index ? { style: { zIndex: index } } : {})}
         onClick={() => onClick?.()}
-      >
-        <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
-      </Avatar.Frame>
-      {showName && <Avatar.Label classNames='text-sm truncate pli-2'>{getName(identity)}</Avatar.Label>}
-    </Root>
+        fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+      />
+      <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+    </Avatar.Root>
   );
 };
 

package/src/components/SpaceSettings/{SpaceSettingsPanel.stories.tsx → SpacePropertiesForm.stories.tsx}

@@ -10,21 +10,21 @@ import React from 'react';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
+import { SpacePropertiesForm, type SpacePropertiesFormProps } from './SpacePropertiesForm';
 import translations from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsPanelProps>) => {
+const Story = (args: Partial<SpacePropertiesFormProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsPanel {...args} space={space!} />
+      <SpacePropertiesForm {...args} space={space!} />
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-space/SpaceSettingsPanel',
-  component: SpaceSettingsPanel,
+  title: 'plugins/plugin-space/SpacePropertiesForm',
+  component: SpacePropertiesForm,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
   parameters: {
@@ -35,4 +35,4 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: StoryObj<typeof SpaceSettingsPanel> = {};
+export const Default: StoryObj<typeof SpacePropertiesForm> = {};

package/src/components/SpaceSettings/SpacePropertiesForm.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { type Space } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { Form, type InputComponent, ControlItem, ControlItemInput } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceForm } from '../../types';
+
+export type SpacePropertiesFormProps = {
+  space: Space;
+};
+
+export const SpacePropertiesForm = ({ space }: SpacePropertiesFormProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err: unknown) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
+
+  const handleSave = useCallback(
+    (properties: S.Schema.Type<typeof SpaceForm>) => {
+      void toggleEdgeReplication(properties.edgeReplication);
+      if (properties.name !== space.properties.name) {
+        space.properties.name = properties.name;
+      }
+      if (properties.icon !== space.properties.icon) {
+        space.properties.icon = properties.icon;
+      }
+      if (properties.hue !== space.properties.hue) {
+        space.properties.hue = properties.hue;
+      }
+    },
+    [space, toggleEdgeReplication],
+  );
+
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],
+  );
+
+  const customElements: Partial<Record<string, InputComponent>> = useMemo(
+    () => ({
+      name: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(
+          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+          [onValueChange, type],
+        );
+        return (
+          <ControlItemInput title={label} description={t('display name description')}>
+            <Input.TextInput
+              value={getValue()}
+              onChange={handleChange}
+              placeholder={t('display name input placeholder')}
+              classNames='min-is-64'
+            />
+          </ControlItemInput>
+        );
+      },
+      icon: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
+        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <ControlItem title={label} description={t('icon description')}>
+            <IconPicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleEmojiReset}
+              classNames='justify-self-end'
+              iconSize={5}
+            />
+          </ControlItem>
+        );
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <ControlItem title={label} description={t('hue description')}>
+            <HuePicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleHueReset}
+              classNames='[--hue-preview-size:1.25rem] justify-self-end'
+            />
+          </ControlItem>
+        );
+      },
+      edgeReplication: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
+        return (
+          <ControlItemInput title={label} description={t('edge replication description')}>
+            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+          </ControlItemInput>
+        );
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <Form
+      schema={SpaceForm}
+      values={values}
+      autoSave
+      onSave={handleSave}
+      Custom={customElements}
+      classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+    />
+  );
+};