@dxos/plugin-space 0.8.4-main.3f58842 → 0.8.4-main.5ea62a8

package/src/capabilities/state.ts

@@ -4,15 +4,16 @@
 
 import { effect } from '@preact/signals-core';
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { PublicKey } from '@dxos/keys';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { ComplexMap } from '@dxos/util';
 
-import { SpaceCapabilities } from './capabilities';
 import { SPACE_PLUGIN } from '../meta';
 import { type PluginState } from '../types';
 
+import { SpaceCapabilities } from './capabilities';
+
 export default (context: PluginContext) => {
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,

package/src/components/AwaitingObject.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher, useLayout } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher, useLayout } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
 import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -15,21 +15,22 @@ import { DataType } from '@dxos/schema';
 import { translations as shellTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
 import { translations } from '../../translations';
 
-const Story = (args: CreateObjectDialogProps) => {
+import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+
+const Story = (props: CreateObjectDialogProps) => {
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>
-        <CreateObjectDialog {...args} />
+        <CreateObjectDialog {...props} />
       </Dialog.Overlay>
     </Dialog.Root>
   );
 };
 
 // TODO(wittjosiah): Story should be for CreateObjectPanel.
-const meta: Meta<typeof CreateObjectDialog> = {
+const meta = {
   title: 'plugins/plugin-space/CreateObjectDialog',
   component: CreateObjectDialog,
   render: Story,
@@ -42,7 +43,7 @@ const meta: Meta<typeof CreateObjectDialog> = {
     translations: [...translations, ...shellTranslations],
   },
   args: {},
-};
+} satisfies Meta<typeof CreateObjectDialog>;
 
 export default meta;
 

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -17,20 +17,24 @@ import {
 import { Obj, Query, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { getSpace, isLiveObject, isSpace, type Space, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { type Space, getSpace, isLiveObject, isSpace, useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
 import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
 import { SpaceAction } from '../../types';
 
+import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
+
 export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
-export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'name'> & {
+export type CreateObjectDialogProps = Pick<
+  CreateObjectPanelProps,
+  'target' | 'views' | 'typename' | 'initialFormValues'
+> & {
   onCreateObject?: (object: Obj.Any) => void;
   shouldNavigate?: (object: Obj.Any) => boolean;
 };
@@ -38,7 +42,8 @@ export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 't
 export const CreateObjectDialog = ({
   target: initialTarget,
   typename: initialTypename,
-  name,
+  views,
+  initialFormValues,
   onCreateObject,
   shouldNavigate: _shouldNavigate,
 }: CreateObjectDialogProps) => {
@@ -98,7 +103,9 @@ export const CreateObjectDialog = ({
     <Dialog.Content classNames={cardDialogContent}>
       <div role='none' className={cardDialogHeader}>
         <Dialog.Title>
-          {t('create object dialog title', { object: t('typename label', { ns: typename, defaultValue: 'Item' }) })}
+          {t('create object dialog title', {
+            object: t('typename label', { ns: typename, defaultValue: views ? 'View' : 'Item' }),
+          })}
         </Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
@@ -111,8 +118,9 @@ export const CreateObjectDialog = ({
         forms={forms}
         spaces={spaces}
         target={target}
+        views={views}
         typename={typename}
-        name={name}
+        initialFormValues={initialFormValues}
         defaultSpaceId={client.spaces.default.id}
         resolve={resolve}
         onTargetChange={setTarget}

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,17 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Option } from 'effect';
 import React, { useCallback } from 'react';
 
 import { Type } from '@dxos/echo';
-import { getTypeAnnotation, type TypeAnnotation } from '@dxos/echo-schema';
-import { type SpaceId, type Space } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo-schema';
+import { type Space, type SpaceId } from '@dxos/react-client/echo';
+import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
 import { type DataType } from '@dxos/schema';
-import { isNonNullable, type MaybePromise } from '@dxos/util';
+import { type MaybePromise, isNonNullable } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
@@ -24,7 +25,8 @@ export type CreateObjectPanelProps = {
   spaces: Space[];
   typename?: string;
   target?: Space | DataType.Collection;
-  name?: string;
+  views?: boolean;
+  initialFormValues?: Partial<BaseObject>;
   defaultSpaceId?: SpaceId;
   resolve?: (typename: string) => Record<string, any>;
   onTargetChange?: (target: Space) => void;
@@ -37,7 +39,8 @@ export const CreateObjectPanel = ({
   spaces,
   typename,
   target,
-  name: initialName,
+  views,
+  initialFormValues: _initialFormValues,
   defaultSpaceId,
   resolve,
   onTargetChange,
@@ -45,8 +48,16 @@ export const CreateObjectPanel = ({
   onCreateObject,
 }: CreateObjectPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
+  const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
   const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
   const options: TypeAnnotation[] = forms
+    .filter((form) => {
+      if (views == null) {
+        return true;
+      } else {
+        return views === ViewAnnotation.get(form.objectSchema).pipe(Option.getOrElse(() => false));
+      }
+    })
     .map((form) => getTypeAnnotation(form.objectSchema))
     .filter(isNonNullable)
     .sort((a, b) => {
@@ -88,7 +99,7 @@ export const CreateObjectPanel = ({
     <div role='none' className={cardDialogOverflow}>
       <Form
         autoFocus
-        values={{ name: initialName }}
+        values={initialFormValues}
         schema={form.formSchema}
         testId='create-object-form'
         onSave={handleCreateObject}

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -5,7 +5,7 @@
 import { Effect, type Schema } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, 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';

package/src/components/JoinDialog.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { Trigger } from '@dxos/async';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';

package/src/components/MembersContainer.stories.tsx

@@ -4,27 +4,52 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { MembersContainer } from './MembersContainer';
 import { translations } from '../translations';
 
-const meta: Meta = {
+import { MembersContainer } from './MembersContainer';
+
+const DefaultStory = () => {
+  const space = useSpace();
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <MembersContainer
+      space={space}
+      createInvitationUrl={(invitationCode) => `https://dxos.org/invite/${invitationCode}`}
+    />
+  );
+};
+
+const meta = {
   title: 'plugins/plugin-space/MembersContainer',
-  component: MembersContainer,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
+  component: MembersContainer as any,
+  render: render(DefaultStory),
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+    }),
+    withTheme,
+    withLayout(),
+  ],
   parameters: {
     layout: 'fullscreen',
     translations: [...translations, ...shellTranslations],
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof MembersContainer>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/MembersContainer.tsx

@@ -8,10 +8,10 @@ import { QR } from 'react-qr-rounded';
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
-import { fullyQualifiedId, useSpaceInvitations, type Space } from '@dxos/react-client/echo';
+import { type Space, fullyQualifiedId, useSpaceInvitations } from '@dxos/react-client/echo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
-import { ControlPage, ControlSection, ControlFrame, ControlFrameItem, ControlItemInput } from '@dxos/react-ui-form';
+import { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 import { DataType } from '@dxos/schema';
 import {
@@ -41,13 +41,12 @@ const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservab
   }
 };
 
-export const MembersContainer = ({
-  space,
-  createInvitationUrl,
-}: {
+export type MembersContainerProps = {
   space: Space;
   createInvitationUrl: (invitationCode: string) => string;
-}) => {
+};
+
+export const MembersContainer = ({ space, createInvitationUrl }: MembersContainerProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const config = useConfig();
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -168,7 +167,7 @@ export const MembersContainer = ({
               )}
             </ControlFrame>
             {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
-            <div className='justify-center gap-4 p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
+            <div className='justify-center p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
               <ControlItemInput title={t('space locked label')} description={t('space locked description')}>
                 <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
               </ControlItemInput>

package/src/components/ObjectDetailsPanel.tsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import { type JsonPath, setValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
-import { getSpace, Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
 import { Callout, useTranslation } from '@dxos/react-ui';
 import { useSelected } from '@dxos/react-ui-attention';
 import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -9,9 +9,10 @@ import { ForeignKey } from '@dxos/echo-schema';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { ForeignKeys } from './ForeignKeys';
 import { SPACE_PLUGIN } from '../../meta';
 
+import { ForeignKeys } from './ForeignKeys';
+
 const initialValues = {
   source: '',
   id: '',

package/src/components/PopoverRenameObject.tsx

@@ -4,7 +4,8 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
 import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { Button, Input, useTranslation } from '@dxos/react-ui';
@@ -13,24 +14,17 @@ import { SPACE_PLUGIN } from '../meta';
 
 export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
 
-export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
+export const PopoverRenameObject = ({ object }: { object: Live<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);
-  // TODO(wittjosiah): Use schema here.
-  const object = obj as any;
-  // TODO(burdon): Field should not be hardcoded field.
-  const [name, setName] = useState(object.name || object.title || '');
+  const [name, setName] = useState(Obj.getLabel(object));
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleDone = useCallback(() => {
     try {
-      object.name = name;
+      name && Obj.setLabel(object, name);
     } catch (err) {
-      try {
-        object.title = name;
-      } catch {
-        log.error('Failed to rename object', { err });
-      }
+      log.error('Failed to rename object', { err });
     }
     void dispatch(
       createIntent(LayoutAction.UpdatePopover, {

package/src/components/PopoverRenameSpace.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 

package/src/components/RecordMain.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { type JsonPath, setValue } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+
+export const RecordMain = ({ record }: { record: Obj.Any }) => {
+  const space = getSpace(record);
+  const schema = Obj.getSchema(record);
+  invariant(schema, 'Record has no schema.');
+
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const handleSave = useCallback(
+    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const id = values.id;
+      invariant(typeof id === 'string');
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        const value = values[path];
+        setValue(record, path, value);
+      }
+    },
+    [record],
+  );
+
+  return (
+    <div role='none' className='container-max-width flex flex-col p-2 gap-1 overflow-y-auto'>
+      <div key={record.id} className='border border-separator rounded'>
+        <Form autoSave schema={schema} values={record} onSave={handleSave} onQueryRefOptions={handleRefQueryLookup} />
+      </div>
+    </div>
+  );
+};
+
+export default RecordMain;

package/src/components/SchemaContainer.tsx

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 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';
+import { ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { SPACE_PLUGIN } from '../meta';

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, IconButton } from '@dxos/react-ui';
-import { controlItemClasses, ControlPage, ControlSection, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
 
 import { SPACE_PLUGIN } from '../meta';
 import { SpaceAction, type SpaceSettingsProps } from '../types';
@@ -20,18 +20,17 @@ export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps
   const spaces = useSpaces({ all: settings.showHidden });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  // TODO(wittjosiah): Migrate to new form container.
   return (
     <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')}>
+        <ControlGroup>
+          <ControlItemInput title={t('show hidden spaces label')}>
             <Input.Switch
               checked={settings.showHidden}
               onCheckedChange={(checked) => (settings.showHidden = !!checked)}
             />
-          </DeprecatedFormInput>
-        </div>
+          </ControlItemInput>
+        </ControlGroup>
         <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
           {spaces.map((space) => (
             <ListItem.Root key={space.id} classNames='is-full items-center'>

package/src/components/SpacePresence.stories.tsx

@@ -4,16 +4,17 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { IdentityDid, PublicKey } from '@dxos/keys';
 import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
 import { translations } from '../translations';
 
+import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
+
 const nViewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
     role: HaloSpaceMember.Role.ADMIN,
@@ -98,10 +99,12 @@ export const Small = () => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SpacePresence',
   decorators: [withTheme, withLayout()],
   parameters: { translations },
-};
+} satisfies Meta<typeof IdentityDid>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/components/SpacePresence.tsx

@@ -9,22 +9,22 @@ import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
 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 SpaceMember, fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import {
   Avatar,
   type AvatarContentProps,
+  type DxAvatar,
+  List,
+  ListItem,
+  Popover,
   type Size,
   type ThemedClassName,
   Tooltip,
-  Popover,
-  useTranslation,
-  List,
-  ListItem,
   useDefaultValue,
-  type DxAvatar,
+  useTranslation,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
+import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
 import { SpaceCapabilities } from '../capabilities';

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

@@ -10,19 +10,20 @@ import React from 'react';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
 import { translations } from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
+import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+
+const Story = (props: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
+      <SpaceSettingsContainer {...props} space={space!} />
     </div>
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SpaceSettingsContainer',
   component: SpaceSettingsContainer,
   render: Story,
@@ -31,8 +32,10 @@ const meta: Meta = {
     translations,
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof SpaceSettingsContainer>;
 
 export default meta;
 
+type Story = StoryObj<typeof meta>;
+
 export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,22 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
+import { Schema, pipe } from 'effect';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { SpaceState, type Space } from '@dxos/react-client/echo';
+import { type Space, SpaceState } from '@dxos/react-client/echo';
 import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
 import {
-  Form,
-  type InputComponent,
   ControlItem,
   ControlItemInput,
-  ControlSection,
   ControlPage,
+  ControlSection,
+  Form,
+  type InputComponent,
 } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { StackItem } from '@dxos/react-ui-stack';
@@ -162,7 +162,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto pli-2'>
+    <StackItem.Content classNames='block overflow-y-auto'>
       <ControlPage>
         <ControlSection
           title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
@@ -175,7 +175,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
             onSave={handleSave}
             Custom={customElements}
             outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
+            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
           />
         </ControlSection>
       </ControlPage>