@dxos/react-ui-form 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

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

@@ -1,27 +1,137 @@
-import { type Schema } from 'effect';
-import React, { type ReactElement } from 'react';
-import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type SchemaProperty } from '@dxos/schema';
-import { type FormOptions } from '../../hooks';
-import { type FormOuterSpacing } from './FormActions';
-import { type FormFieldsProps } from './FormContent';
-import { type InputComponent, type InputProps } from './Input';
-export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
-export type ComponentLookup = (args: {
-    prop: string;
-    schema: Schema.Schema<any>;
-    inputProps: InputProps;
-}) => ReactElement | undefined;
-export type CustomInputMap = Partial<Record<string, InputComponent>>;
-export type FormProps<T extends BaseObject> = ThemedClassName<{
-    values: Partial<T>;
-    autoFocus?: boolean;
-    filter?: PropsFilter<T>;
-    sort?: PropertyKey<T>[];
-    autoSave?: boolean;
-    outerSpacing?: FormOuterSpacing;
+import * as Schema from 'effect/Schema';
+import React, { type PropsWithChildren } from 'react';
+import { Type } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
+import { type ColumnRootProps, type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
+import { type FormHandler, type FormHandlerProps, type FormUpdateMeta } from '../../hooks';
+import { type FormFieldLabelProps, type FormFieldStateProps } from './FormFieldComponent';
+import { type FormFieldSetProps as NaturalFormFieldSetProps } from './FormFieldSet';
+import { type FormLayoutProps as NaturalFormLayoutProps } from './Layout/FormLayout';
+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'>;
+export declare const omitId: <S extends Schema.Schema.AnyNoContext | Type.AnyEntity>(schemaOrType: S) => Schema.Schema<ExcludeId<S>, ExcludeId<S>>;
+/**
+ * Drop fields annotated with `FormInputAnnotation.set(false)` from a schema so
+ * the form's validator doesn't trip on required-but-hidden fields. Used by
+ * the picker's inline create form, where a `FactoryAnnotation` typically
+ * supplies the hidden values (e.g. a backing-object Ref) outside the form.
+ */
+export declare const omitHiddenFormFields: <S extends Schema.Schema.AnyNoContext>(schema: S) => S;
+type FormContextValue<T extends AnyProperties = any> = {
+    /**
+     * Form handler.
+     */
+    form: FormHandler<T>;
+    /**
+     * Show field tooltips (currently: JSON path on each label). Defaults to
+     * `true`; pass `false` to suppress.
+     */
+    tooltips?: boolean;
+    /**
+     * Testing.
+     */
+    testId?: string;
+} & Pick<NaturalFormFieldSetProps<T>, 'readonly' | 'layout' | 'fieldMap' | 'fieldProvider' | 'projection' | 'createTypename' | 'createFieldMap' | 'db'>;
+declare const useFormContext: (consumerName: string) => FormContextValue<any>;
+/**
+ * Get the current form values.
+ */
+declare const useFormValues: {
+    <T extends AnyProperties>(componentName: string, path?: (string | number)[]): T;
+    <T extends AnyProperties>(componentName: string, path: (string | number)[] | undefined, defaultValue: () => T): T | undefined;
+};
+/**
+ * Get the state props for the given field.
+ */
+declare const useFormFieldState: (componentName: string, path?: (string | number)[]) => FormFieldStateProps;
+type FormRootProps<T extends AnyProperties = AnyProperties> = PropsWithChildren<{
+    /**
+     * Called when the form is submitted and passes validation.
+     */
+    onSave?: (values: T, meta: FormUpdateMeta<T>) => void;
+    /**
+     * Called when the form is canceled to abandon/undo any pending changes.
+     */
     onCancel?: () => void;
-}> & Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'> & FormFieldsProps;
-export declare const Form: <T extends BaseObject>({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing, onCancel, schema, onValuesChanged, onValidate, onSave, ...props }: FormProps<T>) => React.JSX.Element;
+} & Omit<FormContextValue<T>, 'form'> & Pick<FormHandlerProps<T>, 'schema' | 'autoSave' | 'values' | 'defaultValues' | 'onValidate' | 'onValuesChanged'> & Omit<NaturalFormFieldSetProps<T>, 'schema' | 'path'>>;
+declare function FormRoot<T extends AnyProperties = AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): React.JSX.Element;
+declare namespace FormRoot {
+    var displayName: string;
+}
+type FormViewportProps = {
+    scroll?: boolean;
+    gutter?: ColumnRootProps['gutter'];
+};
+type FormContentProps = ThemedClassName<PropsWithChildren<{}>>;
+type FormFieldSetProps = ThemedClassName<NaturalFormFieldSetProps<any>>;
+declare function FormFieldSet(props: FormFieldSetProps): React.JSX.Element;
+declare namespace FormFieldSet {
+    var displayName: string;
+}
+type FormLayoutProps = Omit<NaturalFormLayoutProps, 'schema'> & {
+    schema?: NaturalFormLayoutProps['schema'];
+};
+declare function FormLayout({ schema, ...props }: FormLayoutProps): React.JSX.Element | null;
+declare namespace FormLayout {
+    var displayName: string;
+}
+type FormActionsProps = ThemedClassName<{}>;
+declare function FormActions({ classNames }: FormActionsProps): React.JSX.Element | null;
+declare namespace FormActions {
+    var displayName: string;
+}
+type FormSectionProps = ThemedClassName<{
+    label?: string;
+    description?: string;
+}>;
+type FormSubmitProps = ThemedClassName<Partial<Pick<IconButtonProps, 'icon' | 'label' | 'disabled'>>>;
+declare function FormSubmit({ classNames, label, icon, disabled }: FormSubmitProps): React.JSX.Element | null;
+declare namespace FormSubmit {
+    var displayName: string;
+}
+type FormErrorProps = ThemedClassName<PropsWithChildren>;
+declare function FormError({ children, classNames }: FormErrorProps): React.JSX.Element | null;
+declare namespace FormError {
+    var displayName: string;
+}
+export declare const Form: {
+    Root: {
+        <T extends AnyProperties = AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): React.JSX.Element;
+        displayName: string;
+    };
+    Viewport: React.ForwardRefExoticComponent<Omit<FormViewportProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<FormContentProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<Omit<FormSectionProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    FieldSet: {
+        (props: FormFieldSetProps): React.JSX.Element;
+        displayName: string;
+    };
+    Layout: {
+        ({ schema, ...props }: FormLayoutProps): React.JSX.Element | null;
+        displayName: string;
+    };
+    Label: {
+        ({ classNames, label, error, readonly, asChild, path, button, onClick, }: FormFieldLabelProps): React.JSX.Element;
+        displayName: string;
+    };
+    Actions: {
+        ({ classNames }: FormActionsProps): React.JSX.Element | null;
+        displayName: string;
+    };
+    Submit: {
+        ({ classNames, label, icon, disabled }: FormSubmitProps): React.JSX.Element | null;
+        displayName: string;
+    };
+    Error: {
+        ({ children, classNames }: FormErrorProps): React.JSX.Element | null;
+        displayName: string;
+    };
+};
+export { useFormContext, useFormValues, useFormFieldState };
+export type { FormRootProps, FormViewportProps, FormContentProps, FormSectionProps, FormFieldSetProps, FormLayoutProps, FormFieldLabelProps, FormActionsProps, FormSubmitProps, };
 //# sourceMappingURL=Form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAA8B,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE/D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEpG,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,UAAU,EAAE,UAAU,CAAC;CACxB,KAAK,YAAY,GAAG,SAAS,CAAC;AAE/B,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,UAAU,IAAI,eAAe,CAAC;IAC5D,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC,GACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,iBAAiB,GAAG,YAAY,GAAG,QAAQ,CAAC,GAC5E,eAAe,CAAC;AAElB,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,UAAU,EAAE,6JAcxC,SAAS,CAAC,CAAC,CAAC,sBAmDd,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Form/Form.stories.d.ts

@@ -1,58 +1,209 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import { ContactType } from '@dxos/client/testing';
-import { type BaseObject } from '@dxos/echo-schema';
-import { Testing } from '@dxos/schema/testing';
-import { type FormProps } from './Form';
-declare const TestSchema: Schema.mutable<Schema.Struct<{
-    name: Schema.optional<Schema.SchemaClass<string, string, never>>;
-    active: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
-    rank: Schema.optional<Schema.SchemaClass<number, number, never>>;
-    website: Schema.optional<Schema.refine<string, typeof Schema.String>>;
-    address: Schema.optional<Schema.Struct<{
-        street: Schema.optional<Schema.SchemaClass<string, string, never>>;
-        city: Schema.optional<Schema.SchemaClass<string, string, never>>;
-        zip: Schema.optional<Schema.refine<string, typeof Schema.String>>;
-        location: Schema.optional<Schema.Tuple<[Schema.refine<number, Schema.transform<typeof Schema.Number, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.refine<number, Schema.transform<typeof Schema.Number, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.Element<typeof Schema.Number, "?">]>>;
-    }>>;
-}>>;
-type TestType = Schema.Schema.Type<typeof TestSchema>;
-type StoryProps<T extends BaseObject> = {
-    schema: Schema.Schema<T>;
-} & FormProps<T>;
-declare const meta: Meta<StoryProps<any>>;
+import { type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+import { Obj, Type } from '@dxos/echo';
+import { type AnyProperties } from '@dxos/echo/internal';
+import { type ExcludeId, type FormRootProps } from './Form';
+declare const Organization: Type.Obj<{
+    readonly name: string;
+}, Schema.Struct.Fields>;
+export type Organization = Type.InstanceType<typeof Organization>;
+declare const Person: Type.Obj<{
+    readonly name: string;
+    readonly ignore?: string | undefined;
+    readonly active?: boolean | undefined;
+    readonly address?: {
+        readonly street: string;
+        readonly city: string;
+        readonly state: string;
+        readonly zip: number;
+    } | undefined;
+    readonly employer?: import("@dxos/echo/internal").Ref<{
+        readonly name: string;
+    } & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & Obj.Unknown> | undefined;
+    readonly tags?: readonly import("@dxos/echo/internal").Ref<{
+        readonly label: string;
+        readonly hue?: string | undefined;
+    } & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & Obj.Unknown>[] | undefined;
+    readonly status?: "active" | "inactive" | undefined;
+    readonly notes?: string | undefined;
+    readonly location?: readonly [number, number, (number | undefined)?] | undefined;
+    readonly birthday?: string | undefined;
+    readonly meetingAt?: string | undefined;
+    readonly reminderAt?: string | undefined;
+    readonly tasks?: readonly string[] | undefined;
+    readonly locations?: readonly (readonly [number, number, (number | undefined)?])[] | undefined;
+    readonly identities?: readonly {
+        readonly type: string;
+        readonly value: string;
+    }[] | undefined;
+}, Schema.Struct.Fields>;
+export type Person = Type.InstanceType<typeof Person>;
+type DefaultStoryProps<T extends AnyProperties> = {
+    schema?: Schema.Schema<T>;
+} & FormRootProps<T>;
+declare const meta: {
+    title: string;
+    component: {
+        <T extends AnyProperties = AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): React.JSX.Element;
+        displayName: string;
+    };
+    render: <T extends AnyProperties = AnyProperties>({ schema, values: valuesProp, ...props }: DefaultStoryProps<T>) => React.JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
+    parameters: {
+        layout: string;
+        translations: [{
+            readonly 'en-US': {
+                readonly "@dxos/react-ui-form": {
+                    readonly 'ref-editor.placeholder': "Type '@' to add a reference, or enter a value";
+                    readonly 'ref-editor-auto.placeholder': 'Search by name, or enter a value';
+                    readonly 'fields.label': 'Fields';
+                    readonly 'hidden-fields.label': 'Hidden Fields';
+                    readonly 'empty-readonly-ref-field.label': '(none)';
+                    readonly 'field-property.label': 'Property';
+                    readonly 'field-property.placeholder': 'Property name';
+                    readonly 'field-format.label': 'Type';
+                    readonly 'field-path.label': 'Field path';
+                    readonly 'remove-item.button': 'Delete item';
+                    readonly 'add-item.button': 'Add item';
+                    readonly 'add-property-button.label': 'Add property';
+                    readonly 'boolean-input-true.value': 'Yes';
+                    readonly 'boolean-input-false.value': 'No';
+                    readonly 'show-field.label': 'Show field';
+                    readonly 'hide-field.label': 'Hide field';
+                    readonly 'expand-fields.label': 'Expand';
+                    readonly 'collapse-fields.label': 'Collapse';
+                    readonly 'delete-field.label': 'Delete field';
+                    readonly 'create-option.label': 'Create';
+                    readonly 'add-tag.label': 'Add tag';
+                    readonly 'ref-field-combobox-input.placeholder': 'Search\u2026';
+                    readonly 'ref-field.placeholder': 'Select\u2026';
+                    readonly 'ref-field.placeholder_one': 'Select\u2026';
+                    readonly 'ref-field.placeholder_other': 'Select items\u2026';
+                    readonly 'example.placeholder': 'Example';
+                    readonly 'latitude.placeholder': 'Latitude (e.g., 40.7128)';
+                    readonly 'longitude.placeholder': 'Longitude (e.g., -74.0060)';
+                    readonly 'cancel-button.label': 'Cancel';
+                    readonly 'save-button.label': 'Save';
+                    readonly 'create-text.label': 'Create text';
+                    readonly 'format.boolean.label': 'Boolean';
+                    readonly 'format.currency.label': 'Currency';
+                    readonly 'format.date.label': 'Date';
+                    readonly 'format.date-time.label': 'DateTime';
+                    readonly 'format.did.label': 'DID';
+                    readonly 'format.duration.label': 'Duration';
+                    readonly 'format.dxn.label': 'DXN';
+                    readonly 'format.email.label': 'Email';
+                    readonly 'format.formula.label': 'Formula';
+                    readonly 'format.hostname.label': 'Hostname';
+                    readonly 'format.integer.label': 'Integer';
+                    readonly 'format.json.label': 'JSON';
+                    readonly 'format.lnglat.label': 'Geopoint';
+                    readonly 'format.markdown.label': 'Markdown';
+                    readonly 'format.percent.label': 'Percent';
+                    readonly 'format.ref.label': 'Reference';
+                    readonly 'format.regex.label': 'RegExp';
+                    readonly 'format.string.label': 'String';
+                    readonly 'format.single-select.label': 'Select';
+                    readonly 'format.multi-select.label': 'Multi-select';
+                    readonly 'format.text.label': 'Long text';
+                    readonly 'format.time.label': 'Time';
+                    readonly 'format.timestamp.label': 'Timestamp';
+                    readonly 'format.user.label': 'User';
+                    readonly 'format.number.label': 'Number';
+                    readonly 'format.uri.label': 'URI';
+                    readonly 'format.url.label': 'URL';
+                    readonly 'format.uuid.label': 'UUID';
+                    readonly 'latitude.label': 'Latitude';
+                    readonly 'longitude.label': 'Longitude';
+                    readonly 'select-option.label': 'Label';
+                    readonly 'select-option-label.placeholder': 'Option label';
+                    readonly 'select-option-delete.button': 'Delete';
+                    readonly 'select-option-add.button': 'Add option';
+                    readonly 'system-schema.title': 'System type';
+                    readonly 'system-schema.description': 'System type: cannot add or remove fields.';
+                    readonly 'remove.button': 'Delete';
+                };
+            };
+        }];
+    };
+};
 export default meta;
-type Story<T extends BaseObject> = StoryObj<StoryProps<T>>;
-export declare const Default: Story<TestType>;
-export declare const Organization: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>>;
-export declare const OrganizationAutoSave: Story<Schema.Schema.Type<typeof Testing.OrganizationSchema>>;
-declare const ShapeSchema: Schema.mutable<Schema.Struct<{
-    shape: Schema.optional<Schema.Union<[Schema.Struct<{
-        type: Schema.Literal<["circle"]>;
-        radius: Schema.optional<Schema.SchemaClass<number, number, never>>;
-    }>, Schema.Struct<{
-        type: Schema.Literal<["square"]>;
-        size: Schema.optional<Schema.refine<number, typeof Schema.Number>>;
-    }>]>>;
-}>>;
-type ShapeType = Schema.Schema.Type<typeof ShapeSchema>;
-export declare const DiscriminatedShape: Story<ShapeType>;
-declare const ArraysSchema: Schema.mutable<Schema.Struct<{
-    names: Schema.Array$<Schema.filter<typeof Schema.String>>;
-    addresses: Schema.Array$<Schema.Struct<{
-        street: Schema.optional<Schema.SchemaClass<string, string, never>>;
-        city: Schema.optional<Schema.SchemaClass<string, string, never>>;
-        zip: Schema.optional<Schema.refine<string, typeof Schema.String>>;
-        location: Schema.optional<Schema.Tuple<[Schema.refine<number, Schema.transform<typeof Schema.Number, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.refine<number, Schema.transform<typeof Schema.Number, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.Element<typeof Schema.Number, "?">]>>;
-    }>>;
-}>>;
-type ArraysType = Schema.Schema.Type<typeof ArraysSchema>;
-export declare const Arrays: StoryObj<FormProps<ArraysType>>;
-declare const ColorSchema: Schema.mutable<Schema.Struct<{
-    color: Schema.Union<[Schema.Literal<["red"]>, Schema.Literal<["green"]>, Schema.Literal<["blue"]>]>;
-}>>;
-type ColorType = Schema.Schema.Type<typeof ColorSchema>;
-export declare const Enum: StoryObj<FormProps<ColorType>>;
-export declare const Refs: StoryObj<FormProps<ContactType>>;
+type Story<T extends AnyProperties> = StoryObj<DefaultStoryProps<T>>;
+declare const PersonSchema: Schema.Schema<{
+    readonly name: string;
+    readonly ignore?: string | undefined;
+    readonly active?: boolean | undefined;
+    readonly address?: {
+        readonly street: string;
+        readonly city: string;
+        readonly state: string;
+        readonly zip: number;
+    } | undefined;
+    readonly employer?: import("@dxos/echo/internal").Ref<{
+        readonly name: string;
+    } & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & Obj.Unknown> | undefined;
+    readonly tags?: readonly import("@dxos/echo/internal").Ref<{
+        readonly label: string;
+        readonly hue?: string | undefined;
+    } & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & Obj.Unknown>[] | undefined;
+    readonly status?: "active" | "inactive" | undefined;
+    readonly notes?: string | undefined;
+    readonly location?: readonly [number, number, (number | undefined)?] | undefined;
+    readonly birthday?: string | undefined;
+    readonly meetingAt?: string | undefined;
+    readonly reminderAt?: string | undefined;
+    readonly tasks?: readonly string[] | undefined;
+    readonly locations?: readonly (readonly [number, number, (number | undefined)?])[] | undefined;
+    readonly identities?: readonly {
+        readonly type: string;
+        readonly value: string;
+    }[] | undefined;
+} & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object>, {
+    readonly name: string;
+    readonly ignore?: string | undefined;
+    readonly active?: boolean | undefined;
+    readonly address?: {
+        readonly street: string;
+        readonly city: string;
+        readonly state: string;
+        readonly zip: number;
+    } | undefined;
+    readonly employer?: import("@dxos/echo/internal").Ref<{
+        readonly name: string;
+    } & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & Obj.Unknown> | undefined;
+    readonly tags?: readonly import("@dxos/echo/internal").Ref<{
+        readonly label: string;
+        readonly hue?: string | undefined;
+    } & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & Obj.Unknown>[] | undefined;
+    readonly status?: "active" | "inactive" | undefined;
+    readonly notes?: string | undefined;
+    readonly location?: readonly [number, number, (number | undefined)?] | undefined;
+    readonly birthday?: string | undefined;
+    readonly meetingAt?: string | undefined;
+    readonly reminderAt?: string | undefined;
+    readonly tasks?: readonly string[] | undefined;
+    readonly locations?: readonly (readonly [number, number, (number | undefined)?])[] | undefined;
+    readonly identities?: readonly {
+        readonly type: string;
+        readonly value: string;
+    }[] | undefined;
+} & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object>, never>;
+/**
+ * Build a data-entry surface by handing an Effect schema to `Form.Root` — the form derives its fields,
+ * types, validation, and selects from the schema, so you don't hand-wire one control per property.
+ * Customize individual fields with `fieldMap` (keyed by JSON path), render discriminated unions
+ * conditionally via the discriminator, and label ref-picker options by their parent object with
+ * `ParentLabelAnnotation`.
+ *
+ * @idiom org.dxos.react-ui-form.schemaForm
+ *   applies: Any data-entry section bound to an Effect schema — settings, object/article editors, create dialogs
+ *   instead-of: Hand-wiring Input/Select/Switch controls per field in bespoke React
+ *   uses: {@link Form.Root}, {@link Form.FieldSet}
+ *   related: org.dxos.react-ui-menu.toolbarMenu
+ */
+export declare const Default: Story<ExcludeId<typeof PersonSchema>>;
+export declare const Readonly: Story<ExcludeId<typeof PersonSchema>>;
+export declare const Static: Story<ExcludeId<typeof PersonSchema>>;
+export declare const Empty: Story<ExcludeId<typeof PersonSchema>>;
 //# sourceMappingURL=Form.stories.d.ts.map

package/dist/types/src/components/Form/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGhC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAA2D,MAAM,mBAAmB,CAAC;AAG7G,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAO/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAU9C,QAAA,MAAM,UAAU;;;;;;;;;;;GAMO,CAAC;AAExB,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,UAAU,CAAC,CAAC;AAEtD,KAAK,UAAU,CAAC,CAAC,SAAS,UAAU,IAAI;IAAE,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AA0BpF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,QAAQ,CAcnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,OAAO,CAAC,kBAAkB,CAAC,CASrF,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,OAAO,CAAC,kBAAkB,CAAC,CAU7F,CAAC;AAcF,QAAA,MAAM,WAAW;;;;;;;;GAaM,CAAC;AAExB,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAExD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAsB/C,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;GAGK,CAAC;AAExB,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAE1D,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CASlD,CAAC;AAEF,QAAA,MAAM,WAAW;;GAIM,CAAC;AAExB,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAExD,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAQ/C,CAAC;AA6CF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,WAAW,CAAC,CAQjD,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAA2B,GAAG,EAAY,IAAI,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAUzD,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,aAAa,EAAU,MAAM,QAAQ,CAAC;AAE1E,QAAA,MAAM,YAAY;;wBAE0D,CAAC;AAE7E,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAElE,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAoCuD,CAAC;AAEpE,MAAM,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAEtD,KAAK,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CAC3B,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAgDrB,QAAA,MAAM,IAAI;;;;;;aA9CY,CAAC,SAAS,aAAa,4DAI1C,iBAAiB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEiB,CAAC;eAE1B,IAAI;AAEnB,KAAK,KAAK,CAAC,CAAC,SAAS,aAAa,IAAI,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAErE,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+FAAyB,CAAC;AAW5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,YAAY,CAAC,CAMzD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,YAAY,CAAC,CAM1D,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,YAAY,CAAC,CAMxD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,YAAY,CAAC,CAEvD,CAAC"}

package/dist/types/src/components/Form/FormField.d.ts

@@ -0,0 +1,52 @@
+import * as SchemaAST from 'effect/SchemaAST';
+import React from 'react';
+import { IconButtonProps } from '@dxos/react-ui';
+import { type ProjectionModel } from '@dxos/schema';
+import { type RefFieldProps } from './fields';
+import { type FormFieldComponentProps, type FormFieldMap, type FormFieldProvider } from './FormFieldComponent';
+export type FormFieldProps = {
+    /**
+     * AST of the property to render.
+     */
+    type: SchemaAST.AST;
+    /**
+     * Name of the property. Used to derive a default label
+     * (`title ?? capitalize(name)`) and as the projection lookup key. Pass
+     * `null` to suppress the header label entirely -- the form still renders
+     * the field/struct, but `FormFieldSet`'s top-level `<FormFieldLabel>` is
+     * skipped. Used by `ArrayField` for object-array items, where every item
+     * would otherwise repeat the array's parent name.
+     */
+    name: string | null;
+    /**
+     * Path to the current object from the root. Used with nested forms.
+     */
+    path?: (string | number)[];
+    /**
+     * Optional projection for projection-based field management.
+     */
+    projection?: ProjectionModel;
+    /**
+     * Map of custom renderers for specific properties.
+     * Prefer fieldProvider for plugin specific input surfaces.
+     */
+    fieldMap?: FormFieldMap;
+    /**
+     * Function to lookup custom renderers for specific properties.
+     */
+    fieldProvider?: FormFieldProvider;
+    /**
+     * Typename of the ref type that the create props apply to.
+     * When set, createOptionLabel/createOptionIcon/createInitialValuePath/createFieldMap/onCreate
+     * are only passed to ref fields whose typename matches.
+     */
+    createTypename?: string;
+} & Pick<FormFieldComponentProps, 'autoFocus' | 'readonly' | 'layout'> & Pick<RefFieldProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap' | 'db' | 'useType' | 'getOptions' | 'onCreate'>;
+export declare function FormField(props: FormFieldProps): React.JSX.Element | null;
+export declare namespace FormField {
+    var displayName: string;
+}
+export declare const IconBlock: ({ inline, ...props }: IconButtonProps & {
+    inline?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/types/src/components/Form/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormField.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,SAAS,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAc,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EASL,KAAK,aAAa,EAInB,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAElC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,uBAAuB,EAAE,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC,GACpE,IAAI,CACF,aAAa,EACX,mBAAmB,GACnB,kBAAkB,GAClB,wBAAwB,GACxB,gBAAgB,GAChB,IAAI,GACJ,SAAS,GACT,YAAY,GACZ,UAAU,CACb,CAAC;kCAEsB,KAAK,EAAE,cAAc;;;;AAiM/C,eAAO,MAAM,SAAS,yBAA0B,eAAe,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,sBAMrF,CAAC"}

package/dist/types/src/components/Form/FormFieldComponent.d.ts

@@ -0,0 +1,98 @@
+import type * as Schema from 'effect/Schema';
+import type * as SchemaAST from 'effect/SchemaAST';
+import React, { Component, type FC, type FocusEvent, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
+import { type Database, Format } from '@dxos/echo';
+import { ThemedClassName } from '@dxos/react-ui';
+import { type FormFieldStatus } from '../../hooks';
+/**
+ * Dynamic props passed to input components.
+ */
+export type FormFieldStateProps<T = any> = {
+    getStatus: () => FormFieldStatus;
+    getValue: () => T | undefined;
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+    onValueChange: (type: SchemaAST.AST, value: T) => void;
+};
+/**
+ * Presentation mode.
+ * - full: Show label, control, and status.
+ * - compact: Show label and control.
+ * - inline: Control only.
+ * - static: Plain DOM; omit all undefined values.
+ */
+export type Presentation = 'full' | 'compact' | 'inline' | 'static';
+/**
+ * Props passed to input components.
+ */
+export type FormFieldComponentProps<T = any> = {
+    /** Database the form is editing against; populated for fields whose value is an ECHO object/Ref. */
+    db?: Database.Database;
+    type: SchemaAST.AST;
+    format?: Format.TypeFormat;
+    readonly?: boolean;
+    label: string;
+    /**
+     * Dotted JSON path of this field within the form values (e.g.
+     * `runtime.client.storage.persistent`). Forwarded to `FormFieldLabel` so
+     * that it can render the path as a debug hint when the enclosing
+     * `Form.Root` has `debug` enabled.
+     */
+    jsonPath?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    layout?: Presentation;
+} & FormFieldStateProps<T>;
+export type FormFieldComponent = FC<FormFieldComponentProps>;
+export type FormFieldMap = Record<string, FormFieldComponent>;
+export type FormFieldProvider = (props: {
+    prop: string;
+    schema: Schema.Schema<any>;
+    fieldProps: FormFieldComponentProps;
+}) => ReactElement | null | undefined;
+export type FormFieldLabelProps = ThemedClassName<{
+    asChild?: boolean;
+    error?: string;
+    /**
+     * JSON path of the field this label describes (e.g. `runtime.client.storage.persistent`).
+     * Surfaced as a hover tooltip on the label when the enclosing `Form.Root`
+     * has `tooltips` enabled (the default) -- useful for spotting which field
+     * maps to which path when authoring schemas or filing bugs against a form.
+     * Callers can supply the path unconditionally; the label suppresses the
+     * tooltip when `Form.Root tooltips={false}`.
+     */
+    path?: string;
+    /**
+     * Trailing button rendered at the end of the label row (third grid column).
+     * Used by nested-object field sets to surface a collapse toggle.
+     */
+    button?: ReactNode;
+    onClick?: () => void;
+} & Pick<FormFieldComponentProps, 'label' | 'readonly'>>;
+export declare function FormFieldLabel({ classNames, label, error, readonly, asChild, path, button, onClick }: FormFieldLabelProps): React.JSX.Element;
+export declare namespace FormFieldLabel {
+    var displayName: string;
+}
+export type FormFieldWrapperProps<T = any> = Pick<FormFieldComponentProps, 'readonly' | 'label' | 'layout' | 'getStatus' | 'getValue' | 'jsonPath' | 'format'> & {
+    children?: (props: {
+        value: T;
+    }) => ReactNode;
+};
+export declare const FormFieldWrapper: <T>(props: FormFieldWrapperProps<T>) => React.JSX.Element | null;
+type FormFieldErrorState = {
+    error: Error | undefined;
+};
+type FormFieldErrorBoundaryProps = PropsWithChildren<{
+    path?: (string | number)[];
+}>;
+export declare class FormFieldErrorBoundary extends Component<FormFieldErrorBoundaryProps, FormFieldErrorState> {
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    state: {
+        error: undefined;
+    };
+    componentDidUpdate(prevProps: FormFieldErrorBoundaryProps): void;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null | undefined;
+    private resetError;
+}
+//# sourceMappingURL=FormFieldComponent.d.ts.map

package/dist/types/src/components/Form/FormFieldComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormFieldComponent.tsx"],"names":[],"mappings":"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"}