@dxos/react-ui-form 0.8.4-main.406dc2a → 0.8.4-main.4668b7de9b

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

@@ -0,0 +1,91 @@
+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 { 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 = {
+    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;
+} & Pick<FormFieldComponentProps, 'label' | 'readonly'>;
+export declare function FormFieldLabel({ label, error, readonly, asChild, path }: 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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"}

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

@@ -0,0 +1,9 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { type FormFieldComponentProps } from './FormFieldComponent';
+declare const DefaultStory: ({ type, placeholder, readonly, onBlur, onValueChange, ...props }: FormFieldComponentProps<string>) => React.JSX.Element;
+declare const meta: Meta<typeof DefaultStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=FormFieldComponent.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldComponent.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormFieldComponent.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,sBAAsB,CAAC;AAEtF,QAAA,MAAM,YAAY,qEAOf,uBAAuB,CAAC,MAAM,CAAC,sBAsBjC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;eAEa,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type AnyProperties } from '@dxos/echo/internal';
+import { type SchemaProperty } from '@dxos/effect';
+import { type FormHandlerProps } from '../../hooks';
+import { type FormFieldProps } from './FormField';
+export type FormFieldSetProps<T extends AnyProperties> = {
+    label?: string;
+    sort?: string[];
+    exclude?: (props: SchemaProperty[]) => SchemaProperty[];
+    /**
+     * Picks a named layout out of `FormLayoutAnnotation` when present.
+     * Falls back to `'default'`. Ignored when the schema has no annotation
+     * (linear rendering then takes over).
+     */
+    layoutName?: string;
+} & Pick<FormHandlerProps<T>, 'schema'> & Pick<FormFieldProps, 'path' | 'autoFocus' | 'readonly' | 'layout' | 'projection' | 'fieldMap' | 'fieldProvider' | 'createTypename' | 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap' | 'db' | 'useType' | 'getOptions' | 'onCreate'>;
+export declare function FormFieldSet({ label, schema, readonly, path, sort, exclude, projection, layout, layoutName, ...props }: FormFieldSetProps<any>): React.JSX.Element | null;
+export declare namespace FormFieldSet {
+    var displayName: string;
+}
+//# sourceMappingURL=FormFieldSet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldSet.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormFieldSet.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7D,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,CAAC;IACxD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GACrC,IAAI,CACF,cAAc,EACZ,MAAM,GACN,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,wBAAwB,GACxB,gBAAgB,GAChB,IAAI,GACJ,SAAS,GACT,YAAY,GACZ,UAAU,CACb,CAAC;qCAKyB,EAC3B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,UAAU,EACV,MAAM,EACN,UAAgC,EAChC,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,GAAG,CAAC"}

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

@@ -0,0 +1,19 @@
+/**
+ * A standalone context for the `tooltips` flag (Form.Root's only label
+ * decoration today: a JSON-path hover tooltip rendered by
+ * `FormFieldLabel`).
+ *
+ * Lives in its own module so that `FormFieldComponent.tsx` -- imported at
+ * the top of `Form.tsx` -- can read the flag without re-importing from
+ * `Form.tsx`. That round-trip used to create a circular module-eval
+ * dependency that intermittently hit a TDZ ("Cannot access 'FormFieldLabel'
+ * before initialization") in browser-mode storybook tests.
+ *
+ * Defaults to `true` both when `Form.Root` doesn't pass an explicit value
+ * AND when there is no enclosing `Form.Root` (e.g. `FormFieldWrapper`
+ * stories that render an input without a Form provider).
+ */
+export declare const FormTooltipsContext: import("react").Context<boolean>;
+/** Returns whether the enclosing `Form.Root` has field tooltips enabled. */
+export declare const useFormTooltips: () => boolean;
+//# sourceMappingURL=FormTooltipsContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTooltipsContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormTooltipsContext.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,kCAA+B,CAAC;AAEhE,4EAA4E;AAC5E,eAAO,MAAM,eAAe,QAAO,OAA0C,CAAC"}

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

@@ -0,0 +1,50 @@
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import React from 'react';
+import { type AnyProperties } from '@dxos/echo/internal';
+import { type FormFieldProps } from '../FormField';
+export type FormLayoutProps = {
+    /**
+     * Template string in the FormLayout DSL (`<grid cols=…><field name=…/></grid>`).
+     * If omitted, the layout is read from the schema's `FormLayoutAnnotation` —
+     * the entry named by `name` (default: `'default'`).
+     */
+    template?: string;
+    /**
+     * Picks a named layout out of `FormLayoutAnnotation`'s map when no
+     * explicit `template` is supplied. Defaults to `'default'`.
+     */
+    name?: string;
+} & Pick<FormFieldSetSubset, 'schema' | 'path' | 'readonly' | 'layout' | 'projection' | 'fieldMap' | 'fieldProvider'>;
+type FormFieldSetSubset = Pick<FormFieldProps, 'path' | 'readonly' | 'layout' | 'projection' | 'fieldMap' | 'fieldProvider'> & {
+    schema: Schema.Schema<AnyProperties>;
+};
+export declare function FormLayout({ schema, template, name, path, readonly, layout, projection, ...props }: FormLayoutProps): React.JSX.Element;
+export declare namespace FormLayout {
+    var displayName: string;
+}
+export type ResolvedLayoutField = {
+    /** Resolved leaf AST node for the field. */
+    type: SchemaAST.AST;
+    /** Path segments (dotted names split on `.`). */
+    segments: string[];
+    /** Last path segment; used to derive the field label when there is no `title` annotation. */
+    leafName: string;
+    /** Resolved `title` annotation for the field, if any. */
+    title?: string;
+    /**
+     * Set when the field resolves to a nested struct carrying a `LabelAnnotation` —
+     * the type literal whose computed label should render in place of the struct's
+     * sub-fields. Undefined for ordinary (non-auto-labelled) fields.
+     */
+    labelType?: SchemaAST.AST;
+};
+/**
+ * Resolves a (possibly dotted) layout field name against a schema.
+ * - `origin.code` drills through nested structs to the leaf field.
+ * - A name resolving to a nested struct with a `LabelAnnotation` is flagged via
+ *   `labelType` so the layout can auto-convert it to a single read-only label.
+ * Returns `undefined` when the name does not resolve to a property.
+ */
+export declare const resolveLayoutField: (schema: Schema.Schema<any>, name: string) => ResolvedLayoutField | undefined;
+//# sourceMappingURL=FormLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/Layout/FormLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,SAAS,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKzD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAO9D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC,CAAC;AAEtH,KAAK,kBAAkB,GAAG,IAAI,CAC5B,cAAc,EACd,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAC7E,GAAG;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;CACtC,CAAC;mCAcyB,EACzB,MAAM,EACN,QAAQ,EACR,IAA0B,EAC1B,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe;;;;AAyElB,MAAM,MAAM,mBAAmB,GAAG;IAChC,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC;IACpB,iDAAiD;IACjD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,6FAA6F;IAC7F,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC;CAC3B,CAAC;AA4BF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,WAAY,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,MAAM,KAAG,mBAAmB,GAAG,SA8BnG,CAAC"}

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

@@ -0,0 +1,119 @@
+import { type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React from 'react';
+import { Type } from '@dxos/echo';
+/**
+ * Sample schema: a Flight booking carries airline, flight number, route, dates,
+ * cabin class. Without an annotation `<Form.FieldSet/>` renders one field per
+ * row (see the `Linear` story). The `FormLayoutAnnotation` on this schema
+ * arranges the same fields in a 2-column grid with selective spans.
+ */
+declare const Flight: Type.Obj<{
+    readonly airline?: string | undefined;
+    readonly flightNumber?: string | undefined;
+    readonly origin?: string | undefined;
+    readonly destination?: string | undefined;
+    readonly departAt?: string | undefined;
+    readonly arriveAt?: string | undefined;
+    readonly cabin?: "business" | "economy" | "first" | "premium" | undefined;
+    readonly notes?: string | undefined;
+}, Schema.Struct.Fields>;
+export type Flight = Type.InstanceType<typeof Flight>;
+type StoryProps = {
+    schema: Schema.Schema<any>;
+    template?: string;
+};
+declare const meta: {
+    title: string;
+    render: ({ schema, template }: StoryProps) => React.JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
+    parameters: {
+        layout: string;
+        translations: [{
+            readonly 'en-US': {
+                readonly "@dxos/react-ui-form": {
+                    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 '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 = StoryObj<StoryProps>;
+/** Baseline: no annotation, no override — `Form.FieldSet` renders linearly (one field per row). */
+export declare const Linear: Story;
+/** `Form.Layout` invoked directly with a `template` prop, bypassing any annotation. */
+export declare const TemplateProp: Story;
+/** Schema carries `FormLayoutAnnotation`; `Form.FieldSet` auto-detects and delegates. */
+export declare const SchemaAnnotation: Story;
+export declare const NamedAnnotation: Story;
+export declare const NestedLabel: Story;
+/** Read-only static presentation: dates render human-readable; nested structs as labels. */
+export declare const NestedLabelStatic: Story;
+export declare const FormPlayground: Story;
+/** Same playground, but the form is rendered inside a `Card.Root` / `Card.Body`. */
+export declare const CardPlayground: Story;
+//# sourceMappingURL=FormLayout.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/Layout/FormLayout.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,EAA2B,IAAI,EAAE,MAAM,YAAY,CAAC;AAiB3D;;;;;GAKG;AACH,QAAA,MAAM,MAAM;;;;;;;;;wBAS0D,CAAC;AAEvE,MAAM,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAoFtD,KAAK,UAAU,GAAG;IAChB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAwBF,QAAA,MAAM,IAAI;;mCAtBkC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC1B,CAAC;eAEd,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,mGAAmG;AACnG,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAwCF,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAqCF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAwIF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC"}

package/dist/types/src/components/Form/Layout/FormLayout.stories.test.d.ts

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

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

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

package/dist/types/src/components/Form/Layout/FormLayout.test.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+/**
+ * Annotation carrying one or more named `FormLayout` DSL templates that
+ * control how `Form.FieldSet` / `Form.Layout` arrange a schema's fields.
+ * Callers select a variant via the `name` prop; the implicit name is
+ * `DEFAULT_LAYOUT_NAME` (`'default'`).
+ *
+ * Templates use a minimal XML grammar — see `parser.ts`. Example:
+ *
+ *   FormLayoutAnnotation.set({
+ *     default: `
+ *       <grid cols="2">
+ *         <field name="origin"/>
+ *         <field name="destination"/>
+ *         <field name="provider" span="2"/>
+ *       </grid>
+ *     `,
+ *     card: `
+ *       <grid cols="1">
+ *         <field name="provider"/>
+ *         <field name="number"/>
+ *       </grid>
+ *     `,
+ *   })
+ */
+export declare const FormLayoutAnnotationId: unique symbol;
+export type FormLayoutMap = Record<string, string>;
+export declare const FormLayoutAnnotation: import("@dxos/echo/internal").AnnotationHelper<FormLayoutMap>;
+/** Name used when no explicit variant is requested. */
+export declare const DEFAULT_LAYOUT_NAME = "default";
+//# sourceMappingURL=annotation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/Layout/annotation.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,sBAAsB,eAAsD,CAAC;AAE1F,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEnD,eAAO,MAAM,oBAAoB,+DAAgE,CAAC;AAElG,uDAAuD;AACvD,eAAO,MAAM,mBAAmB,YAAY,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from './annotation';
+export { FormLayout } from './FormLayout';
+export { LayoutParseError, parseLayout, type LayoutNode } from './parser';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/Layout/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,31 @@
+/**
+ * Minimal XML-style DSL for laying out schema fields in a grid.
+ *
+ * Grammar:
+ *   <grid cols="N">  ...children...  </grid>
+ *   <field name="x" span="N"/>
+ *
+ * - Attributes accept `"…"`, `'…'`, or unquoted integers.
+ * - Whitespace between tags is ignored. Text content (between tags) is forbidden.
+ * - Self-closing form (`<field … />`) is required for `field`; `grid` must use a closing tag.
+ *
+ * The parser is hand-rolled (no HTML parser) because the grammar is tiny.
+ */
+/** Node type for the parsed layout tree. */
+export type LayoutNode = {
+    readonly kind: 'grid';
+    readonly cols: number;
+    readonly children: readonly LayoutNode[];
+} | {
+    readonly kind: 'field';
+    readonly name: string;
+    readonly span?: number;
+};
+export declare class LayoutParseError extends Error {
+    readonly position?: number | undefined;
+    readonly _tag = "LayoutParseError";
+    constructor(message: string, position?: number | undefined);
+}
+/** Parses a layout template string into a single root node. The root must be `<grid>`. */
+export declare const parseLayout: (template: string) => LayoutNode;
+//# sourceMappingURL=parser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/Layout/parser.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,4CAA4C;AAC5C,MAAM,MAAM,UAAU,GAClB;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,UAAU,EAAE,CAAA;CAAE,GAC1F;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,qBAAa,gBAAiB,SAAQ,KAAK;IAIvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM;IAH5B,QAAQ,CAAC,IAAI,sBAAsB;IACnC,YACE,OAAO,EAAE,MAAM,EACN,QAAQ,CAAC,EAAE,MAAM,YAAA,EAG3B;CACF;AAuED,0FAA0F;AAC1F,eAAO,MAAM,WAAW,aAAc,MAAM,KAAG,UA+D9C,CAAC"}

package/dist/types/src/components/Form/Layout/parser.test.d.ts

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

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

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

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

@@ -0,0 +1,18 @@
+import * as SchemaAST from 'effect/SchemaAST';
+import React from 'react';
+import { type FormFieldProps } from '../FormField';
+import { type FormFieldStateProps } from '../FormFieldComponent';
+export type ArrayFieldProps = {
+    label: string;
+    fieldProps: FormFieldStateProps;
+} & FormFieldProps;
+export declare function ArrayField({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }: ArrayFieldProps): React.JSX.Element | null;
+export declare namespace ArrayField {
+    var displayName: string;
+}
+/**
+ * Returns the default empty value for a given AST.
+ * Used for initializing new array values etc.
+ */
+export declare const getDefaultValue: (ast?: SchemaAST.AST) => any;
+//# sourceMappingURL=ArrayField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/ArrayField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,SAAS,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAsB,MAAM,OAAO,CAAC;AAiB3C,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;CACjC,GAAG,cAAc,CAAC;mCAEQ,EACzB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EAAE,UAAU,EACtB,GAAG,KAAK,EACT,EAAE,eAAe;;;;AA+GlB;;;GAGG;AAEH,eAAO,MAAM,eAAe,SAAU,SAAS,CAAC,GAAG,KAAG,GAsBrD,CAAC"}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type FormFieldComponentProps } from '../FormFieldComponent';
+export declare const BooleanField: ({ type, readonly, onValueChange, ...props }: FormFieldComponentProps<boolean>) => React.JSX.Element;
+//# sourceMappingURL=BooleanField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/BooleanField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,uBAAuB,CAAC;AAEvF,eAAO,MAAM,YAAY,gDAAiD,uBAAuB,CAAC,OAAO,CAAC,sBAWzG,CAAC"}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type FormFieldComponentProps } from '../FormFieldComponent';
+export declare const DateField: ({ type, format, readonly, placeholder: _placeholder, onValueChange, onBlur: _onBlur, ...props }: FormFieldComponentProps<string>) => React.JSX.Element;
+//# sourceMappingURL=DateField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/DateField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,uBAAuB,CAAC;AAoCvF,eAAO,MAAM,SAAS,oGAQnB,uBAAuB,CAAC,MAAM,CAAC,sBA8CjC,CAAC"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type GeoPoint } from '@dxos/echo/internal';
+import { type FormFieldComponentProps } from '../FormFieldComponent';
+export declare const GeoPointField: ({ type, label, jsonPath, readonly, layout, getStatus, getValue, onValueChange, onBlur, }: FormFieldComponentProps<GeoPoint>) => React.JSX.Element | null;
+//# sourceMappingURL=GeoPointField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GeoPointField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/GeoPointField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMjE,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,uBAAuB,CAAC;AAErF,eAAO,MAAM,aAAa,6FAUvB,uBAAuB,CAAC,QAAQ,CAAC,6BAiFnC,CAAC"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type RefFieldProps } from './RefField';
+/**
+ * Renders a referenced object's own fields inline (a nested form bound to the
+ * target) rather than the {@link RefField} picker. Activated by
+ * `FormInlineAnnotation.set(true)` on the `Ref` property.
+ *
+ * The nested form edits the target object directly: each changed path is
+ * written back via `Obj.setValue` within an `Obj.update`, mirroring
+ * `ObjectProperties` (without the synthetic meta-tags row).
+ */
+export declare const InlineRefField: (props: RefFieldProps) => React.JSX.Element | null;
+//# sourceMappingURL=InlineRefField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineRefField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/InlineRefField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAmBpD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,UAAW,aAAa,6BAqDlD,CAAC"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type FormFieldComponentProps } from '../FormFieldComponent';
+/**
+ * Form field that edits a markdown value in a CodeMirror editor.
+ * Supports two backings:
+ * - `Schema.String` annotated with `Format.TypeFormat.Markdown`: edited as plain text via `getValue`/`onValueChange`.
+ * - `Ref<Text>` annotated with `Format.TypeFormat.Markdown`: edited in-place via an Automerge doc accessor.
+ *   When the ref is empty and a database is available, a create button is shown to allocate a new Text.
+ */
+export declare const MarkdownField: ({ type, readonly, label, jsonPath, placeholder, layout, db, getStatus, getValue, onValueChange, }: FormFieldComponentProps) => React.JSX.Element | null;
+//# sourceMappingURL=MarkdownField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/fields/MarkdownField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAYpD,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,uBAAuB,CAAC;AAKrF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,sGAWvB,uBAAuB,6BAgDzB,CAAC"}