@dxos/react-ui-form 0.8.3-main.7f5a14c → 0.8.3

package/dist/types/src/components/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/components/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,eAAO,MAAM,SAAS,GAAI,0BAA0B,eAAe,CAAC,iBAAiB,CAAC,sBAErF,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gCAAgC,eAAe,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC,sBAK5G,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/components/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,eAAO,MAAM,UAAU,GAAI,gCAAgC,eAAe,CAAC,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC,sBAK5G,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0BAA0B,eAAe,CAAC,iBAAiB,CAAC,sBAErF,CAAC;AAGF,eAAO,MAAM,wBAAwB,eAA4B,CAAC;AAClE,eAAO,MAAM,yBAAyB,eAA6B,CAAC"}

package/dist/types/src/translations.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
             'format date-time': string;
             'format did': string;
             'format duration': string;
+            'format dxn': string;
             'format email': string;
             'format formula': string;
             'format hostname': string;
@@ -35,12 +36,14 @@ declare const _default: {
             'format regex': string;
             'format string': string;
             'format single-select': string;
+            'format multi-select': string;
             'format text': string;
             'format time': string;
             'format timestamp': string;
             'format user': string;
             'format number': string;
             'format uri': string;
+            'format url': string;
             'format uuid': string;
             'placeholder latitude': string;
             'placeholder longitude': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE9C,wBAoEE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE9C,wBAuEE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.3-main.7f5a14c",
+  "version": "0.8.3",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,24 +29,25 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.3-main.7f5a14c",
-    "@dxos/echo-db": "0.8.3-main.7f5a14c",
-    "@dxos/debug": "0.8.3-main.7f5a14c",
-    "@dxos/echo-schema": "0.8.3-main.7f5a14c",
-    "@dxos/keys": "0.8.3-main.7f5a14c",
-    "@dxos/effect": "0.8.3-main.7f5a14c",
-    "@dxos/lit-ui": "0.8.3-main.7f5a14c",
-    "@dxos/invariant": "0.8.3-main.7f5a14c",
-    "@dxos/log": "0.8.3-main.7f5a14c",
-    "@dxos/live-object": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-list": "0.8.3-main.7f5a14c",
-    "@dxos/react-client": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-stack": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-tag-picker": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-pickers": "0.8.3-main.7f5a14c",
-    "@dxos/util": "0.8.3-main.7f5a14c",
-    "@dxos/schema": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-types": "0.8.3-main.7f5a14c"
+    "@dxos/debug": "0.8.3",
+    "@dxos/echo": "0.8.3",
+    "@dxos/effect": "0.8.3",
+    "@dxos/echo-db": "0.8.3",
+    "@dxos/async": "0.8.3",
+    "@dxos/invariant": "0.8.3",
+    "@dxos/echo-schema": "0.8.3",
+    "@dxos/keys": "0.8.3",
+    "@dxos/lit-ui": "0.8.3",
+    "@dxos/live-object": "0.8.3",
+    "@dxos/log": "0.8.3",
+    "@dxos/react-client": "0.8.3",
+    "@dxos/react-ui-list": "0.8.3",
+    "@dxos/react-ui-pickers": "0.8.3",
+    "@dxos/react-ui-stack": "0.8.3",
+    "@dxos/react-ui-tag-picker": "0.8.3",
+    "@dxos/react-ui-types": "0.8.3",
+    "@dxos/util": "0.8.3",
+    "@dxos/schema": "0.8.3"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -58,20 +59,20 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3-main.7f5a14c",
-    "@dxos/random": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3-main.7f5a14c",
-    "@dxos/storybook-utils": "0.8.3-main.7f5a14c"
+    "@dxos/echo-signals": "0.8.3",
+    "@dxos/random": "0.8.3",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/react-ui-syntax-highlighter": "0.8.3",
+    "@dxos/react-ui-theme": "0.8.3",
+    "@dxos/storybook-utils": "0.8.3"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c"
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/react-ui-theme": "0.8.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -5,16 +5,25 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
 
+import { StackItem } from '@dxos/react-ui-stack';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ControlSection, type ControlSectionProps } from './ControlSection';
+import { ControlPage, ControlSection, type ControlSectionProps } from './ControlSection';
 import translations from '../../translations';
 
 const meta: Meta<ControlSectionProps> = {
   title: 'ui/react-ui-form/ControlSection',
   component: ControlSection,
-  decorators: [withLayout(), withTheme],
+  render: (args) => (
+    <StackItem.Content classNames='w-[40rem]'>
+      <ControlPage>
+        <ControlSection {...args} />
+      </ControlPage>
+    </StackItem.Content>
+  ),
+  decorators: [withLayout({ fullscreen: true, classNames: 'justify-center' }), withTheme],
   parameters: {
     translations,
   },
@@ -25,5 +34,8 @@ export default meta;
 type Story = StoryObj<ControlSectionProps>;
 
 export const Default: Story = {
-  args: {},
+  args: {
+    title: 'Control Section',
+    description: 'This is a control section',
+  },
 };

package/src/components/ControlSection/ControlSection.tsx

@@ -7,8 +7,8 @@ import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 're
 import {
   Button,
   type ButtonProps,
-  type Label,
   Input,
+  type Label,
   type ThemedClassName,
   toLocalizedString,
   useTranslation,
@@ -21,7 +21,7 @@ export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
   return (
-    <div role='none' className={mx('pli-2', classNames)} {...props}>
+    <div role='none' className={mx('pli-cardSpacingInline', classNames)} {...props}>
       {children}
     </div>
   );
@@ -45,9 +45,11 @@ export const ControlSectionHeading = ({ title, description }: Omit<ControlSectio
   const { t } = useTranslation(translationKey);
   return (
     <>
-      <h2 className='pli-4 container-max-width text-xl mbs-6 mbe-4'>{toLocalizedString(title, t)}</h2>
+      <h2 className='pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd'>{toLocalizedString(title, t)}</h2>
       {description && (
-        <p className='pli-4 mlb-4 container-max-width text-description'>{toLocalizedString(description, t)}</p>
+        <p className='pli-trimMd mlb-trimMd container-max-width text-description'>
+          {toLocalizedString(description, t)}
+        </p>
       )}
     </>
   );
@@ -62,7 +64,7 @@ export type ControlGroupProps = ThemedClassName<PropsWithChildren<{}>>;
 export const ControlGroup = ({ children, classNames }: ControlGroupProps) => (
   <div
     role='none'
-    className={mx('group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4', classNames)}
+    className={mx('group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd', classNames)}
   >
     {children}
   </div>
@@ -71,7 +73,7 @@ export const ControlGroup = ({ children, classNames }: ControlGroupProps) => (
 export const ControlFrame = ({ children }: ControlGroupProps) => (
   <div
     role='none'
-    className='p-4 border border-separator rounded-lg container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-2 md:gap-8'
+    className='p-trimMd container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd border border-separator rounded-md'
   >
     {children}
   </div>
@@ -83,10 +85,10 @@ export type ControlItemProps = PropsWithChildren<{
 }>;
 
 export const controlItemClasses =
-  'p-4 border border-separator rounded-lg container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-2';
+  'pli-trimMd plb-trimMd container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-trimSm border border-separator rounded-md *:first:!mbs-0 *:last:!mbe-0';
 
 const controlItemTitleClasses = 'text-lg font-normal';
-const controlItemDescriptionClasses = 'text-base mlb-2 md:mbe-0 text-description';
+const controlItemDescriptionClasses = 'text-base mlb-trimSm md:mbe-0 text-description';
 
 export const ControlItem = ({ title, description, children }: ControlItemProps) => {
   const { t } = useTranslation(translationKey);
@@ -130,7 +132,7 @@ export const ControlFrameItem = ({ title, description, children }: ControlItemPr
   return (
     <div role='group' className='min-is-0'>
       <h3 className='text-lg mbe-2'>{toLocalizedString(title, t)}</h3>
-      {description && <p className='mlb-2 md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
+      {description && <p className='mlb-trimSm md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
       {children}
     </div>
   );

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -15,10 +15,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { FieldEditor, type FieldEditorProps } from './FieldEditor';
 import translations from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
-
-// Symbol for accessing debug objects in tests.
-export const FIELD_EDITOR_DEBUG_SYMBOL = Symbol('fieldEditorDebug');
+import { TestLayout, TestPanel, FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 // Type definition for debug objects exposed to tests.
 export type FieldEditorDebugObjects = {

package/src/components/FieldEditor/FieldEditor.test.tsx

@@ -9,7 +9,8 @@ import { afterEach, describe, expect, test } from 'vitest';
 import { ViewProjection } from '@dxos/schema';
 
 import * as stories from './FieldEditor.stories';
-import { FIELD_EDITOR_DEBUG_SYMBOL, type FieldEditorDebugObjects } from './FieldEditor.stories';
+import { type FieldEditorDebugObjects } from './FieldEditor.stories';
+import { FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 

package/src/components/FieldEditor/FieldEditor.tsx

@@ -29,12 +29,20 @@ export type FieldEditorProps = {
   registry?: SchemaRegistry;
   onSave: () => void;
   onCancel?: () => void;
-};
+} & Pick<FormProps<any>, 'outerSpacing'>;
 
 /**
  * Displays a Form representing the metadata for a given `Field` and `View`.
  */
-export const FieldEditor = ({ view, projection, field, registry, onSave, onCancel }: FieldEditorProps) => {
+export const FieldEditor = ({
+  view,
+  projection,
+  field,
+  registry,
+  onSave,
+  onCancel,
+  outerSpacing,
+}: FieldEditorProps) => {
   const { t } = useTranslation(translationKey);
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
@@ -189,6 +197,7 @@ export const FieldEditor = ({ view, projection, field, registry, onSave, onCance
       onSave={handleSave}
       onCancel={handleCancel}
       Custom={custom}
+      outerSpacing={outerSpacing}
     />
   );
 };

package/src/components/Form/ArrayField.tsx

@@ -69,7 +69,7 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
 
   return readonly && values.length < 1 ? null : (
     <>
-      <InputHeader>{label}</InputHeader>
+      <InputHeader readonly label={label} />
       <div
         role='none'
         className={

package/src/components/Form/Defaults.tsx

@@ -26,11 +26,7 @@ export const TextInput = ({
     <p>{getValue() ?? ''}</p>
   ) : (
     <Input.Root validationValence={status}>
-      {!inputOnly && (
-        <InputHeader error={error}>
-          <Input.Label>{label}</Input.Label>
-        </InputHeader>
-      )}
+      {!inputOnly && <InputHeader error={error} label={label} />}
       {disabled ? (
         <p>{getValue() ?? ''}</p>
       ) : (
@@ -64,11 +60,7 @@ export const NumberInput = ({
     <p>{getValue() ?? ''}</p>
   ) : (
     <Input.Root validationValence={status}>
-      {!inputOnly && (
-        <InputHeader error={error}>
-          <Input.Label>{label}</Input.Label>
-        </InputHeader>
-      )}
+      {!inputOnly && <InputHeader error={error} label={label} />}
       {disabled ? (
         <p>{getValue() ?? ''}</p>
       ) : (
@@ -93,11 +85,7 @@ export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onVa
 
   return (
     <Input.Root validationValence={status}>
-      {!inputOnly && (
-        <InputHeader error={error}>
-          <Input.Label>{label}</Input.Label>
-        </InputHeader>
-      )}
+      {!inputOnly && <InputHeader error={error} label={label} />}
       {disabled ? (
         <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
       ) : (
@@ -130,11 +118,7 @@ export const SelectInput = ({
 
   return disabled && !value ? null : (
     <Input.Root validationValence={status}>
-      {!inputOnly && (
-        <InputHeader error={error}>
-          <Input.Label>{label}</Input.Label>
-        </InputHeader>
-      )}
+      {!inputOnly && <InputHeader error={error} label={label} />}
       {disabled ? (
         <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
       ) : (
@@ -197,11 +181,7 @@ export const MarkdownInput = ({
 
   return (
     <Input.Root validationValence={status}>
-      {!inputOnly && (
-        <InputHeader error={error}>
-          <Input.Label>{label}</Input.Label>
-        </InputHeader>
-      )}
+      {!inputOnly && <InputHeader error={error} label={label} />}
       {disabled ? (
         <p>{getValue() ?? ''}</p>
       ) : (

package/src/components/Form/Form.stories.tsx

@@ -13,7 +13,7 @@ import { type BaseObject, Expando, Format, getObjectDXN, Ref, type TypeAnnotatio
 import { live } from '@dxos/live-object';
 import { withSurfaceVariantsLayout } from '@dxos/react-ui/testing';
 import { Testing } from '@dxos/schema/testing';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SelectInput } from './Defaults';
 import { Form, type FormProps } from './Form';
@@ -66,9 +66,9 @@ const DebugStory = <T extends BaseObject>({ schema, values: initialValues, ...pr
 
 const meta: Meta<StoryProps<any>> = {
   title: 'ui/react-ui-form/Form',
-  component: Form,
+  component: Form<any>,
   render: DebugStory,
-  decorators: [withTheme],
+  decorators: [withLayout({ fullscreen: true }), withTheme],
   parameters: {
     translations,
   },
@@ -100,7 +100,7 @@ export const Default: Story<TestType> = {
   },
 };
 
-export const Organization: Story<Testing.Organization> = {
+export const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
   args: {
     schema: Testing.OrganizationSchema,
     values: {
@@ -111,7 +111,7 @@ export const Organization: Story<Testing.Organization> = {
   },
 };
 
-export const OrganizationAutoSave: Story<Testing.Organization> = {
+export const OrganizationAutoSave: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>> = {
   args: {
     schema: Testing.OrganizationSchema,
     values: {

package/src/components/Form/Form.tsx

@@ -7,15 +7,14 @@ import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
 
 import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { cardSpacing } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
+import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
 import { type SchemaProperty } from '@dxos/schema';
 
-import { FormActions } from './FormActions';
-import { FormFields } from './FormContent';
+import { FormActions, type FormOuterSpacing } from './FormActions';
+import { FormFields, type FormFieldsProps } from './FormContent';
 import { FormProvider } from './FormContext';
 import { type InputProps, type InputComponent } from './Input';
-import { type FormOptions, type QueryRefOptions } from '../../hooks';
+import { type FormOptions } from '../../hooks';
 
 export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
@@ -27,55 +26,39 @@ export type ComponentLookup = (args: {
 
 export type CustomInputMap = Partial<Record<string, InputComponent>>;
 
-export type FormProps<T extends BaseObject> = ThemedClassName<
-  {
-    values: Partial<T>;
-
-    /** Path to the current object from the root. Used with nested forms. */
-    path?: string[];
-
-    // TODO(burdon): Autofocus first input.
-    autoFocus?: boolean;
-    readonly?: boolean;
-    // TODO(burdon): Change to JsonPath includes/excludes.
-    filter?: PropsFilter<T>;
-    sort?: PropertyKey<T>[];
-    autoSave?: boolean;
-    flush?: boolean;
-    testId?: string;
-    onCancel?: () => void;
-    onQueryRefOptions?: QueryRefOptions;
-    lookupComponent?: ComponentLookup;
-    /**
-     * Map of custom renderers for specific properties.
-     * Prefer lookupComponent for plugin specific input surfaces.
-     */
-    Custom?: CustomInputMap;
-  } & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'>
->;
+export type FormProps<T extends BaseObject> = ThemedClassName<{
+  values: Partial<T>;
+  // TODO(burdon): Autofocus first input.
+  autoFocus?: boolean;
+  // TODO(burdon): Change to JsonPath includes/excludes.
+  filter?: PropsFilter<T>;
+  sort?: PropertyKey<T>[];
+  autoSave?: boolean;
+  outerSpacing?: FormOuterSpacing;
+  onCancel?: () => void;
+}> &
+  Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'> &
+  FormFieldsProps;
 
 export const Form = <T extends BaseObject>({
   classNames,
-  schema,
+  testId,
   values: initialValues,
-  path = [],
   autoFocus,
   readonly,
-  filter,
-  sort,
   autoSave,
-  flush,
-  testId,
+  outerSpacing = true,
+  onCancel,
+  schema,
   onValuesChanged,
   onValidate,
   onSave,
-  onCancel,
-  onQueryRefOptions,
-  lookupComponent,
-  Custom,
+  ...props
 }: FormProps<T>) => {
   const formRef = useRef<HTMLDivElement>(null);
-  const onValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+
+  // TODO(burdon): Rename.
+  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
 
   // Focus the first input element within this form.
   useEffect(() => {
@@ -95,21 +78,30 @@ export const Form = <T extends BaseObject>({
       initialValues={initialValues}
       onValuesChanged={onValuesChanged}
       onValidate={onValidate}
-      onValid={onValid}
+      onValid={handleValid}
       onSave={onSave}
     >
-      <div ref={formRef} role='none' className={mx(!flush && cardSpacing, classNames)} data-testid={testId}>
+      <div role='none' className='contents' data-testid={testId}>
         <FormFields
-          schema={schema}
-          path={path}
+          {...props}
+          ref={formRef}
+          classNames={[
+            outerSpacing === 'blockStart-0'
+              ? 'pli-cardSpacingInline mbe-cardSpacingBlock [&>.mbs-inputSpacingBlock:first-child]:!mbs-0'
+              : outerSpacing === 'scroll-fields'
+                ? 'pli-cardSpacingInline pbe-cardSpacingBlock'
+                : outerSpacing
+                  ? cardSpacing
+                  : false,
+            outerSpacing === 'scroll-fields' && cardDialogOverflow,
+            classNames,
+          ]}
           readonly={readonly}
-          filter={filter}
-          sort={sort}
-          onQueryRefOptions={onQueryRefOptions}
-          lookupComponent={lookupComponent}
-          Custom={Custom}
+          schema={schema}
         />
-        {(onCancel || onSave) && !autoSave && <FormActions onCancel={onCancel} readonly={readonly} />}
+        {(onCancel || onSave) && !autoSave && (
+          <FormActions readonly={readonly} onCancel={onCancel} outerSpacing={outerSpacing} />
+        )}
       </div>
     </FormProvider>
   );

package/src/components/Form/FormActions.tsx

@@ -5,21 +5,36 @@
 import React from 'react';
 
 import { IconButton, useTranslation } from '@dxos/react-ui';
+import { cardSpacing } from '@dxos/react-ui-stack';
+import { mx } from '@dxos/react-ui-theme';
 
 import { useFormContext } from './FormContext';
 import { translationKey } from '../../translations';
 
+export type FormOuterSpacing = boolean | 'blockStart-0' | 'scroll-fields';
+
 export type FormActionsProps = {
   readonly?: boolean;
   onCancel?: () => void;
+  outerSpacing?: FormOuterSpacing;
 };
 
-export const FormActions = ({ readonly, onCancel }: FormActionsProps) => {
+export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormActionsProps) => {
   const { t } = useTranslation(translationKey);
   const { canSave, handleSave } = useFormContext();
 
   return (
-    <div role='none' className='flex [&_button]:grow gap-1 mlb-3 last:mbe-0 first:mbs-0'>
+    <div
+      role='none'
+      className={mx(
+        outerSpacing === 'scroll-fields'
+          ? 'pli-cardSpacingInline mbe-cardSpacingBlock'
+          : outerSpacing
+            ? cardSpacing
+            : 'mbs-cardSpacingBlock',
+        'flex [&_button]:grow gap-1 first:mbs-0',
+      )}
+    >
       {onCancel && !readonly && (
         <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
       )}