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

package/dist/lib/index.mjs

@@ -0,0 +1,4064 @@
+import "./types.mjs";
+import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId, createAnnotationHelper } from "@dxos/echo/internal";
+import { Children, Component, Fragment, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Annotation, DXN, EID, Entity, Feed, Filter, Format, Obj, Query, QueryAST, Ref, Scope, Tag, Type, View } from "@dxos/echo";
+import { Format as Format$1, FormatEnums, GeoLocation, TypeEnum, formatToType } from "@dxos/echo/Format";
+import { log } from "@dxos/log";
+import { Button, Column, Icon, IconButton, Input, Message, Popover, ScrollArea, Select, Tag as Tag$1, ToggleIconButton, Tooltip, composable, composableProps, useAsyncEffect, useDefaultValue, useInColumn, useMergeRefs, useThemeContext, useTranslation, withColumn } from "@dxos/react-ui";
+import { FactoryAnnotation, ParentLabelAnnotation, ParentLabelAnnotationId, ProjectionModel, Text, VIEW_FIELD_LIMIT, createEchoChangeCallback, formatToAdditionalPropertyAttributes, getFormatSchema, getTypeURIFromQuery, validateSchema } from "@dxos/schema";
+import { translationKey } from "#translations";
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
+import { SchemaEx } from "@dxos/effect";
+import { DEFAULT_LAYOUT_NAME, FormLayoutAnnotation, ReferenceAnnotationId as ReferenceAnnotationId$1 } from "@dxos/echo/Annotation";
+import { MarkdownView } from "@dxos/react-ui-markdown";
+import { getHashHue, getStyles, mx, osTranslations, tv } from "@dxos/ui-theme";
+import * as Cause from "effect/Cause";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import { createContext } from "@radix-ui/react-context";
+import * as Equal from "effect/Equal";
+import * as Utils from "effect/Utils";
+import { addEventListener } from "@dxos/async";
+import { useObject, useQuery, useType } from "@dxos/echo-react";
+import { DXN as DXN$1, EID as EID$1, PublicKey, URI } from "@dxos/keys";
+import { Combobox, OrderedList } from "@dxos/react-ui-list";
+import { arrayMove, safeParseFloat } from "@dxos/util";
+import * as Match from "effect/Match";
+import * as String$1 from "effect/String";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { invariant } from "@dxos/invariant";
+import { RegistryContext, useAtomValue } from "@effect-atom/atom-react";
+import { Doc } from "@dxos/echo-doc";
+import { Editor, useBasicMarkdownExtensions } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createDataExtensions, createThemeExtensions, insertAtCursor, keymap } from "@dxos/ui-editor";
+import "@dxos/lit-ui/dx-tag-picker.pcss";
+import { DxAnchor } from "@dxos/lit-ui/react";
+import { useSearchListResults } from "@dxos/react-ui-search";
+import { HuePicker } from "@dxos/react-ui-pickers";
+import { hues } from "@dxos/ui-types";
+import * as Function from "effect/Function";
+import { EditorState, Prec, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { Domino } from "@dxos/ui";
+import { QueryForm } from "@dxos/react-ui-components";
+//#region src/annotations.ts
+var OptionsLookupAnnotationId = Symbol.for("@dxos/schema/annotation/OptionsLookup");
+var OptionsLookupAnnotation = createAnnotationHelper(OptionsLookupAnnotationId);
+/**
+* Builds an {@link OptionsLookup} typed against a schema's value type `Values`: `deps` is checked
+* against its field names, and `load` receives only those fields, narrowed. Pass `{ combobox: true }` to
+* render an editable combobox.
+*/
+var optionsLookup = () => (deps, load, options) => ({
+	deps,
+	load,
+	combobox: options?.combobox
+});
+var AutofillAnnotationId = Symbol.for("@dxos/schema/annotation/Autofill");
+var AutofillAnnotation = createAnnotationHelper(AutofillAnnotationId);
+/** Builds an {@link Autofill} typed against a schema's value type `Values` (see {@link optionsLookup}). */
+var autofill = () => (deps, derive) => ({
+	deps,
+	derive
+});
+//#endregion
+//#region src/util/field.ts
+var parseValue = ({ type, format, value }) => {
+	if (value === void 0 || value === null || value === "") return;
+	const parseScalar = (type) => {
+		switch (type) {
+			case TypeEnum.Boolean:
+				if (typeof value === "string") {
+					const lowercaseValue = value.toLowerCase();
+					if (lowercaseValue === "0" || lowercaseValue === "false") return false;
+					else if (lowercaseValue === "1" || lowercaseValue === "true") return true;
+				}
+				return Boolean(value);
+			case TypeEnum.Number: {
+				const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
+				const num = Number(cleaned);
+				return Number.isNaN(num) ? null : num;
+			}
+			case TypeEnum.String:
+			case TypeEnum.Ref: return String(value);
+			default: return value;
+		}
+	};
+	if (!format) return parseScalar(type);
+	switch (format) {
+		case Format$1.TypeFormat.Boolean: return parseScalar(TypeEnum.Boolean);
+		case Format$1.TypeFormat.Number:
+		case Format$1.TypeFormat.Percent:
+		case Format$1.TypeFormat.Currency: return parseScalar(TypeEnum.Number);
+		case Format$1.TypeFormat.String:
+		case Format$1.TypeFormat.Markdown: return parseScalar(TypeEnum.String);
+		case Format$1.TypeFormat.Ref: throw new Error(`unexpected format: ${Format$1.TypeFormat.Ref}`);
+		case Format$1.TypeFormat.DateTime:
+		case Format$1.TypeFormat.Date:
+		case Format$1.TypeFormat.Time:
+		case Format$1.TypeFormat.Timestamp: {
+			const date = new Date(value);
+			return isNaN(date.getTime()) ? null : date;
+		}
+		case Format$1.TypeFormat.GeoPoint:
+			if (typeof value === "string") {
+				const parts = value.replace(/[^0-9.,-]+/g, "").split(",");
+				if (parts.length === 2) {
+					const lat = parseFloat(parts[0]);
+					const long = parseFloat(parts[1]);
+					if (!isNaN(lat) && !isNaN(long)) return GeoLocation.toGeoPoint({
+						latitude: lat,
+						longitude: long
+					});
+				}
+			}
+			return [0, 0];
+		default: return value;
+	}
+};
+var cellClassesForFieldType = ({ type, format }) => {
+	switch (format || type) {
+		case Format$1.TypeFormat.Markdown: return;
+		case Format$1.TypeFormat.Time:
+		case Format$1.TypeFormat.Timestamp:
+		case Format$1.TypeFormat.DateTime:
+		case Format$1.TypeFormat.Date:
+		case Format$1.TypeFormat.Duration: return ["font-mono", "text-right"];
+		case Format$1.TypeFormat.Currency: return ["text-right"];
+		case Format$1.TypeFormat.JSON:
+		case Format$1.TypeFormat.DID: return ["font-mono"];
+		case TypeEnum.Number:
+		case TypeEnum.Boolean: return ["text-right", "font-mono"];
+		case TypeEnum.String: return;
+		case TypeEnum.Ref: return;
+		default: return;
+	}
+};
+var pathNotUniqueError = (path) => ({
+	path: "path",
+	message: `'${path}' is already present`
+});
+//#endregion
+//#region src/util/omit.ts
+var omitId = (schemaOrType) => {
+	return omitIdFromSchema(Type.isType(schemaOrType) ? Type.getSchema(schemaOrType) : schemaOrType);
+};
+/**
+* Removes the `id` field where present, preserving the schema's shape. Recurses into unions so a
+* discriminated (create) schema keeps its discriminant — `Schema.omit('id')` is a struct operation and
+* would otherwise flatten the union, breaking variant rendering. A no-op when there is no `id` (plain
+* create structs that never carried one).
+*/
+var omitIdFromSchema = (schema) => {
+	const ast = schema.ast;
+	if (SchemaAST.isUnion(ast)) return Schema.Union(...ast.types.map((type) => omitIdFromSchema(Schema.make(type))));
+	return SchemaAST.getPropertySignatures(ast).some((prop) => prop.name === "id") ? schema.pipe(Schema.omit("id")) : schema;
+};
+/**
+* Drop fields annotated with `FormInputAnnotation.set(false)` from a schema so
+* the form's validator doesn't trip on required-but-hidden fields. Used by
+* the picker's inline create form, where a `FactoryAnnotation` typically
+* supplies the hidden values (e.g. a backing-object Ref) outside the form.
+*/
+var omitHiddenFormFields = (schema) => {
+	const hidden = SchemaAST.getPropertySignatures(schema.ast).filter((prop) => Option.getOrElse(Annotation.FormInputAnnotation.getFromAst(prop.type), () => true) === false).map((prop) => prop.name);
+	return hidden.length === 0 ? schema : schema.pipe(Schema.omit(...hidden));
+};
+//#endregion
+//#region src/util/properties.ts
+/** The property's type with an optional `T | undefined` union unwrapped to its inner `T`. */
+var unwrapOptional = (prop) => {
+	if (!prop.isOptional || !SchemaAST.isUnion(prop.type)) return prop.type;
+	const defined = prop.type.types.filter((type) => type._tag !== "UndefinedKeyword");
+	if (defined.length === 0) return prop.type;
+	return defined.length === 1 ? defined[0] : SchemaAST.Union.make(defined, prop.type.annotations);
+};
+/**
+* Resolve the properties to render for a field set's *root* schema, given the current form values.
+*
+* A top-level discriminated union is rendered flat: the fields of the member selected by the current
+* discriminator value, with the discriminator field keeping the union-wide set of literals so it stays
+* switchable. (`SchemaAST.getPropertySignatures` on a union returns only the common discriminator, so a
+* union root would otherwise render just that one field.) Non-union roots are unchanged. Nested unions are
+* unaffected — those are expanded per-field by `FormField`, which passes a single-member type literal here.
+*/
+var getRootFormProperties = (ast, values) => {
+	if (!SchemaEx.isDiscriminatedUnion(ast)) return getFormProperties(ast);
+	const activeType = SchemaEx.getDiscriminatedType(ast, values ?? {});
+	if (!activeType) return getFormProperties(ast);
+	const activeProps = getFormProperties(activeType);
+	const discriminators = new Set((SchemaEx.getDiscriminatingProps(ast) ?? []).map((name) => name.toString()));
+	if (discriminators.size === 0) return activeProps;
+	const fullType = SchemaEx.getDiscriminatedType(ast, {});
+	const fullDiscriminatorProps = fullType ? getFormProperties(fullType) : activeProps;
+	return activeProps.map((prop) => discriminators.has(prop.name.toString()) ? fullDiscriminatorProps.find((candidate) => candidate.name === prop.name) ?? prop : prop);
+};
+/**
+* Get the property types of an AST and filter out properties that are not form inputs.
+*
+* The `FormInputAnnotation` is read from the raw property signature's AST (before
+* `encodedBoundAST` is applied by `SchemaEx.getProperties`), because `encodedBoundAST` strips
+* annotations from non-keyword inner types (e.g., `Schema.Struct`, `Schema.Array`).
+* Without this, fields like `Routine.input` (a JsonSchema struct) annotated
+* `FormInputAnnotation.set(false)` would still render in the form.
+*
+* For optional fields, `prop.type` is the union `T | undefined` — the annotation
+* lives on the inner `T`. Unwrap before reading so that the conventional pattern
+* `Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional)` works.
+*
+* Container properties (nested structs, unions, arrays) keep their *raw* AST rather than
+* the `encodedBoundAST` produced by `SchemaEx.getProperties`. `encodedBoundAST` strips annotations
+* from non-keyword inner types, so a `FormInputAnnotation` nested beneath an encoded container
+* (e.g. `RouteLeg.geometry`, reached via `Segment → details → routes → Route → legs`) would
+* otherwise be lost by the time recursion reaches it. Leaf/transformation fields stay encoded
+* (e.g. a `DateTime` still renders as its encoded string input).
+*/
+var getFormProperties = (ast) => {
+	const signatures = SchemaAST.getPropertySignatures(ast);
+	const rawByName = new Map(signatures.map((prop) => [prop.name, unwrapOptional(prop)]));
+	const hidden = new Set(signatures.filter((prop) => Annotation.FormInputAnnotation.getFromAst(unwrapOptional(prop)).pipe(Option.getOrElse(() => true)) === false).map((prop) => prop.name));
+	return SchemaEx.getProperties(ast).filter((prop) => !hidden.has(prop.name)).map((prop) => {
+		const raw = rawByName.get(prop.name);
+		return raw && (SchemaEx.isNestedType(raw) || SchemaEx.isArrayType(raw)) ? {
+			...prop,
+			type: raw
+		} : prop;
+	});
+};
+//#endregion
+//#region src/util/refs.ts
+var getRefProps = (ast) => {
+	if (SchemaEx.isArrayType(ast)) {
+		const elementType = SchemaEx.getArrayElementType(ast);
+		if (elementType) {
+			if (Ref.isRefType(elementType)) return {
+				ast: elementType,
+				isArray: true,
+				typename: SchemaEx.findAnnotation(elementType, ReferenceAnnotationId$1)?.typename
+			};
+		}
+	}
+	if (Ref.isRefType(ast)) return {
+		ast,
+		isArray: false,
+		typename: SchemaEx.findAnnotation(ast, ReferenceAnnotationId$1)?.typename
+	};
+};
+//#endregion
+//#region src/components/Form/meta-tags.ts
+/**
+* Form-field key for the synthetic meta-tags array spliced into property/create forms.
+*
+* An object's tags live in `Obj.getMeta(obj).tags` (off-schema), so the form surfaces them as an
+* extra field rather than reading the schema. The key is underscore-prefixed so it never collides
+* with a `tags` field an object schema declares itself — e.g. a `TagIndex` record on a feed host,
+* whose `tags` is `Record<tagId, objectId[]>`, not an array. Extending such a schema with a `tags`
+* array threw "overlapping types at path: [\"tags\"]"; the disjoint `_tags` key avoids it. The
+* human-facing label is restored via the `title` annotation on {@link withMetaTags}.
+*/
+var META_TAGS_KEY = "_tags";
+/**
+* Splices the synthetic meta-tags array (an object's `meta.tags`, surfaced as {@link Tag} refs) onto
+* a schema for editing and drops `id`. Keyed by {@link META_TAGS_KEY} so it never collides with a
+* `tags` field the schema declares itself.
+*/
+var withMetaTags = (schema) => omitId(Schema.Struct({ [META_TAGS_KEY]: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.annotations({ title: "Tags" }), Schema.optional) }).pipe(Schema.extend(schema)));
+//#endregion
+//#region src/hooks/useAsyncFieldEffect.ts
+/** Picks the declared dependency fields from the form values — the subset a dynamic field subscribes to. */
+var pickValues = (values, deps) => {
+	const subset = {};
+	for (const dep of deps) subset[dep] = values?.[dep];
+	return subset;
+};
+/**
+* Runs a self-contained Effect (`R = never`) whenever `key` changes, debounced and abortable. Used by
+* dynamic form fields to load select options, derive values, or validate against an external source from
+* the current form values. The latest `factory` is always used, but a run is only (re)triggered when
+* `key` changes — derive `key` from the inputs the factory actually reads. Re-running interrupts the
+* prior run (cancelling any in-flight request).
+*/
+var useAsyncFieldEffect = (factory, key, { debounceMs = 400, enabled = true } = {}) => {
+	const factoryRef = useRef(factory);
+	factoryRef.current = factory;
+	const [state, setState] = useState({
+		loading: false,
+		error: void 0,
+		data: void 0
+	});
+	useEffect(() => {
+		if (!enabled) {
+			setState({
+				loading: false,
+				error: void 0,
+				data: void 0
+			});
+			return;
+		}
+		let cancel;
+		const timer = setTimeout(() => {
+			setState((prev) => ({
+				...prev,
+				loading: true,
+				error: void 0
+			}));
+			cancel = Effect.runCallback(factoryRef.current(), { onExit: (exit) => {
+				Exit.match(exit, {
+					onSuccess: (data) => setState({
+						loading: false,
+						error: void 0,
+						data
+					}),
+					onFailure: (cause) => {
+						if (!Cause.isInterruptedOnly(cause)) setState((prev) => ({
+							loading: false,
+							error: Cause.squash(cause),
+							data: prev.data
+						}));
+					}
+				});
+			} });
+		}, debounceMs);
+		return () => {
+			clearTimeout(timer);
+			cancel?.();
+		};
+	}, [
+		key,
+		enabled,
+		debounceMs
+	]);
+	return state;
+};
+//#endregion
+//#region src/hooks/useFormContext.ts
+var [FormContextProvider, useFormContext] = createContext("Form");
+/**
+* Get the current form values.
+*/
+var useFormValues = (componentName, path, defaultValue) => {
+	const stablePath = useMemo(() => path ?? [], [path ? path.join(".") : void 0]);
+	const jsonPath = SchemaEx.createJsonPath(stablePath);
+	const { form: { values, onValueChange } } = useFormContext(componentName);
+	const value = SchemaEx.getValue(values, jsonPath);
+	const lastAppliedPathRef = useRef(null);
+	useEffect(() => {
+		if (value == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
+			lastAppliedPathRef.current = jsonPath;
+			onValueChange(stablePath, SchemaAST.stringKeyword, defaultValue());
+		}
+	}, [
+		value,
+		defaultValue,
+		onValueChange,
+		stablePath,
+		jsonPath
+	]);
+	return value;
+};
+/**
+* Get the state props for the given field.
+*/
+var useFormFieldState = (componentName, path = []) => {
+	const stablePath = useMemo(() => path, [Array.isArray(path) ? path.join(".") : path]);
+	const { form: { getStatus, getValue, onBlur, onValueChange } } = useFormContext(componentName);
+	return useMemo(() => ({
+		getStatus: () => getStatus(stablePath),
+		getValue: () => getValue(stablePath),
+		onBlur: () => onBlur(stablePath),
+		onValueChange: (ast, value) => onValueChange(stablePath, ast, value)
+	}), [
+		getStatus,
+		getValue,
+		onBlur,
+		onValueChange,
+		stablePath
+	]);
+};
+//#endregion
+//#region src/hooks/useFormHandler.ts
+var __dxlog_file$6 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useFormHandler.ts";
+/**
+* Creates a hook for managing form state, including values, validation, and submission.
+* Deeply integrated with `@dxos/schema` for schema-based validation.
+*/
+var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: defaultValuesProp, onValuesChanged, onValidate, onSave, onCancel, ...props }) => {
+	const [changed, setChanged] = useState({});
+	const [touched, setTouched] = useState({});
+	const [errors, setErrors] = useState({});
+	const [saving, setSaving] = useState(false);
+	const defaultValues = useDefaultValue(defaultValuesProp, () => ({}));
+	const source = valuesProp ?? defaultValues;
+	const [overrides, setOverrides] = useState({});
+	const values = applyOverrides(source, overrides);
+	const validate = useCallback((values) => {
+		if (!schema) return false;
+		let errors = validateSchema(schema, values) ?? [];
+		log("validate", {
+			values,
+			errors
+		}, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$6,
+			L: 160,
+			S: void 0
+		});
+		if (errors.length === 0 && onValidate) errors = onValidate(values) ?? [];
+		setErrors(flatMap(errors));
+		return errors.length === 0;
+	}, [schema, onValidate]);
+	const [schemaChanged, setSchemaChanged] = useState(false);
+	useEffect(() => setSchemaChanged(true), [schema]);
+	useEffect(() => {
+		if (schemaChanged) {
+			validate(values);
+			setSchemaChanged(false);
+		}
+	}, [
+		validate,
+		values,
+		schemaChanged
+	]);
+	useEffect(() => {
+		const reconciled = Object.keys(overrides).filter((path) => valuesEqual(SchemaEx.getValue(source, path), overrides[path]));
+		if (reconciled.length === 0) return;
+		setOverrides((prev) => omitPaths(prev, reconciled));
+		setChanged((prev) => omitPaths(prev, reconciled));
+		setTouched((prev) => omitPaths(prev, reconciled));
+	});
+	const isValid = useMemo(() => {
+		return Object.keys(errors).length === 0;
+	}, [errors]);
+	/**
+	* NOTE: We can submit if there is no touched field that has an error.
+	* If there's a validation message visible in the form, submit should be disabled.
+	*/
+	const canSave = useMemo(() => !saving && !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
+		touched,
+		errors,
+		saving
+	]);
+	const handleSave = useCallback(async () => {
+		if (validate(values)) {
+			setSaving(true);
+			try {
+				await onSave?.(values, {
+					changed,
+					isValid
+				});
+			} finally {
+				setSaving(false);
+			}
+		}
+	}, [
+		values,
+		validate,
+		onSave,
+		changed,
+		isValid
+	]);
+	const handleCancel = useCallback(() => {
+		onCancel?.();
+	}, [onCancel]);
+	const getStatus = useCallback((path) => {
+		const jsonPath = Array.isArray(path) ? SchemaEx.createJsonPath(path) : path;
+		const [_, error] = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`)) ?? [];
+		if (!touched[jsonPath]) return {
+			status: void 0,
+			error: void 0
+		};
+		return {
+			status: error ? "error" : void 0,
+			error: error ? error ?? void 0 : void 0
+		};
+	}, [errors, touched]);
+	const getValue = useCallback((path) => {
+		const jsonPath = SchemaEx.createJsonPath(path);
+		if (Object.prototype.hasOwnProperty.call(overrides, jsonPath)) return overrides[jsonPath];
+		return SchemaEx.getValue(source, jsonPath);
+	}, [source, overrides]);
+	const onValueChange = useCallback((path, type, value) => {
+		log("onValueChange", {
+			path,
+			value
+		}, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$6,
+			L: 280,
+			S: void 0
+		});
+		const jsonPath = SchemaEx.createJsonPath(path);
+		let parsedValue = value;
+		try {
+			if (type._tag === "NumberKeyword") parsedValue = parseFloat(value) || 0;
+		} catch (err) {
+			log.catch(err, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$6,
+				L: 290,
+				S: void 0
+			});
+			parsedValue = void 0;
+		}
+		const newOverrides = {
+			...overrides,
+			[jsonPath]: parsedValue
+		};
+		setOverrides(newOverrides);
+		const newChanged = { [jsonPath]: true };
+		setChanged((prev) => ({
+			...prev,
+			...newChanged
+		}));
+		const newValues = applyOverrides(source, newOverrides);
+		const isValid = validate(newValues);
+		onValuesChanged?.(newValues, {
+			isValid,
+			changed: newChanged
+		});
+	}, [
+		source,
+		overrides,
+		validate,
+		onValuesChanged
+	]);
+	const onBlur = useCallback(async (path) => {
+		const jsonPath = SchemaEx.createJsonPath(path);
+		setTouched((touched) => ({
+			...touched,
+			[jsonPath]: true
+		}));
+		const isValid = validate(values);
+		if (Object.keys(changed).length > 0 && isValid && autoSave) await onSave?.(values, {
+			changed,
+			isValid
+		});
+	}, [
+		validate,
+		values,
+		changed,
+		autoSave,
+		onSave
+	]);
+	return useMemo(() => ({
+		schema,
+		values,
+		errors,
+		touched,
+		changed,
+		isValid,
+		canSave,
+		autoSave,
+		onSave: handleSave,
+		onCancel: handleCancel,
+		getStatus,
+		getValue,
+		onBlur,
+		onValueChange,
+		...props
+	}), [
+		schema,
+		autoSave,
+		values,
+		errors,
+		touched,
+		changed,
+		canSave,
+		isValid,
+		getStatus,
+		getValue,
+		onBlur,
+		onValueChange,
+		handleSave,
+		handleCancel
+	]);
+};
+/**
+* Creates a new object with value at path. Does not mutate source.
+* Preserves arrays when path segments are numeric indices.
+*/
+var mergeAtPath = (obj, path, value) => {
+	if (path.length === 0) return value;
+	const [head, ...rest] = path;
+	const child = rest.length === 0 ? value : mergeAtPath(obj?.[head], rest, value);
+	if (Array.isArray(obj)) {
+		const copy = [...obj];
+		copy[head] = child;
+		return copy;
+	}
+	return {
+		...obj,
+		[head]: child
+	};
+};
+/** Overlays sparse json-path edits onto a base value without mutating it; un-edited paths keep the base reference. */
+var applyOverrides = (base, overrides) => {
+	let result = base;
+	for (const path of Object.keys(overrides)) result = mergeAtPath(result, SchemaEx.splitJsonPath(path), overrides[path]);
+	return result;
+};
+var valuesEqual = (left, right) => {
+	if (left === right) return true;
+	if (left === null || right === null) return left === right;
+	if (typeof left !== "object" || typeof right !== "object") return Utils.structuralRegion(() => Equal.equals(left, right));
+	if (Ref.isRef(left) && Ref.isRef(right)) return left.uri === right.uri;
+	if (Ref.isRef(left) || Ref.isRef(right)) return false;
+	if (Array.isArray(left) && Array.isArray(right)) {
+		if (left.length !== right.length) return false;
+		return left.every((value, index) => valuesEqual(value, right[index]));
+	}
+	if (Array.isArray(left) || Array.isArray(right)) return false;
+	const leftRecord = left;
+	const rightRecord = right;
+	const keys = /* @__PURE__ */ new Set([...Object.keys(leftRecord).filter((key) => key !== "id"), ...Object.keys(rightRecord).filter((key) => key !== "id")]);
+	for (const key of keys) if (!valuesEqual(leftRecord[key], rightRecord[key])) return false;
+	return true;
+};
+/** Returns a copy of `record` without the given json-path keys. */
+var omitPaths = (record, paths) => {
+	const omit = new Set(paths);
+	return Object.fromEntries(Object.entries(record).filter(([key]) => !omit.has(key)));
+};
+var flatMap = (errors) => {
+	return errors.reduce((result, { path, message }) => {
+		const jsonPath = SchemaEx.fromEffectValidationPath(path);
+		if (!(jsonPath in result)) result[jsonPath] = message;
+		return result;
+	}, {});
+};
+//#endregion
+//#region src/hooks/useKeyHandler.tsx
+/**
+* Key handler.
+*/
+var useKeyHandler = (elRef, form) => {
+	const handleKeyDown = useCallback((event) => {
+		switch (event.key) {
+			case "Enter":
+				if (event.metaKey && form.canSave) form.onSave();
+				break;
+		}
+	}, [
+		form.isValid,
+		form.canSave,
+		form.onSave,
+		form.autoSave
+	]);
+	useLayoutEffect(() => {
+		const el = elRef.current;
+		if (!el) return;
+		return addEventListener(el, "keydown", handleKeyDown);
+	}, [elRef, handleKeyDown]);
+};
+/** {@link Form} theme template: a tailwind-variants recipe (`styles`) plus non-class `behavior`. */
+var formTheme = {
+	styles: tv({
+		slots: {
+			viewport: "",
+			content: "pb-form-padding",
+			section: "flex flex-col py-form-section-gap first:pt-0",
+			group: "flex flex-col gap-trim-md p-trim-md border border-separator rounded-sm",
+			sectionHeader: "",
+			sectionTitle: "text-lg",
+			sectionDescription: "text-description",
+			fieldSet: "",
+			field: "",
+			fieldLabel: "min-h-(--dx-control) grid grid-cols-[1fr_auto_auto_auto] items-center select-none",
+			fieldLabelText: "",
+			fieldDescription: "text-description",
+			fieldControl: "",
+			fieldValidation: "",
+			actions: "grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding",
+			submit: "flex w-full pt-form-padding",
+			fieldSetBody: "flex flex-col px-trim-sm pb-trim-sm",
+			fieldSetBox: "border border-subdued-separator rounded-sm",
+			fieldSetBoxOuter: ""
+		},
+		variants: { variant: {
+			default: {},
+			settings: {
+				content: "dx-document",
+				section: "py-form-section-gap! gap-trim-md",
+				sectionHeader: "pb-form-section-gap",
+				sectionTitle: "px-trim-md text-xl",
+				sectionDescription: "px-trim-md",
+				fieldSet: "flex flex-col gap-trim-md",
+				fieldSetBody: "flex flex-col gap-trim-md px-trim-sm pb-trim-sm",
+				field: mx("grid", "grid-cols-1 [grid-template-areas:\"header\"\"description\"\"control\"\"validation\"]", "md:grid-cols-2 md:[grid-template-areas:\"header_header\"\"description_control\"\"validation_validation\"]", "gap-x-trim-xl gap-y-0 p-trim-md border border-input-separator rounded-md"),
+				fieldLabel: "[grid-area:header]",
+				fieldLabelText: "text-base-fg text-lg",
+				fieldDescription: "[grid-area:description] pt-trim-xs text-description",
+				fieldControl: "[grid-area:control] flex justify-end items-start pt-trim-md md:pt-0",
+				fieldValidation: "[grid-area:validation]"
+			}
+		} },
+		defaultVariants: { variant: "default" }
+	}),
+	behavior: {
+		default: { showDescription: false },
+		settings: { showDescription: true }
+	}
+};
+Object.keys(formTheme.styles());
+//#endregion
+//#region src/components/Form/FormField/fields/ArrayField/default-value.ts
+/**
+* Returns the default empty value for a given AST.
+* Used for initializing new array values etc.
+*/
+var getDefaultValue = (ast) => {
+	switch (ast?._tag) {
+		case "StringKeyword": return "";
+		case "NumberKeyword": return 0;
+		case "BooleanKeyword": return false;
+		case "Suspend": return getDefaultValue(ast.f());
+		case "Refinement": {
+			const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(ast));
+			if (jsonSchema != null && "minimum" in jsonSchema && typeof jsonSchema.minimum === "number") return jsonSchema.minimum;
+			return getDefaultValue(ast.from);
+		}
+		default: if (ast && SchemaEx.isNestedType(ast)) return {};
+		else throw new Error(`Unsupported type: ${ast?._tag}`);
+	}
+};
+//#endregion
+//#region src/components/Form/FormField/FormField.tsx
+var FormField = (props) => {
+	const { type, name, label: labelProp, path, required, projection, fieldMap, fieldProvider, readonly, hideEmpty = true, layout, createTypename, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap, db, useType, getOptions, onCreate, resolveCreateEntry, refInline } = props;
+	const { t } = useTranslation(translationKey);
+	const title = SchemaEx.getAnnotation(SchemaAST.TitleAnnotationId)(type);
+	const description = SchemaEx.getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
+	const examples = SchemaEx.getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
+	const label = useMemo(() => labelProp ?? title ?? (name == null ? "" : String$1.capitalize(name)), [
+		labelProp,
+		title,
+		name
+	]);
+	const placeholder = useMemo(() => examples?.length ? `${t("example.placeholder")}: ${examples[0]}` : description ?? label, [
+		examples,
+		description,
+		label,
+		t
+	]);
+	const providerSchema = useMemo(() => fieldProvider ? Schema.make(type) : void 0, [fieldProvider, type]);
+	const fieldState = useFormFieldState(FormField.displayName, path);
+	const jsonPath = SchemaEx.createJsonPath(path ?? []);
+	const fieldProps = {
+		type,
+		format: Format.FormatAnnotation.getFromAst(type).pipe((annotation) => Option.getOrUndefined(annotation)),
+		readonly,
+		label,
+		description,
+		jsonPath,
+		placeholder,
+		presentation: layout,
+		required,
+		db,
+		...fieldState
+	};
+	if (readonly && hideEmpty && fieldState.getValue() == null) return null;
+	const CustomField = fieldMap?.[jsonPath];
+	if (CustomField) return /* @__PURE__ */ jsx(CustomField, { ...fieldProps });
+	if (fieldProvider && providerSchema) {
+		const component = fieldProvider({
+			schema: providerSchema,
+			prop: name ?? "",
+			fieldProps
+		});
+		if (component) return component;
+	}
+	const optionsLookup = Option.getOrUndefined(OptionsLookupAnnotation.getFromAst(type));
+	if (optionsLookup) return optionsLookup.combobox ? /* @__PURE__ */ jsx(ComboboxField, {
+		...fieldProps,
+		lookup: optionsLookup
+	}) : /* @__PURE__ */ jsx(AsyncSelectField, {
+		...fieldProps,
+		lookup: optionsLookup
+	});
+	const autofill = Option.getOrUndefined(AutofillAnnotation.getFromAst(type));
+	if (autofill) return /* @__PURE__ */ jsx(AutofillField, {
+		...fieldProps,
+		autofill
+	});
+	if (SchemaEx.isArrayType(type)) return /* @__PURE__ */ jsx(ArrayField, {
+		fieldProps: fieldState,
+		label,
+		...props
+	});
+	const Field = getFormField(fieldProps);
+	if (Field) return /* @__PURE__ */ jsx(Field, { ...fieldProps });
+	const options = getSelectOptions(type);
+	if (options) {
+		const selectOptions = ((projection?.getFieldProjections())?.find((fp) => fp.field.path === name))?.props.options;
+		return /* @__PURE__ */ jsx(SelectField, {
+			...fieldProps,
+			options: options.map((option) => {
+				return {
+					value: option,
+					label: (selectOptions?.find((so) => so.id === globalThis.String(option)))?.title ?? option.toString()
+				};
+			})
+		});
+	}
+	const refProps = getRefProps(type);
+	if (refProps) {
+		if ((refInline || Annotation.FormInlineAnnotation.getFromAst(refProps.ast).pipe(Option.getOrElse(() => false))) && !refProps.isArray) return /* @__PURE__ */ jsx(InlineRefField, {
+			...fieldProps,
+			...refProps,
+			db,
+			useType,
+			onCreate,
+			resolveCreateEntry
+		});
+		const isCreateTarget = !createTypename || refProps.typename === createTypename;
+		return /* @__PURE__ */ jsx(RefField, {
+			...fieldProps,
+			...refProps,
+			createOptionLabel: isCreateTarget ? createOptionLabel : void 0,
+			createOptionIcon: isCreateTarget ? createOptionIcon : void 0,
+			createInitialValuePath: isCreateTarget ? createInitialValuePath : void 0,
+			createFieldMap: isCreateTarget ? createFieldMap : void 0,
+			db,
+			useType,
+			getOptions,
+			onCreate,
+			resolveCreateEntry
+		});
+	}
+	if (SchemaEx.isNestedType(type)) {
+		const baseNode = SchemaEx.findNode(type, SchemaEx.isDiscriminatedUnion);
+		const typeLiteral = baseNode ? SchemaEx.getDiscriminatedType(baseNode, fieldState.getValue()) : SchemaEx.findNode(type, SchemaAST.isTypeLiteral);
+		if (typeLiteral) return /* @__PURE__ */ jsx(FormFieldSet, {
+			schema: Schema.make(typeLiteral),
+			path,
+			readonly,
+			layout,
+			label,
+			collapsible: true,
+			projection,
+			fieldMap,
+			fieldProvider,
+			createOptionLabel,
+			createOptionIcon,
+			createInitialValuePath,
+			db,
+			useType,
+			getOptions,
+			onCreate,
+			resolveCreateEntry
+		});
+	}
+	return null;
+};
+FormField.displayName = "Form.FormField";
+var CompactIconButton = ({ classNames, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: "grid size-8 shrink-0 place-items-center",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			variant: "ghost",
+			iconOnly: true,
+			...props,
+			classNames: mx("min-h-0 h-7 w-7 p-0", classNames)
+		})
+	});
+};
+/**
+* Get property input component.
+*/
+var getFormField = ({ type, format }) => {
+	if (SchemaAST.isRefinement(type)) return getFormField({
+		type: type.from,
+		format
+	});
+	const formatField = Match.value(format).pipe(Match.withReturnType(), Match.when(Format.TypeFormat.Date, () => DateField), Match.when(Format.TypeFormat.DateTime, () => DateField), Match.when(Format.TypeFormat.GeoPoint, () => GeoPointField), Match.when(Format.TypeFormat.Markdown, () => MarkdownField), Match.when(Format.TypeFormat.Password, () => PasswordField), Match.when(Format.TypeFormat.Text, () => TextAreaField), Match.when(Format.TypeFormat.Time, () => DateField), Match.orElse(() => void 0));
+	if (formatField) return formatField;
+	switch (type._tag) {
+		case "AnyKeyword":
+		case "StringKeyword": return TextField;
+		case "NumberKeyword": return NumberField;
+		case "BooleanKeyword": return BooleanField;
+	}
+};
+var getSelectOptions = (ast) => {
+	if (SchemaEx.isLiteralUnion(ast)) return ast.types.map((type) => type.literal).filter((v) => v !== null);
+	return Format.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option.getOrUndefined(annotation));
+};
+//#endregion
+//#region src/components/Form/FormField/presentation.tsx
+/**
+* Derive the {@link FormFieldPresentation} for a layout.
+* - `static` renders read-only plain DOM.
+* - `inline` drops the label (the control stands alone, e.g. an array row).
+* - `full` adds the inline error block.
+*/
+var presentationFor = (layout) => ({
+	layout,
+	isStatic: layout === "static",
+	showLabel: layout !== "inline",
+	showError: layout === "full"
+});
+//#endregion
+//#region src/components/Form/FormField/FormRow.tsx
+var FormFieldLabel = ({ classNames, labelClassName, variant = "default", label, error, readonly, required, standalone, button, labelEnd, onClick }) => {
+	const styles = formTheme.styles({ variant });
+	const labelClassNames = mx("text-sm text-description", required && "after:content-['*'] after:ms-0.5 after:text-warning-text", styles.fieldLabelText({ class: labelClassName }));
+	const labelNode = readonly || standalone ? /* @__PURE__ */ jsx("span", {
+		className: labelClassNames,
+		children: label
+	}) : /* @__PURE__ */ jsx(Input.Label, {
+		classNames: labelClassNames,
+		children: label
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.fieldLabel({ class: mx(onClick && "cursor-pointer", classNames) }),
+		onClick,
+		children: [
+			labelNode,
+			labelEnd,
+			error ? /* @__PURE__ */ jsx(Tooltip.Trigger, {
+				asChild: true,
+				content: error,
+				side: "bottom",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph--warning--regular",
+					size: 4,
+					classNames: "text-error-text"
+				})
+			}) : /* @__PURE__ */ jsx("span", {}),
+			button
+		]
+	});
+};
+FormFieldLabel.displayName = "Form.FieldLabel";
+/**
+* Formats a value for `static` (read-only, plain-DOM) presentation based on its
+* type `format`. Dates/times are rendered human-readable; everything else falls
+* back to `String(value)`.
+*/
+var formatStaticValue = (value, format$1) => {
+	if (value == null) return "";
+	switch (format$1) {
+		case Format.TypeFormat.DateTime:
+		case Format.TypeFormat.Date:
+		case Format.TypeFormat.Time: {
+			const date = new Date(value);
+			if (Number.isNaN(date.getTime())) return String(value);
+			return format(date, format$1 === Format.TypeFormat.DateTime ? "PPp" : format$1 === Format.TypeFormat.Date ? "PP" : "p");
+		}
+		default: return String(value);
+	}
+};
+var FORM_ROW_NAME = "Form.Row";
+/**
+* A labeled card row — the single shell behind both schema fields and free-form "action" rows. Field
+* renderers pass a render-prop `children` (field mode: bound to the form value, with validation and
+* static rendering); consumers pass plain `children` for an arbitrary control (action mode), the
+* affordance for an arbitrary labeled control (action rows, settings cards).
+*/
+var FormRow = ({ classNames, children, readonly, presentation, label, description, jsonPath, format, required, standalone, labelEnd, renderStatic, validation, getStatus, getValue, rootRef }) => {
+	const { variant = "default" } = useFormContext(FORM_ROW_NAME);
+	const styles = formTheme.styles({ variant });
+	const { showDescription } = formTheme.behavior[variant];
+	const resolved = presentationFor(presentation);
+	if (typeof children === "function" && getStatus && getValue) {
+		const { status, error } = getStatus();
+		const value = getValue();
+		if (resolved.isStatic && value == null) return null;
+		const control = resolved.isStatic ? renderStatic?.(value) ?? /* @__PURE__ */ jsx("p", {
+			className: "truncate min-w-0",
+			children: formatStaticValue(value, format)
+		}) : children({
+			value,
+			presentation: resolved
+		});
+		return /* @__PURE__ */ jsx(Input.Root, {
+			validationValence: status,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: styles.field({ class: classNames }),
+				ref: rootRef,
+				children: [
+					resolved.showLabel && /* @__PURE__ */ jsx(FormFieldLabel, {
+						variant,
+						error,
+						readonly,
+						required,
+						standalone,
+						labelEnd,
+						label,
+						path: jsonPath
+					}),
+					showDescription && description && /* @__PURE__ */ jsx(Input.Description, {
+						classNames: styles.fieldDescription(),
+						children: description
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: styles.fieldControl(),
+						children: control
+					}),
+					resolved.showError && error && /* @__PURE__ */ jsx("div", {
+						className: styles.fieldValidation(),
+						children: /* @__PURE__ */ jsx(Input.DescriptionAndValidation, { children: /* @__PURE__ */ jsx(Input.Validation, { children: error }) })
+					})
+				]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: styles.field({ class: classNames }),
+		children: [
+			resolved.showLabel && label && /* @__PURE__ */ jsx(FormFieldLabel, {
+				variant,
+				readonly,
+				required,
+				standalone: true,
+				labelEnd,
+				label,
+				path: jsonPath
+			}),
+			showDescription && description && /* @__PURE__ */ jsx("p", {
+				className: styles.fieldDescription(),
+				children: description
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.fieldControl(),
+				children: typeof children === "function" ? null : children
+			}),
+			validation && /* @__PURE__ */ jsx("div", {
+				className: styles.fieldValidation(),
+				children: validation
+			})
+		]
+	});
+};
+FormRow.displayName = FORM_ROW_NAME;
+var FormFieldErrorBoundary = class extends Component {
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	state = { error: void 0 };
+	componentDidUpdate(prevProps) {
+		if (prevProps.path !== this.props.path) this.resetError();
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2 border border-error-border font-mono text-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "bg-error-bg text-base-fg px-1 font-thin",
+				children: "ERROR"
+			}), String(this.props.path?.join("."))]
+		});
+		return this.props.children;
+	}
+	resetError() {
+		this.setState({ error: void 0 });
+	}
+};
+//#endregion
+//#region src/components/Form/FormField/FormFieldHeader.tsx
+/**
+* Header row for a labelled group or list: a label with optional trailing controls (an inline add
+* affordance and/or arbitrary `actions`). Shared by array/list fields ({@link ArrayField}, the view
+* editor) and {@link FormFieldSetContainer}'s collapse header, so all group/list headers render identically.
+*/
+var FormFieldHeader = ({ label, path, required, readonly, classNames, add, actions, onClick }) => /* @__PURE__ */ jsx(FormFieldLabel, {
+	standalone: true,
+	classNames,
+	label,
+	required,
+	readonly,
+	path,
+	button: !readonly && add || actions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [!readonly && add && /* @__PURE__ */ jsx(CompactIconButton, {
+		disabled: add.disabled,
+		icon: add.icon ?? "ph--plus--regular",
+		label: add.label,
+		onClick: (event) => {
+			event.stopPropagation();
+			add.onClick();
+		}
+	}), actions] }) : void 0,
+	onClick
+});
+//#endregion
+//#region src/components/Form/FormField/fields/ArrayField/ArrayField.tsx
+var __dxlog_file$5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/FormField/fields/ArrayField/ArrayField.tsx";
+var DND_ID = "__dndId";
+var isOrderedItem = (item) => !!item && typeof item === "object" && typeof item[DND_ID] === "string";
+var getOrderedId = (item) => item[DND_ID];
+var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
+	const { t } = useTranslation(translationKey);
+	const elementType = SchemaEx.getArrayElementType(type);
+	const { onValueChange } = inputProps;
+	const values = useFormValues(ArrayField.displayName, path, () => []);
+	const ordered = Annotation.FormOrderedAnnotation.getFromAst(type).pipe(Option.getOrElse(() => false));
+	const { db, onCreate, getCreateDefaults, useType: useType$4 = useType } = props;
+	const createTypename = Annotation.FormCreateAnnotation.getFromAst(type).pipe(Option.getOrUndefined);
+	const createSchema = useType$4(db, createTypename ? DXN$1.make(createTypename) : void 0);
+	const createInline = !!createTypename && !!elementType && Ref.isRefType(elementType) && !readonly && layout !== "static";
+	const idsRef = useRef([]);
+	const counterRef = useRef(0);
+	const nextId = useCallback(() => `${DND_ID}-${counterRef.current++}`, []);
+	const handleAddCreate = useCallback(async () => {
+		if (!createSchema || !onCreate) return;
+		const defaults = getCreateDefaults?.({
+			jsonPath: SchemaEx.createJsonPath(path ?? []),
+			schema: createSchema
+		}) ?? {};
+		const created = await onCreate(createSchema, defaults);
+		if (!created) return;
+		idsRef.current.push(nextId());
+		onValueChange(type, [...values ?? [], Ref.make(created)]);
+	}, [
+		createSchema,
+		onCreate,
+		getCreateDefaults,
+		onValueChange,
+		type,
+		path,
+		values,
+		nextId
+	]);
+	const getDefaultObjectValue = (typeNode) => {
+		const baseNode = SchemaEx.findNode(typeNode, SchemaEx.isDiscriminatedUnion);
+		const typeLiteral = baseNode ? SchemaEx.getDiscriminatedType(baseNode, {}) : SchemaEx.findNode(typeNode, SchemaAST.isTypeLiteral);
+		if (!typeLiteral) return {};
+		return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
+			const defaultValue = SchemaAST.getDefaultAnnotation(prop.type).pipe((annotation) => Option.getOrUndefined(annotation));
+			return [prop.name, defaultValue];
+		}));
+	};
+	const handleAdd = useCallback(() => {
+		let defaultValue;
+		try {
+			defaultValue = elementType && SchemaEx.isNestedType(elementType) ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+		} catch (err) {
+			log.catch(err, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$5,
+				L: 126,
+				S: void 0
+			});
+			return;
+		}
+		idsRef.current.push(nextId());
+		onValueChange(type, [...values ?? [], defaultValue]);
+	}, [
+		onValueChange,
+		type,
+		elementType,
+		values,
+		nextId
+	]);
+	const handleDelete = useCallback((idx) => {
+		idsRef.current.splice(idx, 1);
+		onValueChange(type, values?.filter((_, i) => i !== idx));
+	}, [
+		onValueChange,
+		type,
+		values
+	]);
+	const handleMove = useCallback((fromIndex, toIndex) => {
+		const next = [...values ?? []];
+		arrayMove(next, fromIndex, toIndex);
+		arrayMove(idsRef.current, fromIndex, toIndex);
+		onValueChange(type, next);
+	}, [
+		onValueChange,
+		type,
+		values
+	]);
+	if (!elementType || (readonly || layout === "static") && values && values.length < 1) return null;
+	const renderItemAsObject = elementType && SchemaEx.isNestedType(elementType) && !Ref.isRefType(elementType);
+	const renderField = (index, isLast) => {
+		const field = /* @__PURE__ */ jsx(FormField, {
+			...props,
+			autoFocus: isLast,
+			type: elementType,
+			...renderItemAsObject || createInline ? { name: null } : { label },
+			path: [...path ?? [], index],
+			readonly: readonly || layout === "static",
+			layout: renderItemAsObject ? layout === "static" ? "static" : void 0 : "inline",
+			refInline: createInline || void 0
+		});
+		return createInline ? /* @__PURE__ */ jsx("div", {
+			className: "w-full min-w-0 [--dx-col:auto]",
+			children: field
+		}) : field;
+	};
+	const header = (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ jsx(FormFieldHeader, {
+		label,
+		path: SchemaEx.createJsonPath(path ?? []),
+		readonly,
+		add: layout !== "static" ? {
+			label: t("add-item.button"),
+			onClick: createInline ? () => void handleAddCreate() : handleAdd
+		} : void 0
+	});
+	if (ordered && !readonly && layout !== "static") {
+		const ids = idsRef.current;
+		const count = values?.length ?? 0;
+		while (ids.length < count) ids.push(nextId());
+		if (ids.length > count) ids.length = count;
+		const items = (values ?? []).map((value, index) => ({
+			value,
+			index,
+			[DND_ID]: ids[index]
+		}));
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [header, /* @__PURE__ */ jsx(OrderedList.Root, {
+			items,
+			isItem: isOrderedItem,
+			getId: getOrderedId,
+			onMove: handleMove,
+			children: ({ items }) => /* @__PURE__ */ jsx(OrderedList.Content, { children: items.map((item) => /* @__PURE__ */ jsxs(OrderedList.Item, {
+				id: getOrderedId(item),
+				item,
+				classNames: "grid grid-cols-[min-content_1fr_min-content] items-start gap-1 p-0 pb-1",
+				children: [
+					/* @__PURE__ */ jsx(OrderedList.DragHandle, {}),
+					renderField(item.index, item.index === items.length - 1),
+					/* @__PURE__ */ jsx(CompactIconButton, {
+						icon: "ph--x--regular",
+						label: t("remove-item.button"),
+						onClick: () => handleDelete(item.index)
+					})
+				]
+			}, getOrderedId(item))) })
+		})] });
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [header, /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2 pb-2",
+		children: values?.map((_, index) => {
+			const isLast = index === values.length - 1;
+			return /* @__PURE__ */ jsxs("div", {
+				className: mx("grid grid-cols-[minmax(0,1fr)_min-content] gap-1", renderItemAsObject || createInline ? "items-start" : "items-center"),
+				children: [renderField(index, isLast), !readonly && layout !== "static" && /* @__PURE__ */ jsx(CompactIconButton, {
+					icon: "ph--x--regular",
+					label: t("remove-item.button"),
+					onClick: () => handleDelete(index)
+				})]
+			}, index);
+		})
+	})] });
+};
+ArrayField.displayName = "Form.ArrayField";
+//#endregion
+//#region src/components/Form/FormField/fields/SelectField/create-select-field.tsx
+var __dxlog_file$4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/FormField/fields/SelectField/create-select-field.tsx";
+/**
+* Factory for a `fieldMap` entry (keyed by JSON path) that renders a Select over a fixed list of
+* options, with an optional sentinel mapping to `undefined`. Use for fields whose choices come from a
+* runtime list rather than the schema (e.g. available model ids).
+*/
+var createSelectField = ({ options, defaultLabel = "Default" }) => {
+	const normalized = options.map((option) => typeof option === "string" ? {
+		value: option,
+		label: option
+	} : option);
+	const hasDefault = defaultLabel !== null;
+	const sentinel = "__default__";
+	invariant(!normalized.some((option) => option.value === sentinel), `createSelectField: option value '${sentinel}' is reserved.`, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file$4,
+		L: 39,
+		S: void 0,
+		A: ["!normalized.some((option) => option.value === sentinel)", "`createSelectField: option value '${sentinel}' is reserved.`"]
+	});
+	return ({ type, readonly, onValueChange, ...props }) => /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		renderStatic: (value) => /* @__PURE__ */ jsx("p", {
+			className: "truncate min-w-0",
+			children: normalized.find((option) => option.value === value)?.label ?? String(value ?? "")
+		}),
+		...props,
+		children: ({ value }) => /* @__PURE__ */ jsxs(Select.Root, {
+			disabled: !!readonly,
+			value: value ?? sentinel,
+			onValueChange: (next) => onValueChange(type, hasDefault && next === sentinel ? void 0 : next),
+			children: [/* @__PURE__ */ jsx(Select.TriggerButton, {
+				classNames: "w-full",
+				disabled: !!readonly
+			}), normalized.length > 0 && /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, { children: [/* @__PURE__ */ jsxs(Select.Viewport, { children: [hasDefault && /* @__PURE__ */ jsx(Select.Option, {
+				value: sentinel,
+				children: defaultLabel
+			}), normalized.map((option) => /* @__PURE__ */ jsx(Select.Option, {
+				value: option.value,
+				children: option.label ?? option.value
+			}, option.value))] }), /* @__PURE__ */ jsx(Select.Arrow, {})] }) })]
+		})
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/SelectField/SelectField.tsx
+var SelectField = ({ type, readonly, placeholder, options, onValueChange, ...props }) => {
+	const handleValueChange = useCallback((value) => onValueChange(type, value), [type, onValueChange]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		renderStatic: (value) => /* @__PURE__ */ jsx("p", {
+			className: "truncate min-w-0",
+			children: options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)
+		}),
+		...props,
+		children: ({ value }) => /* @__PURE__ */ jsxs(Select.Root, {
+			value,
+			onValueChange: handleValueChange,
+			disabled: !!readonly,
+			children: [/* @__PURE__ */ jsx(Select.TriggerButton, {
+				classNames: "w-full",
+				disabled: !!readonly,
+				placeholder
+			}), options?.length !== 0 && /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, { children: [/* @__PURE__ */ jsx(Select.Viewport, { children: options?.map(({ value, label, secondaryLabel, icon, iconHue }) => /* @__PURE__ */ jsx(Select.Option, {
+				value: String(value),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center flex-row gap-2",
+					children: [
+						icon && /* @__PURE__ */ jsx(Icon, {
+							icon,
+							classNames: getIconHueStyles(iconHue)
+						}),
+						label ?? String(value),
+						secondaryLabel && /* @__PURE__ */ jsx("span", {
+							className: "text-subdued text-xs",
+							children: secondaryLabel
+						})
+					]
+				})
+			}, String(value))) }), /* @__PURE__ */ jsx(Select.Arrow, {})] }) })]
+		})
+	});
+};
+var getIconHueStyles = (iconHue) => {
+	return (iconHue ? getStyles(iconHue) : void 0)?.fg;
+};
+//#endregion
+//#region src/components/Form/FormField/fields/AsyncSelectField/AsyncSelectField.tsx
+/**
+* A select whose options are loaded dynamically (debounced) from the fields the lookup declares in its
+* `deps`, via an {@link Annotation.OptionsLookup}. Re-runs only when one of those values changes.
+* Auto-selects the sole option when exactly one resolves and nothing is chosen yet.
+*/
+var AsyncSelectField = ({ lookup, ...fieldProps }) => {
+	const values = useFormValues(AsyncSelectField.displayName);
+	const subset = useMemo(() => pickValues(values, lookup.deps), [values, lookup.deps]);
+	const { loading, data } = useAsyncFieldEffect(() => lookup.load(subset), useMemo(() => JSON.stringify(subset), [subset]));
+	const options = data ?? [];
+	const { type, placeholder } = fieldProps;
+	const current = fieldProps.getValue();
+	const onValueChangeRef = useRef(fieldProps.onValueChange);
+	onValueChangeRef.current = fieldProps.onValueChange;
+	const autoSelectedDataRef = useRef(void 0);
+	useEffect(() => {
+		if ((current == null || current === "") && data?.length === 1 && data !== autoSelectedDataRef.current) {
+			autoSelectedDataRef.current = data;
+			onValueChangeRef.current(type, data[0].value);
+		}
+	}, [
+		current,
+		data,
+		type
+	]);
+	const resolvedPlaceholder = loading ? "Loading…" : options.length === 0 ? "No options available" : placeholder;
+	return /* @__PURE__ */ jsx(SelectField, {
+		...fieldProps,
+		placeholder: resolvedPlaceholder,
+		options: options.map(({ value, label, secondaryLabel, icon }) => ({
+			value,
+			label,
+			secondaryLabel,
+			icon
+		}))
+	});
+};
+AsyncSelectField.displayName = "Form.AsyncSelectField";
+//#endregion
+//#region src/components/Form/FormField/fields/TextField/TextField.tsx
+var TextField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props }) => {
+	const handleChange = useCallback((event) => onValueChange(type, event.target.value), [type, onValueChange]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		...props,
+		children: ({ value = "" }) => /* @__PURE__ */ jsx(Input.TextInput, {
+			noAutoFill: true,
+			disabled: !!readonly,
+			placeholder,
+			value,
+			onBlur,
+			onChange: handleChange
+		})
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/AutofillField/AutofillField.tsx
+/**
+* An editable text field that pre-fills its value (debounced) from the fields the autofill declares in
+* its `deps`, via an {@link Autofill}. Re-runs only when one of those values changes. The
+* derived value is written only while the user has not typed their own (the field is empty or still
+* holds the last auto-filled value), so a manual edit is never clobbered.
+*/
+var AutofillField = ({ autofill, ...fieldProps }) => {
+	const values = useFormValues(AutofillField.displayName);
+	const subset = useMemo(() => pickValues(values, autofill.deps), [values, autofill.deps]);
+	const { data } = useAsyncFieldEffect(() => autofill.derive(subset), useMemo(() => JSON.stringify(subset), [subset]));
+	const { type } = fieldProps;
+	const getValueRef = useRef(fieldProps.getValue);
+	getValueRef.current = fieldProps.getValue;
+	const onValueChangeRef = useRef(fieldProps.onValueChange);
+	onValueChangeRef.current = fieldProps.onValueChange;
+	const lastFilledRef = useRef(void 0);
+	useEffect(() => {
+		const current = getValueRef.current();
+		if (typeof data !== "string" || data.length === 0) {
+			if (lastFilledRef.current != null && current === lastFilledRef.current) {
+				lastFilledRef.current = void 0;
+				onValueChangeRef.current(type, "");
+			}
+			return;
+		}
+		if (current === data) {
+			lastFilledRef.current = data;
+			return;
+		}
+		if (current == null || current === "" || current === lastFilledRef.current) {
+			lastFilledRef.current = data;
+			onValueChangeRef.current(type, data);
+		}
+	}, [data, type]);
+	return /* @__PURE__ */ jsx(TextField, { ...fieldProps });
+};
+AutofillField.displayName = "Form.AutofillField";
+//#endregion
+//#region src/components/Form/FormField/fields/BooleanField/BooleanField.tsx
+var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
+	const handleChange = useCallback((value) => onValueChange?.(type, value), [type, onValueChange]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		...props,
+		children: ({ value }) => /* @__PURE__ */ jsx(Input.Block, { children: /* @__PURE__ */ jsx(Input.Switch, {
+			disabled: !!readonly,
+			checked: value,
+			onCheckedChange: handleChange
+		}) })
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/ComboboxField/ComboboxField.tsx
+/**
+* An editable combobox built on the shared {@link Combobox} primitive (trigger + popover search list,
+* the same family as `ObjectPicker`/`SearchList`). The trigger shows the current value; opening it reveals
+* a search input that loads suggestions (debounced) via an {@link OptionsLookup} and filters
+* them as you type. The literal typed text is offered as a fallback option at the bottom (deduped), so a
+* value not among the suggestions can still be selected. No options are shown until something is typed.
+*/
+var ComboboxField = ({ lookup, type, readonly, placeholder, onValueChange, ...props }) => {
+	const values = useFormValues(ComboboxField.displayName);
+	const ownKey = props.jsonPath;
+	const [query, setQuery] = useState("");
+	const [selectedLabel, setSelectedLabel] = useState();
+	const lookupValues = useMemo(() => {
+		const subset = pickValues(values, lookup.deps);
+		if (ownKey && lookup.deps.includes(ownKey)) subset[ownKey] = query;
+		return subset;
+	}, [
+		values,
+		lookup.deps,
+		ownKey,
+		query
+	]);
+	const { data } = useAsyncFieldEffect(() => lookup.load(lookupValues), useMemo(() => JSON.stringify(lookupValues), [lookupValues]));
+	const trimmed = query.trim();
+	const normalized = trimmed.toLowerCase();
+	const results = useMemo(() => normalized.length === 0 ? [] : (data ?? []).filter((option) => (option.label ?? option.value).toLowerCase().includes(normalized)), [data, normalized]);
+	const hasExact = results.some((option) => option.value === trimmed);
+	const handleValueChange = useCallback((next) => {
+		setSelectedLabel((data ?? []).find((option) => option.value === next)?.label);
+		onValueChange(type, next);
+	}, [
+		onValueChange,
+		type,
+		data
+	]);
+	const handleOpenChange = useCallback((open) => {
+		if (!open) setQuery("");
+	}, []);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		renderStatic: (value) => /* @__PURE__ */ jsx("p", {
+			className: "truncate min-w-0",
+			children: selectedLabel ?? value ?? ""
+		}),
+		...props,
+		children: ({ value = "" }) => /* @__PURE__ */ jsxs(Combobox.Root, {
+			value,
+			displayValue: selectedLabel,
+			onValueChange: handleValueChange,
+			onOpenChange: handleOpenChange,
+			placeholder,
+			children: [/* @__PURE__ */ jsx(Combobox.Trigger, {
+				disabled: !!readonly,
+				classNames: "w-full"
+			}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsxs(Combobox.Content, {
+				resetSelectionOnChange: true,
+				children: [
+					/* @__PURE__ */ jsx(Combobox.Input, {
+						autoFocus: true,
+						value: query,
+						onValueChange: setQuery,
+						placeholder
+					}),
+					/* @__PURE__ */ jsxs(Combobox.List, { children: [results.map((option) => /* @__PURE__ */ jsx(Combobox.Item, {
+						value: option.value,
+						label: option.label ?? option.value,
+						suffix: option.secondaryLabel
+					}, option.value)), normalized.length > 0 && !hasExact && /* @__PURE__ */ jsx(Combobox.Item, {
+						value: trimmed,
+						label: trimmed
+					})] }),
+					/* @__PURE__ */ jsx(Combobox.Arrow, {})
+				]
+			}) })]
+		})
+	});
+};
+ComboboxField.displayName = "Form.ComboboxField";
+//#endregion
+//#region src/components/Form/FormField/fields/DateField/DateField.tsx
+/**
+* Stored value shapes:
+* - `Format.DateTime` -> ISO 8601 (`2018-11-13T20:20:39.000Z`).
+* - `Format.Date`     -> `YYYY-MM-DD`.
+* - `Format.Time`     -> `HH:mm:ss`.
+*
+* Segmented input value shapes (react-aria-components-backed):
+* - `Input.DateTime` -> `YYYY-MM-DDTHH:mm` in local time.
+* - `Input.Date`     -> `YYYY-MM-DD`.
+* - `Input.Time`     -> `HH:mm`.
+*/
+/** ISO 8601 → `YYYY-MM-DDTHH:mm` in the user's local timezone. */
+var isoToLocalDateTime = (value) => {
+	if (!value) return "";
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return "";
+	return format(date, "yyyy-MM-dd'T'HH:mm");
+};
+/** `YYYY-MM-DDTHH:mm` (local) → ISO 8601 with timezone. */
+var localDateTimeToIso = (value) => {
+	if (!value) return;
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? void 0 : date.toISOString();
+};
+var DateField = ({ type, format, readonly, placeholder: _placeholder, onValueChange, onBlur: _onBlur, ...props }) => {
+	const handleSimpleChange = useCallback((next) => onValueChange(type, next), [type, onValueChange]);
+	const handleDateTimeChange = useCallback((next) => {
+		onValueChange(type, localDateTimeToIso(next));
+	}, [type, onValueChange]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		...props,
+		readonly,
+		format,
+		children: ({ value }) => {
+			switch (format) {
+				case Format.TypeFormat.Date: return /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch tabular-nums",
+					children: [/* @__PURE__ */ jsx(Input.Date, {
+						classNames: "min-w-0 overflow-hidden",
+						disabled: readonly,
+						value: value ?? "",
+						onValueChange: handleSimpleChange
+					}), /* @__PURE__ */ jsx(Input.TriggerIcon, {})]
+				});
+				case Format.TypeFormat.Time: return /* @__PURE__ */ jsx(Input.Time, {
+					classNames: "tabular-nums",
+					disabled: !!readonly,
+					value: value ?? "",
+					onValueChange: handleSimpleChange
+				});
+				case Format.TypeFormat.DateTime:
+				default: return /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[minmax(0,1fr)_min-content] gap-1 items-stretch tabular-nums",
+					children: [/* @__PURE__ */ jsx(Input.DateTime, {
+						classNames: "min-w-0 overflow-hidden",
+						disabled: readonly,
+						value: isoToLocalDateTime(value),
+						onValueChange: handleDateTimeChange
+					}), /* @__PURE__ */ jsx(Input.TriggerIcon, {})]
+				});
+			}
+		}
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/GeoPointField/GeoPointField.tsx
+var GeoPointField = ({ type, readonly, getValue, onValueChange, onBlur, ...props }) => {
+	const { t } = useTranslation(translationKey);
+	const geoPoint = useMemo(() => getValue() ?? [0, 0], [getValue]);
+	const value = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [geoPoint]);
+	const [longitudeText, setLongitudeText] = useState(value.longitude?.toString());
+	const [latitudeText, setLatitudeText] = useState(value.latitude?.toString());
+	useEffect(() => {
+		const location = GeoLocation.fromGeoPoint(geoPoint);
+		setLongitudeText(location.longitude?.toString());
+		setLatitudeText(location.latitude?.toString());
+	}, [geoPoint]);
+	const handleChange = useCallback((coordinateType, setText) => (event) => {
+		const inputText = event.target.value;
+		setText(inputText);
+		if (inputText !== "" && inputText !== "-") {
+			const coord = safeParseFloat(inputText);
+			if (coord !== void 0 && !isNaN(coord)) {
+				const newLocation = {
+					...GeoLocation.fromGeoPoint(getValue() ?? [0, 0]),
+					[coordinateType]: coord
+				};
+				onValueChange(type, GeoLocation.toGeoPoint(newLocation));
+			}
+		}
+	}, [
+		type,
+		getValue,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		getValue,
+		standalone: true,
+		renderStatic: (point) => {
+			const location = GeoLocation.fromGeoPoint(point ?? [0, 0]);
+			return !location.latitude && !location.longitude ? null : /* @__PURE__ */ jsx(LatLng, { ...location });
+		},
+		...props,
+		children: ({ presentation }) => /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-form-gap",
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Input.Root, { children: [presentation.showLabel && /* @__PURE__ */ jsx(Input.Label, { children: t("latitude.label") }), /* @__PURE__ */ jsx(Input.TextInput, {
+				type: "number",
+				step: "0.00001",
+				min: "-90",
+				max: "90",
+				disabled: !!readonly,
+				placeholder: t("latitude.placeholder"),
+				value: latitudeText ?? "",
+				onChange: handleChange("latitude", setLatitudeText),
+				onBlur
+			})] }) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Input.Root, { children: [presentation.showLabel && /* @__PURE__ */ jsx(Input.Label, { children: t("longitude.label") }), /* @__PURE__ */ jsx(Input.TextInput, {
+				type: "number",
+				step: "0.00001",
+				min: "-180",
+				max: "180",
+				disabled: !!readonly,
+				placeholder: t("longitude.placeholder"),
+				value: longitudeText ?? "",
+				onChange: handleChange("longitude", setLongitudeText),
+				onBlur
+			})] }) })]
+		})
+	});
+};
+var LatLng = ({ latitude = 0, longitude = 0 }) => {
+	const latHem = latitude >= 0 ? "N" : "S";
+	const lngHem = longitude >= 0 ? "E" : "W";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-form-gap",
+		children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: Math.abs(latitude).toFixed(5) }), /* @__PURE__ */ jsxs("span", {
+			className: "text-subdued",
+			children: ["°", latHem]
+		})] }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: Math.abs(longitude).toFixed(5) }), /* @__PURE__ */ jsxs("span", {
+			className: "text-subdued",
+			children: ["°", lngHem]
+		})] })]
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/MarkdownField/MarkdownField.tsx
+/**
+* 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.
+*/
+var MarkdownField = ({ type, readonly, placeholder, db, getValue, onValueChange, ...props }) => {
+	const isRef = Ref.isRefType(type);
+	const renderStatic = (value) => {
+		if (isRef) {
+			const reference = value;
+			return reference ? /* @__PURE__ */ jsx(RefStaticText, { reference }) : null;
+		}
+		return /* @__PURE__ */ jsx("p", {
+			className: "whitespace-pre-wrap",
+			children: value ?? ""
+		});
+	};
+	const renderEditor = (value) => {
+		if (isRef) {
+			const reference = value;
+			if (reference) return /* @__PURE__ */ jsx(RefMarkdownEditor, {
+				reference,
+				placeholder,
+				readonly: !!readonly
+			});
+			if (readonly) return null;
+			return /* @__PURE__ */ jsx(CreateTextButton, {
+				db,
+				disabled: !db,
+				onCreate: (ref) => onValueChange(type, ref)
+			});
+		}
+		return /* @__PURE__ */ jsx(StringMarkdownEditor, {
+			value: value ?? "",
+			placeholder,
+			readonly: !!readonly,
+			onChange: (next) => onValueChange(type, next)
+		});
+	};
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		getValue,
+		renderStatic,
+		...props,
+		children: ({ value }) => renderEditor(value)
+	});
+};
+/** Read-only static rendering for a `Ref<Text>` value: resolve the ref and print its content. */
+var RefStaticText = ({ reference }) => {
+	const text = useAtomValue(useMemo(() => reference.atom, [reference]));
+	if (!text?.content) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: "whitespace-pre-wrap",
+		children: text.content
+	});
+};
+var RefMarkdownEditor = ({ reference, placeholder, readonly }) => {
+	const text = useAtomValue(useMemo(() => reference.atom, [reference]));
+	const extensions = useBasicMarkdownExtensions({
+		placeholder,
+		readonly,
+		extensions: useMemo(() => text ? [createDataExtensions({
+			id: reference.uri,
+			text: Doc.createAccessor(text, ["content"])
+		})] : [], [text, reference])
+	});
+	if (!text) return null;
+	return /* @__PURE__ */ jsx(Editor.Root, { children: /* @__PURE__ */ jsx(Editor.View, {
+		classNames: "dx-input",
+		extensions
+	}) });
+};
+var StringMarkdownEditor = ({ value, placeholder, readonly, onChange }) => {
+	const extensions = useBasicMarkdownExtensions({
+		placeholder,
+		readonly
+	});
+	const handleChange = useCallback((next) => onChange(next), [onChange]);
+	return /* @__PURE__ */ jsx(Editor.Root, { children: /* @__PURE__ */ jsx(Editor.View, {
+		classNames: "dx-input min-h-[6lh]",
+		extensions,
+		value,
+		onChange: readonly ? void 0 : handleChange
+	}) });
+};
+var CreateTextButton = ({ db, disabled, onCreate }) => {
+	const { t } = useTranslation(translationKey);
+	const handleClick = useCallback(() => {
+		if (!db) return;
+		onCreate(Ref.make(db.add(Text.make())));
+	}, [db, onCreate]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: "ph--plus--regular",
+		label: t("create-text.label"),
+		onClick: handleClick,
+		disabled
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/NumberField/numeric-constraints.ts
+/**
+* Extracts numeric constraints (`minimum`/`maximum` bounds and whether the value must be an integer)
+* by walking the chain of Refinement ASTs and reading each one's JSON schema annotation (e.g. produced
+* by `Schema.between` / `Schema.int`). Returns empty constraints when none are declared.
+*/
+var getNumericConstraints = (ast) => {
+	let node = ast;
+	let min;
+	let max;
+	let integer = false;
+	while (node && SchemaAST.isRefinement(node)) {
+		const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(node));
+		if (jsonSchema != null) {
+			if ("minimum" in jsonSchema && typeof jsonSchema.minimum === "number") min = min === void 0 ? jsonSchema.minimum : Math.max(min, jsonSchema.minimum);
+			if ("maximum" in jsonSchema && typeof jsonSchema.maximum === "number") max = max === void 0 ? jsonSchema.maximum : Math.min(max, jsonSchema.maximum);
+			if ("type" in jsonSchema && jsonSchema.type === "integer" || "multipleOf" in jsonSchema && jsonSchema.multipleOf === 1) integer = true;
+		}
+		node = node.from;
+	}
+	return {
+		min,
+		max,
+		integer
+	};
+};
+//#endregion
+//#region src/components/Form/FormField/fields/NumberField/NumberField.tsx
+var NumberField = ({ type, readonly, placeholder, getValue, onValueChange, onBlur, ...props }) => {
+	const { min, max, integer } = getNumericConstraints(type);
+	const clamp = useCallback((n) => {
+		let value = integer ? Math.round(n) : n;
+		if (min !== void 0) value = Math.max(min, value);
+		if (max !== void 0) value = Math.min(max, value);
+		return value;
+	}, [
+		min,
+		max,
+		integer
+	]);
+	const [raw, setRaw] = useState(() => {
+		const v = getValue();
+		return v !== void 0 ? String(v) : "";
+	});
+	const externalValue = getValue();
+	useEffect(() => {
+		if (externalValue !== safeParseFloat(raw)) setRaw(externalValue !== void 0 ? String(externalValue) : "");
+	}, [externalValue]);
+	const handleChange = useCallback((event) => {
+		const value = event.target.value;
+		setRaw(value);
+		const parsed = safeParseFloat(value);
+		if (parsed !== void 0) onValueChange(type, clamp(parsed));
+	}, [
+		type,
+		onValueChange,
+		clamp
+	]);
+	const handleBlur = useCallback((event) => {
+		const parsed = safeParseFloat(raw);
+		if (parsed === void 0) {
+			const committed = getValue();
+			setRaw(committed !== void 0 ? String(committed) : "");
+		} else setRaw(String(clamp(parsed)));
+		onBlur(event);
+	}, [
+		raw,
+		getValue,
+		onBlur,
+		clamp
+	]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		getValue,
+		...props,
+		children: () => /* @__PURE__ */ jsx(Input.TextInput, {
+			type: "number",
+			disabled: !!readonly,
+			placeholder,
+			value: raw,
+			min,
+			max,
+			step: integer ? 1 : void 0,
+			onChange: handleChange,
+			onBlur: handleBlur
+		})
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/PasswordField/PasswordField.tsx
+var PasswordField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props }) => {
+	const handleChange = useCallback((event) => onValueChange(type, event.target.value), [type, onValueChange]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		...props,
+		children: ({ value = "" }) => /* @__PURE__ */ jsx(Input.TextInput, {
+			type: "password",
+			noAutoFill: true,
+			spellCheck: false,
+			disabled: !!readonly,
+			placeholder,
+			value,
+			onBlur,
+			onChange: handleChange
+		})
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/RefField/find-ref-option.ts
+var isRefSnapshot = (val) => {
+	return typeof val === "object" && typeof val?.["/"] === "string";
+};
+/**
+* Find the option a ref-like form value points at. Matches on the local (entity-id) form so a bare local EID
+* (`echo:/<id>`, produced by `Ref.make`) still resolves against an option keyed by the entity's qualified
+* self URI (`echo://<space>/<id>`). Returns `undefined` when the value is not a ref or no option matches.
+*
+* Comparing by entity id is only sound within one space (ids are unique there, not globally). Two EIDs that
+* both carry a space authority must therefore agree on it: a qualified value and a qualified option from
+* different spaces never match, even when their entity ids coincide.
+*/
+var findRefOption = (value, options) => {
+	const isRef = Ref.isRef(value);
+	if (!isRef && !isRefSnapshot(value)) return;
+	const valueUri = isRef ? value.uri : value["/"];
+	const directMatch = options.find((option) => option.id === valueUri);
+	if (directMatch) return directMatch;
+	const valueEid = EID$1.tryParse(valueUri);
+	if (!valueEid) return;
+	const valueSpaceId = EID$1.getSpaceId(valueEid);
+	const valueLocal = EID$1.toLocal(valueEid);
+	return options.find((option) => {
+		const optionEid = EID$1.tryParse(option.id);
+		if (!optionEid) return false;
+		const optionSpaceId = EID$1.getSpaceId(optionEid);
+		if (valueSpaceId != null && optionSpaceId != null && valueSpaceId !== optionSpaceId) return false;
+		return EID$1.equals(EID$1.toLocal(optionEid), valueLocal);
+	});
+};
+//#endregion
+//#region src/components/ObjectPicker/ObjectPicker.tsx
+var ObjectPickerContent = composable(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap, onSelect, onCreate, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const [showForm, setShowForm] = useState(false);
+	const [formInitialValue, setFormInitialValue] = useState("");
+	const { results, query, handleSearch } = useSearchListResults({ items: options });
+	const handleFormSave = useCallback(async (values) => {
+		await onCreate?.(values);
+		setShowForm(false);
+		setFormInitialValue("");
+	}, [onCreate]);
+	const handleFormCancel = useCallback(() => {
+		setShowForm(false);
+		setFormInitialValue("");
+	}, []);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && createSchema && event.currentTarget.querySelector("[role=\"option\"][aria-selected=\"true\"][data-value=\"__create__\"]")) {
+			event.stopPropagation();
+			event.preventDefault();
+			const currentQuery = event.currentTarget.querySelector("input[type=\"text\"]")?.value || "";
+			setFormInitialValue(currentQuery);
+			setShowForm(true);
+		}
+	}, [createSchema]);
+	if (showForm && createSchema) return /* @__PURE__ */ jsxs(Combobox.Content, {
+		...props,
+		onKeyDownCapture: handleKeyDown,
+		ref: forwardedRef,
+		children: [/* @__PURE__ */ jsx(Popover.Viewport, { children: /* @__PURE__ */ jsx(Form.Root, {
+			testId: "create-referenced-object-form",
+			schema: createSchema,
+			defaultValues: createInitialValuePath ? { [createInitialValuePath]: formInitialValue } : {},
+			fieldMap: createFieldMap,
+			onSave: handleFormSave,
+			onCancel: handleFormCancel,
+			children: /* @__PURE__ */ jsx(Form.Viewport, { children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsx(Form.FieldSet, {}), /* @__PURE__ */ jsx(Form.Actions, {})] }) })
+		}) }), /* @__PURE__ */ jsx(Combobox.Arrow, {})]
+	});
+	return /* @__PURE__ */ jsxs(Combobox.Content, {
+		...props,
+		onKeyDownCapture: handleKeyDown,
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				placeholder: t("ref-field-combobox-input.placeholder"),
+				autoFocus: true,
+				value: query,
+				onValueChange: handleSearch
+			}),
+			/* @__PURE__ */ jsxs(Combobox.List, { children: [results.map((option) => /* @__PURE__ */ jsx(Combobox.Item, {
+				value: option.id,
+				label: option.label,
+				description: option.description,
+				checked: selectedIds?.includes(option.id),
+				onSelect: () => onSelect?.(option.id),
+				classNames: "flex items-center gap-2"
+			}, option.id)), createSchema && onCreate && /* @__PURE__ */ jsx(CreateItem, {
+				query,
+				createOptionLabel,
+				createOptionIcon: createOptionIcon ?? "ph--plus--regular",
+				onCreateItemSelect: (currentQuery) => {
+					setFormInitialValue(currentQuery);
+					setShowForm(true);
+				}
+			})] }),
+			/* @__PURE__ */ jsx(Combobox.Arrow, {})
+		]
+	});
+});
+var CreateItem = ({ query, createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+	const { t } = useTranslation(translationKey);
+	const label = createOptionLabel ? t(createOptionLabel[0], {
+		ns: createOptionLabel[1].ns,
+		text: query
+	}) : t("create-option.label");
+	return /* @__PURE__ */ jsx(Combobox.Item, {
+		value: "__create__",
+		label,
+		icon: createOptionIcon,
+		classNames: "flex items-center gap-2",
+		closeOnSelect: false,
+		onSelect: () => {
+			onCreateItemSelect(query);
+		}
+	});
+};
+ObjectPickerContent.displayName = "ObjectPicker.Content";
+var ObjectPicker = {
+	Root: Combobox.Root,
+	Portal: Combobox.Portal,
+	Trigger: Combobox.Trigger,
+	VirtualTrigger: Combobox.VirtualTrigger,
+	Content: ObjectPickerContent
+};
+//#endregion
+//#region src/components/Form/FormField/fields/RefField/RefField.tsx
+var defaultGetOptions = (results, { parentLabel, getTypePlaceholder } = {}) => results.filter((result) => !parentLabel || Obj.getParent(result) != null).map((result) => {
+	const id = Entity.getURI(result, { prefer: "named" });
+	const labelEntity = (parentLabel ? Obj.getParent(result) : void 0) ?? result;
+	const typename = Entity.getTypename(labelEntity);
+	return {
+		id,
+		label: Entity.getLabel(labelEntity) ?? (typename ? getTypePlaceholder?.(typename) : void 0) ?? id
+	};
+});
+var defaultUseResults = (db, typename) => useQuery(db, !typename ? Query.select(Filter.nothing()) : typename === ANY_OBJECT_TYPENAME ? Query.select(Filter.everything()) : Query.select(Filter.type(DXN$1.make(typename))).from(Scope.space(), Scope.registry()));
+var RefField = (props) => {
+	const { type, readonly, label, jsonPath, placeholder, presentation, required, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap, db, useType: useType$3 = useType, useResults = defaultUseResults, getOptions = defaultGetOptions, onCreate, resolveCreateEntry, onValueChange } = props;
+	const { t } = useTranslation(translationKey);
+	const { status, error } = getStatus();
+	const resolved = presentationFor(presentation);
+	const typename = useMemo(() => type ? SchemaEx.findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [type]);
+	const getTypePlaceholder = useCallback((placeholderTypename) => {
+		const segment = placeholderTypename.split(/[.:/]/).filter(Boolean).pop() ?? placeholderTypename;
+		const humanized = segment.charAt(0).toUpperCase() + segment.slice(1);
+		return t("object-name.placeholder", {
+			ns: placeholderTypename,
+			defaultValue: humanized
+		});
+	}, [t]);
+	const results = useResults(db, typename);
+	const options = useMemo(() => {
+		const parentLabel = type ? SchemaEx.findAnnotation(type, ParentLabelAnnotationId) === true : false;
+		return getOptions(results, {
+			parentLabel,
+			getTypePlaceholder
+		});
+	}, [
+		results,
+		getOptions,
+		type,
+		getTypePlaceholder
+	]);
+	const item = useCallback(() => findRefOption(getValue(), options), [options, getValue])();
+	const selectedIds = useMemo(() => item ? [item.id] : [], [item]);
+	const createSchema = useType$3(db, typename && typename !== ANY_OBJECT_TYPENAME ? DXN$1.make(typename) : void 0);
+	const createEntry = typename ? resolveCreateEntry?.(typename) : void 0;
+	const [open, setOpen] = useState(false);
+	const handleCreate = useCallback(async (values) => {
+		if (createEntry?.createObject && db) {
+			const newObject = await createEntry.createObject(values, db);
+			if (newObject) onValueChange(type, Ref.make(newObject));
+		} else if (createSchema && onCreate) {
+			const newObject = await onCreate(createSchema, values);
+			if (newObject) onValueChange(type, Ref.make(newObject));
+		}
+		setOpen(false);
+	}, [
+		createEntry,
+		db,
+		createSchema,
+		onCreate,
+		type,
+		onValueChange
+	]);
+	const handleUpdate = useCallback((id) => {
+		const item = options.find((option) => option.id === id);
+		const ref = item ? Ref.fromURI(URI.make(item.id)) : void 0;
+		onValueChange(type, ref);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	const handleSelect = useCallback((id) => {
+		if (item?.id === id) handleUpdate(void 0);
+		else handleUpdate(id);
+	}, [item, handleUpdate]);
+	if (!typename || (readonly || resolved.isStatic) && !item) return null;
+	return /* @__PURE__ */ jsxs(Input.Root, {
+		validationValence: status,
+		children: [
+			resolved.showLabel && /* @__PURE__ */ jsx(FormFieldLabel, {
+				error,
+				readonly,
+				required,
+				label,
+				path: jsonPath
+			}),
+			/* @__PURE__ */ jsx("div", { children: readonly ? !item ? /* @__PURE__ */ jsx("p", {
+				className: "text-description mb-2",
+				children: t("empty-readonly-ref-field.label")
+			}) : /* @__PURE__ */ jsx(DxAnchor, {
+				dxn: item.id,
+				rootclassname: "me-1",
+				children: item.label
+			}, item.id) : /* @__PURE__ */ jsxs(ObjectPicker.Root, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(ObjectPicker.Trigger, {
+					asChild: true,
+					classNames: "p-0",
+					children: item ? /* @__PURE__ */ jsx("div", {
+						className: "flex gap-form-gap w-full",
+						children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+							value: item.label,
+							readOnly: true,
+							classNames: "w-full"
+						}) }, item.id)
+					}) : /* @__PURE__ */ jsxs(Button, {
+						classNames: "w-full text-start gap-form-gap",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "grow overflow-hidden",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate text-description",
+								children: placeholder || label || t("ref-field.placeholder")
+							})
+						}), /* @__PURE__ */ jsx(Icon, {
+							size: 3,
+							icon: "ph--caret-down--bold"
+						})]
+					})
+				}), /* @__PURE__ */ jsx(ObjectPicker.Portal, { children: /* @__PURE__ */ jsx(ObjectPicker.Content, {
+					classNames: "dx-card-popover-width",
+					options,
+					selectedIds,
+					createSchema: createEntry?.inputSchema ?? (createSchema && omitHiddenFormFields(omitId(Type.getSchema(createSchema)))),
+					createOptionLabel,
+					createOptionIcon,
+					createInitialValuePath,
+					createFieldMap,
+					onCreate: onCreate || createEntry?.createObject ? handleCreate : void 0,
+					onSelect: handleSelect
+				}) })]
+			}) }),
+			resolved.showError && /* @__PURE__ */ jsx(Input.DescriptionAndValidation, { children: error })
+		]
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/RefField/InlineRefField.tsx
+/**
+* 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).
+*/
+var InlineRefField = (props) => {
+	const { type, readonly, label, jsonPath, presentation, required, db, getValue, onValueChange, onCreate, useType: useType$2 = useType } = props;
+	const { t } = useTranslation(translationKey);
+	const resolved = presentationFor(presentation);
+	const reference = getValue();
+	const typename = useMemo(() => type ? SchemaEx.findAnnotation(type, ReferenceAnnotationId$1)?.typename : void 0, [type]);
+	const createType = useType$2(db, typename ? DXN$1.make(typename) : void 0);
+	const handleCreate = useCallback(async () => {
+		if (!createType || !onCreate) return;
+		const newObject = await onCreate(createType, {});
+		if (newObject) onValueChange(type, Ref.make(newObject));
+	}, [
+		createType,
+		onCreate,
+		type,
+		onValueChange
+	]);
+	if (readonly && !reference) return null;
+	return /* @__PURE__ */ jsxs(Input.Root, { children: [resolved.showLabel && /* @__PURE__ */ jsx(FormFieldLabel, {
+		readonly,
+		required,
+		label,
+		path: jsonPath
+	}), reference ? /* @__PURE__ */ jsx(InlineForm, {
+		reference,
+		db,
+		readonly,
+		useType: useType$2
+	}) : !readonly && onCreate && /* @__PURE__ */ jsx(IconButton, {
+		classNames: "w-full gap-form-gap",
+		disabled: !createType || !db,
+		icon: "ph--plus--regular",
+		label: label || t("ref-field.placeholder"),
+		onClick: () => void handleCreate()
+	})] });
+};
+var InlineForm = ({ reference, db, readonly, useType: useType$1 = useType }) => {
+	const target = useAtomValue(useMemo(() => reference.atom, [reference]));
+	const typeFromRegistry = useType$1(db, target ? Obj.getTypeURI(target) : void 0);
+	const targetType = target && Obj.getType(target) || typeFromRegistry;
+	const formSchema = useMemo(() => targetType ? omitId(Type.getSchema(targetType)) : void 0, [targetType]);
+	const defaultValues = useMemo(() => target ? { ...target } : {}, [target]);
+	const handleChange = useCallback((values, { isValid, changed }) => {
+		if (!isValid || !target) return;
+		const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+		if (changedPaths.length === 0) return;
+		Obj.update(target, () => {
+			for (const path of changedPaths) {
+				const parts = SchemaEx.splitJsonPath(path);
+				Obj.setValue(target, parts, Obj.getValue(values, parts));
+			}
+		});
+	}, [target]);
+	if (!target || !formSchema) return null;
+	return /* @__PURE__ */ jsx(FormRoot, {
+		db,
+		schema: formSchema,
+		defaultValues,
+		onValuesChanged: handleChange,
+		children: /* @__PURE__ */ jsx(FormContent, { children: /* @__PURE__ */ jsx(FormFieldSetContainer$1, {
+			collapsible: true,
+			readonly
+		}) })
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/SelectOptionField/SelectOptionField.tsx
+var SelectOptionField = ({ type, readonly, label, jsonPath, getStatus, getValue, onValueChange }) => {
+	const { t } = useTranslation(translationKey);
+	const { status, error } = getStatus();
+	const [selected, setSelectedId] = useState(null);
+	const [isNewOption, setIsNewOption] = useState(false);
+	const inputRef = useRef(null);
+	const options = getValue();
+	useEffect(() => {
+		if (options === void 0) onValueChange(type, []);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	const randomHue = () => {
+		const usedHues = new Set(options?.map((option) => option.color) ?? []);
+		const unusedHues = hues.filter((hue) => !usedHues.has(hue));
+		if (unusedHues.length > 0) return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+		const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+		const availableHues = hues.filter((hue) => !lastThree.has(hue));
+		return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
+	};
+	const handleAdd = useCallback(() => {
+		const newId = PublicKey.random().truncate();
+		const newOption = {
+			id: newId,
+			title: "",
+			color: randomHue()
+		};
+		onValueChange(type, [...options ?? [], newOption]);
+		setSelectedId(newId);
+		setIsNewOption(true);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	const handleDelete = useCallback((id) => {
+		onValueChange(type, options?.filter((option) => option.id !== id) ?? []);
+		setSelectedId(null);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	const handleMove = useCallback((from, to) => {
+		if (!options) return;
+		const newOptions = [...options];
+		const [removed] = newOptions.splice(from, 1);
+		newOptions.splice(to, 0, removed);
+		onValueChange(type, newOptions);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	const handleClick = useCallback((id) => {
+		setSelectedId((current) => current === id ? null : id);
+	}, []);
+	const handleTitleChange = useCallback((id) => (e) => {
+		const newOptions = options?.map((o) => o.id === id ? {
+			...o,
+			title: e.target.value
+		} : o);
+		onValueChange(type, newOptions ?? []);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	const handleKeyDown = useCallback((ev) => {
+		if (ev.key === "Enter") setSelectedId(null);
+	}, []);
+	const handleColorChange = useCallback((id) => (hue) => {
+		const newOptions = options?.map((o) => o.id === id ? {
+			...o,
+			color: hue
+		} : o);
+		onValueChange(type, newOptions ?? []);
+	}, [
+		options,
+		type,
+		onValueChange
+	]);
+	useEffect(() => {
+		if (selected && isNewOption && inputRef.current) {
+			inputRef.current.focus();
+			setIsNewOption(false);
+		}
+	}, [selected, isNewOption]);
+	return /* @__PURE__ */ jsxs(Input.Root, {
+		validationValence: status,
+		children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+			error,
+			readonly,
+			label,
+			path: jsonPath
+		}), /* @__PURE__ */ jsx("div", { children: options && /* @__PURE__ */ jsx(OrderedList.Root, {
+			items: options,
+			isItem: (_item) => true,
+			getId: (option) => option.id,
+			onMove: readonly ? void 0 : handleMove,
+			readonly: !!readonly,
+			children: ({ items }) => /* @__PURE__ */ jsxs(OrderedList.Content, {
+				classNames: "w-full overflow-auto",
+				children: [items?.map((item) => /* @__PURE__ */ jsxs(OrderedList.Item, {
+					id: item.id,
+					item,
+					canDrag: !readonly,
+					classNames: "flex flex-col cursor-pointer rounded-xs dx-hover",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [
+							/* @__PURE__ */ jsx(OrderedList.DragHandle, {}),
+							/* @__PURE__ */ jsx("div", {
+								className: "flex grow items-center truncate px-2",
+								onClick: () => handleClick(item.id),
+								children: /* @__PURE__ */ jsx(Tag$1, {
+									hue: item.color,
+									children: item.title || "​"
+								})
+							}),
+							/* @__PURE__ */ jsx(ToggleIconButton, {
+								iconOnly: true,
+								variant: "ghost",
+								active: selected === item.id,
+								icon: "ph--caret-right--regular",
+								label: t(selected === item.id ? "collapse.label" : "expand.label", { ns: osTranslations }),
+								onClick: () => handleClick(item.id)
+							})
+						]
+					}), selected === item.id && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col p-form-padding gap-form-gap dx-density-md",
+						children: [/* @__PURE__ */ jsx(Input.Label, {
+							classNames: "text-sm",
+							children: t("select-option.label")
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-[1fr_min-content_min-content] gap-form-gap",
+							children: [
+								/* @__PURE__ */ jsx(Input.TextInput, {
+									disabled: !!readonly,
+									placeholder: t("select-option-label.placeholder"),
+									ref: selected === item.id ? inputRef : void 0,
+									value: item.title,
+									onChange: handleTitleChange(item.id),
+									onKeyDown: handleKeyDown,
+									classNames: "flex-1"
+								}),
+								/* @__PURE__ */ jsx(HuePicker, {
+									disabled: !!readonly,
+									value: item.color,
+									onChange: handleColorChange(item.id)
+								}),
+								/* @__PURE__ */ jsx(IconButton, {
+									disabled: !!readonly,
+									icon: "ph--trash--fill",
+									iconOnly: true,
+									label: t("select-option-delete.button"),
+									onClick: () => handleDelete(item.id)
+								})
+							]
+						})]
+					})]
+				}, item.id)), /* @__PURE__ */ jsx(IconButton, {
+					classNames: "w-full",
+					variant: "ghost",
+					icon: "ph--plus--regular",
+					label: t("select-option-add.button"),
+					onClick: handleAdd,
+					disabled: !!readonly
+				})]
+			})
+		}) })]
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/TextAreaField/TextAreaField.tsx
+var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+	const handleChange = useCallback((event) => onValueChange(type, event.target.value), [type, onValueChange]);
+	return /* @__PURE__ */ jsx(FormRow, {
+		readonly,
+		...props,
+		children: ({ value = "" }) => /* @__PURE__ */ jsx(Input.TextArea, {
+			rows: 5,
+			disabled: !!readonly,
+			placeholder,
+			value,
+			onChange: handleChange,
+			onBlur
+		})
+	});
+};
+//#endregion
+//#region src/components/Form/FormField/fields/TupleField/TupleField.tsx
+var gridCols = [
+	"grid-cols-1",
+	"grid-cols-2",
+	"grid-cols-3",
+	"grid-cols-4"
+];
+var TupleField = ({ binding, type, readonly, label, jsonPath, getStatus, getValue, onValueChange, onBlur }) => {
+	const { status, error } = getStatus();
+	const values = getValue() ?? {};
+	return /* @__PURE__ */ jsxs(Input.Root, {
+		validationValence: status,
+		children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+			error,
+			readonly,
+			label,
+			path: jsonPath
+		}), /* @__PURE__ */ jsx("div", {
+			className: mx("grid gap-form-gap", gridCols[binding.length - 1]),
+			children: binding.map((prop) => /* @__PURE__ */ jsx(Input.TextInput, {
+				type: "number",
+				disabled: !!readonly,
+				value: values[prop],
+				onChange: (event) => {
+					onValueChange(type, {
+						...values,
+						[prop]: safeParseFloat(event.target.value, 0)
+					});
+				},
+				onBlur
+			}, prop))
+		})]
+	});
+};
+//#endregion
+//#region src/components/Form/FormLayout/resolve-layout-field.ts
+/**
+* Walks a dotted path of property names through nested struct ASTs, returning the
+* leaf `PropertySignature` (or `undefined` if any segment is missing).
+*/
+var resolvePropertySignature = (ast, segments) => {
+	let node = ast;
+	for (let index = 0; index < segments.length; index++) {
+		const typeLiteral = SchemaEx.findNode(node, SchemaAST.isTypeLiteral);
+		if (!typeLiteral) return;
+		const prop = SchemaAST.getPropertySignatures(typeLiteral).find((p) => globalThis.String(p.name) === segments[index]);
+		if (!prop) return;
+		if (index === segments.length - 1) return prop;
+		node = prop.type;
+	}
+};
+/**
+* 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.
+*/
+var resolveLayoutField = (schema, name) => {
+	const segments = name.split(".");
+	const prop = resolvePropertySignature(schema.ast, segments);
+	if (!prop) return;
+	const { type: baseType } = SchemaEx.getBaseType(prop);
+	const type = prop.annotations && Reflect.ownKeys(prop.annotations).length > 0 ? {
+		...baseType,
+		annotations: {
+			...baseType.annotations,
+			...prop.annotations
+		}
+	} : baseType;
+	const title = SchemaEx.getAnnotation(SchemaAST.TitleAnnotationId)(type);
+	const labelType = SchemaEx.findNode(prop.type, SchemaAST.isTypeLiteral);
+	const labelled = labelType != null && Option.isSome(Annotation.LabelAnnotation.getFromAst(labelType));
+	return {
+		type,
+		segments,
+		leafName: segments[segments.length - 1],
+		title,
+		labelType: labelled ? labelType : void 0,
+		required: !prop.isOptional
+	};
+};
+//#endregion
+//#region src/components/Form/FormLayout/parser.ts
+var LayoutParseError = class extends Error {
+	position;
+	_tag = "LayoutParseError";
+	constructor(message, position) {
+		super(position !== void 0 ? `${message} (at position ${position})` : message);
+		this.position = position;
+	}
+};
+var TAG_RE = /<\s*(\/?)\s*(\w+)([^>]*?)(\/?)\s*>/g;
+var ATTR_RE = /([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|(\d+))/g;
+var parseAttrs = (raw) => {
+	const attrs = {};
+	ATTR_RE.lastIndex = 0;
+	let match;
+	while ((match = ATTR_RE.exec(raw)) !== null) {
+		const [, key, doubleQuoted, singleQuoted, bare] = match;
+		attrs[key] = doubleQuoted ?? singleQuoted ?? bare;
+	}
+	return attrs;
+};
+var tokenize = (input) => {
+	const tokens = [];
+	TAG_RE.lastIndex = 0;
+	let match;
+	let cursor = 0;
+	while ((match = TAG_RE.exec(input)) !== null) {
+		const between = input.slice(cursor, match.index);
+		if (between.trim().length > 0) throw new LayoutParseError(`unexpected text content: ${JSON.stringify(between.trim())}`, cursor);
+		const [, slash, name, attrsRaw, selfSlash] = match;
+		if (slash) tokens.push({
+			type: "close",
+			name,
+			position: match.index
+		});
+		else tokens.push({
+			type: "open",
+			name,
+			attrs: parseAttrs(attrsRaw),
+			selfClosing: selfSlash === "/",
+			position: match.index
+		});
+		cursor = match.index + match[0].length;
+	}
+	const trailing = input.slice(cursor);
+	if (trailing.trim().length > 0) throw new LayoutParseError(`unexpected text content: ${JSON.stringify(trailing.trim())}`, cursor);
+	return tokens;
+};
+var requireAttr = (attrs, key, tag, position) => {
+	const value = attrs[key];
+	if (value === void 0) throw new LayoutParseError(`<${tag}> missing required attribute "${key}"`, position);
+	return value;
+};
+var parseInteger = (value, attr, tag, position) => {
+	if (!/^\d+$/.test(value)) throw new LayoutParseError(`<${tag}> attribute "${attr}" expects an integer, got ${JSON.stringify(value)}`, position);
+	return Number.parseInt(value, 10);
+};
+/** Parses a layout template string into a single root node. The root must be `<grid>`. */
+var parseLayout = (template) => {
+	const tokens = tokenize(template);
+	if (tokens.length === 0) throw new LayoutParseError("empty template");
+	let index = 0;
+	const parseNode = () => {
+		const token = tokens[index];
+		if (!token || token.type !== "open") throw new LayoutParseError(`expected an opening tag, got ${JSON.stringify(token)}`, token?.position);
+		if (token.name === "field") {
+			if (!token.selfClosing) throw new LayoutParseError("<field> must be self-closing (e.g. <field name=\"x\"/>)", token.position);
+			const name = requireAttr(token.attrs, "name", "field", token.position);
+			const spanRaw = token.attrs.span;
+			const span = spanRaw !== void 0 ? parseInteger(spanRaw, "span", "field", token.position) : void 0;
+			index += 1;
+			return {
+				kind: "field",
+				name,
+				span
+			};
+		}
+		if (token.name === "grid") {
+			if (token.selfClosing) throw new LayoutParseError("<grid> must wrap children (cannot self-close)", token.position);
+			const cols = parseInteger(requireAttr(token.attrs, "cols", "grid", token.position), "cols", "grid", token.position);
+			index += 1;
+			const children = [];
+			while (index < tokens.length && !(tokens[index].type === "close" && tokens[index].name === "grid")) children.push(parseNode());
+			const closing = tokens[index];
+			if (!closing || closing.type !== "close" || closing.name !== "grid") throw new LayoutParseError("<grid> not closed", token.position);
+			index += 1;
+			return {
+				kind: "grid",
+				cols,
+				children
+			};
+		}
+		throw new LayoutParseError(`unknown element <${token.name}>`, token.position);
+	};
+	const root = parseNode();
+	if (index !== tokens.length) {
+		const trailing = tokens[index];
+		throw new LayoutParseError(`unexpected trailing tag <${trailing.type === "open" ? "" : "/"}${trailing.name}>`, trailing.position);
+	}
+	if (root.kind !== "grid") throw new LayoutParseError("root element must be <grid>");
+	return root;
+};
+//#endregion
+//#region src/components/Form/FormLayout/FormLayout.tsx
+var FORM_LAYOUT_NAME$1 = "Form.Layout";
+/**
+* Lays out schema fields according to a `FormLayout` DSL template. The template
+* is either passed via the `template` prop or read from the schema's
+* `FormLayoutAnnotation`. Fields not referenced in the template are hidden —
+* the template controls exactly what renders.
+*
+* A `<field name=…/>` resolves against the schema:
+* - A dotted name (`origin.code`) drills into a nested struct and renders the leaf field.
+* - A name that resolves to a nested struct carrying a `LabelAnnotation` auto-converts
+*   to the struct's computed label, rendered as a single read-only text (rather than
+*   expanding the struct's sub-fields).
+*/
+var FormLayout = ({ schema, template, name = Annotation.DEFAULT_LAYOUT_NAME, path, readonly, layout, projection, ...props }) => {
+	const annotated = Option.getOrUndefined(Annotation.FormLayoutAnnotation.get(schema));
+	const source = template ?? annotated?.[name];
+	if (source === void 0) throw new LayoutParseError(annotated ? `no layout named "${name}" on schema (available: ${Object.keys(annotated).join(", ") || "∅"})` : `no template provided and schema has no FormLayoutAnnotation`);
+	return /* @__PURE__ */ jsx(RenderNode, {
+		node: useMemo(() => parseLayout(source), [source]),
+		schema,
+		basePath: path ?? [],
+		readonly,
+		layout,
+		projection,
+		...props
+	});
+};
+FormLayout.displayName = FORM_LAYOUT_NAME$1;
+var RenderNode = ({ node, schema, basePath, ...props }) => {
+	if (node.kind === "grid") return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-x-form-gap",
+		style: { gridTemplateColumns: `repeat(${node.cols}, minmax(0, 1fr))` },
+		children: node.children.map((child, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(RenderNode, {
+			node: child,
+			schema,
+			basePath,
+			...props
+		}) }, index))
+	});
+	const resolved = resolveLayoutField(schema, node.name);
+	if (!resolved) throw new LayoutParseError(`field "${node.name}" not found on schema`);
+	const { type, segments, leafName, title, labelType, required } = resolved;
+	const path = [...basePath, ...segments];
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-w-0",
+		style: node.span ? { gridColumn: `span ${node.span} / span ${node.span}` } : void 0,
+		children: /* @__PURE__ */ jsx(FormFieldErrorBoundary, {
+			path,
+			children: labelType ? /* @__PURE__ */ jsx(LabelField, {
+				schema: Schema.make(labelType),
+				label: title ?? String$1.capitalize(leafName),
+				path,
+				layout: props.layout
+			}) : /* @__PURE__ */ jsx(FormField, {
+				type,
+				name: leafName,
+				path,
+				required,
+				...props
+			})
+		})
+	});
+};
+/**
+* Renders a nested struct value as its computed label (via `LabelAnnotation`),
+* as a single read-only text. Empty values are omitted, mirroring the static
+* presentation of regular fields.
+*/
+var LabelField = ({ schema, label, path, layout }) => {
+	const { variant = "default" } = useFormContext(FORM_LAYOUT_NAME$1);
+	const styles = formTheme.styles({ variant });
+	const { getValue } = useFormFieldState(FORM_LAYOUT_NAME$1, path);
+	const value = getValue();
+	const text = value == null ? void 0 : Annotation.getLabelWithSchema(schema, value);
+	if (text == null || text.trim().length === 0) return null;
+	const presentation = presentationFor(layout);
+	return /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsxs("div", {
+		className: styles.field(),
+		children: [presentation.showLabel && /* @__PURE__ */ jsx(FormFieldLabel, {
+			variant,
+			readonly: true,
+			label,
+			path: SchemaEx.createJsonPath(path)
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.fieldControl(),
+			children: /* @__PURE__ */ jsx("p", {
+				className: "truncate min-w-0",
+				title: text,
+				children: text
+			})
+		})]
+	}) });
+};
+//#endregion
+//#region src/components/Form/FormFieldSet/FormFieldSetContainer.tsx
+var styles$1 = formTheme.styles();
+/**
+* Shared chrome for a labelled group of sub-fields: an optional header (label + collapse toggle) and,
+* when collapsible, an indented bordered container around the body. Nested structs, object-array items,
+* and inline refs all reach this via `FormFieldSet`, so their visual containment is identical.
+*/
+var FormFieldSetContainer = ({ classNames, label, path, readonly, presentation, collapsible, children }) => {
+	const { t } = useTranslation(translationKey);
+	const [collapsed, setCollapsed] = useState(false);
+	const canCollapse = collapsible && Children.toArray(children).length > 0;
+	const showBody = !(canCollapse && collapsed);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [presentation.showLabel && label && /* @__PURE__ */ jsx(FormFieldHeader, {
+		label,
+		path,
+		readonly,
+		classNames: "pl-2",
+		actions: canCollapse ? /* @__PURE__ */ jsx(ToggleIconButton, {
+			active: !collapsed,
+			classNames: "px-1 mr-0.5",
+			variant: "ghost",
+			density: "sm",
+			iconOnly: true,
+			icon: "ph--caret-right--regular",
+			label: t(collapsed ? "expand-fields.label" : "collapse-fields.label")
+		}) : void 0,
+		onClick: canCollapse ? () => setCollapsed((value) => !value) : void 0
+	}), showBody && (canCollapse ? /* @__PURE__ */ jsx("div", {
+		className: styles$1.fieldSetBody(),
+		children
+	}) : children)] });
+	if (canCollapse) return /* @__PURE__ */ jsx("div", {
+		className: styles$1.fieldSetBoxOuter(),
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles$1.fieldSetBox({ class: mx(classNames) }),
+			children: content
+		})
+	});
+	return classNames ? /* @__PURE__ */ jsx("div", {
+		className: mx(classNames),
+		children: content
+	}) : /* @__PURE__ */ jsx(Fragment$1, { children: content });
+};
+//#endregion
+//#region src/components/Form/FormFieldSet/FormFieldSet.tsx
+var FORM_FIELDSET_NAME$1 = "Form.FieldSet";
+/**
+* Renders a set of form fields derived from a schema object.
+*/
+var FormFieldSet = ({ classNames, label, schema, readonly, path, sort, collapsible, filter, projection, layout, layoutName = DEFAULT_LAYOUT_NAME, ...props }) => {
+	const values = useFormValues(FORM_FIELDSET_NAME$1, path);
+	const properties = useFormFieldSetProperties({
+		schema,
+		values,
+		filter,
+		sort,
+		projection
+	});
+	if ((readonly || layout === "static") && values == null) return null;
+	const body = (schema ? Option.getOrUndefined(FormLayoutAnnotation.get(schema)) : void 0)?.[layoutName] !== void 0 && schema ? /* @__PURE__ */ jsx(FormLayout, {
+		schema,
+		name: layoutName,
+		path,
+		readonly,
+		layout,
+		projection,
+		...props
+	}) : properties.map((property) => {
+		const name = property.name.toString();
+		return /* @__PURE__ */ jsx(FormFieldErrorBoundary, {
+			path: [...path ?? [], name],
+			children: /* @__PURE__ */ jsx(FormField, {
+				type: property.type,
+				name,
+				path: [...path ?? [], name],
+				required: !property.isOptional,
+				readonly,
+				layout,
+				projection,
+				...props
+			})
+		}, name);
+	});
+	return /* @__PURE__ */ jsx(FormFieldSetContainer, {
+		classNames,
+		label,
+		path: SchemaEx.createJsonPath(path ?? []),
+		readonly,
+		presentation: presentationFor(layout),
+		collapsible,
+		children: body
+	});
+};
+FormFieldSet.displayName = FORM_FIELDSET_NAME$1;
+/**
+* Resolves ordered schema properties for a field set (projection order, filter, or sort).
+*/
+var useFormFieldSetProperties = ({ schema, filter, projection, values, sort }) => {
+	return useMemo(() => {
+		if (!schema) return [];
+		const schemaProps = getRootFormProperties(schema.ast, values);
+		const filteredProps = filter ? filter(schemaProps) : schemaProps;
+		if (projection) {
+			const fieldProjections = projection.getFieldProjections();
+			const hiddenProperties = new Set(projection.getHiddenProperties());
+			const visibleProps = filteredProps.filter((prop) => !hiddenProperties.has(prop.name.toString()));
+			const orderedProps = [];
+			for (const fieldProjection of fieldProjections) {
+				const fieldPath = String(fieldProjection.field.path);
+				const prop = visibleProps.find((prop) => prop.name === fieldPath);
+				if (prop) orderedProps.push(prop);
+			}
+			const projectionPaths = new Set(fieldProjections.map((projection) => String(projection.field.path)));
+			const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
+			orderedProps.push(...remainingProps);
+			return orderedProps;
+		}
+		return sort ? [...filteredProps].sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filteredProps;
+	}, [
+		schema,
+		values,
+		filter,
+		sort,
+		projection
+	]);
+};
+//#endregion
+//#region src/components/Form/FormControls.tsx
+var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
+	return /* @__PURE__ */ jsx(FormContextProvider, {
+		form: useFormHandler({
+			schema,
+			values,
+			onSave,
+			onCancel,
+			...props
+		}),
+		...props,
+		children
+	});
+};
+FormRoot.displayName = "Form.Root";
+var FORM_VIEWPORT_NAME = "Form.Viewport";
+var FormViewport = composable(({ children, scroll, gutter = "sm", ...props }, forwardedRef) => {
+	const { variant = "default" } = useFormContext(FORM_VIEWPORT_NAME);
+	const styles = formTheme.styles({ variant });
+	const inColumn = useInColumn();
+	const span = "[.dx-column-root_&]:col-span-full";
+	if (inColumn && !scroll) return /* @__PURE__ */ jsx(Column.Center, {
+		...composableProps(props, { classNames: ["w-full min-w-0", styles.viewport()] }),
+		ref: forwardedRef,
+		children
+	});
+	if (scroll) return /* @__PURE__ */ jsx(Column.Root, {
+		...composableProps(props, { classNames: [
+			"dx-expander",
+			span,
+			styles.viewport()
+		] }),
+		gutter,
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			orientation: "vertical",
+			centered: true,
+			padding: true,
+			thin: true,
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children })
+		})
+	});
+	return /* @__PURE__ */ jsx(Column.Root, {
+		...composableProps(props, { classNames: [
+			"w-full min-w-0",
+			span,
+			styles.viewport()
+		] }),
+		gutter,
+		ref: forwardedRef,
+		children
+	});
+});
+FormViewport.displayName = FORM_VIEWPORT_NAME;
+var FORM_CONTENT_NAME = "Form.Content";
+var FormContent = composable(({ children, ...props }, forwardedRef) => {
+	const { form, testId, variant = "default" } = useFormContext(FORM_CONTENT_NAME);
+	const styles = formTheme.styles({ variant });
+	const localRef = useRef(null);
+	const mergedRef = useMergeRefs([forwardedRef, localRef]);
+	useKeyHandler(localRef, form);
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, {
+			role: "form",
+			classNames: mx(withColumn.center(), "flex flex-col w-full dx-document", styles.content())
+		}),
+		"data-testid": testId,
+		ref: mergedRef,
+		children
+	});
+});
+FormContent.displayName = FORM_CONTENT_NAME;
+var FORM_FIELDSET_NAME = "Form.FieldSet";
+/** Context-reading binding for `Form.FieldSet`: pulls the schema + field context off the form and delegates to {@link FormFieldSet}. */
+var FormFieldSetContainer$1 = ({ classNames, ...props }) => {
+	const { form, variant = "default", ...contextProps } = useFormContext(FORM_FIELDSET_NAME);
+	const styles = formTheme.styles({ variant });
+	return /* @__PURE__ */ jsx(FormFieldSet, {
+		schema: form.schema,
+		classNames: styles.fieldSet({ class: classNames }),
+		...contextProps,
+		...props
+	});
+};
+FormFieldSetContainer$1.displayName = FORM_FIELDSET_NAME;
+var FORM_LAYOUT_NAME = "Form.Layout";
+/** Context-reading binding for `Form.Layout`: resolves the schema (prop or form) and delegates to {@link FormLayout}. */
+var FormLayoutController = ({ schema, ...props }) => {
+	const { form, ...contextProps } = useFormContext(FORM_LAYOUT_NAME);
+	const resolvedSchema = schema ?? form.schema;
+	if (!resolvedSchema) return null;
+	return /* @__PURE__ */ jsx(FormLayout, {
+		schema: resolvedSchema,
+		...contextProps,
+		...props
+	});
+};
+FormLayoutController.displayName = FORM_LAYOUT_NAME;
+var FORM_ACTIONS_NAME = "Form.Actions";
+var FormActions = ({ classNames }) => {
+	const { t } = useTranslation(translationKey);
+	const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
+	if (readonly || layout === "static") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx(withColumn.center(), formTheme.styles().actions(), classNames),
+		children: [onCancel && /* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--x--regular",
+			iconEnd: true,
+			label: t("cancel-button.label"),
+			onClick: onCancel,
+			"data-testid": "cancel-button"
+		}), onSave && /* @__PURE__ */ jsx(IconButton, {
+			type: "submit",
+			variant: "primary",
+			disabled: !canSave,
+			icon: "ph--check--regular",
+			iconEnd: true,
+			label: t("save-button.label"),
+			onClick: onSave,
+			"data-testid": "save-button"
+		})]
+	});
+};
+FormActions.displayName = FORM_ACTIONS_NAME;
+var FORM_SECTION_NAME = "Form.Section";
+var FormSection = composable(({ children, title, description, ...props }, forwardedRef) => {
+	const { variant = "default" } = useFormContext(FORM_SECTION_NAME);
+	const styles = formTheme.styles({ variant });
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, { classNames: styles.section() }),
+		ref: forwardedRef,
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+			className: styles.sectionHeader(),
+			children: [title && /* @__PURE__ */ jsx("h2", {
+				className: styles.sectionTitle(),
+				children: title
+			}), description && /* @__PURE__ */ jsx(MarkdownView, {
+				classNames: styles.sectionDescription(),
+				content: description
+			})]
+		}), children]
+	});
+});
+FormSection.displayName = FORM_SECTION_NAME;
+var FORM_GROUP_NAME = "Form.Group";
+/**
+* A bordered card grouping related rows/controls (e.g. an entity card in a list).
+* Layout-only and context-free — unlike `Form.FieldSet` it is not schema-driven.
+*/
+var FormGroup = composable(({ children, ...props }, forwardedRef) => {
+	const { variant = "default" } = useFormContext(FORM_SECTION_NAME);
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, { classNames: formTheme.styles({ variant }).group() }),
+		ref: forwardedRef,
+		children
+	});
+});
+FormGroup.displayName = FORM_GROUP_NAME;
+var FORM_SUBMIT_NAME = "Form.Submit";
+var FormSubmit = ({ classNames, label, icon, disabled }) => {
+	const { t } = useTranslation(translationKey);
+	const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
+	if (readonly || layout === "static") return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: mx(formTheme.styles().submit(), classNames),
+		children: /* @__PURE__ */ jsx(IconButton, {
+			classNames: "w-full",
+			type: "submit",
+			variant: "primary",
+			disabled: disabled ?? !canSave,
+			icon: icon ?? "ph--check--regular",
+			label: label ?? t("save-button.label"),
+			onClick: onSave,
+			"data-testid": "save-button"
+		})
+	});
+};
+FormSubmit.displayName = FORM_SUBMIT_NAME;
+var FORM_ERROR_NAME = "Form.Error";
+/** Form-level error/validation message (e.g. a failed submit), styled via the error valence. */
+var FormError = ({ children, classNames }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(Input.Root, {
+		validationValence: "error",
+		children: /* @__PURE__ */ jsx(Input.Validation, {
+			classNames,
+			children
+		})
+	});
+};
+FormError.displayName = FORM_ERROR_NAME;
+//#endregion
+//#region src/components/Form/Form.tsx
+var Form = {
+	Root: FormRoot,
+	Viewport: FormViewport,
+	Content: FormContent,
+	Section: FormSection,
+	Group: FormGroup,
+	FieldSet: FormFieldSetContainer$1,
+	Layout: FormLayoutController,
+	Label: FormFieldLabel,
+	Row: FormRow,
+	Actions: FormActions,
+	Submit: FormSubmit,
+	Error: FormError
+};
+//#endregion
+//#region src/components/FieldEditor/FieldEditor.tsx
+var __dxlog_file$3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
+/**
+* Displays a Form representing the metadata for a `Field` within a given `View`.
+*/
+var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
+	const { t } = useTranslation(translationKey);
+	const [props, setProps] = useState(projection.getFieldProjection(field.id).props);
+	useEffect(() => setProps(projection.getFieldProjection(field.id).props), [field, projection]);
+	const [schemas, setSchemas] = useState([]);
+	useAsyncEffect(async () => {
+		if (!registry) return;
+		const subscription = registry.query(Filter.type(Type.Type)).subscribe((query) => setSchemas(query.results), { fire: true });
+		const schemas = await registry.query(Filter.type(Type.Type)).run();
+		setSchemas(schemas);
+		return () => subscription?.();
+	}, [registry]);
+	const [referenceSchema, setReferenceSchema] = useState();
+	useEffect(() => {
+		setReferenceSchema(() => schemas.find((schema) => Type.getTypename(schema) === props?.referenceSchema));
+	}, [schemas, props?.referenceSchema]);
+	const [{ fieldSchema }, setFieldSchema] = useState({ fieldSchema: getFormatSchema(props?.format) });
+	const fieldMap = useMemo(() => ({
+		["format"]: (props) => /* @__PURE__ */ jsx(SelectField, {
+			...props,
+			options: FormatEnums.filter((value) => value !== Format$1.TypeFormat.None).map((value) => ({
+				value,
+				label: t(`format.${value}.label`)
+			}))
+		}),
+		["referenceSchema"]: (props) => /* @__PURE__ */ jsx(SelectField, {
+			...props,
+			options: schemas.map((schema) => Type.getTypename(schema)).filter((typename) => typename != null).map((typename) => ({ value: typename }))
+		}),
+		["referencePath"]: (props) => /* @__PURE__ */ jsx(SelectField, {
+			...props,
+			options: referenceSchema ? getFormProperties(Type.getSchema(referenceSchema).ast).sort((a, b) => a.name.toString().localeCompare(b.name.toString())).map((p) => ({ value: p.name.toString() })) : []
+		}),
+		["options"]: (props) => /* @__PURE__ */ jsx(SelectOptionField, { ...props })
+	}), [
+		t,
+		schemas,
+		referenceSchema
+	]);
+	const propIsNotType = useCallback((props) => props.filter((prop) => prop.name !== "type"), []);
+	const handleValuesChanged = useCallback((_props) => {
+		setFieldSchema((prev) => {
+			const fieldSchema = getFormatSchema(_props.format);
+			if (prev.fieldSchema === fieldSchema) return prev;
+			return { fieldSchema };
+		});
+		setReferenceSchema((prev) => {
+			if (_props.referenceSchema !== (prev ? Type.getTypename(prev) : void 0)) {
+				const newSchema = schemas.find((schema) => Type.getTypename(schema) === _props.referenceSchema);
+				if (newSchema) return newSchema;
+			}
+			return prev;
+		});
+		setProps((props) => {
+			const type = formatToType[_props.format];
+			const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
+			if (props.type !== type) return {
+				...props,
+				..._props,
+				...additionalProps,
+				type
+			};
+			return _props;
+		});
+	}, [
+		schemas,
+		props.format,
+		props.referenceSchema
+	]);
+	const handleValidate = useCallback(({ property }) => {
+		if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) return [{
+			path: "property",
+			message: `property is not unique: '${property}'`
+		}];
+	}, [projection.getFields(), field]);
+	const handleSave = useCallback((props) => {
+		if (view) Obj.update(view, () => {
+			projection.setFieldProjection({
+				field,
+				props
+			});
+		});
+		else projection.setFieldProjection({
+			field,
+			props
+		});
+		onSave();
+	}, [
+		projection,
+		field,
+		view,
+		onSave
+	]);
+	const handleCancel = useCallback(() => {
+		onSave();
+		requestAnimationFrame(() => onCancel?.());
+	}, [onSave]);
+	if (!fieldSchema) {
+		log.warn("invalid format", { props }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$3,
+			L: 185,
+			S: void 0
+		});
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Form.Root, {
+		fieldMap,
+		autoFocus: true,
+		readonly,
+		schema: fieldSchema,
+		values: props,
+		filter: propIsNotType,
+		sort: ["property", "format"],
+		onValuesChanged: handleValuesChanged,
+		onValidate: handleValidate,
+		onSave: handleSave,
+		onCancel: handleCancel,
+		children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsx(Form.FieldSet, {}), /* @__PURE__ */ jsx(Form.Actions, {})] })
+	}, field.id);
+};
+//#endregion
+//#region src/components/ObjectForm/ObjectForm.tsx
+var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectForm/ObjectForm.tsx";
+var ObjectForm = ({ object, type, schema, showTags = true }) => {
+	const db = Obj.getDatabase(object);
+	const [snapshot] = useObject(object);
+	const tags = [...Obj.getMeta(object).tags];
+	const values = useMemo(() => ({
+		[META_TAGS_KEY]: tags,
+		...snapshot
+	}), [snapshot, tags]);
+	const formSchema = useMemo(() => {
+		const base = schema ?? Type.getSchema(type);
+		return showTags ? withMetaTags(base) : omitId(base);
+	}, [
+		schema,
+		type,
+		showTags
+	]);
+	const handleCreate = useCallback((type, values) => {
+		invariant(db, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$2,
+			L: 49,
+			S: void 0,
+			A: ["db", ""]
+		});
+		invariant(Type.isObject(type), void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$2,
+			L: 50,
+			S: void 0,
+			A: ["Type.isObject(type)", ""]
+		});
+		const newObject = db.add(Obj.make(type, values));
+		if (Obj.instanceOf(Tag.Tag, newObject)) Obj.update(object, (object) => {
+			Obj.getMeta(object).tags = [...Obj.getMeta(object).tags, Ref.make(newObject)];
+		});
+	}, []);
+	const handleChange = useCallback(({ [META_TAGS_KEY]: metaTags, ...values }, { isValid, changed }) => {
+		if (!isValid) return;
+		const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+		if (changedPaths.some((path) => SchemaEx.splitJsonPath(path)[0] === "_tags")) Obj.update(object, (object) => {
+			Obj.getMeta(object).tags = Array.isArray(metaTags) ? [...metaTags] : [];
+		});
+		const nonTagPaths = changedPaths.filter((path) => SchemaEx.splitJsonPath(path)[0] !== META_TAGS_KEY);
+		if (nonTagPaths.length > 0) Obj.update(object, () => {
+			for (const path of nonTagPaths) {
+				const parts = SchemaEx.splitJsonPath(path);
+				const value = Obj.getValue(values, parts);
+				Obj.setValue(object, parts, value);
+			}
+		});
+	}, [object]);
+	return /* @__PURE__ */ jsx(Form.Root, {
+		schema: formSchema,
+		values,
+		createTypename: Type.getTypename(Tag.Tag),
+		createOptionIcon: "ph--plus--regular",
+		createOptionLabel: ["add-tag.label", { ns: translationKey }],
+		createInitialValuePath: "label",
+		createFieldMap: createFieldMap$1,
+		db,
+		onValuesChanged: handleChange,
+		onCreate: handleCreate,
+		children: /* @__PURE__ */ jsx(Form.Viewport, { children: /* @__PURE__ */ jsx(Form.Content, { children: /* @__PURE__ */ jsx(Form.FieldSet, {}) }) })
+	});
+};
+var createFieldMap$1 = { hue: ({ type, label, presentation, getValue, onValueChange }) => {
+	const handleChange = useCallback((nextHue) => onValueChange(type, nextHue), [onValueChange, type]);
+	const handleReset = useCallback(() => onValueChange(type, void 0), [onValueChange, type]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [presentation !== "inline" && /* @__PURE__ */ jsx(Form.Label, { label }), /* @__PURE__ */ jsx(HuePicker, {
+		value: getValue(),
+		onChange: handleChange,
+		onReset: handleReset
+	})] });
+} };
+//#endregion
+//#region src/components/ObjectProperties/ObjectProperties.tsx
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectProperties/ObjectProperties.tsx";
+var ObjectProperties = composable(({ children, object, getCreateDefaults, resolveCreateEntry, ...props }, forwardedRef) => {
+	const db = Obj.getDatabase(object);
+	const tags = [...Obj.getMeta(object).tags];
+	const values = useMemo(() => ({
+		[META_TAGS_KEY]: tags,
+		...object
+	}), [object, tags]);
+	const typeFromRegistry = useType(db, Obj.getTypeURI(object));
+	const type = Obj.getType(object) ?? typeFromRegistry;
+	const formSchema = useMemo(() => {
+		return Function.pipe(type, Option.fromNullable, Option.map((type) => Type.getSchema(type)), Option.map((schema) => withMetaTags(schema)), Option.getOrUndefined);
+	}, [type]);
+	const handleCreate = useCallback((type, values) => {
+		invariant(db, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 69,
+			S: void 0,
+			A: ["db", ""]
+		});
+		invariant(Type.isObject(type), void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 70,
+			S: void 0,
+			A: ["Type.isObject(type)", ""]
+		});
+		const factory = Option.getOrUndefined(FactoryAnnotation.get(Type.getSchema(type)));
+		const newObject = factory ? factory(values) : Obj.make(type, values);
+		return db.add(newObject);
+	}, [db]);
+	const handleChange = useCallback(({ [META_TAGS_KEY]: metaTags, ...values }, { isValid, changed }) => {
+		if (!isValid) return;
+		const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+		if (changedPaths.some((path) => SchemaEx.splitJsonPath(path)[0] === "_tags")) Obj.update(object, (object) => {
+			Obj.getMeta(object).tags = Array.isArray(metaTags) ? [...metaTags] : [];
+		});
+		const nonTagPaths = changedPaths.filter((path) => SchemaEx.splitJsonPath(path)[0] !== META_TAGS_KEY);
+		if (nonTagPaths.length > 0) Obj.update(object, () => {
+			for (const path of nonTagPaths) {
+				const parts = SchemaEx.splitJsonPath(path);
+				const value = Obj.getValue(values, parts);
+				Obj.setValue(object, parts, value);
+			}
+		});
+	}, [object]);
+	if (!formSchema) return null;
+	return /* @__PURE__ */ jsx(Form.Root, {
+		db,
+		schema: formSchema,
+		defaultValues: values,
+		createTypename: Type.getTypename(Tag.Tag),
+		createOptionIcon: "ph--plus--regular",
+		createOptionLabel: ["add-tag.label", { ns: translationKey }],
+		createInitialValuePath: "label",
+		createFieldMap,
+		onValuesChanged: handleChange,
+		onCreate: handleCreate,
+		getCreateDefaults,
+		resolveCreateEntry,
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			...composableProps(props),
+			scroll: true,
+			ref: forwardedRef,
+			children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsx(Form.FieldSet, {}), /* @__PURE__ */ jsx(Form.Section, { children })] })
+		})
+	});
+});
+var createFieldMap = { hue: ({ type, label, presentation, getValue, onValueChange }) => {
+	const handleChange = useCallback((nextHue) => onValueChange(type, nextHue), [onValueChange, type]);
+	const handleReset = useCallback(() => onValueChange(type, void 0), [onValueChange, type]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [presentation !== "inline" && /* @__PURE__ */ jsx(Form.Label, { label }), /* @__PURE__ */ jsx(HuePicker, {
+		value: getValue(),
+		onChange: handleChange,
+		onReset: handleReset
+	})] });
+} };
+//#endregion
+//#region src/components/ObjectTree/ObjectTree.tsx
+/**
+* Render a value as a sequence of key/value rows whose shape and order are
+* driven by `schema`. Object-typed properties become a header row whose
+* children are indented under it; arrays expand element-by-element.
+*
+* Composable: spreads unknown props (incl. `className` / `classNames` /
+* `style` / `role`) onto its root `<div>` and forwards its ref, so it can
+* be slotted into themed parents like `Panel.Content`.
+*/
+var ObjectTreeImpl = composable(({ schema, value, ...props }, forwardedRef) => /* @__PURE__ */ jsx("div", {
+	...composableProps(props, {
+		role: "table",
+		classNames: "font-mono text-sm w-full"
+	}),
+	ref: forwardedRef,
+	children: /* @__PURE__ */ jsx(Node, {
+		ast: schema.ast,
+		value,
+		label: null,
+		depth: 0
+	})
+}));
+ObjectTreeImpl.displayName = "ObjectTree";
+var ObjectTree = ObjectTreeImpl;
+/**
+* Peel wrappers that don't affect the runtime shape: Refinements pass their
+* `from`, Suspends resolve via `f()`, and Transformations expose the encoded
+* (input) side. Repeated unwrapping handles chains like `Schema.suspend ->
+* Refinement -> TypeLiteral`.
+*/
+var unwrap = (ast) => {
+	if (SchemaAST.isRefinement(ast)) return unwrap(ast.from);
+	if (SchemaAST.isSuspend(ast)) return unwrap(ast.f());
+	if (SchemaAST.isTransformation(ast)) return unwrap(ast.from);
+	return ast;
+};
+/**
+* Effect models `Schema.optional(X)` as a property whose type AST is
+* `Union(X, UndefinedKeyword)`. For walking purposes we want X -- the
+* undefined branch carries no schema information for the viewer.
+*/
+var stripOptional = (ast) => {
+	if (!SchemaAST.isUnion(ast)) return ast;
+	const nonUndef = ast.types.filter((t) => !SchemaAST.isUndefinedKeyword(t));
+	return nonUndef.length === 1 ? nonUndef[0] : ast;
+};
+var Node = ({ ast, value, label, depth }) => {
+	const inner = unwrap(stripOptional(ast));
+	if (SchemaAST.isTypeLiteral(inner) && isPlainObject(value)) {
+		const childDepth = label === null ? depth : depth + 1;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== null && /* @__PURE__ */ jsx(Row, {
+			label,
+			value: null,
+			depth,
+			kind: "group"
+		}), inner.propertySignatures.map((prop) => /* @__PURE__ */ jsx(Node, {
+			ast: prop.type,
+			value: value[String(prop.name)],
+			label: String(prop.name),
+			depth: childDepth
+		}, String(prop.name)))] });
+	}
+	if (SchemaAST.isTupleType(inner) && Array.isArray(value)) {
+		const elemType = inner.rest[0]?.type;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== null && /* @__PURE__ */ jsx(Row, {
+			label,
+			value: `Array(${value.length})`,
+			depth,
+			kind: "group"
+		}), value.map((item, index) => /* @__PURE__ */ jsx(Node, {
+			ast: elemType ?? SchemaAST.unknownKeyword,
+			value: item,
+			label: `[${index}]`,
+			depth: depth + 1
+		}, index))] });
+	}
+	return /* @__PURE__ */ jsx(Row, {
+		label: label ?? "",
+		value: formatLeaf(value),
+		depth,
+		kind: "leaf"
+	});
+};
+var Row = ({ label, value, depth }) => /* @__PURE__ */ jsxs("div", {
+	role: "row",
+	className: mx("flex items-baseline gap-3 py-1"),
+	style: { paddingInlineStart: 8 + depth * 16 },
+	children: [/* @__PURE__ */ jsx("div", {
+		role: "cell",
+		className: "text-subdued",
+		children: label
+	}), /* @__PURE__ */ jsx("div", {
+		role: "cell",
+		className: mx("break-all text-base-fg"),
+		children: value
+	})]
+});
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/**
+* Format a leaf value for display. Strings are quoted so empty strings are
+* visible; missing values surface as an em-dash so the row stays present.
+*/
+var formatLeaf = (value) => {
+	if (value === void 0) return null;
+	if (value === null) return /* @__PURE__ */ jsx("span", {
+		className: "text-description",
+		children: "null"
+	});
+	switch (typeof value) {
+		case "string": return /* @__PURE__ */ jsx("span", {
+			className: "text-blue-text",
+			children: JSON.stringify(value)
+		});
+		case "number":
+		case "bigint": return /* @__PURE__ */ jsx("span", {
+			className: "text-green-text",
+			children: String(value)
+		});
+		case "boolean": return /* @__PURE__ */ jsx("span", {
+			className: "text-purple-text",
+			children: String(value)
+		});
+		default: try {
+			return JSON.stringify(value);
+		} catch {
+			return String(value);
+		}
+	}
+};
+//#endregion
+//#region src/components/RefEditor/ref-editor-extension.ts
+/** Matches an object reference token (`@<object id>`). */
+var REF_REGEX = /^@([A-Za-z0-9]+)$/;
+/** Matches a well-formed email address token. */
+var EMAIL_REGEX = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+/** Matches an RFC 5322 name-addr (`Name <email>`); group 1 = display name, group 2 = addr-spec. */
+var NAME_ADDR_REGEX = /^(.*?)\s*<([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,})>$/;
+/** Formats an RFC 5322 mailbox (`Name <email>`). */
+var formatMailbox = (name, email) => name ? `${name} <${email}>` : email;
+/**
+* Effect dispatched when reference data changes out-of-band (e.g. objects finish loading) so that
+* already-rendered reference decorations re-resolve without a document change.
+*/
+var refEditorRedecorate = StateEffect.define();
+/**
+* CodeMirror extension rendering reference-editor tokens as tags. Tags are atomic: the cursor
+* cannot enter them and deletion removes the whole token.
+* - `'ref'` mode: `@<id>` references resolve to the object's label (via
+*   {@link RefEditorExtensionOptions.getRef}); tokens accepted by the pluggable `match` regexp
+*   render as neutral tags.
+* - `'email'` mode: RFC 5322 mailboxes render as tags labelled with the display name (falling
+*   back to the address); the trailing comma separator is hidden inside the tag's atomic range.
+*/
+var refEditor = ({ mode = "ref", getRef, match, colorize } = {}) => {
+	let decoField;
+	/** Delete the tag whose delete affordance (`node`) was clicked, keeping the delimited list well-formed. */
+	const removeToken = (view, node) => {
+		const index = [...view.contentDOM.querySelectorAll("button[aria-label=\"Remove\"]")].indexOf(node);
+		if (index < 0) return;
+		const cursor = view.state.field(decoField).iter();
+		let range;
+		for (let current = 0; cursor.value; current++, cursor.next()) if (current === index) {
+			range = {
+				from: cursor.from,
+				to: cursor.to
+			};
+			break;
+		}
+		if (!range) return;
+		const doc = view.state.doc.toString();
+		let { from } = range;
+		const { to } = range;
+		if (mode === "email" && !/,\s*$/.test(doc.slice(from, to))) {
+			const dangling = doc.slice(0, from).match(/,\s*$/);
+			if (dangling) from -= dangling[0].length;
+		}
+		view.dispatch({
+			changes: {
+				from,
+				to
+			},
+			selection: { anchor: from }
+		});
+	};
+	const buildRefDecorations = (state) => {
+		const deco = new RangeSetBuilder();
+		const text = state.doc.toString();
+		const tokenRegex = /\S+/g;
+		let tokenMatch;
+		while (tokenMatch = tokenRegex.exec(text)) {
+			const token = tokenMatch[0];
+			const from = tokenMatch.index;
+			const to = from + token.length;
+			const refMatch = token.match(REF_REGEX);
+			if (refMatch) {
+				const ref = getRef?.(refMatch[1]);
+				if (ref) deco.add(from, to, Decoration.replace({ widget: new RefWidget(ref.label, ref.hue ?? (colorize ? getHashHue(refMatch[1]) : void 0), removeToken) }));
+				continue;
+			}
+			if (match?.test(token)) deco.add(from, to, Decoration.replace({ widget: new RefWidget(token, void 0, removeToken) }));
+		}
+		return deco.finish();
+	};
+	const buildEmailDecorations = (state) => {
+		const addrRegex = match ?? EMAIL_REGEX;
+		const deco = new RangeSetBuilder();
+		const text = state.doc.toString();
+		const segmentRegex = /[^,]+(?:,\s*)?|,\s*/g;
+		let segmentMatch;
+		while (segmentMatch = segmentRegex.exec(text)) {
+			const segment = segmentMatch[0];
+			const commaIndex = segment.indexOf(",");
+			const content = (commaIndex === -1 ? segment : segment.slice(0, commaIndex)).trim();
+			if (!content) continue;
+			if (commaIndex === -1) continue;
+			const leading = segment.length - segment.trimStart().length;
+			const from = segmentMatch.index + leading;
+			const to = segmentMatch.index + segment.length;
+			const nameAddr = content.match(NAME_ADDR_REGEX);
+			if (nameAddr) deco.add(from, to, Decoration.replace({ widget: new RefWidget(nameAddr[1] || nameAddr[2], colorize ? getHashHue(nameAddr[2]) : void 0, removeToken) }));
+			else if (addrRegex.test(content)) deco.add(from, to, Decoration.replace({ widget: new RefWidget(content, void 0, removeToken) }));
+		}
+		return deco.finish();
+	};
+	const buildDecorations = mode === "email" ? buildEmailDecorations : buildRefDecorations;
+	decoField = StateField.define({
+		create: (state) => buildDecorations(state),
+		update: (deco, tr) => {
+			if (tr.docChanged || tr.effects.some((effect) => effect.is(refEditorRedecorate))) return buildDecorations(tr.state);
+			return deco;
+		},
+		provide: (field) => [EditorView.decorations.from(field), EditorView.atomicRanges.of((view) => view.state.field(field))]
+	});
+	const separator = mode === "email" ? ", " : " ";
+	const separatorFilter = EditorState.transactionFilter.of((tr) => {
+		if (!tr.docChanged || !tr.isUserEvent("input")) return tr;
+		const tags = tr.startState.field(decoField, false);
+		if (!tags) return tr;
+		let extra;
+		tr.changes.iterChanges((fromA, toA, _fromB, toB, inserted) => {
+			if (extra || fromA !== toA) return;
+			const text = inserted.toString();
+			if (!text || /[\s,]$/.test(text)) return;
+			let abutsTag = false;
+			for (const cursor = tags.iter(); cursor.value; cursor.next()) {
+				if (cursor.from === fromA) {
+					abutsTag = true;
+					break;
+				}
+				if (cursor.from > fromA) break;
+			}
+			if (abutsTag) extra = {
+				changes: {
+					from: toB,
+					insert: separator
+				},
+				sequential: true,
+				selection: { anchor: toB }
+			};
+		});
+		return extra ? [tr, extra] : tr;
+	});
+	return [
+		styles,
+		decoField,
+		separatorFilter
+	];
+};
+/**
+* The outer span vertically aligns the tag with the surrounding line and adds a trailing gap so
+* adjacent tags don't touch. The inner span carries the border; `overflow-hidden` clips the child
+* fills to its radius (a square-cornered fill otherwise peeks past the rounded border).
+*/
+var container = (classNames, ...children) => {
+	const inner = Domino.of("span").classNames(mx("inline-flex items-stretch border rounded-xs overflow-hidden", classNames)).append(...children);
+	return Domino.of("span").classNames("inline-flex align-middle pe-1").append(inner).root;
+};
+/** Trailing `x` affordance that deletes the tag it belongs to. */
+var deleteButton = (view, remove) => {
+	const button = Domino.of("button").classNames("flex items-center px-1 text-description hover:text-error cursor-pointer").attributes({
+		"type": "button",
+		"aria-label": "Remove"
+	}).append(Domino.svg("ph--x--bold").classNames("shrink-0 w-3.5 h-3.5")).on("mousedown", (event) => {
+		event.preventDefault();
+		remove(view, button.root);
+	});
+	return button;
+};
+/**
+* Resolved reference (object reference or RFC 5322 mailbox), rendered as the object's label with a
+* trailing delete affordance.
+*/
+var RefWidget = class extends WidgetType {
+	_label;
+	_hue;
+	_remove;
+	constructor(_label, _hue, _remove) {
+		super();
+		this._label = _label;
+		this._hue = _hue;
+		this._remove = _remove;
+	}
+	eq(other) {
+		return this._label === other._label && this._hue === other._hue;
+	}
+	toDOM(view) {
+		return container(mx("border-separator rounded-sm", (this._hue ? getStyles(this._hue) : void 0)?.border), Domino.of("span").classNames("flex items-center ps-2 pe-1").text(this._label), deleteButton(view, this._remove));
+	}
+};
+var styles = EditorView.theme({ ".cm-line": {
+	padding: "0",
+	display: "flex",
+	alignItems: "center"
+} });
+//#endregion
+//#region src/components/RefEditor/RefEditor.tsx
+/**
+* Single-line input for a list of object references. Typing `@` (or any text, with
+* `activateOnTyping`) opens a typeahead menu matching objects of the given type by label (and
+* by their `getValues` values). The content model depends on {@link RefEditorProps.mode}.
+* Resolved entries render as atomic tags with the object's label; raw tokens accepted by the
+* pluggable `match` regexp render as neutral tags.
+*/
+var RefEditor = forwardRef(({ db, type, value, readonly, mode = "ref", match, getLabel, getValues, icon = "ph--link--regular", placeholder: placeholderProp, activateOnTyping, numItems = 8, classNames, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const { themeMode } = useThemeContext();
+	const getObjectLabel = useCallback((object) => getLabel?.(object) ?? Obj.getLabel(object) ?? object.id, [getLabel]);
+	const objects = useQuery(db, useMemo(() => Filter.type(type), [type]));
+	const refs = useMemo(() => new Map(objects.map((object) => [object.id, {
+		label: getObjectLabel(object),
+		hue: getHashHue(object.id)
+	}])), [objects, getObjectLabel]);
+	const refsRef = useRef(refs);
+	refsRef.current = refs;
+	const controllerRef = useRef(null);
+	const composedRef = useCallback((controller) => {
+		controllerRef.current = controller;
+		if (typeof forwardedRef === "function") forwardedRef(controller);
+		else if (forwardedRef) forwardedRef.current = controller;
+	}, [forwardedRef]);
+	useEffect(() => {
+		controllerRef.current?.view?.dispatch({ effects: refEditorRedecorate.of(null) });
+	}, [refs]);
+	const getMenu = useCallback(async ({ text }) => {
+		if (!text) return [];
+		const query = text.replace(/^@/, "").toLowerCase();
+		const matchesQuery = (object) => !query || getObjectLabel(object).toLowerCase().includes(query) || (getValues?.(object) ?? []).some((entry) => entry.toLowerCase().includes(query));
+		if (mode === "email") return [{
+			id: "mailboxes",
+			items: objects.flatMap((object) => (getValues?.(object) ?? []).map((entry) => ({
+				object,
+				entry
+			}))).filter(({ object, entry }) => !query || getObjectLabel(object).toLowerCase().includes(query) || entry.toLowerCase().includes(query)).slice(0, numItems * 2).map(({ object, entry }) => ({
+				id: `${object.id}-${entry}`,
+				label: `${getObjectLabel(object)} (${entry})`,
+				icon,
+				onSelect: ({ view, head }) => insertMailbox(view, head, formatMailbox(getObjectLabel(object), entry))
+			}))
+		}];
+		return [{
+			id: "refs",
+			items: objects.filter(matchesQuery).slice(0, numItems * 2).map((object) => {
+				const label = getObjectLabel(object);
+				const detail = getValues?.(object)?.[0];
+				return {
+					id: object.id,
+					label: detail && detail !== label ? `${label} (${detail})` : label,
+					icon,
+					onSelect: ({ view, head }) => insertAtCursor(view, head, `@${object.id} `)
+				};
+			})
+		}];
+	}, [
+		objects,
+		numItems,
+		mode,
+		icon,
+		getObjectLabel,
+		getValues
+	]);
+	const placeholder = useMemo(() => ({
+		content: placeholderProp ?? t(activateOnTyping ? "ref-editor-auto.placeholder" : "ref-editor.placeholder"),
+		focusOnly: false
+	}), [
+		t,
+		placeholderProp,
+		activateOnTyping
+	]);
+	const extensions = useMemo(() => [
+		createBasicExtensions({
+			readOnly: readonly,
+			lineWrapping: false
+		}),
+		createThemeExtensions({
+			themeMode,
+			slots: {
+				editor: { className: "w-full" },
+				scroller: { className: "scrollbar-none" }
+			}
+		}),
+		refEditor({
+			mode,
+			match,
+			getRef: (id) => refsRef.current.get(id)
+		}),
+		Prec.highest(keymap.of([{
+			key: "Enter",
+			run: (view) => {
+				const { head } = view.state.selection.main;
+				const line = view.state.doc.lineAt(head);
+				const before = line.text.slice(0, head - line.from);
+				if (mode === "email") {
+					const segment = before.slice(before.lastIndexOf(",") + 1).trim();
+					if (NAME_ADDR_REGEX.test(segment) || (match ?? EMAIL_REGEX).test(segment)) insertAtCursor(view, head, ", ");
+				} else {
+					const token = before.slice(before.search(/\S+$/));
+					if (token && match?.test(token)) insertAtCursor(view, head, " ");
+				}
+				return true;
+			}
+		}, {
+			key: "Space",
+			run: (view) => {
+				if (mode !== "email") return false;
+				const { head } = view.state.selection.main;
+				const line = view.state.doc.lineAt(head);
+				const before = line.text.slice(0, head - line.from);
+				const segment = before.slice(before.lastIndexOf(",") + 1).trim();
+				if ((match ?? EMAIL_REGEX).test(segment)) {
+					insertAtCursor(view, head, ", ");
+					return true;
+				}
+				return false;
+			}
+		}]))
+	], [
+		readonly,
+		themeMode,
+		mode,
+		match
+	]);
+	return /* @__PURE__ */ jsx(Editor.Root, {
+		extensions,
+		numItems,
+		trigger: "@",
+		activateOnTyping,
+		placeholder,
+		filter: false,
+		getMenu,
+		ref: composedRef,
+		children: /* @__PURE__ */ jsx(Editor.View, {
+			...props,
+			classNames: mx("flex items-center dx-input h-[2rem]", classNames),
+			initialValue: value,
+			selectionEnd: true
+		})
+	});
+});
+RefEditor.displayName = "RefEditor";
+/**
+* Insert an RFC 5322 mailbox, replacing the in-progress segment (anything typed after the last
+* comma — multi-word queries can leave words outside the popover's completion range).
+*/
+var insertMailbox = (view, head, mailbox) => {
+	const line = view.state.doc.lineAt(head);
+	const lastComma = line.text.slice(0, head - line.from).lastIndexOf(",");
+	const from = line.from + (lastComma === -1 ? 0 : lastComma + 1);
+	const insert = `${lastComma === -1 ? "" : " "}${mailbox}, `;
+	view.dispatch({
+		changes: {
+			from,
+			to: head,
+			insert
+		},
+		selection: {
+			anchor: from + insert.length,
+			head: from + insert.length
+		}
+	});
+};
+//#endregion
+//#region src/components/ViewEditor/ViewEditor.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+/**
+* View editor form.
+*/
+var ViewEditor = forwardRef(({ classNames, type, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
+	const atomRegistry = useContext(RegistryContext);
+	const schemaReadonly = type == null || Type.getDatabase(type) == null;
+	const { t } = useTranslation(translationKey);
+	const projectionModel = useMemo(() => {
+		if (!type) return null;
+		const jsonSchema = type.jsonSchema;
+		const change = createEchoChangeCallback(view, Type.getDatabase(type) != null ? type : void 0);
+		return new ProjectionModel({
+			registry: atomRegistry,
+			view,
+			baseSchema: jsonSchema,
+			change
+		});
+	}, [
+		atomRegistry,
+		type,
+		view
+	]);
+	useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
+	const feedTarget = Match.value(view.query.ast).pipe(Match.when({ type: "from" }, ({ from }) => {
+		if (from._tag !== "scope") return;
+		const feedScope = from.scopes.find((s) => s._tag === "feed");
+		return Option.fromNullable(feedScope).pipe(Option.map((s) => s.feedUri), Option.getOrUndefined);
+	}), Match.orElse(() => void 0));
+	const feeds = useQuery(db, Filter.type(Feed.Feed));
+	const targetRef = useMemo(() => {
+		if (!feedTarget) return;
+		const targetEid = EID.tryParse(feedTarget);
+		const feed = feeds.find((feed) => {
+			const feedEid = Feed.getFeedUri(feed);
+			return feedEid != null && targetEid != null && EID.equals(feedEid, targetEid);
+		});
+		return feed ? Ref.fromURI(Entity.getURI(feed)) : void 0;
+	}, [feedTarget, feeds]);
+	const viewSchema = useMemo(() => {
+		const base = Schema.Struct({ query: mode === "schema" ? Format.URL.annotations({ title: "Record type" }) : QueryAST.Query.annotations({ title: "Query" }) });
+		if (mode === "tag") return Schema.Struct({
+			...base.fields,
+			target: Ref.Ref(Feed.Feed).pipe(Schema.annotations({ title: "Target Feed" }), ParentLabelAnnotation.set(true), Schema.optional)
+		}).pipe(Schema.mutable);
+		return base.pipe(Schema.mutable);
+	}, [mode]);
+	const viewValues = useMemo(() => {
+		const typeUri = getTypeURIFromQuery(view.query.ast);
+		const typeDxn = typeUri ? DXN.tryMake(typeUri) : void 0;
+		return {
+			query: mode === "schema" ? typeDxn ? DXN.getName(typeDxn) : typeUri ?? "" : view.query.ast,
+			target: targetRef
+		};
+	}, [
+		mode,
+		view.query.ast,
+		targetRef
+	]);
+	const fieldMap = useMemo(() => mode === "tag" ? customFields({
+		types,
+		tags
+	}) : void 0, [
+		mode,
+		types,
+		tags
+	]);
+	const handleUpdate = useCallback((values) => {
+		const targetValue = values.target;
+		let feedDxn;
+		if (Ref.isRef(targetValue)) {
+			const feedUri = targetValue.uri;
+			const feed = feeds.find((feed) => Obj.getURI(feed) === feedUri);
+			if (feed) feedDxn = Feed.getFeedUri(feed);
+		}
+		const query = mode === "schema" ? Query.select(Filter.type(EID.isEID(values.query) ? values.query : DXN.make(values.query))).ast : JSON.parse(JSON.stringify(values.query));
+		onQueryChanged?.(query, feedDxn);
+	}, [
+		onQueryChanged,
+		mode,
+		feeds
+	]);
+	const handleDelete = useCallback((fieldId) => {
+		invariant(!readonly, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 207,
+			S: void 0,
+			A: ["!readonly", ""]
+		});
+		onDelete?.(fieldId);
+	}, [onDelete, readonly]);
+	return /* @__PURE__ */ jsx("div", {
+		className: mx(classNames),
+		children: /* @__PURE__ */ jsx(Form.Root, {
+			schema: viewSchema,
+			values: viewValues,
+			fieldMap,
+			db,
+			onValuesChanged: handleUpdate,
+			children: /* @__PURE__ */ jsx(Form.Viewport, { children: /* @__PURE__ */ jsxs(Form.Content, { children: [
+				schemaReadonly && !readonly && /* @__PURE__ */ jsx(Message.Root, {
+					valence: "info",
+					classNames: "my-form-padding",
+					children: /* @__PURE__ */ jsx(Message.Title, { children: t("system-schema.description") })
+				}),
+				/* @__PURE__ */ jsx(Form.FieldSet, {}),
+				type && /* @__PURE__ */ jsx(FieldList, {
+					type,
+					view,
+					registry,
+					readonly,
+					showHeading,
+					onDelete: handleDelete
+				})
+			] }) })
+		})
+	});
+});
+var customFields = ({ types, tags }) => ({ query: ({ type, readonly, label, getValue, onValueChange }) => {
+	const handleChange = useCallback((query) => onValueChange(type, query.ast), [onValueChange]);
+	return /* @__PURE__ */ jsxs(Input.Root, { children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+		readonly,
+		label
+	}), /* @__PURE__ */ jsx(QueryForm, {
+		initialQuery: getValue(),
+		types,
+		tags,
+		onChange: handleChange
+	})] });
+} });
+var FieldList = ({ type, view, registry, readonly, showHeading = false, onDelete }) => {
+	const atomRegistry = useContext(RegistryContext);
+	const schemaReadonly = Type.getDatabase(type) == null;
+	const { t } = useTranslation(translationKey);
+	const [viewSnapshot] = useObject(view);
+	const projectionModel = useMemo(() => {
+		const jsonSchema = type.jsonSchema;
+		const change = createEchoChangeCallback(view, Type.getDatabase(type) != null ? type : void 0);
+		return new ProjectionModel({
+			registry: atomRegistry,
+			view,
+			baseSchema: jsonSchema,
+			change
+		});
+	}, [
+		atomRegistry,
+		type,
+		view
+	]);
+	const [expandedField, setExpandedField] = useState();
+	const handleAdd = useCallback(() => {
+		invariant(!readonly, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 290,
+			S: void 0,
+			A: ["!readonly", ""]
+		});
+		const field = projectionModel.createFieldProjection();
+		setExpandedField(field.id);
+	}, [projectionModel, readonly]);
+	const handleDelete = useCallback((fieldId) => {
+		invariant(!readonly, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 297,
+			S: void 0,
+			A: ["!readonly", ""]
+		});
+		if (fieldId === expandedField) setExpandedField(void 0);
+		onDelete?.(fieldId);
+	}, [
+		expandedField,
+		onDelete,
+		readonly
+	]);
+	const handleMove = useCallback((fromIndex, toIndex) => {
+		invariant(!readonly, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 309,
+			S: void 0,
+			A: ["!readonly", ""]
+		});
+		Obj.update(view, (view) => {
+			const fields = [...view.projection.fields];
+			const [moved] = fields.splice(fromIndex, 1);
+			fields.splice(toIndex, 0, moved);
+			view.projection.fields = fields;
+		});
+	}, [view, readonly]);
+	const handleClose = useCallback(() => setExpandedField(void 0), []);
+	const handleHide = useCallback((fieldId) => {
+		setExpandedField(void 0);
+		projectionModel.hideFieldProjection(fieldId);
+	}, [projectionModel]);
+	const handleShow = useCallback((property) => {
+		setExpandedField(void 0);
+		projectionModel.showFieldProjection(property);
+	}, [projectionModel]);
+	if (!viewSnapshot) return null;
+	return /* @__PURE__ */ jsx(OrderedList.Root, {
+		items: viewSnapshot.projection.fields,
+		isItem: Schema.is(View.FieldSchema),
+		getId: (field) => field.id,
+		onMove: readonly ? void 0 : handleMove,
+		readonly,
+		expandedId: expandedField,
+		onExpandedChange: setExpandedField,
+		children: ({ items: fields }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(FormFieldHeader, {
+				label: t("fields.label"),
+				readonly,
+				add: {
+					label: t("add-property-button.label"),
+					disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
+					onClick: handleAdd
+				}
+			}),
+			showHeading && /* @__PURE__ */ jsx(FormFieldLabel, {
+				standalone: true,
+				classNames: "py-1",
+				label: t("field-path.label")
+			}),
+			/* @__PURE__ */ jsx(OrderedList.Content, { children: fields.map((field) => {
+				const hidden = field.visible === false;
+				return /* @__PURE__ */ jsx(OrderedList.DetailItem, {
+					id: field.id,
+					item: field,
+					canDrag: !readonly && !schemaReadonly,
+					expandable: !readonly,
+					title: field.path,
+					titleClassNames: hidden ? "text-subdued" : void 0,
+					actions: /* @__PURE__ */ jsx(ToggleIconButton, {
+						iconOnly: true,
+						variant: "ghost",
+						active: hidden,
+						icon: "ph--eye--regular",
+						activeIcon: "ph--eye-closed--regular",
+						label: t(hidden ? "show-field.label" : "hide-field.label"),
+						"data-testid": hidden ? "show-field-button" : "hide-field-button",
+						disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
+						onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
+					}),
+					trailing: !readonly && /* @__PURE__ */ jsx(CompactIconButton, {
+						icon: "ph--x--regular",
+						label: t("delete-field.label"),
+						disabled: schemaReadonly || viewSnapshot.projection.fields.length <= 1,
+						onClick: () => handleDelete(field.id),
+						"data-testid": "field.delete"
+					}),
+					children: /* @__PURE__ */ jsx(FieldEditor, {
+						readonly: readonly || schemaReadonly,
+						registry,
+						projection: projectionModel,
+						field,
+						onSave: handleClose
+					})
+				}, field.id);
+			}) })
+		] })
+	});
+};
+//#endregion
+export { ArrayField, AsyncSelectField, AutofillAnnotation, AutofillAnnotationId, AutofillField, BooleanField, ComboboxField, CompactIconButton, DateField, EMAIL_REGEX, FieldEditor, Form, FormContextProvider, FormField, FormFieldErrorBoundary, FormFieldHeader, FormFieldLabel, FormFieldSet, FormFieldSetContainer, FormRow, GeoPointField, InlineRefField, META_TAGS_KEY, MarkdownField, NAME_ADDR_REGEX, NumberField, ObjectForm, ObjectPicker, ObjectProperties, ObjectTree, OptionsLookupAnnotation, OptionsLookupAnnotationId, PasswordField, REF_REGEX, RefEditor, RefField, SelectField, SelectOptionField, TextAreaField, TextField, TupleField, ViewEditor, autofill, cellClassesForFieldType, createSelectField, findRefOption, formatMailbox, getDefaultValue, getFormProperties, getNumericConstraints, getRefProps, getRootFormProperties, omitHiddenFormFields, omitId, optionsLookup, parseValue, pathNotUniqueError, pickValues, presentationFor, refEditor, refEditorRedecorate, useAsyncFieldEffect, useFormContext, useFormFieldState, useFormHandler, useFormValues, useKeyHandler, withMetaTags };
+
+//# sourceMappingURL=index.mjs.map