@dxos/plugin-space 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,52 +2,50 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 
+import { Type } from '@dxos/echo';
 import { getTypeAnnotation, type TypeAnnotation } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
 import { type SpaceId, type Space } from '@dxos/react-client/echo';
-import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
-import { mx } from '@dxos/react-ui-theme';
+import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
+import { type DataType } from '@dxos/schema';
 import { isNonNullable, type MaybePromise } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
-import { type ObjectForm, type CollectionType } from '../../types';
+import { type ObjectForm } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
-export type CreateObjectPanelProps = ThemedClassName<{
+export type CreateObjectPanelProps = {
   forms: ObjectForm[];
   spaces: Space[];
   typename?: string;
-  target?: Space | CollectionType;
+  target?: Space | DataType.Collection;
   name?: string;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Record<string, any>;
-  onCreateObject?: (params: {
-    form: ObjectForm;
-    target: Space | CollectionType;
-    data?: Record<string, any>;
-  }) => MaybePromise<void>;
-}>;
+  onTargetChange?: (target: Space) => void;
+  onTypenameChange?: (typename: string) => void;
+  onCreateObject?: (params: { form: ObjectForm; data?: Record<string, any> }) => MaybePromise<void>;
+};
 
 export const CreateObjectPanel = ({
-  classNames,
   forms,
   spaces,
-  typename: initialTypename,
-  target: initialTarget,
+  typename,
+  target,
   name: initialName,
   defaultSpaceId,
   resolve,
+  onTargetChange,
+  onTypenameChange,
   onCreateObject,
 }: CreateObjectPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const [typename, setTypename] = useState<string | undefined>(initialTypename);
-  const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
-  const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
+  const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
   const options: TypeAnnotation[] = forms
     .map((form) => getTypeAnnotation(form.objectSchema))
     .filter(isNonNullable)
@@ -59,67 +57,63 @@ export const CreateObjectPanel = ({
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
-      if (!form || !target) {
+      if (!form) {
         return;
       }
-      await onCreateObject?.({ form, target, data: props });
+      await onCreateObject?.({ form, data: props });
     },
-    [onCreateObject, form, target],
+    [onCreateObject, form],
   );
 
   const handleSetTypename = useCallback(
     async (typename: string) => {
-      invariant(target, 'target is required');
       const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
       if (form && !form.formSchema) {
-        await onCreateObject?.({ form, target });
+        await onCreateObject?.({ form });
       } else {
-        setTypename(typename);
+        onTypenameChange?.(typename);
       }
     },
-    [forms, onCreateObject, target],
+    [forms, onCreateObject],
   );
 
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // 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)}>
-      {!form ? (
-        <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
-      ) : !target ? (
-        <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={setTarget} />
-      ) : form.formSchema ? (
-        <Form
-          classNames='!p-0'
-          autoFocus
-          values={{ name: initialName }}
-          schema={form.formSchema}
-          testId='create-object-form'
-          onSave={handleCreateObject}
-          lookupComponent={inputSurfaceLookup}
-        />
-      ) : undefined}
+  return !form ? (
+    <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
+  ) : !target ? (
+    <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
+  ) : form.formSchema ? (
+    <div role='none' className={cardDialogOverflow}>
+      <Form
+        autoFocus
+        values={{ name: initialName }}
+        schema={form.formSchema}
+        testId='create-object-form'
+        onSave={handleCreateObject}
+        lookupComponent={inputSurfaceLookup}
+        outerSpacing='blockStart-0'
+      />
     </div>
-  );
+  ) : null;
 };
 
 const SelectSpace = ({
   spaces,
   defaultSpaceId,
   onChange,
-}: { onChange: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+}: { 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.Root label={t('space input label')} classNames={cardDialogSearchListRoot}>
       <SearchList.Input
         autoFocus
         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'>
+      <SearchList.Content classNames={[cardDialogOverflow, 'plb-cardSpacingBlock']}>
         {spaces
           .sort((a, b) => {
             const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
@@ -130,7 +124,7 @@ const SelectSpace = ({
             <SearchList.Item
               key={space.id}
               value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange(space)}
+              onSelect={() => onChange?.(space)}
               classNames='flex items-center gap-2'
             >
               <span className='grow truncate'>
@@ -154,14 +148,13 @@ const SelectSchema = ({
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
+    <SearchList.Root label={t('schema input label')} classNames={cardDialogSearchListRoot}>
       <SearchList.Input
         autoFocus
         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'>
+      <SearchList.Content classNames={cardDialogPaddedOverflow}>
         {options.map((option) => (
           <SearchList.Item
             key={option.typename}

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -8,6 +8,7 @@ import React, { useCallback, useRef } from 'react';
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
+import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
@@ -30,7 +31,7 @@ export const CreateSpaceDialog = () => {
       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 }));
+        yield* dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
       });
       await Effect.runPromise(program);
     },
@@ -40,8 +41,8 @@ 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-[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.Content classNames={cardDialogContent}>
+      <div role='none' className={cardDialogHeader}>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
@@ -49,15 +50,15 @@ export const CreateSpaceDialog = () => {
           </Button>
         </Dialog.Close>
       </div>
-      <div className='p-4'>
+      <div role='none' className='contents'>
         <Form
           testId='create-space-form'
-          classNames='!p-0'
           autoFocus
           values={initialValues}
           schema={SpaceForm}
           lookupComponent={inputSurfaceLookup}
           onSave={handleCreateSpace}
+          outerSpacing='scroll-fields'
         />
       </div>
     </Dialog.Content>

package/src/components/MembersContainer.tsx

@@ -7,6 +7,7 @@ import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useSta
 import { QR } from 'react-qr-rounded';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Type } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
@@ -15,6 +16,7 @@ import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/rea
 import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { getSize, mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
 import {
   type ActionMenuItem,
   AuthCode,
@@ -28,7 +30,7 @@ import {
 import { hexToEmoji } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
-import { CollectionType, SpaceAction } from '../types';
+import { SpaceAction } from '../types';
 import { COMPOSER_SPACE_LOCK } from '../util';
 
 // TODO(wittjosiah): Copied from Shell.
@@ -65,7 +67,7 @@ export const MembersContainer = ({
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[CollectionType.typename]?.target?.objects[0]?.target;
+  const target = space.properties[Type.getTypename(DataType.Collection)]?.target?.objects[0]?.target;
 
   const locked = space.properties[COMPOSER_SPACE_LOCK];
   const handleChangeLocked = useCallback(() => {

package/src/components/MenuFooter.tsx

@@ -5,14 +5,15 @@
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 
-import { type AnyLiveObject, getSpace } from '@dxos/client/echo';
+import { getSpace } from '@dxos/client/echo';
+import { type Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 import { getSpaceDisplayName } from '../util';
 
-export const MenuFooter = ({ object }: { object: AnyLiveObject<any> }) => {
+export const MenuFooter = ({ object }: { object: Obj.Any }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const space = getSpace(object);

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { ForeignKey } from '@dxos/echo-schema';
-import { getMeta, type AnyLiveObject } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
@@ -18,13 +18,13 @@ const initialValues = {
 };
 
 export type AdvancedObjectSettingsProps = {
-  object: AnyLiveObject<any>;
+  object: Obj.Any;
 };
 
 export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const [adding, setAdding] = useState(false);
-  const keys = getMeta(object).keys;
+  const { keys } = Obj.getMeta(object);
 
   const handleNew = useCallback(() => setAdding(true), []);
   const handleCancel = useCallback(() => setAdding(false), []);
@@ -66,7 +66,15 @@ export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps)
         {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
       </div>
 
-      {adding && <Form schema={ForeignKey} values={initialValues} onSave={handleSave} onCancel={handleCancel} />}
+      {adding && (
+        <Form
+          outerSpacing={false}
+          schema={ForeignKey}
+          values={initialValues}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
+      )}
     </>
   );
 };

package/src/components/ObjectSettings/BaseObjectSettings.tsx

@@ -4,15 +4,14 @@
 
 import React, { type PropsWithChildren, useRef } from 'react';
 
-import { type AnyLiveObject } from '@dxos/react-client/echo';
+import { type Obj } from '@dxos/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: AnyLiveObject<any>;
+    object: Obj.Any;
   }>
 >;
 
@@ -24,15 +23,16 @@ export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectS
   //  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 ?? ''}
+          // TODO(burdon): Use annotation to get the name field.
+          value={(object as any).name ?? ''}
           onChange={(event) => {
-            object.name = event.target.value;
+            (object as any).name = event.target.value;
           }}
           onKeyDown={(event) => {
             if (event.key === 'Enter') {
@@ -42,6 +42,6 @@ export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectS
         />
       </Input.Root>
       {children}
-    </form>
+    </>
   );
 };

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -5,14 +5,14 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type AnyLiveObject } from '@dxos/react-client/echo';
+import { type Obj } from '@dxos/echo';
 import { Clipboard } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { BaseObjectSettings } from './BaseObjectSettings';
 
 export type ObjectSettingsContainerProps = {
-  object: AnyLiveObject<any>;
+  object: Obj.Any;
   role: string;
 };
 
@@ -21,8 +21,8 @@ export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContaine
 
   return (
     <Clipboard.Provider>
-      <StackItem.Content toolbar={false} role={role}>
-        <div className='flex flex-col overflow-y-auto divide-y divide-separator'>
+      <StackItem.Content toolbar={false}>
+        <div role='none' className='overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock'>
           <BaseObjectSettings object={object}>
             <Surface role='base-object-settings' data={data} />
           </BaseObjectSettings>

package/src/components/SchemaContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { useState, useEffect } from 'react';
 
-import { type EchoSchema } from '@dxos/echo-schema';
+import { type Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { controlItemClasses, ControlPage, ControlSection } from '@dxos/react-ui-form';
@@ -21,8 +21,8 @@ type SchemaPanelProps = { space: Space };
 /**
  * Subscribe to and retrieve all schemas from a space's schema registry.
  */
-export const useQuerySpaceSchemas = (space: Space): EchoSchema[] => {
-  const [schemas, setSchemas] = useState<EchoSchema[]>([]);
+export const useQuerySpaceSchemas = (space: Space): Type.Schema[] => {
+  const [schemas, setSchemas] = useState<Type.Schema[]>([]);
 
   useEffect(() => {
     const query = space.db.schemaRegistry.query();

package/src/components/SpacePluginSettings.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
-import { Input, toLocalizedString, useTranslation, List, ListItem, Button } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { Input, toLocalizedString, useTranslation, List, ListItem, IconButton } from '@dxos/react-ui';
+import { controlItemClasses, ControlPage, ControlSection, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
 import { SpaceAction, type SpaceSettingsProps } from '../types';
@@ -16,33 +16,38 @@ import { getSpaceDisplayName } from '../util';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const spaces = useSpaces({ all: settings.showHidden });
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   // TODO(wittjosiah): Migrate to new form container.
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('show hidden spaces label')}>
-        <Input.Switch checked={settings.showHidden} onCheckedChange={(checked) => (settings.showHidden = !!checked)} />
-      </DeprecatedFormInput>
-      <div role='none'>
-        <h2 className='text-xl my-4'>Space Settings</h2>
-        <List classNames='max-w-md mx-auto'>
+    <ControlPage>
+      <ControlSection title={t('space settings label')} description={t('space settings description')}>
+        <div className='pli-trimMd container-max-width'>
+          <DeprecatedFormInput label={t('show hidden spaces label')}>
+            <Input.Switch
+              checked={settings.showHidden}
+              onCheckedChange={(checked) => (settings.showHidden = !!checked)}
+            />
+          </DeprecatedFormInput>
+        </div>
+        <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
           {spaces.map((space) => (
-            <ListItem.Root key={space.id}>
-              <ListItem.Heading classNames='flex flex-col grow truncate mbe-2'>
+            <ListItem.Root key={space.id} classNames='is-full items-center'>
+              {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
+              <ListItem.Heading classNames='grow truncate !min-bs-0'>
                 {toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t)}
               </ListItem.Heading>
-              <ListItem.Endcap>
-                <Button onClick={() => dispatch(createIntent(SpaceAction.OpenSettings, { space }))}>
-                  {t('open space settings label')}
-                </Button>
-              </ListItem.Endcap>
+              <IconButton
+                icon='ph--faders--regular'
+                onClick={() => dispatch(createIntent(SpaceAction.OpenSettings, { space }))}
+                label={t('open space settings label')}
+              />
             </ListItem.Root>
           ))}
         </List>
-      </div>
-    </DeprecatedFormContainer>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/SpacePresence.tsx

@@ -7,7 +7,7 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
-import { type Expando } from '@dxos/echo-schema';
+import { type Type } from '@dxos/echo';
 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';
@@ -42,7 +42,7 @@ const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 // TODO(wittjosiah): Factor out?
 const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
 
-export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?: PublicKey }) => {
+export const SpacePresence = ({ object, spaceKey }: { object: Type.Expando; spaceKey?: PublicKey }) => {
   // TODO(wittjosiah): Doesn't need to be mutable but readonly type messes with ComplexMap.
   const spaceState = useCapability(SpaceCapabilities.MutableState);
   const client = useClient();
@@ -149,19 +149,26 @@ export const FullPresence = (props: MemberPresenceProps) => {
           <Popover.Portal>
             <Popover.Content side='bottom'>
               <Popover.Arrow />
-              <List classNames='max-h-56 overflow-y-auto'>
-                {members.map((member) => (
-                  <ListItem.Root
-                    key={member.identity.identityKey.toHex()}
-                    classNames='flex gap-2 items-center cursor-pointer mbe-2'
-                    onClick={() => onMemberClick?.(member)}
-                    data-testid='identity-list-item'
-                  >
-                    {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                    <PresenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
-                  </ListItem.Root>
-                ))}
-              </List>
+              <Popover.Viewport classNames='max-bs-56'>
+                <List>
+                  {members.map((member) => (
+                    <ListItem.Root
+                      key={member.identity.identityKey.toHex()}
+                      classNames='flex gap-2 items-center cursor-pointer mbe-2'
+                      onClick={() => onMemberClick?.(member)}
+                      data-testid='identity-list-item'
+                    >
+                      {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
+                      <PresenceAvatar
+                        identity={member.identity}
+                        size={size}
+                        showName
+                        match={member.currentlyAttended}
+                      />
+                    </ListItem.Root>
+                  ))}
+                </List>
+              </Popover.Viewport>
             </Popover.Content>
           </Popover.Portal>
         </Popover.Root>

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -174,7 +174,8 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
             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'
+            outerSpacing={false}
+            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
           />
         </ControlSection>
       </ControlPage>

package/src/events.ts

@@ -10,9 +10,5 @@ export namespace SpaceEvents {
   export const StateReady = Events.createStateEvent(`${SPACE_PLUGIN}/event/state-ready`);
   export const SetupSettingsPanel = defineEvent(`${SPACE_PLUGIN}/event/setup-settings-panel`);
   export const DefaultSpaceReady = defineEvent(`${SPACE_PLUGIN}/event/default-space-ready`);
-}
-
-// TODO(wittjosiah): Factor out.
-export namespace ThreadEvents {
-  export const SetupThread = defineEvent(`${SPACE_PLUGIN}/event/setup-thread`);
+  export const SpaceCreated = defineEvent(`${SPACE_PLUGIN}/event/space-created`);
 }