@dxos/react-ui-form 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.d05539e30a",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -34,54 +34,59 @@
     "src"
   ],
   "dependencies": {
+    "@codemirror/lang-xml": "^6.1.0",
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
     "tabster": "^8.5.5",
-    "@dxos/async": "0.8.4-main.d05539e30a",
-    "@dxos/echo": "0.8.4-main.d05539e30a",
-    "@dxos/echo-db": "0.8.4-main.d05539e30a",
-    "@dxos/echo-atom": "0.8.4-main.d05539e30a",
-    "@dxos/keys": "0.8.4-main.d05539e30a",
-    "@dxos/echo-react": "0.8.4-main.d05539e30a",
-    "@dxos/lit-ui": "0.8.4-main.d05539e30a",
-    "@dxos/log": "0.8.4-main.d05539e30a",
-    "@dxos/react-client": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-editor": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-list": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-components": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-pickers": "0.8.4-main.d05539e30a",
-    "@dxos/schema": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-search": "0.8.4-main.d05539e30a",
-    "@dxos/types": "0.8.4-main.d05539e30a",
-    "@dxos/ui-editor": "0.8.4-main.d05539e30a",
-    "@dxos/util": "0.8.4-main.d05539e30a",
-    "@dxos/effect": "0.8.4-main.d05539e30a",
-    "@dxos/invariant": "0.8.4-main.d05539e30a"
+    "@dxos/async": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-db": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-atom": "0.8.4-main.d9fc60f731",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-protocol": "0.8.4-main.d9fc60f731",
+    "@dxos/echo-react": "0.8.4-main.d9fc60f731",
+    "@dxos/invariant": "0.8.4-main.d9fc60f731",
+    "@dxos/keys": "0.8.4-main.d9fc60f731",
+    "@dxos/effect": "0.8.4-main.d9fc60f731",
+    "@dxos/lit-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/react-client": "0.8.4-main.d9fc60f731",
+    "@dxos/log": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-components": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-editor": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-search": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-list": "0.8.4-main.d9fc60f731",
+    "@dxos/schema": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-editor": "0.8.4-main.d9fc60f731",
+    "@dxos/types": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-pickers": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.20.0",
+    "effect": "3.21.2",
     "fast-check": "^3.19.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^8.0.13",
-    "@dxos/random": "0.8.4-main.d05539e30a",
-    "@dxos/react-client": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.d05539e30a",
-    "@dxos/ui-theme": "0.8.4-main.d05539e30a",
-    "@dxos/storybook-utils": "0.8.4-main.d05539e30a"
+    "vite": "^8.0.14",
+    "@dxos/effect-proto": "0.8.4-main.d9fc60f731",
+    "@dxos/protocols": "0.8.4-main.d9fc60f731",
+    "@dxos/random": "0.8.4-main.d9fc60f731",
+    "@dxos/react-client": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-types": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
-    "effect": "3.20.0",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.d05539e30a",
-    "@dxos/react-ui": "0.8.4-main.d05539e30a"
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
-import { Filter, Query } from '@dxos/echo';
+import { Filter, Query, Type } from '@dxos/echo';
 import { createEchoSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -24,7 +24,7 @@ export type FieldEditorDebugObjects = {
 
 const useTestProjection = () => {
   return useMemo(() => {
-    const schema = createEchoSchema(Example);
+    const schema = createEchoSchema(Type.getSchema(Example));
     const view = ViewModel.make({
       name: 'Test',
       query: Query.select(Filter.type(Example)),

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

@@ -15,7 +15,10 @@ import { type FieldEditorDebugObjects } from './FieldEditor.stories';
 const { Default } = composeStories(stories);
 
 describe('FieldEditor', () => {
-  afterEach(() => {
+  afterEach(async () => {
+    // Flush pending React scheduler work before teardown to prevent
+    // "window is not defined" errors from setImmediate callbacks firing after happy-dom cleanup.
+    await act(async () => {});
     cleanup();
   });
 

package/src/components/FieldEditor/FieldEditor.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Obj, type SchemaRegistry, type View } from '@dxos/echo';
-import { type EchoSchema, Format, FormatEnums, formatToType } from '@dxos/echo/internal';
+import { Filter, Obj, type Registry, Type, type View } from '@dxos/echo';
+import { Format, FormatEnums, formatToType } from '@dxos/echo/internal';
 import { type SchemaProperty } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
@@ -24,7 +24,7 @@ import { Form, type FormFieldMap, type FormRootProps, SelectField, SelectOptionF
 export type FieldEditorProps = {
   projection: ProjectionModel;
   field: View.FieldType;
-  registry?: SchemaRegistry.SchemaRegistry;
+  registry?: Registry.Registry;
   view?: Obj.Unknown;
   onSave: () => void;
   onCancel?: () => void;
@@ -38,24 +38,26 @@ export const FieldEditor = ({ readonly, projection, field, registry, view, onSav
   const [props, setProps] = useState<PropertyType>(projection.getFieldProjection(field.id).props);
   useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
 
-  const [schemas, setSchemas] = useState<EchoSchema[]>([]);
+  const [schemas, setSchemas] = useState<Type.Type[]>([]);
   useAsyncEffect(async () => {
     if (!registry) {
       return;
     }
 
-    const subscription = registry.query().subscribe((query) => setSchemas(query.results), { fire: true });
+    const subscription = registry
+      .query(Filter.type(Type.Type))
+      .subscribe((query) => setSchemas(query.results), { fire: true });
 
     // TODO(dmaretskyi): This shouldn't be needed.
-    const schemas = await registry.query().run();
+    const schemas = await registry.query(Filter.type(Type.Type)).run();
     setSchemas(schemas);
 
     return () => subscription?.();
   }, [registry]);
 
-  const [referenceSchema, setReferenceSchema] = useState<EchoSchema>();
+  const [referenceSchema, setReferenceSchema] = useState<Type.Type>();
   useEffect(() => {
-    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+    setReferenceSchema(schemas.find((schema) => Type.getTypename(schema) === props?.referenceSchema));
   }, [schemas, props?.referenceSchema]);
 
   // TODO(burdon): Need to wrap otherwise throws error:
@@ -76,9 +78,12 @@ export const FieldEditor = ({ readonly, projection, field, registry, view, onSav
       ['referenceSchema' satisfies keyof PropertyType]: (props) => (
         <SelectField
           {...props}
-          options={schemas.map((schema) => ({
-            value: schema.typename,
-          }))}
+          options={schemas
+            .map((schema) => Type.getTypename(schema))
+            .filter((typename): typename is string => typename != null)
+            .map((typename) => ({
+              value: typename,
+            }))}
         />
       ),
       ['referencePath' satisfies keyof PropertyType]: (props) => (
@@ -86,7 +91,7 @@ export const FieldEditor = ({ readonly, projection, field, registry, view, onSav
           {...props}
           options={
             referenceSchema
-              ? getFormProperties(referenceSchema.ast)
+              ? getFormProperties(Type.getSchema(referenceSchema).ast)
                   .sort((a, b) => a.name.toString().localeCompare(b.name.toString()))
                   .map((p) => ({ value: p.name.toString() }))
               : []
@@ -112,8 +117,8 @@ export const FieldEditor = ({ readonly, projection, field, registry, view, onSav
       });
 
       setReferenceSchema((prev) => {
-        if (_props.referenceSchema !== prev?.typename) {
-          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+        if (_props.referenceSchema !== (prev ? Type.getTypename(prev) : undefined)) {
+          const newSchema = schemas.find((schema) => Type.getTypename(schema) === _props.referenceSchema);
           if (newSchema) {
             return newSchema;
           }

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

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { Annotation, Format, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { DXN, Annotation, Format, Obj, Ref, Tag, Type } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { log } from '@dxos/log';
 import { useSpaces } from '@dxos/react-client/echo';
@@ -21,14 +21,9 @@ import { type ExcludeId, Form, type FormRootProps, omitId } from './Form';
 
 const Organization = Schema.Struct({
   name: Schema.String.pipe(Schema.minLength(1)).annotations({ title: 'Full name' }),
-}).pipe(
-  Type.object({
-    typename: 'com.example.type.organization',
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('com.example.type.organization', '0.1.0')));
 
-export interface Organization extends Schema.Schema.Type<typeof Organization> {}
+export type Organization = Type.InstanceType<typeof Organization>;
 
 const Person = Schema.Struct({
   name: Schema.String.pipe(Schema.minLength(1)).annotations({ title: 'Full name' }),
@@ -51,6 +46,9 @@ const Person = Schema.Struct({
   status: Schema.optional(Schema.Literal('active', 'inactive').annotations({ title: 'Status' })),
   notes: Schema.optional(Format.Text.annotations({ title: 'Notes' })),
   location: Schema.optional(Format.GeoPoint.annotations({ title: 'Location' })),
+  birthday: Schema.optional(Format.DateOnly.annotations({ title: 'Birthday' })),
+  meetingAt: Schema.optional(Format.DateTime.annotations({ title: 'Next meeting' })),
+  reminderAt: Schema.optional(Format.TimeOnly.annotations({ title: 'Reminder time' })),
   tasks: Schema.optional(Schema.Array(Schema.String).annotations({ title: 'Tasks' })),
   locations: Schema.optional(Schema.Array(Format.GeoPoint).annotations({ title: 'Locations' })),
   identities: Schema.optional(
@@ -63,22 +61,15 @@ const Person = Schema.Struct({
       title: 'Identities',
     }),
   ),
-}).pipe(
-  Type.object({
-    typename: 'org.dxos.type.person', // TODO(burdon): Change all types to /schema
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('org.dxos.type.person', '0.1.0')));
 
-export interface Person extends Schema.Schema.Type<typeof Person> {}
+export type Person = Type.InstanceType<typeof Person>;
 
 type DefaultStoryProps<T extends AnyProperties> = {
   schema?: Schema.Schema<T>;
-  debug?: boolean;
 } & FormRootProps<T>;
 
 const DefaultStory = <T extends AnyProperties = AnyProperties>({
-  debug,
   schema,
   values: valuesProp,
   ...props
@@ -86,7 +77,6 @@ const DefaultStory = <T extends AnyProperties = AnyProperties>({
   const [values, setValues] = useState<Partial<T>>(valuesProp ?? {});
   const spaces = useSpaces();
   const space = spaces[0];
-
   const handleSave = useCallback<NonNullable<FormRootProps<T>['onSave']>>((values) => {
     log.info('save', { values, meta });
     setValues(values);
@@ -105,7 +95,6 @@ const DefaultStory = <T extends AnyProperties = AnyProperties>({
     <Tooltip.Provider>
       <TestLayout json={{ values, schema: schema?.ast }}>
         <Form.Root
-          debug={debug}
           schema={schema}
           defaultValues={values}
           db={space.db}
@@ -113,7 +102,7 @@ const DefaultStory = <T extends AnyProperties = AnyProperties>({
           onCancel={handleCancel}
           {...props}
         >
-          <Form.Viewport>
+          <Form.Viewport scroll>
             <Form.Content>
               <Form.Section label='Section' description='This is a section' />
               <Form.FieldSet />
@@ -155,36 +144,41 @@ export default meta;
 
 type Story<T extends AnyProperties> = StoryObj<DefaultStoryProps<T>>;
 
+const PersonSchema = Type.getSchema(Person);
+
 const values: Partial<Person> = {
   name: 'Alice',
   location: [40.7128, -74.006],
   tasks: ['task 1', 'task 2'],
+  birthday: '1990-05-12',
+  meetingAt: '2026-06-01T15:30:00.000Z',
+  reminderAt: '09:00:00',
 };
 
-export const Default: Story<ExcludeId<typeof Person>> = {
+export const Default: Story<ExcludeId<typeof PersonSchema>> = {
   args: {
-    schema: omitId(Person),
+    schema: omitId(PersonSchema),
     values,
     autoSave: true,
   },
 };
 
-export const Readonly: Story<ExcludeId<typeof Person>> = {
+export const Readonly: Story<ExcludeId<typeof PersonSchema>> = {
   args: {
-    schema: omitId(Person),
+    schema: omitId(PersonSchema),
     values,
     readonly: true,
   },
 };
 
-export const Static: Story<ExcludeId<typeof Person>> = {
+export const Static: Story<ExcludeId<typeof PersonSchema>> = {
   args: {
-    schema: omitId(Person),
+    schema: omitId(PersonSchema),
     values,
     layout: 'static',
   },
 };
 
-export const Empty: Story<ExcludeId<typeof Person>> = {
+export const Empty: Story<ExcludeId<typeof PersonSchema>> = {
   args: {},
 };

package/src/components/Form/Form.tsx

@@ -8,18 +8,22 @@ import * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 import React, { type PropsWithChildren, useEffect, useMemo, useRef } from 'react';
 
-import { Annotation as EchoAnnotation } from '@dxos/echo';
+import { Annotation as EchoAnnotation, Type } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import { createJsonPath, getValue as getValue$ } from '@dxos/effect';
 import {
+  Column,
+  type ColumnRootProps,
   IconButton,
   type IconButtonProps,
+  Input,
   ScrollArea,
   type ThemedClassName,
   useMergeRefs,
   useTranslation,
 } from '@dxos/react-ui';
-import { composable, composableProps, mx, withColumn } from '@dxos/ui-theme';
+import { composable, composableProps, withColumn } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '#translations';
 
@@ -35,15 +39,31 @@ import {
   FormFieldSet as NaturalFormFieldSet,
   type FormFieldSetProps as NaturalFormFieldSetProps,
 } from './FormFieldSet';
+import { FormTooltipsContext } from './FormTooltipsContext';
+import { FormLayout as NaturalFormLayout } from './Layout';
+import { type FormLayoutProps as NaturalFormLayoutProps } from './Layout/FormLayout';
 
 // TODO(burdon): Move styles to form.ts (as with ui-theme).
 
 // TODO(burdon): Reconcile with @dxos/echo.
-export type ExcludeId<S extends Schema.Schema.AnyNoContext> = Omit<Schema.Schema.Type<S>, 'id'>;
+export type ExcludeId<S extends Schema.Schema.AnyNoContext | Type.AnyEntity> = Omit<
+  S extends Type.AnyEntity
+    ? Type.InstanceType<S>
+    : S extends Schema.Schema.AnyNoContext
+      ? Schema.Schema.Type<S>
+      : never,
+  'id'
+>;
 
 // TODO(burdon): Move to @dxos/schema (re-export here).
-export const omitId = <S extends Schema.Schema.AnyNoContext>(schema: S): Schema.Schema<ExcludeId<S>, ExcludeId<S>> =>
-  schema.pipe(Schema.omit('id')) as any;
+export const omitId = <S extends Schema.Schema.AnyNoContext | Type.AnyEntity>(
+  schemaOrType: S,
+): Schema.Schema<ExcludeId<S>, ExcludeId<S>> => {
+  const schema = Type.isType(schemaOrType)
+    ? Type.getSchema(schemaOrType)
+    : (schemaOrType as Schema.Schema.AnyNoContext);
+  return schema.pipe(Schema.omit('id')) as any;
+};
 
 /**
  * Drop fields annotated with `FormInputAnnotation.set(false)` from a schema so
@@ -70,9 +90,10 @@ type FormContextValue<T extends AnyProperties = any> = {
   form: FormHandler<T>;
 
   /**
-   * Show debug info.
+   * Show field tooltips (currently: JSON path on each label). Defaults to
+   * `true`; pass `false` to suppress.
    */
-  debug?: boolean;
+  tooltips?: boolean;
 
   /**
    * Testing.
@@ -169,9 +190,11 @@ const FormRoot = <T extends AnyProperties = AnyProperties>({
   const form = useFormHandler({ schema, values, onSave, onCancel, ...props });
 
   return (
-    <FormContextProvider form={form} {...props}>
-      {children}
-    </FormContextProvider>
+    <FormTooltipsContext.Provider value={props.tooltips ?? true}>
+      <FormContextProvider form={form} {...props}>
+        {children}
+      </FormContextProvider>
+    </FormTooltipsContext.Provider>
   );
 };
 
@@ -183,15 +206,32 @@ FormRoot.displayName = 'Form.Root';
 
 const FORM_VIEWPORT_NAME = 'Form.Viewport';
 
-type FormViewportProps = {};
+type FormViewportProps = { scroll?: boolean; gutter?: ColumnRootProps['gutter'] };
+
+// The viewing window: owns the gutter Column (chrome/side-padding). Content-height by default;
+// `scroll` makes it fill its parent and scroll (the gutter then hosts the scrollbar).
+const FormViewport = composable<HTMLDivElement, FormViewportProps>(
+  ({ children, scroll, gutter = 'sm', ...props }, forwardedRef) => {
+    // Span the full width when nested inside another Column grid (e.g. Card.Root) instead of
+    // landing in a single narrow track.
+    const span = '[.dx-column-root_&]:col-span-full';
+    if (scroll) {
+      return (
+        <Column.Root gutter={gutter} classNames={['dx-expander', span]}>
+          <ScrollArea.Root {...composableProps(props)} orientation='vertical' centered padding thin ref={forwardedRef}>
+            <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Column.Root>
+      );
+    }
 
-const FormViewport = composable<HTMLDivElement>(({ children, ...props }, forwardedRef) => {
-  return (
-    <ScrollArea.Root {...composableProps(props)} orientation='vertical' centered padding thin ref={forwardedRef}>
-      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
-    </ScrollArea.Root>
-  );
-});
+    return (
+      <Column.Root {...composableProps(props)} gutter={gutter} classNames={['w-full min-w-0', span]} ref={forwardedRef}>
+        {children}
+      </Column.Root>
+    );
+  },
+);
 
 FormViewport.displayName = FORM_VIEWPORT_NAME;
 
@@ -203,6 +243,7 @@ const FORM_CONTENT_NAME = 'Form.Content';
 
 type FormContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
+// The viewed body: centered in the viewport's gutter. Pure body — the gutter Column is owned by `Form.Viewport`.
 const FormContent = composable<HTMLDivElement, FormContentProps>(({ children, ...props }, forwardedRef) => {
   const { form, testId } = useFormContext(FORM_CONTENT_NAME);
   const localRef = useRef<HTMLDivElement>(null);
@@ -213,7 +254,7 @@ const FormContent = composable<HTMLDivElement, FormContentProps>(({ children, ..
     <div
       {...composableProps(props, {
         role: 'form',
-        classNames: mx(withColumn.center(), 'flex flex-col w-full pb-form-gap'),
+        classNames: mx(withColumn.center(), 'flex flex-col w-full'),
       })}
       data-testid={testId}
       ref={mergedRef}
@@ -241,6 +282,26 @@ const FormFieldSet = (props: FormFieldSetProps) => {
 
 FormFieldSet.displayName = FORM_FIELDSET_NAME;
 
+//
+// Layout
+//
+
+const FORM_LAYOUT_NAME = 'Form.Layout';
+
+type FormLayoutProps = Omit<NaturalFormLayoutProps, 'schema'> & { schema?: NaturalFormLayoutProps['schema'] };
+
+const FormLayout = ({ schema, ...props }: FormLayoutProps) => {
+  const { form, ...contextProps } = useFormContext(FORM_LAYOUT_NAME);
+  const resolvedSchema = schema ?? form.schema;
+  if (!resolvedSchema) {
+    return null;
+  }
+
+  return <NaturalFormLayout schema={resolvedSchema} {...contextProps} {...props} />;
+};
+
+FormLayout.displayName = FORM_LAYOUT_NAME;
+
 //
 // Actions
 //
@@ -358,6 +419,29 @@ const FormSubmit = ({ classNames, label, icon, disabled }: FormSubmitProps) => {
 
 FormSubmit.displayName = FORM_SUBMIT_NAME;
 
+//
+// Error
+//
+
+const FORM_ERROR_NAME = 'Form.Error';
+
+type FormErrorProps = ThemedClassName<PropsWithChildren>;
+
+/** Form-level error/validation message (e.g. a failed submit), styled via the error valence. */
+const FormError = ({ children, classNames }: FormErrorProps) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <Input.Root validationValence='error'>
+      <Input.Validation classNames={classNames}>{children}</Input.Validation>
+    </Input.Root>
+  );
+};
+
+FormError.displayName = FORM_ERROR_NAME;
+
 //
 // Form
 // https://www.radix-ui.com/primitives/docs/guides/composition
@@ -369,9 +453,11 @@ export const Form = {
   Content: FormContent,
   Section: FormSection,
   FieldSet: FormFieldSet,
+  Layout: FormLayout,
   Label: FormFieldLabel,
   Actions: FormActions,
   Submit: FormSubmit,
+  Error: FormError,
 };
 
 export { useFormContext, useFormValues, useFormFieldState };
@@ -382,6 +468,7 @@ export type {
   FormContentProps,
   FormSectionProps,
   FormFieldSetProps,
+  FormLayoutProps,
   FormFieldLabelProps,
   FormActionsProps,
   FormSubmitProps,