entasis 0.10.1 → 0.11.0

package/dist/components/Avatar/avatar.theme.js

@@ -52,12 +52,14 @@ const defaultAvatarSuffix = cva({
         size: 'normal'
     }
 });
+// Small initials sit on the type scale's smallest step, so they tighten their tracking instead:
+// two bold capitals then fill the 24px circle in the same proportion the larger sizes do.
 const defaultAvatarInitials = cva({
     base: 'absolute bg-surface-floating bottom-0 w-full h-full text-center left-0 rounded-full flex items-center justify-center uppercase font-bold text-sm',
     variants: {
         size: {
             normal: 'text-sm',
-            small: 'text-xs',
+            small: 'text-xs tracking-tight',
             large: 'text-base'
         }
     },

package/dist/components/Avatar/avatarGroup.theme.js

@@ -1,11 +1,14 @@
 import { cva } from '../../utils/cva/index.js';
 import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+// Each size overlaps its neighbour by about a fifth of an avatar (7.2/32, 4.8/24, 8/40px), so a
+// stack reads the same at every size. Small used to overlap 0.4rem — over a quarter of its 24px —
+// which slid each circle across the end of the previous avatar's two-letter initials.
 const defaultAvatarGroup = cva({
     base: 'flex gap-[-0.25rem] items-center isolate ml-[0.3rem]',
     variants: {
         size: {
             normal: '[&>[data-avatar]]:ml-[-0.45rem]',
-            small: '[&>[data-avatar]]:ml-[-0.4rem]',
+            small: '[&>[data-avatar]]:ml-[-0.3rem]',
             large: '[&>[data-avatar]]:ml-[-0.5rem]'
         }
     },

package/dist/components/Form/Ask/ask.mcp.d.ts

@@ -1 +1 @@
-export declare const askDescription = "\n# Ask\n\nImport from `entasis/ask`.\n\nMount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.\n";
+export declare const askDescription = "\n# Ask\n\nImport from `entasis/ask`.\n\nMount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog, including input types the app registered with registerFormInputs (see Form), so a request can arrive as plain data. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.\n";

package/dist/components/Form/Ask/ask.mcp.js

@@ -3,5 +3,5 @@ export const askDescription = `
 
 Import from \`entasis/ask\`.
 
-Mount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.
+Mount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog, including input types the app registered with registerFormInputs (see Form), so a request can arrive as plain data. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.
 `;

package/dist/components/Form/Field/Field.svelte

@@ -1,6 +1,6 @@
-<script lang="ts" generics="Type extends InputType">
+<script lang="ts" generics="Type extends FieldType">
 	import Slot from '../../Slot/Slot.svelte';
-	import type { InputType, FieldProps } from './field.js';
+	import type { FieldType, FieldProps } from './field.js';
 	import { useFieldTheme } from './field.theme.js';
 
 	let {

package/dist/components/Form/Field/Field.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { InputType, FieldProps } from './field.js';
-declare function $$render<Type extends InputType>(): {
+import type { FieldType, FieldProps } from './field.js';
+declare function $$render<Type extends FieldType>(): {
     props: FieldProps<Type>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Type extends InputType> {
+declare class __sveltets_Render<Type extends FieldType> {
     props(): ReturnType<typeof $$render<Type>>['props'];
     events(): ReturnType<typeof $$render<Type>>['events'];
     slots(): ReturnType<typeof $$render<Type>>['slots'];
@@ -14,12 +14,12 @@ declare class __sveltets_Render<Type extends InputType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Type extends InputType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Type>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Type>['props']>, ReturnType<__sveltets_Render<Type>['events']>, ReturnType<__sveltets_Render<Type>['slots']>> & {
+    new <Type extends FieldType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Type>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Type>['props']>, ReturnType<__sveltets_Render<Type>['events']>, ReturnType<__sveltets_Render<Type>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Type>['bindings']>;
     } & ReturnType<__sveltets_Render<Type>['exports']>;
-    <Type extends InputType>(internal: unknown, props: ReturnType<__sveltets_Render<Type>['props']> & {}): ReturnType<__sveltets_Render<Type>['exports']>;
+    <Type extends FieldType>(internal: unknown, props: ReturnType<__sveltets_Render<Type>['props']> & {}): ReturnType<__sveltets_Render<Type>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Field: $$IsomorphicComponent;
-type Field<Type extends InputType> = InstanceType<typeof Field<Type>>;
+type Field<Type extends FieldType> = InstanceType<typeof Field<Type>>;
 export default Field;

package/dist/components/Form/Field/field.d.ts

@@ -4,6 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { FieldState } from './field.state.svelte.js';
 import type { FieldThemeProps } from './field.theme.js';
 import type { Density, Sizes } from '../../../types/theme.js';
+import type { FormInputRegistry } from '../Form/form.js';
 export type KeyValuePair = {
     key: string;
     value: string;
@@ -29,8 +30,15 @@ export type ColorInputType = 'color';
 export type FieldLabelPosition = 'top' | 'left';
 export type FieldAttributes = Omit<HTMLAttributes<HTMLElement>, 'class' | 'id'>;
 export type InputType = FileInputType | SliderRangeInputType | DateInputType | ColorInputType | NumberInputType | RatingInputType | VoiceInputType | TimeInputType | TextInputType | RichTextInputType | BooleanInputType | MultipleChoiceInputType | TagInputType | TagGroupInputType | KeyValueInputType | PinInputType | SingleOptionInputType | CalendarInputType;
-export type FieldValue<T extends InputType> = T extends 'file' ? File : T extends 'files' ? File[] : T extends DateInputType ? Date : T extends SliderRangeInputType ? number[] : T extends NumberInputType ? number : T extends RatingInputType ? number : T extends VoiceInputType ? Blob : T extends TimeInputType ? number : T extends TextInputType ? string : T extends RichTextInputType ? string : T extends PinInputType ? string : T extends BooleanInputType ? boolean : T extends MultipleChoiceInputType ? string[] : T extends TagInputType ? string[] : T extends TagGroupInputType ? string | string[] | null : T extends KeyValueInputType ? KeyValuePair[] : T extends SingleOptionInputType ? string : T extends 'calendar' ? Date : T extends 'calendar-range' ? [Date | null, Date | null] : T extends ColorInputType ? string : never;
-export type InputProps<T extends InputType> = WithSlot<{
+/** Input types an app registered: the keys of its `FormInputRegistry` augmentation. */
+export type RegisteredInputType = Extract<keyof FormInputRegistry, string>;
+/** Every type a field can carry: the built-in inputs and the ones an app registered. */
+export type FieldType = InputType | RegisteredInputType;
+type RegisteredInputValue<T extends RegisteredInputType> = FormInputRegistry[T] extends {
+    value: infer Value;
+} ? Value : unknown;
+export type FieldValue<T extends FieldType> = T extends RegisteredInputType ? RegisteredInputValue<T> : T extends 'file' ? File : T extends 'files' ? File[] : T extends DateInputType ? Date : T extends SliderRangeInputType ? number[] : T extends NumberInputType ? number : T extends RatingInputType ? number : T extends VoiceInputType ? Blob : T extends TimeInputType ? number : T extends TextInputType ? string : T extends RichTextInputType ? string : T extends PinInputType ? string : T extends BooleanInputType ? boolean : T extends MultipleChoiceInputType ? string[] : T extends TagInputType ? string[] : T extends TagGroupInputType ? string | string[] | null : T extends KeyValueInputType ? KeyValuePair[] : T extends SingleOptionInputType ? string : T extends 'calendar' ? Date : T extends 'calendar-range' ? [Date | null, Date | null] : T extends ColorInputType ? string : never;
+export type InputProps<T extends FieldType> = WithSlot<{
     /** Form field name, used as the key when the input is part of a Form. */
     name?: string;
     /** Marks the field as required for validation and shows the required indicator. */
@@ -64,7 +72,7 @@ export type InputProps<T extends InputType> = WithSlot<{
     /** Whether the field currently holds focus, bindable with `bind:focused`. */
     focused?: boolean;
 }, 'header' | 'label' | 'suffix' | 'prefix' | 'actions' | 'description' | 'helper' | 'footer' | 'error' | 'errorsContainer'>;
-export type FieldProps<T extends InputType> = Omit<InputProps<T>, 'type' | 'name' | 'required' | 'disabled' | 'visible' | 'onValidate' | 'onValueChange' | 'defaultValue' | 'value' | 'errors' | 'focused'> & {
+export type FieldProps<T extends FieldType> = Omit<InputProps<T>, 'type' | 'name' | 'required' | 'disabled' | 'visible' | 'onValidate' | 'onValueChange' | 'defaultValue' | 'value' | 'errors' | 'focused'> & {
     /** Native wrapper element; use fieldset for a group of controls. */
     as?: string;
     /** Control ID associated with the label, or false for an aria-labelledby label. */
@@ -76,3 +84,4 @@ export type FieldProps<T extends InputType> = Omit<InputProps<T>, 'type' | 'name
 };
 export declare const fieldStructure = "\n<Field>\n\t<Header>\n\t\t<Label />\n\t\t<Actions />\n\t</Header>\n\t<InputContainer>\n\t\t<Prefix />\n\t\t<Input />\n\t\t<Suffix />\n\t</InputContainer>\n\t<Footer>\n\t\t<Description />\n\t\t<Helper />\n\t</Footer>\n    <ErrorsContainer>\n        <Error />\n    </ErrorsContainer>\n</Field>\n";
 export declare const llmDescription = "\nThe field component is a versatile wrapper component for form inputs.\nThe field component is used to wrap form inputs and provide a consistent look and feel.\nIt's also used to provide a consistent way to handle errors and validation.\nUse it directly with createFieldState for standalone custom controls, or use a Form\ntype: 'field' entry to receive a registered controller in a snippet.\n\nThe field component is composed of the following parts:\n- Header\n- InputContainer\n- Footer\n- ErrorsContainer\n- Error\n- Description\n- Helper\n\nTo customize the field component, you can use the following snippets:\n\n- header: it is the wrapper for the label and actions.\n- label: it is the label for the field.\n- actions: it is the actions for the field.\n- footer: it is the wrapper for the description and helper.\n- errorsContainer: it is the wrapper for the error.\n- error: it is the error for the field.\n- description: it is the description for the field.\n- helper: it is the helper for the field.\n\nCompose snippets with the field controller captured in the parent component.\n\n";
+export {};

package/dist/components/Form/Field/field.state.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { FieldValue, InputType } from './field.js';
+import type { FieldType, FieldValue } from './field.js';
 import * as v from 'valibot';
 import type { Attachment } from 'svelte/attachments';
 import type { FormState } from '../Form/form.state.svelte.js';
 import type { Density, Sizes } from '../../../types/theme.js';
 export type FieldValidationResult = string | string[] | boolean | null | undefined;
-type FieldStateStaticOptions<T extends InputType> = {
+type FieldStateStaticOptions<T extends FieldType> = {
     type: T;
     name?: string;
     required?: boolean;
@@ -16,12 +16,12 @@ type FieldStateStaticOptions<T extends InputType> = {
     onValueChange?: (value: FieldValue<T> | null) => void;
     id: string;
 };
-type FieldStateBindableOptions<T extends InputType> = {
+type FieldStateBindableOptions<T extends FieldType> = {
     value?: FieldValue<T> | null;
     errors: string[] | boolean;
     focused: boolean;
 };
-export type FieldState<T extends InputType> = ReturnType<typeof createFieldState<T>>;
+export type FieldState<T extends FieldType> = ReturnType<typeof createFieldState<T>>;
 export type FieldControlAttributes = {
     id: string;
     name: string;
@@ -30,7 +30,7 @@ export type FieldControlAttributes = {
     'aria-invalid': 'true' | undefined;
     'aria-describedby': string | undefined;
 };
-export declare const createFieldState: <T extends InputType>(options: FieldStateBindableOptions<T> & FieldStateStaticOptions<T>) => {
+export declare const createFieldState: <T extends FieldType>(options: FieldStateBindableOptions<T> & FieldStateStaticOptions<T>) => {
     name: string;
     size: Sizes;
     density: Density;
@@ -47,38 +47,9 @@ export declare const createFieldState: <T extends InputType>(options: FieldState
     setValue: (nextValue: FieldValue<T> | null | undefined) => void;
     /** @internal Applies parent/Form state without echoing a control change callback. */
     syncValue: (nextValue: FieldValue<T> | null | undefined) => void;
-    checkSchema(value?: FieldValue<T> | null | undefined): v.SafeParseResult<{
-        number: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        select: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        color: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        date: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        file: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        files: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        "slider-range": v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        datetime: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        slider: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        rating: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        voice: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        time: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        text: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        password: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        email: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        url: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        textarea: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        phone: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        "rich-text": v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        switch: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        checkbox: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        checkboxes: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        tag: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        "tag-group": v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        keyvalue: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        pin: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        radio: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        combobox: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        calendar: v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-        "calendar-range": v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
-    }[T]>;
+    /** The registered definition behind an app-defined input type, if this field has one. */
+    get definition(): import("../Form/form.registry.js").RegisteredFormInputDefinition | undefined;
+    checkSchema(value?: FieldValue<T> | null | undefined): v.SafeParseResult<v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>>;
     get isValid(): boolean;
     validate: (value?: FieldValue<T> | null | undefined) => readonly [boolean, unknown];
     value?: FieldValue<T> | null | undefined;

package/dist/components/Form/Field/field.state.svelte.js

@@ -1,6 +1,7 @@
 import { createBindableStateClass } from '../../../utils/state.svelte.js';
 import * as v from 'valibot';
 import { schemas } from './schemas.js';
+import { getFormInputDefinition, getRegisteredInputSchema } from '../Form/form.registry.js';
 import { getContext, onDestroy, untrack } from 'svelte';
 const normalizeErrors = (validation) => {
     if (!validation)
@@ -116,8 +117,15 @@ export const createFieldState = (options) => {
             options.value = nextValue;
             localValue = options.value;
         };
+        /** The registered definition behind an app-defined input type, if this field has one. */
+        get definition() {
+            return getFormInputDefinition(this.type);
+        }
         checkSchema(value) {
-            const schema = schemas[this.required ? 'required' : 'optional'][this.type];
+            const definition = this.definition;
+            const schema = definition
+                ? getRegisteredInputSchema(definition, Boolean(this.required))
+                : schemas[this.required ? 'required' : 'optional'][this.type];
             return v.safeParse(schema, value);
         }
         get isValid() {
@@ -131,9 +139,18 @@ export const createFieldState = (options) => {
                 return [true, parseResult.output];
             }
             // We should only call onValidate if the value is not null or undefined and not an empty string when the field is not required
-            const shouldCallOnValidate = this.required || (value !== null && value !== undefined && value !== '');
-            if (this.onValidate && shouldCallOnValidate) {
-                this.errors = normalizeErrors(this.onValidate(value));
+            const definition = this.definition;
+            const shouldCallOnValidate = definition
+                ? !definition.isEmpty(value)
+                : this.required || (value !== null && value !== undefined && value !== '');
+            if (shouldCallOnValidate) {
+                // A registered type's own rule runs first; the entry's onValidate adds to it.
+                const errors = [
+                    ...normalizeErrors(definition?.validate?.(value)),
+                    ...normalizeErrors(this.onValidate?.(value))
+                ];
+                if (errors.length > 0)
+                    this.errors = errors;
             }
             return [this.hasError, parseResult.output];
         };

package/dist/components/Form/Form/Form.svelte

@@ -11,6 +11,7 @@
 	import type { FormProps } from './form.props.js';
 	import { useFormTheme } from './form.theme.js';
 	import { useForm } from './form.state.svelte.js';
+	import { isRegisteredFormInput } from './form.registry.js';
 	import { formCardSurfaceContextKey, type FormCardSurfaceContext } from './form.context.js';
 	let {
 		inputs,
@@ -118,7 +119,7 @@
 				className: [input.class, itemClass].filter(Boolean).join(' ')
 			})}
 		/>
-	{:else if input.type === 'field'}
+	{:else if input.type === 'field' || isRegisteredFormInput(input)}
 		<FormFieldRenderer {name} {input} {size} {density} {labelPosition} {itemClass} />
 	{:else}
 		<FormInputRenderer {name} {input} {size} {density} {labelPosition} {itemClass} />

package/dist/components/Form/Form/FormFieldRenderer.svelte

@@ -2,13 +2,46 @@
 	import { untrack, type Snippet } from 'svelte';
 	import type { Density, Sizes } from '../../../types/theme.js';
 	import Field from '../Field/Field.svelte';
-	import type { FieldLabelPosition, FieldValue, InputType } from '../Field/field.js';
+	import type { FieldLabelPosition, FieldType, FieldValue } from '../Field/field.js';
 	import {
 		createFieldState,
 		type FieldState,
 		type FieldValidationResult
 	} from '../Field/field.state.svelte.js';
-	import type { FormFieldEntry } from './form.js';
+	import type { FormFieldEntry, FormRegisteredInput } from './form.js';
+	import { getFormInputDefinition } from './form.registry.js';
+
+	// What the Field wrapper and the field controller consume from an entry; everything else on
+	// a registered entry belongs to its component.
+	const FIELD_ENTRY_KEYS = new Set([
+		'type',
+		'visible',
+		'class',
+		'name',
+		'required',
+		'disabled',
+		'size',
+		'density',
+		'labelPosition',
+		'onValidate',
+		'onValueChange',
+		'fieldAttrs',
+		'theme',
+		'value',
+		'defaultValue',
+		'errors',
+		'focused',
+		'header',
+		'label',
+		'actions',
+		'description',
+		'helper',
+		'footer',
+		'error',
+		'errorsContainer',
+		'prefix',
+		'suffix'
+	]);
 
 	let {
 		name,
@@ -19,7 +52,8 @@
 		itemClass
 	}: {
 		name: string;
-		input: FormFieldEntry;
+		/** A `type: 'field'` entry with its snippet, or an entry of an app-registered type. */
+		input: FormFieldEntry | FormRegisteredInput;
 		size: Sizes;
 		density: Density;
 		labelPosition?: FieldLabelPosition;
@@ -28,18 +62,18 @@
 
 	const id = $props.id();
 	const initialInput = untrack(() => input);
-	let value = $state<FieldValue<InputType> | null>(
+	let value = $state<FieldValue<FieldType> | null>(
 		(initialInput.value === undefined
 			? (initialInput.defaultValue ?? null)
-			: initialInput.value) as FieldValue<InputType> | null
+			: initialInput.value) as FieldValue<FieldType> | null
 	);
 	let errors = $state<string[] | boolean>(initialInput.errors ?? []);
 	let focused = $state(initialInput.focused ?? false);
 
-	const field = createFieldState<InputType>({
+	const field = createFieldState<FieldType>({
 		id,
 		get type() {
-			return input.fieldType;
+			return input.type === 'field' ? input.fieldType : input.type;
 		},
 		get name() {
 			return name;
@@ -76,10 +110,10 @@
 		},
 		get onValidate() {
 			return input.onValidate as
-				((value: FieldValue<InputType>) => FieldValidationResult) | undefined;
+				((value: FieldValue<FieldType>) => FieldValidationResult) | undefined;
 		},
 		get onValueChange() {
-			return input.onValueChange as ((value: FieldValue<InputType> | null) => void) | undefined;
+			return input.onValueChange as ((value: FieldValue<FieldType> | null) => void) | undefined;
 		},
 		visible: true
 	});
@@ -87,7 +121,15 @@
 	const resolvedSize = $derived(input.size ?? size);
 	const resolvedLabelPosition = $derived(input.labelPosition ?? labelPosition);
 	const className = $derived([input.class, itemClass].filter(Boolean).join(' ') || undefined);
-	const controlSnippet = $derived(input.snippet as Snippet<[field: FieldState<InputType>]>);
+	const controlSnippet = $derived(
+		input.type === 'field' ? (input.snippet as Snippet<[field: FieldState<FieldType>]>) : undefined
+	);
+	const Control = $derived(
+		input.type === 'field' ? undefined : getFormInputDefinition(input.type)?.component
+	);
+	const controlProps = $derived(
+		Object.fromEntries(Object.entries(input).filter(([key]) => !FIELD_ENTRY_KEYS.has(key)))
+	);
 </script>
 
 <Field
@@ -109,5 +151,9 @@
 	prefix={input.prefix}
 	suffix={input.suffix}
 >
-	{@render controlSnippet(field)}
+	{#if controlSnippet}
+		{@render controlSnippet(field)}
+	{:else if Control}
+		<Control {...controlProps} {field} />
+	{/if}
 </Field>

package/dist/components/Form/Form/FormFieldRenderer.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Density, Sizes } from '../../../types/theme.js';
 import type { FieldLabelPosition } from '../Field/field.js';
-import type { FormFieldEntry } from './form.js';
+import type { FormFieldEntry, FormRegisteredInput } from './form.js';
 type $$ComponentProps = {
     name: string;
-    input: FormFieldEntry;
+    /** A `type: 'field'` entry with its snippet, or an entry of an app-registered type. */
+    input: FormFieldEntry | FormRegisteredInput;
     size: Sizes;
     density: Density;
     labelPosition?: FieldLabelPosition;

package/dist/components/Form/Form/form.d.ts

@@ -1,5 +1,5 @@
-import type { FieldLabelPosition, FieldValue, InputProps, InputType } from '../Field/field.js';
-import type { FieldState } from '../Field/field.state.svelte.js';
+import type { FieldLabelPosition, FieldType, FieldValue, InputProps, InputType, RegisteredInputType } from '../Field/field.js';
+import type { FieldState, FieldValidationResult } from '../Field/field.state.svelte.js';
 import type { TextInputProps } from '../TextInput/textInput.props.js';
 import type { NumberInputProps } from '../NumberInput/numberInput.props.js';
 import type { RatingInputProps } from '../RatingInput/ratingInput.props.js';
@@ -28,10 +28,50 @@ import type { KeyValueInputProps } from '../KeyValueInput/keyValueInput.props.js
 import type { PinInputProps } from '../PinInput/pinInput.props.js';
 import type { Slot } from '../../Slot/slot.js';
 import type { ButtonProps } from '../../Button/index.js';
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { FormState } from './form.state.svelte.js';
 export type MaybePromise<T> = T | Promise<T>;
-export type FormValueRecord = Record<string, FieldValue<InputType> | null | undefined>;
+/**
+ * Input types an app adds to Form, ask() and every other Form-driven surface. Empty in the
+ * library; an app augments it once per custom input, naming the value the input holds and the
+ * props its entries take:
+ *
+ * ```ts
+ * declare module 'entasis/form' {
+ *   interface FormInputRegistry {
+ *     money: { value: { amount: number; currency: string }; props: { currencies?: string[] } };
+ *   }
+ * }
+ * ```
+ *
+ * Entries then read `{ type: 'money', label: 'Price', currencies: ['EUR'] }`, plain data that
+ * serializes, and the form value infers `money`'s value. Pair each key with
+ * `registerFormInputs`, which supplies the component that renders it.
+ */
+export interface FormInputRegistry {
+}
+type RegisteredInputProps<T extends RegisteredInputType> = FormInputRegistry[T] extends {
+    props: infer Props;
+} ? Props : Record<never, never>;
+/** Props of the component that renders a registered input: its entry props and its field. */
+export type FormInputComponentProps<T extends RegisteredInputType> = RegisteredInputProps<T> & {
+    /** The field Form registered for the entry: value, errors, and control attributes. */
+    field: FieldState<T>;
+};
+/** How a registered input renders and validates; see `registerFormInputs`. */
+export type FormInputDefinition<T extends RegisteredInputType = RegisteredInputType> = {
+    /**
+     * Renders the control. Form wraps it in Field (label, description, errors), so it renders
+     * the control alone: spread `field.controlAttrs`, attach `field.control`, and report edits
+     * with `field.setValue`.
+     */
+    component: Component<FormInputComponentProps<T>>;
+    /** What `required` rejects. Defaults to null, undefined, an empty string, and an empty array. */
+    isEmpty?: (value: FieldValue<T>) => boolean;
+    /** Validation every entry of this type gets, before the entry's own `onValidate`. */
+    validate?: (value: FieldValue<T>) => FieldValidationResult;
+};
+export type FormValueRecord = Record<string, FieldValue<FieldType> | null | undefined>;
 type FormVisibility = boolean | ((value: FormValueRecord) => boolean);
 type FormButtonAction<State> = ButtonProps & {
     /** Called with the live form state when the action is activated. */
@@ -152,8 +192,12 @@ export type FormFieldEntry<T extends InputType = InputType> = T extends InputTyp
     /** Renders the control with its registered, bindable FieldState controller. */
     snippet: Snippet<[field: FormFieldController<T>]>;
 } : never;
-export type FormValueInput = FormFieldInput | FormFieldEntry;
-export type FormRenderableInput = FormFieldInput | FormFieldEntry | FormActionInput | FormCustomInput;
+/** An entry of a type the app registered through `FormInputRegistry` and `registerFormInputs`. */
+export type FormRegisteredInput<T extends RegisteredInputType = RegisteredInputType> = T extends RegisteredInputType ? BaseFormRenderableInput & Omit<InputProps<T>, 'class' | 'name' | 'visible'> & RegisteredInputProps<T> & {
+    type: T;
+} : never;
+export type FormValueInput = FormFieldInput | FormFieldEntry | FormRegisteredInput;
+export type FormRenderableInput = FormFieldInput | FormFieldEntry | FormRegisteredInput | FormActionInput | FormCustomInput;
 export type FormGroupInputs = Record<string, FormRenderableInput>;
 export type FormGroupColumns = 1 | 2 | 3 | 4;
 export type FormGroup<I extends FormGroupInputs = FormGroupInputs> = {
@@ -196,7 +240,7 @@ type BindFormInputState<Input, I extends FormInputs> = Input extends {
 export type FormInputsWithState<I extends FormInputs> = string extends keyof I ? I : {
     [K in keyof I]: BindFormInputState<I[K], I>;
 };
-type FormValueInputType<T extends FormValueInput> = T extends FormFieldEntry<infer Input> ? Input : T extends FormFieldInput ? T['type'] : never;
+type FormValueInputType<T extends FormValueInput> = T extends FormFieldEntry<infer Input> ? Input : T extends FormFieldInput | FormRegisteredInput ? T['type'] : never;
 type InferInputValue<T extends FormValueInput> = T['required'] extends true ? NonNullable<FieldValue<FormValueInputType<T>>> : FieldValue<FormValueInputType<T>> | null;
 type UnionToIntersection<U> = (U extends unknown ? (value: U) => void : never) extends (value: infer I) => void ? I : never;
 type Simplify<T> = {
@@ -240,6 +284,6 @@ export type FlatFormField = {
     path: string;
 };
 export declare function flattenFormInputs(inputs: FormInputs): FlatFormField[];
-export declare const getFormValueInputType: (input: FormValueInput) => InputType;
+export declare const getFormValueInputType: (input: FormValueInput) => FieldType;
 export type FormSubmitHandler<T extends FormInputs> = (value: InferFormValue<T>) => MaybePromise<unknown | void>;
 export {};

package/dist/components/Form/Form/form.mcp.d.ts

@@ -1 +1 @@
-export declare const formDescription = "\n# Form\n\nForm renders configured entasis fields inside a div, owns their state and validation, and submits programmatically. It provides managed Enter-key navigation and submission, but not native form events, browser constraint validation, or FormData behavior.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport {\n\t\tForm,\n\t\ttype FormState,\n\t\ttype InferFormValue,\n\t\ttype LiveFormValue\n\t} from 'entasis/form';\n\n\tconst inputs = {\n\t\tidentity: {\n\t\t\ttype: 'group',\n\t\t\tlabel: 'Identity',\n\t\t\tdescription: 'Core account details',\n\t\t\tcolumns: 2,\n\t\t\tinputs: {\n\t\t\t\tname: { type: 'text', label: 'Name', required: true },\n\t\t\t\temail: { type: 'email', label: 'Email', required: true }\n\t\t\t}\n\t\t}\n\t} as const;\n\n\tlet value = $state<LiveFormValue<typeof inputs>>({ name: 'Ada' });\n\tlet form = $state<FormState<typeof inputs>>();\n\tlet submitted = $state<InferFormValue<typeof inputs> | null>(null);\n</script>\n\n<Form\n\t{inputs}\n\tbind:value\n\tbind:form\n\tvariant=\"card\"\n\tlayout=\"horizontal\"\n\tsize=\"small\"\n\tdensity=\"normal\"\n\tactions={[\n\t\t{\n\t\t\tchildren: 'Save',\n\t\t\tonAction: (payload) => payload.submit()\n\t\t}\n\t]}\n\tonSubmit={(validatedValue) => {\n\t\tsubmitted = validatedValue;\n\t}}\n/>\n```\n\n## Props\n\n- **inputs** (required): ordered object keyed by entry name. Entries may be value-bearing fields, visual groups, action-button rows, or custom snippets. Only fields contribute keys to the live and validated values.\n- **value** (bindable): controlled partial live value. Visible mounted fields are published; hidden fields are omitted. A supplied top-level value takes precedence over an input's configured value.\n- **defaultValue**: initial partial live value when value is omitted.\n- **onValueChange**: called once when a user changes the visible live value. Parent value updates do not emit it.\n- **form** (bindable): the FormState instance.\n- **onSubmit**: called with the validated visible payload. Its return value is ignored; rejected promises propagate.\n- **size**: small, normal (default), or large. Controls Form typography and becomes the fallback size for fields and actions. An explicit field or action size takes precedence.\n- **density**: compact, normal (default), or comfortable. Controls gaps between the Form header, fields, footer, and actions independently from size.\n- **variant**: plain (default), sectioned, or card. All variants consume the shared Card typography. Plain remains transparent without separators. Sectioned stays transparent and adds edge-to-edge separators between the header, visible top-level fields or groups, and footer. Card adds the same separators inside the Card surface and inset; Card header/footer padding applies only to that variant. Separators do not appear between fields inside a group.\n- **layout**: vertical (default) or horizontal. Horizontal keeps one field per row and places labels to the left once each field is at least 32rem wide; fields remain stacked in narrower forms.\n- **actions**: optional array of Button props. Each action's onAction receives the live FormState, so a submit action calls form.submit(). Actions are disabled while the form is submitting; their own loading and disabled props are composed with that protection.\n- **class**: additional classes on the root div.\n- **theme**: Form theme overrides for root, header, title, description, group, group label/description/fields, top-level items, custom entries, footer, and actions. Global Card typography and section-rhythm changes flow into all Form variants before Form-specific overrides are composed; Card surface changes apply only to the card variant.\n\nThe **header**, **title**, **description**, **children**, and **footer** snippets each receive the FormState instance directly. No-argument snippets remain valid.\n\nField wrapper attributes and native control attributes have separate owners. Use fieldAttrs for the shared Field wrapper. Controls expose a typed bag for their actual native element, such as inputAttrs on TextInput, textareaAttrs on TextArea, and triggerAttrs on the custom Select's combobox button.\n\n## FormState\n\n- **value**: current visible partial value.\n- **loading**: true while the active submission handler is pending.\n- **hasError**: true after validation fails; reset after successful validation.\n- **validate()**: returns the validated visible payload, or false.\n- **submit()**: returns a promise of the validated visible payload, or false. Concurrent calls share the active promise.\n\n## Enter-key behavior\n\nOn an enabled, editable single-line input, Enter validates the current field. A valid field moves focus to the next visible enabled field, while an invalid field remains focused and displays its errors. Enter on a valid final navigable field calls form.submit(). Multiline editors and controls that already own Enter, such as selects and combobox menus, keep their native component behavior. Modified, repeated, and IME-composition Enter events are ignored.\n\n## Programmatic Dialog forms\n\nMount one Ask host near the application root, then call ask() from any client-side event. Both exports come from entasis/form:\n\n```svelte\n<script lang=\"ts\">\n\timport { Ask, ask } from 'entasis/form';\n\n\tconst inputs = {\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\temail: { type: 'email', label: 'Email', required: true }\n\t} as const;\n\n\tasync function editProfile() {\n\t\tconst outcome = await ask({\n\t\t\ttitle: 'Edit profile',\n\t\t\tdescription: 'Review the account details.',\n\t\t\tinputs,\n\t\t\tvalue: { name: 'Ada' },\n\t\t\tconfirm: 'Save',\n\t\t\tcancel: 'Cancel'\n\t\t});\n\n\t\tif (outcome.submitted) {\n\t\t\t// outcome.value is InferFormValue<typeof inputs>\n\t\t} else {\n\t\t\t// outcome.value is the partial, visible live value at cancellation\n\t\t}\n\t}\n</script>\n\n<Ask />\n```\n\nAskOptions accepts inputs, value, onSubmit, class, size, density, variant, layout, and theme with the same contracts as Form. title is required for the Dialog's accessible name. confirm and cancel accept a string or Button presentation props plus text. Their click, loading, link, and native type behavior is owned by Ask. Set type on the mounted Ask host for its default Dialog type; a request's optional dialog object may override type and also accepts responsive, size, and scroll.\n\nValidation failures keep the Dialog open and focus the first invalid field. A successful submission resolves with the validated visible payload. Cancel, the close button, and Escape resolve with submitted: false and the current partial visible value. Outside-click and swipe dismissal are disabled. While submission is active, all close paths and actions are protected. Rejected onSubmit promises reject ask() after the Dialog closes. Concurrent ask() calls render as independent stacked Dialogs. Calling ask() during SSR or without one mounted host rejects clearly.\n\n## Visibility and values\n\nThe visible prop may be a boolean or a predicate receiving the complete private value cache:\n\n```svelte\n<Form\n\tinputs={{\n\t\tcontactMethod: {\n\t\t\ttype: 'select',\n\t\t\tlabel: 'Contact method',\n\t\t\titems: [\n\t\t\t\t{ label: 'Email', value: 'email' },\n\t\t\t\t{ label: 'Phone', value: 'phone' }\n\t\t\t]\n\t\t},\n\t\tphone: {\n\t\t\ttype: 'phone',\n\t\t\tlabel: 'Phone',\n\t\t\tvisible: (value) => value.contactMethod === 'phone'\n\t\t}\n\t}}\n/>\n```\n\nHidden field values are preserved privately and restored when shown again. Hidden fields are excluded from value, validation, and submission. Removing an input definition removes its cached value.\n\n## Field label position\n\nAll configured inputs inherit the Form layout through the shared Field wrapper. Set labelPosition: 'top' or 'left' on an individual input to override the Form layout without affecting value inference:\n\n```ts\nexport const inputs = {\n\tname: { type: 'text', label: 'Name' },\n\tnotes: { type: 'textarea', label: 'Notes', labelPosition: 'top' }\n} as const;\n```\n\nThe left position becomes a two-column label/control layout once the field is at least 32rem wide and remains stacked in narrower forms. The breakpoint is a container query against the field, so a form in a narrow drawer stacks on any screen. Form uses layout rather than orientation so controls such as Slider retain their own orientation prop.\n\n## Visual groups\n\nA group renders a transparent semantic fieldset with a required legend label and an optional description. Its label and description use the same size scale as ordinary fields; grouping does not add another card or padded container:\n\n```ts\nimport type { InferFormValue } from 'entasis/form';\n\nexport const inputs = {\n\tcontact: {\n\t\ttype: 'group',\n\t\tlabel: 'Contact details',\n\t\tdescription: 'How we can reach you',\n\t\tcolumns: 1,\n\t\tinputs: {\n\t\t\temail: { type: 'email', label: 'Email', required: true },\n\t\t\tphone: { type: 'phone', label: 'Phone' }\n\t\t}\n\t}\n} as const;\n\ntype Value = InferFormValue<typeof inputs>;\n// { email: string; phone: string | null }\n```\n\nThe group key is visual only and never appears in value or submission output. Descendant field names remain top-level, so duplicate names across groups are rejected. Group visibility hides all descendants, preserves field values in the private cache, and makes inferred field keys optional. In a vertical form layout, set columns to 1, 2, 3, or 4 to control the equal-width grid; the count is a container query against the form width (2 columns from 42rem, 3 from 56rem, 4 from 72rem), and groups collapse to one column in narrower forms. Horizontal form layouts ignore columns and always render group entries in one column. A child class may span tracks when an entry needs more room. Groups may contain fields, action rows, and custom snippets; nested groups are intentionally unsupported.\n\n## Custom value fields\n\nUse type: 'field' when Form must own a value but a custom control must render it. fieldType selects the existing FieldState schema and inferred value type. The snippet receives that registered FieldState controller:\n\n```svelte\n{#snippet handleControl(field)}\n\t<input\n\t\t{...field.controlAttrs}\n\t\t{@attach field.control}\n\t\tbind:value={field.value}\n\t/>\n{/snippet}\n\n<Form\n\tinputs={{\n\t\thandle: {\n\t\t\ttype: 'field',\n\t\t\tfieldType: 'text',\n\t\t\tlabel: 'Handle',\n\t\t\trequired: true,\n\t\t\tsnippet: handleControl\n\t\t}\n\t}}\n/>\n```\n\nThe controller exposes value, disabled, required, validation state, accessible ids, controlAttrs, and the control attachment. The entry participates in bind:value, visibility, validation, submission, and InferFormValue through the same FieldState owner as built-in controls.\n\n## Non-value entries\n\nUse type: 'action' to place a labelled row of buttons in the ordered inputs flow. It accepts optional label and description content plus the same Form-aware action objects as the top-level actions prop. Its label position follows the Form layout unless labelPosition overrides it. Form size is the default button size, action density follows the Form, and loading or disabled protection cannot be overridden while the Form is submitting.\n\nUse type: 'custom' to place a snippet in the flow. The snippet receives the live public FormState and owns its own surface and padding; Form adds neither. Both entry types support class and visible, may appear at the top level or inside a group, and are omitted from bind:value, validation, and inferred submission output:\n\n```svelte\n{#snippet accountStatus(form)}\n\t<p>{Object.keys(form.value).length} visible values</p>\n{/snippet}\n\n<Form\n\tinputs={{\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\tstatus: { type: 'custom', snippet: accountStatus },\n\t\tcontrols: {\n\t\t\ttype: 'action',\n\t\t\tlabel: 'Account actions',\n\t\t\tdescription: 'Validate or save this account.',\n\t\t\tactions: [\n\t\t\t\t{ children: 'Validate', variant: 'soft', onAction: (payload) => payload.validate() },\n\t\t\t\t{ children: 'Save', onAction: (payload) => payload.submit() }\n\t\t\t]\n\t\t}\n\t}}\n/>\n```\n\nFor this configuration, InferFormValue contains name only; status and controls are presentation keys.\n\n## Validation\n\nBuilt-in validation uses the field schema and preserves its issue messages. onValidate may return:\n\n- false, null, undefined, an empty string, or an empty array for valid input;\n- true for a generic error;\n- a string for one error;\n- a string array for multiple errors.\n\nValidation runs on submission. After a field has an error, it revalidates while edited. Failed submission scrolls to and focuses the first invalid control.\n\n## Supported input types\n\ntext, email, url, password, number, rating, voice, slider, slider-range, textarea, rich-text, select, combobox, radio, checkboxes, checkbox, switch, phone, calendar, calendar-range, date, datetime, color, file, files, tag-group, tag, keyvalue, pin, and time.\n\nAlternative displays are display: 'selector' for date and calendar-range, and display: 'picker' for color.\n\nfield is the custom value-bearing entry. group, action, and custom are structural visual nodes rather than value-bearing input types.\n";
+export declare const formDescription = "\n# Form\n\nForm renders configured entasis fields inside a div, owns their state and validation, and submits programmatically. It provides managed Enter-key navigation and submission, but not native form events, browser constraint validation, or FormData behavior.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n\timport {\n\t\tForm,\n\t\ttype FormState,\n\t\ttype InferFormValue,\n\t\ttype LiveFormValue\n\t} from 'entasis/form';\n\n\tconst inputs = {\n\t\tidentity: {\n\t\t\ttype: 'group',\n\t\t\tlabel: 'Identity',\n\t\t\tdescription: 'Core account details',\n\t\t\tcolumns: 2,\n\t\t\tinputs: {\n\t\t\t\tname: { type: 'text', label: 'Name', required: true },\n\t\t\t\temail: { type: 'email', label: 'Email', required: true }\n\t\t\t}\n\t\t}\n\t} as const;\n\n\tlet value = $state<LiveFormValue<typeof inputs>>({ name: 'Ada' });\n\tlet form = $state<FormState<typeof inputs>>();\n\tlet submitted = $state<InferFormValue<typeof inputs> | null>(null);\n</script>\n\n<Form\n\t{inputs}\n\tbind:value\n\tbind:form\n\tvariant=\"card\"\n\tlayout=\"horizontal\"\n\tsize=\"small\"\n\tdensity=\"normal\"\n\tactions={[\n\t\t{\n\t\t\tchildren: 'Save',\n\t\t\tonAction: (payload) => payload.submit()\n\t\t}\n\t]}\n\tonSubmit={(validatedValue) => {\n\t\tsubmitted = validatedValue;\n\t}}\n/>\n```\n\n## Props\n\n- **inputs** (required): ordered object keyed by entry name. Entries may be value-bearing fields, visual groups, action-button rows, or custom snippets. Only fields contribute keys to the live and validated values.\n- **value** (bindable): controlled partial live value. Visible mounted fields are published; hidden fields are omitted. A supplied top-level value takes precedence over an input's configured value.\n- **defaultValue**: initial partial live value when value is omitted.\n- **onValueChange**: called once when a user changes the visible live value. Parent value updates do not emit it.\n- **form** (bindable): the FormState instance.\n- **onSubmit**: called with the validated visible payload. Its return value is ignored; rejected promises propagate.\n- **size**: small, normal (default), or large. Controls Form typography and becomes the fallback size for fields and actions. An explicit field or action size takes precedence.\n- **density**: compact, normal (default), or comfortable. Controls gaps between the Form header, fields, footer, and actions independently from size.\n- **variant**: plain (default), sectioned, or card. All variants consume the shared Card typography. Plain remains transparent without separators. Sectioned stays transparent and adds edge-to-edge separators between the header, visible top-level fields or groups, and footer. Card adds the same separators inside the Card surface and inset; Card header/footer padding applies only to that variant. Separators do not appear between fields inside a group.\n- **layout**: vertical (default) or horizontal. Horizontal keeps one field per row and places labels to the left once each field is at least 32rem wide; fields remain stacked in narrower forms.\n- **actions**: optional array of Button props. Each action's onAction receives the live FormState, so a submit action calls form.submit(). Actions are disabled while the form is submitting; their own loading and disabled props are composed with that protection.\n- **class**: additional classes on the root div.\n- **theme**: Form theme overrides for root, header, title, description, group, group label/description/fields, top-level items, custom entries, footer, and actions. Global Card typography and section-rhythm changes flow into all Form variants before Form-specific overrides are composed; Card surface changes apply only to the card variant.\n\nThe **header**, **title**, **description**, **children**, and **footer** snippets each receive the FormState instance directly. No-argument snippets remain valid.\n\nField wrapper attributes and native control attributes have separate owners. Use fieldAttrs for the shared Field wrapper. Controls expose a typed bag for their actual native element, such as inputAttrs on TextInput, textareaAttrs on TextArea, and triggerAttrs on the custom Select's combobox button.\n\n## FormState\n\n- **value**: current visible partial value.\n- **loading**: true while the active submission handler is pending.\n- **hasError**: true after validation fails; reset after successful validation.\n- **validate()**: returns the validated visible payload, or false.\n- **submit()**: returns a promise of the validated visible payload, or false. Concurrent calls share the active promise.\n\n## Enter-key behavior\n\nOn an enabled, editable single-line input, Enter validates the current field. A valid field moves focus to the next visible enabled field, while an invalid field remains focused and displays its errors. Enter on a valid final navigable field calls form.submit(). Multiline editors and controls that already own Enter, such as selects and combobox menus, keep their native component behavior. Modified, repeated, and IME-composition Enter events are ignored.\n\n## Programmatic Dialog forms\n\nMount one Ask host near the application root, then call ask() from any client-side event. Both exports come from entasis/form:\n\n```svelte\n<script lang=\"ts\">\n\timport { Ask, ask } from 'entasis/form';\n\n\tconst inputs = {\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\temail: { type: 'email', label: 'Email', required: true }\n\t} as const;\n\n\tasync function editProfile() {\n\t\tconst outcome = await ask({\n\t\t\ttitle: 'Edit profile',\n\t\t\tdescription: 'Review the account details.',\n\t\t\tinputs,\n\t\t\tvalue: { name: 'Ada' },\n\t\t\tconfirm: 'Save',\n\t\t\tcancel: 'Cancel'\n\t\t});\n\n\t\tif (outcome.submitted) {\n\t\t\t// outcome.value is InferFormValue<typeof inputs>\n\t\t} else {\n\t\t\t// outcome.value is the partial, visible live value at cancellation\n\t\t}\n\t}\n</script>\n\n<Ask />\n```\n\nAskOptions accepts inputs, value, onSubmit, class, size, density, variant, layout, and theme with the same contracts as Form. title is required for the Dialog's accessible name. confirm and cancel accept a string or Button presentation props plus text. Their click, loading, link, and native type behavior is owned by Ask. Set type on the mounted Ask host for its default Dialog type; a request's optional dialog object may override type and also accepts responsive, size, and scroll.\n\nValidation failures keep the Dialog open and focus the first invalid field. A successful submission resolves with the validated visible payload. Cancel, the close button, and Escape resolve with submitted: false and the current partial visible value. Outside-click and swipe dismissal are disabled. While submission is active, all close paths and actions are protected. Rejected onSubmit promises reject ask() after the Dialog closes. Concurrent ask() calls render as independent stacked Dialogs. Calling ask() during SSR or without one mounted host rejects clearly.\n\n## Visibility and values\n\nThe visible prop may be a boolean or a predicate receiving the complete private value cache:\n\n```svelte\n<Form\n\tinputs={{\n\t\tcontactMethod: {\n\t\t\ttype: 'select',\n\t\t\tlabel: 'Contact method',\n\t\t\titems: [\n\t\t\t\t{ label: 'Email', value: 'email' },\n\t\t\t\t{ label: 'Phone', value: 'phone' }\n\t\t\t]\n\t\t},\n\t\tphone: {\n\t\t\ttype: 'phone',\n\t\t\tlabel: 'Phone',\n\t\t\tvisible: (value) => value.contactMethod === 'phone'\n\t\t}\n\t}}\n/>\n```\n\nHidden field values are preserved privately and restored when shown again. Hidden fields are excluded from value, validation, and submission. Removing an input definition removes its cached value.\n\n## Field label position\n\nAll configured inputs inherit the Form layout through the shared Field wrapper. Set labelPosition: 'top' or 'left' on an individual input to override the Form layout without affecting value inference:\n\n```ts\nexport const inputs = {\n\tname: { type: 'text', label: 'Name' },\n\tnotes: { type: 'textarea', label: 'Notes', labelPosition: 'top' }\n} as const;\n```\n\nThe left position becomes a two-column label/control layout once the field is at least 32rem wide and remains stacked in narrower forms. The breakpoint is a container query against the field, so a form in a narrow drawer stacks on any screen. Form uses layout rather than orientation so controls such as Slider retain their own orientation prop.\n\n## Visual groups\n\nA group renders a transparent semantic fieldset with a required legend label and an optional description. Its label and description use the same size scale as ordinary fields; grouping does not add another card or padded container:\n\n```ts\nimport type { InferFormValue } from 'entasis/form';\n\nexport const inputs = {\n\tcontact: {\n\t\ttype: 'group',\n\t\tlabel: 'Contact details',\n\t\tdescription: 'How we can reach you',\n\t\tcolumns: 1,\n\t\tinputs: {\n\t\t\temail: { type: 'email', label: 'Email', required: true },\n\t\t\tphone: { type: 'phone', label: 'Phone' }\n\t\t}\n\t}\n} as const;\n\ntype Value = InferFormValue<typeof inputs>;\n// { email: string; phone: string | null }\n```\n\nThe group key is visual only and never appears in value or submission output. Descendant field names remain top-level, so duplicate names across groups are rejected. Group visibility hides all descendants, preserves field values in the private cache, and makes inferred field keys optional. In a vertical form layout, set columns to 1, 2, 3, or 4 to control the equal-width grid; the count is a container query against the form width (2 columns from 42rem, 3 from 56rem, 4 from 72rem), and groups collapse to one column in narrower forms. Horizontal form layouts ignore columns and always render group entries in one column. A child class may span tracks when an entry needs more room. Groups may contain fields, action rows, and custom snippets; nested groups are intentionally unsupported.\n\n## Custom value fields\n\nUse type: 'field' when Form must own a value but a custom control must render it. fieldType selects the existing FieldState schema and inferred value type. The snippet receives that registered FieldState controller:\n\n```svelte\n{#snippet handleControl(field)}\n\t<input\n\t\t{...field.controlAttrs}\n\t\t{@attach field.control}\n\t\tbind:value={field.value}\n\t/>\n{/snippet}\n\n<Form\n\tinputs={{\n\t\thandle: {\n\t\t\ttype: 'field',\n\t\t\tfieldType: 'text',\n\t\t\tlabel: 'Handle',\n\t\t\trequired: true,\n\t\t\tsnippet: handleControl\n\t\t}\n\t}}\n/>\n```\n\nThe controller exposes value, disabled, required, validation state, accessible ids, controlAttrs, and the control attachment. The entry participates in bind:value, visibility, validation, submission, and InferFormValue through the same FieldState owner as built-in controls.\n\n## App-defined input types\n\nAn app can add its own input types to every Form and ask() dialog, by name, so entries stay plain data that serializes (JSON from a server, a tool call, a database). Two steps, once per app.\n\nType it: augment `FormInputRegistry` with the value the input holds and the props its entries take.\n\n```ts\n// doc-fence: skip (imports a sibling component; tooling/component-contract/consumer-form-input.ts checks this exact setup against the package)\nimport { registerFormInputs } from 'entasis/form';\nimport MoneyInput from './MoneyInput.svelte';\n\nexport type Money = { amount: number; currency: string };\n\ndeclare module 'entasis/form' {\n\tinterface FormInputRegistry {\n\t\tmoney: { value: Money; props: { currencies?: string[] } };\n\t}\n}\n\nregisterFormInputs({\n\tmoney: {\n\t\tcomponent: MoneyInput,\n\t\tisEmpty: (value) => value?.amount === undefined,\n\t\tvalidate: (value) => (value.amount < 0 ? 'Must not be negative' : null)\n\t}\n});\n```\n\nRegister it: call registerFormInputs at the top level of a module the server and the browser both load before a form renders, such as one the root layout imports. Its keys are checked against the registry; built-in type names are refused, and registering a type again replaces it.\n\nThe component renders the control alone. Form wraps it in Field (label, description, errors) and hands it the field it registered, typed from the registry, plus the entry's own props:\n\n```svelte\n<!-- doc-fence: skip -->\n<!-- Needs the money registration above; tooling/component-contract/consumer-money-input.svelte is the checked copy. -->\n<script lang=\"ts\">\n\timport type { FormInputComponentProps } from 'entasis/form';\n\n\tlet { field, currencies = ['EUR'] }: FormInputComponentProps<'money'> = $props();\n\tconst currency = $derived(field.value?.currency ?? currencies[0] ?? 'EUR');\n</script>\n\n<input\n\ttype=\"number\"\n\t{...field.controlAttrs}\n\t{@attach field.control}\n\tvalue={field.value?.amount ?? ''}\n\toninput={(event) => field.setValue({ amount: Number(event.currentTarget.value), currency })}\n/>\n```\n\nEntries then use the type like a built-in one, in Form inputs, groups, and ask():\n\n```ts\n// doc-fence: skip (needs the money registration above)\nconst result = await ask({\n\ttitle: 'Set a price',\n\tconfirm: 'Save',\n\tcancel: 'Cancel',\n\tinputs: { price: { type: 'money', label: 'Price', required: true, currencies: ['EUR', 'USD'] } }\n});\nif (result.submitted) result.value.price; // Money\n```\n\nEvery Field entry option applies (label, description, required, disabled, size, density, visible, defaultValue, onValidate, onValueChange, slots); any other key goes to the component. required rejects what isEmpty reports empty (by default null, undefined, an empty string, or an empty array); validate runs for every entry of the type, before the entry's own onValidate. The value takes part in bind:value, visibility, validation, submission, and InferFormValue like a built-in input's. An entry whose type is neither built-in nor registered throws when the form reads it.\n\n## Non-value entries\n\nUse type: 'action' to place a labelled row of buttons in the ordered inputs flow. It accepts optional label and description content plus the same Form-aware action objects as the top-level actions prop. Its label position follows the Form layout unless labelPosition overrides it. Form size is the default button size, action density follows the Form, and loading or disabled protection cannot be overridden while the Form is submitting.\n\nUse type: 'custom' to place a snippet in the flow. The snippet receives the live public FormState and owns its own surface and padding; Form adds neither. Both entry types support class and visible, may appear at the top level or inside a group, and are omitted from bind:value, validation, and inferred submission output:\n\n```svelte\n{#snippet accountStatus(form)}\n\t<p>{Object.keys(form.value).length} visible values</p>\n{/snippet}\n\n<Form\n\tinputs={{\n\t\tname: { type: 'text', label: 'Name', required: true },\n\t\tstatus: { type: 'custom', snippet: accountStatus },\n\t\tcontrols: {\n\t\t\ttype: 'action',\n\t\t\tlabel: 'Account actions',\n\t\t\tdescription: 'Validate or save this account.',\n\t\t\tactions: [\n\t\t\t\t{ children: 'Validate', variant: 'soft', onAction: (payload) => payload.validate() },\n\t\t\t\t{ children: 'Save', onAction: (payload) => payload.submit() }\n\t\t\t]\n\t\t}\n\t}}\n/>\n```\n\nFor this configuration, InferFormValue contains name only; status and controls are presentation keys.\n\n## Validation\n\nBuilt-in validation uses the field schema and preserves its issue messages. onValidate may return:\n\n- false, null, undefined, an empty string, or an empty array for valid input;\n- true for a generic error;\n- a string for one error;\n- a string array for multiple errors.\n\nValidation runs on submission. After a field has an error, it revalidates while edited. Failed submission scrolls to and focuses the first invalid control.\n\n## Supported input types\n\ntext, email, url, password, number, rating, voice, slider, slider-range, textarea, rich-text, select, combobox, radio, checkboxes, checkbox, switch, phone, calendar, calendar-range, date, datetime, color, file, files, tag-group, tag, keyvalue, pin, and time.\n\nAlternative displays are display: 'selector' for date and calendar-range, and display: 'picker' for color.\n\nfield is the custom value-bearing entry. group, action, and custom are structural visual nodes rather than value-bearing input types.\n";