@dxos/react-ui-form 0.9.0 → 0.9.1-staging.ee54ba693a

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

@@ -1,137 +1,50 @@
-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;
-} & 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;
-}
+import { type FormActionsProps, type FormContentProps, type FormGroupProps, type FormLayoutProps, type FormRootProps, type FormSectionProps, type FormSubmitProps, type FormViewportProps } from './FormControls';
+import { type FormRowProps } from './FormField';
 export declare const Form: {
     Root: {
-        <T extends AnyProperties = AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): React.JSX.Element;
+        <T extends import("@dxos/echo/internal").AnyProperties = import("@dxos/echo/internal").AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): import("react").JSX.Element;
         displayName: string;
     };
-    Viewport: React.ForwardRefExoticComponent<Omit<FormViewportProps, "className"> & {
+    Viewport: import("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"> & {
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("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"> & {
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    Section: import("react").ForwardRefExoticComponent<Omit<FormSectionProps, "className"> & {
         classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<FormGroupProps, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & Pick<import("react").HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
     FieldSet: {
-        (props: FormFieldSetProps): React.JSX.Element;
+        ({ classNames, ...props }: import("./FormControls").FormFieldSetControllerProps): import("react").JSX.Element;
         displayName: string;
     };
     Layout: {
-        ({ schema, ...props }: FormLayoutProps): React.JSX.Element | null;
+        ({ schema, ...props }: FormLayoutProps): import("react").JSX.Element | null;
         displayName: string;
     };
     Label: {
-        ({ classNames, label, error, readonly, asChild, path, button, onClick, }: FormFieldLabelProps): React.JSX.Element;
+        ({ classNames, labelClassName, variant, label, error, readonly, required, standalone, button, onClick, }: import("./FormField").FormFieldLabelProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        <T>({ classNames, children, readonly, presentation, label, description, jsonPath, format, required, standalone, renderStatic, validation, getStatus, getValue, rootRef, }: FormRowProps<T>): import("react").JSX.Element | null;
         displayName: string;
     };
     Actions: {
-        ({ classNames }: FormActionsProps): React.JSX.Element | null;
+        ({ classNames }: FormActionsProps): import("react").JSX.Element | null;
         displayName: string;
     };
     Submit: {
-        ({ classNames, label, icon, disabled }: FormSubmitProps): React.JSX.Element | null;
+        ({ classNames, label, icon, disabled }: FormSubmitProps): import("react").JSX.Element | null;
         displayName: string;
     };
     Error: {
-        ({ children, classNames }: FormErrorProps): React.JSX.Element | null;
+        ({ children, classNames }: import("./FormControls").FormErrorProps): import("react").JSX.Element | null;
         displayName: string;
     };
 };
-export { useFormContext, useFormValues, useFormFieldState };
-export type { FormRootProps, FormViewportProps, FormContentProps, FormSectionProps, FormFieldSetProps, FormLayoutProps, FormFieldLabelProps, FormActionsProps, FormSubmitProps, };
+export type { FormActionsProps, FormContentProps, FormGroupProps, FormLayoutProps, FormRootProps, FormRowProps, FormSectionProps, FormSubmitProps, FormViewportProps, };
 //# 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":"AAMA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAElF,OAAO,EAAgC,IAAI,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,eAAe,EAGpB,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AAMxB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAGpB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAkB,KAAK,mBAAmB,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC1G,OAAO,EAEL,KAAK,iBAAiB,IAAI,wBAAwB,EACnD,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,KAAK,eAAe,IAAI,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAKrF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CACjF,CAAC,SAAS,IAAI,CAAC,SAAS,GACpB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACpB,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,YAAY,GAClC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GACrB,KAAK,EACX,IAAI,CACL,CAAC;AAGF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,gBAC5D,CAAC,KACd,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAK1C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,YAAY,UAAU,CAAC,KAAG,CAMtF,CAAC;AAMF,KAAK,gBAAgB,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI;IACrD;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CACN,wBAAwB,CAAC,CAAC,CAAC,EAC3B,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,YAAY,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,IAAI,CACjH,CAAC;AAEF,QAAA,MAA4B,cAAc,iDAA2C,CAAC;AAEtF;;GAEG;AACH,QAAA,MAAM,aAAa,EAAE;IACnB,CAAC,CAAC,SAAS,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAChF,CAAC,CAAC,SAAS,aAAa,EACtB,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,SAAS,EACrC,YAAY,EAAE,MAAM,CAAC,GACpB,CAAC,GAAG,SAAS,CAAC;CAsBlB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,iBAAiB,kBAAmB,MAAM,SAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAQ,mBAelF,CAAC;AAMF,KAAK,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI,iBAAiB,CAC7E;IACE;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GACnC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAChH,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC,CACvD,CAAC;0BAEgB,CAAC,SAAS,aAAa,GAAG,aAAa,EAAE,EACzD,QAAQ,EACR,MAAM,EACN,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,CAAC,CAAC;;;;AAoBnB,KAAK,iBAAiB,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;CAAE,CAAC;AAmClF,KAAK,gBAAgB,GAAG,eAAe,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;AA+B/D,KAAK,iBAAiB,GAAG,eAAe,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC;8BAElD,KAAK,EAAE,iBAAiB;;;;AAc9C,KAAK,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;CAAE,CAAC;4BAE1F,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe;;;;AAkBzD,KAAK,gBAAgB,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;6BAEvB,EAAE,UAAU,EAAE,EAAE,gBAAgB;;;;AAoDrD,KAAK,gBAAgB,GAAG,eAAe,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAyBlF,KAAK,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;4BAElF,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,eAAe;;;;AAoC1E,KAAK,cAAc,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;2BAGtC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,cAAc;;;;AAmB3D,eAAO,MAAM,IAAI;IACf,IAAI;SA7QY,CAAC,SAAS,aAAa,4EAOtC,aAAa,CAAC,CAAC,CAAC;;;IAuQjB,QAAQ;;;IACR,OAAO;;;IACP,OAAO;;;IACP,QAAQ;gBAlLmB,iBAAiB;;;IAmL5C,MAAM;+BAnKkC,eAAe;;;IAoKvD,KAAK;;;;IACL,OAAO;yBAjJ4B,gBAAgB;;;IAkJnD,MAAM;gDAnEmD,eAAe;;;IAoExE,KAAK;mCA7BsC,cAAc;;;CA8B1D,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,CAAC;AAE5D,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EAIrB,KAAK,cAAc,EAEnB,KAAK,eAAe,EAEpB,KAAK,aAAa,EAElB,KAAK,gBAAgB,EAErB,KAAK,eAAe,EAEpB,KAAK,iBAAiB,EACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEzE,eAAO,MAAM,IAAI;IACf,IAAI;;;;IACJ,QAAQ;;;IACR,OAAO;;;IACP,OAAO;;;IACP,KAAK;;;IACL,QAAQ;;;;IACR,MAAM;;;;IACN,KAAK;;;;IACL,GAAG;;;;IACH,OAAO;;;;IACP,MAAM;;;;IACN,KAAK;;;;CACN,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,iBAAiB,GAClB,CAAC"}

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

@@ -1,54 +1,20 @@
 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>;
+import { Person } from '../../testing';
+import { type ExcludeId } from '../../util';
+import { type FormRootProps } from './Form';
+type StoryArgs<T extends AnyProperties> = FormRootProps<T> & {
+    json?: boolean;
+};
 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;
+    render: <T extends AnyProperties = AnyProperties>({ schema, values: valuesProp, json, ...props }: StoryArgs<T>) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         layout: string;
@@ -129,66 +95,8 @@ declare const meta: {
     };
 };
 export default meta;
-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>;
+declare const PersonSchema: Schema.Schema<Person & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object>, Person & import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object>, never>;
+type Story<T extends AnyProperties> = StoryObj<StoryArgs<T>>;
 /**
  * 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.
@@ -205,5 +113,44 @@ declare const PersonSchema: Schema.Schema<{
 export declare const Default: Story<ExcludeId<typeof PersonSchema>>;
 export declare const Readonly: Story<ExcludeId<typeof PersonSchema>>;
 export declare const Static: Story<ExcludeId<typeof PersonSchema>>;
+declare const SettingsSchema: Schema.mutable<Schema.Struct<{
+    viewMode: Schema.Literal<["preview", "readonly", "source"]>;
+    toolbar: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    fontSize: Schema.optional<Schema.SchemaClass<number, number, never>>;
+}>>;
+export declare const Variants: Story<Schema.Schema.Type<typeof SettingsSchema>>;
+/**
+ * Exercises a `Ref<Text>` field carrying both `Format.TypeFormat.Markdown` and
+ * `FormInlineAnnotation` — the markdown editor should render inline rather than
+ * opening a ref picker or nested struct form.
+ */
+export declare const InlineMarkdownText: Story<any>;
 export declare const Empty: Story<ExcludeId<typeof PersonSchema>>;
+declare const DynamicFieldsSchema: Schema.mutable<Schema.Struct<{
+    query: Schema.SchemaClass<string, string, never>;
+    url: Schema.refine<string, typeof Schema.String>;
+    choice: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    tag: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    name: Schema.optional<Schema.SchemaClass<string, string, never>>;
+}>>;
+/**
+ * Exercises the dynamic-field annotations: `OptionsLookupAnnotation` (select options loaded from a
+ * sibling) and `AutofillAnnotation` (value derived from a sibling, gated on validity and delayed). Each
+ * runs a self-contained Effect from the current form values.
+ */
+export declare const DynamicFields: Story<Schema.Schema.Type<typeof DynamicFieldsSchema>>;
+declare const CreateFeedSchema: Schema.Union<[Schema.Struct<{
+    type: Schema.Literal<["standard-site"]>;
+    handle: Schema.SchemaClass<string, string, never>;
+    publication: Schema.SchemaClass<string, string, never>;
+}>, Schema.Struct<{
+    type: Schema.Literal<["rss"]>;
+    url: Schema.refine<string, typeof Schema.String>;
+    name: Schema.optional<Schema.SchemaClass<string, string, never>>;
+}>]>;
+/**
+ * A discriminated-union create form: selecting `type` reveals that member's fields (combobox + select for
+ * `standard-site`, URL + autofill for `rss`). Mirrors the magazine create-feed schema.
+ */
+export declare const DiscriminatedUnion: Story<Schema.Schema.Type<typeof CreateFeedSchema>>;
 //# 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,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"}
+{"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;AAEjE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAWzD,OAAO,EAAgB,MAAM,EAAc,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,YAAY,CAAC;AACpD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAElD,KAAK,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkDhF,QAAA,MAAM,IAAI;;;;;;aAhDY,CAAC,SAAS,aAAa,kEAK1C,SAAS,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEiB,CAAC;eAElB,IAAI;AAEnB,QAAA,MAAM,YAAY,kNAAyB,CAAC;AAW5C,KAAK,KAAK,CAAC,CAAC,SAAS,aAAa,IAAI,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D;;;;;;;;;;;;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,QAAA,MAAM,cAAc;;;;GAgBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAgBrE,CAAC;AAoCF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,GAAG,CAKzC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,YAAY,CAAC,CAEvD,CAAC;AAqBF,QAAA,MAAM,mBAAmB;;;;;;GAgDxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAK/E,CAAC;AAkEF,QAAA,MAAM,gBAAgB;;;;;;;;IAA8C,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAKjF,CAAC"}

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

@@ -0,0 +1,252 @@
+import { type VariantProps } from '@dxos/ui-theme';
+/** Visual variants for {@link Form}. `settings` is the bordered two-column settings-panel look. */
+export type FormVariant = NonNullable<VariantProps<typeof formStyles>['variant']>;
+/** Non-className behavior flags, keyed by {@link FormVariant}. */
+export type FormBehavior = {
+    showDescription: boolean;
+};
+declare const formStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        settings: {
+            content: string;
+            section: string;
+            sectionHeader: string;
+            sectionTitle: string;
+            sectionDescription: string;
+            fieldSet: string;
+            field: string;
+            fieldLabel: string;
+            fieldLabelText: string;
+            fieldDescription: string;
+            fieldControl: string;
+            fieldValidation: string;
+        };
+    };
+}, {
+    viewport: string;
+    content: string;
+    section: string;
+    group: string;
+    sectionHeader: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    fieldSet: string;
+    field: string;
+    fieldLabel: string;
+    fieldLabelText: string;
+    fieldDescription: string;
+    fieldControl: string;
+    fieldValidation: string;
+    actions: string;
+    submit: string;
+    fieldSetBody: string;
+    fieldSetBox: string;
+    fieldSetBoxOuter: string;
+}, undefined, {
+    variant: {
+        default: {};
+        settings: {
+            content: string;
+            section: string;
+            sectionHeader: string;
+            sectionTitle: string;
+            sectionDescription: string;
+            fieldSet: string;
+            field: string;
+            fieldLabel: string;
+            fieldLabelText: string;
+            fieldDescription: string;
+            fieldControl: string;
+            fieldValidation: string;
+        };
+    };
+}, {
+    viewport: string;
+    content: string;
+    section: string;
+    group: string;
+    sectionHeader: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    fieldSet: string;
+    field: string;
+    fieldLabel: string;
+    fieldLabelText: string;
+    fieldDescription: string;
+    fieldControl: string;
+    fieldValidation: string;
+    actions: string;
+    submit: string;
+    fieldSetBody: string;
+    fieldSetBox: string;
+    fieldSetBoxOuter: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        settings: {
+            content: string;
+            section: string;
+            sectionHeader: string;
+            sectionTitle: string;
+            sectionDescription: string;
+            fieldSet: string;
+            field: string;
+            fieldLabel: string;
+            fieldLabelText: string;
+            fieldDescription: string;
+            fieldControl: string;
+            fieldValidation: string;
+        };
+    };
+}, {
+    viewport: string;
+    content: string;
+    section: string;
+    group: string;
+    sectionHeader: string;
+    sectionTitle: string;
+    sectionDescription: string;
+    fieldSet: string;
+    field: string;
+    fieldLabel: string;
+    fieldLabelText: string;
+    fieldDescription: string;
+    fieldControl: string;
+    fieldValidation: string;
+    actions: string;
+    submit: string;
+    fieldSetBody: string;
+    fieldSetBox: string;
+    fieldSetBoxOuter: string;
+}, undefined, unknown, unknown, undefined>>;
+/** {@link Form} theme template: a tailwind-variants recipe (`styles`) plus non-class `behavior`. */
+export declare const formTheme: {
+    styles: import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: {};
+            settings: {
+                content: string;
+                section: string;
+                sectionHeader: string;
+                sectionTitle: string;
+                sectionDescription: string;
+                fieldSet: string;
+                field: string;
+                fieldLabel: string;
+                fieldLabelText: string;
+                fieldDescription: string;
+                fieldControl: string;
+                fieldValidation: string;
+            };
+        };
+    }, {
+        viewport: string;
+        content: string;
+        section: string;
+        group: string;
+        sectionHeader: string;
+        sectionTitle: string;
+        sectionDescription: string;
+        fieldSet: string;
+        field: string;
+        fieldLabel: string;
+        fieldLabelText: string;
+        fieldDescription: string;
+        fieldControl: string;
+        fieldValidation: string;
+        actions: string;
+        submit: string;
+        fieldSetBody: string;
+        fieldSetBox: string;
+        fieldSetBoxOuter: string;
+    }, undefined, {
+        variant: {
+            default: {};
+            settings: {
+                content: string;
+                section: string;
+                sectionHeader: string;
+                sectionTitle: string;
+                sectionDescription: string;
+                fieldSet: string;
+                field: string;
+                fieldLabel: string;
+                fieldLabelText: string;
+                fieldDescription: string;
+                fieldControl: string;
+                fieldValidation: string;
+            };
+        };
+    }, {
+        viewport: string;
+        content: string;
+        section: string;
+        group: string;
+        sectionHeader: string;
+        sectionTitle: string;
+        sectionDescription: string;
+        fieldSet: string;
+        field: string;
+        fieldLabel: string;
+        fieldLabelText: string;
+        fieldDescription: string;
+        fieldControl: string;
+        fieldValidation: string;
+        actions: string;
+        submit: string;
+        fieldSetBody: string;
+        fieldSetBox: string;
+        fieldSetBoxOuter: string;
+    }, import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: {};
+            settings: {
+                content: string;
+                section: string;
+                sectionHeader: string;
+                sectionTitle: string;
+                sectionDescription: string;
+                fieldSet: string;
+                field: string;
+                fieldLabel: string;
+                fieldLabelText: string;
+                fieldDescription: string;
+                fieldControl: string;
+                fieldValidation: string;
+            };
+        };
+    }, {
+        viewport: string;
+        content: string;
+        section: string;
+        group: string;
+        sectionHeader: string;
+        sectionTitle: string;
+        sectionDescription: string;
+        fieldSet: string;
+        field: string;
+        fieldLabel: string;
+        fieldLabelText: string;
+        fieldDescription: string;
+        fieldControl: string;
+        fieldValidation: string;
+        actions: string;
+        submit: string;
+        fieldSetBody: string;
+        fieldSetBox: string;
+        fieldSetBoxOuter: string;
+    }, undefined, unknown, unknown, undefined>>;
+    behavior: {
+        default: {
+            showDescription: false;
+        };
+        settings: {
+            showDescription: true;
+        };
+    };
+};
+/** Slot names of {@link formTheme.styles}, for `bridgeTv` registration. */
+export declare const formSlots: Array<keyof ReturnType<typeof formTheme.styles>>;
+export {};
+//# sourceMappingURL=Form.theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.theme.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAU,MAAM,gBAAgB,CAAC;AAE3D,mGAAmG;AACnG,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAElF,kEAAkE;AAClE,MAAM,MAAM,YAAY,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,CAAC;AAExD,QAAA,MAAM,UAAU;;QA4BV,OAAO;QACP,QAAQ;YACN,OAAO;YAGP,OAAO;YACP,aAAa;YACb,YAAY;YACZ,kBAAkB;YAElB,QAAQ;YACR,KAAK;YAML,UAAU;YACV,cAAc;YACd,gBAAgB;YAChB,YAAY;YACZ,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAOrB,CAAC;AAEH,oGAAoG;AACpG,eAAO,MAAM,SAAS;;;YA/BhB,OAAO;YACP,QAAQ;gBACN,OAAO;gBAGP,OAAO;gBACP,aAAa;gBACb,YAAY;gBACZ,kBAAkB;gBAElB,QAAQ;gBACR,KAAK;gBAML,UAAU;gBACV,cAAc;gBACd,gBAAgB;gBAChB,YAAY;gBACZ,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBtB,CAAC;AAEF,2EAA2E;AAE3E,eAAO,MAAM,SAAS,EAAsC,KAAK,CAAC,MAAM,UAAU,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Form.theme.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.theme.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.theme.test.ts"],"names":[],"mappings":""}