@dxos/react-ui-form 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

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

@@ -1,7 +1,9 @@
 import React, { type PropsWithChildren } from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
-export declare const TestPanel: ({ classNames, children }: ThemedClassName<PropsWithChildren>) => React.JSX.Element;
 export declare const TestLayout: ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{
     json?: any;
 }>>) => React.JSX.Element;
+export declare const TestPanel: ({ classNames, children }: ThemedClassName<PropsWithChildren>) => React.JSX.Element;
+export declare const VIEW_EDITOR_DEBUG_SYMBOL: unique symbol;
+export declare const FIELD_EDITOR_DEBUG_SYMBOL: unique symbol;
 //# sourceMappingURL=testing.d.ts.map

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.672df60",
+  "version": "0.8.3-staging.0fa589b",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,23 +29,25 @@
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.3-main.672df60",
-    "@dxos/debug": "0.8.3-main.672df60",
-    "@dxos/echo-db": "0.8.3-main.672df60",
-    "@dxos/invariant": "0.8.3-main.672df60",
-    "@dxos/effect": "0.8.3-main.672df60",
-    "@dxos/keys": "0.8.3-main.672df60",
-    "@dxos/echo-schema": "0.8.3-main.672df60",
-    "@dxos/lit-ui": "0.8.3-main.672df60",
-    "@dxos/live-object": "0.8.3-main.672df60",
-    "@dxos/log": "0.8.3-main.672df60",
-    "@dxos/react-client": "0.8.3-main.672df60",
-    "@dxos/react-ui-list": "0.8.3-main.672df60",
-    "@dxos/react-ui-pickers": "0.8.3-main.672df60",
-    "@dxos/react-ui-tag-picker": "0.8.3-main.672df60",
-    "@dxos/react-ui-types": "0.8.3-main.672df60",
-    "@dxos/schema": "0.8.3-main.672df60",
-    "@dxos/util": "0.8.3-main.672df60"
+    "@dxos/debug": "0.8.3-staging.0fa589b",
+    "@dxos/echo-db": "0.8.3-staging.0fa589b",
+    "@dxos/async": "0.8.3-staging.0fa589b",
+    "@dxos/echo": "0.8.3-staging.0fa589b",
+    "@dxos/echo-schema": "0.8.3-staging.0fa589b",
+    "@dxos/effect": "0.8.3-staging.0fa589b",
+    "@dxos/invariant": "0.8.3-staging.0fa589b",
+    "@dxos/keys": "0.8.3-staging.0fa589b",
+    "@dxos/lit-ui": "0.8.3-staging.0fa589b",
+    "@dxos/live-object": "0.8.3-staging.0fa589b",
+    "@dxos/log": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-pickers": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-list": "0.8.3-staging.0fa589b",
+    "@dxos/react-client": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-stack": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-tag-picker": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-types": "0.8.3-staging.0fa589b",
+    "@dxos/schema": "0.8.3-staging.0fa589b",
+    "@dxos/util": "0.8.3-staging.0fa589b"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -57,20 +59,20 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3-main.672df60",
-    "@dxos/random": "0.8.3-main.672df60",
-    "@dxos/react-ui": "0.8.3-main.672df60",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3-main.672df60",
-    "@dxos/storybook-utils": "0.8.3-main.672df60",
-    "@dxos/react-ui-theme": "0.8.3-main.672df60"
+    "@dxos/echo-signals": "0.8.3-staging.0fa589b",
+    "@dxos/random": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-syntax-highlighter": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
+    "@dxos/storybook-utils": "0.8.3-staging.0fa589b"
   },
   "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.672df60",
-    "@dxos/react-ui-theme": "0.8.3-main.672df60"
+    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
+    "@dxos/react-ui": "0.8.3-staging.0fa589b"
   },
   "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

@@ -5,7 +5,7 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useMemo, useEffect } from 'react';
 
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { log } from '@dxos/log';
@@ -15,19 +15,39 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { FieldEditor, type FieldEditorProps } from './FieldEditor';
 import translations from '../../translations';
-import { TestLayout, TestPanel } from '../testing';
+import { TestLayout, TestPanel, FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
+
+// Type definition for debug objects exposed to tests.
+export type FieldEditorDebugObjects = {
+  props: FieldEditorProps;
+  projection: ViewProjection;
+};
 
 type StoryProps = FieldEditorProps;
 
 const DefaultStory = (props: FieldEditorProps) => {
+  const projection = useMemo(() => new ViewProjection(createEchoSchema(TestSchema).jsonSchema, testView), []);
   const handleComplete: FieldEditorProps['onSave'] = () => {
     log.info('onClose', { props });
   };
 
+  // Expose objects on window for test access.
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] = { props, projection } satisfies FieldEditorDebugObjects;
+    }
+  }, [props, projection]);
+
+  // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
+  const json = useMemo(
+    () => JSON.parse(JSON.stringify({ props, projection })),
+    [JSON.stringify(props), JSON.stringify(projection)],
+  );
+
   return (
-    <TestLayout json={{ props }}>
+    <TestLayout json={json}>
       <TestPanel>
-        <FieldEditor {...props} onSave={handleComplete} />
+        <FieldEditor {...props} projection={projection} onSave={handleComplete} />
       </TestPanel>
     </TestLayout>
   );
@@ -49,8 +69,8 @@ type Story = StoryObj<StoryProps>;
 
 export const Default: Story = {
   args: {
-    projection: new ViewProjection(createEchoSchema(TestSchema).jsonSchema, testView),
     view: testView,
     field: testView.fields[0],
   },
+  parameters: { controls: { disabled: true } },
 };

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

@@ -6,10 +6,22 @@ import { composeStories } from '@storybook/react';
 import { screen, cleanup, fireEvent, act } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
+import { ViewProjection } from '@dxos/schema';
+
 import * as stories from './FieldEditor.stories';
+import { type FieldEditorDebugObjects } from './FieldEditor.stories';
+import { FIELD_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
+const getFieldEditorDebugObjects = (): FieldEditorDebugObjects => {
+  const debugObjects = (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] as FieldEditorDebugObjects;
+  expect(debugObjects).toBeDefined();
+  expect(debugObjects.props).toBeInstanceOf(Object); // Props object
+  expect(debugObjects.projection).toBeInstanceOf(ViewProjection);
+  return debugObjects;
+};
+
 describe('FieldEditor', () => {
   afterEach(() => {
     cleanup();
@@ -21,12 +33,8 @@ describe('FieldEditor', () => {
     expect(screen.getByText('Type format')).toBeInTheDocument();
     expect(screen.getByText('String')).toBeInTheDocument();
 
-    {
-      const debug = JSON.parse(screen.getByTestId('debug').textContent!);
-      const name = debug.props.projection._schema.properties.name;
-      expect(name.type).toBe('string');
-      expect(name.description).toBe('Full name.');
-    }
+    // Verify the initial field shows as String type
+    expect(screen.getByText('String')).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole('combobox'));
     const options = screen.getAllByRole('option');
@@ -38,12 +46,12 @@ describe('FieldEditor', () => {
       fireEvent.click(screen.getByTestId('save-button'));
     });
 
-    {
-      const debug = JSON.parse(screen.getByTestId('debug').textContent!);
-      const name = debug.props.projection._schema.properties.name;
-      expect(name.type).toBe('number');
-      expect(name.format).toBe('number');
-      expect(name.description).toBe('Full name.');
-    }
+    // Access the live objects directly from window using symbol.
+    const debugObjects = getFieldEditorDebugObjects();
+
+    const name = debugObjects.projection.schema.properties!.name;
+    expect(name.type).toBe('number');
+    expect(name.format).toBe('number');
+    expect(name.description).toBe('Full name.');
   });
 });

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,14 +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 { 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>[];
 
@@ -26,53 +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;
-    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,
-  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(() => {
@@ -92,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('flex flex-col gap-4', 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>
   );